/*created by wavesite; updated by user*/
/*-IMPORT FUENTE DE GOOGLE FONTS-*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caprasimo&display=swap');

/*-VARIABLES COLORES FUENTES Y ALTURAS -*/
:root{
  --bodycolor:#444;
  --color1:#f85319;
  --color1:rgb(255,56,56);
  --color1light:#ff7c4c;
  --color2:#1e1d24;
  --white:#ffffff;
  --grey1:#1e1d24;
  --grey2:#707070;
  --grey3:#999999;
  --cancelcolor:#8A2522;
  --separator:70px;
  --halfseparator: 35px;
  --whatsapp:#37C846;
  --whatsapphover:#288b32;
  --facebook:#1877F2;
  --facebookhover:#1757aa;
  --font:'Montserrat', sans-serif;
}

*,*:not(i)::after,*:not(i)::before,*::placeholder,input,select,textarea{font-family:var(--font),"News Cycle";}
body{height:fit-content;overflow:auto;width:100vw;}
ul{list-style:none;margin:0;padding:0;}

.small{font-size:12px;}
.medium{font-size:14px;}
.big{font-size: 18px;}
.title{font-size:26px;font-weight: 500;}
.bigtitle{font-size:35px;}
.supertitle{font-size:53px}
.hypertitle{font-size:86px}


.DMfont{font-family: 'Caprasimo', serif;}

.content{width:100%;}
.wrapper{max-width: 1360px;margin:auto;}
.bodycolor{color:var(--bodycolor)}

.orangebg{background-color:var(--color1)}
.greybg{background-color: var(--color2)}
.orange{color:var(--color1)}
.grey{color: var(--grey1);}
.grey2{color: var(--grey2)}
.grey3{color:var(--grey3)}
.red{color:var(--cancelcolor)}
.redbg{color:var(--cancelcolor)}
.white{color:var(--white)}

.icenter{text-align: center;}
.ileft{text-align: left;}
.iright{text-align: right;}

.noview{display: none;;}

.capitalize{text-transform: capitalize;}
.upcase{text-transform: uppercase;}

.button,.button:active,.button:focus{border:3px solid var(--color1);color:var(--white);background:var(--color1);padding:2px 21px;border-radius:5px;display:inline-block;font-weight:bold;width:fit-content}
.button:hover{background:var(--color1light);border-color:var(--color1light);color:var(--white)}
.whatsappbutton{background-color: var(--whatsapp);color:var(--white);padding:5px 12px;border-radius: 5px;display: inline-block;width:fit-content;}
.whatsappbutton:hover{background-color:var(--whatsapphover);color:var(--white)}

.floatinglefticon,.floatingrighticon{font-size: 1.5em;width: 42px;text-align: center;}
.floatinglefticon{float: left;}
.floatingrighticon{float: right;}

.separator{height:var(--separator);}
.halfseparator{height:var(--halfseparator)}
.separator,.halfseparator{display:block;width:100%}
.haspaddingtop{padding-top:var(--halfseparator)}
.haspaddingbottom{padding-bottom:var(--halfseparator)}
.haspaddingleft{padding-left:var(--halfseparator)}
.haspaddingright{padding-right:var(--halfseparator)}
.hasmargintop{margin-top:var(--halfseparator)}
.hasmarginbottom{margin-bottom:var(--halfseparator)}
.hasmarginleft{margin-left:var(--halfseparator)}
.hasmarginright{margin-right:var(--halfseparator)}

.logo{width:250px;padding:12px;}
.calltoactionbutton{padding:21px 35px;}

/**----------- MODIFICAR ABAJO DE AQUI-------------**/

