/* Simple Responsive Template primary styles Author: www.prowebdesign.ro Add your own styles to customize the project. BASE (MOBILE) SIZE These are the mobile styles. It's what people see on their phones. Remember, keep it light: Speed is Important. */ /*Simple Responsive Templateprimary styles Author: www.prowebdesign.ro Add your own styles to customize the project.BASE (MOBILE) SIZE These are the mobile styles. It's what people see on their phones. Remember, keep it light: Speed is Important.*/ div.pagination { margin-right:20px; margin-bottom:20px; font-family: "Raleway",sans-serif; } div.pagination a { margin-right:20px; margin-bottom:20px; text-decoration: none; color: red; font-family: "Raleway",sans-serif; } div.pagination a:hover { text-decoration: underline; } div.pagination span.current { margin-right:20px; margin-bottom:20px; font-weight: bold; color: red; } div.pagination span.disabled { margin-right:20px; margin-bottom:20px; font-family: "Raleway",sans-serif; color: #DDD; } div.pic-case ul,li { list-style: none !important; } /* typography */ .iconof { background-color:#3B5998; text-align:center; width:20px ; height:23px; overflow:none; float:right; padding-top:3px; cursor:pointer; text-align:center; padding-left:2px; margin-left:10px; } .iconof:hover { background-color:#2F4977; } .iconot { background-color:#1C8BAD; text-align:center; width:20px ; height:23px; overflow:none; float:right; padding-top:3px; cursor:pointer; text-align:center; padding-left:2px; margin-left:10px; } .iconot:hover { background-color:#23B1E6; } .centered-text{text-align:center} .navegacion{font-family: 'Raleway', sans-serif, Arial;font-size:.60em; font-weight: 400; color:#4D4D4D; margin-bottom:30px; line-height:1em; text-align: right; } .navegacion a{ text-decoration:none; } h2 .Title1{font-family: 'Pinyon Script', cursive; font-size:2em; font-weight: 400; color:#BE161C; margin:30px 0; line-height:1em;} .seccioncolor{ background-color:#BE161C; line-height:1em; overflow:hidden; padding:20px;} .h5{ color:#FFF; float:left; margin-top:10px; font-family: 'Pinyon Script', cursive; font-size:4em; text-align:center; width:25%; padding:20px 0;} .secciondecrip{ color:#FFF; float:left;font-family: "Times New Roman", Times, serif, 'Raleway', sans-serif, Arial; font-size:1.2em; text-align:left; width:70%; padding:20px 0; font-style:italic; line-height:1.50em; font-weight:400; padding-left:20px;}.seccionimg{ width:5%;} h2 .Titlegal{ font-family: 'Pinyon Script', cursive; font-size:2em; font-weight: 400; color:#563260; margin:30px 0 30px; line-height:1em; text-align:left; border-bottom:#563260 1px solid; }h2 .Titlerosa{ font-family: 'Pinyon Script', cursive; font-size:2em; font-weight: 400; color:#DA1B67; margin:30px 0 30px; line-height:1em; text-align:left; border-bottom:#DA1B67 1px solid; }h2 .Titleverde{ font-family: 'Pinyon Script', cursive; font-size:2em; font-weight: 400; color:#769B04; margin:30px 0 10px; line-height:1em; text-align:left; border-bottom:#769B04 1px solid; }h2 .Titleazul{ font-family: 'Pinyon Script', cursive; font-size:2em; font-weight: 400; color:#006BDE; margin:30px 0 10px; line-height:1em; text-align:left; border-bottom:#006BDE 1px solid; } h2 .Titleservicios{font-family: 'Pinyon Script', cursive; font-size:2em; font-weight: 400; color:#769B04; margin:30px 0; line-height:1em; text-align:left; border-bottom:#769B04 1px solid;} h2 span{font-family: "Times New Roman", Times, serif, 'Raleway', sans-serif;font-weight:400; color:#4D4D4D; margin:30px 0; line-height:1em; text-align:left; font-size:.50em; font-style:italic; letter-spacing:1px;} .lenguaje{ float:right; margin-right:10px; font-family: 'Raleway', sans-serif, Arial;font-weight:400;} .lenguaje > ul > li { display: inline-block;} .lenguaje > ul > li > a { color:#666666; text-decoration:none; display: block; padding:0 5px; letter-spacing: 1px; font-size:0.75em; }.lenguaje > ul > li.active a, .lenguaje > ul > li a:hover { color:#BE161C; text-decoration:underline; } .wraplenguaje{ width:100%; height:40px; margin:0 auto; } body{ color:#666; font-family: "Times New Roman", Times, serif, Arial, Helvetica, sans-serif; font-size:1em; line-height:1.4em; font-weight:normal; } h1, h2, h3, h4, h5, h6{ font-weight:normal; font-family:"Times New Roman", Times, serif, Arial, Helvetica, sans-serif; line-height:1.5em; margin:.45em 0; padding:0; } /* links */ a, a:visited, a:active, a:hover{color:#666666;text-decoration:none;} a:hover{ text-decoration:none;} /* Box sizing. Awesome thing. Read about it here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */ *{ box-sizing:border-box; -moz-box-sizing:border-box;} /* structure */ .wrapper{ width: 95%; margin: 0 auto; }.row{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:60.50em;*zoom:1}.contenido1 {position:relative; width: 60.50%; margin-right:32px; } .rowthumbs .rowgaleria{width:75%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:50px;max-width:60.50em;*zoom:1}.contenido1 {position:relative; width: 60.50%; margin-right:32px; } .rowthumbs{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:60.50em;} .testimonios{ width:95%; margin-left:2%; margin-top:50px; height:170px; } .iconos-testimonios{ font-family: 'Inconsolata', Arial, Helvetica, sans-serif, Calibri, Colaborate-Thin, ScubaOT, Helvetica-UltraCompressed, Avenir; font-size:50px; font-weight: 400; float:left; width:5%; } .parrafo-testimonios{font-family: 'Raleway', Arial, Helvetica, sans-serif, Calibri, Colaborate-Thin, ScubaOT, Helvetica-UltraCompressed, Avenir; width:90%; font-size:16px;float:left; font-style:italic; text-align:center; } .colderecha { position:relative; width: 36%; background:#323232 }.column{position:relative;float: left; } .bottom300 { padding-bottom:300px;} .bottom550 { padding-bottom:550px;} .bottom600 { padding-bottom:600px;} .bottom700 { padding-bottom:700px;} .bottom750 { padding-bottom:750px;} .bottom800 { padding-bottom:800px;} .bottom450 { padding-bottom:450px;} .bottom100 { padding-bottom:100px;} .bottom150 { padding-bottom:150px;} .footer{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:72em;} header{ padding: 0; } #banner{ text-align:center; }#logo{ width:100%; height:auto; } #hero, #page-header{ background:#f3f3f3; background-image:url(../images/back.jpg); border-top:5px solid #BE161C; border-bottom:1px solid #e2e2e2; margin:0 auto; text-align:center; } #hero h1{ line-height:1.2em; margin-top:0px; margin-bottom:10px;} #herogal, #page-header{ background:#f3f3f3; background-image:url(../images/back.jpg); border-top:5px solid #563260; border-bottom:1px solid #e2e2e2; margin:0 auto; text-align:center; }#herorosa, #page-header{ background:#f3f3f3; background-image:url(../images/back.jpg); border-top:5px solid #DA1B67; border-bottom:1px solid #e2e2e2; margin:0 auto; text-align:center; } #herorosa h1{ line-height:1.2em; margin-top:0px; margin-bottom:10px;} #heroverde, #page-header{ background:#f3f3f3; background-image:url(../images/back.jpg); border-top:5px solid #769B04; border-bottom:1px solid #e2e2e2; margin:0 auto; text-align:center; } #heroverde h1{ line-height:1.2em; margin-top:0px; margin-bottom:10px;} #heroazul, #page-header{ background:#f3f3f3; background-image:url(../images/back.jpg); border-top:5px solid #006BDE; border-bottom:1px solid #e2e2e2; margin:0 auto; text-align:center; } #heroazul h1{ line-height:1.2em; margin-top:0px; margin-bottom:10px;} .flexslider{ display:none; } #content { margin:20px 0; } .margin-center { margin:0 2%; } aside { margin:40px 0; } p{ margin:0 0 1.5em;} /* RESPONSIVE IMAGES */ img{ max-width:100%; height:auto;} /*MAIN MENU*/ .menu-toggle span{position: relative;right:-70px; top:-27px; display:block;width:16px;height:0;-webkit-box-shadow:0 10px 0 1px #000,0 16px 0 1px #000,0 22px 0 1px #000;box-shadow:0 10px 0 1px #000,0 16px 0 1px #000,0 22px 0 1px #000} .menu-toggle{ display:block; padding:10px 40px 10px 10px; margin:0; height:25px; background:#fff; color:#000; cursor:pointer; text-transform:uppercase; font-size:18px; font-family:Arial, Helvetica, sans-serif, Calibri, Colaborate-Thin, ScubaOT, Helvetica-UltraCompressed; } .menu-toggle.toggled-on{ color:#000; } .srt-menu{ display:none; } .srt-menu.toggled-on{ display:block; position:relative; z-index:10; } .srt-menu{ clear:both; margin-bottom:20px; } .srt-menu li a { background:#dadada; font-family: "Times New Roman", Times, serif, 'Raleway', sans-serif, Arial; display:block; text-transform:uppercase; padding:10px; text-decoration:none; font-size:.80em; } .srt-menu li a:hover{ background:#fff; color:#666666; } .srt-menu li.inicio a, .srt-menu li.concepto a,.srt-menu li.servicios a,.srt-menu li.proyectos a,.srt-menu li.galeria a,.srt-menu li.tips a,.srt-menu li.contacto a,{ background:#dadada; display:block; padding:10px; text-decoration:none; font-size:.80em; } .srt-menu li.inicioactive a{ background:#BE161C; font-size:1em; color:#fff; text-transform:none; font-style:italic; } .srt-menu li.inicio a:hover{ background:#BE161C; text-transform:none; font-style:italic; color:#fff; font-size:1em; } .srt-menu li.conceptoactive a{ background:#D91C66; text-transform:none; font-style:italic; color:#fff; font-size:1em; } .srt-menu li.concepto a:hover{ background:#D91C66; text-transform:none; font-style:italic; color:#fff; font-size:1em; } .srt-menu li.serviciosactive a{ background:#769B04; text-transform:none; font-style:italic; color:#fff; font-size:1em; } .srt-menu li.servicios a:hover{ background:#769B04; text-transform:none; font-style:italic; color:#fff; font-size:1em; } .srt-menu li.proyectosactive a{ background:#006BDE; text-transform:none; font-style:italic; color:#fff; font-size:1em; } .srt-menu li.proyectos a:hover{ background:#006BDE; text-transform:none; font-style:italic; color:#fff; font-size:1em; } .srt-menu li.galeriaactive a{ background:#563260; text-transform:none; font-style:italic; color:#fff; font-size:1em; } .srt-menu li.galeria a:hover{ background:#563260; text-transform:none; font-style:italic; color:#fff; font-size:1em; } .srt-menu li.tipsactive a{ background:#769B04; text-transform:none; font-style:italic; color:#fff; font-size:1em; } .srt-menu li.tips a:hover{ background:#769B04; text-transform:none; font-style:italic; color:#fff; font-size:1em; } .srt-menu li.contactoactive a{ background:#DA1B67; text-transform:none; font-style:italic; color:#fff; font-size:1em; } .srt-menu li.contacto a:hover{ background:#DA1B67; text-transform:none; font-style:italic; color:#fff; font-size:1em; } .srt-menu li li a { background:#e8e8e8; padding-left:40px; } .srt-menu li li li a { background:#efefef; padding-left:80px; } /*SECONDARY MENU*/ #secondary-navigation{ margin-bottom:20px; } #secondary-navigation ul{ margin:0; padding:0; } #secondary-navigation ul li a{ background:#E6E6E6; display:block; margin:5px 0; padding:10px; text-decoration:none; } #secondary-navigation ul li a:hover, #secondary-navigation ul li.current a{ background:#0099ff; color:#fff; } /*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/ .grid_4_dere { width: 80%; }.grid_4_dere p{ color:#FFF; text-align:justify; font-family: "Times New Roman", Times, serif, 'Raleway', sans-serif; line-height:1.8em; font-size:.95em; } .grid_4_dere p a{ color:#BE161C;} .margin_dere { margin:0 auto ; } .top70 { margin-top:70px; } .top20 { margin-top:20px; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { margin-bottom:40px; } .colthumbsmall { text-align:center; width: 25%; } .colthumbsmall { margin-bottom:50px; } .colthumblarge { text-align:center; width: 100%; margin-bottom:40px; }.colthumblarge img{ border-bottom:#563260 8px solid; opacity: none;} .colthumblarge img:hover{opacity: 0.7;} .colthumblargerosa { text-align:center; width: 100%; margin-bottom:40px; }.colthumblargerosa img{ border-bottom:#DA1B67 8px solid; width:100%;} .colthumblargeverde { text-align:center; width: 100%; margin-bottom:40px; }.colthumblargeverde a img{ border-bottom:#769B04 8px solid; width:100%;} .colthumblargeverde a img:hover{opacity: 0.7;} .colthumblargeazul { text-align:center; width: 100%; margin-bottom:40px; }.colthumblargeazul img{ border-bottom:#006BDE 8px solid; width:100%;} .colthumblarge h4{ color:#000; font-family: "Times New Roman", Times, serif, 'Raleway', sans-serif; font-weight:300; font-size:1.6em;} .colthumblarge h4:hover{ text-decoration:underline;}.colthumblarge p{ color:#4D4D4D; font-family: "Times New Roman", Times, serif, 'Raleway', sans-serif; font-weight:300; font-size:1em; line-height:1.7em;} .colthumblargerosa h4{ color:#000; font-family: "Times New Roman", Times, serif, 'Raleway', sans-serif; font-weight:300; font-size:1.6em;}.colthumblargerosa2 img{ border-bottom:#DA1B67 8px solid; width:100%;}.colthumblargerosa2 h4{ color:#000; font-family: "Times New Roman", Times, serif, 'Raleway', sans-serif; font-weight:300; font-size:1.6em;}.colthumblargerosa p{ color:#4D4D4D; font-family: "Times New Roman", Times, serif, 'Raleway', sans-serif; font-weight:300; font-size:1em; line-height:1.7em; margin: 30px 0; text-align:justify;}.colthumblargerosa2 p{ color:#4D4D4D; font-family: "Times New Roman", Times, serif, 'Raleway', sans-serif; font-weight:300; font-size:1em; line-height:1.7em; margin: 30px 0; text-align:justify;}.colthumblargerosa2 span{ color:#DA1B67; font-weight:500;}.colthumblargeverde h4{ text-decoration:none; color:#000; font-family: "Times New Roman", Times, serif, 'Raleway', sans-serif; font-weight:300; font-size:1.4em; cursor:pointer;} .colthumblargeverde h4:hover{ text-decoration: underline;} .txt-left{ text-align:left;}.txt-center{ text-align:center;}.colthumblargeverde p{ color:#4D4D4D; font-family: "Times New Roman", Times, serif, "Times New Roman", Times, serif, 'Raleway', sans-serif; font-weight:300; font-size:1em; line-height:1.7em; margin: 30px 0; text-align:justify;} .colthumblargeverde .sub-verde { color:#769B04; font-family: "Times New Roman", Times, serif, 'Raleway', sans-serif; font-weight:500; }.colthumblargeverde span{color:#4D4D4D; font-family: "Times New Roman", Times, serif, 'Raleway', sans-serif; font-weight:300; font-size:1em; line-height:1.7em; margin: 30px 0; text-align:center;}.colthumblargeverde .siguiente a{ color:#BE161C; font-family: "Times New Roman", Times, serif, 'Raleway', sans-serif; font-weight:400; } .colthumblargerosa2 .link { color:#BE161C; font-family: 'Raleway', sans-serif; font-weight:400; } .colthumblargeazul h4{ color:#000; font-family: "Times New Roman", Times, serif, 'Raleway', sans-serif; font-weight:300; font-size:1.6em;}.colthumblargeazul p{ color:#4D4D4D; font-family: "Times New Roman", Times, serif, 'Raleway', sans-serif; font-weight:300; font-size:1em; line-height:1.7em; margin: 30px 0; text-align:justify;} .colthumblargeazul_col{ width:50%; float:left; margin-bottom:40px;} /*FOOTER*/ footer{ clear:both; font-size:83%; padding:20px 0; } footer ul{ margin:0; padding:0; } /*colors and backgrounds*/ body{ background:#fff; } h1, h2, h3, h4, h5, h6{ color:#333; } footer{ background:#000000; color:#fff; font-family:Arial, Helvetica, sans-serif, Calibri, Colaborate-Thin, ScubaOT, Helvetica-UltraCompressed; } footer a{ color:#fff; text-decoration:none;}footer a:hover{ color:#BE161C; text-decoration:none;} footer h1, footer h2, footer h3, footer h4{ color:#CCC; margin-bottom:10px; } footer ul{ margin:0 0 0 8%; }.colfooter { display: block; float:left; margin-bottom:20px;width:70%; text-align:left; } .colcopy { width: 30%; float: left; color:#fff; font-family: Arial, Helvetica, sans-serif, Calibri, Colaborate-Thin, ScubaOT, Helvetica-UltraCompressed; font-weight:400; display:block; list-style:none; text-align:right; }.iconossociales { width:100%; float: right; margin-top:-20px; } .colfooter a{ color:#FFF;}.colfooter .active{ color:#FF161C;} a.buttonlink{ background:#0099ff; border-radius:7px; color:#fff; display:block; float:left; margin:10px 15px 10px 0; padding:10px; text-decoration:none; } a.buttonlink:hover{ background:#8dbc01; } .greenelement{ background:#5ec79e; color:#fff; } .violetelement{ background:#887dc2; color:#fff; } /* Contain floats: h5bp.com/q */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } .rightfloat{ float:right; } .leftfloat{ float:left; } @media only screen and (max-width: 920px){.leftfloat img{ width:50px; height:85px; }.secciondecrip{ color:#FFF; float:left; text-align:left; width:65%; padding:20px 0; line-height:1.50em; font-weight:400; }.seccionimg{ width:10%; padding-left:20px;} .iconossociales { width: 10%; float:none; margin-left:45%; margin-right:45%; margin-top:10px;} .iconof { float:none; } .colfooter { display: block; float:none; margin-bottom:20px;width:100%; text-align:center; } .colcopy { width: 100%; float: none; color:#fff; font-family: Arial, Helvetica, sans-serif, Calibri, Colaborate-Thin, ScubaOT, Helvetica-UltraCompressed; font-weight:400; display:block; list-style:none; text-align:center; margin:0 auto; } .colthumblargerosa2 p{text-align:center;}.colthumblargerosa span{ color:#DA1B67; font-weight:500;} .txt-left{ text-align:center;} .bottom800 { padding-bottom:20px;} .bottom150 { padding-bottom:20px;} .bottom100 { padding-bottom:20px;} .bottom450 { padding-bottom:20px;} .bottom600 { padding-bottom:20px;} .bottom700 { padding-bottom:20px;} .bottom750 { padding-bottom:20px;} .bottom550 { padding-bottom:20px;} .rowthumbs{width:100%;padding:0 30px;} .colthumbsmall { text-align:center; width: 33.3333%; } .wraplenguaje{ display:none} #logo{ margin-top:20px; margin-bottom:40px; }#content { float:none; width:100%; margin:0 auto; } #content.wide-content{ float:none; width:50%; text-align:center; margin-left: 25%; } .serviciosimg img{ width:100%; height:auto;}.grid_4 { width: 100%; }.margin-center { margin:0 ; }.contenido1 {width: 100%; padding:0 30px;} .colderecha { width: 100%; }.grid_4_dere { width: 60%; } } @media only screen and (max-width: 700px){.h5{ color:#FFF; float:none; font-family: 'Pinyon Script', cursive; font-size:4em; text-align:center; width:100%; padding:20px 0;} .secciondecrip{ color:#FFF; float:none; text-align:center; width:100%; padding:20px 0; line-height:1.50em; font-weight:400;}.seccionimg{ display:none;} h2 .Title1{font-family: 'Pinyon Script', cursive; font-size:2em; font-weight: 400; color:#BE161C; margin:30px 0; line-height:1em;} h2 .Titlegal{ text-align:center;}h2 .Titlerosa{ text-align:center; }h2 .Titleverde{ text-align:center;} h2 .Titleazul{text-align:center;} h2 .Titleservicios{text-align:center;} h2 span{text-align:center;} .navegacion{text-align:center; }.colfooter { float:none; margin-bottom:20px;width:100%; text-align:center; }.colcopy { width: 100%; float: none; text-align:center; } .colthumbsmall { text-align:center; width: 50%; }.rowthumbs .rowgaleria{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:50px;max-width:60.50em;*zoom:1}} @media only screen and (max-width: 500px){.colthumbsmall { text-align:center; width: 100%; } .iconossociales { width: 20%; float:none; margin-left:40%; margin-right:40%;}} @media only screen and (max-width: 480px){ .grid_4_dere { width: 85%; } content { float:none; width:100%; margin:0 auto; } #content.wide-content{ float:none; width:80%; text-align:center; margin-left: 10%; } .serviciosimg img{ width:100%; height:auto;}.grid_4 { width: 100%; }.margin-center { margin:0 ; } } /* LARGER MOBILE DEVICES This is for mobile devices with a bit larger screens. */ @media only screen and (min-width: 300px) { #banner{ float:left; text-align:left; margin-bottom:-20px;/*this depends on the height of the logo*/ } .menu-toggle{/*make menu float right, instead of sitting under the logo*/ margin-top:20px; /*this depends on the height of the logo*/ float:right; }#logo{ width:195px; height:auto; } } /* TABLET & SMALLER LAPTOPS The average viewing window and preferred media query for those is 768px. But I think that some more breathing space is good:) */ @media only screen and (min-width: 920px) { .wrapper{ max-width: 1200px; margin: .75em auto; } #banner{ float:left; text-align:left; margin-bottom:0px; } header{ padding:0; } #content { float:left; width:65%; } #content.wide-content{ float:none; width:100%; } .flexslider{ display:block; /*demo 1 slider theme*/ margin: 0 0 60px; background: #fff; border: 4px solid #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); } aside { float:right; width:30%; } /*** MAIN MENU - ESSENTIAL STYLES ***/ .menu-toggle{display:none;} #menu-main-navigation{display:block;} .srt-menu, .srt-menu * { margin: 0; padding-top: 2px; list-style: none; } .srt-menu ul { position: absolute; display:none; width: 12em; /* left offset of submenus need to match (see below) */ } .srt-menu ul li { width: 100%; } .srt-menu ul li { width: 100%; background:#C36; } .srt-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .srt-menu li { float: left; position: relative; margin-left:0px; } .srt-menu li li { margin-left:0px; } .srt-menu a { display: block; position: relative; } .srt-menu li:hover ul, .srt-menu li.sfHover ul { display:block; left: 0; top: 45px; /* match top ul list item height */ z-index: 99; -webkit-box-shadow: 2px 3px 2px 0px rgba(00, 00, 00, .3); box-shadow: 2px 3px 2px 0px rgba(00, 00, 00, .3); } ul.srt-menu li:hover li ul, ul.srt-menu li.sfHover li ul { top: -999em; } ul.srt-menu li li:hover ul, ul.srt-menu li li.sfHover ul { left: 12em; /* match ul width */ top: 0; } ul.srt-menu li li:hover li ul, ul.srt-menu li li.sfHover li ul { top: -999em; } ul.srt-menu li li li:hover ul, ul.srt-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } /*** DEMO1 SKIN ***/ #topnav, .srt-menu { float:right; margin: 0; font-family: 'Raleway', sans-serif, Arial;font-weight:400; font-size:1em; letter-spacing:1px; } .srt-menu a { text-decoration:none; } .srt-menu li a { background:#fff; margin:0 2px; padding:0px 15px; height:25px; } .srt-menu a, .srt-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #666666; } .srt-menu li li a { border-top: 1px solid rgba(255,255,255,.2); background: #333; /*fallback for old IE*/ background:rgba(0,0,0,.6); color: #fff; padding-left:20px; height:auto; } .srt-menu li li a:visited{color:#fff;} .srt-menu li li li a, .srt-menu li.current * li a{ padding-left:20px; background:rgba(0,0,0,.6); } .srt-menu li.inicio a, .srt-menu li.concepto a,.srt-menu li.servicios a,.srt-menu li.proyectos a,.srt-menu li.galeria a.srt-menu li.tips a,.srt-menu li.contacto a{ background:#fff; margin:0 2px; padding:0px 15px; height:25px; font-size:.80em; } .srt-menu li.inicioactive a{ color:#BE161C;background-color:#FFF; margin:0 2px; border-top: #BE161C 1px solid; border-bottom:#BE161C 1px solid; text-transform:none; } .srt-menu li.inicio a:hover{ color:#BE161C; background-color:#FFF; text-transform:none; border-top: #BE161C 1px solid; border-bottom:#BE161C 1px solid; } .srt-menu li.conceptoactive a{ color:#DA1B67;background-color:#FFF; border-top: #DA1B67 1px solid; border-bottom:#DA1B67 1px solid; } .srt-menu li.concepto a:hover { color:#DA1B67; background-color:#FFF; border-top: #DA1B67 1px solid; border-bottom:#DA1B67 1px solid; } .srt-menu li.serviciosactive a{ color:#769B04; background-color:#FFF; border-top: #769B04 1px solid; border-bottom:#769B04 1px solid; } .srt-menu li.servicios a:hover { color:#769B04; background-color:#FFF; border-top: #769B04 1px solid; border-bottom:#769B04 1px solid; } .srt-menu li.proyectosactive a { color:#006BDE; background-color:#FFF; border-top: #006BDE 1px solid; border-bottom:#006BDE 1px solid; } .srt-menu li.proyectos a:hover { color:#006BDE; background-color:#FFF; border-top: #006BDE 1px solid; border-bottom:#006BDE 1px solid; } .srt-menu li.galeriaactive a{ color:#563260; background-color:#FFF; border-top: #563260 1px solid; border-bottom:#563260 1px solid; } .srt-menu li.galeria a:hover { color:#563260; background-color:#FFF; border-top: #563260 1px solid; border-bottom:#563260 1px solid; } .srt-menu li.tipsactive a{ color:#769B04;background-color:#FFF; border-top: #769B04 1px solid; border-bottom:#769B04 1px solid; } .srt-menu li.tips a:hover { color:#769B04;background-color:#FFF; border-top: #769B04 1px solid; border-bottom:#769B04 1px solid; } .srt-menu li.contactoactive a{ color:#DA1B67; background-color:#FFF; border-top: #DA1B67 1px solid; border-bottom:#DA1B67 1px solid; } .srt-menu li.contacto a:hover { color:#DA1B67; background-color:#FFF; border-top: #DA1B67 1px solid; border-bottom:#DA1B67 1px solid; } .srt-menu li li:hover > a{ color:#666666; background:#fff; } /*GRID*/ /* & Columns : 12 */ .grid_1 { width: 5%; } .grid_2 { width: 13.333333333333%; } .grid_3 { width: 21.666666666667%; } .grid_4 { width: 32%; } .grid_5 { width: 38.333333333333%; } .grid_6 { width: 46.666666666667%; } .grid_7 { width: 55%; } .grid_8 { width: 63.333333333333%; } .grid_9 { width: 71.666666666667%; } .grid_10 { width: 80%; } .grid_11 { width: 88.333333333333%; } .grid_12 { width: 96.666666666667%; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { float: left; display: block; } .alpha{margin-left:0px;} .omega{margin-right:0px;} .rightfloat{float:right;} /* @ * tinyfluidgrid.com & girlfriendnyc.com */ } /* DESKTOP This is the average viewing window. So Desktops, Laptops, and in general anyone not viewing on a mobile device. Here's where you can add resource intensive styles. */ @media only screen and (min-width: 1030px) { } /* LARGE VIEWING SIZE This is for the larger monitors and possibly full screen viewers. */ @media only screen and (min-width: 1240px) { } /* RETINA (2x RESOLUTION DEVICES) This applies to the retina iPhone (4s) and iPad (2,3) along with other displays with a 2x resolution. */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { } /* iPHONE 5 MEDIA QUERY iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want) */ @media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { } /* PRINT STYLESHEET */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* h5bp.com/t */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }