/*!
Theme Name: M&J
Theme URI: http://www.myj.com.pe
Description: Thema creado desde cero para M&J
Author: Antocas
Author URI: http://www.antocas.com
Version: 1.0
*/
@font-face {
  font-family: 'Source Sans Pro Extra';
  src: url("fonts/SourceSansPro-ExtraLight.eot");
  src: url("fonts/SourceSansPro-ExtraLight.eot?#iefix") format("embedded-opentype"), url("fonts/SourceSansPro-ExtraLight.woff2") format("woff2"), url("fonts/SourceSansPro-ExtraLight.woff") format("woff"), url("fonts/SourceSansPro-ExtraLight.ttf") format("truetype"), url("fonts/SourceSansPro-ExtraLight.svg#SourceSansPro-ExtraLight") format("svg");
  font-weight: 200;
  font-style: normal; }

@font-face {
  font-family: 'Source Sans Pro Regular';
  src: url("fonts/SourceSansPro-Regular.eot");
  src: url("fonts/SourceSansPro-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/SourceSansPro-Regular.woff2") format("woff2"), url("fonts/SourceSansPro-Regular.woff") format("woff"), url("fonts/SourceSansPro-Regular.ttf") format("truetype"), url("fonts/SourceSansPro-Regular.svg#SourceSansPro-Regular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Source Sans Pro Semibold';
  src: url("fonts/SourceSansPro-Semibold.eot");
  src: url("fonts/SourceSansPro-Semibold.eot?#iefix") format("embedded-opentype"), url("fonts/SourceSansPro-Semibold.woff2") format("woff2"), url("fonts/SourceSansPro-Semibold.woff") format("woff"), url("fonts/SourceSansPro-Semibold.ttf") format("truetype"), url("fonts/SourceSansPro-Semibold.svg#SourceSansPro-Semibold") format("svg");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'Source Sans Pro Light';
  src: url("fonts/SourceSansPro-Light.eot");
  src: url("fonts/SourceSansPro-Light.eot?#iefix") format("embedded-opentype"), url("fonts/SourceSansPro-Light.woff2") format("woff2"), url("fonts/SourceSansPro-Light.woff") format("woff"), url("fonts/SourceSansPro-Light.ttf") format("truetype"), url("fonts/SourceSansPro-Light.svg#SourceSansPro-Light") format("svg");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Source Sans Pro Bold';
  src: url("fonts/SourceSansPro-Bold.eot");
  src: url("fonts/SourceSansPro-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/SourceSansPro-Bold.woff2") format("woff2"), url("fonts/SourceSansPro-Bold.woff") format("woff"), url("fonts/SourceSansPro-Bold.ttf") format("truetype"), url("fonts/SourceSansPro-Bold.svg#SourceSansPro-Bold") format("svg");
  font-weight: bold;
  font-style: normal; }

img {
  max-width: 100%; }

body {
  font-family: "Source Sans Pro Regular";
  font-size: 16px;
  background-color: #f4fcff; }
  @media (max-width: 750px) {
    body {
      font-size: 13px; } }

.oculto {
  display: none !important; }

.ajaxGif {
  display: block;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 1em; }

h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin: 0;
  font-weight: normal; }

ul, p {
  padding: 0;
  margin: 0; }

a {
  text-decoration: none !important; }

#bar {
  background: #3f6fb7 !important; }

.nopadding {
  padding: 0 !important;
  margin: 0 !important; }

/****************PRELOAD**************/
#loader img {
  display: block;
  margin: 0 auto; }

#loader-9 {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9999999;
  background-color: #fff; }

#loader-9 #loader img {
  margin-top: 15%;
  height: 250px;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-animation: appear 1.4s linear forwards alternate, appear 1.4s 1.5s linear forwards infinite alternate;
  animation: appear 1.4s linear forwards alternate, appear 1.4s 1.5s linear forwards infinite alternate; }

@-webkit-keyframes appear {
  from {
    opacity: 0.1; }
  to {
    opacity: 0.3; }
  to {
    opacity: 6; }
  to {
    opacity: 8; }
  to {
    opacity: 1; } }

@keyframes appear {
  from {
    opacity: 0.1; }
  to {
    opacity: 0.3; }
  to {
    opacity: 6; }
  to {
    opacity: 8; }
  to {
    opacity: 1; } }

@media only screen and (min-width: 768px) and (max-width: 1020px) {
  #loader-9 #loader img {
    margin-top: 35%; } }

