@charset "UTF-8";
/* CSS Document */
.container{
	width: 98%;
	height: 98%;
	margin: auto fixed;
}  

@font-face { font-family:gotham; src: url('Gotham-Book.otf'); }

a{
	color: black;
	text-decoration: none;
}
/* Start of Header*/
.header{
	width: 98%;
	margin-left: 1%;
	margin-right: 1%;
	padding: 1%;
}

#highlights{
	font-family: 'gotham', sans-serif;
	color: white;
	margin: 5.7%;
	font-size: 140%;
	position: absolute;
}

#squad{
	font-family: 'gotham', sans-serif;
	color: white;
	margin-left: 26%;
	margin-top: 5.69%;
	font-size: 140%;
	position: absolute;
}

#btn_home{
	width: 8%;
	height: auto;
	margin-left: 46%;
}

#experience{
	font-family: 'gotham', sans-serif;
	color: white;
	font-size: 140%;
	position: absolute;
	margin-left:61%;
	margin-top: -5.1%;
}
#gallery{
	font-family: 'gotham', sans-serif;
	color: white;
	position: absolute;
	margin-left: 81%;
	margin-top: -5.1%;
	font-size: 140%;
}

#headertxt{
	opacity: 0.3;
	margin-top:350px;
	
}
/* End of Header*/

/* Start of Hover Header*/
#highlights:hover{
	opacity: 0.7;
	text-decoration: underline;
}

#squad:hover{
	opacity: 0.7;
	text-decoration: underline;
}

#btn_home:hover{
	opacity: 0.7;
}


#experience:hover{
	opacity: 0.7;
	text-decoration: underline;
}

#gallery:hover{
	opacity: 0.7;
	text-decoration: underline;
	
}
/* End of Hover Header*/

/* Start of Homepage*/

#middle_text{
	background-color: #c39977;
	text-align: center;
	padding: 8%;
	font-family: 'gotham', sans-serif;
	margin-left: 1%;
	margin-top: -0.8%;
	width: 84%;
	font-size: 120%;
}

#highlights_vid{
	background: #f4decb;
	width: 72%;
	padding: 14%;
	margin-left: 1%;
	margin-top: -3%;
}

#instagram{
	background-color: #dcc7aa;
	height: 100%;
	width: 94%;
	margin-left: 1%;
	margin-top: -1.7%;
	padding: 3%;
}

#social_icons1{
	position: fixed;
	margin-left: 89%;
}

#social_icons2{
	position: fixed;
	margin-left: 89%;
	margin-top: 7%;
}

#social_icons1:hover{
	opacity: 0.5;
}

#social_icons2:hover{
	opacity: 0.5;
}

#footer_background{
	width: 100%;
	margin-left: 1%;
	margin-top: -3%;
}

#footer_text{
	font-family: 'gotham', sans-serif;
	font-size: 100%;
	color: white;
	text-align: justify;
	position: absolute;
	margin-top: -11%;
	padding: 2%;
}

/*End of Homepage*/
	
/*Start of Experience Page*/
#box{
  background-color: #c39977;
  text-align: center;
  padding: 8%;
  font-family: 'gotham', sans-serif;
  margin-left: 1%;
  width: 84%;
  font-size: 120%;
}
#lifestyle:hover{
	content: url(imgs/experiences/lifestyle_hover.jpg);
	width: 499px; 
	height: 330px;
}
#culture:hover{
	content: url(imgs/experiences/culture_hover.jpg);
	width: 496px; 
	height: 330px;
	
}
#shopping:hover{
	content: url(imgs/experiences/shopping_hover.jpg);
	width: 323px; 
	height: 330px;
}

#food:hover{
	content: url(imgs/experiences/food_hover.jpg); 
	width: 332px; 
	height: 330px;
}

#attraction:hover{
	content: url(imgs/experiences/attraction_hover.jpg);
	width: 323px; 
	height: 330px;
}

