@font-face {
    font-family: 'DINOT';
    src: url('../fonts/DINOT-Regular.woff2') format('woff2'),
        url('../fonts/DINOT-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINOT';
    src: url('../fonts/DINOT-Bold.woff2') format('woff2'),
        url('../fonts/DINOT-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'DIN Condensed Bold';
    src: url('../fonts/DINCondensed-Bold.woff2') format('woff2'),
        url('../fonts/DINCondensed-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Didot';
    src: url('../fonts/Didot-Italic.woff2') format('woff2'),
        url('../fonts/Didot-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Codystar';
    src: url('../fonts/Codystar.woff2') format('woff2'),
        url('../fonts/Codystar.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Didot';
    src: url('../fonts/Didot-Bold.woff2') format('woff2'),
        url('../fonts/Didot-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Monomials';
    src: url('../fonts/Monomials-Regular.woff2') format('woff2'),
        url('../fonts/Monomials-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OCR-B';
    src: url('../fonts/OCRB.woff2') format('woff2'),
        url('../fonts/OCRB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Monomials';
    src: url('../fonts/Monomials-Regular.woff2') format('woff2'),
        url('../fonts/Monomials-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Didot';
    src: url('../fonts/Didot.woff2') format('woff2'),
        url('../fonts/Didot.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Didot Title';
    src: url('../fonts/DidotTitle.woff2') format('woff2'),
        url('../fonts/DidotTitle.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



html{ margin: 0px; padding: 0px;}
body{ width: 100%; height: 100%; position: relative; margin: 0px; padding: 0px; background: #003468 top left repeat-x; font-size: 12px; line-height: 16px;font-family: "din-condensed", sans-serif;
font-weight: 300;
font-style: normal;}
img{ margin: 0px; padding: 0px; border: 0px;}
input{ position: relative; margin: 0px; padding: 0px}
li{ margin: 0px; padding: 0px}
ul{ margin: 0px; padding: 0px;}

.inner{ width: 95%; max-width: 900px; position: relative; margin: 0px auto 0px auto; background: transparent; }
.shadow{-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 1);
-moz-box-shadow:    0px 0px 15px 0px rgba(0, 0, 0, 1);
box-shadow:         0px 0px 15px 0px rgba(0, 0, 0, 1);}
.shadow2{-webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 1);
-moz-box-shadow:    0px 0px 7px 0px rgba(0, 0, 0, 1);
box-shadow:         0px 0px 7px 0px rgba(0, 0, 0, 1);}
ul, li, .item-list ul, .action-links {
    list-style-image: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.clear{ clear: both; font-size: 0px; line-height: 0px; height: 0px; position: relative; width: 100%;}
.sp10{ clear: both; font-size: 10px; line-height: 10px; height: 10px; position: relative; width: 100%;}
.sp20{ clear: both; font-size: 20px; line-height: 20px; height: 20px; position: relative; width: 100%;}
.sp30{ clear: both; font-size: 30px; line-height: 30px; height: 30px; position: relative; width: 100%;}
.sp40{ clear: both; font-size: 40px; line-height: 40px; height: 40px; position: relative; width: 100%;}
.sp60{ clear: both; font-size: 60px; line-height: 60px; height: 60px; position: relative; width: 100%;}
.sp100{ clear: both; font-size: 100px; line-height: 100px; height: 100px; position: relative; width: 100%;}


img{ margin: 0px; padding: 0px; border: 0px;}
input{ position: relative; margin: 0px; padding: 0px}
a{ text-decoration: none;  color: inherit;  transition: all 0.5s ease;}
a:hover{ color: #d1d2d2; text-decoration: none; }
.img-fluid {
    display: block;
    height: auto;
    max-width: 100%; margin: 0px auto 0px auto; position: relative;
}

.shadow{ -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0, 1);
-moz-box-shadow:    0px 3px 5px 0px rgba(0,0,0, 1);
box-shadow:         0px 3px 5px 0px rgba(0,0,0, 1);}

.shadow2{-webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 1);
-moz-box-shadow:    0px 0px 8px 0px rgba(50, 50, 50, 1);
box-shadow:         0px 0px 8px 0px rgba(50, 50, 50, 1);}
.shadow4{-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 1);
-moz-box-shadow:    0px 0px 8px 0px rgba(0, 0, 0, 1);
box-shadow:         0px 0px 8px 0px rgba(0, 0, 0, 1);}
.shadow5{-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    0px 2px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow:         0px 2px 5px 0px rgba(0, 0, 0, 0.75);}
.sp20{ width: 100%; height: 20px; line-height: 20px; font-size: 20px; position: relative;}
 .sp40{ width: 100%; height: 40px; line-height: 40px; font-size: 40px; position: relative;}
 .sp60{ width: 100%; height: 60px; line-height: 60px; font-size: 60px; position: relative;}
 .sp80{ width: 100%; height: 80px; line-height: 80px; font-size: 80px; position: relative;}
 .sp100{ width: 100%; height: 100px; line-height: 100px; font-size: 100px; position: relative;}
.clear{ width: 100%; height: 0px; line-height: 0px; font-size: 0px; position: relative; clear: both;}
.videoWrapper {
    position: relative;
    padding-bottom: 51.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; display: block; border:0px solid #ffffff; background: #cccccc center no-repeat; box-sizing: border-box;
}

.content{ width: 100%; min-height: 677px;}
.content_out{ width: 100%;}
.main_logo{ position: absolute; top:18px; left: 20px;}
.bowl_logo{ position: absolute; top:35px; right: 20px;}
.left_side{ width: 300px; position:  relative; float: left; text-align: center; z-index: 10; left: -30px;}
.ball{ position: absolute; top:310px; left: 0px; width: 100%}
.ticket{ position: relative; top:0px;}
.main_ttl{ position: relative; text-align: center; top:7px;}
.footer_note{ color: #aeadb7; text-align: center; margin: 5px auto 0px auto; padding: 0px 0px 8px 0px; font-size: 10px; line-height: 12px; width: 100%; font-family: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;}
.footer{ margin: 40px 0px 0px 0px; position: relative; vertical-align: middle; text-align: center;}
.footer_logos{ position: relative; display: inline-block; vertical-align: middle;}
.footer_info{ position: relative; display: inline-block; vertical-align: middle; margin: 0px 0px 0px 20px; width: 550px; text-align: left;}
.footer_nav{ color: #f05223; font-family: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif; font-size: 14px; line-height: 16px; font-weight: bold; }
.footer_nav a{ color: #f05223; text-decoration: none;}
.footer_rules{ color: #ffffff; font-weight: normal; font-family: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif; font-size: 13px; line-height: 15px;}
.footer_rules a{ color: #ffffff;}


.legal{ font-size:18px; line-height: 1.3;  margin:40px auto 0px auto; max-width:800px; text-align:center; color: #000; opacity:0.75 }
footer{ position:relative; top:6px; margin-top:-10px }
footer section.links {
  position: relative;
  padding: 20px 0 10px;
  background: #003468;
  color: #fff;
}
footer section.links::before {
  content: '';

  display: block;

  width: 100%;

  height: 7px;

  background: url("../images/bg_tear-up_blue.png") center center repeat scroll;

  position: absolute;

  top: -6px;

}
.enjoy{ display:flex; justify-content:center; align-items:center }
.enjoy .img{ flex-shrink:0; width:220px; margin-right:15px; }
.enjoy span{ font-size:22px; color: #bababa }
.footer_menu{ display:flex; justify-content:center; margin:30px 0px}
.footer_menu a{ display:block; margin:15px 20px; color: #fff; font-weight:700; font-size:28px; font-family: 'DIN Condensed Bold'; }
@media handheld, only screen and (max-width: 726px) {
.game_container{
    margin-top: -51%;

}
.footer_menu{ flex-wrap:wrap; }
.footer_menua{ font-size:18px }
.enjoy{ display:block; text-align:center; }
.enjoy .img{ width:150px; margin:15px auto; }
.enjoy span{ font-size:16px }

.info_ttl{ font-size:25px; padding-bottom:0px }
.info{ padding-top:15px;}
.info p{ font-size:17px }
.info h4{ font-size:20px }
.legal{ font-size:16px }
}


.sec_content{
     background: url(../images/v2_pass_3-min.jpg) top center no-repeat;  padding-bottom: 80px;
}
.sec_content2{
     background: url(../images/v2_pass_4-min.jpg) top center no-repeat;  padding-bottom: 80px;
}
.main_container{ width:95%; max-width:448px; position:relative; margin:0px auto 0px auto; }
.main_container2{ width:100%; max-width:592px; position:relative; margin:0px auto 0px auto; left:3px }
.main_ttl{ font-size:32px; color:#305881; text-align:center;  font-family: 'DIN Condensed Bold'; text-transform: uppercase; line-height: 1.2; margin-top: 14px}
.main_img{margin-top: 30px}
.connect_btn{text-align: center; margin: 14px 0px 0px 0px;}
.connect_btn a{ display:inline-block;  background:#002858; color:#fff; padding:7px 20px; font-size:30px; line-height:1.2; font-family: 'DIN Condensed Bold'; text-transform: uppercase; border-radius:5px  }
.connect_actions a{ text-decoration:none; }
.connect_actions{ font-size:26px; margin-top:21px;  color: #002858; text-align: center;}
.connect_actions a b{font-family: 'DIN Condensed Bold'; color: #002858}
.connect_actions a.light_blue{ color: #305881 }
.connect_actions{  }
.white_bar{ background:rgba(255, 255, 255, 0.43); padding:35px 0px; }
.white_bar_flex{ display:flex; justify-content:center; align-items:center;  margin:0px auto; max-width:900px;}
.white_bar_flex .info{ margin-left:35px;  }
.white_bar_flex .info p{ font-size:29px; line-height:1.2; text-transform:uppercase; font-family: 'DIN Condensed Bold'; color:#002e5d; margin: 0px}
.white_bar_flex .info ol{ list-style: decimal;margin:0px }
.bar_img{ flex-shrink:0 }

.white_bar_flex .info ol {
  counter-reset: list-counter;font-size:26px; line-height:1.2; text-transform:uppercase; font-family: 'DIN Condensed Bold'; color:#002e5d;
  padding-left: 26px;
}

.white_bar_flex .info ol li {
  counter-increment: list-counter;
  list-style: none;
  position: relative;
}

.white_bar_flex .info ol li::before {
  content: counter(list-counter) ". ";
  position: absolute;
  left: -26px;
}
.main_box{ 
position:relative; width: 592px; height:924px; background:url(../images/box_bg.png) top center no-repeat; background-size:contain; }
.main_box_inner{ width:507px; margin:0px auto;padding-top:42px; left:-3.5px; position:relative; }
.passport_slides{ position:relative; }
.slide{ position:relative; }
.arrows{ position:absolute; top: calc(50% - 31px); width:100%; z-index:2 }
.arrow_left{ position:absolute; top:0px; left:-14px; width:29px  }

.arrow_next{ position:absolute; top:0px; right:-14px;  width:29px}
.arrows img{ width:100%; height:auto; }
.question_icon{ top:15px; right:15px; position:absolute; }
.stamps{
    display: flex;
  flex-wrap: wrap;
  justify-content: space-between; margin-top:14px;
 
}
.stamp_box{ width:155px; margin-bottom: 21px; height: 155px; background:url(../images/stamp_box.png) top center no-repeat; display:flex; background-blend-mode:multiply; align-items:center; justify-content:center;
 background-size: contain; position: relative;
 }
 .stamp_box_large{ width:509px; margin-bottom: 21px; height: 155px; background:url(../images/stamp_box_large.png) top center no-repeat; display:flex; background-blend-mode:multiply; align-items:center; justify-content:center;
 background-size: contain; position: relative;
 }
 .stamp_img{ width:100%; height:100%; position:absolute; top:0px; left:0px; background-size:contain; background-repeat:no-repeat; }

 .stamps_ttl{ font-size:33px; color:#002e5d; font-family:'Didot'; font-weight:700;line-height:1.1; text-align:center; text-transform:uppercase;}
 .stamps_ttl i{ font-size:27px; font-style:italic; }

.stamps_ttl2{ font-size:28px; color:#002e5d; font-family:'DIN Condensed'; font-weight:700;line-height:1.1; text-align:center; text-transform:uppercase;}

 .passport_stamps{ margin-top:15px }
 .stamps_note{ font-size:20px; line-height:1.2;color:#002e5d; font-family:'Monomials'; text-align:center; }

 .stamps_nav{ font-size:38px; font-weight:700;font-family: 'DIN Condensed Bold';line-height:1.2;color:#002e5d; text-align: center; margin-top: 6px}

 .stamps_nav a{ text-decoration:none; }
 .details{ position:absolute; top:0px; left:0px; width:100%; height:100%; }
 .pass_text{ font-size:19px; line-height:1.1; color:#000; font-family: 'OCR-B'; text-transform:uppercase;  }
 .pass_name{ position:absolute;top: 17.5%;
  left: 34.5%; }
  .pass_doc{ position:absolute;top: 17.5%;
  left: 68%; }
  .pass_doc_vertical{position: absolute;
  top: 39%;
  left: 71%;
  font-family: 'Codystar',sans-serif;
  color: #000;
  font-size: 45px; line-height: 1;
  transform: rotate(90deg);
  text-align: left;
  display: block; }
   .pass_since{ position:absolute;top: 36.5%;
  left: 34.5%; }
   .pass_till{ position:absolute;top: 53.5%;
  left: 34.5%; }
  .pass_issuer{ position:absolute;top: 71.5%;
  left: 34.5%; }
  .pass_code{ position:absolute;top: 82.5%;
  left: 4.9%; font-size: 17px; }
  .pass_code2{ top:91% }
  .pass_slide{ position:relative; width:100%; max-width:725px }
  @media handheld, only screen and (max-width: 1200px) {
    .bar_img{ max-width:250px; }
    .white_bar_flex .info p{ font-size:24px }
    .white_bar_flex .info ol li{ font-size:18px }

  }

#next_div {
        vertical-align: 10%;
    }

@media handheld, only screen and (max-width: 900px) {
   
}

@media handheld, only screen and (max-width: 900px) {
.main_img{
    width: 50%;
  margin: 0px auto;
}
.main_ttl{
    width: 60%;
  margin: 10px auto; font-size: 22px;
}
.connect_actions{ font-size:18px; line-height:1.2 }

.sec_content{
     background: url(../images/pass_3m2.jpg) top center no-repeat;  padding-bottom: 80px; background-size: 100% auto;
}
.sec_content2{
     background: url(../images/pass_3m2.jpg) top center no-repeat;  padding-bottom: 80px; background-size: 100% auto;
}
.main_container{
    background: url(../images/main_container.png) bottom center no-repeat; background-size: 100% auto; padding-bottom: 0px; padding-top: 20px;
    margin-bottom: 10px;
}
.passports.mob{
    width: 120%;
  left: -12%;
  position: relative;
}
.sec_content{ overflow:hidden; }
.sec_content2{ overflow:hidden; }
.main_container2{ background: url(../images/main_container.png) center -100px  no-repeat; background-size: 100% auto; padding-top: 20px}
.main_box {
    width: 100%;
    height: auto; 
    background-size: contain; 
    aspect-ratio: 0.63;
  }
  .main_box_inner{ width: 90%;
    padding-top: 5%;
    left: -0.6%;
  } 

  .stamp_box{ 
    width: 32%; height: auto; background-size: contain; aspect-ratio: 1; 
  }

   .stamp_box_large{ 
    width: 100%; height: auto; background-size: contain; aspect-ratio: 1; 
  }
  .stamps_ttl{
     font-size: clamp(16px, 5vw ,47px);
  }

  .stamps_ttl2{
    padding-top:10px;
     font-size: clamp(16px, 5vw ,47px);
  }

 .stamps_ttl i {
    font-size: clamp(17px, 5vw ,53px);
  }
 .pass_doc_vertical{
    font-size: clamp(16px, 5vw ,45px);
 }
  .pass_text{ font-size: clamp(12px, 3vw ,27px); white-space: nowrap;}
    .pass_code{font-size: clamp(11px, 3vw ,25px);}
    .stamps{ margin-top:1.5% }
    .passport_stamps{ margin-top:1.5% }
    .stamp_box{ margin-bottom:1% }
    .stamp_box_large{ margin-bottom:1% }
    .stamps_note{
       
        font-size: clamp(12px, 4vw ,25px);
    letter-spacing: -2px;
    }
    .stamps_nav{
        font-size: clamp(30px, 6vw, 50px);
    }
    
    #next_div {
        vertical-align: 20%;
    }

    .pass_doc_vertical{ left:77% }
    .mobile_br {padding:5px}
}




.upload{ width:27.31%; position:absolute; top:11.8%; left:5%; }
.upload_btn{ position:absolute; bottom:10px; left:0px; width:100% }
.upload_btn a{ display: block;
  width: 90%;
  margin: 0px auto;
  height: auto; }


@media handheld, only screen and (max-width: 700px) {
    .connect_btn a{ font-size:24px }

     .container{ width:95%; margin:0px auto; }
    .bar_img{ max-width:100px; }
        .white_bar_flex { flex-wrap:wrap; justify-content:center }
        .white_bar_flex .info{ width:100% }
        .white_bar_flex .info{ margin-left:0px }
    .white_bar_flex .info p{  }
    .white_bar_flex .info ol li{ }
    .arrows{
         top: calc(50% - 22px);
    }
.arrows a{ width: 20px;
  }
.arrows a img{ display: block; width: 100%; height: auto;
  }
.question_icon{ top:7px; right:7px; width:31px }
.pass_doc_vertical{ left:82% }
}
@media handheld, only screen and (max-width: 767px) {
  .desk {
    display: none !important;
  }
  }
@media handheld, only screen and (min-width: 768px) {
  .mob {
    display: none !important;
  }
}

.btn-dark{ background:#002858; color:#fff; padding:7px 20px; font-size:20px; line-height:1.2; font-family: 'DIN Condensed Bold'; text-transform: uppercase; border-radius:5px; border:0px !important;text-align:center;   }
.modal-footer{
    background: #003468; color: #fff;
}

.modal, .modal h3, .modal p{ font-family:'Dinot' !important }
.modal-header{ border:0px }
.modal{ font-family:'DIN Condensed Bold' !important }
.btn{  font-family: 'DIN Condensed Bold' !important }
.modal .close{
    position: absolute;
  top: 15px;
  right: 15px;
} 
.modal .form-control{ font-family:'DIN Condensed Bold' !important }
.modal .fill-control-description{ font-family:'DIN Condensed Bold' !important; font-size:16px; }
.modal .fill-control-description a{ text-decoration:underline; }

.error{ font-size:12px; color: red }
.menu_bar{
    color:red; font-size: 40px; position: absolute; top:6px; right:-30px;
}
.main_container2 .menu_bar{ right:50px }
.menu_bar #topMenu{ color: #012c57; font-size:35px }
.menu_bar #topMenuW { color: #ffffff; font-size:35px }

@media handheld, only screen and (max-width: 900px) {
    .menu_bar{ right: 30px !important;}
    .main_container2 .menu_bar{ right:30px }
}
.dropdown-menu{
    font-family: "din-condensed", sans-serif !important;
}
.dropdown-menu li{
    font-family: "din-condensed", sans-serif !important; font-weight: 300;

}
.dropdown-menu li a{
    font-family: "din-condensed", sans-serif !important; font-weight: 300;
}
.enjoy span {
  font-size: 16px;
  color: #bababa;
  font-weight: 400 !important;
}