*{box-sizing: border-box}
body {margin:0 0}
.announcement{
	background-color:#cccc99;
	border-bottom: 5px solid #660000;
    display:flex;
    justify-content: center;
    width:100%;
    padding-bottom: 0px;
    padding-top:0px;
    
    
    
	}

.tops p {color:#330000;
        font-size: 26px;
        font-weight: bold;
        font-family:"sulphur point";
        margin-left:100px;
        margin-top:10px;
            }
.button1 {
    padding:10px 20px;
    margin-top:10px;
    height:auto;
    margin-left:20px;
    background-color:olive;
    display:inline-block;
    font-family:"sulphur point";
    color:#cccc99;
    text-align:center;
    font-weight: bold;
    font-size: 22px;}
            

nav{color:#660000;
    height:150px;
    width:100%;
    max-width:1200px;
    margin:0 auto;
}
.container{width:80vw;
    height:auto;
    display:flex;
    justify-content:space-between;
    align-content:space-between;
    align-items: center;
    margin-left:100px;
    padding-left:0;}

.down {display: flex;
        gap:2rem;
    padding-left:30px;
    margin-top:45px}

.down li {list-style: none}



#logo {margin-left:0;
    padding-left:0;
    padding-right:30px}


.down a{  text-decoration: none;
        color:#660000;
        font-size: 1.1em;
        font-weight: bold;
        font-family:"sulphur point";
        margin-top:20px;}


header { 
	   background-image: url(vineyard_wine.jpg);
        background-repeat:no-repeat;
        background-size: cover;
        color:#FFFFFF;
        max-width:100vw;
        height:800px
}
.head {display:flex;
        flex-direction: column;
        height:800px;
        width:500px;
        margin-left:100px;
        justify-content: center;
        width:450px
        max-width:100vw;}

.head h2{margin-top:60px;
    font-size:2em;
    font-family:"sulphur point"}

.button2 {background-color:maroon;
        padding:15px 30px;
        text-align:center;
        display:inline-block;
        font-size:16px;
        font-family:"sulphur point";
        color:#cccc99;
}

.head h1 {font-size:40px;
    font-family:"sulphur point"}

.basis p{font-family:"sulphur point";
        font-size:24px;
        flex-basis:150px}


#columns{background-color:#330000;
        max-width:100vw;
        height:auto;
        margin-top:5px;
        margin-right:0;
        margin-left:0;
        padding-bottom:10px;
        display:flex;
        justify-content: center;
        align-content: center}

#columns section{padding-top:10px;
        flex-basis:400px;
        font-family:"sulphur point";
        padding-right:25px;
        padding-left:25px
        }

#columns section p {margin-right:70px;
            margin-left:60px;}

#columns section img {display: block;
  margin-left: auto;
  margin-right: auto;}

#columns h3{color:#cccc99;
    font-size:2em;
    text-align:center}

#columns section p {color:#FFFFFF;
            font-size:1.2em;
            text-align:center}

.maroon{display:block;
        display:flex;
        background-color:#330000;
        width:100%;
    margin-top:0;
    width:100%;
    height:80px;
    align-content: center;
    justify-content: center;}

.maroon q{ font-family:"sulphur point";
        font-size:1.5em;
        text-transform: capitalize;
        color:#ffffcc;
        padding-right:20px;
        }

.cursive {font-family: "sacramento";
padding-right:40px;
 color:#ffffcc;
font-size:20px}

#stats {
    background-color:white;
        margin-right:auto;
        margin-left:auto;
        height:300px;
        width:100%;
        display:flex;
        justify-content: space-around;
        }
#stats section {padding-top:10px;
        font-family:"sulphur point";
        flex-basis:200px;
        
        }
#stats section h2 {color:maroon;
            font-size:52px;
            margin-right:3px;
            margin-left:3px;
            text-align:center;
            border-bottom:2px solid black}

#stats section h3 {font-size:32px;
                color:maroon;
                text-align:center}

#about {background-color:#ffffcc;
    height:auto;
    padding-left:0;
    margin-left: 0;
    max-width:100vw;
}
.split {display:flex;
        flex-direction: row;
      justify-content:flex-start;
        align-content: space-around;
        max-width:100vw;
        margin-right:150px;
        margin-left:100px}

.grid-container {display:grid;
            grid-template-columns:1fr 1fr 1fr;
            grid-template-rows: 2fr 1fr;
            grid-gap: 20px;
            width:50%;
            height:auto;}

.img1 {grid-column:1/span 3;
grid-row:1/2;
object-fit: cover}

.img2 {grid-column: 1/2;
        grid-row:2/3;
        object-fit: contain;
        width:100%;
        height:100%}

.img3 {grid-column: 2/3;
        grid-row:2/3; 
   }

.img4 {grid-column: 3/4;
        grid-row:2/3;
       }

