/* CSS Document // podemos definir comentarioos en css atraves de 2 diagonales seguidas para un comentario de una sola linea // /* podemos definir en css con asterisco para comentarios de multiples */ @import url("RESET.CSS"); /* la palabra reservada import se utiliza para importar un documento que esta en otr ubicacion, mediante el parametro url definimos la ubicacion del documento. En este caso el documento se encuentra en la misma ubicacion del Documento style.css por lo que se pone solo el nombre del documento en este caso caso es para resetear el documento Los nombres de los archivos pueden ser definidos segun el criterio de cada uno, los nonmbres style.css y reset.css son los que uusalmente se utilizan pero no es obligatorio */ body { /* Este selector es de tipo etiqueta o tag ya que queremos modificar todo el contenido dentro de dicha etiqueta */ font-family: "Roboto Condensed",sans-serif; /* Se utiliza para cambiar el tipo de fuente dentro del selector que estamos afectando. Se utilizan despues otro tipo de fuentes para que cualquier navegador si no hay hay de la primera se vaya a la segunda y si no hay tampoco se vaya a la tercera. se le ponen signos de punto y coma para separarlas. Si ni la ultima la reconoce el navegador entonces aplicara la fuente que tenga su sistema */ } .site-top-bar{ /* para definir clase se pone . seguido del nombre de la clase que queramos poner. no deben tener espacios,acentos ni caracteres raros como asterisco.Se recomienda escribirlos en minusculas En este caso estamos utilizando site-top.bar para la barra superior del sitio que estamos desarrollando */ padding: 13px 0; width: 100%; /* La propiedad width la utilizamos para modificar el ancho de los elementos. En este caso especifico queremos el cien por ciento de la barra */ background-color: #2433EC; /* Se utiliza para alterar el fondo de los elementos. Puede ser por medio de nombres como green,black,lightblue,etc. Tambien por medio de codigo ascii que empieza con el simbolo de gato seguido de seis digitos por ejemplo #ffffff */ color: white; /* La propiedad color se utiliza para cambiar el COLOR DEL TEXTO Puede ser tambien representado por sus nombres en inles black,yellow,etc o por su codigo ascii tambien como se mencionó en la parte de background. En est caso como queremos que sea de color blanco ponemos el colo#fff y en este caso se puede usar solo 3 digitos porque son iguales las tres letras o simbolos */ } .gradiente{ background: #1e5799; background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 76%, #7db9e8 100%); background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 76%,#7db9e8 100%); background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 76%,#7db9e8 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); } .header-fijo { position:fixed; z-index: 1; width:100%; height:142px; left:0px; top:0px; margin-bottom: 5px !important; } .carousel-indicators { z-index: inherit !important; } .imagenes-fondo { width: 90px; height: 90px; background-size: 100% 100%; background-position: top center; background-repeat: no-repeat; position: relative; overflow: hidden; margin-bottom: 40px; border-radius:12px; } .imagenes-fondo-2 { width: 100%; height: 110px; background-size: 100% 100%; background-position: bottom center; background-repeat: no-repeat; position: relative; overflow: visible; border-radius: 3px; } .aspecto-letras { color:#0E1546 !important; } /* Mega menu block lo copié de la pagina de Intran.mx */ .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 200%; height: 100%; border: none; } .container-youtube { margin: 10px 10px 10px 40px; width: 80%; overflow: hidden; padding-top: 2px; } .mega-menu-block { width: 100%; position: absolute; left: 0px; top: 100%; padding: 20px; box-sizing: border-box; background-color: #f2f2f2; box-shadow: rgba(0, 0, 0, 0.3) 4px 4px 4px; z-index: 1000003; display: none; margin-top: -10px; } .title{ font-size: medium; font-weight: 100; margin-bottom: 15px; margin-top: 5px; text-align: center; } .title-auer{ font-size: 18px; font-weight: 200; margin-bottom: 15px; margin-top: 5px; text-align: center; } .titulo-marcas{ color: #0C5087; padding:20px; font-size: large; font-weight: 700; text-align: center; text-transform: uppercase; border: 1px solid; border-color: #2A4B5E; margin: 5px auto 25px auto; width:42%; } .product-container{ width: 80%; margin: 0 auto; } .jumbotron{ margin-top: 5px; margin-bottom:10px; padding-top: 8px; padding-bottom: 8px; background-color:#5a88ca; color:#B7D3F0; } .jumbotron-copia{ margin-top: 5px; margin-bottom:10px; padding-top: 8px; padding-bottom: 8px; border-radius:7px; background-color:#06F; color:#03F; } .jumbotron-lista{ background:#C4D6DD !important; padding: 20px 20px 500px 10px; border-radius: 5px; margin-bottom: 15px; margin-top: 40px; } .jumbotron-riko { margin-top: 5px; margin-bottom: 5px; padding-top: 8px; padding-bottom: 5px; border-color:#6EB92B; border:1px solid; color:#6EB92B; } .jumbotron-vibco { margin-top: 5px; margin-bottom: 5px; padding-top: 8px; padding-bottom: 5px; border-radius: 6px; background-color: #FFC600; color: #025B01; } .jumbotron-moeller { margin-top: 5px; margin-bottom: 5px; padding-top: 8px; padding-bottom: 5px; border-radius: 6px; background-color: #74B6E5; color: #221863; } .jumbotron-rittal { margin-top: 5px; margin-bottom: 5px; padding-top: 8px; padding-bottom: 5px; border-radius: 6px; background-color: #2AC0ED; color: #210E9A; } .jumbotron-riko-inductivos { margin-top: 5px; margin-bottom: 5px; padding-top: 8px; padding-bottom: 5px; border-radius: 6px; background-color: #0CF; color: #025B01; } .jumbotron > .title{ font-size: 1.6em; font-weight: 300; margin-bottom: 5px; } .jumbotron-riko > .title{ font-size: 1.6em; font-weight: 300; margin-bottom: 5px; } .jumbotron-vibco > .title{ font-size: 1.6em; font-weight: 300; margin-bottom: 5px; } .jumbotron-moeller > .title{ font-size: 1.6em; font-weight: 300; margin-bottom: 5px; } .jumbotron-rittal > .title{ font-size: 1.6em; font-weight: 300; margin-bottom: 5px; } .jumbotron-riko-inductivos > .title{ font-size: 1.6em; font-weight: 400; margin-bottom: 5px; } .jumbotron p{ line-height: 1.8; font-size: 1.3em; margin-bottom: 5px; padding:0 5px; } .jumbotron-riko p{ font-size: 24px; margin-bottom: 10px; padding:0 5px; } navbar{position: absolute;min-height:50px;margin-bottom:10px;} .navbar-default { background-color: #3D3DFF; border-color: black; } .container-fotos-productos { margin: 30px auto; clear:both; width: 75%; } section{ clear:both; } .titulos-riko{ text-align:center; font-size:18px; font-weight:800; padding:16px 0; margin:10px auto 50px auto; color:#88C652; } .titulos-grandes{ text-align:center; font-size:25px; font-weight:800; padding:16px 0; margin:10px auto 50px auto; color:#88C652; } .titulos-vibco{ text-align:center; font-size:18px; font-weight:800; padding:16px 0; margin:10px auto 50px auto; color: orange; } .titulos-vibco-grande{ text-align:center; font-size:25px; font-weight:800; padding:16px 0; margin:10px auto 50px auto; color: orange; } .titulos-moeller{ text-align:center; font-size:18px; font-weight:800; padding:16px 0; margin:10px auto 50px auto; color: #0C1E49; } .titulos-moeller-grande{ text-align:center; font-size:25px; font-weight:800; padding:16px 0; margin:10px auto 50px auto; color: #0C1E49; } .titulos-auer{ text-align:center; font-size:18px; font-weight:800; padding:16px 0; margin:10px auto 50px auto; color: #699DE3; } .titulos-auer-2{ text-align:center; font-size:16px; font-weight:800; padding:16px 0; margin:10px auto 50px auto; color: #E34D38; } .titulos-auer-verde{ text-align:center; font-size:16px; font-weight:800; padding:16px 0; margin:10px auto 50px auto; color: green; } .titulos-auer-amarillo{ text-align:center; font-size:16px; font-weight:800; padding:16px 0; margin:10px auto 50px auto; color: #E9CC0A; } .titulos-rittal{ text-align:center; font-size:11px; font-weight:600; padding:7px 0; margin:10px auto 50px auto; color: #E2006B; } .titulos-riko-dos{ text-align:center; font-size:18px; font-weight:800; padding-top:8px; margin:0; color:#88C652; } .ajuste-foto{ width:250px !important; text-align:center !important; margin-bottom:50px; } .padding-finder{ text-align:center; padding:20px 0 40px 0; } td{ vertical-align:middle; border-style:solid; border-width:thin; border-color:#2256E1; } @media screen and (max-width: 768px) { .hidden-sm { display: none; } } @media screen and (max-width: 1168px) { .show-sm{ font-size:26px !important; color:white !important; text-align:center !important; margin-left:5px; margin-right:13px; display:block; } } .margenes-foto{ margin: 0 20px 0 20px; } .row-fotos { width: 100%; padding-left: 10px; padding-right: 10px; float: left; } .row-fotos-productos{ width: 100%; padding-left: 10px; padding-right: 10px; float: left; margin-bottom:5px; } .imagenes-fondo-3{ height:400px; background-size:100% 100%; background-position: top center; background-repeat:no-repeat; position:relative; overflow:hidden; margin-bottom:40px; } .tamaño-letras { font-weight:800; font-size:24px; padding:15px; margin-bottom:15px; } .col-lg-3,.col-md-3 { position: inherit; } /* --Clases de Carrusel de Humar Bootstrap-------------------------------------------------------- */ .carousel-control.right, .carousel-control.left{ background-image:none; -webkit-backface-visibility:hidden; } .hr-data { margin-top: 20px; margin-bottom: 20px; width: 30%; border: dashed; color: white; text-align: center; -webkit-backface-visibility:hidden; } .carousel-inner>.item { height:230px; -webkit-backface-visibility:hidden; } .carousel-control{ /* flechas de control del carrusel < > */ width:1%; color:blue; opacity:.5; -webkit-backface-visibility:hidden; } .fourth-section { /* AGREGA UN FONDO AL SEGUNDO CONTENIDO DENTRO DE ÉSTA */ background-image:url(../img/automatizacion-i.jpg); background-size:cover; width: 100%; overflow: hidden; } .brand-section { /* AGREGA UN FONDO AL SEGUNDO CONTENIDO DENTRO DE ÉSTA */ background-image: url(../img/curso_automatizacion.jpg); background-size:cover; background-position:center; width: 100%; overflow: hidden; } .finder-section { background-size: cover; background-position: center; width: 100%; overflow: hidden; background-image: url(../img/Slider%20INTERRUPTOR%20HORARIO%203350x1124.jpg); } @media screen and (min-width: 768px){ .carousel-caption { right: 0; left: 0; text-align:center; } } @media (max-width: 991px) and (min-width: 768px) { .carousel-inner>.item{ height:500PX; } .carousel-inner>.item img{ margin:0 auto 2em; } } /* --Terminan Clases de Carrusel de Humar Bootstrap---------------------------------------------------- */ .container { /* En este caso queremos centrar nuestros conetnidos es decir a la izquierda y derecha */ margin: 0 auto; /* Se define un margen del elemento hacia el exterior se definen de la siguiente forma: - Con 4 valores: ejemplo margin:10px 20px 30px 40px; Donde el primer nivel representa la parte alta la segunda la derecha la tercera la de abajo y la cuarta la izquiuerda - con 3 valores martgin: 10px 20px 30px; El primero la parte de arriba, el segundo define izquierda y derecha y el tercero en la parte Inferior. -Con 2 valores: margin: 10px 20px El primero sera la parte alta y baja y el Segundo la parte Izquierda y Derecha. En este caso 0 no hay margen hacia arriba y abajo y el auto es alineacion automatica hacia la derecha e izquierda -Con un solo valor todos se ajustaran a es margen, es decir arriba,derecha,abajo e izquieda tendran el mismo valor */ width: 92%; /* Esta propiedad la utilizamos para dar el ancho de los elemntos en este caso queremos que sea solo del 90% y que tenga un espacio restante del 10% de nuestro contenedor padre */ } .row { /* En nuestros contenidos web siempre vemos organizados estos mediante un sistema de rejilla la cual esta compuesta de filas y columnaas .row la definimos de forma generica cuando tendremos una fila que tendra una o mas columnas */ width:100%; float: none; /* Float lo utilizamos cuando queremos hacer flotar hacia la dercha o izquierda un elemento o que no flote (none) al poner "none" evitamos que se desacomoden nuestras filas del diseño. */ display: block; /* La propiedad display(pantalla) define como se va a mostrar un elemento en la pantalla,dependiendo del elemento, algunas ya tienen la propiedad display definida como block, lo que hace que un elemento actue como un bloque evitando que el contenido que está despues de éste se muestre a la izquierda o delante de el y hace que siempre se muestre DEBAJO DEL ELEMENTO. ADEMAS DE LA PROPIEDAD block se puede utilizar la propiedad inline que hace que se muestre el contenido DELANTE DE EL Y NO DEBAJO DE EL. En este caso las filas deben apilarse una sobre otra aplicando la propiedad dispaly */ overflow: hidden; /* esta propiedad overflow maneja el desbordamineto que actuan como padres. Un desbordamiento ocurre cuando tiene hijos con left y right cuando ellos flotan deja el padre de saber donde están. Con el hiden el padre vuelve a saber donde se encuentran. En nuestro caso tendremos filas flotando y queremos que las filas siemopre sean reconocidads */ } .row-carrusel { clear: left; float: none; width: 100%; overflow: hidden; } .site-name { /* definimos la clase, con el punto para dar los cambios queb tendra el contendio site-name podemos darle un nombre que nos haga recordar de que estamos hablandorecordansdo que No se deben usar acentos o caracteres raros solo el GUION MEDIO O BAJO PERO EL GUOIN MEDIO ES MAS USADO */ font-weight: 500; /* la propiedad font-weight se utiliza para modificar el grosor de las fuentes, mla cual normanlmente vemos como normal o negritas. Si queremos cambiar un text lo podemos hacer de 2 formas: font-wight: 700; => donde definimos el grosor con un valor de 700 el cual visuialmente serán negritas. font-weight: bold; => Nos dar Negritas dando el mismo resultado que el valor 700. No se aconseja poner mas de este valor 700, y se recomienda 700 sobre bold, */ font-size: 1.7em; /* Se modificas el tamaño de la fuente y que esta dentro del elemento html cuyo selector estamos alterandi se define como valores absolutos como PX poixeles o con valores relativos como (em) el valor em variara segun la caja conetendeotra desde donde se visializa por ejemplo un valor 1em en una PC puede valer 13px pero en un smartphone puede medir 16px lo que hace que se vean mejor en todos los dispositiovos */ text-transform: capitalize; /* Esta propiedad sirve para transformar el texto, por ejemplo, pasarlo a MAYUSCULAS, minusculas (lowercase), o estilo de titulo (capitalize)*/ text-align:center; } .col-1-2 { width:60%; float: left; margin-right: 5%; } .main-navigation { float: right; } .main-navigation li{ float: left; } .main-navigation li a{ color: #fff; text-decoration:none; padding: 40px 10px 0; display: block; font-size:12px; text-transform:uppercase; overflow: hidden; } .text-center { text-align:center; } .section-home, .section-about { background-color: #18bc9c; color: #fff; padding:60px 0; margin-top:40px; } .section-home > .container > .title { font-size: 4em; text-transform: uppercase; font-weight: 700; padding: 15px 0; } .section-home hr, .section-about hr{ width: 16%; border: 0; border-bottom: 5px solid #fff; margin-bottom: 20px; } .section-home p{ font-size: 1.3em; } .col-1-3 { float: left; width: 30%; margin-right: 5% } .col-2-3 { float: left; width: 65%; margin-right: 5% } .row .col-1-3:last-child, .row .col-1-2:last-child, .row .col-2-3:last-child { margin-right:0; } .section-portfolio img{ width: 100%; } .section-portfolio > .container > .title{ font-size: 1.7em; text-transform: uppercase; font-weight: 700; color: #333; margin-bottom: 7px; } .section-portfolio hr, .section-contact hr { border: 0; border-bottom: 1px solid #333; width: 50%; margin-bottom: 20px; } .section-portfolio .row { margin-bottom: 30px } .section-contact, .section-footer { padding:60px 0 30px; } .section-portfolio{ padding:20px 0 30px; } .section-about > .container > .title, .section-contact > .container > .title { font-weight: 700; text-transform:uppercase; font-size: 1.8em; text-align: center; } .section-about > .container { width: 60%; } .section-about .btn-default{ color: #fff; text-decoration: none; border: 1px solid #fff; border-radius: 5px; padding: 13px; display:inline-block; } .section-about p { line-height: 1.6; margin-bottom: 26px; } .section-contact form{ width:60%; margin: 0 auto; } .section-contact form .frm-group{ border-top: 1px solid #ccc; padding: 15px 0; } .section-contact form input{ border: 0; } .section-contact form textarea{ border: 0; display:block; width: 100%; height: 4em; } .section-contact form label{ color: #999; } .section-contact form button{ border:0; color: #fff; background-color: #18bc9c; padding: 10px 15px; border-radius: 5px; } .section-footer { background-color: #2c3e50; color: #fff; padding:60px 0; } .section-footer > .container > .row > .col-1-3 > .title{ font-size: 1.2em; text-transform: uppercase; font-weight: 500; color: #fff; margin-bottom: 9px; } .link-fb{ color: #fff; display:inline-block; border: 1px solid #fff; border-radius: 50%; padding:10px 12px; } .link-google{ color: #fff; display:inline-block; border: 1px solid #fff; border-radius: 50%; padding: 9px 9px; margin-left:5px; } .link-twitter{ color: #fff; display:inline-block; border: 1px solid #fff; border-radius: 50%; padding: 9px 9px; margin-left:5px; } .link-linkedin{ color: #fff; display:inline-block; border: 1px solid #fff; border-radius: 50%; padding: 9px 9px; margin-left:5px; } .link-dribbble{ color: #fff; display:inline-block; border: 1px solid #fff; border-radius: 50%; padding: 9px 9px; margin-left:5px; } .link-fb:hover{ background-color: #fff; color: #ccc; } .link-google:hover{ background-color: #fff; color: #ccc; } .link-twitter:hover{ background-color: #fff; color: #ccc; } .link-linkedin:hover{ background-color: #fff; color: #ccc; } .link-dribbble:hover{ background-color: #fff; color: #ccc; } /* CARRUSEL OBTENIDO DE INTERNET */ /* Fade content bs-carousel with hero headers Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com Image credits: unsplash.com */ /********************************/ /* Fade Bs-carousel */ /********************************/ .fade-carousel { position: relative; height: 100vh; } .fade-carousel .carousel-inner .item { height: 100vh; } .fade-carousel .carousel-indicators > li { margin: 0 2px; background-color: #f39c12; border-color: #f39c12; opacity: .7; } .fade-carousel .carousel-indicators > li.active { width: 10px; height: 10px; opacity: 1; } /********************************/ /* Hero Headers */ /********************************/ .hero { position: absolute; top: 50%; left: 50%; z-index: 3; color: #fff; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0,0,0,.75); -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .hero h1 { font-size: 6em; font-weight: bold; margin: 0; padding: 0; } .fade-carousel .carousel-inner .item .hero { opacity: 0; -webkit-transition: 2s all ease-in-out .1s; -moz-transition: 2s all ease-in-out .1s; -ms-transition: 2s all ease-in-out .1s; -o-transition: 2s all ease-in-out .1s; transition: 2s all ease-in-out .1s; } .fade-carousel .carousel-inner .item.active .hero { opacity: 1; -webkit-transition: 2s all ease-in-out .1s; -moz-transition: 2s all ease-in-out .1s; -ms-transition: 2s all ease-in-out .1s; -o-transition: 2s all ease-in-out .1s; transition: 2s all ease-in-out .1s; } /********************************/ /* Overlay */ /********************************/ .overlay { position: absolute; width: 100%; height: 30%; z-index: 2; background-color: #080d15; opacity: .3; } /********************************/ /* Custom Buttons */ /********************************/ .btn.btn-lg {padding: 10px 40px;} .btn.btn-hero, .btn.btn-hero:hover, .btn.btn-hero:focus { color: #f5f5f5; background-color: #1abc9c; border-color: #1abc9c; outline: none; margin: 20px auto; } /********************************/ /* Slides backgrounds */ /********************************/ .fade-carousel .slides .slide-1, .fade-carousel .slides .slide-2, .fade-carousel .slides .slide-3 { height: 30vh; background-size: cover; background-position: center center; background-repeat: no-repeat; } .fade-carousel .slides .slide-1 { background-image: url(https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818); width: 100%; height: 30%; } .fade-carousel .slides .slide-2 { background-image: url(https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af); } .fade-carousel .slides .slide-3 { background-image: url(https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327); } /********************************/ /* Media Queries */ /********************************/ @media screen and (min-width: 980px){ .hero { width: 980px; } } @media screen and (max-width: 640px){ .hero h1 { font-size: 4em; } } .header-area { background: none repeat scroll 0 0 #f4f4f4; } .header-area a { color: #888; } .user-menu ul { list-style: outside none none; margin: 0; padding: 0; } .user-menu li { display: inline-block; } .user-menu li a { display: block; font-size: 13px; margin-right: 5px; padding: 10px; } .user-menu li a i.fa { margin-right: 5px; } .header-right ul.list-inline { margin: 0; text-align: right; } .header-right ul.list-inline li a { display: block; padding: 9px; } .header-right ul.list-inline li ul a { padding: 5px 15px; } .header-right ul.list-inline li ul { border: medium none; border-radius: 0; left: 50%; margin-left: -50px; min-width: 100px; text-align: center; } .mainmenu-area {background: none repeat scroll 0 0 #2c3e50; font-family: "Roboto Condensed",sans-serif; text-transform: uppercase; width: 100%; z-index: 999;} .logo h1 { font-size: 40px; margin: 30px 0;font-weight: 400; } .logo h1 a { color: #999; } .logo h1 a:hover {text-decoration: none;opacity: .7} .logo h1 a span { color: #5a88ca; } .mainmenu-area ul.navbar-nav li a { color: #fff; font-size: 14px; padding: 20px; } .mainmenu-area ul.navbar-nav li:hover a, .mainmenu-area ul.navbar-nav li.active a {background: #fff; color:#000;} .mainmenu-area .nav > li > a:focus {color: #000;} /*ANGULARES*/ .section { overflow: hidden; width: 100%; font-family: "Roboto Condensed",sans-serif; } .contenedor { margin: 0 auto; width: 100%; max-width: 1280px; text-align: center; } .angled__divider { position: relative; height: 2em; } .angled__divider:before { content: ''; position: absolute; left: -1em; width: 101%; height: 200%; top: -3em; -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg); transform: rotate(-1deg); } /** * Individual section styles **/ .angled__divider--0:before { background: #fff; } .section--0, .angled__divider--0, .angled__divider--1:before { background: #5a88ca; } .section--1, .angled__divider--1, .angled__divider--2:before { background-image: url("/img/sensors.jpg"); background-repeat:no-repeat; background-size: cover; background-attachment:fixed; } .section--2, .angled__divider--2, .angled__divider--3:before { background-image:url(../img/automatizacion-i.jpg); background-repeat:no-repeat; background-size: cover; background-attachment:fixed; } /** * Content styles **/ .content-panel { border: 1px solid #fff; color: #fff; display: table; margin: 2em auto; padding: 1em 2em; width: 78%; z-index:1; } .content-panel .title { font-size: 36px; font-weight: 700; margin-bottom: 0.5em; } .content-panel p { margin-bottom: 1em; font-family: 'Lato', Arial, sans-serif; font-size: 16px; text-align:center; } .spacer { height: 3em; } /* PARALLAX */ #cuerpo { padding: 0; margin: 0; font-family: sans-serif; } div[id*=bg-img] { width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } #bg-img-1 { background-image: url("https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/hires/2016/terahertztec.jpg"); } #bg-img-2 { background-image: url("img/automatizacion-i.jpg"); } #bg-img-3 { background-image: url("img/automatizacion-i.jpg"); } .overlay-box { padding: 2em; } .small { font-size: .75rem; } table, td, tr, th{ border:none; } #polish{ margin:0 auto; width:70%; padding:10px; } #contenido{ color:#fff; } .letras{ text-decoration:none; color:#fff; } .letras a{ color:#E2006B; text-decoration:none; } .letras a:hover{ color:#E2006B; } .vertical-menu { width: 75%; /* Set a width if you like */ } .vertical-menu a { background-color:#E2006B; /* Grey background color */ color: white; /* Black text color */ display: block; /* Make the links appear below each other */ padding: 5px; /* Add some padding */ text-decoration: none; /* Remove underline from links */ } .vertical-menu a:hover { background-color:#666; /* Dark grey background on mouse-over */ } .btn_volver{ text-decoration: none; padding: 10px; font-size: 14px; color: #ffffff; background-color: #E2006B; border-radius: 6px; } .btn_volver a{ text-decoration: none; display: block; } .btn_volver a:hover{ background-color: #E2006B; color: #fff; } form formulario{ margin:0 auto; float:left; }