/*Main Stylesheet referenced by all content pages and body of homepage*/
@font-face{ /*This will import custom type from folder*/
    font-family:'KlinicSlabBold';
    src:url('fonts/KlinicSlabBold.otf'); /*Created new folder called Fonts within root folder*/
}

@font-face{
    font-family:'KlinicSlabMedium';
    src:url('fonts/KlinicSlabMedium.otf');
}


.feature_container{ /*Event feature on bottom of homepage*/
    width:1000px;
    height: 300px;
    display: block;
    margin: 20px auto 50px auto;
    display: flex;
    justify-content: space-between;
    
}

.feature_item{
    width: 240px;
    height: 100%;
}

.feature_title{
    color:#CF1C44;
    font-family: 'KlinicSlabBold';
    font-size:32px;
    font-weight: 400;
}

.feature_image{
    width: 100%;
    height: 100px;
    cursor: pointer;
    margin: 20px 0;
    background-position: center;
    background-size:60%;
    transition: all 0.2s ease-in-out;
}

.feature_image:hover{ /*When cursor is over image it will auto-zoom*/
    background-size: 120%;
}

.wine{
    background-image: url(img/wine.jpg);
}

.feature_description{
    font-family: 'KlinicSlabMedium';
    font-size:18px;
    Color:#553237;
    font-weight: 400;
    margin-bottom: 20px;
}

.feature_container2{ /*Event feature on bottom of homepage*/
    width:1000px;
    height: 300px;
    display: block;
    margin-top: 700px;
    margin-bottom: 50px;
    margin-left: 220px;
    position: absolute;
    display: flex;
    justify-content: space-between;
    
}

.feature_item2{
    width: 240px;
    height: 100%;
}

.feature_title2{
    color:#CF1C44;
    font-family: 'KlinicSlabBold';
    font-size:32px;
    font-weight: 400;
}

.feature_image2{
    width: 90%;
    height: 100px;
    cursor: pointer;
    margin: 20px 0;
    background-position: center;
    background-size:60%;
    transition: all 0.2s ease-in-out;
}

.feature_image2:hover{ /*When cursor is over image it will auto-zoom*/
    background-size: 120%;
}

.beef{
    background-image: url(img/beef.jpg);
}

.feature_description2{
    font-family: 'KlinicSlabMedium';
    font-size:18px;
    Color:#553237;
    font-weight: 400;
    margin-bottom: 20px;
}

#footer{
    position: relative;
    height: 20px;
    margin-top: 900px;
    margin-bottom: 50px;
    margin-left: 600px;
}

h1{
    font-family: 'KlinicSlabBold';
    font-size: 48px;
    color: #CF1C44;
    text-align: center;
}




#about_container>img{
    width:60%;
    height:500px;
    position:relative;
    margin: 0px 250px auto;
}

h2{
    font-family:'KlinicSlabBold';
    font-size:32px;
    color:#0B9446;
    text-align: center;
}

p{
    font-family:'KlinicSlabMedium';
    font-size:18px;
    color:#553237;
    text-align: center;
}

h3{
  font-family:'KlinicSlabBold';
    font-size:32px;
    color:#0B9446;
    text-align: center;  
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #7C573E;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #CF1C44;
    color: white;
}

body{
    background-color: #D8C6B8;
}

.fa{
	padding: 20px;
	font-size: 30px;
	width: 50px;
	text-align: center;
	text-decoration: none;
    margin-left: 230px;
}

.fa:hover{
	opacity: 0.7;
}

.fa-facebook{
    background: #3B5998;
    color: white;
}

.fa-twitter{
    background: #55ACEE;
    color: white;
}

.fa-instagram{
    background: #F09433;
    color: white;
}

.fa-yelp{
    background: #D32323;
    color: white;
}