@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700|PT+Sans+Narrow');

/*
========
Universal
========

Colors:
	Blue: #000
	Gray: #7f7f7f

Fonts:
font-family: 'Montserrat', sans-serif;
font-family: 'PT Sans Narrow', sans-serif;

*/

body, html {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	overflow-x: hidden;

}

a:hover, .btn:hover {
	text-decoration: none !important;
    -webkit-transition: all ease-in 250ms;
    -moz-transition: all ease-in 250ms;
    -o-transition: all ease-in 250ms;
    transition: all ease-in 250ms;
}


.flip {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

/*
========
REMAX LOGO
========
*/

.logo {
	padding-top: 10px;
	width: 200px;
	height: auto;
}

/*
========
HEADER
========
*/

.title {
	padding: 10px 0;
}

h1 {
	font-size: 2em;
	color: #000;
	font-weight: 700;
	text-align: center;
}

h2 {
	color: #7f7f7f;
	font-size: 2em;
	font-weight: 500;
	text-align: center;
	margin-top: -5px;
}

.license {
	font-family: 'PT Sans Narrow', sans-serif;
	font-size: 1.4em;
	color: #7f7f7f;
	text-align: center;
	margin-top: -5px;
	
}



/*
========
HERO
========
*/

#hero {
	background: url(../img/hero-bg.jpg) center no-repeat;
	background-size: cover;
}

#hero img {
	padding-top: 150px;
	max-width: 350px;
}


/*
========
CONTACT
========
*/

#contact {
	background: url(../img/contact-bg.jpg) center no-repeat;
	color: #fff;
	padding: 55px 0;
}

#contact .subhead {
	font-size: 1.3em;
	line-height: 2em;
	font-weight: 400;
	padding-bottom: 50px;
	max-width: 850px;
	margin: 0 auto;
}

.circle {
	 background: #fff;
	 border-radius: 50px;
	 width: 50px;
	 height: 50px;
	 color: #000;
	 font-size: 1.2em;
	 line-height: 2.5em !important;
}

#contact .text {
	font-size: 1.5em;
	color: #fff;
	position: absolute;
	margin-top: -45px;
	margin-left: 65px;
	font-family: 'PT Sans Narrow', sans-serif;
}


#contact .btn {
	background: #000;
	color: #fff;
	border: 1px solid #fff;
	padding: 15px 25px;
	font-weight: 500;
	border-radius: 0;
	margin-right: 10px;
	margin-bottom: 35px;
}

#contact .btn:hover, #contact .btn:focus, 
#contact .btn:active {
	background: #fff;
	color: #000;
}

.form-control {
	font-size: 1.2em;
	font-family: 'PT Sans Narrow', sans-serif;
	background: rgba(0,0,0,0.4) !important;
	color: #fff !important;
	border: 1px solid #fff;
	padding: 15px;
	border-radius: 0;
}

.form-control::placeholder { 
    color:#fff;
}

.form-control::-ms-input-placeholder { 
    color:#fff;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
    color:#fff;
}

#contact h4 {
	padding-top: 75px;
	text-align: center;
}

#social {
	max-width: 250px;
	margin: 0 auto;
	padding: 25px 0;
}

/*
========
FOOTER
========
*/

#footer {
color: #fff;
font-size: 1.2em;
padding: 5px;
}

#footer hr {
	max-width: 75%;
	margin: 0 auto;
	background:	rgba(255,255,255,0.4);
	height: 1px;
}

#footer p {
	padding: 10px 5px 0 5px;

}
/*
========
Modal
========
*/

.modal-body {
	text-align: center;
	font-size: 1.2em;
	line-height: 1.8em;
	padding: 25px 0;
}

.modal-footer .btn {
	background: #fff;
	color: #000;
	border: 1px solid #000;
}

.modal-footer .btn:hover, .modal-footer .btn:focus,
.modal-footer .btn:active {
	background: #000;
	color: #fff;
}


/*
========
MEDIA QUERIES
========
*/


@media (min-width: 767px) {
	
	h1 {
	font-size: 2em;
	color: #000;
	font-weight: 700;
	text-align: center;
	position: relative;
	margin-left: -100px;
}

h2 {
	position: relative;
	margin-top: -45px;
	margin-left: 265px;
	color: #7f7f7f;
	font-size: 2em;
	font-weight: 500;
	text-align: center;
}

.license {
	position: relative;
	font-family: 'PT Sans Narrow', sans-serif;
	font-size: 1.4em;
	color: #7f7f7f;
	text-align: center;
	margin-top: -10px;
	
}
	
	#hero {
	background: url(../img/hero-bg.jpg) center no-repeat;
	background-attachment: fixed;
	background-size: cover;
}
	
	#hero img {
	padding-top: 150px;
	max-width: 750px;
}
	
}