* { box-sizing: border-box; outline: none; }
body, input, select, textarea, label, button { font-size: 16px; font-family: 'Playfair Display', serif; }
body.awesome, .help-the-world .requillo-awe a {
background: linear-gradient(226deg, #9b0000, #00691b, #04009f, #78006e, #653200);
background-size: 1000% 1000%;
-webkit-animation: im_sexy_and_i_know_it 65s ease infinite;
-moz-animation: im_sexy_and_i_know_it 65s ease infinite;
-o-animation: im_sexy_and_i_know_it 65s ease infinite;
animation: im_sexy_and_i_know_it 65s ease infinite;
color:#e0e0e0;
}
body.dark, .help-the-world .requillo-dark a {
background: #181818;
color:#e0e0e0;
}
body.light, .help-the-world .requillo-light a {
background: #f1f1f1;
color:#383838;
}
body .requillo-video a {background: url('../images/lol.jpg'); background-size:cover; background-position:center; color:#fff; border:4px solid #fff}
body.light .requillo-video a { border-color: #000; }
p { padding-bottom: 10px; }
a { color: #375cd4; text-decoration: none; font-weight: bold; }
body video { display: none; }
body.video {position: relative;height: 100vh;margin: 0;background:#000;color: #fff; padding:10px;}
body.video .videoWrapper {position: fixed;width:100%;height:100%;overflow: hidden;z-index: -1; top:0; left:0;height: calc(100% + 50px);}
body.video .videoWrapper:after { position:absolute; content:''; left:0; top:0; width:100%; height:100%; background:url('../images/dot.png')}
body.video video {position: absolute;width: auto;transform: translateX(-50%);left: 50%;background: #000;min-width: 115%;min-height: 115%; display: block}
body.video .hey_human {position: relative;z-index: 2;}
@-webkit-keyframes im_sexy_and_i_know_it {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes im_sexy_and_i_know_it {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes im_sexy_and_i_know_it {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes im_sexy_and_i_know_it { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
.svg-main { fill:#d4af37;}
.svg-diff1 {fill:#375cd4;}
.svg-diff2 {fill:#af37d4;}
.svg-diff3 {fill:#5cd437;}

.bg-main {background:#d4af37;}
.bg-diff1 {background:#375cd4;}
.bg-diff2 {background:#af37d4;}
.bg-diff3 {background:#5cd437;}

.color-main {color:#d4af37;}
.color-diff1 {color:#375cd4;}
.color-diff2 {color:#af37d4;}
.color-diff3 {color:#5cd437;}

.requillo-awe a,.requillo-dark a,.requillo-light a {
	border: 3px solid #fff;
}
.light .requillo-awe a,.light .requillo-dark a,.light .requillo-light a {
	border: 3px solid #000;
}
.clickme { padding: 5px; cursor: pointer; display: inline-block; }
/*Loader*/
.loader {
display: block;
position: relative;
width: 64px;
height: 30px;
margin: auto;
}
.loader div {
background: #fff;
}

.light .loader div {
background: #000;
}

.loader div {
position: absolute;
top: 12px;
width: 5px;
height: 5px;
border-radius: 50%;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loader div:nth-child(1) {
left: 6px;
animation: ball1 0.6s infinite;
}
.loader div:nth-child(2) {
left: 6px;
animation: ball2 0.6s infinite;
}
.loader div:nth-child(3) {
left: 26px;
animation: ball2 0.6s infinite;
}
.loader div:nth-child(4) {
left: 45px;
animation: ball3 0.6s infinite;
}
@keyframes ball1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ball3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes ball2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}
.check-me-out {display:inline-block; width:50px; padding:3px; vertical-align: text-top; margin-left: 0px; animation: hey 3s infinite;}
.arr-up-left { display:inline-block; width:50px; padding:3px; position: relative; top: 0px; animation: up 3s infinite;}
.arr-up-right { display:inline-block; width:50px; padding:3px; position: relative; top: 0px; animation: up 3s infinite;}
.set-up { text-align:center; cursor: pointer; position: relative;}
.back .loader div{ display: none; }
.doflip .front .loader div{ display: none; }
.doflip .back .loader div{ display: block; }
.text-center { text-align: center !important; }
.text-left {text-align: left !important;}
button { cursor: pointer; }
input, select, textarea {font-style:italic;}

@-webkit-keyframes hey {
    0%{margin-left: 0px;}
    20%{margin-left: 0px;}
    40%{margin-left: 8px;}
    60%{margin-left: 0px;}
    80%{margin-left: 8px;}
    100%{margin-left: 0px;}
}
@-moz-keyframes hey {
     0%{margin-left: 0px;}
    20%{margin-left: 0px;}
    40%{margin-left: 8px;}
    60%{margin-left: 0px;}
    80%{margin-left: 8px;}
    100%{margin-left: 0px;}
}
@-o-keyframes hey {
     0%{margin-left: 0px;}
    20%{margin-left: 0px;}
    40%{margin-left: 8px;}
    60%{margin-left: 0px;}
    80%{margin-left: 8px;}
    100%{margin-left: 0px;}
}
@keyframes hey { 
     0%{margin-left: 0px;}
    20%{margin-left: 0px;}
    40%{margin-left: 8px;}
    60%{margin-left: 0px;}
    80%{margin-left: 8px;}
    100%{margin-left: 0px;}
}

@-webkit-keyframes up {
    0%{top: 0px;}
    20%{top: 0px;}
    40%{top: 8px;}
    60%{top: 0px;}
    80%{top: 8px;}
    100%{top: 0px;}
}
@-moz-keyframes up {
    0%{top: 0px;}
    20%{top: 0px;}
    40%{top: 8px;}
    60%{top: 0px;}
    80%{top: 8px;}
    100%{top: 0px;}
}
@-o-keyframes up {
    0%{top: 0px;}
    20%{top: 0px;}
    40%{top: 8px;}
    60%{top: 0px;}
    80%{top: 8px;}
    100%{top: 0px;}
}
@keyframes up { 
    0%{top: 0px;}
    20%{top: 0px;}
    40%{top: 8px;}
    60%{top: 0px;}
    80%{top: 8px;}
    100%{top: 0px;}
}

#Requillo-logo {
	display: block;
	margin: 10px auto;
	width: 800px;
	margin-bottom: 15px;
	height: auto;
	max-width: 100%;
}

.elm {
	fill: #939597;
	stroke: #939597;
	transition: all 4s;
	stroke-width: 0pt;
}

.light .elm {
	fill: #424242;
	stroke: #424242;
	transition: all 4s;
	stroke-width: 0pt;
}

.elm.stroke_anim_main {
	stroke-width: 0;
	animation: logo 4s linear;
}

.elm.stroke_anim_main_ref {
	stroke-width: 0pt;
	animation: logo_ref 8s linear;
	transition: all 4s;
}

.elm.letsm_anim_main {
	stroke-width: 0;
	animation: let_small 4s linear;
}

.elm.letsm_anim_main_ref {
	stroke-width: 0pt;
	animation: let_small_ref 8s linear;
	transition: all 4s;
}
.act { fill: #d4af37;}
.light .act { fill: #d4af37; stroke: #424242;}
 /* Captcha*/
#captcha {
 	fill: #f0f0f0;
 	cursor: pointer;
 }

.light #captcha {
 	fill: #1a1a1a;
 }

#captcha .selected-l {
 	fill: #d4af37;
 }
.booyaWrapper { margin:15px 0 0; border-top: 1px solid #939597; padding-top:14px}
.booyakasha { display:inline-block; padding:3px 5px; border:1px dashed; font-style:italic; color:#d4af37; font-weight:bold; background: #fff;}
 /* Contac message*/
.your-message input { width: 80px; text-align: center;}
.your-message input, .your-message select { border: none; background: none; border-bottom: 1px dashed #fff; color:#fff; font-family: 'Playfair Display', serif; }
.your-message select option { color: #000; font-family: 'Playfair Display', serif; }
.your-message textarea { width: 100%; background: none;  border: none; border-bottom: 1px dashed #fff; height: 30px; color:#fff; font-family: 'Playfair Display', serif; overflow:hidden;resize: none;-ms-overflow-style: none}
.light .your-message input,  .light .your-message select,.light .your-message textarea { border: none; background: none; border-bottom: 1px dashed #000; color:#000; }
.form-error { border-color: #ffc800 !important; }
.error-mode { display: block; background: #ffc800; padding: 4px 8px; color: #000; margin: 7px 0; font-weight: bold; }
.humans { max-width: 300px; display:inline-block;height:auto; width:100%; vertical-align:middle;}
.checkpoint-wrapper { display:inline-block; vertical-align:text-top;}
@keyframes logo {
	0% {
	stroke-width: 1pt;
	stroke-dashoffset: -2500;
	stroke-dasharray: 0, 1200;

	fill-opacity: 0;
	}
	50% {
	fill-opacity: 0;
	}
	100% {
	stroke-dashoffset: 0;
	stroke-dasharray: 1200, 1200;
	fill-opacity: 1;
	stroke-width: 0pt;
	}
}

@keyframes let_small {
	0% {
	stroke-width: 1pt;
	stroke-dashoffset: 1200;
	stroke-dasharray: 0, 1200;
	fill-opacity: 0;
	}
	50% {
	fill-opacity: 0;
	}
	100% {
	stroke-dashoffset: 0;
	stroke-dasharray: 1200, 1200;
	fill-opacity: 1;
	stroke-width: 0pt;
	}
}

@keyframes let_small_ref {
	0% {
	stroke-width: 0pt;
	stroke-dashoffset: -5000;
	stroke-dasharray: 0, 1200;
	fill-opacity: 1;
	}
	25% {
	fill-opacity: 0;
	}
	50% {
	stroke-dashoffset: -2500;
	stroke-dasharray: 500, 1200;
	fill-opacity: 0;
	stroke-width: 1pt;
	}
	75% {
	fill-opacity: 0.5; 
	}
	100% {
	animation-direction: reverse;
	stroke-dashoffset: 0;
	stroke-dasharray: 1200, 1200;
	fill-opacity: 1;
	stroke-width: 0pt;
	}
}

@keyframes logo_ref {
	0% {
	stroke-width: 0pt;
	stroke-dashoffset: 1200;
	stroke-dasharray: 800, 1200;
	fill-opacity: 1;
	}
	25% {
	fill-opacity: 0;
	}
	50% {
	stroke-dashoffset: 800;
	stroke-dasharray: 0, 1200;
	fill-opacity: 0;
	stroke-width: 1pt;
	}
	75% {
	fill-opacity: 0.5; 
	}
	100% {
	animation-direction: reverse;
	stroke-dashoffset: 0;
	stroke-dasharray: 1200, 800;
	fill-opacity: 1;
	stroke-width: 0pt;
	}
}

/* simple */
.flip-container {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
	-ms-transform: perspective(1000px);
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d; 
	-ms-transform-style: preserve-3d;
	margin: auto;
	max-width: 800px;
	width: 100%;
}
nav {
	margin: auto;
	max-width: 800px;
	width: 100%;
}
nav ul { display: block; list-style: none; margin: 0; padding: 0; font-size: 0; padding-right: 0; margin-bottom: -1px; position: relative;}
nav li { display: inline-block; font-size: 26px; width: 50%; position: relative; z-index: 1;}
nav li:first-child { border: 1px solid #939597;}
nav li { border-right: 1px solid #939597; border-top: 1px solid #939597;  border-bottom: 1px solid #939597; position: relative; }
nav li:before { content: ''; top: 0; bottom: 0; left: 51%; right: 51%; background: #000; position: absolute;z-index: 1; opacity: .2; transition: all .5s; }
nav li:hover:before { left: 0; right: 0; transition: all .5s; }
nav li a { display: block; text-align: center; padding: 5px; z-index: 2; position: relative; }
ul, li, p { margin: 0; }
nav li.active a:before { content: ''; position: absolute; top:-1px; left:-1px; bottom:-1px; right:-1px; border-top:1px solid #d4af37; border-right: 1px solid #d4af37; animation: btl 3s linear; }
nav li.active a:after { content: ''; position: absolute; top:-1px; left:-1px; bottom:-1px; right:-1px; border-bottom: 1px solid #d4af37; border-left: 1px solid #d4af37; animation: bbr 3s linear; }
body.video nav ul:before { content:''; position:absolute; width:100%; height:100%; background:rgba(0,0,0,.4)}
nav li.check-me a:after {content:"\00AB";display:inline-block; padding:0 10px; animation: hey_you 3s linear 2s infinite;}
nav li.check-me a:before {content:"\00BB";display:inline-block; padding:0 10px; animation: hey_you 3s linear 2s infinite;}

@keyframes hey_you {
	0% {
	padding:0 8px;
	}
	25% {
	padding:0 5px;
	}
	50% {
	padding:0 8px;
	}
	75% {
	padding:0 5px;
	}
	100% {
	padding:0 8px;
	}
}
@keyframes btl {
	0% {
	bottom:100%;
	right:100%;
	}
	25% {
	bottom:100%;
	right:-1px;
	}
	50% {
	bottom:-1px;
	right:-1px;
	}
	75% {
	bottom:-1px;
	right:-1px;
	}
	100% {
	bottom:-1px;
	right:-1px;
	}
}

@keyframes bbr {
	0% {
	top:100%;
	left:100%;
	}
	25% {
	top:100%;
	left:100%;
	}
	50% {
	top:100%;
	left:100%;
	}
	75% {
	top:100%;
	left:-1px;
	}
	100% {
	top:-1px;
	left:-1px;
	}
}

/* START: Accommodating for IE */
.flip-container.doflip .back {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
	
}

.flip-container.doflip .front {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
.content {
	position: relative;
	min-height: 18px;
}

.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-ms-transition: 0.6s;
	-moz-transition: 0.6s;
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
	z-index: 5;
}

.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-webkit-transform: rotateY(0deg);
	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
	-moz-transform: rotateY(0deg);
	-o-transition: 0.6s;
	-o-transform-style: preserve-3d;
	-o-transform: rotateY(0deg);
	-ms-transition: 0.6s;
	-ms-transform-style: preserve-3d;
	-ms-transform: rotateY(0deg);
	transition: 0.6s;
	transform-style: preserve-3d;
	transform: rotateY(0deg);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	border: 1px solid #939597;
	padding: 15px;
	margin-bottom: 15px;
}
.test { position: relative; z-index: 1; }
.front {
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	z-index: 2;
}
.fix { overflow: hidden; }
.fix h4 { display:inline-block; padding:0; margin:0;}
.pull-left { float: left; }
.pull-right { float: right; }
.hide { display: none; }

.back {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}
body.video .front:before, body.video .back:before { content:''; position:absolute; width:100%; height:100%; background:rgba(0,0,0,.5); left:0; top:0; z-index:-1}
footer { display: block; border-top: 1px solid #939597; margin-top: 15px; padding-top: 15px; }
input, select, textarea { max-width: 100%; }
.set-xpl { padding: 14px 5px 5px; text-align: center; }
.help-the-world { margin: 0; padding: 0; list-style: none}
.help-the-world li { margin:0; padding:1px 10px; display:block;}
.help-the-world li a { display: block; padding: 10px; text-align: center; }
nav a { color: #fff; text-decoration: none; transition: all .8s; }
.light a { color: #000; }
.active a { color: #d4af37; transition: all .8s; }
body.video .active a {text-shadow: 0 0 4px #000;}
/* END: Accommodating for IE */
.setting { position: fixed; left: 0%; top: -100%; width: 90%; transition: all 1s; z-index: 10; max-width: 400px; }
.setting.show {top: 0%; transition: all .5s;}
/* From message */
.locked { position: fixed; z-index: 1000; top:0;left: 0; right: 0; bottom: 0;}
.bodylocked { overflow: hidden; }
.sendWrapper {
	position:fixed; 
	top:50%; 
	padding:20px; 
	background:#375cd4; 
	left:0; 
	right:0; 
	border-top:5px solid;
	border-bottom:5px solid;
	transform: translateY(-50%);
	color: #d4af37;
	z-index:10;
	}
.sendContent {
	max-width:800px;
	margin:auto;
	text-align: center;
}
.successContent {
	max-width:800px;
	margin:auto;
	position:relative;
	z-index:10;
	}
.close-msg {
	position:absolute;
	right:0;
	top:-60px;
	padding:8px;
	background:#375cd4;
	border-top:5px solid;
	z-index:10;
	border-top-right-radius:10px;
	border-top-left-radius:10px;
	color: #d4af37;
}
@media screen AND (max-width:1616px){
	.setting { max-width: 300px;  }
}

@media screen AND (max-width:1416px){
	.setting { max-width: 200px;  }
}

@media screen AND (max-width:1220px){
	.setting { max-width: 150px;  }
	
}

@media screen AND (max-width:1120px){
	.setting { max-width: 135px;  }
	
}

@media screen AND (max-width:1090px){
	.setting { left: 50%; top: -100%; width: 98%; height: 98%; transform: translateX(-50%); max-width: 800px;}
	.setting.show {top: 0%;}
	.set-up { background: rgba(0,0,0,.7); margin:1px 10px; padding-bottom:10px }
	.light .set-up { color: #fff; }
}

@media screen AND (max-width:750px){
	.pull-left { float: none; text-align:center; }
    .pull-right { float: none; text-align:center; }
    body.video video {transform: translateX(-35%);left: 35%;}
}

@media screen AND (max-width:550px){
	nav li { font-size: 19px; }
	body.video video {transform: translateX(-25%);left: 25%;}
}

@media screen AND (max-width:320px){
	nav li {
		font-size: 16px;
	}
}