:root{
    --colorTexto:#EEE;
}
body{
    background-color: #111;
    color:white;
    overflow: hidden;
    position: relative;
  /*  background-image: url("../assets/img1.jpg");*/
    background-position: center;
    background-size: cover;
}
#bkImg{
    width: 100vw;
    height: 100vh;
    position:fixed;
    z-index: 0;
    background-color:#111;
    opacity: 0;
    transition: .5s;
    background-position: center;
    background-size: cover;
}
/*body.pag1{
    background-image: url("../assets/img1.jpg");
}
body.pag2{
    background-image: url("../assets/img2.jpg");
}
body.pag3{
    background-image: url("../assets/img3.jpg");
}
body.pag4{
    background-image: url("../assets/img4.jpg");
}
body.pag5{
    background-image: url("../assets/img5.jpg");
}
body.pag6{
    background-image: url("../assets/img6.jpg");
}
body.pag7{
    background-image: url("../assets/prueba.jpg");
}
body.pag7.consultor{
    background-image: url("../assets/prueba.jpg");
}
body.pag7.sistemas{
    background-image: url("../assets/prueba.jpg");
}
body.pag7.desarollo{
    background-image: url("../assets/prueba.jpg");
}
body.pag7.cloud{
    background-image: url("../assets/prueba.jpg");
}
body.pag7.identidad{
    background-image: url("../assets/prueba.jpg");
}*/
.encabezadoBlgg{
    display: none;
}
#hamburguesa{
    height: 50px;
    width: 50px;
    position: fixed;
    z-index: 900;
    top: 20px;
    right:20px;
    cursor: pointer;
}
#logo{
    height: 60px;
    width: 180px;
    position: fixed;
    z-index: 1700;
    top:20px;
    left: 20px;
    transition: .3s;
}
#logo img{
    height: 60px;
   
}
#hamburguesa div{
    height: 7px;
    background-color: white;
    margin-bottom: 10px;
    border-radius: 3px;
    width:100%;
    transition: .3s;
    position: relative;
    left:0px;
}
#hamburguesa #mh1{
    background-color: var(--colorPrincipal);
}
#hamburguesa #mh2{
    background-color: var(--colorSecundario);
}
#hamburguesa #mh3{
    background-color: var(--colorTerciario);
}
#hamburguesa:hover #mh1{
    width:33%;
}
#hamburguesa:hover #mh2{
    width:66%;
}
#hamburguesa:hover #mh3{
    width:90%;
}

#grd{
    width:100vw;
    height: 100vh;
    position: relative;
    top:0vh;
    left:0vw;
    transition: 0.5s;
    filter: blur(0px);
    overflow: hidden;
}
#grd .pagGrid{
    width:100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-size: cover;
}
.grdCols.col1{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;

}
.grdCols.col2{
    width: 200vw;
    height: 100vh;
}
.grdCols.col3{
    width: 300vw;
    height: 100vh;
}
.grdCols.col4{
    width: 400vw;
    height: 100vh;
}
.grdCols.col5{
    width: 500vw;
    height: 100vh;
}
.grdCols.col6{
    width: 600vw;
    height: 100vh;
}
.grdCols.col7{
    width: 700vw;
    height: 100vh;
}
.contPagina{
    max-width: 70%;
}
.grdCols{
    height: 83.33vw;

    display: flex;
    flex-wrap: wrap;
    transition:.5s;
    position: relative;
    left: 0vh;
}
.grdCols .grd_col{
    width: 83.33vw;
    margin:auto;
    position: relative;
    z-index: 700;
}
menu{
    position: fixed;
    z-index: 1500;
    right: -100vw;
    top: 0px;
    height:100vh;
    width:100vw;
    background: rgb(0,0,0);
;
    background: -moz-linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.7) 77%, rgba(0,0,0,0.7) 100%);
    background: -webkit-linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.7) 77%, rgba(0,0,0,0.7) 100%);
    background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.7) 77%, rgba(0,0,0,0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
    transition: .5s;
    opacity: 0;
    transition-delay: .7s;
}
.menuDesplegado menu{
    right: 0vw;
    opacity: 1;
    transition-delay: .7s;
}
.menuDesplegado #grd{
    filter: blur(2px);
    transition-delay: .7s;
}
.menuDesplegado #hamburguesa #mh1{
    left:200px;
}
.menuDesplegado #hamburguesa #mh2{
    transition-delay: .2s;
    left:250px;
}
.menuDesplegado #hamburguesa #mh3{
    transition-delay: .5s;
    left:300px;
}
body.menuDesplegado #logo{
    left:-200px;
}
menu #menucon{
    position: absolute;
    height:100vh;
    width: 16.6vw;
    right: 5vw;
    padding-top: 120px;
    padding-bottom: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
