body{
  font-family: "proxima-nova",sans-serif;
  /*background: url('../img/test.jpg') no-repeat 0 0 fixed !important;*/
  background:#000;
-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
background-size: cover!important;
margin:0;


}


ul, li{
  padding:0;
  margin:0;
}

a, a:link, a:active{
  border:0!important;
}

#appouterWrapper{
  max-width:1340px;
  position: static;
  margin:0 auto;
  padding: 4%;
}

.preventscroll{
  overflow:hidden;
}

.bgimg{
  position: fixed;
  left:0;
  width:100%;
 margin-top: -270px;
}

#innerWrap{
  position: relative;
  margin:100px auto;
}

#thumbsWrapper{
  margin:50px auto;
}

.loaderimg{
  position: absolute;
  top:20%;
  left:50%;
  display: block;
}

#closelightbox{
background: #b1b1b1;
position: absolute;
right: 1.2%;
top: 1.6%;
font-size: 20px;
color: #000;
width: 45px;
height: 45px;
}

#closelightbox a {
display: block;
width: 15px;
height: 15px;
background: url("http://abcnews.go.com/assets/images/videoplayer/video_ex_sprite.png") no-repeat 0 0;
top: 15px;
left: 15px;
position: absolute;
}

#closelightbox a:hover{
  background-position:-50px 0;
}

.slideBoxInner{
margin: 5%;
margin-top:3%;
background: #1C1D1F;
padding: 2%;
position: relative;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
  }


#allview{
position: absolute;
left: 15px;
top: 20%;
width: 43px;
display: block;

}

.spinner{
position: absolute;
width: 0px;
z-index: 2000000000;
top: 30%;
left: 50%;
}



#archiveList li{
line-height: 20px;
border-bottom: 1px solid #8E854D;
list-style: none;
padding: 10px;
font-size: 13px;
font-weight: 600;
}

#archiveList li:hover{
  background:#8E854D;
}

.archiveTitle{
text-align: center;
font-size: 18px;
width: 220px;
margin: 0 auto;
overflow: auto;
padding: 10px;
}

.archiveThumb{
  display:block;
  margin: 0 auto;
  max-width:250px;
}

.archiveStory{
margin: 0 auto;
display: block;
max-width: 1000px;
padding: 20px;
font-size: 18px;
line-height: 20px;
text-align: left;
padding-bottom: 10%;
}

iframe{
  -webkit-transition: all 350ms ease;
-moz-transition: all 350ms ease;
-ms-transition: all 350ms ease;
-o-transition: all 350ms ease;
transition: all 350ms ease;
position: absolute;
z-index:9999999;
border: 0;
}

.fullOpac{
 opacity: 1.0!important; 
 z-index:9999;

}

.personName{
  font-weight: 700!important;
  font-size:45px!important;
  text-shadow: 0 0 10px #000;

}

.personCity{
  font-weight: 740!important;
  font-size:45px!important;

}

.mapWrap{
position: fixed!important;
  background:rgba(0,0,0,0.87);
top:52px;
width:100%;
padding-bottom:200%;
  -moz-transform: translateX(-100%) translateY(0%);
-webkit-transform: translateX(-100%) translateY(0%);
-o-transform: translateX(-100%) translateY(0%);
-ms-transform: translateX(-100%) translateY(0%);
transform: translateX(-100%) translateY(0%);
    -webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
z-index: 999999999999999;
}

.mapWrap img.map2{
  margin: 80px auto;
}

.unweight{
  font-weight:200!important;
}



.storysContainer{
position: relative;
float: right;
overflow: auto;
/*background: rgba(255,255,255,0.6);*/
padding-right: 8%;

}

.droplet{
 width: 10%;
display: block; 
position: absolute;
right: 25%;
top: 85px;
z-index: 999;
}

#thumbsList {
max-width: 600px;
z-index:9999999;
  -webkit-transition: all 350ms ease;

}


#thumbsList li{
float: left;
margin: 1px;
width: 31%;
list-style: none;
background: #000;
position: relative;
}


