/* Font Imports */
@import url('https://fonts.googleapis.com/css?family=Courier+Prime|Josefin+Sans&display=swap');

/* Initializing Body */
body{
  margin:0; 
  padding:0; 
  font: 16px/1.5 roboto, arial, sans-serif;
  overflow-x:hidden;
}

/* Alert Styling */
.alert{
  padding: 20px;
  background-color: black;
  color: white;
  text-align:center;
}

.alert-button{
  font-family: roboto;
  font-size: 1em;
  font-weight: bold;
  background: black;
  color: #fff;
  border:0; 
  transition: 0.3s;
}

.alert-button:hover {
  background: #333;
} 

.alert-close {
  margin-top: -4px;
  color: white;
  float: right;
  font-size: 40px;
  font-weight: 600;
  line-height: 30px;
  transition: 0.3s;
  overflow: hidden;   
}

.alert-close:hover {
  color: black;
  cursor: pointer;
}

/* Nav Bar Styling */
.navbar{
  width:100%;
  margin:0;
  height:55px;
  background: #2E395A;  
} 

/* Side Nav Styling */
.open-slide .fas{
  display:none;
  float:left;
  color:white;
  font-size: 35px;
  padding: 10px 10px 10px 15px;
} 

.fas:hover{
  background: #ccc;
}

#side-menu{
  min-height:700px;
}

.side-nav{
  height:100%;
  width:0;
  position:absolute;
  z-index:800;
  top:1px;
  left:0;
  background-color:#111;
  overflow:hidden;
  padding-top:60px;
  transition:0.5s;
}

.side-nav a{
  padding:10px 10px 10px 30px;
  text-decoration:none;
  font-size:22px;
  color:#ccc;
  display:block;
  transition:0.3s;
}

.side-nav a:hover{
  color: #2E395A;
}

.side-nav .btn-close{
  position:absolute;
  top:0;
  right:22px;
  font-size:36px;
  margin-left:50px;
}

/* Main Nav Styling */
.navbar .main-nav {
  float:left;
  margin-left:-40px;
}

.main-nav a{
  color:white;
  text-align:center;
  text-decoration:none;
  margin-left:25px;
  padding:20px;
}

.main-nav li{ 
  float:left;
  display:inline;
} 

.main-nav a:hover{
  color:#718A91;
} 

.dropdown .dropbtn{
  margin-left:25px;
  font-size: 16px;
  font-family:roboto;
  border:none;
  color:white;
  background-color:inherit;
  padding-bottom:18px;
}

.dropbtn:hover{
  cursor:pointer;
  color:#718A91;
}

.dropdown-content{ 
   display: none;  
} 

.dropdown-content a {
  color: black;
  padding: 14px;
  text-decoration: none;
  display: block;
  text-align: left;
  border: 1px solid #ccc;
  background:white;
} 

.dropdown:hover .dropdown-content {
  display: block;
  position:absolute; 
} 

.dropdown-content a:hover {
  background: #ddd;
} 

/* Contact Nav Styling */
.navbar .contact-nav{ 
float:right
}

.contact-nav li{ 
  display:inline; 
  padding:20px; 
  color:white;
} 

.fab{
  font-size:20px;
} 

.fab:hover{
  color:#718A91;
}

.contact-nav a{ 
  color:white;
  text-decoration:none;
}

/* Reservation Button and Menu Styling */
.reserve-button{ 
  background: #1a1411;
  padding:18px;
  margin-right:-60px;
  color:white;
  text-decoration:none;
} 

li .mobile{
  display:none;
} 

li .mobile .fas{
  position:absolute;
  font-size:20px;
  background: #718A91;
  color:white;
  text-decoration:none;
  padding:18px; 
  margin-top:-58px;
  right:0;
}

#reserve-menu{
  min-height:700px;  
}

.reserve-panel{
  height:100%;
  width:0;
  position:absolute;
  z-index:700;
  top:120px;
  right:0;
  background-color:white;
  overflow:hidden;
  padding-top:60px;
  transition:0.5s;
}

