@font-face { font-family:"brown"; src: url('../css/lineto-brown-pro-regular.woff2') format('woff2'),url('../css/lineto-brown-pro-regular.woff') format('woff'), url('../css/lineto-brown-pro-regular.ttf') format('truetype');}
@font-face {font-family:"brown-b"; src: url('../css/lineto-brown-pro-bold.woff2') format('woff2'),url('../css/lineto-brown-pro-bold.woff') format('woff'), url('../css/lineto-brown-pro-bold.ttf') format('truetype');}
@font-face {font-family:"brown-l"; src: url('../css/lineto-brown-pro-light.woff2') format('woff2'),url('../css/lineto-brown-pro-light.woff') format('woff'), url('../css/lineto-brown-pro-light.ttf') format('truetype');}


.container {position:relative; width:100%; max-width:980px; margin:0 auto; padding: 0 20px; box-sizing:border-box; }
.container-fluid {position:relative; width:100%; margin:0 auto; padding: 0; box-sizing:border-box; }
.column,.columns { width: 100%; float: left; box-sizing: border-box; }
.pad2{padding:20px 0}.pad3{padding:30px 0}.pad4{padding:40px 0}.pad5{padding:50px 0}.pad6{padding:60px 0}
.padd{padding:80px 0; min-height:60px}.pad{padding:20px}
.br{color:#fff}
.brbg{background-color:#fff}
.ouro{color:#fff}
.ourobg{background-color:#fff}
.red{color:#d22630}
.redbg{background-color:#d22630}
.bk{color:#000}
.bkbg{background-color:#000}
.cz{color:#505050}
.czbg{background-color:#505050}
.blu{color:#51ace0}
.blubg{background-color:#51ace0}
.roxo{color:#80519a}
.roxobg{background-color:#80519a}
.som{text-shadow:1px 1px 19px rgba(0, 0, 0, 0.4);}
.somd{-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5);-moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5);box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5);}
.tsom{text-shadow:1px 1px 5px rgba(0, 0, 0, 0.7);}
.over{position:absolute; float:left;z-index:100;}
.trans{background-color: cornflowerblue;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);opacity:0.5}
.oki{text-transform: uppercase}
.img-circle {border-radius: 50%;}
#ganhadores{padding:120px 0 80px 0}

.selo{-webkit-box-shadow: 0px 20px 54px 0px rgba(74,74,74,0.35);-moz-box-shadow:0px 20px 54px 0px rgba(74,74,74,0.35);box-shadow: 0px 20px 54px 0px rgba(74,74,74,0.35); z-index:70;background-color:#f3b233; position:absolute; padding:35px 20px}

.zoom{transition: transform 0.2s;}
.zoom:hover{transform: scale(1.1)}

.row {padding:0 20px}


.modal-window {position:fixed; background-color: rgba(5, 5, 5, 0.5); top:0; right:0; bottom:0; left:0; z-index:999999; visibility: hidden; opacity: 0; pointer-events:none; -webkit-transition: all 0.3s; transition: all 0.2s}
.modal-window:target { visibility: visible; opacity: 1; pointer-events: auto;}
.modal-window > div {max-width:280px; width:100%; padding:25px; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%);transform: translate(-50%, -50%); padding:2em; background:#ffffff; -webkit-box-shadow: 0px 0px 80px 0px rgba(0,0,0,0.46); -moz-box-shadow: 0px 0px 80px 0px rgba(0,0,0,0.46); box-shadow: 0px 0px 80px 0px rgba(0,0,0,0.46); border-radius:8px}

.modal-close {line-height:50px; font-size:80%; font-weight:bolder; position:absolute; right:12px; text-align:center; top:0; width:80px; text-decoration:none}
.modal-close:hover {color: black;}

.modal-window div:not(:last-of-type) { margin-bottom: 15px;}


/* For devices larger than 400px */
@media (min-width: 600px) {
    .container {width: 85%; padding: 0; }
    .row {padding:0}
}

/* For devices larger than 550px */
@media (min-width: 680px) {
  .container { width: 80%; }
  .column, .columns { margin-left: 4%; }
  .column:first-child, .columns:first-child { margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}



html {font-size: 62.5%; scroll-behavior:smooth; margin: 0; padding:0; overflow-x:hidden}
body {font-size:1.5em; font-family:"brown-l",helvetica,arial,sans-serif; line-height:1.4; font-weight:400; color:#222; background:#fff; overflow-x:hidden}


h1, h2, h3, h4, h5, h6 {margin-top:1rem; margin-bottom:1.2rem; color:#ffb615; font-family:"brown-b",helvetica,arial,sans-serif; font-weight:600; line-height:1.2; letter-spacing:-0.04em; text-transform:uppercase}
h1 { font-size: 5.0rem; }
h2 { font-size: 3.3rem; }
h3 { font-size: 2.5rem; }
h4 { font-size: 2.2rem; }
h5 { font-size: 1.8rem; }
h6 { font-size: 1.5rem; }


/* Larger than phablet */
@media (min-width: 850px) {
  h1 { font-size: 5.8rem; }
  h2 { font-size: 3.9rem; }
  h3 { font-size: 3.0rem; }
  h4 { font-size: 2.6rem; }
  h5 { font-size: 2.0rem; }
  h6 { font-size: 1.5rem; }
}

p {margin:0; font-size:1.2em; font-weight:300}


/* Links ––––––– */
a {color:#765ca8; text-decoration:none;-webkit-transition:color 0.2s ease-in; -moz-transition:color 0.2s ease-in; -o-transition:color 0.2s ease-in}
a:hover { color:#000}



.button,button,input[type="submit"],input[type="reset"],
input[type="button"] {display:inline-block; height:48px; padding:0 33px; color:#fff; text-align:center; font-family:'brown'; font-size:15px; font-weight:600; line-height:44px; text-decoration: none; white-space: nowrap; background-color:#51ace0; cursor: pointer; box-sizing: border-box; border: 1px none #fff; letter-spacing:0.02em; text-shadow:1px 1px 5px rgba(0, 0, 0, 0.7);}
.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,.button:focus,button:focus,input[type="submit"]:focus,input[type="reset"]:focus,input[type="button"]:focus {color:#fff; outline: 0; background-color:#000}
.button.button-primary,button.button-primary,input[type="submit"].button-primary,input[type="reset"].button-primary,
input[type="button"].button-primary {font-size:20px; padding:8px 33px; height:62px; background:#51ace0; color:#fff}
.button.button-primary:hover,button.button-primary:hover,input[type="submit"].button-primary:hover,input[type="reset"].button-primary:hover,input[type="button"].button-primary:hover,.button.button-primary:focus,button.button-primary:focus,input[type="submit"].button-primary:focus,input[type="reset"].button-primary:focus,input[type="button"].button-primary:focus {color:#FFF; background-color:#000}


input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],input[type="date"],textarea,select {height:42px; padding:9px 10px; background-color:#fff; border: 1px solid #888; border-radius:4px; box-shadow:none; box-sizing:border-box}
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],
textarea {-webkit-appearance: none; -moz-appearance: none;appearance: none; }
textarea {min-height: 65px; padding-top: 6px; padding-bottom: 6px; }
input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus,select:focus {border:2px solid #000; outline: 0; }
label,legend {display: block; margin-bottom: .5rem; font-weight: 600; }
fieldset { padding: 0; border-width: 0; }
input[type="checkbox"],input[type="radio"] { display: inline; padding: 5px}
label > .label-body { display: inline-block; margin-left: .5rem; font-weight: normal; }


#datan {background-color:#fff;width:250px;margin:2px 0 0 3px;padding:8px 5px 4px 7px;position:absolute;z-index:50;display:block}
#datan a {color:#aaa;cursor:default}


ul {list-style: circle inside; }
ol {list-style: decimal inside; }
ol, ul {padding-left: 0; margin-top: 0; }
ul ul,ul ol,ol ol,ol ul {margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; }
li {margin-bottom: 1rem; }


table {border-collapse: collapse; margin:0; padding:0; width:100%; table-layout:fixed}
table caption {font-size:1.5em; margin:.5em 0 .75em 0}
table tr {padding:2em 0}
table th,table td { padding:.625em 0; text-align: center; border-bottom: 1px solid #E1E1E1}
table th, thead {font-size: .8em; text-transform: uppercase; font-weight: bold}
.padr{font-size:22px}
.ttd {font-size:15px}

@media screen and (max-width: 600px) {
  table thead {border:none; clip: rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; }
  table tr {background-color:#fff; display:block; padding:0 10px; border-bottom:12px solid #e7eff3}
  table td {border-bottom: 1px solid #ddd; display:block; font-size:11px; text-align:right}
  table td:before {content: attr(data-label); float: left; }
  .ttd {font-size:12px}
}



button,.button {margin-bottom: 1rem; }
input,textarea,select,fieldset {margin-bottom: 1.5rem; }
pre,blockquote,dl,figure,table,p,ul,ol,form {margin-bottom: 2.5rem; }

.u-full-width {width:100%; box-sizing:border-box}
.u-max-full-width,.u-half-width {width:100%;  box-sizing:border-box}
.u-pull-right {float:right}
.u-pull-left {float:left}
.text-center{text-align: center}
.text-just{text-align: justify}
.it{font-style: italic}
.spa{letter-spacing:0.1em}
.b{font-weight:600; font-family:"brown-b"}
.leve{font-weight:300; font-family:"brown-l"}
.reg{font-weight:400; font-family:"brown"}
hr {margin-top:2rem; margin-bottom:2.5rem; border-width:0; border-top: 1px solid #E1E1E1}
.container:after,.row:after,.u-cf { content:""; display:table; clear:both}


@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
  0%, 100% { transform: scale(0.0);-webkit-transform: scale(0.0);
  } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); }
}





.modal-window {position:fixed; background-color: rgba(10,15,10, 0.75); top:0; right:0; bottom:0; left:0; z-index:999999; visibility:hidden; opacity: 0; pointer-events:none; -webkit-transition: all 0.3s; transition: all 0.3s}
.modal-window:target { visibility: visible; opacity: 1; pointer-events: auto;}
.modal-window > div {max-width:280px; width:100%; padding:20px 18px 0 18px; position:absolute; top:42%; left:50%; -webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%); padding:2em; background:#ffffff; -webkit-box-shadow:0px 0px 80px 0px rgba(0,0,0,0.46); -moz-box-shadow:0px 0px 80px 0px rgba(0,0,0,0.46); box-shadow:0px 0px 80px 0px rgba(0,0,0,0.46); border-radius:10px}

.modal-close {line-height:50px; font-size:80%; font-weight:bolder; position:absolute; right:20px; text-align:center; top:0; width:80px; text-decoration:none}
.modal-close:hover {color: black;}
.modal-window div:not(:last-of-type) { margin-bottom: 15px;}






/* Larger than mobile */
@media (min-width: 320px) {
.titin {color:#35f374; font-size:28px}
.logo{position:relative; width:120px; top:auto; left:auto; margin:26px 0 0 0; float:left}

.tab {display: none;}
#prevBtn { background-color:#bbbbbb}
.step {height:14px; width:14px; margin:12px 6px; background-color:#bbbbbb; border:none; border-radius:50%; display:inline-block; opacity:0.5}
.step.active {opacity: 1;}
.step.finish {background-color:#4CAF50}
.cad {max-width:540px;width:100%}
.tab input {padding:15px; width:100%; font-size:17px; border:1px solid #aaaaaa;}
.tab input.invalid {background-color:#ffdddd}
#top {z-index:50; position:absolute; top:0; width:100%; height:80px}
#como{top:0; }
.hero,.heroin{width:100%; height:476px; z-index:15; margin:0; padding:0; border-top:8px solid #51ace0}
.pe{background:#4eb0e6; padding:50px 20px}
.pe a{color:#000; }
.pe a:hover { color:#000}
.pe img{margin:0 17px 0 0}
.pe h5{font-size:110%; font-family:"brown-l"}

#como{top:0;}
.comomob{width:110%;height:auto;margin:-20px -40px 0 -40px}
.como{display:none}
.tema{width:100%; height:400px; z-index:1; top:0px; left:0; background-image:url(../img/hero-wire.jpg); background-size:cover; background-position:center; padding-top:100px}
.temain{width:100%; height:220px; z-index:1; top:0px; left:0; background-image:url(../img/hero-wire.jpg); background-size:cover; background-position:center; padding-top:100px; border-top:8px solid #51ace0; border-bottom:8px solid #51ace0}

.influ{width:250px;margin:-60px auto 0 7%}
.barrabk{margin-top:325px}
.barrapart{margin-top:-355px}
#chamada{width:70%; margin:-60px auto 100px auto}
.chamadatxt{padding:3px 20px;margin-left:0px; margin-bottom:50px}
.menu{z-index:50; display:block; height:80px; width:75%; margin:auto}

.lista {display:block; margin-bottom:40px; color:#000; box-sizing:border-box; width:100%; clear:both}
div .no{font-size:72px; color:#51ace0; line-height:100%; margin-right:22px; padding-bottom:50px; font-family:'brown-b'; float:left;}
.lista p {font-size:1.5em; color:#000; text-align:left}

.barra{display:none}
.slide-menu-open {text-decoration:none; position:absolute; right:20px; top:18px; z-index:390; font-weight:bold; color:#fff;} 
.side-menu-wrapper {overflow-y:auto; overflow-x:hidden;background:rgba(2,2,2,1.0); z-index:510; padding:40px 20px 0 40px; position:fixed; top:0px; right:-340px; /* Sidebar initial position. "right" for right positioned menu */ height:100%; transition: 0.5s; width:220px; color:#fff; text-decoration:none; -webkit-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.5);-moz-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.5);box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.5);}
.side-menu-wrapper > ul {list-style:none; padding:0; margin:0;overflow-y:auto; width:300px; height:96%;}
.side-menu-wrapper > ul > li > a {display:block; padding:10px 0; color:#fff; transition:0.3s; text-decoration:none; font-size:19px; font-weight:bolder; letter-spacing:-0.03em;}
.side-menu-wrapper > ul > li > ul > li {display:block; padding:2px 0; transition:0.3s; text-decoration:none; list-style:none; font-size: 12px; z-index:602}
.side-menu-wrapper > ul > li > ul > li > a {color: #ffffff}
.side-menu-wrapper > a.menu-close {padding:0 0 4px 18px;color:#ed2347; font-family:"brown-b"; display:block;margin:-35px 0 -13px -20px;font-size:40px; text-decoration:none; text-shadow:1px 1px 19px rgba(0, 0, 0, 0.5); z-index:622}
.side-menu-overlay {height:120%; width:0; position:fixed; z-index:400; top:-60px; left: 0; background-color:rgba(2,2,2,.8);
overflow-y:auto; overflow-x:hidden; opacity:0; transition:opacity 0.3s;}

#nav-icon4 {width:45px; height:30px; position:fixed; top:24px; right:22px; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out; transition: .5s ease-in-out;cursor:pointer; z-index:300}
#nav-icon4 span {display: block; position: absolute; height:3px; width:100%; background:#000; border-radius:2px; opacity: 1; left: 0; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg); -webkit-transition: .25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}
#nav-icon4 span:nth-child(1) {top: 0px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin: left center;transform-origin: left center;}
#nav-icon4 span:nth-child(2) {top:9px; -webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin: left center;transform-origin: left center;}
#nav-icon4 span:nth-child(3) {top:17px;-webkit-transform-origin:left center;-moz-transform-origin:left center; -o-transform-origin: left center; transform-origin: left center;}
.men{color:#000; font-size:1.2rem; position:fixed; top:45px;right:21px;letter-spacing:0.22em;}

.wrap-collapsible {margin:2rem 0}
.lbl-toggle h4{padding:0; font-size:2rem; text-transform:none; line-height:110%}
input[type='checkbox'] {display:none;}
.lbl-toggle {display:block; font-size:1.8rem; line-height:1rem; text-transform:uppercase; padding:1.4rem 0.7rem 0 1.4rem; color:#1c2f6e; background:#fff; cursor:pointer; border-radius:10px; transition:all 0.25s ease-out; margin-bottom:0; box-shadow:rgba(15, 20, 31, 0.15) 0px 0px 18px 0px;}
.lbl-toggle:hover { color:#1c2f6e}
.lbl-toggle::after { content:' '; display:inline-block; vertical-align:middle; transition:transform .2s ease-out; margin:0 0 0 6px}
.collapsible-content { max-height:0px; overflow:hidden; transition:max-height .15s ease-in-out; box-shadow:rgba(15, 20, 31, 0.15) 0px 0px 18px 0px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
.toggle:checked + .lbl-toggle + .collapsible-content { max-height:2250px; height:auto}
.toggle:checked + .lbl-toggle { border-bottom-right-radius:0; border-bottom-left-radius:0;}
.collapsible-content .content-inner { background:#fff; border-bottom-left-radius:10px; border-bottom-right-radius:10px; padding:1.7rem;}
.content-inner p {margin-bottom:1.4rem}

.hmmob{display:block}.hmdesk{display:none}
.logitech{position:absolute;margin-top:32px;height:25px;width:auto;right:14%}
.hmpromo{margin:60px 10px 5px 10px}
.seloblu{padding:0 11px; margin-top:85px; transform:skew(-0.035turn, 0);z-index:20;position:absolute;left:8%}
.seloroxo{padding:0 11px; margin-top:85px; transform:skew(-0.035turn, 0);z-index:20;position:absolute;right:8%}
.escolha{color:#fff;margin-top:5px;line-height:110%}
.barraintro{position:relative;bottom:80px;height:90px;margin-top:130px}
.seloblu h2,.seloroxo h2{font-size:3.8rem}
#wrapper{position:relative;width:100%;min-height:98vw;overflow:hidden}
.layer{position:absolute;width:100vw;min-height:98vw;overflow:hidden}
.layer .content-wrap{position:absolute;width:100vw;min-height:98vw}
.layer .content-body{color:#fff;width:25%;position:absolute;top:50%;text-align:center;transform:translateY(-50%)}
.layer img{position:absolute;height:100%;top:50%;left:50%;transform:translate(-50%,-50%)}
.bottom{background:#fff;z-index:1}
.bottom .content-body{right:5%}
.top{background:#fff;color:#222;z-index:2;width:50vw}
.top .content-body{left:5%;color:#222}
.handle{position:absolute;height:100%;display:block;background-color:#fff;width:8px;top:0;left:50%;z-index:3}
.skewed .handle{top:50%;transform:rotate(30deg) translateY(-50%);height:200%;transform-origin:top}
.skewed .top{transform:skew(-30deg);margin-left:-1000px;width:calc(50vw + 1000px)}
.skewed .top .content-wrap{transform:skew(30deg);margin-left:1000px}
}


@media (min-width: 360px) {
#como{top:0}
}

@media (min-width: 413px) {
.hero{height:518px}
}


@media (min-width:740px) {
#bops{margin-left:5%}
button.bop{font-size:12px}
#como{top:0}
.hero{height:400px}
.olho {margin-left:92%}
.heroin{height:300px}
.comomob{width:90%;height:auto;margin:-20px 0 0 0}
.seloblu{padding:0 11px; margin-top:35px; left:5%}
.seloroxo{padding:0 11px; margin-top:35px; right:5%}
.escolha{margin-top:10px;line-height:120%}
.barraintro{bottom:80px;height:60px;margin-top:130px}
}


@media (min-width: 1000px) {
.influ{float:left;width:240px;margin:-70px 0 0 0}
.heroin{height:260px}
.hero{height:518px}
.como{display:block; width:100%;height:auto;margin:0}
.comomob{display:none}
.logoin{max-width:100%; height:auto; margin-top:10px}
.titin {margin-top:15px; text-align:right}
.titin h1{font-size:160%}
.button.button-primary,button.button-primary,input[type="submit"].button-primary,input[type="reset"].button-primary,
input[type="button"].button-primary {font-size:20px; padding:0 30px; height:62px; line-height:58px}
.u-half-width {width:49.7%}

.logitech{margin-top:30px;height:30px;right:13%}
.hmpromo{margin:17px 90px 15px 90px}
.hmmob{display:none}.hmdesk{display:block}
.seloblu{padding:0 14px; margin-top:-5px; left:8%}
.seloroxo{padding:0 14px; margin-top:-5px; right:8%}
.seloblu h2,.seloroxo h2{font-size:4.4rem}
.barraintro{margin-top:130px;height:68px}
#wrapper{position:relative;width:100%;min-height:28vw;overflow:hidden}
.layer{position:absolute;width:100vw;min-height:28vw;overflow:hidden}
.layer .content-wrap{position:absolute;width:100vw;min-height:28vw}
.layer .content-body{color:#fff;width:25%;position:absolute;top:50%;text-align:center;transform:translateY(-50%)}
.layer img{position:absolute;height:100%;top:50%;left:50%;transform:translate(-50%,-50%)}
.bottom{background:#fff;z-index:1}
.bottom .content-body{right:5%}
.top{background:#fff;color:#222;z-index:2;width:50vw}
.top .content-body{left:5%;color:#222}
.handle{position:absolute;height:100%;display:block;background-color:#fff;width:8px;top:0;left:50%;z-index:3}
.skewed .handle{top:50%;transform:rotate(30deg) translateY(-50%);height:200%;transform-origin:top}
.skewed .top{transform:skew(-30deg);margin-left:-1000px;width:calc(50vw + 1000px)}
.skewed .top .content-wrap{transform:skew(30deg);margin-left:1000px}

}


@media (min-width: 1200px) {
div .no{font-size:72px; margin-right:22px; padding-bottom:50px}
.lista p {font-size:1.5em; padding-top:15px}
.barra{display:block}
.logo{position:relative; width:150px; top:auto; left:auto; margin:24px 0 0 0}
.logitech{position: absolute; margin-top:30px;height:32px;width:auto;right:13%}
.tema{height:340px; z-index:1; top:50px; left:0; padding-top:100px; background-attachment:fixed;}
.seloblu{margin-top:-8px; left:12%;}
.seloroxo{margin-top:-8px; right:12%;}
.seloblu h2,.seloroxo h2{font-size:5rem}
.barrabk{margin-top:65px;z-index:10}
.barrapart{margin-top:-160px}
.hero2{padding:50px 10px}
#chamada{width:80%; padding:auto; margin:-60px auto 30px auto}
.chamadatxt{padding:3px 20px;margin-left:80px}
.slide-menu-open {display: none}
.side-menu-wrapper {display: none}
.menu{z-index:50; display:block; height:90px; width:75%; margin:auto}
.barra{background-color:#51ace0; margin-top:30px; }
.menu li{display:inline-block; font-size:1.1em; font-family:'brown'; margin:0; padding:3px 25px; letter-spacing:0.04em;}
.menu ul{margin:0; padding:0}
.menu li a{color:#fff}
.menu li a:hover{color:#000}
}

@media (min-width: 1360px) {
.influ{width:250px;margin:-65px 0 0 0}
#chamada{width:80%; margin:-40px auto 30px auto}
.barrabk{margin-top:100px}
.barrapart{margin-top:-195px}
.logitech{margin-top:30px;height:34px;right:13%}
}

@media (min-width: 1600px)  {
.influ{width:280px;margin:-75px 0 0 0}
.tema{height:480px; padding-top:180px;}
.barrabk{margin-top:320px}
.barrapart{margin-top:-215px}
.hero2{padding:50px 10px}
#chamada{width:70%; margin:-60px auto 30px auto}
.barraintro{margin-top:120px}
.seloblu{left:20%;}
.seloroxo{right:20%;}
}

@media (min-width: 1900px) {
.influ{width:310px;margin:-90px 0 0 0}
.tema{height:500px; padding-top:180px;}
.barrabk{margin-top:345px}
.barrapart{margin-top:-218px}
.hero2{padding:50px 10px}
#chamada{width:70%; margin:-70px auto 30px auto}
.seloblu{left:24%;}
.seloroxo{right:24%;}
}





#return-to-top {position:fixed; bottom:18px; right:20px;background:rgb(0, 0, 0); background:rgba(0, 0, 0, 0.5); width:48px; height:48px; display: block; text-decoration:none; -webkit-border-radius:34px; -moz-border-radius:34px; border-radius:34px; display:none; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease;}
#return-to-top i{color:#fff; margin:0; position:relative; left:18px; top:16px; font-size:19px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease;  transition:all 0.3s ease;}
#return-to-top:hover {background:rgba(0, 0, 0, 0.7)}
#return-to-top:hover i {color:#fff; top:14px}
.arrow {border:solid #fff; border-width:0 4px 4px 0; display:inline-block; padding:4px; transform: rotate(-135deg);-webkit-transform: rotate(-135deg);}