@font-face {
font-family: Avenir-Book;
font-weight: 'regular';
src: url("../fonts/AvenirLTStd-Book.otf") format("opentype");
}


@font-face {
font-family: Avenir-Black;
font-weight: bold;
src: url("../fonts/AvenirLTPro-Black.otf") format("opentype");
}

body {
	font-family: Avenir-Book;
	color: #454B53;
	background:  url(../img/background.png);
	background-position: center center;
	background-repeat: no-repeat;
	/*background-attachment: fixed;*/
	background-size: cover;
	/*overflow: hidden;*/
}

.container {
}

/*faq*/
/* overlay */
.overlayyy {
	position: fixed;
	top: 0;
	left: 0;
	height: 100px;
	width: 100vw;
	overflow: hidden;
	background: transparent;
	/*pointer-events:none; */
	/*border: solid red 1px;*/
}

/*styling open close button*/


.wrappmobile {
    display: none;
}
.buttonn {
    display:inline-block;
    position:absolute;
    right:25px;
    bottom:25px;
    z-index:99999999999;
    font-size:30px;
}
.buttonn a {
    text-decoration:none;
    border: none;
}
.btn-open:after {
    color: #454B53;
    content:"\f128";
    font-family:"FontAwesome";
    transition-property:all .2s linear 0s;
    -moz-transition:all .2s linear 0s;
    -webkit-transition:all .2s linear 0s;
    -o-transition:all .2s linear 0s;
}
.btn-open:hover:after {
    color: #454B53;
}
/*.btn-close:after {
    color: #454B53;
    content:"\f00d";
    font-family:"FontAwesome";
    transition-property:all .2s linear 0s;
    -moz-transition:all .2s linear 0s;
    -webkit-transition:all .2s linear 0s;
    -o-transition:all .2s linear 0s;
}*/
.btn-close:hover:after {
    color: #454B53;
}
/*overlay*/
.overlay {
    display: none;
    position:fixed;
    top:0;
    left: 0;
    height:100%;
    width:100%;
    background-color: rgba(255, 255, 255, .95);
    overflow: auto;
    z-index:99;
}

.wrapp {
    color:white;
    text-align:center;
    /*max-width:100%;*/
    width: 100%;
    float: center;
    display: block;
    margin:0 auto;
    padding-top: 4em;
    /*background-color: rgba(255, 255, 255, 0.90);*/
    overflow: auto;

}


.quest {
    padding: 1em 0em;
    /*border: solid red 1px;*/
    width: 800px;
    margin: 0 auto;
    float: center;
}

.quest a {
	text-decoration: underline;
	color: #454b53;
	font-family: Avenir-Black;
}

.quest a:hover {
	text-decoration: none;
	opacity: .8;
}

.question {
	font-size: 25px;
	font-family: Avenir-Black;
	color: #454B53;
}
.answer {
	font-family: Avenir-Book;
	color: #000;
}



/* overlay */

/*end faq*/

.header {
	padding-top: 45px;
	padding-bottom: 45px;
}

.header img {
	width: 200px;
	float: left;
	display: block;
	margin: 0 auto;
	margin-left: 50px;
}

.minute {
	padding-top: 15px;
	padding-bottom: 15px;
}

.minute img {
	width: 600px;
	float: center;
	display: block;
	margin: 0 auto;
}

.tagline {
	padding: 10px 0px 10px 0px;
}

.tagline p {
	float: center;
	display: block;
	margin: 0 auto;
	text-align: center;
	font-size: 20px;
}

.emphasis {
	font-family: Avenir-Black;
}

hr {
	width: 400px;
	margin: 0 auto;
	float: center;
	display: block;
	border-color: #979797;
	margin-top: 15px;
	margin-bottom: 15px;
}

.cta {
	padding: 10px 0px 10px 0px;
}

.cta p {
	margin: 0 auto;
	float: center;
	display: block;
	text-align: center;
	width: 380px;
}

.chrome {
	padding-top: 25px;
	padding-bottom: 25px;
}

.chrome_btn {
	border-radius: 4px;
	width: 250px;
	padding: 7px 0px 7px 0px;
	border: solid 1px #4CB781;
	text-align: center; 
	margin: 0 auto;
	float: center;
	display: block;
	cursor:pointer; 
	z-index: 100000000;
	background-color: #F4F5F6;
}

.chrome_btn:hover {
	text-decoration: none;
	border-color: rgba(76, 183, 129, 0.5);
    box-shadow: 0 0 3px #4CB781;
    transition-timing-function: ease-out;
    transition: .25s;
}

.chrome_btn img {
	display: inline-block;
	margin: 0 auto;
	float: center;
	width: 25px;
	margin-right: 2.5px;
	margin-top: -5px;
}

