/* Z-INDEX:
1 estructuras centrales
2 cajas graficas y rellenos de graficas, panel solar 2
3 overlays (detalles graficos), textos
*/
@-webkit-keyframes gradientBG{
    0% {
        background-position: 50% 0;
    }
    50% {
        background-position: 50% 100%;
    }
    100% {
        background-position: 50% 0;
    }
}
@keyframes gradientBG {
    0% {
        background-position: 50% 0;
    }
    50% {
        background-position: 50% 100%;
    }
    100% {
        background-position: 50% 0;
    }
}

@-webkit-keyframes floating {
    from { transform: translate(0,  0); }
    50%  { transform: translate(0, 0.375rem); }
    to   { transform: translate(0, -0); }
}
@keyframes floating {
    from { transform: translate(0,  0); }
    50%  { transform: translate(0, 0.375rem); }
    to   { transform: translate(0, -0); }
}

@-webkit-keyframes slide-top {
    0% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        opacity:0;
    }
    20%{
        opacity: 1;
    }
    80%{
        opacity: 1;
    }
    100% {
        opacity:0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}
@keyframes slide-top {
    0% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        opacity:0;
    }
    20%{
        opacity: 1;
    }
    80%{
        opacity: 1;
    }
    100% {
        opacity:0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

@-webkit-keyframes slide-down {
    0% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        opacity:0;
    }
    20%{
        opacity: 1;
    }
    80%{
        opacity: 1;
    }
    100% {
        opacity:0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
}
@keyframes slide-down {
    0% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        opacity:0;
    }
    20%{
        opacity: 1;
    }
    80%{
        opacity: 1;
    }
    100% {
        opacity:0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
}


@-webkit-keyframes slide-right {
    0% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
        opacity:0;
    }
    20%{
        opacity: 1;
    }
    80%{
        opacity: 1;
    }
    100% {
        opacity:0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }
}
@keyframes slide-right {
    0% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
        opacity:0;
    }
    20%{
        opacity: 1;
    }
    80%{
        opacity: 1;
    }
    100% {
        opacity:0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }
}


@-webkit-keyframes slide-left {
    0% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
        opacity:0;
    }
    20%{
        opacity: 1;
    }
    80%{
        opacity: 1;
    }
    100% {
        opacity:0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }
}
@keyframes slide-left {
    0% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
        opacity:0;
    }
    20%{
        opacity: 1;
    }
    80%{
        opacity: 1;
    }
    100% {
        opacity:0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }
}


/* -------------------------------------
// estructura principal
------------------------------------- */
/* mobile */
html{
    font-size: 4.8px;
}
/* tablets */
@media (min-width: 768px){
	html{
        	font-size: 8.7px;
	}
}
/* desktop  hd*/
@media (min-width: 1280px){
	html{
        	font-size: 11px;
	}
}
/* desktop full hd*/
@media (min-width: 1920px){
	html{
        	font-size: 16px;
	}
}
/* 4k */
@media (min-width: 3840px){
	html{
        	font-size: 32px;
	}
}

html{
    display: block !important;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}
body{
    display: block !important;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif !important;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}
.panel-container{
    position: relative;
    color:#000;
    /*width: 1920px;*/
    /*height: 1080px;*/
    /*max-width: 1920px;*/
    /*max-height: 1080px;*/
    width: 100%;
    padding-top: 56%;
}
.resolution--mobile{
    font-size: 4.8px;
}
.resolution--mobile .panel-container{
    width: 568px;
    height: 320px;
    padding-top: 0;
}
.resolution--tablet{
    font-size: 8.7px;
}
.resolution--tablet .panel-container{
    width: 1024px;
    height: 576px;
    padding-top: 0;
}
.resolution--hd{
    font-size: 11px;
}
.resolution--hd .panel-container{
    width: 1280px;
    height: 720px;
    padding-top: 0;
}
.resolution--full-hd{
    font-size: 16px;
}
.resolution--full-hd .panel-container{
    width: 1920px;
    height: 1080px;
    padding-top: 0;
}
.resolution--4k{
    font-size: 32px;
}
.resolution--4k .panel-container{
    width: 3840px;
    height: 2160px;
    padding-top: 0;
}

