:root {
  --gradient-light: rgba(255,255,255,0.1);
  --bezel: rgba(45, 55, 72, 0.15);
  --gradient-darker: rgba(45, 55, 72, 0.1);
  --gradient-dark: rgba(45, 55, 72, 0.04);
  --shadow: rgba(45, 55, 72, 0.5);
  --laptop-body: #FBFBFB;
}

/* --------------------- Text Rotate --------------------- */

.fade-in-rotate {
	animation-name: fade-it;
	animation-duration: 1s;
	animation-fill-mode: both;
	-webkit-animation-name: fade-it;
	-webkit-animation-duration: 1s;
	-webkit-animation-fill-mode: both
}

.rotate.rotate-block { display: inline-block }

.rotate.rotate-hide {
	display: none;
	opacity: 0
}

.rotate {
	display: inline-block;
	visibility: visible;
	color: #F6AD55;
}

@media (max-width: 768px) {
	.rotate {
		display: block !important;
	}
}

/* --------------------- Macbook --------------------- */

.macbook {
	padding: 0%;
	margin: 5em -80px;
	background: white;
	/*max-width: 800px;*/
}

@media (max-width: 768px) {
	.macbook {
		margin: 5em 0px;
	}
}

.screen {
	background-color: var(--bezel);
	box-shadow: 0 20px 100px -50px var(--shadow);
	border-radius: 3% 3% 0.5% 0.5% / 5%;
	margin: 0 auto;
	/* for aspect ratio */
	position: relative;
	width: 85%;
}

.screen:before {
	border: 2px solid white;
	border-bottom: none;
	border-radius: 3% 3% 0.5% 0.5% / 5%;
	content: "";
	display: block;
	/* for aspect ratio ~67:100 */
	padding-top: 67%;
}

.viewport {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	margin: 3.3% 2.2%;
	background: white;
	background-size: cover;
}

.base {
	/* for aspect ratio */
	position: relative;
	width: 100%;
}

.base:before {
	content: "";
	display: block;
	padding-top: 2%;
	/* stylin */
	background: var(--laptop-body);
	background-image: -webkit-linear-gradient(left, var(--gradient-darker) 0%, var(--gradient-light) 2%, var(--gradient-light) 98%, var(--gradient-darker) 100%);
	background-image: -o-linear-gradient(left, var(--gradient-darker) 0%, var(--gradient-light) 2%, var(--gradient-light) 98%, var(--gradient-darker) 100%);
	background-image: linear-gradient(to right, var(--gradient-darker) 0%, var(--gradient-light) 2%, var(--gradient-light) 98%, var(--gradient-darker) 100%);
	border-radius: 0 0 10% 10%/ 0 0 50% 50%;
	box-shadow: 0 3px 3px 0 rgba(0,0,0,0.1);
}

.base::after {
	background: white;
	background-image: linear-gradient(180deg, var(--gradient-light) 0%, rgba(0,0,0,0.05) 100%);
	content: "";
	height: 60%;
	position: absolute;
	top: 0;
	width: 100%;
}

.notch {
	/*background: var(--laptop-body);*/
	/*background-image: linear-gradient(270deg, var(--gradient-darker) 0%, var(--gradient-light) 30%, var(--gradient-light) 75%, var(--gradient-darker) 100%);*/
	background: #F9F7F7;
	background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.04) 0%, rgba(233,233,233,0.04) 8%, rgba(255,255,255,0.04) 92%, rgba(0,0,0,0.04) 100%);
	background-image: -o-linear-gradient(right, rgba(0,0,0,0.04) 0%, rgba(233,233,233,0.04) 8%, rgba(255,255,255,0.04) 92%, rgba(0,0,0,0.04) 100%);
	background-image: linear-gradient(to left, rgba(0,0,0,0.04) 0%, rgba(233,233,233,0.04) 8%, rgba(255,255,255,0.04) 92%, rgba(0,0,0,0.04) 100%);
	border-radius: 0 0 7% 7% / 0 0 95% 95%;
	margin-left: auto;
	margin-right: auto;
	margin-top: -2.0%;
	z-index: 2;
	/* for aspect ratio */
	position: relative;
	width: 12%;
}

.notch:before {
	content: "";
	display: block;
	/* for aspect ratio ~1:10 */
	padding-top: 10%;
}

.macbook .viewport {
	background-position: 0 0;
	background-size: 100% auto;
	overflow: hidden;
	display: none;
	-webkit-animation-name: fade-it;
	animation-name: fade-it;
	-webkit-animation-duration: 1.8s;
	animation-duration: 1.8s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}

.macbook .viewport.showing {
	display: block;
}

.macbook .viewport:after {
  background: transparent;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
/* Macbook mocks */


/* --------------------- Animations --------------------- */


@-moz-keyframes
fade-it {
	0% { opacity: 0 }
	100% { opacity: 1 }
}

@-webkit-keyframes
fade-it {
	0% { opacity: 0 }
	100% { opacity: 1 }
}

@keyframes
fade-it {
	0% { opacity: 0 }
	100% { opacity: 1 }
}