/*
Theme Name: gktheme
Author: Bryn Davies
Author URI: https://growingkennet.co.uk
Description: Theme Styles for GK Design.
Version: 0.1
*/

/*
vintage red = #de4c35

*/

body {
	margin:0;
	padding:0;
	background-color:#ffffff;
	color:#36372a;
	font-family: "Lato", serif;
  font-weight: 400;
  font-style: normal;
	font-size:16px;
	background-image:url('img/agedbg.jpg');
}

.col40 {width:40%; float:left; display: block;}
.col50 {width:50%; float:left; }
.col60 {width:60%; float:left; display: block;}

.gridholder {display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
	align-items: center;
  justify-items: center;}

.griditem {}

.workgrid {display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
	align-items: center;
  justify-items: center;
margin-top:40px;
margin-bottom:30px;}

.workitem {position:relative;}
.workitem img {width:100%; height:auto; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius:5px;}
.wktitle {display:none;position:absolute; bottom:5px; left:5px;z-index:5;color:#ab3727;padding:10px 5px; background-color:rgba(255,255,255,0.8);width:96%; font-family: Lobster; font-size: 1.3em;}
.workitem a {color:#36372a; text-decoration:none;}

.worklink {color:#36372a; text-decoration:none;padding-bottom:30px;}
.worklink:hover {color:#f1d19e; text-decoration:none;}

.usgrid {display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
	align-items: center;
  justify-items: center;
margin-top:40px;
margin-bottom:30px;}

.usitem {position:relative;float:left; width:33%;text-align:center;}
.usitem img {width:100%; height:auto;}
.ustitle {font-weight:900;font-size:20px;}

h1,h2,h3,h4 { font-family: "Lobster", serif; font-weight: 400; font-style: normal;}

h1 {font-size:3em; margin-top:0px; margin-bottom:0px;}
h2 {font-size:1.8em; margin-top:0px; margin-bottom:0px;}
h3 {font-size:1.4em; margin-top:0px; margin-bottom:0px;}

P {font-size:18px; line-height:24px;}

#header {width:100%; height:auto; background-image:url('img/header-bgupd.png'); background-size:100% 100px;margin-top:50px;}
#header .content {max-width:1330px; height:100px; padding:0px; margin:0 auto;position:relative;margin:0 auto;}
.logo {position:absolute; top:-50px; left:10px; width:350px;z-index:10;}
.logo img {width:100%;}

.menu-main-menu-container {width:auto;position: absolute; right: 20px; top: 20px;}
.menu-main-menu-container ul { list-style: none;}
.menu-main-menu-container ul li { display: inline; margin-left:15px; margin-right:15px;}
.menu-main-menu-container ul li a {text-decoration:none; color:#36372a; font-family: "Lobster", serif; font-weight: 400; font-size:2em;}
.menu-main-menu-container ul li a:hover {color:#8b2313;}

#hero {max-width:1240px; height:auto; position: relative; margin:0 auto;margin-top:80px;padding-left:20px;padding-right:20px;padding-bottom:50px;}
.heroimageholder {width:100%; height:auto;}
.heroimageholder img {width:100%;border-radius:15px;}

.bloodred {color:#ab3727;}
.darkgrey {color:#36372a;}
.oldcream {color:#f1d19e;}

.vintageredbg {background-image:url('img/redbg.jpg');}

section {width:100%; position:relative; /*background-image:url('img/redbg.jpg');*/}
.content {max-width:1240px; padding: 20px; height:auto; margin:0 auto;}

.hometitle {position:absolute; right:30px; top:-63px;font-size:2em;color:#ab3727;font-family: "Lobster", serif; font-weight: 400; font-style: normal;}

#footer {}
#footer .content {padding-top:25px; padding-bottom:20px;text-align:center;}
#footer .content p {text-align:center;}
.footertitle {font-weight:900;margin-top:0px;text-transform:uppercase;margin-bottom:0px;}
.footerlinks {font-size:14px;margin-top:5px;}
.footerlinks a {color:#36372a; text-decoration:none; font-weight:700;}
/* Media Queries */

@media only screen and (max-width: 1140px) {

}


@media only screen and (max-width: 1024px) {

}


@media only screen and (max-width: 768px) {

}


@media only screen and (max-width: 560px) {

}


@media only screen and (max-width: 450px) {

}


@media only screen and (max-width: 350px) {

}