@import "_normalize";
@import "_grid";

/* HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

@mobile: 600px;
@desktop: 1024px;
@ipadPortrait: 768px;
@afterIpadPortrait: 767px;

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

@brand-color: #1b3e63;
@brand-alt-color: #99cccc;

@ff: 'Raleway', sans-serif;


*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

.outer-center{float: left;left: 50%;position: relative;}
.inner-center{float: left;left: -50%;position: relative;}

body{
    background-color: #fff;
    font-family: @ff;
    color: @brand-color;
}

a{
    text-decoration: none;
    transition: all .3s ease-Out;
}

h1, .h1{
    font-size:1.7em;
    font-weight: 700;
    color: #6ba1a1
}

h2, .h2{
    font-size: 1.30em;
}

h3, .h3{
    font-size: 1.17em;
}

h4, .h4{

}

h1, .h1,
h2, .h2,
h2, .h3,
h4, .h4 {
    color:#fff;
}

h1.heading__alt, .h1.heading__alt,
h2.heading__alt, .h2.heading__alt,
h2.heading__alt, .h3.heading__alt,
h4.heading__alt, .h4.heading__alt {
    color:@brand-color;
}

img{
    -max-width:100%;
}


#layer_natal{position:fixed;width:100%;height:100%;left:0px;top:0px;z-index:10000;background-color: rgba(255,255,255,0.7);margin: 0 auto;display:none;
    .close{
        position: absolute;
        display: block;
        margin-top: 20px;
        margin-left: 650px;
        cursor: pointer;
    }
}
.layer-container{
    display: block;
    width: 700px;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
}


.msgForm a{color:#666666;}


.backgrounds > div,
.backgrounds > header,
.backgrounds > footer{
    width: 980px;
    margin:0 auto;
}

.backgrounds{
    h1{
        color:@brand-alt-color;
    }
}

    .backgrounds--topoHome__am{
        padding-top:1em;
        background: @brand-color url(/common/images/bg_blue.png) right bottom no-repeat;
        height: 180px;
        position:relative;
    }

    .backgrounds--topoInterior__am{
        padding-top:1em;
        background: @brand-color url(/common/images/bg_blue.png) right 30px no-repeat;
        height: 115px;

        .logo--am{
            height: 115px;
            padding-top:.7em;
            &:after,
            &:before{
                height: 115px;
                top:0;
                z-index:1;
            }
            .h1{
                font-size: 2.6em;
                margin-top:0;
            }
            .h1 span{
                color: #fff;
                font-size: .75em;
            }
            span{
                font-weight: 700;
                color: @brand-alt-color;
                vertical-align: middle;
            }

            .logo__grupoai--small{
                margin:0 0 0 2em;
                vertical-align: bottom;

            }
        }
    }

    .backgrounds--content__am{
        background: #99cccc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAACSCAMAAABYDutVAAAAzFBMVEWUx8eAtbWCt7dxpqaRxMSDuLhvpKR0qqqSxcV+srKFublyp6ePwsJvpaVwpaWOwcGBtbV0qamWysqUyMiSxsaFurp3ra1yqKiDt7eCtraAtLSTx8eRxcWEublxp6eOwsJzqamGurpzqKh4ra18sbGKvr6NwcGYy8tto6OPw8N2q6uWycl5rq59srJ6r69+s7OVyMiXysqBtraTxsaHu7t3rKyMwMCJvb2EuLh1qqp/tLRupKRwpqaQxMSIvLyLv79soqJ7sLBroaGZzMyyYifpAAAAtElEQVR42q3CBQ6CAACG0c9uQUzsxAQTu73/ndy/cQE33x7v9w+fz+BkopeLxuPkcuTzXK8aidBuk8lQrdLva7dLoUAiwemks5n6vlYqDAa6WKjn6esVHA7VdTWVYrnU81nrdUIhTJPNRm2bcJhajViM41FbLdJpymV6Pd3t9H4PHg46GunjEdzv1XHUMOh0yGaZTvV202iUZpNkklKJ7VYbDYBikdVK53O1LNZrHY/18/n7L2U4NcWYmMHyAAAAAElFTkSuQmCC) repeat-x;
    }
    .backgrounds--empresa{
        background-color: #dddddd;
        
        .see-all{
            color:#666;
        }
        .see-all a:hover{
            background-color: #666;
            color:#fff;
        }
        h3{
            color:#666;
        }
    }

.home--slogan{
    color:#6ba1a1;
}
.logo--am{
    background-color: @brand-color;
    height: 180px;
    margin-top:-1em;
    position:relative;
    vertical-align: bottom;
    padding: 25px 0 0 0px;
    h1{
        margin:0;
        margin-top:.5em;
        color: white;
        font-size: 2.65em;
        line-height: 1em;
        span{
            font-size:.74em;
        }

    }
    p{
        margin:0;
        font-weight: 600;
        font-size: 1.79em;
        color:@brand-alt-color;
    }
    &:after{
        height: 140px;
        width: 60px;
        content: '';
        .s;
        position:absolute;
        background-position: -402px 0;
        right: -60px;
        top:40px;

    }
    &:before{
        height: 140px;
        width: 60px;
        content: '';
        display: block;
        position:absolute;
        .s;
        position:absolute;
        background-position: -337px 0;
        left: -60px;
        top:40px;   
    }
    .logo__grupoai--big{
        margin-bottom:10px;
    }
}


.nav{
    ul{
        padding:0;
        margin:0;
    }
}

    .nav--horizontal{
        li{
            display: inline-block;
        }    
    }

        .nav__main{
            font-weight: 700;
            text-align: right;
            font-size: 15px;
            position:relative;
            z-index:2;
            li{
                margin-left:17px;
                &:active{
                    a{
                      color: #99cccc;  
                    }
                }
            }          
            a{
                color: white;
                &:hover{
                    color: #99cccc;
                }
            }
        }

        .nav--footer{
            padding-top:7px;
            li{
                margin-left:15px;
                position: relative;
                &:last-child:after{
                    display:none;
                }
            }


            li:after{
                position: absolute;
                content: "|";
                display: block;
                margin-left:5px;
                position:absolute;
                right:-10px;
                top:0;
            }
        }        

.footer--main{
    text-align: center;
    font-size:.7em;
    color:#5e6f88;
    padding: 6em 0 3em 0;

    a{
        color:#5e6f88;
        &:hover{
            color: @brand-color;
        }
    }
}   

    .legalnotice{
        margin-top:20px;
    }    

.highlight{
    border-right: 1px dotted @brand-alt-color;
    min-height: 460px;
    margin:1em 0 4em 0;
    padding-right:12px;
    & > ._a{
        display: block;
        position: relative;
        font-weight: 600;
        text-transform: uppercase;
        font-size:1.6em;
        line-height: 1em;
        height: 2em;
        color:@brand-color;
        width: 95%;
        margin-bottom:1em;
        &:hover{
            color: @brand-alt-color;
            width: 100%;
        }
        &:after{
            .s;
            content: '';
            width: 13px;
            height: 25px;
            background-position: -199px -42px;
            position:absolute;
            right:0;
            bottom:0;
            font-size:1.5em;
            line-height: .9em;
        }
    }
    p{
        font-size: .8em;
        line-height:1.1em;
    }

    .one-half img{
        margin-bottom:.8em;
    }
}

    .highlight__last{
        border:0;
    }

    .thumb__highlight{
        margin-top:1.1em;
    }

.iso__item{
    background-color: #fff;
    margin-bottom:18px;
    padding:7px;
    transition: all .3s ease-Out;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.20);
    font-size:.8em;
    .thumb{
        overflow: hidden;
        margin-bottom:7px;
    }
    &:hover{
        background-color: @brand-color;
        color:#fff;
        img{
            -webkit-transform: scale(1.04);
            transform: scale(1.04);
            transition: all .8s ease-Out;
        }
        .h4{
            color: #fff;
        }
        h2{
            color:#fff;
        }
    }
    h2{
        color:@brand-color;
    }
    .btn{
        background-color: @brand-alt-color;
        padding:.3em 1.03em .2em;
        text-transform: uppercase;
        font-size: .85em;
        font-weight: 700;
        float:left;
        width: 49%;
        color:@brand-color;
        text-align: center;
        &.sp{
            margin-left:2%;
        }
        &:hover{
           background-color: #fff 
        }
    }
    a{
        .h4{
           color: @brand-color;
           margin: 0;

        }
    }

    .title{
        color: @brand-alt-color;
        font-weight: 700;
        font-size: 1.3em;
    }
    .desc{
        color: @brand-alt-color;
        padding:1px 0 1px 0;
    }
    .price{
        font-size: 1.3em;
        font-weight: 600;
        span{
            font-weight: 700;
        }
        padding-bottom:10px;
    }
}

    .iso__item--alt{
        background-color: @brand-color;
        color:#fff;
        h2{
            color:#fff;
        }
    }

    .see-more{
        display: block;
        width: 100%;
        height: 2.2em;
        font-size: .9em;
        line-height: 2.2em;
        text-align: center;
        vertical-align: middle;
        margin-bottom: 3em;
        background-color: #fff;
        color:@brand-color;
        span{
            transition: all .1s;
            font-size: 1.8em;
            line-height: .4em;
            font-weight: 700;
            vertical-align: middle;
        }

        &:hover{
            background-color: @brand-color;
            color: #fff;
            span{
                padding-right:4px;
                padding-top:.3em;
            }
        }
    }

    .see-all{
        font-size: .9em;
        a{
            display: block;

            color: @brand-color;
            background:#fff;
            padding:.2em .5em .1em .5em;
            margin-left:.7em;
            &:hover{
                background-color: @brand-color;
                color:#fff;
            }
        }
        &.brand{
            a{
                color: #666;
            }
        }
    }

    .see-all__alt{
        a{
            background-color: @brand-color;
            color:#fff;
            &:hover{
                color: @brand-color !important;
                background-color: #fff !important;
            }
        }
        &.brand{
            a:hover{
                color: #666 !important;
            }
        }
    }

    .item__category{
        text-transform: uppercase;
        color: #99cccc;
        font-weight: 600;
        padding-bottom:5px;
    }

    .dp--inline{
        display: inline-block;
    }

    .see-more--alt{
        color: #fff;
        background-color: @brand-color;
    } 

    .side-box{
        background-color: #fff;
        padding:18px 18px 10px 18px;
        margin-bottom:18px;
        h2{
            font-size:1.1em;
            color:@brand-color;
            padding-bottom:18px;
            margin:0;
            font-weight: 700;
        }
    }

    .side-links{
        position:relative;
        text-transform: uppercase;
        font-size:1.3em;
        font-weight: 600;
        margin-bottom:30px;
        line-height: 1em;
        img{
            width: 80%;
            margin-top:5px;
        }
        a{
            color: @brand-color;
            display:block;
        }
        a:after{
            .s;
            content: '';
            width: 13px;
            height: 25px;
            background-position: -199px -42px;
            position:absolute;
            right:0;
            top:50%;
            margin-top:-13px;
            font-size:1.5em;
            line-height: .9em;
        }
    }

    .pager{
        vertical-align: middle;
        font-size: 1.3em;
        text-align: right;
        font-weight: 700;
        color:@brand-alt-color;
        a{
            font-weight: 400;
            color: @brand-color;
        }
        &.top{
            position:absolute;
            margin-top:-80px;
            right:0;
        }
        &.bottom{
            color: #fff;
            text-align: center;
            padding-bottom:30px
        }
    }

    .boletim__item{
        background-color: #fff;
        padding:18px;
        font-size:.9em;
        margin-bottom:18px;

        .item__date{
            color:@brand-alt-color;
            font-weight: 600;
        }
        .item__category{
            a{
                color:@brand-color;
            }
            font-weight: 700;
        }

        .boletim__icon{
            width: 40px;
            float:left;
            margin-right:10px;
        }
    }

    hr{
        border-top:1px dotted #8295aa;
    }

    .box__item{
        padding: 18px;
        background-color: #fff;
        color:@brand-color;
        margin-bottom: 18px;
        font-size: .9em;
        h2{
            color:@brand-color;
            margin-top:0;
        }
        &.cont{
            height: 300px;
        }
    }

    .semibold{
        font-weight: 600;
        a{
            color:@brand-color;
        }
    }

    .back-link{
        font-size: .9em;
        padding-top:30px;
        padding-right:10px;
        text-align: right;
        a{
            color:@brand-color;
        }
    }

    .news--page{
        padding:18px 18px 50px 18px;
        background-color: #fff;
        margin-bottom:40px;
        h2{
            font-weight: 600;
            color:@brand-color;
            margin-top:0;
            margin-bottom:.3em;
            font-size:1.7em;
            line-height: 1.2em;
            width: 380px;
        }

        .news__date{
            margin-top:10px;
            font-size:.9em;
        }
        .h2{
            color:@brand-color;
        }
    }

    .news__link{
        text-decoration: none;
        color: @brand-color;
        font-size:.9em;
        &:hover{
            text-decoration: underline;
        }
    }

    .social-btn{position:absolute;right:20px;
        float:right;
        .twitter-share{
            width: 95px;
        }
        div{
            display: inline-block;
        }
    }

    .news__images{
        float:right;
        margin:0 0 18px 18px;
    }

    .news__logo{margin-top:20px;
        img{
            width: 70%;
            margin:1em 0;
        }
        text-align: center;

    }

    .category__title{
        color:@brand-alt-color;
        font-weight: 600
    }

    .special--offers{
        margin-top:10px;
        color:#ff7112;

    }

    .oportunidades__callout{
        color:#ff7112;
        padding-bottom:5px;
        font-size: 1.1em;
        clear:both;

        .btn_oportunidades{
            padding:.2em 3em ;
            background-color: @brand-color;
            float:right;
            display: block;
            color:#fff;
        }

        span{
            font-size:1.2em;
            font-weight: 600;
        }
    }

.wrap-distritos{
    display: block;
}
 /* ************************************ */

