//Variables
@fw-thin:100;
@fw-light:300;
@fw-regular:400;
@fw-medium:500;
@fw-bold:700;

@color-purple: #827b9b;
@color-pink: #d7d2e9;
//Generals
*:not(i){font-family: 'Roboto', sans-serif!important;}

.padding-normal{padding: 20px;}
.btn-edit{
    background-color: #373440;
    padding: 10px 40px;
    &:hover{
        background-color: @color-purple;
    }
}

.float-right{float: right; margin: 10px 0 10px 10px;}
.float-left{float: left; margin: 10px 10px 10px 0;}
//Main Code
header{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dad1ff+0,716d85+100 */
    background: #dad1ff; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #dad1ff 0%, #716d85 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #dad1ff 0%,#716d85 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #dad1ff 0%,#716d85 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dad1ff', endColorstr='#716d85',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    
    .padding-normal;
    ul{
        margin-bottom: 0!important;
        li{
            margin-top: 10px;
            font-weight: @fw-medium;
            color: #fff;
            a{
                color: #fff;
                font-size: 1em;
                &:hover{
                    color: #ddd;
                }
                i{font-size: 1.8em;}
            }
        }
    }
}
#banner{
    @media only screen and (max-width: 64em) { 
        background-image: url(../img/banner-mobile.jpg);
        background-size: cover;
    }
    
    .padding-normal;
    background-image: url(../img/banner.jpg);
    background-size: cover;
    
    
    *{color: back;}
    
    h1{font-size: 3.1em;}
    
    ul{
        margin-left: 0;
        li{
            list-style: none;
            a{
                font-family: @fw-regular;
                font-size: 0.8em;
            }
        }
    }
    
    p{
        font-weight: @fw-light;
        &.high{
            font-weight: @fw-regular;
            font-size: 1.6em;
        }
    }
}

.indice{
    .padding-normal;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#211f28+0,2f2d37+100 */
    background: #211f28; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #211f28 0%, #2f2d37 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #211f28 0%,#2f2d37 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #211f28 0%,#2f2d37 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#211f28', endColorstr='#2f2d37',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    *{
        color: #fff;
    }
    
    .lateral-inform{
        p{
            font-size: 2em;
            @media only screen and (min-width: 64.063em) {
                margin-top: 50%;
            }
        }
    }
    ul{
        margin: 0!important;
        
        @media only screen and (min-width: 64.063em) { 
            -webkit-column-count: 2; /* Chrome, Safari, Opera */
            -moz-column-count: 2; /* Firefox */
            column-count: 2;
        }
        
        li{
            list-style: none!important;
            margin-left: 0!important;
            a{
                font-size: 0.8em;
//                white-space: nowrap;
                &:hover{
                    border-bottom: 1px dotted #fff;
                    color: #fff;
                }
            }
        }
    }
}

article{
    
    .padding-normal;
    h2{
        font-weight: @fw-thin;
        font-size: 2.1em;
    }
    h3{
        font-weight: @fw-regular;
        font-size: 1.5em;
    }
    
    p{
        font-weight: @fw-light;
    }
    
    &.internal{
        h1{font-weight: @fw-thin;}
        p{font-weight: @fw-light;}
        a{
            color: #0476e8;
            text-decoration: underline;
            &:hover{color: @color-purple/2;}
        }
        li{
            font-weight: @fw-light;
            margin-top: 18px;
        }        
    }
}

footer{
    .first{
        .padding-normal;
        background-color: @color-pink;
        h5{
            font-weight: @fw-thin;
            font-size: 1.5em;
        }
        h6{
            font-weight: @fw-thin;
            font-size: 1.2em;
        }
        i{font-size: 3em;}
        p{font-weight: @fw-light;}
    }
    .second{
        .padding-normal;
        background-color: @color-purple;
        *{color: #fff;}
        h6{font-weight: @fw-bold;}
        p{
            font-weight: @fw-light;
            small{font-size: .7em;}
        }
        h5{
            font-weight: @fw-light;
            font-size: 2em;
            margin-bottom: 5px;
        }
    }
}

//Foundation Edits

.tab-bar{    
    background: #dad1ff; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #dad1ff 0%, #716d85 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #dad1ff 0%,#716d85 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #dad1ff 0%,#716d85 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dad1ff', endColorstr='#716d85',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

@media only screen and (max-width: 64em){
    .left-off-canvas-menu .medias-mobile ul,.right-off-canvas-menu .medias-mobile ul {
        text-align: center;
        margin: 0;
    }

    .left-off-canvas-menu .medias-mobile ul li:first-child,.right-off-canvas-menu .medias-mobile ul li:first-child { display: block; }

    .left-off-canvas-menu .medias-mobile ul li,.right-off-canvas-menu .medias-mobile ul li {
        list-style: none;
        display: inline;
    }

    .left-off-canvas-menu .medias-mobile ul li a,.right-off-canvas-menu .medias-mobile ul li a {
        font-size: 1.5em;
        color: #FFF!important;
    }

    .left-off-canvas-menu .medias-mobile ul li a i,.right-off-canvas-menu .medias-mobile ul li a i {
        font-size: 1.5em;
        margin: 5px;
    }
}

.float-right{float: right;}
figure{
    max-width: 400px;
    figcaption{
        border: 1px solid #000;
        font-size: 0.8em;
        padding: 8px;
        text-align: justify;
    }
}

.left-submenu{height: 100%!important;}
.image-top-page{img{margin-top:45px; }}
.has-submenu{
    background-color: #726e86;
    span{font-size: .7em;}
}