.img5 {grid-column: 4/5;
        grid-row:2/3;}

.item  {margin-left:30px;}

.item h2{font-family:"sulphur point";
font-size:30px;
color:olive;
    margin-bottom: 0;
}
.item h3{Font-size:40px;
        color:maroon;
        margin-top:0;
        margin-bottom: 10px;
    font-family:"sulphur point"
}

.item p{color:#330000;
            font-size:20px;
font-family:"sulphur point"}

.right {justify-content: center}

#tour{display:flex;
        justify-content: center;
    background-color:#cccc99;
        height:170px;
        max-width:100vw}

.one {flex-basis:550px}

#tour h3 {padding-top:15px;
        margin-top:0px;
        color:maroon;
        text-align: center;
        font-family:"sulphur point";
        font-size:28px;
        margin-bottom:2px
        }

#tour h2 {color:#330000;
            text-align:center;
            font-family:"sulphur point";
            font-size:32px;
            margin-top:2px}

.button p{background-color:olive;
    font-family:"sulphur point";
    font-size:22px;
    color:#ffffcc;
    display:inline-block;
    padding:10px 15px;
    margin-top: 50px;
    margin-bottom: 25px;
   }

#wines h2 {color:olive;
            text-align: center;
            font-size:30px;
            font-family:"sulphur point";
            margin-bottom: 0}

#wines {height:auto;
        max-width:100vw;}

#wines h1{margin-top:0;
        color:maroon;
        font-size:50px;
        text-align:center;
        font-family:"sulphur point";
        margin-bottom:0px}


.large {font-family:"sulphur point";
        color:#330000;
        font-size:18px;
        text-align:center;
        display:inline-block;
        
        margin-right:auto;
        margin-left:auto;
        }

.wine   {display:flex;
        margin-top:30px;
        justify-content: center;
    align-content: center;}

.wine section {padding:10px;
                margin:0px}

.wine img {border:4px solid maroon;
            }

.wine section p {color:maroon;
            font-size:13px;
            font-family:"sulphur point";
            text-align: center}

#restaurant {height:300px;
    background-image: url(COT-Wine-and-Food-landscape.jpg);
    background-size: cover;}

.rest {display:flex;
        flex-direction: column;
        margin-left: 90px;
        align-content: flex-start;
        height:300px;
        max-width:100vw;
        justify-content: center;}


.rest section h1 {color:#FFFFFF;
                font-size:56px;
                font-family: "sulphur point";
                margin-bottom:0;}

.rest section p {
            display:inline-block;
                background-color:#ffffcc;
                padding:10px 10px;
                color:maroon;
                font-weight: bold;
                font-size: 24px;
    font-family:"sulphur point"}

#final {font-family: "sulphur point"}
#final h1 {color:maroon}

.grid {display:grid;
            grid-template-columns:3fr 3fr 3fr;
            grid-template-rows 50xp 1fr 1fr;
            grid-gap:10px;
            margin-left:100px;
            height:auto;
            justify-content: center;
            align-content: center;
            margin-top:15px;
            margin-right:100px
            }

.h1 {grid-column: 1/5}

.grid h1 {text-align: center}

.p {grid-row:2/3;
    grid-column:1/3}
.grid p {font-size: 18px}

.img-align {grid-row:2/3;
    grid-column:3/4}

.img-next{grid-row:3/4;
    grid-column:3/4}

.img-bottom{grid-row:3/4;
    grid-column:1/2}

.img-left {grid-row: 3/4;
    grid-column:2/3}

p {grid-row:2/3;
    grid-column:2/3}


.logos {display:flex;
        margin-top:30px;
        justify-content: center;
    align-content: center;}

.logos section {flex-basis:80px;
                padding:15px}
                
.logos img{background-color:olive;
            padding:10px 10px}

.logos p {color:olive;
            font-size: 16px;
        text-align: center;}

footer {background-color:#330000;
        color:#ffffcc;
        display:flex;
        justify-content: space-around;
        align-content: space-around;
            padding:15px 80px;
        flex-shrink:1
        }
footer section {flex-basis:200px}
footer section h2 {font-size:28px;
            font-family: "sulphur point"}
footer section p {font-size:16px;
            font-family: "sulphur point"}
.bottom {background-color:maroon;
        margin-top:0px;
        border-right:4px solid #cccc99;
        border-bottom:4px solid #cccc99;
        border-top:10px solid #cccc99; 
        text-align:center;
        font-family: "sacramento";
        color:#ffffcc;
        font-size: 30px;
        display: flex;
        align-content: space-around;
        justify-content: center}
.bottom img {margin-top:40px;
            margin-left:30px;}


