/* Auto Gabriel Villalobos 52xmaxangel@gmail.com */

html{ height: 100%; width: 100%; margin: 0; padding: 0; font-size: 16px; scroll-behavior: smooth; min-width: 280px; max-width: 1800px; min-height: 580px; max-height: 750px; margin: auto; } .html-index{ min-width: 280px; max-width: 1800px; min-height: 580px; max-height: 2048px; margin: auto; } body{ margin: 0%; padding: 0%; height: 100%; } .flex{ height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .pie{ align-self: center; color: aliceblue; font-family: 'Poiret One', cursive; } .video{ position: absolute; right: 0%; bottom: 0; z-index: -1; } @media (min-aspect-ratio: 16/9){ .video{ width: 100%; height: auto; } } @media (max-aspect-ratio: 16/9){ .video{ width: auto; height: 100%; } } .main{ height: 60%; width: 100%; display: flex; justify-content: space-between; flex-direction: column-reverse; } .menu{ display: flex; width: 100%; height: 25%; /* background: linear-gradient(90deg, rgb(162, 230, 233) 0%, rgb(25, 103, 163) 41%, rgba(31,129,166,1) 65%, rgba(0,212,255,1) 100%); */ justify-content: space-between; } .logo{ display: flex; align-self: center; width: 25%; height: 70%; } .imglogo{ width: 100%; height: 100%; align-self: center; } .opciones{ display: flex; width: 45%; justify-content: center; align-items: center; } /* .lista{ width: 30%; margin: 0%; padding: 0%; display: flex; justify-content: space-between; align-items: flex-end; } */ .c1{ list-style:none; padding: 20px; border-radius: 5px; text-decoration: none; color: rgb(247, 243, 243); transition: color .7s; font-weight: 1000; font-size: 18px; font-family: 'Poiret One', cursive; } .c1:hover{ color:#12BDD5; } .con{ align-self: center; } .cona{ font-size: 4.375rem; font-weight: bold; color: rgb(247, 243, 243); text-decoration: none; padding: 5px; /* border-radius: 50px; border-style: solid; border-color: rgb(255, 255, 255); */ transition: all 2s; font-family: 'Caveat Brush', cursive; animation: zoom 5s infinite; } .cona:hover{ color: transparent; -webkit-text-stroke: 1px #12BDD5; } @keyframes zoom { 0%{ font-size: 4.37rem; } 50%{ font-size: 4.56rem; } } @media (max-width: 887px) { .menu{ height: 40%; flex-direction: column; justify-content: center; } .logo{ width: auto; height: 50%; } .opciones{ width: auto; padding: 20px; } } @media (max-width: 570px) { .opciones{ padding: 0%; } } @media (max-width: 487px) { .c1{ font-size:  16px; padding: 13px; } .pie{ font-size: 10px; } } @media (max-width: 300px) { .c1{ padding: 8px } .pie{ font-size: 8px; } } /* ESTILOS DE PLANES */ .pmain{ display: flex; flex-direction: column-reverse; height: 100%; } .ppara{ width: 100%; height: 80%; display: flex; flex: wrap; box-shadow: -4px -4px 20px 12px rgba(3, 215, 252, 0.521); background-image: url(../img/fondplanes2.jpg); background-repeat: no-repeat; background-size: cover; justify-content: space-around; } .pmenu { display: flex; width: 100%; height: 20%; /* background: linear-gradient(90deg, rgba(0,162,168,1) 0%, rgba(18,145,193,1) 40%, rgba(31,129,166,1) 62%, rgba(0,212,255,1) 100%); */ background-color: #000; justify-content: space-between; } h1{ margin: 0; } .pdivtitle{ align-self: center; } .phtitle{ font-size: 2rem; text-align: center; font-family: 'Fredoka One', cursive; font-weight: bolder; color: #000000; } .pplanes{ display: flex; flex-direction: column; justify-content: space-between; width: 19rem; height: 17rem; border: 2px; border-style: solid; border-color: rgb(0, 225, 255); border-radius: 10px; align-self: center; margin: 5px; /* background-image: url(../img/fondplanes.jpg); background-repeat: no-repeat; background-size: cover; */ background-color: rgba(0, 0, 0, 0.336); transition: background-color .7s, height .7s ; box-shadow: 0px 0px 10px 2px rgba(0, 204, 255, 0.623); } .pplanes:hover{ background-color: rgba(255, 255, 255, 0.123); height: 19rem; } .ptitulos{ font-size:1rem; font-weight: bold; align-self: center; font-family: 'Gloria Hallelujah', cursive; color: #fff; } .pimg{ width: 32%; height: 5rem; align-self: center; } .path5{ animation: move 2.5s infinite; fill:#12BDD5; } @keyframes move { 50%{ fill: transparent; } } .cohete{ animation: volar 10s infinite; transform-origin: 45%; } @keyframes volar{ 0%{ transform: rotateX(0turn); } 10%{ transform: rotate(-0.125turn); } 15%{ transform: translatey(-900px); } 30%{ transform: rotate(-0.125turn); } 50%{ transform: rotate(0turn); } } .personas{ animation:caminar 5s infinite; } @keyframes caminar{ 69%{ transform:rotate(0turn); } 70%{ transform: rotateX(0.1turn); } 80%{ transform: rotateX(0.12turn); } } .pprf{ font-size: 1rem; align-self: center; color: #fff; font-family: 'Gloria Hallelujah', cursive; font-weight: bold; } /* informacion planes */ .pinfo{ width: 100%; height: 100%; /* border-top: rgb(128, 128, 128) solid 10px; */ background-color: rgb(240, 240, 240); display: flex; flex-direction: column; background-image: url(../img/headsvg.svg), url(../img/invert-flecha-border-telzulca.svg); background-repeat: no-repeat,no-repeat; background-position:top left,bottom right; background-size: cover,59%; } .pinftitle{ display: flex; padding: 20px; justify-content: flex-start; } .phtitlep:nth-child(1){ font-size: 8rem; font-family: 'Comfortaa', cursive; color: #fff; } .phtitlep:nth-child(2){ font-size: 4.7rem; align-self: center; font-family: 'Comfortaa', cursive; color: #fff; } .pinftitle2{ align-self: flex-end; } .phtitlep2{ font-size: 3rem; font-family: 'Potta One', cursive; background: linear-gradient(90deg, rgba(0,162,168,1) 0%, rgba(18,145,193,1) 40%, rgba(31,129,166,1) 62%, rgba(0,212,255,1) 100%); -webkit-background-clip: text; color: transparent; } .contenido{ display: flex; flex-direction: row-reverse; justify-content: space-between; height: 55%; } .pcontentinfo{ width: 50%; height: 100%; } .circle{ clip-path: circle(70% at 100% 50%); background-image: url(../img/1234.jpeg); background-repeat: no-repeat; background-size: cover; shape-outside: circle(70% at 100% 50%); width: 20rem; height: 22rem; float: right; } .pcontentextra{ display: flex; width: 50%; height: 100%; flex-direction: column-reverse; } .pcontentmb{ display: flex; width:60%; height: 40%; align-self: center; } .imgsimetrico{ width: 50%; height: 70%; align-self: center; } .mbps{ font-size: 6rem; font-weight: 300; /* font-family: 'Rubik Glitch', cursive; */ font-family: 'Rubik Wet Paint', cursive; align-self: center; margin:0; color: rgb(0, 0, 0); } .mbps1{ font-size: 3rem; font-weight: bold; align-self: center; margin: 0; font-family: 'Rubik Wet Paint', cursive; } .pcontentmb2{ display: flex; align-self: center; width: 40%; height: 40%; flex-direction:column-reverse; } .pimgubiquiti3{ width: 40%; align-self: center; } .pimgubiquiti4{ align-self: center; width: 30%; } .pconentp{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; } .parrafoinfo{ font-family: 'Roboto Serif', serif; font-weight: 300; font-size:1rem; } .liventajas{ font-family: 'Roboto Serif', serif; padding: 0px; font-weight: bold; font-size: 0.88rem; } .botonmapa{ text-decoration: none; color:#12BDD5; transition: color .4s; } .botonmapa:hover{ color: #10a1b4; } ::-webkit-scrollbar{ width: 3px; } ::-webkit-scrollbar-track{ background-color: #1ec3ec; } ::-webkit-scrollbar-thumb{ background-color: #000; background-image: url(../img/simetrico.svg); background-repeat: no-repeat; background-size: contain; background-position: center; border-radius: 10px; transition: background-color .7s; } ::-webkit-scrollbar-thumb:hover{ background-color: rgba(0, 0, 0, 0.651); background-image: url(../img/simetrico.svg); background-repeat: no-repeat; background-size: contain; background-position: center; } /* Informacion Empresariales */ .pinfo2{ width: 100%; height: 100%; background-color: rgb(240, 240, 240); background-image: url(../img/footersvg2.svg) , url(../img/flecha-border-telzulca.svg); background-repeat:no-repeat,no-repeat; background-position: bottom left, top right; background-size: cover ,59%; display: flex; flex-direction: column; } .titlempresarial { align-self: center; font-size:3rem; font-weight:1000; font-family: 'Potta One', cursive; background-image: url(../img/fondplanes2.jpg); background-repeat: no-repeat; background-size:cover; -webkit-background-clip: text; -moz-background-clip: text; -o-background-clip: text; color: transparent; /* margin: 20; */ } .pinfoempresarial{ width: 100%; height: 80%; display: flex; } .pinfoempresarial2{ width: 50%; height: 20rem; } .circlepath{ clip-path:  polygon(0% 0%, 59% 0, 100% 50%, 59% 100%, 0% 100%); width: 20rem; height: 20rem; background-image: url(../img/edificios.jpg); opacity: 90%; background-repeat: no-repeat; background-size: cover; float: left; shape-outside: polygon(0% 0%, 59% 0, 100% 50%, 59% 100%, 0% 100%); position: relative; transition: opacity .3s, border .3s; } .circlepath:hover{ opacity: 100%; } .pinfoempresarial2 p{ font-family: 'Roboto Serif', serif; font-size: 1rem; } .emimgptp{ width: 50%; display: flex; flex-direction: column; justify-content: space-between; } .emimgptp2{ display: flex; height: 50%; justify-content: center; } .emimgptp2 img{ width: 45%; box-shadow: 2px 2px 10px 2px rgb(75, 75, 75); } .emimgptp3{ display: flex; justify-content: center; height: 50%; align-items: flex-start; } .emimgptp3 img{ width: 30%; padding: 1rem; } .emimgptp3 img:nth-child(2){ height: 35%; } /* info Fibra Optica */ .infofibra{ width: 100%; height: 100%; background-color: rgb(240, 240, 240); background-image: url(../img/main.svg), url(../img/velocity.jpg); background-repeat: no-repeat,no-repeat; background-size: cover,cover; background-position:top right, bottom; display: flex; } .infofibra2{ width: 100%; height: 99%; } .titlefibraoptica{ font-size: 3rem; font-weight: 1000; align-self: center; font-family: 'Potta One', cursive; background-image: url(../img/fondplanes2.jpg); -webkit-background-image: url(../img/fondplanes2.jpg); -moz-background-image: url(../img/fondplanes2.jpg); background-repeat: no-repeat; background-size:cover; -webkit-background-clip: text; -moz-background-clip: text; -o-background-clip: text; color:transparent; margin: 20px; } .infofibra3{ width: 100%; height: 76%; display: flex; } .parrafofibra{ width: 50%; height: 50%; align-self: flex-end; } .parrafofibra p{ color:#f7f7f7; font-family: 'Jua', sans-serif; font-size: 1.3rem; } .extrainfofibra{ display: flex; justify-content:space-between; width: 50%; height: 100%; flex-direction:column; } .planesfibra{ align-self: flex-start; width: 100%; height: 50%; display: flex; flex-direction: column; } .velocidadesfibra{ display: flex; align-self: center; align-items:center; } .buttonspeed{ display: flex; width: 2.7em; align-items: flex-end; } .svgspeed{ width: 100%; } .aguja{ animation: agujamove 5s infinite; transform-origin:57% 95%; } @keyframes agujamove { 73%{ transform: rotate(0deg); } 75%{ transform: rotate(50deg); } 80%{ transform: rotate(60deg); } 83%{ transform: rotate(70deg); } 84%{ transform: rotate(77deg); } 85%{ transform: rotate(65deg); } 86%{ transform: rotate(77deg); } 87%{ transform: rotate(65deg); } 88%{ transform: rotate(77deg); } } .velocidadesfibra a svg path{ transition: all .5s linear; } .velocidadesfibra a:hover .svgspeed path{ fill: #12bed500; stroke: rgb(255, 255, 255); } .velocidadesfibra h1{ font-size: 2.5rem; font-family: 'potta one',cursive; color: #12BDD5; } .planesfibra p:nth-child(2){ font-size:5rem; font-weight: 200; font-family: 'Rubik Wet Paint', cursive; color: #00000000; align-self: center; margin:0; -webkit-text-stroke: 2px white; } .planesfibra p:nth-child(3){ font-size:5rem; font-weight: 200; font-family: 'Rubik Wet Paint', cursive; align-self: center; background-image: url(../img/fuego-letra.jpg); -webkit-background-clip: text; -moz-background-clip: text; -o-background-clip: text; color: transparent; -webkit-text-stroke:0.5px rgb(255, 255, 255); margin: 0; } .imgfibraexponsor{ width: 100%; display: flex; align-items: center; flex-direction: column; } .imgvsol{ width: 9em; } .imgfibraexponsor img:nth-child(2){ width: 13em; } .mbpsfibra1000{ color: rgb(42, 181, 190); } /* Footer Conexiones */ .footerconexiones{ width: 100%; height: 50%; background-color: #000; box-shadow: 4px 4px 20px 5px black; display: flex; } .footer2{ width: 50%; display: flex; flex-direction: column; justify-content: space-between; } .footer2 img{ width: 30%; align-self: flex-start; } .footerderechos{ width: 100%; height: 10%; display: flex; align-items: center; } .footerderechos p:nth-child(1){ color: #fff; margin: 0; font-size: 1.5rem; font-family: 'Poiret One',cursive; } .footerderechos p:nth-child(2){ color: #fff; margin: 0; font-family: 'Poiret One',cursive; } .footerderechos p:nth-child(3){ color: #fff; margin-left: 3px; font-family: 'Poiret One',cursive; } .contactos{ display: flex; flex-direction: column; justify-content: space-between; width: 70%; height: 50%; } .contactosc1{ width: 100%; height: 33%; display: flex; } .footeritem{ width: 5%; background-image: url(../img/correo.svg); background-repeat: no-repeat; } .footeritem2{ width: 5%; background-image: url(../img/whatsapp-brands.svg); background-repeat: no-repeat; } .footeritem3{ width: 5%; background-image: url(../img/location-dot-solid.svg); background-repeat: no-repeat; } .imgcontactos{ width: 51px; height: 51px; } .footerp{ color: #fff; font-weight: bold; font-family: 'Poiret One',cursive; margin:0; margin-left:4px; text-decoration: none; } .footer3{ display: flex; width: 50%; height: 100%; flex-direction: column; justify-content: space-between; } .footer4{ width: 100%; height:60%; } .footer5{ display: flex; width: 100%; height: 10%; align-items:center ; } .footer5 h1{ color: #fff; font-family: 'Poiret One',cursive; font-size: 1.3rem; } .afont{ width: 15%; height: 100%; } .avect{ width: 15%; height: 100%; } .imgfont{ width: 100%; height: 95%; } .imgvec{ width: 100%; height: 100%; } /* Media Queries */ @media (max-width: 1100px) { html{ font-size: 15px; } .parrafoinfo{ color: #7a7a7a; } /* mediaqueries empresariales */ .emimgptp{ justify-content: space-around; } .emimgptp2{ height: 40%; } .emimgptp3:nth-child(2){ height: 20%; } .pinfoempresarial2 p{ font-size: 0.95rem; } /* mediaqueries Fibra */ /* mediaqueries footer */ } @media (max-width: 1000px){ html{ font-size: 13px; ; } /* mediaqueries empresariales */ .emimgptp{ justify-content: inherit; } .emimgptp2{ width: 50%; align-self: center; height: auto; } .emimgptp2 img{ width: 100%; } /* mediaqueries Fibra */ .imgfibraexponsor{ align-items: flex-start; } /* mediaqueries footer */ } @media (max-width: 900px){ html{ font-size: 12px; } /* mediaqueries empresariales */ .emimgptp3 img{ width: 50%; } /* mediaqueries Fibra */ /* mediaqueries footer */ .footer2{ width: 65%; } .footer2 img{ width: 40%; } .contactos{ height: 30%; } .contactosc1{ height: 28%; } .footer3{ width: 35%; } .avect{ width: 25%; } .afont{ height: 80%; } } @media (max-width: 800px){ html{ font-size: 12px; } .phtitle{ font-size: 2rem; } .ppara{ flex-direction: column; } .infofibra{ background-position:center; } .pcontentmb{ align-self: flex-start; } /* mediaqueries empresariales */ .pinfoempresarial{ justify-content: space-between; } .pinfoempresarial2{ width:60% } .emimgptp{ width: 40%; justify-content: initial; } .emimgptp2{ width: 100%; } .emimgptp2 img{ width: 90%; } /* mediaqueries Fibra */ /* mediaqueries footer */ } @media (max-width: 700px){ .circle{ width: 18rem; height: 18rem; } .liventajas{ padding: 2px; } .phtitlep:nth-child(1){ color: #10a1b4; } .phtitlep:nth-child(2){ color:rgb(165, 165, 165) } /* mediaqueries empresariales */ .pinfoempresarial{ flex-direction: column; justify-content: space-around; } .pinfoempresarial2{ width: 75%; } .emimgptp{ width: 100%; height: 65%; } .emimgptp2{ width: 40%; height: 50%; } .emimgptp3{ width: 100%; height: 70%; flex-direction: row-reverse; justify-content: space-around; align-items: center; } .emimgptp3 img{ width:25%; } .emimgptp3 img:nth-child(2){ height: 60%; } /* mediaqueries Fibra */ /* mediaqueries footer */ .footerconexiones{ height: 40%; } .footer5 h1{ font-size:1rem ; } } @media (max-width: 600px){ /* mediaqueries empresariales */ .pinfoempresarial2{ width:85%; } .pinfoempresarial2 p{ font-size: 1rem; } /* mediaqueries Fibra */ /* mediaqueries footer */ } @media (max-width: 500px){ html{ font-size: 10px; } .lista{ align-self: flex-end; } .pmenu{ flex-direction: column; justify-content: center; } .pinfo{ background-image: url(../img/invert-flecha-border-telzulca.svg); background-repeat:no-repeat; background-position:bottom right; background-size: 59%; } .phtitlep2{ font-size: 2.5rem; } .parrafoinfo{ color: #000000; } .liventajas{ color: #000000; } .contenido{ flex-direction: column; height: 70%; justify-content: initial; } .circle{ clip-path: circle(50% at 0% 50%); shape-outside: circle(50% at 0% 50%); float: left; background-position: -70px -20px; } .pcontentinfo{ width: 100%; height: 50%; } .pcontentextra{ width: 100%; height: 45%; } .pcontentmb{ align-self: center; } .pcontentmb2{ align-self:center; } .pimgubiquiti3{ height: 50%; } .pimgubiquiti4{ height: 50%; } .mbps{ font-size: 5rem; } /* mediaqueries empresariales */ .pinfo2{ background: url(../img/flecha-border-telzulca.svg); background-repeat:no-repeat; background-position: top right; background-size: 59%; background-color: rgb(240, 240, 240); } .pinfoempresarial2{ width: 100%; } .emimgptp2{ width: 50%; height: 60%; align-self: flex-end; max-width: 200px; max-height: 160px; } .emimgptp3:nth-child(2){ height: 18%; } /* mediaqueries Fibra */ .infofibra{ background-image:  url(../img/velocity.jpg); background-repeat:no-repeat; background-size: cover; background-position: bottom; box-shadow: 0px 0px 20px 5px black; } /* mediaqueries footer */ .footerconexiones{ height: 25%; } .titlefibraoptica{ background-position: center; background-size:auto; } } @media(max-width:400px){ /* mediaqueries inalambrico */ /* mediaqueries empresariales */ .titlempresarial{ margin: 5px; } .emimgptp{ height:40%; } .emimgptp2{ width:45%; height: 60%; } /* mediaqueries Fibra */ .parrafofibra{ align-self: center; } .velocidadesfibra h1{ font-size: 2rem; } .planesfibra p:nth-child(2){ font-size: 4.5rem; } .planesfibra p:nth-child(3){ font-size: 4.5rem; } /* mediaqueries footer */ .footer5 h1{ display: none; } .footer5{ justify-content: center; } .avect{ width:40%; } } @media(max-width:332px){ /* mediaqueries inalambrico */ /* mediaqueries empresariales */ .circlepath{ width: 16rem; height: 18rem; } .pinfoempresarial2 p{ color:#fff; } .emimgptp2{ width: 40; } /* mediaqueries Fibra */ /* mediaqueries footer */ } @media (max-width: 283px){ .phtitlep:nth-child(1){ font-size: 7rem; } .phtitlep:nth-child(2){ font-size: 4rem } /* mediaqueries empresariales */ .circlepath{ width: 15rem; height: 17rem; } /* mediaqueries Fibra */ /* mediaqueries footer */ } @media (max-height:580px){ .video{ display: none; } .flex{ background:url(../img/1234.jpeg); background-repeat: no-repeat; background-position: center; background-size: cover; } } @media (min-height:900px){ .video{ display: none; } .flex{ background:url(../img/1234.jpeg); background-repeat: no-repeat; background-position: center right; background-size: cover; } } /* Working */ .workmain{ width: 100%; height: 100%; display: flex; flex-direction: column; background-image: url(../img/programacion.jpeg); background-position: right; background-repeat: no-repeat; background-size: cover; } .work-logo{ display: flex; width: 100%; height: 30%; justify-content: center; } .work-logo svg{ width: 20em; } .work-info{ display: flex; width: 100%; height: 70%; flex-direction: column; align-items: center; justify-content: space-around; } .work-info p{ font-size: 2.5rem; font-family: 'Comfortaa', cursive; font-weight: bold; color: white; } .work-info svg{ width: 6em; animation: martillo 3s infinite; } @keyframes martillo { 5%{ transform: translateY(-30px); } 20%{ transform: translateY(0px); } 30%{ transform: rotate(50deg); } 40%{ transform: rotate(0deg); } } .work-info a{ text-decoration: none; font-size: 2rem; color: rgb(255, 255, 255); border: 3px #09ceff solid; background-color: rgba(66, 66, 66, 0.473); border-radius: 25px; padding: 7px; font-family: 'Comfortaa', cursive; transition: all .5s; } .work-info a:hover{ box-shadow: 0px 0px 10px 5px rgb(6, 200, 235); background-color: #0000007e; color: #919191; } .pathmartillo{ fill: #f5d209; } @media (max-width:500px) { .workmain{ background-position: center; } .work-info p{ font-size: 1.5rem; } } /* div,img,li,a,p,h1,footer{ border: 1px solid red; } */