@import url('https://fonts.googleapis.com/css?family=Libre+Caslon+Text:400,400i,700|Nunito+Sans:300,400,600,700&display=swap');




html, body {margin: 0; font-family: 'IBM Plex Sans', sans-serif;}

/* These selection declarations have to be separate
   No text-shadow: twitter.com/miketaylr/status/12228805301
   Also: hot pink! */
::-moz-selection{ background: #bebebe; color:#fff; text-shadow: none; }
::selection { background:#bebebe; color:#fff; text-shadow: none; }
/* j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #bebebe; }

/* Primary style  */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body, html {
  /* prevent horizontal scrolling */
 
	height: 100%;
}

.priv li { font-family: 'Nunito Sans', sans-serif;
font-size: 1rem;
line-height: 1.8; color: #222;
font-weight: 300; }

.appbull li { font-family: 'Nunito Sans', sans-serif;
font-size: 1rem;
line-height: 2; color: #222;
font-weight: 300; list-style: none; text-align: center; border-bottom-color: #ccc; border-bottom-style: dashed; border-bottom-width: 1px;}

.appbull li:last-child {border-bottom: none}

body { overflow-x: hidden;}
.staff {width:300px; margin-bottom: 20px; margin-top: 30px;}
.service {width:98%; margin-bottom: 20px; margin-top: 0px;}

.private  { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),
    /* bottom, image */url("../img/car12.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.corporate  { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),
    /* bottom, image */url("../img/car13.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.how  { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),
    /* bottom, image */url("../img/car11.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}


.resources  { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),
    /* bottom, image */url("../img/car10.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.contact  { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),
    /* bottom, image */url("../img/car9.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.approach { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),
    /* bottom, image */url("../img/car8.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.about { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),
    /* bottom, image */url("../img/car7.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.lifetime { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),
    /* bottom, image */url("../img/car6.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.insurance { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),
    /* bottom, image */url("../img/car5.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.life { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),
    /* bottom, image */url("../img/car4.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.mortgages { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),
    /* bottom, image */url("../img/car3.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.investments { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),
    /* bottom, image */url("../img/car1.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}


.retirement { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),
    /* bottom, image */url("../img/car2.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}


.cc-revoke, .cc-window {
    font-family: Helvetica,Calibri,Arial,sans-serif;
    font-size: 13px!important;
    line-height: 1.5em;
}
.cc-link {display: none!important}

.cc-btn {
    display: block;
    padding: 0px!important;
    font-size: .9em;
    font-weight: 700;
    letter-spacing: 2px;
    border-bottom-style: solid!important;
	border-bottom-width: 1px!important;
	border-bottom-color: #fff!important;
    text-align: center;
    white-space: nowrap;
}

#video_overlays {
position:absolute;
top:0; left: 0; 
    width:100vw;
    min-height:100vh;
    background-color:rgba(0,0,0,0.5);
    z-index:1;
}
#video_overlays2 {
position:absolute;
top:0; left: 0; 
    width:100vw;
    min-height:700px;
    background-color:rgba(0,0,0,0.5);
    z-index:1;
}

#video_overlays3 {
position:absolute;
top:0; left: 0; 
    width:100vw;
    min-height:800px;
    background-color:rgba(0,0,0,0.5);
    z-index:1;
}

video {position:absolute; width:100%; height:100vh; top:0; left: 0; }
.testimonials {width:100%; padding-top: 60px; padding-bottom: 100px; position: relative; float: left;
	background: #fff; 
}

.login {position: absolute; right:40px; top:0px; background: #2a2a2e;  color:#fff; z-index: 9997; padding:18px; font-size:0.8rem; text-transform: uppercase;}
.login:hover {background: #bebebe;}
.topdetails { position: absolute; right:210px; top:20px}
.topdetails strong {color:#bebebe}
.topdetails a {color:#222}
.topdetails a:hover {color:#999}
@media only screen and (max-width: 1248px) {
.topdetails { position: absolute; right:264px; top:44px}	
	.login {position: absolute; right:90px; top:20px; background: #2a2a2e;  color:#fff; z-index: 9997; padding:23px; font-size:0.8rem; text-transform: uppercase; z-index: 1000;}
.login:hover {background: #bebebe;}
}
@media only screen and (max-width: 910px) {
.topdetails { display: none;}	
}

@media only screen and (max-width: 600px) {
.login {position: fixed; left:0px; top:100%; margin-top: -40px; width:100%; height:40px; background: #2a2a2e;  color:#fff; z-index: 9997; padding:16px; font-size:0.8rem; text-transform: uppercase; text-align: center}
}


.logo {width:240px; position: absolute; left:40px; top:10px}
.callout {background: #f5f5f5; padding-right: 20px; padding-left: 20px; padding-top: 10px; padding-bottom: 10px; }

.callout1 {background: #fff; padding-right: 16px; padding-left: 16px; padding-top: 20px; padding-bottom: 16px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);}

ul.calc  {list-style: none; margin-left: 0px; padding-left: 0px!important;}
.calc li {list-style: none; margin-left: 0px; padding-left: 0px; border-bottom: dotted; border-bottom-color: #ccc; border-bottom-width: 1px; line-height: 3; text-align: center}
.calc li:last-child {border:none}

.hangright {position: absolute;  left: 60%; max-height: 540px; }
.hangleft {position: absolute;  right: 60%; max-height: 540px; }

@media only screen and (max-width: 1019px) {
.hangright {position: relative;  left: 0%; margin-top: 20px;  }	
	.hangleft {position: relative;  left: 0%;   }
}

.hero2 {width:100%; height:450px;  display: table; }
 #block3 {width:100%; height: 450px; background-color:rgba(42, 42, 46, 0.6); }

 .down {position:absolute; left:50%; margin-left:-27px; z-index:99; top:720px; 
height: 50px;
	width: 50px;
	opacity: 100;
	filter: alpha(opacity=1);
	text-align: center;
	color: #fff;
	transform: rotate(-180deg); background: url(../img/cd-top-arrow.svg) no-repeat center ; }

.cd-header {
  position: absolute;
  top: 0;
  left: 0;


  width: 100%;
  z-index: 999;
  
  
	
	height: 106px;
background:
#fff;
box-shadow: none;
border-bottom-style: solid;
border-bottom-color:
#eee;
border-bottom-width: 1px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.31);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.31);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.31);
}
@media only screen and (min-width: 768px) {
  .cd-header {
    height: 106px;
    background: #fff;
    box-shadow: none;
	  border-bottom-style: solid;
	  border-bottom-color: #eee;
	  border-bottom-width: 1px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.31);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.31);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.31);
  }
}
@media only screen and (min-width: 1249px) {
  .cd-header {
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .cd-header.is-fixed {
    /* when the user scrolls down, we hide the header right above the viewport */
    position: fixed;
    top: -106px;
    background-color: #fff;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
	  border-bottom-style: solid;
	  border-bottom-color: #eee;
	  border-bottom-width: 1px;
	  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.31);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.31);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.31);
  }
  .cd-header.is-visible {
    /* if the user changes the scrolling direction, we show the header */
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
	  .cd-header.menu-is-open {
    /* add a background color to the header when the navigation is open */
    background-color: rgba(42, 42, 46, 0.95);
  }
}

/* FONTS*/
a {text-decoration: none}
p {font-family: 'Nunito Sans', sans-serif;font-size:1rem; line-height: 1.6;}
h1, h2, h3, h4, h5 ,h6 {font-family: 'Oswald', sans-serif;}



h1 {font-size: 5rem;line-height: 1.6}
h2 {font-size: 3rem;line-height: 1.6}
h3 {font-size: 1.8rem; line-height: 1.6}
h4 {font-size: 1.6rem;line-height: 1.6}
h5 {font-size: 1.4rem;line-height: 1.6}
h6 {font-size: 1rem;line-height: 1.6}


	@media (max-width: 768px) {
		h1 {font-size: 3rem;line-height: 1.2}
h2 {font-size: 2rem;line-height: 1.2}
h3 {font-size: 1.6rem; line-height: 1.2}
h4 {font-size: 1.4rem;line-height: 1.2}
h5 {font-size: 1.2rem;line-height: 1.2}
h6 {font-size: 1rem;line-height: 1.2}
		
}

/* SECTION*/

	section {max-width:1200px; margin-left: auto; margin-right: auto;  padding-left: 20px; padding-right: 20px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 20px;
      align-items: start; 
 }
section img {max-width: 100%; }


/* COLUMNS*/

		.one-col {grid-column: 1 / span 1;  grid-column-start:auto;  }
		.two-col {grid-column: 1 / span 2;   grid-column-start:auto; }
		.three-col {grid-column: 1 / span 3;  grid-column-start:auto;}
		.four-col {grid-column: 1 / span 4;  grid-column-start:auto; }
		.five-col {grid-column: 1 / span 5;  grid-column-start:auto;}
		.six-col {grid-column: 1 / span 6;  grid-column-start:auto;}
		.seven-col {grid-column: 1 / span 7;  grid-column-start:auto;}
		.eight-col {grid-column: 1 / span 8;  grid-column-start:auto;}
.nine-col {grid-column: 1 / span 9;  grid-column-start:auto;}
.ten-col {grid-column: 1 / span 10;  grid-column-start:auto;}
	.eleven-col {grid-column: 1 / span 11;  grid-column-start:auto;}
.twelve-col {grid-column: 1 / span 12;  grid-column-start:auto;}	
		
		@media (max-width: 1019px) {
		.one-col {grid-column: 1 / span 2;  grid-column-start:auto;  }
		.two-col {grid-column: 1 / span 4;   grid-column-start:auto; }
		.three-col {grid-column: 1 / span 4;  grid-column-start:auto;}
		.four-col {grid-column: 1 / span 6;  grid-column-start:auto;}
		.five-col {grid-column: 1 / span 12;  grid-column-start:auto;}
		.six-col {grid-column: 1 / span 12;  grid-column-start:auto;}
		.seven-col {grid-column: 1 / span 12;  grid-column-start:auto;}
		.eight-col {grid-column: 1 / span 12;  grid-column-start:auto;}
			.nine-col {grid-column: 1 / span 12;  grid-column-start:auto;}
.ten-col {grid-column: 1 / span 12;  grid-column-start:auto;}
	.eleven-col {grid-column: 1 / span 12;  grid-column-start:auto;}
.twelve-col {grid-column: 1 / span 12;  grid-column-start:auto;}	
			
		}
		
		@media (max-width: 768px) {
				.one-col {grid-column: 1 / span 12;  grid-column-start:auto;  }
		.two-col {grid-column: 1 / span 12;   grid-column-start:auto; }
		.three-col {grid-column: 1 / span 12;  grid-column-start:auto;}
		.four-col {grid-column: 1 / span 12;  grid-column-start:auto;}
		.five-col {grid-column: 1 / span 12;  grid-column-start:auto;}
		.six-col {grid-column: 1 / span 12;  grid-column-start:auto;}
		.seven-col {grid-column: 1 / span 12;  grid-column-start:auto;}
		.eight-col {grid-column: 1 / span 12;  grid-column-start:auto;}
			.nine-col {grid-column: 1 / span 12;  grid-column-start:auto;}
.ten-col {grid-column: 1 / span 12;  grid-column-start:auto;}
	.eleven-col {grid-column: 1 / span 12;  grid-column-start:auto;}
.twelve-col {grid-column: 1 / span 12;  grid-column-start:auto;}	
			
		}


.hero {width:100%; height:800px;  
 display: table;
  -moz-background-size: cover; position: relative; float: left;  z-index: 3
	
}

.herocalc {width:100%; height:650px;  background:#7171BB;
 display: table;
  -moz-background-size: cover; position: relative; float: left;
	
}

.heroinner {display: table-cell; vertical-align: middle; }

.heroinner h1{text-transform: uppercase; color:#fff;  font-size: 2.7rem; line-height: 1; font-family: 'Nunito Sans', sans-serif;font-weight: 600; text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; letter-spacing: 0.6rem; margin-top: 80px;}

.heroinner h2{ color:#fff;  font-size: 1.6rem; line-height: 1.4; font-family: 'Libre Caslon Text', serif; font-weight: 400;  text-align: center; max-width: 900px; margin-left: auto; margin-right: auto;}

.heroinner h3 { color:#fff;  font-size: 1rem; line-height: 1.4; font-family: 'Libre Caslon Text', serif; font-weight: 400;  text-align: center; font-style: italic; max-width: 900px; margin-left: auto; margin-right: auto; margin-top: 60px;}

.heroinner a {color:#fff; text-decoration: underline;}
.heroinner a:hover {color:#ccc; text-decoration: underline;}


.contactsec {width:100%; padding-top: 60px; padding-bottom: 60px; position: relative; float: left;
	background: #38383d; 
}

.contactsec  h3{text-transform: uppercase; color:#bebebe;  font-size: 2rem; line-height: 0.8; font-family: 'Nunito Sans', sans-serif;font-weight: 600; text-align: center; letter-spacing: 0.3rem;}

.contactsec  p{color:#fff; text-align: center; padding-bottom: 20px}

.carholder {width:100%; padding-top: 0px; padding-bottom: 0px; position: relative; float: left;
	background: #ccc; 
}
.main {width:100%; padding-top: 100px; padding-bottom: 100px; position: relative; float: left;
	background: #fff; 
}
.main2 {width:100%; padding-top: 30px; padding-bottom: 30px; position: relative; float: left;
	background: #fff; 
}
.main  h2, .main2  h2 {font-weight: 400; text-transform: uppercase; color:#bebebe; margin-bottom: 40px; font-family: 'Nunito Sans', sans-serif;letter-spacing: 0.3rem; margin-top: 0px; font-size: 1rem; }
.main  h3, .main2  h3 {font-family: 'Libre Caslon Text', serif; font-weight: 400;  color:#222;  margin-bottom: 20px; margin-top: 10px; }
.main  p, .main2  p {color:#222; font-weight: 300; margin-top: 0px; }

.main h5 { color:#222;  font-size: 1rem; line-height: 1.4; font-family: 'Libre Caslon Text', serif; font-weight: 400;   font-style: italic; max-width: 900px; margin-left: auto; margin-right: auto; margin-top: 60px;}

.main h5 a {color:#222; text-decoration: underline;}
.main h5 a:hover {color:#999; text-decoration: underline;}

.main p a {color:#222; text-decoration: underline; font-weight: 600;}
.main p a:hover {color:#999; text-decoration: underline;}

.grad1 {width:100%; padding-top: 80px; padding-bottom: 80px; position: relative; float: left;
	background: #fff; 
}
.grad1 h5 { color:#222;  font-size: 1rem; line-height: 1.4; font-family: 'Libre Caslon Text', serif; font-weight: 400;   font-style: italic; max-width: 900px; margin-left: auto; margin-right: auto; margin-top: 60px;}

.grad1 h5 a {color:#222; text-decoration: underline;}
.grad1 h5 a:hover {color:#999; text-decoration: underline;}
.grad1  h2 {font-weight: 600; text-transform: uppercase; color:#222;  margin-bottom: 20px;  text-align: center; font-family: 'Nunito Sans', sans-serif;letter-spacing: 0.3rem; font-size: 1.4rem;}
.grad1  h4 {font-weight: 300; text-transform: uppercase; color:#fff;  margin-bottom: 20px;  text-align: center; font-family: 'Nunito Sans', sans-serif;letter-spacing: 0.1rem; font-size: 2.4rem;}
.grad1  p {color:#222; font-weight: 300; margin-top: 0px;  text-align: center}

.grad2 {width:100%; padding-top: 60px; padding-bottom: 100px; position: relative; float: left;
	background: #0060df; 
}

.grad2  h3 {font-weight: 300; text-transform: uppercase; color:#fff;  margin-bottom: 0px; font-family: 'Nunito Sans', sans-serif;letter-spacing: 0.1rem; padding-bottom: 20px; font-size: 2rem;}
.grad2  p {color:#fff; font-weight: 300; margin-top: 0px; max-width: 880px; margin-left: auto; margin-right: auto; margin-bottom: -20px; }

.footer {width:100%; padding-top: 60px; padding-bottom: 100px;
	background: #2a2a2e; position: relative; float: left;

}
.social {margin-top: 20px;}
.fa-2x {margin-right: 8px; color:#fff!important}
.social a{color:#fff!important}

.footer  p {color:#fff; font-weight: 300; margin-top: 0px; text-shadow: 1px 1px 1px #222;}
.footer  h3 {font-weight: 300; text-transform: uppercase; color:#fff; letter-spacing: 8px; margin-bottom: 10px; font-family: 'Nunito Sans', sans-serif;margin-top: 10px; }
.footer  h4 {font-weight: 300;  color:#fff;  margin-bottom: 5px; font-family: 'Nunito Sans', sans-serif;margin-top: 10px; line-height: 1.4 }
.footer  h5 {font-weight: 300; text-transform: uppercase; color:#ccc; letter-spacing: 3px; margin-bottom: 5px; font-family: 'Nunito Sans', sans-serif;margin-top: 10px; }
.footer a{color:#ccc}
.footer a:hover{color:#fff}
.footer strong {font-weight: 500}
.small {font-size:0.8rem;}
.padleft {margin-left: 40px; }
@media (max-width: 1020px) {
	.padleft {margin-left: 0px; }
}


.tri_blue {width:40px; height:40px; background: #fbffa7; position:absolute; left:50%; margin-left: -20px; transform: rotate(45deg); margin-top: -80px;}

.tri_white {width:40px; height:40px; background: #fff; position:absolute; left:50%; margin-left: -20px; transform: rotate(45deg); margin-top: -80px;}

/* -------------------------------- 

Main Components 

-------------------------------- */
main {
  position: relative;
  z-index: 2;
  /* fix bug on iOS */
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
 
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.7s;
  -moz-transition: -moz-transform 0.7s;
  transition: transform 0.7s;
  -webkit-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
  -moz-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
  transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
}

.navigation-is-open main {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}


.cd-nav-trigger {
  position: absolute;
  z-index: 3;
  right: 40px;
  top: 20px!important;
  height: 54px;
  width: 54px;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
}
.cd-nav-trigger .cd-nav-icon {
  /* icon created in CSS */
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 32px;
  height: 2px;
  background-color: #ffffff;
}
.cd-nav-trigger .cd-nav-icon::before {
  /* upper and lower lines of the menu icon */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.5s, width 0.5s, top 0.3s;
  -moz-transition: -moz-transform 0.5s, width 0.5s, top 0.3s;
  transition: transform 0.5s, width 0.5s, top 0.3s;
}
 .cd-nav-trigger .cd-nav-icon:after {
  /* upper and lower lines of the menu icon */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background-color: inherit;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.5s, width 0.5s, top 0.3s;
  -moz-transition: -moz-transform 0.5s, width 0.5s, top 0.3s;
  transition: transform 0.5s, width 0.5s, top 0.3s;
}
.cd-nav-trigger .cd-nav-icon::before {
  -webkit-transform-origin: right top;
  -moz-transform-origin: right top;
  -ms-transform-origin: right top;
  -o-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  -o-transform: translateY(-8px);
  transform: translateY(-8px);
}
.cd-nav-trigger .cd-nav-icon::after {
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  -ms-transform: translateY(8px);
  -o-transform: translateY(8px);
  transform: translateY(8px);
}
.no-touch .cd-nav-trigger:hover .cd-nav-icon::after {
  top: 2px;
}
.no-touch .cd-nav-trigger:hover .cd-nav-icon::before {
  top: -2px;
}
.cd-nav-trigger svg {
  position: absolute;
  top: 0;
  left: 0;
}
.cd-nav-trigger circle {
  /* circle border animation */
  -webkit-transition: stroke-dashoffset 0.4s 0s;
  -moz-transition: stroke-dashoffset 0.4s 0s;
  transition: stroke-dashoffset 0.4s 0s;
}
.navigation-is-open .cd-nav-trigger {
  /* rotate trigger when navigation becomes visible */
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after,
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
  /* animate arrow --> from hamburger to arrow */
  width: 50%;
  -webkit-transition: -webkit-transform 0.5s, width 0.5s;
  -moz-transition: -moz-transform 0.5s, width 0.5s;
  transition: transform 0.5s, width 0.5s;
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::after, .no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::before {
  top: 0;
}

@media only screen and (min-width: 1249px) {
  .cd-nav-trigger {
    top: 40px;
  }
}

.cd-nav {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #12161b;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.7s;
  -moz-transition: visibility 0s 0.7s;
  transition: visibility 0s 0.7s;
}
.cd-nav .cd-navigation-wrapper {
  /* all navigation content */
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
 
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: -webkit-transform 0.7s;
  -moz-transition: -moz-transform 0.7s;
  transition: transform 0.7s;
  -webkit-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
  -moz-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
  transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
}
.navigation-is-open .cd-nav {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  -moz-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
}
.navigation-is-open .cd-nav .cd-navigation-wrapper {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
  -moz-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
  transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
}
.cd-nav h2 {
  position: relative;
  margin-bottom: 1.7em;
  font-size: 1.3rem;
  font-weight: 800;
  color: #080b0f;
  text-transform: uppercase;
}
.cd-nav h2::after {
  /* bottom separation line */
  content: '';
  position: absolute;
  left: 0;
  bottom: -20px;
  height: 1px;
  width: 60px;
  background-color: currentColor;
}
.cd-nav .cd-primary-nav {
  margin-top: 60px;
}

.cd-half-block:last-child {margin-top: -60px; margin-left: -60px; margin-left: -80px;}

@media only screen and (max-width: 1249px) {
.cd-half-block:last-child {margin-top: -60px; margin-left: -60px; margin-left: 0px;}	
}

.cd-nav .cd-primary-nav li {
 list-style: none;
}
.cd-nav .cd-primary-nav a {
font-family: 'Nunito Sans', sans-serif;font-weight: 300;
	text-transform: uppercase;
  font-size: 1.6rem;
	
  color: rgba(255, 255, 255, 0.3);
  display: inline-block;
}
.cd-nav .cd-primary-nav a.selected {
  color: #ffffff;
}
.cd-nav .cd-primary-nav a:hover {
  color: #fbffa7;
}
.no-touch .cd-nav .cd-primary-nav a:hover {
  color: #ffffff;
}
.cd-nav .cd-contact-info {
  margin-top: 80px;
}
.cd-nav .cd-contact-info li {
  font-family: "Merriweather", serif;
  margin-bottom: 1.5em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.3);
}
.cd-nav .cd-contact-info a {
  color: #ffffff;
}
.cd-nav .cd-contact-info span {
  display: block;
}
.cd-nav .cd-contact-info li, .cd-nav .cd-contact-info a, .cd-nav .cd-contact-info span {
  font-size: 1.6rem; list-style: none;
}
@media only screen and (min-width: 1249px) {

  .cd-nav .cd-navigation-wrapper::after {
    clear: both;
    content: "";
    display: table;
  }
	
	.cd-nav .cd-half-block:first-child {
    width: 600px;
    float: left;
    margin-top: 10%;
    margin-left: 5%;
}
 .cd-nav .cd-half-block {
    width: 600px;
    float: left;
    margin-top: 10%;
  
}
  .cd-nav .cd-primary-nav {
    margin-top: 0;
  }
  .cd-nav h2 {
    font-size: 1.5rem;
    margin-bottom: 5.6em;
  }
  .cd-nav .cd-primary-nav li {
    margin: 0em 0;
    margin-top: 0em;
    margin-right: 0px;
    margin-bottom: 0em;
    margin-left: -40px;
list-style: none; list-style: none;
  }
  .cd-nav .cd-primary-nav a {
    font-size: 2.6rem;
  }
  .cd-nav .cd-contact-info {
    margin-top: 120px;
    text-align: right;
  }
  .cd-nav .cd-contact-info li {
    margin-bottom: 2.4em;
  }
  .cd-nav .cd-contact-info li, .cd-nav .cd-contact-info a, .cd-nav .cd-contact-info span {
    font-size: 2rem;
  }
}

.no-js main {
  height: auto;
  overflow: visible;
}

.no-js .cd-nav {
  position: static;
  visibility: visible;
}
.no-js .cd-nav .cd-navigation-wrapper {
  height: auto;
  overflow: visible;
  padding: 100px 5%;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}




/* Common button styles */
.button {
	
	min-width: 180px;
	max-width: 180px;
	display: block;
	
	padding: 1.6em 1em;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
}
.button:focus {
	outline: none;
}
.button > span {
	vertical-align: middle;
}





/* Individual button styles */


/* Aylen */
.button.button--aylen {
	background: #111;
	color: #fff;
	
	overflow: hidden;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
	text-align: center;
	text-decoration: none;
	margin-top: 30px;
		font-family: 'Roboto', sans-serif;
	  text-transform: uppercase;
	  font-size: 0.8rem;
	  font-weight: 400;
	
-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
	
	
}



.button--aylen.button--inverted {
	background: #0060df;
	color: #fff;
	
}
.button--aylen::before,
.button--aylen::after {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	bottom: 100%;
	left: 0;
	z-index: -1;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	
}

.button--aylen::after {
	background: #db4734;
	
}
.button--aylen:hover {
	color: #fff;
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
}
.button--aylen:hover::before,
.button--aylen:hover::after {
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}
.button--aylen:hover::after {
	-webkit-transition-delay: 0.175s;
	transition-delay: 0.175s;
}

/* Aylen2 */
.button.button--aylen2 {
	background: #2a2a2e;
	color: #fff;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
	text-align: center;
	text-decoration: none;
	
		font-family: 'Roboto', sans-serif;
	  text-transform: uppercase;
	  font-size: 0.8rem;
	  font-weight: 400;
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
	
	
}
.button--aylen2.button--inverted {
	background: #bebebe;
	color: #fff;
	
}
.button--aylen2::before,
.button--aylen2::after {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	bottom: 100%;
	left: 0;
	z-index: -1;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.button--aylen2::after {
	background: #bebebe;
}
.button--aylen2:hover {
	color: #222;
		-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
}
.button--aylen2:hover::before,
.button--aylen2:hover::after {
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}
.button--aylen2:hover::after {
	-webkit-transition-delay: 0.175s;
	transition-delay: 0.175s;
}











/* Content menuwrap */
.menuwrap {
  width: 100%;
  
  margin: 0 auto;
}



.menuwrap-flush {
  width: 100%;
}

/**
 * Navigation
 */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  background-color: #efefef;
}

/** 
* Nav container 
* 1. Ensure this slides in below parent
* 2. Hide by default
* 3. Smoother scrolling experience on iOS
*/
.nav-container {
  position: fixed;
  top: 0px; /* 1 */
  right: 0;
  z-index: 2;
  overflow-y: auto;
  visibility: hidden; /* 2 */
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  -webkit-transform: translateX(320px);
          transform: translateX(320px); /* 2 */
  background-color: #f5f5f5;
  -webkit-overflow-scrolling: touch; /* 3 */
}



/* 1. Show when `.is-visible` class is added */
.nav-container.is-visible {
  visibility: visible; /* 1 */
  -webkit-transform: translateX(0);
          transform: translateX(0); /* 1 */
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.48);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.48);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.48);
}

/* Nav toggle */
.nav-toggle {
	  z-index: 9999;
  line-height: 1;
  display: inline-block;
  padding: 1.25rem 1rem;
  border: 0;
	position: absolute;
	right: 20px;
	top:20px;
	background: #bebebe;
 
}

/* Nav toggle icon */
.nav-toggle .icon-menu {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 20px;
  vertical-align: middle;
  fill: none;
}

/* Nav toggle icon lines */
.icon-menu .line {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
  background-color: #fff;
}

/* Nav toggle icon line 1 */
.icon-menu .line-1 {
  top: 0;
}

/* When active, rotate line 1 to be lefthand part of X */
.is-active .icon-menu .line-1 {
  -webkit-transform: translateY(8px) translateX(0) rotate(45deg);
          transform: translateY(8px) translateX(0) rotate(45deg);
}

/* Nav toggle icon line 2 */
.icon-menu .line-2 {
  top: 50%;
  margin-top: -1px;
}

/* When active, hide line 2 */
.is-active .icon-menu .line-2 {
  opacity: 0;
}

/* Nav toggle icon line 3 */
.icon-menu .line-3 {
  bottom: 0;
}

/* When active, rotate line 3 to be righthand part of X */
.is-active .icon-menu .line-3 {
  -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
          transform: translateY(-10px) translateX(0) rotate(-45deg);
}

/* Remove default list styles for menus */
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/** 
* 1. Give menu a lighter background than its container 
* 2. Prevent menu text from being accidentally highlighted
*/
.nav-menu {
  
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;         /* 2 */
	width:auto;
	float: right;
	margin-top: 53px;
	margin-right: 40px;
}

@media (max-width: 1249px) {
	.nav-container {	 width: 320px;}
	.nav-menu { width: 320px; margin-right: 0px;}
	ul.nav-menu.menu {margin-top: 100px;}
	
	
}

/* Darker background color on hover, and when toggled */
.nav-menu > .menu-item:hover,
.nav-menu > .menu-item.is-active {
  background-color: #eee;

}

/* 1. Menu links are block level, by default */
.nav-menu .menu-link {
  display: block; /* 1 */
  text-decoration: none;
  color: #000;
  padding: 1.2rem 1rem;
	font-family: 'Noto Sans KR', sans-serif;
font-size: 0.85rem;
font-weight: 600;
		
}

/* 1. Menu items with dropdowns appear clickable */
.has-dropdown {
  position: relative;
  cursor: pointer; /* 1 */
}

/* 1. Parent menu links inlined so you can toggle the dropdown */
.has-dropdown > .menu-link {
  display: inline-block;
}

/* 1. Add an icon to menu items that have sub menus */
.has-dropdown:after {
  font-size: 32px;
  position: absolute;
  top:14px;
  right: 40px;
  bottom: 0;
 margin-top: 10px;
margin-left: -4px;
content: "";
border-width: 5px 5px 0 5px;
border-style: solid;
border-color: #bebebe transparent transparent transparent;
}

/* 1. Switch icon to n-dash when toggled */
.has-dropdown.is-active:after {
  margin-top: 10px;
margin-left: -4px;
content: "";
border-width: 5px 5px 0 5px;
border-style: solid;
border-color: #bebebe transparent transparent transparent;
}

/**
 * Dropdowns
 * 1. Hide dropdowns by default
 */
.nav-dropdown {
  display: none; /* 1 */
  background-color: #F1F1F1;
}

/* 1. Show dropdown when toggled */
.has-dropdown.is-active > .nav-dropdown {
  display: block; /* 1 */
}

/* 2nd level dropdown */
.nav-dropdown .nav-dropdown {
  background-color: #eee;
}
.nav-dropdown .menu-item:hover {
  background-color: #eee;
}

.nav-dropdown .menu-item {

}

.nav-dropdown .nav-dropdown .menu-item {
  background-color: #eee;
  border-color: #eee;
}

/* Main content area */
.content {
  margin-top: 60px;
}

.content .menuwrap {
  padding: 1rem 0;
}

@media (min-width: 1249px) {
  .nav {
    background-color: #eee;
  }
  
  .nav,
  .nav-container,
  .nav-container.is-visible {
    position: relative;
    top: auto;
    left: auto;
    z-index: auto;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  
  .nav-container,
  .nav-container.is-visible {
    visibility: visible;
    height: auto;
    min-height: 0;
    overflow-y: visible;
  }
  
  .nav-toggle {
    display: none;
  }
  
  /* 1. Display menu items inline */
  .nav-menu > .menu-item,
  .nav-menu > .menu-item.is-active {
    display: inline-block; /* 1 */
    background-color: transparent;
    border: 0;
  }
  
  /* Remove bottom border on last child */
  .nav-menu > .menu-item:last-child {
    border: 0;
  }
  
  .nav-menu .menu-item {
    transition: 
      background-color 0.15s ease-in-out, 
      color 0.15s ease-in-out;
  }
  
  /* Remove +/- icons */
  .has-dropdown:after {
    content: "" !important;
  }
  
  /* Add a caret to top-level menu items that have dropdowns */
  .nav-menu > .has-dropdown:after {
    position: absolute;
    top: 50%;
    right: 0.7rem;
    width: 0;
    height: 0;
    margin-top: -4px;
    margin-left: -4px;
    content: "";
    border-width: 5px 5px 0 5px;
    border-style: solid;
    border-color: #bebebe transparent transparent transparent;
  }
  
  /* Increase padding to compensate for caret */
  .has-dropdown > .menu-link {
    padding-right: 2rem;
	
  }
	
	 .has-dropdown > .menu-link:hover {
    padding-right: 2rem;
	background: #eee
  }
	
	
/* Add a caret to top-level menu items that have dropdowns */
 .sub:after  {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 0;
    height: 0;
    margin-top: -2px;
    margin-left: -4px;
    content: "";
    border-width: 5px 5px 0 5px;
    border-style: solid;
    border-color: #bebebe transparent transparent transparent;
	transform: rotate(-90deg); /* Equal to rotateZ(45deg) */
  }
  
  
	
	
	
  
  /* Re-style dropdowns for larger screens */
  .nav-dropdown {
    display: block;
    opacity: 0;
    position: absolute;
    top: 100%;
    width: 220px;
    margin: 0;
    
	  
    box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.15);
    visibility: hidden;
    transition: 
      visibility 0s linear 0.25s,
      opacity 0.25s linear;
  }
  
  .has-dropdown:hover > .nav-dropdown {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
  
  .nav-dropdown .menu-item {
    
  }
  
  .nav-dropdown .menu-item:hover,
  .nav-dropdown .nav-dropdown .menu-item:hover {
    background-color: #fff;
  }

  .nav-dropdown .nav-dropdown,
  .nav-dropdown .nav-dropdown .menu-item {
    background-color: #fff;
  }
  
  .nav-dropdown .nav-dropdown {
    z-index: 9998;
    top: 0;
    left: 100%;
  }
  
  .content {
    margin-top: 0;
  }
}


.animate-pop-in {
  -webkit-animation: pop-in 4s cubic-bezier(0.3, 1, 0.3, 1) forwards;
          animation: pop-in 4s cubic-bezier(0.3, 1, 0.3, 1) forwards;
  opacity: 0;
}
@-webkit-keyframes pop-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-6rem) ;
            transform: translateY(-6rem) ;
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes pop-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-6rem) ;
            transform: translateY(-6rem) ;
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}



.cd-top {
  display: inline-block;
	z-index: 999;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(190, 190, 190, 1) url(../img/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: 1;
}
.no-touch .cd-top:hover {
  background-color: #bebebe;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1249px) {
  .cd-top {
    height: 40px;
    width: 40px;
    right: 30px;
    bottom: 30px;
  }
}

.testimonials  h4 {font-weight: 400; text-transform: uppercase; color:#222;  margin-top: 10px; font-family: 'Nunito Sans', sans-serif;  padding-bottom: 30px; font-size: 1.2rem; letter-spacing: .5rem; text-align: center}
.testimonials  h3 {font-weight: 400; text-transform: uppercase;  letter-spacing: .5rem; 	font-family: 'Libre Caslon Text', serif; color:#222;  margin-bottom: 0px;   padding-bottom: 0px; font-size: 3rem;  text-align: center}
.testimonials  h2 {font-weight: 600; text-transform: uppercase; color:#222;  margin-bottom: 0px; font-family: 'Nunito Sans', sans-serif;  padding-bottom: 10px; font-size: 1.4rem; letter-spacing: .5rem; text-align: center}

.testimonials  p {font-size: 0.9rem}
.testimonials  a {font-weight: 400; font-family: 'Libre Caslon Text', serif; color:#222; font-style: italic; font-size: 0.9rem;  border-bottom-style:solid; border-bottom-width: 1px; border-bottom-color: #222}
.testimonials  a:hover {font-weight: 400; font-family: 'Libre Caslon Text', serif; color:#999; font-style: italic; font-size: 0.9rem;  border-bottom-style:solid; border-bottom-width: 1px; border-bottom-color: #999}
.serviceimg {margin-bottom: -40px; margin-top:14px;}


.cbp-qtrotator {
	position: relative;
	margin: 3em auto 0em auto;
	max-width: 800px;
	width: 100%;
	padding-left: 20px;
padding-right: 20px;
}

.cbp-qtrotator .cbp-qtcontent {
	position: absolute;
	min-height: 200px;

	
	top: 0;
	z-index: 0;
	opacity: 0;
	width: 100%;
}

.no-js .cbp-qtrotator .cbp-qtcontent {
	border-bottom: none;
}

.cbp-qtrotator .cbp-qtcontent.cbp-qtcurrent,
.no-js .cbp-qtrotator .cbp-qtcontent {
	position: relative; 
	z-index: 100;
	pointer-events: auto;
	opacity: 1;
}

.cbp-qtrotator .cbp-qtcontent:before,
.cbp-qtrotator .cbp-qtcontent:after {
	content: " ";
	display: table;
}

.cbp-qtrotator .cbp-qtcontent:after {
	clear: both;
}

.cbp-qtprogress {
	position: absolute;
	background: #e8e8e8;
	height: 2px;
	width: 0%;
	top: 0;
	z-index: 1000;
}

.cbp-qtrotator blockquote {
	margin: 0;
	padding: 0;
}

.cbp-qtrotator blockquote p {
	font-size:0.8em;
	color: #222;
	font-weight: 700;
	padding-top: 30px;
		font-family: 'Nunito Sans', sans-serif; letter-spacing: 3px; text-transform: uppercase; 	text-align: center}

.cbp-qtrotator blockquote h5 {
	font-size: 1.2em;
	color: #222;
	padding-top: 20px;
	line-height: 1.6!important;
	font-weight: 300;
		font-family: 'Libre Caslon Text', serif;  margin: 1em 0 1em;
	text-align: center
}

.cbp-qtrotator blockquote footer {
	font-size: 1.2em;
}

.cbp-qtrotator blockquote footer:before {
	content: '― ';
}

.cbp-qtrotator .cbp-qtcontent img {
	float: right;
	margin-left: 3em;
}




.car1{height: 600px; 
   background-image:  url(../img/car1.jpg);
	background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;
	background-position: center center;
	 transition: transform 0.5s, opacity 0.5s;
}

.car2{height: 600px; 
   background-image:  url(../img/car2.jpg);
background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;
	background-position: center center;
	 transition: transform 0.5s, opacity 0.5s;
}

.car3{height: 600px; 
   background-image:  url(../img/car3.jpg);
	background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;
	background-position: center center;
	 transition: transform 0.5s, opacity 0.5s;
}

.car4{height: 600px;
   background-image:  url(../img/car4.jpg);
background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;
	background-position: center center;
	 transition: transform 0.5s, opacity 0.5s;
}

.car5{height: 600px; 
   background-image:  url(../img/car5.jpg);
	background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;
	background-position: center center;
	 transition: transform 0.5s, opacity 0.5s;
}

.car6{height: 600px; 
   background-image:  url(../img/car6.jpg);
background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;
	background-position: center center;
	 transition: transform 0.5s, opacity 0.5s;
}

.car1:before, .car2:before, .car3:before, .car4:before, .car5:before, .car6:before{content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(40, 40, 40, 0.85);
  transition: 0.5s;
  opacity: 1;
	
}

.car1:hover::before, .car2:hover::before, .car3:hover::before, .car4:hover::before, .car5:hover::before, .car6:hover::before {
  background: rgba(100, 100, 100, 0.65);
}




.box {
    width: 550px;
    height: 550px;
    
    position: absolute;
    margin-top: -300px;
	
}


.box2 {
    width: 1200px;
    height: 800px;
    margin-left:200px;
    position: absolute;
    margin-top: -400px;
	 background-image:  url("../img/grey.jpg");
	background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;
	background-position: center center;
	
}

@media (max-width: 1440px) {
.box2 {
    width: 100%;
    height: 800px;
    margin-left:20px;
    position: absolute;
    margin-top: -400px;
	 background-image:  url("../img/grey.jpg");
	background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;
	background-position: center center;
	
}
}
.box3 {
    width: 900px;
    height: 520px;
    margin-left:0px;
	margin-top: -120px;
    position: absolute;
	background-color: #2a2a2e;
	
}

#demos2 h2 {
    font-size: 2.2rem;
    margin-left: 40px;
    margin-bottom: 10px;
    font-family: 'Nunito Sans', sans-serif;font-weight: 300;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 6px;
    position: absolute;
    text-align: left;
    margin-left: 470px;
    margin-top: -340px;
	color:#999ba4;
}

#demos2 h3 {
    font-size: 1rem;
    margin-left: 40px;
    margin-bottom: 10px;
    font-family: 'Nunito Sans', sans-serif;font-weight: 300;
    color: #444;
    position: absolute;
    text-align: left;
    margin-left: 470px;
    margin-top: -260px;
    max-width: 560px;
}

#demos2 h4 {
    font-size: 1.3rem;
    margin-left: 40px;
    margin-bottom: 10px;
    font-family: 'Nunito Sans', sans-serif;font-weight: 300;
    color: #444;

   
    position: absolute;
    text-align: left;
    margin-left: 1000px;
    margin-top: 0px;
	color:#999ba4;
}

#demos2 h5 {
    font-size: 0.8rem;
	line-height: 1.8;
    margin-left: 40px;
    margin-bottom: 10px;
   font-family: 'Nunito Sans', sans-serif;font-weight: 300;
    color: #444;
    position: absolute;
    text-align: left;
    margin-left: 1000px;
    margin-top: 80px;
    max-width: 280px;
}

@media (max-width: 1440px) {
#demos2 h2 {
    font-size: 2.2rem;
    margin-left: 40px;
    margin-bottom: 10px;
    font-family: 'Nunito Sans', sans-serif;font-weight: 300;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 6px;
    position: absolute;
    text-align: left;
    margin-left: 60px;
    margin-top: -340px;
	color:#999ba4;
}

#demos2 h3 {
    font-size: 1rem;
    margin-left: 40px;
    margin-bottom: 10px;
    font-family: 'Nunito Sans', sans-serif;font-weight: 300;
    color: #444;
    position: absolute;
    text-align: left;
    margin-left: 60px;
    margin-top: -260px;
    max-width: 560px;
}

#demos2 h4 {
    display: none;
}

#demos2 h5 {
    display: none;
}	
	
	.box3 {
    max-width: 900px;
    height: 520px;
    margin-left:20px;
	margin-top: -120px;
    position: absolute;
	background-color: #2a2a2e;
	
}
	
	
}
#demos2 {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 480px;
    padding-bottom: 420px;
	
}

@media (max-width: 920px) {
	.box3, .box2 {display: none;}
	#demos2, #demos2 h2, #demos2 h3 {display: none;}
}



.pic { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(153, 155, 164, 0.8), 
      rgba(153, 155, 164, 0.8)
    ), url(boxbg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover; }

#demos h2 {
    font-size: 2.2rem;
    margin-left: 40px;
    margin-bottom: 10px;
    font-family: 'Nunito Sans', sans-serif;font-weight: 300;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 6px;
    position: absolute;
    text-align: left;
    margin-left: 700px;
    margin-top: -280px;
	color:#999ba4;
}

#demos h3 {
    font-size: 1rem;
    margin-left: 40px;
    margin-bottom: 10px;
    font-family: 'Nunito Sans', sans-serif;font-weight: 300;
    color: #444;
    position: absolute;
    text-align: left;
    margin-left: 700px;
    margin-top: -210px;
    max-width: 560px;
}

#demos {
   max-width: 100%;
}



.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-dots {display: none;}
.owl-nav {margin-top:-80px; left: 50%; position: absolute; margin-left: -46.5px}
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
    
    margin-right: 5px;
    border: none;
    padding-top: 10px!important;
	padding-bottom: 16px!important;
	padding-left: 16px!important;
	padding-right: 16px!important;
	line-height:  1.3rem!important;
    font: inherit;
    font-size: 2rem;
    font-family: 'Nunito Sans', sans-serif;font-weight: 300
}

.owl-carousel button.owl-dot {
    
    margin-left: 6px;
   height:5px; width: 2px!important;
   background-color: #999ba4;
	border:none;
}
.owl-carousel button.owl-dot:hover {background-color: #38383d;}

button.owl-next,
.owl-carousel .owl-nav button.owl-prev{
	background: #fff; color:#2a2a2e; }

.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%
}
.item {margin-top: -30px !important;}
.owl-item {
    background-color: #38383d;
    color: #fff;
    height: 450px;
}

.owl-item h4 {
    font-size: 1.2rem;
    margin-left: 40px;
    margin-bottom: 10px;
	padding-top: 60px;
      font-family: 'Nunito Sans', sans-serif;font-weight: 700;
	 position: relative;
	text-transform: uppercase;
	letter-spacing: 0.3rem;
}
.owl-item a {color:#fff; text-decoration: underline}
.owl-item a:hover {color:#ccc}
.owl-item h5 {
    font-size: 0.9rem;
    margin-left: 40px;
    margin-bottom: 10px;
	padding-top: 0px;
    font-family: 'Libre Caslon Text', serif; font-weight: 400; font-style: italic;
	 position: relative;
	color:#fff;
	text-align: left
}

.owl-item p {
    font-size: 1rem;
    margin-left: 40px;

    max-width: 80%;
    line-height: 1.6;
      font-family: 'Nunito Sans', sans-serif;font-weight: 300;
	 position: relative;
}


@media (max-width: 1310px) {
	#demos h2 {margin-left: 520px;}
#demos h3 {margin-left: 520px;}

	.box {
    width: 450px;
    height: 450px;
    background-color: #999ba4;
    position: absolute;
    margin-top: -300px;
}
}

@media (max-width: 1130px) {
	.box {display:none;}
		#demos h2 {margin-left: 20px;}
#demos h3 {margin-left: 20px;}
	
}

@media (max-width: 999px) {
	.owl-item p {

    
		max-width: 500px;}
}





/*!
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;
}



@font-face {
	font-family: 'rocket-flicker';
	src: url("icon-font-rocket-flicker/icomoon.eot?c4hmew");
	src: url("icon-font-rocket-flicker/icomoon.eot?#iefixc4hmew") format("embedded-opentype"), url("icon-font-rocket-flicker/icomoon.woff?c4hmew") format("woff"), url("icon-font-rocket-flicker/icomoon.ttf?c4hmew") format("truetype"), url("icon-font-rocket-flicker/icomoon.svg?c4hmew#icomoon") format("svg");
	font-weight: normal;
	font-style: normal
}
.rocket-flicker {
	position: relative;
	left: 0;
	margin-top: -450px;
	overflow: hidden;

	
}


.rocket-flicker .button {padding: 1.2em 1em;}


.rocket-flicker ul.flicks {
	position: relative;
	padding: 0;
	margin: 0;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	width: 100%;
	height:450px;
    
	list-style: none;
	
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	align-items: center;
	transform: translate3d(0%, 0px, 0px);
	-webkit-transform: translate3d(0%, 0px, 0px);
	
}

@media only screen and (max-width: 740px) {
    .rocket-flicker ul.flicks {height:580px;}
}

.rocket-flicker ul.flicks>li {
	-webkit-flex-grow: 1;
	-webkit-box-flex: 1;
	-moz-flex-grow: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	-webkit-flex-shrink: 0;
	-webkit-box-flex: 0;
	-moz-flex-shrink: 0;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	-webkit-flex-basis: 100%;
	-moz-flex-basis: 100%;
	-ms-flex-preferred-size: 100%;
	flex-basis: 100%;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-webkit-flex-pack: center;
	-ms-flex-pack: center;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	justify-content: center;
	padding: 28px;
	height: 100%;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	
	background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;
	background-position: center center;

	
	
}


@media only screen and (min-width: 43.813em) {
.rocket-flicker ul.flicks>li {
	padding-left: 10px;
	padding-right: 10px;
	
	
}
}
.rocket-flicker .flick-title, .rocket-flicker .flick-sub-text {
	text-align: center; 
	
}
.rocket-flicker .flick-title {
	padding: 0;
	text-align: center;
	line-height: 40px;
	line-height: 2rem;
	font-size: 24px;
	font-size: 1.4rem;
    margin-bottom:10px;
	color: #d8d8d8;
	  font-family: 'Nunito Sans', sans-serif;font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 5px;
}

@media only screen and (min-width: 43.813em) {
.rocket-flicker .flick-title {
	line-height: 60px;
	line-height: 3.75rem;
	
	font-size: 2.2rem;
	font-weight: 300;
	
}
    
    .flick-sub-text {
	max-width: 800px;
	  font-family: 'Nunito Sans', sans-serif;font-weight: 300;
	text-align: center;
	color: rgba(255,255,255,1);
	line-height: 24px;
	line-height: 1.8rem;
	
	font-size: 1.1rem;
	

}
}

@media only screen and (max-width: 43.812em) {
.rocket-flicker .flick-sub-text {
	max-width: 800px;
	  font-family: 'Nunito Sans', sans-serif;text-align: center;
	color: rgba(255,255,255,1);
	line-height: 24px;
	line-height: 1.6rem;
	
	font-size: 0.9rem;
	font-weight: 300;

}
}
.rocket-flicker .flick-title span.flick-block-text, .rocket-flicker .flick-sub-text span.flick-block-text {
	padding-left: 18px;
	padding-right: 18px;
	padding-top: 12px;
	padding-bottom: 12px;
	background-color: rgba(0,0,0,0.6);
	
}
.rocket-flicker._a-transform-slide ul.flicks {
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
	transform: translate3d(0%, 0px, 0px);
	-webkit-transform: translate3d(0%, 0px, 0px);
	-webkit-transition: -webkit-transform .2s ease-out;
	-o-transition: -o-transform .2s ease-out;
	-moz-transition: -moz-transform .2s ease-out;
	transition: transform .2s ease-out
}

@media only screen and (min-width: 43.813em) {
.rocket-flicker._a-transform-slide ul.flicks {
	-webkit-transition: -webkit-transform .6s ease-out;
	-o-transition: -o-transform .6s ease-out;
	-moz-transition: -moz-transform .6s ease-out;
	transition: transform .6s ease-out
}
}
.rocket-flicker._a-transition-slide ul.flicks {
	position: relative;
	left: 0%;
	-webkit-transition: left .2s ease-out 0s;
	-moz-transition: left .2s ease-out 0s;
	-ms-transition: left .2s ease-out 0s;
	transition: left .2s ease-out 0s;
	
}

@media only screen and (min-width: 43.813em) {
.rocket-flicker._a-transition-slide ul.flicks {
	-webkit-transition: left .6s ease-out 0s;
	-moz-transition: left .6s ease-out 0s;
	-ms-transition: left .6s ease-out 0s;
	transition: left .6s ease-out 0s;
	
}
}
.rocket-flicker._a-scroller-slide {
	padding-bottom: 0px;
	overflow: auto
}
.rocket-flicker._a-scroller-slide ul.flicks {
	position: auto
}
.rocket-flicker._a-transition-fade ul.flicks {
	position: relative
}
.rocket-flicker._a-transition-fade ul.flicks li {
	float: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	filter: alpha(opacity=0);
	z-index: 1
}
.rocket-flicker._a-transition-fade ul.flicks li._active {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transition: opacity .8s ease-out 0s;
	-moz-transition: opacity .8s ease-out 0s;
	-ms-transition: opacity .8s ease-out 0s;
	transition: opacity .8s ease-out 0s;
	z-index: 2
}
.rocket-flicker._a-transition-fade.fade-initiated ul.flicks li {
	-webkit-transition: opacity .8s ease-out 0s;
	-moz-transition: opacity .8s ease-out 0s;
	-ms-transition: opacity .8s ease-out 0s;
	transition: opacity .8s ease-out 0s
}
.rocket-flicker-arrow {
	display: block;
	position: absolute;
	top: 10%;
	width: 48px;
	height: 80%;
	z-index: 100;
	overflow: hidden;
	font-family: "rocket-flicker";
	vertical-align: middle
}

@media only screen and (min-width: 43.813em) {
.rocket-flicker-arrow {
	width: 100px
}
}
.rocket-flicker-arrow:before {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -25px;
	margin-top: -25px;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	opacity: 0;
	filter: alpha(opacity=0);
	text-align: center;
	color: #fff;
	font-size: 48px;
	font-size: 3rem;
	-webkit-transition: opacity .2s ease-out 0s;
	-moz-transition: opacity .2s ease-out 0s;
	-ms-transition: opacity .2s ease-out 0s;
	transition: opacity .2s ease-out 0s
}
.rocket-no-touch .rocket-flicker-arrow:hover {
	cursor: pointer
}
.rocket-no-touch .rocket-flicker-arrow:hover._left:before, .rocket-no-touch .rocket-flicker-arrow:hover._right:before {
	opacity: 1;
	filter: alpha(opacity=100)
}
.rocket-no-touch .rocket-flicker-arrow:active._left:before, .rocket-no-touch .rocket-flicker-arrow:active._right:before {
	margin-top: -23px
}
.rocket-flicker-arrow._left {
	left: 0%
}
.rocket-flicker-arrow._left:before {
	content: "\f104"
}
.rocket-flicker-arrow._right {
	right: 0%
}
.rocket-flicker-arrow._right:before {
	content: "\f105"
}
.rocket-flicker-dots {
	position: absolute;
	bottom: 15px;
	width: 100%;
	text-align: center;
	z-index: 100
}
.rocket-flicker-dots ul {
	text-align: center;
	list-style: none;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 0px;
	padding-bottom: 0px;
    margin-left: 0rem;
}
.rocket-flicker-dots ul li {
	display: inline-block;
	float: none
}
.rocket-flicker-dots .dot {
	width: 8px;
	height: 8px;
	line-height: 14px;
	text-align: center;
	margin-left: 6px;
	margin-right: 6px;
	background-color: rgba(255,255,255,0.3);
	border-radius: 50%;
	-ms-border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	background-clip: padding-box;
	-webkit-transition: background-color .2s ease-out 0s;
	-moz-transition: background-color .2s ease-out 0s;
	-ms-transition: background-color .2s ease-out 0s;
	transition: background-color .2s ease-out 0s
}
.rocket-no-touch .rocket-flicker-dots .dot:hover {
	cursor: pointer;
	background-color: rgba(255,255,255,0.6)
}
.rocket-flicker-dots .dot._active {
	background-color: #fff
}
.rocket-flicker-dots._left, .rocket-flicker-dots._left ul {
	text-align: left
}
.rocket-flicker-dots._right, .rocket-flicker-dots._right ul {
	text-align: right
}





/* -------------------------------- 

Form

-------------------------------- */
.red {color:#F96467}
.cd-form {
  width: 100%;


}
.cd-form::after {
  clear: both;
  content: "";
  display: table;
}
.cd-form fieldset {
  margin: 24px 0;
}
.cd-form legend {
  padding-bottom: 10px;
  margin-bottom: 20px;
  font-size: 2rem;
  border-bottom: 1px solid #ecf0f1;
}
.cd-form div {
  /* form element wrapper */
  position: relative;
  margin: 20px 0;
}
.cd-form h4, .cd-form .cd-label {
  font-size: 0.75rem;
  color: #444;
	font-weight: 600;
  margin-bottom: 10px;
}
.cd-form .cd-label {
  display: block;
}
.cd-form input, .cd-form textarea, .cd-form select, .cd-form label {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 0.8rem;
  color: #2a2a2e;
}
.cd-form input[type="text"],
.cd-form input[type="email"],
.cd-form textarea,
.cd-form select,
.cd-form legend {
  display: block;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.cd-form input[type="text"],
.cd-form input[type="email"],
.cd-form textarea,
.cd-form select {
  /* general style for input elements */
  padding: 14px;
  border: 1px solid #4A4A53;
  background-color: #303035;
	color:#fff;
  
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
}
.cd-form input[type="text"]:focus,
.cd-form input[type="email"]:focus,
.cd-form textarea:focus,
.cd-form select:focus {
  outline: none;
  border-color: #2c97de;
  box-shadow: 0 0 5px rgba(44, 151, 222, 0.2);
}
.cd-form .cd-select {
  /* select element wapper */
  position: relative;
}
.cd-form .cd-select::after {
  /* arrow icon for select element */
  content: '';
  position: absolute;
  z-index: 1;
  right: 16px;
  top: 50%;
  margin-top: -8px;
  display: block;
  width: 16px;
  height: 16px;
  background: url("../img/cd-icon-arrow.svg") no-repeat center center;
  pointer-events: none;
}
.cd-form select {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
.cd-form select::-ms-expand {
  display: none;
}
.cd-form .cd-form-list {
  margin-top: 16px;
}
.cd-form .cd-form-list::after {
  clear: both;
  content: "";
  display: table;
}
.cd-form .cd-form-list li {
  /* wrapper for radio and checkbox input types */
  display: inline-block;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0 26px 16px 0;
  float: left;
}
.cd-form input[type=radio],
.cd-form input[type=checkbox] {
position: relative;
left: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
margin-right: 5px;
margin-top: 5px;
margin-bottom: -5px;
padding: 0;
opacity: 1;
z-index: 2;
}
.cd-form input[type="radio"] + label,
.cd-form input[type="checkbox"] + label {
  padding-left: 24px;
}
.cd-form input[type="radio"] + label::before,
.cd-form input[type="radio"] + label::after,
.cd-form input[type="checkbox"] + label::before,
.cd-form input[type="checkbox"] + label::after {
  /* custom radio and check boxes */
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
}
.cd-form input[type="radio"] + label::before,
.cd-form input[type="checkbox"] + label::before {
  border: 1px solid #cfd9db;
  background: #ffffff;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
}
.cd-form input[type="radio"] + label::before,
.cd-form input[type="radio"] + label::after {
  border-radius: 50%;
}
.cd-form input[type="checkbox"] + label::before,
.cd-form input[type="checkbox"] + label::after {
  border-radius: .25em;
}
.cd-form input[type="radio"] + label::after,
.cd-form input[type="checkbox"] + label::after {
  background-color: #2c97de;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 0 0 5px rgba(44, 151, 222, 0.4);
  display: none;
}
.cd-form input[type="radio"] + label::after {
  /* custom image for radio button */
  background-image: url("../img/cd-icon-radio.svg");
}
.cd-form input[type="checkbox"] + label::after {
  /* custom image for checkbox */
  background-image: url("../img/cd-icon-check.svg");
}
.cd-form input[type="radio"]:focus + label::before,
.cd-form input[type="checkbox"]:focus + label::before {
  /* add focus effect for radio and check buttons */
  box-shadow: 0 0 5px rgba(44, 151, 222, 0.6);
}
.cd-form input[type="radio"]:checked + label::after,
.cd-form input[type="checkbox"]:checked + label::after {
  display: block;
}
.cd-form input[type="radio"]:checked + label::before,
.cd-form input[type="radio"]:checked + label::after,
.cd-form input[type="checkbox"]:checked + label::before,
.cd-form input[type="checkbox"]:checked + label::after {
  -webkit-animation: cd-bounce 0.3s;
  -moz-animation: cd-bounce 0.3s;
  animation: cd-bounce 0.3s;
}
.cd-form textarea {
  min-height: 200px;
  resize: vertical;
  overflow: auto;
}

.cd-form input[type="submit"]:hover {
  outline: none;
  background: #bebebe;
}




@media only screen and (min-width: 600px) {
  .cd-form div {
    /* form element wrapper */
    margin: 10px 0;
  }
  .cd-form legend + div {
    /* reduce margin-top for first form element after the legend */
    margin-top: 20px;
  }
  .cd-form h4, .cd-form .cd-label {
    font-size: 0.9rem;
	 
    margin-bottom: 5px;
	  color:#fff;
	  font-family: 'Nunito Sans', sans-serif;	  font-weight: 300;
  }
 
}










.cd-form2 {
  width: 100%;


}
.cd-form2::after {
  clear: both;
  content: "";
  display: table;
}
.cd-form2 fieldset {
  margin: 24px 0;
}
.cd-form2 legend {
  padding-bottom: 10px;
  margin-bottom: 20px;
  font-size: 2rem;
  border-bottom: 1px solid #ecf0f1;
}
.cd-form2 div {
  /* form element wrapper */
  position: relative;
  margin: 20px 0;
}
.cd-form2 h4, .cd-form2 .cd-label {
  font-size: 0.75rem;
  color: #444;
	font-weight: 600;
  margin-bottom: 10px;
}
.cd-form2 .cd-label {
  display: block;
}
.cd-form2 input, .cd-form2 textarea, .cd-form2 select, .cd-form2 label {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 0.8rem;
  color: #2a2a2e;
}
.cd-form2 input[type="text"],
.cd-form2 input[type="email"],
.cd-form2 textarea,
.cd-form2 select,
.cd-form2 legend {
  display: block;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.cd-form2 input[type="text"],
.cd-form2 input[type="email"],
.cd-form2 textarea,
.cd-form2 select {
  /* general style for input elements */
  padding: 14px;
  border: 1px solid #ccc;
  background-color: #fff;
	color:#222;
  
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
}
.cd-form2 input[type="text"]:focus,
.cd-form2 input[type="email"]:focus,
.cd-form2 textarea:focus,
.cd-form2 select:focus {
  outline: none;
  border-color: #2c97de;
  box-shadow: 0 0 5px rgba(44, 151, 222, 0.2);
}
.cd-form2 .cd-select {
  /* select element wapper */
  position: relative;
}
.cd-form2 .cd-select::after {
  /* arrow icon for select element */
  content: '';
  position: absolute;
  z-index: 1;
  right: 16px;
  top: 50%;
  margin-top: -8px;
  display: block;
  width: 16px;
  height: 16px;
  background: url("../img/cd-icon-arrow.svg") no-repeat center center;
  pointer-events: none;
}
.cd-form2 select {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
.cd-form2 select::-ms-expand {
  display: none;
}
.cd-form2 .cd-form-list {
  margin-top: 16px;
}
.cd-form2 .cd-form-list::after {
  clear: both;
  content: "";
  display: table;
}
.cd-form2 .cd-form-list li {
  /* wrapper for radio and checkbox input types */
  display: inline-block;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0 26px 16px 0;
  float: left;
}
.cd-form2 input[type=radio],
.cd-form2 input[type=checkbox] {
  /* hide original check and radio buttons */
  position: relative;
  left: 0;
  
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-right: 5px;
	margin-top:5px;
	margin-bottom: -5px;
  padding: 0;
  opacity: 1;
  z-index: 2;
}
.cd-form2 input[type="radio"] + label,
.cd-form2 input[type="checkbox"] + label {
  padding-left: 24px;
}
.cd-form2 input[type="radio"] + label::before,
.cd-form2 input[type="radio"] + label::after,
.cd-form2 input[type="checkbox"] + label::before,
.cd-form2 input[type="checkbox"] + label::after {
  /* custom radio and check boxes */
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
}
.cd-form2 input[type="radio"] + label::before,
.cd-form2 input[type="checkbox"] + label::before {
  border: 1px solid #cfd9db;
  background: #ffffff;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
}
.cd-form2 input[type="radio"] + label::before,
.cd-form2 input[type="radio"] + label::after {
  border-radius: 50%;
}
.cd-form2 input[type="checkbox"] + label::before,
.cd-form2 input[type="checkbox"] + label::after {
  border-radius: .25em;
}
.cd-form2 input[type="radio"] + label::after,
.cd-form2 input[type="checkbox"] + label::after {
  background-color: #2c97de;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 0 0 5px rgba(44, 151, 222, 0.4);
  display: none;
}
.cd-form2 input[type="radio"] + label::after {
  /* custom image for radio button */
  background-image: url("../img/cd-icon-radio.svg");
}
.cd-form2 input[type="checkbox"] + label::after {
  /* custom image for checkbox */
  background-image: url("../img/cd-icon-check.svg");
}
.cd-form2 input[type="radio"]:focus + label::before,
.cd-form2 input[type="checkbox"]:focus + label::before {
  /* add focus effect for radio and check buttons */
  box-shadow: 0 0 5px rgba(44, 151, 222, 0.6);
}
.cd-form2 input[type="radio"]:checked + label::after,
.cd-form2 input[type="checkbox"]:checked + label::after {
  display: block;
}
.cd-form2 input[type="radio"]:checked + label::before,
.cd-form2 input[type="radio"]:checked + label::after,
.cd-form2 input[type="checkbox"]:checked + label::before,
.cd-form2 input[type="checkbox"]:checked + label::after {
  -webkit-animation: cd-bounce 0.3s;
  -moz-animation: cd-bounce 0.3s;
  animation: cd-bounce 0.3s;
}
.cd-form2 textarea {
  min-height: 200px;
  resize: vertical;
  overflow: auto;
}

.cd-form2 input[type="submit"]:hover {
  outline: none;
  background: #666; color:#fff
}




@media only screen and (min-width: 600px) {
  .cd-form2 div {
    /* form element wrapper */
    margin: 10px 0;
  }
  .cd-form2 legend + div {
    /* reduce margin-top for first form element after the legend */
    margin-top: 20px;
  }
  .cd-form2 h4, .cd-form .cd-label {
    font-size: 0.9rem;
	 
    margin-bottom: 5px;
	  color:#fff;
	  font-family: 'Nunito Sans', sans-serif;	  font-weight: 300;
  }
 
}