@import "/Style Library/ARN/styles/vars.less";

.nopadding {
    padding: 0 !important;
}
.ms-fullscreenmode #sideNavBox{
    display: block ;
}
#header {
    .sub-header {
        background: @tic;
        padding: 10px 0;
        margin-bottom: 25px;

        img {
            height: 20px;
        }
    }

    .logo-ins {
        img {
            margin-top: 75px;
            margin-bottom: 30px;
            width: 300px;
            height: 48px
        }
    }

    .redes {
        #main_tools {
            #SignIn {
                display: inline-block;

                a {
                    font-weight: bold;
                    color: #000;
                    font-size: 14px;
                    font-style: italic;
                }
            }

            #Header_SearchBox {
                display: inline-block;
                float: right;
            }
        }

        #header_links {
            text-align: right;
            margin-top: 50px;

            #font_resizer,
            #change_contrast,
            #language_switcher {
                height: 32px;
                margin-left: 2px;
                padding-left: 5px;
                padding-right: 5px;
                background-color: @blanco;
                display: inline-block;
                border-radius: 5px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -ms-border-radius: 5px;
                opacity: 0.7;
                filter: alpha(opacity=70);

                body.small #font_resizer .small,
                body.medium #font_resizer .medium,
                body.large #font_resizer .large {
                    text-decoration: underline;
                }

                #font_resizer .medium,
                body.medium {
                    font-size: medium;
                }

                #font_resizer .large,
                body.large {
                    font-size: large;
                }
            }

            .header_icon {
                display: inline-block;
                width: 32px;
                height: 32px;
                // text-indent: -9999px;
                border: none;
                margin-left: 5px;
                background-color: transparent;
                background-position: bottom center;
                background-repeat: no-repeat;
                opacity: 0.7;
                filter: alpha(opacity=70);
                text-decoration: none;

                &:hover {
                    opacity: 1.0;
                    filter: alpha(opacity=100);
                    background-position: bottom center;
                }
            }

            #change_contrast {
                background-color: #000;
                text-align: center;
                width: 32px;
                padding-top: 2px;
                position: relative;
                top: 3px;

                a {
                    font-size: large;
                    color: #ff0;
                    font-weight: bold;
                }
            }
        }
    }

    #menu-sharepoint {
        .ms-core-listMenu-root {
            padding: 0 15px;

            li {
                list-style: none;

                a {
                    color: @arn;
                }

                ul.dynamic {
                    min-width: 100% !important;
                    padding: 0;
                    li {
                        a {
                            padding: 7px;
                            color: @arn;
                            width: 100%;

                            span {
                                display: block;
                                width: 95%;
                            }
                        }

                        &:hover {
                            a {
                                background: @arn;
                                color: @blanco;
                            }

                            ul {
                                li {
                                    a {
                                        background: 0;
                                        color: @arn;
                                    }
                                }
                            }
                        }

                        ul {
                            li {
                                &:hover {
                                    a {
                                        background: @arn;
                                        color: @blanco;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

footer {
    background: #e6e6e6;
    padding: 20px 0;

    span {
        font-size: small;
    }

    a {
        color: #2f7799;
        font-size: small;
    }
}

#s4-bodyContainer {
    padding-bottom: 0;
}

/****************** INICIO HOME **********/

#home {
    .slider {
        #slider-home {
            .conten-image.item {
                height: 480px;
                background-position: bottom center !important;
                background-size: cover !important;
                position: relative;

                .description {
                    position: absolute;
                    padding: 5px;
                    font-weight: 400;
                    width: 100%;
                    padding: 5px 10px;
                    background-color: #444;
                    background: rgba(68, 68, 68, 0.53);
                    left: 0;

                    p {
                        color: @blanco;

                        a {
                            color: orange;
                            text-decoration: none;
                            text-transform: uppercase;
                            font-weight: bold;
                        }
                    }
                }
            }

            .owl-dots {
                position: absolute;
                top: 0;
                right: 0;

                .owl-dot {
                    min-width: 24px;
                    min-height: 24px;

                    span {
                        width: 24px;
                        height: 24px;
                        background: #444;
                        border: 1px solid #444;
                    }

                    &:hover {
                        span {
                            background: @blanco;
                        }
                    }

                    &.active {
                        span {
                            background: @blanco;
                        }
                    }
                }
            }
        }
    }

    .vin-link {
        margin: 40px 0;
    }

    #conocimientos {
        margin: 40px 0;
    }

    #externos {
        margin: 40px 0;

        li {
            padding-left: 0;

            img {
                width: 100%;
            }
        }
    }

    #diferent {
        margin:0;

        li {
            padding-right: 10px;

            a {
                padding: 10px;
                border: 1px solid;
                border-radius: 5px;
                font-size: 12px;
                color: #2f7799;

                &:hover {
                    text-decoration: none;
                    background: @arn;
                    color: @blanco;
                }
            }
        }
    }
}

ul.nopadding {
    padding: 0;
    li {
        list-style: none;
    }
}

.colum-5 {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
    position: relative;
    width: 20%;
    padding-right: 15px;
    padding-left: 0;

    img {
        width: 100%;
        height: 100%;
    }
}

#contentRow {
    display: table;

}

#sideNavBox {
    margin-left: 0;
    margin-right: 20px;
    width: 250px;
    background: #eee;

    .ms-core-sideNavBox-removeLeftMargin {
        margin-left: 0;

        .ms-core-listMenu-root {
            li {
                a {
                    border-bottom: 1px solid @blanco;
                }
            }

            .static.selected {
                a {
                    color: @arn;
                }

                ul {
                    li {
                        a {
                            color: #666666;
                        }
                    }
                }
            }
        }

    }
}