/* VALIDATORS BASE */
/* ************************************ */
 
    form input.error{
        background: #ffc8a3;
        border-color: #ff7112;
    }   

    form span{

    }   
    form div.error{
        color: #fff;
        font-size: 11px;
        position:absolute;
        right:40px;
        top:0;
        height: 32px;
        background-color: #ff7112;
        line-height: 32px;
        font-weight: 700;
        padding:0 1em;
    }

    .empresa div.error{
        right:77px;
    }
    #txtObservacoesInfo{vertical-align:top;}
    
    textarea.error{
        background: #ffc8a3;
    }
    
    select.error{
        background: #ffc8a3;
    }
 
/* ************************************ */
/* NOTA: Ao criar a iframe é necessário dar o tamanho total do form ( incluíndo com os validators) */
/* ************************************ */

.placeholder {
    color: #a6a6a6;
    padding:3px;
}

::-webkit-input-placeholder {
    color:    #a6a6a6;
}
:-moz-placeholder {
    color:    #a6a6a6;
}

form.cmxform fieldset {
  margin-bottom: 10px;
}
form.cmxform legend {
  padding: 0 2px;
  font-weight: bold;
}
form.cmxform label {
  display: inline-block;
  line-height: 1.8;
  vertical-align: top;
  text-align:right;
  padding:0 15px 0 0;
  font-weight: 600;
}
form.cmxform fieldset li {
  list-style: none;
  padding: 0 5px 8px 0;
  margin: 0;
  position: relative;
}
form.cmxform fieldset fieldset {
  border: none;
  margin: 3px 0 0;
}
form.cmxform fieldset fieldset legend {
  padding: 0 0 5px;
  font-weight: normal;
}
form.cmxform fieldset fieldset label {
  display: block;
  width: auto;
}
form.cmxform .obg {
  display: inline-block;
  background: url('') no-repeat;
  margin-right:5px;
}
form.cmxform label {
  width: 135px;
}
form.cmxform input[type="text"] {
  width: 200px;
  padding:3px;
}
.txtsmall{
  width: 80px !important;
  padding:3px;
}

