.my-font {
    font-family: 'PT Serif', serif;
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-50 {
    margin-top: 50px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-50 {
    margin-bottom: 50px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-30 {
    padding-top: 30px;
}

.pt-40 {
    padding-top: 40px;
}

.pt-50 {
    padding-top: 50px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-50 {
    padding-bottom: 50px;
}

/*======= NAV =======*/

.nav-holder {
    padding: 15px 0px 5px 0px;
}

section div p.text-justify {
    text-align: justify;
}


@media (max-width: 541px) {
    .swiper-slide {
        width: 100% !important;
        background-size: cover !important;
        background-position: center;
    }

    .owl-carousel .item .imagen {
        height: 35em !important;
    }

}

/*====== PROJECTS =====*/
@media only screen and (min-width: 541px) {
    .grid-small-pad .grid-item-holder {
        padding: 10px 20px 10px 20px;
    }

    .porta-largo {
        max-height: 280px;
        max-width: 215px;
        overflow: hidden;
    }

    .porta-ancho {
        max-height: 100px;
        max-width: 215px;

        overflow: hidden;
    }

    .porta-cuadrado {
        max-height: 100px;
        max-width: 215px;

        overflow: hidden;
    }
}

@media only screen and (min-width: 600px) {

    .porta-largo {
        max-height: 319px;
        max-width: 245px;
        overflow: hidden;
    }

    .porta-ancho {
        max-height: 120px;
        max-width: 245px;

        overflow: hidden;
    }

    .porta-cuadrado {
        max-height: 119px;
        max-width: 245px;

        overflow: hidden;
    }

}

@media only screen and (min-width: 650px) {

    .porta-largo {
        max-height: 351px;
        max-width: 270px;
        overflow: hidden;
    }

    .porta-ancho {
        max-height: 137px;
        max-width: 270px;
        overflow: hidden;
    }

    .porta-cuadrado {
        max-height: 138px;
        max-width: 270px;
        overflow: hidden;
    }

}

@media only screen and (min-width: 700px) {

    .porta-largo {
        max-height: 384px;
        max-width: 295px;
        overflow: hidden;
    }

    .porta-ancho {
        max-height: 153px;
        max-width: 295px;
        overflow: hidden;
    }

    .porta-cuadrado {
        max-height: 154px;
        max-width: 295px;
        overflow: hidden;
    }
}

@media only screen and (min-width: 768px) {
    .grid-small-pad .grid-item-holder {
        padding: 20px 20px 20px 20px;
    }

    .porta-largo {
        max-height: 402px;
        max-width: 309px;
        overflow: hidden;
    }

    .porta-ancho {
        max-height: 152px;
        max-width: 309px;
        overflow: hidden;
    }

    .porta-cuadrado {
        max-height: 152px;
        max-width: 309px;
        overflow: hidden;
    }
}

@media only screen and (min-width: 850px) {
    .grid-small-pad .grid-item-holder {
        padding: 20px 20px 20px 20px;
    }

    .porta-largo {
        max-width: 370px;
        overflow: hidden;
    }

    .porta-ancho {
        max-width: 370px;
        overflow: hidden;
    }

    .porta-cuadrado {
        max-width: 370px;
        overflow: hidden;
    }

}

@media only screen and (min-width: 1000px) {

    .porta-largo {
        max-height: 579px;

        max-width: 445px;
        overflow: hidden;
    }

    .porta-ancho {
        max-height: 240px;

        max-width: 445px;
        overflow: hidden;
    }

    .porta-cuadrado {
        max-height: 240px;

        max-width: 445px;
        overflow: hidden;
    }

}

@media only screen and (min-width: 1037px) {
    .porta-largo {
        max-height: 358px;
        max-width: 295px;
        overflow: hidden;
    }

    .porta-ancho {
        max-height: 358px;
        max-width: 631px;
        overflow: hidden;
    }

    .porta-cuadrado {
        max-height: 178px;
        max-width: 295px;
        overflow: hidden;
    }


}

@media only screen and (min-width: 1366px) {
    .porta-largo {
        max-height: 490px;
        max-width: 405px;
        overflow: hidden;
    }

    .porta-ancho {
        max-height: 490px;
        max-width: 851px;
        overflow: hidden;
    }

    .porta-cuadrado {
        max-height: 245px;
        max-width: 405px;
        overflow: hidden;
    }
}


@media only screen and (min-width: 1440px) {
    .porta-largo {
        max-height: 507px;
        max-width: 390px;
        overflow: hidden;
    }

    .porta-ancho {
        max-height: 507px;
        max-width: 860px;
        overflow: hidden;
    }

    .porta-cuadrado {
        max-height: 236px;
        max-width: 390px;
        overflow: hidden;
    }

    .grid-small-pad .grid-item-holder {
        padding: 30px 40px 30px 40px;
    }
}

@media only screen and (min-width: 1600px) {
    .porta-largo {
        max-height: 576px;
        max-width: 443px;
        overflow: hidden;
    }

    .porta-ancho {
        max-height: 576px;
        max-width: 967px;
        overflow: hidden;
    }

    .porta-cuadrado {
        max-height: 268px;
        max-width: 443px;
        overflow: hidden;
    }

}

@media only screen and (min-width: 1750px) {
    .porta-largo {
        max-height: 645px;
        max-width: 493px;
        overflow: hidden;
    }

    .porta-ancho {
        max-height: 645px;
        max-width: 1067px;
        overflow: hidden;
    }

    .porta-cuadrado {
        max-height: 298px;
        max-width: 493px;
        overflow: hidden;
    }

}

@media only screen and (min-width: 1920px) {
    .porta-largo {
        max-height: 712px;
        max-width: 550px;
        overflow: hidden;
    }

    .porta-ancho {
        max-height: 714px;
        max-width: 1180px;
        overflow: hidden;
    }

    .porta-cuadrado {
        max-height: 332px;
        max-width: 550px;
        overflow: hidden;
    }

    .grid-small-pad .grid-item-holder {
        padding: 30px 40px 30px 40px;
    }
}

@media only screen and (min-width: 2048px) {
    .porta-largo {
        max-height: 765px;
        max-width: 593px;
        overflow: hidden;
    }

    .porta-ancho {
        max-height: 766px;
        max-width: 1266px;
        overflow: hidden;
    }

    .porta-cuadrado {
        max-height: 359px;
        max-width: 593px;
        overflow: hidden;
    }

    .grid-small-pad .grid-item-holder {
        padding: 30px 40px 30px 40px;
    }
}

@media only screen and (min-width: 2560px) {
    .porta-largo {
        max-height: 972px;
        max-width: 763px;
        overflow: hidden;
    }

    .porta-ancho {
        max-height: 972px;
        max-width: 1607px;
        overflow: hidden;
    }

    .porta-cuadrado {
        max-height: 462px;
        max-width: 763px;
        overflow: hidden;
    }

    .grid-small-pad .grid-item-holder {
        padding: 30px 40px 30px 40px;
    }
}


/*===================
NAV
===================*/

header.navbar:hover {
    -webkit-transition: background-color .3s ease-out;
    -moz-transition: background-color .3s ease-out;
    -o-transition: background-color .3s ease-out;
    transition: background-color .3s ease-out;
    background-color: #fff;
}

/*
change navbar when the user focus
header.navbar:hover 	{
    background-color: transparent;
}
*/

/*header.navbar:hover{
	animation-duration: 1s;
	animation-name: navbar-color;
	-moz-animation-duration: 1s;
	-moz-animation-name: navbar-color;
	-webkit-animation-duration: 1s;
	-webkit-animation-name: navbar-color;
}

@keyframes navbar-color {
      0% {
        display: none;
		background-color: transparent;
      }

      1% {
        display: block;
		background-color: transparent;
      }

      100% {
        display: block;
		background-color: #fff;
      }
    }

    @-moz-keyframes navbar-color {
      0% {
        display: none;
		background-color: transparent;
      }

      1% {
        display: block;
		background-color: transparent;
      }

      100% {
        display: block;
		background-color: #fff;
      }
    }

    @-webkit-keyframes navbar-color {
     0% {
        display: none;
		background-color: transparent;
      }

      1% {
        display: block;
		background-color: transparent;
      }

      100% {
        display: block;
		background-color: #fff;
      }
    }

*/

.navbar {
    background: #fff;
}

.navbar .header-inner .nav-holder nav ul li a {
    color: black;
}

/* ---- Navbar Utility ---- */
.navbar-trans {
    border-bottom: none;
    background: transparent;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
}

.navbar-trans .navbar-logo {
    content: url('../images/act/logo2_min.png');
}

.navbar-trans .navbar-logo-dark {
    content: url('../images/act/logo2_min.png');
}

.navbar-trans:not(.navbar-inverse) .navbar-nav li a:focus,
.navbar-trans:not(.navbar-inverse) .navbar-nav li a:hover {
    color: #ececec;
}

nav li a {
    font-size: 12px;
    padding: 5px 16px;
}
nav li a .fab {
    font-size: 16px;
    line-height: 13px;

}

.navbar-trans:not(.navbar-inverse) .navbar-nav .active a {
    color: #ececec;
}

.navbar-trans:not(.navbar-inverse) .navbar-nav .active a:hover {
    color: #ececec;
}

.navbar-trans:not(.navbar-inverse) .navbar-nav .dropdown .dropdown-menu li a:hover {
    color: #111;
}

.navbar-trans:not(.navbar-inverse) .navbar-nav .open .dropdown-toggle {
    color: #ececec;
}

.navbar-trans-dark .navbar-nav > li > a:focus,
.navbar-trans-dark .navbar-nav > li > a:hover {
    color: #111 !important;
}

.navbar-trans-dark .navbar-nav .active > a {
    color: #111 !important;
}

.navbar-trans-dark .navbar-nav .active > a:hover {
    color: #111 !important;
}

.navbar-trans-dark .navbar-nav .open .dropdown-toggle {
    color: #111 !important;
}

.navbar-small {
    min-height: 50px;
}

.navbar-small .navbar-header {
    margin-top: 0;
    padding: 0;
}

.navbar-small .navbar-header .navbar-brand {
    padding: 9px 0;
}

.navbar-small .navbar-nav {
    margin-top: 0;
}

.navbar-small .navbar-nav .dropdown .dropdown-menu {
    margin-top: 0;
}

.navbar-fw .navbar-header {
    margin-left: 50px;
    width: 25%;
}

.navbar-fw .navbar-right {
    margin-right: 50px;
}

/* ---- Navbar Utility ---- */
.bg-solid-white {
    background: #fff !important;
}

.bg-solid-dark {
    background: #111;
}


/*========= NOMBRE SLIDE HOME ==============*/
@media only screen and (min-width: 320px) {
    .slide-title h4 {
        width: 200px;
        height: 70px;

    }
}

@media only screen and (min-width: 768px) {
    .slide-title h4 {
        width: 400px;
        height: 70px;
    }

}

@media only screen and (min-width: 1024px) {
    .slide-title h4 {
        width: 500px;
        height: 70px;
    }

}

@media only screen and (min-width: 1440px) {
    .slide-title h4 {
        width: 500px;
        height: 80px;
    }

}

.slide-title * {
    text-align: left;
    animation-duration: 1s;
    animation-name: fade-in;
    -moz-animation-duration: 1s;
    -moz-animation-name: fade-in;
    -webkit-animation-duration: 1s;
    -webkit-animation-name: fade-in;
}


.slide-title a.explorar-proyecto {
    display: none;
    width: 100%;

}

.slide-title a.nombre-proyecto {
    display: block;
    width: 100%;
}

div.slide-title-holder > div.active a.nombre-proyecto {
    display: none;
}

div.slide-title-holder > div.active a.explorar-proyecto {
    display: block;
}

@keyframes fade-in {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fade-in {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-webkit-keyframes fade-in {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}


#porcentajeCarga {
    text-align: center;
}


nav ul li a {
    font-weight: 500;
}


.float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 45px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}

@media (min-width: 768px) {
    .float {
        bottom: 70px;
    }
}
.my-float {
    margin-top: 16px;
}
.contact-details ul li a {

    font-size: 16px;
}