/*
App Styles CSS
Date last mod: 16 Nov 2021	
*/

/*---- BODY ----*/
html, body {font-family: proxima-nova,Arial,Sans-Serif;}
body {counter-reset: section;}
body.stop-scrolling {height: 100%;}
body.stop-scrolling.intro {overflow: hidden;}
main {position: absolute;top: 0;bottom: 0;left: 0;right:0;}
/*main {position: absolute;top: 0;bottom: 0;left: 0;right: -17px;overflow-y: scroll;}*/
.rotate {position: absolute;top: 0;left: 0;background-color: #004268;z-index: 99999;color: white;width: 100%;height:100%;text-align: center;font-family: adelle, sans-serif;font-size:2em;pointer-events:none;}
#rotate_m {padding:50% 0 0 0;}
#rotate_d {padding:22% 10% 0 10%;}
#rotate_m,
#rotate_d {display:none;}
@media screen and (max-width: 1024px) and (orientation:landscape) {
#rotate_d {display:block;}
#intro {pointer-events:none;}
body.stop-scrolling {overflow:hidden;}
}
@media screen and (orientation:portrait) {
#rotate_m {display:block;}
#intro {pointer-events:none;}
body.stop-scrolling {overflow:hidden;}
}

/*---- GENERAL ----*/
.blue {color: #1e5abc;}
.blue_dark {color: #004268;}
.orange {color: #F79431;}
.white {color: #FFF;}

.center {text-align: center;}
ul {padding:0;margin:0;}
.hidden {display:none;}

.align_center {text-align: center;}
.align_left {text-align: left;}
.align_right {text-align: right;}


#overlay {position: fixed;top: 0;z-index: 10000;width: 100%;height: 100%;display: none;background: rgba(0,0,0,0.6);}
.cv-spinner {height: 100%;display: flex;justify-content: center;align-items: center; }
.spinner {width: 40px;height: 40px;border: 4px #ddd solid;border-top: 4px #25dfd6 solid;border-radius: 50%;animation: sp-anime 0.8s infinite linear;}
@keyframes sp-anime {100% { transform: rotate(360deg);}}

/*---- TEXT ----*/
.adelle {font-family: adelle, sans-serif;}
.proxima {font-family: proxima-nova,Arial,Sans-Serif;}
h1, h2, h3, h4, h5 {font-family: adelle, sans-serif;}
h1 {font-size:2em;}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
.header {pointer-events: none;}
.text-shadow {text-shadow:0 0 6px rgb(0 0 0 / 60%);}
.text-shadow-white {text-shadow:0 0 6px rgb(255 255 255 / 60%);}

/*---- BTNS, LABELS & LINKS ----*/
a {
transition: opacity .25s ease-out;
-moz-transition: opacity .25s ease-out;
-webkit-transition: opacity .25s ease-out;
-o-transition: opacity .25s ease-out;
}
a:hover {opacity: 0.75;text-decoration: none;}
a:active, a:focus, button:active, button:focus {
outline: 0;
border: none;
-moz-outline-style: none;
}
a:hover:not([href]) {cursor: pointer;}
a.phone {font-weight: bold;color:#FFF;}

.nxt {width: 100%;padding: 0 0 40px;position: absolute;bottom: 0;z-index:10;
background: linear-gradient(0deg, rgba(19,128,191,0.25) 0%, rgba(19,128,191,0.15) 15%, rgba(0,0,0,0) 100%);
}
.nxt p {font-size: 1.5em;color: #FFF;}
.nxt a {width:40px;height:70px;border: 3px solid #FFF;display: inline-block;border-radius: 30px;}
.nxt .arrw {display: flex;align-self: flex-end;animation-duration: 2s;animation-iteration-count: infinite;margin: 0 auto 0 auto;transform-origin: bottom;}
.nxt .arrw:before {content: ' ';background-repeat: no-repeat;margin:0;position: relative;display: inline-block;background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDE1LjYgMjEuOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTUuNiAyMS44OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMy43LDEzLjNjMC40LTAuNCwxLjEtMC40LDEuNiwwYzAuNCwwLjQsMC40LDEuMSwwLDEuNmwtNi42LDYuN2MtMC4yLDAuMi0wLjUsMC4zLTAuOCwwLjNzLTAuNi0wLjEtMC44LTAuMwoJbC02LjctNi43Yy0wLjQtMC40LTAuNC0xLjEsMC0xLjZzMS4xLTAuNCwxLjYsMEw2LjcsMThWMS4xQzYuNywwLjUsNy4yLDAsNy44LDBzMS4xLDAuNSwxLjEsMS4xVjE4TDEzLjcsMTMuM3oiLz4KPC9zdmc+Cg==');}
.nxt .arrw:before {background-size: 18px;width: 30px;height: 66px;background-position: 8px 36px;}

#nxt_intro {opacity: 0;transition: opacity .5s ease-out;-moz-transition: opacity .5s ease-out;-webkit-transition: opacity .5s ease-out;-o-transition: opacity .5s ease-out;}
#nxt_intro.on {opacity: 1;}



/*---- ICONS ----*/

/*---- SVG ----*/
canvas.icon_display{display: block;width: 100%;visibility: hidden;max-width: 320px;}
svg.icon_display {position: absolute;top: 0;width: 100%;max-width:320px;position: absolute;left: 50%;margin-left: -160px;}
svg.icon_display .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
svg.icon_display .st1{fill:#FFF;}


/*---- ANIMATIONS ----*/
.fade-out {opacity: 0; animation-name: fadeOutOpacity;animation-iteration-count: 1;animation-timing-function: ease-in;animation-duration: 1s;}
.fade-in {opacity: 1; animation-name: fadeInOpacity;animation-iteration-count: 1;animation-timing-function: ease-in;animation-duration: 1s;}
@keyframes fadeOutOpacity { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fadeInOpacity { 0% { opacity: 0; } 100% { opacity: 1; } }

.bounce {animation-name: bounce;animation-timing-function: ease;}
@keyframes bounce {
0%   { transform: scale(1,1)    translateY(0); }
10%  { transform: scale(1.1,.9) translateY(0); }
30%  { transform: scale(.9,1.1) translateY(-28px); }
50%  { transform: scale(1,1)    translateY(0); }
57%  { transform: scale(1,1)    translateY(-5px); }
64%  { transform: scale(1,1)    translateY(0); }
100% { transform: scale(1,1)    translateY(0); }
}

.ani_fade {
-webkit-transition: opacity 0.5s ease-out;  
-moz-transition: opacity 0.5s ease-out;  
-o-transition: opacity 0.5s ease-out;  
transition: opacity 0.5s ease-out;
}
.ani_fade_1 {opacity:0;}
.ani_fade_2 {opacity:0;}
.ani_fade_3 {opacity:0;}
.ani_fade_4 {opacity:0;}
.ani_fade_5 {opacity:0;}
.ani_fade_6 {opacity:0;}
.ani_fade_7 {opacity:0;}
.ani_fade_8 {opacity:0;}
.ani_fade_9 {opacity:0;}
.ani_fade.active {opacity:1;}


.add_typing {opacity:0;}
.typewriter {
overflow: hidden;
/* border-right: .15em solid orange; */
white-space: nowrap;
margin: 0 auto;
opacity:1;
}
.typewriter_1 { animation: typing 3.5s steps(40, end),blink-caret .75s step-end infinite; }
.typewriter_2 { animation: typing 3.5s steps(40, end),blink-caret .75s step-end infinite; }
.typewriter_3 { animation: typing 3.5s steps(40, end),blink-caret .75s step-end infinite; }
.typewriter_4 { animation: typing 3.5s steps(40, end),blink-caret .75s step-end infinite; }
.typewriter_5 { animation: typing 3.5s steps(40, end),blink-caret .75s step-end infinite; }
.typewriter_6 { animation: typing 3.5s steps(40, end),blink-caret .75s step-end infinite; }
/* The typing effect */
@keyframes typing { from { width: 0 } to { width: 100% } }
/* The typewriter cursor effect */
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange; } }


.ani_cont { position: absolute; width: 100%; text-align: center; display: table !important; z-index:1;overflow: hidden;top:0;pointer-events:none;}
.ani_cell { display: table-cell; vertical-align: middle; text-align: center; height: 100vh; }
.ani_run { position: absolute; display: block;animation:linear infinite;-webkit-animation:linear infinite;}
.ani_run_1 { animation-name: ani_run_1;-webkit-animation-name: ani_run_1;animation-duration: 90s;-webkit-animation-duration: 90s; }
.ani_run_2 { animation-name: ani_run_2;-webkit-animation-name: ani_run_2;animation-duration: 100s;-webkit-animation-duration: 100s; }
.ani_run_3 { animation-name: ani_run_3;-webkit-animation-name: ani_run_3;animation-duration: 110s;-webkit-animation-duration: 110s; }
.ani_run_4 { animation-name: ani_run_4;-webkit-animation-name: ani_run_4;animation-duration: 100s;-webkit-animation-duration: 100s; }
.ani_run_5 { animation-name: ani_run_5;-webkit-animation-name: ani_run_5;animation-duration: 100s;-webkit-animation-duration: 100s; }
.ani_run_6 { animation-name: ani_run_6;-webkit-animation-name: ani_run_6;animation-duration: 90s;-webkit-animation-duration: 90s; }

@keyframes ani_run_1 { 0% { left: -10%;} 100%{ left: 100%;} }
@keyframes ani_run_2 { 0% { left: 100%;} 100%{ left: -10%;} }
@keyframes ani_run_3 { 0% { left: 100%;} 100%{ left: -10%;} }
@keyframes ani_run_4 { 0% { left: -10%;} 100%{ left: 100%;} }
@keyframes ani_run_5 { 0% { left: -10%;} 100%{ left: 100%;} }
@keyframes ani_run_6 { 0% { left: 100%;} 100%{ left: -10%;} }


.blocks {z-index:1;position:absolute;}
.blocks_1 {margin-left:12%;top:18%;}
.blocks_2 {margin-left:0;top:25%}
.blocks_3 {margin-left:10%;top:48%}
.blocks_4 {margin-left:0;top:42%}
.blocks_5 {margin-left:0;top:18%}
.blocks_6 {margin-left:-12%;top:48%}

.block {display:block;background:#FFF;border-radius:6px;position:absolute;}
.block_1 {width:35px;height:35px;opacity:0.10;left:80px;top:90px;}
.block_2 {width:50px;height:50px;opacity:0.16;left:50px;top:60px;}
.block_3 {width:80px;height:80px;opacity:0.18;left:80px;}

.blocks_r .block_1 {left:30px;}
.blocks_r .block_2 {}
.blocks_r .block_3 {left:-15px;}




.block_skews {z-index:1;position:absolute;}
.block_skews_1 {margin-left:12%;top:18%;}
.block_skews_2 {margin-left:0;top:25%}
.block_skews_3 {margin-left:10%;top:48%}
.block_skews_4 {margin-left:0;top:70%}

.block_skews_r .block_skew_1 {left:30px;}
.block_skews_r .block_skew_2 {}
.block_skews_r .block_skew_3 {left:-15px;}

.block_skew {width: 0;height: 0;border: 90px solid transparent;border-bottom:50px solid white;position:absolute;top: -50px;border-radius: 10px;}
.block_skew:after {content: '';position: absolute;left: -90px;top:47px;width: 0;height: 0;border: 90px solid transparent;border-top: 50px solid white;border-radius: 10px;}
.block_skew_1 {opacity:0.10;left: 0px;top:90px;margin-top:20px;}
.block_skew_2 {opacity:0.16;left:50px;top:60px;}



.dots_cell {position:absolute;left:50%;top:57.5%;}.dots {position: absolute;height: 0;width: 10px;background: linear-gradient(0deg, rgb(255 255 255 / 0.85) 50%, transparent 50%);background-repeat: repeat-y;background-size: 3px 10px;background-position: 0;animation:linear infinite;-webkit-animation:linear infinite;bottom:20%;}

.dots_1 { left:6px; animation-name: dots_move_1; -webkit-animation-name: dots_move_1; animation-duration: 3s; -webkit-animation-duration: 3s; animation-delay: 0.2s; }
.dots_2 { left:63px; animation-name: dots_move_2; -webkit-animation-name: dots_move_2; animation-duration: 5s; -webkit-animation-duration: 5s; animation-delay: 0.4s; }
.dots_3 { left:123px; animation-name: dots_move_3; -webkit-animation-name: dots_move_3; animation-duration: 4s; -webkit-animation-duration: 4s; animation-delay: 0.8s; }
.dots_4 { left:290px; animation-name: dots_move_4; -webkit-animation-name: dots_move_4; animation-duration: 6s; -webkit-animation-duration: 6s; animation-delay: 1s; }
.dots_5 { left:355px; animation-name: dots_move_5; -webkit-animation-name: dots_move_5; animation-duration: 7s; -webkit-animation-duration: 7s; animation-delay: 1.2s; }
.dots_6 { left:418px; animation-name: dots_move_6; -webkit-animation-name: dots_move_6; animation-duration: 4s; -webkit-animation-duration: 4s; animation-delay: 0.8s; }

@keyframes dots_move_1 { 0% { height: 0px;bottom:0%; } 50% { height: 70px;bottom:0%;opacity:1; } 99% { height: 80px;bottom:0%;opacity:0.5; } 100% { opacity:0; }}
@keyframes dots_move_2 { 0% { height: 0px;bottom:0%; } 50% { height: 180px;bottom:0%;opacity:1; } 99% { height: 220px;bottom:0%;opacity:0.5; } 100% { opacity:0; }}
@keyframes dots_move_3 { 0% { height: 0px;bottom:0%; } 50% { height: 180px;bottom:0%;opacity:1; } 99% { height: 320px;bottom:0%;opacity:0.5; } 100% { opacity:0; }}
@keyframes dots_move_4 { 0% { height: 0px;bottom:0%; } 50% { height: 180px;bottom:0%;opacity:1; } 99% { height: 320px;bottom:0%;opacity:0.5; } 100% { opacity:0; }}
@keyframes dots_move_5 { 0% { height: 0px;bottom:0%; } 50% { height: 180px;bottom:0%;opacity:1; } 99% { height: 220px;bottom:0%;opacity:0.5; } 100% { opacity:0; }}
@keyframes dots_move_6 { 0% { height: 0px;bottom:0%; } 50% { height: 70px;bottom:0%;opacity:1; } 99% { height: 130px;bottom:0%;opacity:0.5; } 100% { opacity:0; }}



.markers {
-webkit-transition: opacity 0.5s ease-out;  
-moz-transition: opacity 0.5s ease-out;  
-o-transition: opacity 0.5s ease-out;  
transition: opacity 0.5s ease-out;
}
.markers.active {opacity:1;}
.marker {position:absolute;display:block;width:16px;height:16px;background:#ff9100;border-radius:50%;animation:linear infinite;-webkit-animation:linear infinite;}
.marker { animation-name: marker_pulse; -webkit-animation-name: marker_pulse; animation-duration: 10s; -webkit-animation-duration: 10s;}
@keyframes marker_pulse {
0%{ width: 16px;height: 16px;margin-left:0;margin-top:0;}
4%{ width: 48px;height: 48px;opacity:0;margin-left:-14px;margin-top:-20px;}
100%{ width: 48px;height: 48px;opacity:0;margin-left:-14px;margin-top:-20px;}
}
.marker_base {position:absolute;display:block;width:16px;height:16px;background:#ff9100;border-radius:50%;}

.marker_s1_1,
.marker_base_s1_1 {left:53%;top:16%;animation-delay: 0.2s;}
.marker_s1_2,
.marker_base_s1_2 {left:56%;top:23%;animation-delay: 2s;}
.marker_s1_3,
.marker_base_s1_3 {left:65%;top:36%;animation-delay: 0.5s;}
.marker_s1_4,
.marker_base_s1_4 {left:72%;top:32%;animation-delay: 3s;}
.marker_s1_5,
.marker_base_s1_5 {left:67%;top:30%;animation-delay: 6s;}
.marker_s1_6,
.marker_base_s1_6 {left:59%;top:48%;animation-delay: 5s;}
.marker_s1_7,
.marker_base_s1_7 {left:54%;top:43%;animation-delay: 0.4s;}
.marker_s1_8,
.marker_base_s1_8 {left:55%;top:53%;animation-delay: 7s;}
.marker_s1_9,
.marker_base_s1_9 {left:52%;top:38%;animation-delay: 3.5s;}
.marker_s1_10,
.marker_base_s1_10 {left:43%;top:53%;animation-delay: 1s;}
.marker_s1_11,
.marker_base_s1_11 {left:46%;top:56%;animation-delay: 0.75s;}
.marker_s1_12,
.marker_base_s1_12 {left:30%;top:60%;animation-delay: 4s;}
.marker_s1_13,
.marker_base_s1_13 {left:39%;top:68%;animation-delay: 2.5s;}
.marker_s1_14,
.marker_base_s1_14 {left:12%;top:79%;animation-delay: 1.74s;}
.marker_s1_15,
.marker_base_s1_15 {left:11%;top:89%;animation-delay: 2s;}
.marker_s1_16,
.marker_base_s1_16 {left:24%;top:85%;animation-delay: 8s;}

.marker_big {position:absolute;display:block;width:20px;height:20px;background:#ff9100;border-radius:50%;animation:linear infinite;-webkit-animation:linear infinite;}
.marker_big { animation-name: marker_big_pulse; -webkit-animation-name: marker_big_pulse; animation-duration: 4s; -webkit-animation-duration: 4s;}
@keyframes marker_big_pulse {
0%{ width: 20px;height: 20px;margin-left:0;margin-top:0;}
8%{ width: 48px;height: 48px;opacity:0;margin-left:-14px;margin-top:-20px;}
100%{ width: 48px;height: 48px;opacity:0;margin-left:-14px;margin-top:-20px;}
}
.marker_big_base {position:absolute;display:block;width:20px;height:20px;background:#ff9100;border-radius:50%;}

.marker_s2_1,
.marker_base_s2_1,
.marker_s3_1,
.marker_base_s3_1 {left:41.5%;top:62.5%;animation-delay: 0.2s;}
.marker_s2_2,
.marker_base_s2_2,
.marker_s3_2,
.marker_base_s3_2 {left:31.5%;top:69.5%;animation-delay: 2s;}
.marker_s2_3,
.marker_base_s2_3,
.marker_s3_3,
.marker_base_s3_3 {left:44%;top:69%;animation-delay: 0.5s;}
.marker_s2_4,
.marker_base_s2_4,
.marker_s3_4,
.marker_base_s3_4 {left:49%;top:77%;animation-delay: 3s;}

/*---- NAV ----*/
#side_nav {position: fixed; z-index: 100;right: 5%;top:18%;border-right: 2px solid #000;padding-top:20px;}
#side_nav li {list-style: none;text-align: right;display: block;margin:0;}
#side_nav li:first-child {margin-top: 20px;}
#side_nav li:last-child {margin-bottom: 20px;}
#side_nav li a {margin: 0 30px 0 0;color:#FFF;text-transform: uppercase;font-weight: bold;text-shadow: 0 0 5px rgb(0 0 0 / 10%);}
#side_nav li a:after {content:' ';width: 20px;height: 2px;background-color: #000;right: 0;position: absolute;margin: 10px 0 0 0;z-index: -2;}
#side_nav li a:hover:after {z-index: -2;}
#side_nav li.active a {color: #FFF;text-shadow: 0 0 5px rgb(0 0 0 / 50%);}
#side_nav .slider_cont {position: absolute;width:12px;height:400px;right:0;top:10px;z-index:1;}
#side_nav .slider {position: absolute;width:12px;height:40px;background-color: #000;right:0;top:0;
/* transition: all 0.05s ease-out; */
/* -moz-transition: all 0.05s ease-out; */
/* -webkit-transition: all 0.05s ease-out; */
/* -o-transition: all 0.05s ease-out; */
}
/* #side_nav .slider:hover {background-color:#F79431;cursor:pointer;} */

/*---- FORMS ----*/

/*---- INTRO ----*/
#intro {background-color: #004268;height: 100vw;opacity: 1;}
#intro {padding:15% 0 0 0;}
#intro.slide {opacity:0;pointer-events: none;position: relative;z-index: -1;
-webkit-transition: all 0.75s ease-out;  
-moz-transition: all 0.75s ease-out;  
-o-transition: all 0.75s ease-out;  
transition: all 0.75s ease-out;	
}
#intro .logo {margin-bottom:60px;text-align: center;}
#intro .svg {max-width: 360px;display: inline-block;margin: 0 auto;}
#intro .txt {position: relative;width: 100%;margin-bottom: 40px;}
#intro .txt h1 {color: #FFF;}
#intro .lnks {font-size:1.7em;}
#intro .lnks a {color: #FFF;display:inline-block;}
#intro .lnks a:hover {color: #F79431;}
#intro .lnks li {list-style: none;}
#intro .lnks li:before {content: ' ';background-size:20px;width:20px;height:22px;background-position: 0 0;background-repeat: no-repeat;margin:0;display: inline-block;margin-right: 10px;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDE1LjYgMTYuOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTUuNiAxNi44OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02LjMsMi4xYy0wLjQtMC40LTAuNC0xLjIsMC0xLjdjMC40LTAuNCwxLjItMC40LDEuNywwbDcuMyw3LjJjMC4yLDAuMiwwLjMsMC41LDAuMywwLjlTMTUuNSw5LDE1LjMsOS4yCglMOCwxNi41Yy0wLjQsMC40LTEuMiwwLjQtMS43LDBzLTAuNC0xLjIsMC0xLjdsNS4xLTUuMUgxLjJDMC41LDkuNywwLDkuMSwwLDguNWMwLTAuNywwLjUtMS4yLDEuMi0xLjJoMTAuMkw2LjMsMi4xeiIvPgo8L3N2Zz4K');}


/*---- SECTIONS ----*/
#logo {position: fixed;z-index: 100;left: 5%;top: 5%;width:180px;}

#content {background-color: #FFF;height: 100vw;opacity: 0;
-webkit-transition: all 0.75s ease-out;  
-moz-transition: all 0.75s ease-out;  
-o-transition: all 0.75s ease-out;  
transition: all 0.75s ease-out;
}
#content.slide {margin-top: -100vw;opacity: 1;}
#content .comps {position: absolute;width: 100%;}
/* #content .comps:hover {cursor:grab;} */
/* #content .comps.drag:hover {cursor:grabbing;} */
#content .comp {position: relative;width: 100%;}

#content .comp .container {padding-top: 10%;}
#content .comp.contact .container {padding-top:5%;}
#content .comp.full .container {padding-top: 6%;}
#content .comp .container {max-width: 1200px;}

#content .comp .bgs {position: absolute;width: 100%;z-index: 0;top: 0;left: 0;}
    
/* --------------- TEXT --------------- */
#content .comp .header {position:relative;z-index:3;}
#content .comp.txt_white .header {color: #FFF;}
#content .comp.txt_blue .header {color: #1e5abc;}
#content .comp .header em {font-style: normal;display: block;line-height:0.95em;font-weight: bold;}
#content .comp .header em {font-size:1.9em;}
#content .comp.contact .header em {font-size:1.4em;}

#content .comp .txt {position:relative;z-index:3;}
#content .comp .txt .top_left {position:relative;}
#content .comp .txt .third ul {width: 90%;}
#content .comp .txt .half ul {width: 90%;}
#content .comp.txt_white .txt {color: #FFF;}
#content .comp.txt_blue .txt {color: #1e5abc;}
#content .comp .txt ul {margin-left: 20px;}
#content .comp .txt ul li {margin-bottom:12px;list-style: none;}	
#content .comp .txt ul li:before {content:'•';font-size: 1.2em;margin:0 8px 0 -20px;}

#content .comp.s1_how .row {display:block;position:relative;}
#content .comp.s1_how .txt {font-size:1.9em;margin-top:25%;}
#content .comp.s1_how .txt .center {max-width:30%;margin:0 auto;position:relative;top:-40px;}
#content .comp.s1_how .col_l,
#content .comp.s1_how .col_r {position:absolute;width:100%;max-width: inherit;flex: 0 0 0;}
#content .comp.s1_how .col_l {}
#content .comp.s1_how .col_r {margin-top:-5%;}

#content .comp.s2_summary .row {display:block;position:relative;}
#content .comp.s2_summary .col_l,
#content .comp.s2_summary .col_r {width:100%;max-width:100%;flex: 0 0 0;}

/* --------------- IMGS --------------- */
#content .comp .img {position:relative;z-index:2;}

#content .comp .img img {float: right;}
#content .comp .mid.full {text-align: center;}

#content .comp.s1_how .img img {width:33%;text-align: center;float:none;position:relative;}
#content .comp.s1_identify .img img,
#content .comp.s1_collaborate .img img,
#content .comp.s1_deliver .img img,
#content .comp.s1_trust .img img {width:100%;margin:0 20% 0 0;}
#content .comp.s1_results .img img {width:140%;margin:0;}

#content .comp.s2_intro .img img {width:100%;margin: -20% 10% 0 0;}
#content .comp.s2_deliver .img img,
#content .comp.s2_stop .img img {width:100%;margin: -10% 10% 0 0;}
#content .comp.s2_sensitivity .img img,
#content .comp.s2_simplicity .img img {width:100%;margin:0 20% 0 0;}
#content .comp.s2_summary .img img {width:75%;text-align: center;margin:0;float:none;}

#content .comp.contact .img img {width:100%;margin:0 20% 0 0;}

.markers {position:absolute;left:0;top:0;z-index:4;opacity:0;pointer-events: none;margin: -20% 10% 0 0;}



/* --------------- FORMS --------------- */
#content .comp form {box-shadow: 0 8px 12px rgb(0 0 0 / 20%);background-image: linear-gradient(113deg, #f1f1f1, #f3f3f3);border-radius: 15px;padding:20px 15px;overflow: hidden;width:100%;margin: 0;margin-bottom:5px;}
#content .comp form label {color: #000;display: block;width: 100%;margin-bottom:2px;font-size: 0.9em;}
#content .comp form input[type=text],
#content .comp form input[type=email] {display: block;width: 100%; padding: 8px;border: 1px solid #ddd;border-radius: 6px;background-color: #FFF;min-height: 42px;margin: 0 0 12px 0;}
#content .comp form textarea {padding: 10px 8px;border: 1px solid #ddd;border-radius: 6px;margin: 0 0 20px 0;height: 100px;width: 100%;}
#content .comp form input[type=submit] {border: 0;border-radius: 6px;font-weight: 600;box-shadow: 0 6px 9px rgb(0 0 0 / 20%);background: #66e285;color: #FFF;padding: 8px 24px;}
#content .comp form input[type=submit]:hover {background: #65f187;}
#content .comp form input.error {border-color:red;}
#content .comp .txt .error_msg {color:red;font-size:0.85em;margin:-5px 0 10px 0;display:block;}
#content .comp .txt .required {font-size: 1.2em;}
#msg_form_success {font-size:0.85em !important;margin:20px 0 0 0;display:block;color:black;}
#msg_form_success.msg_form_error {color:red;}


/* --------------- BGS --------------- */
#content .comp.bg_intro .bgs.bg1 {
background: rgb(224 224 224);
background: radial-gradient(circle, rgba(233,233,233,1) 0%, rgb(224 224 224) 43%, rgb(156 156 156) 100%);
}
#content .comp.bg_intro .bgs.bg2 {
background: rgb(210,210,210);
background: linear-gradient(270deg, rgba(19,128,191,0.25) 0%, rgba(19,128,191,0.25) 39%, rgba(19,128,191,0.25) 100%);
}
#content .comp.bg_even .bgs.bg1 {
background: #2a9cff;
background: radial-gradient(circle, #69a9ea 0%, #2a9cff 25%, #013386 100%);
}
#content .comp.bg_even .bgs.bg2 {
background: rgb(210,210,210);
background: linear-gradient(270deg, rgba(241,241,241,0.25) 0%, rgba(195,206,214,0.25) 39%, rgba(167,217,245,0.25) 100%);
}
#content .comp.bg_odd .bgs.bg1 {
background: #5dbbff;
background: radial-gradient(circle, #54c8ff 0%, #5dbbff 25%, #007fc7 100%);
}
#content .comp.bg_odd .bgs.bg2 {
background: rgb(210,210,210);
background: linear-gradient(270deg, rgba(241,241,241,0.25) 0%, rgba(195,206,214,0.25) 39%, rgba(167,217,245,0.25) 100%);
}
#content .comp.contact .bgs.bg1 {
background: rgb(9,131,201);
background: radial-gradient(circle, rgba(9,131,201,1) 0%, rgba(19,128,191,1) 39%, rgba(0,66,104,1) 100%);
}
#content .comp.contact .bgs.bg2 {
background: rgb(0,66,104);
background: linear-gradient(270deg, rgba(0,66,104,0.25) 0%, rgba(19,128,191,0.25) 39%, rgba(0,66,104,0.25) 100%);
}





/* --------------------- RESPONSIVE --------------------- */
@media screen and (min-width: 1680px) {
#content .comp .txt p {font-size: 1.7em;}
#content .comp .txt ul li {font-size: 1.7em;}	
#content .comp .txt .top_left {left:-10%;}
#content .comp .header {font-size:2.5em;margin-bottom:30px;left:-10%;}
#content .comp.s2_summary .header {font-size: 2em;left:0;}
}
@media screen and (min-width: 1400px) and (max-width: 1680px) {
#content .comp .txt p {font-size: 1.7em;}
#content .comp .txt ul li {font-size: 1.7em;}	
#content .comp .txt .top_left {left:-10%;}
#content .comp .header {font-size:2.5em;margin-bottom:30px;left:-10%;}
#content .comp.s2_summary .header {font-size: 1.7em;left:0;}
}
@media screen and (min-width: 1200px) and (max-width: 1400px) {
#content .comp .txt p {font-size: 1.5em;}
#content .comp .txt ul li {font-size: 1.5em;}	
#content .comp .txt .top_left {left:-10%;}
#content .comp .header {font-size:2.2em;margin-bottom:20px;left:-10%;}
#content .comp.s2_summary .header {font-size: 1.5em;left:0;}
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
#content .comp .txt p {font-size: 1.3em;}
#content .comp .txt ul li {font-size: 1.3em;}	
#content .comp .txt .top_left {left:5%;width:80%;}
#content .comp .header {font-size:2em;margin-bottom:20px;left:5%;}
#content .comp.s2_summary .header {font-size: 1.3em;left:0;}
.dots_cell {top:62.5%;}
}
@media screen and (min-width: 1200px) and (max-height: 800px) {
#content .comp .container {padding-top: 4%;}
#content .comp.full .container {padding-top:0;}
#content .comp.contact .container {padding-top: 2%;}
#content .comp .col_l {padding-top:5%;}
#content .comp.contact .col_l {padding-top:0;}
#content .comp.s1_how .txt {margin-top:15%;font-size: 1.6em;}
#content .comp.s1_how .img img {width: 29%;}
#content .comp.s2_summary .img img {width: 60%;}
#content .comp.contact .img img {width:88%;margin: 10% 10% 0 0;}
#content .comp .txt p {font-size: 1.4em;}
#content .comp .txt ul li {font-size: 1.4em;}	
#content .comp .txt .top_left {left:0%;}
#content .comp .header {font-size:2em;left:0%;}
#content .comp.contact .header {font-size: 1.7em;margin-bottom: 10px;}
#content .comp.contact .txt p {font-size: 1.3em;margin-bottom: 5px;}
#content .comp.contact .txt p a {margin-right: 8px;}
#content .comp.contact .txt p br {display:none;}
#content .comp.s1_identify .img img,
#content .comp.s1_collaborate .img img,
#content .comp.s1_deliver .img img,
#content .comp.s1_trust .img img,
#content .comp.s2_sensitivity .img img,
#content .comp.s2_simplicity .img img {width:88%;}
#content .comp.s1_results .img img {width:120%;margin:0 10% 0 0;}
}