@font-face {
    font-family: Filson;
    src: url('fonts/FilsonProBook-Book.otf');
}

@font-face {
    font-family: Filson;
    font-weight: bold;
    src: url('fonts/FilsonProBlack-Black.otf');
}

@font-face {
    font-family: GothicNext;
    src: url('fonts/Trade-Gothic-Next-LT-Pro-Cn.ttf');
}

body {
    margin: 0;
    padding: 0;
    background-color: #fff !important;
    font-family: Filson!important;
    font-size: 16px;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #000;
    overflow-x: hidden; 
}
body::-webkit-scrollbar {
    width: 0;
    background: transparent;
}
.backgrounder {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url('images/img_cloud.png?x=1');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom; 
  background-size: contain;
  z-index:1;
}

a           {color:blue}

.swal2-title                {font-family:Filson!important}


.slide_home                 {position:relative;}
.slide_fillinfo             {position:relative;}
.slide_winners              {position:relative;}


/*CONTAINERS*/
.show-desktop {display: block}
.show-mobile {display:none;}


.modal-shadow {position: fixed; background-color: #444; width: 0;height:0; top:0;left:0; opacity: 0.9; z-index:500;display: none;}
.modal-box    {position: fixed; background-color: #fff; width: 0;height:0; top:0;left:0; transform:translateX(-50%) ; z-index:524; border-radius: 50px;padding:30px 50px;display: none;min-height:600px;}
.modal-close  {position: fixed; width: 0;height:0; top:0;left:0; z-index:2224; display: none;}
    .modal-close img {width:40px;cursor: pointer;}

.modal-box-content {width:100%;}
    .floater_header {position: relative;width:100%;left:50%;transform: translateX(-50%);}
        .floater_header img {width:100%;}
        .floater_header h1 {font-family:FilsonSans;font-size:40px;color:#F3410E;margin:0;padding:0;}
        .floater_header h2 {font-family:Filson;font-size:24px;color:#F3410E;text-align:center;}

    .floater_content {width: 100%;margin: 20px 0 0 0;font-family:Filson!important;}
        .floater_content.grid {display: flex; flex-direction: column; gap:20px;}
        .floater_content.grid.row {display: flex; flex-direction: row; gap:0px;}
        .floater_content.grid.row img {width:50%;}

        .floater_content h2 {font-family:Filson;font-size:24px;color:#F3410E;text-align:center;}
    .floater_content embed {width: 100%;height: 94%;background-color: #fff;;}
     
    .floater_content::-webkit-scrollbar { width: 5px;   }
    .floater_content::-webkit-scrollbar-track  { background: #fff; }
    .floater_content::-webkit-scrollbar-thumb  { background: #0E5028; }
    .floater_content embed body {background-color: red!important;}

    .floater_upload_img{ width: 200px;margin:0px auto;}
    ..floater_upload_img img {width:100%;cursor:pointer;max-height:160px;margin:0px auto;}
    .floater_footer {width: 100%;position: absolute;bottom: 0px;right:0px;padding-bottom:15px;}
        .floater_footer img {width:220px;margin:0px auto;cursor:pointer;}

    .floater_footer2 {width: 460px;position: absolute;bottom: 0px;right:0px;padding-bottom:15px;display:flex;flex-direction:row;gap:20px;left:50%;transform:translateX(-50%)}
        .floater_footer2 img {width:220px;}

    .floater_box    {height:30vh;border:solid 1px #888;width:100%;overflow-y:scroll;min-height:280px;}
    .floater_box::-webkit-scrollbar {
        width: 0;
        background: transparent;
    }
    .floater_box_content {overflow:wrap;padding:5px;}
    .floater_tnc {height:85px}

/*CONTENTS*/
.home_logo          {position: absolute; width: 20vh;left:10%;top:100px;}
.home_main          {position: absolute; width: 60vw;left:50%;top:80px;transform: translateX(-50%);}
.home_fairprice     {position: absolute; width: 60vh;left:50%;top:80vh;transform: translateX(-50%);display:block;}

.cta_home_privacy   {position: absolute; width: 15vw;left:calc(33% - (20vh / 2));transform: translateX(-25%);top:75vh;z-index: 110;cursor: pointer;}
.cta_home_join      {position: absolute; width: 15vw;left:calc(40% - (20vh / 2));transform: translateX(-25%);top:75vh;z-index: 110;cursor: pointer;}
.cta_home_winners   {position: absolute; width: 15vw;left:calc(50% - (20vh / 2));transform: translateX(-25%);top:75vh;z-index: 110;cursor: pointer;}
.cta_home_terms     {position: absolute; width: 15vw;left:calc(66% - (20vh / 2));transform: translateX(-25%);top:75vh;z-index: 110;cursor: pointer;}

.tnc        {width: 100%;font-size: 0.8em;text-align: center;color:#444}
.tnc1       {position: absolute; left:0%;top:96vh;z-index: 110;cursor: pointer;}
.tnc2       {position: absolute; left:0%;top:96vh;z-index: 110;cursor: pointer;}
.tnc3       {position: absolute; left:0%;top:96vh;z-index: 110;cursor: pointer;}
.tnc_quit   {position: absolute; left:0%;top:88%;z-index: 110;cursor: pointer;}
.tnc_done   {position: absolute; left:0%;top:95vh;z-index: 110;cursor: pointer;}
.tnc_entries{position: absolute;  left:0%;top:85vh;z-index: 110;cursor: pointer;}
/*SECTION FILL INFO*/
.bnr_header {position: absolute; width: 70vh;left:50%;top:5vh;transform: translateX(-50%);display:block;}
.bnr_info   {position: absolute; width: 50vh;left:50%;top:28vh;transform: translateX(-50%);display:block;}

.left_trail  {position: absolute; width: 15vw;left:30vw;top:40vh;transform: translateX(-50%);display:block;}
.right_trail {position: absolute; width: 15vw;left:70vw;top:40vh;transform: translateX(-50%);display:block;}
    .left_trail.qc  {left:20vw}
    .right_trail.qc {left:80vw;}

.form_inputs {position: absolute; width: 50vh;left:50%;top:33vh;transform: translateX(-50%);display:block;font-family:Filson;}
.input_text {width:100%;height:32px;text-align:center;font-size:20px;margin:0 0 5px 0;border:solid #ccc 2px;font-family:Filson !important;text-align-last: center;}
.input_short1 {width:49%;overflow:hidden;float:left;margin-right:1%;}
.input_short2 {width:49%;overflow:hidden;float:left;margin-left:1%;}

.form_upload_img {width:100%;overflow:hidden;display:flex;flex-direction:row;gap:10px;height:160px;}
    .form_upload_img div:first-child {width:60%;color:#F3410E;font-family:Filson;padding:10px;font-size:18px;}
    .form_upload_img div:last-child {width:40%;text-align:center;}
        .form_upload_img div:last-child img {width:auto;cursor:pointer;max-height:120px;margin:0px auto;max-width:100%;}

.form_next  {position: absolute; width: 220px;left:50%;transform: translateX(-50%);display:block;margin:10px 0 0 0 ;}

/*WINNER*/
.winner_list        {position: absolute; top:28vh; left:50%; transform:translateX(-50%); width:20vw;font-family:Filson!important;color:#F3410E;font-size:20px;text-align:center}
    .winner_list .row { width:90%;display:flex;flex-direction:row;gap:10px;margin:3px auto 10px;}
    .winner_list .row.header { width:100%;background-image:url('images/bnr_winner_long.png');background-size:100% 100%;background-repeat:no-repeat;color:#fff; text-align:center; font-size:14px;padding:5px 3px 3px 3px;display:block;margin:0;}
    .winner_list .row .name { width:50%;text-align:left;color:#000;font-size:14px;font-weight:bold;}
    .winner_list .row .phone { width:50%;text-align:right;color:#000;font-size:14px;font-weight:bold;}

    .winner_list h1 {font-size:24px;font-weight:bold;padding:0;margin:0 0 10px 0;font-family:Filson!important;font-weight:bold}

/*DONE*/

.done_description {position:absolute;top:40vh;left:50%;transform:translateX(-50%);font-family:Filson;font-weight:bold; text-align:center;width:30vw; line-height:24px;}
    .done_description h1 {color:#EE4424;font-size:56px;font-family:Filson;font-weight:bold; padding:0px;margin:0px 0px 20px 0px;}
    .done_description .btn_back {width:220px;margin:20px auto;}

       

/*SECTION 4*/
#banner_winner       {position: absolute; width: 20%;left:50%;transform: translateX(-50%);top:8%;}
#winner_desc         {position: absolute; width: 80%;left:50%;transform: translateX(-50%);top:90vh;text-align: center;font-size: 16px;font-weight: bold;}
#gif_winner          {position: absolute; width: 7%;left:33%;top:0%;z-index: 110;}
.winner_box          {position: absolute; width: 35%;left:50%;transform: translateX(-50%);top:28%;z-index: 110;height:60%;margin-bottom:50px;}   
.winner_select       {position: relative; font-family: Brevia; font-size: 2em; font-weight: bold;color:#fff;background-color: #0E5028; padding:5px 50px;border-radius: 20px; left:50%;transform: translateX(-50%);}


.winner_main         {position: relative;width: 100%; display: flex;flex-direction: row;margin:20px 0 0 0;}
.winner_main div     {width:50%;}
.winner_main div img {width:80%;}
.winners             {position: relative;width: 100% !important; display: flex; flex-direction: column; gap:1px; }
.winners .rows       {width: 100%; display: flex; flex-direction: row; gap:2px; font-size: 1em; font-weight: bold;}
.winners .rows .cell1{width: 10%;}
.winners .rows .cell2{width: 50%;}
.winners .rows .cell3{width: 40%;}
#gif_prize           {position: absolute; width: 15%;left:-10%;top:35%;z-index: 110;}


.content_tnc         {width:100%; height:550px; overflow-y:scroll;}
    .content_tnc::-webkit-scrollbar { width: 5px;   }
    .content_tnc::-webkit-scrollbar-track  { background: #fff; }
    .content_tnc::-webkit-scrollbar-thumb  { background: #F3410E; }

.content_tnc_quit    {width:750px; height:43vh; position:relative; left:50%;transform:translateX(-50%);top:36vh;background:#fff;border-radius:50px;}
.quitclaim {position:absolute; width:700px;top:10px;height:41vh;left:50%;transform:translateX(-50%);padding:20px;overflow-y:scroll;}
    .quitclaim::-webkit-scrollbar { width: 5px;   }
    .quitclaim::-webkit-scrollbar-track  { background: #fff; }
    .quitclaim::-webkit-scrollbar-thumb  { background: #0E5028; }
#header_quit         {position:relative; width:700px;left:50%; transform:translateX(-50%);top:100px;}
#header_quit2        {position:relative; width:500px;left:50%; transform:translateX(-50%);top:10px;}
.quit_desc           {position:absolute; width:400px;left:50%; transform:translateX(-50%);top:100px;}

#acknowledge_quit   {width:250px;position:absolute;left:50%;transform:translateX(-50%); top:80vh;cursor:pointer;}


#quit_thank         {width:400px; position:absolute; left:50%;transform:translateX(-50%); top:560px;}
#quit_msg           {width:800px; position:absolute; left:50%;transform:translateX(-50%); top:650px;font-size:18px;font-weight:bolder; text-align:center;}

select {-moz-appearance: none;-webkit-appearance: none;}
select::-ms-expand {display: none;}


@media print, screen and (max-width:40em) {
    body {        
        background-attachment: fixed;
        background-position: bottom;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .show-desktop {
        display: none
    }
    .show-mobile {
        display: block;
    }
    

    .slide_home                 {position:relative;height:1000px}
    .slide_fillinfo             {position:relative;height:1000px;}
    .slide_winners              {position:relative;height:1000px;}
    .slide_done                 {position:relative;height:900px;}

    .modal-shadow {position: fixed; background-color: #444; width: 0;height:0; top:0;left:0; opacity: 0.9; z-index:500;display: none;}
    .modal-box    {position: fixed; background-color: #fff; width: 0;height:0; top:0;left:0; transform:translateX(-50%) ; z-index:524; border-radius: 15px;padding:0px 0px;display: none;}
    .modal-close  {position: fixed; width: 0;height:0; top:0;left:0; z-index:2224; display: none;}
        .modal-close img {width:40px;cursor: pointer;}

    .modal-box-content {width:100%;}
        .floater_header {position: relative;width:100%;left:50%;transform: translateX(-50%);}
            .floater_header img {width:100%;}
            .floater_header h1 {font-family:FilsonSans;font-size:22px;color:#F3410E;margin:0;padding:0;}
            .floater_header h2 {font-family:Filson;font-size:16px;color:#F3410E;text-align:center;}

        .floater_content {width: 100%;margin: 20px 0 0 0;font-family:Filson!important;font-size:14px;}
            .floater_content.grid {display: flex; flex-direction: column; gap:20px;}
            .floater_content.grid.row {display: flex; flex-direction: row; gap:0px;}
            .floater_content.grid.row img {width:50%;}

            .floater_content h2 {font-family:Filson;font-size:16px;color:#F3410E;text-align:center;}
        .floater_content embed {width: 100%;height: 94%;background-color: #fff;;}
     
        .floater_content::-webkit-scrollbar { width: 5px;   }
        .floater_content::-webkit-scrollbar-track  { background: #fff; }
        .floater_content::-webkit-scrollbar-thumb  { background: #0E5028; }
        .floater_content embed body {background-color: red!important;}

        .floater_upload_img{ width: 200px;margin:0px auto;}
        ..floater_upload_img img {width:100%;cursor:pointer;max-height:160px;margin:0px auto;}
        .floater_footer {width: 100%;position: absolute;bottom: 0px;right:0px;padding-bottom:15px;}
            .floater_footer img {width:160px;margin:0px auto;cursor:pointer;}

        .floater_footer2 {width: 280px;position: absolute;bottom: 0px;right:0px;padding-bottom:15px;display:flex;flex-direction:row;gap:20px;left:50%;transform:translateX(-50%)}
            .floater_footer2 img {width:130px;}

        .floater_box    {height:40vh;border:solid 1px #888;width:100%;overflow-y:scroll;}
        .floater_box::-webkit-scrollbar {
            width: 0;
            background: transparent;
        }
        .floater_box_content {overflow:wrap;padding:5px;}
        .floater_tnc {height:85px}

    /*CONTENTS*/
    .home_main          {position: absolute; height: 700px;width:unset; left:50%;top:20px;transform: translateX(-50%);}
    
    
    .cta_home_join    {position: absolute; width: 180px;left:25%;transform: translateX(-50%);top:720px;z-index: 110;cursor: pointer;}
    .cta_home_winners {position: absolute; width: 180px;left:50%;transform: translateX(-50%);top:720px;z-index: 110;cursor: pointer;}
    .cta_home_privacy {position: absolute; width: 180px;left:25%;transform: translateX(-50%);top:780px;z-index: 110;cursor: pointer;}
    .cta_home_terms   {position: absolute; width: 180px;left:75%;transform: translateX(-50%);top:780px;z-index: 110;cursor: pointer;}

    .tnc        {width: 94%;font-size: 12px;text-align: center;color:#444;left:50%;transform:translateX(-50%)}
    .tnc1       {position: absolute; top:850px;z-index: 110;cursor: pointer;}
    .tnc2       {position: absolute; top:800px;z-index: 110;cursor: pointer;}
    .tnc3       {position: absolute; top:900px;z-index: 110;cursor: pointer;}
    .tnc_quit   {position: absolute; top:82%;z-index: 110;cursor: pointer;}
    .tnc_done   {position: absolute; top:800px;z-index: 110;cursor: pointer;}
    .tnc_entries{position: absolute; top:135vh;z-index: 110;cursor: pointer;}
    /*SECTION FILL INFO*/
    .bnr_header {position: absolute; width: 96%;left:50%;top:80px;transform: translateX(-50%);display:block;}
    .bnr_info   {position: absolute; width: 94%;left:50%;top:210px;transform: translateX(-50%);display:block;}
    
    .left_trail  {position: absolute; width: 20vw;left:20vw;top:600px;transform: translateX(-50%);display:block;}
    .right_trail {position: absolute; width: 20vw;left:80vw;top:600px;transform: translateX(-50%);display:block;}
    .left_trail.done  {top:420px;}
    .right_trail.done {top:420px;}


    .form_inputs {position: absolute; width: 340px;left:50%;top:250px;transform: translateX(-50%);display:block;font-family:Filson;font-size:14px;}
    .input_text {width:100%;height:26px;text-align:center;font-size:16px;margin:0 0 5px 0;border:solid #ccc 2px;font-family:Filson !important;}
    .form_upload_img {width:100%;overflow:hidden;display:flex;flex-direction:row;gap:10px;height:160px;}
        .form_upload_img div:first-child {width:60%;color:#F3410E;font-family:Filson;padding:10px;font-size:18px;}
        .form_upload_img div:last-child {width:40%;text-align:center;}
            .form_upload_img div:last-child img {width:100%;cursor:pointer;max-height:160px;margin:0px auto;}

    .form_next  {position: absolute; width: 160px;left:50%;transform: translateX(-50%);display:block;margin:10px 0 0 0 ;}
    
    /*WINNER*/
    .winner_list        {position: absolute; top:230px; left:50%; transform:translateX(-50%); width:380px;font-family:Filson!important;color:#F3410E;font-size:16px;}
        .winner_list .row { width:70%;display:flex;flex-direction:row;gap:10px;margin:10px auto 10px;}
        .winner_list .row.header { width:80%;display:block;background-image:url('images/bnr_winner_short.png');margin:20px auto 0px;}
        .winner_list .row .name { width:50%;}
        .winner_list .row .phone { width:50%;text-align:right}


    /*DONE*/

    .done_description {position:absolute;top:250px;left:50%;transform:translateX(-50%);font-family:Filson;text-align:center;width:340px}
        .done_description h1 {color:#EE4424;font-size:36px;font-family:Filson;padding:0px;margin:0px 0px 20px 0px;}
        .done_description .btn_back {width:160px;margin:20px auto;}


         

    /*SECTION 4*/
    #banner_winner       {position: absolute; width: 20%;left:50%;transform: translateX(-50%);top:8%;}
    #winner_desc         {position: absolute; width: 80%;left:50%;transform: translateX(-50%);top:800px;text-align: center;font-size: 12px;font-weight: bold;}
    #gif_winner          {position: absolute; width: 7%;left:33%;top:0%;z-index: 110;}
    .winner_box          {position: absolute; width: 35%;left:50%;transform: translateX(-50%);top:28%;z-index: 110;height:60%;margin-bottom:50px;}   
    .winner_select       {position: relative; font-family: Brevia; font-size: 2em; font-weight: bold;color:#fff;background-color: #0E5028; padding:5px 50px;border-radius: 20px; left:50%;transform: translateX(-50%);}


    .winner_main         {position: relative;width: 100%; display: flex;flex-direction: row;margin:20px 0 0 0;}
    .winner_main div     {width:50%;}
    .winner_main div img {width:80%;}
    .winners             {position: relative;width: 100% !important; display: flex; flex-direction: column; gap:1px; }
    .winners .rows       {width: 100%; display: flex; flex-direction: row; gap:2px; font-size: 1em; font-weight: bold;}
    .winners .rows .cell1{width: 10%;}
    .winners .rows .cell2{width: 50%;}
    .winners .rows .cell3{width: 40%;}
    #gif_prize           {position: absolute; width: 15%;left:-10%;top:35%;z-index: 110;}


    .content_tnc         {width:100%; height:550px; overflow-y:scroll;}
        .content_tnc::-webkit-scrollbar { width: 5px;   }
        .content_tnc::-webkit-scrollbar-track  { background: #fff; }
        .content_tnc::-webkit-scrollbar-thumb  { background: #0E5028; }

    .content_tnc_quit    {width:380px; height:400px; position:relative; left:50%;transform:translateX(-50%);top:260px;background:#fff;border-radius:50px;}
    .quitclaim {position:absolute; width:380px;top:10px;height:360px;left:50%;transform:translateX(-50%);padding:20px;overflow-y:scroll;}
        .quitclaim::-webkit-scrollbar { width: 5px;   }
        .quitclaim::-webkit-scrollbar-track  { background: #fff; }
        .quitclaim::-webkit-scrollbar-thumb  { background: #0E5028; }
    #header_quit         {position:relative; width:700px;left:50%; transform:translateX(-50%);top:100px;}
    #header_quit2        {position:relative; width:500px;left:50%; transform:translateX(-50%);top:10px;}
    .quit_desc           {position:absolute; width:400px;left:50%; transform:translateX(-50%);top:100px;}

    #acknowledge_quit   {width:220px;position:absolute;left:50%;transform:translateX(-50%); top:680px;cursor:pointer;}


    #quit_thank         {width:400px; position:absolute; left:50%;transform:translateX(-50%); top:560px;}
    #quit_msg           {width:800px; position:absolute; left:50%;transform:translateX(-50%); top:650px;font-size:18px;font-weight:bolder; text-align:center;}

    select {-moz-appearance: none;-webkit-appearance: none;}
    select::-ms-expand {display: none;}

}