/*==---BROWSER RESET CODE TO HELP ELIMINATE INCONSISTENCIES BETWEEN BROWSERS---===*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}


/*==---END BROWSER RESET CODE---===*/


html{
       height: 100%;
       min-height: 100%;
       font-size: 1vw;
       -webkit-transition:  all .6s ease-in-out;
		-moz-transition:  all .6s ease-in-out;
		 -ms-transition:  all .6s ease-in-out;
		  transition:  all .6s ease-in-out;
		}
		@media screen and (min-width: 2500px) {
  			html {
				font-size:16px;
				}
			}
		@media screen and (max-width: 1920px) {
  			html {
				font-size:0.9vw;
				}
			}
		@media screen and (max-width: 1024px) {
  			html {
				font-size:1.1vw;
				}
			}
		@media screen and (max-width: 834px) {
  			html {
				font-size: 1.7vw;
				}
			}
		@media screen and (max-width: 414px) {
  			html {
				font-size: 3vw;
				}
			}
		
BODY {	
		height: 100%;
		min-height: 100%;
		margin:0;
		padding:0;
		font-family: 'Lato'; 
		color: rgb(50,50,50);
		background:rgb(255,255,255);
		-webkit-transition:  all .6s ease-in-out;
		-moz-transition:  all .6s ease-in-out;
		 -ms-transition:  all .6s ease-in-out;
		  transition:  all .6s ease-in-out;
		}

					
		
div, h1, h2, h3, h4, h5, h6, p, ul, section, article, aside{
		box-sizing: border-box}
		}

/*--------------------------------------------------------------------------------------
                                T Y P O G R A P H Y    
/*--------------------------------------------------------------------------------------*/
						

H1 {
		font-size: 400%; 
		}
h2{ 
		font-size: 300%;
		}
H3 {
		font-size: 200%;
		}
H4{		
		font-size: 180%;
		}
p {		
		font-size: 140%;
 		}

h1,h2,h3,h4,p {		
		position: relative;
		}

/*--------------------------------------------------------------------------------------
                                       L I N K S   
/*--------------------------------------------------------------------------------------*/


a {

		color: rgb(200,200,200);
		-webkit-transition: .6s ease-in-out;
		-ms-transition: .6s ease-in-out;
 		transition: .6s ease-in-out;
 		text-decoration: none;
		}

a:hover {
		color: rgb(50,50,50);
		-webkit-transition: .6s ease-in-out;
		-ms-transition: .6s ease-in-out;
		transition: .6s ease-in-out;
		}
		
/*--------------------------------------------------------------------------------------
                                 M A I N   C O N T E N T  
/*--------------------------------------------------------------------------------------*/
	
	
.topmenu {
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		height: 5vh;
		border: 0;
		border-bottom: 2px;
		border-style: dotted;
		border-color:rgba(110,100,90,1);
		background:rgba(80,75,72,1);
		z-index: 500;
		}
		@media  screen and (max-width: 736px) and (orientation:landscape)  {
			.topmenu{
				height: 2rem;
				}
			}	

.topmenu .content{
		position: absolute;
 		 top: 50%;
 		 left: 50%;
 		  -webkit-transform: translate(-50% -50%);
 		 -ms-transform: translate(-50%, -50%);
 			 transform: translate(-50%, -50%);
 		width: 100%;
		max-width: 1500px;
		margin: 0 auto;
		padding: 0;
		}

.topmenu h1 {
		position: absolute;
		left: 1rem;
		top: 50%;
		text-align: left;
		text-transform: lowercase;
		font-size: 250%;
		font-weight: 400;
		font-family: 'Lato', Tahoma, Verdana, sans-serif;
		color: rgb(255,250,240);
		z-index: 0;
		-webkit-transform: translateY(-50%);
		 -ms-transform: translateY(-50%);
		  transform: translateY(-50%);
		}
		@media screen and (max-width: 414px) {
			.topmenu h1{
				display: none;
				}
			}

.topmenu ul{
		display: block;
		margin: auto;
		text-align: center;
		border: 0;
		}	
		@media screen and (max-width: 414px) {
			.topmenu ul{
				left:0;
				margin: 0 auto;
				padding: 0;
				}	
			}
		
