@font-face { font-family: 'lato_regular'; src: url('../fonts/lato-regular.eot'); src: url('../fonts/lato-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/lato-regular.woff') format('woff'), url('../fonts/lato-regular.ttf') format('truetype'), url('../fonts/lato-regular.svg#LatoRegular') format('svg'); font-weight: normal; font-style: normal; } /*-- ESTILOS GLOBALES --*/ *{ margin: 0; padding: 0; box-sizing: border-box; font-family: "lato_regular", sans-serif; } body { background: white; font-weight: 300; -webkit-font-smoothing: antialiased; color: #888888; } a { text-decoration: none; } h1 { font-size: 30px; line-height: 1.8; text-transform: uppercase; } ul { list-style: outside none none; margin: 0; padding: 0; } p { margin-bottom: 20px; font-size: 17px; line-height: 1.5; } /*-- ESTILOS PARA EL HEADER --*/ .row{ width: 100%; max-width: 940px; margin: 0 auto; position: relative; padding: 0; } .main_header{ color: #fff; z-index: 999; position: fixed; max-height: 50px; width: 100%; margin-bottom: 10px; -webkit-transition: all 0.5s; transition: all 0.5s; font-family: sans-serif; padding: 8px 20px 0 20px; } .main_header a{ color:#fff; } .logo { width: 80px; height: 40px; font-size: 32px; color: #fff; text-transform: uppercase; float: left; display: block; margin-top: 0; line-height: 1; margin-bottom: 10px; background: url('../img/logo.png') no-repeat; } .logoblack { width: 80px; height: 40px; font-size: 32px; color: #fff; text-transform: uppercase; float: left; display: block; margin-top: 0; line-height: 1; margin-bottom: 10px; background: url('../img/logoblack.png') no-repeat; } .sticky { background-color: rgba(255, 255, 255, 0.93); opacity: 1; top: 0px; border-bottom: 1px solid gainsboro; -webkit-transition: all 0.5s; transition: all 0.5s; } .sticky a{ color:#888888; } .icon{ display: none; cursor: pointer; position: absolute; right: 22px; top: 16px; } .imageswidth{ width: 80%; } .imageswidth40{ width: 40%; } .parallax-overlay { position: absolute; z-index: 0; opacity: 0.5; left: 0; top: 0; margin: 0 auto; width: 100%; height: 100%; background-image: url('../img/overlay-pattern.png'); background-repeat: repeat; } .open-nav { max-height: 400px !important; } nav{ float: right; width: 80%; margin-top:5px; } nav ul{ list-style: none; overflow: hidden; text-align: right; float: right; border-bottom: 1px solid rgba(207,207,207, .4); } nav ul li{ display: inline-block; margin-left: 15px; line-height: 1.5; margin-bottom: 12px; } nav ul li a{ text-transform: uppercase; font-size: 12px; padding: 5px 10px; border-radius: 10px; } nav ul li a:hover, nav ul li a.active{ color: #fff; text-transform: uppercase; font-size: 12px; background: #00c2a9; } .rowcont { width: 100%; max-width: 1080px; margin: 0 auto; position: relative; padding: 0 1.3%; } .content { margin: 0 auto; padding: 20px 10px; } form{ margin-top:20px; padding:20px; border:1px solid rgba(0,0,0,0.1); -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; -webkit-box-shadow:0 3px 5px rgba(0,0,0,0.1); -moz-box-shadow:0 3px 5px rgba(0,0,0,0.1); -ms-box-shadow:0 3px 5px rgba(0,0,0,0.1); box-shadow:0 3px 5px rgba(0,0,0,0.1); } .hero { position: relative; background: url(../img/bg-1.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; text-align: center; color: #fff; padding-top: 110px; min-height: 500px; letter-spacing: 2px; border:1px solid rgba(0,0,0,0.1); -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; -webkit-box-shadow:0 3px 5px rgba(0,0,0,0.1); -moz-box-shadow:0 3px 5px rgba(0,0,0,0.1); -ms-box-shadow:0 3px 5px rgba(0,0,0,0.1); box-shadow:0 3px 5px rgba(0,0,0,0.1); } .hero h1 { font-size: 50px; line-height: 1.3; opacity: 1; position: relative; } .hero h1 span { font-size: 25px; color: #e8f380; border-bottom: 2px solid #e8f380; padding-bottom: 12px; line-height: 3; position: relative; } .social_fb, .social_tw, .social_ins{ color: #fff; border-radius: 15px; height: 40px; border: solid #fff 2px; margin-top: 40px; padding: 10px; position: relative; display: inline-block; } .social_fb:hover, .social_tw:hover, .social_ins:hover{ background: #fff; } .social_fb:hover{ background: #fff; color: #0f6698; } .social_tw:hover{ background: #fff; color: #21c5ff; } .social_ins:hover{ background: #fff; color: #ec5891; } .separator{ height: 30px; width: 100%; } /* ----------------------------- ESTILOS DE FOOTER -------------------------------*/ .footer-section { background: #2d3038; padding: 20px 0; border-top: 1px solid #ddd; text-align: center; } .copy-right-info{ display: block; } .copy-right-info p { color: #fff; font-size: 13px; font-weight: 400; letter-spacing: 1px; margin-bottom: 0; line-height: 3.1; } .copy-right-info a { color: #00c9b1; } .quick-link { overflow: hidden; text-align: center; line-height: 3; } .quick-link li { display: inline; } .quick-link li + li { margin-left: 15px; } .quick-link li a { display: inline-block; color: #232323; font-weight: 200; text-transform: capitalize; line-height: 1; } .quick-link li a:hover { color: #00c9b1; } .footer-single-widget{ display: block; margin: 0 auto; } .footer-single-widget .social-menu { margin: 0 auto; top: 1px; display: block; padding: 0 auto; } .order-2{ display: block; margin: 0 auto; } .social-menu{ display: block; } .social-menu li { display: inline-block; border-right: 1px solid #606469; } .social-menu li+li { margin-left: 2px; } .social-menu li a { display: block; width: 40px; height: 20px; line-height: 20px; border-radius: 2px; text-align: center; font-size: 16px; color: #00c2a9; transition: all 0.3s ease 0s; } .social-menu li a i { transition: all 0.3s ease 0s; } .social-menu li a:hover { color: #fff; } .social-menu li:last-child{ border-right: none; } .about-content .social-menu { margin-bottom: 30px; width: 100%; float: left; } .about-content .social-menu li+li { margin-left: 15px; } .line-separator{ width: 90%; margin: 0 auto; height: 25px; border-top: 1px solid #606469; } /* blog post styles */ .column-left{ margin-right: 5px; width: 66%; display: inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #eac7a3; margin-bottom: 30px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); } .post_blog{ padding: 8px; } .title_post{ display: inline; } .post_img{ width: 100%; height: auto; } .post_date{ margin-bottom: 4px; margin-right: 10px; width: 50px; display: inline-block; text-align: center; padding: 2px; border-right: solid 1px #000; float: left; } .post_date p{ color: #000; font-size: 11px; margin: 0; padding: 0; line-height: 10px; } .post_date span{ color: #000; font-weight: bold; font-size: 18px; margin: 0; padding: 0; } .post_tags{ margin: 2px auto; text-align: right; } .post_tags p{ color: #888888; font-size: 14px; } .line80{ border: 1px solid #EDEDED; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); width: 95%; margin: 10px auto; } .sidebar-right{ display: inline-block; width: 32%; float:right; } .box_sidebar{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin-bottom: 30px; border-bottom: 1px solid #eac7a3; padding-bottom: 30px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); } /* Styles media queries */ @media(min-width:767px) and (max-width:979px){ .rowcont{ width: 100%; max-width: 740px; float: left; } .span3{width:200px;} } @media (max-width:767px){ .main_header { padding-top: 5px; overflow: hidden; height: 600px; background-color: rgba(255, 255, 255, 0.0); opacity: 1; top: 0px; margin-bottom: 0px; } nav{ background-color: rgba(255, 255, 255, 0.75); } .rowcont{ width: 100%; max-width: 740px; margin: 0 auto; } .span9{ margin: 0 auto; width: 90%; } .main_header a{ color:#888888; } .sticky { height: 700px; overflow: hidden; background: rgba(255, 255, 255, 0.93); } .logo { float: none; font-size: 25px; padding-top: 5px; } nav { width: 100%; } nav ul { padding-top: 10px; margin-bottom: 22px; float: left; text-align: center; width: 100%; } nav ul li { width: 100%; padding: 7px 0; margin: 0; } .hero h1 { font-size: 30px; line-height: 1.3; } .hero h1 span { font-size: 16px; color: #e8f380; border-bottom: 2px solid #e8f380; padding-bottom: 12px; line-height: 3; } .icon{ cursor: pointer; display: block; } .hamburgerw{ width: 30px; height: 4px; background: #fff; position: absolute; top: 50%; left: 50%; border-radius: 2px; transform: translate(-50%,-50%); box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: 0.5s; } .hamburgerw:before,.hamburgerw:after{ content: ''; position: absolute; border-radius: 2px; width: 30px; height: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: .5s; } .hamburgerw:before{ top: -9px; } .hamburgerw:after{ top: 9px; } .icon.active .hamburgerw{ background: rgba(0,0,0,0); box-shadow: 0 2px 5px rgba(0,0,0,0); } .icon.active .hamburgerw:before{ top: 0; transform: rotate(45deg); } .icon.active .hamburgerw:after{ top: 0; transform: rotate(135deg); } .hamburger{ width: 30px; height: 4px; background: #94999c; position: absolute; top: 50%; left: 50%; border-radius: 2px; transform: translate(-50%,-50%); box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: 0.5s; } .hamburger:before,.hamburger:after{ content: ''; position: absolute; border-radius: 2px; width: 30px; height: 4px; background: #94999c; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: .5s; } .hamburger:before{ top: -9px; } .hamburger:after{ top: 9px; } .icon.active .hamburger{ background: rgba(0,0,0,0); box-shadow: 0 2px 5px rgba(0,0,0,0); } .icon.active .hamburger:before{ top: 0; transform: rotate(45deg); } .icon.active .hamburger:after{ top: 0; transform: rotate(135deg); } .imageswidth{ width: 100%; margin: 0 auto; } .column-left{ margin: 0 auto; width: 92%; /*border: 1px solid #000; display: inline-block;*/ display: block; } .sidebar-right{ display: block; width: 92%; margin: 0 auto; float: inherit; } .span3{ display: none; } } @media(max-width:479px){ .column-left{ margin: 0 auto; width: 98%; /*border: 1px solid #000; display: inline-block;*/ display: block; } .sidebar-right{ display: block; width: 98%; /*border: 1px solid #000;*/ margin: 0 auto; float: inherit; } .footer-section{ display: block; margin: 0 auto; } }