@import "bootstrap.min.css";@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css";@import"https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css";@import "normalize.css";@import "responsive.css";@import "../bundles/debraye/css/animate.css";
@font-face { font-family: 'RexBold'; src: url('../bundles/debraye/fonts/RexBold.eot?#iefix') format('embedded-opentype'),  url('../bundles/debraye/fonts/RexBold.otf')  format('opentype'), url('../bundles/debraye/fonts/RexBold.woff') format('woff'), url('../bundles/debraye/fonts/RexBold.ttf') format('truetype'), url('../bundles/debraye/fonts/RexBold.svg#RexBold') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Yeah Papa'; src: url('../bundles/debraye/fonts/YeahPapa.eot'); src: url('../bundles/debraye/fonts/YeahPapa.eot?#iefix') format('embedded-opentype'), url('../bundles/debraye/fonts/YeahPapa.woff') format('woff'), url('../bundles/debraye/fonts/YeahPapa.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Bebas Neue'; src: url('../bundles/debraye/fonts/BebasNeue.eot'); src: url('../bundles/debraye/fonts/BebasNeue.eot?#iefix') format('embedded-opentype'), url('../bundles/debraye/fonts/BebasNeue.woff') format('woff'), url('../bundles/debraye/fonts/BebasNeue.ttf') format('truetype'), url('../bundles/debraye/fonts/BebasNeue.svg#BebasNeue') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('../bundles/debraye/fonts/Roboto-Regular-webfont.eot'); src: url('../bundles/debraye/fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../bundles/debraye/fonts/Roboto-Regular-webfont.woff') format('woff'), url('../bundles/debraye/fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../bundles/debraye/fonts/Roboto-Regular-webfont.svg#Roboto-Regular-webfont') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Roboto Light'; src: url('../bundles/debraye/fonts/Roboto-LightItalic-webfont.eot'); src: url('../bundles/debraye/fonts/Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), url('../bundles/debraye/fonts/Roboto-LightItalic-webfont.woff') format('woff'), url('../bundles/debraye/fonts/Roboto-LightItalic-webfont.ttf') format('truetype'), url('../bundles/debraye/fonts/Roboto-LightItalic-webfont.svg#Roboto-LightItalic-webfont') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Roboto Black'; src: url('../bundles/debraye/fonts/Roboto-Black-webfont.eot'); src: url('../bundles/debraye/fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'), url('../bundles/debraye/fonts/Roboto-Black-webfont.woff') format('woff'), url('../bundles/debraye/fonts/Roboto-Black-webfont.ttf') format('truetype'), url('../bundles/debraye/fonts/Roboto-Black-webfont.svg#Roboto-Black-webfont') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Raleway'; src: url('../bundles/debraye/fonts/Raleway-Italic.eot'); src: url('../bundles/debraye/fonts/Raleway-Italic.eot?#iefix') format('embedded-opentype'), url('../bundles/debraye/fonts/Raleway-Italic.woff') format('woff'), url('../bundles/debraye/fonts/Raleway-Italic.ttf') format('truetype'), url('../bundles/debraye/fonts/Raleway-Italic.svg#Raleway-Italic') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Arvo'; src: url('../bundles/debraye/fonts/Arvo-Bold.eot'); src: url('../bundles/debraye/fonts/Arvo-Bold.eot?#iefix') format('embedded-opentype'), url('../bundles/debraye/fonts/Arvo-Bold.woff') format('woff'), url('../bundles/debraye/fonts/Arvo-Bold.ttf') format('truetype'), url('../bundles/debraye/fonts/Arvo-Bold.svg#Raleway-Italic') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Belta'; src: url('../bundles/debraye/fonts/BeltaRegular.eot'); src: url('../bundles/debraye/fonts/BeltaRegular.eot?#iefix') format('embedded-opentype'), url('../bundles/debraye/fonts/BeltaRegular.woff') format('woff'), url('../bundles/debraye/fonts/BeltaRegular.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Impact'; src: url('../bundles/debraye/fonts/Impact.eot'); src: url('../bundles/debraye/fonts/Impact.eot?#iefix') format('embedded-opentype'), url('../bundles/debraye/fonts/Impact.woff') format('woff'), url('../bundles/debraye/fonts/Impact.ttf') format('truetype'); font-weight: normal; font-style: normal; }

* { margin:0; padding:0; }
html, body { height: 100%; min-height: 100%; }
.loader { position:fixed; background:#FFF; width:100%; height:100%; z-index: 99999; }
.loader img { max-width: 100px; position: relative; top: 40%; left: 45%; }
::-webkit-scrollbar-track { background-color: transparent; }
::-webkit-scrollbar { width: 2px; height: .5px; background-color: transparent; }
::-webkit-scrollbar-thumb { background-color: transparent; }

.navbar{ font-family: "RexBold"; position:fixed; top:2em; left: 50%; transform: translate(-50%, -50%); background-color: transparent; background: transparent; border-color: transparent; color: #203638; z-index: 200;}
.navbar li { text-decoration: none; color: #203638; font-size: x-large; }
.navbar li>a { text-decoration: none; padding: 1em; color: #203638; }
.navbar-nav>li>a:hover { background: transparent; }
.navbar-nav>li>a:hover #navhr{ display: block; }
.navbar-nav>li>a:active { background: transparent; }
.navbar-nav>li>a:focus { background: transparent; }
.navhr{ display: none; border: 0; height: 2px; background: #203638; background-image: linear-gradient(to right, #ccc, #333, #ccc); }
#contacto { font-family: "RexBold"; position:fixed; top:1em; right: 5%; z-index: 30000; }
#contacto a { text-decoration: none; color: #203638; font-size: large; }
#contacto #redes i{ font-size: x-large; padding: 5px; }
#contacto #redes i:hover, #contacto #redes i:focus { -webkit-animation-name: spaceboots; -webkit-animation-duration: 0.8s; -webkit-transform-origin:50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }

.wrapper { height: 100%; width: 500%; overflow: hidden; background:#EDC751; color: #203638; }
.wrapper.static { opacity: .5;}
.wrapper .container { max-width: 90%; display: block; padding-top: 10em; }
.page { float:left; height: 100%; width: 20%; }
                    /*------ Index ------*/
/*Inicio*/
#index { background: url("../img/back/page1.svg") bottom right no-repeat; background-size: 27.5%; }
.inicio { position: relative; max-height: 100%; display: block; }
#logo { position: relative; z-index: 3; top: 25em; }
#logo img{ max-width: 600px; }
#ojon { position: relative; z-index: 3; top: -5em; }
#ojon img{ max-width: 22%; }
#babas { position: relative; z-index: 4; top: -28em; left: 10% }
#babas img{ max-width: 25%; }
.inicio #ninja { position: relative; z-index: 3; top: -47em; left: 5%; }
.inicio #ninja img{ max-width: 15%; }
#robogusano { position: relative; z-index: 3; top: -98em; right: 10%; }
#robogusano img{ max-width: 15%; }
#worm { position: relative; z-index: 3; top: -105em; left: 8%; }
#worm img{ max-width: 15%; }
/*Debraye*/
#debraye { background: url("../img/back/page2.svg") bottom left no-repeat; background-size: 60%; }
.debElem { position: relative; max-height: 100%; display: block; }
#marciano { z-index: 3; top: 8em; left: 15%; }
#marciano img { max-width: 25%; }
#robot { position: relative; z-index: 4; top: -10em; right: -100em; }
#robot img { width: 25%; }
#raro { position: absolute; z-index: 5; bottom: 0; right: -12em; }
#raro img { width: 90%; }
#somos{ z-index: 6; position: absolute; top: 16em; left: 41%; }
#somos img { width: 80%; }
#somos #texto{ font-size: large; font-family: 'Roboto', sans-serif; }
#mision { z-index: 7; position: relative; top: -20em; right: -83em; }
#mision img { width: 18%; }
/* Servicios */
#servicios { background: url("../img/back/page3.svg") top no-repeat; background-size: 70%;}
#servicios .servs { z-index: 100; position: relative; max-height: 100%; display: block; }
#servicios .servs img { position: relative; display: block; }
#servicios .servs img#serv1 { width: 28%; }
#servicios .servs img#serv2 { width: 39%; }
#servicios .servs img#serv3 { width: 41%; }
#servicios .servs img#serv4 { width: 48%; }
#servicios .servs img#serv5 { width: 28%; }
#servicios .servs img#serv6 { width: 30%; }
#servicios .servs img#serv7 { width: 29%; }
#servicios .servs img#serv8 { width: 28%; }
#servicios .servs img#serv9 { width: 39%; }
.servs img:hover, .servs img:focus { -webkit-animation-name: spaceboots; -webkit-animation-duration: 0.8s; -webkit-transform-origin:50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }
@-webkit-keyframes spaceboots {
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
#servicios .ademas { position: relative ; z-index: 200; }
#servicios .ademas img { position: relative; z-index: 201; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); transition: all ease-out 280ms; }
#serviciosext { background: url("../img/back/pageSE.svg") bottom center no-repeat; background-size: 60%; }
    /* #serviciosext .servs  { margin-top: -40%; } */
        #serviciosext .servs img.srvs { width: 25%; display: block; position: relative; }
        #serviciosext .servs #serv1 { z-index: 2; }
        #serviciosext .servs #serv2 { z-index: 3; }
        #serviciosext .servs #serv3 { z-index: 2; }
        #serviciosext .servs #serv4 { z-index: 3; }
        #serviciosext .servs #serv5 { z-index: 2; }
#serviciosext .servs #prem { position: relative; }
        #serviciosext #prem img { max-width: 7em; }
#serviciosext .debElem { position: relative; max-height: 100%; display: block; }
    #serviciosext #raro img { width: 35%; z-index: -1; }
/*Proyectos*/
.sinpadding [class*="col-"] { padding: 0; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.cont90 { height: 80%; }
#proys { position: relative; max-height: 100%; display: block; margin-top: 0; z-index: 999; }
#proyectos .proy { max-height: 25em; min-height: 15em; text-align: left; border: 2px solid #EBC551; color: #EBC551; transition: all ease-out 280ms; }
#proyectos .proy.sup:nth-child(1) { background: url("../img/clientes/prd_back.jpg") top center no-repeat; background-size: cover; }
#proyectos .proy.sup:nth-child(2) { background: url("../img/clientes/sanatorio_back.jpg") top center no-repeat; background-size: cover; }
#proyectos .proy.sup:nth-child(3) { background: url("../img/clientes/azuid_back.jpg") top center no-repeat; background-size: cover; }
#proyectos .proy.sup:nth-child(4) { background: url("../img/clientes/mezfd_back.jpg") top center no-repeat; background-size: cover; }
#proyectos .proy.sup:nth-child(5) { background: url("../img/clientes/egsa_back.jpg") top center no-repeat; background-size: cover; }
#proyectos .proy.sup:nth-child(6) { background: url("../img/clientes/beef_back.jpg") top center no-repeat; background-size: cover; }
#proyectos .cat .proy { background: #203638; max-height: 15em; min-height: 8em; text-align: left; border: 2px solid #EBC551; color: #EBC551; transition: all ease-out 280ms; }
#proyectos .cat .proy:hover { cursor: pointer; }
#proyectos .proy.sup:hover { background: #203638; color: #EBC551; cursor: pointer; }
    #proyectos .proy:hover .info { opacity: 1; }
    #proyectos .proy .info { margin: 25% 2%; opacity: 0;}
    #proyectos .cat .proy .info { margin: 5% 2%; opacity: 1; }
        #proyectos .proy .info h2 { font-family: "RexBold"; font-size: large; }
        #proyectos .proy .info h5 { font-family: "Roboto"; font-style: italic; margin-top: -5px; font-size: small;}
        :root { --fs: 16px; --h: 2.375em; --t: .3s; --cb: cubic-bezier(.645, .045, .355, 1); --tc: #EBC551; --bg: linear-gradient(-247deg, #66BDC1 13%, #B9D87D 100%); }
        #proyectos .proy .info a { text-decoration: none; border-radius: var(--h); overflow: hidden; position: absolute; height: var(--h); width: 100%; bottom: 5%; left: 10%; }
        #proyectos .proy .info a > * { grid-area: 1 / 1 / -1 / -1; }
        #proyectos .proy .info a:after { content: ''; position: absolute; top: 0; left: 5px; width: 100%; height: 100%; border-radius: var(--h); background: var(--bg); opacity: .5; transform: translateX(calc(-100% + var(--h))); transition: transform var(--t) var(--cb), opacity var(--t) linear; z-index: -1; will-change: transform, opacity; }
        #proyectos .proy .info span { line-height: 1; letter-spacing: 0.1em; color: #EBC551; font-family: "Roboto"; }
        #proyectos .proy:hover .info span { color: #EBC551; }
        #proyectos .proy .info svg { margin-left: 10px; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: currentColor; stroke-width: 2; transform: translateX(-5px); transition: transform var(--t) var(--cb); will-change: transform; }  
        #proyectos .proy .info a:hover { z-index: 1; }
        #proyectos .proy .info a:hover svg { transform: none; }
        #proyectos .proy .info a:hover:after { transform: none; /*transform: translateX(calc(100% - var(--h))); different animation */ opacity: 0; }
        #proyectos .proy .info a { --t: 0.45s; --bg: #EBC551;}
        #proyectos .proy .info a:after { /* width: 200%; */ }
        #proyectos .proy .info a:hover:after { /* transform: translateX(calc(50% - var(--h))); */ transform: translateX(calc(100% - var(--h))); }
        #proyectos .proy .info a span { transition: var(--t) var(--cb); }
        #proyectos .proy .info a:hover span { color: var(--bg); }
        #proyectos .proy .info a svg { margin-left: 20px; transform: translateX(-5px) scale(1); transition: var(--t) var(--cb); will-change: transform, opacity; }
        #proyectos .proy .info a:hover svg { transform: translateX(0) scale(2); stroke: #EBC551; }
    a.tIcons { display: block; width: 1.5em; height: 1.5em; position: relative; padding: 0 .25em; }
    a.tIcons svg { width: 100%; display: block; position: absolute; }
    a.tIcons.tRotate svg { transform: scale(0) rotate(0deg); }
    a.tIcons.tRotate svg polygon { path: #203638; }
    a.tIcons.tRotate.toggle svg{ transform: scale(1) rotate(-360deg); }

/*Debrayeros*/
#debrayeros { background: url("../img/back/page5.svg") bottom center no-repeat; background-size: 45%; color: #203638; }
#debCrew { position: relative; max-height: 100%; display: block; top: 8em; }
#ninja { position: relative; z-index: 8; bottom: 14em; left: -10%; }
#ninja img { max-width: 33%; }
#debrayeros img { max-width: 65%; }
#debrayeros #nom { font-family: "Roboto"; font-style: italic; font-size: x-large; }
#debrayeros #puesto { font-family: "Yeah Papa"; font-size: x-large; position: inherit; top: -12px;}
#debrayeros img:hover span#puesto, #debrayeros img:focus span#puesto{ -webkit-animation-name: spaceboots; -webkit-animation-duration: 0.8s; -webkit-transform-origin:50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }

/*Clientes*/
#ctesLogos { margin-top: 5em;}
#ctesLogos svg path { fill: #203638 !important; }
/*------ Index cierre ------*/
.footer { background-color: #333333; color: white;  text-align: center; }
.footer span {  }
.footer span a { text-decoration: none; color: white; }
.footer span a:hover,.footer span a:focus,.footer span a:active{ color: #EBC551; }

#contact { text-align: center; min-height:100%; max-height: 100%; max-width: 100%; position:relative; top:0; bottom:0; left:0; right:0; color: #EBC551; background: url("../img/movil/contacto.svg") no-repeat center center; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; }
#contact .info { margin-top: 8%; font-family: "RexBold"; }
#contact .info img { max-width: 15em; padding: 1em; }
#contact .info a { font-size: medium; text-decoration: none; color: #203638; font-size: large; }
#contact .info #redes, #contact .info dir { padding: 4em 0; }
#contact .info #redes i{ font-size: x-large; padding: 5px; }
#contact .info #redes i:hover, #contact .info #redes i:focus { -webkit-animation-name: spaceboots; -webkit-animation-duration: 0.8s; -webkit-transform-origin:50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }

/* .modal-dialog { position:absolute; top:50% !important; transform: translate(0, -50%) !important; -ms-transform: translate(0, -50%) !important; -webkit-transform: translate(0, -50%) !important; margin:auto 5%; width:90%; } */
.modal-body { height: auto; width: 100%; }


@media only screen and (min-width : 320px) {}
@media only screen and (min-width: 384px){}
@media only screen and (min-width : 480px) {}
@media only screen and (min-width: 640px){}
@media only screen and (min-width : 768px) and (max-width: 959px) { }
@media only screen and (min-width : 960px) and (max-width: 1096px) {
    /*----- Loader -----*/
    .loader img { max-width: 100px; top: 40%; left: 45%; }

    .navbar{ top:2em; }
    .navbar li { font-size: small; }
    .navbar li>a { padding: 1em; }
    .navhr{ height: 2px; }
    #contacto { top:1em; right: 5%; }
    #contacto a { position: relative; font-size: medium; z-index: 3; }
    #contacto img { position: relative; top: -1.85em; right: .3em; z-index: 2;}
    #contacto #redes i{ font-size: x-large; padding: 3px;}
    .wrapper { height: 100%; width: 500%; }
    .wrapper .container { max-width: 90%; padding-top: 10em; }
    .page { height: 100%; width: 20%; }
    /*------ Index ------*/
    /*Inicio*/
    #index { background-size: 26%; }
    .inicio { max-height: 100%; }
    #logo { top: 10em; }
    #logo img{ max-width: 300px; }
    #ojon { top: -2em; }
    #ojon img{ max-width: 20%; }
    #babas { top: -13em; left: 10% }
    #babas img{ max-width: 23%; }
    .inicio #ninja { top: -21.5em; left: 5%; }
    .inicio #ninja img{ max-width: 15%; }
    #robogusano { top: -45.5em; right: 10%; }
    #robogusano img{ max-width: 14%; }
    #worm { top: -49em; left: 6.5%; }
    #worm img{ max-width: 12%; }
    /*Debraye*/
    #debraye { background-size: 57%;}
    .debElem { position: relative; max-height: 100%; display: block; }
    #marciano { z-index: 3; top: 8em; left: 13%; }
    #marciano img { max-width: 22.5%; }
    #robot { top: -3em; right: -50em; }
    #robot img { width: 20%; }
    #raro { bottom: 0; right: -24em; }
    #raro img { width: 40%; }
    #somos{ top: 9em; left: 37%; }
    #somos img { width: 40%; }
    #somos #texto{ font-size: small; }
    #mision { top: -3em; right: -43em; }
    #mision img { width: 14%; }
    /* Servicios */
    #servicios { background-size: 70%;}
    .servs { max-height: 100%; display: block; }
    .servs #serv1 { top: -1em; left: 45%; max-width: 15%; }
    .servs #serv2 { top: -1.5em; left: 38%; max-width: 26%; }
    .servs #serv3 { top: -3.2em; left: 37%; max-width: 28%; }
    .servs #serv4 { top: -3.9em; left: 33%; max-width: 35%; }
    .servs #serv5 { top: -4.6em; left: 43%; max-width: 15%; }
    .servs #serv6 { top: -5.7em; left: 43%; max-width: 17%; }
    .servs #serv7 { top: -6.1em; left: 43%; max-width: 16%; }
    .servs #serv8 { top: -6.4em; left: 43%; max-width: 17%; }
    .servs #serv9 { top: -7.1em; left: 45%; max-width: 14%; }
    #servicios .ademas { top: -12em; left: 90%; }
        #servicios .ademas img { margin-left: -5%; max-width: 4em; }
    #serviciosext .servs img.srvs { width: 20%; }
    #serviciosext .servs #serv1 { top: 1em; left: 35%; }
    #serviciosext .servs #serv2 { top: -2em; left: 50%; }
    #serviciosext .servs #serv3 { top: -1.5em; left: 35%; }
    #serviciosext .servs #serv4 { top: -5em; left: 50%; }
    #serviciosext .servs #serv5 { top: -4.5em; left: 45%; width: 50%; }
    #serviciosext .servs #prem { left: 45%; margin-top: -4.5%; }
            #serviciosext #prem img { max-width: 5em; }
        #serviciosext #raro { bottom: 3.5em; left: 100%; }
        #serviciosext #raro img { width: 25%; }
    
    /*Proyectos*/
    .cont90 { height: 65%; }
    #proys { max-height: 100%; top: -5em; }
    .c--anim-btn { height: 20px; }
    .c-anim-btn{ margin-top: 0em; }
    /*Debrayeros*/
    #debrayeros { background-size: 45%; }
    #debCrew { max-height: 100%; top: -1em; }
    #debrayeros #ninja { display: none; }
    #debrayeros img { max-width: 45%; }
    #debrayeros #nom { font-size: x-large; }
    #debrayeros #puesto { font-size: x-large; top: -12px;}
    /*Clientes*/
    #ctesLogos { margin-top: 2em;}
    #ctesLogos img.ctes { width: 14%;}
    /*Contacto*/
    .modal-content .form { top: 50%; transform: translateY(-70%); margin: 5em 0 5em 4em; padding: 2em; font-size: x-large; }
    .modal-content .form #but { padding: 1.5em;}
    .modal-content .form button { padding: .2em .5em; font-family: "Belta"; font-size: x-large; }
}
@media only screen and (min-width : 1097px) and (max-width: 1279px) {
    /*----- Loader -----*/
    .loader img { max-width: 100px; top: 40%; left: 45%; }

    .navbar{ top:2em; }
    .navbar li { font-size: small; }
    .navbar li>a { padding: 1em; }
    .navhr{ height: 2px; }
    #contacto { top:1em; right: 5%; }
    #contacto a { position: relative; font-size: medium; z-index: 3; }
    #contacto img { position: relative; top: -1.85em; right: .3em; z-index: 2;}
    #contacto #redes i{ font-size: x-large; padding: 3px;}
    .wrapper { height: 100%; width: 500%; }
    .wrapper .container { max-width: 90%; padding-top: 10em; }
    .page { height: 100%; width: 20%; }
    /*------ Index ------*/
    /*Inicio*/
    #index { background-size: 26%; }
    .inicio { max-height: 100%; }
    #logo { top: 11em; }
    #logo img{ max-width: 300px; }
    #ojon { top: 0em; }
    #ojon img{ max-width: 20%; }
    #babas { top: -13em; left: 10% }
    #babas img{ max-width: 23%; }
    .inicio #ninja { top: -23em; left: 5%; }
    .inicio #ninja img{ max-width: 15%; }
    #robogusano { top: -50em; right: 10%; }
    #robogusano img{ max-width: 14%; }
    #worm { top: -54em; left: 6.5%; }
    #worm img{ max-width: 12%; }
    /*Debraye*/
    #debraye { background-size: 57%;}
    .debElem { position: relative; max-height: 100%; display: block; }
    #marciano { z-index: 3; top: 8em; left: 13%; }
    #marciano img { max-width: 22.5%; }
    #robot { top: -4em; right: -58em; }
    #robot img { width: 20%; }
    #raro { bottom: 0; right: -18em; }
    #raro img { width: 55%; }
    #somos{ top: 10em; left: 37%; }
    #somos img { width: 50%; }
    #somos #texto{ font-size: medium; }
    #mision { top: -3em; right: -45em; }
    #mision img { width: 14%; }
    /* Servicios */
    #servicios { background-size: 70%;}
    .servs { max-height: 100%; display: block; }
    .servs #serv1 { top: -1em; left: 45%; max-width: 13%; }
    .servs #serv2 { top: -2em; left: 38%; max-width: 24%; }
    .servs #serv3 { top: -4.2em; left: 37%; max-width: 26%; }
    .servs #serv4 { top: -4.7em; left: 33%; max-width: 33%; }
    .servs #serv5 { top: -5.4em; left: 43%; max-width: 13%; }
    .servs #serv6 { top: -6.5em; left: 43%; max-width: 15%; }
    .servs #serv7 { top: -6.9em; left: 43%; max-width: 14%; }
    .servs #serv8 { top: -7.2em; left: 43%; max-width: 15%; }
    .servs #serv9 { top: -7.9em; left: 45%; max-width: 12%; }
    #servicios .ademas { top: -18em; left: 90%; }
        #servicios .ademas img { margin-left: -5%; max-width: 6em; }
    #serviciosext .servs img.srvs { width: 20%; }
    #serviciosext .servs #serv1 { top: 3em; left: 35%; }
    #serviciosext .servs #serv2 { top: -2em; left: 50%; }
    #serviciosext .servs #serv3 { top: -1em; left: 35%; }
    #serviciosext .servs #serv4 { top: -6em; left: 50%; }
    #serviciosext .servs #serv5 { top: -7em; left: 45%; width: 50%; }
    #serviciosext .servs #prem { left: 45%; margin-top: -5%; }
            #serviciosext #prem img { max-width: 6em; }
        #serviciosext #raro { bottom: 5em; left: 95%; }
        #serviciosext #raro img { width: 22%; }
    /*Proyectos*/
    .cont90 { height: 65%; }
    #proys { max-height: 100%; top: -5em; }
    .c--anim-btn { height: 20px; }
    .c-anim-btn{ margin-top: 0em; }
    /*Debrayeros*/
    #debrayeros { background-size: 45%; }
    #debCrew { max-height: 100%; top: 1em; }
    #debrayeros #ninja { display: none; }
    #debrayeros img { max-width: 45%; }
    #debrayeros #nom { font-size: x-large; }
    #debrayeros #puesto { font-size: x-large; top: -12px;}
    /*Clientes*/
    #ctesLogos { margin-top: 3em;}
    #ctesLogos img.ctes { width: 12%;}
    /*Contacto*/
    .modal-content .form { top: 50%; transform: translateY(-70%); margin: 5em 0 5em 7em; padding: 2em; font-size: x-large; }
    .modal-content .form #but { padding: 1.5em;}
    .modal-content .form button { padding: .2em .5em; font-family: "Belta"; font-size: x-large; }
}
@media only screen and (min-width : 1280px) and (max-width: 1365px) {
    /*----- Loader -----*/
    .loader img { max-width: 100px; top: 40%; left: 45%; }

    .navbar{ top:2em; }
    .navbar li { font-size: medium; }
    .navbar li>a { padding: 1em; }
    .navhr{ height: 2px; }
    #contacto { top:1em; right: 5%; }
    #contacto a { position: relative; font-size: medium; z-index: 3; }
    #contacto img { position: relative; top: -1.85em; right: .3em; z-index: 2;}
    #contacto #redes i{ font-size: x-large; padding: 3px;}
    .wrapper { height: 100%; width: 500%; }
    .wrapper .container { max-width: 90%; padding-top: 10em; }
    .page { height: 100%; width: 20%; }
    /*------ Index ------*/
    /*Inicio*/
    #index { background-size: 26%; }
    .inicio { max-height: 100%; }
    #logo { top: 15em; }
    #logo img{ max-width: 400px; }
    #ojon { top: -2em; }
    #ojon img{ max-width: 20%; }
    #babas { top: -17em; left: 10% }
    #babas img{ max-width: 23%; }
    .inicio #ninja { top: -28.5em; left: 5%; }
    .inicio #ninja img{ max-width: 15%; }
    #robogusano { top: -60.5em; right: 10%; }
    #robogusano img{ max-width: 14%; }
    #worm { top: -65em; left: 6.5%; }
    #worm img{ max-width: 12%; }
    /*Debraye*/
    #debraye { background-size: 57%;}
    .debElem { position: relative; max-height: 100%; display: block; }
    #marciano { z-index: 3; top: 8em; left: 13%; }
    #marciano img { max-width: 22.5%; }
    #robot { top: -5em; right: -68em; }
    #robot img { width: 20%; }
    #raro { bottom: 0; right: -15em; }
    #raro img { width: 62%; }
    #somos{ top: 10em; left: 35%; }
    #somos img { width: 65%; }
    #somos #texto{ font-size: large; }
    #mision { top: -4em; right: -55em; }
    #mision img { width: 14%; }
    /* Servicios */
    #servicios { background-size: 70%;}
    .servs { max-height: 100%; display: block; }
    .servs #serv1 { top: 2em; left: 45%; max-width: 13%; }
    .servs #serv2 { top: 1em; left: 38%; max-width: 24%; }
    .servs #serv3 { top: -1.2em; left: 37%; max-width: 26%; }
    .servs #serv4 { top: -1.7em; left: 33%; max-width: 33%; }
    .servs #serv5 { top: -2.4em; left: 45%; max-width: 13%; }
    .servs #serv6 { top: -3.9em; left: 45%; max-width: 15%; }
    .servs #serv7 { top: -4.5em; left: 45%; max-width: 14%; }
    .servs #serv8 { top: -5.9em; left: 45%; max-width: 15%; }
    .servs #serv9 { top: -6.9em; left: 47%; max-width: 12%; }
    #servicios .ademas { top: -18em; left: 90%; }
        #servicios .ademas img { margin-left: -5%; max-width: 6em; }
    #serviciosext .servs img.srvs { width: 20%; }
    #serviciosext .servs #serv1 { top: 5em; left: 35%; }
    #serviciosext .servs #serv2 { top: -2em; left: 50%; }
    #serviciosext .servs #serv3 { top: 0em; left: 35%; }
    #serviciosext .servs #serv4 { top: -7em; left: 50%; }
    #serviciosext .servs #serv5 { top: -5em; left: 45%; width: 40%; }
    #serviciosext .servs #prem { left: 45%; margin-top: -3%; }
            #serviciosext #prem img { max-width: 6em; }
        #serviciosext #raro { bottom: 5em; left: 90%; }
        #serviciosext #raro img { width: 22%; }
    /*Proyectos*/
    .cont90 { height: 65%; }
    #proys { max-height: 100%; top: -5em; }
    .c--anim-btn { height: 20px; }
    .c-anim-btn{ margin-top: 0em; }
    /*Debrayeros*/
    #debrayeros { background-size: 45%; }
    #debCrew { max-height: 100%; top: 1em; }
    #debrayeros #ninja { display: none; }
    #ninja img { max-width: 10%; }
    #debrayeros img { max-width: 45%; }
    #debrayeros #nom { font-size: x-large; }
    #debrayeros #puesto { font-size: x-large; top: -12px;}
    /*Clientes*/
    #ctesLogos { margin-top: 3em;}
    #ctesLogos img.ctes { width: 12%;}
    /*Contacto*/
    .modal-content .form { top: 50%; transform: translateY(-70%); margin: 5em 0 5em 10em; padding: 2em; font-size: x-large; }
    .modal-content .form #but { padding: 1.5em;}
    .modal-content .form button { padding: .2em .5em; font-family: "Belta"; font-size: x-large; }
}
@media only screen and (min-width: 1366px) and (max-width: 1535px) {
    /*----- Loader -----*/
    .loader img { max-width: 150px; top: 40%; left: 45%; }

    .navbar{ top:2em; }
    .navbar li { font-size: medium; }
    .navbar li>a { padding: 1em; }
    .navhr{ height: 2px; }
    #contacto { top:1em; right: 5%; }
    #contacto a { position: relative; font-size: medium; z-index: 3; }
    #contacto img { position: relative; top: -1.85em; right: .3em; z-index: 2;}
    #contacto #redes i{ font-size: x-large; padding: 3px;}
    .wrapper { height: 100%; width: 500%; }
    .wrapper .container { max-width: 90%; padding-top: 10em; }
    .page { height: 100%; width: 20%; }
    /*Inicio*/
    #index { background-size: 26%; }
    .inicio { max-height: 100%; }
    #logo { top: 10em; }
    #logo img{ max-width: 400px; }
    #ojon { top: -3em; }
    #ojon img{ max-width: 20%; }
    #babas { top: -19em; left: 10% }
    #babas img{ max-width: 23%; }
    .inicio #ninja { top: -32em; left: 5%; }
    .inicio #ninja img{ max-width: 15%; }
    #robogusano { top: -65.5em; right: 10%; }
    #robogusano img{ max-width: 14%; }
    #worm { top: -70em; left: 6.5%; }
    #worm img{ max-width: 12%; }
    /*Debraye*/
    #debraye { background-size: 57%;}
    .debElem { position: relative; max-height: 100%; display: block; }
    #marciano { z-index: 3; top: 8em; left: 13%; }
    #marciano img { max-width: 22.5%; }
    #robot { top: -5em; right: -68em; }
    #robot img { width: 20%; }
    #raro { bottom: 0; right: -15em; }
    #raro img { width: 62%; }
    #somos{ top: 9em; left: 35%; }
    #somos img { width: 65%; }
    #somos #texto{ font-size: large; }
    #mision { top: -6em; right: -58em; }
    #mision img { width: 14%; }
    /* Servicios */
    #servicios { background-size: 70%;}
    .servs { max-height: 100%; display: block; }
    /*Proyectos*/
    .cont90 { height: 65%; }
    #proys { max-height: 100%; top: -5em; }
    .c--anim-btn { height: 20px; }
    .c-anim-btn{ margin-top: 0em; }
    /*Debrayeros*/
    #debrayeros { background-size: 45%; }
    #debCrew { max-height: 100%; top: 1em; }
    #debrayeros #ninja { display: none; }
    #ninja img { max-width: 10%; }
    #debrayeros img { max-width: 45%; }
    #debrayeros #nom { font-size: x-large; }
    #debrayeros #puesto { font-size: x-large; top: -12px;}
    /*Clientes*/
    #ctesLogos { margin-top: 2em;}
    #ctesLogos img.ctes { width: 11%;}
    /*Contacto*/
    .modal-content .form { top: 50%; transform: translateY(-70%); margin: 5em 0 5em 7em; padding: 2em; font-size: x-large; }
    .modal-content .form #but { padding: 1.5em;}
    .modal-content .form button { padding: .2em .5em; font-family: "Belta"; font-size: xx-large; }
}
@media only screen and (min-width : 1536px) and (max-width: 1679px) {
    /*----- Loader -----*/
    .loader img { max-width: 150px; top: 40%; left: 45%; }

    .navbar{ top:2em; }
    .navbar li { font-size: large; }
    .navbar li>a { padding: 1em; }
    .navhr{ height: 2px; }
    #contacto { top:1em; right: 5%; }
    #contacto a { position: relative; font-size: medium; z-index: 3; }
    #contacto img { position: relative; top: -1.85em; right: .3em; z-index: 2;}
    #contacto #redes i{ font-size: x-large; padding: 4px;}
    .wrapper { height: 100%; width: 500%; }
    .wrapper .container { max-width: 90%; padding-top: 10em; }
    .page { height: 100%; width: 20%; }
    /*------ Index ------*/
    /*Inicio*/
    #index { background-size: 26%; }
    .inicio { max-height: 100%; }
    #logo { top: 15em; }
    #logo img{ max-width: 500px; }
    #ojon { top: -4em; }
    #ojon img{ max-width: 20%; }
    #babas { top: -21em; left: 10% }
    #babas img{ max-width: 23%; }
    .inicio #ninja { top: -35.5em; left: 5%; }
    .inicio #ninja img{ max-width: 15%; }
    #robogusano { top: -73.5em; right: 10%; }
    #robogusano img{ max-width: 14%; }
    #worm { top: -79em; left: 6.5%; }
    #worm img{ max-width: 12%; }
    /*Debraye*/
    #debraye { background-size: 57%;}
    .debElem { position: relative; max-height: 100%; display: block; }
    #marciano { z-index: 3; top: 8em; left: 13%; }
    #marciano img { max-width: 25%; }
    #robot { top: -10em; right: -81em; }
    #robot img { width: 22%; }
    #raro { bottom: 0; right: -11em; }
    #raro img { width: 76%; }
    #somos{ top: 12em; left: 37%; }
    #somos img { width: 75%; }
    #mision { top: -11em; right: -64em; }
    #mision img { width: 16%; }
    /* Servicios */
    #servicios { background-size: 70%;}
    .servs { max-height: 100%; display: block; }
    .servs #serv1 { top: 4em; left: 45%; max-width: 17%; }
    .servs #serv2 { top: 2em; left: 36%; max-width: 28%; }
    .servs #serv3 { top: -1.2em; left: 35%; max-width: 30%; }
    .servs #serv4 { top: -1.7em; left: 31%; max-width: 37%; }
    .servs #serv5 { top: -2.7em; left: 43%; max-width: 17%; }
    .servs #serv6 { top: -4.9em; left: 43%; max-width: 19%; }
    .servs #serv7 { top: -5.7em; left: 43%; max-width: 18%; }
    .servs #serv8 { top: -6.5em; left: 43%; max-width: 19%; }
    .servs #serv9 { top: -7.3em; left: 45%; max-width: 16%; }
    #servicios .ademas { top: -20em; left: 90%; }
        #servicios .ademas img { margin-left: -5%; max-width: 8em; }
    #serviciosext .servs img.srvs { width: 22%; }
    #serviciosext .servs #serv1 { top: 7em; left: 20%; }
    #serviciosext .servs #serv2 { top: 0em; left: 50%; }
    #serviciosext .servs #serv3 { top: 2em; left: 20%; }
    #serviciosext .servs #serv4 { top: -5em; left: 50%; }
    #serviciosext .servs #serv5 { top: -3em; left: 35%; width: 35%; }
    #serviciosext .servs #prem { left: 35%; margin-top: 0%; }
            #serviciosext #prem img { max-width: 7em; }
        #serviciosext #raro { bottom: 3.2em; left: 100%; }
        #serviciosext #raro img { width: 22%; }
    /*Proyectos*/
    .cont90 { height: 75%; }
    #proys { max-height: 100%; top: 0em; }
    .c--anim-btn { height: 20px; }
    .c-anim-btn{ margin-top: 0em; }
    /*Debrayeros*/
    #debrayeros { background-size: 45%; }
    #debCrew { max-height: 100%; top: 4em; }
    #ninja { bottom: 23em; left: -13%; }
    #ninja img { max-width: 10%; }
    #debrayeros img { max-width: 55%; }
    #debrayeros #nom { font-size: x-large; }
    #debrayeros #puesto { font-size: x-large; top: -12px;}
    /*Clientes*/
    #ctesLogos { margin-top: -.5em;}
    #ctesLogos img.ctes { width: 14%;}
    /*Contacto*/
    .modal-content .form { top: 50%; transform: translateY(-70%); margin: 5em 0 5em 7.5em; padding: 2em; font-size: xx-large; }
    .modal-content .form #but { padding: 1.5em;}
    .modal-content .form button { padding: .2em .5em; font-family: "Belta"; font-size: xx-large; }
}
@media only screen and (min-width: 1680px) and (max-width: 1744px){
    /*----- Loader -----*/
    .loader img { max-width: 150px; top: 40%; left: 45%; }

    .navbar{ top:2em; }
    .navbar li { font-size: large; }
    .navbar li>a { padding: 1em; }
    .navhr{ height: 2px; }
    #contacto { top:1em; right: 5%; }
    #contacto a { position: relative; font-size: medium; z-index: 3; }
    #contacto img { position: relative; top: -1.85em; right: .3em; z-index: 2;}
    #contacto #redes i{ font-size: x-large; padding: 4px;}
    .wrapper { height: 100%; width: 500%; }
    .wrapper .container { max-width: 90%; padding-top: 10em; }
    .page { height: 100%; width: 20%; }
    /*------ Index ------*/
    /*Inicio*/
    #index { background-size: 26%; }
    .inicio { max-height: 100%; }
    #logo { top: 20em; }
    #logo img{ max-width: 500px; }
    #ojon { top: 4em; }
    #ojon img{ max-width: 20%; }
    #babas { top: -15em; left: 10% }
    #babas img{ max-width: 23%; }
    .inicio #ninja { top: -30.5em; left: 5%; }
    .inicio #ninja img{ max-width: 15%; }
    #robogusano { top: -71.5em; right: 10%; }
    #robogusano img{ max-width: 14%; }
    #worm { top: -79em; left: 6.5%; }
    #worm img{ max-width: 12%; }
    /*Debraye*/
    #debraye { background-size: 57%;}
    .debElem { position: relative; max-height: 100%; display: block; }
    #marciano { z-index: 3; top: 8em; left: 13%; }
    #marciano img { max-width: 25%; }
    #robot { top: -10em; right: -81em; }
    #robot img { width: 22%; }
    #raro { bottom: 0; right: -11em; }
    #raro img { width: 76%; }
    #somos{ top: 12em; left: 37%; }
    #somos img { width: 75%; }
    #mision { top: -9em; right: -73em; }
    #mision img { width: 16%; }
    /* Servicios */
    #servicios { background-size: 75%;}
    .servs { max-height: 100%; display: block; }

    /*Proyectos*/
    .cont90 { height: 75%; }
    #proys { max-height: 100%; top: 5em; }
    .c--anim-btn { height: 20px; }
    .c-anim-btn{ margin-top: 0em; }
    /*Debrayeros*/
    #debrayeros { background-size: 45%; }
    #debCrew { max-height: 100%; top: 8em; }
    #ninja { bottom: 13.5em; left: -13%; }
    #ninja img { max-width: 10%; }
    #debrayeros img { max-width: 55%; }
    #debrayeros #nom { font-size: x-large; }
    #debrayeros #puesto { font-size: x-large; top: -12px;}
    /*Clientes*/
    #ctesLogos { margin-top: 4em;}
    #ctesLogos img.ctes { width: 14%;}
    /*Contacto*/
    .modal-content .form { top: 50%; transform: translateY(-70%); margin: 5em 0 5em 7.5em; padding: 2em; font-size: xx-large; }
    .modal-content .form #but { padding: 1.5em;}
    .modal-content .form button { padding: .2em .5em; font-family: "Belta"; font-size: xx-large; }
}
@media only screen and (width: 1680px) and (height: 866px){
    .loader img { max-width: 150px; top: 40%; left: 45%; }
    /*------ Index ------*/
    /*Inicio*/
    #index { background-size: 26%; }
    .inicio { max-height: 100%; }
    #logo { top: 18em; }
    #logo img{ max-width: 450px; }
    #ojon { top: 1em; }
    #ojon img{ max-width: 20%; }
    #babas { top: -18em; left: 10% }
    #babas img{ max-width: 23%; }
    .inicio #ninja { top: -34em; left: 5%; }
    .inicio #ninja img{ max-width: 15%; }
    #robogusano { top: -75em; right: 10%; }
    #robogusano img{ max-width: 14%; }
    #worm { top: -80.5em; left: 6.5%; }
    #worm img{ max-width: 12%; }
    /*Debraye*/
    #debraye { background-size: 57%;}
    .debElem { position: relative; max-height: 100%; display: block; }
    #marciano { z-index: 3; top: 8em; left: 13%; }
    #marciano img { max-width: 25%; }
    #robot { top: -10em; right: -81em; }
    #robot img { width: 22%; }
    #raro { bottom: 0; right: -11em; }
    #raro img { width: 76%; }
    #somos{ top: 12em; left: 37%; }
    #somos img { width: 75%; }
    #mision { top: -10em; right: -73em; }
    #mision img { width: 14%; }
    /* Servicios */
    #servicios { background-size: 70%;}
    .servs { max-height: 100%; display: block; }
    .servs #serv1 { top: 4em; left: 42%; max-width: 20%; }
    .servs #serv2 { top: 2em; left: 34%; max-width: 31%; }
    .servs #serv3 { top: -1.2em; left: 33%; max-width: 33%; }
    .servs #serv4 { top: -1.7em; left: 29%; max-width: 40%; }
    .servs #serv5 { top: -2.7em; left: 41%; max-width: 20%; }
    .servs #serv6 { top: -4.9em; left: 41%; max-width: 22%; }
    .servs #serv7 { top: -5.7em; left: 41%; max-width: 21%; }
    .servs #serv8 { top: -6em; left: 41%; max-width: 22%; }
    .servs #serv9 { top: -7.3em; left: 41%; max-width: 19%; }
    /*Proyectos*/
    .cont90 { height: 75%; }
    #proys { max-height: 100%; top: 5em; }
    .c--anim-btn { height: 20px; }
    .c-anim-btn{ margin-top: 0em; }
    /*Debrayeros*/
    #debrayeros { background-size: 45%; }
    #debCrew { max-height: 100%; top: 8em; }
    #ninja { bottom: 0em; left: -13%; }
    #ninja img { max-width: 7%; }
    #debrayeros img { max-width: 55%; }
    #debrayeros #nom { font-size: x-large; }
    #debrayeros #puesto { font-size: x-large; top: -12px;}
    /*Clientes*/
    #ctesLogos { margin-top: 3em;}
    #ctesLogos img.ctes { width: 14%;}
    /*Contacto*/
    .modal-content .form { top: 50%; transform: translateY(-70%); margin: 5em 0 5em 7.5em; padding: 2em; font-size: xx-large; }
    .modal-content .form #but { padding: 1.5em;}
    .modal-content .form button { padding: .2em .5em; font-family: "Belta"; font-size: xx-large; }
}
@media only screen and (min-width : 1745px) and (max-width: 1919px) {
    /*----- Loader -----*/
    .loader img { max-width: 150px; top: 40%; left: 45%; }

    .navbar{ top:2em; }
    .navbar li { font-size: x-large; }
    .navbar li>a { padding: 1em; }
    .navhr{ height: 2px; }
    #contacto { top:1em; right: 5%; }
    #contacto a { position: relative; font-size: large; z-index: 3; }
    #contacto img { position: relative; top: -1.85em; right: .3em; z-index: 2;}
    #contacto #redes i{ font-size: x-large; padding: 5px;}
    .wrapper { height: 100%; width: 500%; }
    .wrapper .container { max-width: 90%; padding-top: 10em; }
    .page { height: 100%; width: 20%; }
    /*------ Index ------*/
    /*Inicio*/
    #index { background-size: 27.5%; }
    .inicio { max-height: 100%; }
    #logo { top: 20em; }
    #logo img{ max-width: 550px; }
    #ojon { top: -7.5em; }
    #ojon img{ max-width: 22%; }
    #babas { top: -29.5em; left: 10% }
    #babas img{ max-width: 25%; }
    .inicio #ninja { top: -46em; left: 5%; }
    .inicio #ninja img{ max-width: 15%; }
    #robogusano { top: -92em; right: 10%; }
    #robogusano img{ max-width: 15%; }
    #worm { top: -99em; left: 8%; }
    #worm img{ max-width: 15%; }
    /*Debraye*/
    #debraye { background-size: 60%;}
    .debElem { position: relative; max-height: 100%; display: block; }
    #marciano { z-index: 3; top: 8em; left: 15%; }
    #marciano img { max-width: 25%; }
    #robot { top: -10em; right: -90em; }
    #robot img { width: 23%; }
    #raro { bottom: 0; right: -12em; }
    #raro img { width: 85%; }
    #somos{ top: 13em; left: 40%; }
    #somos img { width: 80%; }
    #mision { top: -16em; right: -76em; }
    #mision img { width: 18%; }

    /* Servicios */
    #servicios { background-size: 70%;}
    .servs { max-height: 100%; display: block; }
    .servs #serv1 { top: 4em; left: 42%; max-width: 20%; }
    .servs #serv2 { top: 2em; left: 34%; max-width: 31%; }
    .servs #serv3 { top: -1.2em; left: 33%; max-width: 33%; }
    .servs #serv4 { top: -1.7em; left: 29%; max-width: 40%; }
    .servs #serv5 { top: -2.7em; left: 41%; max-width: 20%; }
    .servs #serv6 { top: -4.9em; left: 41%; max-width: 22%; }
    .servs #serv7 { top: -5.7em; left: 41%; max-width: 21%; }
    .servs #serv8 { top: -6em; left: 41%; max-width: 22%; }
    .servs #serv9 { top: -7.3em; left: 41%; max-width: 19%; }
    #servicios .ademas { top: -20em; left: 90%; }
        #servicios .ademas img { margin-left: -5%; max-width: 8em; }
    #serviciosext .servs img.srvs { width: 25%; }
    #serviciosext .servs #serv1 { top: 7em; left: 20%; }
    #serviciosext .servs #serv2 { top: 0em; left: 50%; }
    #serviciosext .servs #serv3 { top: 2em; left: 20%; }
    #serviciosext .servs #serv4 { top: -5em; left: 50%; }
    #serviciosext .servs #serv5 { top: -3em; left: 35%; width: 35%; }
    #serviciosext .servs #prem { left: 40%; }
            #serviciosext #prem img { max-width: 7em; }
        #serviciosext #raro { bottom: 6em; left: 105%; }
        #serviciosext #raro img { width: 30%; }

    /*Proyectos*/
    .cont90 { height: 80%; }
    #proys { max-height: 100%; top: 6em; }
    .c--anim-btn { height: 20px; }
    .c-anim-btn{ margin-top: 0em; }
    /*Debrayeros*/
    #debrayeros { background-size: 45%; }
    #debCrew { max-height: 100%; top: 8em; }
    #ninja { bottom: -3em; left: -13%; }
    #ninja img { max-width: 25%; }
    #debrayeros img { max-width: 60%; }
    #debrayeros #nom { font-size: x-large; }
    #debrayeros #puesto { font-size: x-large; top: -12px;}
    /*Clientes*/
    #ctesLogos { margin-top: 2em;}
    #ctesLogos img.ctes { width: 14%;}
    /*Contacto*/
    .modal-content .form { top: 50%; transform: translateY(-70%); margin: 5em 0 5em 7.5em; padding: 2em; font-size: xx-large; }
    .modal-content .form #but { padding: 1.5em;}
    .modal-content .form button { padding: .2em .5em; font-family: "Belta"; font-size: xx-large; }
}
@media only screen and (min-width : 1920px) and (max-width: 2132px) {
    /*----- Loader -----*/
    .loader img { max-width: 150px; top: 40%; left: 45%; }

    .navbar{ top:2em; }
    .navbar li { font-size: x-large; }
    .navbar li>a { padding: 1em; }
    .navhr{ height: 2px; }
    #contacto { top:1em; right: 5%; }
    #contacto a { position: relative; font-size: large; z-index: 3; }
    #contacto img { position: relative; top: -1.85em; right: .3em; z-index: 2;}
    #contacto #redes i{ font-size: x-large; padding: 5px;}
    .wrapper { height: 100%; width: 500%; }
    .wrapper .container { max-width: 90%; padding-top: 10em; }
    .page { height: 100%; width: 20%; }
    /*------ Index ------*/
    /*Inicio*/
    #index { background-size: 27.5%; }
    .inicio { max-height: 100%; }
    #logo { top: 20em; }
    #logo img{ max-width: 600px; }
    #ojon { top: -7.5em; }
    #ojon img{ max-width: 22%; }
    #babas { top: -30.5em; left: 10% }
    #babas img{ max-width: 25%; }
    .inicio #ninja { top: -50em; left: 5%; }
    .inicio #ninja img{ max-width: 15%; }
    #robogusano { top: -101em; right: 10%; }
    #robogusano img{ max-width: 15%; }
    #worm { top: -108em; left: 8%; }
    #worm img{ max-width: 15%; }
    /*Debraye*/
    #debraye { background-size: 60%;}
    .debElem { position: relative; max-height: 100%; display: block; }
    #marciano { z-index: 3; top: 8em; left: 15%; }
    #marciano img { max-width: 25%; }
    #robot { top: -10em; right: -100em; }
    #robot img { width: 25%; }
    #raro { bottom: 0; right: -12em; }
    #raro img { width: 90%; }
    #somos{ top: 16em; left: 41%; }
    #somos img { width: 80%; }
    #mision { top: -20em; right: -83em; }
    #mision img { width: 18%; }
    /* Servicios */
    #servicios { background-size: 70%;}
    .servs { max-height: 100%; display: block; }
    .servs #serv1 { top: 4em; left: 41%; max-width: 23%; }
    .servs #serv2 { top: 2em; left: 34%; max-width: 34%; }
    .servs #serv3 { top: -1.2em; left: 33%; max-width: 36%; }
    .servs #serv4 { top: -1.7em; left: 29%; max-width: 43%; }
    .servs #serv5 { top: -2.7em; left: 41%; max-width: 23%; }
    .servs #serv6 { top: -4.9em; left: 41%; max-width: 25%; }
    .servs #serv7 { top: -5.7em; left: 41%; max-width: 24%; }
    .servs #serv8 { top: -6em; left: 41%; max-width: 25%; }
    .servs #serv9 { top: -7.3em; left: 41%; max-width: 22%; }
    #servicios .ademas { top: -20em; left: 90%; }
        #servicios .ademas img { margin-left: -5%; max-width: 8em; }
            #serviciosext .servs img.srvs { width: 30%; }
            #serviciosext .servs #serv1 { top: 7em; left: 20%; }
            #serviciosext .servs #serv2 { top: 0em; left: 50%; }
            #serviciosext .servs #serv3 { top: 2em; left: 20%; }
            #serviciosext .servs #serv4 { top: -5em; left: 50%; }
            #serviciosext .servs #serv5 { top: -3em; left: 30%; width: 35%; }
    #serviciosext .servs #prem { left: 40%; }
            #serviciosext #prem img { max-width: 7em; }
        #serviciosext #raro { bottom: 8em; left: 110%; }
        #serviciosext #raro img { width: 35%; }
    /*Proyectos*/
    #proys { margin-top: 10%; }
    #proyectos .proy { height: 25em; }    
    #proyectos .cat .proy { height: 10em; }
        #proyectos .proy .info { margin: 25% 2%; }
        #proyectos .cat .proy .info { margin: 10% 2%; }
            #proyectos .proy .info h2 { font-size: large; }
            #proyectos .proy .info h5 { margin-top: -5px; font-size: small; }
            #proyectos .proy .info a:after { top: 0; left: 5px; }
            #proyectos .proy .info svg { margin-left: 10px; }
    /*Debrayeros*/
    #debrayeros { background-size: 45%; }
    #debCrew { max-height: 100%; top: 8em; }
    #ninja { bottom: -10em; left: -10%; }
    #ninja img { max-width: 33%; }
    #debrayeros img { max-width: 80%; }
    #debrayeros #nom { font-size: x-large; }
    #debrayeros #puesto { font-size: x-large; top: -12px;}
    /*Clientes*/
    #ctesLogos { margin-top: 4em;}
    #ctesLogos img.ctes { width: 15%;}
    /*Contacto*/
    .modal-content .form { top: 50%; transform: translateY(-70%); margin: 5em 0 5em 8em; padding: 2em; font-size: xx-large; }
    .modal-content .form #but { padding: 1.5em;}
    .modal-content .form button { padding: .2em .5em; font-family: "Belta"; font-size: xx-large; }
}