/*RESET*/
* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/*VARIABLES*/
:root {
    --font-min: 0.65em;
    --font-small: 0.875em;
    --font-normal: 1em;
    --font-medium: 1.5em;
    --font-large: 2em;
    --font-max: 3em;

    --color-default: #555555;
    --color-white: #fbfbfb;
    --color-black: #1d1d1d;
    --color-grey: #b8b8b8;
    --color-green: #36BA9B;
    --color-lime: #99C802;
    --color-blue: #39AED9;
    --color-blue-dark: #2d3691;
    --color-yellow: #FFE200;
    --color-red: #D94352;
    --color-orange: #FFAB00;
    --color-fsphp: #1D2025;

    --weight-light: 300;
    --weight-normal: 400;
    --weight-strong: 600;
    --weight-bold: 700;
    --weight-black: 900;

    --hover-color-default: #888888;
    --hover-color-black: #505050;
    --hover-color-grey: #dcdddd;
    --hover-color-green: #61DDBC;
    --hover-color-lime: #a9de00;
    --hover-color-blue: #66D4F1;
    --hover-color-blue-dark: #1929cc;
    --hover-color-yellow: #FCD277;
    --hover-color-red: #F76C82;
    --hover-color-orange: #FFC95B;
    --hover-duration: 0.3s;

    --gradient-black: linear-gradient(to right, #1d1d1d 0%, #505050 50%, #1d1d1d 100%);
    --gradient-grey-clear: linear-gradient(to right, #f6f6f6 0%, #e6e6e6 50%, #f6f6f6 100%);
    --gradient-green: linear-gradient(to right, #42E695 0%, #3BB2B8 50%, #42E695 100%);
    /*--gradient-lime: linear-gradient(to right, #99c802 0%, #97d500 50%, #85ff00 100%);*/
    --gradient-lime: linear-gradient(to right, #4e6e00 0%, #98d502 50%, #4e6e00 100%);
    --gradient-blue: linear-gradient(to right, #17EAD9 0%, #6078EA 50%, #17EAD9 100%);
    --gradient-blue-dark: linear-gradient(to right, #2d3691 0%, #000325 50%, #2d3691 100%);
    --gradient-red: linear-gradient(to right, #622744 0%, #C53364 50%, #622744 100%);
    --gradient-yellow: linear-gradient(to right, #FFE200 0%, #FEFF00 50%, #FFE200 100%);
    --gradient-orange: linear-gradient(to right, #FFAB00 0%, #FFC95B 50%, #FFAB00 100%);
    --gradient-transp-black: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(255,255,255,0) 100%);

    --radius-normal: 5px;
    --radius-medium: 10px;
    --radius-large: 20px;
    --radius-round: 50%;

    --index-back: -1;
    --index-normal: 0;
    --index-sobre: 1;
    --index-fold: 3;
    --index-menu: 4;
    --index-modal: 5;
}

/*WYSH HTMLCHARS*/
.htmlchars :first-child {
    margin-top: 0;
}
.htmlchars h2, 
.htmlchars h3, 
.htmlchars h4, 
.htmlchars h5 {
    margin: 40px 0 20px 0;
    font-weight: var(--weight-bold);
}
.htmlchars h1 {
    font-size: 2em;
}
.htmlchars h2 {
    font-size: 1.5em;
}
.htmlchars h3 {
    font-size: 1.2em;
}
.htmlchars h4 {
    font-size: 1em;
}
.htmlchars h5 {
    font-size: 0.875em;
    font-style: italic;
}

.htmlchars p {
    margin-top: 25px;
}
.htmlchars ul, 
.htmlchars ol {
    margin: 20px 0 20px 40px;
}
.htmlchars ul {
    list-style: circle;
}

.htmlchars ol li, 
.htmlchars ul li {
    margin-top: 5px;
}

.htmlchars a {
    font-weight: var(--weight-bold);
    text-decoration: none;
}

.htmlchars a:hover {
    text-decoration: underline;
}

.htmlchars img {
    margin-top: 30px;
    -webkit-border-radius: var(--radius-medium);
    -moz-border-radius: var(--radius-medium);
    border-radius: var(--radius-medium);
}

/*ELEMENTS*/
img {
    max-width: 100%;
}

img a {
    border: none;
}

ul {
    list-style: none;
}

p {
    margin: 20px 0 0 0;
}

embed,
video,
iframe,
iframe[style] {
    max-width: 100%;
    height: auto;
}

.embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed iframe, 
.embed object, 
.embed embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.strike {
    text-decoration: line-through;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;
    -webkit-text-fill-color: #555555 !important;
}

/*ICONS NORMALIZE*/
[class^="icon-"]:before,
[class*=" icon-"]:before {
    position: relative !important;
    top: .125em !Important;
    margin-right: .4em !Important;
}

.icon-notext:before {
    top: 0;
    margin-right: 0 !important;;
}

/*DEFAULT LOAD*/
.ajax_load {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--index-modal) * 2);
}

.ajax_load_box {
    margin: auto;
    text-align: center;
    color: #ffffff;
    font-weight: var(--weight-bold);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.ajax_load_box_circle {
    border: 16px solid #e3e3e3;
    border-top: 16px solid var(--hover-color-green);
    border-radius: 50%;
    margin: auto;
    width: 80px;
    height: 80px;

    -webkit-animation: spin 1.2s linear infinite;
    -o-animation: spin 1.2s linear infinite;
    animation: spin 1.2s linear infinite;
}

.ajax_load_box_title {
    margin-top: 15px;
    font-weight: var(--weight-strong);
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*MARGIN*/
.m-top{
    margin-top: 40px;
}
.m-bottom{
    margin-bottom: 40px;
}
.m-left{
    margin-left: 40px;
}
.m-right{
    margin-right: 40px;
}

/*CONTAINER*/
.content,
.container {
    display: block;
    width: 1200px;
    max-width: 90%;
    margin: 0 auto;
}

.content {
    padding: 60px 0;
}

/*GALLERY*/
.g1{
    flex-basis: 100%;
    margin: 5px;
}
.g2{
    flex-basis: calc(50% - 10px);
    margin: 5px;
}
.g3{
    flex-basis: calc(33.33% - 10px);
    margin: 5px;
}
.g4{
    flex-basis: calc(25% - 20px);
    margin: 10px;
}
.g5{
    flex-basis: calc(20% - 10px);
    margin: 5px;
}
.g6{
    flex-basis: calc(16.66% - 10px);
    margin: 5px;
}
.g30-70{
    flex-basis: calc(30% - 20px);
    margin: 10px;
    overflow: hidden;
}
.g70-30{
    flex-basis: calc(70% - 20px);
    margin: 10px;
}

@media(max-width: 52em){
    .g6,
    .g5{
        flex-basis: calc(25% - 10px);
        margin: 5px;
    }
}
@media(max-width: 42em){
    .g6,
    .g5,
    .g4,
    .g3{
        flex-basis: calc(50% - 10px);
        margin: 5px;
    }

    .g30-70,
    .g70-30{
        flex-basis: calc(100% - 10px);
        margin: 5px;
    }
}
@media(max-width: 32em){
    .g6,
    .g5,
    .g4,
    .g3,
    .g2{
        flex-basis: calc(100%);
        margin: 5px;
    }
}

/*BOX*/
.box1{
    flex-basis: 100%;
    overflow: hidden;
}
.box2{
    flex-basis: 50%;
    overflow: hidden;
}
.box3{
    flex-basis: 33.33%;
    overflow: hidden;
}
.box4{
    flex-basis: 25%;
    overflow: hidden;
}
.box5{
    flex-basis: 20%;
    overflow: hidden;
}
.box6{
    flex-basis: 16.66%;
    overflow: hidden;
}
.box30-70{
    flex-basis: 30%;
    overflow: hidden;
}
.box70-30{
    flex-basis: 70%;
    overflow: hidden;
}

@media(max-width: 52em){
    .box6,
    .box5{
        flex-basis: 25%;
    }
}
@media(max-width: 42em){
    .box6,
    .box5,
    .box4,
    .box3{
        flex-basis: 50%;
    }

    .box30-70,
    .box70-30{
        flex-basis: 100%;
    }
}
@media(max-width: 32em){
    .box6,
    .box5,
    .box4,
    .box3,
    .box2{
        flex-basis: 100%;
    }
}

/*BOX*/
.box1{
    flex-basis: 100%;
    overflow: hidden;
}
.box2{
    flex-basis: 50%;
    overflow: hidden;
}
.box3{
    flex-basis: 33.33%;
    overflow: hidden;
}
.box4{
    flex-basis: 25%;
    overflow: hidden;
}
.box5{
    flex-basis: 20%;
    overflow: hidden;
}
.box6{
    flex-basis: 16.66%;
    overflow: hidden;
}
.box30-70{
    flex-basis: 30%;
    overflow: hidden;
}
.box70-30{
    flex-basis: 70%;
    overflow: hidden;
}

@media(max-width: 52em){
    .box6,
    .box5{
        flex-basis: 25%;
    }
}
@media(max-width: 42em){
    .box6,
    .box5,
    .box4,
    .box3{
        flex-basis: 50%;
    }

    .box30-70,
    .box70-30{
        flex-basis: 100%;
    }
}
@media(max-width: 32em){
    .box6,
    .box5,
    .box4,
    .box3,
    .box2{
        flex-basis: 100%;
    }
}

/*BOX*/
.sec100{flex-basis: 100%;}
.sec75{flex-basis: 75%;}
.sec67{flex-basis: 66.67%;}
.sec50{flex-basis: 50%;}
.sec33{flex-basis: 33.33%;}
.sec25{flex-basis: 25%;}
.sec20{flex-basis: 20%;}
.sec16{flex-basis: 16.66%;}
.sec14{flex-basis: 14.28%;}
.sec12{flex-basis: 12.5%;}

.sec20-80{flex-basis: 20%;}
.sec20-80:nth-of-type(2n+0){flex-basis: 80%;}
.sec10-90{flex-basis: 10%;}
.sec10-90:nth-of-type(2n+0){flex-basis: 90%;}
.sec30-70{flex-basis: 30%;}
.sec30-70:nth-of-type(2n+0){flex-basis: 70%;}
.sec40-60{flex-basis: 40%;}
.sec40-60:nth-of-type(2n+0){flex-basis: 60%;}
.sec60-40{flex-basis: 60%;}
.sec60-40:nth-of-type(2n+0){flex-basis: 40%;}
.sec70-30{flex-basis: 70%;}
.sec70-30:nth-of-type(2n+0){flex-basis: 30%;}
.sec80-20{flex-basis: 80%;}
.sec80-20:nth-of-type(2n+0){flex-basis: 20%;}

@media(max-width: 52em){
    .sec75,
    .sec67,
    .sec33,
    .sec25{flex-basis: 50%;}

    .sec20,
    .sec16,
    .sec14,
    .sec12{flex-basis: 25%;}

    .sec20-80{flex-basis: 50%;}
    .sec20-80:nth-of-type(2n+0){flex-basis: 50%;}
    .sec10-90{flex-basis: 20%;}
    .sec10-90:nth-of-type(2n+0){flex-basis: 80%;}
    .sec30-70{flex-basis: 50%;}
    .sec30-70:nth-of-type(2n+0){flex-basis: 50%;}
    .sec40-60{flex-basis: 50%;}
    .sec40-60:nth-of-type(2n+0){flex-basis: 50%;}
    .sec60-40{flex-basis: 50%;}
    .sec60-40:nth-of-type(2n+0){flex-basis: 50%;}
    .sec70-30{flex-basis: 50%;}
    .sec70-30:nth-of-type(2n+0){flex-basis: 50%;}
    .sec80-20{flex-basis: 50%;}
    .sec80-20:nth-of-type(2n+0){flex-basis: 50%;}
}
@media(max-width: 42em){
    .sec67,
    .sec75,
    .sec50,
    .sec33,
    .sec25,
    .sec20,
    .sec16,
    .sec14,
    .sec12{flex-basis: 100%;}
    .sec20-80{flex-basis: 100%;}
    .sec20-80:nth-of-type(2n+0){flex-basis: 100%;}
    .sec10-90{flex-basis: 100%;}
    .sec10-90:nth-of-type(2n+0){flex-basis: 100%;}
    .sec30-70{flex-basis: 100%;}
    .sec30-70:nth-of-type(2n+0){flex-basis: 100%;}
    .sec40-60{flex-basis: 100%;}
    .sec40-60:nth-of-type(2n+0){flex-basis: 100%;}
    .sec60-40{flex-basis: 100%;}
    .sec60-40:nth-of-type(2n+0){flex-basis: 100%;}
    .sec70-30{flex-basis: 100%;}
    .sec70-30:nth-of-type(2n+0){flex-basis: 100%;}
    .sec80-20{flex-basis: 100%;}
    .sec80-20:nth-of-type(2n+0){flex-basis: 100%;}
}

/*COLUMN*/
.column1{
    flex-basis: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}
.column2{
    flex-basis: calc(50% - 10px);
    margin-left: 0;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.column2:nth-of-type(2n+0){
    margin-right: 0;
}
.column3{
    flex-basis: calc(33.33% - 13.5px);
    margin-left: 0;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.column3:nth-child(3n+0){
    margin-right: 0;
}
.column4{
    flex-basis: calc(25% - 11.5px);
    margin-left: 0;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.column4:nth-of-type(4n+0){
    margin-right: 0;
}
.column5{
    flex-basis: calc(20% - 15px);
    margin-left: 0;
    margin-right: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.column5:nth-of-type(5n+0){
    margin-right: 0;
}
.column30-70{
    flex-basis: calc(30%);
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.column30-70:nth-of-type(2n+0){
    flex-basis: calc(70% - 20px);
    margin-right: 0;
    margin-top: 10px;
    margin-bottom: 10px;
}
.column40-60{
    flex-basis: calc(40%);
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.column40-60:nth-of-type(2n+0){
    flex-basis: calc(60% - 20px); 
    margin-right: 0;
    margin-top: 10px;
    margin-bottom: 10px;
}
.column70-30{
    flex-basis: calc(70% - 20px); 
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.column70-30:nth-of-type(2n+0){
    flex-basis: calc(30%);
    margin-right: 0;
    margin-top: 10px;
    margin-bottom: 10px;
}

@media(max-width: 52em){
    /*    .column3,
        .column4,
        .column5{
            flex-basis: calc(50% - 10px);
            margin-right: 20px;
            margin-bottom: 20px;
        }
        .column3:nth-of-type(3n+0),
        .column4:nth-of-type(4n+0),
        .column5:nth-of-type(5n+0){
            flex-basis: calc(50% - 10px);
            margin-right: 20px;
            margin-bottom: 20px;
        }
    
        .column3:nth-of-type(2n+0), 
        .column3:nth-of-type(2n+0), 
        .column4:nth-of-type(2n+0), 
        .column4:nth-of-type(2n+0), 
        .column5:nth-of-type(2n+0){
            margin-right: 0;
        }*/
}

@media(max-width: 42em){
    .column5, 
    .column4{margin-right: 0;}

    .column5, 
    .column4{
        flex-basis: calc(50% - 10px);
        margin-right: 20px;
    }

    .column5:nth-of-type(2n+0),
    .column4:nth-of-type(2n+0){
        margin-right: 0;
    }

    .column5:nth-of-type(5n+0){
        flex-basis: 100%;
    }

    /*    .column30-70,
        .column40-60,
        .column70-30{
            flex-basis: calc(50% - 10px);
            margin-right: 20px;
            margin-bottom: 20px;
        }
        .column30-70:nth-of-type(2n+0),
        .column40-60:nth-of-type(2n+0),
        .column70-30:nth-of-type(2n+0){
            flex-basis: calc(50% - 10px);
            margin-right: 20px;
            margin-bottom: 20px;
        }
        .column30-70:nth-of-type(2n+0), 
        .column40-60:nth-of-type(2n+0), 
        .column70-30:nth-of-type(2n+0){
            margin-right: 0;
        }*/
}

@media(max-width: 32em){
    .column1,
    .column2,
    .column3,
    .column4,
    .column5,
    .column30-70,
    .column40-60,
    .column70-30{
        margin-right: 0;
    }

    .column1,
    .column2,
    .column3,
    .column4,
    .column5,
    .column30-70,
    .column40-60,
    .column70-30,
    .column2:nth-of-type(2n+0),
    .column3:nth-of-type(3n+0),
    .column4:nth-of-type(4n+0),
    .column5:nth-of-type(5n+0),
    .column30-70:nth-of-type(2n+0),
    .column40-60:nth-of-type(2n+0),
    .column70-30:nth-of-type(2n+0){
        flex-basis: 100%;
    }

    /*    .column2,
        .column3,
        .column4,
        .column5,
        .column30-70,
        .column40-60,
        .column70-30,
        .column2:nth-of-type(2n+0),
        .column3:nth-of-type(3n+0),
        .column4:nth-of-type(4n+0),
        .column5:nth-of-type(5n+0),
        .column30-70:nth-of-type(2n+0),
        .column40-60:nth-of-type(2n+0),
        .column70-30:nth-of-type(2n+0){
            flex-basis: 100%;
            margin-right: 0;
            margin-bottom: 20px;
        }*/
}

/*EFFECTS*/
.transition {
    transition-duration: var(--hover-duration);
}

.radius {
    -webkit-border-radius: var(--radius-normal);
    -moz-border-radius: var(--radius-normal);
    border-radius: var(--radius-normal);
}

.radius-medium {
    -webkit-border-radius: var(--radius-medium);
    -moz-border-radius: var(--radius-medium);
    border-radius: var(--radius-medium);
}

.radius-large {
    -webkit-border-radius: var(--radius-large);
    -moz-border-radius: var(--radius-large);
    border-radius: var(--radius-large);
}

.rounded {
    -webkit-border-radius: var(--radius-round);
    -moz-border-radius: var(--radius-round);
    border-radius: var(--radius-round);
}

.box-shadow {
    -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
}

/*COLOR*/
.color-white,
.color-white p{
    color: #fbfbfb !important;
}
.color-black,
.color-black p{
    color: #1D2025 !important;
}
.color-grey,
.color-grey p{
    color: #888888 !important;
}
.color-green,
.color-green p{
    color: var(--color-green) !important;
}
.color-lime,
.color-lime p{
    color: var(--color-lime) !important;
}
.color-blue, 
.color-blue p{
    color: var(--color-blue) !important;
}
.color-blue-dark, 
.color-blue-dark p{
    color: var(--color-blue-dark) !important;
}
.color-yellow,
.color-yellow p{
    color: var(--color-yellow) !important;
}
.color-red, 
.color-red p{
    color: var(--color-red) !important;
}
.color-orange, 
.color-orange p{
    color: var(--color-orange) !important;
}

/*FONT COLOR */

.font-white {
    color: #fbfbfb;
}
.font-default {
    color: var(--color-default);
}

.font-green {
    color: var(--color-green);
}

.font-lime {
    color: var(--color-lime);
}

.font-blue {
    color: var(--color-blue);
}
.font-blue-dark {
    color: var(--color-blue-dark);
}

.font-yellow {
    color: var(--color-yellow);
}

.font-red {
    color: var(--color-red);
}

.font-orange {
    color: var(--color-orange);
}

/*FONT SIZE*/
.font-min{
    font-size: var(--font-min);
}
.font-small{
    font-size: var(--font-small);
}
.font-normal{
    font-size: var(--font-normal);
}
.font-medium{
    font-size: var(--font-medium);
}
.font-large{
    font-size: var(--font-large);
}
.font-max{
    font-size: var(--font-max) !important;
}

/*FONT WEIGHT*/
.weight-normal{
    font-weight: var(--weight-normal);
}
.weight-strong{
    font-weight: var(--weight-strong);
}
.weight-bold{
    font-weight: var(--weight-bold);
}
.weight-black{
    font-weight: var(--weight-black);
}

/*BORDER COLOR*/

.border-white {
    color: #fbfbfb;
}
.border-default { 
    border-color: var(--color-default);
}
.border-black { 
    border-color: var(--color-black);
}
.border-green {
    border-color: var(--color-green);
}
.border-lime {
    border-color: var(--color-lime);
}
.border-blue {
    border-color: var(--color-blue);
}
.border-blue-dark {
    border-color: var(--color-blue-dark);
}
.border-yellow {
    border-color: var(--color-yellow);
}
.border-red {
    border-color: var(--color-red);
}
.border-orange {
    border-color: var(--color-orange);
}

/*BUTTONS*/
.buttons .btn{
    margin-right: 5px;
    margin-bottom: 5px;
}

.btn {
    background-color: transparent;
    display: inline-block;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-white);
    -webkit-border-radius: var(--radius-normal);
    -moz-border-radius: var(--radius-normal);
    border-radius: var(--radius-normal);
    transition-duration: var(--hover-duration);
}

.btn.active {
    background-color: var(--color-green);
}

.btn.active:hover {
    background-color: var(--hover-color-green);
}

.btn-default {
    background-color: var(--color-default);
}

.btn-black {
    background-color: var(--color-black);
}

.btn-black:hover {
    background-color: var(--hover-color-black);
}

.btn-grey {
    background-color: var(--color-grey);
}

.btn-grey:hover {
    background-color: var(--hover-color-grey);
}

.btn-green {
    background-color: var(--color-green);
}

.btn-green:hover {
    background-color: var(--hover-color-green);
}

.btn-lime {
    background-color: var(--color-lime);
}

.btn-lime:hover {
    background-color: var(--hover-color-lime);
}

.btn-blue {
    background-color: var(--color-blue);
}

.btn-blue:hover {
    background-color: var(--hover-color-blue);
}

.btn-blue-dark {
    background-color: var(--color-blue-dark);
}

.btn-blue-dark:hover {
    background-color: var(--hover-color-blue-dark);
}

.btn-red {
    background-color: var(--color-red);
}

.btn-red:hover {
    background-color: var(--hover-color-red);
}

.btn-yellow {
    background-color: var(--color-yellow);
}

.btn-yellow:hover {
    background-color: var(--hover-color-yellow);
}

.btn-orange {
    background-color: var(--color-orange);
}

.btn-orange:hover {
    background-color: var(--hover-color-orange);
}

.btn-small {
    padding: 4px 9px;
}

.btn-medium {
    padding: 8px 12px;
}

.btn-large {
    padding: 12px 20px;
}

.btn-xlarge {
    padding: 20px 60px;
}

.btn-xxlarge {
    padding: 25px 80px;
}

.btn-full {
    width: 100%;
}

.btn-middle {
    width: 50%;
}

@media(max-width: 32em){
    .btn-middle{
        width: 100%;
    }
}

/*CURSOS*/
.cursor-pointer{
    cursor: pointer;
}

/*ALIGN*/
.al-center {
    text-align: center;
}

.al-left {
    text-align: left;
}

.al-right {
    text-align: right;
}

/*DISPLAY*/
.ds-block {
    display: block;
}

.ds-flex {
    display: flex;
    flex-wrap: wrap;
}

.ds-inblock {
    display: inline-block;
}

.ds-inline {
    display: inline;
}

.ds-none {
    display: none;
}

/*FLEX*/
.flex{
    display: flex;
    flex-wrap: wrap;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}
.flex-justify-center{
    justify-content: center;
}
.flex-justify-start{
    justify-content: flex-start;
}
.flex-justify-end{
    justify-content: flex-end;
}
.flex-align-center{
    align-items: center;
}
.flex-align-start{
    align-items: flex-start;
}
.flex-align-end{
    align-items: flex-end;
}
.flex-between{
    justify-content:space-between;
}
.flex-start{
    justify-content: flex-start;
    align-items: flex-start;
}
.flex-end{
    justify-content: flex-end;
    align-items: flex-end;
}

/*SHADOW*/
.shadow{
    -webkit-box-shadow: -4px 6px 5px -1px rgba(0,0,0,0.13);
    -moz-box-shadow: -4px 6px 5px -1px rgba(0,0,0,0.13);
    box-shadow: -4px 6px 5px -1px rgba(0,0,0,0.13);
}

/*BACKGROUND SUB*/
.background-dark,
.background-clear{
    position: relative;
}
.background-dark section,
.background-clear section{
    position: relative;
    z-index: 1;
}
.background-dark:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
}
.background-clear:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.2);
}

/*BACKGROUND*/
.background{
    transition-duration: 0.5s;
}

.background-default {
    background: var(--color-default);
}

.background-white {
    background: #fff;
}
.background-black {
    background: var(--color-black);
}

.background-grey-clear {
    background: #f7f7f7;
}

.background-green {
    background: var(--color-green);
}

.background-lime {
    background: var(--color-lime);
}

.background-blue {
    background: var(--color-blue);
}

.background-blue-dark {
    background: var(--color-blue-dark);
}

.background-yellow {
    background: var(--color-yellow);
}

.background-red {
    background: var(--color-red);
}

.background-orange {
    background: var(--color-orange);
}

.background-default.hover:hover {
    background: var(--hover-color-default);
}

.background-black.hover:hover {
    background: var(--hover-color-black);
}

.background-green.hover:hover {
    background: var(--hover-color-green);
}

.background-blue.hover:hover {
    background: var(--hover-color-blue);
}

.background-blue-dark.hover:hover {
    background: var(--hover-color-blue-dark);
}

.background-yellow.hover:hover {
    background: var(--hover-color-yellow);
}

.background-red.hover:hover {
    background: var(--hover-color-red);
}

.background-orange.hover:hover {
    background: var(--hover-color-orange);
}

/*GRADIENTS*/
.gradient {
    background-size: 200% auto;
    transition-duration: 0.5s;
}

.gradient-black {
    background-image: var(--gradient-black);
}

.gradient-green {
    background-image: var(--gradient-green);
}

.gradient-grey-clear {
    background-image: var(--gradient-grey-clear);
}

.gradient-lime {
    background-image: var(--gradient-lime);
}

.gradient-blue {
    background-image: var(--gradient-blue);
}

.gradient-blue-dark {
    background-image: var(--gradient-blue-dark);
}

.gradient-yellow {
    background-image: var(--gradient-yellow);
    color: var(--color-black);
}

.gradient-red {
    background-image: var(--gradient-red);
}

.gradient-orange {
    background-image: var(--gradient-orange);
}

.gradient-hover:hover {
    background-position: right center;
}

/*.gradient,
.gradient a{
    color: var(--color-white);
}

.gradient.gradient-yellow,
.gradient.gradient-yellow a{
    color: var(--color-black);
}*/

[class*="background-"],
[class*="background-"] p,
[class*="background-"] h1,
[class*="background-"] h2,
[class*="background-"] h3,
[class*="background-"] h4,
[class*="background-"] a,
[class*="gradient-"],
[class*="gradient-"] p,
[class*="gradient-"] h1,
[class*="gradient-"] h2,
[class*="gradient-"] h3,
[class*="gradient-"] h4,
[class*="gradient-"] a{
    color: var(--color-white);
}
[class*="background-"] a:hover,
[class*="gradient-"] a:hover{
    color: rgba(255,255,255,0.5);
}

[class*="gradient-yellow"],
[class*="gradient-yellow"] p,
[class*="gradient-yellow"] h1,
[class*="gradient-yellow"] h2,
[class*="gradient-yellow"] h3,
[class*="gradient-yellow"] h4,
[class*="gradient-yellow"] a:not(.btn),
[class*="gradient-grey-clear"],
[class*="gradient-grey-clear"] p,
[class*="gradient-grey-clear"] h1,
[class*="gradient-grey-clear"] h2,
[class*="gradient-grey-clear"] h3,
[class*="gradient-grey-clear"] h4,
[class*="gradient-grey-clear"] a:not(.btn),
[class*="background-yellow"],
[class*="background-yellow"] p,
[class*="background-yellow"] h1,
[class*="background-yellow"] h2,
[class*="background-yellow"] h3,
[class*="background-yellow"] h4,
[class*="background-yellow"] a:not(.btn),
[class*="background-grey-clear"],
[class*="background-grey-clear"] p,
[class*="background-grey-clear"] h1,
[class*="background-grey-clear"] h2,
[class*="background-grey-clear"] h3,
[class*="background-grey-clear"] h4,
[class*="background-grey-clear"] a:not(.btn),
[class*="background-white"],
[class*="background-white"] p,
[class*="background-white"] h1,
[class*="background-white"] h2,
[class*="background-white"] h3,
[class*="background-white"] h4,
[class*="background-white"] a:not(.btn){
    color: var(--color-default);
}

[class*="background-white"] a:hover:not(.btn),
[class*="background-yellow"] a:hover:not(.btn),
[class*="background-grey-clear"] a:hover:not(.btn),
[class*="gradient-yellow"] a:hover:not(.btn),
[class*="gradient-grey-clear"] a:hover:not(.btn){
    color: rgba(0,0,0,0.5);
}

/*ROTATION*/
.rotation {
    transform: rotate(-15deg);
    position:relative;

    /* CÓDIGO PARA CHAMAR A ANIMAÇÃO */
    -webkit-animation: rotation 1s linear alternate 3;
    -moz-animation: rotation 1s linear infinite;
    -ms-animation: rotation 1s linear infinite;
    -o-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

/* KEY FRAMES PARA FAZER OS GIROS */
@-webkit-keyframes rotation {
    0% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); }
    50% { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); }
    100% { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }
}
@-moz-keyframes rotation {
    0% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); }
    50% { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); }
    100% { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }
}
@-ms-keyframes rotation {
    0% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); }
    50% { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); }
    100% { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }
}
@-o-keyframes rotation {
    0% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); }
    50% { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); }
    100% { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }
}
@keyframes rotation {
    0% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); }
    50% { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); }
    100% { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }
}

