/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&& TOOL &&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* 

GUIDE

[MOBILE]   all
[PHABLET]  460px > 759pxpx 
[TABLET]   760pxpx > 991px 
[DESKTOP]  992px > 1499px 
[EXTRA]    1500px +

nm = não mexer

*/

/* ******************* LAYOUT ******************* */

html,
body {
    min-height: 100%;
    margin: 0px;
}

body {
    min-height: 100vh;
    height: 100%;
}

.column,
.col,
.block {
    position: relative;
    width: 100%;
    flex-basis: 0;
    flex-grow: 1;
    flex: 1 0 0;
    max-width: 100%;
}

.column, .col {margin-bottom: 1rem;}

.column.compact,
.col.compact,
.block.compact {
    width: auto;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.fill {
    width: 100%;
    height: 100%; 
}

a {cursor: pointer;}

.container {
    width: 100%;
    position: relative;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    z-index: 400;
}

    .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-left: -1rem;
        margin-right: -1rem;
    }

        .row .column,
        .row .col,
        .row .block {
            padding-left: 1rem;
            padding-right: 1rem;
            box-sizing: border-box;
        }

        .horizontal-align {
            flex-direction: row;
            display: flex;
            align-items: center;
            align-content: center;
        }

        .vertical-align {
            flex-direction: column;
            display: flex;
            align-items: center;
            align-content: center;
        }

.overlay {    
    width: 100%;
    height: 100%;
    position: fixed;
}

/* ******************* CARD ******************* */

