/* CSS RESET v2.0 | 20110126 License: none (public domain) */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
  filter:inherit; -ms-filter:inherit;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:focus {
  outline: none;
}

::-moz-focus-inner {
  border: 0;
}
img {
  display: block;
  max-height: 100%;
}

div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-text-size-adjust: border-box;
}

@font-face {
  font-family: 'Futura';
  src: url('../font/Futura.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Futura', Arial, sans-serif;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  overflow: hidden;
}
.wrapper > div{
  transition: all 0.2s;
}


[class^="img-"] {
  position: absolute;
}

[class^="img-"] i {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 100%;
  height: 100%;
}












/******************************************
* images
******************************************/
.bg {
  background-image: url(../img/bg.jpg);
  background-size: cover !important;
}
.copy {
  background-image: url(../img/copy.png);
}
.footer {
  background-image: url(../img/footer.png);
  background-position: center bottom !important;
}
.jo-logo {
  background-image: url(../img/jo-logo.png);
  background-position: center bottom !important;
}
.btn1 {
  background-image: url(../img/btn1.png);
}
.btn2 {
  background-image: url(../img/btn2.png);
}
.btn3 {
  background-image: url(../img/btn3.png);
}

@media only screen and (max-width : 639px) {
  .copy {
    background-image: url(../img/copy_sm.png);
  }
}



/******************************************
* position
******************************************/
.img-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.img-copy {
  left: 6.5%;
  top: 13.2%;
  width: 85.7%;
  height: 40.4%;
}
.desktop .img-btn1:hover,
.desktop .img-btn2:hover,
.desktop .img-btn3:hover {
  transform: scale(1.03);
  cursor: pointer;
}
.img-btn1 {
  left: 31.2%;
  top: 57.3%;
  width: 37.5%;
  height: 6.5%;
}
.img-btn2 {
  left: 31.2%;
  top: 67.3%;
  width: 37.5%;
  height: 6.5%;
}
.img-btn3 {
  left: 31.2%;
  top: 77.3%;
  width: 37.5%;
  height: 6.5%;
}
.img-jo-logo {
  left: 3.7%;
  bottom: 3.2%;
  width: 12.7%;
  height: 12.2%;
}
.img-footer {
  left: 33.5%;
  bottom: 3.2%;
  width: 33.3%;
  height: 2.8%;
}

a {
  color: white;
}
.desktop a:hover {
  color: #a11616;
}








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

}
@media only screen and (max-width : 980px) {
  .img-copy {
    left: 6%;
    top: 10%;
    width: 88%;
    height: 25%;
  }
  .img-btn1 {
    left: 20%;
    top: 37%;
    width: 60%;
    height: 6%;
  }
  .img-btn2 {
    left: 20%;
    top: 47%;
    width: 60%;
    height: 6%;
  }
  .img-btn3 {
    left: 20%;
    top: 57%;
    width: 60%;
    height: 6%;
  }
  .img-jo-logo {
    left: 41%;
    bottom: 18%;
    width: 18%;
    height: 10%;
  }
  .img-footer {
    left: 25%;
    bottom: 11%;
    width: 50%;
    height: 2.3%;
  }
}
@media only screen and (max-width : 760px) {
  .img-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .img-copy {
    left: 6.5%;
    top: 7.2%;
    width: 85.7%;
    height: 40.4%;
  }
  .img-btn1 {
    left: 31.2%;
    top: 51.3%;
    width: 37.5%;
    height: 6.5%;
  }
  .img-btn2 {
    left: 31.2%;
    top: 61.3%;
    width: 37.5%;
    height: 6.5%;
  }
  .img-btn3 {
    left: 31.2%;
    top: 71.3%;
    width: 37.5%;
    height: 6.5%;
  }
  .img-jo-logo {
    left: 3.7%;
    bottom: 3.2%;
    width: 12.7%;
    height: 12.2%;
  }
  .img-footer {
    left: 33.5%;
    bottom: 3.2%;
    width: 33.3%;
    height: 2.8%;
  }
}
@media only screen and (max-width : 639px) {
  .img-copy {
    left: 4%;
    top: 10%;
    width: 92%;
    height: 19%;
  }
  .img-btn1 {
    left: 16%;
    top: 32%;
    width: 68%;
    height: 5%;
  }
  .img-btn2 {
    left: 16%;
    top: 42%;
    width: 68%;
    height: 5%;
  }
  .img-btn3 {
    left: 16%;
    top: 52%;
    width: 68%;
    height: 5%;
  }
  .img-jo-logo {
    left: 37%;
    bottom: 19%;
    width: 26%;
    height: 11%;
  }
  .img-footer {
    left: 15%;
    bottom: 11%;
    width: 70%;
    height: 2.3%;
  }
}
@media only screen and (orientation: landscape) {
  .img-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .img-copy {
    left: 6.5%;
    top: 7.2%;
    width: 85.7%;
    height: 40.4%;
  }
  .img-btn1 {
    left: 31.2%;
    top: 51.3%;
    width: 37.5%;
    height: 6.5%;
  }
  .img-btn2 {
    left: 31.2%;
    top: 61.3%;
    width: 37.5%;
    height: 6.5%;
  }
  .img-btn3 {
    left: 31.2%;
    top: 71.3%;
    width: 37.5%;
    height: 6.5%;
  }
  .img-jo-logo {
    left: 3.7%;
    bottom: 3.2%;
    width: 12.7%;
    height: 12.2%;
  }
  .img-footer {
    left: 33.5%;
    bottom: 3.2%;
    width: 33.3%;
    height: 2.8%;
  }
}

.links {
  position: absolute;
  transform: translate(-50%, -50%);
  bottom: 0;
  left: 50%;
  color: white;
  font-size: 1rem;
  white-space: nowrap;
}

.dnsos {
  color: unset !important;
  border: unset !important;
  padding: unset !important;
  font-size: inherit !important;
  text-transform: uppercase;
  white-space: unset !important;
}
.dnsos:hover {
  background: none !important;
}