@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');

/* CSS Default Values for general reference https://www.w3schools.com/cssref/css_default_values.php */


/* NAV MENU FROM https://codepen.io/mike-schultz/pen/RRWKow */

.top-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #390000;
  font-family: 'Quicksand', sans-serif;
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #fff;
  height: 75px;
  padding: 1em;
}

.menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu > li {
  margin: 0 1rem;
}

.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #fff;
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: "";
  margin-top: -8px;
}

.menu-button::after {
  content: "";
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}
/* END CODEPEN DEFAULT MENU */


/* MY DEFAULT STYLES */

* {
  box-sizing: border-box;
}
.content {
    padding: 0px 14px;
    max-width: 2600px;  /*restircts main content width*/
 /* display: inline-block; /*  to center elements ( in combination with your body{ text-align:center}) and contain floats)*/ 
    display: block;
    margin-left: auto;
    margin-right: auto;
}
body {
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
  color: #330000;
  background-color: #FFCC99;
  height: 100%;
}

h1 {
font-family: Copperplate, sans-serif; 
text-align: center;
font-size: 4.5em;
padding-top: 0px;
margin-top: 8px;
margin-bottom: 8px
}

hr {
 width: 80%;
 border: 1px solid black;
 margin-left: auto;
 margin-right: auto;
}
.hr-home {
    margin-bottom: 20px;
}
.hr-stay {
    margin-bottom: 20px;
}
.address { 
    width: 80%;
    text-align: center;
    font-size: 1.75em;
    margin-left: auto;
    margin-right: auto;
}
.map-image { 
    display: none;  /* the map image (on the home page) should only display on the desktop version */
}
.hours { 
    width: 80%;
    text-align: center;
    font-size: 1.5em;
    margin-left: auto;
    margin-right: auto;
}
table { 
   /* https://www.w3schools.com/css/css_table_responsive.asp */
   overflow-x: auto;
   font-size: .85em;
   border: 0px;
   margin-left: auto;
   margin-right: auto;
}
td {
  text-align: left;
}
.drink-menu { 
    width: 80%;
    text-align: center;
    font-size: 1.75em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
}
.logo {
    float: left;
    padding: 3px 8px;
}
.about {
    margin-bottom: 35px;
}
.patti {
    width: 100%;
    height: auto; 
}
.contact-text {
    text-align: center;
    margin-bottom: 30px;
}

/* CONTACT PAGE add a background color and some padding around the form */

.fontless {
  font-size: 90%; 
  padding: 0px;
  margin-top: 20px;
  color: gray;
}
.container {
  width: 95%;
  padding: 10px;
  margin-top: 15px;
  border-radius: 5px;
  background-color: #f2f2f2;
  margin-left: auto;
  margin-right: auto;   
} 

/* VIDEO STYLES from Beanze Boorstrap Adding Content  */

.video {
overflow: hidden;
position: relative;
width: 100%;
}
.video::after {
padding-top: 56.25%;
display: block;
content: '';
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

footer {
    color: white;
    background-color: #330000;
    font-size: .85em;
    height: 55px;
    text-align: center;
}
footer a:link {
  color: white;
  background-color: transparent;
}
footer a:hoover {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
footer a:active {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
footer a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

@media screen and (min-width: 600px){
    
/* MY MEDIA QUERY TO SCALE FORM SIZE */
    
/* switched from max-width on richardalent.com to min-width effectively making this CSS mobile first */
/* if no value it will inherit the value from non-media queriy */
   
/* CONTACT PAGE */

.container {
  width: 525px;
  padding: 20px;
  margin-top: 25px;  
}
}

/* SMALL SCREENS FROM CODEPEN, HE DID MAX INSTEAD OF MIN. I changed from 700px max to 768, then to 767 to avois display error AT 768 */

@media (max-width: 767px){
    
.menu-button-container {
    display: flex;
  }
.menu {
    position: absolute;
    top: 0;
    margin-top: 50px;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
#menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
#menu-toggle:checked ~ .menu li {
    border: 1px solid #333;
    height: 2.5em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
.menu > li {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: #3F0000; /* was white, changed to hide text*/
    background-color: #FFC892;
  }

    
/* changed the color of all CODEPEN a: to blend the overflow text that should not appear on small screens into the background */
    
.menu a:link {
  color: #3F0000;  
  text-decoration: none;
}
 .menu a:visited {
  color: #3F0000;   
  text-decoration: none;
}
.menu a:hover {
  color: #3F0000;  
  text-decoration: none;
}
.menu a:active {
  color: #3F0000;  
  text-decoration: none;
}
.menu > li:not(:last-child) {
    border-bottom: 1px solid #444;
}
}

/* TABLETS */
/* Added a: to offset max-width CODEPEN color */

@media screen and (min-width:768px){
    
.menu a:link {
  color: #FFF;
  background-color: transparent;
  text-decoration: none;
}
 .menu a:visited {
  color: #FFF;
  background-color: transparent;
  text-decoration: none;
}
.menu a:hover {
  color: #FFF;
  background-color: transparent;
  text-decoration: none;
}
.menu a:active {
  color: #FFF;
  background-color: transparent;
  text-decoration: none;
}

/* TABLETS GENERAL*/
    
h1 {
font-size: 7em;
}
.hr-stay {
    margin-bottom: 35px;
}
.address { 
    font-size: 3em;
}   
.hours { 
    font-size: 2.75em;    
}
.drink-menu { 
    font-size: 2.75em;
}
}


/* DESKTOP */

@media screen and (min-width:1200px){
    

.left {
    float: left;
    width: 50%;
} 
.right {
    float: right;
    width: 50%;
} 
h1 { 
    font-size: 10.5em;  /* adjusted to work with .left 50% width HOME, MAP, CONTACT */ 
    padding: 0px;
}
       
.coffee-club-text  {
    width: 100%;      /* adjusted to work with .left 50% width HOME, MAP, CONTACT */
    margin-top: 20px;
    margin-bottom: 20px;
 }
.hr-stay  {
    width: 70%;     /* adjusted to work with .left 50% width - HOME, MAP, CONTACT This is the <hr> under Cofee Club h1 */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
 }
.address {
    width: 100%;    /* adjusted to work with .left 50% width  - HOME, MAP, CONTACT */
    font-size: 4.25em;
    margin-bottom: 75px;
}
.contact-text {
    width: 100%;    /* adjusted to work with .left 50% width - CONTACT ONLY*/
    text-align: left;
    margin-left: 10px;
    font-size: 1.25em;
    margin-top: 75px;
    margin-bottom: 75px;
}
.container {               
    margin-left: 75px;   /* Holds the form - CONTACT ONLY */
    margin-right: 0px;
    margin-bottom: 430px; 
}
.hr-home  {
    display: none;  /* display on everything EXCEPT desktop view. These are the <hr> above and below the hours. Two lines total. */
 }

.map-image {
    display: block; /* display only on desktop view */ 
    width: 100%;    /* adjusted to work with .left 50% width - HOME ONLY */ 
    text-align: center;
 }
.home-image {
    float: right;
    width: 50%;
 }
.hours {
    float: right;
    width: 50%;
    padding: 0px;
    margin-top: 35px;
    margin-bottom: 45px;
    font-size: 3.75em;
 }
.drink-menu {
    clear: both;
    float: left;
    width: 30%;
    font-size: 3.75em;
 }
p.video {
    float: right;
    width: 70%;
 }
.patti {
    width: 85%;
    height: auto;
    margin-top: 35px;
    margin-left: auto;
    margin-right: auto;
}
.about {
    width: 85%;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
}
.map-bottom-spacer {  /* fix to add some space on the MAP page between the map and the footer - desktop view only */
    clear: both;    
    height: 200px;
    background-color: #FFCC99;
    }
    
/* https://stackoverflow.com/questions/44681405/iframe-problems-footer-is-on-top-of-iframe */
footer {
    clear: both;
}
}