


* 
{   margin: 		0px;
	padding: 		0px;
	border: 		0px;
}
body {
	background-color: 	#E0E0E0;
	color: 				#67727A;
	margin:				0;
	font-family: Helvetica, Sans-Serif;

}

h2 {
	padding-top:		2%;
	font-size: 			250%;
    font-weight:	 	700;
    text-align: 		center;
	color: 				#f5f5f5;
}


h3 {
	padding-top: 		10px;
	font-size:			115%;
    font-weight: 		bold;
    text-align: 		center;
    color: 				#ffedb3;
}
p { 
   font-family: Helvetica, Sans-Serif;
   color: 				white;
   font-size: 			105%;
   padding: 			2%;
   text-align: left;
   
}

.stars img {
	width: 100px;
	height: 18px;
	
	margin-left: 10px;
	margin-bottom: -5px;

	
}
.read-more img {
	width: 				100px;
	height: 			20px;
	float:				 right;
	margin-right: 		10px;
	z-index: 			149;
	
}

#read-hover img:hover {

	box-shadow: 3px 3px 8px gold;
	
}

img{
	height: 			auto;
	width: 				100%;
	margin-bottom: 		-4px;
	margin-top:			-5px;
}



header {
	background: 		url(img/concrete.jpg);
	width: 				100%;
	height:				85px;
	margin-top: 		28px;
	border-bottom: 		1px solid black;
	position: 			fixed;
	z-index: 			101;
}
.number {
	width: 				100%;
    height: 			25px;
    background-color:	grey;
    color: 				white;
    position: 			fixed;
    margin-top: 		0px;
    z-index: 			101;
    box-shadow: 		5px 5px 10px black;
}


#header-inner {

	width: 				100%;
	margin: 			0 auto;
}
#logo {

	margin: 			-3px 0px 0px 10px;
	float: 				left;
	width: 				250px;
	height: 			120px;
	background: 		url(img/cnaConcrete.png) no-repeat center;
	border-radius:      10px;	
	

}
#logo:hover {
	margin: 			-3px 0px 0px 10px;
	float: 				left;
	width: 				250px;
	height: 			120px;
	background: 		url(img/cnaConcretehover.png) no-repeat center;
}

								/*---Start Navigation--*/

#navmenu {
	z-index: 10000;
	position: fixed;
	top: 113px;
	left: 400px;
	width: 100%;


}






#navbar ul{
	margin: 0px;
	padding: 0px;
	list-style: none;
	width: 100%;
	
}
#navbar ul li {
	font-family: 		'Alegreya Sans', Sans-serif;
	float: left;
	text-align: center;
	background-color: white;
	margin-top: 0px;
	border-style: solid black 2px;
	opacity: .8;
	box-shadow: 2px 2px 5px black;
	width: 200px;
	height: 30px;
	line-height: 30px;
	font-size: 15px;
	font-weight: bold;


}
#navbar ul li a {
	text-decoration: none;
	color: black;
	display: block;
}
#navbar ul li a:hover {
	background-color: #37afd4;
	height: 30px;
}
#navbar ul li ul li {
	display: none;
}
#navbar ul li:hover ul li {
	
	display: block;

}
#navbar ul .selected {
	background-color: 		#37afd4;
	opacity: 				.8;
	height: 				30px;
}

									/*---End Navigation*/


/*--Social Navigation--*/

nav ul li {
	font-family: 		'Alefreya', Sans-serif;
	font-size: 			70%;
	display: 			inline-block;
	float: 				left;
	padding: 			5px 10px 0px 10px;
	
	
}

nav ul li a {
	color: 				black;
	text-decoration: 	none;
	
}
nav ul li a:hover {
	color: 				#C3D7DF;
}
.current {
	color: 				black;
}
nav {
	float: 				right;
	padding: 			15px 20px 0 0;
}


/*--End Social Navigation--*/



.banner {
	width: 				100%;
	padding-top: 		96px;
}

.banner-inner {
	width: 				100%;
	float: 				left;
	margin:				0px;
	position: 			relative;
}


.gallery {
	
	width: 				15%;
	float: 				left;
	text-align: 		center;
	position: 			relative;
	margin-top: 1%;
	margin-right: 0.5%;

}
.gallery2 {

	width: 			18%;
	float: 			left;
	text-align: 	center;
	position: 	    relative;
	margin-top: 	1%;
	margin-right:   1%;

}

.gran2 {
	position: 			absolute;
	top:				50%;
	left: 				50%;
	transform: 			translate(-50%,-50%);
	font-weight: 		700;
	padding: 			0px 0px 0px 0px;
	border-radius: 		5px;
	border:				0px solid gold;
	box-shadow: 		5px 5px 5px black;
	opacity: 			.9;
	width: 				170px;
	
}




