*{
	margin:0;
	padding:0;
	transition: ease all 250ms;
	text-transform: lowercase;

}
body{
	font-family: 'Comfortaa', cursive;
	background-color:black;
	box-sizing: border-box; 
}

.header{
	margin: 0 auto;
	background-image: url(fernlogo.png);
	background-position: 2em;
	background-repeat: no-repeat;
	height: 7em;
	position: relative;
}
.nav{
	background-color: #000;
	width: 100%;
	height: calc(100vh - 7em);
	display: none;
	position: absolute;
	top:7em;
	z-index: 60;
	box-sizing: border-box;
}

.nav ul{
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
}
.nav ul li{
	width: 100%;
	text-align: center;
}
.nav ul li a{
	background-color: #000;
	font-size: 1.5em;
	display: block;
	color: #FEFDFB;
	text-decoration: none;
	padding: 2.5rem;
	font-family: 'Comfortaa', cursive;
	border-top:thin grey solid;
}
.nav ul li:last-child{
	border-bottom: thin grey solid;
}
.fa-times, .fa-bars{
	color: #FEFDFB;
	float: right;
	font-size: 2.5em;
	padding: 2rem;
}

/*slider*/

 .swiper-container {
        width: 100% !important;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        background-size: cover;
        background-position: center;
        position: relative;
    }
    .swiper-slide>div{
    	font-size: .75em;
    	display: inline-block;
    	color:#FEFDFB;
    	border: thin #FEFDFB solid;
    	background-color: rgba(0,0,0,0.6);
    	padding: .5em;
    	position: absolute;
    	right:3em;
    	bottom:1em;
    }
    .gallery-top {
        height: 20em !important;
        width: 100%;
    }
    .gallery-thumbs {
        height: 5em !important;
        box-sizing: border-box;
        padding: 10px 0;
    }
    .gallery-thumbs .swiper-slide {
        width: 25%;
        height: 100%;
        opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }

/*calculator*/

.calculator-wrap{
	display: flex;
	flex-wrap: wrap;
	width:calc(100% - 0.1em);
	margin: 0 .1em 0 0;
	position: relative;
	border:thin #00DD7D solid;
	}

.slider-container{
	margin: 0 auto;
	font-size: 2em;
	width: 100%;
	height: 100%;
	z-index: 40;
}
.slider-inner{
	margin: 1rem auto;
	width: 90%;
	height: 38rem;
	background-color: #FEFDFB;
	box-shadow: 4px 4px 15px -5px rgba(0,0,0,0.75);
}
input[type=button]{
	 font-family: 'Comfortaa', cursive; 
}
.slider-inner p{
	text-align: center;
	padding-top:1.25em;
}
.slider-inner li{
	list-style-type: none;
}
.slider-inner select{
	margin-left:50%;
	transform: translateX(-50%);
	width: 12.5rem;
	font-size:.5em;
	border: thin #000 solid;
	border-radius:0;
}
.slider-inner .update{	
	font-size: 1.5rem;
	width: 12.5rem;
	margin-top: 3rem;
	margin-left:50%;
	transform: translateX(-50%);
	background-color: #00DD7D;
	padding: .5rem;
	border: thin black solid;
}	

.layer{
	color:#00DD7D;
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height: 100%;

}

.layer>p{
	display: none;
}

