@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
body{
      font-family: 'Roboto', sans-serif;
}
.slideshow {
  list-style-type: none;
}

/** SLIDESHOW **/
.slideshow,
.slideshow:after { 
    top: -16px; /*Not sure why I needed this fix*/
		position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    z-index: 0; 
}

.slideshow li span { 
		position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 30s linear infinite 0s; 
}



.slideshow li:nth-child(1) span { 
    background-image: url("../img/rpic/1.jpg"); 
}
.slideshow li:nth-child(2) span { 
    background-image: url("../img/rpic/2.jpg");
    animation-delay: 6s; 
}
.slideshow li:nth-child(3) span { 
    background-image: url("../img/rpic/3.jpg");
    animation-delay: 12s; 
}
.slideshow li:nth-child(4) span { 
    background-image: url("../img/rpic/4.jpg");   
    animation-delay: 18s; 
}
.slideshow li:nth-child(5) span { 
    background-image: url("../img/rpic/5.jpg");
    animation-delay: 24s; 
}
.slideshow li:nth-child(6) span { 
    background-image: url("../img/rpic/6.jpg");
    animation-delay: 30s; 
}



@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}


@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}


.no-cssanimations .cb-slideshow li span {
	opacity: 1;
}
fieldset {
	position: absolute;
	width: 100%;
	height:100%;
	background-color: rgba(0,0,0,0.5);
}

        .Reservation-form
        {
            position: absolute;
            top: 50%;
            left: 25%;
            transform: translate(-50%,-50%);
            width: 30%;
            height: 80%;
            padding: 80px 40px;
            box-sizing: border-box;
            background: rgba(0,0,0,.5);
        }
        .avatar {
            position: absolute;
            width: 80px;
            height: 80px;
            border-radius: 20%;
            overflow: hidden;
            top: calc(-80px/2);
            left: calc(50% - 40px);
        }
        .Reservation-form h2 , label {
            margin: 0;
            padding: 0 0 20px;
            color: #fff;
            text-align: center;
            text-transform: uppercase;
        }

        .Reservation-form select {
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 700;
    color: #444;
    padding: .6em 1.4em .5em .8em;
    width: 100%;
    max-width: 100%; 
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em;

}
.select-css::-ms-expand {
    display: none;
}
.select-css:hover {
    border-color: #888;
}
.select-css:focus {
    border-color: #aaa;
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222; 
    outline: none;
}
.select-css option {
    font-weight:normal;
}

        .map {
        	position: absolute;
        	right: 20%;
        	outline: none;
        	pointer-events: none;
            top: 10%;
        	border: none;
            width: 30%;
            height: 80%;
        	border: 0px transparent;

        }
        #pointer-s {
            position: absolute;
            top: 28%;
            left: 66.2%;
            height: 4.5%;
            display: none;

        }
        #pointer-h {
            position: absolute;
            top: 20.7%;
            left: 65%;
            height: 4.5%;
            display: none;
        }
        #pointer-d {
            position: absolute;
            top: 58.6%;
            left: 68.5%;
            height: 4.5%;
            display: none;
        }
        #start {
            position: absolute;
            top: 45%;
            left: 10%;
                font-size: 16px;
    font-family: sans-serif;
    font-weight: 700;
    color: #444;
    padding: .6em 1.4em .5em .8em;
    width: 72%;
    max-width: 100%; 
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em;
        }
        #from {
            position: absolute;
            top: 41%;
            left: 10%;
        }
        #to {
            position: absolute;
            left: 10%;
            top: 56%;
        }
        #labelmax {
            position: absolute;
            left: 56%;
            top: 70%;
        }
        #labelmin {
            position: absolute;
            left: 10.3%;
            top: 70%;
        }
        #min {
            position: absolute;
            top: 74%;
            left: 10%;
                font-size: 16px;
    font-family: sans-serif;
    font-weight: 700;
    color: #444;
    padding: .6em 1.4em .5em .8em;
    width: 25%;
    max-width: 100%; 
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em;
        }
         #max {
            position: absolute;
            top: 74%;
            right: 10%;
                font-size: 16px;
    font-family: sans-serif;
    font-weight: 700;
    color: #444;
    padding: .6em 1.4em .5em .8em;
    width: 25%;
    max-width: 100%; 
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em;
        }
        #end {
            position: absolute;
            top: 60%;
            left: 10%;
                font-size: 16px;
    font-family: sans-serif;
    font-weight: 700;
    color: #444;
    padding: .6em 1.4em .5em .8em;
    width: 72%;
    max-width: 100%; 
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em;
            
        }
        html, body {
    height: 100%;
}


a {
    text-decoration: none;
    color: inherit;
}

.cta {
    position: absolute;
    top: 85%;
    right: 25%;
    margin: auto;
    padding: 19px 22px;
    transition: all .2s ease;
}

.cta:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 28px;
    background: rgba(26,188,156, 0.5);
    width: 56px;
    height: 56px;
    transition: all .3s ease;
}

.cta span {
    position: relative;
    font-size: 16px;
    line-height: 18px;
    font-weight: 900;
    letter-spacing: .25em;
    text-transform: uppercase;
    vertical-align: middle;
}

.cta svg {
    position: relative;
    top: 0;
    margin-left: 10px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #111;
    stroke-width: 2;
    transform: translateX(-5px);
    transition: all .3s ease;
}

.cta:hover:before {
    width: 100%;
    background: #1abc9c;
}

.cta:hover svg {
    transform: translateX(0);
}

.cta:active {
    transform: scale(0.96);
}


nav {
  
top: 0.3%;
left: 30%;
  position: absolute;
  width: 590px;
  height: 50px;
  background-color: #34495e;
  border-radius: 8px;
  font-size: 0;
}
nav a {
  line-height: 50px;
  height: 100%;
  font-size: 15px;
  display: inline-block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  color: white;
  cursor: pointer;
}
nav .animation {
  position: absolute;
  height: 100%;
  top: 0;
  z-index: 0;
  transition: all .5s ease 0s;
  border-radius: 8px;
}
a:nth-child(1) {
  width: 100px;
}
a:nth-child(2) {
  width: 110px;
}
a:nth-child(3) {
  width: 100px;
}
a:nth-child(4) {
  width: 160px;
}
a:nth-child(5) {
  width: 120px;
}
nav .start-home, a:nth-child(1):hover~.animation {
  width: 100px;
  left: 0;
  background-color: #1abc9c;
}
nav .start-about, a:nth-child(2):hover~.animation {
  width: 110px;
  left: 100px;
  background-color: #e74c3c;
}
nav .start-blog, a:nth-child(3):hover~.animation {
  width: 100px;
  left: 210px;
  background-color: #3498db;
}
nav .start-portefolio, a:nth-child(4):hover~.animation {
  width: 160px;
  left: 310px;
  background-color: #9b59b6;
}
nav .start-contact, a:nth-child(5):hover~.animation {
  width: 120px;
  left: 470px;
  background-color: #e67e22;
}


iframe {
    position: absolute;
    border: 1px solid black;
    left: 55%;
    top: 10%;
    width: 30%;
    height: 80%;
}

.output {
    background: #eee;
}