body{
	font-family:Sulphur Point, Arial;
	display:flex;
	flex-direction:column;
}


/*top banner*/
.green{
	background-color:#cccc99;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#schedule{
    color:#cccc99;
	background-color: #666600;
	border: none;
	font-family: Sulphur Point;
    height: 10px;
	font-size:120%;
	text-align: center;
    line-height: 2pt;
	padding: 22px;
    margin-left:1em;
    }

.green p{
	color:#330000;
	font-weight:900;
	text-align:center;
	padding-top: 15px;
    font-size: 140%;
    line-height: 75%;
}




/*nav*/
nav{
	background-color:white;
	border-top: 4px solid #660000;
	font-family:Sulphur Point Semibold, Arial;
	margin:0;
    padding-top: 1%;
    padding-bottom:1%;
}

nav img{
    width: 20%;
    height: 20%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

nav ul{
    border-bottom: 1px solid #330000
}

nav li{
    list-style-type: none;
    font-size: 140%;
    padding:1em;
    text-align: center;
    border-top: 1px solid #330000;

}

nav a{
	text-transform:uppercase;
	color: #660000;
	font-weight:700;
	text-decoration:none;
}


/*Hero*/
#pikbg{
    
    margin-top: none;
    //height: 40em;
	background-image:url(../images/Vineyard_Wine_Bottle_Image.jpg);
	background-repeat:no-repeat;
    /*background-size: 1180px 1162px:*/
	background-size:cover;
    min-height:300px;
    max-height: 5000px;
    
    padding:10%;
    
}

#pikbg #shopbtn{
		color:#cccc99;
		background-color: #660000;
		border: none;
		font-family: Sulphur Point;
		font-size:1em;
		text-align: center;
		padding: 6px 22px;
}

#pikbg h1{
	text-transform:uppercase;
	color:white;
    font-size: 300%;
    line-height: 1%;
}

#pikbg p{
	color:white;
	font-size: 150%;
    font-weight: bold;
    padding-right: 42%;
}


/*Maroon bkg #1*/
.maroon{
	border-top: .5em solid white;
    background-color:#330000;
    padding-top: 2%;
    padding-bottom: 2%;
}

.row{
    margin-right: 2%;
    margin-left: 2%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.column{
    text-align: center;
    width: 100%;
}

.maroon h1{
	text-transform:uppercase;
    font-size: 150%;
	color:white;
}

.maroon strong{
	/*text-transform:uppercase;*/
	color:#ffffcc;
	font-weight:lighter;
    font-size: 120%;

}

.maroon h2{
    text-transform:uppercase;
	color:#ffffcc;
	font-weight:normal;
    font-size: 140%;
    text-align: center;
}

.maroon p{
	color:white;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
}

#signature{
    text-align: right;
    padding-right: 10%;
    font-family: Sacramento;
    font-size: 140%;
    line-height: 1%;
}


/*Stats*/
#stats{
	background-color:white;
	text-align:center;
}

#stats .row{
    margin-right: 10%;
    margin-left: 10%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
}

#stats .column{
    width:50%;
    margin: auto;
}

#stats h1{
	color: #660000;
	font-size: 500%;
    line-height: 0%;
    margin-bottom: 25%;
    
}

#stats h2{
    color: #660000;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 92%;
    
}

#stats hr{
    line-height: 0%;
    margin-bottom: -10%;
    //width:50%;
    //margin-top:-30%;
}


/*Family Owned*/
#family{
    background-color:#ffffcc;
    text-align: center;
    display: grid;
    grid-template-columns: 3;
    grid-template-rows: 3;
    grid-template-areas: 
        "famText famText famText"
        "pic1 pic1 pic1"
        "pic2 pic3 pic4";
    grid-gap: 1%;
    padding-top: 5%;
    padding-left: 10%;
    padding-right: 8%;
    padding-bottom: 5%;
    justify-items: center;
    
}

#family h1{
    color: #660000;
    text-transform: uppercase;
    font-size: 300%;
    line-height: 0%;
}

#family h2{
    color: #666600;
    font-size: 145%;
    line-height: 25%
}

#picOfVineyard, #picOfGrapes, #picOfBarrels, #picOfLandscape{
    height:100%;
    width: 100%;
}

