* {
    box-sizing: border-box;
}

a, a:active, a:focus {
    outline: none !important;
}

html {
    overflow-y: scroll;
}

body {
    font: 16px/1.5 'Lato', sans-serif;
}

  .home {
      /* background: url('../images/header-home.jpg') no-repeat 50% 0%; */
      background: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/bg.jpg') no-repeat 50% 10%;
      background-size: cover;
      /* min-height: 640px; */
  }

  #operator-table {
      background: rgba(0, 0, 0, 0.5);
      border-radius: 10px;
  }

  .operator-img {
      width: 100%;
      height: 100%;
  }

  .operator-text {
      color: white;
      font-size: 16px;
  }

  .highlight {
      color: #F8CD31 !important;
      font-weight: bold !important;
      text-shadow: 2px 2px 6px #000 !important;
  }

  .my-1 {
      margin-top: 0.5rem !important;
      margin-bottom: 0.5rem !important;
  }

  /* Hack for vertical alignment in Bootstrap v3.0*/
  .vcenter {
      display: inline-block;
      vertical-align: middle;
      float: none;
  }

  .homepage-top-text,
  .homepage-mid-text,
  .homepage-sub-text {
      text-shadow: 2px 2px 6px #000;
  }

  .homepage-top-text {
      margin-top: 5%;
      width: 100%;
      font-size: 2.8em;
      font-weight: 700;
      letter-spacing: -1px;
      color: #FCAD56;
      /*margin-top: 10%;*/
  }

  .homepage-mid-text {
      font-size: 1.6em;
      font-weight: 400;
      color: #ffffff;
  }

  .homepage-sub-text {
      font-size: 0.5em;
      font-weight: 300;
      font-style: italic;
      color: #ffffff;
  }

  .btn-how-to-play {
      clear: both;
      display: block;
      width: 15em;
      margin: 30px auto 30px;
      padding: 0.7em 1em;
      background: #FCAD56;
      border-radius: 60px;
  }

  a.btn-how-to-play,
  button.btn-how-to-play {
      color: #2C2C2C;
      font-size: 1em;
      font-weight: 900;
      text-align: center;
      text-transform: uppercase;
  }

  .btn-how-to-play:hover {
      background-color: #000;
      color: #F8CD31;
  }

  .homepage-countdown {
      margin-top: 15px;
  }

  .homepage-countdown p,
  .homepage-jackpot {
      font-size: 2em;
      font-weight: 300;
      margin: 0;
      margin-top: 10px;
      color: white;
  }

  p.homepage-next-draw-date {
      /*margin-bottom: 20px;*/
      margin-top: -2%;
  }

  p.homepage-next-draw-date,
  p.homepage-countdown-value {
      font-size: 2.1em;
      font-weight: 600;
      color: #F8C96A;
      text-shadow: 0 0 1px #000;
  }

  p.homepage-countdown-text {
      font-size: 1.5em;
      font-weight: 300;
  }

  .homepage-jackpot {
      text-align: center;
      margin-top: 10px;
  }

  .homepage-jackpot-text {
      font-weight: 900;
      color: #fff;
      margin-top: 30px;
      text-shadow: 0 0 10px #000;
  }

  span.homepage-jackpot-value {
      font-size: 2em;
      line-height: 0.4em;
      font-weight: 900;
      color: #009E49;
      text-shadow: 0 0 6px #000;
      text-align: center;
      line-height: 75px;
  }

.logo-big{
    width: 20%;
    margin-top: 5%;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
}

  .jackpot {
      background: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('../images/bg3.jpg') no-repeat 50% 50%;
      background-size: cover;
      /* min-height: 172px; */
  }


  .info {
      background: url('../images/bg2.jpg') no-repeat 50% 50%;
      background-size: cover;
      min-height: 120px;
  }


  .jackpot-text {
      font-size: 5vw;
      line-height: 0.4em;
      font-weight: 900;
      color: #fff;
      text-shadow: 0 0 6px #000;
      text-align: center;
      line-height: 75px;
  }

  .jackpot-text-header{
      font-size: 36px;
      color: white;
      margin: 10px;
  }


  .info-title {
      margin: 5% auto;
      font-size: 1.6vw;
      font-weight: 700;
      color: #F8C96A;
      text-shadow: 0 0 6px #000;
  }

  .latest-draw {
      background-color: #fff;
      color: #000;
      font-size: 1.8vw;
      padding: 10px;
      border-radius: 50%;
      /* display: inline-block; */
      width: 3.5vw;
      line-height: 4em;
  }

  .winners-value {
      color: #fff !important;
      font-size: 3vw;
      font-weight: 900;
      margin-top: -3%;
  }


