@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,700;0,800;0,900;1,400&family=Russo+One&display=swap');



:root {

    --rn-green: #38761D;

}



html {

    scroll-behavior: smooth;

}



.clrtxt,

.clrtxt a:hover {

    color: #fff !important;

}



.drktxt,

.drktxt a:hover {

    color: #0c0c0c !important;

}



.bluish {

    background-color: #c3d7e0;

}



.bluish * {

    color: #000 !important;

}



.bluish .row .cta {

    margin-bottom: 10vh;

}





.smllhdr {

    color: #383838;

    font-size: 150%;

    text-align: center;

    margin: 8vh 0 10vh;

}



.grthdr {

    color: #383838;

    font-size: 270%;

    text-align: center;

    margin: 10vh 0 8vh;

}



.bold {

    font-weight: 600;

}



.no-padding {

    padding-left: 0;

    padding-right: 0;

}



body {

    font-family: "Montserrat Alternates", sans-serif;

    color: #0c0c0c;

    background-color: #ffffff;

    overflow-x: hidden;

    scroll-behavior: smooth;

    transition: all 1s ease-in;

}



header {

    backdrop-filter: blur(2px);

    background-color: rgba(255, 255, 255, 0.6);

    border-bottom: 1px solid rgb(223, 227, 231);

    box-shadow: 0px 4px 6px rgba(217, 217, 217, 0.3);

    position: sticky;

    top: 0px;

    width: 100%;

    z-index: 999;

    transition: backdrop-filter .5s ease-in;

}

header:hover{

    backdrop-filter: blur(16px);

}



header .container-fluid {

    padding: 0;

}



.logo-img {

    width: 60px;

}





/*

@media (max-width: 768px) {

    .logo-img {}

}

*/



main section {

    padding: 10vh 0;

}



.full-width-menu {

    backdrop-filter: blur(16px);

    background-color: rgba(241, 242, 244, 0.8);

    width: 100%;

    position: relative;

    top: 0px;

    opacity: 0;

    transform: translate(0, 10vh);

    transition: all 1s;

}



.full-width-menu.show {

    display: flex;

    top: 70px;

    opacity: 1;

    transform: translate(0, 0);

}



.full-width-menu .dropdown-item {

    flex-direction: column;

}



.navbar-nav .nav-item {

    color: #383838 !important;

}



.navbar-nav .nav-item.active .nav-link {

    color: #ff6600;

    background: #ffffff2b;

    border-radius: 20px;

    /*   border-bottom: 1px solid #ff6600; */

}



.navbar-nav .nav-item:hover,

.navbar-nav .nav-item:focus {

    color: rgb(115, 115, 115) !important;

}



.contact-box {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    justify-content: center;

}

@media (max-width: 768px) {

    .contact-box{

    justify-content: center;

    }

}

.contact-box .contact-us {

    display: inline-block;

    padding: 8px 30px;

    background-color: #383838;

    color: #ffffff;

    border-radius: 7px;

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

    border: none;

    text-decoration: none;

}



.contact-box .contact-us:hover {

    background-color: #787878;

}



.contact-box .contact-us:hover {

    animation: glow 2s ease-in-out infinite alternate;

}







.pre-hero {

    position: absolute;

    height: 90vh;

    padding-top: 10vh;

    padding-bottom: 3vh;

    overflow: hidden;

    box-sizing: border-box;

    z-index: 1;

    width: 100%;

    text-align: center;

}



@media (max-width: 768px) {

    .pre-hero {

        padding-top: 0;

        height: 100vh;

    }

}



.pre-hero h1 {

    font-size: 3.5vw;

    text-align: center;

}



.pre-hero p {

    font-size: 2vw;

}



.hero {

    background: url(../images/hero.jpg) center/cover;

    height: 100vh;

    padding-top: 30vh;

    padding-bottom: 3vh;

    overflow: hidden;

    box-sizing: border-box;

    text-align: center;

    color: transparent;

    background-attachment: fixed;

    background-repeat: no-repeat;

}



@media (max-width: 768px) {

    .hero {

        background: url(../images/hero.jpg) top/cover;

        height: 0;

    }

}



.pre-hero h1 {

    color: rgb(0, 0, 0);

    text-shadow: 1px 1px 1px rgb(255, 255, 255);

}



.pre-hero p {

    padding: 0;

    text-shadow: 1px 1px 1px rgb(255 255 255);

}



section.content .row {

    margin-bottom: 4em;

}

section.formacion *{

    color:#fff !important;

}

.wrapping-container {

    backface-visibility: hidden;

    height: 100%;

    overflow: hidden;

    position: relative;

    transform: translate3d(0px, 0px, 0px);

    width: 100%;

    margin-bottom: 2em;

}



.wrapping-container span {

    box-sizing: border-box;

    display: block;

    overflow: hidden;

    width: initial;

    height: initial;

    background: none;

    opacity: 1;

    border: 0px;

    margin: 0px;

    padding: 0px;

    inset: 0px;

}



.wrapping-container span:nth-child(1) {

    border-radius: 20px;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);

    transition: box-shadow 0.3s ease-in-out, transform 0.8s ease 0s;

}



