@font-face {
font-family: 'Century Gothic';
src: url('../fonts/CenturyGothic-Bold.eot');
src: url('../fonts/CenturyGothic-Bold.eot#iefix') format('embedded-opentype'),
	url('../fonts/CenturyGothic-Bold.woff') format('woff'),
	url('../fonts/CenturyGothic-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;

}

@font-face {
	font-family: 'Century Gothic';
	src: url('../fonts/CenturyGothic.eot');
	src: url('../fonts/CenturyGothic.eot#iefix') format('embedded-opentype'),
		url('../fonts/CenturyGothic.woff') format('woff'),
		url('../fonts/CenturyGothic.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


html {
    font-size: 62.5%;
    height: 100%;
    min-height: 100%;
}

body {  
    color: white;
    font-family: 'Muli', sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 1.8rem;
    font-weight: 400;
    height: 100%;
    min-height: 100%;
    text-transform: uppercase;
}

*, *::before, *::after {
    box-sizing: border-box;
}

ul {
    list-style: outside none none;
    margin: 0px;
    padding: 0px;
}

img {
    max-width: 100%;
}

/*******************************CONTAINERS*******************************/

video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(../images/frame-v1.png) no-repeat;
}

button {
	display: none;
}

.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
}   

.container {
    width:1000px;
    position: relative;
    margin:0 auto;
}

#question_2, #question_3, #ending {
	position: absolute;
	left:165%;
	top:0;
}

.second_img, .third_img, .rotate_img {
	display: none;
}

.rotate_img {
	background-image: url(../images/members.jpg);
	width: 200px;
	margin: 0 auto;
	border-radius: 300px;
	border: solid 5px white;
	margin-top: 5%;
	height: 200px;
	background-repeat: repeat-x;
	-webkit-animation: backgroundScroll 4s linear;
	animation: backgroundScroll 4s linear;
}

@-webkit-keyframes backgroundScroll {
	from {background-position: 0px 0;}
	to {background-position: -1000px 0;}
}

@keyframes backgroundScroll {
	from {background-position: 0 0;}
	to {background-position: -1000px 0;}
}

#overlay {
	position: fixed;
	top: 0;
	height: 100%;
	min-height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 1;
}

#invisible_text {
	z-index: 3;
	position: fixed;
	right: 0;
	bottom:0;
}

header {
	text-align: center;
	z-index: 3;
	position: relative;
}

.header_box {
	background: rgba(0,0,0,0.8);
	padding:1% 0;
	border-radius: 0 0 100px 100px;
	margin-bottom: 5%;
}

#main {
	overflow: hidden;
	position: relative;
	z-index: 6;
}

.main_box {
	width: 900px;
	margin: 0 auto;
	position: relative;
	height: 600px;
	background: rgba(0, 0, 0, 0.5);
	padding: 5% 0;
	border-radius: 160px;
	z-index: 6;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;
	justify-content: center;
}

a.button_no, a.button_yes {
	display: block;
	text-decoration: none;
	width: 300px;
	height: 300px;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;
	justify-content: center;
	position: absolute;
	border-radius: 300px;
	font-size: 8rem;
	z-index: 2;
}

a.button_no {
	left:-17%;
	top:30%;
	border: solid 5px #ED413F;
	color:#ED413F;
	transition:all linear 0.3;
	background: rgba(0,0,0,0.8);
}

a.button_yes {
	right:-17%;
	top:30%;
	border:solid 5px #1AAD5D;
	color:#1AAD5D;
	transition:all linear 0.3;
	background: rgba(0,0,0,0.8);
	z-index: 2;
}

a.button_no:hover {
	background:#ED413F;
	color:rgba(0,0,0,0.9);
}

a.button_yes:hover {
	background:#1AAD5D;
	color:rgba(255,255,255,0.9);
}

a.button_yes:active {
	background:#127a41;
}

a.button_yes:focus {
	outline:none;
	outline-style:none;
}

a.button_yes:before, a.button_no:before {
	display: block;
	position: absolute;
	content: " ";
	width: 310px;
	height: 310px;
	border-radius: 300px;
	border:solid 6px rgba(0,0,0,0.8);
	left:-10px;
	top:-10px;	
}

a.button_yes:after {
	display: block;
	position: absolute;
	right:-20%;
	top:37%;
	content: "»";
	color: #1AAD5D;
	font-size: 6rem;
	-webkit-animation: animated_arrow 1s linear infinite;
	-moz-animation: animated_arrow 1s linear infinite;
	-o-animation: animated_arrow 1s linear infinite;
	animation: animated_arrow 1s linear infinite;
	pointer-events: none;
	cursor: default;
}

a.button_no:after {
	display: block;
	position: absolute;
	left:-20%;
	top:37%;
	content: "«";
	color: #ED413F;
	font-size: 6rem;
	-webkit-animation: animated_arrow_2 1s linear infinite;
	-moz-animation: animated_arrow_2 1s linear infinite;
	-o-animation: animated_arrow_2 1s linear infinite;
	animation: animated_arrow_2 1s linear infinite;
	pointer-events: none;
	cursor: default;
}

#match {
	position: relative;
	overflow: hidden;
	z-index: 3;
}

.match_box {
	max-width: 500px;
	margin:5% auto;
	overflow: hidden;
}

.match_box img {
	max-width: 200px;
	display: block;
	margin:0 auto;
	border-radius: 500px;
	margin-top: 5%;
	border:solid 5px white;
}

@-webkit-keyframes animated_arrow {
    from{
        right:-20%;
       
    }
    to{
        right: -25%;
    }
}

@-webkit-keyframes animated_arrow_2 {
    from{
        left:-20%;
       
    }
    to{
        left: -25%;
    }
}