.container {
    width: 90%;
}

#logo {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-right: 0;
    width: 100px;
}

.navbar {
    position: static;
    border: none;
}

.navbar-default {
    background-image: none !important;
    background-color: transparent !important;
}

.navbar-default {
    border: none;
    box-shadow: none;
}

.navbar-default .navbar-toggle .icon-bar {
    border-color: #ffffff;
    background-color: #ffffff;
}

#nav-container {
    width: 100%;
    display: inline-block;
    background-color: none !important;
}

.navbar-nav {
    float: right;
    text-transform: uppercase;
    margin-top: 3px;
}

.navbar-default .navbar-nav > li > a {
    padding-left: 1em;
    padding-right: 1em;
    font-size: 1em;
    color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover {
    text-decoration: underline;
    color: #ffffff;
}

a.nav-item-selected {
    text-decoration: underline;
}

.nav-account {
    border: 2px solid #ffffff;
    border-radius: 50px;
    margin-left: 10px;
}

.header-text {
    width: 100%;
    font-size: 4.5em;
    font-weight: 700;
    letter-spacing: -1px;
    color: #F8CD31;
    margin-top: 2%;
    margin-bottom: 5%;
    text-shadow: 2px 2px 6px #000;
}

.yellow-text {
    color: #DCAF0A;
    font-weight: 600;
    /*text-shadow: 0 0 4px #000;*/
}

.img-responsive {
  display: inline-block !important;
}

/* Home */

.bg-home {
    background: url('../images/header-home.jpg') no-repeat top center;
    background-size: cover;
}

.homepage-top-text,
.homepage-mid-text,
.homepage-sub-text {
    text-shadow: 2px 2px 6px #000;
}

.homepage-top-text {
    width: 100%;
    font-size: 2.8em;
    font-weight: 700;
    letter-spacing: -1px;
    color: #F8CD31;
    /*margin-top: 10%;*/
}

.homepage-mid-text {
    font-size: 1.6em;
    font-weight: 400;
    color: #ffffff;
}

.homepage-sub-text {
    font-size: 0.8em;
    font-weight: 300;
    font-style: italic;
    color: #ffffff;
    /*margin-bottom: 30px;*/
    margin-bottom: 10px;
}

.btn-how-to-play {
    clear: both;
    display: block;
    width: 15em;
    margin: 30px auto 30px;
    padding: 0.7em 1em;
    background: #F8CD31;
    border-radius: 60px;
}

a.btn-how-to-play {
    color: #2C2C2C;
    font-size: 1em;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.btn-how-to-play:hover {
    background-color: #000;
    color: #F8CD31;
}

.homepage-countdown {
    margin-top: 15px;
}

.homepage-countdown p,
.homepage-jackpot {
    color: #F8C96A;
    font-size: 2em;
    font-weight: bold;
    margin: 0;
    margin-top : 10px;

}

p.homepage-next-draw-date {
    /*margin-bottom: 20px;*/
}

p.homepage-next-draw-date,
p.homepage-countdown-value {
    font-size: 2.1em;
    font-weight: 600;
    color: white;
    text-shadow: 0 0 1px #000;
}

p.homepage-countdown-text {
    font-size: 1.5em;
    font-weight: 300;
}


.homepage-jackpot {
    text-align: center;
    margin-top: 10px;
}

.homepage-jackpot-text {
    /*changes from Alex*/
    font-weight : 900;
    color : #fff;
    line-height : 70px;
    text-shadow : 0 0 10px #000;
}

span.homepage-jackpot-value {
    font-size: 2.5em;
    line-height: 0.4em;
    font-weight: 900;
    color: #F8CD31;
    text-shadow: 0 0 6px #000;
    text-align: center;
    line-height: 75px;
}

/*p.homepage-jackpot-text,
p.homepage-jackpot-value {
    line-height: 75px;
    margin-bottom: 20px;
}*/

/* Participation */

.bg-participation {
    background: url('../images/header-participation.jpg') no-repeat top center;
    background-size: cover;
}

.participation-top-text,
.participation-mid-text {
    width: 80%;
    font-size: 1.8em;
    font-weight: 400;
    margin: 0 auto;
    margin-top: 2%;
}

.participation-mid-text {
    width: 60%;
    font-weight: 300;
}

.guide-left {
    margin-top: 45px;
}

.participation-guide-title {
    font-size: 1.4em;
    font-weight: 600;
}

.participation-guide-text {
    font-size: 1.2em;
    font-weight: 400;
    margin-bottom: 100px;
}

.participation-mobile img {
    margin-top: -150px;
    margin-bottom: 50px;
}

.tips {
    margin-top: 50px;
    background-color: #F8CD31;
}

.row-tips {
    width: 90%;
    margin: 0 auto 75px;
}

.row-lang {
    width: 60%;
    margin: 0 auto;
    padding-bottom: 50px;
}

p.participation-tips-header {
    padding-top: 3%;
    font-size: 2em;
    font-weight: 400;
    margin-bottom: 3%;
}

p.participation-tips-title {
    font-size: 1.3em;
    font-weight: 400;
    color: #9B0404;
}

p.participation-tips-text,
p.participation-lang-text {
    font-size: 1.1em;
    font-weight: 300;
}

.participation-tips-text a {
    color: #000;
    text-decoration: underline;
}

.row-lang img {
    margin-bottom: 20px;
}

.disclaimer {
    margin-top: 0;
    background-color: #818080;
}

.row-disclaimer {
    width: 90%;
    margin: 0 auto;
}

p.participation-disclaimer-text {
    color: #ffffff;
    font-weight: 200;
    font-size: 0.9em;
    margin: 20px auto;
}

/* Winnings & Payments */

.bg-payments {
    background: url('../images/header-payments.jpg') no-repeat top center;
    background-size: cover;
}

p.payments-header {
    padding-top: 3%;
    font-size: 2em;
    font-weight: 400;
    margin-bottom: 3%;
}

.row-winning-categories {
    width: 75%;
    margin: 0 auto;
    padding-bottom: 100px;
}

.row-winning-categories > div {
    text-align: center;
}

.row-winning-categories > div > img {
    margin: 0 auto;
}

p.category-disclaimer {
    font-size: 1.2em;
    font-weight: 200;
}

/* Results */

.bg-results {
    background: url('../images/header-results.jpg') no-repeat top center;
    background-size: cover;
}

p.results-top-text {
    width: 50%;
    font-size: 2em;
    font-weight: 600;
    margin: 15px auto;
    margin-top: 2%;
}

.row-drawn-numbers {
    width: 50%;
    margin: 15px auto;
    text-align: center;
}

.row-drawn-numbers > div {
    text-align: center;
}

.row-drawn-numbers > div > img {
    margin: 0 auto;
}

.row-results {
    width: 80%;
    margin: 5% auto;
}

.table {
    background-color: #ffffff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.table-header {
    border: 0 !important;
    padding: 0 !important;
}

.table-header img {
    width: 100%;
}

p.table-title {
    font-size: 1.4em;
    font-weight: 300;
    margin-top: 10px;
}

p.table-text {
    font-size: 1.6em;
    font-weight: 600;
}

/* Statistics */

.bg-statistics {
    background: url('../images/header-statistics.jpg') no-repeat top center;
    background-size: cover;
}

/* FAQ */

.bg-faq {
    background: url('../images/header-faq.jpg') no-repeat top center;
    background-size: cover;
}

.row-faq {
    width: 60%;
    margin: 0 auto;
}

.panel-title a:hover {
    color: #000;
    text-decoration: underline;
}

.panel-title a {
    font-size: 1.2em;
}

.accordion-text {
    padding: 20px;
    background-color: #EBF0F0;
    color: #000;
    font-size: 1.2em;
}

.accordion-text a {
    color: #000;
    text-decoration: underline;
}

/* Terms */

.bg-terms {
    background: url('../images/header-terms.jpg') no-repeat top center;
    background-size: cover;
}

.row-terms {
    width: 60%;
    margin: 3% auto;
}

/* My Account */

.bg-account {
    background: url('../images/header-account.jpg') no-repeat top center;
    background-size: cover;
}

.row-played {
    width: 60%;
    margin: 3% auto;
}

.table-account th,
.table-account td {
    text-align: center;
    width: 33%;
}

.amount-won {
    font-weight: 800;
}

.my-account-datepicker-input-group {
    border: 1px solid #ffffff;
    border-radius: 50px;
    margin: 0 auto;
    width: 250px;
}

.my-account-datepicker-input-group .form-control {
    background-color: #ffffff;
    border: none;
    border-radius: 50px;
    box-shadow: none;
    text-align: center;
}

.my-account-datepicker-input-group .input-group-addon {
    background-color: transparent;
    border: none;
    border-radius: 50px;
    box-shadow: none;
    text-align: center;
}

.my-account-datepicker-input-group .input-group-addon .glyphicon {
    color: #ffffff;
    font-size: 1.5em;
}

.datepicker,
.datepicker * {
    border-radius: 0 !important;
}

.datepicker td, .datepicker th {
    width: 34px;
}

/* loginModal */

.vertical-alignment-helper {
    display: table;
    height: 100%;
    width: 100%;
    pointer-events: none;
}

.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width: inherit;
    height: inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

#loginModal .modal-content {
    background-color: #f8cd31;
}

#loginModal .modal-content .modal-header {
    border-bottom: none;
    padding: 30px;
}

