@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("C:/Users/Abir/Desktop/Travel & Travel/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);
}
h2 {
    position: absolute;
    left: 23%;
}

        .Reservation-form
        {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 60%;
            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;
        }

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

}
#rightform1 {

position: absolute;
right: 5%;
width:35%;

 }
.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;
}

@import url("https://fonts.googleapis.com/css?family=Open+Sans:600");
@-webkit-keyframes short-press {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes short-press {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
html,
body {
  width: 100%;
  height: 100%;
}



.hide {
  display: none;
}

.submit-button {
  display: block;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: .75em;
  position: absolute;
  letter-spacing: 1px;
  top: 80%;
  left: 43%;
  height: 38px;
  width: 120px;
  line-height: 38px;
  overflow: hidden;
  background: #4dbecf;
  border-radius: 3px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border: 0;
  cursor: pointer;
  transition: all .3s ease;
}
.submit-button:hover, .submit-button:focus {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.submit-button.animated {
  -webkit-animation: 0.75s short-press cubic-bezier(0.77, 0, 0.175, 1) forwards;
          animation: 0.75s short-press cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.submit-button > span {
  display: block;
  color: white;
  text-align: center;
}
.submit-button > span.pre-state-msg {
  transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1);
  transition-delay: .75s;
}
.submit-button.state-1 .pre-state-msg {
  margin-top: -38px;
}
.submit-button.state-2 .pre-state-msg {
  margin-top: -76px;
}

