/*

@font-face {
    font-family: RobotoThin;
    src: url('../font/Roboto/Roboto-Thin.ttf');
}

@font-face {
    font-family: RobotoBold;
    src: url('../font/Roboto/Roboto-Bold.ttf');
}
@font-face {
    font-family: RobotoBlack;
    src: url('../font/Roboto/Roboto-Black.ttf');
}

@font-face {
    font-family: Sabon;
    src: url('../font/Sabon.woff2');
}
*/


@font-face {
    font-family: 'BlackWeb';
    src: url("../font/addidas/adineuePRO-BlackWeb.woff2");
    font-weight: normal;
    font-style: normal; }

@font-face {
    font-family: 'LightWeb';
    src: url("../font/addidas/adineuePRO-LightWeb.woff2");
    font-weight: normal;
    font-style: normal; }
@font-face {
    font-family: 'adipictos-Regular';
    src: url("../font/addidas/adipictos-Regular.woff2");
    font-weight: normal;
    font-style: normal; }

@font-face {
    font-family: 'adihausregular';
    src: url("../font/addidas/adihausregular.woff2");
    font-weight: normal;
    font-style: normal; }
@font-face {
    font-family: 'adihausbold';
    src: url("../font/addidas/adihausbold.woff2");
    font-weight: normal;
    font-style: normal; }



.blackWeb{
    font-family: 'blackWeb';
    font-size: 20px;
}
.LightWeb{
    font-family: 'LightWeb';
    font-size: 20px;
}
.adipictos-Regular{
    font-family: 'adipictos-Regular';
    font-size: 20px;
}
.adihausregular{
    font-family: 'adihausregular';
    font-size: 20px;
}
.adihausbold{
    font-family: 'adihausbold';
    font-size: 20px;
}

h2{
    color: #111111;
    letter-spacing: 6px;
    text-align: center;
    font-family: 'LightWeb';
    display: block;
}
.titulo {
    font-family: 'BlackWeb';
    color: #111111;

}




* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


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


a {
    color: #337ab7;
    text-decoration: none;
}


body{
    margin: 0;
    padding: 0;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -ms-opacity: 1;
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: #323F4F;
    color: #34393E;
    font-family: 'LightWeb';

    font-size: 20px;
    line-height: 24px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

header #menu,header #logo-empresa,header .burger-menu ,header #black-layer {
    display: none;
}