@media screen and (max-width:500px)
    {
        .tops p{font-size: 16px;
            margin-top:10px;}
            
        img {max-width:100%}
.button1 
    {padding:10px 10px;
    margin-top:10px;
    height:auto;
    margin-left:20px;
    font-size: 14px;}


                    
.container{z-index: 9999;
    position: relative;
    max-height:70px;
    max-width:500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left:0px;
    padding-left:10px}

.down{margin-top:0;
    display:flex;
    flex-direction:row;
    margin-top:80px;
    gap:10px;
    font-size:12px;}
    

#logo img {margin-left:0;
    padding-left:0;
    padding-right:30px;
    width:120px;
    height: 63px}


header { 
	   background-image: url(vineyard_wine.jpg);
        background-repeat:no-repeat;
        background-size: cover;
        color:#FFFFFF;
        width:100%
        max-width:100vw;
        height:800px
}


.head h2{margin-top:60px;
    font-size:1.6em;
    font-family:"sulphur point"}

.button2 {background-color:maroon;
        padding:15px 30px;
        text-align:center;
        display:inline-block;
        font-size:16px;
        font-family:"sulphur point";
        color:#cccc99;
}

.head h1 {font-size:25px;
    font-family:"sulphur point"}

.basis p{font-family:"sulphur point";
        font-size:18px;
        width:200px;
        }


#columns{background-color:#330000;
        max-width:100%;
        height:auto;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-content: center}

#columns section{padding-top:10px;
        flex-basis:400px;
        font-family:"sulphur point";
        padding-right:25px;
        padding-left:25px
        }

#columns section img {display: block;
  margin-left: auto;
  margin-right: auto;}

#columns h3{color:#cccc99;
    font-size:1.6em;
    text-align:center}

#columns section p {color:#FFFFFF;
            font-size:1em;
            text-align:center}

.maroon{display:block;
        display:flex;
        background-color:#330000;
        width:100%;
    margin-top:0;
    width:100%;
    height:80px;
    align-content: center;
    justify-content: center;}

.maroon q{ font-family:"sulphur point";
        font-size:1em;
        text-transform: capitalize;
        color:#ffffcc;
        padding-top:16px;
        padding-left:20px;
        display: inline-block;
        padding-right:20px;
        text-align: center
        }

.cursive {font-family: "sacramento";
padding-right:1em;
    display: inline-block;
 color:#ffffcc;
font-size:12px}

#stats {
    background-color:white;
        margin-right:auto;
        margin-left:auto;
        height:200px;
        width:100%;
        display:flex;
        justify-content: space-around;
        }

           
#stats section h2 {color:maroon;
            font-size:30px;
            margin-right:3px;
            margin-left:3px;
            text-align:center;
            border-bottom:2px solid black}

#stats section h3 {font-size:25px;
                color:maroon;
                text-align:center}

#about {background-color:#ffffcc;
    height:auto;
    padding-left:0;
    margin-left: 0;
    margin-right: 0;
    max-width:100%;
    width:100vw;
}
.split {display:flex;
        flex-direction: row;
      justify-content:flex-start;
        align-content: space-around;
        max-width:500px;
        margin-right:0;
        margin-left:0}

.grid-container {display:grid;}

.img1 {grid-column:1/span 3;
grid-row:1/2;
object-fit: cover;
max-width:100%}

.img2 {grid-column: 1/2;
        grid-row:2/3;
        object-fit: contain;
        width:100%;
        height:100%;
        max-width:100%}

.img3 {grid-column: 2/3;
        grid-row:2/3; 
   }

.img4 {grid-column: 3/4;
        grid-row:2/3;
       }

.img5 {grid-column: 4/5;
        grid-row:2/3;}

.item  {margin-left:30px;}

.item h2{font-family:"sulphur point";
font-size:22px;
color:olive;
    margin-bottom: 0;
}
.item h3{Font-size:25px;
        color:maroon;
        margin-top:0;
        margin-bottom: 10px;
    font-family:"sulphur point"
}

.item p{color:#330000;
            font-size:14px;
font-family:"sulphur point"}

.right {justify-content: center}



#tour h3 {padding-top:50px;
        margin-top:0px;
        font-size:24px;
        margin-bottom:2px
        }

#tour h2 {color:#330000;
            text-align:center;
            font-family:"sulphur point";
            font-size:20px;
    padding-left: 30px;
            padding-right:30px;
            width: fit-content;
            margin-top:2px}

.button p{background-color:olive;
    font-family:"sulphur point";
    font-size:16px;
    color:#ffffcc;
    display:inline-block;
    padding:10px 15px;
    margin-top: 50px;
    margin-bottom: 25px;
    margin-right:10px;
   }

#wines h2 {color:olive;
            text-align: center;
            font-size:30px;
            font-family:"sulphur point";
            margin-bottom: 0}

#wines {height:auto;
        max-width:100vw;}