#thumbsList li:hover{
  cursor: pointer;
}


#thumbsList li img{
  width: 100%;
opacity:1;
 
}


.LeftWrapper{
  position: absolute;
  top: 80px;
  max-width: 520px;
  /*height: 100%;*/

}


.RightWrapper{
position: absolute;
right: 0;
top: 80px;
max-width: 700px;
text-align: left;


}

.dot {
  width:25px;
  height:30px;
  position: absolute;
     -webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}


.dotMobile{
  width:50px;
  height:50px;
  position: absolute;
  display:none;

}

.enlarge{
  width:50px;
  height:50px;
  margin-top:-15px!important;
  margin-left: -8px!important;
}



.storysContainer li{
  margin-bottom:20px;
  list-style:none;
  position: relative;
}

.storysContainer li:hover{
  cursor: pointer;
}

.vidBG{
    background:#000;
    position: relative;

}

 .playbtn{
display: block;
position: absolute;
width: 20%!important;
top: 29%;
left: 39%;
opacity: 1!important;
z-index: 99999;
}

.playbtn2{
display: none;
position: absolute;
width: 20%!important;
top: 2%;
right: 2%;
z-index: 99999;
}




.vidBG img{
  width:100%;
  opacity: 0.3;
 /* position: relative;*/
/* position: absolute;*/

}

/*.storysContainer li:last-child{
 padding-bottom: 100%;
}*/

.storysContainer li span{
  font-size: 26px;
font-weight: 200;
margin-bottom:4px;
display:block;
color:#ffffff;
}


.markersWrapper{
left: 20px;
top: 370px;
position: relative;
}
.map{
  width:100%;
  padding-bottom:100%;
}
.mapHeading{
width: 100%;
clear: both;
position: relative;
background: #000;
color: #ffffff;
z-index: 999999999;

}

.mapHeading h1{
font-size: 39px;
text-align: center;
padding:12px;
font-weight: 600;
/* margin: 10px; */
/* line-height: 45px; */
}

.projectSummary h2{
  text-align: center;
  font-size:32px;
}
.projectSummary p{
  text-align: center;
}

.mapHeading .sub{
  text-align: center;
  font-size:40px;
  font-weight: 200;
  max-width:700px;
  margin: 0 auto;
}
.lightWeight{
  font-weight: 200;
}

.slideWrap{
  position: absolute;
  top: 70px;
  z-index:999;
  width:300px;
  height: 1000px;
  color:#ffffff;
  text-align: left;
  background:rgba(0,0,0, 1.0);
-moz-transform: translateX(-100%) translateY(0%);
-webkit-transform: translateX(-100%) translateY(0%);
-o-transform: translateX(-100%) translateY(0%);
-ms-transform: translateX(-100%) translateY(0%);
transform: translateX(-100%) translateY(0%);
    -webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;

}


.slideBox .vidBG, .slideBox iframe{
  margin:0 auto;
  display:block;
}



.slideBox{
  position: fixed;
  z-index: 999999999995;
  top: 0px;
  width:100%;
  height: 100%;
  color:#ffffff;
  background:rgba(0,0,0,0.87);
  display:none;


}



  .slideLeft{
-moz-transform: translateX(0px) translateY(0px);
-webkit-transform: translateX(0px) translateY(0px)!important;
-o-transform: translateX(0px) translateY(0px);
-ms-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px)!important;
height: 1000px;
position: relative;
background: #B3A75F;
color: #000;
z-index: 9999999999;


}

.thumbBox{
  /* position: relative; */
/* margin: 0 auto; */
/* display: block; */
position: absolute;
position: a;
top: 10%;
}


.thumbBox p{
  padding: 15px;
font-size: 17px;
line-height: 25px;
font-weight: 300;
}

.closeBtn{
  color:#ffffff;
  position: absolute;
right: 2%;
top: 8%;
}

.slideThumb{
margin: 0 auto;
display: block;
}

  .closeBtn2{
top: 12%;
position: absolute;
left: 45%;
color: #ffffff;
  }


