/* Variables */
:root {
	--black: #000000;
	--blue: #0033A0;
	--alt-blue: #32699f;
	--green: #8fcb9b;
}

html,
body { margin: 0; padding: 0; }

body { font-family: 'Montserrat', sans-serif; background: #ffffff; font-size: 16px; color: var(--black); }
a { color: var(--black); transition: 0.4s ease-out; text-decoration: none; border: none; outline: 0; }
a:hover { color: var(--blue); }
.mobile { display: none; }
.green { color: #638475; }
.cta { position: relative; display: inline-block; border: 0; padding: 0; cursor: pointer; background: var(--blue); color: #ffffff; font-weight: 700;  height: 60px; padding: 0 1.5em; font-size: 1.2em; line-height: 1; border-radius: 4em; transition: 0.4s ease-out; }
.cta:hover { background: var(--black); }
/*
.cta span { display: inline-block; padding: .5em 1.5em .8em; font-size: 1.2em; font-family: 'Antonio', sans-serif; background: #C51C16; color: #eae8e2; z-index: 2; transition: 0.4s ease-out; position: relative; }
.cta:before,
.cta:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 0.4s ease-out; z-index: 1; }
.cta:hover:before { background: #68918c; transform: translate(-5px, -5px); }
.cta:hover:after { background: #c5a335; transform: translate(5px, 5px); }
.cta:hover span { color: #eae8e2; }
*/
.buttonWrapper { margin: 1em 0 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
h3 { color: #32699f; }

address { font-style: normal; }

nav ul { padding: 0; margin: 0; }
nav li { padding: 0; margin: 0; list-style: none; }

.colWrapper { display: flex; }


/* Header */ 
header { display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; width: 100%; padding: 1em; position: fixed; left: 0; top: 0; z-index: 9; backdrop-filter: blur(10px); background: rgba(255,255,255,0.5); }
.logo h1 { margin: 0; color: #000000; font-size: 12px; font-weight: 300; margin-left: 5px; }
.logo a { display: inline-block; width: 200px; text-align: center; }
.logo svg { width: 100%; height: auto; }
.logo span { width: 0; height: 0; display: inline-block; overflow: hidden; text-indent: 99999px; }
html.scrolled header .logo a { width: 150px; }

.mainMenu { display: flex; }
.mainMenu li { margin: 0 0 0 20px; }

.mobileMenu { position: absolute; width: 50px; height: 50px; top: 0; right: 20px; z-index: 22; display: none; }
.mobileMenu div { position: absolute; width: 100%; height: 2px; background: #000000; left: 0; transform: scale(0.75); transition: 0.5s ease-out; }
.mobileMenu div:nth-child(1) { top: 15px; }
.mobileMenu div:nth-child(2) { top: 25px; transition-delay: 0.5s; }
.mobileMenu div:nth-child(3) { top: 35px; }
.menuOpened .mobileMenu div:nth-child(1) { transform: rotate(225deg) scale(0.75); top: 25px; transition-delay: 0.5s; }
.menuOpened .mobileMenu div:nth-child(2) { width: 0; left: 50%; transition-delay: 0s; }
.menuOpened .mobileMenu div:nth-child(3) { transform: rotate(-45deg) scale(0.75); top: 25px; transition-delay: 0.5s; }


/* Footer */ 
footer { padding: 1em; }
footer .col { flex: 1; }
footer .bottom { text-align: center; padding: 2em 0; }
footer .seperator { color: #666666; display: inline-block; margin: 0 10px; }
footer .seperator:before { content: '|'; }
footer h2 { border-bottom: 1px solid var(--black); padding: 1em 0; font-size: 2.5em; }
footer p,
footer ul { margin: 0 0 0.4em; }
footer .logo { margin: 1em 0; }
footer .logo a { width: 120px; }
.academy-badge img { width: 150px; }


.social { margin: 0; padding: 0; list-style: none; display: flex; }
.social li { margin: 0 10px 0 0; }
.social svg { width: 32px; height: 32px; transition: 0.4s ease-out; }
.social a:hover svg { fill: #e73626; }

/*----------------- Main Content -------------*/
.zone1 { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; box-sizing: border-box; padding: 2em; background: url(../images/zone1-bg.webp) no-repeat top center; background-size: cover; text-align: center; position: relative; }
.zone1:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(360deg, #5190AC 0%, rgba(178, 222, 242, 0.6) 57.89473684210527%);
 }
.zone1 * { position: relative; }
.zone1 h2 { font-size: 3.2em; line-height: 1; margin: 0; }
.zone1 h3 { color: var(--black); font-size: 1.25em; }



/*----------------- Form -------------*/

.formWrapper form { display: flex; align-items: flex-end; max-width: 600px; width: 100%; margin: 0 auto; }
.formWrapper form .buttonWrapper,
.formWrapper form .fieldWrapper { padding: 5px; flex: 1; margin: 0; }
.formWrapper .cta { width: 100%; }


.mailFormWrapper { width: 100%; }
.fieldWrapper,
.checkboxWrapper { width: 100%; position: relative; margin: 0 0 1em; text-align: left; }
.fieldWrapper label { padding-left: 1.8em; margin-bottom: 0.3em; display: block; font-size: 0.8em; }
.fieldWrapper input + label { position: absolute; top: 50%; left: 1em; color: #666666; line-height: 1em; margin-top: -0.5em; transition: 0.2s; pointer-events: none; }
.fieldWrapper textarea + label { position: absolute; top: 1em; left: 1em; color: #666666; line-height: 1em; transition: 0.2s; pointer-events: none; }
.fieldWrapper input:focus + label,
.fieldWrapper input.hasText + label,
.fieldWrapper textarea:focus + label,
.fieldWrapper textarea.hasText + label { top: 0.1em; left: 1.3em; margin: 0; font-size: 0.7em; } 
.fieldWrapper input,
.fieldWrapper textarea { width: 100%; box-sizing: border-box; font-family: 'Montserrat', sans-serif; border: none; font-size: 1em; padding: 0 1.4em; height: 60px; outline: 0; background: #fbfbf9; border: 2px solid #ffffff; border-radius: 4em; transition: 0.4s ease-out; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.fieldWrapper input:focus { box-shadow: 0 0 10px rgba(0,0,0,0.6); border: 2px solid var(--blue); }
.fieldWrapper input:hover { border: 2px solid var(--blue); }
.fieldWrapper textarea { min-height: 10em; }
.checkboxWrapper label { display: inline-block; margin: 0 1em 0 0.5em; position: relative; padding-left: 2em; cursor: pointer; }
.checkboxWrapper label:before,
.checkboxWrapper label:after { content: ''; position: absolute; width: 1em; height: 1em; top: 0; left: 0; }
.checkboxWrapper label:before { background: #fbfbf9; }
.checkboxWrapper label:after { transform: scale(0); transition: 0.2s ease-out; width: 0.6em; height: 0.6em; margin: 0.2em; background: #000000; }
.checkboxWrapper input:checked + label:after { transform: scale(1); }

.checkboxWrapper input { display: none; }
.mailFormWrapper .note { color: #666666; font-size: 0.7em; margin-bottom: 1.3em; }

.reCaptchaOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 10; }

.refreshForm span { vertical-align: middle; }
.refreshForm svg { height: 1em; width: auto; transition: 0.4s; vertical-align: middle; }
.refreshForm a:hover svg { fill: #e73626; }

.formResponseMsg { color: green; }
.grecaptcha-badge { opacity: 0; }

/*----------------- Terms Content -------------*/
.main article#terms { display: block; padding: 100px 30px 40px; }
.main article#terms h2 { font-size: 2.8em; }
.main article#terms p { line-height: 1.46em; }

/*----------------- Responsive -------------*/
@media screen and (max-width: 1023px) {
    .main article { display: block; }
    .main article .text,
    .main article .image { width: 100%; }
    .main article h2 { font-size: 3em; }
    
    #home { padding-top: 60px; font-size: 0.8em; }
    .logo { position: relative; z-index: 21; }
    header nav { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 20; transform: translateX(-100%); transition: 0.4s ease-out; backdrop-filter: blur(10px); background: #eae8e2fa; }
    .menuOpened header nav { transform: translateX(0); }
    .mobileMenu { display: block; }
    .mainMenu { display: block; font-size: 2em; box-sizin: border-box; padding-top: 10vh; }
    .mainMenu li { margin: 20px 10px; text-align: center; }
    
    
    .main article { padding-top: 60px; margin: 0; }
    .main article .image { padding-top: 0; padding-bottom: 30px; }
    .main article .image svg { width: 90%; height: auto; margin: 0 5%; }

    .main article.homeZone { top: 10vh; }
    .main article#home .image { padding-bottom: 20px; }
    
	.main article.design .text { width: 80%; }
	
    .main article#creation .image svg { width: 72%; margin: 0 14%; }
	
	.main article.develop .text { width: 55%; }
	.main article.develop .image svg { width: 40%; }
	
	.main article.smallbusiness .text { width: 60%; }
	
	.main article.about-us { display: flex; flex-direction: column; }
	.main article.about-us .image { margin-top: -80%; order: 2; }
	.main article.about-us .text { position: relative; top: auto; left: auto; width: 50%; margin: 0 0 0 auto; }

    #marketing { text-align: left; }
    #marketing h2 { text-align: center; }
    #marketing .services li { text-align: left; padding-left: 30px; padding-right: 0; }
    #marketing .services .expand { right: auto; left: 0; }

    
    #clients ul li { width: 33.3%; }
	#clients .image { margin-top: -10%; }
	
	.main #contact .text { margin: 0; }
	
	footer { justify-content: center; flex-wrap: wrap; }
	footer .col { width: 100%; padding: 1em; text-align: center; }
	footer ul a { display: block; padding: 1em; }
	
	.colWrapper { display: block; }
}

@media screen and (max-width: 700px) {
	
	.services h3 { font-size: 1.5em; }
	.services .expand { top: 0.2em; }
	
	.main article.homeZone { top: 25vh; }
	.homeImage { margin: 10vh 0; }
	.homeImage svg { margin-top: 0; }
	.main article.homeZone h2 { font-size: 4em; }
	.main article.homeZone p { font-size: 1.3em; }
	.main article.marketing { margin: 0; width: 100%; padding: 1em; }
	.main article.design .text { margin: -25% auto 0 1em; }
	
	.main article.develop { display: flex; flex-direction: column; }
	.main article.develop .text { order: 2; width: 100%; margin: -25% 0 0 0; }
	.main article.develop .image { transform: scaleX(-1); }
	
	.main article.smallbusiness { display: flex; flex-direction: column; }
	.main article.smallbusiness .text { width: 100%; margin: 0; order: 2; }
	
	.main article.about-us { display: flex; flex-direction: column; }
	.main article.about-us .text { width: 100%; margin: 0; order: 2; }
	.main article.about-us .image { margin: 0; }
}

/* Animations */
.logo svg #bb-logo-green,
.logo svg #bb-logo-blue { transform-origin: top center; transform-box: fill-box;}
@keyframes logo1 {
  0% {transform: rotate(0deg);}
  50% {transform: rotate(-3deg);}
  100% {transform: rotate(0deg);}
}
@keyframes logo2 {
  0% {transform: rotate(0deg);}
  50% {transform: rotate(3deg);}
  100% {transform: rotate(0deg);}
}
.logo a:hover svg #bb-logo-green,
.animate .logo svg #bb-logo-green {
  animation-name: logo1;
  animation-duration: .5s;
  animation-iteration-count: 4;
}
.logo a:hover svg #bb-logo-blue,
.animate .logo svg #bb-logo-blue {
  animation-name: logo2;
  animation-duration: .5s;
  animation-iteration-count: 4;
}