/*.panel-container--screen-modifier{*/
/*    width: 1856px;*/
/*    height: 1044px;*/
/*    padding: 18px 0 0 32px;*/
/*}*/

.top-block{
    background: rgba(0,156,222,1);
    background: -moz-linear-gradient(top, rgba(0,156,222,.65) 0%, rgba(0,184,227,.65) 70%, rgba(255,181,85,.65) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,156,222,.65)), color-stop(70%, rgba(0,184,227,.65)), color-stop(100%, rgba(255,181,85,.65)));
    background: -webkit-linear-gradient(top, rgba(0,156,222,.65) 0%, rgba(0,184,227,.65) 82%, rgba(255,181,85,.65) 100%);
    background: -o-linear-gradient(top, rgba(0,156,222,.65) 0%, rgba(0,184,227,.65) 70%, rgba(255,181,85,.65) 100%);
    background: -ms-linear-gradient(top, rgba(0,156,222,.65) 0%, rgba(0,184,227,.65) 70%, rgba(255,181,85,.65) 100%);
    background: linear-gradient(to bottom, rgba(0,156,222,.65) 0%, rgba(0,184,227,.65) 70%, rgba(255,181,85,.65) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009cde', endColorstr='#ffb555', GradientType=0 );
    background-size: 150% 150%;
    /*animation: gradientBG 10s ease infinite;*/
    width: 100%;
    height: 67.13%;
    position: absolute;
    overflow: hidden;
    top:0;
    left:0;
}
.night-fog{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.0);
}
.night-time .night-fog{
    background: rgba(0,0,0,.6);
}

.main-structure{
    z-index: 2;
    /*background: url(../../../img/inicio/main-structure.svg) top left no-repeat;*/
}
.main-structure-dividers{
    z-index: 0;
    background: url(../../../img/inicio/loose-parts/dividers.svg) top left no-repeat;
}


/* parte inferior */
.bottom-block {
    position: absolute;
    width: 100%;
    height: 32.87%;
    bottom: 0;
    left: 0;
    overflow: visible;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.main-structure2{
    z-index: 1;
    background: url(../../../img/inicio/main-structure.svg) bottom left no-repeat;
}
.main-logo-er{
    background: url(../../../img/inicio/loose-parts/logo_er_ingenieria.png) center center no-repeat;
    background-size: 78%;
    top: 24.9%;
    position: relative;
    left: 30.5%;
    width: 41%;
    height: 18%;
}
.main-logo-er-panel4{
    background: url(../../../img/inicio/loose-parts/logo_er_ingenieria.png) center center no-repeat;
    background-size: contain;
    position: absolute;
    top: 101%;
    left: 71%;
    width: 10%;
    height: 10%;
}
.main-logo{
    background: url(../../../img/inicio/loose-parts/logo-ER-color.svg) top left no-repeat;
}
.night-time .main-logo{
    background: url(../../../img/inicio/loose-parts/logo-ER-white.svg) top left no-repeat;
}


/* -------------------------------------
// ayudantes
------------------------------------- */

.u-transition{
    transition: all .5s ease;
}
.u-transition-slow{
    transition: all 1s ease-in-out;
}
.u-full-size{
    top:0;
    left:0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100% auto !important;
}
.u-arrow-up{
    z-index: 5;
/*    -webkit-animation: slide-top 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
    animation: slide-top 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;*/
}
.u-arrow-right{
    z-index: 5;
/*    -webkit-animation: slide-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
    animation: slide-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;*/
}
.u-arrow-down{
    z-index: 5;
/*    -webkit-animation: slide-down 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
    animation: slide-down 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;*/
}
.u-arrow-left{
    z-index: 5;
/*    -webkit-animation: slide-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
    animation: slide-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;*/
}

.bottom-block #contenidoGraficaEnergiaTiempoReal {
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}