/* ----
    Projects: Organic - V 4.0.0
    Author: Djalma Martins - Agência Moves
    Author URI: https://www.moves.com.br
 ---- */

/* ---- RESET ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* ---- VARIABLES ---- */

:root {

    /* ---- TYPOGRAPHY ---- */
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700;800&display=swap');
    --font: 'Open Sans', sans-serif;
    --font-small: 0.875em;
    --font-normal: 1em;
    --font-medium: 1.2em;
    --font-large: 1.4em;

    /* -- TYPOGRAPHY WEIGHT -- */
    --weight-light: 300;
    --weight-normal: 400;
    --weight-bold: 700;
    --weight-black: 800;

    /* ---- COLOR STUDIO ---- */
    --color-default-studio: #E32C8D;
    --color-font-studio: #333333;
    --color-background-studio: #F9F9F9;

    /* ---- COLOR ---- */
    --default: #333333;
    --primary: #E32C8D;
    --secondary: #6D0EB1;
    --success: #008745;
    --info: #0078d4;
    --warning: #F5B946;
    --danger: #D90000;
    --white: #FFFFFF;
    --light: #F8F9FA;
    --lightgray: #EEEEEE;
    --dark: #212529;


    /* -- HOVER COLOR -- */
    --hover-default: #444444;
    --hover-primary: #E32C97;
    --hover-secondary: #6D0EBB;
    --hover-success: #00A759;
    --hover-info: #0067b8;
    --hover-warning: #FFD24D;
    --hover-danger: #B30000;
    --hover-white: #F9F9F9;
    --hover-light: #BBBBBB;
    --hover-lightgray: #CCCCCC;
    --hover-dark: #000000;

    /* -- HOVER EFFECTS -- */
    --hover-duration: 0.3s;

    /* -- GRADIENT COLOR -- */
    --gradient-green: linear-gradient(to right, #00A759 0%, #008745 50%, #00A759 100%);
    --gradient-blue: linear-gradient(to right, #0078d4 0%, #0067b8 50%, #0078d4 100%);
    --gradient-red: linear-gradient(to right, #D90000 0%, #B30000 50%, #D90000 100%);
    --gradient-moves: linear-gradient(to right, #6d0eb1 0%, #ed1c94 50%, #6d0eb1 100%);

    /* -- GRADIENT COLOR VARIABLE -- */
    --gradient-moves-link: linear-gradient(to right, #6d0eb1 20%, #ed1c94);
    --gradient-moves-hover: linear-gradient(to right, #6d0eb1 40%, #ed1c94 200%);
    --gradient-moves-sidebar: linear-gradient(to bottom, #6d0eb1 80%, #ed1c94);

    /* ---- RADIUS ---- */
    --radius-normal: 2px;
    --radius-medium: 5px;
    --radius-large: 10px;
    --radius-round: 50%;

    /* ---- Z-INDEX ---- */
    --index-back: -1;
    --index-fold: 2;
    --index-menu: 3;
    --index-modal: 4;
}

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

    .row {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

/* ---- FLEX BOX ---- */
    .flex{
        flex-basis: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-self: flex-start;
    }

    .flex .one{
        flex-basis: 100%;
        padding-left: .2rem;
        padding-right: .2rem;
    }

    .flex .two{
        flex-basis: calc(50% - .4rem);
        padding-left: .2rem;
        padding-right: .2rem;
    }

    .flex .three{
        flex-basis: calc(33.33% - .4rem);;
        padding-left: .2rem;
        padding-right: .2rem;
    }

    .flex .four{
        flex-basis: calc(25% - .4rem);
        padding-left: .2rem;
        padding-right: .2rem;
    }

    .flex .two_box{
        flex-basis: 70%;
        padding-left: .2rem;
        padding-right: .2rem;
    }

    .flex .two_box_sidebar{
        flex-basis: 30%;
        padding-left: .2rem;
        padding-right: .2rem;
    }

/* ---- 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 var(--light) inset;
        -webkit-text-fill-color: var(--dark) !important;
    }

/* ---- ICONS ---- */

    [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;;
    }

/* ---- 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);
    }

/* ---- ALIGN ---- */

    .al-right{
        float: right;
    }
    .al-left{
        float: left;
    }
    .al-top{
        margin-top: 20px;
    }
    .text-lowercase {
        text-transform: lowercase;
    }
    .text-uppercase {
        text-transform: uppercase;
    }
    .text-capitalize {
        text-transform: capitalize;
    }
    .clear{
        clear: both;
    }

/* ----- Code ----- */
    code{
        background-color: var(--light);
        color: var(--primary);
        padding: .2rem .2rem;
        border-radius: 2px;
        overflow:auto;
    }

    pre > code{
        display: block;
        padding: 1rem 1rem;
        overflow:auto;
    }

/* ----- Table ----- */
    table {
        border-collapse: collapse;
        overflow:auto;
    }
    .table{
        overflow-x:auto;
    }

    th, td{
        padding: 1rem .7rem;
        text-align: left;
        border: 1px solid var(--light);
    }


/* ---- GRADIENTS ---- */

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

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

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

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

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

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

    /* ---- PAGINATOR ---- */
    .paginator {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px 0;
    }

    .paginator a, .paginator span {
        display: inline-block;
        padding: 8px 16px;
        border: 1px solid var(--lightgray);
        border-right: 0;
        color: var(--default);
        font-weight: var(--weight-bold);
        text-decoration: none;
        transition-duration: 0.2s;
    }

    .paginator a:first-of-type {
        -webkit-border-radius: var(--radius-normal) 0 0 var(--radius-normal);
        -moz-border-radius: var(--radius-normal) 0 0 var(--radius-normal);
        border-radius: var(--radius-normal) 0 0 var(--radius-normal);
    }

    .paginator a:last-of-type {
        border-right: 1px solid var(--lightgray);
        -webkit-border-radius: 0 var(--radius-normal) var(--radius-normal) 0;
        -moz-border-radius: 0 var(--radius-normal) var(--radius-normal) 0;
        border-radius: 0 var(--radius-normal) var(--radius-normal) 0;
    }

    .paginator a:hover {
        background: var(--gradient-moves);
        background-size: 200%;
        transition-duration: .6s;
        color: var(--light);
    }

    .paginator span {
        background: var(--lightgray);
    }

/* ---- SCROLL ---- */
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        -webkit-border-radius: 0;
    }
    ::-webkit-scrollbar-track-piece {
        background-color: var(--lightgray);
        -webkit-border-radius: 0;
    }
    ::-webkit-scrollbar-thumb:vertical {
        height: 4px;
        background-color: var(--secondary);
        -webkit-border-radius: 0;
    }
    ::-webkit-scrollbar-thumb:horizontal {
        width: 4px;
        background-color: var(--secondary);
        -webkit-border-radius: 0;
    }

/* ---- DEFAULT LOAD ---- */
    .ajax_load {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        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: 8px solid #e3e3e3;
        border-top: 8px solid var(--primary);
        border-radius: 50%;
        margin: auto;
        width: 40px;
        height: 40px;

        -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-bold);
    }

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

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

    .ajax_load_heart {
        display: inline-block;
        position: relative;
        width: 100px;
        height: 100px;
        transform: rotate(45deg);
        transform-origin: 40px 40px;
    }
    .ajax_load_heart div {
        top: 72px;
        left: 72px;
        position: absolute;
        width: 52px;
        height: 52px;
        background: var(--primary);
        animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    .ajax_load_heart div:after,
    .ajax_load_heart div:before {
        content: " ";
        position: absolute;
        display: block;
        width: 52px;
        height: 52px;
        background: var(--primary);
    }
    .ajax_load_heart div:before {
        left: -34px;
        border-radius: 50% 0 0 50%;
    }
    .ajax_load_heart div:after {
        top: -34px;
        border-radius: 50% 50% 0 0;
    }
    @keyframes lds-heart {
        0% {
            transform: scale(0.95);
        }
        5% {
            transform: scale(1.1);
        }
        39% {
            transform: scale(0.85);
        }
        45% {
            transform: scale(1);
        }
        60% {
            transform: scale(0.95);
        }
        100% {
            transform: scale(0.9);
        }
    }

/* ---- DEFAULT LOAD ---- */
    .message {
        color: #ffffff;
        font-size: var(--font-normal);
        font-weight: var(--weight-bold);

        display: block;
        width: 100%;
        padding: 15px;
        border: 2px solid var(--default);
        margin-bottom: var(--area-box);

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

    form .message {
        text-align: center;
    }

    .message.success {
        --color: var(--success);
        color: var(--color);
        border-color: var(--color);
    }

    .message.info {
        --color: var(--info);
        color: var(--color);
        border-color: var(--color);
    }

    .message.warning {
        --color: var(--warning);
        color: var(--color);
        border-color: var(--color);
    }

    .message.error {
        --color: var(--danger);
        color: var(--color);
        border-color: var(--color);
    }

    .message_btn {
        display: inline-block;
        padding: 5px 10px;
        color: #ffffff;
        background-color: var(--color);
        -webkit-border-radius: var(--radius-normal);
        -moz-border-radius: var(--radius-normal);
        border-radius: var(--radius-normal);
        cursor: pointer;
        opacity: 0.8;
        transition-duration: 0.2s;
    }

    .message_btn:hover{
        opacity: 1;
    }

@media (max-width: 80em) {
    .flex .two_box, .flex .two_box_sidebar{
        flex-basis: 100%;
        padding-left: .2rem;
        padding-right: .2rem;
    }
}

@media (max-width: 62em) {

    .flex .two, .flex .three, .flex .four{
        flex-basis: 100%;
        padding-left: .2rem;
        padding-right: .2rem;
    }
}

@media (max-width: 52em) {

}

@media (max-width: 32em) {

}