#lifestyle-text {
  background: #f4decb;
  font-family: 'gotham', sans-serif;
  text-align:center;
  width: 80%;
  padding: 10%;
  margin-left: 1%;
  margin-top: -3%;
  display: none;
}
#culture-text {
  background: #f4decb;
  font-family: 'gotham', sans-serif;
  text-align:center;
  width: 80%;
  padding: 10%;
  margin-left: 1%;
  margin-top: -3%;
  display: none;
}

#shopping-text {
  background: #f4decb;
  font-family: 'gotham', sans-serif;
  text-align:center;
  width: 80%;
  padding: 10%;
  margin-left: 1%;
  margin-top: -3%;
  display: none;
}

#food-text {
  background: #f4decb;
  font-family: 'gotham', sans-serif;
  text-align:center;
  width: 80%;
  padding: 10%;
  margin-left: 1%;
  margin-top: -3%;
  display: none;
}

#attraction-text {
  background: #f4decb;
  font-family: 'gotham', sans-serif;
  text-align:center;
  width: 80%;
  padding: 10%;
  margin-left: 1%;
  margin-top: -3%;
  display: none;
}

/*End of Experience Page*/

/*Start of Gallery Page*/
.gallery_anchor{
  background-color: #c39977;
  text-align: center;
  padding: 4%;
  font-family: 'gotham', sans-serif;
  margin-left: 1%;
  margin-bottom: 3%;
  margin-top:-3%;
  width: 92%;
  font-size: 120%;
  color:black;
  text-decoration: none;
}

.dark_txt{
  background-color: #c39977;
  text-align: center;
  padding: 8%;
  font-family: 'gotham', sans-serif;
  margin-left: 1%;
  margin-top: -3%;
  width: 84%;
  font-size: 120%;
  color: white;
}

.light_txt{
  background-color: #f4decb;
  text-align: center;
  padding: 8%;
  font-family: 'gotham', sans-serif;
  margin-left: 1%;
  margin-top: -3%;
  width: 84%;
  font-size: 120%;
}
#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background: #c39977;
    color: white;
    cursor: pointer;
    padding:15px;
    border-radius: 10px;
	opacity: 0.5;
}

#myBtn:hover {
    background: #f4decb;
	color: black;
}

.a1:hover {
	content: url('imgs/gallery/Day 1/Deira Souks_Fawaz_Hover.jpg');
	width: 654px; 
	height: 368px;
}

.b1:hover {
	content: url('imgs/gallery/Day 1/DubaiCreeks_Yint Oo_Hover.jpg');
	width: 245px; 
	height: 368px;
}

.c1:hover {
	content: url('imgs/gallery/Day 1/Deira Souks_Wayne_Hover.jpg');
	width: 450px; 
	height: 300px;
}

.d1:hover {
	content: url('imgs/gallery/Day 1/Saruq Al-Fahidi Museum_Yint Oo_Hover.jpg');
	width: 450px; 
	height: 300px;
}

.a2:hover {
	content: url('imgs/gallery/Day 2/VirginRadio_Vivian_Hover.jpg');
	height:410px; 
	width: 615px;
}

.b2:hover {
	content: url('imgs/gallery/Day 2/DubaiEye_Eugene_Hover.jpg');
	height:410px; 
	width: 273px;
}

.a3:hover {
	content: url('imgs/gallery/Day 3/Jumeirah Mosque_Amirah_Hover.jpg');
	height:410px;
	width: 273px;
}

.b3:hover {
	content: url('imgs/gallery/Day 3/Dubai Mall_Wayne_Hover.jpg');
	height: 410px; 
	width: 615px;
}

.c3:hover {
	content: url('imgs/gallery/Day 3/Dubai Mall_Fawaz_Hover.jpg');
	height: 365px; 
	width: 649px;
}