#loginModal .modal-content .modal-header .modal-title {
    font-size: 1.5em;
    text-align: center;
}

#loginModal .modal-content .modal-body {
    font-size: 1.2em;
    padding: 0 30px;
    text-align: center;
}

#loginModal .modal-content .modal-body form {
    margin: 30px 0;
}

#loginModal .modal-content .modal-body .input-group {
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 50px;
    margin: 0 auto 10px auto;
    width: 250px;
}

#loginModal .modal-content .modal-body .input-group .form-control {
    background-color: #ffffff;
    border: none;
    border-radius: 50px;
    box-shadow: none;
    color: #333333;
    text-align: left;
}

#loginModal .modal-content .modal-body .input-group .input-group-addon {
    background-color: #ffffff;
    border: none;
    border-radius: 50px;
    box-shadow: none;
    color: #999999;
    text-align: left;
}

#loginModal .modal-content .modal-body .input-group .input-group-addon .glyphicon {
    color: #333333;
    font-size: 1.5em;
}

#loginModal .modal-content .modal-body .form-group {
    margin: 0 auto;
    width: 250px;
}

#loginModal .modal-content .modal-body .form-group .form-control {
    background-color: #f8cd31;
    border: 1px solid #333333;
    border-radius: 50px;
    box-shadow: none;
    color: #333333;
    text-align: center;
}

