/***********************************************
*
########  #######  ##    ## ########  ######  
##       ##     ## ###   ##    ##    ##    ## 
##       ##     ## ####  ##    ##    ##       
######   ##     ## ## ## ##    ##     ######  
##       ##     ## ##  ####    ##          ## 
##       ##     ## ##   ###    ##    ##    ## 
##        #######  ##    ##    ##     ######
*
**********************************************/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
*{
    font-family: 'Inter', Arial, Helvetica, sans-serif;
}


/*********************************************************
*
######   #######  ##        #######  ########   ######  
##    ## ##     ## ##       ##     ## ##     ## ##    ## 
##       ##     ## ##       ##     ## ##     ## ##       
##       ##     ## ##       ##     ## ########   ######  
##       ##     ## ##       ##     ## ##   ##         ## 
##    ## ##     ## ##       ##     ## ##    ##  ##    ## 
 ######   #######  ########  #######  ##     ##  ######
*
**********************************************************/
.ColorBackground{
    background-color: #FAFFF3;
}


.ColorB1{
    color: #00A7BA;
}

.ColorP1{
    color: #9A5ACF;
}

.ColorG1{
    color: #76E41E;
}

.ColorG2{
    color: #004850;
}

.ColorO1 {
    color: #F7931A;
}

.ColorB2{
    color: #0047AB;
}


body{
    --color_blue: #00A7BA;
    --color_purple: #9A5ACF;
    --color_green: #76E41E;
    --color_green2: #004850;
    --color_orange: #F7931A;
    --color_background: #FAFFF3;
}

/***************************************************************************
*
########     ###    ######## ######## ######## ########  ##    ##  ######  
##     ##   ## ##      ##       ##    ##       ##     ## ###   ## ##    ## 
##     ##  ##   ##     ##       ##    ##       ##     ## ####  ## ##       
########  ##     ##    ##       ##    ######   ########  ## ## ##  ######  
##        #########    ##       ##    ##       ##   ##   ##  ####       ## 
##        ##     ##    ##       ##    ##       ##    ##  ##   ### ##    ## 
##        ##     ##    ##       ##    ######## ##     ## ##    ##  ######
*
****************************************************************************/

.longText{
    white-space: pre-wrap;
}


/*****************************************************************
*
########  ##    ##    ##     ## ######## ########  ####    ###    
##     ##  ##  ##     ###   ### ##       ##     ##  ##    ## ##   
##     ##   ####      #### #### ##       ##     ##  ##   ##   ##  
########     ##       ## ### ## ######   ##     ##  ##  ##     ## 
##     ##    ##       ##     ## ##       ##     ##  ##  ######### 
##     ##    ##       ##     ## ##       ##     ##  ##  ##     ## 
########     ##       ##     ## ######## ########  #### ##     ##
*
******************************************************************/


@media (max-width: 611px) { 
    .HeaderSection{
        font-weight: bold;
        font-size: 40px;
    }

    .Destak0{
        font-weight: bolder;
        font-size: 40px;
    }

    .Destak1{
        font-weight: bolder;
        font-size: 24px;
    }

    .Destak2{
        font-weight: 600;
        font-size: 18px;
    }

    .Destak3{
        font-weight: bolder;
        font-size: 24px;
    }

    .CardTitle1{
        font-weight: bolder;
        font-size: 28px;
    }

    .CardText1{
        font-weight: 400;
        font-size: 16px;
    }

    .RegularText1{
        font-weight: 600;
        font-size: 18px;
    }

    .NavButton1{
        font-weight: 600;
        font-size: 24px;
    }

    .longText{
        font-weight: 400;
        font-size: 14px;
    }

    .LittleDestak{
        font-weight: bold;
        font-size: 12;
    }

    .planCard li{
        font-weight: bold;
        font-size: 16     px;
    }
}

