/*HTML*/
html{
    scroll-behavior: smooth;
}

body{
    font-family: 'Teko', sans-serif;
    background-color: #662C91;
}

/*Menú nav*/ 

.bg-light {
    background-color: #662C91!important;
}

.d-inline-block {
    margin-left: 2rem;
}

.nav-item{
    margin-left: 2rem;
}

.navbar-nav{
    margin-left: 2rem;
}

.navbar-light .navbar-toggler {
    color: #01011E;
    border-color: #01011E;
    border: solid 2px;
    margin-right: 1.5rem;
}

.navbar-light .navbar-toggler-icon {
    background-image: url("../img/garden/burguer_black.svg");
}

.navbar-light .navbar-nav .nav-link {
    color: #01011E;
    font-weight: 300;
    font-size: 1.5rem;
}

.navbar-light .navbar-nav .nav-link:hover{
    color: white;
}

.navbar-light .navbar-nav .hover-nav{
    color: white;
}

.navbar-light .navbar-nav .hover-nav:hover{
    color: #01011E;
}

/*Intro*/

.next_work{
    color: white;
    font-size: 1rem;
    margin-left: 3rem;
}

.img_next{
    width: 2rem;
}

.div_intro{
    background-color: #662C91;
    background-image: url(../img/garden/background_intro_garden_480.png);
    background-size: cover; 
    height:100vh;     
}

h1{
    color: #01011E;
    font-weight: 300;
    font-size: 4rem;
    line-height: 3.2rem;
    margin: 5rem 3rem 0 3rem;
}

h3{
    color: #01011E;
    font-weight: 300;
    font-size: 3rem;
    line-height: 2.6rem;
    margin: 0rem 3rem 2rem 3rem;
}

.color-title{
    color: white;
    font-weight: 500;
}

/* Inicia Main */

main{
    background: white;
}

/* About */

.cross_purple{
    width: 40px;
    margin-left: 3rem;
}

.about h3{
    color: #662C91;
    font-weight: 500;
    margin: 1rem 3rem 0rem 3rem;
    padding-bottom: 0rem;
}

.about p{
    font-family: 'Titillium Web', sans-serif;
    color: #01011E;
    margin: 1rem 3rem 3rem 3rem;
}

.academy{
    display: none;
}

/*Details*/

.details h4{
    color: #662C91;
    font-size: 2.2rem;
    font-weight: 500;
    margin: 1rem 3rem 1rem 3rem;
    padding-bottom: 0rem;
}

.details h3{
    color: #662C91;
    font-weight: 500;
    margin: 1.5rem 0 0 1.5rem;
    padding-bottom: 0rem;
}

.details p{
    color: #662C91;
    font-weight: 300;
    font-size: 1.7rem;
    line-height: 1.4rem;
    margin: 0.6rem 0 0 1.5rem;

}

.square_white{
    border: 3px solid #662C91;
    height: 18rem;
    margin-left: 3rem;
    margin-right: 3rem;
    margin-bottom: 1.5rem;
    background: white;
}

.square_white img{
    position: absolute;
    width: 30px;
    margin-left: -1rem;
    margin-top: -1rem;
}

/*Colors*/

.colors h4{
    color: #662C91;
    font-size: 2.2rem;
    font-weight: 500;
    margin: 3rem 3rem 1rem 3rem;
    padding-bottom: 0rem;
}

.colors p{
    font-family: 'Muli', sans-serif;
    font-weight: 500;
    color: white;
    padding: 0.8rem 0 1rem 1rem;
}

.colors_one p{
    margin-left: 3rem;
    margin-right: 3rem;
    margin-bottom: 0rem;
}

/*Tipography*/

.tipography h4{
    color: #662C91;
    font-size: 2.2rem;
    font-weight: 500;
    margin: 3rem 3rem 1rem 3rem;
    padding-bottom: 0rem;
}

.tipography h5{
    color: #662C91;
    font-family: 'Titillium Web', sans-serif;
    margin-left: 3rem;
}

.tipography p{
    margin-left: 3rem;
    color: #662C91;
}

.hr_tipography{
    border-top: 1.6px solid #662C91;
    margin-left: 3rem;
    margin-right: 3rem;
    margin-bottom: 0rem;
}

