html,
body {
	height:100%;
	font-family: 'Alegreya Sans', sans-serif;
}

.btn {
	transition: all 0.3s ease-in-out;
}



/* Media Quiries - Chanes style when device is smaller */
@media(max-width: 768px) {
	#header {
		text-align: center;
	}
	#header img {
		margin: 0 auto;
	}
	#social {
		text-align: center;
	}
	#social hr, #who hr{
		margin:8% auto;
	}

    #who {
        text-align: center;
    }
    #who img{
        text-align: center;
        margin-top: 15%;
    }

}
/* ========= END Media Quiries ======= */


/* ===== Start Navbar Styles ===== */
.navbar {
    background-color:rgba(0,0,0,0.75);
    border-bottom:1px solid #dedede;
    font-family: 'Alegreya Sans', sans-serif;
}

.navbar a:hover {
	font-size: 1.1em;
}

.navbar .nav .nav-item .nav-link {
    color:#d1d1d1;
}

.navbar .nav .nav-item .nav-link:hover {
    color:#fff;
}

.navbar-toggler {
    color: white;
}


/* ===== End Navbar Styles ===== */




/* ===== Start Header Styles ===== */
#header {
	background:url('../img/classiccar.jpeg') center center no-repeat;
	background-size:cover;
	height:100%;
	color:white;
	display:flex;
	align-items:center;
}

#header img {
	padding: 90px 0 30px 0;
	width: 80%;
}

#header .header-box {
	background-color:rgba(0,0,0,0.8);
	padding: 30px;
	border-radius: 10px;
	
}

#header button {
	border-color: white;
	color: white;
	font-size:1.4em;

}

#header button:hover {
	background-color:rgba(75,75,75,0.6);


}

#header a .fa {
	color:rgba(180,180,180,0.6);
	
}

#header .fa {
	margin:5% 0;

}

#header a .fa:hover {
	color:rgba(75,75,75,0.6);
	transition: all 0.3s ease-in-out;

}

#header .container .row p {
	color:white;
	font-weight: normal;
	font-size:1.1em;
	padding: 0px 25px 0 0;
}


/* ===== End Header Styles ===== */


/* =====  Connect Styles ===== */
#social {
	padding:4.25rem 0;
    background-color: #333;
    color:white;
    
}

#social .fa {
	font-size: 1.5em;
	color:#be2835;
	border: 2px solid #be2835;
	width: 60px;
	height: 60px;
	border-radius: 30%;
	text-align: center;
	padding:30% 0;
	margin-top:13px;

}

#social .fa:hover {
	color:#fff;
	background:#be2835;
	transition: all 0.4s ease-in-out;
}

#social .list-inline {
    padding-left: 70px;
}
/* =====  End Connect Styles ===== */


/* =====  Who We Are Styles ===== */
#who {
    padding: 5rem 0;
    background-color:#242424;
    color: white;
}

#who .btn-who {
    background-color:#be2835;
    color:#fff;
    width:50%;

}

#who .btn-who:hover {
    background-color:transparent;
    border: 1px solid #be2835;
    color:#be2835;
}



/* =====  End Who We Are Styles ===== */

/*WORK*/

#work {
    padding:5rem 0;
    background-color:#242424;
    color:white;
}

#work .work-img {
    position:relative;
}

#work .work-img .img-overlay {
    position:absolute;
    top:0;
    left:0;
    background-color:rgba(0,0,0,0.5);
    width:100%;
    height:100%;
    background-image: url('../img/eye.png');
    background-position:center center;
    background-repeat:no-repeat;
    opacity:0;
    z-index:0;
    transition:all 0.3s ease-in-out;
    
}

#work .work-img .img-overlay:hover {
    opacity:1;
    z-index:1;
}

#work .card-block p {
    color: black; 
}

/* END WORK*/

/*WHY US*/

#why {
    padding:5rem 0;
    background-color: #333;
    color: white;
}

#why .fa {
    color:#be2835;
    padding:15px 0;
}

/* END WHY US */


/*CUSTOMERS*/
#customers {
    padding:5rem 0;
    background-color:#242424;
    color:white;
}

#customers .carousel-indicators li {
    background-color:#be2835;
}

#customers .carousel-inner {
    margin-bottom:50px;
}

#customers .carousel-indicators {
    margin-bottom:-50px;
}


/*CONTACT US*/
#contact {
    padding:5rem 0;
    background-color: #333;
    color: white;
}

#contact .btn-outline-info {
    background-color:#be2835;
    color:#fff;
    width:100%;
    border-color: #be2835;
    
}

#contact .btn-outline-info:hover {
        background-color: transparent;
        border: 1px solid #be2835;
        color: #be2835;
}
/*END CONTACT US*/

/*FOOTER*/

#footer {
    padding:2rem 0;
    background-color:#242424;
    color:white;
}

#footer a {
    color:white;
}

#footer .fa {
    padding:0 5px;
}
/* END FOOTER*/