#loginModal .modal-content .modal-body .checkbox {
    font-size: 15px;
    margin: 10px auto;
    text-align: center;
    width: 250px;
}

#loginModal .modal-content .modal-body .checkbox input[type="checkbox"] {
    margin-top: 5px !important;
}

#loginModal .modal-content .modal-footer {
    border-top: none;
    padding: 30px;
}

/* ---------------------------------------------- /*
    * Media
/* ---------------------------------------------- */

/* Very large Devices, Wide Screens */
@media only screen and (max-width: 1500px) {

    .navbar-custom .navbar-brand,
    .navbar-custom .navbar-nav > li > a,
    .navbar-custom .navbar-nav .dropdown-menu > li > a {
        font-size: 0.8em;
    }

}



/* Large Devices, Wide Screens */
@media only screen and (max-width: 1270px) {

    .iconbox{
        padding: 20px 20px;
    }
    .navbar-header {
        float: none;
    }

    .navbar-left, .navbar-right {
        float: none !important;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        background-color: rgba(255, 255, 255, 0.7);
    }

    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-nav {
        float: none !important;
        margin-top: 7.5px;
    }

    .navbar-nav > li {
        float: none;
    }

    .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .collapse.in {
        display: block !important;
    }

    .nav-account {
        border: none;
    }

    .navbar-default .navbar-nav > li > a {
        color: #000;
    }

    .navbar-default .navbar-nav > li > a:hover {
        background-color: #F8CD31;
        color: #000;
        text-decoration: none !important;
    }

    .homepage-top-text {
        font-size: 2.4em;
    }

    .homepage-countdown p,
    .homepage-jackpot {
        font-size: 1.4em;
        text-align: center;
    }

    .homepage-mid-text {
        font-size: 1.4em;
    }

    p.homepage-next-draw-date,
    p.homepage-countdown-value {
        font-size: 1.6em;
        text-align: center;
    }

    .guide-left {
      margin-top: 100px;
    }

    .participation-mobile img {
      margin-top: 0;
    }

    .row-faq,
    .row-drawn-numbers,
    .row-played {
        width: 60% !important;
    }

    .guide-left p{
        text-align:right;
    }
}

