html, body {height: 100%;font-family: 'Raleway', sans-serif;}
body.change-overflow {overflow:hidden;}
* {outline:0;}
a:hover, a:active, a:focus {text-decoration: none;}
a, button {
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
}
.mobile-visible {display:none;}
.pad-none {padding:0;}
.full {width:100%;}
.table-content {display: table; width: 100%; height: 100%;}
.table-cell-content {display: table-cell; vertical-align: middle;}
.animation-one {-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;-o-transition: all .4s ease-in-out;transition: all .4s ease-in-out; }
.animation-two {-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
.fl-right {float:right;}
.owl-dots {display:none !important;}
.owl-carousel {border: 1px solid #bb9642;border-radius: 65px; padding: 20px 50px; }
.owl-prev {color: #fff !important;font-size: 14px !important;margin: 0 !important;padding: 0px !important;background: #fff url(../images/left-arrow.jpg) no-repeat !important;width: 42px !important;height: 30px !important;display: block !important;cursor: pointer !important;border-radius: 0 !important;position: absolute !important;left: 0 !important;top: 50% !important;text-indent: -9999px;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);margin-left: -6px !important;}
.owl-next {color: #fff !important;font-size: 14px !important;margin: 0 !important;padding: 0px !important;background: #fff url(../images/right-arrow.jpg) no-repeat !important;width: 42px !important;height: 30px !important;display: block !important;cursor: pointer !important;border-radius: 0 !important;position: absolute !important;right: 0 !important;top: 50% !important;text-indent: -9999px;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);right: -6px !important;}
.border {border-left:1px solid #c2c2c2;border-right:1px solid #c2c2c2;}
.back-to-top {position: fixed;right: 30px;bottom: 30px; z-index: 101;display:none;}
.back-to-top.active {display:block;}
.breadcrumb {margin: 30px 0 0 0 !important;border-radius:0 !important;border-bottom: 1px solid #e5e5e5;background:none;padding-left:0;}
.breadcrumb li a {color: #8e8e8e;font-weight: 700;}
/* HEADER */
header {height: 100px;position: fixed; width: 100%;z-index: 102;top:0;}
header .logo {margin: 40px 55px 0;}
header .head-right {padding: 25px 55px;position: absolute; right: 20px;margin-top: 30px;}
body.page header .head-right {margin-top:10px;}
header .social-head a {font-size: 18px;color: #bb9642;margin:15px;}
header .head-right div {display: inline-block;float:left;}
header .head-menu {font-size:24px;color:#bb9642;cursor:pointer;margin-right: 20px;}
body.page .logo { margin-top: 20px;}
/* PAGE HEADER */
body.page header {background: #FFF;/*position:relative;*/}
body.page section {padding: 0;margin-top: 100px;}
/* WELCOME */
#welcome {overflow: hidden;background: url(../images/welcome.jpg) top center;width: 100%;background-repeat: no-repeat;background-size: cover;height: 100%;position: relative;}
#welcome:after {content:"";width:100%;height:200px;background: url(../images/welcome-bottom.png) center center; display: block; position: absolute; bottom: 0;left: 0;margin-bottom: -75px;}
#welcome .heading {line-height: 57px;font-size:50px;color:#fff;font-weight: 100;position:absolute;top:50%;width:100%;text-align:center;-webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
#welcome .heading strong {font-weight: 900;}
#welcome .mouse {position: absolute; bottom: 130px; left: 50%; margin-left: -17px;cursor:pointer;z-index:99;}
/* SECTION */
section {padding: 20px 0;}
/* ABOUT */
#about {padding: 50px 0 75px;}
#about h1 {font-size:38px;color:#515151;font-weight: 900;text-align:center;text-indent: -9999px;width: 510px;height: 51px;background: url(../images/about_h1.jpg); display: block; margin: 0 auto 20px;}
#about p {text-align:center;font-size:18px;font-weight: 300;color:#515151;}
#about img {margin-top:20px;}
/* WORKS */
#works #filters {list-style-type:none;display: block;width: 495px;margin: 0 auto;padding: 0 0 50px 0;}
#works #filters li {float:left;margin: 0 15px;}
#works #filters li a {font-size:18px;color:#515151;font-weight:700;padding: 7px 20px; border-radius: 20px;border:1px solid #f2836c;}
#works #filters li a.active {color:#fff;background: #f27d6c;background: -moz-linear-gradient(left, #f27d6c 0%, #f2ab6c 100%);background: -webkit-linear-gradient(left, #f27d6c 0%,#f2ab6c 100%);background: linear-gradient(to right, #f27d6c 0%,#f2ab6c 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f27d6c', endColorstr='#f2ab6c',GradientType=1 );}
#works .work {width: 33.33333333%;float:left;position: relative;border: 3px solid #fff;}
#works .work .filter-hover {width:100%;height: 100%;position: absolute;top:0;left:0;background: rgba(23,33,33,0.7); transition: visibility 0.5s, opacity 0.5s linear;visibility: hidden;opacity: 0;}
#works .work .filter-hover .logo img {margin:0 auto;}
#works .work .filter-hover .title {font-size:26px;color:#fff;font-weight: 300;text-align: center;margin: 20px 0;}
#works .work .filter-hover .href a {font-size:22px;color:#fff;font-weight: 700;border: 1px solid #C0983B; padding: 10px 60px; border-radius: 20px;}
#works .work .filter-hover .category {opacity:.7;position: absolute;bottom: 20px;right: 20px; font-size: 22px; color: #fff; font-weight: 700; padding: 7px 45px; border-radius: 22px;}
#works .work .filter-hover .event-cat {background: #21dddf;background: -moz-linear-gradient(left, #21dddf 1%, #5e81e9 100%);background: -webkit-linear-gradient(left, #21dddf 1%,#5e81e9 100%);background: linear-gradient(to right, #21dddf 1%,#5e81e9 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#21dddf', endColorstr='#5e81e9',GradientType=1 );}
#works .work:hover .filter-hover {visibility: visible;
opacity: 1;}
#works .other-project {background: #bb9642;}
#works .other-project a {padding: 30px;font-size:30px;color:#fff;font-weight: 700;display: block;}
#works .other-project a:hover {margin-left: 50px;}
/* REFERENCES HOME */
#references-home {margin:70px 0;}
/* FOOTER */
footer {}
footer .footer-head {background: #e8e9ea;padding: 10px 0;}
footer .footer-column-1 {margin: 65px 0 0;}
footer .footer-column-1 img {margin: 0 auto;}
footer .footer-column-1 .footer-social {margin-top:10px;}
footer .footer-column-1 .footer-social a {color:#5b5858;font-size:18px;margin: 10px;}
footer h2 {color:#5b5858;font-size:24px;font-weight: 700;}
footer p {color:#5b5858;font-size:18px;font-weight: 300;}
footer p.color {color:#947734;font-weight: 700;line-height: 21px;}
footer .footer-column-3 {padding-top: 75px;position: relative;}
footer .footer-column-3 a {font-size: 18px;font-weight: 300; color: #5b5858; border: 1px solid #bb9642; padding: 7px 19px; border-radius: 20px;margin: 10px 20px;display: inline-block;}
footer img.abso {position: absolute;top: -9px;right: 0; height: 233px;}
/* PAGE HEADER */
#page-header {width:100%;height:315px;background: url(../images/page-header.png) top center;position:relative;border:none !important;}
#page-header h1 {position: absolute;width: 100%;text-align: center;font-size: 40px;font-weight: 100;color: #fff;top: 40%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}
#page-header.page-header-contact {background: url(../images/page-header-contact.png) top center;}
/* WE DOING */
#we-doing {padding: 30px 0;}
#we-doing .left-side, #we-doing .right-side {padding: 50px 15px;}
#we-doing .left-side ul {list-style-type:none;margin:0;padding: 0;display: inline-block;}
#we-doing .left-side ul li {font-size:24px;font-weight: 300;color:#898989;text-align: left;}
#we-doing .left-side ul li img {margin-right: 5px;margin-bottom: 5px;}
#we-doing .right-side p {font-size: 20px;font-weight: 300;color: #898989;}
/* MENU OPEN */
#menu-open {overflow: hidden;z-index:100;position: fixed;top: -100%;left: 0;width: 100%;height: 100%;background: #bb9642;background: -moz-linear-gradient(left, #bb9642 0%, #bb9642 100%);background: -webkit-linear-gradient(left, #bb9642 0%,#bb9642 100%);background: linear-gradient(to right, #bb9642 0%,#bb9642 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bb9642', endColorstr='#bb9642',GradientType=1 );}
#menu-open.active {top:0;}
#menu-open ul {list-style-type:none;margin:0;padding: 0;}
#menu-open ul li {margin:10px 0;}
#menu-open ul li ul {display:none;transition: all .2s ease-in-out;}
#menu-open ul li ul li {display:inline-block;margin:10px;}
#menu-open ul li ul li a {display:block;font-size:18px;font-weight:300;}
#menu-open ul li ul li img {display: block;}
#menu-open ul li a {font-size:30px;color:#fff;font-weight: 300;opacity:.5;}
#menu-open ul li a:hover {opacity:1;}
#menu-open ul li.sub-menu:before {content:"+";font-size: 50px;color: #fff;font-weight: 300;margin-left: 200px;position: absolute;margin-top: -15px;}
#menu-open ul li.sub-menu.active:before {content:"-";}
#menu-open .click-op.active {display: block;}
#menu-open nav {z-index: 2; position: relative;}
#menu-open .menu-anim {top: 50%;width: 801px;height: 841px; position: absolute;right: 137px;top: 10%;z-index: 1;}
/* CONTACT */
#contact {padding:30px 0;}
#contact hr {background: #f09f58;display:block;width:40%;height:1px;margin:15px auto}
#contact p {font-size:18px;color:#5b5858;font-weight: 300;}
#contact .contact-form {margin-top:25px;}
#contact .contact-form input {width:49.5%;float:left;font-size: 18px;font-weight: 300;color: #353535;padding: 7px 10px;border-radius: 10px;border: 1px solid #e4e4e4;margin: 0 1% 10px 0;}
#contact .contact-form input:nth-child(even) {margin-right:0;}
#contact .contact-form textarea {height:100px;width:100%;font-size: 18px;font-weight: 300;color: #353535;padding: 7px 10px;border-radius: 10px;border: 1px solid #e4e4e4;margin: 0 1% 10px 0;}
#contact .contact-form button {display: block;width: 100%;background: #bb9642;color: #fff;border: 0;padding: 10px;border-radius: 10px;font-size: 18px;font-weight: 300;}
/* PROJECT DETAILS */
.project-detail {}
.project-detail h1 {margin: 0;margin-top: -50px;position:initial !important; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important;}
.project-detail hr {max-width: 500px;}
.project-detail .category {font-size: 18px;color: #fff;font-weight: 700; padding: 7px 45px;border-radius: 22px;max-width: 230px;text-align: center;margin: 0 auto;opacity: 0.8;}
.project-detail .event-cat {background: #21dddf;background: -moz-linear-gradient(left, #21dddf 1%, #5e81e9 100%);background: -webkit-linear-gradient(left, #21dddf 1%,#5e81e9 100%);background: linear-gradient(to right, #21dddf 1%,#5e81e9 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#21dddf', endColorstr='#5e81e9',GradientType=1 );}
.project-detail .project-nav {margin-top: 20px;}
.project-detail .project-nav a, .project-footer .project-nav a {font-size:16px;color:#fff;margin: 0 20px;padding: 20px 0px;}
.project-detail .project-nav i, .project-footer .project-nav i {margin:0 10px;}
.project-detail .project-nav span, .project-footer .project-nav span {width: 1px;height: 41px;display: inline-block;background: #fff;position: absolute;margin-top: -10px;}
.project-footer .project-nav a {color:#414141;}
.project-footer .project-nav span {background:#414141;}
.project-footer {margin:50px 0;}
.project-footer .project-share span {font-size: 20px;color: #414141;font-weight: 700;border: 1px dashed #ec462e;padding: 10px 20px;display: block;max-width: 200px;border-radius: 20px;margin: 20px auto 15px;}
.project-footer .project-share a {font-size:22px;margin:0 15px;}
.project-footer .project-share a i.fa-facebook {color:#3b5998;}
.project-footer .project-share a i.fa-twitter {color:#00aced;}
.project-footer .project-share a i.fa-google-plus {color:#dd4b39;}
#project-content {padding-top:100px;}
#project-content p {font-size: 24px;color: #3b3b3b;font-weight: 300;}
#project-content img {max-width:100%;margin:40px 0;}
#project-content h2 {font-size:30px;color:#3b3b3b;font-weight: 700;}
#filters {display:none !important;}
.visible_filter #filters {display:block !important;}
/* VIDEO CLASS */
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* REFENCES PAGE */
#references {margin:50px 0;}
#references img {float:left;width:23%;-webkit-filter: grayscale(0%);-moz-filter: grayscale(0%); -o-filter: grayscale(0%);-ms-filter: grayscale(0%);filter: grayscale(0%);-webkit-transition: 2ms ease-out;-moz-transition: 2ms ease-out; -o-transition: 2ms ease-out;transition: 2ms ease-out;-webkit-backface-visibility: hidden;border: 1px solid #e2e2e2;margin: 1%;}
#references img:hover {-moz-filter: grayscale(0%);-o-filter: grayscale(0%);-ms-filter: grayscale(0%);filter: grayscale(0%);}
/* BLOG */
#blog {margin:30px 0;}
#blog h1 {font-size: 18px;font-weight: 700;text-align: center;margin: 15px 0;color: #383838;}
#blog .border-blog {position:relative;}
#blog .border-blog a {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
#blog .masonry-item {border: 1px solid transparent;padding-top: 15px;}
#blog .masonry-item:hover {border: 1px solid #e2e2e2;}
#blog .date-comment {border-top: 1px solid #e2e2e2;padding: 10px 0 0px 5px;}
#blog .blog-content p {font-size: 18px;font-weight: 300;line-height: 30px;}
#blog .blog-image {background: #f7f7f7;margin-top: 20px;}
#blog .blog-image img {max-height: 400px;margin: 0 auto;}
#blog .blog-post h1 {font-size: 28px;text-align: left;font-weight: 800;padding-top: 10px;}
#blog .post-meta { border-bottom: 1px solid #e5e5e5;padding-bottom: 20px;margin-bottom: 20px;}
#blog .post-date {margin-left: 20px;font-size:16px;}
#blog .post-author {font-size:16px;}
#blog .blog-comment {font-size:16px;float:right;}
#blog .post-author i, #blog .post-date i, #blog .blog-comment i {font-size: 16px;position: relative;padding-right: 5px;}
#blog .post-content p {font-size: 18px;font-weight: 300;}
.blog-sidebar {}
.blog-sidebar ul {list-style-type:none;margin:0;padding:0;}
.blog-sidebar ul li {position:relative;overflow: hidden;padding-bottom: 20px;border-bottom: 1px solid #efefef;margin-bottom: 20px;}
.blog-sidebar ul li a {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 99;}
.blog-sidebar ul li:last-child {border:none;}
.blog-sidebar ul li .post-thumb {border-radius: 100%;float:left;background-size: cover;background-position: 50% 50%;width: 75px;height: 75px;}
.blog-sidebar h3 {font-weight: 700;color: #383838;border-bottom: 1px solid #e5e5e5;padding-bottom: 20px;margin-bottom: 20px;}
.blog-sidebar {}
.blog-sidebar span {font-size: 16px;font-weight: 700;margin-left: 90px;position: relative;top: 17px;display: block;}
.blog-sidebar span.sidebar-post-date, .blog-sidebar span.sidebar-post-date i {font-weight: 300;font-size: 14px;}
.blog-sidebar span.sidebar-post-date i {margin-right:5px;}
form.form-reply {}
form.form-reply button {margin-top: 10px;border: 0;width: 100%;background: #ec462e; color: #fff;font-size: 22px;font-weight: 700; padding: 10px;text-transform: uppercase;}
form.form-reply input, form.form-reply textarea {width: 100%;margin-bottom: 1px;padding: 10px;color: #000;font-size:16px;font-weight: 300;background: #fcfcfc;border: 0;-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15);box-shadow: 0 1px 1px rgba(0,0,0,0.15);}
/* RESPONSIVE */
@media only screen and (max-width: 600px) {
header .logo {margin:0 !important;padding:20px;}
header .head-right div {display: block;float: none;margin-bottom: 15px;margin-bottom:0;}
header .head-right .nav-trigger {float:right;margin-top: 5px;}
header .head-right {padding:0;margin-top: 20px !important;right: 10px;margin-bottom:0;}
#welcome .heading {font-size:25px;}
#about img {margin:0 auto;}
#about h1 {font-size:25px;text-indent: inherit;width:auto;height:auto;background: none;margin:10px 0 20px;display:inherit;}
#about p {font-size:16px;}
#works #filters {width:auto;}
#works #filters li a {font-size:16px;padding: 7px 15px;}
#works #filters li {margin: 0 5px 0 0;}
#works .work {width: 100%;}
#works .work .filter-hover .category {display:none;}
#works .conts .logo {width: 80%;margin: 5px auto;}
#works .work .filter-hover .title {font-size:14px;margin: 10px 0;}
#works .work .filter-hover .href span {font-size:14px;padding: 5px 15px;}
footer .border {text-align: center;border: 0;border-top: 1px solid #c2c2c2; border-bottom: 1px solid #c2c2c2;margin: 20px 0;}
footer .footer-column-1 {margin: 20px 0;}
footer img.abso {display:none;}
footer .footer-column-3 {padding-top: 0;margin: 20px 0;text-align: center;}
#works .other-project a {font-size:20px;}
#works .other-project {padding: 20px;}
.mobile-hidden {display:none;}
.mobile-visible {display:block;}
#page-header h1 {padding:0 20px;font-size:24px;margin-top: -8px;}
.project-detail .category {max-width:170px;}
#project-content {padding-top: 30px;}
#project-content p {font-size:18px;}
.project-footer .project-share span {font-size:14px;}
.social-head {display:none !important;}
header {height: 75px;}
body.page section {margin-top:75px;}
#works .other-project a {padding:0;}
#works .work .filter-hover .href a {font-size: 14px;padding: 10px 20px;}
.project-detail .project-nav a, .project-footer .project-nav a {font-size: 14px;margin: 0 10px;}
#we-doing .left-side, #we-doing .right-side {padding: 15px 30px;}
#we-doing .left-side ul li {font-size: 18px;}
#we-doing .right-side p {font-size: 14px;text-align: justify;}
}
@keyframes changewidth {
from {
margin-left: 0px;
}
to {
margin-left: 50px;
}
}
.other-project a {
animation-duration: 0.8s;
animation-name: changewidth;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* COMMENTS CONTAINER */
.comments-container h1 {
font-size: 36px;
color: #283035;
font-weight: 400;
}
.comments-container h1 a {
font-size: 18px;
font-weight: 700;
}
.comments-list {
margin: 0;
padding: 0;
margin-top: 30px;
position: relative;
}
/**
* Lineas / Detalles
-----------------------*/
.comments-list:before {
content: '';
width: 2px;
height: 100%;
background: #c7cacb;
position: absolute;
left: 32px;
top: 0;
}
.reply-list:before, .reply-list:after {display: none;}
.reply-list li:before {
content: '';
width: 60px;
height: 2px;
background: #c7cacb;
position: absolute;
top: 25px;
left: -55px;
}
.comments-list li {
margin-bottom: 15px;
display: block;
position: relative;
}
.comments-list li:after {
content: '';
display: block;
clear: both;
height: 0;
width: 0;
}
.reply-list {
padding-left: 88px;
clear: both;
margin-top: 15px;
}
/**
* Avatar
---------------------------*/
.comments-list .comment-avatar {
width: 65px;
height: 65px;
position: relative;
z-index: 99;
float: left;
border: 3px solid #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
overflow: hidden;
}
.comments-list .comment-avatar img {
width: 100%;
height: 100%;
}
.reply-list .comment-avatar {
width: 50px;
height: 50px;
}
.comment-main-level:after {
content: '';
width: 0;
height: 0;
display: block;
clear: both;
}
/**
* Caja del Comentario
---------------------------*/
.comments-list .comment-box {
margin-left: 85px;
position: relative;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
box-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
.comments-list .comment-box:before, .comments-list .comment-box:after {
content: '';
height: 0;
width: 0;
position: absolute;
display: block;
border-width: 10px 12px 10px 0;
border-style: solid;
border-color: transparent #FCFCFC;
top: 8px;
left: -11px;
}
.comments-list .comment-box:before {
border-width: 11px 13px 11px 0;
border-color: transparent rgba(0,0,0,0.05);
left: -12px;
}
.reply-list .comment-box {
width: 610px;
}
.comment-box .comment-head {
background: #FCFCFC;
padding: 10px 12px;
border-bottom: 1px solid #E5E5E5;
overflow: hidden;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.comment-box .comment-head i {
margin-left: 14px;
position: relative;
top: 2px;
color: #A6A6A6;
cursor: pointer;
-webkit-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.comment-box .comment-head i:hover {
color: #03658c;
}
.comment-box .comment-name {
color: #283035;
font-size: 14px;
font-weight: 700;
float: left;
margin-right: 10px;
}
.comment-box .comment-name a {
color: #283035;
}
.comment-box .comment-head span {
float: left;
color: #999;
font-size: 13px;
position: relative;
top: 8px;
}
.comment-box .comment-content {
background: #FFF;
padding: 12px;
font-size: 15px;
color: #595959;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.comment-box .comment-name.by-author, .comment-box .comment-name.by-author a {color: #03658c;}
.comment-box .comment-name.by-author:after {
content: 'autor';
background: #03658c;
color: #FFF;
font-size: 12px;
padding: 3px 5px;
font-weight: 700;
margin-left: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}