*, *:after, *:before{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

}



object,

embed,

video,

iframe,

iframe['style']{

    max-width: 100%;

    height: auto;

}



.embed-container {

    position: relative;

    padding-bottom: 56.25%;

    height: 0; overflow: hidden;

    max-width: 100%;

}



.embed-container iframe, .embed-container object, .embed-container embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



img{

    max-width: 100%;

    vertical-align: middle;

    margin: 0;

}



a img {

    border: none;

    margin: 0;

}



ul{

    list-style: none;

}



fieldset{border: 0;}

input,

select,

textarea{padding: 10px; width: 100%;}

input.btn{width: auto; cursor: pointer;}



.container{

    display: block;

    width: 100%;

}



.content{

    display: block;

    margin: 0 auto;

}



.clear{

    clear: both;

}



.fl_right{

    float: right;

}



.fl_left{

    float: left;

}



/***********************************

######## HTML CHARS CONFIG #########

***********************************/

.htmlchars{

    display: block;

    width: 100%;

    padding: 30px;

}



.htmlchars h3{display: block; font-size: 2em; font-weight: 300; margin-bottom: 30px}

.htmlchars h4{display: block; font-size: 1.8em; font-weight: 300; margin-bottom: 30px}

.htmlchars h5{display: block; font-size: 1.6em; font-weight: 300; margin-bottom: 30px}

.htmlchars p{margin-bottom: 20px; font-size: 0.9em; font-weight: 400;}

.htmlchars p:last-of-type{margin: 0;}

.htmlchars iframe{width: 100%; border: none;}

.htmlchars ul{list-style: circle; margin: 20px 30px;}

.htmlchars ol{margin: 20px 30px;}