@media (min-width: 768px){
    header{
        -webkit-transition: width 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s;
        -moz-transition: width 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s;
        -ms-transition: width 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s;
        transition: width 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s;
        display: block;
        width: 70px;
        position: fixed;
        height: 100%;
        top: 0%;
        left: 0%;
        z-index: 100;
        background-color: white;
    }
    header #menu,header #logo-empresa,header .burger-menu ,header #black-layer {
        display: block;
    }

    header #black-layer{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        opacity: 0;
        background-color: #000000;
        -webkit-transition: 0.5s opacity ease-in-out;
        -moz-transition: 0.5s opacity ease-in-out;
        -ms-transition: 0.5s opacity ease-in-out;
        transition: 0.5s opacity ease-in-out;
    }


    header #menu {
        position: fixed;
        width: 70px;
        background-color: white;
        left: 0;
        top: 0;
        height: 100%;
        overflow: hidden;
        -webkit-transition: width 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s;
        -moz-transition: width 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s;
        -ms-transition: width 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s;
    }


    header #menu ul{
        font-family: 'LightWeb';
        text-transform: uppercase;
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        left: 70px;
        min-width: calc(35vw - 140px);
        top: 50%;
        opacity: 0;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    header #menu ul li {
        white-space: nowrap;
        cursor: pointer;
        -webkit-transition: 350ms opacity ease-in-out;
        -moz-transition: 350ms opacity ease-in-out;
        -ms-transition: 350ms opacity ease-in-out;
        transition: 350ms opacity ease-in-out;
        font-size: 40px;
        line-height: 60px;
    }
    header #menu ul .titulo_menu {


        font-size: 20px !important;
        color: #FFD600 !important;
        font-family: BlackWeb;
    }

    header #menu ul li a {
        width: 100%;
        display: block;
        white-space: nowrap;
        color: #323F4F;
    }
    header #menu ul li .segundo_nivel {
        font-size: 20px !important;
        color: #333333 !important;
        font-family: BlackWeb !important;
        margin-left: 20px;
    }



    header #menu div#header-control {
        height: 100%;
        width: 70px;
        right: 0;
        top: 0;
        position: absolute;
        cursor: pointer;
    }

    header #menu div#header-control header-state {
        position: absolute;
        top: 50%;
        left: 0%;
        white-space: nowrap;
        -webkit-transform: rotate(-90deg) translate(85%, -13px);
        -moz-transform: rotate(-90deg) translate(85%, -13px);
        -ms-transform: rotate(-90deg) translate(85%, -13px);
        transform: rotate(-90deg) translate(85%, -13px);
        height: 0px;
        width: 70px;
    }
    header #menu div#header-control header-state span {
        margin-left: -60%;
        margin-right: -100%;
        text-align: center;
    }





    header figure{
        width: 70px;
        height: 70px;
        position: absolute;
        bottom: 0;
        right: 0;
        background-image: url("../logo-header.jpg");
        background-size: cover;
    }



    header .burger-menu {
        position: absolute;
        top: 5px;

        right: 15px;
        font-size: 9px;
        cursor: pointer;
    }
    header .burger-menu div{
        position: absolute;
        top: 45px;
        left: 5px;
        font-family: 'LightWeb';
        font-weight: normal;
    }

    header .burger-menu span svg path, header .burger-menu span svg line {
        stroke: #334A79;
    }



    header.active {
        width: 33vw;
        -webkit-transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
        -moz-transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
        -ms-transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
        transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    }

    header.active {
        -webkit-transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
        -moz-transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
        -ms-transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
        transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    }



    header.active #black-layer {
        pointer-events: all;
        opacity: .5 !important;
        -webkit-transition: 0.5s opacity ease-in-out;
        -moz-transition: 0.5s opacity ease-in-out;
        -ms-transition: 0.5s opacity ease-in-out;
        transition: 0.5s opacity ease-in-out;
    }



    header.active #menu {
        width: 33vw;
        -webkit-transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
        -moz-transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
        -ms-transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
        transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    }


    header.active #menu ul {
        min-width: calc(50vw - 140px);
        opacity: 1;
        transform: matrix(1, 0, 0, 1, 0, -180);

    }

    #header-mobile {
        display: none;
    }


}



article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}





header {
    color: #323F4F;
}


main {
    display: block;
    height: 100%;
}



figure{
    margin: 0;
}
figure{
    display: block;
}
header figure{
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 10px;
    -webkit-margin-end: 10px;
}

figure{
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}







div {
    display: block;
}



li {
    display: list-item;
    text-align: -webkit-match-parent;
}



ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}





/*css para la cabezera en una resolucion para mobile*/
header #header-mobile.have-background {
    background-color: #FFFFFF;
}

header #header-mobile {
    position: fixed;
    color: #323F4F;
    width: 100%;
    z-index: 1000000;
    height: 50px;
    overflow: hidden;
    top: 0px;
    -webkit-transition: height 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s, background-color 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s, top 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -moz-transition: height 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s, background-color 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s, top 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -ms-transition: height 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s, background-color 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s, top 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: height 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s, background-color 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s, top 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

header #header-mobile figure {
    position: absolute;
    top: 14px;
    right: 14px;
}

header #header-mobile.have-background path {
    stroke: #323F4F;
}
header #header-mobile path {
    -webkit-transition: all 0.8s cubic-bezier(0.9, 0, 0.33, 1);
    -moz-transition: all 0.8s cubic-bezier(0.9, 0, 0.33, 1);
    -ms-transition: all 0.8s cubic-bezier(0.9, 0, 0.33, 1);
    transition: all 0.8s cubic-bezier(0.9, 0, 0.33, 1);
    stroke: #FFFFFF;
    fill: transparent;
}

header #header-mobile {
    position: fixed;
    color: #323F4F;
    width: 100%;
    z-index: 100;
    height: 50px;
    overflow: hidden;
    top: 0px;
    -webkit-transition: height 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s, background-color 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s, top 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -moz-transition: height 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s, background-color 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s, top 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -ms-transition: height 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s, background-color 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s, top 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: height 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s, background-color 0.5s cubic-bezier(0.9, 0, 0.33, 1) 0.2s, top 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

