@media only screen and (min-width: 651px)
{
html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #000000;
      font-family: "Merriweather", serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
        overflow: hidden;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #000000;
}

.swiper-container {
      width: 100vw;
      height: 100vh;
    }
    
.swiper-slide {
    width: 100vw;
      text-align: center;
      font-size: 18px;
      background: #000000;
        color: #FFFFFF;
      /* 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;
    }

img
{
    width: auto;
    height: 100vh;
    position: absolute;
    left: 0%;
    -webkit-transition: 1s ease-in-out;
		-moz-transition: 1s ease-in-out;
		-o-transition: 1s ease-in-out;
		-ms-transition: 1s ease-in-out;
		transition: 1s ease-in-out;
}

.small-bar
{
    height: 2.5vh;
    width: 7vw;
    position: absolute;
    right: 4.5%;
    top: -5%;
    background-color: #FFCB03;
    
}

.caption
{
    height: 55vh;
    width: 40vw;
    position: absolute;
    right: 0%;
    top: 15%;
    margin: 2.5%;
    
}

.caption p
{
    font-size: 1.2vw;
    color: #FFFFFF;
    padding: 5% 5% 5% 15%;
    text-align: right;
}

.icon-x
{
    height: 3.25vw;
    width: 3.25vw;
    position: absolute;
    z-index: 15;
    bottom: 20%;
    right: 15%;
    cursor: pointer;
    background-image: url(../graphics/X-icon.png);
    background-size: contain;
}

.usdol
{
    height: 15vh;
    width: 33vw;
    position: absolute;
    z-index: 15;
    bottom: 2%;
    right: 5%;
    font-size: 0.6vw;
    color: darkgray;
    text-align: right;
}

}


@media only screen and (max-width: 650px){

html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #000000;
      font-family: "Merriweather", serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
        overflow: hidden;
    }

.swiper-container {
      width: 100vw;
      height: 100vh;
    }
    
.swiper-slide {
    width: 100vw;
      text-align: center;
      font-size: 18px;
      background: #000000;
        color: #FFFFFF;
    }

img
{
    width: 100vw;
    height: auto;
    position: absolute;
    left: 0%;
    -webkit-transition: 1s ease-in-out;
		-moz-transition: 1s ease-in-out;
		-o-transition: 1s ease-in-out;
		-ms-transition: 1s ease-in-out;
		transition: 1s ease-in-out;
}

.small-bar
{
    height: 1.5vh;
    width: 10vw;
    position: absolute;
    right: 4.5%;
    top: -5%;
    background-color: #FFCB03;
    
}

.caption
{
    height: 30vh;
    width: 100vw;
    position: absolute;
    top: 60%;
    margin: 2.5%;
    
}

.caption p
{
    font-size: 2.8vw;
    color: #FFFFFF;
    padding: 5% 5% 5% 5%;
    text-align: right;
}

.icon-x
{
    height: 3.25vh;
    width: 3.25vh;
    position: absolute;
    z-index: 15;
    bottom: 5%;
    right: 21%;
    cursor: pointer;
    background-image: url(../graphics/X-icon.png);
    background-size: contain;
}
    
.usdol
{
    height: 10vh;
    width: 60vw;
    position: absolute;
    z-index: 15;
    bottom: 1.5%;
    left: 2%;
    font-size: 1.2vw;
    color: darkgray;
    text-align: justify;
}
    
}