@-webkit-keyframes text_scroll_1 {
    from{
        left:0%;
        opacity: 0;
       
    }
    to{
        left: 15%;
        opacity: 1;
    }
}
 
#invisible_text h6 {
	font-size: 5.0vw;
	color:#ED413F;
	text-transform: uppercase;
	font-family: 'Monoton', cursive;
	font-weight: normal;
	text-align: center;
	margin:0;
	line-height: 5vw;
	text-shadow: 0 0 80px Red, 0 0 30px FireBrick, 0 0 6px DarkRed;
}

#invisible_text h6 span {
	color:white;
	display: block;
	text-shadow: 0 0 80px #ffffff, 0 0 30px #008000, 0 0 6px #0000ff;
}

#invisible_text h6 span.off {
	display: inline-block;
	text-shadow: none;
	opacity: 0.5;
	color:#ED413F;
}

#invisible_text h6 span.total_off {
	display: inline-block;
	text-shadow: none;
	opacity: 0.3;
	color:#ED413F;
}

#invisible_text h6 span.always_off {
	display: inline-block;
	text-shadow: none;
	opacity: 0.3;
	color:#ED413F;
}

#invisible_text h6 span.on {
	display: inline-block;
	text-shadow: none;
	opacity: 1;
	color:#ED413F;
}

/*******************************TYPOGRAPHY*******************************/

h2 {
	font-size: 6.0rem;
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
	line-height: 8.0rem;
}

#question_3 h2 {
	font-size: 5.0rem;
	line-height: 7.0rem;
}

h2 span {
	color: #ED413F;
}

h3 {
	text-align: center;
}

h4 {
	text-align: center;
}


ul.decimal li {
	text-align: center;
	font-size: 1.4rem;
	text-transform: none;
	max-width: 80%;
	margin:0 auto;
	margin-bottom: 3%;
}

p.agree_label {
	font-size: 1.1rem;
	text-align: center;
	max-width: 90%;
	margin:3% auto;
}

.header_box p {
	margin:0;
	font-size: 2.6rem;
	text-align: center;
}

.header_box p span {
	font-weight: bold;
	color:#ED413F;
}

#ending img {
	max-width: 60%;
	display: block;
	margin:5% auto;
}

.match_box p {
	margin:0;
	text-align: center;
	color: #1AAD5D;
	font-weight: bold;
	font-size: 2.5rem;
}

.match_box p.reviewing_text, .reviewing_text_2 {
	display: none;
}

a#agree {
	color:white;
	text-transform: uppercase;
	text-decoration: none;
	color:white;
	display: block;
	width:70%;
	margin:5% auto;
	margin-top: 10%;
	border-radius: 20px;
	text-align: center;
	font-size: 5rem;
	padding:1% 0;
	border:solid 3px #1AAD5D;
	transition:all linear 0.3s;
	color:#1AAD5D;
}

a#agree:hover {
	background:#1AAD5D;
	color:white;
}

a#agree:active {
	background:#127a41;
}

/*******************************MEDIA QUERIES*******************************/


@media (min-width : 320px) and (max-width : 767px) {
    
   .container {
	   width: 100%;
   }
   
   body {
	   background: url(../images/girl-v1.gif) no-repeat center center;
	   background-size: cover;
   }
   
   video {
	   display: none;
   }
   
   .main_box {
	   width:95%;
	   margin:0 auto;
	   border-radius: 0;
	   height: 300px;
	   display: block;
	   padding:0 5%;
	   padding-top: 5%;
   }
   
   .header_box {
	   border-radius: 0;
   }
   
   #invisible_text p {
	   display: none;
   }
   
   .header_box p {
	   font-size: 1.5rem;
   }
   
   h2, #question_3 h2 {
	   font-size: 2.0rem;
	   line-height: 2.6rem;
   }
   
   a.button_no, a.button_yes {
	   width:120px;	 
	   height:120px;
	   font-size: 3.0rem;
	   font-weight: bold;   
	   top:50%;
   }
   
   a.button_no {
	   left:8%;
   }
   
   a.button_yes {
	   right:8%;
   }
   
   a.button_yes:before, a.button_no:before {
	   display:none;
   }
   
   #invisible_text {

   }
   
   a.button_yes:after, a.button_no:after {
	   font-size: 4.0rem;
	   top:25%;
   }
   
   .match_box {
	   max-width: 300px;
   }
   
   .match_box img {
	   max-width: 100px;
	   border:solid 2px white;
   }
   
   #question_2, #question_3, #ending {
	   left:162%;
   }
   
   .rotate_img {
	   width: 200px;
	   height:200px;
	   border:solid 2px white;
   }
   
   h3 {
	   font-size: 1.2rem;
   }
   
   h4 {
	   font-size: 1.1rem;
   }
   
   ul.decimal li {
	   font-size: 1rem;
   }
   
   p.agree_label {
	   display: none;
   }
   
   a#agree {
	   margin-top: 5%;
	   font-size: 2.0rem;
	   width: 90%;
   }
   
   .match_box p {
	   font-size: 1.5rem;
   }
   
}

@media (min-width : 320px) and (max-width : 767px) and (orientation : landscape) {

}

@media (min-width : 768px) and (max-width : 1199px) and (orientation : portrait) {
    
}

@media (min-width : 1200px) {

}

@media only screen and (min-device-width: 768px) and (max-device-width: 1300px) and (orientation : landscape) {
	.container {
	   width: 100%;
    }
	
	body {
	   background: url(../images/girl-v1.gif) no-repeat center center;
	   background-size: cover;
   }
   
   video {
	   display: none;
   }
   
   
}