.mobileP{
color: #ffffff;
font-size: 16px;
line-height: 22px;
font-weight: 300!important;
text-shadow: 0 0 10px #000;
}

@media only screen and (min-width : 320px) and (max-width : 768px){

#appouterWrapper{
max-width:767px;
position: static;
}

  .mapHeading{
position: relative;
margin-top: 24px;
  }
.mapHeading h1 {
font-size: 17px;
margin:0;
}
#thumbsWrapper, .LeftWrapper{
  display: none;
}


.storysContainer{
  height:100%;
  padding-top:0;
  padding:0;
}

.storysContainer li {
margin-bottom: 50px;
padding: 15px;
}

.mobileThumb{
  margin: 0 auto;
display: block;
margin-bottom: 20px;
}

#headingImmi, .LeftWrapper{
  display: none!important;
}

.sub{
  display:none;
}

.map, .dot{
  display: none!important;
}
iframe{
  width:100%;
}

#thumbsList{
  display:none!important;
}

 .personCity, .personName{
    font-size:28px!important;
  }

.RightWrapper {
position: relative;
right: 0;
top:0;
margin-top: 0px;
max-width: 768px;
}

}



@media only screen and (min-width : 320px) and (max-width: 768px){
  #headingImmiMobile{
    display:block;
    margin-top: 0;
  }

  #headingImmiMobile h1{
        padding: 8px;
    margin-left: 45px;
    text-align: left;
  }

  #allview {
width: 23px;
}
  .vidBG, iframe{
    height: 180px;
  }

.dotMobile{
  width:30px;
  height:30px;
}
.dotMobile:nth-child(1) {
top: 240px;
left: 60px;
}
.dotMobile:nth-child(2) {
top: 240px;
left: 60px;
}
.droplet {
right: 10%;

}

.dotMobile:nth-child(3) {
top: 230px;
left: 130px;
}

.dotMobile:nth-child(4) {
top: 200px;
left: 50px;
}

.dotMobile:nth-child(5) {
top: 170px;
left: 25px;
}

.dotMobile:nth-child(6) {
top: 240px;
left: 240px;
}

   

.mapWrap{
 top:0;
}

.mapWrap img.map2{
width: 320px;

}

#mapmobileWrap {
position: relative;
/* left: 5%; */
margin: 0 auto;
width: 320px;
}

.mobileThumb{
  width:50%;
}

.mobileP{
font-size: 16px;
line-height: 22px;

}


.footer{
  display: none!important;
}
#menu{
  z-index:99999999999;
}

.stuck2{
  display:none!important;
}
.bgimg{
position: fixed;
left: 0;
width: 200%;

}

}

@media only screen and (min-width : 320px){

.slideBox .vidBG, .slideBox iframe{
  height:180px;
  width:320px;
}
}
@media only screen and (min-width : 360px){
 .vidBG, iframe{
    height: 203px;
  }
}

@media only screen and (min-width : 380px){
  .vidBG, iframe{
    height: 214px;
  }


}

@media only screen and (min-width : 468px){
  .vidBG, iframe{
    height: 263px;
  }
.slideBox .vidBG, .slideBox iframe{
  height:180px;
  width:320px;
}
}





@media only screen and (min-width : 568px){
 .vidBG,  iframe{
    height: 320px;
  }
.mobileP{
font-size: 25px;
line-height: 35px;

}

.slideBox .vidBG, .slideBox iframe{
  height:180px;
  width:320px;
}

}


@media only screen and (min-width : 640px) and (max-width : 768px){
 .vidBG,  iframe{
    height: 360px;
  }



.dotMobile:nth-child(1) {
top: 420px;
left: 140px;
}
.dotMobile:nth-child(2) {
top: 420px;
left: 140px;
}


.dotMobile:nth-child(3) {
top: 400px;
left: 260px;
}

.dotMobile:nth-child(4) {
top: 310px;
left: 110px;
}
.dotMobile:nth-child(5) {
top: 260px;
left: 57px;

}
.dotMobile:nth-child(6) {
top: 410px;
left: 490px;
}



.mapWrap img.map2{
width: 640px;

}

#mapmobileWrap {
position: relative;
/* left: 5%; */
margin: 0 auto;
width: 640px;
}

