/*
        \/
  ___  _00 
 (___)(_) 
 //|| ||   

hello there! this ant believes in you. */

*{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

body {
	background-color: #f9f5ea;
	font-family: 'IBM Plex Serif'
}

@font-face {
	font-family: 'IBM Plex Serif';
	src: url('../fonts/IBM_Plex_Serif/IBMPlexSerif-Regular.ttf');
}

@font-face {
	font-family: 'Playfair Display', serif;
	src: ('../fonts/Playfair_Display/PlayfairDisplay-Regular.ttf');
}

@font-face {
	font-family: 'Poiret One', cursive;
	src: ('../fonts/Poiret_One/PoiretOne-Regular.ttf');
}

}



p {
	font-family: 'IBM Plex Serif', 'Goudy Old Style', serif;
	font-size: 32px;

}

p#about {

	width: 60%;
	padding-left: 15%;
	text-align: justify-left;
	color: #6b878b;
	line-height: 150%;
}

h2#about {

	font-size: 50px;
	padding-left: 15%;
	padding-bottom: 40px;
	color: #6b878b;

}

header {
	width: 100%;
	height: 11vh;
	background-color: #6b878b;
}


#logo {
	max-width: 20vw;
	height: auto;
	padding-left: 4%;
	padding-top: .5%;
}



nav {

	padding-top: 2%;
	float: right;
	padding-right: 15%;
}

	ul#navigation{
		list-style-type: none;
		background-color: #6b878b;
		float: left;
	}

	li{
		display: inline;
		font-family: "century gothic", sans-serif;
		font-size: 11pt;

	}


	li a {

	    display: inline-block;
	    color: white;
	    text-align: center;
	    padding: 14px 16px;
	    text-decoration: none;
	    color: #f9e2bd;

	}

	li a:hover {
		color: #e2a937;
		font-style: italic;
	}


section#splash {

	width: 100vw;
	height: 60%;
	background-color: #f2eddf;
}


	img#main {
		width: 100vw;
	}



section#two {

	width: 100vw;
	height: 85vh;
	padding-top: 6%;
	padding-left: 3%;
	background-color:#f2eddf;
}

section#three {
	width: 100vw;
	height: 120vh;
	background-color: #f9f5ea;

}

section#four {
	width: 100vw;
	height: 60vh;
	background-color: #f9f5ea;

}

	section#five {
		width: 100vw;
		height: 80vh;
		margin-top: 18%;
		padding-left: 10%;
		background-color:#f9f5ea;

	}

	h2#contact {

		font-family: 'Goudy Old Style';
		width: 100vw;
		height: 40vh;
		font-size: 50px;
		margin-left: 15%;
		padding-bottom: 40px;
		margin-top: 20vh; 
		color: #6b878b;
	}

p#contactUs {
	margin-top: 4%;
}

.custom-select {
	padding-left: 50%;
	display: inline-block;
}

select {
	display: inline-block;
}


h3#reservations {
	font-family: 'Century Gothic';
	padding-left: 50%;
	font-size: 30px;
}


	img#banner {
		width: 100vw;
	}

	img#apps {
		width: 46vw;
		padding-left: 4%

	}

	img#drinks {
			width: 46vw;
		}


	img#reservations {
			width: 100vw;
		}


footer {

	width: 100vw;
	height: 20vh;
	background-color: #6b878b; 
		}


		nav#footer {

		margin-top: -70px;
		padding-left: 60%;
}

		h4#footerInfo {
			font-family: 'Poiret One', cursive;
			font-size: 11px;
			color: #f9f5ea;
			padding-left: 10%;
			padding-top: 75px;
			float: left;
		}



/* CSS COLOR CLASSES */


.yellow {
	background-color: yellow;
}

.lightblue {
	background-color: #f2eddf;
}

.pink {
	background-color: pink;
}

.white {
	background-color: white;
}


/* MEDIA RULES */


{
    box-sizing: border-box ;
}

input[type=text], textarea {
    width: 30vw;
    padding: 5px;
    resize: vertical;
}

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

input[type=submit] {
    background-color: #6b878b;
    color: white;
    margin-left: 35%;
    margin-bottom: 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: left;
}

input[type=submit]:hover {
    background-color: #f9f5ea;
}

.container {
	width: 30%;
    border-radius: 5px;
    background-color: #6b878b;
    padding: 25px 0 0 25px;
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 10px;
}

.col-75 {
    float: left;
    width: 45%;
    margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}


@media screen and (max-width: 600px){
    .col-25, .col-75, .container  {
        width: 35vw;
        margin-top: 0;
    }
}


@media screen and (min-width: 601px) {
    .col-25, .col-75, .container  {
        width: 35vw;
        margin-top: 0;
    }
}