body, html {
height: 100%;
width: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
padding: 0;
background: white;
color: black;
font-family: "Avenir Next", "Avenir", sans-serif;
}
.bgimg-1 {
position: relative;
opacity: 0.98;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(https://i.imgur.com/CQEQ6rk.jpg);
height: 100%;
width: 100%;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
h1 {
font-family: "Avenir Next", "Avenir", sans-serif;
font-weight: bold;
font: 400 35px/1.8 "Lato", sans-serif;
}
#map {
height: 400px;
width: 100%;
}
/*-----MENU-----*/
a {
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
a:hover {
color: #ffa87c;
}
#menuToggle {
display: block;
position: fixed;
top: 50px;
left: 50px;
z-index: 3;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 4;
-webkit-touch-callout: none;
}
#menuToggle span {
display: block;
width: 30px;
height: 4px;
margin-bottom: 4px;
position: relative;
border-radius: 14px 0;
background: white;
z-index: 2;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#menuToggle input:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2) {
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
position: fixed;
width: 20%;
height: 100%;
margin: -100px 0 0 -50px;
padding: 59px;
padding-top: 125px;
background: #ffc87c;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
z-index: 1;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li {
padding: 18% 0;
font-size: 2.5em;
font-weight: bold;
color: #111;
}
#menuToggle input:checked ~ ul {
transform: scale(1.0, 1.0);
opacity: 1;
}
/*----- CONTACT-----*/
.info-container {
background-image: url(http://i.imgur.com/v8tFC0X.jpg);
/*background-color: pink;*/
color: black;
position: center;
position: absolute;
padding: none;
width: 100%;
height: 90%;
opacity: 0.9;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* ----ICONS----*/
.fa {
padding: 15px;
font-size: 30px;
width: 15px;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
#likeus.fa:hover {
opacity: 0.9;
}
/* Facebook */
.fa-facebook {
background: #3B5998;
color: white;
}
/* Twitter */
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-instagram {
background: #f09433;
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
color: white;
}
/* ---SLIDESHOW----*/
#slides {
position: relative;
height: 300px;
padding: 0px;
margin: 60px;
list-style-type: none;
}
.slide {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.showing {
opacity: 1;
z-index: -1;
}
.slide {
font-size: 40px;
padding: 40px;
box-sizing: border-box;
background: #333;
color: #fff;
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.slide:nth-of-type(1) {
background-image: url("https://i.imgur.com/B2B2HFR.jpg");
}
.slide:nth-of-type(2) {
background-image: url("https://i.imgur.com/1oxyhmA.jpg");
}
.slide:nth-of-type(3) {
background-image: url("https://i.imgur.com/uZUPehY.jpg");
}
.slide:nth-of-type(4) {
background-image: url("https://i.imgur.com/6ndGpyp.jpg");
}
.slide:nth-of-type(5) {
background-image: url("http://cook.fnr.sndimg.com/content/dam/images/cook/fullset/2013/2/11/0/FN_Potstickers_s4x3.jpg.rend.hgtvcom.966.725.suffix/1377792451822.jpeg");
}