.display-container{
	display: flex;
	flex-wrap: wrap;
	border-top: thin #00DD7D solid;
	width: 100%;

}
.display-container-inner{
	margin: 0 auto;
	width: 90%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.vehicle-options{
	display: flex;
	flex-wrap: wrap;
	position: relative;
	background-color: #FEFDFB;
	margin: 1em auto;
	box-shadow: 4px 4px 15px -5px rgba(0,0,0,0.75); 
}
.vehicle-img{
	width: 40%;
}
.vehicle-options p{
	font-size: 12px;
	width:35%;
	padding:2.5em 1em 1em 2em;
	margin:0 auto;
}
.unavailable{
	position: absolute;
	height: 20em;
	width: 100%;
	background-color: rgba(0,0,0,0.8);
	z-index: 60;
	box-sizing: border-box;
}
.vehicle-options .unavailable>p{
	font-size: 1.5em;
	width: 10em;
	color: #f9f5ea;
	text-align: center;
	padding: 3em 1em 2em 1em;
	
}
.hidden{
	display: none !important;
}

.vehicle-img>img{
	height: 6em;
	padding: 1em;
}

.cost{
	font-size: 30px;
	line-height: 4em;
	position: absolute;
	text-align: center;
	width: 3em;
	height: 4em;
	background-color: #5FFF3F;
	box-shadow: 4px 4px 15px -5px rgba(0,0,0,0.75); 
	top:4em;
	left:.75em;
	transform: skewY(3deg);
}

.fuel-cost{
	width:100%;
	border: thin grey solid;
	margin: .35em;

}
.fuel-cost p{
	padding: 0;
	width: 40%;
	padding-left: 12em;
	padding-top: 1em;
	margin-right: 2em;
}
.fuel-cost p>span{
	color:#FEFDFB;
	font-size: 1.5em;
	padding: .5em;
	margin-right: 1em;
	line-height: 4em;
	background-color: #363434;
	border-radius: .5em;
}

.select{
	font-family: 'Comfortaa', cursive; 
	font-size: 16px;
	width: 100%;
	text-align: center;
	height: 3.5em;
	background-color: #00DD7D;
	margin:.35em;
	border: thin black solid;
}
.select:hover{
	height: 3.5rem;
	font-size: 24px;
	margin: .35rem;
}

.final-selection{
	margin:0 auto;
	width: 100%;
	border-top: thin #00DD7D solid;
	z-index: 800;
}
.final{
	margin: 1em auto;
	background-color: #FEFDFB;
	width:90%;
	display: flex;
	flex-wrap: wrap;
	box-shadow: 4px 4px 15px -5px rgba(0,0,0,0.75);
}
.final-top{
	width: 100%;
	height: 19em;
}
.final-top>img{
	display: block;
	margin: 3em auto;
	width: 16em;
}
.final-bottom{
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 1em;
	background-color: #ECECEC;
	margin:1em;
}
.final-bottom>p{
	width: 100%;
	font-size: 1em;
	text-align: left;
	padding-top: 1em;
	padding-left: 1em;
	color: #363434;
	
}
.cost-style{
	margin-top: 2em;
	margin-left:1em;
	width: 10.3em;
}
.cost-style>div{
	font-size: 2em;
	height: 3em;
	background-color: #5FFF3F;
	box-shadow: 4px 4px 15px -5px rgba(0,0,0,0.75); 
	text-align: center;
	line-height: 3em;
}
.insurance{
	margin-top: 2em;
	margin-left:1em;
	width: 10.3em;
}
.insurance>div{
	font-size: 2em;
	height: 3em;
	background-color: #65C8BF;
	box-shadow: 4px 4px 15px -5px rgba(0,0,0,0.75); 
	text-align: center;
	line-height: 3em;
}
.final-selection input{
	width: 2em;
	height: 2em;
}
.book-now{
	width: 10em;
}
.book-now>div{
	font-size: 2em;
	height: 3em;
	background-color: #FF6D68;
	box-shadow: 4px 4px 15px -5px rgba(0,0,0,0.75); 
	text-align: center;
}
.book-now>div:hover{
	cursor:pointer;
}

.things{
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	width:100%;
	overflow: hidden;
}
h2{
	font-family: 'Comfortaa', cursive;
	color: #FEFDFB;
	padding: 1em;
	width: 100%;
}
#getting-around, #history{
	width: 50%;
	margin: 0;
}

.things>div{
	color:#FEFDFB;
	height: 15em;
	border-top: thin #FEFDFB solid;
	position: relative;

}
.things>div>div>p{
	font-size: 1.5em;
	font-family: 'Comfortaa', cursive;
	color: #FEFDFB;
	padding-top: 1em;
	padding-bottom: .25em;
	
}
.title{
	display: flex;
	flex-wrap: wrap;
	display: inline-block;
	border-bottom: thin #FEFDFB solid;
	margin-left: 1em;
}
.things .paragraph{
	opacity: 0;
	max-width: 35em;
	font-size: .75em;
	font-family: 'Comfortaa', cursive;
	padding-left: 2em;
	padding-right: 4em;
	transition: ease all 2000ms;
}

