@font-text: Arial;
@text-color: #313131;
@text-color2: #AAAAAA;
@bg-color: #F7F7F7;
@color1: #00AEEF;
@color2: #66CF00;
@color3: #790033;
@color4: #FF8000;
@color5: #FF0080;
@color6: #FF0000;
@color7: #0000A0;
@color8: #004000;
@color9: #000000;

.shadow(@bottom:3px){
    -webkit-box-shadow: 0px @bottom 5px rgba(50, 50, 50, 0.7);
    -moz-box-shadow:    0px @bottom 5px rgba(50, 50, 50, 0.7);
    box-shadow:         0px @bottom 5px rgba(50, 50, 50, 0.7);
}

.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

.depth (@color){
    text-shadow: 1px 1px 0px @color;
}

.opacity (@percentual, @percent) {
    -moz-opacity: @percentual;
    opacity: @percentual;
    filter:alpha(opacity=@percent);
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.gradient(@start,@end){
    background-color:@end;
    /* For Internet Explorer 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=@start,  endColorstr=@end)";
    /* For Internet Explorer 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@start,  endColorstr=@end);
    /* IE10 */
    background-image: -ms-linear-gradient(top, @start 0%, @end 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, @start 0%,  @end 100%);
    /* Opera */
    background-image: -o-linear-gradient(top, @start 0%,  @end 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, @start), color-stop(1, @end));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, @start 0%, @end 100%);
    /* Proposed W3C Markup */
    background-image: linear-gradient(top, @start 0%,  @end 100%);

}

.no-margin-left{
    margin-left: 0 !important;
}

body{
    margin:0;
    padding:0;
    font-family: @font-text;
    color:@text-color;
    overflow-x:hidden;
    font-size: 13px;
    height:auto !important;
}

.container{
    max-width: 1100px;
}

.container-small{
    max-width: 800px;
}

.container-small .span6 {
    padding: 0 20px;
}

.noticia-block .container-small {
    top:-200px;
    position:relative;
    z-index:10000
}

a{
    color: inherit;
}

a:hover{
    text-decoration: none;
    color: inherit;
}

header{
    background: transparent url('../../images/site/topo-1.png') no-repeat top;
    background-size: 100vw;
    height: 160px;
    position: relative;
    z-index: 1000;
}

.topbar{
    font-size: 12px;
    padding: 0 0 10px 0;
    ul{
        list-style: none;
        float:right;
        li{
            float: left;
            padding: 10px 0;
            a{
                color: @text-color;
                .opacity (1, 100);
            }
            a:hover{
                text-decoration: none;
                .opacity (0.5, 50);
            }
            img{
                padding: 5px;
                margin-top: -5px;
            }
        }
    }
}

nav{
    margin: 0;
    ul{
        list-style:none;
        li{
            float: left;
            margin: 0 12px;
            text-transform: uppercase;
            font-size: 13px;
        }
        li:hover, li.active{
            list-style-image:url('../../images/site/dot.png');
            list-style-position: outside;
        }
    }
}

#logo{
    img{
        margin:-40px 0 20px 0;
        .opacity (1, 100);
    }
    img:hover{
        .opacity (0.5, 50);
    }
}

#destaque{
    padding:0;
    margin: 0 0 0 0;
    height: 400px;
}

#frase{
    padding: 80px 0;
    margin: 50px 0;
    background: #F7F7F7;
    position: relative;
}

#frase .span12{
    text-align: center;
}

.title-block{
    border-left: solid 4px #000;
    min-height: 40px;
    max-height: 100px;
    width: 100%;
    margin: 0 0 40px 0;
    h1{
        padding: 0;
        margin: 0 10px;
        font-size:24px;
        line-height: 24px;
        font-family:'Muli', Arial, 'Sans Serif';
        text-transform: uppercase;
    }
    small{
        color: @text-color2;
        padding-left:10px;
    }   
}

.section-interna{
    padding-top: 80px;
}

.noticia-block{
    margin-top: 50px;
}


.noticia-block2{
    margin-top: 50px;
}

.noticia-block .thumbnail img{
    object-fit:cover;
    width: 100%;
    height: 230px;
    overflow: hidden;
}

.quote{
    height: 20px;
    width: 20px;
    padding: 10px;
    .rounded-corners (180px);
    float: left;
    i{
        margin-left: 4px;
    }
}

.quote-right{
    float: right;
    margin-top: -35px;
}

.quote-text{
    font-weight: normal;
    font-size: 20px;
    max-width: 850px;
    text-align:center;
    margin: 10px auto;
    display: block;
}

.title-block.color1{
    border-color: @color1;
}

.btn.color1, .quote.color1{
    color: #FFF;
    background: @color1;
    font-size: 13px;
    text-transform: uppercase;
}


