/*Global*/
:root {
    --selected-text-color: rgb(239, 59, 37);
    --navbar-horizontal-margin: 20px;
	--navbar-height: 50px;
    --section-a-background-color: rgb(255, 255, 255);
	--section-a-height: 667px;
	--action-hover-background-color: rgb(199, 31, 28);
	--max-content-width: 1300px;
}

html,
body {
    margin: 0;
    background: var(--section-a-background-color);
    font-family: 'Raleway', sans-serif;
}

/*Header*/
.navbar {
    background-color: var(--section-a-background-color);
}

.navbar-nav {
    margin-right: var(--navbar-horizontal-margin);
}

.navbar-header {
    height: var(--navbar-height);
}

.logo {
    margin-left: var(--navbar-horizontal-margin);
	margin-top: 10px;
	width: 31px;
  	height: 30px;
  	object-fit: contain;
}

.navbar-nav>li>a { 
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75em;
    font-weight: 600;
}

.navbar-nav li a:hover {
    color: var(--selected-text-color) !important;
}
.navbar-nav li.active a {
    color: var(--selected-text-color) !important;
}

.navbar-nav li a, .navbar-nav li a:hover, .navbar-nav li.active a {
    background-color: transparent !important;
}

.navbar-toggle-content>.icon-bar {
	background-color: var(--selected-text-color) !important;
}

.navbar button.navbar-toggle {
	border: none;
}

/*Sections common*/
.section .row {
    margin: auto;
}

.section>.row {
	max-width: var(--max-content-width);
}

.row>div>img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1.5vw;
}

.underline {
	border-bottom: 2px solid var(--selected-text-color);
}

h2 {
	font-size: 30px;
	font-weight: 600;
	line-height: 0.6;
	text-align: center;
}

.section h2 {
	padding-top: var(--navbar-height);
}

/*Home*/
.home {
    height: var(--section-a-height);
}

.carousel .item1 {
    background: url(../images/slide-1.jpg) no-repeat;
    background-size: cover;
	background-position:  55% 0%;
}

.carousel .item2 {
    background: url(../images/slide-2.jpg) no-repeat;
    background-size: cover;
	background-position:  65% 0%;
}

.carousel .item3 {
    background: url(../images/slide-3.jpg) no-repeat;
    background-size: cover;
	background-position:  71% 0%;
}

.carousel-indicators {
    bottom: 5%;
    left: 50%;
}

.carousel-caption {
    position: inherit;
    min-height: var(--section-a-height) !important;
    text-align: left;
	color: black;
}

.carousel h1, .carousel p  {
	margin-left: 2vw;
}

.carousel h1 {
    padding-top: 90px;
	font-size: 36px;
  	font-weight: 500;
  	line-height: 0.5;
}

.carousel p {
    padding-top: 20px;
	max-width: 250px;
	font-size: 24px;
	font-weight: 300;
}

.item1 h1 {
	max-width: none;
}

.item2 h1, .item3 h1 {
	max-width: 60%;
  	line-height: 1.1;
}

.item2 h1 {
	max-width: 70%;
}

.item3 p {
	max-width: 60%;
}

.carousel-indicators li {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 4px;
    border: 1px solid black;
}

.carousel-indicators .active {
    width: 12px;
    height: 12px;
    margin: 0px 4px;
    border: 1px solid black;
    background: var(--selected-text-color);
}

/*Services*/
.services {
    background-color: var(--section-a-background-color);
    text-align: center;
    padding-bottom: 40px;
}

.services .row .content {
	margin: auto;
	max-width: 800px;
	width: 95%;
}

.services .row img {
	margin-top: 40px;
	width: 50px;
}

.services h4 {
	margin-top: 20px;
	font-size: 20px;
	font-weight: 600;
	line-height: 0.9;
}

.services p {
	font-size: 15px;
}

/*Careers*/
.careers {
    padding-bottom: 50px;
	height: var(--section-a-height);
	background-image: url("../images/join-our-team.jpg");
    background-repeat: no-repeat;
	background-size: cover;
	opacity: 1;
	background-position:  29% 0%;
}