form.cmxform fieldset fieldset label {
  margin-left: 123px;
}
.legal{margin-left:152px;width:380px;}

form.cmxform input[type="submit"] {
  margin-left: 150px;
}
.response{width:450px;}
    .response span{font-weight:bold;}
.spacer{height:40px;}   

#validatorMessage{margin:30px 0 0 0;}
    #validatorMessage li{list-style-type:circle;}

.small{width:250px !important;} 


form.cmxform{
    ul{
        list-style: none;
        padding-left:0;
        li{
            padding-bottom:8px;
            position:relative;
        }
    }
    label{
        text-align: left;
        width: 220px;
    }

    input[type="submit"]{
        background-color: @brand-color;
        color:#fff;
        border:0;
        padding:.3em 2em;
        margin-left:220px;
        font-size:1.1em;
        font-family: 'Raleway', sans-serif;
    }

    input[type="text"]{
        width: 430px;
        border:1px solid #8295aa;
        line-height: 32px;
        height: 32px;
        vertical-align: middle;
        font-family: 'Raleway', sans-serif;
    }
    textarea{
        height:5em;
        width: 430px;
        border:1px solid #8295aa;
        font-family: 'Raleway', sans-serif;
    }

    select{
        width: 250px;
        border:1px solid #8295aa;
        font-family: 'Raleway', sans-serif;
        line-height: 32px;
        height: 32px;
        color:@brand-color;
    }
    .termos{
        font-size:.8em;
        margin-left:245px;
        padding:0px 20px 20px 0;
        float:left;
        padding-top:20px;
    }

    .checkbox{
        float:left;
        margin-right:15px;
        margin-left:225px;
        height: 5px;
        padding-top:20px;
        position:absolute;
        z-index:100;
    }
    .licheckbox {
        
    }

    .obg2{
        display: inline-block;
        margin-left:5px;
    }
    .obgexplain{
        font-size:.8em;
        margin-left:225px;
        margin-bottom:10px;
    }

}    