.gran2 p {
	color: 				white;
	text-align: 		center;
	padding: 			0px;
}	



.gran2:hover {
    color: 				red;
	opacity: 			1;
}
.vendsh {
	box-shadow: 		5px 5px 15px black;
	border: 			1px solid white;
	border-radius:      7px;

}

.vendshsink {
	filter: drop-shadow(5px 5px grey);
	

}

.vendsh:hover {
	border: 1px solid gold;
	opacity: .3;
	color: red;

}
.vendsh:hover p {
	color: red;
}

.inner-wrapper-3 {
	float: 				left;
	width: 				100%;
	background-color: 	#E0E0E0;
	margin-top: 15px;
}
.one-third {
	
	box-shadow: 		5px 5px 15px black;
	float: left;
	text-align: 		center;
	margin-left: 500px;
	margin-top:  30px;
	border-radius: 5px;
}

.textbox {
	
	box-shadow: 		5px 5px 15px black;
	margin-top:          20px;
	width: 				60%;
	margin-left: 		20%;
	float: 				left;
	margin-bottom: 		10px;
	background-color: 	grey;
	border-radius: 		5px;
}
.testimonial {
	
	box-shadow: 		5px 5px 15px black;
	margin-top:          20px;
	width: 				60%;
	margin-left: 		20%;
	float: 				left;
	margin-bottom: 		10px;
	background: 		url(img/concrete.jpg);
	border-radius: 		5px;
	border: 			1px solid gold;
}


}
#google {
	background-color: 	black;
	opacity: .8;
	border: 1px gold solid;
	border-radius: 0px 0px 5px 5px;
	height: 200px;
}


#smiley {
	background-color: 	#E0E0E0;
	padding: 			0 0 1%;
	clear: 				both;

}
#smiley h2 {
	color: 				grey;
}

/*--Start Footer--*/

footer {
	background-color: 	black;
	width: 				100%;
	font-size: 			10px;
}
.social {
	list-style-type: 	none;
	text-align: 		center;
	background: 		url(img/concrete.jpg);
}
.social li {
	display: 			inline;
}
.social i {
	font-size: 			460%;
	margin:				1%;
	padding: 			5%;
	color: 				white;
}
.social i:hover {
	color: 				#37afd4;
}

footer.second p {
	padding: 			5px 0 9px 0;
	text-align: 		center;
}

.lobster-stay {
	font-family: 		'Lobster', cursive;
	color: 				white;
	font-size: 			3em;
	text-align: 		center;
	text-shadow: 		2px 2px 5px black;
	margin-bottom: 		20px;
}
 .fly-in-text {
                list-style: none;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
            .fly-in-text li {
                display: inline-block;
                margin-right: 10px;
                font-family: 'Lobster', cursive;
                font-weight: 300;
                font-size: 12em;
                color: #fff;
                opacity: .5;
                text-shadow: 2px 2px 2px black;
                transition: all 2.5s ease;
            }
            .fly-in-text li:last-child {
                margin-right: 0;
            }
            .fly-in-text.hidden li {
                opacity: 0;
            }
            .fly-in-text.hidden li:nth-child(1) { transform: translateX(-200px) translateY(-200px); }
            .fly-in-text.hidden li:nth-child(2) { transform: translateX(20px) translateY(100px); }
            .fly-in-text.hidden li:nth-child(3) { transform: translateX(-150px) translateY(-80px); }
            .fly-in-text.hidden li:nth-child(4) { transform: translateX(10px) translateY(-200px); }
            .fly-in-text.hidden li:nth-child(5) { transform: translateX(-300px) translateY(200px); }
            .fly-in-text.hidden li:nth-child(6) { transform: translateX(20px) translateY(-20px); }
            .fly-in-text.hidden li:nth-child(7) { transform: translateX(30px) translateY(200px); }
 

 .container {

 	margin-left: 17%;
	margin-top: 1050px;	
 }

 .container2 {

width: 				100%;
height: 			100vh;
background: 		grey;
display: 			flex;
align-items: 		center;
justify-content: 	center;

 }

form{
background: white;
display: flex;
flex-direction: column;
padding: 2vw 4vw;
width: 90%;
max-width: 600px;
border-radius: 10px;
box-shadow: 5px 5px 10px black;
}

form h3{
	
	font-weight: 800;
	margin-bottom: 20px;
}
form input, form textarea{
border: 0;
margin: 10px 0;
padding: 5px;
outline: none;
background: #DED6D4;
font-size: 14px;

}
form button{
	padding: 15px;
	background-color: black;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	width: 150px;
	margin: 20px auto;
	border-radius: 20px;
	border: 1px solid gold
	
}
form button:hover {
	box-shadow: 5px 5px 10px gold;

}




.column{

	display: flex;
	width: 100%;
	height: auto;
	text-align: center;
	
}
.col {
	width: 40%;
	margin-top: 5px;
	
}

.coltext {
	width: 40%;
	height: auto;
	background-color: black;
	margin-top: px;

}

.textbox ul{
	color: white;
	margin-left: 5%;
	
}



#pricelist li:hover {
	background-color:	 	#D4AF37;
	opacity: 				1;
}



 #pagecount {

  	position: sticky;
  	top: 145px;
  	z-index: 1;
	text-align: 		center;
	margin-left: 		10px;
	margin-bottom: 		20px;
	margin-top: 		0px;
	
}

 #pagecount ul {
  	list-style: 		none;
 	padding: 			0;
 	
 }
 #pagecount li{
 	display: 			inline-block;
 	background-color: 	white;
 	padding: 			3px 5px;
 	border-style: 		solid;
 	border-radius: 		0px 0px 5px 5px;
 	opacity: 			1;
 	box-shadow: 		2px 2px 5px black;
 	color: 				black;
 	font-weight: 		bold;
 }
