/* Preloader */
@keyframes Preloader {
	0%   { -webkit-transform:translate(-50%, -50%) rotate(0deg);transform:translate(-50%, -50%) rotate(0deg);}
	100% { -webkit-transform:translate(-50%, -50%) rotate(360deg);transform:translate(-50%, -50%) rotate(360deg); }
}
@-webkit-keyframes Preloader {
	0%   { -webkit-transform:translate(-50%, -50%) rotate(0deg);transform:translate(-50%, -50%) rotate(0deg);}
	100% { -webkit-transform:translate(-50%, -50%) rotate(360deg);transform:translate(-50%, -50%) rotate(360deg); }
}
.Preloader { position:fixed; width:100%; height:100%; top:0; left:0; z-index:1000000; background:#0b486b; }
.Preloader > svg {overflow:visible; -webkit-animation: Preloader 5s linear infinite; animation: Preloader 5s linear infinite; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); width:80px; height:80px;} 
.Preloader g { stroke:#08324b; fill:none; }


/* General  */
body, html { padding:0; margin:0; width:100%; height:100%; }
body { background:#0b486b; font-family:'Kreon'; font-size:20px; min-width:320px; min-height:320px;}

.BackgroundPicture { z-index:-1; position:fixed; width:100%; height:100%; background-image:url('../_pics/bg.jpg'); background-position:center center; background-size:cover; opacity:0.2;}

/* Overlay */
.OverlayBg { overflow:visible!important; width:100%; height:100%; transition:1s transform ease-in-out; -webkit-transition:1s transform ease-in-out; transform:translateX(100%); -webkit-transform:translateX(100%); stroke:none; fill:#FFF;}
.OverlayWrapper { overflow:hidden; z-index:-1; position:absolute; top:30px; left:30px; width:calc(100% - 60px); height:calc(100% - 60px); }
.OverlayWrapper.Overlay { z-index:1 }
.OverlayWrapper.Active .OverlayBg { transform:translateX(-00%); -webkit-transform:translateX(-00%);}
.OverlayWrapper.Activated .OverlayContent { opacity:1;}
.OverlayContent { overflow:scroll; overflow-x:hidden; position:absolute; top:30px; left:130px; width:calc(100% - 155px); height:calc(100% - 60px); transition:.3s opacity ease-in-out; -webkit-transition:.3s opacity ease-in-out; opacity:0; }
.OverlayContent .OverlaySection h2 { position:relative; top:20px; text-align:center; font-size:120px; color:#0b486b; margin:0; font-weight:400;z-index:1;}
.OverlayContent .OverlaySection { padding-right:40px; margin:40px auto 80px auto; max-width:1280px; position:relative; }
.OverlayContent .OverlaySection:after { content:" "; display:block; clear:both; }
.OverlayContent .OverlaySectionContent { position:relative; overflow:hidden; width:60%; float:right; background:#FFF; padding:10px 20px 20px 40px; margin-top:150px;}
.OverlayContent .OverlaySectionPic { border:5px solid #a8d1de; width:50%; position:absolute; top:75px; left:0; z-index:0;}
.OverlayContent .OverlaySectionGoogleMaps { border:5px solid #a8d1de; width:50%; height:400px; position:absolute; top:75px; left:0; z-index:0;}

.OverlayContent .OverlaySection_LeftText .OverlaySectionContent { float:left; }
.OverlayContent .OverlaySection_LeftText .OverlaySectionPic, .OverlaySection_LeftText .OverlaySectionGoogleMaps { left:auto; right:40px; }

.OverlaySection a { color:#0b486b; text-decoration:none;}
.OverlayContent .OverlaySection a { transition:.3s all ease-in-out; -webkit-transition:.3s all ease-in-out;}
.OverlayContent .OverlaySection a:hover { opacity:0.6; }
.OverlaySection .Row { overflow:hidden; margin-top:10px; line-height:30px;}
.OverlaySection .Col { width:50%; float:left; box-sizing:border-box; }
.OverlaySection .Col i { text-align:center; width:25px; display:inline-block;}
.OverlaySection .Col:first-child { padding-right:20px; }
.OverlaySection .Col:last-child { padding-left:20px; }

.OverlayClose { display:none; opacity:0; position:absolute; z-index:10; top:calc(50% - 30px); left:23px; width:60px; height:60px; font-size:25px; line-height:60px; color:#0b486b; text-align:center; -webkit-transition:.3s all ease-in-out; transition:.3s all ease-in-out; }
.OverlayClose svg { position:absolute; top:0; left:0; width:100%; height:100%; }
.OverlayClose path { fill:#a8d0e6; stroke:none; stroke-width:0; }
.OverlayClose::after { z-index:5; content: ' '; display: block; width: 50%; height: 2px; background: #0b486b; transform: rotate(45deg); position: absolute; left: 25%; top: 50%; }
.OverlayClose::before { z-index:5; content: ' '; display: block; width: 50%; height: 2px; background: #0b486b; transform: rotate(-45deg); position: absolute; left: 25%; top: 50%; }
.OverlayClose:hover::after { animation: CloseBong .8s 1 cubic-bezier(0.450,-0.38,0.000,1.170); }
.OverlayClose:hover::before { animation: CloseBong2 .8s 1 cubic-bezier(0.450,-0.38,0.000,1.170); }
.OverlayClose.Activated { opacity:1; }

@-webkit-keyframes CloseBong { 0% { -webkit-transform: rotate(45deg); } 25% { -webkit-transform: rotate(35deg); } 100% { -webkit-transform: rotate(45deg); } }
@keyframes CloseBong { 0% { transform: rotate(45deg); } 25% { transform: rotate(35deg); } 100% { transform: rotate(45deg); } }
@-webkit-keyframes CloseBong2 { 0% { -webkit-transform: rotate(-45deg); } 25% { -webkit-transform: rotate(-35deg); } 100% { -webkit-transform: rotate(-45deg); } }
@keyframes CloseBong2 { 0% { transform: rotate(-45deg); } 25% { transform: rotate(-35deg); } 100% { transform: rotate(-45deg); } }

/* Background effects */
.BackgroundParticles { overflow:hidden; position:fixed; top:0; left:0; z-index:-1; width:100%; height:100%;}

.BackgroundElastic { overflow:hidden; position:absolute; top:0; left:0; width:100%; height:100%; transform:translateX(-50%); -webkit-transform:translateX(-50%);  }
.BackgroundElastic.Active { transform:translateX(-0%); -webkit-transform:translateX(-0%);transition:1s transform cubic-bezier(.21,.81,.56,1); -webkit-transition:1s transform cubic-bezier(.21,.81,.56,1); }

.BackgroundBorder { box-sizing:border-box; padding:30px; position:absolute; top:0; left:0; width:100%; height:100%; }
.BackgroundBorder svg { overflow:visible; width:100%; height:100%; stroke-dasharray: 5700; stroke-dashoffset: 5700;}
.BackgroundBorder svg path {  fill:none; stroke:#FFF; stroke-width:5px;}
.BackgroundBorder.Active svg { stroke-dashoffset: 0; transition:1.5s all ease-in-out; -webkit-transition:1.5s all ease-in-out; }
.BackgroundBorder.OverlayOn { z-index:1; }
.BackgroundBorder.OverlayOn svg path { fill:#FFF; }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   .BackgroundBorder svg { display:none; }  
   .BackgroundBorder { transition:.3s all ease-in-out; opacity:0; border:5px solid #FFF; width:calc(100% - 60px); height:calc(100% - 60px); left:30px; top:30px;}
   .BackgroundBorder.Active { opacity:1; }
}
@supports (-ms-ime-align:auto) { 
   .BackgroundBorder svg { display:none; }  
   .BackgroundBorder { transition:.3s all ease-in-out; opacity:0; border:5px solid #FFF; width:calc(100% - 60px); height:calc(100% - 60px); left:30px; top:30px;}
   .BackgroundBorder.Active { opacity:1; }
}
/* Content Left */
.LeftContent { opacity:0; position:absolute; top:0; left:0; width:50%; height:100%; box-sizing:border-box; padding:90px 90px 90px 120px; text-align:center; color:#0b486b;}
.LeftContent.Active { opacity:1; transition:.3s opacity ease-in-out; -webkit-transition:.3s opacity ease-in-out; }
.LeftContent .Logo { max-width:80%; width:200px; }

.LeftContent .Socials { display:block; list-style-type:none; padding:0; margin:0; position:absolute; bottom:70px; width:100%; left:0;}
.LeftContent .Socials li { display:inline-block;padding:0; margin:0 4px;}
.LeftContent .Socials li a { position:relative; display:inline-block; width:40px; height:40px; font-size:16px; line-height:40px; text-align:center; color:#0b486b; }
.LeftContent .Socials li a::before { position:absolute; top:0; left:0; background:#fff; opacity:0; border-radius:100%; width:100%; height:100%; content:' '; display:block; transition:.2s all ease-in-out; -webkit-transition:.2s all ease-in-out; transform:scaleX(0.8); -webkit-transform:scaleX(0.8);}
.LeftContent .Socials li a:hover::before { transform:scaleX(1); -webkit-transform:scaleX(1); opacity:1; }
.LeftContent .Socials li a i { position:relative; }

.LeftContent .MainCopy { position:absolute; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%);  width:100%; left:0; box-sizing:border-box; padding:0 50px 0 80px; margin:0;}
.LeftContent .MainCopy h1 { font-size:2vw; }

/* Content right */
.RightContent { opacity:0; position:absolute; top:0; right:0; width:50%; height:100%; box-sizing:border-box; padding:90px 120px 90px 90px; text-align:center; color:#0b486b;}
.RightContent.Active { opacity:1; transition:.3s opacity ease-in-out; -webkit-transition:.3s opacity ease-in-out; }
.MainNav { position:absolute; top:50%; left:0; width:100%; transform:translate3d(0,-50%,0); -webkit-transform:translate3d(0,-50%,0);}
.MainNav ul { display:block; list-style-type:none; padding:0; margin:0;}
.MainNav ul li { display:inline-block;padding:0; margin:0;}
.MainNav ul li a { padding:10px 20px; color:#FFF; text-decoration:none; display:block; position:relative;}
.MainNav ul li a svg { opacity:0; transition:.2s opacity ease-in-out; -webkit-transition:.2s opacity ease-in-out; position:absolute; top:0; left:0; width:100%; height:100%; }
.MainNav ul li a:hover svg { opacity:1; transition:.3s opacity ease-in-out; -webkit-transition:.3s opacity ease-in-out;}
.MainNav ul li a path { fill:none; stroke:#FFF; }


/* RWD and mobile version */
body { font-size:18px; }
.Logo_Mobile { display:none; width:80%; max-width:300px; position:absolute; top:25px; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%);}
.Mobile { display:none;text-align:center; position:relative;} 

.Mobile .MobileIntro { min-height:400px; box-sizing:border-box; padding:20px; height:100vh; position:relative;}

.Mobile .MainCopy { color:#FFF; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:calc(100% - 40px); -webkit-transform:translate(-50%, -50%);  }
.Mobile .MainCopy h1 { font-size:24px; }

.Mobile .MobileContent { padding:20px; background:#FFF; text-align:left; position:relative;}
.Mobile .MobileContent .OverlaySectionPic { width:100%; }
.Mobile .OverlaySection h2 { margin-top:0; }
.Mobile .OverlaySection { margin-bottom:30px; }
.Mobile .OverlaySection:last-child { margin-bottom:0; }
.Mobile .OverlaySection:last-child p:last-child{ margin-bottom:0; }
.Mobile .OverlaySectionGoogleMaps { height: 350px; }
	
.Mobile .Socials { display:block; list-style-type:none; padding:0; margin:0; width:100%; position:absolute; bottom:35px; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); }
.Mobile .Socials li { display:inline-block;padding:0; margin:0 4px;}
.Mobile .Socials li a { background:#a8d0e6; border-radius:100%; position:relative; display:inline-block; width:30px; height:30px; font-size:14px; line-height:30px; text-align:center; color:#0b486b; }
.Mobile .Socials li a i { position:relative; }


@media screen and (max-width:1440px) {
	.OverlayContent .OverlaySection h2 { font-size:90px; }
}
@media screen and (max-width:980px) {
	.Desktop { display:none; }
	.Mobile { display:block; }
	.Mobile .Logo_Mobile { display:inline-block; }
	.Logo { display:none; }
}
@media screen and (max-width:480px) {
	body { font-size:16px;}
	.Mobile .OverlaySectionGoogleMaps { height: 200px; }
	.Mobile .MainCopy { font-size:18px; }
	.Mobile .OverlaySection .Col { width:100%; float:none; padding:0;}
}
}