.slideBox .vidBG, .slideBox iframe{
  height:310px;
  width:550px;
}


}




@media only screen and (min-width : 769px) and (max-width : 899px){
 
.RightWrapper{
  width:380px;
}
 .vidBG,  iframe{
    width:350px;
    height:197px;
  }

.droplet{
display:none;

}
.mobileThumb{
display:none;
}


.mapWrap{
  display:none!important;
}



#thumbsList{
  max-width:340px;
}

.markersWrapper{
left: 30px;
top: 307px;
}


.storysContainer{
  padding-right: 10%;
}

a.dot img{
  width:70%;

}

.dot:nth-child(1){
top: 50px;
left: 35px;

}

.dot:nth-child(2){
top: 65px;
left: 50px;
}

.dot:nth-child(3){
top: 66px;
left: 125px;

}

.dot:nth-child(4){
top: 7px;
left: 30px;
}


.dot:nth-child(5){
top: -20px;
left: 8px;
}

.dot:nth-child(6){
top: 56px;
left: 246px;
}

 .map{
 width: 70%;
margin-left: -152px;
  }
#allview{
  width:33px;
}

}

@media only screen and (min-width : 769px){
  .mobileThumb, .droplet, .map2, .mapWrap{
    display:none!important;
  }

.slideBox .vidBG, .slideBox iframe{
  height:360px;
  width:640px;
}
#headingImmiMobile{
  display:none;
}

}


@media only screen and (min-width : 900px) and (max-width : 1004px){
#thumbsList{
  max-width:430px;
}
.RightWrapper {
width: 420px;
}

.map{
  width:75%;
margin-left: -7%;
}



#thumbsList{
  max-width:440px;
  margin-left:5%;
}

.markersWrapper{
left: 87px;
top: 377px;

}
a.dot img{
  width:70%;

}

.dot:nth-child(1){
top: 50px;
left: 35px;

}

.dot:nth-child(2){
top: 65px;
left: 50px;
}

.dot:nth-child(3){
top: 56px;
left: 125px;

}

.dot:nth-child(4){
top: -5px;
left: 30px;
}


.dot:nth-child(5){
top: -40px;
left: 5px;
}

.dot:nth-child(6){
top: 56px;
left: 260px;
}
.slideBox .vidBG, .slideBox iframe{
  height:360px;
  width:640px;
}

.vidBG, iframe {
width: 400px;
height: 225px;
}

}

@media only screen and (min-width : 900px) {
#appouterWrapper{
  padding:0%;
}
}
@media only screen and (min-width : 1005px) {
#appouterWrapper{
  padding:2%;
}

}



@media only screen and (min-width : 1005px) and (max-width : 1092px){


.RightWrapper{
  width:510px;
}


  .vidBG, iframe{
    width:400px;
    height:225px;
  }



 .map{
    width: 90%;
    }


#thumbsList{
  max-width:440px;
  margin-left:5%;
}

.markersWrapper{
left: 77px;
top: 387px;
}

a.dot img{
  width:80%;

}


.dot:nth-child(1){
top: 75px;
left: 35px;

}

.dot:nth-child(2){
top: 92px;
left: 50px;
}

.dot:nth-child(3){
top: 95px;
left: 150px;

}

.dot:nth-child(4){
top: 20px;
left: 30px;
}


.dot:nth-child(5){
top: -19px;
left: 5px;
}

.dot:nth-child(6){
top: 88px;
left: 312px;
}


}

@media only screen and (min-width : 1093px) and (max-width : 1349px){


.RightWrapper{
  width:550px;
}
    .map{
    width: 95%;
    }


  .vidBG, iframe{
    width:500px;
    height:281px;
  }

#thumbsList{
  max-width:460px;
  margin-left: 7%;
}

