/****************************************************
  Author: Diego Ferreira
  URL: inkor.com.br
  Create: 10/03/2022
  Property: Inkor Tintas
****************************************************/

@charset "UTF-8";

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

:U VARS

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

:root {
    --font: 'Baloo Bhai 2', cursive;
    --red-dark: #C5233A;
    --red: #E94752;
    --red-light: #EC6453;
    --orange: #EF7E5D;
    --yellow-dark: #F5A046;
    --yellow: #FAD049;
    --gray-light: #C4C4C4;
    --gray: #343434;
    --white: #ffffff;
    --black: #000000;
    --bold: bold;
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    color: var(--black);
    top: 0 !important;
    overflow-x: hidden !important;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    color: var(--black);
}


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

:D BACKGROUNDS

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

.bg-red-dark {
    background-color: var(--red-dark) !important;
}

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

.bg-red-light {
    background-color: var(--red-light)!important;
}

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

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

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

.bg-yellow-dark {
    background-color: var(--yellow-dark)!important;
}

.bg-colors-default {
    background-image: linear-gradient(to right, var(--red-dark), var(--red-dark)), linear-gradient(to right, var(--red), var(--red)), linear-gradient(to right, var(--red-light), var(--red-light)), linear-gradient(to right, var(--orange), var(--orange)), linear-gradient(to right, var(--yellow-dark), var(--yellow-dark)), linear-gradient(to right, var(--yellow), var(--yellow));
    background-repeat: no-repeat;
    background-position: 0 17%, 20% 33.33%, 40% 66.66%, 60% 84%, 80% 85%, 100% 100%;
    background-size: 16.67%, 16.67%, 16.67%, 16.68%, 16.67%;
}

.bg-gray {
    background-color: var(--gray);
}

.bg-gray-light {
    background-color: var(--gray-light);
}


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

:D COLORS

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

.-white {
    color: var(--white) !important;
}

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

.-gray {
    color: var(--gray);
}

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

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

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

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

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

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

.bold {
    font-weight: var(--bold);
}


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

:D DEFAULTS

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

section {
    margin: 100px 0;
}

*:focus,
.form-control:focus,
textarea:focus,
input:focus {
    outline: none!important;
    box-shadow: none;
}


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