body{background:#1C1C34;color:#ffffff;overflow-x: hidden;}
header{padding: 22px 0;background: #161729;}
a:hover{color:skyblue;}
.rob{border-radius: 0 0 50px 50px;-webkit-box-shadow: 0 1px 0 0 rgba(255,56,56,.5);box-shadow: 0 1px rgba(255,56,56,.5);}
.headernav{margin:auto;padding:0;}
.headernav a{color:white;border-bottom:2px solid transparent;}
.headernav a:hover{color:#ccc;border-color:#ccc}
.headernav > li{display:inline-block;padding:8px;cursor:pointer}
.headernav > li > ul{display: none;position: absolute;background: #121212;margin-top: 12px;padding: 12px;list-style: none;z-index: 95;}
.headernav > li > ul > li{padding:5px 12px 5px 5px}
.headernav > li > ul > li:hover{padding:5px 5px 5px 12px}
.menutoggler,.closenav{display: none!important;}

.intropug{background: rgb(220,55,55);background: radial-gradient(circle, rgba(220,55,55,1) 0%, rgba(27,29,56,1) 70%);background-position: center -250px;height:95vh;box-shadow:inset 0 -15px 8px #1C1C34;margin-top:1px}
.thepug{height:85vh}

.navextra{list-style: none;padding:0;margin:0;cursor:pointer}
.navextra li{display: inline-block;padding:5px;border-radius:12px;}
.navextra li:hover{background:#121212;}
.navextra a{color:white;}
.navextra span{font-size:10px;}

footer{background-image: url(../img/footer-bg.jpg);background-position: center center;background-repeat: no-repeat;background-size: cover;margin-top:68px;}
.button{background:linear-gradient(135deg, rgb(235, 92, 24) 0%, rgb(249, 80, 85) 45.72%, rgb(202, 45, 184) 100%);border:none;border-radius: 50px;padding: 21px 26px;cursor: pointer;}
.button:active,.button:focus{padding: 21px 26px;border-radius: 50px;border:none;}
.customer{width:960px;padding:53px 12px;margin:auto;border-radius:12px;top: -35px;position: relative;box-shadow: inset 0 -3px 5px #00000070;}
.footernav{list-style: none;}
.footernav a{color:#fff}
.footernav li{padding:5px 12px}
.footernav li > ul{display:none;margin:0;padding:0;padding-left: 12px;list-style: none;}

#formcontainer{position: fixed;right:25px;bottom:53px;background:#fff;border-radius:12px;box-shadow: 0 5px 12px #333;width:350px;color:#333;padding:35px 12px;display:none;z-index: 98;}
#formcontainer input,#formcontainer textarea{width:100%;border:none;border-bottom:2px solid #ccc;margin-bottom:12px;border-radius:0;background-color: #efefef;padding:12px}
#formcontainer input::placeholder,#formcontainer textarea::placeholder{color:#999}
#toggleMail{font-size: 35px;position: fixed;right: 21px;bottom: 21px;background: #fff;color: var(--color1);padding: 15px;border-radius: 50px;z-index: 99;}
#formcontainer .fa-times{font-size: 35px;background: #ccc;padding: 12px 17px;border-radius: 50px;margin-left:-45px}
#formcontainer .fa-times:hover{background:#efefef;}

.box1{background-image: linear-gradient(97.31deg, rgba(235, 92, 24, 0.114) 0%, rgba(249, 80, 85, 0.114) 45.72%, rgba(202, 45, 184, 0.114) 100%);border-radius:21px;padding:35px 21px;margin:21px auto}

.externallink{background: rgba(255,255,255,8%);}
.externallink{background:#6d55e9}

.testimonial{background: linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(27,28,53,.44) 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 153px;}

.servicemarquee{width: 100%;position: relative;white-space: nowrap;margin-top:35px;margin-bottom:35px;overflow:hidden}
.servicemarquee .marqueeelement{background-size:cover;border-radius:21px;box-shadow:inset 0 5px 12px #000;display:inline-block;width:350px;height:425px;margin:0 12px;overflow:hidden}
.servicemarquee .marqueeelement span{display: block;padding:34px;font-size:1.6em;font-weight:900;margin-top:-500px;;position:absolute; padding-top: 340px;
  background: rgba(0,0,0,.8);width: 350px;padding-bottom:55px;border-radius:21px;}
.servicemarquee .marqueeelement div{margin-top:500px;position: absolute;width: 350px;text-align: right;padding-right: 35px;}
.servicemarquee .marqueeelement:hover span{margin-top:0;border-radius:21px;}
.servicemarquee .marqueeelement:hover div{margin-top:350px;z-index:2}

.behanceportfolio{width: 100%;margin-top:35px;margin-bottom:35px;overflow:hidden;transform:rotate(-3deg);min-height:250px;text-align: center;}
.behanceportfolio .element{width:calc(100% / 5.5 );background-size:cover;border-radius:21px;margin:6px;display: inline-block;box-shadow: 0 2px 5px #333;}
.behanceportfolio .element span{background: rgba(0,0,0,.8);padding: 15px 35px;border-radius: 50px;margin-bottom: 22px;display: block;opacity:0}
.behanceportfolio .element > div{opacity: 0;}
.behanceportfolio .element:hover span, .behanceportfolio .element:hover > div{opacity:1}

.marquee-container {width: 100%;position: relative;white-space: nowrap;height: 153px;overflow:hidden;line-height:1px;}
.marquee {position: absolute;top: 0;left: 100%;animation: marquee 50s linear infinite;line-height:1px;margin-top:-75px}
.marquee p{-webkit-text-stroke-width: thin;-webkit-text-stroke-color: rgb(255,56,56);color: transparent;}
.marquee-container2 {width: 100%;position: relative;white-space: nowrap;height: 153px;overflow:hidden;line-height:1px;}
.marquee2 {position: absolute;top: 0;left: 100%;animation: marquee2 50s linear infinite;line-height:1px;margin-top:-75px}
.marquee2 p{-webkit-text-stroke-width: thin;-webkit-text-stroke-color: rgb(255,56,56);color: transparent;}
@keyframes marquee {0% {left: -100%;}50% {left: 0%;}100% {left: -100%;}}
@keyframes marquee2 {0% {left: 0%;}50% {left: -100%;}100% {left: 0%;}}
.check{vertical-align: middle;margin-right: 12px;}

#domainseaker{position: sticky;bottom:53px;background: #121212;color:#fff;left:20%;width: 60%;border-radius: 100px;margin-top:-42px;}
#domainseaker input{background:transparent;font-size:2em;padding:21px 35px;border:none;color:#efefef;width:86%}
#domainseaker input::placeholder{color:#333;font-family: var(--font)}
#domainseaker i{font-size: 3em;padding: 21px;color: #999;float:right}

#domainseaker2{background:#121212;color:#fff;border-radius:100px;}
#domainseaker2 input{background:transparent;font-size:1.5em;padding:12px;border:none;color:#efefef;width:75%}
#domainseaker2 input::placeholder{color:#333;font-family: var(--font)}
#domainseaker2 i{font-size: 2em;padding: 12px;color: #999;float:right}

.cliente1{width:400px;position:absolute;}
.cliente2{width: 430px;position: absolute;margin-left: 200px;margin-top: 100px;}
.rounded{border-radius: 21px;box-shadow:inset 0 5px 12px #000000;}

.imagecontainer1{background-image:url(../img/imgcontainer1.png);background-size:100%;background-repeat: no-repeat;animation:sutil 10s linear infinite;text-align: center;}
.imagecontainer2{background-image:url(../img/imgcontainer2.png);background-size:95%;background-repeat: no-repeat;animation:sutil 10s linear infinite;text-align: center;}
.imagecontainer3{background-image:url(../img/imgcontainer3.webp);background-size:81%;background-repeat: no-repeat;animation:sutil 10s linear infinite;text-align: center;}
.imagecontainer4{background-image:url(../img/imgcontainer4.png);background-size:84%;background-repeat: no-repeat;animation:sutil2 15s linear infinite;text-align: center;}
.imagecontainer5{background-image:url(../img/imgcontainer5-01.png);background-size:90%;background-repeat: no-repeat;animation:sutil2 10s linear infinite;text-align: center;}
.imagecontainer1 img,.imagecontainer2 img,.imagecontainer3 img,.imagecontainer4 img,.imagecontainer5 img{width:95%;}
@keyframes sutil{
  0%{background-position:0 0;}
  25%{background-position:0 10px}
  50%{background-position:10px 10px}
  75%{background-position:10px 0}
  99%{background-position:0 0}
}
@keyframes sutil2{
  0%{background-position:15px 0}
  8.333333333%{background-position: 10px 5px}
  16.66666667%{background-position: 5px 10px}
  25%{background-position: 0 15px}
  33.33333333%{background-position:5px 20px}
  41.66666667%{background-position:10px 25px}
  50%{background-position:15px 30px}
  58.33333333%{background-position:20px 25px}
  66.66666667%{background-position:25px 20px}
  75%{background-position:30px 15px}
  83.33333333%{background-position:25px 10px}
  91.66666667%{background-position:20px 5px}
  100%{background-position:15px 0}

  
}

.hrline{border: 1px solid var(--color1);width: 100px;display: inline-block;margin: 0 12px;}
.hrline2{width: 80%;height: 1.112px;opacity: .5;background: radial-gradient(50% 50% at 50% 50%,#FFF 0%,rgba(22,35,43,0) 100%);margin:12px auto}

/******************************** MODULO DE SERVICIO********************************/
.focussearched{position:fixed;top:12px;left:10%;width:80%;z-index:89}
#startproyect{background: #fff;position: fixed;width: 80%;height: 80%;top: 0;left: 0;display:none;z-index:88;transform:translate(-50%,-50%);top:50%;left:50%;padding:12px;color:#333; overflow:auto}
#startproyect .fa-times{font-size: 2em;padding: 12px 15px;margin: -12px;cursor: pointer;}
#startproyect .fa-times:hover{background:#121212;color:#fff;}
#domainchecker{background:#121212;color:#efefef;height:fit-content;padding:12px 21px;width:80%;margin:auto;border-radius:50px;border:none;font-size:1.5em;display:block;}
#processstarted{background:#121212;color:#fff;padding:21px 35px;position:fixed;bottom:6%;width:80%;left:50%;font-size:1.5em;display:none;transform:translate(-50%);max-width: 1300px;}
#processstarted .fa-times{float:right;}


/******************************** ESTILOS EN PARA BLOG********************************/
.blogpostportada{background-position: center;background-size:cover;height: 450px;margin-top:53px;border-radius: 21px;margin-bottom:35px;}
.blogpostcontent li{padding:12px;padding-left:21px;}
.blogpostcontent a[target="_blank"]::before{content:"\f14d";font-family: "Font Awesome 6 Free";font-weight: 900;margin:0 12px}
.postentry h2{height:90px}
.postentry p{height:90px}
.entryportada{border-radius:12px;height:150px;background-size:100%;background-position:center;width:90%;}
.postentry:hover .entryportada{background-size:110%}

/******************************** ESTILOS EN WEB.PHP********************************/
.incluye,.noincluye{padding:4px 6px;border-radius:50px;font-size:12px;margin:-3px auto}
.incluye{background:#3daf2a}
.noincluye{background:#d9534f;}
.planes .planoption{background:#2f2e43;border-radius:21px;box-shadow: inset 0 5px 12px 0px rgba(0,0,0,1.4);transition:2s;width:19%;}
.planes li:hover{top:21px;z-index:3}
.planes .explain{padding: 5px 0;font-size:0.95em}
.planes .planname{padding: 21px 10px;font-size: 1.2em;background: rgba(255,255,255,0.03);box-shadow: inset 0 5px 12px 0px rgba(0,0,0,1.4);border-radius:21px 21px 0 0}
.planes .plandetail{padding:12px;font-size:0.9em}

.windowexplanation{width:50%;min-width:350px;max-width:550px;background:#121212;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:none;z-index:5}
.windowexplanation .fa-times{font-size:2em;background:#333;padding:12px 16px;margin-right:-1px}
.windowexplanation .fa-times:hover{background:#666}
.windowexplanation section{padding:21px 35px 53px 35px;font-size:1.3em;}
.faqs details{padding:12px 21px;}
.faqs summary{padding:8px 0}
.faqs summary:after{content:"\2b";font-family: "Font Awesome 6 Free"; font-weight: 900;padding: 12px;float:right;margin-top:-12px}
.faqs details[open] summary:after{content: "\f068";}

.promo:hover{position:relative;transform:scale(1.01);box-shadow:0 0 12px 12px #002e5c}

/******************************** ESTILOS EN 3DPRINTING.PHP********************************/
#calculator{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);background: #121212;padding: 21px;display:none;}
#calculator input{font-size:1.5em;margin-bottom:21px}
#calculator input::placeholder{color:#ccc}

/********************************RESPONSIVE********************************/

@media only screen and (max-width:768px){
.thepug{height:35vh}
.cliente1,.cliente2{position:static;width:100%;margin:0}
.customer{width: 90%;height: 223px;margin-top: -68px;}
.needhelp{font-size:21px}
.customer .button{float:right}
.intropug{height:42vh}
.somos{font-size:3.5em!important}
.agencia{font-size: 4.5em!important;}
.creativa{font-size:4.12em!important}
#domainseaker{width:90%;left:5%}
#domainseaker input{width: 80%;font-size:1.5em}
#domainseaker i{font-size:1.5em;padding:23px;}

.menutoggler{    display: block!important;
  text-align: right;
  width: fit-content;
  font-size: 2em;
  float: right;}
.headernav{position: fixed;background: #121212;top: 0;left: -100%;width: 90%;height: 100vh;z-index: 99;overflow:autO;}
.headernav li{display:blocK}
.headernav > li > ul{position: static;}
.headernav > li > ul > li{padding:12px 21px}
.closenav{display:block!important;font-size: 2em;text-align: right;}
.nobreak br{display:none;}
.behanceportfolio .element{width:calc(100% / 2.5)}
.blogpostportada {background-size:cover;height:250px}

.planes .planoption{width:100%;margin-bottom:21px}
.incluye,.noincluye{margin-bottom:35px;}
.mobilseo::after
,.mobilresponsive::after
,.mobilsocial::after
,.mobilform::after
,.mobilssl::after
,.mobilpayment::after
,.mobilcrm::after
,.mobilblog::after
,.mobiltraining::after
{display: block;
  width: 80%;
  position: absolute;
  margin-top: 12px;
  font-family: 'Montserrat';
  left: 10%;font-weight: 400;
  font-size: 1.25em;}
.mobilseo::after{content:"Configuración de SEO"}
.mobilresponsive::after{content:"Adaptado a movil"}
.mobilsocial::after{content:"Redes sociales";}
.mobilform::after{content:"Formularios de contacto";}
.mobilssl::after{content:"Certificado SSL";}
.mobilpayment::after{content:"Conexión pasarela de pago";}
.mobilcrm::after{content:"Conexión con CRM";}
.mobilblog::after{content:"Posibilidad de Blog";}
.mobiltraining::after{content:"Capacitación de uso";}
#startproyect{width:100%;height:100%}
#processstarted{font-size:16px;bottom:10%;width:90%;left:5%;}
#processstarted .fa-times {float: right;margin-top: -50px;margin-right: -21px;}
  }