html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {display: block;}
*{box-sizing:border-box}
body{line-height:1}
ol, ul {list-style:none}
blockquote, q{quotes:none}
blockquote:before, blockquote:after, q:before, q:after{content:'';content:none}
table{border-collapse: collapse;border-spacing:0}
body{background: url('../img/bg-1.png');border-top:5px solid #000;color:#484545;font-family:Helvetica, Arial, sans-serif;font-size:100%;overflow-x:hidden}
img{max-width:100%;height:auto}
p{margin-bottom:0.7em;line-height:1.4em}
a, a:link, a:visited, a:active{color:#3797c5;text-decoration:none;outline:none}
a:hover{background:#3797c5;color:#fff}
a.logo:hover{text-decoration:none;background:none}
.wrapper {margin:0 auto;position:relative;width:100%;max-width:950px;padding:0 15px;}
header{width:100%;max-width:940px;margin:0 auto;padding:18px 0 10px 0;position:relative;}
header .wrapper{display:flex;align-items:flex-start;justify-content:space-between;gap:25px}
header .hgroup{display:inline-block;text-align:center}
header .hgroup .logo{font-family: 'Expletus Sans', Arial, serif; font-weight: 700;font-size:2.4em;color:#353535;}
header .hgroup h2, header .hgroup h1{font-family: 'Expletus Sans', Arial, serif; font-weight: 400;font-size:1em;color:#3797c5;position:relative;}
nav {display:block;width:auto;margin-top:15px;}
nav ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 12px;list-style:none}
nav li{display:block;list-style:none;font-family: 'Expletus Sans', Arial, serif; font-weight: 400}
nav ul a {display:block;padding:3px 10px;transition:all 0.2s ease-in-out}
nav ul li a:hover, .current{background:#fff;color:#3797c5;border-radius: 6px;box-shadow: 2px 3px 4px rgba(204,204,204,0.5)}
section{width:100%;max-width:910px;margin:20px auto;min-height:540px;padding:15px;font-size:0.9em}
#container{background:#fff;width:100%;border-top:2px dashed #3797c5;border-bottom:1px solid #3797c5}
#caja_slide{width:100%;max-width:940px;height:300px;position:relative;margin:20px auto 0 auto;border:10px solid #f4f4f4}
#mySlides{width:100%;max-width:940px}
.title{font-size:1.6em;color:#000;margin-bottom:0.5em;font-family: 'Expletus Sans', Arial, serif;font-weight:400;line-height:1.2}
.margen_superior{margin-top:1.2em}
.im_portada{float:left;margin:5px 35px 25px 0;transform: rotate(-6deg);padding: 5px 5px 10px 5px;background:linear-gradient(white,#eee);border:1px solid #fff;box-shadow:-2px 2px 12px #9f9e9e;transition:all 1.5s ease;max-width:200px}
.im_portada:hover{transform: rotate(4deg) translate(5px);}
.im_maquetacion{float:right;margin-top:35px}
.services-grid{clear:both;display:flex;flex-wrap:wrap;gap:25px 35px;margin:5px 0 25px 0}
.home .service-card, .markup div, .seo div{width:390px;float:left;margin:5px 35px 25px 0;border:1px solid #f2f2f2;border-top:3px solid #3797c5;border-left:1px solid #f0f0f0;padding:20px;background: url('../img/bg-3.png');min-height:232px;box-shadow:-2px 3px 8px #dcdcdc;transition:all 0.6s ease-in-out}
.home .service-card{flex:1 1 390px;float:none;width:auto;margin:0}
.home .service-card:hover{background:#3797c5;border:1px solid #333;border-top:3px solid #333;color:#fff;}
section ul {margin:1.2em 2em;line-height:1.8em;list-style: disc}

section.markup div{width:200px;margin-top:10px;min-height:190px;font-size:0.9em}
section.markup div.how{width:290px}
section.seo div {height:auto;width:95%;}
a.lado{display:inline-block;background:#3797c5;color:#fff;padding:0 8px;transition:all 0.6s ease-in-out;}
a.lado:hover{transform: rotate(2deg)}
.home .service-card:hover a.lado{background:#fff;color:#3797c5;padding:0 28px;}
section h2, section h3{font-weight: 700;font-size:1.3em;color:#000;margin-bottom:0.8em}
section h4{font-weight: 700;font-size:1.2em;margin-bottom:0.8em}
.home .service-card:hover h3{color:#333;}
div.sin_margen_derecho{margin-right:0}
.rompe {clear:both}  
.markup hgroup{display:inline-block} 
.markup h1, .portfolio h1, .seo h1{font-family: 'Expletus Sans', Arial, serif; font-weight: 700;font-size:1.8em;color:#3797c5;padding-bottom:8px;}  
.markup h2{font-family: 'Expletus Sans', Arial, serif; font-weight: 400;color:#3797c5;position:relative;top:-2px}
.seo h2{font-family: 'Expletus Sans', Arial, serif; font-weight: 400;color:#3797c5;margin-top:25px;}
.markup div h3{color:#e44d26;font-size:1.2em}  
.markup div ul, .seo div ul{list-style:circle;margin-left:10px} 
.markup div li{line-height:1.7em}
.seo div li{line-height:1.7em;margin-bottom:14px;}
.portfolio div{margin-bottom:15px}
.portfolio img{margin:20px;border:solid 5px rgb(255, 255, 255);box-shadow:0px 0px 5px #000;width:370px;}
.portfolio img:hover{box-shadow:0 0 15px #3797c5;transition:all .3s ease-out;opacity:0.5}
.portfolio ul{float:right; width:470px;margin-top:20px;font-style:italic}
.portfolio ul strong{font-family:'Expletus Sans', Arial, serif;font-size:1.2em;color:#3797c5;font-style:normal}
.portfolio ul li{margin-bottom:5px}
.portfolio ul span{color:#3797c5;font-style:normal}
footer{text-align:center;margin-top:20px;width:100%;font-size:0.8em;padding:0 15px 20px}

#contacto {width:290px;float:right;margin:-25px 25px 25px 35px;font-size:0.9em;min-height:232px;border:1px solid #f2f2f2;border-top:3px solid #637382;border-left:1px solid #f0f0f0;padding:20px;background: url('../img/bg-3.png');box-shadow:-2px 3px 8px #dcdcdc;position:relative;
}
#contacto h4{font-family: 'Expletus Sans', Arial, serif;color:#e44d26;font-size:1.5em;font-style:italic;}
#contacto label {display:inline-block;width:72px;padding-top:6px;height:30px;vertical-align: top}
#contacto input[type="text"], #contacto input[type="email"], #contacto textarea { border:1px solid #9f9e9e; padding:3px 6px;color:#333;width:200px;max-width:100%;}
#contacto input[type="text"]:focus, #contacto input[type="email"]:focus, #contacto textarea:focus { border:1px solid #e44d26; }
#contacto textarea {height:120px;}
#contacto input[type="submit"] {margin:15px auto 0 auto;display:block;background:#3797c5;color:#fff;border:0;padding:6px 14px;cursor:pointer;font-weight:bold;}
#respuesta {position:absolute;top:35px;background:#3797c5;color:#fff;padding:15px;border:0;min-height:20px;font-size:1em;text-align:center;width:260px;max-width:calc(100% - 30px);display:none;}
.direccion {color:#666;margin-top:45px;font-size:0.8em;text-align:center;}

@media (max-width: 768px){
  header{padding:18px 0 12px 0}
  header .wrapper{align-items:center;flex-direction:column;gap:8px;text-align:center}
  header .hgroup .logo{font-size:2.2em}
  nav{margin-top:4px;width:100%}
  nav ul{justify-content:center;gap:8px}
  nav ul a{padding:7px 10px}
  section{margin:15px auto;min-height:0;padding:20px 15px;font-size:1em}
  .im_portada{float:none;display:block;margin:5px auto 28px auto;transform:rotate(-3deg)}
  .services-grid{display:block;margin-top:8px}
  .home .service-card{width:100%;margin:0 0 18px 0;min-height:0}
  .home .service-card:hover a.lado{padding:0 12px}
  .portfolio img{display:block;width:100%;max-width:370px;margin:20px auto}
  .portfolio ul{float:none;width:100%;margin-top:10px}
  #contacto{float:none;width:100%;max-width:360px;margin:20px auto}
}

@media (max-width: 480px){
  body{font-size:95%}
  .wrapper{padding:0 10px}
  header .hgroup .logo{font-size:1.9em}
  header .hgroup h1{font-size:0.95em}
  nav ul{gap:6px}
  nav ul a{padding:7px 8px}
  .title{font-size:1.45em}
  section{padding:18px 12px}
  .home .service-card{padding:16px}
  #contacto label{display:block;width:auto;height:auto;padding-top:0;margin-bottom:4px}
  #contacto input[type="text"], #contacto input[type="email"], #contacto textarea{width:100%}
}