.htmlchars form{padding: 20px; background: #fbfbfb; margin: 20px 0;}

.htmlchars form label{display: block; margin-bottom: 15px; font-size: 0.9em; text-transform: uppercase;}

.htmlchars form input,

.htmlchars form textarea{display: block; margin-top: 10px;}

.htmlchars a{color: #0E96E5; text-decoration: none;}

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



/*

TRIGGER

Personaliza mensagens do sistema

*/

.trigger{

    display: block;

    width: 100%;

    padding: 15px;

    background: #888;

    font-size: 0.9em;

    color: #fff;

    border: 1px solid #333;

    margin-bottom: 20px;

}



.trigger p{

    margin-top: 8px;

}



.trigger_success{

    background-color: #DFF0D7;

    border-color: #2A552A;

    color: #2A552A;

}



.trigger_info{

    background-color: #D8EDF8;

    border-color: #22526A;

    color: #22526A;

}



.trigger_alert{

    background-color: #FCF8E2;

    border-color: #675129;

    color: #675129;

}



.trigger_error{

    background-color: #F2DEDE;

    border-color: #853432;

    color: #853432;

}



/*DISPLAY MODE*/

.ds_none{display: none;}

.ds_block{display: block;}

.ds_inline{display: inline;}

.ds_inblock{display: inline-block;}



/*MARGIN MODE*/

.m_top{margin-top: 20px;}

.m_bottom{margin-bottom: 20px;}

.m_left{margin-left: 20px;}

.m_right{margin-right: 20px;}



/***********************************

######### CUSTON BUTTONS ###########

***********************************/

.btn{

    display: inline-block;

    cursor: pointer;

    padding: 7px 12px;

    margin-top: 2px;

    background: #888;

    font-size: 0.9em;

    color: #fff;

    text-decoration: none;

    text-align: center;

    border: none;

    border-radius: 3px;

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    text-shadow: 1px 1px #555;

}



.btn:hover{

    background: #555;

    text-decoration: none;

}



.btn_blue{

    background-color: #0E96E5;

    text-shadow: 1px 1px #096397;

}

.btn_blue:hover{background-color: #096397;}



.btn_green{

    background-color: #00B494;

    text-shadow: 1px 1px #008068;

}

.btn_green:hover{background-color: #008068;}



.btn_yellow{

    background-color: #FAAD50;

    text-shadow: 1px 1px #CC8D41;

}

.btn_yellow:hover{background-color: #CC8D41;}



.btn_red{

    background-color: #F45563;

    text-shadow: 1px 1px #C54550;

}

.btn_red:hover{background-color: #C54550;}





/***********************************

########## FONT COLOR  #############

***********************************/

.font_black{color: black !important;}

.font_white{color: white !important;}

.font_yellow{color: #FAAD50 !important;}

.font_green{color: #00B494 !important;}

.font_blue{color: #0E96E5 !important;}

.font_red{color: #C54550 !important;}

.font_purple{color: #b78fd3 !important;}

.font_vintage{color: #7eb1bc !important;}



/***********************************

############ BOX MODEL #############

***********************************/

.box{

    display: inline-block;

    width: 100%;

    vertical-align: top;

}



.box:before{

    clear: both;

}



.box1{width: 100%; margin: 15px 0 15px 0;}

.box2{width: 49%; margin: 1% 2% 1% 0;}

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

.box3{width: 32%; margin: 1% 2% 1% 0;}

.box3:nth-of-type(3n+0){margin-right: 0;}

.box4{width: 23.5%; margin: 1% 2% 1% 0;}

.box4:nth-of-type(4n+0){margin-right: 0;}

.box5{width: 18.4%; margin: 1% 2% 1% 0;}

.box5:nth-of-type(5n+0){margin-right: 0;}



.calltoaction {

    background-color: #4CAF50;

    border: none;

    color: white !important;

    padding: 20px;

    width: 100%;

    text-align: center;

    text-decoration: none !important;

    display: inline-block;

    font-size: 1.4em;

    font-weight: bold;

    border-radius: 4px;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    text-shadow: 1px 1px 0 #000;

    -webkit-transition-duration: 0.2s; /* Safari */

    transition-duration: 0.2s;

    cursor: pointer;

    box-shadow: 1px 1px 3px 1px #ccc;

    -moz-box-shadow: 1px 1px 3px 1px #ccc;

    -webkit-box-shadow: 1px 1px 3px 1px #ccc;

}



.calltoaction:hover {

    background-color: #55C25C; /* Green */

    color: white;

}



.maintenance{
    
    position: fixed;
    
    top: 0;
    
    left: 0;
    
    z-index: 9999;
    
    width: 100%;

    padding: 5px;
    
    font-size: 0.9em;

    text-align: center;

    text-transform: uppercase;

    font-weight: 600;

    background: rgba(177, 177, 177, 0.5);

    color: #fff;

    text-shadow: 1px 1px 0px #868686;

}



@media (max-width: 30em){

    .box2,

    .box3,

    .box4,

    .box5{width: 100%; margin: 15px 0 15px 0 !important;}

}



@media (min-width: 30em) and (max-width: 48em){

    .box2,

    .box3,

    .box4,

    .box5{width: 49%; margin: 1% 2% 1% 0 !important;}

    .box2:nth-of-type(2n+0),

    .box3:nth-of-type(2n+0),

    .box4:nth-of-type(2n+0),

    .box5:nth-of-type(2n+0){margin-right: 0 !important;}

}



@media (min-width: 48em) and (max-width: 64em){

    .box3,

    .box4,

    .box5{width: 32%; margin: 1% 2% 1% 0 !important;}

    .box3:nth-of-type(3n+0),

    .box4:nth-of-type(3n+0),

    .box5:nth-of-type(3n+0){margin-right: 0 !important;}

}



@media (min-width: 64em) and (max-width: 80em){

    .box4,

    .box5{width: 22.75%; margin: 1% 2% 1% 0 !important;}

    .box4:nth-of-type(4n+0),

    .box5:nth-of-type(4n+0){margin-right: 0 !important;}

}