#pageContent {
    .content-breadcrumb {
        font-size: small;
    }

    #pageTitle {
        padding-bottom: 10px;
        border-bottom: solid 1px #ccc;

        span {
            font-size: 30px;
        }
    }
}

.ms-webpart-titleText.ms-webpart-titleText,
.ms-webpart-titleText>a,
.ms-webpart-titleText>a:hover,
.ms-webpart-titleText>a:visited,
.ms-webpart-titleText>a:link {
    color: #3366cc !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    font-size: 18px !important;
    margin: 0;
    padding: 0;
}

#contentBox1 {
    margin-left: 300px;
}

.level-header {
    padding: 2px 0px 2px 0px;

    span.headertitle.headermarker {
        margin: 5px;
        padding: 5px;
        border: solid 1px #ccc;
        display: inline-block;
    }
}

a:visited {
    color: #3FAEF7;
}
.ms-srch-sb>input{
    width: 190px;
}
/****************** FIN HOME **********/

@media (min-width: 1360px) {
    .container {
        max-width: 1250px;
    }
}

@media (min-width: 1450px) {
    .container {
        max-width: 1340px;
    }
}

@media (min-width: 1580px) {
    .container {
        max-width: 1420px;
    }
}

@media (max-width: 767px){
    #header #menu-sharepoint .ms-core-listMenu-root li ul.dynamic{
        left: 0 !important;
    }
    #header{
        .logo-ins{
            img{
                margin-top: 0;
                width: 100%;
                height: auto;
            }
        }
        .redes{
            #main_tools{
                #Header_SearchBox{
                    display: none;
                }
                #header_links{
                    margin: 20px 0;
                    #font_resizer{
                        display: none;
                    }
                    
                }
            }
        } 
    }
    
    
    #home{
        .slider{
            #slider-home{
                .conten-image.item{
                    height: 355px;
                    background-position: top left !important;
                }
            }
        }
        #diferent{
            li{
                padding: 12px;
            } 
        } 
    }
    #main_footer{
        text-align: center;
        .col-12.col-md-4{
            border: none !important;
        }
    }
    .contenedor_vid{
        padding: 0 !important;
        iframe{
            width: 100%;
            height: 185px;
        }
    }
    .header-second{ 
        #menu-sharepoint{ 
            width: 100% !important;
        }
    }
    .header-second{ 
           	

        #menu-sharepoint ul li:hover > ul.dynamic {
            display: block;
            min-width: 94%;
            padding: 5px 0;
            box-shadow: rgba(0, 0, 0, 0.7) 0px 0px 0px 0px !important;
            position: absolute; 
            position: relative !important;
            top: 5px !important;  
            margin-bottom: 14px;
        }   

       div#navbarNav {   
            background: #ededed;
            -webkit-box-shadow: 10px 10px 16px -6px rgba(0,0,0,0.54);
            -moz-box-shadow: 10px 10px 16px -6px rgba(0,0,0,0.54);
            box-shadow: 10px 10px 16px -6px rgba(0,0,0,0.54);
        }


        nav.navbar.navbar-expand-lg {
            position: absolute;
            width: 100%;
            float: left;				     
            z-index:30;
             padding: 0;
                margin-top: 11px;
        }  
        nav{
            justify-content: flex-start!important;
            ul#zz10_RootAspMenu {					   
                background: transparent!important;
                z-index: 9999999!important; 						
                float: left!important;						
                width: 100% !important;  

                li {
                    position: relative;  
                  
                }					

            }
            

        }
        #navbarNav{
            .ms-core-listMenu-horizontalBox,
            .ms-core-listMenu-horizontalBox ul,
            .ms-core-listMenu-horizontalBox ul a{
                width: 100%;
                padding: 10px;
            }

        }
        #menu-sharepoint{
            padding-right: 0;

            .navbar-brand {					    
            left: 12px !important;
            position: relative;
            }

             ul li:hover > a > span {
                border-bottom:0px solid transparent !important;

            }
        }
        .header-search-icon{
            display: flex;
            align-self: flex-start;
            margin-right: 15px;
            padding-top: 20px;
        }
        #menu-sharepoint ul li{
            display: block;
            height: auto;
            border-right: none;
            border-left: none;
            &.dynamic-children{
                height: auto;
            }
            i.fas.fa-angle-down {
                display: inline-flex;
                padding: 0px 15px;
                z-index: 1000;
            }
            &:first-child{
                border-left: none;
            }
        }
    } 
    .ms-fullscreenmode #contentBox1{
        margin-left: 0 !important;
        min-width: 100%;
    }
    .ms-core-listMenu-horizontalBox .dynamic-children.additional-background{
        background-position: right;
        padding-right: 40px;
        display: block;
    }
    .ms-fullscreenmode #sideNavBox{
        width: 100%;
        display: block;
    }
    #contentBox1{
        margin: 0 !important;
    }
    #change_contrast{
        display:none !important;
    }
}