.wrapping-container span:nth-child(2) {

    padding: 2vw;

    border-radius: 20px;

    position: absolute;

    background: linear-gradient(54deg, transparent, #38383800);

    transition: transform 2s ease 0.15s;

}



.wrapping-container img {

    transform-origin: bottom center;

    transition: transform 0.8s ease 0.15s;

    filter: opacity(0.3);

}



.wrapping-container:hover span:nth-child(1) {

    box-shadow: -1px 0px 67px -28px rgb(80 80 80);

    transform: scale(1.05);

    z-index: 20;

}



/* .wrapping-container:hover span:nth-child(2) {

    backdrop-filter: blur(6px);

} */



.wrapping-container:hover img {

    transform: scale(1.15);

}



.wrapping-container h1,

.wrapping-container p {

    transition: transform 0.8s ease 0.5s;

}



.wrapping-container:hover h1,

.wrapping-container:hover p {

    opacity: .8;

}





.wrapping-container .ver-mas-container {

    opacity: 0;

    transition: all 0.8s ease 0.5s;

    bottom: 0%;

    position: absolute;

    left: 0;

    width: 100%;

}



.wrapping-container:hover .ver-mas-container {

    opacity: 1;

    bottom: 50%;

}



.wrapping-container .ver-mas-container button.ver-mas {

    position: absolute;

    left: calc(50% - 116px);

    background: linear-gradient(-45deg, #86a0f5, #6effaa, #f1c16c, #ff9999);

    background-size: 400% 400%;

    animation: gradient 15s ease infinite;

    border-radius: 8px;

    padding: 1em;

    color: #fff;

    font-weight: 600;

    border: none;

    box-shadow: none;

    transition: all 0.8s ease 0.5s;

    backdrop-filter: blur(1px);

    filter: opacity(0.8);

    text-shadow: 1px 2px 2px black;

    font-size: 1.3rem;

}



.wrapping-container:hover .ver-mas-container button.ver-mas {

    box-shadow: 0px 6px 8px 7px #87878778;

}



.top {

    position: fixed;

    bottom: 10px;

    right: 10px;

    padding: 10px 12px;

    background: rgba(0, 0, 0, 0.3);

    border-radius: 5px;

}



.floating-ballon {

    animation: animate-ballon 10s linear infinite;

}



/* animations*/

@keyframes gradient {

    0% {

        background-position: 0% 50%;

    }



    50% {

        background-position: 100% 50%;

    }



    100% {

        background-position: 0% 50%;

    }

}





@keyframes animate-ballon {



    0%,

    100% {

        transform: translate3d(0px, 600, -50px);

    }



    50% {

        transform: translate3d(2000px, -600px, 50px);

    }

}



@media (max-width: 769px) {

    .floating-ballon {

        animation: animate-ballon 500s linear infinite;

    }



    @keyframes animate-ballon {



        0%,

        100% {

            transform: translate3d(-300px, 200px, -50px);

        }



        50% {

            transform: translate3d(800px, -200px, 50px);

        }

    }

}



@media (max-width: 426px) {

    .floating-ballon {

        animation: animate-ballon 400s linear infinite;

    }



    @keyframes animate-ballon {



        0%,

        100% {

            transform: translate3d(-200px, 300px, -50px);

        }



        50% {

            transform: translate3d(300px, -200px, 50px);

        }

    }

}





/* Footer */



footer {

    margin-top: 40vh;

    padding: 6vh 0;

    width: 100%;

    background: linear-gradient(7deg, #224061, #bdddff);

    box-shadow: 0px 0px 10px 0px #383d41;

}



.logo-footer {

    width: 50px;

}



footer h3 {

    font-size: 1.2rem;

    text-transform: uppercase;

}



footer li a {

    color: #fff;

    font-size: 0.8em;

    font-weight: 100;

    padding-bottom: .5em;

}



.copyright {

    color: black;

    font-size: .8em;

}



.copyright::before {

    content: "©";

}



.footer-last-col-content {

    justify-content: flex-end;

    align-items: end;

}



.footer-last-col-content .copyright * {

    vertical-align: middle;

}



@media (max-width: 768px) {

    .footer-last-col-content {

        justify-content: center;

    }

}



/* Formularios */







.form-header {

    position: absolute;

    display: none;

    top: 4vw;

    z-index: 90;

    left: 10vw;

    padding: 1vh 3vw;

    border: 1px solid white;

    border-radius: 1rem;

    filter: opacity(0.85);

    backdrop-filter: blur(1px);

    color: #fff;

    text-shadow: 1px 1px black;

    background: rgb(124 49 174);

    background: linear-gradient(142deg, rgb(217 190 235) 0%, rgb(245 150 150) 46%, rgb(255 90 90) 100%);

    flex-direction: column;

    transition: all .5s ease-in-out;

}



.form-header:hover {

    box-shadow: 12px 12px 33px 9px #ffffff;

}



.form-header h2 {

    line-height: 2em;

}



.form-header input {

    margin-bottom: 2vh;

    backdrop-filter: opacity(0.5);

    border: none;

    border-radius: 3px;

    line-height: 3vh;

    padding: 0.3vw;

    box-shadow: -1px 2px 6px #461e1e6b;

}



.form-header .inputBox {

    display: grid;

}



.form-header .inputBox label {

    display: block;

}



.form-header .inputBox input[type="submit"] {

    margin: 1em 0;

}



.form-header .inputBox input[type="submit"]:hover {

    background-color: #9778ff;

    color: #fff;

}