*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

*{
	font-family: 'Montserrat', sans-serif;
}

h2{
	font-size: 45px;
}

p{
	color: #575759;
}

.container{
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
}

.main-header{
	max-width: 100%;
	padding: 10px 40px;
}

.header-flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100px;
}

.logo{
	height: 46px;
	width: 168px;
}

.menu-bar{
	display: flex;
	text-decoration: none;
	list-style: none;
	font-size: 20px;
}

.nav-bar{
	display: flex;
	justify-content: center;
	align-items: center;
}

.home{
	color: #C51A2B;
}

.menu-bar li{
	margin-left: 35px;
	margin-right: 35px;
	
}

.roofing{
	background: #C51A2B;
	width: 190px;
	height: 44px;
	color: white;
	text-align: center;
	border-radius: 7px;
}

.roofing p{
	text-align: center;
	padding: 12px;
	font-size: 14px;
	color: white;
}

.banner{
	background-image: url("img/banner.png");
	background-size: cover;
	height: 765px;
	display: flex;
	justify-content: center;
	position: relative;	
}

.banner::before{
	content: '';
	background-color: black;
	top: 0;
	left: 0;
	opacity: 50%;
	width: 100%;
	height: 100%;
	z-index: 0;
	position: absolute;
}

.text-container{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.text{
	width: 550px;
	height: 234px;
	color: white;
	font-size: 50px;
	position: relative;
}

.text-box{
	width: 400px;
	height: 500px;
	background: white;
	padding: 30px 30px;
	position: relative;
}

.text-box p{
	font-size: 20px;
	margin-bottom: 20px;
}

.box{
	color: #E8E8E8;
	width: 327px;
	height: 44px;
	border: 1px solid #E8E8E8;
	margin-bottom: 10px;
	padding: 10px 10px;
}

.project{
	height: 69px;
}

.quote{
	background: #C51A2B;
	text-align: center;
}

.construction-history{
	padding: 120px;
}

.history-container{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.history-pic{
	background-image: url("img/house.png");
	background-size: cover;
	background-position: center;
	width: 500px;
	height: 578.08px;
	position: relative;
}

.history-pic2{
	width: 400px;
	height: 400.08px;
	background: #E8E8E8;
	position: absolute;
	border-radius: 7px;
	z-index: -1;
	top: 220px;
	left: 140px;
}

.history-info{
	width: 579px;
	height: 578.08px;
	padding: 20px;
}

.history-info h2{
	font-size: 45px;
	margin-bottom: 20px;
}

.history-info p{
	text-align: justify;
}

.history-info img{
	margin-right: 12px;
	width: 12px;
}

.services-section{
	padding: 120px;
	background-color: #E8E8E8;
}

.service-text{
	text-align: center;
}

.service-text h2{
	font-size: 45px;
	margin-bottom: 15px;
}

.roofing-container{
	display: flex;
	justify-content: center;
	align-items: center;
}

.roofingtypes{
	margin: 15px;
}

.residential{
	color: #C51A2B;
	text-decoration: underline;
}

.service-text p{
	padding: 20px 60px;
	margin-bottom: 20px;
}

.service-pic-container{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0px 40px;
}

.service{
	width: 530px;
	height: 246px;
	border-radius: 5px;
}

.img1{
	background-image: url("img/img1.png");
	background-size: cover;
	background-position: center;
}

.img2{
	background-image: url("img/img2.png");
	background-size: cover;
	background-position: center;
}

.roofing-section{
	padding: 100px 0px;
}

.roofing-calculator{
	text-align: center;
	padding: 0px 300px;
}

.roofing-calculator h2{
	margin-bottom: 10px;
	letter-spacing: 2.5px;
}

.roofing-calculator p{
	margin-bottom: 30px;
}

.list-roofing{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.est{
	width: 248px;
	height: 44px;
	border: 2px solid #E8E8E8;
	border-radius: 1px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
}

.ft{
	width: 40px;
	height: 44px;
	border: 2px solid #E8E8E8;
	text-align: right;
	padding: 10px;
	border-right: none;
}

.material-container{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40px;
}

.pinch{
	width: 387px;
	height: 44px;
	border: 2px solid #E8E8E8;
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.roof-btn{
	width: 246px;
	height: 44px;
	background-color: #C51A2B;
	text-align: center;
	color: white;
	padding: 10px;
}

.roof-section-btn{
	display: flex;
	justify-content: center;
	align-items: center;
}

.company-apart{
	padding: 120px;
	background-color: #E8E8E8;
}

.company-info-pic-container{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.company-info{
	width: 600px;
	height: 689px;
}

.company-pic2{
	width: 550px;
	height: 740px;
	background-image: url("img/companyimg2.png");
	background-size: cover;
	background-position: center;
}

.company-info h2{
	padding: 10px;
	margin-bottom: 20px;
}

.company-info p{
	padding: 10px;

}

.company-info img{
	margin-right: 12px;
	width: 12px;
}

.company-info h4{
	padding: 10px;
	font-size: 20px;
	margin-bottom: 15px;
}

.contact{
	width: 245px;
	height: 44px;
	background-color: #C51A2B;
	margin-left: 10px;
	border-radius: 4px;	
}

.contact p{
	color: white;
	text-align: center;
}

.owner-section{
	padding: 120px;
	background-color: #575759;
	z-index: 1;
	position: relative;
}

.owner-info-container{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.owner-pic{
	width: 550px;
	height: 578px;
	background-image: url("img/owner.png");
	background-size: cover;
	background-position: center;
}

.empty{
	width: 500px;
	height: 500px;
	background-color: #4A4A4A;
	position: relative;
	z-index: -1;
	top: 105px;
	right: -80px;
	border-radius: 4px;

}

.owner-info{
	width: 580px;
	height: 300px;
}

.owner-info h2,h6{
	color: white;
	padding: 10px 60px;
}

.owner-info h6{
	font-size: 15px;
	color: white;
	padding: 10px 60px;
}

.owner-info p{
	font-size: 12px;
	color: white;
	padding: 10px 60px;
}

.review-section{
	padding: 120px;
}

.review{
	background-color: #E8E8E8;
	padding: 20px 30px;
	border-radius: 5px;
}

.review h5, 
.review h6{
	padding: 15px 0px;
	color: black;
	font-size: 20px;
}

.review p,
.review h6{
	font-size: 15px;
}


/* the slides */
  .slick-slide {
      margin: 0 27px;
  }

  /* the parent */
  .slick-list {
      margin: 0 -27px;
  }

.slick-arrow{
	color: white;
	background-color: transparent;
	padding: 5px;
	border: none;
	position: absolute;
	top: 50%;
	border-top: 4px solid #D9D9D9;
	width: 27px;
	height: 27px;
	font-size: 0;
	outline: none;
	cursor: pointer;
	opacity: 70%;
}

.slick-prev{
	left: -60px;
	z-index: 1;
	border-left: 4px solid #D9D9D9;
	transform: translateY(-50%) rotate(-45deg);	
}

.slick-next{
   border-right: 4px solid #D9D9D9;
	right: -60px;
	transform: translateY(-50%) rotate(45deg);

}

.circle{
	width: 58px;
	height: 58px;
	background-color: #D9D9D9;
	border-radius: 50%;
	text-align: center;
	padding: 15px;
}

.circle img{
	width: 30px;
	height: 30px;
}

.review-section h2{
	margin-bottom: 80px;
	text-align: center;
}

.awards-section{
	padding: 60px;
	background-color: #E8E8E8;
}

.awards-section h2{
	margin-bottom: 60px;
	text-align: center;
}

.awards-container{
	display: flex;
	justify-content: space-between;
}

.awards-icon-1{
	width: 115px;
	height: 111px;
}

.awards-icon-2{
	width: 138px;
	height: 77px;
}

.awards-icon-3{
	width: 85px;
	height: 55px;
}

.awards-icon-4{
	width: 106px;
	height: 85px;
}

.awards-icon-5{
	width: 81px;
	height: 71px;
}

.awards-icon-6{
	width: 89px;
	height: 105px;
}

.get-quote-section{
	padding: 30px;
	background-color: #C51A2B;
}

.quote-container{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0px 120px;
}

.quote-para{
	width: 631px;
	height: 99px;
	padding: 20px;
}

.quote-para h4{
	color: white;
}


.quote-para p{
	color: white;
}

.quote-para h4{
	font-size: 30px;
	margin-bottom: 10px;
}

.quote-btn{
	width: 208px;
	height: 61px;
	background-color: white;
	text-align: center;
	padding: 20px;
}

.footer-section{
	padding: 90px;
	background-color: #333333;
}

.footer-link-container{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 85px;
}

.link-1{
	width: 141px;
	height: 185px;
}

.link-2{
	width: 141px;
	height: 80px;
}

.link-3{
	width: 141px;
	height: 178px;
}

.link-4{
	width: 141px;
	height: 70px;
}

.link-5{
	width: 141px;
	height: 185px;
}

.useful h6{
	color: white;
	font-size: 20px;
}

.useful p{
	color: white;
	font-size: 15px;
}

.footer-section p{
	color: white;
	text-align: center;
}