.careers .row {
	width: 100%;
    background-position:  88% 0%;
}

.careers p {
	margin-top: 20px;
	font-size: 15px;
	text-align: center;
}

.careers .content {
	width: 90%;
	margin: auto;
}

/*About*/
.about {
    background-color: var(--section-a-background-color);
    text-align: center;
    padding-bottom: 20px;
}

.about .row .content {
	margin: auto;
	max-width: 900px;
}

.about h4 {
	padding-top: 30px;
	font-size: 20px;
	font-weight: 600;
	line-height: 0.9;
	color: var(--selected-text-color);
}

.about .row .content p {
	font-size: 15px;
}

/*Get in touch*/
.get-in-touch {
	height: var(--section-a-height);
	text-align: center;
}

#email-form {
	background-repeat: no-repeat;
	background-image: url("../images/get-in-touch.jpg");
	background-size: cover;
}

.get-in-touch .content {
	margin: auto;
	max-width: 600px;
	width: 90%;
	height: var(--section-a-height);
}

.get-in-touch p {
	padding-top: 20px;
	font-size: 15px;
}

.get-in-touch .form-control, .get-in-touch .btn {
    margin-top: 30px;
    min-height: 40px;
    border-radius: 0px;
    width: 100%;
	background-color: transparent;
	border-color: var(--selected-text-color);
}

.get-in-touch .btn {
	font-size: 15px;
	font-weight: 500;
	min-height: 40px;
    background-color: var(--selected-text-color);
}

.get-in-touch .btn:hover {
    background-color: var(--action-hover-background-color);
}

#form_text {
	min-height: 200px;
}

#email-sent, #email-sent-error {
	display: none;
	height: 100%;
	width: 100% !important;
    background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#email-sent {
	background-image: url("../images/request-sent.jpg");
}

#email-sent-error {
	background-image: url("../images/request-failed.jpg");
}

#email-sent-error h2 {
	color: white;
}

#email-sent-error p {
	color: rgba(255, 255, 255, 0.6);
}

#email-sent p, #email-sent-error p {
	width: 90%;
	margin: auto;
}

/*Footer*/
.footer {
	background-color: black;
	padding: 20px 20px 40px 20px;
	color: white;
	text-align: center;
}

.footer h2 {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
}

.footer p {
	color: rgb(193, 193, 193);
}

.footer i {
	padding-right: 2vw;
}

.footer a {
	color: rgb(193, 193, 193);
}

.footer a:hover {
	color: var(--selected-text-color);
}

.social_icons a {
	font-size: 25px;
	padding-right: 10px;
    color: white !important;
	display: inline-block;
    list-style: none;
}

.facebook:hover {
	color: rgb(59,89,152) !important;
}

.twitter:hover {
	color: rgb(0,178,255) !important;
}

.linkedin:hover {
	color: rgb(0, 119, 181) !important;
}

/*Media*/
@media only screen and (min-width: 768px) {
    :root {
        --navbar-horizontal-margin: 100px;
    }
    
    body {
        font-size: 17px;
    }

	.carousel .item1 {
		background-position: 70% 0%;
	}

	
	.carousel .item3 {
		background-position:  100% 0%;
	}
	
	.carousel h1 {
    	padding-top: 140px;
	}

	.item1 h1, .item3 h1 {
		max-width: none;
	}

	.carousel .item2 p {
		max-width: 300px;
	}

	.carousel .item3 p {
		max-width: 290px;
	}
	
	.carousel p {
		max-width: 400px;
	}
	
	.carousel h1, .carousel p  {
		margin-left: 0vw;
	}

	.form {
		width: 80%;
		margin: auto;
	}
	
	.careers {
		background-position:  34% 0%;
	}
	
	.about .row .content {
		width: 90%;
	}
}

@media only screen and (min-width: 1200px) {
	.navbar-nav>li>a { 
    	letter-spacing: 2px;
	}

	.carousel .item1 {
		background-position:  100% 0%;
	}
	
	.carousel h1, .carousel p  {
		margin-left: 10vw;
	}
}