/********** FONTS **********/
/*@import url(http://fonts.googleapis.com/css?family=Lobster|Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
@import url(http://fonts.googleapis.com/css?family=Lato:300); */

* {
  box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: none;
}

:root {
  --primary-color: #CA8F74; /* #ccffff;  #A9FDFC; #4891ff; */
  --light-color: #FCF6B8; /* #f4f4f6; */
  --dark-color: #111;
  --secondary-color: #ccffff; /*f9f9f9; */
  --border-color: #dbdbdb;
  --body-font: 'Poppins', sans-serif;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--primary-color);
/*    background-color: #A9FDFC; /* #ccffff; #E2EFFF; #f3f3f3; #fff; */
  line-height: 1.2;
  font-size: 1.0rem;
  overflow-x: hidden;
  width: 100vw;
}

a {
	color: #333333;
	text-decoration: none;
}
a:hover {
	border-bottom: 1px solid #333333;
}

#topPage {
/* background: #E2EFFF; /* lightblue; #B0C4DE;   slategray; #F0F8FF #FFFFFF; */
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

#topPage .topPage_container {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-image: url("WFET_images/Wine_Taste012.png");
      min-height: 80vh;
    background-attachment: scroll; /*fixed;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#topPage .WOKC_program
 {
    position: relative;
    top: 56vh;
    left: 93vw;
    width: 7vw;
    height: 9vh;
    background-image: url("WFET_images/RedWineSplash.jpg");
      min-height: 9vh;
    background-attachment: scroll; /*fixed;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

#topPage .topPage_slide {
    position: relative;
    left: 0vw;
    top: 0vw;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
      background-image: url("WFET_images/Wine_Taste012.png");
    background-size: cover; /*cover  contain; */
    background-position: center; /*50% 50%;*/
    background-repeat: no-repeat;
}

#topPage .topPageLogo {
    position: absolute;
    left: 30vw; /*300px;*/
    top: 36vh; /*200px; */
/*    overflow: hidden; */
    min-width: 35vw;
    min-height: 36vh;
    background-size: contain; /*cover; */
    background-position: center; /*50% 50%;  75% 15%; center;*/
    background-repeat: no-repeat;
    background-image: url('WFET_images/WFET_Logo026.png');
    /* background-size: 28vw 32vh; */
  background-attachment: scroll;
}

#topPage a.fb {
   position: absolute;
   top: 8vw;
/*   bottom: 14vw; */
   right: 3vw;
/*   left: 84vw; */
	height: 2vw;
	width: 2vw;
   background-image: url("WFET_images/facebook-logo2.png");
  background-repeat: no-repeat;
  background-size: 2vw 2vw; /*cover; */
  border-radius: 0.2vw;
}

#topPage a.tw {
   position:bsolute;
   top: 11vw;
/*   bottom: 14vw; */
   right: 3vw;
/*   left: 88vw; */
	height: 2vw;
	width: 2vw;
   background-image: url("WFET_images/twitter-logo2.png");
  background-repeat: no-repeat;
  background-size: 2vw 2vw;
  border-radius: 0.2vw;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 32px;
  /*font-weight: normal; */
  font-weight: bold;
  color: darkslategray;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
/*  background-color: lightgray; */
/*  align-content: center; */
}

p1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: normal;
  /*font-weight: bold; */
  color: darkslategray;
  text-align: left;
/*  background-color: gray; *?
/*  align-content: center; */
}

.inner-container {
/*	background: #333333; */
	width: 80%;   /*  600  */
	margin: 0 auto;
	position: relative;
}

/****** About ******/

#about {
  /* background: #E2EFFF; /* lightblue; #B0C4DE;   slategray; #F0F8FF #FFFFFF; */
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
  }
  
  #about .about_container {
      position: relative;
      top: 0px;
      left: 0px;
      width: 100vw;
      height: auto; /*100vh;*/
      background-image: url("WFET_images/Marble01.jpg");
/*        min-height: 80vh;*/
      background-attachment: scroll; /*fixed;*/
      background-position: center;
      background-repeat: repeat;
      background-size: cover;
/*      margin-bottom: 5vh; */
      padding-bottom: 5vh;
  }
  
  #about .program {
    position: relative;
    top: 3vh;
    left: 13vw;
    width: 70vw;
    height: 12vh;
/*    background-color: #dedddec1;
    border-color: #23120b;
    border-style: double;
    border-radius: 2vw;
    */
    font-family: Brush Script MT, Brush Script Std, Arial, Helvetica, sans-serif;
    font-size: 2.5em;
    font-weight: bold;
    color: #090402;
    text-align: center;
}

