section, footer {
    width: 100%;
    max-width: 1920px;
    margin: auto;
}

/* QUIENES SOMOS */
#quienessomos {
    background: url("../images/vintage_speckles.png");
    padding-top: 140px;
    padding-bottom: 100px;    
}

#quienessomos-container {
    width: 90%;
    max-width: 860px;
    margin: auto;
    display: grid;
    grid-template-columns: 268px 266px 264px;
    grid-template-rows: auto 308px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#quienessomos-container h3 {
    color: #3080f1;
    grid-column: 1 / 4;
    text-align: right;
    width: 530px;
    justify-self: end;
}

#quienessomos-container a:nth-of-type(2){
    -ms-flex-item-align: center;
    align-self: center;
}

#quienessomos-container a:nth-of-type(3){
    -ms-flex-item-align: end;
    align-self: end;
}

#quienessomos-container h5 {
    color: #555;
}

/* APLICACIONES Y JUEGOS */
#aplicaciones-juegos {
    /*clear: both;/*esto limpia los espacios, etc. cuando queda luego a una sección en donde se hizo algo raro*/
    /*background: radial-gradient(circle at calc(50% - 300px), #a075fb, #594edd);*/
    background: radial-gradient(circle at calc(50% - 300px), #ffdb88, #fcb24f 40%, #dd6835);
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: right;
    overflow: hidden;
    position: relative;
}

.section-container {
    width: 90%;
    max-width: 860px;
    min-height: 615px;
    margin: auto;
    display: grid;
    grid-template-columns: 60% 32%;
    grid-row-gap: 15px;
    justify-items: start;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    z-index: -1;
}

#service-graphic-1 {
    height: 550px;
}

.apps-layer1 {
    margin-top: calc(0px + 200px);
    margin-left: -100px;
}

.apps-layer2 {
    margin-top: calc(18px + 160px);
    margin-right: 67px;
}

.apps-layer3 {
    margin-top: calc(15px + 120px);
    margin-right: 67px;
}

.apps-layer4 {
    margin-top: calc(-44px + 80px);
    margin-left: 0px;
}

.service-info {
    display: grid;
    grid-template-rows: repeat(4, auto);
    justify-items: end;
    grid-row-gap: 15px;
    /*background: rgba(255, 255, 255, 0.1);*/
    -ms-flex-line-pack: start;
    align-content: center;
}


/* IDENTIDAD CORPORATIVA */
#identidad-corporativa {    
    background: radial-gradient(circle at calc(50% - 300px), #e4e4d9, #7daf06 75%);
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: right;
    overflow: hidden;
    position: relative;
}

#service-graphic-2 {
    width: 550px;
    height: 550px;
}

.brand-layer1 {
    position: absolute;
    top: -90px;
    left: 250px;
}

.brand-layer2 {
    position: absolute;
    top: -170px;
    left: -500px;
}

.brand-layer3 {
    position: absolute;
    top: 480px;
    left: 170px;
}

.brand-layer4 {
    position: absolute;
    top: 100px;
    left: -80px;
}

.brand-layer5 {
    position: absolute;
    top: 140px;
    left: 250px;
}

.brand-layer6 {
    position: absolute;
    top: 120px;
    left: -90px;
}

.brand-layer7 {
    position: absolute;
    top: 60px;
    left: 300px;
}

.brand-layer8 {
    position: absolute;
    top: -30px;
    left: 70px;
}

/* RENDER Y ANIMACIÓN */
#render-animacion {    
    background: radial-gradient(circle at calc(50% - 330px), #fff 15%, #6268b7 80%, #4c529a 120%);
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: right;
    overflow: hidden;
    position: relative;
}

#service-graphic-3 {
    width: 550px;
    height: 550px;
}

.render-layer1 {
    position: absolute;
    top: -90px;
    left: -300px;
}

.render-layer2 {
    position: absolute;
    top: -70px;
    left: -240px;
}

.render-layer3 {
    position: absolute;
    top: 490px;
    left: 30px;
}

.render-layer4 {
    position: absolute;
    top: 100px;
    left: -240px;
}

.render-layer5 {
    position: absolute;
    top: 60px;
    left: 30px;
}

.render-layer6 {
    position: absolute;
    top: 350px;
    left: -240px;
}

.render-layer7 {
    position: absolute;
    top: 20px;
    left: -200px;
}

/*SPRITE ANIMATIONS*/

#apps-sprite {
    background: url("../images/apps-sprite-sheet.png");
    margin: auto;
    width: 110px;
    height: 110px;
    -webkit-animation: appsSprite 4s infinite steps(17);
    animation: appsSprite 4s infinite steps(17);
    margin-top: calc(-44px + 234px);
    margin-left: 216px;
}

@-webkit-keyframes appsSprite {
    0% {
        background-position: left;
    }
    15% {
        background-position: right;
    }
    100% {
        background-position: right;
    }
}

