@charset "UTF-8";
/* CSS Document */

* {
	box-sizing: border-box;
}

h1 {
	font-family: "Modak";
	font-size: 50px;
}

/*****************************
NAVIGATION
*****************************/
/* Add a black background color to the top navigation */
.topnav {
    background-color: white;
    overflow: hidden;
	position: fixed;
	top: 0;
	width: 100%;
}

/* Style the links inside the navigation bar */
.topnav a {
    float:left;
    display: block;
    color: black;
    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;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/*****************************
PARALAX
*****************************/
body, html {
    height: 100%;
}

.hero-parallax {
    /* The image used */
    background-image: url(../images/hero_image/coffee_leaves.jpg);

    /* Full height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-width: 768px) {
    .hero-parallax {
        background-attachment: scroll;
    }
}

/***** Paralax Hero with Text DESKTOP *****/
.hero-header {
	font-family: "Modak";
	color: white;
	font-size: 100px;
	padding-top: 150px;
	text-align: center;
}

.hero-caption {
	font-family: "Raleway";
	color: white;
	font-size: 30px;
	text-align: center;
}

.hero-button {
	text-align: center;
	padding-top: 39px;
}

.learnmore {
	font-family:"Raleway";
	font-size: 15px;
	background-color: white;
    color: black;
	padding: 14px 40px;
}

.learnmore:hover {
	background-color: #555555;
	color: white;
}

/***** Paralax Hero with Text TABLET *****/
@media only screen and (max-width : 768px) {
	
	.hero-header {
		font-family: "Modak";
		color: white;
		font-size: 80px;
		padding-top: 150px;
		text-align: center;
	}	
	
	.hero-caption {
		font-family: "Raleway";
		color: white;
		font-size: 20px;
		text-align: center;
	}

	.hero-button {
		text-align: center;
		padding-top: 20px;
	}

	.learnmore {
		font-family:"Raleway";
		font-size: 15px;
		background-color: white;
		color: black;
		padding: 9px 35px;
	}
}


/***** Paralax Hero with Text MOBILE *****/
@media only screen and (max-width : 480px) {
	.hero-header {
		font-family: "Modak";
		color: white;
		font-size: 50px;
		padding-top: 150px;
		text-align: center;
	}
	.hero-caption {
		font-family: "Raleway";
		color: white;
		font-size: 15px;
		text-align: center;
	}

	.hero-button {
		text-align: center;
		padding-top: 20px;
	}

	.learnmore {
		font-family:"Raleway";
		font-size: 13px;
		background-color: white;
		color: black;
		padding: 5px 31px;
	}
}
/*****************************
ABOUT
*****************************/

/***** DESKTOP *****/
.about {
	height: 400px;
	width: 100%;
	background-color: white;
}

.about-left {
	width: 50%;
	float: left;
	padding-left: 40px;
	padding-right: 15px;
}

.about-right {
	width: 50%;
	float: left;
	padding-right: 40px;
	padding-left: 15px;
	padding-top: 50px;
	padding-bottom: 50px;
}

iframe {
	width: 100%;
}

/***** TABLET *****/
@media only screen and (max-width : 768px) {
	.about {
		height: 400px;
		width: 100%;
		background-color: white;
	}

	.about-left {
		width: 100%;
		float: left;
		text-align: center;
		padding-left: 30px;
		padding-right: 30px;
	}

	.about-right {
		width: 100%;
		float: left;
		padding-left: 30px;
		padding-right: 30px;
		padding-top: 30px;
	}

	iframe {
		width: 100%;
	}
}

/***** MOBILE *****/
@media only screen and (max-width : 480px) {
	.about {
		height: 400px;
		width: 100%;
		background-color: white;
	}

	.about-left {
		width: 100%;
		float: left;
		text-align: center;
	}

	.about-right {
		width: 100%;
		float: left;
	}

	iframe {
		width: 100%;
		align-content: center;
	}
}

/************** Menu Modal ****************/
/* The Modal (background) */
#menu-title {
	text-align: center;
}


/******* Coffee Images DESKTOP *********/

.coffee-images {
	width: 100%;
}
.coffee-1, .coffee-2, .coffee-3, .coffee-4 {
	width: 25%;
	float: left;
}

/******* Coffee Images MOBILE *********/
@media only screen and (max-width : 480px) {
	.coffee-1, .coffee-2 {
		width: 50%;
		float: left;
	}
	
	.coffee-3, .coffee-4 {
		width: 50%;
		float: right;
	}
}

/******* Button Design *********/
.modal-menu {
	width: 100%;
	text-align: center;
	padding-bottom: 20px;
	
}
#myBtn {
    background-color: black; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: black;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: black;
    color: white;
	text-align: center;
}

/*****************************
MAP
*****************************/
#google-map {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	height: 300px;
	width: 100%;
}

#h1map {
	float: left;
	text-align: center;
	width: 100%;
}

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

#h1contact {
	text-align: center;

}

.contact-form {
	width: 33.3%;
	float: left;
	text-align: center;
	padding-bottom: 20px;
}

.contact-info {
	width: 33.3%;
	float: left;
	text-align: center;
}

.social-media {
	width: 33.3%;
	float: left;
	text-align: center;
}

.fa {
  padding: 10px;
  font-size: 30px;
  width: 35px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
  float:right;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: black;
  color: white;
}

.fa-twitter {
  background: black;
  color: white;
}

.fa-instagram {
  background: black;
  color: white;
}

/***** TABLET *****/
@media only screen and (max-width : 768px) {
	.contact-form, .contact-info {
		width: 50%;
		float: left;
	}
	
	.social-media {
		width: 100%;
		padding-bottom: 20px;
	}
	
	#facebook-icon, #twitter-icon, #instagram-icon {
		float: none;
	}
}

/*****************************
Footer
*****************************/

.footer {
	width: 100%;
	float: left;
	padding: 20px;
	text-align: center;
	background-color: lightgrey;
}