.title-block.color2{
    border-color: @color2;
}

.btn.color2, .quote.color2{
    color: #FFF;
    background: @color2;
    font-size: 13px;
    text-transform: uppercase;
}


.title-block.color3{
    border-color: @color3;
}

.btn.color3, .quote.color3{
    color: #FFF;
    background: @color3;
    font-size: 13px;
    text-transform: uppercase;
}

.title-block.color4{
    border-color: @color4;
}

.btn.color4, .quote.color4{
    color: #FFF;
    background: @color4;
    font-size: 13px;
    text-transform: uppercase;
}


.title-block.color5{
    border-color: @color5;
}

.btn.color5, .quote.color5{
    color: #FFF;
    background: @color5;
    font-size: 13px;
    text-transform: uppercase;
}


.title-block.color6{
    border-color: @color6;
}

.btn.color6, .quote.color6{
    color: #FFF;
    background: @color6;
    font-size: 13px;
    text-transform: uppercase;
}

.title-block.color7{
    border-color: @color7;
}

.btn.color7, .quote.color7{
    color: #FFF;
    background: @color7;
    font-size: 13px;
    text-transform: uppercase;
}


.title-block.color8{
    border-color: @color8;
}

.btn.color8, .quote.color8{
    color: #FFF;
    background: @color8;
    font-size: 13px;
    text-transform: uppercase;
}

.title-block.color9{
    border-color: @color9;
}

.btn.color9, .quote.color9{
    color: #FFF;
    background: @color9;
    font-size: 13px;
    text-transform: uppercase;
}

.noticia-list{
    img{
        height:235px;
    }
    .thumbnail{
        width: 100%;
        background-color: @bg-color;
        border: none;
    }
    p{
        margin: 10px 0 0 0;
    }
    small{
        color: @text-color2;
    } 
    a.text{
        width: 100%;
        float: left;
        height: 80px;
    }
    .btn-pill{
        .rounded-corners (180px);
        float: left;
        margin: 15px 0 20px 0;
    }
}

.publicidades{
    margin: 30px 0;
    div{
        border: 1px solid #dcdcdc;
    }
}


.noticia-larger-list{
    margin-bottom: 20px;
    .thumbnail{
        width: 290px;
        background-color: @bg-color;
        border: none;
    }
    p{
        margin: 10px 0 0 0;
    }
    small{
        color: @text-color2;
        font-size:12px;
    } 
    a.text{
        float: left;
        margin: 0 0 20px 0;
        height: 150px;
    }
    h2{
        font-size:26px;
        line-height: 28px;
        padding: 0;
        margin:0;
    }
    .btn-pill{
        .rounded-corners (180px);
        float: left;
        margin: 15px 0 0 0;
    }
    a.more{
        .opacity (1, 100);
    }
    a.more:hover{
        .opacity (0.5, 50);
    }
}

footer{
    padding: 20px 0;
}

.redes-sociais a{
    float: right;
}

.links h4{
    font-size:15px;
}

.menu-bottom{
    background: #06377A;
    padding: 10px;
    font-size: 16px;
    color: #FFF;
    height: 20px;
    nav{
        margin: 0 0 0 -15px;
        ul{
            list-style:none;
            li{
                float: left;
                margin: 0 25px;
                text-transform: uppercase;
                font-size: 13px;
            }
            li:hover, li.active{
                list-style-image:url('../../images/site/dot-invert.png');
                list-style-position: outside;
            }
        }
    }
}

a.social{
    float: left;
    margin: 10px;
    .opacity (1, 100);
}

a.social:hover{
    .opacity (0.5, 50);
}

.copy{
    margin: 20px 0 0 20px;
}

.social-block{
    padding: 20px 0;
}

.links-uteis{
    list-style: none;
    padding:0;
    margin:0;
    a{
        .opacity (1, 100);
    }
    a:hover{
        .opacity (0.5, 50);
    }
    h2{
        font-size: 22px;
        margin:0;
        padding:0;
        line-height:24px;
    }
    h4{
        font-weight: normal;
    }
}

.labels {
    padding-top: 10px;
    background-color: #06377A;
    color: #FFF;
    font-size: 16px;
}

/* Tiny Carousel */
#slider1 { height: 1%; overflow:hidden; padding: 40px 0;   }
#slider1 .viewport { float: left; width: 940px; height: 125px; overflow: hidden; position: relative; }
#slider1 .buttons { 
    display: block;
    margin: 50px 20px 0 20px;
    background-position: 0 -38px;
    text-indent: -999em; float: left;
    width: 39px;
    height: 60px;
    overflow: hidden;
    position: relative;
}
#slider1 .buttons:hover{.opacity(0.8,80);}
#slider1 .next {  background:url("../../images/site/arrow-right.png") no-repeat scroll 0 0 transparent;  }
#slider1 .prev {  background:url("../../images/site/arrow-left.png") no-repeat scroll 0 0 transparent;  }