.reserve-panel .btn-close{
  position:absolute;
  top:2px;
  left:15px;
  font-size:36px;
  margin-left:0px;
} 

.btn-close{ 
  text-decoration:none;
  color:black;
  font-weight: bold;
}

.btn-close:hover{
  color: #ddd;
} 

#reservations{ 
  margin-left:50px;
  width:350px;
}

#reservations h2{
  width:200px;
  text-transform: uppercase;
  font-family:roboto; 
  font-size: 40px;
  color: #2E395A;
  margin-bottom: 15px;
} 

#reservations p{
  width:250px;
  font-size: 20px;
  margin-bottom:15px;   
}

.heading{ 
  width:200px;
  font-family:roboto;
  color:#2E395A;
  font-size:24px;
  padding:10px 0px;
  margin-right:50px; 
} 

#location{
  width:200px;
  margin-bottom:18px;
  border-radius:5px;
  border: 1px solid #333;
} 

.date-time{
  width:200px;
  margin-bottom:18px;
  border-radius:5px;
  border: 1px solid #333;
}

.people{
  width:60px;
  margin-left:5px;
  margin-right:60px;
  margin-bottom:25px;
  border-radius:5px;
  border: 1px solid #333;
  text-align:center;
} 

.submit{ 
  border: 3px solid  #2E395A;
  border-radius: 40px;
  background:none; 
  font-size: 24px; 
  color:#2E395A;
  padding:10px;
} 

.submit:hover{ 
  background: #718A91;
  color:white;
} 

/* Modal Styling */
#modal{ 
  display:none;
  position:absolute;
  background:white;
  z-index:102;
  width:850px;
  height:200px;
  left:50%;
  margin-left: -425px;
  padding:0px;
  animation-name:modalOpen;
  animation-duration:1s;  
} 

#modal-header{
  background: #2E395A;
  color: white;
  text-align:center;
  margin-top:-20px;
  margin-bottom:20px;  
} 

.hide {
  opacity: 0.0;
}

 #hero-text h2{
  margin:0;
  padding:0; 
}

.modal-close{
  float:right;
  margin-right:15px;
  margin-top:-56px;
  font-size:25px;
} 

.modal-close:hover{
  color:black; 
  transition:.3s;
  cursor:pointer;
}

#modal-body{
  display:flex;
  justify-content:space-between;
  padding:35px 20px 20px 20px;
  margin-bottom:-126px;
 } 

#modal-body p{
  margin-top:-20px;
  height:200px;
  width:700px;
}

#modal-body img{
  margin-top:-20px;
  width:100px;
  height:100px;
}

#modal-footer{
  background:#2E395A;
  color: white; 
  text-align:center;
}

#modal-footer a{
  color:white;
} 

/* Hero Styling */
#hero{ 
 position:absolute;
 width: 100%;
 height:600px;
 min-height: 400px;
 z-index:-99;
 background:black;
} 

#hero #background-video{
  position:absolute;
  object-fit: cover;
  width:100%;
  height:100%;
  z-index:-100;
  opacity:.6;
  z-index:-1;
} 

#hero #main img{
  position:absolute;
  margin-left:-40px;
  left:0;
  width:200px;
  z-index:4;
} 

  #hero-text{
  display:flex;
  flex-direction: column;     
  justify-content: center;    
  align-items: center;
  text-align:center;
  height:600px;
  width:100%;
  color:white;
  z-index:9;
  background-color:rgba(0, 0, 0, 0);  
} 

#hero-text h2{
  margin-bottom:-80px;
  font-size:100px;
  font-family:josefin sans;
  letter-spacing:10px;
} 

#hero-text h4{
  font-size:40px;
  font-family:courier prime;
  margin-bottom:20px;
}

.video-button{
  background: rgba(0,0,0,0);
  font-size:1.2rem;
  font-weight:900;
  color:white;
  padding: 1rem 2rem;
  border-radius:12px;
  border: 3px solid white;
  transition:0.3s;
  z-index:100;
} 