menu #menucon .menuopt{
    margin-bottom: 20px;
    font-size: 28px;
    padding-left: 20px;
    margin-left: -20px;
    cursor: pointer;
    transition: .3s;
}
menu #menucon .menuopt:hover{
    padding-left: 40px;
    color:var(--colorPrincipal)
}
menu #menucon .menuopt.slect{
    border-left: 3px solid var(--colorPrincipal);
}
menu #menucon #Links{
    width:240px;
	margin-top:40px;
}
menu #menucon #Links h2{
	font-size:var(--h4);	
}
menu #menucon #Links .menuopt{
    margin-bottom: 5px;
    font-size: var(--p2);
}
menu #menuRRSS{
    padding-top:15px;
    padding-bottom:15px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
margin-top: 30px;
  margin-bottom: 30px;	
}
menu #menuRRSS a{
    font-size:26px;
}
menu #Links div{
    margin-bottom: 5px;
}
#cntrl_paginado{

}
#cntrl_paginado div{
    padding:10px;
    font-size:100px;
    width:var(--col-1);
    text-align: center;
    transition: .3s;
    cursor: pointer;
    color:white;
    position: relative;


    position: fixed;
    z-index: 500;
    right: 0px;
    width:100vw;
    top: calc(50vh - 90px);
    display: flex;
    align-items: center;
    height: 180px;
    width: var(--col-1);

}
#cntrl_paginado #flechaLeft{
    left:0px;
}
#cntrl_paginado #flechaRight{
    right:0px;
}
#cntrl_paginado div:hover{
    color:var(--colorInteraccion);
    font-size:100px;
}
#cntrl_paginado div.NoAcc{
    cursor: inherit;
    opacity: 0;
}
#cntrl_subBar{
    position: fixed;
    height:10px;
    width:100vw;
    bottom: 0px;
    right: 0px;
    background: var(--colorPrincipal);;
}

#salirMenu{
    position: absolute;
    top: 40px;
    right: -80px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}
#salirMenu div{
    width: 50px;
    height:5px;
    border-radius: 10px;
    transition: .3s;
    top: 20px;
    position: relative;
	background-color:#FFF;
}
#salirMenu:hover div{
    background-color: var(--colorPrincipal);
}
#salirMenu div.equisUno{
    transform:rotate(135deg)
}
#salirMenu div.equisDos{
    transform:rotate(45deg);
    margin-top: -3px;
}
#salirMenu:hover div.equisDos{
    background-color: var(--colorSecundario);
}
.menuDesplegado #hamburguesa{
    animation-delay: .5s;
}
body.showPantHover #hamburguesa{
    right:-200px;
}
body.showPantHover #logo{
    left:-200px;
}
.dotGrid{
    position: relative;
    z-index: 200;
}
.dotGrid .dotGrid_flex{
    display: flex;
    height:15px;
}
@keyframes gridDotBrilli1 {
    0%   {opacity:.7;}
    20%  {opacity:0.3;}
    40%  {opacity:0.5;}
    60%  {opacity:.8;}
    80%  {opacity:1;}
    100% {opacity:.7;}
}
@keyframes gridDotBrilli2 {
    0%   {opacity:1;}
    20%  {opacity:0.8;}
    40%  {opacity:0.5;}
    60%  {opacity:1;}
    80%  {opacity:.5;}
    100% {opacity:.7;}
  }
  @keyframes gridDotBrilli3 {
    0%   {opacity:.3;}
    20%  {opacity:0.7;}
    40%  {opacity:1;}
    60%  {opacity:.8;}
    80%  {opacity:.5;}
    100% {opacity:.7;}
  }