.things>div>div{
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: -70%; 
	
}
.things>div:hover>div{
	bottom: 0;
	background-color: rgba(0,0,0,0.75);
}
.things>div:hover .paragraph{
	opacity: 1;
}
#first{
	width: 100%;
	background-image: url(hiking.jpg);
	background-position:  center;
	background-size: cover;
}
#second{
	width: 100%;
	background-image: url(wine.jpg);
	background-position:  center;
	background-size: cover;
}
#third{
	width: 100%;
	background-image: url(beach.jpg);
	background-position:  center;
	background-size: cover;
}
#fourth{
	width: 100%;
	background-image: url(adventure.jpg);
	background-position:  center;
	background-size: cover;
}
#fifth{
	width: 100%;
	background-image: url(whale.jpg);
	background-position:  center;
	background-size: cover;
}
#sixth{
	width: 100%;
	background-image: url(glowworm.jpg);
	background-position:  center;
	background-size: cover;
}

.treaty-inner{
	display: flex;
	flex-wrap: wrap;
	width:calc(100% - 0.1em);
	margin: 0 .1em 0 0;
	padding-bottom: 1em;
	position: relative;
	border:thin #00DD7D solid;
}
.one{
	margin:1em auto;
	background-color:#FEFDFB; 
	width: 90%;
}
.one>p{
 	padding: 1em;
}
strong{
	font-size: 1.5em;
}
.two img{
	display: block;
	margin:0 auto;
	width: 90%;
}
.three{
	margin:1em auto;
	background-color:#FEFDFB; 
	width: 90%;
}
.three>p{
 	padding: 1em;
}
.four img{
	display: block;
	margin:0 auto;
	width: 90%;
}

.contact-wrap{
	display: flex;
	flex-wrap: wrap;
}

.contact-inner{
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 10em;
}


h3{
	color: #00DD7D;
	padding-top: 1.5rem;
	margin-left: 1.5rem;
	padding-bottom: .25em;
	margin-bottom: 1em;
	border-bottom: #FEFDFB thin solid;
}
.contact1{
	width: 50%;
	display: flex;
	flex-wrap: wrap;
}
.contact2{
	width: 50%;
	display: flex;
	flex-wrap: wrap;
}
.contact-wrap i{
	width: 1em;
	color: #00DD7D;
	padding-right: 1em;
}
.contact-wrap p{
	width: 100%;
	color: #FEFDFB;
	padding-left: 1.5em;
	padding-bottom: .5em;
}
footer{
	background-image: url(fernblack.png);
	background-position: right;
	background-repeat: no-repeat;
	height: 3.5em;
	background-color: #FEFDFB;
	line-height: 4.5em;
	padding: 2em;
}