header #header-mobile .burger-menu-mobile svg {
    position: absolute;
    top: 10px;
    left: 14px;
}
header #header-mobile.have-background line {
    stroke: #323F4F;
}
header #header-mobile line {
    -webkit-transition: stroke 0.5s cubic-bezier(0.9, 0, 0.33, 1);
    -moz-transition: stroke 0.5s cubic-bezier(0.9, 0, 0.33, 1);
    -ms-transition: stroke 0.5s cubic-bezier(0.9, 0, 0.33, 1);
    transition: stroke 0.5s cubic-bezier(0.9, 0, 0.33, 1);
    stroke: #FFFFFF;
}
header #header-mobile.have-background .burger-menu-mobile div {
    color: #323F4F;
}
header #header-mobile .burger-menu-mobile div {
    font-size: 9px;
    color: #FFFFFF;
    position: absolute;
    top: 27px;
    left: 15px;
    font-weight: bold;
    -webkit-transition: color 0.5s cubic-bezier(0.9, 0, 0.33, 1);
    -moz-transition: color 0.5s cubic-bezier(0.9, 0, 0.33, 1);
    -ms-transition: color 0.5s cubic-bezier(0.9, 0, 0.33, 1);
    transition: color 0.5s cubic-bezier(0.9, 0, 0.33, 1);
}

header #header-mobile #menu-mobile {
    position: fixed;
    top: 50%;
    left: 5%;
    font-size: 35px;
    font-family: 'LightWeb';
    line-height: 50px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
}

header #header-mobile #menu-mobile ul {
    pointer-events: none;
    list-style: none;
    transition-delay: 0s;
}
header #header-mobile #menu-mobile ul li {
    opacity: 0;
    transition-delay: 0s;
}

header #header-mobile #menu-mobile ul li a {
    width: 100%;
    display: block;
    white-space: nowrap;
    color: #323F4F;
}


header #header-mobile #menu-mobile ul .titulo_menu {


    font-size: 20px !important;
    color: #FFD600 !important;
    font-family: BlackWeb;
}


header #header-mobile #menu-mobile ul li .segundo_nivel {
    font-size: 20px !important;
    color: #333333 !important;
    font-family: BlackWeb !important;
    margin-left: 20px;
}


header #header-mobile.active {
    height: 100vh;
    background-color: #FFFFFF;
    -webkit-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
    -moz-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
    -ms-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
}

header #header-mobile.active .burger-menu-mobile div {
    -webkit-transition: color 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
    -moz-transition: color 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
    -ms-transition: color 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
    transition: color 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
    color: #323F4F;
}



header #header-mobile.active #menu-mobile {
    pointer-events: all;
}

header #header-mobile #menu-mobile {
    position: fixed;
    top: 50%;
    left: 5%;
    font-size: 35px;
    font-family: LightWeb;
    line-height: 50px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
}

header #header-mobile.active #menu-mobile ul {
    pointer-events: all;
    transition-delay: 0s;
}
header #header-mobile.active #menu-mobile ul li {
    transition-delay: 0s;
    opacity: 1;
}

@media (min-width: 768px){
    #header-mobile {
        display: none;
    }


}
/*FIN*/
/*css para la cabezera en una resolucion para mobile*/





/*CSS PARA EL CONTENIDO*/

#el-contenido {
    /*position: relative;*/
    margin-left: 0px;
    height: 100%;
    overflow:auto;
    clear: both;


}
#el-contenido .views-container {
    position: absolute;
    width: 100%;
    height: 100%;

}


@media (min-width: 768px){
    #el-contenido {
        margin-left: 60px;
    }

}

/* FIN CSS PARA EL CONTENIDO*/



loading {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #FFD600;
    z-index: 1000;
    -webkit-transition: opacity 350ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -moz-transition: opacity 350ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -ms-transition: opacity 350ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: opacity 350ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}


loading svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

loading svg {
    width: 50px;
    height: 50px;
}
loading svg path{
    fill: #111;
}

loading div {
    position: absolute;
    top: 55%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


.popUpMensaje {
    position: fixed;
    width: 50%;
    height: 50%;
    background-color: #ffffff;
    z-index: 10000000;
    -webkit-transition: opacity 350ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -moz-transition: opacity 350ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -ms-transition: opacity 350ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: opacity 350ms cubic-bezier(0.455, 0.03, 0.515, 0.955);

    top:25%;
    left: 25%;


}
.popUpCerrar{
    float: right; margin-right: 20px; margin-top: 20px;
}

@media (max-width: 769px) {
    .popUpMensaje {
        width: 60%;
        height: 80%;
        top:5%;
        left: 20%;

    }
    .popUpCerrar{
        float: right;
        position: absolute;
        top: 20px;
        right: 0px;
    }

}