@keyframes appsSprite {
    0% {
        background-position: left;
    }
    15% {
        background-position: right;
    }
    100% {
        background-position: right;
    }
}

/*LIGHTBOX GALLERY*/
#lightgallery1{
    background: radial-gradient(circle at calc(50% - 300px), #fcb24f 40%, #dd6835);
}

#lightgallery2{
    background: radial-gradient(circle at calc(50% - 300px), #a9c16d, #7daf06 75%);
}

#lightgallery3{
    background: radial-gradient(circle at calc(50% - 300px), #9fa4d8, #6268b7);
}

.gallery {
    clear: both;    
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(2, auto);
}

.gallery a {
    /*background: #735ce8;*/
    overflow: hidden;
    position: relative;
    float: left;
    cursor: pointer;
    cursor: url("../img/icon-zoom.png"), auto;
}

.gallery a .thumb {
    -webkit-transition: all 700ms ease 0s;
    transition: all 700ms ease 0s;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;    
    display: block;
    
}

.gallery a:hover .thumb {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0;
}

.gallery a div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0px;
    bottom: 0px;
    padding: 0 15%;
    display: grid;
    -ms-flex-line-pack: center;
    align-content: center;  
}

.gallery a div .icon{
    /*width: 30px;*/
    height: 30px;
    float: left;
    margin-top: -10px;
    margin-right: 5px;
    display: inline-block;
    
}

.gallery a div .info {
    padding-top: 8px;
    padding-bottom: 14px;
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms;
}

.gallery a div .client{
    -webkit-transition-delay: 300ms;
    transition-delay: 300ms;
}
.gallery a div .client:before {
    content: "";
    display: block;
    background: white;
    width: 18%;
    height: 1px;
    margin-top: -5px;
    margin-bottom: 5px;
    -webkit-transition: width 900ms ease 0s;
    transition: width 900ms ease 0s;
}
.gallery a:hover div .client:before {    
    width: 32%;    
}

.gallery a div .client:after {
    content: "ver proyecto";
    display: block;
    font-size: 11px
}

.gallery a div *{
    opacity: 0;
    -webkit-transform: translate(-5px, 5px);
    transform: translate(-5px, 5px);
    -webkit-transition: all 600ms ease 0s;
    transition: all 600ms ease 0s;
}

.gallery a:hover div *{
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}

/*some custom lightbox thumbs*/

.lg-backdrop {
    background: rgba(0, 0, 0, 0.85) !important;
}

.lg-outer .lg-thumb-item {
    border: none !important;
    border-radius: 3px !important;
}

.lg-thumb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.lg-sub-html h4 {
    padding: 1.6vh;    
    font-size: 20px !important;
    font-weight: normal !important;
    letter-spacing: 0.04em;
    font-family: 'Maven Pro', sans-serif;
}

.lg-sub-html p {
    padding-bottom: 3vh;  
}

.lg-actions .lg-next, .lg-actions .lg-prev {
    border-radius: 30px !important;
}
.lg-actions .lg-prev:after {
    font-family: FontAwesome !important;
    content: "\f104" !important;
    font-size: 36px;
    padding: 0 11px 0 9px;
}
.lg-actions .lg-next:before {
    font-family: FontAwesome !important;
    content: "\f105" !important;
    font-size: 36px;
    padding: 0 9px 0 11px;
}

/*MEDIA QUERIES*/

/* MQ Lightbox Gallery */
@media (max-width: 1500px) {
    .gallery {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 17.5vw 17.5vw;
    }
    .gallery a div {       
        padding: 10px 15% 0 15%;
    }
}

@media (max-width: 1300px) {
    .gallery {
        grid-template-columns: repeat(3, auto);
        grid-template-rows: auto auto 0;
    }
    .gallery a div {       
        padding: 0 15%;
    }
}

