/*This style sheet was made by Aaron Guhin */

/* CSS RESET */

* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	color: black;
	list-style-type: none;	
	cursor: default;
}

header{
	background-color: #3e7c2a;
	height: 14vh;
	width: 88.5vw;
	overflow: visible;
	position: fixed;
	top:0;
	opacity: .60;
	margin-left: 5vw;
	border-bottom-left-radius: 10px;	
	border-bottom-right-radius: 10px;


}

section{
	width: 100vw;
	height: 100vh;
}

nav {

    position: fixed; 
    top: 0; 
    width: 89vw; 
    margin-left: 11.5vw;


}



 	a:link {
  	float: left;
  	height: 10vh;
    text-align: center;
    padding: 2vw 2vw;
    text-decoration: none;


 		
 	}

 	span:hover {
 		background-color: orange;
 		cursor: pointer;
 		transform: scale(1.5);
 	
 	}
 	 @import url(https://fonts.googleapis.com/css?family=Open+Sans:700);
 		span{
			font-family: 'Open Sans', sans-serif;
 			font-weight: bold;
 			font-size: 1.5vw;
 			color: white;
 			text-align: center;


 		}

 			figure{
 				width: 100vw;
 				height: 100vh;
 				background-size: cover;
 				background-image: url("../img/images/orange_panini_1.jpg");
 				}

/* CSS COLOR CLASSES */

.red{
	 background-color: red;
}

.orange {
background-color: orange;

}

.about-pic img{
	width: 80vw;
	height: auto;
}



.reservations-title{
	font-size: 10vh;
}


.logo {
	height: 10vh;
	margin-top: -1vw;

}

		.logo:hover{
			background-color: orange;
			cursor: pointer;
		}


.landing{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}


/* RESERVATION FORM STYLES */

.apptform {
    font-family: 'Open Sans', sans-serif;
 			font-weight: bold;
 			font-size: 1.5vw;
 			color: white;
 			text-align: center;
}
.apptform li {
    padding: 0;
    display: block;
    list-style: none;
    margin: 10px 0 0 0;
}
.apptform label{
    margin:0 0 3px 0;
    padding:5px;
    display:block;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"
}
.apptform input[type=text], 
.apptform input[type=date],
.apptform input[type=datetime],
.apptform input[type=number],
.apptform input[type=search],
.apptform input[type=time],
.apptform input[type=url],
.apptform input[type=email],
textarea, 
select{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border:1px solid #BEBEBE;
    padding: 7px;
    margin:0px;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;  
}
.apptform input[type=text]:focus, 
.apptform input[type=date]:focus,
.apptform input[type=datetime]:focus,
.apptform input[type=number]:focus,
.apptform input[type=search]:focus,
.apptform input[type=time]:focus,
.apptform input[type=url]:focus,
.apptform input[type=email]:focus,
.apptform textarea:focus, 
.apptform select:focus{
    -moz-box-shadow: 0 0 8px #88D5E9;
	box-sizing:content-box
    -webkit-box-shadow: 0 0 8px #88D5E9;
	box-sizing: content-box
    box-shadow: 0 0 8px #88D5E9;
    border: 1px solid #88D5E9;
}
.apptform .field-divided{
    width: 49%;
}

.apptform .field-long{
    width: 100%;
}
.apptform .field-select{
    width: 100%;
}
.apptform .field-textarea{
    height: 100px;
}
.apptform input[type=submit], .apptform input[type=button]{
    background: #FF802D;
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}
.apptform input[type=submit]:hover, .apptform input[type=button]:hover{
    background: #FFBE7A
    box-shadow:none;
    -moz-box-shadow: none;
    -webkit-box-shadow:none;
}
.apptform .required{
    color:orangered;
}



/* CAROUSEL STYLING */

.carousel {
    position: absolute;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
  
}

.carousel-inner {
    position: relative;
    overflow: hidden;
    width: 100vw;
}

.carousel-open:checked + .carousel-item {
    position: static;
    opacity: 100;
}

.carousel-item {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
}

.carousel-item img {
    display: block;
    height: auto;
   	width: 100vw;
}

.carousel-control {
    background: rgba(0, 0, 0, 0.28);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: none;
    font-size: 40px;
    height: 40px;
    line-height: 35px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    cursor: pointer;
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    width: 40px;
    z-index: 10;
}

.carousel-control.prev {
    left: 2%;
}

.carousel-control.next {
    right: 2%;
}

.carousel-control:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #aaaaaa;
}

#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
    display: block;
}

.carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

.carousel-indicators li {
    display: inline-block;
    margin: 0 5px;
}

.carousel-bullet {
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 35px;
}

.carousel-bullet:hover {
    color: #aaaaaa;
}

#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
    color: #428bca;
}

#title {
    width: 100%;
    position: absolute;
    padding: 0px;
    margin: 0px auto;
    text-align: center;
    font-size: 27px;
    color: rgba(255, 255, 255, 1);
    font-family: 'Open Sans', sans-serif;
    z-index: 9999;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}


/* Here are my styles for MOBILE DEVICES */

		@media screen and (max-width: 479px) {

			div#mobile-screen{
					width: 375px;
					height: 627px;
					background-color: white;
					
			}
			h2#mobile-screen {
				display: block;
				text-align: center;
				padding-top: 190px;
				color: white;
				font-family: sans-serif;
			}
		}	

/* Here my styles for PHABLETS */

		@media screen and (min-width: 480px) and (max-width: 767px) {

			div#phablet-screen {
					width: 480px;
					height: 768px;
					background-color: white;
								}
			h2#phablet-screen {
				display: block;
				text-align: center;
				padding-top: 240px;
				color: purple;
				font-family: sans-serif;

			}

		}
/* Here my styles for TABLETS */

		@media screen and (min-width: 768px) and (max-width: 1365px) {

			div#tablet-screen {
					width: 768px;
					height: 1024px;
					background-color: white;
					
			}
			h2#tablet-screen {
				display: block;
				text-align: center;
				padding-top: 380px;
				color: yellow;
				font-family: sans-serif;
			}
		}