@media (min-width: 612px) and (max-width:923px){
    .HeaderSection{
        font-weight: bold;
        font-size: 60px;
    }

    .Destak0{
        font-weight: bolder;
        font-size: 50px;
    }

    .Destak1{
        font-weight: bolder;
        font-size: 40px;
    }

    .Destak2{
        font-weight: 600;
        font-size: 26px;
    }

    .Destak3{
        font-weight: bolder;
        font-size: 30px;
    }

    .CardTitle1{
        font-weight: bolder;
        font-size: 28px;
    }

    .CardText1{
        font-weight: 400;
        font-size: 16px;
    }

    .RegularText1{
        font-weight: 600;
        font-size: 22px;
    }

    .NavButton1{
        font-weight: 600;
        font-size: 28px;
    }

    .longText{
        font-weight: 400;
        font-size: 16px;
    }

    .LittleDestak{
        font-weight: bold;
        font-size: 12;
    }

    .planCard li{
        font-weight: bold;
        font-size: 16px;
    }
}

@media (min-width: 924px) and (max-width:1235px){
    .HeaderSection{
        font-weight: bold;
        font-size: 80px;
    }

    .Destak0{
        font-weight: bolder;
        font-size: 60px;
    }

    .Destak1{
        font-weight: bolder;
        font-size: 40px;
    }

    .Destak2{
        font-weight: 600;
        font-size: 26px;
    }

    .Destak3{
        font-weight: bolder;
        font-size: 40px;
    }

    .CardTitle1{
        font-weight: bolder;
        font-size: 28px;
    }

    .CardText1{
        font-weight: 400;
        font-size: 16px;
    }

    .RegularText1{
        font-weight: 600;
        font-size: 24px;
    }

    .NavButton1{
        font-weight: 600;
        font-size: 30px;
    }

    .longText{
        font-weight: 400;
        font-size: 16px;
    }

    .LittleDestak{
        font-weight: bold;
        font-size: 14;
    }

    .planCard li{
        font-weight: bold;
        font-size: 18px;
    }
}


@media (min-width: 1236px){
    .HeaderSection{
        font-weight: bold;
        font-size: 96px;
    }

    .Destak0{
        font-weight: bolder;
        font-size: 70px;
    }

    .Destak1{
        font-weight: bolder;
        font-size: 40px;
    }

    .Destak2{
        font-weight: 600;
        font-size: 32px;
    }

    .Destak3{
        font-weight: bolder;
        font-size: 40px;
    }

    .CardTitle1{
        font-weight: bolder;
        font-size: 28px;
    }

    .CardText1{
        font-weight: 400;
        font-size: 16px;
    }

    .RegularText1{
        font-weight: 600;
        font-size: 24px;
    }

    .NavButton1{
        font-weight: 600;
        font-size: 32px;
    }

    .longText{
        font-weight: 400;
        font-size: 18px;
    }

    .LittleDestak{
        font-weight: bold;
        font-size: 14;
    }

    .planCard li{
        font-weight: bold;
        font-size: 18px;
    }
}

/*******************************
*
 #######  ##       ########  
##     ## ##       ##     ## 
##     ## ##       ##     ## 
##     ## ##       ##     ## 
##     ## ##       ##     ## 
##     ## ##       ##     ## 
 #######  ######## ########
 *
 ******************************/

#header_title{
    font-size: 40px;
    font-weight: bolder;
}
@media (max-width:600px){
    #header_title{
        font-size: 30px;
    }
}

#frm_clientarea{
    font-size: 20px;
}

#frm_clientarea button, #header_client_control_form button{
    font-size: 18px;
    font-weight: bold;
    
}

#footer_contact h1{
    font-size: 14px;
}





/*********************************************************************************************************
**************************                   Padrões                      ********************************
**********************************************************************************************************/

.littleDestak{
    font-size: 1em;
    font-weight: bold;
}

@media(max-width:600px){ /* cell mode*/
    .pageTitle,
    .pageTitle *{
        font-size: 28px;
        font-weight: bolder;
    }

    .pageTitleLong,
    .pageTitleLong *{
        font-size: 12px;
        font-weight: bolder;
    }

    .button_network{
        font-size: 16px;
        font-weight: bolder;
    }
}


@media(min-width:600px){ /* descktop mode*/

    .pageTitle,
    .pageTitle *{
        font-size: 40px;
        font-weight: bolder;
    }

    .pageTitleLong,
    .pageTitleLong *{
        font-size: 24px;
        font-weight: bolder;
    }

    .button_network{
        font-size: 24px;
        font-weight: bolder;
    }
}