.topmenu li {
		display:inline-block;
		position: relative;
		text-align: center;
		font-size: 100%;
		padding: 0 10px;
		list-style: none;
		font-family: 'Lato', sans-serif;
		font-weight: 400;
		font-size: 80%;
		text-align: center;
		}
		@media screen and (max-width: 414px) {
			.topmenu li {
				font-size: 50%;
				}
			}
		@media screen and (max-width: 320px) {
			.topmenu li {
				padding: 0 5px;
				}
			}
		
		
.topmenu li a{
		font-weight:400;
		color: rgb( 255,250,245);
		text-decoration: none;
		text-transform: uppercase;
		}

.topmenu li a:hover{
		font-weight:400;
		text-decoration: none;
		text-transform: uppercase;
		color: rgb(20,20,20);
		}

.titlepage {
		height: 90vh;
		top: 0;
  		background-position: 50% 50%;
  		background-repeat: no-repeat;
  		background-attachment: fixed;
  		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  		background-size: cover;
		background-image: url(../images/Header3.jpg); 
		filter: saturate(80%);
		}
		@media screen and (orientation:landscape) {
		.titlepage {
			height: 100vh;
			}
		}

.titlepage .content{
		height: 100%;
		min-height: 100%;
		width: 95%;
		margin: 0 auto;
		max-width: 1400px;
		}

.titlepage h1{
		position: relative;
		top: 40%;
		max-width: 60rem;
		margin: auto;
		text-align: center;
		color: rgb(255,255,255);
		font-size: 400%;
		transform: translateY(-40%);
		}

.titlepage h1 span{
		display: none;
		}
		@media screen and (max-width: 414px) {
			.titlepage h1 span{
				display: block;
				color: rgb(80,75,72);
				text-transform: uppercase;
				font-family: 'Open Space', sans-serif;
				letter-spacing: 2px;
				background: rgba(255,255,255,0.5)
				}
			}

.titlepage h1:before{
		display:block;
		content:url(../images/coffee2_200.png);
		filter: invert(100%);
		}
		@media screen and (max-width: 768px) {
			.titlepage h1:before{
				content:url(../images/coffee2_100.png)
				}
			}
		

.titlepage .socialmedia {
		position: fixed;
		top: 40%;
		width: auto;
		margin-left: 2rem;
		background: rgba(255,255,255, 0);
		-webkit-transform: translateY(-40%);
		 -ms-transform: translateY(-40%);
		  transform: translateY(-40%);
		z-index: 20000;
		}
		@media screen and (max-width: 768px){
			header .socialmedia {
				display: none
				}
			}
			
header .socialmedia img{
		display: block;
		padding: 10px 0;
		width: 40px;
		}

.section{
		position: relative;
		top: 0;
		height: 90vh;
		margin: 0 auto;
		padding: 0 0 200px;
		border-top: dotted 3px ;
		border-color: rgba(110,100,90,1);
		background:url(../images/coffee2_100.png) no-repeat center 70%;
		background-size: 100px;
		}
		@media  screen and (max-width: 736px) and (orientation:landscape)  {
			.section{
				background:none;
				}
			}
		
.section h1{
		margin: 0 auto;
		padding: 0;
		max-width: 40rem;
		text-align: center;
		font-size: 300%;
		font-family: 'Lato';
		font-weight: 300;
		text-transform: uppercase;
		line-height: 100%;
		color: rgba(200,180,170,1);
		}	


.section h1 span{
		visibility: hidden;
		display:block;
		}

section h2{
		max-width: 40rem;
		margin: 0 auto;
		padding: 0 1rem;
		text-align: center;
		font-size: 150%:
		}

.section h3{
		max-width: 40rem;
		margin: 0 auto;
		padding: 0 1rem;
		text-align: center;
		}

.section p{
		max-width: 40rem;
		margin: 1em auto;
		padding: 0 1rem;
		text-align: justify;
		font-weight: 300;
		line-height: 150%;	
		}
		