.chrome_btn p {
	display: inline-block;
	margin: 0 auto;
	float: center;
	color: #4CB781;
	font-size: 18px;
	margin-left: 2.5px;
	padding-top: 3px;
}

.demo {
	padding-top: 50px;
	padding-bottom: 50px;
}

.demo img {
	width: 700px;
	margin: 0 auto;
	float: center;
	display: block;
}

.footer {
	padding-top: 0px;
	padding-bottom: 30px;
	text-align: center;
}

.footer p {
	margin: 0 auto;
	float: center;
	display: block;
	font-size: 12px;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #8c939c;
}

.footer .discount {
	font-size: 9px;
	opacity: .7;
}

.footer a {
	margin: 0 auto;
	float: center;
	display: block;
	width: 130px;
}

.footer img {
	width: 100%;
}

/* weird slide in animations*/
.overlayy {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	background: transparent;
	pointer-events:none; 
	/*z-index: -900000;*/
}

#boss {
	position: absolute;
	top: 250px;
	right: -100%;
	animation: slide_two 30s infinite;
	width: 800px;
	z-index: 2;

}

.slide_two{
	animation-name: slide_two;
	-webkit-animation-name: slide_two;	

	animation-timing-function: slide;	
	-webkit-animation-timing-function: slide;	

	visibility: visible !important;						
}

@keyframes slide_two {
	0% { right: -150%; }
	5% { right: -150%; }
	10% { right: -25%; }
	20% { right: -25%; }
	30% { right: -150%; }
	100% { right: -150%; }
}

#karate {
	position: absolute;
	top: 50px;
	right: -100%;
	animation: slide_one 30s infinite;
	width: 300px;
	z-index: 2;

}

.slide_one{
	animation-name: slide_one;
	-webkit-animation-name: slide_one;	

	animation-timing-function: slide;	
	-webkit-animation-timing-function: slide;	

	visibility: visible !important;						
}

@keyframes slide_one {
	0% { right: -150%; }
	15% { right: -150%; }
	85% { right: -150%; }
	100% { right: 150%; }
}

#girl {
	position: absolute;
	top: -100px;
	left: 5%;
	animation: slide_three 30s infinite;
	width: 200px;
	z-index: -2;

}

.slide_three{
	animation-name: slide_three;
	-webkit-animation-name: slide_three;	

	animation-timing-function: slide;	
	-webkit-animation-timing-function: slide;	

	visibility: visible !important;						
}

@keyframes slide_three {
	0% { top: -150%; }
	45% { top: -150%; }
	50% { top: -20%; }
	51% { top: -22%; }
	52% { top: -20%; }
	53% { top: -22%; }
	54% { top: -20%; }
	55% { top: -22%; }
	66% { top: -150%; }
	100% { top: -150%; }
}


#colleagues {
	position: absolute;
	bottom: 0;
	left: -150%;
	animation: slide_four 30s infinite;
	width: 550px;
	z-index: 2;
}

.slide_four{
	animation-name: slide_four;
	-webkit-animation-name: slide_four;	

	animation-timing-function: slide;	
	-webkit-animation-timing-function: slide;	

	visibility: visible !important;						
}

@keyframes slide_four {
	0% { left: -150%; }
	65% { left: -150%; }
	68% { left: 0%; }
	72% { left: 0%; }
	75% { left: 0%; }
	77% { left: -150%; }
	100% { left: -150%; }
}


#dude {
	position: absolute;
	bottom: -150;
	left: 50%;
	animation: slide_five 30s infinite;
	width: 300px;
	z-index: 2;
}

.slide_five{
	animation-name: slide_five;
	-webkit-animation-name: slide_five;	

	animation-timing-function: slide;	
	-webkit-animation-timing-function: slide;	

	visibility: visible !important;						
}

@keyframes slide_five {
	0% { bottom: -150%; }
	30% { bottom: -150%; }
	32% { bottom: 0%; }
	40% { bottom: 0%; }
	42% { bottom: 0%; }
	43% { bottom: -150%; }
	100% { bottom: -150%; }
}