.dotGrid .dotGrid_flex .dotGrid{
    width:3px;
    height:3px;
    margin:5px 10px 5px 10px;
    opacity:1;
    transition:60s;
    opacity: .7;
    animation-duration: 60s;
    animation-name: gridDotBrilli1;
    animation-iteration-count: infinite;
    position: relative
}
.dotGrid .dotGrid_flex .dotGrid.anim1{
    animation-name: gridDotBrilli1;
}
.dotGrid .dotGrid_flex .dotGrid.anim2{
    animation-name: gridDotBrilli4;
}
.dotGrid .dotGrid_flex .dotGrid.anim3{
    animation-name: gridDotBrilli3;
}
.elipGrid{
    overflow: hidden;
    position: absolute;
    z-index: 200;
}
.elipGrid .dotElip{
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: red;
    margin-top:60px;
    margin-left:20px;
}
.elipGrid .elipGrid_circle{
    border-top:1px solid rgba(255,255,255,0.5);
    border-left:1px solid rgba(255,255,255,0.5);
    border-right:1px solid rgba(255,255,255,0.5);
    padding:15px;
}
#layoutPdf{
    display: none;
}
body.pag7 h2{
	font-size:var(--h2);	
}
@media(max-width:860px){
    body.pag3 .blqServ > div{
        font-size:0.8em;
    }

}
@media(max-width:800px){
    body.pag3 .r4 p{
            font-size:0.8em;

    }
}
@media(max-width:768px){
	h1, .titulo1{
		font-size: 40px;
  line-height: 44px;
	}
    menu #menucon{
        width: 200px;
        right: 40px;
    }
    #cntrl_paginado div{
        top: auto;
        bottom: 20px;
        width:100px;
        font-size:40px;
        text-align: center;
        display: block;
        height: 60px;;
    }
    #salirMenu{
        top: 20px;
        right: -20px;
    }
}


@media(max-width:800px){
    #cntrl_paginado div:hover{
        font-size: 40px;
    }

}

#avisoCookies{
    position: fixed;
    bottom:0px;
    width:100vw;
    height:30vh;
    z-index: 9999;
    background: rgb(17,17,17);
    background: -moz-linear-gradient(180deg, rgba(17,17,17,0) 0%, rgba(17,17,17,0.921988863904937) 73%, rgba(17,17,17,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(17,17,17,0) 0%, rgba(17,17,17,0.921988863904937) 73%, rgba(17,17,17,1) 100%);
    background: linear-gradient(180deg, rgba(17,17,17,0) 0%, rgba(17,17,17,0.921988863904937) 73%, rgba(17,17,17,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#111111",endColorstr="#111111",GradientType=1); 
}
#avisoCookies #bannerCookies{
    position: absolute;
    width: 90vw;
    left:5vw;
    bottom:5vh;
    padding:20px;
    background-color:rgba(216,216,216) !important;
    color:#111 !important;
    border-radius: 20px;
}
#avisoCookies #bannerCookies h2{
    color:var(--colorPrincipal) !important;
    font-size:18px;
    margin-bottom: 10px;
    margin-top: 0px;
}

#avisoCookies #bannerCookies p{
    color:#111 !important;
    font-size:0.8em;
    margin-bottom: 0px;
}