.d3:hover {
	content: url('imgs/gallery/Day 3/Dubai Aquarium_Kiefer_Hover.jpg');
	height:365px; 
	width: 243px;
}
.e3:hover {
	content: url('imgs/gallery/Day 3/City Night Tour_Yint Oo_Hover.jpg');
	height:365px; 
	width: 243px;
}
.f3:hover {
	content: url('imgs/gallery/Day 3/Dubai Mall_Fawaz2_Hover.jpg');
	height:365px; 
	width: 649px;
}
.g3:hover {
	content: url('imgs/gallery/Day 3/Jumeirah Mosque_Yint Oo_Hover.jpg');
	width: 900px; 
	height: 600px;
}

.a4:hover {
	content: url('imgs/gallery/Day 4/Arabian Radio Network_Wayne_Hover.jpg');
	height:668px; 
	width: 445px;
}

.b4:hover {
	content: url('imgs/gallery/Day 4/MBC_Amirah_Hover.jpg');
	height:668px; 
	width: 445px;
}

.a5:hover {
	content: url('imgs/gallery/Day 5/Al-Fahidi Neighbourhood_Wayne_Hover.jpg');
	height:412px; 
	width: 274px;
}

.b5:hover {
	content: url('imgs/gallery/Day 5/Burj Khalifa_Wayne_Hover.jpg');
	height:412px;
	width: 618px;
}

.a6:hover {
	content: url('imgs/gallery/Day 6/Desert_Vivian_Hover.jpg');
	width: 900px; 
	height: 600px;
}

.b6:hover {
	content: url('imgs/gallery/Day 6/Desert_Wayne2_Hover.jpg');
	width: 294px; 
	height: 442px;
}
.c6:hover {
	content: url('imgs/gallery/Day 6/Desert_Wayne_Hover.jpg');
	width: 294px; 
	height: 442px;
}
.d6:hover {
	content: url('imgs/gallery/Day 6/Desert_Yint Oo_Hover.jpg');
	width: 295px; 
	height: 442px;
}
.e6:hover {
	content: url('imgs/gallery/Day 6/Alserkal Avenue_Amirah_Hover.jpg');
	width: 405px; 
	height: 270px;
}
.f6:hover {
	content: url('imgs/gallery/Day 6/Alserkal Avenue_Fawaz_Hover.jpg');
	width: 479px; 
	height: 270px;
}
.g6:hover {
	content: url('imgs/gallery/Day 6/Alserkal Avenue_Wayne_Hover.jpg');
	width: 444px; 
	height: 296px;
}
.h6:hover {
	content: url('imgs/gallery/Day 6/Alserkal Avenue_Yint Oo_Hover.jpg');
	width: 444px; 
	height: 296px;
}

.a7:hover {
	content: url('imgs/gallery/Day 7/IMG_Satria_Hover.jpg');
	width: 900px; 
	height: 600px;
}

.a8:hover {
	content: url('imgs/gallery/Day 8/Emirates_Amirah_Hover.jpg');
	width: 900px; 
	height: 505px;
}

.a9:hover {
	content: url('imgs/gallery/Day 9/JBR_Amirah_Hover.jpg');
	width: 900px; 
	height: 1350px;
}

/*End of Gallery Page*/

/*Start of Squad Page*/

audio{display:none}

.content-cards{
	width: 98%;
	padding: 1%;
	margin-left: 1%;
	margin-top: -3%;
	align-items: center;
	position: relative;
}

h1{
  color:black;
font-family: 'gotham', sans-serif;
  font-size:46px;
	text-align: center;
}