#picOfVineyard{
    grid-area: pic1;
}

#picOfGrapes{
    grid-area: pic2;
}

#picOfBarrels{
    grid-area: pic3;
}

#picOfLandscape{
    grid-area: pic4;
}

#familytext{
    grid-area: famText;
}


/*Spend an Afternoon*/
#planBtn{
    color:#cccc99;
	background-color: #666600;
	border: none;
	font-family: Sulphur Point;
    height: 10px;
	font-size:120%;
	text-align: center;
    line-height: 2pt;
	//padding: 22px;
    padding-top: 22px;
    padding-bottom: 22px;
    margin-left:1em;
    margin-right: 8em;
    }

.green h2{
    text-transform: uppercase;
    font-weight: 400;
    font-size: 155%;
    color: #660000;
    padding-left: 5em;
    text-align: center;
    line-height: 1%;
    padding-top: 1em;
}

.green h1{
    text-transform: uppercase;
    font-size: 190%;
    color: #330000;
    padding-left: 5em;
    text-align: center;
    line-height: 90%;
}



/*Wine types*/
#wineTypes{
	background-color:white;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 1%;
}

#wineTypes h2{
    color: #666600;
    text-align: center;
    font-weight: 400;
    font-size: 150%;
    line-height: 30%;
}

#wineTypes h1{
    color: #660000;
    text-align: center;
    text-transform: uppercase;
    font-size: 280%;
    line-height: 30%;
}

#wineTypes p{
    color: #330000;
    text-align: justify;
    padding-left: 5%;
    padding-right: 5%;
}

#wineSection{
    display: grid;
    grid-template-columns: repeat(5,20%);
    grid-gap: 2%;
    text-align: center;
    justify-content: center;
}

#wineTypes figure{
    justify-content: center;
    margin: 0;
}

#wineTypes figcaption{
    text-transform: uppercase;
    color: #660000;
    font-weight: lighter;
    font-size: 80%;
}

#wineSection img{
    border: 4px solid #660000;
    align-content: center;
}


/*The Kirum Restaurant*/
#restaurant{
    height: 15em;
	background-image:url(../images/COT-Wine-and-Food-landscape.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

#restaurant h1{
    text-transform: uppercase;
    font-size: 300%;
    color: white;
    padding-left: 10%;
    padding-top: 4%;
    line-height: 80%;
}

#reservebtn{
    color: #660000;
    background-color: #ffffcc;
    font-family: Sulphur Point;
    margin-left: 10%;
    border: none;
    padding: 1%;
    font-size: 120%;
}



/*Recipes*/
#recipes{
	background-color:white;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 2%;
    display: grid;
    grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
    grid-template-rows: 4;
    grid-template-areas:
        "titlearea titlearea titlearea titlearea titlearea titlearea titlearea titlearea"
        "infoarea infoarea infoarea infoarea infoarea infoarea infoarea infoarea"
        "pic1area pic1area pic2area pic2area pic3area pic3area pic4area pic4area"
        "blank blank symb1area symb2area symb3area symb4area blank2 blank2"; 
}

#recipeTitle{
    grid-area: titlearea;
}

#recipeText{
    grid-area: infoarea;
}

#recipePic1{
    grid-area: pic1area;
}

#recipePic2{
    grid-area: pic2area;
}

#recipePic3{
    grid-area: pic3area;
}

#recipePic4{
    grid-area: pic4area;
}


#empty1{
    grid-area: blank;
}

#recipeSyb1{
    grid-area: symb1area;
}

#recipeSyb2{
    grid-area: symb2area;
    margin-left: auto;
    margin-right: auto;
}

#recipeSyb3{
    grid-area: symb3area;
    margin-left: auto;
    margin-right: auto;
}

#recipeSyb4{
    grid-area: symb4area;
    margin-left: auto;
    margin-right: auto;
}

#empty2{
    grid-area: blank2;
}

#recipes h2{
    font-size: 200%;
    color: #660000;
    line-height: 65%;
}

#recipes p{
    text-align: justify;
    color:#330000;
    padding-right: 5%;
}

#recipeSyb1 img, #recipeSyb2 img, #recipeSyb3 img, #recipeSyb4 img{
    background-color:#666600;
}