@media only screen and (min-width: 425px) and (max-width: 768px) {
  #loader-9 #loader img {
    margin-top: 55%; } }

@media only screen and (min-width: 375px) and (max-width: 425px) {
  #loader-9 #loader img {
    margin-top: 45%; } }

/****************END PRELOAD**************/
.top {
  text-align: right;
  color: #FFF;
  padding: .5em 0;
  font-family: "Source Sans Pro Regular";
  border-bottom: 1px solid #ee3124; }
  .top i {
    color: #ee3124; }
  .top .icon-whatsapp {
    color: #37fd00; }
  .top a {
    color: #FFF;
    margin-right: 1em; }

.header {
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-bottom: 1px solid #ee3124;
  position: absolute;
  width: 100%; }
  @media (max-width: 750px) {
    .header {
      background-color: rgba(0, 0, 0, 0.5); } }
  .header__logo {
    float: left;
    padding: 1em 0; }
    @media (max-width: 750px) {
      .header__logo img {
        width: 150px; } }
  .header__nav .activo {
    color: #ee3124; }
  .header__nav ul li {
    display: inline-block; }
    .header__nav ul li a {
      text-transform: uppercase;
      display: block;
      color: #FFF;
      padding: 1.8em 2em 1.5em 1.5em;
      font-family: "Source Sans Pro Semibold";
      text-shadow: 1px 1px black; }

.mySlides {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: black; }
  .mySlides--bg {
    background-color: rgba(63, 111, 183, 0.2);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-image: url("img/main-bg.gif"); }
    @media (max-width: 750px) {
      .mySlides--bg {
        background-image: none; } }
  .mySlides h1 {
    color: #FFF;
    text-align: center;
    position: absolute;
    top: 30%;
    right: 0;
    left: 0;
    font-family: "Source Sans Pro Semibold";
    font-size: 2.5em;
    text-shadow: 1px 1px 2px #3d4a54;
    z-index: 999; }
    .mySlides h1 b {
      font-size: 1.5em; }
  .mySlides__slidercito {
    height: 100%; }
    .mySlides__slidercito li {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      height: 100%;
      width: 100%; }
    .mySlides__slidercito .cycle-pager {
      display: block; }
    .mySlides__slidercito .cycle-pager {
      text-align: center;
      width: 100%;
      z-index: 500;
      position: absolute;
      bottom: 10%;
      overflow: hidden;
      z-index: 999; }
    .mySlides__slidercito .cycle-pager span {
      font-family: arial;
      font-size: 50px;
      width: 16px;
      height: 16px;
      display: inline-block;
      color: #FFF;
      opacity: .5;
      cursor: pointer;
      margin: 0 .1em; }
    .mySlides__slidercito .cycle-pager span.cycle-pager-active {
      color: #FFF;
      opacity: 1; }

.iconService {
  text-align: center;
  position: absolute;
  bottom: 15%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 500px; }
  @media (max-width: 750px) {
    .iconService {
      bottom: 0;
      width: 100%;
      bottom: 0; } }
  .iconService .icon-list {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr; }
    @media (max-width: 750px) {
      .iconService .icon-list {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr; } }
  .iconService__icon {
    color: #FFF !important;
    font-weight: normal !important;
    text-transform: uppercase;
    font-family: "Source Sans Pro Semibold"; }
    .iconService__icon i {
      font-size: 2.5em;
      color: #FFF;
      display: block;
      width: 100px;
      height: 100px;
      border-top: 1px solid #ee3124;
      border-bottom: 1px solid #ee3124;
      line-height: 2.9;
      margin: 0 auto;
      margin-bottom: .2em;
      -webkit-transition: all ease .5s;
      -o-transition: all ease .5s;
      transition: all ease .5s; }
    .iconService__icon h4 {
      text-shadow: 1px 1px 2px #3d4a54; }
    .iconService__icon:hover i {
      color: red;
      -webkit-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
      transform: translateY(-10px); }

.parrafo {
  font-size: 1.1em;
  font-weight: 100; }

table {
  width: 100%;
  margin-bottom: 3em; }
  table td {
    border-right: 1px solid red; }
    table td:last-child {
      border: none; }

.ul-list {
  text-align: left; }
  .ul-list li {
    padding: .3em 1em;
    list-style: disclosure-closed;
    text-align: left;
    text-shadow: 0px 1px 2px white; }

.wrap-tabs {
  margin: 0 auto; }
  .wrap-tabs h3 {
    text-align: left; }

.btn {
  display: block;
  color: #ee3124;
  text-transform: uppercase;
  text-align: center;
  padding: 1em;
  border-bottom: 4px solid #ee3124;
  max-width: 240px;
  margin: 2em auto; }
  .btn:hover {
    border-bottom: 4px solid #3f6fb7; }

.banner {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
  z-index: -1;
  -webkit-clip-path: polygon(0 0, 100% 0, 95% 94%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 95% 94%, 0 100%); }
  .banner--colors {
    background: -webkit-linear-gradient(45deg, rgba(44, 66, 110, 0.5) 0%, rgba(166, 43, 47, 0.6) 100%);
    background: -o-linear-gradient(45deg, rgba(44, 66, 110, 0.5) 0%, rgba(166, 43, 47, 0.6) 100%);
    background: linear-gradient(45deg, rgba(44, 66, 110, 0.5) 0%, rgba(166, 43, 47, 0.6) 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1; }
  .banner--nosotros {
    background-image: url("img/nosotros.jpg"); }
  .banner--servicios {
    background-image: url("img/servicios.jpg"); }
  .banner--obras {
    background-image: url("img/obras.jpg"); }
  .banner--contact {
    background-image: url("img/contacto.jpg"); }
  .banner h1 {
    text-align: center;
    padding: 7em 0 3em 0;
    color: #FFF;
    font-family: "Source Sans Pro Bold";
    text-shadow: 0 1px 5px #113e81;
    letter-spacing: 4px; }
    @media (max-width: 750px) {
      .banner h1 {
        padding: 1em 1em;
        font-size: 1.5em; } }
  .banner--category i {
    font-size: 4em;
    display: block;
    text-align: center;
    color: #FFF;
    padding-top: 3em;
    text-shadow: 0 1px 5px #113e81; }
  .banner--category h1 {
    padding: 0 0 1em 0; }

.items {
  width: 700px;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  color: #FFF; }
  .items .bgBlue {
    background-color: rgba(63, 111, 183, 0.6); }
  .items .bgRed {
    background-color: rgba(238, 49, 36, 0.4); }
  .items h4 {
    text-transform: uppercase;
    font-family: "Source Sans Pro Semibold"; }
  .items a {
    font-family: "Source Sans Pro Light";
    color: #FFF;
    line-height: 1.4; }
  .items span {
    font-family: "Source Sans Pro Light";
    font-size: .79em;
    float: right;
    margin-top: .8em; }

.titleLine {
  display: table;
  font-family: "Source Sans Pro Regular";
  color: #3f6fb7;
  text-transform: uppercase;
  margin: 0 auto;
  margin-top: 4em;
  margin-bottom: 2em;
  text-align: center; }
  .titleLine:before, .titleLine:after {
    border-top: 1px solid #ee3124;
    content: '';
    display: table-cell;
    position: relative;
    top: 0.8em;
    width: 20%; }
  .titleLine:before {
    right: 1.5%; }
  .titleLine:after {
    left: 1.5%; }
  .titleLine--left {
    margin: 1em 0; }

.conocenos:before {
  content: 'Pttank';
  position: absolute;
  left: 0;
  font-size: 22em;
  color: #e8f7ff;
  z-index: -1; }
  @media (max-width: 750px) {
    .conocenos:before {
      font-size: 6em; } }

.conocenos > p {
  margin-top: 2em;
  text-align: justify;
  line-height: 1.6; }

.conocenos .figure-servicios {
  border: none; }

.conocenos h3 {
  margin-top: 2rem; }

.conocenos p {
  margin: revert !important; }

.conocenos ul {
  padding: revert !important; }

.conocenos figure {
  border-top: 1px solid #ee3124;
  border-bottom: 1px solid #ee3124; }
  .conocenos figure img {
    padding: 1.5em;
    -webkit-clip-path: polygon(0 0, 100% 0%, 81% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0%, 81% 100%, 0 100%); }

hr {
  border-top: 1px solid #dbdbdb;
  border-bottom: 1px solid #fff; }

.servicios .iconService {
  position: static; }
  .servicios .iconService h4 {
    margin-bottom: 3.5em;
    color: #3f6fb7;
    text-shadow: none; }

.servicios figure {
  margin-top: 3em;
  text-align: center; }

.obras__item {
  border: 1px solid #ee3124;
  position: relative;
  margin-bottom: 4em; }
  .obras__item--img {
    background-image: url("img/obras-thumbnail.jpg");
    background-repeat: no-repeat;
    height: 12em;
    background-size: cover; }
  .obras__item--title {
    display: block;
    font-family: "Source Sans Pro Semibold";
    color: #3f6fb7;
    padding: 1em 1em 1.5em 1em;
    text-align: center; }
  .obras__item--link {
    display: block;
    border: 1px solid #ee3124;
    color: #ee3124;
    padding: .4em;
    background-color: #FFF;
    margin: 0 auto;
    width: 150px;
    text-align: center;
    margin-bottom: -20px; }
    .obras__item--link:hover {
      text-decoration: none;
      background-color: #ee3124;
      color: #FFF; }

.obras__article {
  border: 1px solid #ee3124;
  padding: 2em 4em;
  margin-bottom: 2em; }
  .obras__article--h3 {
    color: #3f6fb7;
    text-transform: uppercase;
    font-family: "Source Sans Pro Bold";
    margin: .5em 0 1.2em 0; }
  .obras__article ul li {
    list-style: none;
    line-height: 1.6; }
    .obras__article ul li b {
      text-transform: uppercase; }

.clientes__logo {
  border: 1px solid red;
  height: 100px;
  margin: 0 auto;
  text-align: center;
  line-height: 80px; }

.contacto h4 {
  color: #3f6fb7;
  font-size: 1.2em; }

.contacto__book {
  margin-bottom: 1.5em; }

.contacto__boxform {
  height: auto;
  overflow: hidden;
  padding: 2em;
  text-align: left; }
  .contacto__boxform img {
    text-align: center;
    display: block;
    margin: auto; }
  .contacto__boxform h3 {
    color: #3f6fb7; }
  .contacto__boxform h2 {
    text-align: center;
    margin-bottom: 1.5em; }

.contacto__form input, .contacto__form button, .contacto__form select, .contacto__form textarea {
  width: 100%;
  line-height: 2.5;
  padding-left: 1em;
  border: 0;
  border-bottom: 1px solid #3f6fb7;
  margin-bottom: 1em; }

.contacto__form select {
  background-color: transparent;
  padding: 1em; }

.contacto__form button {
  background-color: #3f6fb7;
  color: #FFF; }

.tabs__links, .tabs__contents {
  width: 80%;
  margin: auto; }
  @media (max-width: 750px) {
    .tabs__links, .tabs__contents {
      width: 100%; } }

.tabs__links {
  display: table;
  position: relative;
  text-align: center;
  top: 1px; }
  .tabs__links a {
    display: inline-block;
    line-height: 3;
    background-color: #FFF;
    padding: 0 1em;
    text-decoration: none;
    margin-right: -3px;
    border: 1px solid #ee3124;
    border-right: none;
    border-bottom-color: #FFF;
    position: relative;
    color: #3f6fb7; }
    .tabs__links a:last-child {
      border-right: 1px solid #ee3124; }
    .tabs__links a.active {
      z-index: 100; }
    @media (max-width: 750px) {
      .tabs__links a {
        border: 1px solid #ee3124; } }

.tabs__contents {
  position: relative; }
  .tabs__contents__item {
    background-color: #FFF;
    padding: 1em;
    border: 1px solid #ee3124;
    top: 0;
    left: 0;
    display: none; }
    .tabs__contents__item.active {
      display: block; }

#map-canvas {
  width: 100%;
  height: 500px; }

footer {
  background-image: url("img/footer.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  padding-top: 20em; }
  footer p {
    text-align: right;
    color: #FFF;
    font-family: "Source Sans Pro Light";
    padding: .5em 0 1.5em 0; }
  footer a {
    color: #FFF;
    font-weight: bold; }

@media screen and (max-width: 768px) {
  .items {
    display: none; }
  .header {
    position: static; }
  .mySlides h1 {
    font-size: 1em; }
  .iconService {
    margin-top: 2em; }
    .iconService__icon {
      display: block;
      margin-bottom: 2em; } }

@media screen and (max-width: 769px) {
  .header__nav {
    display: none; }
    .header__nav ul li {
      width: 100%; }
      .header__nav ul li a {
        text-align: center; }
  .header__movil {
    display: block !important;
    float: right;
    color: #FFF;
    font-size: 1.8em;
    color: #ee3124;
    text-shadow: 1px 1px 8px #FFF;
    padding: .9em .2em 0 0;
    cursor: pointer; } }