#about h {
  position: relative;
  top: 3vh;
  left: 7vw;
  width: 85vw;
  height: 18vh;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4em;
  font-weight: normal;
  color: #090402;
  text-align: center;
}

#about .question {
  position: relative;
  top: 3vh;
  left: 7vw;
  width: 95vw;
  /*height: 18vh; */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  color: #090402;
  text-align: left;
  line-height: 1.3rem;
  margin-bottom: 3vh;
}

#about .response {
  position: relative;
  top: 3vh;
  left: 7vw;
  width: 95vw;
  /*height: 18vh; */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  font-weight: normal;
  color: #090402;
  text-align: left;
  line-height: 1.3rem;
  margin-bottom: 3vh;
}
#about img.pairings {
  position: relative;
  top: 0vh;
  left: 0vw;
  width: 88vw;
  height: auto;
  margin-bottom: 1vh;
}

/* Navbar */

.navbar {
  position: absolute; /*relative; */
  top: 0vh;
  left: 0vw;
  background: rgba(0,0,0,.2);
  width: 100vw;
  height: 8vh;
  border-bottom: 1px solid rgba(0,0,0,0.3);
  /*  background-color: var(--primary-color); */
/*  margin-top: 2vh; */
/*  background-color: #f00;*/
/*  padding: 5px; */
}

.navbar .container {
  height: 12px;
  display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3vh;
/*    background-color: var(--light-color); */
  }

.navbar .main-menu ul {
  display: flex;
  list-style:none;
  /*  background-color: var(--primary-color); */
}

.navbar ul li a {
    padding: 10px 20px;
    display: block;
    font-weight: 900;
    transition: 0.5s;
}   

.navbar ul li a:hover {
    color: red;
}

.navbar ul li a i {
    margin-right: 10px; 
}

.navbar ul li:last-child a {
    margin-left: 10px;
}

.navbar ul li a.text-sm-lt {
  display: block;
  font-weight: 600;
  transition: 0.5s;
  position:relative;
  right: 0px;
}   

.navbar ul li a.text-sm-lt:hover {
  color:#444444;
  /*  color: var(--primary-color); */
}

/* Utility Classes */

.container {
  max-width: 100%;
  margin: 0 0;
  padding: 0 0px;
}

.container-interior {
  max-width: 100%;
  margin: 0 0;
  padding: 15 0px;
}

.container-sm {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 15px;
  }
 
    /* Card */

.card {
    background-color: #fff;
    color: #000;
    border-radius: 10px;
    padding: 20px;
    } 


  /* Hamburger Button */
  .hamburger-button {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    position:fixed;
    top: 2vh;
    left: 3vw;
    padding: 10px;
    z-index: 1000;
  }
  
  .hamburger-button .hamburger-line {
    width: 30px;
    height: 4px;
    background: #333;
    margin: 6px 0;
  }
  
  .hamburger-button.active {
    right: 0;
  }

  /* Mobile Menu */
  .mobile-menu {
    position: fixed;
    top: 11vh;
    right: -300px;
    width: 170px;
    height: 55%;
    margin: 20px 0 5px;
    z-index: 800;
    background:#421B16;
    opacity: 0.8;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease-in-out;
  }
  
  .mobile-menu.active {
    right: 0;
  }

  .mobile-menu ul {
  }
  
  .mobile-menu ul li {
    margin: 1% 0;
    color: white;
    font-weight: normal;
  }
  
  .mobile-menu ul li a {
    font-size: 1.0rem;
    transition: 0.3s;
    color: white;
  }

  .mobile-menu ul li a:hover {
    font-size: 1.3rem;
    transition: 0.3s;
    color:red;
  }

/********** History **********/

#history {
/*background: #E2EFFF; lightblue; #B0C4DE;   slategray; #F0F8FF #FFFFFF; */
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
  background-color: rgba(0,0,0,.2);
}

#history .history_container {
    position: relative;
    top: 0px;
    left:20;
    width: 100vw;
    height: auto;
    padding-top: 5vh;
/*    background-image: url("WFET_images/Wine_Barrel_Staves011.png"); */
    background-image: url("WFET_images/Wine_Cave_01.jpg");
/*    background-image: url("WFET_images/WineWall.jpg");*/
      min-height: 80vh;
    background-attachment: scroll; /*fixed;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

#history h1 {
  font-family: Brush Script MT, Brush Script Std, Arial, Helvetica, sans-serif;
  font-size: 2.3em;
  /*font-weight: normal; */
  font-weight: bold;
  color:#ffffff; /* #000000; #421B16; */
  text-align: center;
  text-decoration:underline;
  margin-top: 4vh;
  margin-bottom: 1vh;
}

