/* Campo Fértil Styles */

/* generals */
body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: "Montserrat", "Helvetica Neue", "Arial", sans-serif;
    color: #5d737e;
    background: #f1f5f7;
    font-weight: lighter;
}

a,
a:hover {
    text-decoration: none;
}

footer .container {
    text-align: center;
}

footer p {
    flex: 1;
    font-size: 12px;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

h3 {
    font-family: "Kaushan Script", "Helvetica Neue", "Arial", sans-serif;
}

h4 {
    font-size: 44px;
    line-height: 1.6;
}

p {
    font-size: 20px;
    line-height: 1.6;
}

.row,
.column,
.container,
.nav,
.nav-item,
.content,
.side,
.side-overlay,
.btn,
.banner,
.banner-overlay {
    display: flex;
}

.column {
    flex-flow: column;
    flex: 1;
}

.column.auto {
    flex: 0 0 auto;
}

.row {
    align-items: flex-start;
}

.container {
    width: calc(100% - 80px);
    margin: 0 auto;
}

.container.condensed {
    width: 70%;
}

/* navbar */

.nav {
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    flex-flow: column;
}

.nav-item {
    font-size: 16px;
    border-radius: 12px;
    align-items: center;
    height: 36px;
    width: 100%;
    margin: 4px 0;
    justify-content: center;
    color: #80949e;
}

.nav-item:hover,
.nav-item.active {
    color: #5d737e;
    background: #f1f5f7;
}

.nav-item i {
    font-size: 13px;
    margin-right: 6px;
}

/* content */
.content {
    padding-left: 460px;
    flex-flow: column;
    flex: 1;
}

.content .logos img {
    margin-left: 30px;
}

.content .logos img:first-child {
    margin: 0;
}

.content h2 {
    font-size: 48px;
    line-height: 1;
}
.content h3 {
    font-size: 56px;
    line-height: 1;
}
.content h4 {
    font-size: 24px;
    margin-top: 60px;
}
.content p {
    font-size: 20px;
    margin-top: 60px;
}

/* side */
.side {
    width: 460px;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
}

.side-overlay {
    flex: 1;
    flex-flow: column;
    background: rgba(93, 115, 126, 0.5);
    backdrop-filter: blur(1px) saturate(200%);
}

.side-overlay .container {
    flex: 1;
}

.side.white {
    color: #fff;
}

.side.white .nav-item {
    color: #fff;
}

.side.white .nav-item.active,
.side.white .nav-item:hover {
    background: rgba(255, 255, 255, 0.2);
}

h1.cta {
    font-size: 40px;
    text-transform: uppercase;
    line-height: 1;
    font-weight: 700;
}

/* buttons */
.btn {
    background: transparent;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.btn i {
    margin-right: 12px;
}

.btn.lg {
    font-size: 22px;
    height: 52px;
    border-radius: 16px;
}

.btn.md {
    font-size: 14px;
    padding: 8px 0;
    border-radius: 12px;
}

/* banners */
.banner-container {
    display: flex;
    flex-flow: column;
    height: 100vh;
}
.banner {
    flex: 1;
    color: #fff;
}
.banner:hover {
    flex: 10;
}
.banner:hover .banner-overlay,
.banner.active .banner-overlay {
    backdrop-filter: none;
    background: transparent;
}
.banner-overlay {
    flex: 1;
    flex-flow: column;
    background: rgba(93, 115, 126, 0.5);
    backdrop-filter: blur(1px) saturate(200%);
}
.banner h2 {
    font-size: 40px;
    line-height: 1;
}
.banner h3 {
    font-size: 44px;
    line-height: 1;
}
.banner h4 {
    font-size: 20px;
}
.banner p {
    font-size: 16px;
    margin-top: 12px;
}

/* backgrounds */
.bg-white {
    background: #fff;
}
.bg-blue {
    background: #00ccff;
    color: #fff;
}
.bg-green {
    background: #93e908;
    color: rgba(93, 115, 126, 0.9);
}
.bg-yellow {
    background: #ffef5f;
    color: rgba(93, 115, 126, 0.9);
}
.bg-primary {
    background: #00e676;
    color: #fff;
}
.bg-red {
    background: #ff7676;
    color: #fff;
}
.bg-emerald {
    background: #89ff71;
    color: rgba(93, 115, 126, 0.9);
}
.bg-orange {
    background: #ff9100;
    color: #fff;
}
.bg-agricultores {
    background: url(../img/bg-agricultores.jpg) center center no-repeat;
    background-size: cover;
}
.bg-comercializacion {
    background: url(../img/bg-comercializacion.jpg) center center no-repeat;
    background-size: cover;
}
.bg-nosotros {
    background: url(../img/bg-nosotros.jpg) center center no-repeat;
    background-size: cover;
}
.bg-semillas {
    background: url(../img/bg-semillas.jpg) center center no-repeat;
    background-size: cover;
}
.bg-financiamiento {
    background: url(../img/bg-financiamiento.jpg) center center no-repeat;
    background-size: cover;
}
.bg-fertilizantes {
    background: url(../img/bg-fertilizantes.jpg) center center no-repeat;
    background-size: cover;
}

/* animations */

.banner,
.banner:hover,
.banner-overlay,
a,
a:hover {
    transition: all 0.6s ease-in-out;
}

@keyframes shadow-primary {
    0% {
        box-shadow: 0px 0px 20px #06b963, 0px 0px 40px #06b963;
    }
    50% {
        box-shadow: 0px 0px 8px #06b963, 0px 0px 16px #06b963;
    }
    100% {
        box-shadow: 0px 0px 20px #06b963, 0px 0px 40px #06b963;
    }
}

@keyframes shadow-orange {
    0% {
        box-shadow: 0px 0px 20px #ff9100, 0px 0px 40px #ff9100;
    }
    50% {
        box-shadow: 0px 0px 8px #ff9100, 0px 0px 16px #ff9100;
    }
    100% {
        box-shadow: 0px 0px 20px #ff9100, 0px 0px 40px #ff9100;
    }
}

@keyframes shadow-blue {
    0% {
        box-shadow: 0px 0px 20px #00ccff, 0px 0px 40px #00ccff;
    }
    50% {
        box-shadow: 0px 0px 8px #00ccff, 0px 0px 16px #00ccff;
    }
    100% {
        box-shadow: 0px 0px 20px #00ccff, 0px 0px 40px #00ccff;
    }
}

@keyframes shadow-green {
    0% {
        box-shadow: 0px 0px 20px #93e908, 0px 0px 40px #93e908;
    }
    50% {
        box-shadow: 0px 0px 8px #93e908, 0px 0px 16px #93e908;
    }
    100% {
        box-shadow: 0px 0px 20px #93e908, 0px 0px 40px #93e908;
    }
}

@keyframes shadow-red {
    0% {
        box-shadow: 0px 0px 20px #ff7676, 0px 0px 40px #ff7676;
    }
    50% {
        box-shadow: 0px 0px 8px #ff7676, 0px 0px 16px #ff7676;
    }
    100% {
        box-shadow: 0px 0px 20px #ff7676, 0px 0px 40px #ff7676;
    }
}

@keyframes shadow-yellow {
    0% {
        box-shadow: 0px 0px 20px #ffef5f, 0px 0px 40px #ffef5f;
    }
    50% {
        box-shadow: 0px 0px 8px #ffef5f, 0px 0px 16px #ffef5f;
    }
    100% {
        box-shadow: 0px 0px 20px #ffef5f, 0px 0px 40px #ffef5f;
    }
}

@keyframes shadow-emerald {
    0% {
        box-shadow: 0px 0px 20px #89ff71, 0px 0px 40px #89ff71;
    }
    50% {
        box-shadow: 0px 0px 8px #89ff71, 0px 0px 16px #89ff71;
    }
    100% {
        box-shadow: 0px 0px 20px #89ff71, 0px 0px 40px #89ff71;
    }
}

/* colors */

.primary-t {
    color: #00e676;
}
.orange-t {
    color: #ff9100;
}
.blue-t {
    color: #00ccff;
}
.green-t {
    color: #93e908;
}
.yellow-t {
    color: #ffef5f;
}
.emerald-t {
    color: #89ff71;
}
.red-t {
    color: #ff7676;
}

.btn-primary {
    background: #00e676;
    color: #fff;
    box-shadow: 0px 0px 20px transparent;
}

.btn-primary:hover {
    background: #00e676;
    animation: shadow-primary 1.2s infinite linear;
}

.btn-orange {
    background: #ff9100;
    color: #fff;
    box-shadow: 0px 0px 20px transparent;
}

.btn-orange:hover {
    background: #ff9100;
    animation: shadow-orange 1.2s infinite linear;
}

.btn-blue {
    background: #00ccff;
    color: #fff;
    box-shadow: 0px 0px 20px transparent;
}

.btn-blue:hover {
    background: #00ccff;
    animation: shadow-blue 1.2s infinite linear;
}

.btn-green {
    background: #93e908;
    color: rgba(93, 115, 126, 0.9);
    box-shadow: 0px 0px 20px transparent;
}

.btn-green:hover {
    background: #93e908;
    animation: shadow-green 1.2s infinite linear;
}

.btn-emerald {
    background: #89ff71;
    color: rgba(93, 115, 126, 0.9);
    box-shadow: 0px 0px 20px transparent;
}

.btn-emerald:hover {
    background: #89ff71;
    animation: shadow-emerald 1.2s infinite linear;
}

.btn-yellow {
    background: #ffef5f;
    color: rgba(93, 115, 126, 0.9);
    box-shadow: 0px 0px 20px transparent;
}

.btn-yellow:hover {
    background: #ffef5f;
    color: #fff;
    animation: shadow-yellow 1.2s infinite linear;
}

.btn-red {
    background: #ff7676;
    color: #fff;
    box-shadow: 0px 0px 20px transparent;
}

.btn-red:hover {
    background: #ff7676;
    color: #fff;
    animation: shadow-red 1.2s infinite linear;
}

/* customs */

.align-center {
    align-items: center;
}

.align-end {
    align-items: flex-end;
}

.align-start {
    align-items: flex-start;
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.pad-xs {
    padding: 6px 0;
}
.pad-sm {
    padding: 12px 0;
}
.pad-md {
    padding: 30px 0;
}
.pad-lg {
    padding: 60px 0;
}
.pad-xl {
    padding: 120px 0;
}
.pad-xxl {
    padding: 150px 0;
}

.full {
    flex: 1;
}

.tac {
    text-align: center;
}

.taj {
    text-align: justify;
}

.logo-white {
    filter: brightness(100);
}

.mar-left-1 {
    margin-left: 12px;
}

/* Responsive */

.mobile-nav {
    width: 100%;
    position: fixed;
    display: none;
    z-index: 10;
    left: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    border-top: solid 1px #f1f5f7;
    padding-bottom: 20px;
    flex-flow: column;
}

.mobile-nav-top {
    display: flex;
    flex: 1;
    align-items: center;
    flex: 0 0 60px;
}

.mobile-nav-bottom {
    display: flex;
    flex: 0 0 60px;
}

.mobile-nav-item {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    color: #5d737e;
}

.mobile-nav-item p {
    font-size: 11px;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
    color: #06b963;
}

.mobile-nav-fix {
    height: 140px;
    display: none;
}

.show-mobile{
    display: none;
}
.hide-desktop{
    display: block;
}

/* Display 4k(2560px or above) */
@media (max-width: 2560px) {
}

/* Display FullHD (1920px or above) */
@media (max-width: 1920px) {
}

/* Display Tablet Landscape (1279px or below) */
@media (max-width: 1279px) {
    .side {
        display: none;
    }
    .content {
        padding: 0;
    }
    .mobile-nav {
        display: flex;
    }
    .container,
    .container.condensed {
        width: calc(100% - 24px);
    }
    .mobile-nav-fix {
        display: block;
    }
    .content h2 {
        font-size: 32px;
        line-height: 1;
    }
    .content h3 {
        font-size: 36px;
        line-height: 1;
    }
    .content h4 {
        font-size: 18px;
        margin-top: 30px;
    }
    .content p {
        font-size: 16px;
        margin-top: 30px;
    }
    .banner-container .banner h2 {
        font-size: 28px;
    }
    .banner-container .banner h3 {
        font-size: 32px;
    }
    .banner-container .banner h4 {
        font-size: 14px;
        margin-left: 8px;
    }
    .banner-container .banner p {
        font-size: 13px;
        margin-top: 12px;
    }
    .show-mobile{
        display: block;
    }
    .hide-desktop{
        display: none;
    }
}

/* Display Tablet Portrait (1023px or below) */
@media (max-width: 1023px) {
}

/* Display Mobile (767px or below) */
@media (max-width: 767px) {
}