/* WEBSITE BY ASTREA DOMINUE STREAK.CO.NZ */

body {
	transform: translateY(0);
    opacity: 1;
    transition: 1.2s;
}
body.fade-up {
	transform: translateY(40px);
    opacity: 0;
    transition: none;
}

@keyframes imgload {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

.imgload {
  -webkit-animation: imgload 1.2s ease 0.5s forwards;
  animation: imgload 1.2s ease 0.5s forwards;
}

* {box-sizing: border-box;}
body {font-family: 'Montserrat', 'Proxima Nova', sans-serif; margin: 0; color: #505159; background: #fcfcfc;}
div#page { max-width: 1600px; margin: 0 auto; overflow: auto; padding: 30px 0;}
div.column {float: left; width: 60%;}
div.side {float: left; width: 40%;}
img {width: 100%; padding: 10px; float: left; opacity: 0;}
img.doubles {width: 50%;}
header, main {padding: 10px;}
header {color: #2b27d4;}
a.logo, a.logo:visited {font-weight: 900; font-size: 80px; color: #2b27d4; transition: 0.3s linear;}
a.logo:hover {opacity: 0.3; border: 0;}
nav {font-weight: 700; text-transform: uppercase; font-size: 16px;}
nav a, nav a:visited {color:#2b27d4;}
main {padding: 120px 80px 120px 10px; font-size: 20px;}
h1 {font-weight: 400; font-size: 26px;}
a, a:visited {color: #eb7425; text-decoration: none;}
a:active, a:focus, a:hover {border-bottom: 2px solid #eb7425;}
div#line {height: 4px; width: 100%; background: #2b27d4;}
p.credits {clear: both; font-size: 16px; padding: 10px;}
footer {clear: both; color: #c3c3c3; font-size: 14px; font-weight: 400; text-align: center; padding: 260px 0 40px;}
span.up {float: right; font-size: 28px; line-height: 14px; padding-right: 20px;}
.up a, .up a:visited {color: #c3c3c3; text-decoration: none;}
.up a:hover, .up a:active, .up a:focus {color: #eb7425; border: none;}

.blue-testimonial {color: #2b27d4; font-weight: 700; font-size: 34px; text-align: center; padding: 0 25px; position: relative; margin: 0 auto;}
.blue-testimonial:before, .blue-testimonial:after {position: absolute; font-weight: 900; font-size: 150px; left: 50%; transform: translateX(-50%);}
.blue-testimonial:before {content: "“"; top: 80px;}
.blue-testimonial:after {content: "”"; bottom: -200px;}
.blue-testimonial small {display: block; font-weight: 400; font-size: 20px; line-height: 50px;}

.gallery-thumb {float: left; width: 50%; text-align: center; padding-bottom: 0.5em;}
.gallery-thumb a {font-weight: 700; font-size: 20px; text-transform: uppercase;}
.gallery-thumb img {padding-bottom: 20px;}

.blue-section {background-color: #1a1887; background-image: url(blue-map.png); background-size: cover; background-position: center; margin-top: 160px; padding: 220px 50px 200px 50px;}
.blue-section p {max-width: 1200px; margin: 40px auto; color: #fcfcfc; font-size: 36px;}
.blue-section a.button {color: #fcfcfc;}
.blue-section a.button:hover, .blue-section a.button:active {color: #eb7425;}
a.button {display: inline-block; padding: 15px; border: 2px solid; font-size: 20px;}

h2 {text-transform: uppercase; font-size: 18px; color: #2b27d4; padding: 150px 10px; text-align: center;}
.clear {clear: both;}
.space {padding-top: 220px;}
.center {text-align: center;}
.galleries {padding-bottom: 30px;}
.size-by-height img {height: 400px; width: auto;}
.size-by-width img {height: auto; width: 33.3%;}
div#testimonials {max-width: 640px; margin: 0 auto; text-align: center;}
div#testimonials img {width: 120px; display: block; margin: 0 auto; float: none; opacity: 1;}
ul.word-menu {padding: 0;}
.word-menu li {display: block;}
.word-menu li:nth-of-type(even) {display: none;}

.fade-in {opacity: 0;}
.blue-out {background: #1a1887; color:#f5f5f5; box-shadow: 0px 500px 0px 1000px #1a1887;}

.blue-out > #page > .column > header {color: #fff;}
.blue-out > #page > .column > header > a.logo, .blue-out > #page > .column > header > a.logo:visited, .blue-out > #page > .column > header > nav a, .blue-out > #page > .column > header > nav a:visited {color: #fff;}
.blue-out > #page > .column > main {color: #dbdbdb;}
.blue-out > #page > footer, .blue-out > #page > footer > .up a, .blue-out > #page > footer > .up a:visited {color: #0b0b3b;}
.blue-out > #page > footer > .up a:hover, .blue-out > #page > footer > .up a:active {color: #eb7425;}
.blue-out > #line {background: #15146e;}
.blue-out > #page > .side > .credits {color:#7e7da1;}




form {margin-top: 330px; padding: 0 10px;}
input, textarea {font-family: 'Montserrat', 'Proxima Nova', sans-serif; font-size: 16px; color: #bbbad4; display: block; width: 100%; padding: 15px; border: 0; background: #15146e; margin: 15px 0;}
textarea {height: 280px;}
input[type=submit]:hover, input[type=submit]:active {cursor: pointer; background: #eb7425; color: #fff;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px #15146e inset; -webkit-text-fill-color: #bbbad4 !important;}

@media (max-width: 1200px){
div#page { max-width: 950px;}
div.column {float: none; width: 100%;}
div.side {float: none; width: 100%;}

form {margin-top: 0; padding: 0 80px 0 10px;}
}

@media (max-width: 1000px){
 .gallery-thumb {float: none; width: 100%; padding-bottom: 15px;}
}

@media (max-width: 900px){
  .size-by-width img {width: 50%;}
  .threes img {width: 100%;}
}

@media (max-width: 800px){
main {padding: 80px 10px;}
form {padding: 0 10px;}
}

@media (max-width: 500px){
 .blue-section {padding: 100px 20px 120px 20px;} 
 .blue-section p {font-size: 26px;}
 .blue-section a.button {font-size: 16px;}
}

@media (max-width: 420px){
a.logo {font-size: 60px;}
span.up {display: none;}
span.rwd-line {display: block;}
}