.tipo_example{
    font-size: 9rem;
    text-align: left;
    margin-bottom: 0rem;
}

.p_example{
    font-size: 0.7rem;
    letter-spacing: 0.1rem;
    margin-bottom: 0.5rem;
}

/*Images*/

.image_first{
    width: 70%;
    margin: 0rem 3rem 1rem 3rem;
}

.image_second{
    width: 70%;
    margin: 0rem 3rem 1rem 3rem;
}

.image_third{
    width: 70%;
    margin: 0rem 3rem 1rem 3rem;
}
.image_first, .image_second, .image_third {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        display: block;
}    

/*Video*/

.video-responsive {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
    margin-top: 2rem;    
}
.video-responsive iframe, .video-responsive object, .video-responsive embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}


/*Footer*/

footer{
    background-color: white;
    padding-top: 3rem;
}

.div_works{
    display: flex;
}

footer div{
    margin: auto;
}

.footer_next{
    width: 6rem;
}

.logo_footer{
    width: 6rem;
}

.footer_img{
    margin: 0;
}


/*Comienzan los Breakpoints*/


/*768*/

@media (min-width: 768px) {
    .div_intro{
        background-image: url(../img/garden/background_intro_garden_768.png);
    }
    h3{
        margin-top: 0rem;
    }
    /*Details*/
    .details h4 {
        margin: 1rem 3rem 1rem 3rem;
    }
    .div_square{
        display: flex;
    }
    .square_white:first-child{
        margin-left: 1.5rem;
        margin-right: 0.5rem;
    }
    .square_white:nth-child(2n){
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .square_white:nth-child(3n){
        margin-left: 0.5rem;
        margin-right: 1.5rem;
    }
    .square_white{
        width: 33rem;
    }
    /*Colors*/
    .div_colors{
        display: flex;
    }
    .colors_one{
        width: 33%;
    }
    .colors h4{
        margin-left: 3rem;
    }
    .colors_one:first-child{
        margin-left: 3rem;
    }
    .colors_one:nth-child(3n){
        margin-right: 3rem;
    }
    .colors_one p {
        margin-left: 0rem;
        margin-right: 0rem;
    }
    /*Tipography*/
    .div_tipography{
        display: flex;
    }
    .tipography h4 {
        margin-left: 3rem;
    }
    .block{
        width: 33%;
    }
    .block:first-child h5, .block:first-child hr, .block:first-child p{
        margin-left: 3rem;
        margin-right: 0rem;
    }
    .block:nth-child(2n) h5, .block:nth-child(2n) hr, .block:nth-child(2n) p{
        margin-left: 1.5rem;
        margin-right: 0rem;
    }
    .block:nth-child(3n) h5, .block:nth-child(3n) hr, .block:nth-child(3n) p{
        margin-left: -0.5rem;
        margin-right: 3rem;
    }
    .tipo_example{
        font-size: 6rem;
    }
    .p_example{
        font-size: 0.4rem;
    }
    .hr_tipography{
        width: 33%;
    }         
}

/*992*/

@media (min-width: 992px) {
    /*Intro*/
    .div_intro{
        background-image: url(../img/garden/background_intro_garden_992.png);
    }
    .d-inline-block {
        margin-left: 8rem;
    }
    h1{
        font-size: 6rem;
        line-height: 4.3rem;
        margin: 3rem 3rem 0 9rem;
    }
    h3{
        margin-left: 9rem;
        font-size: 3.3rem;
    }
    /*Menú Nav*/
    .navbar-nav {
        margin-right: 7.5rem;
    }
    .next_work{
        float: right;
        margin: -28rem 8rem 0 0;
    }
    /*Main*/
    main{
        background-image: url(../img/garden/background_main_991.svg);
        width: 100%;
        min-height: 100%;
        height: auto !important;
       }
    /*About*/
    .about{
        display: flex;
    }
    .cross_purple {
        margin-left: 9rem;
    }
    .about h3, .about p{
        margin-left: 9rem;
    }
    .academy {
        display: block;
    }
    .academy img {
        width: 20rem;
        margin-top: 6rem;
        margin-right: 8rem;
    }
    /*Details*/
    .details h4 {
        margin: 1rem 3rem 1rem 9rem;
    }
    .div_square{
        display: flex;
    }
    .square_white:first-child{
        margin-left: 6rem;
        margin-right: 0.5rem;
    }
    .square_white:nth-child(2n){
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .square_white:nth-child(3n){
        margin-left: 0.5rem;
        margin-right: 6rem;
    }
    .square_white{
        width: 33rem;
    }
    /*Colors*/
    .div_colors{
        display: flex;
    }
    .colors_one{
        width: 33%;
    }
    .colors h4{
        margin-left: 9rem;
    }
    .colors_one:first-child{
        margin-left: 9rem;
    }

    .colors_one:nth-child(3n){
        margin-right: 9rem;
    }
    .colors_one p {
        margin-left: 0rem;
        margin-right: 0rem;
    }
    /*Tipography*/
    .div_tipography{
        display: flex;
    }
    .tipography h4 {
        margin-left: 9rem;
    }
    .block{
        width: 33%;
    }
    .block:first-child h5, .block:first-child hr, .block:first-child p{
        margin-left: 9rem;
        margin-right: 0rem;
    }
    .block:nth-child(2n) h5, .block:nth-child(2n) hr, .block:nth-child(2n) p{
        margin-left: 4rem;
        margin-right: 0rem;
    }
    .block:nth-child(3n) h5, .block:nth-child(3n) hr, .block:nth-child(3n) p{
        margin-left: 0rem;
        margin-right: 9rem;
    }
    .tipo_example{
        font-size: 6rem;
    }
    .p_example{
        font-size: 0.4rem;
    }
    .hr_tipography{
        width: 33%;
    }
    /*Images*/
    .images{
        margin-top: 1rem;
        display: flex;
    }
    .images_flex{
        display: flex;
    }
    .image_first {
        width: 75%;
        margin: 0rem 0rem 0rem 5rem;
        display: initial;
    }
    .image_second, .image_third{
        width: 80%;
        margin: 0rem 0rem 1rem 0rem;
    }
    .image_third{
        width: 75%;
        margin: 0rem 5rem 1rem 0rem;
    }
    .image_first, .image_second, .image_third {
        display: initial;
    }  
}

/*1070*/

@media (min-width: 1070px) {
    /*Intro*/
    .div_intro{
        background-image: url(../img/garden/background_intro_garden_1070.png);
    }
    .d-inline-block {
        margin-left: 11rem;
    }
    h1 {
        font-size: 5rem;
        line-height: 4rem;
        margin: 4rem 3rem 0 12rem;
    }
    h3 {
        margin-left: 12rem;
        font-size: 2.8rem;
        line-height: 2.2rem;
    }
    /*Menú Nav*/
    .navbar-nav {
        margin-right: 4.5rem;
    }
    .next_work{
        float: right;
        margin: -25rem 5rem 0 0;
    }
    /*About*/
    .cross_purple {
        margin-left: 12rem;
    }
    .about h3, .about p{
        margin-left: 12rem;
    }
    .academy img {
        width: 25rem;
        margin-top: 4rem;
    }    
    /*Details*/
    .details h4 {
        margin: 1rem 3rem 1rem 12rem;
    }
    .square_white:first-child{
        margin-left: 9rem;
        margin-right: 1.5rem;
    }
    .square_white:nth-child(2n){
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .square_white:nth-child(3n){
        margin-left: 1.5rem;
        margin-right: 9rem;
    }   
    /*Colors*/
    .colors h4{
        margin-left: 12rem;
    }
    .colors_one:first-child{
        margin-left: 12rem;
    }
    .colors_one:nth-child(3n){
        margin-right: 12rem;
    }
    /*Tipography*/
    .tipography h4 {
        margin-left: 12rem;
    }
    .block:first-child h5, .block:first-child hr, .block:first-child p{
        margin-left: 12rem;
        margin-right: 0rem;
    }
    .block:nth-child(2n) h5, .block:nth-child(2n) hr, .block:nth-child(2n) p{
        margin-left: 4rem;
        margin-right: 0rem;
    }
    .block:nth-child(3n) h5, .block:nth-child(3n) hr, .block:nth-child(3n) p{
        margin-left: -3rem;
        margin-right: 12rem;
    }
    .tipo_example{
        font-size: 6rem;
    }
    .p_example{
        font-size: 0.5rem;
    }    
}


/*1200*/

@media (min-width: 1200px) {
    /*Intro*/
    .div_intro{
        background-image: url(../img/garden/background_intro_garden_1200.png);
    }
    .d-inline-block {
        margin-left: 16rem;
    }
    h1 {
        margin: 4rem 3rem 0 17rem;
    }
    h3 {
        margin-left: 17rem;
    }
    /*Menú Nav*/
    .navbar-nav {
        margin-right: 8.5rem;
    }
    .next_work{
        float: right;
        margin: -25rem 9rem 0 0;
    }
    /*About*/
    .cross_purple {
        margin-left: 17rem;
    }
    .about h3, .about p{
        margin-left: 17rem;
    }
    .academy img {
        width: 25rem;
        margin-top: 4rem;
    } 
    /*Details*/
    .details h4 {
        margin: 1rem 3rem 1rem 17rem;
    }
    .square_white:first-child{
        margin-left: 12rem;
        margin-right: 1.5rem;
    }
    .square_white:nth-child(2n){
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .square_white:nth-child(3n){
        margin-left: 1.5rem;
        margin-right: 12rem;
    }    
    /*Colors*/
    .colors h4{
        margin-left: 17rem;
    }
    .colors_one:first-child{
        margin-left: 17rem;
    }
    .colors_one:nth-child(3n){
        margin-right: 17rem;
    }   
    /*Tipography*/
    .tipography h4 {
        margin-left: 17rem;
    }
    .tipography h5{
        font-size: 1.2rem;
    }
    .block:first-child h5, .block:first-child hr, .block:first-child p{
        margin-left: 17rem;
        margin-right: 0rem;
    }
    .block:nth-child(2n) h5, .block:nth-child(2n) hr, .block:nth-child(2n) p{
        margin-left: 7rem;
        margin-right: 0rem;
    }
    .block:nth-child(3n) h5, .block:nth-child(3n) hr, .block:nth-child(3n) p{
        margin-left: -3rem;
        margin-right: 17rem;
    }
    .tipo_example{
        font-size: 6rem;
    }
    .p_example{
        font-size: 0.5rem;
    }   
}    


/*1500*/

@media (min-width: 1500px) {
    /*Intro*/
    .d-inline-block {
        margin-left: 19rem;
    }
    h1 {
        font-size: 6rem;
        line-height: 4.6rem;
        margin: 4rem 3rem 0 20rem;
    }
    h3 {
        margin-left: 20rem;
    }
    /*Menú Nav*/
    .navbar-nav {
        margin-right: 12.5rem;
    }
    .next_work{
        float: right;
        margin: -31rem 13rem 0 0;
    }
    /*About*/
    .cross_purple {
        margin-left: 20rem;
    }
    .about h3{
        margin-left: 20rem;
    }
    .about p{
        font-size: 1.5rem;
        margin-left: 20rem;
    }
    /*Details*/
    .details h4 {
        margin: 1rem 3rem 1rem 20rem;
    }
    .square_white:first-child{
        margin-left: 15rem;
        margin-right: 1.5rem;
    }
    .square_white:nth-child(2n){
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .square_white:nth-child(3n){
        margin-left: 1.5rem;
        margin-right: 15rem;
    }    
    /*Colors*/
    .colors h4{
        margin-left: 20rem;
    }
    .colors_one:first-child{
        margin-left: 20rem;
    }
    .colors_one:nth-child(3n){
        margin-right: 20rem;
    }   
    /*Tipography*/
    .tipography h4 {
        margin-left: 20rem;
    }
    .tipography h5{
        font-size: 1.2rem;
    }
    .block:first-child h5, .block:first-child hr, .block:first-child p{
        margin-left: 20rem;
        margin-right: 0rem;
    }
    .block:nth-child(2n) h5, .block:nth-child(2n) hr, .block:nth-child(2n) p{
        margin-left: 8rem;
        margin-right: 0rem;
    }
    .block:nth-child(3n) h5, .block:nth-child(3n) hr, .block:nth-child(3n) p{
        margin-left: -3rem;
        margin-right: 20rem;
    }
    .tipo_example{
        font-size: 8rem;
    }
    .p_example{
        font-size: 0.6rem;
    }   
}