#slider1 .disable { visibility: hidden; }
#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0; top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 215px;}



#slider2 { height: 1%; overflow:hidden; padding: 0px 0;  }
#slider2 .viewport { float: left; width: 100%; height: 780px; overflow: hidden; position: relative; }
#slider2 .buttons { 
    display: block;
    margin: auto;
    background-position: 0 -38px;
    text-indent: -999em; float: left;
    width: 160px;
    height: 40px;
    overflow: hidden;
    position: relative;
    left:50%;
    margin-left:-80px;
}
#slider2 .buttons:hover{.opacity(0.8,80);}
#slider2 .next {  background:url("../../images/site/down.png") no-repeat scroll 0 0 transparent;  }
#slider2 .prev {  background:url("../../images/site/up.png") no-repeat scroll 0 0 transparent;  }


#slider2 .disable { visibility: hidden; }
#slider2 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 100%; left: 0 top: 0; }
#slider2 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 260px; width: 100%;}


#slider3 { height: 1%; overflow:hidden; padding: 0;   }
#slider3 .viewport { float: left; width: 80%; height: 420px; overflow: hidden; position: relative; }
#slider3 .buttons { 
    display: block;
    margin: 30px 20px 0 20px;
    background-position: 0 -38px;
    text-indent: -999em; float: left;
    width: 39px;
    height: 60px;
    overflow: hidden;
    position: relative;
}

#slider3 .buttons:hover{.opacity(0.8,80);}
#slider3 .next {  background:url("../../images/site/arrow-right.png") no-repeat scroll 0 0 transparent;  }
#slider3 .prev {  background:url("../../images/site/arrow-left.png") no-repeat scroll 0 0 transparent;  }


#slider3 .disable { visibility: hidden; }
#slider3 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
#slider3 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 400px; width: auto;}
#slider3 .overview li img{
    height: 400px;
    width: auto !important;
}



.text-internal{
    margin: 0 0 20px 0;
    img{
        float:left;
        width:35%;
        margin:0 10px 10px 0;
    }
    img.painel{
        width:100%;
    }
}

.amazingslider-watermark-0{
    background: none !important;
    opacity: 0 !important; 
    -moz-opacity: 0 !important; 
    filter: alpha(opacity=00) !important;
}


.box {
    height: 434px;
    width: 606px;
    float: right;
    background-image: url(../../images/site/bgslider.png);
    position:relative;
    right: -60px;
    top: -455px;
    z-index: 2;
}

.box .informativos {
    padding-left: 259px;
    width: 347px;
    height: 100%;
}

.box .informativos form select, .modal-body form select  {
    width: 296px;
    padding-left: 10px;
    height: 35px;
    border-radius: 5px;
    border: none;
    color: #2374cb;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    float: left;
    font-family: 'Raleway', sans-serif;
}

.box .informativos form fieldset, .modal-body form fieldset{
    width: 140px;
    height: 60px;
    float: left;
    margin-bottom: 10px;
    margin-top: -1px;
}

.box .informativos form button, .modal-body form button{
    cursor: pointer;
    width: 143px;
    height: 40px;
    float: left;
    background-color: #0192c8;
    border-radius: 0px 5px 5px 5px;
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    border: none;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.box .informativos form button:hover, .modal-body form button:hover{
    opacity: 0.8;
}

.box .informativos form input, .modal-body form input {
    width: 286px;
    padding-left: 10px;
    height: 35px;
    border-radius: 5px;
    border: none;
    color: #8c8c8c;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    float: left;
    font-family: 'Raleway', sans-serif;
}

.box .informativos h1 {
    font-size: 28px;
    color: white;
    font-weight: 900;
    text-align: left;
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif;
    margin-top: 34px;
    margin-bottom: 17px;
    letter-spacing: -1px;
}

.box .informativos h1 b {
    color: #57baf0;
}

.box .informativos form fieldset input, .modal-body form fieldset input{
    width: 130px;
    padding-left: 2px;
    height: 35px;
    border-radius: 5px;
    border: none;
    color: #8c8c8c;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 13px;
    float: left;
    font-family: 'Raleway', sans-serif;
    margin-right: 10px;
    text-align: center;
}

.box .informativos form input, .modal-body form input{
    width: 286px;
    padding: 0 0 0 10px;
    height: 35px !important;
    border-radius: 5px;
    border: none;
    color: #8c8c8c;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    float: left;
    font-family: 'Raleway', sans-serif;
}

.box .informativos form fieldset label, .modal-body form fieldset label{
    width: 130px;
    padding-left: 10px;
    height: 15px;
    float: left;
    font-weight: 500;
    color: white;
    font-size: 14px;
    text-align: left;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.box .informativos form fieldset select, .modal-body form fieldset select{
    width: 140px;
    height: 35px;
    border-radius: 5px;
    border: none;
    color: #8c8c8c;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    float: left;
    font-family: 'Raleway', sans-serif;
    margin-right: 10px;
}

.modal-body{
    background: #ABCCDC;
}

.carousel-control {
    background: none;
    border: none;
    font-size: 30px;
    margin-top: 100px;
    font-family: 'Raleway', sans-serif;
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 1);
}

.carousel-control span {
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 1);
}