:D HEADER

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

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        display: block !important;
        margin-right: 30px;
    }
    .navbar-dark .navbar-nav .nav-link {
        color: var(--white);
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

.input-search {
    min-width: 190px !important;
    font-size: 12px;
    background-color: var(--white);
    border-left: none;
    border: none;
}

.search .input-group-text {
    background-color: var(--white);
    border: none;
}


/* Mexer amanhã
#menu #menu-kokar .navbar-nav a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 3px;
	bottom: 0;
	left: 0;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

#menu #menu-kokar .navbar-nav .color-red:before {
	background-color: #d80a0a;
}

#menu #menu-kokar .navbar-nav .color-yellow:before {
	background-color: #ffeb00;
}

#menu #menu-kokar .navbar-nav .color-green:before {
	background-color: #00b918;
}

#menu #menu-kokar .navbar-nav .color-blue:before {
	background-color: #00d8ff;
}

#menu #menu-kokar .navbar-nav .color-pink:before {
	background-color: #cd3ff5;
}

#menu #menu-kokar .navbar-nav .color-orange:before {
	background-color: #fd820b;
}

#menu #menu-kokar .navbar-nav a:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}

#menu #menu-kokar .navbar-nav .actived:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}

#menu #menu-kokar .navbar-nav a:hover,
#menu #menu-kokar .navbar-nav a:focus {
	outline: none;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}


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

:c HOME

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

#banner-home {
    margin-bottom: 10px !important;
}

.banner-img {
    background-color: var(--white);
    border-bottom-right-radius: 80px;
    border-top-right-radius: 80px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.banner-img img {
    margin-right: 80px;
    position: relative;
    max-width: 350px;
    height: auto;
    float: right;
}

.banner-item {
    padding-left: 60px;
}

.banner-item h1 {
    font-size: 50px;
    line-height: 50px;
    font-weight: bold;
    color: var(--white)
}

.bt-banner {
    position: relative;
    top: 30px;
    border-radius: 100px;
    padding: 10px 20px;
    background-color: var(--red-dark);
    color: var(--white)
}

.bt-banner:hover {
    background-color: var(--red-dark);
    color: var(--black);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.banner-item h4 {
    font-size: 20px;
    color: var(--white)
}

#linha-produtos {
    margin-top: 10px;
}

.title-page h3 {
    font-weight: 700;
    line-height: 32px;
}

.title-page p {
    font-size: 14px;
    line-height: 16px;
    color: var(--gray);
}

.form-especialista input {
    margin-bottom: 10px;
}

.form-especialista button {
    border: 1px solid var(--white);
    border-radius: 10px;
    background-color: transparent;
    color: var(--white);
    padding: 8px 20px;
    margin-top: 10px;
    transition: background-color 1s;
}

.form-especialista button:hover,
.form-especialista button:focus {
    border: 1px solid var(--red-light);
    border-radius: 10px;
    background-color: var(--red-dark);
    color: var(--white);
    padding: 8px 20px;
    margin-top: 10px;
}

.img-especialista {
    position: relative;
    z-index: 2;
    bottom: 0;
    margin-top: -25%;
}

#simuladores-home a {
    width: 100%;
    border: 1px solid var(--red-dark);
    border-radius: 0 0 10px 10px;
    background-color: var(--red-dark);
    color: var(--white);
    padding: 8px 20px;
    margin-top: 50px;
    transition: background-color 1s;
}

#simuladores-home a:hover,
#simuladores-home a:focus {
    border: 1px solid var(--red-light);
    background-color: var(--red-light);
    color: var(--white);
    padding: 8px 20px;
    margin-top: 10px;
}

#representantes-home .fale {
    border: 1px solid var(--white);
    border-radius: 10px;
    background-color: var(--white);
    color: var(--orange);
    padding: 8px 20px;
    margin-top: 50px;
    transition: background-color 1s;
}

#representantes-home .quero {
    border: 1px solid var(--white);
    border-radius: 10px;
    background-color: var(--red);
    color: var(--white);
    padding: 8px 20px;
    margin-top: 50px;
    transition: background-color 1s;
}


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

;D SOBRE

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

#sobre-page p {
    text-align: justify!important;
    font-size: 14px;
}


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

:Q BLOG

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

.bloco-blog {
    padding: 15px 0;
    border-bottom: 1px solid var(--gray);
}

.btn-blog {
    width: 100%;
    background-color: var(--red);
    color: var(--white);
    padding: 15px 25px 15px 20px;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, var(--red-dark) 25%, var(--red) 25%, var(--red-light) 50%, var(--orange) 50%, var(--yellow-dark) 75%, var(--yellow) 75%) 5;
}

.btn-blog:hover {
    background-color: var(--gray);
    color: var(--white);
}


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

:() PRODUTOS

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

.img-produto {
    position: relative;
    z-index: 2;
    margin-top: -100px
}

.form-calcular button {
    background-color: var(--red);
    color: var(--white);
    padding: 10px 25px 10px 20px;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, var(--red-dark) 25%, var(--red) 25%, var(--red-light) 50%, var(--orange) 50%, var(--yellow-dark) 75%, var(--yellow) 75%) 5;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

.form-calcular button:hover {
    background-color: var(--gray);
    color: var(--white);
}

.input_calculadora {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    background-color: var(--gray-light);
    padding: 3px 5px;
}


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

:U CONTATO

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

.form-contato input,
.form-contato textarea,
.form-contato select {
    background-color: var(--gray-light);
    color: var(--black);
    border-radius: 0;
    border: 0;
}

.form-contato input:focus,
.form-contato textarea:focus,
.form-contato select:focus {
    background-color: var(--gray-light);
}

.form-contato .input-group-text {
    color: var(--black);
    background-color: var(--gray-light);
    border: 0;
    border-radius: 0;
}

.form-contato button {
    background-color: var(--red);
    color: var(--white);
    padding: 15px 25px 15px 20px;
    margin-top: 20px;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, var(--red-dark) 25%, var(--red) 25%, var(--red-light) 50%, var(--orange) 50%, var(--yellow-dark) 75%, var(--yellow) 75%) 5;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

.form-contato button:hover {
    background-color: var(--gray);
    color: var(--white);
}


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

:D FOOTER

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

footer {
    background-color: var(--gray);
}

footer .direitos {
    font-size: 13px;
    line-height: 14px;
}

footer .direitos a:hover {
    color: var(--red)!important;
}


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

:D TRADUTOR

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

#google_translate_element {
    display: none;
}

#google_translate_element {
    display: none;
}

.goog-te-banner-frame {
    display: none !important;
}

.goog-tooltip {
    display: none !important;
    visibility: hidden;
}


/***********************************************************
;D REDES SOCIAIS
***********************************************************/

.float-whatsapp {
    position: fixed;
    width: 60px;
    height: 60px;
    /* bottom: 75px; */
    right: 10px;
    color: #FFF !important;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    z-index: 40;
    cursor: pointer;
}

.float-whatsapp i {
    color: #FFF !important;
}

#btn_instagram {
    color: #ffffff;
    bottom: 145px;
    padding-top: 6px;
    background: #f09433;
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888', GradientType=1);
}

#btn_whatsapp {
    color: #ffffff;
    bottom: 75px;
    padding-top: 6px;
    background: #25d366;
}

#btn_facebook {
    color: #ffffff;
    bottom: 75px;
    padding-top: 6px;
    background: #3b5998;
}

#list-bt-simulador a {
    padding: 15px;
    font-size: 19px;
    font-weight: bold;
    color: #fff;
}


/***********************************************************
;D TAB SIMULADOR
***********************************************************/

#list-bt-simulador .nbra {
    border-radius: 0 0 0 0 !important;
}

#list-bt-simulador .brl {
    border-radius: 10px 0 0 0 !important;
}

#list-bt-simulador .brr {
    border-radius: 0 10px 0 0 !important;
}

#list-bt-simulador .active {
    position: relative;
    margin-top: -10px;
    border-radius: 10px 10px 0 0 !important;
}

@media only screen and (max-width: 769px) {
    .text-center-xs {
        text-align: center !important;
    }
    .pb-xs-2 {
        padding-bottom: 10px;
    }
    .np-xs {
        padding: 0 !important;
    }
    .mb-xs-5 {
        margin-bottom: 30px !important;
    }
    .banner-img img {
        margin-right: 80px;
        position: relative;
        max-width: 350px;
        height: auto;
        float: none;
    }
    #fale-especialista {
        padding-bottom: 40px;
        ;
    }
    .img-produto {
        position: relative;
        z-index: 2;
        margin-top: 0;
    }
}