/*WHATSAPP*/
@keyframes whatsapp {
    0%   {width: 60px;}
    100% {width: 80px;}
}

/*WHATSAPP SUPORTE*/
.whatsapp-support{
    position: fixed;
    width: 60px;
    left: 20px;
    bottom: 60px;
    z-index: 3;
}
.whatsapp-support:hover{
    width: 80px;
    animation-name: whatsapp;
    animation-duration: 0.5s;
}

/*EFECTS*/
/*.effect-up,
.effect-zoom {
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 0;
}

.effect-up:hover {
    transform: translateY(-0.7em);
    -moz-transform: translateY(-0.7em);
    -webkit-transform: translateY(-0.7em);
    z-index: 1;
}
.effect-zoom:hover{
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    z-index: 1;
}*/
/*.effect-bounce-in {
    transform: perspective(1px) translateZ(0);
    -webkit-transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.5s;
    z-index: 0;
}
.effect-bounce-in:hover{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    z-index: 1;
}*/
/*.effect-bounce-out {
    transform: perspective(1px) translateZ(0);
    -webkit-transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    z-index: 0;
}
.effect-bounce-out:hover{
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    z-index: 1;
}*/

/*.effect-background-image-zoom {
    overflow: hidden;
}

.effect-background-image-zoom:hover:before,
.effect-background-image-zoom:hover:after{
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}*/

/*.effect-image-zoom {
    overflow: hidden;
}

.effect-image-zoom:hover img {
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}*/

/*.effect-image-zoom-loop {
    overflow: hidden;
}

.effect-image-zoom-loop:hover img {
     Aqui declaramos nossa animação inline 
    animation: image-zoom-loop 3s linear infinite;
}

 Aqui definimos a nossa animação com o nome "rotate" 
@keyframes image-zoom-loop {
    from {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50%{
        -moz-transform: scale(1.3);
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    to {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}*/