.markersWrapper{
left: 65px;
top: 394px;
}


a.dot img{
  width:80%;

}

.dot:nth-child(1){
top: 85px;
left: 40px;

}

.dot:nth-child(2){
top: 102px;
left: 55px;
}

.dot:nth-child(3){
top: 110px;
left: 155px;

}

.dot:nth-child(4){
top: 20px;
left: 45px;
}


.dot:nth-child(5){
top: -20px;
left: 5px;
}

.dot:nth-child(6){
top: 108px;
left: 335px;
}





}



/*@media only screen and (min-width : 1200px) and (max-width : 1349px){

.RightWrapper{
  width:700px;
}

  .vidBG, iframe{
    width:600px;
    height:337px;
  }
  #thumbsList{
  max-width:530px;
}

.map{
  width:100%;
}

.LeftWrapper{

  margin-left:2%;

}
.markersWrapper{
left: 50px;
top: 417px;
}

a.dot img{
  width:100%;

}

.dot:nth-child(1){
top: 106px;
left: 50px;

}

.dot:nth-child(2){
top: 126px;
left: 70px;
}

.dot:nth-child(3){
top: 100px;
left: 170px;
}

.dot:nth-child(4){
top: 26px;
left: 45px;

}


.dot:nth-child(5){
top: 46px;
left: 35px;

}

.dot:nth-child(6){
top: 106px;
left: 350px;
}


}*/

@media only screen and (min-width : 820px) and (max-width : 899px){
  .RightWrapper{
    right: 3%;
  }
}


@media only screen and (min-width : 769px) and (max-width : 1270px){

/*.stuck2, .LeftWrapper, .RightWrapper{
  top: 100px!important;
}*/

}

@media only screen and (min-width : 769px) and (max-width : 826px){
  .mapHeading h1 {
font-size: 22px;
padding:15px;

}
}

@media only screen and (min-width : 827px) and (max-width : 959px){
  .mapHeading h1 {
font-size: 25px;
padding:15px;

}
}
@media only screen and (min-width : 960px) and (max-width : 1189px){
  .mapHeading h1 {
font-size: 30px;
padding:15px;

}
}


@media only screen and (min-width : 1130px) {
.RightWrapper{
  right: 5%;

}
}

@media only screen and (min-width : 1190px) and (max-width : 1280px){
  .mapHeading h1 {
font-size: 27px;

}

.RightWrapper{
  width:600px;
  right: 5%;

}

#allview {
width: 36px;
}
}


@media only screen and (min-width : 1281px) {
  .mapHeading h1 {
font-size: 39px;

}
.RightWrapper{
  width:600px;
  right: 5%;

}

}





@media only screen and (min-width : 1350px){

    .map{
    width: 100%;
    }

.RightWrapper{
  width:800px;
  right:0%;

}

 .vidBG, iframe{
    width:640px;
    height:360px;
  }



 #thumbsList{
  max-width:600px;
} 

.LeftWrapper{

  margin-left:0%;
  max-width: 620px;

}
.markersWrapper{
left: 35px;
top: 448px;
}

a.dot img{
  width:100%;

}

.dot:nth-child(1){
top: 156px;
left: 80px;

}

.dot:nth-child(2){
top: 176px;
left: 100px;
}

.dot:nth-child(3){
top: 205px;
left: 235px;
}

.dot:nth-child(4){
top: 120px;
left: 90px;
}


.dot:nth-child(5){
top: 35px;
left: 40px;
}

.dot:nth-child(6){
top: 186px;
left: 450px;
}



}




@media only screen and (min-width : 1610px){
  .RightWrapper{
    right:9%;
  }
}

@media only screen and (min-width : 1850px){
  .RightWrapper{
    right:13%;
  }
}

@media only screen and (min-width : 2050px){
  .RightWrapper{
    right:15%;
  }
}
@media only screen and (min-width : 2250px){
  .RightWrapper{
    right:20%;
  }
}