/* -------------------------------------
Filename:         custom.css
Description:      Css Global
Author:           Fabiane Almeida
Company:          Bruc Internet
Website:          http://www.xxxxxxxxxx.com.br/


COLORS
Vermelho:   red
Cinza claro:    #eaedef
Cinza Azulado:    #5d8487
Azul:           #2d75b8;


INDEX
1.FONTS & BODY: 21
2.HEADER:     34
3.FOOTER:     40
4.SIDEBAR:    46
5.INDEX:    52
-------------------------------------*/


/* -------------------------------------------*/
/* >>>>>>>>>>>>> FONTS & BODY<<<<<<<<<<<<<<<<-*/
/* -------------------------------------------*/
@font-face {
    font-family: "lato-regular";
    src: url("../fonts/lato-regular-webfont.eot") format("eot"),url("../fonts/lato-regular-webfont.woff") format("woff"),url("../fonts/lato-regular-webfont.ttf") format("truetype");
}

@font-face {
    font-family: "lato-light";
    src: url("../fonts/lato-light-webfont.eot") format("eot"),url("../fonts/lato-light-webfont.woff") format("woff"),url("../fonts/lato-light-webfont.ttf") format("truetype");
}

@font-face {
    font-family: "lato-bold";
    src: url("../fonts/lato-bold-webfont.eot") format("eot"),url("../fonts/lato-bold-webfont.woff") format("woff"),url("../fonts/lato-bold-webfont.ttf") format("truetype");
}

@font-face {
    font-family: "Lato-ThinItalic";
    src: url("../fonts/Lato-ThinItalic.ttf") format("truetype");
}

@font-face {
    font-family: "Lato-Italic";
    src: url("../fonts/Lato-Italic.ttf") format("truetype");
}


@font-face {
    font-family: "Lato-LightItalic";
    src: url("../fonts/Lato-LightItalic.ttf") format("truetype");
}


@font-face {
    font-family: "khand-slight";
    src: url("../fonts/Khand-SemiLight.otf");
}

@font-face {
    font-family: "khand-light";
    src: url("../fonts/Khand-Light.otf");
}

@font-face {
    font-family: "khand-xlight";
    src: url("../fonts/Khand-ExtraLight.otf");
}

@font-face {
    font-family: "khand-regular";
    src: url("../fonts/Khand-Regular.otf");
}

@font-face {
    font-family: "khand-sbold";
    src: url("../fonts/Khand-SemiBold.otf");
}

@font-face {
    font-family: "khand-bold";
    src: url("../fonts/Khand-Bold.otf");
}

@font-face {
    font-family: "khand-xbold";
    src: url("../fonts/Khand-ExtraBold.otf");
}

@font-face {
    font-family: "khand-black";
    src: url("../fonts/Khand-Black.otf");
}





/*Marcador de tamanho reponsivo*/
#pointer{width: 20px; height: 20px; background-color: #ccc; z-index: 100; position: fixed; top: 0; text-align: center}