@media only screen and (min-width: 40em){
	.header{
		background-image: url(fernlogo.png);
		background-color: #000;
		position: fixed;
		z-index: 1000;
		top:0;
		width: 100%;
	}
	.nav{
		background-color:transparent;
		height: 5em;
		position: static;
		display: block !important;
	}
	.nav-up{
		top:-7em;
	}

	.nav ul{
		margin-right: 2em;
		padding-top: 1.8em;
		display: flex;
		flex-wrap: nowrap;
		list-style-type: none;
		justify-content: flex-end;
		
	}
	.nav ul li{
		padding-left: 1em;
		width: auto;
		text-align: left;
		position: relative;
	}
	.nav ul li a:after{
		position: absolute;
		left:0;
		bottom: .5em;
		content: "";
		height: 2px;
		background-color: #00DD7D;
		width: 0%;
		margin-left:1em;
		margin-right: 1.75em;
		display: inline-block;
		transition: ease all 400ms;
	}
	.nav ul li a:hover:after{
		width: calc(100% - 1.75em);
	}
	.nav ul li:last-child{
	border-bottom: none;
}
	.nav ul li a{
		padding: 0;
		font-size: 1em;
		display: block;
		color: #FEFDFB;
		text-decoration: none;
		padding-top: 1em;
		padding-left: 0;
		padding-right: 1em;
		padding-bottom: 1em;
		font-family: 'Comfortaa', cursive;
		border-top:none;
	}
	.fa-bars, .fa-times{
		display: none;
	}
	.gallery-top {
		margin-top: 7em;
        height: 30em !important;
        width: 100%;
    }
    .gallery-thumbs {
        height: 7em !important;
        box-sizing: border-box;
        padding: 10px 0;
    }
    .swiper-slide>div{
    	font-size: 1.3em;
    	display: inline-block;
    	color:#FEFDFB;
    	border: thin #FEFDFB solid;
    	background-color: rgba(0,0,0,0.6);
    	padding: 1em;
    	position: absolute;
    	right:5rem;
    	bottom:3rem;
    }
	.calculator-wrap{
		margin:0 auto;
		width: 40em;
	}
	.display-container-inner{
		margin: 0 auto;
		width: 90%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.vehicle-options{
		max-width: 48.5%;
		flex:0 0 48.5%;
		display: flex;
		flex-wrap: wrap;
		position: relative;
		background-color: #FEFDFB;
		box-shadow: 4px 4px 15px -5px rgba(0,0,0,0.75); 
		margin:1em 0;
	}
	.vehicle-options>p{
		font-size: 12px;
		width:35%;
		padding:2.5em 1em 1em 4em;
		margin:0 auto;
	}
	.unavailable{
		height: 20.5em;
	}
	.things{
		width:100%;
	}
	.things>div{
		border-top: none;
	}
	h2{
		text-align: center;
	}
	#getting-around, #history{
	width: 50%;
	margin: 0 auto;
}

	#first{
		flex:1 0 64%;
		background-image: url(hiking.jpg);
		background-position:  center;
		background-size: cover;
		border-right: thin #FEFDFB solid;
	}
	#second{
		flex:1 0 34%;
		background-image: url(wine.jpg);
		background-position:  center;
		background-size: cover;
	}
	#third{
		flex:1 0 34%;
		background-image: url(beach.jpg);
		background-position:  center;
		background-size: cover;
		border-right: thin #FEFDFB solid;
	}
	#fourth{
		flex:1 0 64%;
		background-image: url(adventure.jpg);
		background-position:  center;
		background-position:100% 70%;
		background-size: cover;
	}
	#fifth{
		flex:1 0 64%;
		background-image: url(whale.jpg);
		background-position:  center;
		background-size: cover;
		border-right: thin #FEFDFB solid;
	}
	#sixth{
		flex:1 0 24%;
		background-image: url(glowworm.jpg);
		background-position:  center;
		background-size: cover;
	}

	.treaty-inner{
		width: 40em;
		margin:0 auto;
	}
	.contact-inner{
		margin:0 auto;
		width: 40em;
	}

	h3{
		margin-left: 0em;
	}
	.contact1{
		display: flex;
		justify-content: center;
	}
	.contact2{
		display: flex;
		justify-content: center;
	}
	.contact1>p{
		margin-left: 5.25em;
	}
	.contact2>p{
		margin-left: 4.75em;
	}
	footer{
		background-image: url(pureblack.png);
	}
}
@media only screen and (min-width: 70em){
	.header{
		background-image: url(logo1.png);
	}
	.gallery-top {
		margin-top: 7em;
        height: 35em !important;
        width: 100%;
    }
    .gallery-thumbs {
        height: 9em !important;
        box-sizing: border-box;
        padding: 10px 0;
    }
    .swiper-slide>div{
    	font-size: 1.5em;
    	display: inline-block;
    	color:#FEFDFB;
    	border: thin #FEFDFB solid;
    	background-color: rgba(0,0,0,0.6);
    	padding: 1em;
    	position: absolute;
    	right:5rem;
    	bottom:3rem;
    }
	.calculator-wrap{
		background-size: cover;
		background-position: center;
		display: flex;
		flex-wrap:nowrap;
		width:60em;
		margin: 0 auto;
		position: relative;
	}


	.layer{
		display: flex;
		flex-wrap: wrap;
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height: 100%;

	}

	.layer>p{
		display: block;
		margin: 2.5em;
		margin-top: 3.4em;
		font-size: 3.5em;
		height: 100%;
		text-align: center;
		padding-left: 5.4em;
	}

	.slider-container{
		width:10em;
		margin: 0;	
		border-right: thin #00DD7D solid;
	}

	.display-container{
		margin-top: 0;
		background-color:transparent;
		width: 40em;
		height: 100%;
		border-top: none;
		margin-left: .5em;

	}
	.display-container-inner{
		margin: .5em 0em .5em 0em;
	}
	.vehicle-options{
		max-width: 38em;
		flex:0 0 100%;
		display: flex;
		flex-wrap: nowrap;
		position: relative;
		background-color: #FEFDFB;
		height: 8.76em;
		width: 38em;
		margin: .5em;
		box-shadow: 4px 4px 15px -5px rgba(0,0,0,0.75); 

	}
	.vehicle-options>p{
		width: 13em !important;
	}
	.unavailable{
		height: 8.8em;
	}
	.vehicle-options .unavailable>p{
		font-size: 1em;
		width: 37em;
		color: #f9f5ea;
		text-align: center;
		padding-top: 3.5em;
	}
	.hidden{
		display: none !important;
	}
	.small-car{
		display: flex;
		position: relative;
		height: 8.76em;
		width: 38em;
	}
	.large-car{
		display: flex;
		position: relative;
		height: 8.76em;
		width: 38em;
	}
	.motor-home{
		display: flex;
		position: relative;
		height: 8.76em;
		width: 38em;
	}
	.vehicle-img>img{
		width: 9em;
		height: 6em;
		padding: 1em;
	}
	.vehicle-options p{
		font-size: 12px;
		width:9em;
		padding:2em 1em 2em 0em;
	}

	.cost{
		font-size: 24px;
		line-height: 4em;
		position: absolute;
		text-align: center;
		width: 3em;
		height: 4em;
		background-color: #5FFF3F;
		box-shadow: 4px 4px 15px -5px rgba(0,0,0,0.75); 
		top:-0.4em;
		left:13em;
		transform: skewY(3deg);
	}
	
	.fuel-cost{
		width:12em;
		border: thin grey solid;
		margin: .5em 0 .5em .5em;

	}
	.fuel-cost p{
		padding: 0;
		width: 8em;
		padding-left: 8em;
		padding-right: 2em;
		padding-top: 1em;
	}

	.select{
		font-size: 16px;
		width: 9em;
		text-align: center;
		height: 7.75em;
		background-color: #00DD7D;
		margin:.5em;
	}
	.select:hover{
		width: 9rem;
		height: 7.75rem;
		font-size: 24px;
		margin: .5rem;
	}

	.final-selection{
		margin:1em auto 1em;
		width: 38rem;
		background-color:#FEFDFB;
		border-top: none;
		z-index: 800;
		box-shadow: 4px 4px 15px -5px rgba(0,0,0,0.75); 
	}
	.final{
		margin: 1em auto 1em;
		width:37em;
		height: 36em;
		display: flex;
		flex-wrap: wrap;
		border-radius: .2rem;
		box-shadow: none;
	}
	.final-top>img{
		display: block;
		margin: 1em auto 1em;
		width: 25em;
	}
	.final-bottom{
		margin:.5em;
	}
	.things{
		width:100%;
	}
	.things>div{
		height: 20em;
	}
	.things>div>div{
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: -77.5%; 
		
	}

	#first{
		flex:1 0 24%;
		background-image: url(hiking.jpg);
		background-position:  center;
		background-size: cover;
		border-right: thin #FEFDFB solid;
	}
	#second{
		flex:1 0 24%;
		background-image: url(wine.jpg);
		background-position:  center;
		background-size: cover;
		border-right: thin #FEFDFB solid;
	}
	#third{
		flex:1 0 49%;
		background-image: url(beach.jpg);
		background-position:  center;
		background-size: cover;
		border-right: none;
		
	}
	#fourth{
		flex:1 0 49%;
		background-image: url(adventure.jpg);
		background-position:  center;
		background-position:100% 70%;
		background-size: cover;
		border-right: thin #FEFDFB solid;
	}
	#fifth{
		flex:1 0 24%;
		background-image: url(whale.jpg);
		background-position:  center;
		background-size: cover;
		border-right: thin #FEFDFB solid;
	}
	#sixth{
		flex:1 0 24%;
		background-image: url(glowworm.jpg);
		background-position:  center;
		background-size: cover;
	}
	.treaty-inner{
		width: 60em;
		margin:0 auto;
	}
	.one{
	margin:1em;
	background-color:#FEFDFB; 
	width: 100%;
	}
	.one>p{
	 	padding: 1em;
	}
	.two img{
		display: block;
		margin-left: 1em;
		width: 58em;
	}
	.three{
		margin:1em;
		background-color:#FEFDFB; 
		width: 100%;
	}
	.three>p{
	 	padding: 1em;
	}
	.four img{
		display: block;
		margin-left: 1em;
		width: 58em;
	}
}