/* ==========================================================================
   Sprite
   ========================================================================== */

.s{
    background-image: url('/common/images/sprite.png');
    background-repeat: no-repeat;
    display: block;
}

//retina 
@media  only screen and (min-device-pixel-ratio: 2),   
        only screen and (min-resolution: 192dpi) {  
    .s{
        background-image: url('/common/images/sprite2x.png');
        background-size: 261px;
    } 
}

.logo__grupoai--big{
    width: 210px;
    height: 37px;
    background-position: 0px 0px;
}

.logo__grupoai--medium{
    width: 191px;
    height: 31px;
    background-position: 0px -39px;
}

.logo__grupoai--small{
    width: 159px;
    height: 28px;
    background-position: 0px -74px;
    display: inline-block;
}

.fb{
    width: 117px;
    height: 34px;
    background-position: -216px 0px;
    float:right;
}


.grid__item{
   /* background-color: #f00; */
   position:relative;
}

@brand-color-ai: #f30100; 


.backgrounds__ai{
    background-color: #ed1b24;
    .nav--interior .submenu{
        background-color: #ed1b24;
    }
}

.backgrounds__sagar{
    background-color: #0091d5;
    .nav--interior .submenu{
        background-color: #0091d5;
    }
}
.backgrounds__forte{
    background-color: #006225;
    .nav--interior .submenu{
        background-color: #006225;
    }
}

.backgrounds__tractores{
    background-color: #f15e28;
    .nav--interior .submenu{
        background-color: #f15e28;
    }
}

.backgrounds__tractorlusa{
    background-color: #ec1d24;
    .nav--interior .submenu{
        background-color: #ec1d24;
    }
}

/* ==========================================================================
   EMPRESAS
   ========================================================================== */


.nav--interior{
    text-align: right;
    padding-right:25px;
    height: 80px;
    font-weight: 700;
    color:#fff;
    line-height: 80px;
    vertical-align: middle;
    font-size:1.4em;
    margin-bottom:10px;
    ul{
        margin:0;
    }
    li{
        margin-left:25px;
    }
    a{
        color:#fff;
    }

    .withsub .submenu{
        display: none;
        position:absolute;
        z-index:3000000;
        padding:0;
        margin:0;
        font-size:.8em;
        padding:0 1em .5em 1em;
        margin-left:-1em;
        a:hover{
            color:#d7d7d7;
        }
        li{
            height: 30px;
            display: block;
            text-align: left;
            margin-left:0px;
            line-height: 30px;
        }
    }

    .withsub.desktop:hover{
        .submenu{
            display: block;
        }
    }
}   

