h1{font-size: 1.4em; font-weight: 700; font-family: 'Gotham Bold'}
h2{font-size: 1.2em; font-weight: 400; font-family: 'Gotham Bold'}
h3{font-size: 1.1em; font-weight: 300; font-family: 'Gotham Bold'}
p{font-family: 'Gotham Light'; line-height: 1.3em;}

button{border-radius: 50px; height: 43px !important; line-height: 30px; border: 0; margin-top: 10px; font-family: 'Gotham Book'; font-size: 1.15em; cursor: pointer}

/***********************************
############ CONTAINER #############
***********************************/
.content{float: left; width: 92%; margin: 0 4%; padding: 10px 0; position: relative;}


/***********************************
############## COLORS ##############
***********************************/
.bg_button_color_primary{background-color: #682f8b !important; color: #fff !important;}
.bg_button_color_primary:hover{background-color: #49116e !important;}
.bg_button_color_secondary{background-color: #49116e !important; color: #fff !important; }
.bg_button_color_secondary:hover{background-color: #682f8b !important; }
.bg_button_color_light{background-color: #f2f2f2 !important; color: #fff !important; }
.bg_button_color_light:hover{background-color: #fff !important; }
.bg_button_color_purple{background-color: #9575cd !important; color: #fff !important;}
.bg_button_color_purple:hover{background-color: #7d67c1 !important;}

.bg_color_primary{background-color: #682f8b !important; color: #fff !important;}
.bg_color_secondary{background-color: #49116e !important; color: #fff !important; }
.bg_color_light{background-color: #f2f2f2 !important; color: #808080 !important; }
.bg_color_purple{background-color: #9575cd !important; color: #fff !important;}

.color_primary{color: #682f8b !important; }
.color_secondary{color: #49116e !important; }
.color_light{color: #f2f2f2 !important; }
.color_purple{color: #9575cd !important;}
.color_white{color: #fff !important;}
.color_gray{color: #999 !important;}

.bg_gradient_purple{
    background-image: url('../img/bg-destaque.png'), linear-gradient(#682f8b, #49116e); /* W3C */
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% auto;
}

.border_color_primary{border-color: #682f8b !important;}


/***********************************
############### MENU ###############
***********************************/
.main_nav_categories_container{display: none; z-index: 97; position: absolute;}
.main_nav_categories_box{ width: 100%; height: 100%; overflow: hidden; z-index: 100; position: fixed; top: 0; left: 0;  z-index: 100; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;}
.main_nav_categories_bg{width: 100%; position: absolute; height: 100%; background: rgba(0,0,0,0.3);z-index: 1;}
.main_nav_categories{position: fixed; width: 70%; font-size: 1.05em; max-width: 350px; height: 100%; top: 0; right: -100%; background: #f2f2f2;  z-index: 2; box-shadow: 1px 2px 7px rgba(0,0,0,0.3)}
.main_nav_categories_header{width: 100%; float: left; padding: 12px 20px;}
.main_nav_categories_header img{max-width: 90px; margin-top: 3px;}
.main_nav_categories_header .categories_action{float: left; margin: 5px 10px 0 0; font-size: 1.25em; color: #666;}
.main_nav_categories_title{width: 100%; float: left; padding: 15px 20px 5px 20px; color: #999;}
.main_nav_categories_title p{float: left; text-transform: uppercase; color: #333; font-weight: 600; font-size: 1.05em}
.main_nav_categories_title i{ float: left; margin-right: 10px;}
.main_nav_categories{padding-top: 20px;}
.main_nav_categories_item, .main_nav_categories_item_small{ font-size: 1.3em; float: left; width: 100%; position: relative; text-align: center;}
.main_nav_categories_item > a{font-family: 'Gotham Book' , sans-serif !important; width: 100%; float: left; color: #333; display: block; padding: 15px 20px;}
.main_nav_categories_item:hover,
.main_nav_categories_item > a:hover, .main_nav_categories_item > a:active, .main_nav_categories_item a.active{color: #682f8b;}
.main_nav_categories_item_small{ width: 100%; float: left; color: #333; padding: 5px 20px 5px 20px;}
.main_nav_categories_item_small > a{ width: 100%; float: left; color: #333; display: block;}
.main_nav_categories_item_small > a:hover{float: left; color: #333; }
.main_nav_categories_item_left{font-size: 1.4em; float: left;}
.main_nav_categories_item_left > a{float: left; padding: 10px; width: 45px; text-align: center; margin: 10px 15px 20px 0; color: #666; border: 1px solid #999; border-radius: 5px;}
.main_nav_categories_item_left > a:hover{color: #333;}
.main_nav_action{position: absolute; left: -30px; top: 15px; color: #fff; font-size: 1.8em !important; cursor: pointer;}

.main_nav_categories_sub{width: 100%; padding: 12px 10px; background: #EDEDED; float: left;}
.main_nav_categories_sub_item{float: left; width: 100%;}
.main_nav_categories_sub_item > a{float: left; width: 100%; padding: 15px; text-transform: uppercase; text-decoration: none; color: #203A82;} 
.main_nav_categories_sub_item > a:hover{background: #E0E0E0;}
.nav_category_display{display: block}


/***********************************
############# HEADER ###############
***********************************/
.main_header{width: 100%; float: left; background: #fff; height: 90px; text-align: center;}
.main_header_logo{max-height: 50px; margin-top: 10px;}
.main_header_nav{ position: absolute; top: 35px; right: 0; color: #682f8b; font-size: 1.65em !important; cursor: pointer}
.main_header_nav_action{ display: none; position: fixed; top: 20px; right: 20px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; color: #682f8b; background: #fff; padding: 10px; font-size: 1.4em !important; cursor: pointer; z-index: 2; box-shadow: 1px 1px 2px rgba(0,0,0,0.1);}



/***********************************
############## HOME ################
***********************************/
.main_section{width: 100%; float: left; padding: 20px 0; text-align: center;}
.main_section h1{text-transform: uppercase; font-size: 1.6em; margin: 15px; letter-spacing: -1px;}
.main_section h2{font-size: 1.8em; margin-bottom: 10px; letter-spacing: -1px;}
.main_section p{font-size: 1.1em;}
.main_section_content{width: 100%; float: left;}
.main_section_slide{width: 100%; float: left; margin-bottom: 15px;}
.main_section_slide ul{margin-top: 15px;}
.main_section_slide li{text-align: left; margin-bottom: 15px;}
.main_section_slide li p{font-size: 1.25em;}
.main_section_slide .marker{width: 20%; max-width: 30px; float: left;}
.main_section_slide .li_content{width: 80%; float: left; padding-left: 10px;}

/*DESTAQUE*/
.main_section_destaque_slide{width: 100%; float: left; margin-bottom: 15px;}
.main_section_destaque_content{width: 100%; float: left;}
.main_section_destaque_content h1{font-size: 1.8em; margin-bottom: 10px;}
.main_section_destaque_content p{font-size: 1.1em;}

/*RECURSOS*/
.main_section_recursos_img, .main_section_recursos_content{width: 100%; float: left;}
.main_section_recursos img{margin-bottom: 15px;}
.main_section_recursos p{font-size: 1.3em; color: #666;}

/*APP PASSAGEIRO*/
.main_item_passageiro_img{width: 100%; float: left;}
.main_item_passageiro_list{width: 100%; float: left;}

/*APP MOTORISTA*/
.main_item_motorista_img{width: 100%; float: left;}
.main_item_motorista_list{width: 100%; float: left;}

/*QUEM CONFIA*/
.main_section_confia{background-image: url('../img/bg-section.png'); background-repeat: no-repeat; background-position: center; background-size: cover;}
.main_section_confia p{font-family: 'Gotham Book Italic'; font-size: 1.3em;}
.main_section_confia i{background: #fff; font-size: 1.3em; color: #682f8b; width: 40px; height: 40px; border-radius: 40px; text-align: center; line-height: 40px; margin-right: 5px;}

/*FLUXO DE TRABALHO*/
.main_fluxo_nav .btn{display: inline-block; height: 42px; padding: 15px 20px !important; background: none; cursor: pointer; font-size: 1.2em; font-family: 'Gotham Book'; color: #fff; border-radius: 50px; margin: 5px 5px; border: 1px solid #fff; }
.main_fluxo_nav .btn:hover, .main_fluxo_nav .btn:active, .main_fluxo_nav .btn.active{background-color: #fff; color: #682f8b; border-color:#fff; }
.main_tab_fluxo_content li{width: 220px; padding: 10px; margin: 20px 5px 10px 5px; text-align: center; display: inline-block;}
.main_fluxo_box{position: relative; text-align: center;}
.main_fluxo_box .number{width: 27px; height: 27px; line-height: 27px; position: absolute; top: 0; left: 50%; margin-left: -50px; border-radius: 22px; font-family: 'Gotham Bold'; font-size: 1.2em; }
.main_fluxo_box img{width: 112px; height: 112px; border-radius: 112px; border: 3px solid #fff; margin-bottom: 15px;}
.main_fluxo_box h2{font-size: 1.4em; font-family: 'Gotham Book'; font-weight: 300;}


/*DEMONSTRAÇÃO*/
.main_demo_nav .btn{display: inline-block; height: 42px; padding: 15px 70px !important; background: none; cursor: pointer; font-size: 1.2em; font-family: 'Gotham Book'; color: #682f8b; border-radius: 50px; margin: 5px 5px; border: 1px solid #682f8b; }
.main_demo_nav .btn:hover, .main_demo_nav .btn:active, .main_demo_nav .btn.active{background-color: #682f8b; color: #FFF; border-color: #560D0E; border-color:#682f8b; }
.main_demo_box{width: 100%; float: left; padding: 12px; border: 1px solid #682f8b; border-radius: 10px; margin: 10px 0;}
.main_demo_box .title{width: 100%; padding: 10px 0; height: 40px; line-height: 35px; font-family: 'Gotham Medium'; font-size: 1.5em; border-radius: 7px;}
.main_demo_box .button{padding: 0 30px; height: 40px; line-height: 50px !important; border-radius: 40px; font-family: 'Gotham Book'; font-size: 1.25em; margin: 20px 0; display: inline-block;}
.main_demo_box .button:hover{background-color: #49116e;}
.main_demo_box .alin{text-align: left;}

.main_section_demo li{display: inline-block; margin: auto;}

.main_demo_app_box{width: 100%; float: left; margin: 10px 0;}
.main_demo_app_box .title{padding: 0 20px; height: 40px; line-height: 50px; border-radius: 50px; font-family: 'Gotham Medium'; font-size: 1.35em; max-width: 250px; margin: 15px auto;}
.main_demo_app_box li{margin: 10px 5px;}

/*PLANOS*/
.main_box_plano{width: 100%; max-width: 350px; float: left; border-width: 2px; position: relative; border-style: solid; border-color: #e6e6e6; border-radius: 10px; padding: 20px 0; margin: 30px 10px 0 10px; text-align: center;}
.main_box_plano_value{width: 100%; float: left; padding: 10px 20px;}
.main_box_plano_value p, .main_box_plano_value i{color: #4d4d4d;}
.main_box_plano_value i{font-size: 0.9em;}
.main_box_plano_value .price{font-size: 4em; font-family: 'Gotham Bold'; letter-spacing: -2px;}
.main_box_plano_value .price span{font-size: 0.5em;}
.main_box_plano_value .price_desc{font-size: 1.17em; font-family: 'Gotham Medium'}
.main_box_plano_button{height: 40px; line-height: 30px; padding: 10px 35px !important; font-size: 1.2em; border-radius: 40px; text-transform: uppercase; display: inline-block}
.main_box_plano ul{margin-top: 20px; text-align: left;}
.main_box_plano li{height: 50px; color: #808080; width: 100%; font-family: 'Gotham Book'; font-size: 1.1em; line-height: 63px; padding: 0 40px;}
.main_box_plano li img{margin-top: -3px;}
.main_box_plano li:nth-of-type(odd){background-color: #f8f8f8;}
.main_box_plano li.list-none{color: #b3b3b3!important;}
.main_box_plano_best{padding: 7px 0; width: 200px; height: 35px; line-height: 30px; text-transform: uppercase; font-family: 'Gotham Book'; position: absolute; top: -35px; left: 50%; margin-left: -100px; border-radius: 5px;}
.main_box_plano_best .arrow_down{position: absolute; bottom: -7px; left: 50%; margin-left: -7px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #682f8b;}


/*CONTATO*/
.main_section_contact input, .main_section_contact textarea{border-color: #e0e0e0 !important; border-width: 2px !important;}
.main_section_contact button{border-radius: 7px !important;}
.form-load, .form-pedido-load{display:none;}

/***********************************
############### FOOTER #############
***********************************/
.footer_whatsapp{width: 60px; height: 60px; color: #fff; text-align: center; line-height: 87px; font-size: 2.6em; position: fixed; z-index: 10; bottom: 20px; left: 20px; border-radius: 60px; background: #2cd473; transition: all .3s;}
.footer_whatsapp:hover{box-shadow: 1px 1px 15px rgba(0,0,0,0.4);}

.footer_btn_topo{position: fixed; display: none; background: rgba(0,0,0,0.5); color: #FFF; border: none; right: 20px; cursor: pointer; bottom: 20px; width: 40px; height: 35px; font-size: 0.9em; text-transform: uppercase; margin-top: -70px; text-align: center; padding: 10px; border-radius: 50%; z-index: 1000}
.footer_btn_topo:hover{background: rgba(0,0,0,0.6);}

.main_footer{width: 100%; float: left; padding-top: 20px; text-align: center;}
.main_footer li{ margin-right: 10px; display: inline; font-size: 1.2em; text-align: center;}
.main_footer li a{width: 40px; height: 40px; line-height: 52px; background: #fff; color: #682f8b; display: inline-block; border-radius: 50%;}
.main_footer li a i{margin-top: 10px;}
.main_footer li a:hover{color: #FD9230; border-color: #FD9230;}
.main_footer_box{width: 100%; float: left; margin-top: 20px;}
.main_footer_box h2{font-size: 1.45em; margin-bottom: 10px;}
.main_footer_box p{line-height: 1.4em;}

.main_footer_copy{width: 100%; float: left; padding: 10px; margin-top: 20px; text-align: center; font-size: 0.7em; font-family: 'Arial', sans-serif; background-color: #5c2a7f;}



/*480PX BREAKPOINT*/
@media( min-width:30em ){
    /*.main_fluxo li{display: inline-block; float: left;}*/
}


/*600PX BREAKPOINT*/
@media(min-width: 37.5em){
    .main_section h1{font-size: 1.8em;}
    .main_section p{font-size: 1.3em;}

    /*Slide*/
    .main_section_destaque_slide{width: 48%;}
    .main_section_destaque_content{width: 48%; margin-left: 4%; text-align: left;}
    .main_section_destaque_content h1{font-size: 2.7em; margin: 10px 0 10px 0;}
    .main_section_destaque_content p{font-size: 1.2em;}

    /*App passageiro*/
    .main_item_passageiro_img{width: 48%; float: left;}
    .main_item_passageiro_list{width: 48%; float: left;}

    /*App motorista*/
    .main_item_motorista_img{width: 48%; float: left;}
    .main_item_motorista_list{width: 48%; float: left;}
    
    /*Demo*/
    .main_demo_box{width: 48%; margin-right: 4%;}
    .main_demo_box:nth-of-type(2n+0){margin-right: 0;}
    .main_section_demo p{font-size: 1.1em;}
    
    /*Recursos*/
    .main_section_recursos h2{font-size: 2em}
    .main_section_recursos p{font-size: 1.4em}

}   


/*768PX BREAKPOINT*/
@media(min-width:48em){
    /*Header*/
    .main_header{height: 100px;}
    .main_header_logo{max-height: 60px; margin-top: 10px;}
    .main_header_nav{ top: 40px; color: #682f8b; font-size: 1.9em !important;}
    .main_header_nav_action{font-size: 1.55em !important;}

    
    /*Slide destaque*/
    .main_section_destaque_slide{width: 40%;}
    .main_section_destaque_content{width: 56%;}
    .main_section_destaque_content h1{font-size: 2.8em; margin-top: 20px;}
    .main_section_destaque_content p{font-size: 1.3em;}
    .main_section_destaque_content button{width: auto; padding-left: 50px; padding-right: 50px; font-size: 1.4em;}
    
    /*Recursos*/
    .main_section_recursos .content{width: 70%; margin: 0 15%;}
}


/*960PX BREAKPOINT*/
@media( min-width:60em ){
    .main_section{padding: 40px 0}
    .main_section h1{margin-bottom: 30px; margin-top: 0; font-size: 2.4em;}
    
    /*Slide destaque*/
    .main_section_destaque_content h1{font-size: 3.1em; margin-top: 40px;}
    .main_section_destaque_home .content{width: 910px; margin: auto !important; float: none}
    .main_section_destaque_content p{line-height: 1.7em; font-size: 1.5em}
    .main_section_destaque_content button{font-size: 1.6em;}
    
    /*Customize*/
    .main_section_customize h1{margin-bottom: 15px;}
    .main_section_customize p{max-width: 750px; margin: auto; font-size: 1.5em; line-height: 1.6em}
    
    /*Fluxo*/
    .main_tab_fluxo_content li{width: 200px; padding: 5px;}
    
    /*Recursos*/
    .main_section_recursos_img, .main_section_recursos_content{width: 49%; float: left;}
    .main_section_recursos_img{margin-right: 2%;}
    .main_section_recursos_content{text-align: left;}
    .main_section_recursos h2{font-size: 2.2em; margin-top: 50px;}
    .main_section_recursos p{font-size: 1.6em;}
    
    /*App Passageiro*/
    .main_item_passageiro_list{padding-top: 20px;}
    .main_item_passageiro_list h2{font-size: 2em;}
    .main_item_passageiro_list p{font-size: 1.4em !important;}
    .main_section_app_passageiro .content{width: 700px; margin: auto; float: none}
    
    /*App Motorista*/
    .main_item_motorista_list{padding-top: 20px;}
    .main_item_motorista_list h2{font-size: 2em;}
    .main_item_motorista_list p{font-size: 1.4em !important;}
    .main_section_app_motorista .content{width: 700px; margin: auto; float: none}
    
    /*Comece agora*/
    .main_section_comece h1{margin-bottom: 15px;}
    .main_section_comece p{max-width: 600px; margin: auto; font-size: 1.5em; line-height: 1.6em}
    
    /*Demo*/
    .main_section_demo .content{max-width: 80%; margin: 0 10%;}
    .main_demo_box, .main_demo_box:nth-of-type(2n+0){width: 32%; margin-right: 2%;}
    .main_demo_box:nth-of-type(3n+0){margin-right: 0;}
    .main_demo_nav{margin-bottom: 20px;}
    
    /*Depoimentos*/
    .main_section_confia{min-height: 300px;}
    .main_section_confia .content{max-width: 70%; margin: 0 15%;}
    
    /*Clientes*/
    .main_section_clientes .content{max-width: 70%; margin: 0 15%;}
    
    /*Contato*/
    .main_section_contact .content{max-width: 80%; margin: 0 10%;}
    
    /*Footer*/
    .main_footer .content{max-width: 900px; float: none; margin: auto; padding: 20px 0;}
    .main_footer_logo_content{width: 100%; float: left; margin-bottom: 20px;}
    .main_footer_box{width: 32%; margin-right: 2%;}
    .main_footer_box:nth-of-type(3n+0){margin-right: 0;}
}