ul{
  margin: 0 auto;
  padding:0;
  list-style:none;
	align-content: center;	
}
ul li{
  display:block;
  background:url(imgs/squad/cardfront1.png) top center no-repeat;
  width:193px;
  height:340px;
  padding:0;
  cursor:pointer;
  float:left;
  position:relative;
}
ul li::before{
 
  content:" ";
  display:block;
  width:92px;
  height:92px;
  position:absolute;
  left:80px;
  top:-50px
}
.t2{
  background-image:url(imgs/squad/cardfront2.png)
}
.t3{
  background-image:url(imgs/squad/cardfront3.png)
}
.t4{
  background-image:url(imgs/squad/cardfront4.png)
}
.t5{
  background-image:url(imgs/squad/cardfront1.png)
}
.t6{
  background-image:url(imgs/squad/cardfront2.png)
}
.t7{
  background-image:url(imgs/squad/cardfront3.png)
}
.t8{
  background-image:url(imgs/squad/cardfront4.png)
}
.t9{
  background-image:url(imgs/squad/cardfront1.png)
}
.t10{
  background-image:url(imgs/squad/cardfront2.png)
}
.t11{
  background-image:url(imgs/squad/cardfront3.png)
}
.t12{
  background-image:url(imgs/squad/cardfront4.png)
}
.t13{
  background-image:url(imgs/squad/cardfront1.png)
}
.t14{
  background-image:url(imgs/squad/cardfront2.png)
}
.t15{
  background-image:url(imgs/squad/cardfront3.png)
}
.t16{
  background-image:url(imgs/squad/cardfront4.png)
}
.t17{
  background-image:url(imgs/squad/cardfront1.png)
}
.t18{
  background-image:url(imgs/squad/cardfront2.png)
}
.t19{
  background-image:url(imgs/squad/cardfront3.png)
}
.t20{
  background-image:url(imgs/squad/cardfront4.png)
}
.t21{
  background-image:url(imgs/squad/cardfront1.png)
}
.t22{
  background-image:url(imgs/squad/cardfront2.png)
}
.t23{
  background-image:url(imgs/squad/cardfront3.png)
}
.t24{
  background-image:url(imgs/squad/cardfront4.png)
}

 .t1.active{
  background-image:url(imgs/squad/card1.png);
}

 .t2.active{
  background-image:url(imgs/squad/card2.png);
}

 .t3.active{
  background-image:url(imgs/squad/card3.png);
}
 .t4.active{
   background-image:url(imgs/squad/card4.png);
 
}
 .t5.active{
  background-image:url(imgs/squad/card5.png);
}

 .t6.active{
  background-image:url(imgs/squad/card6.png);
}

 .t7.active{
  background-image:url(imgs/squad/card7.png);
}
 .t8.active{
   background-image:url(imgs/squad/card8.png);
}
 .t9.active{
  background-image:url(imgs/squad/card9.png);
}

 .t10.active{
  background-image:url(imgs/squad/card10.png);
}

 .t11.active{
  background-image:url(imgs/squad/card11.png);
}
 .t12.active{
   background-image:url(imgs/squad/card12.png);
}
 .t13.active{
  background-image:url(imgs/squad/card13.png);
}

 .t14.active{
  background-image:url(imgs/squad/card14.png);
}

 .t15.active{
  background-image:url(imgs/squad/card15.png);
}
 .t16.active{
   background-image:url(imgs/squad/card16.png);
}
 .t17.active{
  background-image:url(imgs/squad/card17.png);
}

 .t18.active{
  background-image:url(imgs/squad/card18.png);
}

 .t19.active{
  background-image:url(imgs/squad/card19.png);
}
 .t20.active{
   background-image:url(imgs/squad/card20.png);
}
 .t21.active{
  background-image:url(imgs/squad/card21.png);
}
 .t22.active{
  background-image:url(imgs/squad/card22.png);
}
 .t23.active{
  background-image:url(imgs/squad/card23.png);
}
 .t24.active{
   background-image:url(imgs/squad/card24.png);
}

.blink{ opacity:0.1 }

/*End of Squad Page*/

.mobile {
    display:none;
}


@media only screen and (max-width:800px) {
    .container {
        display:none;
    }
    
    .mobile {
        display:block;
    }
}