@brand-color-sagar: #0091d5;   

.backgrounds--topoInterior__empresas{
    height: 120px;
    background: url('/common/images/layout/bg_top_empresas.jpg') center bottom no-repeat;
}

    .logo--sagar{
        margin-top:36px;
        margin-left:25px;
    }

    .logo--empresas{
        margin-top:30px;
        margin-left:25px;
    }


.nav__empresas{
    font-weight: 600;
    text-align: right;
    font-size: 15px;
    position:relative;
    padding-top:15px;
    li{
        margin-left:17px;
        vertical-align: top;
    }        
    a{
        margin-top:12px;
        display: inline-block;
    }
}

    .nav__sagar{
        &:active{
            a{
              color: @brand-color-sagar;  
            }
        }

        a{
             color: #666666;
             &:hover{
                color: @brand-color-sagar; 
             }
        }
    }

    .nav__ai{
        &:active{
            a{
              color: @brand-color-ai;  
            }
        }

        a{
             color: #666666;
             &:hover{
                color: @brand-color-ai; 
             }
        }
    }

    .nav__forte{
        &:active{
            a{
              color: #006225;  
            }
        }

        a{
             color: #666666;
             &:hover{
                color: #006225; 
             }
        }
    }

    .nav__tractores{
        &:active{
            a{
              color: #f15e28;  
            }
        }

        a{
             color: #666666;
             &:hover{
                color: #f15e28; 
             }
        }
    }

    .nav__tractorlusa{
        &:active{
            a{
              color: #ec1d24;  
            }
        }

        a{
             color: #666666;
             &:hover{
                color: #ec1d24; 
             }
        }
    }


.empresa{

    .category__title{
        color:#666;
    }
    h2{
        color:#666;
    }

    .btn_oportunidades{
        background-color: #666;
    }
    h1, .h1{
        font-size: 1.3em;
    }
    .iso__item{
        background-color: transparent;
        box-shadow: none;
        &:hover{
            background-color: #666666;
            color:#fff;
            a{
                .h4{
                   color: #fff;
                }
            }

            .item__category,
            .item__date{
                color: #fff;
            }
        }

            .item__category,
            .item__date{
                color: #666;
            }
        .btn{
            background-color: #b2b2b2;
            
            color:#666666;
            &:hover{
               background-color: #fff 
            }
        }
        a{
            .h4{
               color: #666666;
            }
        }

        .title{
            color: #fff;
        }
        .desc{
            color: #fff;
        }
    }

    .see-more{
        background-color:#eeeeee;
        color:#666666;
    }

        .iso__item--alt{
            background-color: #666666;
            color:#fff;
        }

    .backgrounds{
        h1{
            color:#666666;
        }
    }

    .pager{
        color:#b2b2b2;
        margin-right:25px;
        a{
            font-weight: 400;
            color: #666666;
        }
        &.top{
            margin-top:-40px;
        }
        &.bottom{
            color: #b2b2b2;
        }
    }

    .see-all__alt{
       a{
            background-color: #666666;
            margin-left: 25px;
            display: inline-block;
       }
       &.sa{
        position:absolute;
        right:0;
        top:-42px;
       }
       &.sa2{
        top:25px;
       }
    }

    .side-interior-empresas{
        margin-top:-45px;
        .h1{
            margin-left:20px;
            color:#666666;
            margin-top:0;
            margin-bottom:18px;
        }
        &.home{
            margin-top:22px
        }
    }


    .cover--side{
        background-color: #eeeeee;
        &.cover--side--alt{
            background-color: #666666 !important
        }

    }

    .news--page{
        padding:0;
        margin-bottom:40px;
        color:#666;
        margin-top:0px;

        .news__date{
            margin-top:10px;
            font-size:.9em;
        }
        .h2{
            color:#666;
        }
    }

    input[type="submit"]{
        background-color: #666 !important;
        color:#fff;
    }
    
        input[type="text"],
        textarea,
        select
        {
            border:1px solid #aeaeae !important;
            color:#666 !important;
        } 

     .home_news .iso__item{
        background-color: #fff !important;
        &:hover{
            background-color: #666 !important;
        }
     }

     .fb{
        background-position: -216px -38px;
    }  

    .logo__grupoai--medium{
        background-position: 0px -110px;
    }

    .highlight{
        min-height: 120px !important;
        border-right-color:#666;
        color:#666;
        padding-right:0;
        margin:0;
        border: 0;
        display: block;
        position:relative;
        &.ses{
            width: 240px;
            min-height:10px !important;
            height: 170px !important;
            border-right: 1px dashed #8295aa;
            margin-bottom:40px;
            margin-top:40px;
        }
        a{
            font-weight: 600;
            font-size:.8em;
            color:#666;
            text-decoration: none;
            text-transform: none;
            &:after{
                content:none;
            }
        }

        .title__one{
            font-weight: 600;
            margin-top:5px;
        }
        img{
            max-width: 222px;
        }
        p{
            margin-top:5px;
            padding-right:12px;
            white-space: normal;
        }
        .thumb{
            width: 222px;
            height: 90px;
            display: block;
        }

    }

    #marcaOther{margin-bottom:20px;}

    .home-cycle-item{
        width: 235px;
        background-color:#fff;
        border-right: 1px dotted #8295aa;
        margin-right:12px;
        vertical-align: top;
    }

    .fixer:after{
        height: 3800px;
        background-color: #fff;
        content: '';
        width: 20px;
        right:0px;
        top:0;
        display: block;
        position:absolute;
    }

    .btn-cover{
        text-align: center;
        margin-right:25px;
    }
    .btn-cycle{
        background-color: #f30100;
        font-size: 30px;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        text-align: center;
        vertical-align: middle;
        line-height: 38px;
        color:#fff;
        cursor: pointer;
        display: inline-block;
        margin-top:50px;
        margin-bottom:0px;
    }

    .cycle-prev{
        margin-right:20px;
        margin-left:418px;
    }
    .cycle-next{
        margin-left:20px;
    }

    .destaq-home{
        color:#666;
        background-color: #eeeeee;
        font-size:.9em;        
        .home-slider{overflow:hidden;}
        h2{
            color:#666;
            margin-top:10px;
            margin-left:10px;
        }
        p{
            margin-left:10px;
        }
        padding:8px;
        margin-top:20px;
        margin-bottom:20px;
        a{
            font-weight: 600;
            color:#666;
        }
        .slides{
            display: none;
        }
    }

    .home-slider{
        /* width: 470px; */
        /* height: 270px; */
        float:right;
        margin-left:20px;
        .cycle-pager{
            position:absolute;
            bottom:-10px;
            left:0;
            right:0;
            margin:0 auto;
            text-align:center;
            font-size:50px;
            z-index: 10000;
            line-height: 1em;
            color:#fff;
            cursor:pointer;
            .cycle-pager-active{
                color:#f30100
            }
        }
    }

    .sagar .cycle-pager-active{
        color:#0091d5 !important;
    }
    .forte .cycle-pager-active{
        color:#006225 !important;
    }
    .tractores .cycle-pager-active{
        color:rgb(241, 94, 40) !important;
    }

    .tractorlusa .cycle-pager-active{
        color:#ec1d24 !important;
    }

    .forte .btn-cycle{
        background-color: #006225;
    }

    .special-high{
        position:absolute;
        width: 600px;
        left:255px;
        top:10px;
    }
} 