article{
		position: relative;
		max-width: 1400px;
		margin: 0 auto;
		margin-bottom: 150px;
		padding: 20vh 0;
		}



/*--------------------------------------------------------------------------------------
    CONTACT
/*--------------------------------------------------------------------------------------*/


.contact {
		position: fixed;
		left: 0;
		bottom: -5vh;
		width: 100%;
		height: 20vh;
		margin: auto;
		z-index: 1000;
		transition: all 2s ease;
		}
		@media  screen and (max-width: 736px) and (orientation:landscape)  {
			.contact{
				bottom: -2vh;
				}
			}


.contact .wrap{
		position: relative;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		padding: 4rem 1rem;
		background:rgba(80,75,72,1);
		}

.contact .content{
		position: relative;
		margin: 0 auto;
		width: 90%;
		max-width: 1400px;
		}
		@media screen and (max-width:414px){
			.contact .content{
				width:100%
				}
			}

.contact .content:after{
		content: '';
		display: block;
		clear: both;
		}
		
			
.contact .content .bit{
		position: relative;
		float: left;
		width: 25%;
		padding: 0.8em;
		text-align: center;
		border-left: 1px solid rgba(200,200,200,0.5);
		}
		@media screen and (max-width:414px){
			.contact .content .bit{
				width:100%;
				float: none;
				border-left: 0;
				border-bottom: 1px solid rgba(200,200,200,0.5);
				}
			}

.open {
		bottom: 12vh;
		}
		@media screen and (max-width:414px) {
			.open{
				height:350px;
				}
			}
		@media  screen and (max-width: 736px) and (orientation:landscape)  {
			.open{
				height:200px;
				}
			}

.contact h3 {
		height: 100%;
		width: 20%;
		padding: 0 1rem;
		color:rgb(220,220,220);
		font-weight: 300;
		letter-spacing: 0.06rem;
		float: left;
		}
		@media screen and (max-width:414px) {
			.contact h3{
				width:100%;
				height: auto;
				padding: 1rem 0;
				float: none;
				text-align: center;
				border-bottom:  1px solid rgba(200,200,200,0.5);
				}
			}

button {
		margin: 0 auto;
		border: none;
		background:rgba(80,75,72,0.8);
		color: rgb(230,230,230);
		padding: 15px;
		display: block;
		width: auto;
		height: auto;
		cursor: pointer;
		font-size: 140%;
		font-family: Lato;
		font-weight: 400;
		letter-spacing: 0.04rem;
		text-transform: uppercase;
		}


		


button.contact:hover {
		background: background:rgba(80,75,72,1);
		}

button.contact.active {
		background:rgba(80,75,72,0.5);
		}


/*--------------------------------------------------------------------------------------
                                          F O O T E R    
/*--------------------------------------------------------------------------------------*/


footer{
		position: fixed;
		bottom:0;
		height: 9vh;
		width: 100%;
		margin: 0;
		padding: 0;
		background:rgba(80,75,72,1);
		z-index: 200000;
		}
		
footer .content{
		position: relative;
		top: 0;
		width: auto;
		max-width: 1400px;
		height: auto;
		margin:  0 auto;
		padding: 0 ;
		}
		@media screen and (max-width: 414px){
			footer .content{
				width: 100%;
				max-height: auto;
				min-height: auto;
				margin:  0 auto;
				padding: 0;
				}
			}

 footer img{
		width: 100%;
		height: auto;
		max-width: 270px;
		opacity: 0.7;
		transition: all 1s ease;
		}

 footer img:hover{
		opacity: 1;
		}

footer h1{
		color: rgb(220,220,220);
		}

footer h2{
		top: .8em;
		color: rgb(150,150,150);
		text-align: center;
		font-size: 200%;
		font-family: 'Lato';
		}

footer p{
		color: rgb(220,220,220);
		font-weight: 300;
		}

footer .socialmedia{
		float:none;
		width: 160px;
		margin: 1.5vh auto 0.5vh;
		}
		@media screen and (min-width: 769px){
			footer .socialmedia{
				display: none
				}
			}

footer .socialmedia img{
		display: inline-block;
		margin: 0 10px;
		padding: 0;
		width: 30px;
		}