@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');

body, html, ul {
	margin: 0;
	padding: 0 0 0 0;
	font-family: 'Montserrat';
}

body {
	max-width: 1280px;
	margin: auto;

}


a {text-decoration: none;

}

header {
	height: 100px;
	font-size: 30px;
	text-align: right;
	color:#b8905c;
	background-color: white;
	padding: 10px 10px;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

}


nav {
	box-sizing: border-box;
	z-index: 99;  /* keep nav bar on top of demo images during transition */
	background-color: rgb(184, 144, 92, 0.9);
	position: sticky;
	position: -webkit-sticky;
	top: 0px;
}

ul {
	list-style: none;
	overflow: hidden;

}

nav li {
	float: left; /* make nav horizontal */
	width: 20%;  /* 100% : #links */
}

nav a {
	display: block;
	text-align: center;
	padding: 10px 0px;
	text-decoration: none;
	color: white;
	font-size: 16px;
}

li a:hover {
	background-color: white;
	color: #5c84b8;
	transition: 0.6s;
}

footer {
	clear: both; /* clear float from previous sections, next element below the float */
	padding: 1.5rem 10% .5rem;
	box-sizing: border-box;
	background-color: #5c84b8;
	font-size: 14px;
	color: white;

}


h1 {font-size: 80px;

}

h2 {font-size: 26px;
}

h3 {font-size: 16px;
}

h4 {font-size: 16px;
	color: #b8905c ;
}

h5 {font-size: 12px;
}

p {font-size: 16px;
}


#welcome {
	background-image: url("images/naturns-it-1280.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 410px;
	padding: 25px 10px;
	text-align: center;
	color: #5c84b8;
	font-size:  80px;
}

#about {
	float: left;
	background-color: rgb(184, 144, 92, 0.2);
	width: 100%;
	text-align: center;
}

#services {
	display: table;
	width: 100%;
	padding: 50px 0px;
}

#reviews {
	text-align: center;
	margin: 10px 0 80px 0;
}

#brands {
	clear: both; /* clear float from previous sections */
	text-align: center;
	margin: 10px 0 40px 0;
	display: flex; /* to have all brands in 1 line even if this results in content escaping its box */
   overflow: hidden; /* to hide images that fall outside the container  */
}


#shopinfo {
	float: left;
	width: 50%;
	padding: 50px 0px;
	box-sizing: border-box;
	text-align: center;
}

#facebook {
	padding: 50px 0px;
	background-color: white;
	float: left;
	box-sizing: border-box;
	width: 100%;
	text-align: center;
}

#imggallery {
	clear: both; /* clear float from previous sections */
	padding: 50px 0px;
	text-align: center;
	height: auto;
	margin: 0px 5%;
	box-sizing: border-box;
}


.titlebar {
	float: left;
	width: 100%;
	background-color: #b8905c;
	font-size: 16px;
	color: white;
	text-align: center;
	box-sizing: border-box;
}


.colum1-3 {
	background-color: #5c84b8;
	float: left;
	width: 23%;
	height: auto;
	color: white;
	text-align: center;
	padding: 2% 0%; /* padding is transparant by default */
	margin: 40px 5%;
}

.colum2-3 {
	background-color: #b8905c;
	float: left;
	width: 23%;
	height: auto;
	color: white;
	text-align: center;
	padding: 2% 0%; /* padding is transparant by default */
	margin: 40px 5%;
}

.colum1-3rev {
	float: left;
	width: 23%;
	height: auto;
	color: #5c84b8;
	text-align: center;
	padding: 2% 0%; /* padding is transparant by default */
	margin: 40px 5%;
}

.review_img {
	width: 100%;
   height: auto;
   border-radius: 15px 50px
}

.colum1-2 {
	float: left;
	width: 48%;
	height: auto;
	color: white;
	text-align: center;
	padding: 2% 0%; /* padding is transparant by default */
	margin:  1%;
}

.colum2-2 {
	float: left;
	width: 48%;
	height: auto;
	color: #5c84b8;
	text-align: left;
	padding: 2% 0%; /* padding is transparant by default */
	margin:  1%;
}

table, td, th {
	border-bottom: 1px solid #b8905c;
	border-collapse: collapse;
}


.google_map {
	width: 90%;
	height: 300px;
	border:  0;
}

.businesshours_table {
	float: left;
	color: #5c84b8;
	width: 40%;
	margin: 5%;
}

.brandlogos {
	padding: 1%;
	width: 14%; /* 5x 18% = 90% + 5x 1%+1% padding = 100% */
	height: 100%;
	flex-shrink: 0;  /* firefox: prevents automatic smaller images to fit the viewport */
	animation: slideshow 24s linear infinite;
}


@keyframes slideshow {
   0% {
      transform: translate(0,0);
    }
   100% {
      transform: translate(-1300%,0);
    }
 }


.service_icons {
	width: 30%;
   height: auto;
}

.owner_img {
	width: 75%;
   height: auto;
   margin:  16px 0 0 0;
}

.footer-legal-text {
	margin: 2.5rem 0 0;
	font-size: 12px;
	text-align: center;
}

@media (max-width: 768px){
	#welcome {
		height: 320px;
		font-size:  60px;
	}

	.colum1-3, .colum2-3 {
		width: 80%;
		padding: 2%; /* padding is transparant by default */
		margin: 8%;
	}

	.review_img {
   	border-radius: 8px 22px
	}

  .brandlogos {
   padding: 2%;
	 width: 34%; /* 5x 18% = 90% + 5x 1%+1% padding = 100% */
   }



	#shopinfo {
	width: 100%;
	padding: 2%;
	box-sizing: border-box;
	}

	.businesshours_table {
	width: 90%; /* margin is 5% */
	}

	.colum1-2, .colum2-2 {
	width: 94%;
	height: auto;
	text-align: center;
	padding: 2% 2%; /* padding is transparant by default */
	margin: 1%;
	}

}