#mapa{
    margin-top:20px;
}
.mapSelect{
    width: 250px;
    border:1px solid #8295aa;
    font-family: 'Raleway', sans-serif;
    line-height: 32px;
    height: 32px;
    color:#666;  
    margin-top:5px;
}

.mapDropLabel{
    font-weight: 600;
    color:#666;
    font-size: .9em;
}

.mapResults{
    padding:20px 0;
    #reset{
        float:right;
        margin-right:18px;
        cursor: pointer;
    }
    #results{
        font-size: .9em;
        color:#666;
        margin-left:18px;
    }
}

.mapResultsMarcas{
    background-color: #eeeeee;
    overflow:auto;
    max-height:495px;
}

.resultMarca{
    cursor:pointer;
    background-color: #fff;
    margin-bottom:9px;
    margin-top:9px;
    font-size: .9em;
    color:#666;
    text-align: center;
    .marcaThumb{
        padding:10px 0;
        text-align: center;
        height: 80px;
        line-height: 66px;
        img{
            max-width: 80%;
            max-height: 80px;
            vertical-align: middle;
        }
    }
    display: none;
    float:left;
    width: 214px;
    margin-left:18px;
}

.resultMarcaTotal{
    cursor:pointer;
    background-color: #fff;
    margin-bottom:9px;
    margin-top:9px;
    font-size: .9em;
    color:#666;
    text-align: center;
    .marcaThumb{
        padding:10px 0;
        text-align: center;
        height: 80px;
        line-height: 66px;
        img{
            max-width: 80%;
            max-height: 80px;
            vertical-align: middle;
        }
    }
    float:left;
    width: 214px;
    margin-left:18px;
}

#logodroppr{
    margin-top:18px;
    margin-left:18px;
    display: none;
}


.resultConcessionario{
    display: none;
    border-bottom:1px dotted #666;
    margin:18px;
    color:#666;
    padding-bottom:18px;
    font-size:.9em;
    a{
        color:#666;
        &:hover{
            text-decoration: underline;
        }
    }
    button{
        background-color: #666;
        color:#fff;
        border:0;
        padding:.3em 2em;
        font-size:1.1em;
        font-family: 'Raleway', sans-serif;
        margin-top:10px;
    }
    &.last-visible{
        border-bottom:0;
    }
}

.news__picture{
    width: 320px;
    text-align: center;
    img{
        max-width: 320px;

    }
}

.marcasDestaqueContent{
   p{
    margin-bottom:0px;
    margin-top:5px;
    color:#666;
    a{
        color:#666;
        font-weight: 600;
    }
   }
   margin-bottom:30px;
}

.logomarca{
    float:right;
    img{
        max-height: 60px;
        width: auto !important
    }
    margin-right:15px;
}

