/* CSS variables */
body {
    --height: 440px;
    --blueBG: linear-gradient(to bottom right, #19bb9c -50%, #09c 100%);
    --purpleBG: linear-gradient(to bottom right, #09c -20%, #9B59B6 130%);
    --goldenBG: linear-gradient(to bottom right,#edcd6e -20%,#987a43 130%);
    --cyanBG: linear-gradient(to bottom, #0B73BA 0%, #09c 100%);
    --royalBlueBG: linear-gradient(to bottom right, #2f89d0 0%, #0e5db3 50%, #004e96 100%);
    --boxShadow: inset 0 -10px 20px -15px rgba(0,0,0,.5);
    --textShadow: 0px 1px 2px rgba(0,0,0,.5);
}
/*  GLOBAL  */
html,
body {
    padding: 0;
    margin: 0;
}

html * {
    box-sizing: border-box;
}

#pageShowTitle {
    display: none
}

::-webkit-input-placeholder {
    color: #999
}

:-moz-placeholder {
    color: #999
}

::-moz-placeholder {
    color: #999
}

:-ms-input-placeholder {
    color: #999
}


/* TEXT-STYLE */

body {
    color: #333;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
}

h1,
h2,
h3 {
    line-height: 120%
}

h1,
h1 * {
    font-size: 3em
}

h2,
h2 * {
    font-size: 2.4em
}

h3,
h3 * {
    font-size: 1.5em;
    margin-top: 10px
}

h4,
h4 * {
    font-size: 1.04rem;
    font-weight: 800;
    margin: 5px auto;
}

sup,
h1 sup,
h2 sup,
h3 sup {
    color: inherit;
    font-size: .6em;
    padding-left: .1rem
}

h4 + p {
    -webkit-margin-before: 0;
}

img,
video {
    max-width: 100%;
    height: auto
}


/* STRUCTURE */


/* site */

.wrapper {
    margin: 0 auto;
    max-width: 1220px;
    padding: 0 10px;
    position: relative;
    width: 100%;
}

.wrapper.thin {
    max-width: 960px;
}

.header {
    height: 60px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
}

.logo {
    padding: 11px 0;
}
.logo a,
.opaque .logo a  {
    background: url('/fmfiles/index.asp/::suipsme::/resources/imgs/SuipsMe.svg') center/contain no-repeat;
    border:none;
    display: inline-block;
    height: 40px;
    width: 139px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    transition: all .3s ease-in-out .1s;
}
.logo a.medicoLogo,
.opaque .logo a.medicoLogo {
    background: url('/fmfiles/index.asp/::suipsme::/resources/imgs/SuipsMeMedico.png') center/contain no-repeat;
    height: 40px;
    width: 139px;
}
.logo a.checkinLogo,
.opaque .logo a.checkinLogo {
    background: url('/fmfiles/index.asp/::suipsme::/resources/imgs/SuipsMeMedico.png') center/contain no-repeat;
    height: 40px;
    width: 139px;
}
.logo a.totemLogo,
.opaque .logo a.totemLogo {
    background: url('/fmfiles/index.asp/::suipsme::/resources/imgs/SuipsMeTotem.png') center/contain no-repeat;
    height: 40px;
    width: 139px;
}

.Logo,
.MobileMenuIcon {
    float: none;
    padding: 10px 0;
    text-align: center;
}

.TopMenu {
    float: right;
    display: none;
}

.MobileMenuIcon {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/menu-32-w.png');
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
    float: right;
    height: 32px;
    padding: 30px;
    width: 32px;
}

.TopMenu ul li {
    display: inline-block;
    font-size: 14px padding: 14px 20px;
    text-transform: uppercase;
}

.TopMenu ul li:last-child {
    padding-right: 0;
}

.TopMenu ul li a {
    cursor: pointer display: block;
}

.TopMenu ul li a:hover,
.preFooter ul li a:hover {
    color: #09c
}

.TopMenu ul {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.TopMenu a:-webkit-any-link {
    color: #fff
}

.TopMenu a {
    color: #fff
}


/* header */

.menu ul,
.menu li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu {
    position: fixed;
    top: 60px;
    width: 100%;
    background-color: #666;
    color: #fff;
    height: auto;
    display: none;
}

.menu * {
    color: #fff;
}

.menu ul li a {
    display: block;
    padding: 10px;
    text-align: left;
}


/* footer */

.footer {
    height: 44px;
    width: 100%;
    clear: both;
    font-size: 12px;
}

.footer div,
.footer div.alignRight {
    text-align: center;
}


/* prefooter */

.preFooter {
    float: left;
    width: 100%;
    background-color: #3a3a3a;
    clear: both
}

.preFooter,
.preFooter * {
    color: #fff
}

.preFooter h4 {
    text-transform: uppercase;
    font-size: 14px;
    margin: 5px 0 15px 0;
}
/* WHEN MEDICAL PAGE */
  .preFooter.medico {
      background-color: #E9EAEE;
  }
  .preFooter.medico, .preFooter.medico * {
      color: #333;
  }
  .preFooter ul li a:hover {
    color: #286eaf;
  }
/*  */
.preFooter ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 13px
}

.footer.preFooter {
    height: 100%;
}


/* grids */

.GridSection {
    clear: both;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}

.GridBox {
    float: left;
    margin: 25px auto;
    padding: 0 15px;
    position: relative;
}

.GridSection.right .GridBox {
    float: right
}

.GridBox.col3:first-child {
    margin: 0 auto 25px auto
}

.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8 {
    width: 100%;
    margin: 1% 0
}

.col8.col8Master {
    float: none;
    max-width: 600px;
    margin: 0 auto
}

.col4.col4Master {
    text-align: center;
}


/* special uls */

ul.none {
    list-style: none
}

ul.ok,
#middlesite ul.notok {
    list-style: none;
}

ul.ok li:before {
    content: '\2713';
    margin-right: 5px;
    color: #16a085;
}

ul.notok li:before {
    content: '\2717';
    margin-right: 5px;
    color: #c0392b;
}

ul.bottom li {
    margin-bottom: 10px
}


/* colors */

.lightGray {
    background-color: #f6f6f8
}
.midGray {
    background-color: #444447
}

.Red {
    background-color: #c0392b
}
.Orange {
    background-color: #e67e22
}
.Green {
    background-color: #16a085
}
.Blue {
    background-color: #2980b9
}
.Purple {
    background-color: #8e44ad
}

.Pink {
    background-color: #d51379
}

.blueGreen {
  background: var(--blueBG);
}
.bluePurple {
  background: var(--purpleBG);
}
.cyanBlue {
  background: var(--cyanBG);
}
.royalBlue {
  background: var(--royalBlueBG);
}
.boxShadow {
  box-shadow: var(--boxShadow);
}
.gray,
.footer,
.header {
    background-color: #333
}
/* WHEN MEDICAL PAGE */
  .footer.medico,
  #header.opaque.medico {
      background-color: #01386d;
  }
/*  */

.Blue, .Blue *, .Blue a, .Blue a:hover,
.footer,
.gray, .gray *, .gray a, .gray a:hover,
.Green, .Green *, .Green a, .Green a:hover,
.header,
.midGray,
.Orange,
.Pink,
.Purple,
.Red,
.blueGreen, .blueGreen *, .blueGreen a, .blueGreen a:hover,
.bluePurple, .bluePurple *, .bluePurple a, .bluePurple a:hover,
.cyanBlue, .cyanBlue *, .cyanBlue a, .cyanBlue a:hover,
.royalBlue, .royalBlue *, .royalBlue a, .royalBlue a:hover {
    color: #fff;
}

.Blue a:hover,
.Green a:hover,
.blueGreen a:hover,
.bluePurple a:hover {
    text-decoration: underline;
}


/*** END STRUCTURE ***/


/* LINKS */

a {
    text-decoration: none;
    color: #09c
}

a:hover {
    color: #2980b9
}

a,
button {
    transition: color .2s ease, background .3s ease, border .2s ease
}


/* buttons */

a.Button,
button.Button {
    border-radius: 5px;
    border: none;
    color: #fff;
    font-size: 0.85em;
    letter-spacing: .5px;
    padding: 10px 30px;
    text-transform: uppercase;
    width: auto;
}

a.Button:hover,
button.Button:hover {
    box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
    text-decoration: none;
}

a.Button.Orange,
button.Button.Orange {
    background: #f90;
}

a.Button.Orange:hover,
button.Button.Orange:hover {
    background: #ff8000;
}

a.Button.Blue,
button.Button.Blue {
    background: #09c;
}

a.Button.Blue:hover,
button.Button.Blue:hover {
    background: #2980b9;
}

a.Button.White,
button.Button.White {
    background: transparent;
    border: solid 2px #fff
}

a.Button.White:hover,
button.Button.White:hover {
    background: #f90;
    border: solid 2px #f90
}


/* inputs */

input[type="button"],
input[type="submit"],
input[type="text"],
input[type="password"],
textarea {
    -webkit-appearance: none;
    -webkit-border-radius: 0
}

input {
    border-radius: 5px;
    border: 0;
    outline: none;
    height: 44px;
    padding: 15px;
    font: 16px 'Open Sans', sans-serif;
    color: #555;
    vertical-align: middle;
}

button.Button {
    height: 44px;
    font-family: 'Open Sans';
    vertical-align: middle;
    margin: 7px;
}


/* ESTILOS PADRAO */


.MobileOnly {
    display: block
}

.fixed {position: fixed}

.alignCenter {text-align: center}
.alignLeft {text-align: left}
.alignRight {text-align: right}

.floatRight {float: right}

.padBottom30 {padding-bottom: 30px}
.padBottom60 {padding-bottom: 60px}
.noMarginTop {margin-top: 0}
.noPad,
.content section.noPad {padding: 0}
.noPadTop {padding-top: 0}
.noPadBottom,
.content section.noPadBottom {padding-bottom: 0}
.noPadMargin,
.GridSection.right .GridBox.noPadMargin:last-child {
    padding: 0; margin: 0
}
.pad-top-1-fix {padding-top: 1px;}

.hidden-text,
.hidetext {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

.img {height: 40vh}

/* ESTILOS ESPECIFICOS*/

h2.section {
    font-weight: bold;
    margin: 0 auto 30px auto;
    font-size: 30px;
    font-weight: normal;
    line-height: 100%;
    text-align: center;
}

img.xsmall {
    max-width: 300px
}

.margin-vertical {
    margin: 50px auto 20px auto
}


/*** PAGINAS ***/

/* LANDING PAGES */

/* LP heros */
.lp .hero-wrapper {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100vh;
}
.lp .hero .hero-txt {
    position: fixed;
    max-width: 1080px;
      width: 100%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-shadow: 1px 2px 3px rgba(0, 0, 0, .4);
}
.lp .hero h1 {
    color: #fff;
    font-size: 2.5em;
    font-weight: 600;
    letter-spacing: -1px;
}
.lp .hero h1 span {
    font-size: .5em;
    display: block;
    font-weight: normal;
    line-height: 120%;
    letter-spacing: 0;
}

.lp section.parallax {
    color: #fff;
    padding: 10px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    height: 100vh;
    margin-top: -40px;
}
.lp .col3,
.lp .col5 {
    text-align: center;
}

#middlesite.lp h2 {
    font-size: 1.1em;
    font-weight: 600;
}


/* outdoor section */

.content section.outdoor {
    padding: 80px 0;
}
section.outdoor .wrapper {
    max-width: 780px;
    margin: 0 auto;
}
.content section.outdoor.bgimg {
    padding: 30px 0
}
.outdoor h2,
#middlesite.lp .outdoor h2 {
    font-size: 1.3em;
    line-height: 150%;
    font-weight: 400;
}
.outdoor h1 {
    margin: 0;
    font-size: 1.8em;
}
.outdoor .wrapper > h2,
.outdoor .wrapper > p {
    margin-top: 0;
}
.outdoor p:last-of-type {
    margin-bottom: 0;
}



/* other sections */

section.frst {
    background-color: #fff;
    position: relative;
    top: -30px;
    z-index: 10;
}

section.img-top-sm {
    text-align: center
}

section.img-top-sm img {
    max-width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto
}
.imgBottom {
    margin: 0;
}

/* END SECTIONS */

/* douchebag VERTICAL MIDDLE */
.middle.middleMaster {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.middle.middleMaster > h2,
.middle.middleMaster > p {margin-top: 0} /* fix */

/* IMAGES */
/* stores btns */

.store {
    overflow: hidden
}

.store-btn {
    margin: 0;
    width: 100%;
    text-align: center;
}

.store-btn a {
    display: inline-block;
    margin: 2px auto;
    min-height: initial; /* remove */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    color: transparent !important; /* fix overflow text */
    height: 46px;
    width: 152.5px;
    border-radius: 5px;
    border: solid 2px #A6A6A6;
    color: transparent !important;

}
#store-badge-play,
.store-badge-play {
    background: #333 url(/fmfiles/index.asp/::suipsme::/resources/imgs/GooglePlayRet-2x.png) center/100% no-repeat;
}
#store-badge-appstore,
.store-badge-appstore {
    background: #333 url(/fmfiles/index.asp/::suipsme::/resources/imgs/AppStoreRet-2x.png) center/100% no-repeat;
}



/* col-3 images */

.img-col {
    position: relative;
    background-repeat: no-repeat;
    background-size: 71px;
    background-position: 50% 50%;
    background-color: #09c;
    display: inline-block;
    width: 96px;
    height: 96px;
    margin: 0 auto;
    border-radius: 48px;
}
    /* start can be deleted */
.img-col.time {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/time-96-w.svg');
}

.img-col.privacy {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/privacy-96-w.svg');
}

.img-col.messenger {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/messenger-96-w.svg');
}
    /* end can be deleted */
.img-col .img-col-data {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/data-96-w.svg');
}
.img-col .img-col-doctor {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/doctor-96-w.svg');
}
.img-col .img-col-emergency {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/emergency-96-w.svg');
}


/* inline-icons */

span.icon,
.Button span {
    float: left;
    display: block;
    width: 24px;
    height: 24px;
    margin-right: 10px
}

span.icon.i32,
.Button span .i32 {
    width: 32px;
    height: 32px;
}

.Button.pdf span,
span.icon.pdf {
    background: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons.svg') no-repeat 0 0;
}

.Button.pdf span,
span.icon.pdf-dark {
    background: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons.svg') no-repeat 0 -48px;
}


/* images-icons */

span.icon.inline {
    float: none;
    position: relative;
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: 50% 50%;
    display: inline-block;
    margin: 0 auto;
    vertical-align: bottom;
}

span.icon.i18 {
    background-size: 18px;
}

span.icon-text {
    padding: 0px 7px 2px;
    font-variant: all-small-caps;
}
span.icon.inline.i24 {
    background-size: 24px;
    width: 30px;
    height: 30px;
    margin: -4px 0;
}

span.icon.icon-add-c {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/add-24-c.svg')
}

span.icon.icon-add-w {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/add-24-w.svg')
}

span.icon.icon-alarm-on-c {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/alarm-on-24-c.svg')
}

span.icon.icon-alert-l {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/alert-24-l.svg')
}

span.icon.icon-allergy-c {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/allergy-24-c.svg')
}

span.icon.icon-blocked-l {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/blocked-24-l.svg')
}

span.icon.icon-blood-c {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/blood-24-c.svg')
}

span.icon.icon-cam-x {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/cam-24-x.svg')
}

span.icon.icon-check-w {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/check-icon-24-w.svg')
}

span.icon.icon-check-l {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/check-icon-24-l.svg')
}

span.icon.icon-check2-l {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/check-icon2-24-l.svg')
}

span.icon.icon-clock-l {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/clock-24-l.svg')
}

span.icon.icon-clipboard-c {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/clipboard-24-c.svg')
}
span.icon.icon-clipboard-i {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/clipboard-24-i.svg')
}

span.icon.icon-dna-c {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/dna-24-c.svg')
}
span.icon.icon-dna-i {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/dna-24-i.svg')
}

span.icon.icon-doctor-c {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/doctor-24-c.svg')
}

span.icon.icon-emergency-contact-c {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/emergency-contact-24-c.svg')
}

span.icon.icon-folder-x {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/folder-24-x.svg')
}

span.icon.icon-health-plan-c {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/health-plan-24-c.svg')
}
span.icon.icon-health-plan-i {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/health-plan-24-i.svg')
}

span.icon.icon-home-c {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/home-24-c.svg')
}
span.icon.icon-home-i {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/home-24-i.svg')
}

span.icon.icon-medical-cross-c {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/medical-cross-24-c.svg')
}
span.icon.icon-medical-cross-i {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/medical-cross-24-i.svg')
}

span.icon.icon-menstrual-cycle-c {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/menstrual-cycle-24-c.svg')
}
span.icon.icon-menstrual-cycle-i {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/menstrual-cycle-24-i.svg')
}

span.icon.icon-menu-points-c {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/menu-points-24-c.svg')
}
span.icon.icon-menu-points-w {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/menu-points-24-w.svg')
}

span.icon.icon-pencil-w {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/pencil-24-w.svg')
}

span.icon.icon-pill-c {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/pill-24-c.svg')
}
span.icon.icon-pill-i {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/pill-24-i.svg')
}

span.icon.icon-print-w {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/print-24-w.svg')
}

span.icon.icon-print-d {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/print-24-d.svg')
}

span.icon.icon-sad-l {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/sad-24-l.svg')
}

span.icon.icon-telephone-c {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/telephone-24-c.svg')
}
span.icon.icon-telephone-i {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/telephone-24-i.svg')
}

span.icon.icon-tools-w {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/tools-24-w.svg')
}

span.icon.icon-totem-c {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/touch-24-c.svg')
}

span.icon.icon-user-c {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/user-24-c.svg')
}
span.icon.icon-user-i {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/user-24-i.svg')
}

span.icon.icon-suipsme-baixar {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/suipsme-baixar-32.png');
    background-size: 24px
}

span.icon.icon-suipsme-config {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/suipsme-config-32.png');
    background-size: 24px
}

span.icon.icon-suipsme-medico {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/suipsme-medico-32.png');
    background-size: 24px
}

span.icon.icon-suipsme-dispositivos {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/suipsme-dispositivos-32.png');
    background-size: 24px
}

span.icon.icon-suipsme-medico-checkin {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/suipsme-checkin-32.png');
    background-size: 24px
}

span.icon.icon-suipsme-captura {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/suipsme-captura.svg');
    background-size: 24px
}

span.icon.icon-suipsme-convite {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/suipsme-convite-32.png');
    background-size: 24px
}

span.icon.icon-agenda-convite {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/agenda-convite.png');
    background-size: 20px
}

span.icon.icon-catalogo-remove {
    background-image: url('/fmfiles/index.asp/::suipsme::/resources/imgs/icons/catalogo-remove.png')
}


/*** END IMAGES ***/


/*  PAGINAS */


/* /p/tutorial */

.full {
    height: 93vh
}

.full.fix {
    margin-top: 33px;
}

.full.fix p.tut {
    margin-top: -24px;
}

.slide p.tut {
    font-size: 3.3vh;
    line-height: 130%;
    margin-top: 10px
}

.slide p.tut span {
    font-weight: bold;
}

.GridBox.fix-nopad img {
    display: block;
    margin: 0 auto;
}

.GridBox.fix-nopad.tut img {
    height: 100%;
    max-height: 62vh;
    width: 100%;
}

.GridBox.fix-nopad img.g {
    width: 90vw
}


/* /p/tutorial pagination */

ul.pagination {
    display: block;
    list-style-type: none;
    position: fixed;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

ul.pagination li a {
    color: white;
    display: block;
    height: 18px;
    margin-bottom: 5px;
    padding: 4px;
    position: relative;
}

ul.pagination li a:after {
    border-radius: 50%;
    border: 1px solid #fff;
    bottom: 0 content: '';
    display: block;
    height: 9px;
    margin: auto;
    position: absolute;
    top: 0;
    width: 9px;
}

ul.pagination a.active:after {
    background-color: #fff;
    height: 12px;
    margin-right: -1px;
    width: 12px;
}


/* /p/tutorial fixes */

.GridBox.fix-nopad:last-child,
.GridSection.right .GridBox.fix-nopad:last-child {
    position: absolute;
    bottom: 0;
    left: 0;
    right: initial;
    margin: 0 auto
}

.GridSection.right .GridBox.fix-nopad:last-child {
    left: 0;
}


/* /p/faq */

p.pre-text::before {
    text-transform: uppercase;
    font-size: 80%;
    font-weight: bold;
    margin-right: 5px
}

p.pre-text.case::before {
    content: "Quando acontece:"
}

p.pre-text.solution::before {
    content: "Solu\00E7 \00E3o:"
}


/*** END PAGINAS ***/

@media only screen and (min-width: 320px) {
    .col1 {
        width: 49.2%;
        margin: 1% 0 1% 1.6%
    }
    .col1:nth-child(2n+1) {
        margin: 1% 0
    }
    .col4,
    .col5,
    .col6 {
        width: 100%
    }
}

@media only screen and (min-width: 460px) {
    .col2,
    #FirstFooter .GridBox.col2 {
        width: 49.2%;
        margin: 1% 0 1% 1.6%
    }
    .col2:nth-child(2n+1),
    #FirstFooter .GridBox.col2:nth-child(2n+1) {
        margin: 1% 0;
        clear: left
    }
}

@media only screen and (min-width: 640px) {
    .col1 {
        width: 23.8%
    }
    .col1:nth-child(2n+2),
    .col1:nth-child(2n+1) {
        margin: 1% 0 1% 1.6%
    }
    .col1:nth-child(4n+1) {
        margin: 1% 0
    }
}

@media only screen and (min-width: 740px) {
    /* STRUCTURE */
    .col3,
    .col4 {
        width: 48.2%;
        margin: 1% 0 1% 1.6%
    }
    .col3.col3Master {
        width: 100%;
        margin: 1% 0
    }
    .col3:nth-child(2n+1).col4:nth-child(2n+1) {
        margin: 1% 0
    }
    .col4.col4Master {
        width: 100%;
    }

/**/h2.spacer:after {
        top: 55px;
        width: 240px
    }

    .img {height: 400px}

    .store-btn { /* remove all, only fixing */
        margin: 0 auto;
        width: 100%;
    }
    section:not(.preFooter) .store-btn a {
        width: 209.9px;
        height: 61px;
        border-radius: 7px;
    }

    /* SECTIONS */
    .full.fullMaster {
        height: 91vh
    }
    /* HERO */
    section.hero .peb {
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: cover;
        height: 600px;
    }
    section.hero .color {
        height: 596px;
        top: 60px;
    }
    section.hero.home p {
        margin: 50px auto;
        display: block;
        font-size: 26px;
        line-height: 130%;
    }

    section.parallax {padding: 60px;}

    /* OUTDOOR */
    .outdoor h2,
    #middlesite.lp .outdoor h2 {
        font-size: 1.5em;
    }

    .outdoor h1 {
        font-size: 2.4em;
    }
    .imgBottom {
        padding: 40px 0 0 0;
    }
    /* douchebag VERTICAL MIDDLE */
    .GridSection.module {
        height: 440px;
    }
    .moduleS {
        height: 220px;
    }
    .middle {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
    .middle > h2,
    .middle > p {margin-top: 0} /* fix */

    /* LANDING PAGES */
    .lp .col5 {
        width: 61.9%;
        margin: 1% 0;
    }
    .lp .col3 {
        width: 32.26%;
        margin: 1% 0;
        text-align: left;
    }
    .lp .hero h1 {font-size: 3em;}
    .lp .hero h1 span {
        width: 70%;
        margin: 20px auto;
    }
    .lp .stores {width: 600px; margin: 0 auto}

}


@media only screen and (min-width: 960px) {
    .col5 {
        width: 61.9%;
        margin: 1% 0
    }
/**/.GridSection.right .GridBox.flol { /* fix */
        float: left
    }
    .col3,
    .col3.col3Master {
        width: 32.26%;
        margin: 0 auto;
    }
    .col4.col4Master {
        width: 49.2%;
        margin: 0 auto;
        text-align: left;
    }
    .col6 {
        width: 74.6%
    }
    /* sections */
/**/.content section.img-top {
        margin-top: 100px;
        height: 330px;
        padding-top: 60px;
    }
/**/.img-top-sm img {
        width: 420px;
        position: absolute;
        top: -70px;
    }
    /* gridbox */
/**/.GridBox.paddingTop {
        padding-top: 80px
    }
/**/.GridBox.paddingTop-large {
        padding-top: 120px
    }
/**/.GridBox.paddingTop-xlarge {
        padding-top: 160px
    }
    .lp section.parallax { /* parallax effect only > 960 */
        background-attachment: fixed;
    }
    /* end sections */


/**/h2.section { /*FIX*/
        margin: 0;
        text-align: left;
    }
/**/.GridBox.fix-nopad.tut img {
        width: 100%;
        height: 100%;
        max-height: 70vh;
    }
/**/.GridBox.fix-nopad.ben img {
        width: 30vw;
        max-height: 70vh
    }
/**/.GridBox.fix-nopad img.g {
        width: 45vw
    }
/**/p.macro-text {
        font-size: 20px;
        line-height: 33px
    }
    /* LANDING PAGES */
    .lp .hero h1 {font-size: 4em;}
}

}
@media only screen and (min-width: 1024px) {
    .MobileOnly {
        display: none;
    }

    .GridBox:nth-child(4n+1),
    .GridBox:nth-child(3n+1),
    .col2:nth-child(2n+1),
    #FirstFooter .GridBox.col2:nth-child(2n+1),
    .col3:nth-child(2n+1) {
        margin: 1% 0 1% 1.6%
    }

    .col4:nth-child(2n+1),
    .col4:first-child {
        margin: 1% 0
    }

    .col8 {
        width: 100%;
        margin: 1% 0!important
    }

    .col7 {
        width: 87.3%;
        margin: 1% 0 1% 1.6%
    }

    .col6 {
        width: 74.6%;
        margin: 1% 0 1% 1.6%
    }

    .col5 {
        width: 61.9%;
        margin: 1% 0 1% 1.6%
    }

    .col4 {
        width: 49.2%
    }

    .col3 {
        width: 32.26%
    }

    .col2,
    #FirstFooter .GridBox.col2:nth-child(2n+1) {
        width: 23.8%
    }

    .col2:nth-child(2n+1) {
        clear: none
    }

    .col1 {
        width: 11.1%
    }

    .GridBox:first-child {
        margin: 1% 0
    }

    .GridBox:last-child {
        margin: 1% 0
    }
    /* fix */

    .GridBox.col3:first-child {
        margin: 1% 0
    }

    .GridBox.col3:last-child {
        margin: 1% 0
    }
    /* end fix */

    .col2,
    .col2:nth-child(2n+1) {
        width: 23.8%;
        margin: 1% 0 1% 1.6%
    }

    .col2:nth-child(4n+1) {
        margin: 1% 0
    }
}
@media only screen and (min-width: 1280px) {
    .GridSection.right .GridBox:last-child {
        margin: 0;
    }

    .GridSection.right .GridBox:last-child.paddingTop-large {
        padding-top: 120px;
    }

    .GridSection.right .GridBox:first-child {
        margin: 1% 0 1% 1.6%
    }

    .GridSection .GridBox.fix-nopad:last-child {
        margin: 0 auto
    }

    .GridSection.right .GridBox.fix-nopad:last-child {
        margin: 0 auto
    }

    h2.section {
        margin-left: 0;
    }
}
.content {
    margin-top: 20px;
    padding: 20px 0;
}
.content section {
    width: 100%;
    display: block;
    clear: both;
    float: left;
    padding: 20px 0;
}
section.paralaxe {
    background-attachment: fixed;
    margin-top: 0;
    background-position: 50% 50%;
    padding: 20px;
}
@media only screen and (min-width: 740px) {
    .footer div {
        text-align: left;
    }

    .footer div.alignRight {
        text-align: right;
    }

    .footer {
        height: 50px;
    }

    .TopMenu {
        display: block;
    }

    .MobileMenuIcon {
        display: none;
    }

    .menu {
        height: 0;
    }
}

/* ANIMATIONS */

    /* bouncing arrow  */

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
.arrow {
    position: fixed;
    bottom: 0;
    left: 50%;
    margin-left: -40px;
    width: 80px;
    height: 80px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGIiBoZWlnaHQ9Ijk2IiB2aWV3Qm94PSIwIDAgOTYgOTYiIHdpZHRoPSI5NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjkuNjQgMzEuMzZMNDggNDkuNjhsMTguMzYtMTguMzJMNzIgMzcuMDBsLTI0IDI0LTI0LTI0eiIvPjwvc3ZnPg==");
    background-size: contain;
}
a#start {
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}
.bounce {
    -moz-animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}
    /* end bouncing arrow  */