﻿    .jwc_result { display: block; margin: 20px 0; font-size: 16px; color: var(--green); font-weight: bold; }

    .main-rules-container { display: none; background-color: rgba(0,0,0,.7); position: fixed; left: 0; top: 0; width: 100%; height: 100vh; }
    .main-rules { padding: 100px; width: 790px; max-height: calc(100% - 200px); overflow-y: auto; background-color: var(--white); border-radius: 10px;  position: relative; }
    .main-rules .title { color: var(--pink); text-transform: uppercase; font-size: 24px; margin-bottom: 20px; }
    .main-rules .subtitle { color: var(--gray); font-weight: bold; font-size: 20px; display: block; margin-bottom: 20px; }
    .main-rules .info { font-size: 18px; }
    .main-rules .pad { padding-left: 20px; }
    .main-rules .close { position: absolute; cursor: pointer; right: 15px; top: 15px; font-size: 32px; color: var(--gray); z-index: 100000; }
    .main-rules .close:hover { color: var(--blue); }

    .main-form { padding: 70px; }
    .main-form .title { font-size: 30px; font-weight: bold; color: var(--blue); display: block; margin-bottom: 20px; }
    .main-form .label { display: block; width: 100%; margin-bottom: 15px; }
    .main-form .legend { font-size: 14px; display: block; margin-bottom: 5px; color: var(--gray); }
    .main-form .input { background-color: var(--white); width: 100%; border: 1px solid #CDD4E1; border-radius: 3px; padding: 12px; }
    .main-form .button { display: block; cursor: pointer; border-radius: 5px; border: 1px solid var(--green); transition: 0.4s; width: 100%; margin-top: 35px; padding: 25px 0; text-align: center; text-transform: uppercase; font-weight: bold; color: var(--white); background-color: var(--green); }
    .main-form .button:hover { background-color: var(--white); color: var(--green); }
    .main-form .resp { display: none; }

    .main-slide { width: 100%; background-position: center; background-size: cover; height: calc(100vh - 80px); }
    .main-slide-title { width: 430px; max-width: 100%; }
    .main-slide-title .logo { margin: 0 auto 20px auto; width: 80%; display: block; }
    .main-slide-title .tagline { color: var(--white); font-size: 16px; line-height: 1.3; }
    .main-slide-title .title { color: var(--marine); font-size: 20px; font-weight: bold; }

    .main-data-container { position: relative; margin-top: -80px;  }
    .main-data { flex-basis: 49%; box-shadow: 0px 20px 20px 6px rgba(0,0,0,0.1); padding: 35px; border-radius: 10px; background-color: var(--white); }
    .main-data .title { color: var(--pink); font-size: 24px; font-weight: 600; display: block; margin-bottom: 10px; }
    .main-data .hora { font-size: 16px; color: var(--gray); }
    .main-data .local { color: var(--blue); font-size: 20px; display: block; font-weight: 600; margin-top: 20px; }

    .main-jogos-container { margin-top: 120px; }
    .main-jogos { flex-basis: 49%; }
    .main-jogos-logo { width: 150px; height: 150px; border-radius: 50%; background-color: var(--light); }
    .main-jogos-title { width: calc(100% - 180px); }
    .main-jogos-title .title { color: var(--blue); font-size: 30px; font-weight: bold; display: block; margin-bottom: 15px; }
    .main-jogos-title .subtitle { font-size: 18px; color: var(--gray); }
    .main-jogos-title .desc { font-size: 14px; color: var(--gray); font-size: 20px; border-radius: 5px; }


    .main-end-container { margin-top: 140px; }
    .main-end-container .left { width: 440px; }
    .main-end-container .right { width: 580px; background-color: var(--light) }

    .main-price .title { font-size: 34px; color: var(--pink); display: block; margin-bottom: 25px; font-weight: bold; }
    .main-price .subtitle { color: var(--gray); font-size: 20px; }
    .main-price .price { font-weight: bold; color: var(--marine); font-size: 34px; display: block; margin: 15px 0; }
    .main-price .tax { color: var(--blue); font-size: 24px; }
    .main-price .extra { color: var(--gray); font-size: 14px; }
    .main-price .link { border: 1px solid var(--gray); text-transform: uppercase; cursor: pointer; transition: 0.4s; font-weight: bold; color: var(--white); background-color: var(--gray); border-radius: 5px; margin-top: 15px; display: block; padding: 20px; text-align: center; }
    .main-price .link:hover { background-color: var(--white); color: var(--gray); }

    :root {
      /* COLORS */
      --border-light: #E0DBD4;
      --brown-light: #EFEDE9;
      --black-dark: #3E3E3E;
      --yellow: #FFDF77;
      --marine: #002D8A;
      --green: #00B862;
      --white: #FFFFFF;
      --reset: #F7F7F7;
      --brown: #A39161;
      --light: #F2F6F6;
      --blue: #14CDFF;
      --gray: #4E6780;
      --pink: #FF2481;
      --dark: #51483B;
      --red: #FF002B;


      /* SOCIAL COLORS */
      --instagram: #6B56C0;
      --facebook: #3B5998;
      --whatsapp: #29A71A;
      --linkedin: #0077B5;
      --comments: #E7EBED;
      --twitter: #55ACEE;
      --rss: #FF6600;
    }

    /* CONTENT */
    .content { padding: 20px 18%; }

    .flex { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: stretch; }
    .align-items-center { align-items: center; align-self: center; }
    .align-items-start { align-items: flex-start; align-self: flex-start; }
    .justify-content-start { justify-content: flex-start; }
    .justify-content-end { justify-content: flex-end; }
    .justify-content-around { justify-content: space-around; }
    .justify-content-center { justify-content: center; }


    @media (max-width: 700px) {
        .content { padding: 20px; }

        .main-slide { background-position: right; min-height: auto; max-height: 100vh; height: 100vh; }
        .main-slide .logo { width: 50%; display: block; margin: 0 auto; }
        .main-slide-title { padding-bottom: 30px; }
        .main-slide-title .title { font-size: 18px; }

        .main-data { flex-basis: 100%; margin-top: 40px; }

        .main-jogos { flex-basis: 100%; margin-bottom: 40px; }
        .main-jogos-logo { width: 100px; height: 100px; margin: 0 auto 20px auto; }
        .main-jogos-logo .img { width: 45px; }
        .main-jogos-title { width: 100%; text-align: center; }
        .main-jogos-title .title { font-size: 22px; }

        .main-end-container { margin-top: 60px; }
        .main-end-container .left { margin-bottom: 50px; }
        .main-end-container .left, .main-end-container .right { width: 100%; padding: 7%; }
    }