.marcaItem{
    background-color: #eeeeee;
    padding:10px;
    border: 1px solid #eee;
    color:#666;
    margin-bottom:40px;
    min-height: 142px;
    &.alt{
        background-color: #fff;
        border:1px solid #b2b2b2;
        margin-bottom:0;
        .maisinfo a{
            background-color: #eee;
        }
        .btn button{
            background-color: #b2b2b2;
        }
    }
    a{
        color:#666;
    }
    .image{
        float:left;
        width: 220px;
    }
    .btn{
        float:right;
        height: 140px;
        width: 240px;
        text-align: center;
        button{
            width: 190px;
            height: 43px;
            text-transform: uppercase;
            border:0;
            background-color: #666666;
            margin-top:45px;
            margin-right:0;
            color:#fff;
            font-family: @ff;
            font-weight: 600;
        }
    }
    h3, p, .maisinfo{
        margin-left:240px;
    }
    p{
        margin-top:0;
    }
    h3{
        text-transform: uppercase;
        margin-bottom:.3em;
        margin-top:0;
    }
    .maisinfo a{
        text-transform: uppercase;
        background-color: #fff;
        font-size:.80em;
        margin-right:10px;
        display: inline-block;
        padding:.3em 1.03em .2em;
        font-weight: 600;
        &:hover{
            background-color: #666;
            color:#fff;
        }
    }
}

.marcaContent{
    font-size:.9em;
    display: none;
    .arrow{
        width: 31px;
        height: 16px;
        margin:10px auto;
    }
    padding:0 10px;
    margin-bottom:40px;
    .grid__item{
        margin-bottom:20px;
        img{
            margin:10px 0 0px 0;
        }
    }
    h4{
        color:#666;
        font-weight: 600;
        margin:0;
        margin-top:10px;
    }
    color:#666;
    p{
        margin-top:3px;
    }
    a{
        color:#666;
    }
}


.ileft{
    float:left;
    margin:0 20px 20px 0;
}
.iright{
    float:right;
    margin:0 0 20px 20px;
}