/* MQ Section Services */
@media (max-width: 960px) {
    /* Quienes Somos */
    #quienessomos-container {        
        grid-template-columns: auto auto auto;
        grid-template-rows: auto calc(487px - 20vw);
        grid-gap: 30px;
    }
    
    /* Apps y Juegos */
    .section-container {
        grid-template-columns: calc(40vw + 100px);
        /*grid-template-rows: calc(20vw + 250px) auto;*/
        grid-row-gap: 0px;
        justify-items: start;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: end;
    }
    
    #service-graphic-1 {
        grid-row: 1;
        -webkit-transform: scale(1) translateX(-180px) !important ;
        transform: scale(1) translateX(-180px) !important ;
        margin-top: -20px;
        margin-bottom: -140px;
    }
    
    .gallery {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: auto auto 0 auto auto 0;
    }
    
    /* Identidad Corporativa */
    #service-graphic-2 {        
        grid-row: 1;
        -webkit-transform: scale(1) translateX(-180px) !important ;
        transform: scale(1) translateX(-180px) !important ;
        margin-top: -20px;
        margin-bottom: -140px;
    }    
    .brand-layer3 {
        display: none;
    }
    
    /* Render y Animacion */    
    #render-animacion {    
        background: radial-gradient(circle at calc(50% - 200px) 30%, #fff 15%, #6268b7 90%)        
    }
    
    #service-graphic-3 {        
        grid-row: 1;
        -webkit-transform: scale(1) translateX(-180px) !important ;
        transform: scale(1) translateX(-180px) !important ;
        margin-top: -100px;
        margin-bottom: -30px;
    }
    .render-layer1 {
        top: -50px;
        left: -150px
    }
    .render-layer2 {
        top: -60px;
        left: -250px
    }
    .render-layer3 {
        display: none;
    }
    .render-layer4 {
        top: 90px;
        left: -200px;
        -webkit-transform: scale(0.8);
        transform: scale(0.8)
    }
    .render-layer5 {
        top: 40px;
        left: -0px;
        -webkit-transform: scale(0.9);
        transform: scale(0.9)
    }
    .render-layer6 {
        top: 330px;
        left: -180px
    }
    .render-layer7 {
        left: -20px
    }
    
    #lightgallery3{
        background: radial-gradient(circle at calc(50% - 300px), #c0c3e5, #6268b7 90%);
    }
}

@media (max-width: 700px) {
    /* Quienes Somos */
    #quienessomos-container {        
        grid-template-columns: auto auto auto;
        grid-template-rows: auto;
        grid-gap: 50px;
    }
    
    #quienessomos-container h3 {
        text-align: center;
        width: 80vw;
        justify-self: center;
        font-size: calc(15px + 1vw);
    }

    #quienessomos-container a:nth-of-type(1),
    #quienessomos-container a:nth-of-type(2),
    #quienessomos-container a:nth-of-type(3) {
        grid-column: 1 / 4;
        width: 80vw;
        margin: auto;
        text-align: center;
    }    
    
    /* Apps y Juegos */
    #service-graphic-1 {       
        -webkit-transform: scale(.8) translateX(-180px) !important ;       
        transform: scale(.8) translateX(-180px) !important ;
        margin-top: -50px;
        margin-bottom: -220px;
    }
    
    /* Identidad Corporativa */
    #service-graphic-2 {       
        -webkit-transform: scale(.8) translateX(-180px) !important ;       
        transform: scale(.8) translateX(-180px) !important ;
        margin-top: -50px;
        margin-bottom: -120px;
    }  
}

/* Apps y Juegos */
@media (max-width: 620px) {
    #service-graphic-1 {       
        -webkit-transform: scale(.7) translateX(-205px) !important ;       
        transform: scale(.7) translateX(-205px) !important ;
        margin-top: -100px;
        margin-bottom: -200px;
    }
    .gallery {
        grid-template-columns: auto;
        grid-template-rows: auto auto auto repeat(6, 0) auto repeat(2, 0);
    }
    
    /* Render y Animacion */
    #service-graphic-3 {       
        -webkit-transform: scale(.8) translateX(-180px) !important ;       
        transform: scale(.8) translateX(-180px) !important ;
        margin-top: -100px;
        margin-bottom: -20px;
    }
    .render-layer4 {
        top: 110px;
        left: -210px;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    .render-layer5 {
        top: 60px;
        left: 10px;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@media (max-width: 500px) {    
    #service-graphic-1 {       
        -webkit-transform: scale(.6) translateX(-205px) !important;       
        transform: scale(.6) translateX(-205px) !important;
        margin-top: -130px;
        margin-bottom: -150px;
    }
    
    /* Identidad Corporativa */
    #service-graphic-2 {       
        -webkit-transform: scale(.6) translateX(-205px) !important;       
        transform: scale(.6) translateX(-205px) !important;
        margin-top: -130px;
        margin-bottom: -150px;
    }

     /* Render y Animacion */    
    .render-layer4 {
        top: 60px;
        left: -50px;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    .render-layer5 {
        display: none;        
    }
    .render-layer6 {
        top: 350px;
        left: -110px;
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }
    .render-layer7 {
        top: 40px;
    }
}

@media (max-width: 400px) {    
    #service-graphic-1 {       
        -webkit-transform: scale(.5) translateX(-205px) !important ;       
        transform: scale(.5) translateX(-205px) !important ;
        margin-top: -150px;
        margin-bottom: -120px;
    }
    
    .identidad-corporativa h1{
        font-size: 39px
    }
    
    #service-graphic-2 {       
        -webkit-transform: scale(.5) translateX(-205px) !important ;       
        transform: scale(.5) translateX(-205px) !important ;
        margin-top: -150px;
        margin-bottom: -120px;
    }
}