body{ padding:0; margin:0; background:#FFF; } body a{ transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } input[type="button"],input[type="submit"]{ transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } h1,h2,h3,h4,h5,h6{ margin:0; padding:0; } p{ margin:0; padding:0; } ul{ margin:0; padding:0; } label{ margin:0; } button{ transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } img { transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } /*-- /reset code --*/ /*DIFERENTES TIPOS DE ENLACES*/ A:link {color:#000; text-decoration: none;} A:visited {color:#000; text-decoration: none;} A:active {color:#000; text-decoration: none;} A:hover {color:#5cb874; text-decoration: none;} A.clase1:visited {color:#5cb874; text-decoration: none;} A.clase1:active {color:#ff0000; text-decoration: none;} A.clase1:link {color:#5cb874; text-decoration: none;} A.clase1:hover {color:#ff0000; text-decoration: none;} A.clase2:visited {color:#0080B8; text-decoration: none; font-weight:900;} A.clase2:active {color:#0080B8; text-decoration: none; font-weight:900;} A.clase2:link {color:#0080B8; text-decoration: none; font-weight:900;} A.clase2:hover {color:#555; text-decoration: none; font-weight:900;} A.clase3:visited {color:#000000; text-decoration: none; } A.clase3:active {color:#000000; text-decoration: none; } A.clase3:link {color:#000000; text-decoration: none; } A.clase3:hover {color:#0080B8; text-decoration: none; } /*EMPIEZA TODO EL CSS PARA EL DESPLAZAMIENTO*/ .subir{ -ms-transition: 0.5s ease-in; -moz-transition: 0.5s ease-in; -o-transition: 0.5s ease-in; -webkit-transition: 0.5s ease-in; transition: 0.5s ease-in; } .subir:hover{ transform: translate(0px,-8px); -ms-transform: translate(0px,-8px); /* IE 9 */ -moz-transform: translate(0px,-8px);/* Safari and Chrome */ -o-transform: translate(0px,-8px); -webkit-transform: translate(0px,-8px); } /*EMPIEZA TODO EL CSS PARA EL GIRO Y DESPLAZAMIENTO*/ .girar{ -ms-transition: desplazar 0.5s ease-in; -moz-transition: desplazar 0.5s ease-in; -o-transition: desplazar 0.5s ease-in; -webkit-transition: desplazar 0.5s ease-in; transition: desplazar 0.5s ease-in; } .girar:hover{ transform: rotate(-25deg) ; -ms-transform: rotate(-25deg) ; /* IE 9 */ -moz-transform: rotate(-25deg) ;/* Safari and Chrome */ -o-transform: rotate(-25deg) ; -webkit-transform: rotate(-25deg) ; } .bajar{ -ms-transition: 0.2s ease-out; -moz-transition: 0.2s ease-out; -o-transition: 0.2s ease-out; -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; } .bajar:hover{ transform: translate(0px,5px); -ms-transform: translate(0px,5px); /* IE 9 */ -moz-transform: translate(0px,5px);/* Safari and Chrome */ -o-transform: translate(0px,5px); -webkit-transform: translate(0px,5px); } .moverder{ -ms-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; -webkit-transition: 0.3s ease-out; transition: 0.3s ease-out; } .moverder:hover{ transform: translate(10px,0px); -ms-transform: translate(10px,0px); /* IE 9 */ -moz-transform: translate(10px,0px);/* Safari and Chrome */ -o-transform: translate(10px,0px); -webkit-transform: translate(10px,0px); } .transparente{ opacity: 100; } .transparente:hover { z-index:1; filter:alpha(opacity=70); -moz-opacity:.70; opacity:.70; } .responsabilidad{ text-transform:none; font-size: 1.0em; color: #B0232A; font-weight:400; margin:-2em 0 1.0em 0; text-align: center; } .paracontacto{ text-decoration: none; margin: 1.0em; padding: 5px 10px; font-weight: 500; font-size: 18px; color: #ffffff; background-color: #0080B8; border-radius: 6px; border: 1px solid #3140A0; } .paracontacto:hover{ color: #1883ba; background-color: #ffffff; } .btn-flotante { width: 110px; position: fixed; background: transparent; bottom: 40px; right: 2px; transition: all 300ms ease 0ms; z-index: 99; } .btn-flotante:hover { transform: translateY(-7px); } @media only screen and (max-width: 600px) { .btn-flotante { font-size: 14px; padding: 12px 20px; bottom: 20px; right: 20px; } } /*-- LATERALES FIJOS CON TELEFONOS Y REDES SOCIALES --*/ /* EN ESTE CASO TENEMOS EN RIGHT Y POR LO TANTO NECESITAMOS QUE ABRA A LA IZQUIERDA*/ .social { position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/ left: 0px; /* Establecemos la barra en la izquierda */ top: 10em; /* Bajamos la barra 200px de arriba a abajo */ z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */ } @media (max-width: 736px){ .social { top: 7em; /* SUBIMOS LA BARRA PARA UN TELEFONO */ } } #navigationMenu li{ list-style:none; height:35px; width:35px; padding:0px; margin-right:1px; } /* COMO TENEMOS RIGHT:35PX SE ABRE HACIA LA IZQUIERDA, SI CAMBIAMOS RIGHT POR LEFT SE ABRE HACIA LA DERECHA*/ #navigationMenu span{ width:0; left:35px; height:35px; padding:0; position:absolute; overflow:hidden; font-family:'Myriad Pro',Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; letter-spacing:0.6px; white-space:nowrap; line-height:20px; display: flex; align-items: center; -webkit-transition: 0.25s; -moz-transition: 0.25s; transition: 0.25s; } #navigationMenu a{ background:url('img/navigation.jpg') no-repeat; height:35px; width:35px; display:block; position:relative; } /* General hover styles */ #navigationMenu a:hover span{ width:auto; padding:0 15px 0 10px; overflow:visible; } #navigationMenu a:hover{ text-decoration:none; /* CSS outer glow with the box-shadow property */ -moz-box-shadow:0 0 5px #9ddff5; -webkit-box-shadow:0 0 5px #9ddff5; box-shadow:0 0 5px #9ddff5; } /* CAMBIAMOS EN CADA UNO DE LOS ICONOS EL border-top-left-radius y el border-bottom-left-radius dependiendo de si tenemos a la izquierda o a la derecha el menu lateral*/ /* Green Button */ #navigationMenu .telefono { background:url('../images/icon_telefono.png') no-repeat;} #navigationMenu .telefono:hover {background:url('../images/icon_telefono_over.png') no-repeat;} #navigationMenu .telefono span{ background-color: rgba(0,0,0,0.4); border-top-left-radius:30px; border-bottom-left-radius:30px; border-width: 0px; border-style: solid; border-color: #DCA9AF; color:#fff; text-shadow:1px 1px 1px #000; line-height:1em; } /* WhatsApps */ #navigationMenu .whatsapp { background:url('../images/icon_whatsapp.png') no-repeat;} #navigationMenu .whatsapp:hover { background:url('../images/icon_whatsapp_over.png') no-repeat;} #navigationMenu .whatsapp span{ background-color: rgba(0,0,0,0.4); border-top-left-radius:30px; border-bottom-left-radius:30px; border-width: 0px; border-style: solid; border-color: #DCA9AF; color:#fff; text-shadow:1px 1px 1px #000; line-height:1em; } /* Blue Button */ #navigationMenu .correo { background:url('../images/icon_correo.png') no-repeat;} #navigationMenu .correo:hover { background:url('../images/icon_correo_over.png') no-repeat;} #navigationMenu .correo span{ background-color: rgba(0,0,0,0.4); border-top-left-radius:30px; border-bottom-left-radius:30px; border-width: 0px; border-style: solid; border-color: #DCA9AF; color:#fff; text-shadow:1px 1px 1px #000; line-height:1em; } /* Amarillento Button */ #navigationMenu .blog { background:url('../images/icon_blog.png') no-repeat;} #navigationMenu .blog:hover { background:url('../images/icon_blog_over.png') no-repeat;} #navigationMenu .blog span{ background-color: rgba(0,0,0,0.4); border-top-left-radius:30px; border-bottom-left-radius:30px; border-width: 0px; border-style: solid; border-color: #DCA9AF; color:#fff; text-shadow:1px 1px 1px #000; line-height:1em; } /* Orange Button */ #navigationMenu .facebook { background:url('../images/icon_facebook.png') no-repeat;} #navigationMenu .facebook:hover { background:url('../images/icon_facebook_over.png') no-repeat;} #navigationMenu .facebook span{ background-color: rgba(0,0,0,0.4); border-top-left-radius:30px; border-bottom-left-radius:30px; border-width: 0px; border-style: solid; border-color: #DCA9AF; color:#fff; text-shadow:1px 1px 1px #000; line-height:1em; } /* Yellow Button */ #navigationMenu .twitter { background:url('../images/icon_twitter.png') no-repeat;} #navigationMenu .twitter:hover{ background:url('../images/icon_twitter_over.png') no-repeat;} #navigationMenu .twitter span{ background-color: rgba(0,0,0,0.4); border-top-left-radius:30px; border-bottom-left-radius:30px; border-width: 0px; border-style: solid; border-color: #DCA9AF; color:#fff; text-shadow:1px 1px 1px #000; line-height:1em; } #navigationMenu .instagram { background:url('../images/icon_instagram.png') no-repeat;} #navigationMenu .instagram:hover{ background:url('../images/icon_instagram_over.png') no-repeat;} #navigationMenu .instagram span{ background-color: rgba(0,0,0,0.4); border-top-left-radius:30px; border-bottom-left-radius:30px; border-width: 0px; border-style: solid; border-color: #DCA9AF; color:#fff; text-shadow:1px 1px 1px #000; line-height:1em; } #navigationMenu .linkedin { background:url('../images/icon_linkedin.png') no-repeat;} #navigationMenu .linkedin:hover{ background:url('../images/icon_linkedin_over.png') no-repeat;} #navigationMenu .linkedin span{ background-color: rgba(0,0,0,0.4); border-top-left-radius:30px; border-bottom-left-radius:30px; border-width: 0px; border-style: solid; border-color: #DCA9AF; color:#fff; text-shadow:1px 1px 1px #000; line-height:1em; } /* Yellow Button */ #navigationMenu .elvideo { background:url('../images/icon_elvideo.png') no-repeat;} #navigationMenu .elvideo:hover{ background:url('../images/icon_elvideo_over.png') no-repeat;} #navigationMenu .elvideo span{ background-color: rgba(0,0,0,0.4); border-top-left-radius:30px; border-bottom-left-radius:30px; border-width: 0px; border-style: solid; border-color: #DCA9AF; color:#fff; text-shadow:1px 1px 1px #000; line-height:1em; } /*-- /Cierra --*/ /* youtube ROJO Button */ #navigationMenu .youtube { background:url('../images/icon_youtube.png') no-repeat;} #navigationMenu .youtube:hover{ background:url('../images/icon_youtube_over.png') no-repeat;} #navigationMenu .youtube span{ background-color: rgba(0,0,0,0.4); border-top-left-radius:30px; border-bottom-left-radius:30px; border-width: 0px; border-style: solid; border-color: #DCA9AF; color:#fff; text-shadow:1px 1px 1px #000; line-height:1em; } /*-- /Cierra --*/ /*-- Navbar --*/ /*-- PONEMOS COMO SE VE LA BARRA DE NAVEGACIÓN --*/ .nav { } .navbar { min-height: 80px; background-color: rgba(255, 255, 255, 0.1); } .navbar-right { margin-top:1em; margin-right: -4em; } .logo-w3ls { margin-top: 0.7em; width:205px; } /*-- PONEMOS COMO SE VE LA BARRA DE NAVEGACIÓN cuand es menor de 667px--*/ /*-- QUITAMOS EL FONDO A LA BARRA CUANDO ES MENOR DE 667px --*/ @media (max-width: 667px) { .navbar { background-color: rgba(0, 0, 0, 0.0); } /*-- EL navbar-toggle LO MODIFICAMOS EN bootstrap.min.css lineas 8 a 16--*/ /*-- PONEMOS FONDO EN EL SUBMENU QUE APARECE HACIENDO CLICK EN EL navbar-toggle --*/ .navbar ul{ margin-top:-5px; background-color: rgba(255, 255, 255, 0.7); } } a.navbar-brand { margin-top:-30px; font-family: 'Racing Sans One', cursive; font-size: 20px; } .navbar-default .navbar-brand { color: #C0C6C6; } .navbar-default .navbar-brand:hover { color: #FFF; } .navbar-nav>li { margin-left:0px; text-align:center; padding: 5px 3px; } .navbar-default .navbar-nav>li>a { font-size: 1.1em; color: #000; } .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #00B2E0; font-weight:500; } /*-- EFECTO EFECTO Link-Hover-Effect --*/ .hover-effect a { padding: 5px; color: #237546; text-shadow: none; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; font-family: 'Raleway', sans-serif; } .hover-effect a::before, .hover-effect a::after{ position: absolute; left: 0; width: 100%; height: 2px; background: #00B2E0; content: ''; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .hover-effect a::before { top: 0; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .hover-effect a::after { bottom: 0; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -o-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } .hover-effect a:hover, .hover-effect a:focus { color: #fff; } .hover-effect a:hover::before, .hover-effect a:focus::before, .hover-effect a:hover::after, .hover-effect a:focus::after ,.hover-effect.active a::after ,.hover-effect.active a::before{ opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } /*-- //Link-Hover-Effect --*/ .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: #fff; background-color: transparent; } /*-- //Navbar --*/ body { color:#999; font-family: 'Raleway', sans-serif; } /*-- logo --*/ section.banner-w3ls .logo-w3ls { position: absolute; z-index: 999; left: 1%; padding:10px; } section.banner-w3ls .logo-w3ls a { text-decoration:none; } section.banner-w3ls .logo-w3ls a h1 { font-size:40px; font-weight:bold; color:#fff; text-transform:uppercase; font-family: 'Poiret One', cursive; } /*-- /logo --*/ /*-- navigation --*/ section.banner-w3ls button#trigger-overlay { border: 1px solid #fff; padding: 9px 13px; outline: none; background: rgba(0, 0, 0, 0.9); position: fixed; right: 200px; top: 70px; z-index: 999; } section.banner-w3ls button#trigger-overlay i.fa { font-size:24px; color:#2B2B2B; text-align:center; } /*-- /navigation --*/ /*-- ENLACES BANNER banner section --*/ /*-- /ENLACES BANNER --*/ /*-- banner section --*/ section.banner-w3ls { position:relative; } .modal { margin-top:100px; } section.banner-w3ls .modal { margin-top:80px; } section.banner-w3ls .modal-content { text-align: center; text-align: -webkit-center; text-align: -moz-center; } section.banner-w3ls .modal-header { background:#0080B8; } section.banner-w3ls .modal-header h4 { color: white; font-size: 30px; font-weight: normal; text-transform: uppercase; font-family: 'Poiret One', cursive; } section.banner-w3ls .modal-footer { background: #DFDFDF; } section.banner-w3ls .modal-body p { font-size:14px; font-weight:normal; color:#999; line-height:30px; padding:20px 0; } section.banner-w3ls .modal-body p .subtitulos { font-size:20px; font-weight:bold; color:#0080B8; line-height:30px; padding:20px 0; font-family: 'Poiret One', cursive; } section.banner-w3ls button.close { font-size: 60px; font-weight: 300; position: absolute; right: 20px; top: 1px; } section.banner-w3ls button.btn.btn-default { font-size: 16px; font-weight: normal; color: #fff; background-color: #DFDFDF; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .fl { float: left; } .row { width: 100%; } .grid12 { float: left; padding-left: 0.5em; padding-right: 0.5em; } .small12 { width: 100%; } .small3 { width: 25%; } .pogoSlider-slide-element { -webkit-animation-fill-mode: both; animation-fill-mode: both; text-align:center; margin-top: 410px!important; } .ajustederecha { float:right; margin-right:-15%; } /*-- responsive design --*/ @media (max-width:1600px) { .ajustederecha { float:right; margin-right:-25%; } } @media (max-width:1366px) { .ajustederecha { float:right; margin-right:-30%; } } @media (max-width:1024px) { .ajustederecha { float:right; margin-right:-20%; } } @media (max-width:768px) { .ajustederecha { float:right; margin-right:1%; margin-top: -130px!important; } } @media (max-width: 568px) { .ajustederecha { float:right; margin-right:-6%; margin-top: -50px!important; } } .pogoSlider-slide-element { width:90%; margin-left:5%; } .pogoSlider-slide-element h3 { color: #00A3D5!important; font-weight:700; font-size: 60px; text-align:left; line-height:85px; width:70%; letter-spacing: 3px; padding-bottom: 20px; text-transform:uppercase; font-family: 'Anton', sans-serif; -webkit-text-fill-color: #00A3D5; -webkit-text-stroke-color: white; -webkit-text-stroke-width: 0.5px; text-shadow:#fff 1px 2px 2px; } .pogoSlider-slide-element p { color: #fff!important; font-weight:normal; font-size:25px; font-weight:500; text-align:left; width:90%; padding:0 295px 0 0; line-height:35px; text-shadow:#000 2px 2px 2px; } .pogoSlider-slide-element ul.banner-agileits { padding-top:30px; text-align:left; } .pogoSlider-slide-element ul.banner-agileits li { list-style:none; display:inline-block; margin-right:5px; } .pogoSlider-slide-element ul.banner-agileits li a.link-w3l1{ width:200px; text-decoration:none; height:40px; line-height:40px; font-size:17px; font-weight:normal; color:#fff; text-align:center; background-color:#2B2B2B; display:inline-block; border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; -o-border-radius:25px; -ms-border-radius:25px; font-family: 'Poiret One', cursive; } .pogoSlider-slide-element ul.banner-agileits li a.link-w3l1:hover { background-color:#4E4E4E; } .pogoSlider-slide-element ul.banner-agileits li a.link-w3l2{ width:200px; text-decoration:none; height:40px; line-height:40px; font-size:17px; font-weight:normal; color:#fff; text-align:center; background-color:#0080B8; display:inline-block; border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; -o-border-radius:25px; -ms-border-radius:25px; font-family: 'Poiret One', cursive; } .pogoSlider-slide-element ul.banner-agileits li a.link-w3l2:hover { background-color:#DC2F54; } .pogoSlider-slide-element a.btn-circle { color:#0080B8; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .pogoSlider-slide-element a.btn-circle:hover, .pogoSlider-slide-element a.btn-circle:focus { text-decoration: none; color: #11505d; } .btn-circle { width: 70px; height: 70px; margin-top: 120px; padding: 7px 16px; border: 2px solid #fff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; font-size: 40px; color: #fff; background: 0 0; -webkit-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; transition: background .3s ease-in-out; } .btn-circle:hover, .btn-circle:focus { outline: 0; color: #fff; background: rgba(255,255,255,.1); } .btn-circle i.animated { -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; color:#2B2B2B; } .btn-circle:hover i.animated { -webkit-animation-name: pulse; -moz-animation-name: pulse; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; } @-webkit-keyframes pulse { 0 { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes pulse { 0 { -moz-transform: scale(1); transform: scale(1); } 50% { -moz-transform: scale(1.2); transform: scale(1.2); } 100% { -moz-transform: scale(1); transform: scale(1); } } .btn { text-transform: uppercase; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 400; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } /*-- /banner section --*/ .slogan h2 { font-size:40px; font-weight:bold; color:#0080B8; padding:10px 0 0px; font-family: 'Poiret One', cursive; } @media (max-width: 768px) { font-size:30px; } /*-- about section --*/ section.about-w3l { padding:50px 0; } section.about-w3l h2 { font-size:40px; font-weight:bold; color:#0080B8; padding:55px 0 20px; font-family: 'Poiret One', cursive; } section.about-w3l p { color:#000; font-size:16px; font-weight:normal; line-height:35px; text-align:justify; } section.about-w3l div#slideshow-banner { height:600px; width:100%; overflow:hidden; position:relative; margin:0px auto; top: 10px; } section.about-w3l div#slideshow-banner ul { width:100%; height:100%; } ul li { list-style-type:none; } section.about-w3l #slideshow-controller { position: absolute; bottom: 10px; left: 45%; } section.about-w3l #slideshow-banner ul { position: relative; } section.about-w3l #slideshow-banner ul .slideshow-item { position: absolute; } section.about-w3l #slideshow-banner ul li.slideshow-item img { width:100%; height:auto; } section.about-w3l #controller-left { position: absolute; left: 2%; top: 45%; cursor: pointer; } section.about-w3l #controller-right { position: absolute; right: 2%; top: 45%; cursor: pointer; } section.about-w3l .controller-item { display: inline-block; width: 10px; height: 10px; background: #f00; margin-right: 10px; border-radius: 10px; opacity: 0.5; cursor: pointer; } section.about-w3l .controller-item-hover { opacity: 1; background: #ccc; transform: rotateX(360deg); transition: transform 2s; } section.about-w3l .slideshow-transform { transform: scale(1.3, 1.3); transition: transform 8s; } /*-- /about section --*/ /* ANIMACION */ /*-------------------------------------------------------------- # Hero Section --------------------------------------------------------------*/ #hero { width: 100%; overflow: hidden; position: relative; background: linear-gradient(0deg, #2a2c39 0%, #5cb874 80%, #ffffff 100%); padding: 0; } #hero .carousel-container { display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; position: relative; height: 79vh; padding-top: 50px; } #hero h2 { color: #fff; margin-bottom: 30px; font-size: 48px; font-weight: 700; } #hero h7 { color: #fff; margin-bottom: 30px; font-size: 28px; font-weight: 700; } #hero p { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; margin: 0 auto 30px auto; color: #fff; } #hero .carousel-control-prev, #hero .carousel-control-next { width: 10%; } #hero .carousel-control-next-icon, #hero .carousel-control-prev-icon { background: none; font-size: 48px; line-height: 1; width: auto; height: auto; } #hero .btn-get-started { font-family: "Raleway", sans-serif; font-weight: 500; font-size: 14px; letter-spacing: 1px; display: inline-block; padding: 12px 32px; border-radius: 50px; transition: 0.5s; line-height: 1; margin: 10px; color: #fff; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; border: 2px solid #00b7e6; } #hero .btn-get-started:hover { background: #00b7e6; color: #fff; text-decoration: none; } @media (min-width: 1024px) { #hero p { width: 60%; } #hero .carousel-control-prev, #hero .carousel-control-next { width: 5%; } } @media (max-width: 768px) { #hero .carousel-container { height: 90vh; width: 60%; margin-left: 20%; } #hero h2 { font-size: 28px; } } .hero-waves { display: block; width: 100%; height: 60px; position: relative; } .wave1 use { -webkit-animation: move-forever1 10s linear infinite; animation: move-forever1 10s linear infinite; -webkit-animation-delay: -2s; animation-delay: -2s; } .wave2 use { -webkit-animation: move-forever2 8s linear infinite; animation: move-forever2 8s linear infinite; -webkit-animation-delay: -2s; animation-delay: -2s; } .wave3 use { -webkit-animation: move-forever3 6s linear infinite; animation: move-forever3 6s linear infinite; -webkit-animation-delay: -2s; animation-delay: -2s; } @-webkit-keyframes move-forever1 { 0% { transform: translate(85px, 0%); } 100% { transform: translate(-90px, 0%); } } @keyframes move-forever1 { 0% { transform: translate(85px, 0%); } 100% { transform: translate(-90px, 0%); } } @-webkit-keyframes move-forever2 { 0% { transform: translate(-90px, 0%); } 100% { transform: translate(85px, 0%); } } @keyframes move-forever2 { 0% { transform: translate(-90px, 0%); } 100% { transform: translate(85px, 0%); } } @-webkit-keyframes move-forever3 { 0% { transform: translate(-90px, 0%); } 100% { transform: translate(85px, 0%); } } @keyframes move-forever3 { 0% { transform: translate(-90px, 0%); } 100% { transform: translate(85px, 0%); } } } /*-- services section --*/ section.service-w3l { padding:20px 0; } .fondo-uso { background-color:#FFFFFF; } .fondo-dondecomprar { background-color:#EFEFEF; } .fondo-catalogo { background-color:#EFEFEF; } section.service-w3l h3.text-center { font-size:40px; font-weight:bold; color:#000; padding-bottom:30px; font-family: 'Poiret One', cursive; position:relative; } section.service-w3l h3.text-center:before { content:''; position:absolute; background-color:#000; width:250px; height:2px; left:20%; bottom:2%; } section.service-w3l h3.text-center:after { content:''; position:absolute; background-color:#000; width:250px; height:2px; right:20%; bottom:2%; } section.service-w3l span.fa.fa-globe { font-size: 25px; color: #fff; display: block; text-align: center; margin-top: -16px; margin-bottom: 50px; } section.service-w3l span.fa.fa-plane { font-size: 25px; color: #fff; display: block; text-align: center; margin-top: -16px; margin-bottom: 50px; } section.service-w3l span.favico { font-size: 25px; color: #fff; display: block; text-align: center; margin-top: -30px; margin-bottom: 30px; } section.service-w3l h4.text-center { font-size:25px; font-weight:normal; color:#fff; padding:20px 0; text-transform:capitalize; font-family: 'Poiret One', cursive; } section.service-w3l p.text-center { font-size:14px; font-weight:normal; line-height:30px; color:#000; } .ch-grid { margin: 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; } .ch-grid:after, .ch-item:before { content: ''; display: table; } .ch-grid:after { clear: both; } .ch-grid li { width: 220px; height: 220px; display: inline-block; margin:0px; } .col-lg-4.col-md-4.col-sm-6.serv-agileinfo2 { padding-top: 190px; } .col-lg-12.col-md-12.col-sm-6.serv-wthree1,.col-lg-12.col-md-12.col-sm-6.serv-wthree4,.col-lg-12.col-md-12.col-sm-6.serv-wthree6 { padding-bottom: 40px; } /*-- /services section --*/ /*-- video --*/ .video { background: #; } .video iframe { width: 100%; min-height: 250px; } .video h4 { font-size: 1.2em; color: #0080B8; line-height: 1.0em; } .video p { color: #000; margin-top: 1.0em; } /*-- //video --*/ /*-- portfolio section --*/ section.portfolio-agileinfo { padding:100px 0; } section.portfolio-agileinfo h3.text-center { font-size:40px; font-weight:bold; color:#000; padding-bottom:30px; font-family: 'Poiret One', cursive; position:relative; } section.portfolio-agileinfo h3.text-center:before { content:''; position:absolute; background-color:#000; width:250px; height:2px; left:20%; bottom:2%; } section.portfolio-agileinfo h3.text-center:after { content:''; position:absolute; background-color:#000; width:250px; height:2px; right:20%; bottom:2%; } section.portfolio-agileinfo span.fa.fa-globe { font-size: 25px; color:#000; display: block; text-align: center; margin-top: -16px; margin-bottom: 50px; } section.portfolio-agileinfo span.favico { font-size: 25px; color: #fff; display: block; text-align: center; margin-top: -30px; margin-bottom: 30px; } /*-- /portfolio section --*/ /*-- team section --*/ section.team-agileinfo { padding:100px 0; background:url(../images/team.jpg) no-repeat; background-position:center; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; -ms-background-size:cover; position:relative; } .jarallax { position: relative; background-size: cover; background-repeat: no-repeat; background-position:center; } /*-- projects --*/ .projects{ padding:5em 0 0 0; background: #; } .projects-info{ text-align:center; } .projects-info p{ color: #999999; font-size: .9em; margin: 1em auto 0; width: 40%; } .projects-grids { margin: 3em 0 0 0; } #owl-demo .item{ text-align: center; } .projects-agile-grid-info{ position: relative; overflow: hidden; } .projects-agile-grid-info img{ width:100%; } i.fa.fa-cutlery { color: #FFFFFF; font-size: 2em; } .projects-grid-caption h4{ color: #FFFFFF; font-size: 1.5em; font-weight: 400; margin: 9em 0 0.5em 0; text-transform: uppercase; background: #000; padding: 10px; } .projects-grid-caption h4:hover{ color: #FFFFFF; font-size: 1.5em; font-weight: 400; margin: 9em 0 0.5em 0; text-transform: uppercase; background: #0080B8; padding: 10px; } .projects-grid-caption p{ color: #fff; font-size: 1em; margin: 0; } .projects-grid-caption { background-image:url(../images/flechaback.png); background-position: center; padding: 8em 1em 1em 1em; position: absolute; left: 0; bottom: -121%; text-align: center; width: 100%; height:650px; -webkit-transition: .5s all; transition: .5s all; -moz-transition: .5s all; border: 1px solid #999; } .projects-agile-grid-info:hover .projects-grid-caption{ bottom: 0%; } /*-- //projects --*/ /*EMPIEZA TODO EL CSS PARA BAJAR*/ .bajar{ -ms-transition: 0.3s ease-in; -moz-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; -webkit-transition: 0.3s ease-in; transition: 0.3s ease-in; } .bajar:hover{ transform: translate(0px,7px); -ms-transform: translate(0px,7px); /* IE 9 */ -moz-transform: translate(0px,7px);/* Safari and Chrome */ -o-transform: translate(0px,7px); -webkit-transform: translate(0px,7px); } /*EMPIEZA TODO EL CSS PARA SUBIR*/ .subir{ -ms-transition: 0.3s ease-in; -moz-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; -webkit-transition: 0.3s ease-in; transition: 0.3s ease-in; } .subir:hover{ transform: translate(0px,-7px); -ms-transform: translate(0px,-7px); /* IE 9 */ -moz-transform: translate(0px,-7px);/* Safari and Chrome */ -o-transform: translate(0px,-7px); -webkit-transform: translate(0px,-7px); } /*-- Oficinas --*/ .contenedoroficinas { padding:100px 0; background-color: #1d1b1b; width:100%; min-heigth:100px; text-align: center; } .oficinas-grid { display:inline-block; width: 340px; padding:10px; background-color:#fff; border: 2px solid #888; margin: 20px; } .contenedorbodega { background-color: #1d1b1b; width:100%; min-heigth:100px; text-align: center; } .bodega-grid-img { position:absolute; margin: 0 auto; left: 0; right: 0; max-width: 600px; padding:10px; background-color:#fff; border: 2px solid #888; } .bodega-grid h4 { color: #999; margin-top: 20px; margin-left: 20px; font-size: 20px; text-align: center; } .oficinas-grid-img img { width: 280px; display:flex; text-align: center; } .oficinas-grid h4 { color: #999; margin-top: 20px; font-size: 25px; text-align: center; } .oficinas-grid p { margin-top: 20px; color: #999; line-height: 27px; padding:20px; text-align: justify; } /*-- Cierra Oficinas Viejas--*/ .eltitular { font-size:40px; font-weight:bold; color:#0080B8; padding:15px 20px; font-family: 'Poiret One', cursive; } @media (max-width:11801px) { .eltitular { font-size: 35px; } @media (max-width:991px) { .eltitular { font-size: 27px; padding:5px 10px; } @media (max-width:11801px) { .eltitular { font-size: 45px; } /* full height demo */ html.demo-full-height, html.demo-full-height body, html.demo-full-height .jarallax { height: 100%; } html.demo-full-height .jarallax { min-height: 600px; } section.team-agileinfo h3.text-center { font-size:40px; font-weight:bold; color:#fff; padding-bottom:50px; font-family: 'Poiret One', cursive; position:relative; } section.team-agileinfo h3.text-center:before { content:''; position:absolute; background-color:#fff; width:250px; height:2px; left:20%; bottom:2%; } section.team-agileinfo h3.text-center:after { content:''; position:absolute; background-color:#fff; width:300px; height:2px; right:20%; bottom:2%; } section.team-agileinfo span.fa.fa-globe { font-size: 25px; color:#fff; display: block; text-align: center; margin-top: -16px; margin-bottom: 50px; } section.team-agileinfo span.favico { font-size: 25px; color: #fff; display: block; text-align: center; margin-top: -36px; margin-bottom: 50px; } section.team-agileinfo .view { width:100%; height:auto; margin:0 auto; overflow: hidden; position: relative; text-align: center; background: rgba(58, 161, 192, 0.38); cursor: default; } section.team-agileinfo .view .mask1, section.team-agileinfo .view .mask2, section.team-agileinfo .view .mask3, section.team-agileinfo .view .mask4, section.team-agileinfo .view .content { width:100%; height:100%; position: absolute; overflow: hidden; top: 0; left: 0; } section.team-agileinfo .view img { display: block; position: relative; } section.team-agileinfo .view h4 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 20px; font-weight:normal; padding: 10px; background:#0080B8; margin: 40px 0 0 0; font-family: 'Poiret One', cursive; } section.team-agileinfo .view ul.team-social { position: relative; padding: 25px 0; text-align: center; } section.team-agileinfo .view ul.team-social li { display:inline-block; } section.team-agileinfo .view ul.team-social li a i.fa { width: 37px; height: 37px; line-height: 35px; font-size: 16px; color: #fff; border: 1px solid #fff; background-color: transparent; text-align: center; } section.team-agileinfo .view ul.team-social li a i.fa.fa-facebook:hover { background-color:#3b5998; color:#fff; border-color:#3b5998; } section.team-agileinfo .view ul.team-social li a i.fa.fa-youtube:hover { background-color:#cd201f; color:#fff; border-color:#cd201f; } section.team-agileinfo .view ul.team-social li a i.fa.fa-twitter:hover { background-color:#1da1f2; color:#fff; border-color:#1da1f2; } section.team-agileinfo .view ul.team-social li a i.fa.fa-google-plus:hover { background-color:#dd4b39; color:#fff; border-color:#dd4b39; } section.team-agileinfo .view ul.team-social li a i.fa.fa-linkedin:hover { background-color:#0077b5; color:#fff; border-color:#0077b5; } section.team-agileinfo .view ul.team-social li a i.fa:hover { -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite; -o-animation: spin 2s linear infinite; -ms-animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } section.team-agileinfo .view p.info { display: inline-block; font-weight:normal; font-size: 16px; color: #fff; text-align: center; padding: 7px 10px; background:#0080B8; color: #fff; text-transform:capitalize; } section.team-agileinfo .view p.info: hover { -webkit-box-shadow: 0 0 5px #000; -moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; } /*-- /team section --*/ /*-- blog section --*/ section.blog-COOSW { padding:100px 0; background-color:#FFFFFF; } section.blog-COOSW h3.text-center { font-size:40px; font-weight:bold; color:#000; padding-bottom:30px; font-family: 'Poiret One', cursive; position:relative; } section.blog-COOSW h3.text-center:before { content:''; position:absolute; background-color:#000; width:250px; height:2px; left:20%; bottom:2%; } section.blog-COOSW h3.text-center:after { content:''; position:absolute; background-color:#000; width:250px; height:2px; right:20%; bottom:2%; } section.blog-COOSW span.fa.fa-globe { font-size: 25px; color:#000; display: block; text-align: center; margin-top: -30px; margin-bottom: 30px; } section.blog-COOSW span.favico { font-size: 25px; color: #fff; display: block; text-align: center; margin-top: -30px; margin-bottom: 30px; } .column { margin: 0 auto; padding: 0; } .column::after { content: ''; clear: both; display: block; } .column div { position: relative; width:100%; height:auto; margin: 0 auto; padding: 0; } figure { width:100%; height:auto; margin: 0 auto; padding: 0; background: #fff; overflow: hidden; } .hover01 figure img { -webkit-transform: scale(1); transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transition:all 0.7s ease-in-out; transition:all 0.7s ease-in-out; -moz-transition:all 0.7s ease-in-out; -o-transition:all 0.7s ease-in-out; -ms-transition:all 0.7s ease-in-out; } .hover01 figure:hover img { -webkit-transform: scale(1.7); transform: scale(1.7); -moz-transform: scale(1.7); -o-transform: scale(1.7); -ms-transform: scale(1.7); width: 100%; height: auto; margin: 0 auto; padding:0; } section.blog-COOSW .blog-agile:hover .hover01 figure img{ -webkit-transform: scale(1.7); transform: scale(1.7); -moz-transform: scale(1.7); -o-transform: scale(1.7); -ms-transform: scale(1.7); } section.blog-COOSW .blog-agile:hover { background-color:rgba(0,0,0,0.9); } section.blog-COOSW .blog-agile { background-color: rgb(58, 58, 58); padding: 40px 30px; -webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; } section.blog-COOSW .modal-content { text-align: center; text-align: -webkit-center; text-align: -moz-center; } section.blog-COOSW .modal-header { background:#0080B8; } section.blog-COOSW .modal-header h4 { color: white; font-size: 30px; font-weight: normal; text-transform: uppercase; font-family: 'Poiret One', cursive; } section.blog-COOSW .modal-footer { background: #DFDFDF; } section.blog-COOSW .modal-body p { font-size:14px; font-weight:normal; color:#999; line-height:30px; padding:20px 0; } section.blog-COOSW button.close { font-size: 60px; font-weight: 300; position: absolute; right: 20px; top: 1px; } section.blog-COOSW button.btn.btn-default { font-size: 16px; font-weight: normal; color: #fff; background-color:#DFDFDF; } section.blog-COOSW img.img-responsive.team-agile { width: 100%; height: auto; margin: 0 auto; } section.blog-COOSW i.fa.fa-credit-card-alt, section.blog-COOSW i.fa.fa-handshake-o, section.blog-COOSW i.fa.fa-money { font-size: 30px; display: block; color:#95a9b1; padding-bottom: 20px; } section.blog-COOSW a.blog-link1 { text-decoration:none; margin-bottom: 15px; display:block; } section.blog-COOSW h4.blog-wthree { font-size: 19px; font-weight: bold; letter-spacing: 1px; color:#9aa9af; text-transform: uppercase; font-family: 'Poiret One', cursive; } section.blog-COOSW ul.blog-info { padding-bottom: 20px; } section.blog-COOSW ul.blog-info li { display:inline-block; } section.blog-COOSW ul.blog-info li:nth-child(1) { margin-right:70px; } section.blog-COOSW ul.blog-info li i.fa { display: inline-block; font-size: 17px; color:#9aa9af; } section.blog-COOSW ul.blog-info li p,section.blog-COOSW ul.blog-info li p a { display: inline-block; font-size: 13px; font-weight: normal; color: #888; outline:none; } section.blog-COOSW ul.social-COOSW { padding:20px 0; } section.blog-COOSW ul.social-COOSW li { display:inline-block; } section.blog-COOSW ul.social-COOSW li a { text-decoration: none; margin-right: 40px; } section.blog-COOSW ul.social-COOSW li a i.fa { font-size: 16px; color:#9aa9af; } section.blog-COOSW ul.social-COOSW li a i.fa:hover { -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite; -o-animation: spin 2s linear infinite; -ms-animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } section.blog-COOSW p.blog-p1 { font-size: 14px; font-weight: normal; line-height: 30px; height: 130px; width: 100%; color:#9aa9af; } section.blog-COOSW a.blog-link3 { font-size: 16px; color:#fff; padding: 10px 20px; background-color:#2B2B2B; font-weight: bold; text-decoration: none; font-family: 'Poiret One', cursive; border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; -o-border-radius:25px; -ms-border-radius:25px; outline:none; } section.blog-COOSW a.blog-link3:hover { background-color:#0080B8; color:#fff; } section.blog-COOSW a.blog-link3 i.fa { margin-right:7px; } /*-- /blog section --*/ /** EQUIPO EN VENTA **/ .equipo_1 { background: url(../images/equipo_1.png) no-repeat; width: 212px; height: 160px; } .equipo_2 { background: url(../images/equipo_2.png) no-repeat; width: 212px; height: 160px; } .equipo_3 { background: url(../images/equipo_3.png) no-repeat; width: 212px; height: 160px; } .equipo_4 { background: url(../images/equipo_4.png) no-repeat; width: 212px; height: 160px; } .equipo_5 { background: url(../images/equipo_5.png) no-repeat; width: 212px; height: 160px; } .equipo_6 { background: url(../images/equipo_6.png) no-repeat; width: 212px; height: 160px; } .equipo_7 { background: url(../images/equipo_7.png) no-repeat; width: 212px; height: 160px; } .equipo_8 { background: url(../images/equipo_8.png) no-repeat; width: 212px; height: 160px; } .equipo_9 { background: url(../images/equipo_9.png) no-repeat; width: 212px; height: 160px; } .equipo_10 { background: url(../images/equipo_10.png) no-repeat; width: 212px; height: 160px; } .equipo_11 { background: url(../images/equipo_11.png) no-repeat; width: 212px; height: 160px; } .equipo_12 { background: url(../images/equipo_12.png) no-repeat; width: 212px; height: 160px; } .equipo_13 { background: url(../images/equipo_13.png) no-repeat; width: 212px; height: 160px; } .equipo_14 { background: url(../images/equipo_14.png) no-repeat; width: 212px; height: 160px; } .equipo_15 { background: url(../images/equipo_15.png) no-repeat; width: 212px; height: 160px; } .equipo_16 { background: url(../images/equipo_16.png) no-repeat; width: 212px; height: 160px; } .equipo_17 { background: url(../images/equipo_17.png) no-repeat; width: 212px; height: 160px; } .equipo_18 { background: url(../images/equipo_18.png) no-repeat; width: 212px; height: 160px; } /** EQUIPO EN VENTA **/ /** NUESTROS CLIENTES **/ .bridgestone { background: url(../images/cliente_bridgestone.png) no-repeat; width: 212px; height: 160px; } .plazacuernavaca { background: url(../images/cliente_plazacuernavaca.png) no-repeat; width: 212px; height: 160px; } .colegiocarmen { background: url(../images/cliente_colegiocarmen.png) no-repeat; width: 212px; height: 160px; } .pullman { background: url(../images/cliente_pullman.png) no-repeat; width: 212px; height: 160px; } .moctezuma { background: url(../images/cliente_moctezuma.png) no-repeat; width: 212px; height: 160px; } .hogares { background: url(../images/cliente_hogares.png) no-repeat; width: 212px; height: 160px; } .mayekawa { background: url(../images/cliente_mayekawa.png) no-repeat; width: 212px; height: 160px; } .utsem { background: url(../images/cliente_utsem.png) no-repeat; width: 212px; height: 160px; } .sigma { background: url(../images/cliente_sigma.png) no-repeat; width: 212px; height: 160px; } .upemor { background: url(../images/cliente_upemor.png) no-repeat; width: 212px; height: 160px; } .shimizu { background: url(../images/cliente_shimizu.png) no-repeat; width: 212px; height: 160px; } .powergym { background: url(../images/cliente_powergym.png) no-repeat; width: 212px; height: 160px; } .supremacorte { background: url(../images/cliente_supremacorte.png) no-repeat; width: 212px; height: 160px; } .centroconvenciones { background: url(../images/cliente_centroconvenciones.png) no-repeat; width: 212px; height: 160px; } .comercial { background: url(../images/cliente_comercial.png) no-repeat; width: 212px; height: 160px; } /** clientes **/ /*--flexisel--*/ #flexiselDemo1 { display: none; } .nbs-flexisel-container { position: relative; max-width: 90%; margin-left:5%; } .nbs-flexisel-ul { position: relative; width: 9999px; margin: 0px; padding: 0px; list-style-type: none; text-align: center; } .nbs-flexisel-inner { overflow: hidden; margin: 0px auto; } .nbs-flexisel-item { float: left; margin: 0; padding: 0px; cursor: pointer; position: relative; line-height: 0px; } .nbs-flexisel-item > img { cursor: pointer; position: relative; max-width: 150px; max-height: 150px; } /*---- Nav ---*/ .nbs-flexisel-nav-left, .nbs-flexisel-nav-right { width:24px; height:36px; position: absolute; cursor: pointer; z-index: 100; } .nbs-flexisel-nav-left { left: -4.3%; top: 35% !important; background: url(../images/themes.png) no-repeat 0px 0px; } .nbs-flexisel-nav-right { right: -4.3%; top: 35% !important; background: url(../images/themes.png) no-repeat -24px 0px; } .COOSWlayouts-clients h3{ text-align: center; font-size: 34px; color: #ffffff; font-weight: 600; margin-bottom: 50px; letter-spacing: 4px; text-transform: uppercase; } .COOSWlayouts-clients { background: url(../images/clients-bg.jpg) no-repeat 0px 0px; padding: 50px 0; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; background-attachment: fixed; } /*--//flexisel--*/ /*-- map section --*/ .map iframe.googlemaps { width:100%; height:400px; } /*-- /map section --*/ /*-- PALABRAS INICIO--*/ section.palabras-COOSW h3.text-center { font-size:40px; font-weight:bold; color:#000; padding-bottom:10px; font-family: 'Poiret One', cursive; position:relative; } section.palabras-COOSW h3.text-center:before { content:''; position:absolute; background-color:#000; width:90px; height:2px; left:20%; bottom:2%; } section.palabras-COOSW h3.text-center:after { content:''; position:absolute; background-color:#000; width:90px; height:2px; right:20%; bottom:2%; } section.palabras-COOSW span.fa.fa-globe { font-size: 25px; color:#fff; display: block; text-align: center; margin-top: -16px; margin-bottom: 20px; } section.palabras-COOSW span.favico { color:#fff; display: block; text-align: center; margin-top: -30px; margin-bottom: 10px; } /*-------------------------------------------------------------- # Cta --------------------------------------------------------------*/ .cta { background: #5cb874; padding: 80px 0; } .cta h3 { color: #fff; font-size: 28px; font-weight: 700; } .cta p { color: #fff; } .cta .cta-btn { font-family: "Raleway", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 1px; display: inline-block; padding: 10px 30px; border-radius: 2px; transition: 0.5s; margin: 10px; border: 2px solid #fff; color: #fff; border-radius: 4px; } .cta .cta-btn:hover { background: #fff; color: #5cb874; } @media (max-width: 1024px) { .cta { background-attachment: scroll; } } @media (min-width: 769px) { .cta .cta-btn-container { display: flex; align-items: center; justify-content: flex-end; } } .vermas-btn { font-family: "Raleway", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 1px; display: inline-block; padding: 10px 30px; border-radius: 2px; transition: 0.5s; margin: 10px; border: 2px solid #ababab; color: #000; border-radius: 4px; } .vermas-btn:hover { background: #5cb874; color: #ffffff; } /*-- contact section --*/ section.contact-COOSW { padding:10px 0; background-color:#fff; } section.contact-COOSW h3.text-center { font-size:40px; font-weight:bold; color:#000; padding-bottom:30px; font-family: 'Poiret One', cursive; position:relative; } section.contact-COOSW h3.text-center:before { content:''; position:absolute; background-color:#000; width:250px; height:2px; left:20%; bottom:2%; } section.contact-COOSW h3.text-center:after { content:''; position:absolute; background-color:#000; width:250px; height:2px; right:20%; bottom:2%; } section.contact-COOSW span.fa.fa-globe { font-size: 25px; color:#fff; display: block; text-align: center; margin-top: -16px; margin-bottom: 50px; } section.contact-COOSW span.favico { font-size: 25px; color:#fff; display: block; text-align: center; margin-top: -30px; margin-bottom: 30px; } section.contact-COOSW p.contact-p1 { font-size: 16px; font-weight: normal; color: #fff; line-height: 30px; } ul.contact-w3ls { padding:20px 0 0; } ul.contact-w3ls li { padding-bottom:10px; } ul.contact-w3ls li i.fa { display: inline-block; font-size: 22px; color: #fff; width: 40px; height: 40px; line-height: 33px; text-align: center; border: 1px solid #000; margin-right:7px; } ul.contact-w3ls li p { font-size:16px; font-weight:normal; display:inline-block; color:#000; vertical-align:middle; margin-top:-5px; } ul.contact-w3ls li p a { text-decoration:none; color:#000; } section.contact-COOSW label { font-size: 15px; font-weight: normal; color: #000; padding-bottom: 10px; } section.contact-COOSW input#nombre,input#mail,input#telefono { height: 45px; } section.contact-COOSW input#nombre,input#mail,input#telefono,textarea#mensaje { width: 100%; font-size: 17px; font-weight: normal; color: #000; background-color: rgba(223, 223, 223, 0.5); border: 1px solid rgba(223, 223, 223, 0.5); } section.contact-COOSW button.btn.btn-primary { font-size: 16px; color:#fff; padding: 10px 20px; background-color:#2B2B2B; font-weight: bold; text-decoration: none; font-family: 'Poiret One', cursive; border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; -o-border-radius:25px; -ms-border-radius:25px; outline:none; border:none; } section.contact-COOSW button.btn.btn-primary:hover { background-color:#0080B8; color:#fff; } /*-- /contact section --*/ /*-- footer section --*/ section.footer-w3 { padding:0px 0; background-color:#1d1b1b; } section.footer-w3 h3 { font-size:25px; font-weight:bold; color:#fff; padding-bottom:20px; font-family: 'Poiret One', cursive; } section.footer-w3 p.footer-p1 { font-size: 14px; font-weight: normal; line-height: 30px; padding-bottom: 25px; color:#fff; } section.footer-w3 input#email2 { width: 70%; float: left; font-size: 16px; font-weight: normal; color: #fff; height: 40px; background-color: rgba(0, 0, 0, 0.5); border: 1px solid #000000; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; } section.footer-w3 button.btn.btn-outline.btn-lg { width: 30%; float: left; height: 40px; letter-spacing: 1px; text-align:center; background-color:#2B2B2B; border:1px solid #2B2B2B; color:#fff; font-size:15px; font-weight:bold; font-family: 'Poiret One', cursive; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; -ms-border-radius:0; } section.footer-w3 button.btn.btn-outline.btn-lg:hover { background-color:#0080B8; color:#fff; border-color:#0080B8; } section.footer-w3 ul.tweet-agile li:nth-child(1) { padding-bottom:30px; } section.footer-w3 ul.tweet-agile li i.fa.fa-twitter-square { font-size: 45px; color:#0080B8; display:inline-block; } section.footer-w3 ul.tweet-agile li p.tweet-p1 { font-size: 15px; font-weight: normal; margin: -48px 0 10px 44px; line-height: 30px; color:#fff; } section.footer-w3 ul.tweet-agile li p.tweet-p1 a { text-decoration:none; color:#0080B8; } section.footer-w3 ul.tweet-agile li p.tweet-p2 { font-size:13px; font-weight:normal; font-style:italic; color:#fff; } input::-webkit-input-placeholder { color: #9D9B9B !important; } input:-moz-placeholder { /* Firefox 18- */ color: #fff !important; } input::-moz-placeholder { /* Firefox 19+ */ color: #fff !important; } input:-ms-input-placeholder { color: #fff !important; } /*-- /footer section --*/ /*-- copyright section --*/ .copright-w3 { padding:50px 0; background-color:#F7F7F7; padding: 2em 0; } .copright-w3 ul.link-w3l li { display:inline-block; margin-right:30px; } .copright-w3 ul.link-w3l li a { color:#fff; text-decoration:none; font-family: 'Poiret One', cursive; font-size:16px; font-weight:normal; display:block; position: relative; outline: none; padding:10px 0; letter-spacing: 1px; text-shadow: 0 0 1px rgba(255,255,255,0.3); -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; } .copright-w3 ul.link-w3l li a:hover, .copright-w3 ul.link-w3l li a:focus { outline: none; } .cl-effect-21 a::before, .cl-effect-21 a::after { position: absolute; left: 0; width: 100%; height: 2px; background: #fff; content: ''; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); } .cl-effect-21 a::before { top: 0; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); } .cl-effect-21 a::after { bottom: 0; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); } .cl-effect-21 a:hover { color: #fff; } .cl-effect-21 a:hover::before, .cl-effect-21 a:hover::after { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } .copright-w3 p.copyright { font-size: 14px; font-weight: 200; color: #fff; line-height: 30px; text-align: center; } .copright-w3 p.copyright a { color:#0080B8; text-decoration:none; } .copright-w3 p.copyright a:hover { color:#2B2B2B; } /*-- /copyright section --*/ /*-- back to top --*/ .cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 55px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* image replacement properties */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(0, 0, 0, 0.55) url(../images/cd-top-arrow.svg) no-repeat center 50%; background-size:70%; border:1px solid #fff; visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; } .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; } .cd-top.cd-is-visible { /* the button becomes visible */ visibility: visible; opacity: 1; } .cd-top.cd-fade-out { /* if the user keeps scrolling down, the button is out of focus and becomes less visible */ opacity: .5; } .cd-top:hover { background-color: #000; opacity: 1; } @media only screen and (min-width: 768px) { .cd-top { right: 20px; bottom: 40px; } } @media only screen and (min-width: 1024px) { .cd-top { height: 40px; width: 40px; right: 30px; bottom: 55px; } } /*-- /back to top --*/ /*-- responsive design --*/ @media (max-width:1600px) { .pogoSlider { height:790px!important; } .pogoSlider-slide-element { margin-top: 385px!important; } .btn-circle { margin-top:45px; } section.banner-w3ls .logo-w3ls { left: 5%; } section.banner-w3ls button#trigger-overlay { right: 235px; } } @media (max-width:1440px) { .btn-circle { margin-top:45px; } section.banner-w3ls .logo-w3ls { left: 5%; padding:10px; } section.banner-w3ls button#trigger-overlay { right: 155px; } } @media (max-width:1366px) { .pogoSlider { height: 767px!important; } .pogoSlider-slide-element { margin-top: 340px!important; } section.banner-w3ls .logo-w3ls { left: 5%; padding:10px; } section.banner-w3ls button#trigger-overlay { right: 120px; } } @media (max-width:1280px) { section.banner-w3ls .logo-w3ls { left: 3%; padding:10px; } section.banner-w3ls button#trigger-overlay { right: 85px; } } @media (max-width:1080px) { section.banner-w3ls .logo-w3ls { left: 2%; } section.banner-w3ls button#trigger-overlay { right: 80px; top: 65px; } .pogoSlider-slide-element h3 { font-size:25px; } .pogoSlider-slide-element p { padding:0; } section.about-w3l p { font-size: 14px; } section.about-w3l div#slideshow-banner { height: 330px; top: 10px; } section.about-w3l h2,section.service-w3l h3.text-center,section.portfolio-agileinfo h3.text-center,section.team-agileinfo h3.text-center,section.blog-COOSW h3.text-center,section.contact-COOSW h3.text-center { font-size: 35px; } section.about-w3l { padding: 50px 0; } section.service-w3l,section.portfolio-agileinfo,section.team-agileinfo,section.blog-COOSW,section.contact-COOSW { padding: 50px 0; } section.service-w3l h3.text-center:before,section.service-w3l h3.text-center:after,section.portfolio-agileinfo h3.text-center:before,section.portfolio-agileinfo h3.text-center:after,section.team-agileinfo h3.text-center:before,section.team-agileinfo h3.text-center:after,section.blog-COOSW h3.text-center:before,section.blog-COOSW h3.text-center:after,section.contact-COOSW h3.text-center:before,section.contact-COOSW h3.text-center:after { width: 250px; } section.service-w3l span.fa.fa-globe,section.portfolio-agileinfo span.fa.fa-globe,section.team-agileinfo span.fa.fa-globe,section.blog-COOSW span.fa.fa-globe,section.contact-COOSW span.fa.fa-globe { margin-bottom: 30px; } section.service-w3l h3.text-center,section.portfolio-agileinfo h3.text-center,section.team-agileinfo h3.text-center,section.blog-COOSW h3.text-center,section.contact-COOSW h3.text-center { padding-bottom: 40px; } .slideshow figcaption p { font-size: 14px; } .slideshow figcaption h3 { font-size: 30px; } section.team-agileinfo .view h4 { font-size: 17px; padding: 7px; margin: 25px 0 0 0; } section.team-agileinfo .view p.info { font-size:14px; padding: 5px 10px; } section.blog-COOSW .blog-agile { padding: 25px 20px; } section.blog-COOSW h4.blog-wthree { font-size: 16px; } section.blog-COOSW ul.blog-info li:nth-child(1) { margin-right: 30px; } section.blog-COOSW ul.social-COOSW li a { margin-right: 30px; } section.blog-COOSW ul.social-COOSW { padding: 20px 0 10px; } section.blog-COOSW p.blog-p1 { height:150px; } section.contact-COOSW p.contact-p1 { font-size: 14px; } ul.contact-w3ls li p { font-size: 14px; } section.contact-COOSW input#name,section.contact-COOSW input#email,section.contact-COOSW textarea#message { font-size:15px; } section.contact-COOSW button.btn.btn-primary { font-size: 14px; } section.footer-w3 input#email2 { width: 100%; text-align: center; } section.footer-w3 button.btn.btn-outline.btn-lg { width: 100%; } section.footer-w3 .footer-pic a { margin:5px; } } @media (max-width:1050px) { .pogoSlider-slide-element h3 { width:100%; color: #00A3D5!important; font-weight:700; font-size: 50px; text-align:left; line-height:70px; letter-spacing: 3px; padding-bottom: 20px; text-transform:uppercase; font-family: 'Anton', sans-serif; -webkit-text-fill-color: #00A3D5; -webkit-text-stroke-color: white; -webkit-text-stroke-width: 1.75px; text-shadow:#000 2px 2px 2px; } .copright-w3 { padding: 30px 0; } section.banner-w3ls .logo-w3ls { left: 1%; } section.banner-w3ls button#trigger-overlay { right:70px; } } @media (max-width: 1024px) { .pogoSlider { height: 675px!important; } section.banner-w3ls .logo-w3ls { width:195px; } section.banner-w3ls .logo-w3ls a h1 { font-size: 35px; letter-spacing: 1px; } section.banner-w3ls button#trigger-overlay { padding:5px 10px; } .pogoSlider-slide-element p { padding: 0; font-size: 16px; text-align: center; width: 100%; } .pogoSlider-slide-element ul.banner-agileits { padding-top: 10px; text-align: center; } element.style { } .pogoSlider-slide-element { margin-top: 285px!important; } section.footer-w3 input#email2 { font-size: 14px; } } @media (max-width:991px) { section.banner-w3ls .logo-w3ls { width:195px; } section.banner-w3ls .logo-w3ls { left: 1%; } .pogoSlider { height: 600px!important; } .pogoSlider-slide-element h3 { line-height: 65px; margin-left:5%; } .pogoSlider-slide-element { margin-top: 330px!important; } section.about-w3l h2 { text-align:center; padding:0 0 30px; } section.about-w3l p { text-align:center; padding-bottom:20px; } section.about-w3l div#slideshow-banner { height: 400px; } section.service-w3l h3.text-center:before,section.portfolio-agileinfo h3.text-center:before,section.team-agileinfo h3.text-center:before,section.blog-COOSW h3.text-center:before,section.contact-COOSW h3.text-center:before { left:5%; } section.service-w3l h3.text-center:after,section.portfolio-agileinfo h3.text-center:after,section.team-agileinfo h3.text-center:after,section.blog-COOSW h3.text-center:after,section.contact-COOSW h3.text-center:after { right:5%; } .col-lg-4.col-md-4.col-sm-6.serv-agileinfo2 { padding-top: 0px; width:100%; } .col-lg-12.col-md-12.col-sm-6.serv-wthree4 { width: 100%; } .col-lg-12.col-md-12.col-sm-6.serv-wthree4 { width: 50%; margin: 0 auto; float: none; } .col-lg-4.col-md-4.col-sm-6.serv-agileinfo3 { width: 100%; } section.service-w3l h3.text-center, section.portfolio-agileinfo h3.text-center, section.team-agileinfo h3.text-center, section.blog-COOSW h3.text-center, section.contact-COOSW h3.text-center { padding-bottom: 35px; } .col-lg-12.col-md-12.col-sm-6.serv-wthree6 { padding-bottom:0px; } .grid figure { padding:5px; } .grid li { width: 33%; float: none; display: inline-block; } .grid-gallery ul { text-align:center; } .col-lg-3.col-md-3.col-sm-3.team-w3ls { width: 50%; float: left; } section.team-agileinfo .team-grid .col-lg-3.col-md-3.col-sm-3.team-w3ls:nth-child(1),section.team-agileinfo .team-grid .col-lg-3.col-md-3.col-sm-3.team-w3ls:nth-child(2) { padding-bottom:30px; } section.team-agileinfo .view h4 { font-size: 20px; padding: 10px; margin: 85px 0 0 0; } section.team-agileinfo .view p.info { font-size: 16px; padding: 5px 10px; } section.blog-COOSW .blog-agile { padding: 25px 20px; width: 55%; margin: 0 auto; } section.blog-COOSW .blog-agile:nth-child(1),section.blog-COOSW .blog-agile:nth-child(2) { margin-bottom:30px; } ul.contact-w3ls { padding: 20px 0; width:100%; } .col-lg-4.col-md-4.col-sm-6.col-xs-12.footer-agile1 { padding-bottom: 30px; } .col-lg-4.col-md-4.col-sm-12.col-xs-12 { text-align: center; } section.footer-w3 { padding:50px 0; } section.blog-COOSW .modal-header h4,section.banner-w3ls .modal-header h4 { font-size:20px; } section.blog-COOSW button.btn.btn-default,section.banner-w3ls button.btn.btn-default { font-size: 14px; } section.blog-COOSW button.close,section.banner-w3ls button.close { top:-5px; } ul.link-w3l.cl-effect-21 { text-align: center; } .copright-w3 ul.link-w3l li { margin:0 14px; } } @media (max-width:900px) { section.footer-w3 p.footer-p1 { font-size: 13px; } section.footer-w3 ul.tweet-agile li p.tweet-p1 { font-size: 13px; } .slideshow figure { width: 80%; height:auto; margin: 35px auto; } } @media (max-width: 768px) { section.banner-w3ls .logo-w3ls { width:195px; } .slideshow figure { width: 80%; margin: 70px auto 0; } .btn-circle { width: 55px; height: 55px; padding:5px 0; font-size:35px; } section.banner-w3ls .logo-w3ls a h1 { font-size: 30px; } section.banner-w3ls .logo-w3ls { left: 1%; padding:10px; } section.banner-w3ls button#trigger-overlay { right: 60px; top: 35px; } .pogoSlider { height: 490px!important; } .pogoSlider-slide-element { margin-top: 210px!important; } .overlay ul li a { font-size: 25px; } .overlay .overlay-close { width: 40px; height: 40px; right: 62px; top: 35px; } } @media (max-width:767px) { section.banner-w3ls .logo-w3ls { width:195px; } .overlay ul li a { font-size: 20px; } } @media (max-width: 736px) { section.banner-w3ls .logo-w3ls { width:110px; } .pogoSlider { height: 350px!important; } .overlay .overlay-close { width: 35px; height: 35px; right:40px; } .pogoSlider-slide-element { margin-top: 180px!important; } .pogoSlider-slide-element h3 { color: #00A3D5!important; font-weight:500; font-size: 35px; text-align:center; width:90%; letter-spacing: 3px; padding-bottom: 5px; text-transform:uppercase; font-family: 'Anton', sans-serif; -webkit-text-fill-color: #00A3D5; -webkit-text-stroke-color: white; -webkit-text-stroke-width: 0.5px; text-shadow:#fff 1px 2px 2px; } .pogoSlider-slide-element ul.banner-agileits li a.link-w3l1, .pogoSlider-slide-element ul.banner-agileits li a.link-w3l2 { width: 120px; line-height: 30px; font-size: 15px; height:30px; } .btn-circle { display:none; } section.about-w3l div#slideshow-banner { height: 320px; } .col-lg-12.col-md-12.col-sm-6.serv-wthree1,.col-lg-12.col-md-12.col-sm-6.serv-wthree2,.col-lg-12.col-md-12.col-sm-6.serv-wthree3, .col-lg-12.col-md-12.col-sm-6.serv-wthree4, .col-lg-12.col-md-12.col-sm-6.serv-wthree6 { padding-bottom:40px; } .col-lg-12.col-md-12.col-sm-6.serv-wthree5 { padding-bottom:0; } .col-lg-12.col-md-12.col-sm-6.serv-wthree4 { width: 100%; } section.about-w3l #controller-left img,section.about-w3l #controller-right img { width:20px; height:40px; } section.footer-w3 input#email2 { width: 70%; } section.footer-w3 button.btn.btn-outline.btn-lg { width: 30%; } section.footer-w3 ul.tweet-agile li p.tweet-p1 { margin: -48px 0 20px 44px; } .copright-w3 ul.link-w3l { text-align:center; } .slideshow figure { width: 80%; margin: 20px auto 0; } section.banner-w3ls .modal-header h4 { font-size:20px; } section.banner-w3ls button.close { top: -4px; } section.banner-w3ls button.btn.btn-default { font-size: 14px; } .slideshow figcaption p { display:none; } .slideshow figcaption { padding: 0px; } } @media (max-width: 667px) { section.banner-w3ls .logo-w3ls { width:195px; } section.banner-w3ls .logo-w3ls a h1 { font-size: 25px; } .pogoSlider-slide-element p { display:none; } section.banner-w3ls button#trigger-overlay { right: 30px; top: 25px; } section.banner-w3ls .logo-w3ls { left: 1%; padding:15px; } .pogoSlider { height: 311px!important; } section.about-w3l h2 { padding-bottom:20px; } section.service-w3l h3.text-center:before, section.service-w3l h3.text-center:after, section.portfolio-agileinfo h3.text-center:before, section.portfolio-agileinfo h3.text-center:after, section.team-agileinfo h3.text-center:before, section.team-agileinfo h3.text-center:after, section.blog-COOSW h3.text-center:before, section.blog-COOSW h3.text-center:after, section.contact-COOSW h3.text-center:before, section.contact-COOSW h3.text-center:after { width: 100px; } section.about-w3l div#slideshow-banner { height: 270px; } section.about-w3l #controller-left,section.about-w3l #controller-right { top:42%; } .slideshow figcaption p { display: none; } .slideshow figcaption h3 { font-size: 22px; } .slideshow figure { border:5px solid #fff; } .slideshow figcaption { padding: 10px; } section.service-w3l h3.text-center:before, section.portfolio-agileinfo h3.text-center:before, section.team-agileinfo h3.text-center:before, section.blog-COOSW h3.text-center:before, section.contact-COOSW h3.text-center:before { left: 4%; } section.service-w3l h3.text-center:after, section.portfolio-agileinfo h3.text-center:after, section.team-agileinfo h3.text-center:after, section.blog-COOSW h3.text-center:after, section.contact-COOSW h3.text-center:after { right: 4%; } section.team-agileinfo .view h4 { font-size: 20px; padding: 10px; margin: 65px 0 0 0; } ul.contact-w3ls { width:41%; } } @media (max-width:640px) { section.banner-w3ls .logo-w3ls { width:195px; } .pogoSlider-slide-element { margin-top: 190px!important; } .pogoSlider-slide-element h3 { color: #00A3D5!important; font-weight:500; font-size: 30px; line-height: 30px; text-align:center; width:90%; letter-spacing: 3px; padding-bottom: 5px; text-transform:uppercase; font-family: 'Anton', sans-serif; -webkit-text-fill-color: #00A3D5; -webkit-text-stroke-color: white; -webkit-text-stroke-width: 0.5px; text-shadow:#fff 1px 2px 2px; } .btn-circle { display:none; } section.about-w3l h2, section.service-w3l h3.text-center, section.portfolio-agileinfo h3.text-center, section.team-agileinfo h3.text-center, section.blog-COOSW h3.text-center, section.contact-COOSW h3.text-center { font-size: 30px; } section.blog-COOSW .blog-agile { padding: 25px 20px; width: 65%; margin: 0 auto; } ul.contact-w3ls { width: 43%; } .slideshow figure { width: 80%; margin: 50px auto 0; } } @media (max-width:600px) { section.banner-w3ls .logo-w3ls { width:195px; } .pogoSlider { height: 365px!important; } .pogoSlider-slide-element { margin-top: 240px!important; } .btn-circle { display:none; } section.service-w3l h3.text-center:before, section.portfolio-agileinfo h3.text-center:before, section.team-agileinfo h3.text-center:before, section.blog-COOSW h3.text-center:before, section.contact-COOSW h3.text-center:before { left: 3%; } section.service-w3l h3.text-center:after, section.portfolio-agileinfo h3.text-center:after, section.team-agileinfo h3.text-center:after, section.blog-COOSW h3.text-center:after, section.contact-COOSW h3.text-center:after { right: 3%; } section.team-agileinfo .view h4 { font-size: 20px; padding: 10px; margin: 45px 0 0 0; } ul.contact-w3ls { width: 47%; } } @media (max-width: 568px) { section.banner-w3ls .logo-w3ls { width:195px; } .pogoSlider { height: 256px!important; } .pogoSlider-slide-element { margin-top: 130px!important; } .overlay ul li a { font-size: 16px; } section.team-agileinfo .view h4 { font-size: 20px; padding: 10px; margin: 35px 0 0 0; } section.blog-COOSW p.blog-p1 { height: 140px; } section.about-w3l div#slideshow-banner { height: 245px; } ul.contact-w3ls { width: 50%; } .slideshow figcaption h3 { font-size: 20px; } .slideshow figcaption { padding: 0px; } .slideshow figure { width: 80%; margin: 13px auto 0; } } @media(max-width:480px) { section.banner-w3ls .logo-w3ls { width:195px; } section.banner-w3ls .logo-w3ls { left: 1%; padding:15px; } section.banner-w3ls button#trigger-overlay { right: 30px; top: 20px; } section.service-w3l h3.text-center:before, section.service-w3l h3.text-center:after, section.portfolio-agileinfo h3.text-center:before, section.portfolio-agileinfo h3.text-center:after, section.team-agileinfo h3.text-center:before, section.team-agileinfo h3.text-center:after, section.blog-COOSW h3.text-center:before, section.blog-COOSW h3.text-center:after, section.contact-COOSW h3.text-center:before, section.contact-COOSW h3.text-center:after { width: 80px; } section.team-agileinfo .view ul.team-social li a i.fa { width: 32px; height: 32px; line-height: 31px; font-size: 15px; } .grid li { width: 50%; } section.team-agileinfo .view h4 { font-size: 18px; padding: 7px; margin: 30px 0 0 0; } section.team-agileinfo .view ul.team-social { padding: 17px 0; } section.team-agileinfo .view p.info { font-size: 15px; padding: 4px 10px; } section.blog-COOSW .blog-agile { padding: 25px 20px; width: 80%; margin: 0 auto; } .map iframe.googlemaps { width: 100%; height: 250px; } ul.contact-w3ls { width: 61%; } #lightninBox { padding: 10px; } .slideshow figure { width: 80%; margin: 187px auto 0; } } @media (max-width:414px) { section.banner-w3ls .logo-w3ls { width:195px; } section.banner-w3ls .logo-w3ls a h1 { font-size: 20px; } section.banner-w3ls button#trigger-overlay i.fa { font-size: 17px; } section.banner-w3ls button#trigger-overlay { padding: 5px 9px; } .pogoSlider-slide-element { margin-top: 120px!important; } section.about-w3l { padding:30px 0; } section.about-w3l h2 { padding-bottom: 10px; } section.about-w3l p { font-size: 13px; line-height: 30px; } section.service-w3l, section.portfolio-agileinfo, section.team-agileinfo, section.blog-COOSW, section.contact-COOSW { padding: 30px 0; } section.service-w3l h3.text-center:before, section.service-w3l h3.text-center:after, section.portfolio-agileinfo h3.text-center:before, section.portfolio-agileinfo h3.text-center:after, section.team-agileinfo h3.text-center:before, section.team-agileinfo h3.text-center:after, section.blog-COOSW h3.text-center:before, section.blog-COOSW h3.text-center:after, section.contact-COOSW h3.text-center:before, section.contact-COOSW h3.text-center:after { width: 60px; } section.service-w3l p.text-center { font-size: 13px; } section.service-w3l h4.text-center { font-size: 25px; padding:10px 0; } .col-lg-3.col-md-3.col-sm-3.team-w3ls { width: 100%; padding-bottom:30px; } section.about-w3l div#slideshow-banner { height: 220px; } section.team-agileinfo .view h4 { font-size: 18px; padding: 7px; margin: 80px 0 0 0; } section.team-agileinfo .view ul.team-social { padding: 30px 0; } section.blog-COOSW .blog-agile { padding: 25px 20px; width: 100%; margin: 0 auto; } ul.contact-w3ls { width: 72%; } .copright-w3 ul.link-w3l li { margin:0 10px; } section.footer-w3 h3 { text-align:center; } section.footer-w3 h3 { text-align:center; } .slideshow figure { width: 80%; margin: 210px auto 0; } section.blog-COOSW .modal-header h4, section.banner-w3ls .modal-header h4 { font-size: 16px; } section.banner-w3ls button.close,section.blog-COOSW button.close { font-size: 54px; } } @media (max-width:384px) { section.banner-w3ls .logo-w3ls { width:195px; } .pogoSlider-slide-element ul.banner-agileits li a.link-w3l1, .pogoSlider-slide-element ul.banner-agileits li a.link-w3l2 { width: 120px; line-height: 30px; font-size: 15px; height:30px; } section.about-w3l #slideshow-controller { left:39%; } section.about-w3l div#slideshow-banner { height: 200px; } .grid li { width: 100%; } ul.contact-w3ls { width: 100%; } section.footer-w3 input#email2 { font-size: 13px; } section.footer-w3 button.btn.btn-outline.btn-lg { font-size:13px; } .slideshow figure { width: 80%; margin: 195px auto 0; } } @media (max-width:375px) { section.banner-w3ls .logo-w3ls { width:195px; } section.service-w3l h3.text-center:before, section.service-w3l h3.text-center:after, section.portfolio-agileinfo h3.text-center:before, section.portfolio-agileinfo h3.text-center:after, section.team-agileinfo h3.text-center:before, section.team-agileinfo h3.text-center:after, section.blog-COOSW h3.text-center:before, section.blog-COOSW h3.text-center:after, section.contact-COOSW h3.text-center:before, section.contact-COOSW h3.text-center:after { width: 50px; } } @media (max-width: 320px) { section.banner-w3ls .logo-w3ls { width:195px; } .slideshow figcaption h3 { font-size: 15px; } .slideshow figure { width: 80%; margin: 160px auto 0; } section.banner-w3ls .logo-w3ls a h1 { font-size: 17px; } section.banner-w3ls .logo-w3ls { left: 5%; padding:10px; } .pogoSlider-slide-element { margin-top: 120px!important; } section.service-w3l h3.text-center:before, section.service-w3l h3.text-center:after, section.portfolio-agileinfo h3.text-center:before, section.portfolio-agileinfo h3.text-center:after, section.team-agileinfo h3.text-center:before, section.team-agileinfo h3.text-center:after, section.blog-COOSW h3.text-center:before, section.blog-COOSW h3.text-center:after, section.contact-COOSW h3.text-center:before, section.contact-COOSW h3.text-center:after { width: 40px; } section.team-agileinfo .view h4 { font-size: 18px; padding: 7px; margin: 45px 0 0 0; } section.blog-COOSW h4.blog-wthree { font-size: 13px; } section.blog-COOSW ul.social-COOSW li a { margin-right: 23px; } section.blog-COOSW p.blog-p1 { font-size: 13px; } section.blog-COOSW p.blog-p1 { height: 190px; } section.blog-COOSW a.blog-link3 { font-size: 15px; padding: 7px 17px; } section.about-w3l h2, section.service-w3l h3.text-center, section.portfolio-agileinfo h3.text-center, section.team-agileinfo h3.text-center, section.blog-COOSW h3.text-center, section.contact-COOSW h3.text-center { font-size: 25px; } section.service-w3l span.fa.fa-globe, section.portfolio-agileinfo span.fa.fa-globe, section.team-agileinfo span.fa.fa-globe, section.blog-COOSW span.fa.fa-globe, section.contact-COOSW span.fa.fa-globe { margin-bottom: 15px; } section.contact-COOSW p.contact-p1 { font-size: 13px; } ul.contact-w3ls li i.fa { width: 35px; height: 35px; line-height: 33px; font-size:18px; } ul.contact-w3ls li p { font-size: 13px; } section.contact-COOSW label { font-size: 13px; padding-bottom:7px; } section.contact-COOSW input#name, input#email { height: 40px; } section.contact-COOSW input#name, section.contact-COOSW input#email, section.contact-COOSW textarea#message { font-size: 14px; } section.contact-COOSW button.btn.btn-primary { font-size: 13px; } section.footer-w3 { padding: 30px 0; } section.footer-w3 input#email2 { width: 100%; } section.footer-w3 button.btn.btn-outline.btn-lg { width: 100%; } section.footer-w3 .footer-pic a { width:105px; } .copright-w3 p.copyright { font-size: 13px; } section.blog-COOSW .modal-header h4, section.banner-w3ls .modal-header h4 { font-size: 14px; } section.banner-w3ls button.close, section.blog-COOSW button.close { font-size: 50px; top:0px; right:10px; } section.banner-w3ls .modal-body p { font-size: 13px; } }