.carousel-inner {
    margin-top: -180px;
    margin-left: -2px;
    float: left;
    width: 100%;
}

.slider-vector {
    width: 100%;
    float: left;
    position: relative;
    margin-top: -150px;
}

.abrasel{
    margin-bottom:40px;
}

.abrasel .texto{
    h1{
        font-size:18px;
        line-height:20px;
    }
}

.lista-assoc{
    list-style: none;
    margin:0;
    padding:0;
}

.amazingslider-wrapper-0 {
    height: 500px !important;
}

.amazingslider-slider-0 .amazingslider-img-0 img{
    width: 100%;
    height: 475px !important;
    object-fit: contain;
}

.amazingslider-bottom-shadow-0{
    display: none !important;
}

#google_translate_element {
    position: absolute;
    right: 10px;
    top: 10px;
}

.title-interna {
    font-size: 18px !important;
    font-weight: normal !important;
    border-top: 1px solid #CCC;
    width: 100vw;
    padding-top: 20px !important;
}

.form-top {
    float: right;
    margin-right:-30px;
    margin-top:5px;
}

.img-carousel {
    height:680px;
    width:auto;
    object-fit:cover;
    overflow:hidden;
    margin:auto;
    display: block;
}

.associado-p {
    min-width:650px;
    min-height:40px;
}

@media (max-width: 768px) {

    header{
        background: #FFF;
        background-image: none;
        height: auto;
        position: relative;
        z-index: 1000;
    }

    #google_translate_element {
        display: none;
    }

    .form-top {
        float: right;
        margin: 5px 10px 0 0;

    }

    #destaque{
        padding:0;
        margin: 0 0 0 0;
        height: 200px;
    }

    .img-carousel {
        height:200px;
        width:auto;
        object-fit:cover;
        overflow:hidden;
        margin:auto;
        display: block;
    }

    #logo img {
        margin: auto;
        display: block;
        right: 0;
        left: 0;
    }

    .slider-vector {
        display: none;
    }

    .carousel-inner {
        margin-top: 0px;
        float: left;
        width: 100%;
    }

    .noticia-block .container-small {
        top:0;
        position:relative;
        z-index:10000
    }

    #frase{
        padding: 50px 0 80px 0;
        margin: 180px 0 0 0;
        background: #F7F7F7;
    }

    .associado-p {
        min-width:150px;
        min-height:100px;
    }

    #slider2 .overview li {
        float: left;
        margin: 0 20px 0 0;
        padding: 1px;
        height: 300px;
        width: 100%;
    }

    #slider2 .viewport {
        float: left;
        width: 100%;
        height: 920px;
        overflow: hidden;
        position: relative;
        margin-top: 20px;
    }

    .noticia-larger-list{
        margin-bottom: 20px;
        .thumbnail{
            width: 290px;
            height: 150px;
            object-fit: contain;
            background-color: @bg-color;
            border: none;
            margin: auto;
            display: block;
            overflow: hidden;
        }
        p{
            margin: 0;
        }
        small{
            color: @text-color2;
            font-size:12px;
        } 
        a.text{
            float: left;
            margin: 0 0 20px 0;
            height: 150px;
            text-align: center;
        }
        h2{
            font-size:20px;
            line-height: 22px;
            padding: 0;
            margin: 10px 0 0 0;
            text-align: center;
            width: 100%;
        }
        .btn-pill{
            .rounded-corners (180px);
            float: left;
            margin: 15px 0 0 0;
        }
        a.more{
            display: none;
        }
    }

    .labels, .social-block {
        text-align: center;
    }

    .menu-bottom {
        background: #06377A;
        padding: 10px;
        font-size: 16px;
        color: #FFF;
        height: auto;
        text-align: center;
    }

    .menu-bottom  li {
        width: 100%;
    }

    footer img {
        margin: auto;
        display: block;
    }

    .redes-sociais {
        height: 80px;
    }

    header nav ul {
        padding-top: 10px;
    }

    header nav li {
        width: 100%;
        text-align: center;
    }

    #slider1 .viewport {
        margin: auto;
        display: block;
        width: 220px;
        height: 125px;
        overflow: hidden;
        position: relative;
    }

}