/*#history history_paragraph { */
#history h2 {
    position: relative;
    top: 5vh;
    left: 5vw;
  width: 90vw; 
  height: auto;
/*  margin: 50px 100px 50px 100px; */   
/*  font-family:Garamond, Dubai, Arial, Helvetica, sans-serif; */
  font-size: 1.1em;
/*  font-weight: 900;*/
  font-weight: bold;
  color: #ffffff; /* #000000; #421B16; */
}
#history a {
/*  font-family:Garamond, Dubai, Arial, Helvetica, sans-serif; */
  font-size: 1.0em;
  font-weight: bold;
    color: #f0f000;
    text-decoration: none;
/*  background-color: darkslategray; */
}

/********** Contact **********/

#contact {
/* background: #E2EFFF; /* lightblue; #B0C4DE;   slategray; #F0F8FF #FFFFFF; */
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

#contact .contact_container {
    position: relative;
    top: 0px;
    /* margin:0; */
    /* padding:0; */
    left: 0px;
/* top right bottom left */
    margin: 0px 0px 0px 0px;
   height: 100vh;
/*   background-image: url("WFET_images/red-wine-splash.jpg"); */
   background-image: url("WFET_images/Food_Wine010.jpg");
  background-attachment: scroll; /*fixed;*/
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#contact p1 {
  position: absolute;
/*  position: relative; */
  top: 1vw;
  left: 22vw;
/*  background: #692005; #000; */ 
  font-family: Brush Script MT, Brush Script Std, Arial, Helvetica, sans-serif;
  font-size: 4vw;
  /*font-weight: normal; */
  font-weight: bold;
  color: #421B16;
  text-align: center;
  text-decoration:none;
}

#contact p2 {
  position: absolute;
/*  position: relative; */
    top: 7vw;
    left: 15vw;
/*  background: #692005; #000; */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.2vw;
  font-weight: bold;
  color: #421B16;
  text-align: center;
}

#contact p3 {
  position: absolute;
    top: 12vw;
    left: 15vw;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.2vw;
  font-weight: bold;
  color: #421B16;
  text-align: center;
}

#contact p4 {
  position: absolute;
/*  position: relative; */
    top: 17vw;
    left: 35vw;
/*  background: #692005; #000; */ 
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.5vw;
  font-weight: bold;
  color: #421B16;
  text-align: center;
}

#contact a.mailit {
  position: absolute;
/*  position: relative; */
    top: 17vw;
    left: 54vw;
}

#contact .hours_container {
  position: absolute;
    top: 22vw;
    left: 5vw;
  height: 22vw;
  width: 18vw;
  margin: 0vw 2vw 0vw 2vw; /* top right bottom left */
  padding: 0vw 2vw 0vw 2vw; /* top right bottom left */
  background:#421B16; /* #692005; #4d2600 #70490f #895506 #8B4513 */
/*  font-family: Arial, Helvetica, sans-serif; */
  font-size: 1.5vw;
  font-weight: normal;
  color: white;
  text-align: left;
}

#contact .friends_container {
  position: absolute;
    top: 22vw;
    left: 32vw;
  height: 19vw;
  width: 30vw;
  background:#421B16; /*#692005; #331a00 #4d0000 #70490f #895506 #8B4513 */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5vw;
  font-weight: normal;
  color: white;
  text-align: center;
}

#contact .friends_container.p5 {
  position: absolute;
/*  position: relative; */
    top: 34vw;
    left: 28vw;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.5vw;
  font-weight: bold;
  color: white;
  text-align: center;
}

#contact p5 {
  position: absolute;
/*  position: relative; */
    top: 34vw;
    left: 28vw;
/*  background: #000000; */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.5vw;
  font-weight: bold;
  color: white;
  text-align: center;
}

#contact .cols2 {
  position: absolute;
    top: 39vw;
    left: 23vw;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-column-count: 2;
  -webkit-column-gap: 15px;
/*  -webkit-column-rule: 1px solid #000; */
  -moz-column-count: 2;
  -moz-column-gap: 15px;
/*  -moz-column-rule: 1px solid #000; */
  column-count: 2;
  column-gap: 15px;
  column-rule: none;
/*  column-rule:1px solid #000;   */
	text-align: left;
}

/********** Parties **********/

#parties {
/* background: #E2EFFF; /* lightblue; #B0C4DE;   slategray; #F0F8FF #FFFFFF; */
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

#parties .parties_container {
    position: relative;
    top: 0px;
    /* margin:0; */
    /* padding:0; */
    left: 0px;