body{background: #fff; font-family:"lato-regular" !important; font-size: 10px; font-smooth: always; -webkit-font-smoothing : antialiased;}




input[type="radio"] { border:none!important; outline: none;}


h3 {font-size: 1.5rem;}
h4 {font-size: 1.5rem;}
h5 {font-size: 1.4rem;}
h6 {font-size: 1.3rem;}
p, #orcamento label {font-size: 1.4rem; color: #2f2f2f; font-weight: 400;}
.texto ul, .texto  li, .texto  ul li {font-size: 1.4rem; color: #2f2f2f;}
.texto ul {padding-left: 20px;}


.txtRed{color: red !important}
.txtGray{color: gray !important}
.txtWhite{color: #fff !important}

.txtxs {font-size: .8rem !important;}
.txtms {font-size: 1rem !important;}
.txtsm {font-size: 1.2rem !important;}
.txtmd {font-size: 1.4rem !important;}
.txtlg {font-size: 1.5rem !important;}
.txtxl {font-size: 1.6rem !important;}
.txtxxl {font-size: 1.8rem !important;}

strong{font-weight: 700;}

a, a:visited{color:inherit;}
a:active, a:hover{ color:inherit; text-decoration: underline;}



hr{border-bottom: 1px solid #fff;margin: 0 !important}

.txtCenter {text-align: center !important}
.txtRight {text-align: right !important}
.txtLeft {text-align: left !important}
.txtJustificado{text-align: justify;}

.maiuscula {text-transform: uppercase;}
.minuscula {text-transform: lowercase;}

.left{float: left !important;}
.right{float: right !important;}

.none {display: none;}
.db{display: block;}
.oh{overflow: hidden;}
.tbCell{display: table-cell; vertical-align: middle;}

.bd{border: 1px dashed #000;}
.bdw{border: 1px dashed #fff;}

.pTopNone {padding-top: 0 !important;}
.pBotNone {padding-bottom: 0 !important;}

.pTop5 {padding-top: .5rem !important;}
.pBot5 {padding-bottom: .5rem !important;}
.pLeft5 {padding-left: .5rem !important;}
.pRight5 {padding-right: .5rem !important;}
.mTop5 {margin-top: .5rem !important;}
.mBot5 {margin-bottom: .5rem !important;}
.mLeft5 {margin-left: .5rem !important;}
.mRight5 {margin-right: .5rem !important;}

.pTop10 {padding-top: 1rem !important;}
.pBot10 {padding-bottom: 1rem !important;}
.pLeft10 {padding-left: 1rem !important;}
.pRight10 {padding-right: 1rem !important;}
.mTop10 {margin-top: 1rem !important;}
.mBot10 {margin-bottom: 1rem !important;}
.mLeft10 {margin-left: 1rem !important;}
.mRight10 {margin-right: 1rem !important;}

.pTop15 {padding-top: 1.5rem !important;}
.pBot15 {padding-bottom: 1.5rem !important;}
.pLeft15 {padding-left: 1.5rem !important;}
.pRight15 {padding-right: 1.5rem !important;}
.mTop15 {margin-top: 1.5rem !important;}
.mBot15 {margin-bottom: 1.5rem !important;}
.mLeft15 {margin-left: 1.5rem !important;}
.mRight15 {margin-right: 1.5rem !important;}


.mTop20 {margin-top: 2rem !important;}
.mBot20 {margin-bottom: 2rem !important;}
.mLeft20 {margin-left: 2rem !important;}
.mRight20 {margin-right: 2rem !important;}
.pTop20 {padding-top: 2rem !important;}
.pBot20 {padding-bottom: 2rem !important;}
.pLeft20 {padding-left: 2rem !important;}
.pRight20 {padding-right: 2rem !important;}


.mTop30 {margin-top: 3rem !important;}
.mBot30 {margin-bottom: 3rem !important;}
.mLeft30 {margin-left: 3rem !important;}
.mRight30 {margin-right: 3rem !important;}
.pTop30 {padding-top: 3rem !important;}
.pBot30 {padding-bottom: 3rem !important;}
.pLeft30 {padding-left: 3rem !important;}
.pRight30 {padding-right: 3rem !important;}


.mTop40 {margin-top: 4rem !important;}
.mBot40 {margin-bottom: 4rem !important;}
.mLeft40 {margin-left: 4rem !important;}
.mRight40 {margin-right: 4rem !important;}
.pTop40 {padding-top: 4rem !important;}
.pBot40 {padding-bottom: 4rem !important;}
.pLeft40 {padding-left: 4rem !important;}
.pRight40 {padding-right: 4rem !important;}

.mTop50 {margin-top: 5rem !important;}
.mBot50 {margin-bottom: 5rem !important;}
.mLeft50 {margin-left: 5rem !important;}
.mRight50 {margin-right: 5rem !important;}
.pTop50 {padding-top: 5rem !important;}
.pBot50 {padding-bottom: 5rem !important;}
.pLeft50 {padding-left: 5rem !important;}
.pRight50 {padding-right: 5rem !important;}

.mTop60 {margin-top: 6rem !important;}
.mBot60 {margin-bottom: 6rem !important;}
.mLeft60 {margin-left: 6rem !important;}
.mRight60 {margin-right: 6rem !important;}
.pTop60 {padding-top: 6rem !important;}
.pBot60 {padding-bottom: 6rem !important;}
.pLeft60 {padding-left: 6rem !important;}
.pRight60 {padding-right: 6rem !important;}

.pTopMenu {padding-top: 5rem;}





.opacity5 {opacity: 0.5;}
.opacity6 {opacity: 0.6;}
.opacity7 {opacity: 0.7;}

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}
.nolpadding {
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.norpadding{
    padding-right: 0 !important; 
    margin-right: 0 !important;
}
.notpadding{
    padding-top: 0 !important; 
    margin-top: 0 !important;
}

.nobpadding{
    padding-bottom: 0 !important; 
    margin-bottom: 0 !important;
}

.apontador1 {background-color: #6ccf36;}
.apontador2 {background-color: #e64475}
.apontador3 {background-color: #fca600}
.apontador4 {background-color: #24ceff}
.apontador5 {background-color: #dd5f1b}
.apontador6 {background-color: #561bdd}


.pLeftOrcamento
{
    padding-left:6.3rem !important;
}

.khand-xlight
{font-family: 'khand-xlight';}

.khand-light
{font-family: "khand-light";}

.khand-regular
{font-family: "khand-regular";}


em {  font-family: "Lato-Italic"; font-size: 1.34rem;}

.white
{color: white;}


.bgnone
{
    background: none!important;
}

.tooltip-inner 
{
    min-width: auto;
    max-width: 100%; 
    border-radius: 0;
    background-color: #003c86;
}

.tooltip-arrow
{
    position:absolute;
    width:0;
    height:0;
    border-right-color: none;
}

.tooltip.right > .tooltip-arrow 
{
    border-right: 5px solid #003c86;
}

.tooltip.bottom > .tooltip-arrow
{
    border-bottom: 5px solid #003c86;
}



.breadcrumb { font-family: "khand-xlight"; text-transform: uppercase; font-size: 2rem; background: none;     padding: 4px 36px;}

.breadcrumb-item a {
    background-image: -webkit-linear-gradient(transparent 0%, rgba(172, 201, 234, 0.7) 0%);
    background-image: -o-linear-gradient(transparent 0%, rgba(172, 201, 234, 0.7) 0%);
    background-image: linear-gradient(transparent 0%, rgba(172, 201, 234, 0.7) 0%);
    background-position: 0 0.9em;
    background-repeat: no-repeat;
    -webkit-transition: background-position 0.08s ease-out;
    -ms-transition: background-position 0.08s ease-out;
    -moz-transition: background-position 0.08s ease-out;
    -o-transition: background-position 0.08s ease-out;
    transition: background-position 0.08s ease-out;
    text-decoration: none;
    color: #777;
}
.breadcrumb-item.active a {
    background-image: none;
}

.breadcrumb a:hover
{
    background-position: 0;
    background-image: linear-gradient(to bottom, transparent 0, rgba(32,97,173,0.5) 0);
    color: #fff;
}

.breadcrumb>.active {    color: #003c86;}

/*CAROUSEL FADE*/
/*INSERIR A CLASSE .carousel-fade junto com as classes "carousel" e "slide"*/
.carousel-fade .carousel-inner .item {
    opacity: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
    opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-control {
    z-index: 2;
}

/*/CAROUSEL FADE*/
/* ------------------------------------*/
/* >>>>>>>>>>>>> HEADER <<<<<<<<<<<<<<-*/
/* ------------------------------------*/


/* ------------------------------------*/
/* >>>>>>>>>>>>> MAIN <<<<<<<<<<<<<<-*/
/* ------------------------------------*/
/*Map*/
#map_canvas, #map_canvas_centro, #map_canvas_batel {
    width: 100%;
    height: 416px;
    margin-bottom: 0px !important; 
    padding-bottom: 0;
}

/*Marcas - Se NÃO USAR SLIDER, APAGAR*/
.sliderMarcas{overflow: hidden;}
.marcas{min-height: 87px; margin: 40px 0;}
.marcas img{float: left; margin: 25px 15px 10px 10px;}
.marcas img:hover{opacity: .5;}




/* -------------------------------------*/
/* >>>>>>>>>>>>>> MENU <<<<<<<<<<<<<<<<-*/
/* -------------------------------------*/
/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}



/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}



/* -------------------------------------*/
/* >>>>>>>>>> MEDIA QUERIES <<<<<<<<<<<-*/
/* -------------------------------------*/




@media only screen and (min-width : 100px) {
    #pointer{background-color: yellow;}
    #pointer:after{content: "XS"; color: #000}

    .texto a:link, .texto a
    {
        background-image: linear-gradient(to bottom, transparent 0, rgba(172, 201, 234, 0.7) 0);
        background-position: 0 0.6em;
        background-repeat: no-repeat;
        -webkit-transition: background-position 0.08s ease-out;
        -ms-transition: background-position 0.08s ease-out;
        -moz-transition: background-position 0.08s ease-out;
        -o-transition: background-position 0.08s ease-out;
        transition: background-position 0.08s ease-out;
        text-decoration: none;
    }

    .texto a:hover
    {
        background-position: 0;
        background-image: linear-gradient(to bottom, transparent 0, rgba(32,97,173,0.5) 0);
        color: #fff;
    }

    #sobe
    {
        width: 45px; 
        height: 45px; 
        background-image: linear-gradient( to right, #4078b1, #5e8ab7, #6596c7, #76ade5); 
        border-radius: 40px; 
        z-index: 100; 
        position: fixed; 
        bottom: 2rem; 
        right: 2rem; 
        text-align: center; 
        color: #fff; 
        font-size: 3rem;
        padding-top: 0;
        -webkit-box-shadow: 3px 3px 6px 0px rgba(11, 54, 99, 0.64);
        -moz-box-shadow: 3px 3px 6px 0px rgba(11, 54, 99, 0.64);
        box-shadow: 3px 3px 6px 0px rgba(11, 54, 99, 0.64);
    }


    /* Position the content inside the overlay */
    .overlay-content 
    {
        position: relative;
        top: 20%; /* 25% from the top */
        width: 100%; /* 100% width */
        text-align: center; /* Centered text/links */
        margin-top: 10px; /* 30px top margin to avoid conflict with the close button on smaller screens */
    }

    /* The navigation links inside the overlay */
    .overlay a 
    {
        padding: 8px;
        text-decoration: none;
        font-size: 3rem;
        color: #818181;
        display: block; /* Display block instead of inline */
        transition: 0.3s; /* Transition effects on hover (color) */
        font-family: 'khand-light';
        text-transform: uppercase;
    }


    #parte1 
    {
        background-color: #004c82;
        background: url(../img/fundo_parte1.png)  8% 100% fixed!important;;
        color: white;
        height: auto; 
    }

    .mTopParte, .mTopParte3 {margin-top: 12rem;}
    .mBotParte1, .mTopParte3 {margin-bottom: 12rem;}

    .mTopFooter {margin-top: 5rem;}
    .mBotFooter {margin-bottom: 5rem;}

    .mSetaParte1 {margin-top: 5rem; margin-bottom: 5rem;}

    .navbar-default
    {
        background-color: transparent;
        border: none;
    }

    .bdbtm{border-bottom: 10px solid  #205390;}
    .bdbtm-tit{border-bottom: 1px solid  #003c86;}
    .bdbtmnone{border-bottom: none;}

    h1
    { 
        text-transform: uppercase;
        font-size: 4rem!important;
    }

    /*  h2 
    {
      font-size: 4.8rem;
    }*/


    #parte3 h2, #parte5 h2  
    {
        font-size: 4.8rem;
    }

    #parte1 p
    {
        color: white;
        font-size: 1.5rem;
    }


    .pTopParte2
    {
        padding-top: 4rem;
    }

    .pBotParte2
    {
        padding-bottom: 4rem;
    }


    #parte2
    {
        margin-top: 0 !important;
        padding-top: 0!important;
    }

    #parte3 
    {
        background-color: #004c82;
        background: url(../img/fundo_parte3.png) 30% 30% fixed!important;
        position: relative;
        color: white;
        height: auto;
    }

    #img-arafex
    {
        background-color: #004c82;
        background: url(../img/fundo_arafex.png);
        color: white;
        background-size: cover;
        height: 187px;
    }

    #img-catalogo
    {
        background-color: #004c82;
        background: url(../img/fundo_catalogo.png);
        color: white;
        background-size: cover;
        height: 187px;
    }

    #img-comodo
    {
        background-color: #004c82;
        background: url(../img/fundo_cozinha.png);
        color: white;
        background-size: cover;
        height: 187px;
    }

    #img-produto
    {
        background-color: #004c82;
        background: url(../img/fundo_produto.png);
        color: white;
        background-size: cover;
        height: 187px;
    }

    #img-revendas
    {
        background-color: #004c82;
        background: url(../img/fundo_revendas.png);
        color: white;
        background-size: cover;
        height: 187px;
    }

    #img-orcamento
    {
        background-color: #004c82;
        background: url(../img/fundo_orcamento.png);
        color: white;
        background-size: cover;
        height: 187px;
    }

    #img-contato
    {
        background-color: #004c82;
        background: url(../img/fundo_contato.png);
        color: white;
        background-size: cover;
        height: 187px;
    }

    #parte5 
    {
        background-color: #004c82;
        background: url(../img/fundo_parte5.png) 74% 0 fixed!important;
        position: relative;
        color: white;
        height: auto;
    }

    #parte6, .confira-orcamento
    {
        background: url(../img/fundo_parte2.png);
        background-size: cover;
    }



    .catalogo
    {
        position: relative;
        overflow: hidden;
    }

    .catalogo:after 
    {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../img/fundo_parte2.png) 0 0 repeat;
        z-index: -1;
    }


    .empresa
    {
        position: relative;
        overflow: hidden;
    }

    .empresa:after 
    {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../img/fundo_parte2.png) 0 0 repeat;
        z-index: -1;
    }


    footer ul
    {
        padding-left: 0!important;
    }


    footer ul li
    {
        font-size: 1.7rem;
        color: white;
        font-family: 'lato-light';
        padding-left: 0!important;
        padding-bottom: 1.2rem;
    }

    footer li
    {
        list-style: none;
        padding-left: 0!important;
    }



    footer a
    {
        text-decoration:  none;
    }  


    footer a:hover
    {
        text-decoration:  none;
        opacity: 0.5;
    }  


    .image 
    {
        position:relative;
    }
    .image img 
    {
        width:100%;
        vertical-align:top;
    }
    .image:after, .image:before 
    {
        position:absolute;
        opacity:1;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
    }

    .image:after 
    {
        content:'\A';
        width:100%; height:32px;
        bottom:0; left:0;
        background:rgba(0,30,67,0.6);
    }

    .image:before 
    {
        content: attr(data-content);
        width:100%;
        color:#fff;
        z-index:1;
        bottom:0;
        padding: 0 5px;
        text-align:left;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        font-family: 'khand-light';
        font-size: 2.2rem;
        text-transform: lowercase;
    }


    .image-combinacao
    {
        position:relative;
    }

    .image-combinacao img 
    {
        width:100%;
        vertical-align:top;
    }

    .image-combinacao:after, .image-combinacao:before 
    {
        position:absolute;
        opacity:1;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
    }

    .image-combinacao:after 
    {
        content:'\A';
        width:100%;     height: 55px;
        bottom:0; left:0;
        background:rgba(0,30,67,0.6);
    }

    .image-combinacao:before 
    {
        content: attr(data-content);
        width:100%;
        color:#fff;
        z-index:1;
        bottom:0;
        padding: 0 5px;
        text-align:left;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        font-family: 'khand-light';
        font-size: 1.9rem;
        text-transform: uppercase;
    }



    #img-arafex h1, #img-catalogo h1, #img-comodo h1, #img-revendas h1, #img-orcamento h1, #img-contato h1
    {
        position: relative;
        display: inline-block;
        padding: 0 4px 8px 0;
        height: 45px;
        background: #003c86;
        line-height: 23px;
        margin-top: 12.5rem;
        font-family: "khand-xlight";
        text-transform: uppercase;
        right: -37px;
        margin-bottom: 0;
        font-size: 5.3rem!important;
    }

    #img-produto h1
    {
        position: relative;
        display: inline-block;
        padding: 0 4px 8px 0;
        height: 35px;
        background: #003c86;
        line-height: 12px;
        margin-top: 12.5rem;
        font-family: "khand-xlight";
        text-transform: uppercase;
        right: -37px;
        margin-bottom: 0;
        font-size: 3.6rem!important;
    }


    #img-arafex h1::after, #img-catalogo h1::after, #img-comodo h1::after, #img-produto h1::after, #img-revendas h1::after, #img-orcamento h1::after, #img-contato h1::after
    {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        bottom: 0;
        border-top: 46px solid transparent;
        border-left: 20px solid #003c86;
        right: -20px;
    }

    #img-produto h1::after
    {
        border-top: 35px solid transparent;
    }


    #img-arafex h1::before, #img-catalogo h1::before, #img-comodo h1::before, #img-produto h1::before, #img-revendas h1::before, #img-orcamento h1::before, #img-contato h1::before
    {
        content: '';
        width: 0;
        height: 0;
        border-bottom: 46px solid transparent;
        border-right: 20px solid #003c86;
        position: absolute;
        left: -20px;
        top: 0px;
    }

    #img-produto h1::before
    {
        border-bottom: 35px solid transparent;
    }




    #arafex h2, #revendas h2 
    {
        text-transform: uppercase;
        color: #003c86;
        font-size: 16px;
        font-weight: initial;

    }

    #orcamento h2
    {
        color: #003c86;
        font-size: 2.3rem;
        text-transform: uppercase;
        font-family: "khand-light";
    }

    .confira-orcamento h2
    {
        color: #fff;
        font-size: 4.3rem;
        text-transform: uppercase;
        font-family: "khand-light";
    }

    #catalogo h2
    {
        color: #003c86;
        font-size: 2.3rem;
        text-transform: uppercase;
        font-family: "khand-light";
        font-size: 4rem;
    }


    .orcamento-escolhido
    {
        color: #88a5c1!important;
    }

    #catalogo h3
    {
        color: white;
        font-size: 2.3rem;
        text-transform: uppercase;
        font-family: "lato-light";
        font-size: 1.8rem;
    }

    .fundo-azul
    {
        background-color: #003c86;
        padding: 1px 4px 
    }

    .tag
    {
        font-size: 2rem;
    }



    .tag::before 
    {
        content: '\2044';
        font-size: 2rem;
        margin-right: 9px;
    }


    .produto-utilizacao p::before
    {
        content: '';
        border-left: solid 15px #003c86;
        margin-right: 8px;
    }

    .aviso
    {
        border-left: solid 18px #003c86;
        padding-left: 10px;
    }

    .combinacoes
    {
        width:  auto;
        height: auto;
        text-align:center;
        text-transform: uppercase;
    }

    .orcamento-produto, .orcamento-produto-escolhido
    {
        width:  130px;
        height: auto;
        text-align:center;
        /*margin-right: 29px;*/
    }

    .orcamento-produto2
    {
        width:  94px;
        height: auto;
        margin-right: 14px;
        text-align: left;
    }

    .orcamento-produto2 p
    {
        width:  94px;
        height: 47px;
    }

    .orcamento-produto5
    {
        width:  94px;
        height: auto;
        margin-right: 14px;
        text-align: left;
    }

    .orcamento-produto5 p
    {
        width:  94px;
        height: 17px;
    }

    .orcamento-produto p, .orcamento-produto-escolhido p
    {
        height: 34px;
    }


    .orcamento-produto a, .orcamento-produto-escolhido a, .orcamento-produto2 a
    {
        color: #003c86;
        font-family: 'lato-bold'
    }


    .cores
    {
        width:  auto;
        height: auto;
    }

    .combinacoes img 
    {
        border: solid 1px #adadad;
    }

    .orcamento-produto img, .orcamento-produto-escolhido img, .orcamento-produto2 img, .orcamento-produto5 img
    {
        border: solid 1px #bed1e4;
    }

    .orcamento-produto img, .orcamento-produto-escolhido img
    {
        width: 130px;
        height: 134px;
    }

    .orcamento-produto2 img, .orcamento-produto5 img
    {
        width: 94px;
        height: 98px;

    }

    .orcamento-produto img:hover, .orcamento-produto2 img:hover, .orcamento-produto5 img:hover
    {
        border-bottom: solid 4px #003c86;
    }

    .orcamento-produto-escolhido img
    {
        border-bottom: solid 4px #003c86;
    }

    .azul
    {
        color: #003c86;
    }

    .combinacoes-margem
    {
        margin-top: 20px;
    }


    .detalhe-titulo
    {
        border-top: 2px solid #003c86;
        margin: 0 !important;
        width: 61px;
    }

    form select.caixa
    {
        background-image: url(../img/teste.svg);
        background-color: white;
        -webkit-width: none;
        -moz-width: 300px;
        -ms-width: 121;
        width: 121px;
        height: 29px;
        border: none;
        padding-left: 5px;
        font-size: 1.2rem;
        color: #6e99c4;
        -webkit-appearance: none;
        outline: none;

    }

    form input.caixa
    {
        background-image: url(../img/input2.svg);
        background-color: white;
        -webkit-width: none;
        -moz-width: 300px;
        -ms-width: 300;
        width: 300px;
        height: 33px;
        border: none;
        padding-left: 5px;
        padding-right: 20px;
        font-size: 1.2rem;
        color: #6e99c4;
        -webkit-appearance: none;
        outline: none;

    }


    form input.caixa2
    {
        background-image: url(../img/input2.svg);
        background-color: white;
        -webkit-width: none;
        -moz-width: 300px;
        -ms-width: 300;
        width: 300px;
        height: 33px;
        border: none;
        padding-left: 5px;
        padding-right: 20px;
        font-size: 1.2rem;
        color: #6e99c4;
        -webkit-appearance: none;
        outline: none;
    }

    select
    {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: none;

    }

    label
    {
        text-transform: uppercase;
        color:#003c86;
    }

    .form-orcamento label 
    {
        text-transform: uppercase;
        color: #003c86;
        font-size: 16px;
        font-weight: initial;
        border-bottom: solid 1px #003c86;
           
    }
    .form-orcamento .emBloco{
        display: block;
    }
    .form-orcamento .right{
        float:right;
    }
    .hr-discreto
    {
        border-top: 1px solid #a3bed9;
        border-bottom: none;
    }

    .revenda-titulo
    {

        color: #6e99c4;
    }

    .icon-tipo:before 
    {
        content: "\f005";
        font-family: 'FontAwesome';
        position: absolute;
        left: 2px;
        margin-left: 12px;
        color: #6e99c4;
    }

    .icon-localizacao:before 
    {
        content: "\f041";
        font-family: 'FontAwesome';
        position: absolute;
        left: 2px;
        margin-left: 14px;
        color: #6e99c4;
    }

    .icon-telefone:before 
    {
        content: "\f095";
        font-family: 'FontAwesome';
        position: absolute;
        left: 2px;
        margin-left: 14px;
        color: #6e99c4;
    }

    .icon-email:before 
    {
        content: "@";
        font-family: 'lato-bold';
        position: absolute;
        left: 2px;
        margin-left: 14px;
        color: #6e99c4;
    }

    .orcamento-passo1, .orcamento-passo2, .orcamento-passo3, .orcamento-passo4, .orcamento-passo5, .orcamento-passo6
    {
        width: auto;
        height: 100%;
        margin-left: 50px;
    }

    .orcamento-passo1:before 
    {
        content: "1";
        font-family: "lato-regular" !important;
        position: absolute;
        left: 2px;
        margin-left: 14px;
        color: #003c86;
        width: 42px;
        height: 42px;
        border-radius: 42px;
        border: solid 1px #003c86;
        padding-left: 14px;
        padding-top: 7px;
        margin-left: 11px;
        font-size: 20px;
    }

    .orcamento-passo2:before 
    {
        content: "2";
        font-family: "lato-regular" !important;
        position: absolute;
        left: 2px;
        margin-left: 14px;
        color: #003c86;
        width: 42px;
        height: 42px;
        border-radius: 42px;
        border: solid 1px #003c86;
        padding-left: 14px;
        padding-top: 7px;
        margin-left: 11px;
        font-size: 20px;
    }

    .orcamento-passo3:before 
    {
        content: "3";
        font-family: "lato-regular" !important;
        position: absolute;
        left: 2px;
        margin-left: 14px;
        color: #003c86;
        width: 42px;
        height: 42px;
        border-radius: 42px;
        border: solid 1px #003c86;
        padding-left: 14px;
        padding-top: 7px;
        margin-left: 11px;
        font-size: 20px;
    }

    .orcamento-passo4:before 
    {
        content: "4";
        font-family: "lato-regular" !important;
        position: absolute;
        left: 2px;
        margin-left: 14px;
        color: #003c86;
        width: 42px;
        height: 42px;
        border-radius: 42px;
        border: solid 1px #003c86;
        padding-left: 14px;
        padding-top: 7px;
        margin-left: 11px;
        font-size: 20px;
    }

    .orcamento-passo5:before 
    {
        content: "5";
        font-family: "lato-regular" !important;
        position: absolute;
        left: 2px;
        margin-left: 14px;
        color: #003c86;
        width: 42px;
        height: 42px;
        border-radius: 42px;
        border: solid 1px #003c86;
        padding-left: 14px;
        padding-top: 7px;
        margin-left: 11px;
        font-size: 20px;
    }

    .orcamento-passo6:before 
    {
        content: "6";
        font-family: "lato-regular" !important;
        position: absolute;
        left: 2px;
        margin-left: 14px;
        color: #003c86;
        width: 42px;
        height: 42px;
        border-radius: 42px;
        border: solid 1px #003c86;
        padding-left: 14px;
        padding-top: 7px;
        margin-left: 11px;
        font-size: 20px;
    }

    .confira-orcamento table tr td #tabela1
    {width: 33%!important}

    .confira-orcamento table tr td #tabela2
    {width: 30%}


    form textarea 
    {
        resize:none; 
        border: solid 1px #c2d4e6; 
        color: #6e99c4;
        font-size: 1.2rem;
        text-transform: uppercase;
        width: 100%;
    }

    .tamanho-mapa
    {
        width: 100%!important;
        height:200px!important;
        margin-top: 40px;
    }


}

section.page-orcamento {display: none;}
img.imagem-selecionada{border: 3px solid #003c86}
img.img-cor-media {border: 1px solid #003c86}
.cores a img {border: 1px solid #003c86}
.cores a img.selected {border: 2px solid #003c86}
.fancy-img-puxador {cursor: pointer;}


@media only screen and (min-width : 381px) {
    #img-produto h1
    {
        font-size: 5.3rem!important;
    }

    .tag
    {
        font-size: 3.5rem;    
    }
    .tag::before
    {
        content: '\2044';
        font-size: 3.5rem;
        margin-right: 15px;
    }

    #img-produto h1 
    {
        height: 55px;
        line-height: 23px;
        margin-top: 12.5rem;
    }


    #img-produto h1
    {
        position: relative;
        display: inline-block;
        padding: 0 4px 8px 0;
        height: 45px;
        background: #003c86;
        line-height: 23px;
        margin-top: 12.5rem;
        font-family: "khand-xlight";
        text-transform: uppercase;
        right: -37px;
        margin-bottom: 0;
        font-size: 5.3rem!important;
    }


    #img-produto h1::after
    {
        border-top: 46px solid transparent;
    }

    #img-produto h1::before
    {
        border-bottom: 46px solid transparent;
    }

}

/* Extra Small Devices, Phones - MS*/ 
@media only screen and (min-width : 480px) and (max-width: 767px){
    #pointer{background-color: green; content: "MS";}
    #pointer:after{content: "MS";color: #fff}

    h1
    {
        font-size: 4.3rem!important;
    }

    .orcamento-produto, .orcamento-produto-escolhido
    {
        width:  130px;
        height: auto;
        text-align:left;
        /*margin-right: 29px;*/
    }

    form input.caixa
    {
        background-image: url(../img/input.svg);
        background-color: white;
        -webkit-width: none;
        -moz-width: 300px;
        -ms-width: 121;
        width: 457px;
        height: 29px;
        border: none;
        padding-left: 5px;
        padding-right: 20px;
        font-size: 1.2rem;
        text-transform: uppercase;
        color: #6e99c4;
        -webkit-appearance: none;
        outline: none;

    }

    form input.caixa2
    {
        -webkit-width: none;
        -moz-width: 263px;
        -ms-width: 263;
        width: 263px;
        height: 29px;
    }


}


/* Small Devices, Tablets - SM */
@media only screen and (min-width : 768px) {
    #pointer{background-color: purple;}
    #pointer:after{content: "SM";}
    .mTopParte1, .mTopParte3 {margin-top: 14rem;}
    .mBotParte1, .mTopParte3 {margin-bottom: 14rem;}
    .mSetaParte1 {margin-top: 7rem; margin-bottom: 3rem;}

    h1
    {
        font-size: 7rem!important;
    }


    #parte3 h2, #parte5 h2 
    {
        font-size: 5.8rem;
    }

    .image:after 
    {
        height:29%;
    }
    .image:before 
    {
        padding: 7px 20px;
        font-size: 1.8rem;
    }

    .image-combinacao:after 
    {
        height:21%;
    }
    .image-combinacao:before 
    {
        padding: 5px;
    }

    #sobe
    {
        width: 40px; 
        height: 40px; 
        background-image: linear-gradient( to right, #4078b1, #5e8ab7, #6596c7, #76ade5);
        border-radius: 40px; 
        z-index: 100; 
        position: fixed; 
        bottom: 2rem; 
        right: 2rem; 
        text-align: center; 
        color: #fff; 
        font-size: 2.7rem;
    }

    .detalhe
    {
        width: 203px;
        height: 465px;
        z-index: 100;
        position: fixed;
        bottom: 8rem;
        right: 0;
        text-align: center;
        color: #fff;
        font-size: 3rem;
        padding-top: 0;
        right: -63px;
    }

    .detalhe2
    {
        width: 183px;
        height: 437px;
        z-index: 100;
        position: fixed;
        bottom: -4rem;
        left: -100px;
        text-align: center;
        font-size: 3rem;
        padding-top: 0;
    }

    form textarea.caixa {
        width: 457px;
    }
    form input.caixa
    {
        background-image: url(../img/input.svg);
        background-color: white;
        -webkit-width: none;
        -moz-width: 300px;
        -ms-width: 121;
        width: 457px;
        height: 29px;
        border: none;
        padding-left: 5px;
        padding-right: 20px;
        font-size: 1.2rem;
        color: #6e99c4;
        -webkit-appearance: none;
        outline: none;

    }

    form input.caixa2
    {
        -webkit-width: none;
        -moz-width: 263px;
        -ms-width: 263;
        width: 263px;
        height: 29px;
    }
}

/* Medium Devices, Desktops - MD*/
@media only screen and (min-width : 992px) {
    #pointer{background-color: darkblue;}
    #pointer:after{content: "MD";}

    #parte1 
    {
        background-color: #004c82;
        background: url(../img/fundo_parte1.png) 30% 100% fixed!important;
        position: relative;
        color: white;
        height: 100vh;
    }


    .bdbtm{border-bottom: none;}

    /* Position the content inside the overlay */
    .overlay-content 
    {
        top: 25%; /* 25% from the top */
    }

    /* The navigation links inside the overlay */
    .overlay a 
    {
        font-size: 36px;
    }

    #parte3 h2, #parte5 h2 
    {
        font-size: 7rem;
        text-transform: uppercase;
    }

    .catalogo
    {
        position: relative;
        overflow: hidden;
    }

    .catalogo-padding {padding-bottom: 15rem!important;}
    .catalogo:after 
    {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../img/fundo_parte2.png) 0 0 repeat;
        -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
        -webkit-transform: skew(6deg);
        -ms-transform: skew(6deg);
        transform: skew(6deg);
        z-index: -1;
    }


    .empresa
    {
        position: relative;
        overflow: hidden;
    }

    .empresa:after 
    {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../img/fundo_parte2.png) 0 0 repeat;
        -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
        -webkit-transform: skew(-6deg);
        -ms-transform: skew(-6deg);
        transform: skew(-6deg);
        z-index: -1;
    }

    .list-inline>li
    {
        padding-right: 2rem;
        padding-bottom: 0;
    }


    footer a
    {
        padding: 2px 2px;
    }  


    footer a:link
    {

        background-image: linear-gradient(to bottom, transparent 0, rgba(255, 255, 255, 0.2) 0);
        background-position: 0 0.9em;
        background-repeat: no-repeat;
        -webkit-transition: background-position 0.08s ease-out;
        -ms-transition: background-position 0.08s ease-out;
        -moz-transition: background-position 0.08s ease-out;
        -o-transition: background-position 0.08s ease-out;
        transition: background-position 0.08s ease-out;
        text-decoration: none;
    }

    footer  a:hover
    {
        background-position: 0;
        background-image: linear-gradient(to bottom, transparent 0, rgba(255,255,255,1) 0);
        color: #164985;
    }

    .image {
        position:relative;
    }
    .image img {
        width:100%;
        vertical-align:top;
    }
    /*.image:after, .image:before {
        position:absolute;
        opacity:0;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
    }
    .image:after {
        content:'\A';
        width:100%; height:100%;
        top:0; left:0;
        background:rgba(0,30,67,0.6);
    }*/

    .image:after {
    height: 71px;
    }
    .image:before {
        content: attr(data-content);
        width:100%;
        color:#fff;
        z-index:1;
        bottom:0;
        padding: 20px 20px;
        text-align:left;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        font-family: 'khand-light';
        font-size: 2.2rem;
        text-transform: lowercase;
    }
    .image:hover:after, .image:hover:before {
        opacity:1;
    }


    .image-combinacao {
        position:relative;
    }
    .image-combinacao img {
        width:100%;
        vertical-align:top;
    }
    .image-combinacao:after, .image-combinacao:before {
        position:absolute;
        opacity:1;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
    }
    .image-combinacao:after {
        content:'\A';
        width:100%; height:28%;
        bottom:0; left:0;
        background:rgba(0,30,67,0.6);
    }
    .image-combinacao:before {
        content: attr(data-content);
        width:100%;
        color:#fff;
        z-index:1;
        bottom:0;
        padding: 5px;
        text-align:left;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        font-family: 'khand-light';
        font-size: 1.7rem;
        text-transform: uppercase;
    }
    .image-combinacao:hover:after, .image-combinacao:hover:before {
        opacity:1;
    }

    .ajuste-tamanho
    {
        padding-bottom: 42.5rem;
    } 


    #img-arafex h1, #img-catalogo h1, #img-comodo h1, #img-produto h1, #img-revendas h1, #img-orcamento h1, #img-contato h1
    {
        font-size: 60px;
        position: relative;
        display: inline-block;
        padding: 0 4px 8px 0;
        height: 55px;
        background: #003c86;
        line-height: 23px;
        margin-top: 12.5rem;
        font-family: "khand-xlight";
        text-transform: uppercase;
        right: -37px;
        margin-bottom: 0;
        font-size: 7rem!important;
    }
    #img-arafex h1::after, #img-catalogo h1::after, #img-comodo h1::after,#img-produto h1::after, #img-revendas h1::after, #img-orcamento h1::after, #img-contato h1::after
    {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        bottom: 0;
        border-top: 56px solid transparent;
        border-left: 20px solid #003c86;
        right: -20px;
    }

    #img-arafex h1::before, #img-catalogo h1::before, #img-comodo h1::before, #img-produto h1::before, #img-revendas h1::before, #img-orcamento h1::before, #img-contato h1::before
    {
        content: '';
        width: 0;
        height: 0;
        border-bottom: 56px solid transparent;
        border-right: 20px solid #003c86;
        position: absolute;
        left: -20px;
        top: 0px;
    }

    .detalhe
    {
        right: 0;
    }

    .combinacoes-borda
    {
        border-left: 2px solid #003c86;
    }

    .cores
    {
        width:  auto;
        height: auto;
    }


    .orcamento-produto
    {
        margin-right: 25px;
    }

    .borda-teste
    {
        border: solid 1px red;
    }

    .teste-poligono {
        width: 455px;
        height: 587px;
        background: transparent;
        -webkit-clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
        clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
    }


    .tamanho-mapa
    {
        width: 100%!important;
        height:600px!important;
    }

}

/* Large Devices, Wide Screens - LG*/
@media only screen and (min-width : 1200px) {
    #pointer{background-color: black;}
    #pointer:after{  content: "LG";}
    .mTopParte1 {margin-top: 9rem;}
    .mBotParte1 {margin-bottom: 22rem;}

    .pTopParte2
    {
        padding-top: 7rem;
    }

    .pBotParte2
    {
        padding-bottom: 7rem;
    }

    .ajuste-tamanho
    {
        padding-bottom: 45.5rem;
    } 
    .detalhe2
    {
        width: 183px;
        height: 437px;
        z-index: 100;
        position: fixed;
        bottom: -2rem;
        left: -63px;
        text-align: center;
        font-size: 3rem;
        padding-top: 0;
    }

    .orcamento-produto
    {
        margin-right: 50px;
    }

    /*.catalogo-padding {padding-bottom: 6rem!important;}*/

    .teste-poligono {
        width: 652px;
        height: 587px;
        background: transparent;
        -webkit-clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
        clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
    }


}





@media only screen and (max-height : 871px) {

    #parte1
    {
        height: auto;
    }

}

@media only screen and (min-height : 755px) and (max-height : 768px) {

    #parte1
    {
        height: 100vh;
    }

    .mTopParte1
    {
        margin-top: 6rem; 
    }

}



@media only screen and (min-height: 707px){
    #parte1 {
        height: 100vh;
    }
}

@media only screen and (min-height: 900px){
    .mTopParte1 {
        margin-top: 17rem;
    }

    .mSetaParte1 {
        margin-top: 14rem;
    }
}

@media only screen and (min-width : 1600px) {

    h2 
    {
        font-size: 5.8rem;
    }
}


@media only screen and (min-width : 1200px) and (max-width : 1467px) {
    .catalogo:after 
    {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../img/fundo_parte2.png) 0 0 repeat;
        -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
        -webkit-transform: skew(3deg);
        -ms-transform: skew(3deg);
        transform: skew(3deg);
        z-index: -1;
    }

}

/*.catalogo:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(../img/fundo_parte1.png) 0 0 repeat;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}*/







.textoParte2
{
    min-height: 80px;
}


::selection {
    background: #104483;
    color: #FFFFFF;
    text-shadow: 0;
}


button
{
    border: solid 1px #4078b1;
    background: transparent;
    color: #4078b1;
    padding: 7px 6px;
    text-transform: uppercase!important;
    font-size: 1.2rem!important;
}


button:hover
{
    border: solid 1px #4078b1;
    background-color:#4fd8e8;
    background-image: linear-gradient( to right, #4078b1, #5e8ab7, #6596c7, #76ade5);
    color: #fff;
    padding: 7px 6px;
    text-transform: uppercase!important;
    font-size: 1.2rem!important;
    box-shadow: 0px 0px 15px 1px rgba(114, 167, 221, 0.6);
}



#parte3 button, #parte5 button
{
    border: solid 1px #fff;
    background: transparent;
    color: #fff;
    padding: 7px 6px;
    text-transform: uppercase!important;
    font-size: 1.2rem!important;
}


#parte3 button:hover, #parte5 button:hover
{
    border: solid 1px #fff;
    background: rgba(255,255,255,0);
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.54) 54%, rgba(255,255,255,0.60) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(54%, rgba(255,255,255,0.54)), color-stop(100%, rgba(255,255,255,0.60)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.54) 54%, rgba(255,255,255,0.60) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.54) 54%, rgba(255,255,255,0.60) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.54) 54%, rgba(255,255,255,0.60) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.54) 54%, rgba(255,255,255,0.60) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
    color: #fff;
    padding: 7px 6px;
    text-transform: uppercase!important;
    font-size: 1.2rem!important;

    box-shadow: 0px 0px 15px 1px rgba(255, 255, 255, 0.25);
}


@media only screen and (min-width : 1600px) {


    #sobe
    {
        width: 40px; 
        height: 40px; 
        background-color: #205390; 
        border-radius: 40px; 
        z-index: 100; 
        position: fixed; 
        bottom: 5rem; 
        right: 10rem; 
        text-align: center; 
        color: #fff; 
        font-size: 2.7rem;
    }


}



body::-webkit-scrollbar, form .form-inline::-webkit-scrollbar {
    width: 1em;
}

body::-webkit-scrollbar-track, form .form-inline::-webkit-scrollbar {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-webkit-scrollbar-thumb, form .form-inline::-webkit-scrollbar {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}


.pagination>li>a
{
    border:none;
}

.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover
{
    z-index: 3;
    color: #ffffff;
    background-color: #003c86;
    border: none;
    outline: none;
    border-radius: 0;
}