/* Original design: Freestyle (v1.0 - August 22nd, 2012) - A free xhtml/css website template by Andreas Viklund. For more information, see http://andreasviklund.com/templates/freestyle/ */ *{margin:0; padding:0;} /* General styles */ body {background:#0a0a0a url(images/background.jpg) top center no-repeat; color:#ccc; font:110% 'Economica',Tahoma,sans-serif; line-height:1.3em;} a {color:#d06060; text-decoration:none; font-weight:400;} a:hover {text-decoration:underline;} p,ul,ol,dl {margin:0 0 15px 0; line-height:1.5em;} h1 {color:#888; font-size:3.0em; margin-bottom:0;} h1 a {text-transform:none; font-weight:400;} h1 a:hover {text-decoration:none; color:#eee;} h2 {font-size:2.2em; color:#333; margin:0 0 5px;} h3 {font-size:1.6em; margin:0 0 5px 0;} h1,h2,h3 {color:#d06060; font-weight:400; line-height:1.2em; font-family:'Economica', sans-serif;} /* Main layout container */ #layout {margin:40px auto 0; width:960px;} body.wider #layout {margin:40px auto 0; width:1200px;} /* Footer */ #footer {background:#0a0a0a url(images/insidebg.jpg) top center no-repeat;} #footer .col {color:#555; border-top:1px dotted #1a1a1a; padding:20px 0;} #footer p {text-align:center;} #footer a {color:#555; font-weight:400; text-decoration:none; border-bottom:1px dotted #333;} #footer a:hover {color:#aaa; text-decoration:none; border-bottom:1px dotted #888;} /* Grid classes, fixed width, 960px with 12 columns */ .col {float:left; margin:0 10px; overflow:hidden; float:left; display:inline;} .col img {max-width:100%;} .row {width:960px; margin:20px auto 0; overflow:hidden;} .row .row {margin:0 -10px; width:auto; display:inline-block;} .c1 {width:60px;} .c2 {width:140px;} .c3 {width:220px;} .c4 {width:300px;} .c5 {width:380px;} .c6 {width:460px;} .c7 {width:540px;} .c8 {width:620px;} .c9 {width:700px;} .c10 {width:780px;} .c11 {width:860px;} .c12 {width:940px;} /* Grid classes, fixed width, 1200px with 12 columns - add class="wider" to the element to use this */ body.wider .row {width:1200px;} body.wider .c1 {width:80px;} body.wider .c2 {width:180px;} body.wider .c3 {width:280px;} body.wider .c4 {width:380px;} body.wider .c5 {width:480px;} body.wider .c6 {width:580px;} body.wider .c7 {width:680px;} body.wider .c8 {width:780px;} body.wider .c9 {width:880px;} body.wider .c10 {width:980px;} body.wider .c11 {width:1080px;} body.wider .c12 {width:1180px;} /* Menu list styles */ ul.menu {list-style:none; margin:0; padding:10px 0; border-top:1px solid #333;} ul.menu li {list-style:none; text-align:center; font-size:1.2em; margin:0 0 10px; padding:0 0 8px 0; color:#888; border-bottom:1px solid #333;} ul.menu li a {font-size:1.2em; font-weight:400;} ul.menu li a:hover {color:#eee; text-decoration:none;} /* ul.list {list-style:none; padding:0; margin:0;} ul.list li {padding-left: 1em; text-indent: -.7em} ul.list li:before {content: "\002022"; padding-right:7px; color:#d06060; font-size:240%} */ li.list {list-style: disc inside; color:#d06060;} /* Additional text classes */ .slogan {color:#bbb; font-size:1.2em;} .alignleft {text-align:left;} .alignright {text-align:right;} .aligncenter {text-align:center;} .alignjustify {text-align:justify;} .nomargin {margin:0; padding:0;} .separator {height:100px; margin:0; padding:0; background: #0a0a0a url(images/insidebg2.jpg) bottom center no-repeat; border-bottom:1px dotted #1a1a1a;} .separator2 {height:50px; margin:0; padding:0; background: #0a0a0a url(images/insidebg2.jpg) bottom center no-repeat; border-bottom:1px dotted #1a1a1a;} .larger {font-size:1.2em;} .smaller {font-size:0.9em;} .spacer {margin:0 20px;} .clear {clear:both;} .hide {display:none;} .normaltext {color:#ccc;} .hightext {color:#d06060;} /* Light styles, apply by using class="light" on the body HTML element */ body.light {background:#f5f5f5 url(images/background-light.jpg) top center no-repeat; color:#555;} body.light a {color:#d06060;} body.light a:hover {color:#555;} body.light h1 {color:#888; font-size:3.0em; margin-bottom:0;} body.light h1 a:hover {color:#303030;} body.light h2 {color:#555;} body.light h1, body.light h2, body.light h3 {color:#d06060;} body.light ul.menu {border-top:1px solid #ddd;} body.light ul.menu li {border-bottom:1px solid #ddd;} body.light ul.menu li a:hover {color:#333;} body.light .separator {background: #f5f5f5 url(images/insidebg2-light.jpg) bottom center no-repeat; border-bottom:1px dotted #ccc;} body.light .separator2 {background: #f5f5f5 url(images/insidebg2-light.jpg) bottom center no-repeat; border-bottom:1px dotted #ccc;} body.light .slogan {color:#888;} body.light #footer {background:#f5f5f5 url(images/insidebg-light.jpg) top center no-repeat;} body.light #footer .col {color:#555; border-top:1px dotted #ccc;} body.light #footer a {color:#555; border-bottom:1px dotted #ddd;} body.light #footer a:hover {color:#444; border-bottom:1px dotted #eee;} body.light .normaltext {color:#555;} /* Alternate colors, apply by adding class="blue" (or any of the other available colors) to the body HTML element */ body.blue a {color:#3288a8;} body.blue h1, body.blue h2, body.blue h3 {color:#3288a8;} body.blue .hightext {color:#3288a8;} body.blue li.list {list-style: disc inside; color:#3288a8;} body.pink a {color:#f06ba0;} body.pink h1, body.pink h2, body.pink h3 {color:#f06ba0;} body.orange a {color:#e58c24;} body.orange h1, body.orange h2, body.orange h3 {color:#e58c24;} body.orange .hightext {color:#e58c24;} body.orange li.list {list-style: disc inside; color:#e58c24;} /*Imagenes header sin scroll */ .headerimage img {border-radius:12px;} /*Imagenes del index principal con scroll*/ #wrapper{ width:460px; margin:00px auto; height:270px; position:relative; border-radius:12px; color:#fff; text-shadow:rgba(0,0,0,0.1) 2px 2px 0px; } #slider-wrap{ width:460px; height:270px; border-radius:12px; position:relative; overflow:hidden; } #slider-wrap ul#slider{ width:100%; height:100%; position:absolute; top:0; left:0; } #slider-wrap ul#slider li{ float:left; position:relative; width:460px; height:270px; } #slider-wrap ul#slider li > div{ position:absolute; top:20px; left:35px; } #slider-wrap ul#slider li > div h3{ font-size:36px; text-transform:uppercase; } #slider-wrap ul#slider li > div span{ font-family: Neucha, Arial, sans serif; font-size:21px; } #slider-wrap ul#slider li i{ text-align:center; line-height:270px; display:block; width:100%; font-size:90px; } /*btns*/ .btns{ position:absolute; width:40px; height:60px; top:50%; margin-top:-25px; line-height:57px; text-align:center; cursor:pointer; background:rgba(0,0,0,0.1); z-index:100; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; -ms-transition: all 0.1s ease; transition: all 0.1s ease; } .btns:hover{ background:rgba(0,0,0,0.3); } #next{right:-50px; border-radius:7px 0px 0px 7px;} #previous{left:-50px; border-radius:0px 7px 7px 7px;} #counter{ top: 20px; right:25px; width:auto; position:absolute; } #slider-wrap.active #next{right:0px;} #slider-wrap.active #previous{left:0px;} /*bar*/ #pagination-wrap{ min-width:20px; margin-top:230px; margin-left: auto; margin-right: auto; height:15px; position:relative; text-align:center; } #pagination-wrap ul { width:100%; } #pagination-wrap ul li{ margin: 0 4px; display: inline-block; width:5px; height:5px; border-radius:50%; background:#fff; opacity:0.5; position:relative; top:0; } #pagination-wrap ul li.active{ width:12px; height:12px; top:3px; opacity:1; box-shadow:rgba(0,0,0,0.1) 1px 1px 0px; } /*Header h1, h2{text-shadow:none; text-align:center;} h1{ color: #666; text-transform:uppercase; font-size:36px;} h2{ color: #7f8c8d; font-family: Neucha, Arial, sans serif; font-size:18px; margin-bottom:30px;} */ /*ANIMATION*/ #slider-wrap ul, #pagination-wrap ul li{ -webkit-transition: all 0.3s cubic-bezier(1,.01,.32,1); -moz-transition: all 0.3s cubic-bezier(1,.01,.32,1); -o-transition: all 0.3s cubic-bezier(1,.01,.32,1); -ms-transition: all 0.3s cubic-bezier(1,.01,.32,1); transition: all 0.3s cubic-bezier(1,.01,.32,1); } /* CONTACT FORM ========================================================== */ .contactform {width:100%; overflow:hidden;} .contactform p {overflow:hidden;} /*.contactform label {width:5em;display:block; padding-right:10px;float:left;line-height:50px;text-align:right;color:#e58c24;}*/ .contactform label {width:5em;display:block; padding-right:10px;float:left;line-height:50px;text-align:right;color:#d06060} .contactform input {border:1px solid #ccc;width:79%;color:#d06060;padding:4px;font:inherit;float:left;} .contactform textarea {border:1px solid #ccc;width:79%;color:#d06060;padding:4px;font:inherit;float:left;} /*.contactform input.btn {padding:8px 25px;float:right;background-color:#e58c24;border-radius:2px;-moz-border-radius:2px;border:none;color:white;font-size:20px;font-weight:600;width:auto;cursor:pointer;}*/ .contactform input.btn {padding:8px 25px;float:right;background-color:#d06060;border-radius:2px;-moz-border-radius:2px;border:none;color:white;font-size:20px;font-weight:600;width:auto;cursor:pointer;}