/* top right bottom left */
    margin: 0px 0px 0px 0px;
  /*  background-image: url("WFET_images/ElementsOfStrategy.jpg"); */
    background-image: url("WFET_images/GoatFarm01.jpg");
   min-height: 125vh;
  background-attachment: scroll; /*fixed;*/
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#parties h1 {
  position: relative;
  top: 20vh;
/*  background: #000; */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: bold;
  color: lightgray;
  text-shadow: #000 3px 3px 3px;
  text-align: center;
  text-decoration:none;
}

#parties h2 {
    position: relative;
    top: 65vh;
/*  background: #000000; */ 
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3vw;
  font-weight: bold;
  color: lightgray;
  text-shadow: #000 3px 3px 3px;
  text-align: center;
}

#parties h3 {
    position: relative;
    top: 80vh;
/*  background: #000000; */ 
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3vw;
  font-weight: normal;
  color: lightgray;
  text-align: center;
}

/********** Back to top button **********/

#pagewrap {
	margin: 0 auto;
/*	width: 1000px; */
/*	padding-left: 150px; */
	position: relative;
}

#back-top {
	position: fixed;
	bottom: 2vw;
	right: 2vw;
}

#back-top a {
	width: 6vw;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}

#back-top a:hover {
	color: #000;
}

/* arrow icon (span tag) */

#back-top span {
	width: 7vw;
	height: 7vw;
	display: block;
/*	background: #ddd url(up-arrow.png) no-repeat center center; */
	background: url("WFET_images/PageTopGray2.png") no-repeat center center;
   background-size: contain;
	/* rounded corners */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	/* background color transition */
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
}

#back-top a:hover span {
	background: url("WFET_images/PageTopRed2.png") no-repeat center center;
   background-size: contain;

/*	background-color: #777; */
}

/********** End Back to top button **********/


  /* Media Queries */

  @media (max-width: 960px) {
    .text-xxl {
      font-size: 2.5rem;
    }
  }
/*    
  @media (max-width: 670px) {
    .navbar .main-menu {
      display: none;
    }
  
    .navbar .hamburger-button {
      display: block;
    }
  
    .navbar ul li:last-child a {
      margin-left: 0px;
}

.customers h1 {
  position: relative;
  top: 10vh;
  font-size: 3.0rem;
  font-weight: bold;
  color: darkslategray;
  text-align: center;
  text-decoration:none;
  }
}
*/
@media (max-width: 500px) {
    .text-xxl {
      font-size: 2rem;
    }

/* Navbar */

    .navbar {
    background: none;
    border-bottom: none;
    }
  
    .navbar .hamburger-button {
      display: block;
    }
  
    .navbar ul li:last-child a {
      margin-left: 0px;
}
  
 
.mobile-menu ul {
  margin-top: 40px
/*      margin-top: 100px; */
/*      padding-right: 10px; */
}

.mobile-menu ul li {
  margin: 10px 0;
}

.mobile-menu ul li a {
  font-size: 15px;
  transition: 0.3s;
}

#topPage .topPageLogo {
  left: 20vw; 
  top: 24vh; 
  min-width: 70vw;
  min-height: 60vh;
}

#history h1 {
  font-size: 1.5rem;
  margin-top: 1vh;
  margin-bottom: 1vh;
}

/*#history history_paragraph { */
#history h2 {
  font-size: 0.8rem;
  line-height: 1.2rem;
}
  
#about .program {
  width: 90vw;
  font-size: 1.7rem;
  top: 6vh;
  left: 10vw;
  margin-bottom: 2vh;
}

#about .question {
font-size: 1.0rem;
line-height: 1.2rem;
width: 85vw;
}

#about .response {
font-size: 1.0rem;
line-height: 1.2rem;
width: 85vw;
}

#contact p1 {
  top: 4vh;
  left: 22vw;
  width: 70vw;
  font-size: 2.0rem;
  font-weight: bold;
}

#contact p2 {
    top: 15vh;
    left: 15vw;
    width: 65vw;
    font-size: 1.0rem;
    font-weight: bold;
}

#contact p3 {
    top: 25vh;
    left: 15vw;
    width: 65vw;
    font-size: 1.0rem;
}

#contact p4 {
    top: 35vh;
    left: 15vw;
    width: 60vw;
    font-size: 1.0rem;
    font-weight: bold;
}

#contact a.mailit {
    top: 35vh;
    left: 60vw;
}

#contact .friends_container {
    top: 45vh;
    left: 32vw;
  height: 45vh;
  width: 45vw;
  font-size: 1.0rem;
}

#contact .friends_container.p5 {
  position: absolute;
/*  position: relative; */
    top: 34vw;
    left: 28vw;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.5vw;
  font-weight: bold;
  color: white;
}

}