@charset "utf-8";
/* CSS Document */

/* ---------------- RESET ---------------- */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h4, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0;  font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0;} a, a:link, a:visited, a:hover, a:active{text-decoration:none} table { border-collapse: separate;border-spacing: 0;} th, td {text-align: left; font-weight: normal;} img, iframe {border: none; text-decoration:none;} ol, ul {list-style: none;} input, textarea, select, button {font-size: 100%;font-family: inherit; margin:0; padding:0;} select {margin: inherit;} hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px} b { font-weight:700 } img { max-width: 100%; height: auto; } @media \0screen { img { width: auto; /* for ie 8 */ }  }
    
    html { background:#FFF;  }
    body{ font-family: 'Montserrat', sans-serif; font-size:62.5%; color:#454547; font-weight:400; height: auto;  }
    section {width:100%; position: relative; float:left; }
    .row { position: relative; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 1260px; display: block;
    overflow: hidden; }
    .scroll-off {overflow: hidden !important;}
    .hide { display: none }

    .btn { background: #e6e9ed; padding: 1em 2em; font-size: 1.2em; text-transform: uppercase; font-weight: 700; border-radius: 50px; cursor: pointer; transition: .3s; color: #647e9a !important; }
    .btn:hover { opacity: .7 }

    .btn.back { opacity: .7 }
    .btn.back:hover { opacity: 1 }

    .btn.blue { background: #00A2E5; color: #FFF !important; }
    .btn.green { background: #2CA7AF; color: #FFF !important; }
    .btn.end { background: #30cf7d; color: #FFF !important; }

    



    .container { width: 100%;
      float: left;
      position: fixed;
      overflow-y: auto;
      overflow-x: hidden;
      height: 100%; }

    .container header { float: left; width: 100%; height: auto; padding: 46px 0; position: relative; z-index: 9999; }
    .container header h1 img { float: left; width: 200px; position: relative; left: 50%; transform: translate(-50%)}
    .container header h1 p { display: none }

    .container section { margin: 0; z-index: 8; background: #FFF; float: left;  position: relative; left: 50%; margin: 0; transform: translate(-50%); border-radius: 14px; z-index: 2; padding: 0; border: 3px solid #e6e9ed; box-sizing: border-box; transition:.9s;  overflow: hidden; animation: FadeLeft .7s; animation-timing-function: cubic-bezier(0.09, 1.15, 0.54, 1.03); }

    .container ul#breadcamp { display: none; width: auto; float: left; position: relative; top: 0; left: 50%; transform: translate(-50%); margin: 30px 0 0;}
    .container ul#breadcamp .line { width: 100%; height: 3px; position: absolute; z-index: 1; top: 50%; transform: translate(0,-50%); background: #e6e9ed}
    .container ul#breadcamp li { width: 35px; height: 35px; margin: 0 25px 0 0; position: relative; float: left; background: #e6e9ed; color: #88C6C1; font-size: 1.5em; text-align: center; font-weight: 700; padding: 8px 0 0; border-radius: 50px; box-sizing: border-box; z-index: 2}
    .container ul#breadcamp li.active { background: #2CA7AF; color: #FFF }
    .container ul#breadcamp li:last-child {margin: 0}

    .container section h3 { width: 100%; text-align: center; color: #00a2e5; font-size: 2.6em; font-weight: 700; float: left; margin: 8% 0 0 }
    .container section h4 { width: 100%; text-align: center; color: #666; font-size: 1.6em; font-weight: 500; line-height: 1.5; float: left; margin: 2% 0 4% }

    .container section ul#Links { clear: both; position: relative; left: 50%; transform: translate(-50%); float: left; box-sizing: border-box;  padding: 5% 5%  }
    .container section ul#Links li { float: left; margin: 0 }
    .container section ul#Links li .btn.big { font-size: 1.65em }

    .container section ul#Links.Excep { width: 100%;   }
    .container section ul#Links.Excep li:last-child { float: right; margin: -3px 0 0;}


   .container form { width: 100%; clear: both; float: left; position: relative; z-index: 2; box-sizing: border-box;}
   .container .field { width: 100%; height: 50px; background: #FFF; border: 3px solid #e6e9ed; float: left; transition: .3s; padding: 0 1.5em; margin: 0 0 15px; border-radius: 7px; box-sizing: border-box; font-weight: 700 !important; font-size: 1.5em; color: #333; }

   #Prepago section#codigo form.delta24 { padding: 0 30% 3%; }
   .container form.delta24 input.field { text-align: center; font-size: 2.1em; letter-spacing: 7px }
   .container form.delta24 input::placeholder { font-size: 1.6em; color: #e6e9ed;  }

   .container form .success input { border: 3px solid #b6eab8; }
   .container form .erro input { border: 3px solid #fcc0c0; }
   .container form  input::placeholder { font-weight: 700 !important; font-size: 0.8em; color: #647e9a; }
   .container form p { width: 100%; text-align: center; float: left; color: #666; font-size: 1.3em }
   .container form p a { color: #647e9a; font-weight: 600; text-decoration: underline}
   .container form p a:hover { text-decoration: none }

   .container form .line { width: 100%; height: 5px;float: left; background: #e6e9ed4d; margin: 4% 0 8% }

   .container input.field.clear { clear: both }



    /* === Animate  === */
    @keyframes FadeLeft {
        0%   {left: 100%; opacity:0 }
        100% {left: 50%; opacity:1 }
    }     


    footer { width: 100%; height: auto; padding: 5%; float: left; box-sizing: border-box }
    footer .left { float: left;  }
    footer .left img { float: left }
    footer .left div { float: left; margin: 20px 0 15px 30px }
    footer .left div p { text-align: left; float: left; color: #FFF; font-size: 1.2em; font-weight: 500; margin: 0 }
    footer .left div small { clear: both; text-align: left; float: left; font-size: 1.2em;  font-weight: 400; color: #ffffff69; margin: 5px 0 0 }
    footer .right { float: right; margin: 15px 10px 0; }
    footer .right img { float: left;  }
    footer .right img:first-child { float: left; margin: 0 12px 0 0; }


    footer .right { position: relative; left:50%; transform: translate(-50%); clear:both; float:left; margin: 0 0 4%; }   
    footer .left { position: relative; left:50%; transform: translate(-50%); clear:both; float:left; text-align: center }   
    footer .left img { float: none}          
    footer .left div { float: none; margin: 20px 0 15px 0; }          
    footer .left div p { width: 100%; text-align: center}
    footer .left div small { width: 100%; text-align: center}
    


/* ---------------- RESET END ---------------- */



/* ---------------- HISTORICAR ---------------- */
   .repom-bg { background: #00A2E5; }
    .repom-bg::after {
      content: "";
      background: url(../img/24-bg.jpg);
      background-size: cover;
      opacity: 0.5;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      z-index: -1;   
}

   #Prepago section#codigo { width: 700px; padding: 0; }

   #Prepago section#cadastro { width: 700px; padding: 0; }
   #Prepago section#cadastro form { width: 100%; padding: 0 20% 3% }
   #Prepago section#cadastro .left {width: 47.5%; float: left}
   #Prepago section#cadastro .right {width: 47.5%; float: right}

   /* === confirmacao === */
   #Prepago section#confirmacao { width: 650px }
   #Prepago section#confirmacao .selector { width: 80%; position: relative; left: 50%; transform: translate(-50%); background: #FFF; border: 3px solid #e6e9ed; float: left; transition: .3s; padding: 3em; margin: 0 0 15px; border-radius: 14px; box-sizing: border-box; }
   #Prepago section#confirmacao .selector p { width:100%; float:left; text-align: center; color: #666; font-size: 1.2em; font-weight: 400; margin: 0 10px 0 0 }
   #Prepago section#confirmacao .selector h4 { width:100%; float:left; text-align: center; color: #647e9a; font-size: 2.0em; font-weight: 700; margin: 0 10px 4% 0 }
   #Prepago table { width: 100%; }
   #Prepago table td { padding: 6px; border-bottom: 1px dashed #e6e9ed; font-size: 1.2em; }
   #Prepago table td:nth-child(2) { text-align: right; font-weight: 500; }
   /* === sucesso === */
   #Prepago section#finalizacao { width: 750px }
   #Prepago section#finalizacao h3 { color: #00a2e5 }
   #Prepago section#finalizacao .selector { width: 80%; position: relative; left: 50%; transform: translate(-50%); background: #FFF; border: 3px solid #d6d6d6; float: left; transition: .3s; padding: 3em; margin: 0 0 15px; border-radius: 14px; box-sizing: border-box; }
   #Prepago section#finalizacao .selector p { width:100%; float:left; text-align: center; color: #666; font-size: 1.2em; font-weight: 400; margin: 0 10px 0 0 }
   #Prepago section#finalizacao .selector h4 { width:100%; float:left; text-align: center; color: #00a2e5; font-size: 2.0em; font-weight: 700; margin: 0 10px 4% 0 }
   /* === falha === */
   #Prepago section#veiculo-invalido { width: 500px }
   #Prepago section#veiculo-invalido h3 { color: #00a2e5 }
   #Prepago section#veiculo-invalido .selector { width: 80%; position: relative; left: 50%; transform: translate(-50%); background: #FFF; float: left; transition: .3s; padding: 2em; }
   #Prepago section#veiculo-invalido .selector p { width:100%; float:left; text-align: center; color: #666; font-size: 1.2em; font-weight: 400; margin: 0 10px 0 0 }
   #Prepago section#veiculo-invalido .selector h4 { width:100%; float:left; text-align: center; color: #00a2e5; font-size: 2.0em; font-weight: 700; margin: 0 10px 4% 0 }