@import url("seurat.css");
@import url("ouchien.css");

body {
  background-color: #fff8e6;
}

#PageOuchienWifi #heading {
  background: linear-gradient(to bottom, transparent, transparent calc(100% - 6px), #ed8500  calc(100% - 6px), #ed8500 100%);
  background-size: 100% calc(100%);
}

#heading > .container {
  background-image: url(../img/wifi/en_wifi_PC.gif);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 30px 15px 3%;
}

.heading-left-content {
  padding-top: 76px;
  width: 33%;
}

#PageOuchienWifi .heading-left-content .btn-wrapper {
  padding-top: 22px;
}

#PageOuchienWifi .btn-wrapper a {
  display: inline-block;
  max-width: 100%;
}

.btn-app img {
  background-image: url(../img/wifi/btn_app_sprite.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
  max-width: 100%;
}

.btn-app:hover img {
  background-position: center bottom;
}

.bg-orange {
  background-color: #ed8500;
}

#prices {
  padding: 70px 0 50px;
}

#prices .row {
  width: unset;
}

@media (min-width: 768px){
  div[class^='col-'].low-gutter-left {
    padding-left: 10px!important;
  }

  div[class^='col-'].low-gutter-right {
    padding-right: 10px!important;
  }  
}

#overview .content {
  background-image: url(../img/wifi/deco_train.png);
  background-position: calc(100% - 8px) calc(100% - 3px);
  background-repeat: no-repeat;
  background-size: 344px;
  margin: 0 auto;
  max-width: 870px;
  padding: 57px 15px 157px;
}

#trouble {
  padding-bottom: 78px;
  padding-top: 70px;
}

#trouble .content {
  margin: 0 auto;
  max-width: 870px;
  padding: 0 15px;
}

#trouble img.img-text {
  margin: 0 auto 90px;
  max-height: 27px;
  width: auto;
}

#PageOuchienWifi #Footer .contBox02 {
  background-color: #eb8500;
  margin-bottom: 0;
  /*padding: 32px 0;*/
}

#wifi-contact {
  padding-top: 116px;
}

#wifi-contact .content {
  margin: 0 auto;
  max-width: 640px;
}

#wifi-contact .text-video {
  margin-bottom: 68px;
  max-height: 71.76px;
  max-width: 544px;
  width: auto;
}

#wifi-contact .movie-wrapper {
  margin-bottom: 163.2px;
  max-height: 2990.4px;
  max-width: 518.4px;
}

#Footer .innerBasic {
  padding: 0;
}

.fab {
  position: fixed;
  bottom: 85px;
  width: 100%;
}

.fab .container {
  padding: 0;
}

.fab a {
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  top: 0;
}

.fab a:hover {
  box-shadow: 0 5px 2px rgb(0, 0, 0, .2);
  top: -5px;
}

.btn-application {
  width: 133px;
}

@media (min-width: 768px) {
  .fab a:active {
    -webkit-transition: all 0s linear;
       -moz-transition: all 0s linear;
        -ms-transition: all 0s linear;
         -o-transition: all 0s linear;
            transition: all 0s linear;
    box-shadow: none;
    top: 0;
  }
}

#Footer .contBox01 {
  background-image: url(../img/wifi/deco_flower_PC.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: calc(100% - 48px);
  padding-bottom: 10%;
  padding-top: 80px;
  margin-bottom: 0;
}

#Footer .footer-content-list a {
  color: #fff;
  font-size: 14px;
  padding: 0 8px;
}

@media (max-width: 767px) {
  #heading > .container {
    background-image: url(../img/wifi/en_wifi_SP.gif);
    background-size: calc(100% - 20px);
    padding: 13px 10px 50%;
  }

  .heading-left-content {
    margin: 0 auto;
    max-width: 180px;
    padding: 0;
    width: 100%;
  }

  #prices {
    padding: 0 0 32px;
  }

  #prices .btn-wrapper {
    margin: 0 auto;
    max-width: 282px;
    padding: 35px 0 33px;
  }

  .img-price {
    margin-top: 32px;
  }

  #overview .content {
    background-position: calc(100% - 11px) bottom;
    background-size: 140px;
    padding: 36px 11px 65px;
  }

  #trouble {
    padding-bottom: 46px;
    padding-top: 39px;
  }

  #trouble .content {
    padding: 0 11px;
  }

  #trouble img.img-text {
    margin: 0 auto 40px;
    max-height: 120px;
    max-width: 100%;
    width: auto;
  }

  #wifi-contact {
    /*background-image: url(../img/wifi/deco_flower_SP.png);*/
    /*background-size: calc(100% - 76px);*/
    /*padding-bottom: 105px;*/
    padding-top: 33px;
  }

  #wifi-contact .text-video {
    margin-bottom: 15px;
    max-width: 221px;
  }

  #wifi-contact .btn-wrapper {
    padding-top: 14px;
  }

  #wifi-contact .movie-wrapper {
    margin: 0 auto 72px;
    padding: 0 11px;
  }

  .fab {
    padding: 0 4px;
    transition: bottom .5s ease;
  }

  .fab.end-screen {
    bottom: 170px;
  }

  #Footer .contBox01 {
    background-image: url(../img/wifi/deco_flower_SP.png);
    background-size: calc(100% - 48px);
    padding-top: 40px;
    padding-bottom: 24%;
  }

  #Footer li.d-inline-block {
    float: left;
    width: 50%;
  }

  #Footer li.d-inline-block:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,.3);
  }

  #Footer li.d-inline-block a {
    display: inline-block;
    padding: 6px;
    width: 100%;
  }

  #Footer li.d-inline-block a:hover {
    background-color: rgba(255,255,255,.3);
  }
}