.card {background-color: #eee}

    .card .card-header {
        padding: 1rem;
        padding-bottom: 0px;
    }

        .card .card-title {margin-top: 0px;}

    .card .card-content {
        padding: 1rem;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .card .card-footer {
        padding: 1rem;
        padding-top: 0px;
    }



/* ******************* SPECIFICS ******************* */

.cover {
    /* Fill Vertical Space of a Page */
    box-sizing: border-box;
    min-height: 100vh;
}

.flx {
    display: flex;
}




/* ******************* HEADER ******************* */

ul.nav-list-hor, 
ul.nav-list-ver {
    list-style: none;
    margin: 0px;
    padding-left: 0px;
    display: block;
}

ul.nav-list-hor li {
    line-height: 1rem;
    padding: 0px 8px;
    float: left;
}

.gen-min                  {flex: 0 0 0;                   max-width: 100%;}
.gen-auto                 {flex: 1 0 0;                   max-width: 100%;}
.gen-1                    {flex: 0 0 8.3333333333333333%; max-width: 8.3333333333333333%;}
.gen-2                    {flex: 0 0 16.666666666666666%; max-width: 16.666666666666666%;}
.gen-3                    {flex: 0 0 25% ;                max-width: 25%;}
.gen-4                    {flex: 0 0 33.333333333333333%; max-width: 33.3333333333333333%;}
.gen-5                    {flex: 0 0 41.666666666666666%; max-width: 41.666666666666666%;}
.gen-6                    {flex: 0 0 50% ;                max-width: 50%;}
.gen-7                    {flex: 0 0 58.333333333333333%; max-width: 58.3333333333333333%;}
.gen-8                    {flex: 0 0 66.666666666666666%; max-width: 66.666666666666666%;}
.gen-9                    {flex: 0 0 75% ;                max-width: 75%;}
.gen-10                   {flex: 0 0 83.333333333333333%; max-width: 83.3333333333333333%;}
.gen-11                   {flex: 0 0 91.666666666666666%; max-width: 91.666666666666666%;}
.gen-12                   {flex: 0 0 100%;                max-width: 100%;}
.gen-offset-0             {margin-left: 0;}
.gen-offset-1             {margin-left: 8.3333333333333333%;}
.gen-offset-2             {margin-left: 16.666666666666666%;}
.gen-offset-3             {margin-left: 25%;}
.gen-offset-4             {margin-left: 33.333333333333333%;}
.gen-offset-5             {margin-left: 41.666666666666666%;}
.gen-offset-6             {margin-left: 50%;}
.gen-offset-7             {margin-left: 58.333333333333333%;}
.gen-offset-8             {margin-left: 66.666666666666666%;}
.gen-offset-9             {margin-left: 75%;}
.gen-offset-10            {margin-left: 83.333333333333333%;}
.gen-offset-11            {margin-left: 91.666666666666666%;}
.gen-offset-12            {margin-left: 100%;}


    .gen-hide, .hide {display: none;}
    .gen-show, .show {display: inherit;}
    .gen-fixed, .fixed {position: fixed;}

@media (max-width: 459px) {
    .gen-collapse {display: none !important;}
}



/* ******************* Z-INDEX ******************* */

.header {z-index: 500;}
.navbar {z-index: 1050;}
.fixed, 
.gen-fixed, 
.xs-fixed, 
.sm-fixed, 
.md-fixed, 
.lg-fixed, 
.xl-fixed {z-index: 1200;}
.overlay {z-index:  800;}
.column, .col, .block, footer {z-index: 300;}



/* ******************* PROPORTIONS ******************* */

.prop-1-1 {
    width: 100%;
    padding-bottom: 100%; /* rever */
    position: relative;
}
.prop-2-1 {
    width: 100%;
    padding-bottom: 50%;
    position: relative;
}
.prop-3-1 {
    width: 100%;
    padding-bottom: 33.333%;
    position: relative;
}
.prop-3-2 {
    width: 100%;
    padding-bottom: 66.66%; /* rever */
    position: relative;
}
.prop-5-2 {
    width: 100%;
    padding-bottom: 40%;
    position: relative;
}
.prop-16-9 {
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
}
.prop-4-3 {
    width: 100%;
    padding-top: 75%; /* rever */
    position: relative;
}
.prop-8-5 {
    width: 100%;
    padding-bottom: 62.5%; /* rever */
    position: relative;
}


div[class*="prop-"] > .content,
div[class*="proportion-"] > .content {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
}



/* ******************* CARD ******************* */

.flx-card {
    flex-direction: column;
    display: flex;
}

/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&& TEXT &&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */

html {
    line-height: normal;
    font-size: 4.25926vw; /* 16px for iPhone 6 */
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
    margin-top: 1rem;
    font-weight: 700;
    line-height: 1.1;
}

small {font-size: 75%;}

h1 { font-size: 3.375rem;}
h2 { font-size: 2.25rem;}
h3 { font-size: 1.5rem;}
h4 { font-size: 1rem;}
h5 { font-size: 0.666rem;}
h6 { font-size: 0.444rem;}




/* ******************* HERO ******************* */

.hero {
    display: flex;
    box-sizing: border-box;
    padding-top: 64px;
    padding-bottom: 64px;
    justify-content: space-between;
}

    .hero .hero-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .hero .hero-content {
        display: flex;
        flex-direction: column;
        align-content: center;
        flex-grow: 1;
        justify-content: center;
    }

    .hero .hero-header,
    .hero .hero-footer {
        display: flex;
        justify-content: space-between;
    }

    .hero .hero-header {padding-bottom: 1rem;}
    .hero .hero-footer {padding-top: 2rem;}



/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&& XS/MOBILE (460) &&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */

@media (min-width: 460px) {
    
    .xs-min                  {flex: 0 0 0;                   max-width: 100%;}
    .xs-auto                 {flex: 1 0 0;                   max-width: 100%;}
    .xs-1                    {flex: 0 0 8.3333333333333333%; max-width: 8.3333333333333333%;}
    .xs-2                    {flex: 0 0 16.666666666666666%; max-width: 16.666666666666666%;}
    .xs-3                    {flex: 0 0 25% ;                max-width: 25%;}
    .xs-4                    {flex: 0 0 33.333333333333333%; max-width: 33.3333333333333333%;}
    .xs-5                    {flex: 0 0 41.666666666666666%; max-width: 41.666666666666666%;}
    .xs-6                    {flex: 0 0 50% ;                max-width: 50%;}
    .xs-7                    {flex: 0 0 58.333333333333333%; max-width: 58.3333333333333333%;}
    .xs-8                    {flex: 0 0 66.666666666666666%; max-width: 66.666666666666666%;}
    .xs-9                    {flex: 0 0 75% ;                max-width: 75%;}
    .xs-10                   {flex: 0 0 83.333333333333333%; max-width: 83.3333333333333333%;}
    .xs-11                   {flex: 0 0 91.666666666666666%; max-width: 91.666666666666666%;}
    .xs-12                   {flex: 0 0 100%;                max-width: 100%;}
    .xs-offset-0             {margin-left: 0;}
    .xs-offset-1             {margin-left: 8.3333333333333333%;}
    .xs-offset-2             {margin-left: 16.666666666666666%;}
    .xs-offset-3             {margin-left: 25%;}
    .xs-offset-4             {margin-left: 33.333333333333333%;}
    .xs-offset-5             {margin-left: 41.666666666666666%;}
    .xs-offset-6             {margin-left: 50%;}
    .xs-offset-7             {margin-left: 58.333333333333333%;}
    .xs-offset-8             {margin-left: 66.666666666666666%;}
    .xs-offset-9             {margin-left: 75%;}
    .xs-offset-10            {margin-left: 83.333333333333333%;}
    .xs-offset-11            {margin-left: 91.666666666666666%;}
    .xs-offset-12            {margin-left: 100%;}

        .xs-hide {display: none;}
        .xs-fixed {position: fixed;}
        .xs-show {display: none;}
    

    /* ******************* TEXT ******************* */

    html {font-size: 2.395835vw; /* 16px for iPhone 6 Rotated */}
}

@media (max-width: 759px)  {
    .xs-collapse {display: none;}
}



/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&& SM/TABLET (760) &&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */

@media (min-width: 760px) {
    
    .container {
        padding: 0 16px;
    }

    .sm-min                  {flex: 0 0 0;                   max-width: 100%;}
    .sm-auto                 {flex: 1 0 0;                   max-width: 100%;}
    .sm-1                    {flex: 0 0 8.3333333333333333%; max-width: 8.3333333333333333%;}
    .sm-2                    {flex: 0 0 16.666666666666666%; max-width: 16.666666666666666%;}
    .sm-3                    {flex: 0 0 25% ;                max-width: 25%;}
    .sm-4                    {flex: 0 0 33.333333333333333%; max-width: 33.3333333333333333%;}
    .sm-5                    {flex: 0 0 41.666666666666666%; max-width: 41.666666666666666%;}
    .sm-6                    {flex: 0 0 50% ;                max-width: 50%;}
    .sm-7                    {flex: 0 0 58.333333333333333%; max-width: 58.3333333333333333%;}
    .sm-8                    {flex: 0 0 66.666666666666666%; max-width: 66.666666666666666%;}
    .sm-9                    {flex: 0 0 75% ;                max-width: 75%;}
    .sm-10                   {flex: 0 0 83.333333333333333%; max-width: 83.3333333333333333%;}
    .sm-11                   {flex: 0 0 91.666666666666666%; max-width: 91.666666666666666%;}
    .sm-12                   {flex: 0 0 100%;                max-width: 100%;}
    .sm-offset-0             {margin-left: 0;}
    .sm-offset-1             {margin-left: 8.3333333333333333%;}
    .sm-offset-2             {margin-left: 16.666666666666666%;}
    .sm-offset-3             {margin-left: 25%;}
    .sm-offset-4             {margin-left: 33.333333333333333%;}
    .sm-offset-5             {margin-left: 41.666666666666666%;}
    .sm-offset-6             {margin-left: 50%;}
    .sm-offset-7             {margin-left: 58.333333333333333%;}
    .sm-offset-8             {margin-left: 66.666666666666666%;}
    .sm-offset-9             {margin-left: 75%;}
    .sm-offset-10            {margin-left: 83.333333333333333%;}
    .sm-offset-11            {margin-left: 91.666666666666666%;}
    .sm-offset-12            {margin-left: 100%;}
    
        .sm-hide {display: none;}
        .sm-show {display: none;}
        .sm-fixed {position: fixed;}

    
    
    /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
    /* &&&&&&&&&&&&&&&&&&&&&& TEXT &&&&&&&&&&&&&&&&&&&&&& */
    /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */

    html {font-size: 2.08333vw; /* 16px for iPad */}
}

@media (max-width: 991px)  {
    .sm-collapse {display: none;}
}


/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&& MD/DESKTOP (992) &&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */

@media (min-width: 992px) {
    
    .container
    { 
        padding-left: 16px;
        padding-right: 16px; 
    }
    
    .md-min                  {flex: 0 0 0;                   max-width: 100%;}
    .md-auto                 {flex: 1 0 0;                   max-width: 100%;}
    .md-1                    {flex: 0 0 8.3333333333333333%; max-width: 8.3333333333333333%;}
    .md-2                    {flex: 0 0 16.666666666666666%; max-width: 16.666666666666666%;}
    .md-3                    {flex: 0 0 25% ;                max-width: 25%;}
    .md-4                    {flex: 0 0 33.333333333333333%; max-width: 33.3333333333333333%;}
    .md-5                    {flex: 0 0 41.666666666666666%; max-width: 41.666666666666666%;}
    .md-6                    {flex: 0 0 50% ;                max-width: 50%;}
    .md-7                    {flex: 0 0 58.333333333333333%; max-width: 58.3333333333333333%;}
    .md-8                    {flex: 0 0 66.666666666666666%; max-width: 66.666666666666666%;}
    .md-9                    {flex: 0 0 75% ;                max-width: 75%;}
    .md-10                   {flex: 0 0 83.333333333333333%; max-width: 83.3333333333333333%;}
    .md-11                   {flex: 0 0 91.666666666666666%; max-width: 91.666666666666666%;}
    .md-12                   {flex: 0 0 100%;                max-width: 100%;}
    .md-offset-0             {margin-left: 0;}
    .md-offset-1             {margin-left: 8.3333333333333333%;}
    .md-offset-2             {margin-left: 16.666666666666666%;}
    .md-offset-3             {margin-left: 25%;}
    .md-offset-4             {margin-left: 33.333333333333333%;}
    .md-offset-5             {margin-left: 41.666666666666666%;}
    .md-offset-6             {margin-left: 50%;}
    .md-offset-7             {margin-left: 58.333333333333333%;}
    .md-offset-8             {margin-left: 66.666666666666666%;}
    .md-offset-9             {margin-left: 75%;}
    .md-offset-10            {margin-left: 83.333333333333333%;}
    .md-offset-11            {margin-left: 91.666666666666666%;}
    .md-offset-12            {margin-left: 100%;}
        
        .md-hide {display: none;}
        .tablet-show {display: none;}
        .md-fixed {position: fixed;}
    
    /* ******************* TEXT ******************* */

    html {font-size: 1.438732vw; /* 16px for iPad */}
}

@media (min-width: 992px) and (max-width: 1247px)  {
    .md-hide {
        display: none;
    }
}



/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&& LG/LARGE DESKTOP (992) &&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */

@media (min-width: 1248px) {
    
    .lg-min                  {flex: 0 0 0;                   max-width: 100%;}
    .lg-auto                 {flex: 1 0 0;                   max-width: 100%;}
    .lg-1                    {flex: 0 0 8.3333333333333333%; max-width: 8.3333333333333333%;}
    .lg-2                    {flex: 0 0 16.666666666666666%; max-width: 16.666666666666666%;}
    .lg-3                    {flex: 0 0 25% ;                max-width: 25%;}
    .lg-4                    {flex: 0 0 33.333333333333333%; max-width: 33.3333333333333333%;}
    .lg-5                    {flex: 0 0 41.666666666666666%; max-width: 41.666666666666666%;}
    .lg-6                    {flex: 0 0 50% ;                max-width: 50%;}
    .lg-7                    {flex: 0 0 58.333333333333333%; max-width: 58.3333333333333333%;}
    .lg-8                    {flex: 0 0 66.666666666666666%; max-width: 66.666666666666666%;}
    .lg-9                    {flex: 0 0 75% ;                max-width: 75%;}
    .lg-10                   {flex: 0 0 83.333333333333333%; max-width: 83.3333333333333333%;}
    .lg-11                   {flex: 0 0 91.666666666666666%; max-width: 91.666666666666666%;}
    .lg-12                   {flex: 0 0 100%;                max-width: 100%;}
    .lg-offset-0             {margin-left: 0;}
    .lg-offset-1             {margin-left: 8.3333333333333333%;}
    .lg-offset-2             {margin-left: 16.666666666666666%;}
    .lg-offset-3             {margin-left: 25%;}
    .lg-offset-4             {margin-left: 33.333333333333333%;}
    .lg-offset-5             {margin-left: 41.666666666666666%;}
    .lg-offset-6             {margin-left: 50%;}
    .lg-offset-7             {margin-left: 58.333333333333333%;}
    .lg-offset-8             {margin-left: 66.666666666666666%;}
    .lg-offset-9             {margin-left: 75%;}
    .lg-offset-10            {margin-left: 83.333333333333333%;}
    .lg-offset-11            {margin-left: 91.666666666666666%;}
    .lg-offset-12            {margin-left: 100%;}

        .lg-hide {display: none;}
        .lg-fixed {position: fixed;}
        .lg-show {display: none;}
}


@media (max-width: 1499px)  {
    .lg-colapse {display: none;}
}


/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&& XL/EXTRA LARGE DESKTOP (992) &&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */

@media (min-width: 1500px) {
    
    .xl-min                  {flex: 0 0 0;                   max-width: 100%;}
    .xl-auto                 {flex: 1 0 0;                   max-width: 100%;}
    .xl-1                    {flex: 0 0 8.3333333333333333%; max-width: 8.3333333333333333%;}
    .xl-2                    {flex: 0 0 16.666666666666666%; max-width: 16.666666666666666%;}
    .xl-3                    {flex: 0 0 25% ;                max-width: 25%;}
    .xl-4                    {flex: 0 0 33.333333333333333%; max-width: 33.3333333333333333%;}
    .xl-5                    {flex: 0 0 41.666666666666666%; max-width: 41.666666666666666%;}
    .xl-6                    {flex: 0 0 50% ;                max-width: 50%;}
    .xl-7                    {flex: 0 0 58.333333333333333%; max-width: 58.3333333333333333%;}
    .xl-8                    {flex: 0 0 66.666666666666666%; max-width: 66.666666666666666%;}
    .xl-9                    {flex: 0 0 75% ;                max-width: 75%;}
    .xl-10                   {flex: 0 0 83.333333333333333%; max-width: 83.3333333333333333%;}
    .xl-11                   {flex: 0 0 91.666666666666666%; max-width: 91.666666666666666%;}
    .xl-12                   {flex: 0 0 100%;                max-width: 100%;}
    .xl-offset-0             { margin-left: 0;}
    .xl-offset-1             { margin-left: 8.3333333333333333%;}
    .xl-offset-2             { margin-left: 16.666666666666666%;}
    .xl-offset-3             { margin-left: 25%;}
    .xl-offset-4             { margin-left: 33.333333333333333%;}
    .xl-offset-5             { margin-left: 41.666666666666666%;}
    .xl-offset-6             { margin-left: 50%;}
    .xl-offset-7             { margin-left: 58.333333333333333%;}
    .xl-offset-8             { margin-left: 66.666666666666666%;}
    .xl-offset-9             { margin-left: 75%;}
    .xl-offset-10            { margin-left: 83.333333333333333%;}
    .xl-offset-11            { margin-left: 91.666666666666666%;}
    .xl-offset-12            { margin-left: 100%;}

        .xl-hide {display: none;}
        .xl-fixed {position: fixed;}
        .xl-show {display: none;}
}