#wines h1{margin-top:0;
        color:maroon;
        font-size:50px;
        text-align:center;
        font-family:"sulphur point";
        margin-bottom:0px}


.large {font-family:"sulphur point";
        color:#330000;
        font-size:18px;
        text-align:center;
        display:inline-block;
        
        margin-right:20px;
        margin-left:20px;
        }

.wine   {display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top:30px;
        justify-content: center;
    align-content: center;}

.wine section {padding:10px;
                margin:0px}

.wine img {border:4px solid maroon;
            }

.wine section p {color:maroon;
            font-size:13px;
            font-family:"sulphur point";
            text-align: center}

#restaurant {height:auto;
    background-image: url(COT-Wine-and-Food-landscape.jpg);
    background-size: cover;
    width:100%;
        height:auto;}

.rest {display:flex;
        flex-direction: column;
        margin-left: 90px;
        align-content: flex-start;
        height:300px;
        max-width:100%;
        width:100%
        justify-content: center;}


.rest section h1 {color:#FFFFFF;
                font-size:36px;
                font-family: "sulphur point";
                margin-bottom:0;}

.rest section p {
            display:inline-block;
                background-color:#ffffcc;
                padding:10px 10px;
                color:maroon;
                font-weight: bold;
                font-size: 16px;
    font-family:"sulphur point"}

#final {font-family: "sulphur point"}
#final h1 {color:maroon}

.grid {display:grid;
            grid-template-columns:3fr 3fr 3fr;
            grid-template-rows 50xp 1fr 1fr;
            grid-gap:10px;
            margin-left:100px;
            height:auto;
            justify-content: center;
            align-content: center;
            margin-top:15px;
            margin-right:100px
            }

.h1 {grid-column: 1/5}

.grid h1 {text-align: center}

.p {grid-row:2/3;
    grid-column:1/3}
.grid p {font-size: 14px;
        margin-right:auto;
        margin-left:auto;
        display:inline-block;
        width:fit-content;}

.img-align {grid-row:2/3;
    grid-column:3/4}

.img-next{grid-row:3/4;
    grid-column:3/4}

.img-bottom{grid-row:3/4;
    grid-column:1/2}

.img-left {grid-row: 3/4;
    grid-column:2/3}

.grid p {grid-row:2/3;
    grid-column:2/3}


.logos {display:flex;
        margin-top:30px;
        justify-content: center;
    align-content: center;}

.logos section {flex-basis:80px;
                padding:15px}
                
.logos img{background-color:olive;
            padding:10px 10px;
            width:70px;
            height:70px}

.logos p {color:olive;
            font-size: 12px;
        text-align: center;}

footer {background-color:#330000;
        color:#ffffcc;
        display:flex;
        justify-content:space-around;
        align-content: space-around;
        padding:15px 80px;
        flex-shrink:1
        }
footer section {flex-basis:200px}
footer section h2 {font-size:18px;
            font-family: "sulphur point"}

footer section p {font-size:10px;
            font-family: "sulphur point";
            padding-right:25px}
.bottom {background-color:maroon;
        margin-top:0px;
        border-right:4px solid #cccc99;
        border-bottom:4px solid #cccc99;
        border-top:10px solid #cccc99; 
        text-align:center;
        font-family: "sacramento";
        color:#ffffcc;
        font-size: 30px;
        display: flex;
        align-content: space-around;
        justify-content: center}
.bottom img {margin-top:40px;
    margin-left:30px;}}


@media screen and (max-width:1213px)
{.split {display:flex;
        flex-direction:column;
        margin-right:0;
        margin-left:0}

.grid-container {display:grid;
                max-width:80%;
                width:80vw;
                height:auto;
                margin-right: auto;
                margin-left: auto;}

.img1 {grid-column:1/span 3;
grid-row:1/2;
object-fit: cover;
max-width:100%}

.img2 {grid-column: 1/2;
        grid-row:2/3;
        object-fit:fill;
        max-width:100%}

.img3 {grid-column: 2/3;
        grid-row:2/3;
        object-fit:fill;
   }

.img4 {grid-column: 3/4;
        grid-row:2/3;
        object-fit:fill;
       }

.img5 {grid-column: 4/5;
        grid-row:2/3;}

.item  {margin-left:30px;}

.item h2{font-family:"sulphur point";
font-size:36px;
color:olive;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width:fit-content;
}
.item h3{Font-size:32px;
        color:maroon;
        margin-top:0;
        margin-bottom: 10px;
    font-family:"sulphur point";
         margin-left: auto;
    margin-right: auto;
    display: block;
    width:fit-content;
}

.item p{color:#330000;
            font-size:18px;
font-family:"sulphur point"}}

@media screen and (max-width:900px)
{body {margin-right:0;
    margin-left:0;
    }}
*/
    Colors: Maroon , Olive Green , Sage cccc99, Brown330000, Cream ffffcc