.video-button:hover{
  transition:0.3s;
  background:#718A91;
  cursor: pointer;
} 

/* YouTube Styling */
#youtube{
  display:none;
  width:100%;
  height:600px;
  margin-top:-400px;
} 

#onlinevideo{
  position:relative;
  box-shadow:0px 8px 16px 0px black; 
  background-color: rgba(0,0,0,0.5);
  z-index:200;
  margin: 0 auto;
  margin-top:100px;  
} 

#backdrop{
  display:none;
  position:absolute;
  z-index:101;
  margin:0;
  padding:0; 
  top:0;
  left:0;
  width:100%; 
  height:100%;
  background-color: rgba(0,0,0,.7);
}

.video-exit{
  background: #2E395A;
  width:200px; 
  position:relative; 
  border: 3px solid white; 
  padding:20px; 
  color:white; 
  font-size: 24px;
  z-index:201;
  margin: 0 auto;
} 

/* About Section Styling */
.about{
  position:absolute;
  margin-top:-17px;
  background:#2E395A;
  width:100%;
  height:600px;
  text-align:center; 
  z-index:-100;
} 

.about img{
  width:100px;
  padding-top:60px;
  margin-bottom:-40px;
}

.about h4{
  text-align:center;
  font-size:40px;
  color:white;
}

.about p{
  text-align:center;
  font-size:30px;
  color:white;
  padding:0 60px;
} 

/* Reasons to go to Australia Styling */
.reasons{
  position:absolute;
  margin-top:583px;
  width:100%;
  height:600px;
  text-align:center; 
  z-index:300;
  background:transparent;
}

.reasons h3{
  font-size:40px;
  margin-top:67px;
}

.info{
  position:absolute;
  margin-top:583px;
  width:100%;
  height:650px;
  text-align:center; 
  background:white;
  display:flex;
  justify-content:center;
  align-content:center;
  text-align:center;
  border-top:60px solid #718A91;
  border-bottom:60px solid #718A91;
}

.panel{
  width:33%;
  height:500px;
  margin-top:75px;
  margin-bottom:75px;
  border: 2px solid black;
  margin-left:1%;
  margin-right:1%; 
} 

.panel .fas{
  font-size:80px;
  color:white;
  padding-bottom:20px;
}

.panel h5{
  font-size:40px;
  color:white;
  padding-top:15px;
  margin-bottom:0px;
}

.panel-head{
  margin-top:-67px;
  background:#718A91;  
}

.panel p{
  font-size:20px;
  margin:10%;
}

/* Information Section Styling */
#history-facts{
  position:absolute;
  width:100%;
  height:1200px;
  background-image: url('https://imgur.com/7hCU56S.jpg');
  background-size:cover;
  margin-top:1353px;
  z-index:400;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.wrap{
  position:relative;
  padding:0px;
  width:80%;
  height:250px;
  margin:0 auto;
  margin-top:20px;
  margin-bottom:20px;
  border: 2px solid #ddd;
  background:white;
  box-shadow:0px 4px 8px 0px black; 
} 

.wrap img{
  width:350px;
  height:250px;
  float:left;  
}

.wrap .wrap-text{
  position:absolute;
  margin-left:365px;
  margin-right:15px;
  float:left;
  text-align:left;
  font-size:16px;
}

.wrap-text h6{
  font-size:25px;
  margin-top:25px;
  margin-bottom:0px;
}

/* Call to Action Styling */
#booking{
  width:100%;
  height:600px;
  background-color:white;
  margin-top:2553px;
  display:flex;
  justify-content:center;
  flex-direction:column;
  align-content:center;
  text-align:center;
}

#booking img{
  position:absolute;
  left:50%;
  margin-left:-75px;
  margin-top:-180px;
  width:150px;
}

#booking h4{
  font-size:40px;
  margin-top:180px;
  word-spacing:10px;  
}

#booking p{
  font-size:30px;
  margin-top:0px;
  padding-left:60px;
   padding-right:60px;
   padding-bottom:15px;
}