/*mobile styling*/
@media screen and (max-width: 768px) {	
	.header {
		width: 100%;
		margin: 0 auto;
		float: center;
		display: block;
		text-align: center;
		padding: 25px 0px 15px 0px;
	}

	.headerimg {
		text-align: center;
		width: 100%;
		margin: 0 auto;
		float: center;
		display: block;
	}

	.headerimg img {
		width: 50%;
		left: 25%;
		margin: 0 auto;
		float: center;
		display: block;
	}

	hr {
		width: 75%;
		margin: 0 auto;
		float: center;
		display: block;
	}

	.minute {
		width: 100%;
		float: center;
		display: block;
		margin: 0 auto;
	}
	
	.minute img {
		width: 90%;
		margin: 0 auto;
		float: center;
		display: block;
	}

	.tagline {
		width: 90%;
		margin: 0 auto;
		float: center;
		display: block;
		padding-top: 20px;
	}

	.tagline p {
		font-size: 23px;
	}

	.cta {
		width: 80%;
		margin: 0 auto;
		float: center;
		display: block;
	}

	.cta p {
		width: 100%;
		margin: 0 auto;
		display: block;
	}

	.chrome {
		width: 100%;
		margin: 0 auto;
		float: center;
		display: block;
	}

	.demo {
		width: 100%;
		float: center;
		display: block;
		margin: 0 auto;
		padding: 15px 0px 15px 0px;
	}

	.demo img {
		width: 95%;
		float: center;
		display: block;
		margin: 0 auto;
	}

	.footer {
		width: 100%;
		margin: 0 auto;
		display: block;
	}


.buttonn {
    display:inline-block;
    position:absolute;
    right: 7.5px;
    z-index:99999999999;
    font-size:30px;
    opacity: .5;
} 



.overlayyy {
	margin-top: 450px;
	height: 100px;
}
.wrapp {
    padding-top: 1em;
}

.quest {
    padding: 1em 0em;
    /*border: solid red 1px;*/
    width: 90%;
    margin: 0 auto;
    float: center;
}
.question {
	font-size: 15px;
}


	/*animations*/
	#boss {
	position: absolute;
	top: 150px;
	right: -100%;
	animation: slide_two 30s infinite;
	width: 300px;
	z-index: 2;

}

.slide_two{
	animation-name: slide_two;
	-webkit-animation-name: slide_two;	

	animation-timing-function: slide;	
	-webkit-animation-timing-function: slide;	

	visibility: visible !important;						
}

@keyframes slide_two {
	0% { right: -150%; }
	5% { right: -45%; }
	10% { right: -45%; }
	20% { right: -150%; }
	100% { right: -150%; }
}

#karate {
	position: absolute;
	top: 50px;
	right: -100%;
	animation: slide_one 30s infinite;
	width: 200px;
	z-index: 2;

}

.slide_one{
	animation-name: slide_one;
	-webkit-animation-name: slide_one;	

	animation-timing-function: slide;	
	-webkit-animation-timing-function: slide;	

	visibility: visible !important;						
}

@keyframes slide_one {
	0% { right: -150%; }
	15% { right: -150%; }
	85% { right: -150%; }
	100% { right: 150%; }
}

#girl {
	position: absolute;
	top: -100px;
	left: 5%;
	animation: slide_three 30s infinite;
	width: 200px;
	z-index: -2;

}

.slide_three{
	animation-name: slide_three;
	-webkit-animation-name: slide_three;	

	animation-timing-function: slide;	
	-webkit-animation-timing-function: slide;	

	visibility: visible !important;						
}

@keyframes slide_three {
	0% { top: -150%; }
	45% { top: -150%; }
	50% { top: -35%; }
	51% { top: -37%; }
	52% { top: -35%; }
	53% { top: -37%; }
	54% { top: -35%; }
	55% { top: -37%; }
	66% { top: -150%; }
	100% { top: -150%; }
}


#colleagues {
	position: absolute;
	bottom: 0;
	left: -150%;
	animation: slide_four 30s infinite;
	width: 350px;
	z-index: 2;
}

.slide_four{
	animation-name: slide_four;
	-webkit-animation-name: slide_four;	

	animation-timing-function: slide;	
	-webkit-animation-timing-function: slide;	

	visibility: visible !important;						
}

@keyframes slide_four {
	0% { left: -150%; }
	65% { left: -150%; }
	68% { left: 0%; }
	72% { left: 0%; }
	75% { left: 0%; }
	77% { left: 150%; }
	100% { left: 150%; }
}


#dude {
	position: absolute;
	bottom: -150;
	left: 50%;
	animation: slide_five 30s infinite;
	width: 250px;
	z-index: 2;
}

.slide_five{
	animation-name: slide_five;
	-webkit-animation-name: slide_five;	

	animation-timing-function: slide;	
	-webkit-animation-timing-function: slide;	

	visibility: visible !important;						
}

@keyframes slide_five {
	0% { bottom: -150%; }
	30% { bottom: -150%; }
	32% { bottom: 0%; }
	40% { bottom: 0%; }
	42% { bottom: 0%; }
	43% { bottom: -150%; }
	100% { bottom: -150%; }
}

}