.nodata{color:#666666;}
.nodata--side{margin-left:25px;}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.cf {
    *zoom: 1;
}


._rotation (@rot) {
    -ms-transform: rotate(@rot); /* IE 9 */
    -webkit-transform: rotate(@rot); /* Chrome, Safari, Opera */
    transform: rotate(@rot);
}
.transition(@time) {
  -webkit-transition: all @time ease-in-out;
  -moz-transition: all @time ease-in-out;
  transition: all @time ease-in-out;
}
.boxsizing {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;  
}
.mobile_nav {
    position: fixed;
    top: 85px;
    z-index: 300;
    right: -100%;
    width: 300px;
    height: ~"calc(100% - 85px)";
    padding: 30px;
    color: #fff;
    background-color: #000;
    overflow: auto;
    .boxsizing;
    .transition(0.5s);
    &.open { right: 0px; }

    .nav--horizontal { 
        display: block; 
        height: auto;
        padding-right: 0px;
        line-height: 19px;
        .small_font {
            padding-bottom: 10px;
            font-size: 16px;
        }
        .submenu {
            position: relative;
            width: 100%;
            padding: 0;
            margin-top: 10px;
            li { text-align: right; }
        }
        ul {
            padding-left: 0px;
        }
        li {
            display: block;
            padding-bottom: 20px;
            line-height: 19px;
        }
        img { display: none; }
    }
}
.mobile_topo {
    position: fixed;
    z-index: 300;
    display: none;
    top: 35px;
    width: 100%;
    height: 50px;
    background-color: #fff;
    border: solid 1px #e2e2e2;

    .logo {
        position: absolute;
        top: 50%;
        margin: 0;
        margin-left: 15px;
        width: 118px;
        -moz-transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        img { 
            width: 100%; 
        }
    }
    .icon_menu {
        position: absolute;
        right: 15px;
        width: 40px;
        height: 40px;
        margin-top: 5px;
        padding-top: 10.5px;
        .boxsizing;

        span {
            display: block;
            width: 30px;
            height: 3px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 5px;
            background-color: #2a486a;
        }
    }
    .icon_menu.open {
        span:nth-child(2) {
            display: none;
        }
        span:nth-child(1) {
            ._rotation (-45deg);
            top: 8px;
            position: relative;
        }
        span:nth-child(3) {
            ._rotation (45deg);
        }
    }
}

@media only screen and (max-width: @ipadPortrait){ 
    .cycle-pager { z-index: 200 !important; }
    .mobile_topo { display: block; }
    iframe[src="https://www.grupoautoindustrial.pt/barra/?id="] {
        position: fixed !important;
        z-index: 3000000;
        top: 0px;
    }
    body {
        padding-top: 95px;
        overflow-x: hidden;
    }
    .full_width {
        width: 94%;
        margin-left: auto;
        margin-right: auto;
    }
    .nav--horizontal { display: none; }
    .backgrounds--topoInterior__empresas { display: none; }
    .backgrounds {
        .full_width;
        &> div { width: 100%; }
        .cycle-slideshow {
            width: 100% !important;
            .btn-cycle {
                display: block !important;
                float: left;
                margin: 20px 5px;
            }
            .cycle-prev {
                margin-left: ~"calc(50% - 45px)";
            }
        }
        .cycle-slideshow:after { display: none; }
        .home-cycle-item {
            width: 100%;
            border: 0;
            padding: 0 10px;
            .thumb {
                width: 100%;
                height: auto;
                max-width: none;
            }
        }
    }
    .home-slider {
        position: relative;
        overflow: hidden;
        height: auto;
        padding-bottom: 27%;
        .cycle-slide {
            position: absolute !important;
            img {
                width: 100%;
            }
        }
    }
    footer {
        width: 100% !important;
        .grid__item {
            width: 100%;
        }
        .c-social {
            margin-top: 15px;
        }
        .nav--footer { display: block; }
        .three-twelfths { display: none; }
    }
    .backgrounds--empresa {
        width: 100%;
        &> div { width: 100%; }
        .see-all { display: none; }
        //isotope item das noticias footer
        .isotope-item {
            width: 46%;
            margin: 0 2%;
            .thumb img { width: 100%; }
        }
        //ver mais das noticias footer
        .one-whole { 
            width: 96%; 
            .grid__item { width: 100%; }
        }
        .grid {
            .full_width !important;
            .grid { width: 100% !important; }
            .grid__item { 
                width: 100%;
                padding-left: 0px; 
            }
        }
        .three-quarters,
        .one-quarter {
            width: 100%;
        }
        .h1.h1 {
            margin-left: 0;
        }
        .grid--special { padding-bottom: 1px; }
    }
    .backgrounds{
        .grid__item.one-half {
            width: 100% !important;
        }
        .three-quarters,
        .one-quarter {
            width: 100%;
        }
        .grid__item {
            display: block;
            margin: 0;
            margin-bottom: 20px;
            padding-left: 0px !important;
        }
    }
    .empresa .side-interior-empresas.home {
        margin-top: 0px;
        padding-top: 0px;
    }
    .see-more--alt { margin-bottom: 20px; }
    .empresa .side-interior-empresas { margin-top: 0px; }
    .mapResultsMarcas {
        height: auto;
        max-height: none;
        .marcaThumb { height: auto; }
    }
    .resultMarcaTotal {
        width: ~"calc(100% - 36px)";
        .marcaThumb { height: auto; }
    }
    .mapSelect {
        width: 100%;
    }
    form.cmxform {
        textarea,
        select,
        input[type="text"] { width: 100%; }
        .obg2 {
            position: absolute;
            right: 5px;
            top: 0;
        }
        li { position: relative; }
        .termos { margin-left: 22px; }
        .obgexplain { margin-left: 0px; }
        .checkbox { margin-left: 0px; }
        input[type="submit"] {
            margin-left: 0px;
            width: 100%;
        }
        div.error {
            right: 0;
            top: 28px;
        }
        label {
            display: block;
            width: 100%;
            margin: 0;
        }
    }
    .side-interior-empresas {
        padding-top: 40px;
    }
    .see-all {
        float: right;
        top: 0px !important; 
    }
    .empresa .side-interior-empresas .h1 { margin-left: 0px; }
    .isoit {
        .grid__item { width: 100%; }
    }
    .iso__item {
        margin: 0;
        .thumb { 
            width: 100%;
            img { width: 100%; }
        }
    }
    .btn_oportunidades {
        width: 100%;
        padding: 5px 0;
        margin-bottom: 10px;
        text-align: center;
    }
    .news__picture {
        width: 100%;
        img { 
            width: 100%; 
            max-width: none;
        }
    }
    .news__images {
        margin: 0;
        margin-bottom: 15px;
        width: 100%;
        float: none;
        display: block;
    }
    .social-btn {
        position: relative;
        right: auto;
        float: none;
        width: 100%;
        display: block;
        font-size: 0;
        text-align: center;
        .twitter-share { width: 65px; }
        div { margin: 0 5px; }
    }
    .news--page {
        table {
            width: 100%;
            td { width: 50% !important; }
        }
        h2 { width: 100%; }
    }
    .grid--special { margin-left: 0px; }
    .marcaItem {
        .image {
            float: none;
            width: 100%;
            margin-bottom: 15px;
            img { width: 100%; }
        }
        h3,
        p,
        .maisinfo {
            margin-left: 0px;
            width: 100%;
        }
        .btn {
            width: 100%;
            height: auto;
            float: none;
            button {
                width: 100%;
                margin-top: 0px;
                margin-bottom: 15px;
            }
        }
    }
    .marcaContent {
        .grid { 
            margin-left: 0px; 
            img { width: 100%; }
        }
    }
    .logomarca {
        width: 100%;
        float: none;
        margin-right: 0px;
        text-align: center;
    }
    .grid--narrow { margin-left: 0px; }
}

.cycle-slideshow.sagar {
    .btn-cycle { background-color: rgb(0, 145, 213); }
}
.cycle-slideshow.tractores {
    .btn-cycle { background-color: rgb(241, 94, 40) !important; }
}
.cycle-slideshow.tractorlusa {
    .btn-cycle { background-color: #ec1d24 !important; }
}