@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
@import url(http://fonts.googleapis.com/css?family=Amiri:400italic);

    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }




.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  zoom: 3;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2hldnJvbl9yaWdodCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NDBweCIgaGVpZ2h0PSI0ODBweCIgdmlld0JveD0iMCAwIDY0MCA0ODAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0MCA0ODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM0MjU4QjkiIGQ9Ik0yOTkuOTEyLDEwOC4zODRjMTAuMDMyLDkuNzkyLDEwOC4wNDgsMTEyLjY4LDEwOC4wNDgsMTEyLjY4QzQxMy4zMTIsMjI2LjMyLDQxNiwyMzMuMTYsNDE2LDI0MHMtMi42ODgsMTMuNjgtOC4wNCwxOC44ODljMCwwLTk4LjAxNiwxMDIuOTM2LTEwOC4wNDgsMTEyLjY4Yy0xMC4wMzIsOS43OTItMjguMDgsMTAuNDY0LTM4Ljc2LDBjLTEwLjcwNC0xMC40MTYtMTEuNTQ0LTI0Ljk4NCwwLTM3Ljc3NkwzNTEuMDgsMjQwbC04OS45MjgtOTMuNzkyYy0xMS41NDQtMTIuNzkyLTEwLjcwNC0yNy4zODQsMC0zNy44MjRDMjcxLjgzMiw5Ny45MiwyODkuODgsOTguNTY4LDI5OS45MTIsMTA4LjM4NHoiLz48L3N2Zz4=);
  right: 0;
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  zoom: 3;
  left: 0;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2hldnJvbl9sZWZ0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0MHB4IiBoZWlnaHQ9IjQ4MHB4IiB2aWV3Qm94PSIwIDAgNjQwIDQ4MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQwIDQ4MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iIzQyNThCOSIgZD0iTTM3OC44NDgsMTA4LjM4NGMxMC43MDQsMTAuNDY0LDExLjU0NSwyNS4wMzIsMCwzNy44MjRMMjg4LjkyLDI0MGw4OS45MjgsOTMuNzkyYzExLjU0NSwxMi43OTIsMTAuNzA0LDI3LjM4NCwwLDM3Ljc3NmMtMTAuNjgsMTAuNDY0LTI4LjcyOCw5Ljc5Mi0zOC43NiwwYy0xMC4wMzEtOS43NDQtMTA4LjA0OC0xMTIuNjgtMTA4LjA0OC0xMTIuNjhDMjI2LjY4OCwyNTMuNjgsMjI0LDI0Ni44NCwyMjQsMjQwczIuNjg4LTEzLjY4LDguMDQtMTguOTM2YzAsMCw5OC4wMTctMTAyLjg4OCwxMDguMDQ4LTExMi42OEMzNTAuMTIsOTguNTY4LDM2OC4xNjgsOTcuOTIsMzc4Ljg0OCwxMDguMzg0eiIvPjwvc3ZnPg==);
}

.slide1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 5rem;
  color: #1D2C6F;
}

.slide1ul {
  list-style-type: none;
}

.siteTitle {
  font-family: 'Amiri', serif;
  font-size: 0.55em;
  font-weight: 400;
  font-style: italic;
  color: #4258B9;
}


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)  {
  .shots {
    max-width: 600px;
  }
}


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
  .shots {
    max-height: 600px;
  }
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {

  /* iph4,5 */

  .slide1 {
    font-size: 1.8em;
  }
  .slide1ul {
    position: relative;
    left: -15px;
  }
  .swiper-button-next, .swiper-button-prev{
    display: none;
  }
  .shots {
    max-width: 230px;
  }
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {

  /* iph4,5 */

  .slide1 {
    font-size: 3em;
  }
  .slide1ul {
    position: relative;
    left: -15px;
  }
  .swiper-button-next, .swiper-button-prev{
    zoom: 1.8;
  }
  .shots {
    max-height: 230px;
  }

}


@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
    /* iph6 */

  .slide1 {
    font-size: 2.7em;
  }
  .slide1ul {
    position: relative;
    left: -15px;
  }
  .swiper-button-next, .swiper-button-prev{
    display: none;
  }
  .shots {
    max-width: 330px;
  }

}

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {

  /* iph6 */

  .slide1 {
    font-size: 4em;
  }
  .slide1ul {
    position: relative;
    left: -15px;
  }
  .swiper-button-next, .swiper-button-prev{
    zoom: 1.8;
  }
  .shots {
    max-height: 290px;
  }

}

@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) {

  /* iph6+ */

  .slide1 {
    font-size: 2.7em;
  }
  .slide1ul {
    position: relative;
    left: -15px;
  }
  .swiper-button-next, .swiper-button-prev{
    display: none;
  }
  .shots {
    max-width: 340px;
  }
}

@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) {
  /* iph6+ */

  .slide1 {
    font-size: 4.5em;
  }
  .slide1ul {
    position: relative;
    left: -15px;
  }
  .swiper-button-next, .swiper-button-prev{
    zoom: 1.8;
  }
  .shots {
    max-height: 320px;
  }

}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)  {

  /* ipadmini */

  .slide1 {
    font-size: 4.7em;
  }
  .slide1ul {
    position: relative;
    left: -15px;
  }
  .swiper-button-next, .swiper-button-prev{
    zoom: 2;
  }
  .shots {
    max-width: 600px;
  }

}


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  {
  /* ipadmini */

  .slide1 {
    font-size: 6em;
  }
  .slide1ul {
    position: relative;
    left: -15px;
  }
  .swiper-button-next, .swiper-button-prev{
    zoom: 1.8;
  }
  .shots {
    max-height: 650px;
  }

}

.shots {
  max-width: 80%;
  max-height: 80%;
}