@import url(https://fonts.googleapis.com/css?family=Dosis:400,300);

@-webkit-keyframes entrance {
	
	0%{ opacity:0 }
	70%{opacity: 0
		; -webkit-filter: blur(15px)}
	100%{opacity: 1
		; -webkit-filter: blur(0px)}
	
}

@keyframes entrance {
	
	0%{ opacity:0 }
	70%{opacity: 0
		; -webkit-filter: blur(15px)}
	100%{opacity: 1
		; -webkit-filter: blur(0px)}
	
}

html {
background: url("Project- LanteaLoading.svg")
; background-repeat: no-repeat
; background-size: 600px 80px
; background-position: bottom
; -webkit-animation: entrance .5s; animation: entrance .5s
}

body {
margin: 0
; font-family: Dosis, Acumin Pro, Avenir, Arial, sans-serif
; color: white
}

.null {
pointer-events: none	
}

a {
cursor: pointer !important	
; text-decoration: none
; color: white
}

#fullogo {
display: inline-block
}

header {
width: 70px
; height: 3rem
; overflow: hidden
; padding: 2.5rem
; -webkit-transition:.4s; transition: .4s
}

header:hover {
width: 600px
; height: 15rem
; -webkit-transition:.4s; transition: .4s	
}

nav {
padding-top: 1rem	
}

video {
position: fixed
; top: 50%
; left:50%	
; min-width: 100%
; min-height: 100%
; width: auto
; height: auto
; -webkit-transform: translateX(-50%) translateY(-50%)
; transform: translateX(-50%) translateY(-50%)
; z-index: -15
; -webkit-transition:.4s; transition: .4s	
}

.button {
background: none
; letter-spacing: 5px
; border-radius: 50px
; border: none
; color: white
; text-transform: uppercase
; padding: .5rem
; z-index: 25
; -webkit-transition:.4s; transition: .4s	
}

.button:hover {
background: rgba(141,24,27,0.69)
; padding: .5rem 3rem .5rem 3rem
; -webkit-transition:.4s; transition: .4s	
}

.mainButton {
font-size: .8rem
; display: block
; max-width: 100px
; margin-left: 2%
}

.next,.prev{
margin-top: 10%

}

.next {
position: absolute
; right: 10%
}

.prev {
margin-left: 10%
; opacity: 0
}

.next-page, .prev-page {
width: 100px
; position: absolute
; bottom: 5%
; background: rgba(141,24,27,0.2)
; border-radius: 50px
; padding: .5rem
; -webkit-transition:1s; transition: 1s
}

.next-page:hover, .prev-page:hover {
background: rgba(141,24,27,0.69)
; padding: .5rem 3rem .5rem 3rem
; -webkit-transition:.4s; transition: .4s	
}

.arrow-next, .arrow-prev{
fill:none
; stroke:#dfdfdf
; stroke-linecap:round
; stroke-miterlimit:10
; stroke-width:1.5px
}

.next-page, .nextmodel {
right: 30%	
}

.prev-page, .prevmodel  {
left: 30%	
}

.HeaderNames h1 {
font-weight: lighter
; font-size: 3rem
; letter-spacing: 25px
; text-transform: uppercase
; -webkit-transition:.4s; transition: .4s
}

.HeaderNames {
opacity: 0
; position: absolute
; left: -60%
; bottom: 15%
; width: 40%
; padding: .5rem 2rem .5rem 2rem
; background: rgba(90,0,1,0.00)
; border-top: 15px solid rgba(141,24,27,0)
; border-bottom: 15px solid rgba(141,24,27,0)
; -webkit-transition:.4s; transition: .4s
}

.HeaderNames:hover {
background: rgba(51,51,51,0.30)
; border-top: 15px solid rgba(141,24,27,.6)
; border-bottom: 15px solid rgba(141,24,27,.6)
; -webkit-transition:.4s; transition: .4s
}

.pagetitle, .nextmodel, .prevmodel {
font-weight: lighter
; font-size: 1rem
; letter-spacing: 20px	
; text-transform: uppercase
}

.pagetitle {
text-align: center
; -webkit-transform: translateY(-300px)
; transform: translateY(-300px)
; padding: 1rem
; width: 600px
; margin: 0 auto
; border-radius: 50px
; -webkit-transition:1s; transition: 1s
}

.pagetitle:hover {
background: rgba(141,24,27,.6)
; padding: 1rem 3rem 1rem 3rem
; -webkit-transition:.3s; transition: .3s
}

.nextmodel, .prevmodel {
bottom: 0
; position: absolute
}

footer {
opacity: .1
; -webkit-transition:1s; transition: 1s
}

footer:hover {
opacity: 1
; -webkit-transition:.ss; transition: .ss
}



/*

#Hcar2 h1, #Hcar3 h1, #Hcar4 h1 {
text-shadow: 0px 0px 50px red
; color: black	
}

*/


.infoBox {
background: rgba(25,25,25,.4)
; position: absolute
; margin-left: -35%
; width: 600px
; height: 300px
; z-index: -5
; -webkit-transition:.4s; transition: .4s
}

#infoOne h1, #infoTwo h1, #infoThree h1, #infoFour h1 {
text-transform: uppercase
; letter-spacing: 5px
}

#infoOne, #infoTwo, #infoThree, #infoFour {
opacity: 0
; padding: 2rem
; font-weight: lighter
; position: absolute
; width: 500px
; height: 0px
; overflow: hidden
; -webkit-transition:.6s; transition: .6s
}

#infoOne:hover, #infoTwo:hover, #infoThree:hover, #infoFour:hover {
background: rgba(25,25,25,.5)
; -webkit-transition:.3s; transition: .3s
}

#infoOne {
left: 5%	
}

#infoTwo {
right: 5%
}
#infoThree {
right: 20%
; bottom: 15%	
}

#infoFour {
left: 60%
; bottom: 35%
}

.colours {
opacity: 0
; -webkit-transition:.4s; transition: .4s
}

.colours:hover {
 -webkit-transition:.4s;
; transition: .4s
}

.colours div {
width: 25px
; height: 25px	
; display: inline-block
; opacity: .3
; border-radius: 50px
; -webkit-transition:.1s; transition: .1s	
}

.colours div:hover {
opacity: 1
; -webkit-transition:.4s; transition: .4s	
}

#red {
background: rgba(131,0,2,1.00)	
}

#green {
background: rgba(0,124,18,1.00)
}

#blue {
background: rgba(0,80,176,1.00)
}

#orange {
background: rgba(255,174,0,1.00)
}

#purple {
background: rgba(123,0,185,1.00)
}

#lime {
background: rgba(140,185,0,1.00)
}

#secondVideo {
opacity: 0
; -webkit-transition:.4s; transition: .4s	
}

#interior {
cursor: pointer	
}

#GROUNDEDVideo {
opacity: 0
; -webkit-transition:.4s; transition: .4s	
}

#FLIGHTVideo {
opacity: 0
; -webkit-transition:.4s; transition: .4s	
}

#BEYONDVideo {
opacity: 0
; -webkit-transition:.4s; transition: .4s	
}