/*-----------------------photo accordian-----------------------------*/


.accordian {
  width: calc(100vw - 70px); 
  height: 60vh;
  overflow: hidden;
  
  /*Time for some styling*/

  margin-bottom: 30px;

  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

.accimg {
  width: calc(100vw - 70px);
  height: 60vh;
}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
  width: 2000px;
  /*This will give ample space to the last item to move
  instead of falling down/flickering during hovers.*/
}

.accordian li {
  position: relative;
  display: block;
  width: 25vw;
  float: left;
  

   
  border-left: 1px solid #888;
  
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
  
  /*Transitions to give animation effect*/
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  /*If you hover on the images now you should be able to 
  see the basic accordian*/
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 7vw;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 80vw;}


.accordian li img {
  display: block;
}
.image_title {
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  bottom: 63px;
  width: calc(100vw - 70px); 
  text-align: left;
}


@media (max-width: 550px) {

.accordian {
  width: calc(100vw - 70px); 
  height: 40vh;
  overflow: hidden;
  
  /*Time for some styling*/

  margin-bottom: 30px;

  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

.accimg {
  width: calc(100vw - 70px);
  height: 40vh;
}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
  width: 2000px;
  /*This will give ample space to the last item to move
  instead of falling down/flickering during hovers.*/
}

.accordian li {
  position: relative;
  display: block;
  width: 25vw;
  float: left;
  

   
  border-left: 1px solid #888;
  
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
  
  /*Transitions to give animation effect*/
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  /*If you hover on the images now you should be able to 
  see the basic accordian*/
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 7vw;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 80vw;}


.accordian li img {
  display: block;
}
  .image_title {
    background: rgba(0, 0, 0, 0.5);
    bottom: 63px;
    width: calc(100vw - 70px); 
    text-align: left;
  }
}

.image_title p {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 20px;
  font-size: 16px;
}



@media (min-width: 992px) {

  .accordian {
    width: calc(100vw - 70px);
    height: 80vh;
    overflow: hidden;
    
    /*Time for some styling*/

    margin: 100px auto;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  }

  .accimg {
    width: calc(100vw - 70px);
    height: 80vh;
  }

  /*A small hack to prevent flickering on some browsers*/
  .accordian ul {
    width: 3000px;
    /*This will give ample space to the last item to move
    instead of falling down/flickering during hovers.*/
  }

  .accordian li {
    position: relative;
    display: block;
    width: 25vw;
    float: left;


     
    border-left: 1px solid #888;
    
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    
    /*Transitions to give animation effect*/
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    /*If you hover on the images now you should be able to 
    see the basic accordian*/
  }

  /*Reduce with of un-hovered elements*/
  .accordian ul:hover li {
    width: 7vw;
  }
  /*Lets apply hover effects now*/
  /*The LI hover style should override the UL hover style*/
  .accordian ul li:hover {
    width: 80vw;
  }


  .accordian li img {
    display: block;
  }
  .image_title {
    background: rgba(0, 0, 0, 0.5);
    bottom: 63px;
    width: calc(100vw - 70px); 
    text-align: left;
  }

}

@media (min-width: 1200px) {

  .accordian {
    width: 80vw;
    height: 85vh;
    min-height: 900px;
    overflow: hidden;
    
    /*Time for some styling*/

    margin: 100px auto;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  }

  .accimg {
    width: 80vw;
    height: 85vh;
    min-height: 900px;
  }

  /*A small hack to prevent flickering on some browsers*/
  .accordian ul {
    width: 3000px;
    /*This will give ample space to the last item to move
    instead of falling down/flickering during hovers.*/
  }

  .accordian li {
    position: relative;
    display: block;
    width: 20vw;
    float: left;


     
    border-left: 1px solid #888;
    
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    
    /*Transitions to give animation effect*/
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    /*If you hover on the images now you should be able to 
    see the basic accordian*/
  }

  /*Reduce with of un-hovered elements*/
  .accordian ul:hover li {
    width: 3vw;
  }
  /*Lets apply hover effects now*/
  /*The LI hover style should override the UL hover style*/
  .accordian ul li:hover {
    width: 70vw;
  }


  .accordian li img {
    display: block;
  }
  .image_title {
    background: rgba(0, 0, 0, 0.5);
    bottom: 63px;
    width: calc(100vw - 70px); 
    text-align: left;
  }

}


@media screen and (max-width: 768px) (orientation:landscape) {
  .image_title {
    background: rgba(0, 0, 0, 0.5);
    position: relative;
    left: 0; 
    bottom: -76vh; 
    width: 100vh; 
    text-align: left;
  }
}