@import "default";

section#banner{
    width:100%;
    height:612px;
    display:block;
    position:absolute;
    top:0;
    left:0;
    z-index:0;
    overflow:hidden;
    &:before{
        width:100%;
        height:94px;
        position:absolute;
        bottom:0;
        left:0;
        z-index:9;
        content:'overground';
        text-indent:-9999px;
        overflow:hidden;
        background:url('../img/banner-overground.png') no-repeat center bottom;
    }
    ul#banners{
        width:100%;
        height:612px;
        display:block;
        position:absolute;
        top:0;
        left:0;
        z-index:1;
        overflow:hidden;
        li{
            width:100%;
            height:612px;
            display:block;
            position:relative;
            .container_16{
                display:block;
                position:relative;
                padding-top:220px;
                .title{                    
                    display:table;
                    position:relative;
                    background:@yellow-rgba;
                    margin-left:50px;
                    .border-radius(17px);
                    padding:20px 35px;
                    p{
                        .open(13px,@blue,700);
                        line-height:1;
                        padding:0;
                        margin:0;
                        text-transform:uppercase;
                        strong{
                            .open(50px,@blue,300);
                            display:block;
                            position:relative;
                            line-height:1;
                            margin-top:7px;
                            letter-spacing:.1em;
                        }
                    }
                }
                .description{
                    display:table;
                    position:relative;
                    background:@white-rgba;
                    margin-left:80px;
                    padding:8px 20px;
                    margin-top:-13px;
                    p{
                        .open(13px,@blue,700);
                        line-height:1;
                        padding:0;
                        margin:0;
                        text-transform:uppercase;
                    }
                }
                a.link{
                    display:table;
                    position:relative;
                    background:@blue-rgba;
                    margin-top:50px;
                    margin-left:100px;
                    .open(10px,@yellow,700);
                    line-height:1;
                    padding:6px 9px;
                    text-transform:uppercase;
                    text-decoration:none;
                    &:before,&:after{
                        width:11px;
                        height:22px;
                        overflow:hidden;
                        position:absolute;
                        top:0;
                        background:url('../img/banner-link-arrows.png') no-repeat;
                        opacity:.9;
                        text-indent:-9999px;
                    }
                    &:before{
                        content:'left';
                        left:-11px;
                        background-position:left top;
                    }
                    &:after{
                        content:'right';
                        right:-11px;
                        background-position:right top;
                    }
                    &:hover{
                        background:rgba(255,255,255,9);
                        color:@blue;
                        &:before{
                            background-position:left bottom;
                        }
                        &:after{
                            background-position:right bottom;
                        }
                    }
                }
            }
        }
    }
    nav#nav{
        display:block;
        height:20px;
        position:absolute;
        top:175px;
        left:50%;
        margin-left:-397px;
        text-align:left;
        z-index:9999;
        a{
            display:inline-block;
            position:relative;
            width:20px;
            height:20px;
            overflow:hidden;
            background:url('../img/banner_controller.png') no-repeat 0 0px;
            text-indent:9999px;
            &.activeSlide,&:hover{
                background-position:-20px 0px;
            }
        }
    }
}

.midbanners{
    margin-top:420px;
    position:relative;
    display:block;
    div.grid_4{
        width:216px;
        height:366px;
        display:block;
        position:relative;
        .border-radius(14px);
        border:2px solid @blue;
        overflow:hidden;
        .gradient(@light-gray,@white);

        &.climatempo{
            background:url('../img/bg-climatempo.jpg') no-repeat center center !important;
            iframe{
                margin: 150px auto;
                display: block;
                position: relative;
            }
        }
    }
}

.online-payment-box{
    margin-top:20px;
    width:100%;
    height:180px;
    .border-radius(14px);
    border:2px solid @blue;
    overflow:hidden;
    background:url('../img/payment-background.jpg') no-repeat center center;
    .title-box{
        margin-top:36px;
        h3{
            display:block;
            position:relative;
            .open(24px,@white,300);
            line-height:1;
        }
        h2{
            display:block;
            position:relative;
            .open(43px,@white,700);
            line-height:1;
        }
    }
    .text-box{
        margin-top:36px;
        p{
            display:block;
            position:relative;
            margin:0;
            padding:0;
            .open(13px,@white,400);
            line-height:1.3;
        }
    }
    .hr-box{
        height:2px;
        margin-top:15px;
        margin-bottom:15px;
        hr{
            width:100%;
            height:2px;
            display:block;
            position:relative;
            background:@white;
            border:0;
            margin:0;
            padding:0;
        }
    }
    .logos-box{
        height:28px;
        .lock-icon{
            width:28px;
            height:28px;
            display:block;
            position:relative;
            float:left;
            svg{
                path{
                    fill:@white;
                }
            }
        }
        .cielo-logo{
            width:67px;
            height:22px;
            display:block;
            position:relative;
            float:right;
            padding:3px 0;
            svg{
                max-height:22px;
            }
        }
    }
    #payment-login{
        height:28px;
        label{
            display:block;
            position:relative;
            float:left;
            .open(12px,@white,500);
            line-height:2.4;
            margin-right:10px;
        }
        input[type='text'],input[type='password'],input[type='email']{
            width:120px;
            height:28px;
            border:none;
            float:left;
            padding:0 10px;
            .open(13px,@blue,700);
        }
        input[type='submit']{
            display:block;
            position:relative;
            float:left;
            height:28px;
            border:none;
            background:@yellow;
            cursor:pointer;
            text-align:center;
            .open(12px,@blue,700);
            padding:0 10px;
            margin-left:10px;
            &:hover{
                background:@blue;
                color:@white;
            }
        }
    }
}

.downbanners{
    margin-top: 20px;
    
    .user_login{
        height:180px;
        background:url(../img/banners/exclusiva.png);
        position:relative;
        color:#FFF;
        .font;
        font-size:12px;
        form{
            position:relative;
            display:block;
            overflow:hidden;
            height:80px;
            margin-top:80px;
            div{
                display:block;
                position:relative;
                float:left;
                &.submit{
                    float:right;
                }
            }
            label{
                float:left;
                width:50px;
                line-height:2;
                margin-top:2px;
                text-align:right;
                padding-right:5px;
                margin-left:10px;
            }
            input[type='text'],input[type='password'],input[type='email']{
                border:none;
                width:145px;
                float:left;
                margin: 1px 0;
                padding:5px;
            }
            input[type='password'],input[type='email']{
                width:110px;
            }
            input[type='submit']{
                display:block;
                position:relative;
                width:31px;
                height:26px;
                border:none;
                background:@yellow;
                cursor:pointer;
                text-align:center;
                .open(12px,@blue,700);
                &:hover{
                    background:@blue;
                    color:@white;
                }
            }
            a{
                .verdana(11px,@white,bold);
                display:block;
                position:relative;
                text-align:right;
                text-decoration:none;
                margin-top:5px;
                padding:5px 0;
                float:right;
            }
        }
        form#forget{
            display:none;
            input[type='submit']{
                top:1px;
            }
        }
    }
}

.commodities{
    iframe{
        padding:20px 13px 0;
    }
    span{
        padding:0 15px;
        width:186px;
        display:block;
        font-family:'Verdana',sans-serif;
    }
}
.forexpros{
    width:180px !important;
    margin:0 auto !important;
    display:block;
    .font;
    font-size:12px;
    color:#777;
}