#pagecount li:hover {
	background-color:	 	#C3D7DF;
	opacity: 				1;
}

#pagecount ul .selected {
	background-color: 		#C3D7DF;
	opacity: 				1;
	height: 				25px;
}

 #pagecount a {
 	font-family: 			'Alegreya Sans', Sans-serif;
 	text-decoration: 		 none;
 	font-weight:			 bold;
	color: 					 black;
	font-size: 				 15px;
	text-align: 			 center;
 	
 }



#marketing
{

	width: 43%;
	height: 43%;
	margin-top: 20px;
	margin-left: 28.5%;
	float: left;
	box-shadow:  5px 5px 15px black;
	border-radius: 5px;
	

}



 #pagecount2 {

  	
	text-align: 		center;
	margin-left: 		10px;
	margin-bottom: 		20px;
	margin-top: 		10px;
	float: 				left;
	margin-left: 		43%;
}

 #pagecount2 ul {
  	list-style: 		none;
 	padding: 			0;
 	
 }
 #pagecount2 li{
 	display: 			inline-block;
 	background-color: 	white;
 	padding: 			3px 5px;
 	border-style: 		solid;
 	border-radius: 		0px 0px 5px 5px;
 	opacity: 			.7;
 	box-shadow: 		2px 2px 5px black;
 	color: 				black;
 	font-weight: 		bold;
 }
#pagecount2 li:hover {
	background-color:	 	#37afd4;
	opacity: 				.7;
}

#pagecount2 ul .selected {
	background-color: 		#37afd4;
	opacity: 				.7;
	height: 				25px;
}

 #pagecount2 a {
 	font-family: 			'Alegreya Sans', Sans-serif;
 	text-decoration: 		 none;
 	font-weight:			 bold;
	color: 					 black;
	font-size: 				 15px;
	text-align: 			 center;
 	
 }


.galaimg {
 	width:100%;
 	float: right;
}
 .galaimg1 {
 	width:50%;
 	float: left;
 	margin-bottom: 15px;	
}
 .galaimg2 {
 	width:	50%;
 	float: right;
 	margin-bottom: 15px;

 }
 .galaimg3 {
 	width:	100%;
 	
 	height:60px;

 }

 #feedback {
 	position: fixed;
 	top: 200px;
 	left: 0px;
 	z-index: 3;
 	width: 10px;
 	height: 40px;
 }


 #gr-explenation {

 	position: relative;
 	border: 1px solid gold;
 	border-radius: 5px;
 	background: 		url(img/concrete.jpg);
 	margin-top: 550px;
 	width: 40%;
 	align-content: center;
 	margin-left: 30%;
 	box-shadow: 5px 5px 15px black;
 }
#gr-explenation-2 {

 	position: relative;
 	border: 1px solid gold;
 	border-radius: 5px;
 	background: 		url(img/concrete.jpg);
 	margin-top: 100px;
 	width: 40%;
 	align-content: center;
 	margin-left: 30%;
 	box-shadow: 5px 5px 15px black;
 }



 #grid {
 	margin-left: 5%;
 }



.gallery .gran2 {
  transform: scale(2);
  opacity: .0;
  transition: .5s;
}
.gallery:hover .gran2 {
  opacity: 1;
  transform: scale(1);
  margin-left: -80px;
  margin-top: -20px;
  font-weight: 600;
}

.gallery p {
	color: black;
	font-size: 25px;
	font-weight: bold;
}
.gallery p2 {
	color: white;
	font-size: 25px;
}