/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {

    /*.navbar-custom .navbar-brand,
        .navbar-custom .navbar-nav > li > a,
        .navbar-custom .navbar-nav .dropdown-menu > li > a {
        font-size: 7.5px;
        letter-spacing: 1px;
    }*/

    p.participation-guide-title {
      font-size: 1.2em;
    }

    p.participation-guide-text,
    p.participation-tips-text,
    p.participation-lang-text {
      font-size: 1em;
    }

    .row-faq,
    .row-drawn-numbers,
    .row-played {
        width: 70% !important;
    }

    .row-winning-categories {
        width: 80% !important;
    }

}

/* Desktops, low rest */
@media only screen and (max-width: 809px) {

  p.homepage-next-draw-date,
  p.homepage-countdown-value {
      font-size: 1.4em;
      text-align: center;
  }

}

/* Desktops, low rest */
@media only screen and (max-height: 800px) and (max-width: 1000px) {

}

/*iPad in portrait & landscape*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

}

#mobile-img{
    background-image: url("../images/participation_mobile.png");
    background-size: contain;
    width: 300px;
    height: 575px;
    margin-left: auto;
    margin-right: auto;
    background-repeat: no-repeat;
}

/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {

    p.homepage-next-draw-date,
    p.homepage-countdown-value {
        font-size: 1.2em;
        text-align: center;
    }

    .participation-mobile img {
      margin-top: 100px;
    }

    .logo-big {
        width: 50%;
    }
    /*p.homepage-jackpot-value {
      font-size: 2em;
    }*/

    .row-faq,
    .row-drawn-numbers,
    .row-played {
        width: 80% !important;
    }

    .row-winning-categories {
        width: 80% !important;
    }

    .guide-left p{
        text-align:center;
    }

    .participation-mid-text{
        width: 80%;
        font-size: 1em;
    }

    .participation-top-text {
        font-size:1.2em;
    }

    .participation-guide-text{
        margin-bottom:16px;
    }

    .guide-left {
        margin-top: 20px;
    }

    .participation-mobile img{
        margin-top:10px;
        margin-bottom: 10px;
    }

    .guide-right p{
        text-align:center;
        margin-top: 20px;
    }

    .row-lang{
        width:100%;
    }


    .row-tips{
        margin:0 auto 15px;
    }

    .tips {
        margin-top: 0px;
    }

    .guide-right-div{
        margin-top:0px;
    }

    p.payments-header{
        font-size:1.2em;
    }

    p.results-top-text{
        font-size:1.2em;
        width: 80%;
    }

    .stats-text{
        text-align: center;
        font-size: 1.2em;
    }

    #loginModal{
        font-size: 0.8em;
    }

    .row-terms{
        width:100%;
    }

    .iconbox{
        padding: 0px 0px;
    }

    .iconbox .accordion-text p{
        font-size:14px;
    }

    .panel-title a {
        font-size: 16px;
    }

    .jackpot-text-header{
        font-size: 20px;
    }

    .jackpot-text{
        font-size : 7vw;
    }
}



/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {

    .row-faq,
    .row-drawn-numbers,
    .row-played {
        width: 90% !important;
    }

    .row-winning-categories {
        width: 90% !important;
    }


    .homepage-countdown .homepage-countdown-text {
        font-size: 0.6em;
        text-align:center;
    }

    .header-text{
        font-size:1.5em;
    }

    .homepage-top-text{
        font-size:1.5em;
    }

    .homepage-mid-text{
        font-size:1em;
    }

    .homepage-sub-text{
        font-size:0.9em;
    }

    .homepage-jackpot-text{
        line-height:18px;
    }

    .btn-how-to-play{
        margin:15px auto 15px;
    }

}

/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) {

    .row-faq,
    .row-drawn-numbers,
    .row-played {
        width: 100% !important;
    }

    .row-winning-categories {
        width: 100% !important;
    }

    .homepage-countdown .homepage-countdown-text {
        font-size: 0.8em;
        text-align: center;
    }

}


.navbar-header .navbar-text .navbar-nav li a {
    color: #ffffff;
}