@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Edu+SA+Beginner:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

	@font-face {
		font-family: 'erhan';
		src: url('../font/erhan.eot?83835372');
		src: url('../font/erhan.eot?83835372#iefix') format('embedded-opentype'),
			url('../font/erhan.woff?83835372') format('woff'),
			url('../font/erhan.ttf?83835372') format('truetype'),
			url('../font/erhan.svg?83835372#erhan') format('svg');
		font-weight: normal;
		font-style: normal;
    }

	* { 
		box-sizing: border-box; 
		padding: 0; 
		margin: 0; 
		font-family: 'Open Sans', 'erhan', 
		sans-serif; 
	}

	html * {
		box-sizing: border-box;
		font-size: 15px;  
		font-family: 'Open Sans', 'erhan', tahoma, arial;  
		font-weight: 400;
		color: #353433;
		margin: 0; padding: 0;
		-webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;
		scroll-behavior: smooth;
	}

	body,header,table,section,article,div,span,a,ul,li,footer,img,b,u,i { 
		margin: 0; padding: 0; outline: none; 
	}

	.Ficon {font-size:18px; font-style:normal; color:inherit; padding-right:5px; line-height:inherit; }
	
	.Ficon2 {font-size:24px; font-style:normal; color:inherit; padding-right:5px; line-height:inherit; }
	
	.Font18R {font-size: 18px }
	
	.Font20R {font-size: 20px }
	
	.Font22R {font-size: 22px }
	
	.Font24R {font-size: 24px }
	
	a { text-decoration: none; outline: none; }
	
	strong, .bold, b { font-weight: 600; }
	
	body {  background: #FEFEFE;height:100vh }
	
	section { float: left; width: 100%; }
	
	.cwhite { color: #FEFEFE; }
	
	.unselectable, .uns { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
	
	.dnone { display: none; }
	
	.dblock {display: block; }
	
	.dinline {display:inline; }
	
	.dinlineb {display: inline-block; }
	
	.vhidden { visibility: hidden; }
	
	.vvisible { visibility: visible; }
	
	.addHand { cursor: pointer; }
	
	.dflex { display: flex; }
	
	.fleft { float: left; }
	
	.fright { float: right; }
	
	.tleft { text-align: left; }
	
	.tcenter { text-align: center; }
	
	.fcenter { justify-content: center; }
	
	.tright { text-align: right }
	
	.wall { width: 100%; float: left; }
	
	.w90 { width: 90%; float: left; margin: 0 5%; }
	
	.w94 { width: 94%; float: left; margin: 0 3%; }
	
	.addShadow { box-shadow: rgba(172, 172, 172, 0.25) 0px 1px 6px 0px; }

	.mt10px { margin-top: 10px !important}
	
	.mb10px { margin-bottom: 10px !important }
	
	.ml10px { margin-left: 10px !important }

	.mt12px { margin-top: 12px !important}
	
	.mb12px { margin-bottom: 12px !important }
	
	.ml12px { margin-left: 12px !important }

	.mt20px, .mt20pxR { margin-top: 20px; }
	
	.mb20px {margin-bottom: 20px;}
	
	.mt40px { margin-top: 40px; }
	
	.mb40px { margin-bottom: 150px; }
	
	.mb120px { margin-bottom: 120px; }
	
	.mb40pxR { margin-bottom: 40px; }

	.fred {color: #DE0000;}
	
	.fblue {color:#03045e; }
	
	.prelative { position: relative; }
	
	.pabsolute { position: absolute; } 
	
	.mt80px {margin-top:120px !important}
	
	.fullwidthimg { display:block; width:100%; height:auto; }

	.hideondesktop, .hideonmobile {display:none !important; visibility:hidden !important;}

	#videoDiv{
	  position: relative;
	  width: 100%;
	  margin-top: 60px;
	  height: clamp(320px, 60vh, 700px);
	  overflow: hidden;
	  border-radius: 0 0 .5rem .5rem;
	}

	#videoDiv video{
	  position: absolute;
	  inset: 0;           
	  width: 100%;
	  height: 100%;
	  object-fit: cover; 
	}

	#videoDiv::after{
	  content: "";
	  position: absolute;
	  inset: 0;
	  background: #323232;   
	  opacity: .4;         
	  pointer-events: none;
	}

	#videoDiv span{
	  position: absolute; inset: 0;
	  display: flex; flex-direction: column;
	  justify-content: center; align-items: center;
	  color: #FEFEFE; z-index: 1;
	  width: 100%; height: 100%;
	  padding: 0 3%;

	}

	#videoDiv span b,
	#videoDiv span p{
	  width: min(100%, 900px);
	  text-align: center;
	  color:inherit;
	}

	#videoDiv span b{
	  font-size: clamp(28px, 4.8vw, 48px);
	  line-height: 1.15;
	  margin: 0 0 18px;
	}
	#videoDiv span p{
	  font-size: clamp(16px, 2vw, 20px);
	  line-height: 1.5;
	  margin: 8px 0 0;
	}

	#CONTENT { display:block; width: 94%; margin:0 3% 20px 3%; padding:0;}

	.lang-switch img {
	  width: 22px;
	  height: auto;
	  border-radius: 2px;
	  transition: transform 0.2s;
	}
	.lang-switch img:hover {
	  transform: scale(1.1);
	}

	.firstPhead { font-size:32px; display:block; color:#0A0B0C; text-align:center; width:80%;  margin:20px 10% 10px 10%;}
	
	.firstPbody { font-size:22px; display:block; color:#0A0B0C; text-align:center; width:80%;  margin:10px 10% 10px 10%;}
	
	.firstPfooter{ font-size:22px; display:block; color:#4cbd9a; text-align:center; width:80%;  margin:10px 10% 10px 10%; font-weight:bold;}

	.unicorn1 {
		cursive;
	  font-optical-sizing: auto;
	   font-family: "Bellota", system-ui;
	  font-weight: 400;
	  font-style: normal;
	  font-size:80px; color:#4cbd9a;
	  display:block;
	  width :100%; text-align:center;
	  }

	.unicorn2 {
		font-family: "Bellota", system-ui;
	  font-weight: 700;
	  font-style: normal;
		cursive;
	  font-optical-sizing: auto;
	   font-size:100px; color:#4cbd9a;
	   display:block;
		width :100%; text-align:center;
	  }
	.wedo1, .wedo2 {
		 font-optical-sizing: auto;
	  font-weight: 400;
	  font-style: normal;
	  font-size:40px; color:#0A0A0A;
	  display:block;
	  width :100%; text-align:center;
	}

	.wedo3 {
		 font-optical-sizing: auto;
	  font-weight: 400;
	  font-style: normal;
	  font-size:80px; color:#0A0A0A;
	  display:block;
	  width :100%; text-align:center;
	}

	section.greencorn {
		width:100%; 
		padding:5%; 
		text-align:justify;
		background: #4cbd9a; color: #FEFEFE;
		border-radius:.5rem;
	}
	section.greencorn * { color: #FEFEFE;}
	
	section.greencorn p,i { color: #FEFEFE; font-size:16px;}
	
	section.greencorn b {font-size:22px;}

	.cornbordered {padding:12px; outline:3px solid #4cbd9a; border-radius:.5rem;}
	
	.cornbordered img {border-radius:.5rem;}
	
	/**Footer**/
	/**Alt Menü Başla**/
	.p80 { padding:16px 0; width:92%; margin:0 4%; display:flex; flex-wrap:wrap; justify-content: space-between; align-items: stretch; }
	.p80 img {width: 240px; height:60px; margin:0; padding:0; display:inline-block}
	#FOOTER {
	  float: left;
	  width: 100%;
	  background: #4cbd9a;
	  border-radius:.5rem .5rem 0 0 ;
	}

	#FOOTER div { border-top:1px solid #FCFCFC !important; }
	#FOOTER div ul { width:24%; list-style:none; }
	#FOOTER div ul li { margin:10px 0; }
	#FOOTER div ul li.FooterLiHead {margin:0; font-weight:600; color:#FEFEFE; font-size:18px; line-height:25px}
	#FOOTER div ul li a, #FOOTER span ul li a {font-weight:400;  color:#F0F0F0; font-size:15px; line-height:22px}
	#FOOTER div ul li a:hover, #FOOTER span ul li a:hover { color:#FFFFFF;}

	#FOOTER div ul:last-child{border-left:1px solid #FCFCFC !important; padding-left:25px}

	#FOOTER span { padding-top:16px; float: left;}
	#FOOTER span ul { float:left; height:50px; list-style:none;}
	#FOOTER span ul li {float:left; line-height:50px;}
	#FOOTER span ul li img {display:block}
	#FOOTER span ul li a:first-child{margin-left:0px;}
	#FOOTER span ul li:last-child{float:right}
	#FOOTER span ul li a {margin-left:32px }
	#FOOTER span ul li a i {margin-right:5px; font-size:18px }

	.MyRow {
	  display: flex !important;
	  flex-direction: row;
	  flex-wrap: wrap;
	  justify-content: space-between;
	  width: 100% !important;
	  

	}
	
	.MyRowContact {
	  display: flex !important;
	  flex-direction: row;
	  flex-wrap: wrap;
	  justify-content: space-between;
	  width: 100% !important;
	  

	}

	.MyRowinModule {display:flex !important; align-items: center; flex-wrap: wrap; position:relative; float:left;}
	.MyRowinModule .MyRowHead2 {  position:absolute; top:-32px; }
	.MyRowIn94 { display: inline-block; width: 94%; padding: 3%; }
	.MyRowIn96 { display: inline-block; width: 96%; padding: 2%; }
	.MyRowIn98 { display: inline-block; width: 98%; padding: 1%; }

	.MyRowMiniBorder { border: 1px solid #eeeeee; border-radius: 8px; }

	.HTMLRowHead {
		
		display: block;
		font-size: 18px;
		font-weight: 600;
		position: relative;
		margin:12px 0px 12px 0px;
		min-height:22px;
		width:100%;
	}


	.MyRowHead {
		width: 100%;
		display: inline-block;
		font-size: 10px;
		font-weight: 600;
		position: relative;
		margin:40px 0px 50px 0px;
		min-height:40px;
		border-bottom:2px solid #D0D0D0;


	}

	.MyRowHead1 {
		position: absolute;
		left: 0%;
		top: 20%;
		padding:4px 20px;
		background:#D0D0D0;
		color:#0A0A0A;
		font-size:36px;
		font-weight: 700;
		letter-spacing: 1px;
		
	}


	.MyRowHead2 {
	display:none;
	}

	.cookie-banner {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background: #4cbd9a;
	  padding: 1rem;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  z-index: 9999;
	  opacity:.9;
	}

	.cookie-banner p {
	  color: White !important;
	   font-size: 14px;

	}

	.cookie-banner button {
	  background: #fff;
	  color: #4cbd9a;
	  border: none;
	  padding: 0.5rem 1rem;
	  cursor: pointer;
	}

	.CookieLink {
		color:White;
		text-decoration:underline;
	}

	.PolicyContainer{
	  border:1px solid #4cbd9a;
		dispay:flex;
		justify-content:center;
		padding:3rem
	}

	.PolicyContainer h1{
	  font-size: 28px;
	  color: #0f172a;
	  margin: 0 0 16px;
	}

	.PolicyContainer h2{
	  font-size: 20px;
	  color: #0f172a;
	  margin: 28px 0 10px;
	}

	.PolicyContainer p,
	.PolicyContainer ul{
	  margin: 8px 0 0 0;
	}

	.PolicyContainer ul{
	  padding-left: 18px;
	}

	.PolicyContainer .note{
	  font-size: 14px;
	  color: #64748b;
	  margin-top: 6px;
	}

	.TableWrap{
	  overflow-x: auto;
	  margin: 10px 0;
	}

	.PolicyContainer table{
	  width: 100%;
	  border-collapse: collapse;
	  min-width: 640px;
	}

	.PolicyContainer th,
	.PolicyContainer td{
	  border: 1px solid #e2e8f0;
	  padding: 10px 12px;
	  text-align: left;
	  vertical-align: top;
	}

	.PolicyContainer thead th{
	  background: #f8fafc;
	  font-weight: 600;
	}


	.DocumentContainer{
		border:1px solid #4cbd9a;
		dispay:flex;
		justify-content:center;
		padding:3rem;
		border-radius:.5rem;
	}


	.ContactInfo {
		display: flex;
		flex-direction:column;
		padding:2rem !important;
		gap: 20px;
		width: 100%;
	}

	.ContactInfo p {
		font-size: 18px;
		color: white;
	}

	.ContactInfo  h5 {
		font-size: 24px;
		color: white;
		margin-bottom: 5px
	}

	.InfoTitle {
		display: flex;
		flex-direction:column;
		align-items: start;
		gap: 10px;
	}

	.InfoTitle i{
		color:white;
		font-size: 18px
	}
	
	.ContactContainer {
		display:flex;
		flex-direction:row;
		justify-content:center;
		background: #4cbd9a;
		align-items:center;
		border-radius:.5rem;
	}

	.map-wrap {
		dispay:flex;
	  width: 100%;
	  height:100%;
	  aspect-ratio: 16 / 9;  
	  background-color: #fff;
	}

	.map-wrap iframe {
	  width: 100%;
	  height: 100%;
	  border: 0;
	  border-radius:.5rem 0 0 .5rem;
	  
	  
	}

	.InfoIcon {
		border: 1px solid hsl(230, 25%, 80%);
		padding:10px 12px;
		border-radius: 100%;
	}



	.InputGroup {
		display:flex;
		flex-direction: column;
		gap:3px;
	}

	.InputGroup input {
	  width: 100%;
	  height: 40px;              
	  padding: 10px 12px;
	  border: 1px solid #cbd5e1; 
	  background: #fff;
	  background-clip: padding-box;
	  appearance: none;
	  -webkit-appearance: none; 
	  box-sizing: border-box;  
	}

	.InputGroup textarea {
		 border: 1px solid #cbd5e1; 
	}

	.InputGroup input::placeholder {

	  opacity: 0.4;
	}

	@media (max-width: 1024px) {
		
		
		
		.MyRowHead {

			margin-bottom:30px !important;
			margin-top:10px !important;
		}
		
		.MyRowHead1 {
			left: 50%;
			top: 40%;
			font-size: 26px !important;
			padding:4px 16px;
			text-align: center;
			-webkit-transform: translate(-50%, 0%);
			transform: translate(-50%, 0%);
		}
		
	}

	/*
	.MyRowHead {
		width: 100%;
		display: inline-block;
		font-size: 18px;
		font-weight: 600;
		position: relative;
		margin:50px 0px 60px 0px;
		min-height:40px;
	}

	.MyRowHead1 {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 100%;
		text-align: center;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		color:#e6e6e6;
		font-size:60px;
		font-weight: 700;
		letter-spacing: 4px;
		
	}

	.MyRowHead2 {
		position: absolute;
		left: 50%;
		top: 50%;.MyFlexCenter {	padding: 0; margin: 0; list-style: none; display: flex !important; align-items: center; justify-content: center; }
		width: 100%;
		text-align: center;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		color:#2A2A2A;
		font-size:36px;
		font-weight: 700;
		letter-spacing: 0px;
	}
	*/
	.MyRow2 { width: 15%; margin-top: 12px; display: inline-block; }
	.MyRow3 { width: 23.5%; margin-top: 12px; display: inline-block; }
	.MyRow4 { width: 32%; margin-top: 12px; display: inline-block; }
	.MyRow6 { width: 49%; margin-top: 12px; display: inline-block;}
	.MyRow6Contact { width: 49%; margin-top: 12px; display: inline-block;}
	.MyRow8 { width: 66%; margin-top: 12px; display: inline-block; }
	.MyRow9 { width: 74.5%; margin-top: 12px; display: inline-block; }
	.MyRow10 { width: 82.5%; margin-top: 12px; display: inline-block; }
	.MyRow12 { width: 100%; margin-top: 12px; display: inline-block; }

	.MyRow6X { width: 49%; display: inline-block; }

	.MyFlexCenter {	padding: 0; margin: 0; list-style: none; display: flex !important; align-items: center; justify-content: center; }
	.MyFlexVCenter { padding: 0; margin: 0; list-style: none; display: flex !important; align-items: center; }

	a.inputeye { display:inline-block; margin-left:12px; font-size:16px; padding:6px 6px; border-radius:6px; }

	@media (max-width: 359px) {
	/**animated**/
		.wow { visibility: hidden; }
		.ie8 .wow, .ie9 .wow { visibility: visible; }
		.animated { animation-duration: 1s;	animation-fill-mode: both; }
		.animated.infinite { animation-iteration-count: infinite; }
		.animated.hinge { animation-duration: 2s; }

		@keyframes fadeInRight {
			from {
			opacity: 0;
			transform: translate3d(100%, 0, 0);
			}
			to {
			opacity: 1;
			transform: none;
			}
		}

		.fadeInRight {
			animation-name: fadeInRight;
		}

		@keyframes fadeInLeft {
			from {
			opacity: 0;
			transform: translate3d(-100%, 0, 0);
			}
			to {
			opacity: 1;
			transform: none;
			}
		}
		.fadeInLeft {
		animation-name: fadeInLeft;
		}
		/*Spin*/
		.animate-spin {
		-moz-animation: spin 2s infinite linear;
		-o-animation: spin 2s infinite linear;
		-webkit-animation: spin 2s infinite linear;
		animation: spin 2s infinite linear;
		display: inline-block;
		}
		@-moz-keyframes spin {
			0% {
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
			}
			100% {
			-moz-transform: rotate(359deg);
			-o-transform: rotate(359deg);
			-webkit-transform: rotate(359deg);
			transform: rotate(359deg);
			}
		}
		@-webkit-keyframes spin {
			0% {
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
			}
			100% {
			-moz-transform: rotate(359deg);
			-o-transform: rotate(359deg);
			-webkit-transform: rotate(359deg);
			transform: rotate(359deg);
			}
		}
		@-o-keyframes spin {
			0% {
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
			}
			100% {
			-moz-transform: rotate(359deg);
			-o-transform: rotate(359deg);
			-webkit-transform: rotate(359deg);
			transform: rotate(359deg);
			}
		}
		@-ms-keyframes spin {
			0% {
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
			}
			100% {
			-moz-transform: rotate(359deg);
			-o-transform: rotate(359deg);
			-webkit-transform: rotate(359deg);
			transform: rotate(359deg);
			}
		}
		@keyframes spin {
			0% {
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
			}
			100% {
			-moz-transform: rotate(359deg);
			-o-transform: rotate(359deg);
			-webkit-transform: rotate(359deg);
			transform: rotate(359deg);
			}
		}
	}

	/*=============== Tepe Menü ===============*/

	header input, header button { border: none;  outline: none; }

	header ul { list-style: none; }

	/*=============== REUSABLE CSS CLASSES ===============*/
	.navcontainer {
	  max-width: 94%;
	  margin:0 3%;
	  padding:0px;
	  margin-inline: 1.5rem;
	}

	.search, .login {
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 1000;
	  background-color: hsla(230, 75%, 15%, .1);
	  backdrop-filter: blur(24px);
	  -webkit-backdrop-filter: blur(24px); /* For safari */
	  padding: 8rem 1.5rem 0;
	  opacity: 0;
	  pointer-events: none;
	  transition: opacity .4s;
	}

	.search__close, .login__close {
	  position: absolute;
	  top: 2rem;
	  right: 2rem;
	  font-size: 1.5rem;
	  color: hsl(230, 75%, 15%);
	  cursor: pointer;
	}

	/*=============== HEADER & NAV ===============*/
	.header {
	  position: fixed;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  background-color: hsl(230, 100%, 98%);
	  box-shadow: 0 2px 16px hsla(230, 75%, 32%, .15);
	  z-index: 100
	}

	.navmain {
	  height: 3.5rem;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;

	}

	.nav__logo {
	  color: hsl(230, 75%, 15%);
	  font-weight: 600;
	  transition: color .4s;
	  width:240px;
	  height:60px;
	}

	.nav__logo img {
	  width:240px;
	  height:60px;
	display:block;  
	}

	.nav__actions {
	  display: flex;
	  align-items: center;
	  column-gap: 1rem;
	}

	.nav__search, .nav__login, .nav__toggle, .nav__close {
	  font-size: 1.25rem; color: hsl(230, 75%, 15%); cursor: pointer; transition: color .4s;
	}

	:is(.nav__logo, .nav__search, .nav__login, .nav__toggle, .nav__link):hover { color: hsla(150, 50%, 0%, 0.55); }

	/* Navigation for mobile devices */
	@media screen and (max-width: 1025px) {
		
		.nav__menu {
			position: fixed;
			top: -100%;
			left: 0;
			background-color: hsl(230, 100%, 98%);
			box-shadow: 0 8px 16px hsla(230, 75%, 32%, .15);
			width: 100%;
			padding-block: 4.5rem 4rem;
			transition: top .4s;
			border-radius:.5rem;
		}
		
	}

	.nav__list {
	  display: flex;
	  flex-direction: column;
	  row-gap: 2.5rem;
	  text-align: center;
	}

	.nav__link {
	  color: hsla(150, 50%, 0%, 0.95);
	  font-weight: 600;
	  transition: color .4s;
	  font-size:17px;
	}

	.nav__close {
	  position: absolute; top: 1.15rem; right: 1.5rem;
	}

	/* Show menu */
	.show-menu { top: 0; }

	/*=============== SEARCH ===============*/
	.search__form {
	  display: flex;
	  align-items: center;
	  column-gap: .5rem;
	  background-color: hsl(230, 100%, 97%);
	  box-shadow: 0 8px 32px hsla(230, 75%, 15%, .2);
	  padding-inline: 1rem;
	  border-radius: .5rem;
	  transform: translateY(-1rem);
	  transition: transform .4s;
	}

	.search__icon { font-size: 1.25rem; color: hsl(230, 75%, 15%); }

	.search__input {
	  width: 100%;
	  padding-block: 1rem;
	  background-color: hsl(230, 100%, 97%);
	  color: hsl(230, 12%, 40%);
	}

	.search__input::placeholder { color: hsl(230, 12%, 40%); }

	/* Show search */
	.show-search { opacity: 1; pointer-events: initial; }

	.show-search .search__form { transform: translateY(0); }

	/*=============== LOGIN ===============*/
	.login__form, .login__group { display: grid; }

	.login__form {
	  background-color: hsl(230, 100%, 97%);
	  padding: 2rem 1.5rem 2.5rem;
	  box-shadow: 0 8px 32px hsla(230, 75%, 15%, .2);
	  border-radius: 1rem;
	  row-gap: 1.25rem;
	  text-align: center;
	  transform: translateY(-1rem);
	  transition: transform .4s;
	}

	.login__title { font-size: 1.25rem; color: hsl(230, 75%, 15%); }

	.login__group { row-gap: 1rem; }

	.login__label {
	  display: block;
	  text-align: initial;
	  color: hsl(230, 75%, 15%);
	  font-weight: 500;
	  margin-bottom: .25rem;
	}

	.login__input {
	  width: 100%;
	  background-color: hsl(230, 100%, 97%);
	  border: 2px solid hsl(230, 25%, 80%);
	  padding: 1rem;
	  border-radius: .5rem;
	  color: hsl(230, 12%, 40%);
	}

	.login__input::placeholder { color: hsl(230, 12%, 40%); }

	.login__signup { margin-bottom: .5rem; }

	.login__signup a { color: hsl(230, 75%, 56%); }

	.login__forgot { display: inline-block; color: hsl(230, 75%, 56%); margin-bottom: 1.25rem; }

	.login__button {
	  display: inline-block;
	  background-color: hsl(230, 75%, 56%);
	  width: 100%;
	  color: #fff;
	  font-weight: 600;
	  padding: 1rem;
	  border-radius: .5rem;
	  cursor: pointer;
	  transition: box-shadow .4s;
	}

	.login__button:hover { box-shadow: 0 4px 24px hsla(230, 75%, 40%, .4); }

	/* Show login */
	.show-login { opacity: 1; pointer-events: initial; }

	.show-login .login__form { transform: translateY(0); }

	/*=============== BREAKPOINTS ===============*/
	/* For medium devices */
	@media screen and (min-width: 576px) {
		.search,
		.login {
		padding-top: 10rem;
		}

		.search__form {
		max-width: 450px;
		margin-inline: auto;
		}

		.search__close,
		.login__close {
		width: max-content;
		top: 5rem;
		left: 0;
		right: 0;
		margin-inline: auto;
		font-size: 2rem;
		}

		.login__form {
		max-width: 400px;
		margin-inline: auto;
		}

	}

	/* For large devices */
	@media screen and (min-width: 1025px) {
		.navmain {
		height: calc(3.5rem + 2rem);
		column-gap: 3rem;
		}
		.nav__close, 
		.nav__toggle {
		display: none;
		}
		.nav__menu {
		margin-left: auto;
		}
		.nav__list {
		flex-direction: row;
		column-gap: 3rem;
		}

		.login__form {
		padding: 3rem 2rem 3.5rem;
		}
	}

	@media screen and (min-width: 1150px) {
		.navcontainer {
			margin-inline: auto;
		}
	}

	/* CSS */
	.button-whatsapp {
		background-color: initial;
		background-image: linear-gradient(-180deg, #00D775, #00BD68);
		border-radius: 8px;
		box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
		color: #FFFFFF;
		cursor: pointer;
		display: inline-block;
		height: 44px;
		line-height: 44px;
		outline: 0;
		overflow: hidden;
		padding: 0 20px;
		pointer-events: auto;
		position: relative;
		text-align: center;
		touch-action: manipulation;
		user-select: none;
		-webkit-user-select: none;
		vertical-align: top;
		white-space: nowrap;
		border: 0;
	}

	.button-whatsapp:hover { background: #00bd68; }

	.button-hemenara {
	  background-color: initial;
	  background-image: linear-gradient(-180deg, #F09819, #FF512F);
	  border-radius: 8px;
	  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
	  color: #FFFFFF;
	  cursor: pointer;
	  display: inline-block;
	  height: 44px;
	  line-height: 44px;
	  outline: 0;
	  overflow: hidden;
	  padding: 0 20px;
	  pointer-events: auto;
	  position: relative;
	  text-align: center;
	  touch-action: manipulation;
	  user-select: none;
	  -webkit-user-select: none;
	  vertical-align: top;
	  white-space: nowrap;
	  border: 0;
	}

	.button-hemenara:hover { background: #f09819; }

	.button-hemenara b, .button-whatsapp b {
		color:inherit;
		line-height:36px;
		height:36px;
		display:inline-block;
		color:#FEFEFE;
	}

	/**
	 * Owl Carousel v2.3.4
	 * Copyright 2013-2018 David Deutsch
	 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
	 */
	.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}

	/*
	 * 	Default theme - Owl Carousel CSS File
	 */
	.owl-theme .owl-nav { text-align: center; -webkit-tap-highlight-color: transparent; }
	.owl-theme .owl-nav [class*='owl-'] {
		color: #FFF;
		font-size: 14px;
		margin: 5px;
		padding: 4px 4px;
		background: #D6D6D6;
		display: inline-block;
		cursor: pointer;
		border-radius: 3px;
		}

	.owl-theme .owl-nav [class*='owl-']:hover { background: #869791; color: #FFF; text-decoration: none; }
	.owl-theme .owl-nav .disabled { opacity: 0.5; cursor: default; }
	.owl-theme .owl-nav.disabled + .owl-dots { margin-top: 10px; }

	.owl-theme .owl-dots { text-align: center; -webkit-tap-highlight-color: transparent; }
	.owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1; *display: inline; }
	.owl-theme .owl-dots .owl-dot span {
		  width: 10px;
		  height: 10px;
		  margin: 5px 7px;
		  background: #D6D6D6;
		  display: block;
		  -webkit-backface-visibility: visible;
		  transition: opacity 200ms ease;
		  border-radius: 30px;
		  }
	.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #869791; }
	.owl-theme .owl-controls { text-align: center; }
	.owl-buttons { display: none; }
	.owl-theme .owl-controls .owl-page span {
		display: block;
		width: 12px;
		height: 12px;
		margin: 5px 7px;
		border-radius: 20px;
		background: rgb(255, 255, 255) none repeat scroll 0% 0%;
		opacity: 0.8;
	}
	.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span { opacity: 0.8; }

	.owl-dots {
		
	position:absolute;
	bottom:40px;
	left: 50%;
	height:0px !important;
	margin:0;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
		
	}

	.itemyorum {
		
		width: 96%;
		min-height: 190px;
		display: inline-block;
		border: 1px solid #b3b3b3;
		border-radius: 6px;
		position: relative;
		margin: 20px 2% 0 2%;
		
	}

	.itemyorum span {
		
		position: absolute;
		top: -24px;
		right: -12px;
		font-size: 42px;
		color: #D6D6D6;
	}

	.itemyorum i {
		font-style: normal;
		position: absolute;
		top: 0px;
		left: 10px;
		font-size: 42px;
		color: #D6D6D6;
	}

	.yorumimg {
		
		position: absolute;
		left: 10px;
		top: 10px;
		display: block;
		width: 80px;
		height: 80px;
			
	}

	.imgkisi {

		width: 80px;
		height: 80px;
		display: block;
		
	}

	.isimkisi {
		
		position: absolute;
		top: 40px;
		left: 110px;
		font-size: 18px;
		display: block;
		font-weight: 600;
		color: #5A5A5A;
	}

	.kisiyorum {
		position: absolute;
		top: 115px;
		left: 0px;
		font-size: 14px;
		display: block;
		font-weight: 600;
		width:100%;
		padding:0 10%;
		color: #9A9A9A;
	}

	.tesekkuryorum {
		position: absolute;
		top: 30px;
		left: 0px;
		font-size: 22px;
		display: block;
		font-weight: 600;
		width:100%;
		padding:0 5%;
		color: #9A9A9A;
		text-align: center;
	}

	.tesekkuryorum b {
		dispay: block;
		font-size: 64px;
	}

	.kisiyildiz {
		width: 100%;
		height: 24px;
		display: block;
		position: absolute;
		left: 0px;
		top: 78px;
		color: #ffb64d;
		text-align:center;
		letter-spacing: 4px;
		font-size: 20px;

	}

	@media screen and (max-width: 1600px) { 
		.kisiyildiz {top: 85px;}
	}

	@media screen and (max-width: 1400px) {
		.navcontainer { max-width: 96%; margin:0 2%; }
		 #CONTENT { width: 96%; margin:100px 2% 20px 2%; }
		 #videoDiv span b { font-size:42px;}
	}

	@media screen and (max-width: 1024px) { 
		.nav__logo, .nav__logo img { width:180px; height:45px }
		.nav__close { top: 0.6rem;  right: .6rem; }
		#CONTENT { width: 96%; margin:24px 2% 20px 2%; }
		.MyRowHead { margin:40px 0px 40px 0px; }
			.wedo1, .wedo2 {
		

	  font-size:22px;

	}

	.wedo3 {

	  font-size:54px; 

	}

	.unicorn1 { font-size:60px }
	.unicorn2 { font-size:85px }

	}

	@media (min-width: 720px) {
		.hideonmobile{display:flex !important; visibility:visible !important;}
		.hideondesktop{display:none !important; visibility:hidden !important;}
	}


	@media (max-width: 720px) {
		.hideondesktop {display:block !important; visibility:visible !important;}
		.hideonmobile{display:none !important; visibility:hidden !important;}
		
	#videoDiv { margin-top:60px; height:320px;  background:#0A0A0A;}
	#videoDiv video {min-height:480px; width:auto;}
	#videoDiv div {background:#323232;opacity:0.2;  height:320px}

	#videoDiv span b { font-size:22px; width:88%;  margin:12px 6% 12px 6%;}
	#videoDiv span p  { font-size:14px; width:88%; margin:6px 6% 0 6%;}
		

		
		
		.owl-dots {	bottom:24px !important; }
		.MyRowIn96, .MyRowIn98 { width: 94%; padding: 3%; }

	.unicorn1 {text-align:center; font-size:48px }
	.unicorn2 {text-align:center; font-size:72px }

		
		.hideondesktop { display: block !important; visibility: visible !important; }

		.MyRow2 { width: 49%; }
		.MyRow3 { width: 100%; }
		.MyRow4, .MyRow6, .MyRow8, .MyRow9,	.MyRow10 { width: 100%;	}

		#FOOTER div.bullviologo { width:100%; padding: 0; margin:0; float:right; text-align:left;}
		#FOOTER div.bullviocopyright { width:100%; padding: 0; margin:0; float:left; text-align:left;}
		#FOOTER div a { float:right; width:100%; text-align:left; margin-bottom:12px;}

		#FOOTER div { padding-top:0px;}
		#FOOTER div ul {width:50%; padding-top:20px}

		#FOOTER div ul:last-child{border-left:none !important; padding-left:0px !important;}

		#FOOTER span ul { width: 100%; float:left; margin:0; }
		#FOOTER span ul li { width:100%; float:left; text-align: left; }
		#FOOTER span ul li img { margin:0 auto; display: block; }
		#FOOTER span ul li:last-child{ text-align:left; }
		.Font20R {font-size:16px; }
		.mt20pxR {margin-top: 12px !important;  }
		.MyRowHead { margin:15px 0px 15px 0px; }
		.hizmetboxL, .hizmetboxR {width: 100%; }

	}

	@media (max-width: 480px) {
		
		.mt80px {
			margin-top:80px !important
		}
		
	.ContactContainer {
		flex-direction:column;
	}

	.ContactInfo {
		gap: 1rem;
		padding:2rem !important;
	}
	.InfoTitle {

		padding-top:0
	}

	.ContactInfo p {
		font-size: 16px;
	}

	.ContactInfo  h5 {
		font-size: 20px;
	}

	.InfoTitle i{
		font-size: 16px
	}

	.map-wrap {
	  width: 100%;
	}
	
	.map-wrap iframe {border-radius:.5rem .5rem 0 0;}

	.InputGroup {
		display:flex;
		flex-direction: column;
		gap:3px;
	}

	.InputGroup input {
	  width: 100%;
	  height: 40px;              
	  padding: 10px 12px;
	  border: 1px solid #cbd5e1; 
	  background: #fff;
	  background-clip: padding-box;
	  appearance: none;
	  -webkit-appearance: none; 
	  box-sizing: border-box;  
	}

	.InputGroup textarea {
		 border: 1px solid #cbd5e1; 
	}

	.InputGroup input::placeholder {

	  opacity: 0.4;
	}

		
		.firstPhead { font-size:26px; width:90%;  margin:20px 10% 10px 10%; font-weight:bold;}
	.firstPbody { font-size:18px;  text-align:center; width:90%;  margin:10px 10% 10px 10%;}
	.firstPfooter{ font-size:18px; width:90%;  margin:10px 10% 10px 10%; font-weight:bold;}

	.wedo1, .wedo2 {
		

	  font-size:20px;

	}

	.wedo3 {

	  font-size:50px; 

	}

		
		
		.bullviocopyright {font-size:14px }
		.guvenli {font-size:26px; padding:0px 4px 8px 4px;}
		.guvenlitxt {font-size:34px;}
		
		.MyRow,	.MyRow2, .MyRow3, .MyRow4, .MyRow6 { width: 100%; margin-top:10px !important;  }

		.MyRow { padding-top:5px !important; padding-bottom:5px !important; }

		#FOOTER span ul li:first-child{ text-align:center !important; padding:0; margin:0; }

		#FOOTER div ul li.FooterLiHead { margin:0 0 16px 0; color:#d1d1d1; font-size:16px; line-height:20px; }
		#FOOTER div ul li a { font-size:12px; line-height:20px}
		#FOOTER span ul li a {font-size:14px; line-height:20px; font-weight:600;}
		#FOOTER span ul li a {margin-left:12px; }
		#FOOTER span ul li a:first-child {margin-left:0px}
		
		.MyRowHead { margin:10px 0px 10px 0px; }
		.MyRowHead1 { font-size:42px; letter-spacing: 4px; }
		.MyRowHead2 { font-size:28px; letter-spacing: 0px; }
		.Ficon { padding:0px !important; margin:0px !important; font-size:24px; line-height:36px; }
		
		.button-hemenara b, .button-whatsapp b { display:none; }
		
		.button-whatsapp, .button-hemenara {
			 padding: 0 10px;
			 border-radius: 20px;
			 height: 40px;
			 line-height: 40px;
		}
		.itemyorum {width: 94%; margin:20px 3% 0 3%; min-height:200px;}
		.yorumimg, .imgkisi {
			width: 60px;
			height: 60px;
		}
		.kisiyorum {padding:0 5%; top: 100px;}
		.isimkisi {
			left: 80px;
			top: 18px;
		}
		.kisiyildiz {
			top:72px;
		}
		
		.tesekkuryorum {
			top: 50px;
			font-size: 18px;
		}

		.tesekkuryorum b {
			dispay: block;
			font-size: 48px;
		}
		
	}

@media (max-width: 380px) { 
	.nav__logo, .nav__logo img { width:160px; height:40px }
	.guvenli { font-size:22px; }
	.guvenlitxt { font-size:28px; }
	
	.MyRowHead1 { font-size:38px; letter-spacing: 3px; }
	.MyRowHead2 { font-size:28px; letter-spacing: 0px; }
	.itemyorum {width: 82%; margin:20px 9% 0 9%;}
	.isimkisi {
		left: 80px;
		top: 30px;
	}
	
}

@media (max-width: 360px) {
	.MyRowHead1 { font-size:35px; letter-spacing: 3px; }
	.MyRowHead2 { font-size:25px; letter-spacing: 0px; }
}

@media (max-width: 320px) {
	.MyRowHead1 { font-size:30px; letter-spacing: 3px; }
	.MyRowHead2 { font-size:20px; letter-spacing: 0px; }

}



@charset "UTF-8";


/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }
}

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}