/* Slider Styling */
slider{
  display:block;
  width:100%;
  height:600px;
  background-color:black;
  overflow:hidden;
  z-index:-10;
} 

slider > *{
  position:absolute; 
  display:block; 
  width:100%;
  height:600px;
  background:black;
  animation: slide 12s infinite;
  overflow:hidden;  
} 

slide:nth-child(1){
  left:0%; 
  animation-delay:-1s;
  background-image: url("http://alwaysgametime.com/imgs/sydney.jpg");
  background-size:cover;
  background-position:center bottom -500px;
  opacity:0.8;
} 

slide:nth-child(2){
  left: 100%;
  animation-delay:2s;
  background-image: url("http://alwaysgametime.com/imgs/melbourne.jpg");
  background-size:cover;
  background-position:center;
  opacity:0.8;
}

slide:nth-child(3){ 
  left: 100%;
  animation-delay:5s;
  background-image: url("http://alwaysgametime.com/imgs/brisbane.jpg");
  background-size:cover;
  background-position:center;
  opacity:0.8;
}

slide:nth-child(4){ 
  left: 100%;
  animation-delay:8s;
  background-image: url("http://alwaysgametime.com/imgs/perth.jpg");
  background-size:cover;
  background-position:center top -500px;
  opacity:0.8;
} 

slide p{
  font-family:arial; 
  font-size:100px;
  text-align:center;
  display:inline-block;
  margin-top:200px;
  width:100%;
  color:white; 
  text-shadow: 2px 2px 8px black;  
}

/* Percentages through the animation and image position */
@keyframes slide{ 
  0%{left:100%; width:100%;}
  5%{left:0%;}
  25%{left:0%;}
  30%{left:-100%; width:100%;}
  30.001%{left:-100%; width:0%;}
  100% {left: 100%; width: 0%;}
}

/* Footer Styling */
#footer{
  background:#2E395A;
  color:white;
  height:300px;
  position:relative;
} 

#footer #footer-bottom{
  background:black;
  color:white;
  height:40px;
  text-align:center;
  position:absolute;
  left:0px;
  bottom:0px;
  width:100%; 
  padding-top:15px;  
} 

#footer #footer-content{
  height:245px;
  display:flex;
  justify-content:center;
}

#footer #footer-content .footer-section{
  flex:1;
  padding:15px;
  text-align:center;
  margin:0 auto;
}

#footer #footer-content h6{
  color:white;
  font-size:20px;
  margin:0;
  padding:0;
} 

#footer #footer-content .connected h6 span{
  color:white;
}

#footer #footer-content .connected .contact-links span{
  display:block;
  font-size:16px;
}

#footer #footer-content .connected .contact-links{
  margin-top:-5px;
  margin-bottom:14px;
}

#footer #footer-content .connected .socials a{
  color:white;
  text-decoration:none;
  text-align:center;
  font-size:16px;
  padding-right:20px;  
}

#footer #footer-content .links ul a{
  display:block; 
  font-size:15px;
  text-decoration:none;
  color:white;  
}

#footer #footer-content .links li{
  list-style:none;
}

#footer #footer-content .links ul a:hover{
  color:#718A91;
}

#footer #footer-content .links ul{
  margin-top:-18px;
  margin-left:-34px;
}

#footer #footer-content .trip p{
  margin-bottom:30px;
}

#footer #footer-content .logo .email{
  padding:10px;
  border: 5px solid #EE8624;
  margin:0;
}

#footer #footer-content .logo .email-enter{
  padding:15px;
  background:black;
  border: 5px solid #EE8624;
  color:white;
  border:none;
  margin-left:-5px;
}

.footer-button{
  background: #1a1411;
  padding:18px;
  color:white;
  text-decoration:none;
}

.company-logo{
  width:200px;
  margin-bottom:-40px;
  margin-top:-20px;
}