#recipes figure{
    text-align: center;
    align-items: center;
    justify-items: center;
    margin: 0;
}

#recipes figcaption{
    color: #666600;
    text-align: center;
    font-size: 120%;
    line-height: 85%;
}



/*Our Info section*/
#ourInfo{
	background-color:#330000;
    padding-left: 3%;
    padding-right: 3%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

#ourInfo h1{
    color: white;
    text-transform: uppercase;
    font-size: 250%;
    font-weight: bold;
    text-align: center;
    line-height: 10%;
}

#ourInfo p{
    color:#ffffcc;
    text-align: center;
    text-transform: uppercase;
    font-size: 120%;
    font-weight: lighter;
    margin-left: 10%;
    margin-right: 10%;
}

#directions{
    //padding-left: 15%;
    //padding-right: 15%;
}



/*Footer*/
footer{
	background-color:#660000;
    border-top: 10px solid #ffffcc;
    font-family: Sacramento;
    font-size: 175%;
    font-weight: lighter;
    color: #ffffcc;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    grid-column-gap: 3%;
    
}

@media (min-width: 600px){
    
    nav{ 
        padding-left: 10%;
        display: grid;
        grid-template-columns: 1fr 5fr;
        align-items: center;
    }
    
    nav img{
        width: 90%;
        height: 90%;
    }
    
    nav ul{
        display: inline;
        border-bottom: none;
    }
      
    nav li{
        display: inline;
        border-top: none;
        font-size: 110%;
        padding: 0;
    }
    
    nav a{
        padding: 2%;
    }
    
    #pikbg p{
        padding-right: 35%;
    }

    
    .row{
        margin-right: 2%;
        margin-left: 2%;
	}
    
    .maroon p{
        margin-left: 0;
        margin-right: 0;
    }
    
    #wineTypes p{
        padding-left: 18%;
        padding-right: 18%;
    }
    
    #planBtn{
        margin-right: 5em;
    }

    .green h2{
        padding-left: 3em;
    }

    .green h1{
        padding-left:3em;
    }
    
    #recipes{
	background-color:white;
    padding-left: 10%;
    padding-right: 10%;
    display: grid;
    grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
    grid-template-rows: 4;
    grid-template-areas:
        "titlearea titlearea titlearea titlearea titlearea titlearea"
        "infoarea infoarea infoarea infoarea pic1area pic1area"
        "pic2area pic2area pic3area pic3area pic4area pic4area"
        "blank symb1area symb2area symb3area symb4area blank2"; 
    }    

}

@media (min-width: 1024px){

    body{
	   background-color:lightgray;
	   max-width:70%;
	   margin-right:auto;
	   margin-left:auto;
    }
    
    .green p{
        font-size:120%;
    }
    
    #pikbg p{
        padding-right: 52%;
}
    
    .row{
        margin-right: 10%;
        margin-left: 10%;
	}
    
    #family{
        background-color:#ffffcc;
        text-align: left;
        display: grid;
        grid-template-columns: repeat(7,13%);
        grid-template-rows: 2;
        grid-template-areas: 
            "pic1 pic1 pic1 famText famText famText famText"
            "pic2 pic3 pic4 famText famText famText famText";
        grid-gap: 2%;
        //padding-bottom: 1%;
        justify-items: auto;
        overflow: hidden
    }

    #family h1{
        color: #660000;
        text-transform: uppercase;
        font-size: 300%;
    }

    #family h2{
        color: #666600;
        font-size: 145%;
    }
    
    #picOfVineyard, #picOfGrapes, #picOfBarrels, #picOfLandscape{
        height:100%;
        width: 100%;
    }

    #picOfVineyard{
        width: 100.5%;  
    }

    #planBtn{
        margin-right: 10em;
    }

    .green h2{
        padding-left: 8em;
    }

    .green h1{
        padding-left:8em;
    }
    
    #recipes figure{
        width: 100%;
        height:100%;
    }
    
    #recipes{
        padding-bottom: 8%;
    }
    
    #ourInfo{
        padding-left: 8%;
        padding-right: 8%;
    }
    
    /*#ourInfo p{
        margin-left: 12%;
        margin-right: 1%;
    }*/
    
    #directions{
        padding-left: 15%;
        padding-right: 15%;
    }

}