/* FONTS */

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap");
@font-face {
	font-family: 'theoremw00-regularregular';
	src: url('../fonts/theorem_w00_regular-webfont.woff2') format('woff2'),
	url('../fonts/theorem_w00_regular-webfont.woff') format('woff');
	font-style: normal;

}

body, input, select, textarea, button {font-family: 'Roboto', sans-serif;}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	/* display: none; <- Crashes Chrome on hover */
	-webkit-appearance: none;
	margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type="number"] {
	-moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
	-moz-appearance: textfield;
}

/* GLOBAL */

* {margin: 0; padding: 0; border: none; list-style: none; text-decoration: none; box-sizing: border-box;}
body {font-weight: 400; font-size: 15px; color: #7C7C7C; background-size: cover; background-position: top center; background-repeat: no-repeat;}
input[type="text"], input[type="submit"], textarea, button {-webkit-appearance:none; border-radius:0;}
h1, h2, h3, h4, h6, h6 {font-weight:normal;}
p.smallText {font-size: 12px !important; padding: 2px!important; margin: 0px!important; text-align: right!important;}

/* BACKGROUND IMAGES */

body.landing1 { background-image: url(../images/background01.jpg);}
body.landing2 { background-image: url(../images/background02.jpg);}
body.landing3 { background-image: url(../images/background03.jpg);}
body.landing4 { background-image: url(../images/background04.jpg);}
body.landing5 { background-image: url(../images/background05.jpg);}
body.landing6 { background-image: url(../images/background06.jpg);}
body.landing7 { background-image: url(../images/background07.jpg);}


/* STRUCTURE */

.row {float: left; width: 100%; height: 100vh; padding-bottom: 130px;}
.footerRow {position: absolute; float: left; width: 100%; left: 0; bottom: 0; background: #061a48; text-align: center; padding: 15px 0;}
.centerDiv {display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center;}

/* LANDING */

/* LEFT COLUMN */

.leftColumn { float: left; width: 54%; margin-left: 4%; background: rgba(255,255,255,0.7); padding: 40px; min-height: 650px;}
.leftColumn h3, .responsiveTitle {float: left; width: 100%; font-family: 'theoremw00-regularregular', cursive; font-size: 47px; color: #003da6; padding-bottom: 15px; padding-bottom: 60px;}
.leftColumn h4 {float: left; width: 100%; font-size: 30px; color: #f06d08; font-weight: 700; text-transform: uppercase; padding-bottom: 15px;}
.leftColumn p {float: left; width: 100%; font-size: 25px; color: #333333; font-weight: 700; padding-bottom: 30px;}

/* RIGHT COLUMN */

.rightColumn { float: right; width: 32%; margin-right: 4%; padding: 40px; min-height: 650px;}
.rightColumn.bigBox::before { position: absolute; top: 0; right: 0; width: 40%; height: 100%; content: ''; z-index: -1;}
.rightColumn h3 {float: left; width: 100%; font-size: 30px; color: #fff; font-weight: 700; text-transform: uppercase; padding-bottom: 15px; text-align: center;}
.rightColumn h3.blue { color: #133398;}
.rightColumn input, .rightColumn textarea, .rightColumn select {float: left; width: 100%; height: 30px; line-height: 30px; background: #fff; border-radius: 10px; padding: 0 10px; font-size: 17px; color: #999999; margin-bottom: 7px;}
.rightColumn textarea { height: 60px; }
.rightColumn input.sendBtn {height: 40px; line-height: 40px; background: #f06d08; font-size: 17px; color: #fff; text-transform: uppercase; text-align: center; font-weight: 700; margin-top: 85px; cursor: pointer;}
.rightColumn input.sendBtn:hover {background: #bbbbbb;}
.rightColumn p {float: left; width: 100%; font-size: 20px; color: #fff; font-weight: 700; text-align: center; margin-top: 20px;}
.rightColumn p.grey {color: #474747;}

.rightColumn p.ok, .rightColumn p.error {float: left; width: 100%; font-size: 18px; color: #fff; font-weight: 500; text-align: left; margin: 0 0 10px 0; padding: 10px; display: none;}
.rightColumn p.error {background: #a50000;}
.rightColumn p.ok {background: #01721e;}


/* COLORS */

.rightColumn.grey { background: rgba(77,77,77,0.8);}
.rightColumn.blue { background: rgba(0,61,166,0.6);}
.rightColumn.lightGrey.bigBox:before { background: rgba(179,179,179,1);}
.rightColumn.lightGrey.bigBox { background: none; }
.rightColumn.blue.bigBox:before { background: rgba(0,61,166,1);}
.rightColumn.blue.bigBox { background: none; }

.leftColumn.blue { background: rgba(0,61,166,0.75);}
.leftColumn.blue h3,
.leftColumn.blue p { color: #fff;}


/* FOOTER */

.footerRow .socials {display: inline-block; margin-bottom: 15px;}
.footerRow .socials a {display: inline-block; width: 50px; height: 50px; text-align: center; background: #fff; color: #061a48; font-size: 30px; line-height: 50px; border-radius: 50%; margin: 0 5px;}
.footerRow .socials a i {float: left; width: 50px; height: 50px; line-height: 50px;}
.footerRow .socials a:hover {background: #f06d08;}
.footerRow p {float: left; width: 100%; padding: 0 20px; font-size: 20px; color: #fff; font-weight: 700;}
.footerRow p.copyright {float: left; width: 100%; padding: 0 20px; font-size: 12px; color: #fff; font-weight: 700;}


/* RESPONSIVE */

.responsiveTitle {display: none;}

@media all and (max-width: 1300px) {
	.rightColumn input, .rightColumn textarea {font-size: 15px;}
	.leftColumn h3,	.responsiveTitle {font-size: 40px; padding-bottom: 40px;}
	.leftColumn h4 {font-size: 25px;}
	.leftColumn p { font-size: 20px; }
	.rightColumn h3 {font-size: 22px;}
	.rightColumn p {font-size: 15px;}

}

@media all and (max-width: 950px) {
	.responsiveTitle {display: block; color: #fff; background: #061a48; text-align: center; padding: 20px 0;}
	.row {height: auto; padding-bottom: 0;}
	.centerDiv {display: block;}
	.leftColumn { width: 100%; margin: 2% 0 0 0; min-height: 0;}
	.secondTitle {display: none;}
	.rightColumn { width: 96%; margin: 2%; min-height: 0;}
	.footerRow {position: static;}
	.rightColumn:before { display: none;}
	.rightColumn.lightGrey.bigBox {background: rgba(179,179,179,1);}
	.rightColumn.blue.bigBox { background: rgba(0,61,166,1);}
}

@media all and (max-width: 500px) {
	.rightColumn input, .rightColumn textarea {font-size: 14px;}
	.leftColumn h3,	.responsiveTitle {font-size: 35px; padding-bottom: 30px;}
	.secondTitle {display: none;}
	.leftColumn h4 {font-size: 20px;}
	.leftColumn p { font-size: 16px; }
	.rightColumn h3 {font-size: 20px;}
	.rightColumn p {font-size: 14px;}
	.leftColumn, .rightColumn { padding: 20px; }
}