/* Media Queries */
@media only screen and (max-width: 1300px){
  .right-links{
    display:none;
  }
  
  #footer #footer-content .trip{
    display:none;
  }
 
 #footer #footer-bottom{
    font-size:13px;
 }
  
  #footer #footer-content .footer-section{
    font-size:10px;
  }
  
  #footer #footer-content .connected .contact-links span{
    font-size:10px;
  }
  
  #footer #footer-content .links ul a{
    font-size:10px;
  }
  
  #footer #footer-content h6{
    font-size:13px;
  }
  
  .company-logo{
    width:75px;
  }
  
  #footer #footer-content .logo .email {
    width:80px;
  }
  
  #footer #footer-content .logo .email-enter {
    margin:3px auto;
  }  
     
   #history-facts .wrap .wrap-text p{
    font-size:12px;
  }
  
     #history-facts .wrap .wrap-text li{
    font-size:12px;
  }
}

@media only screen and (max-width: 950px){
  li .mobile{
    display:block; 
  }
  
  li .mobile .fas{
    display:block; 
  }
  
  .reserve-button{
    display:none;
    background:none;
  } 
  
  .main-nav{
    display:none;
  }
  
 .open-slide .fas{
    display:block;
  } 
  
  .right-links{
    display:none;
  }
  
     #history-facts .wrap .wrap-text p{
    font-size:9px;
  }
  
     #history-facts .wrap .wrap-text li{
    font-size:9px;
  }
  
.panel p{
    font-size:13px;   
  }  
}

@media only screen and (max-width: 400px) {
  
   li .mobile{
    display:block;  
  }
  
  li .mobile .fas{
    display:block; 
  }
  
  .reserve-button{
    display:none;
    background:none;
  } 
  
  .main-nav{
    display:none;
  }
  
 .open-slide .fas{
    display:block;
  } 
  
  .right-links{
    display:none;
  }
  
  #hero-text h2{
    font-size:40px;
    margin-top:-130px;
    margin-bottom: 5px;
  } 
  
  #hero-text h4{
    font-size:30px;
    margin-bottom:10px;
  }
  .about{
    margin-top:-100px;
  }

  .about img{
    width:100px;
  }
  
  .about h4{
    margin-bottom:-10px;
  }
  
  .about p{
    font-size:19px;
    padding:4px;  
  }
  
  .reasons{
    margin-top:445px;
  }
  
  .reasons h3{
    font-size: 25px;
  }
  
  .info{
    margin-top:500px;
    height:670px;
    flex-direction:column;
    justify-content:space-around;
    align-content:center;
  }
  
  .panel{
    width:90%;
    height:200px;
    margin:3px auto;   
  } 
  
  .panel h5{
    margin-top:67px;
    padding-bottom:15px;
    font-size:15px;
    color:white;
  }
  
  .panel p{
    font-size:14px;
    margin: 2px auto;
  }
  
  
  #history-facts{
  width:100%;
  margin-top:1290px;
}
  
  .wrap img{
  width:100%;
  height:250px;
  opacity:0.6;
}
  
.wrap .wrap-text{
  margin-top:-10px;
  margin-left:15px;
  font-size:10px;
  font-weight:bold;
}
  
  #booking {
    margin-top:2853px;
    height:600px;
    margin-bottom:-275px;
  }
  
  #booking img{
    margin-top: -550px;
  }
  
  #booking h4{
    font-size:20px;
    margin-top:-400px;
  }
  
  #booking p{
    font-size: 18px;
    padding:5px;
  }
  
  slide p{
    font-size:80px;
  }  

  #footer #footer-content .trip{
    display:none;
  }
  
  #footer #footer-bottom{
    font-size:13px;
 }
  
  #footer #footer-content .footer-section{
    font-size:10px;
  }
  
  #footer #footer-content .connected .contact-links span{
    font-size:10px;
  }
  
  #footer #footer-content .links ul a{
    font-size:10px;
  }
  
  #footer #footer-content h6{
    font-size:13px;
  }
  
  .company-logo{
    width:75px;
  }
  
  #footer #footer-content .logo .email{
    width:80px;
  }
  
  #footer #footer-content .logo .email-enter{
    margin:3px auto;
  }
  
  .panel-head .fas{
    display:none;
    background:none;
  }
}