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

/*body*/

body{
    font-family: 'Teko', sans-serif;
}

.index-body{
    background-color: #01011e;
}

.bg-light {
    background-color: #01011e!important;
}

/*menu nav*/

.ml-auto {
    margin-left: auto!important;
}

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

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

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

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

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

.navbar-light .navbar-nav .nav-link {
    color: #fb5c3e;
    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: #fb5c3e;
}

/*Título*/

.div_title{
    background-image: url(../img/background_title.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: calc(100% - -200px) center;
}

h1{
    font-weight: 500;
    color: white;
    font-size: 4rem;
    line-height: 3.2rem;
    margin: 3rem;
}
h3{
    font-weight: 300;
    color: white;
    font-size: 2.5rem;
    line-height: 2rem;
    margin: 3rem;
}

h5{
    font-weight: 300;
    color: white;
    margin: 3rem;
    font-size: 2.5rem;
    line-height: 2.2rem;
}

.li-trabajos{
    font-size: 3rem;
    line-height: 2.5rem;
    color: white;
    list-style: none
}

.first-li-trabajos{
    font-size: 3.5rem;
    color: #01011e;
}

.color-title{
    color: #fb5c3e;
    font-weight: 300;
}
.hr_white{
    border-top: 3px solid white;
    margin-left: 3rem;
    margin-right: 50%;
    margin-top: 6rem;
    margin-bottom: 2rem;
}

.hr_black{
    border-top: 3px solid black;
    margin-left: 50%;
    margin-right: 3rem;
    margin-top: 0;
    margin-bottom: 6rem;
}

.hr_orange{
    border-top: 3px solid #fb5c3e;
    margin-right: 70%;
    margin-top: 0;
    margin-bottom: 6rem;
}

/*Div Subtítulo*/

.div_subtitle{
    background-color: #fb5c3e;
    background-image: url(../img/background_subtitle.svg);
    background-repeat: no-repeat;
    padding-top: 2rem;
}

/*Div con Trabajos */
.div_trabajos{
    margin-left: 0.5rem;
}


/*Div con Items */

.div_items{
    padding: 3rem;
}

.item_title{
    color: #01011e;
    font-weight: 500;
    font-size: 1.5rem;
}

.item_text{
    color: white;
    font-family: 'Titillium Web', sans-serif;
    font-size: 1.1rem;
    line-height: 1.2;
}

/* Region Cuadrados */

.div_square{
    background-image: url(../img/background_cross.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: calc(100% - 0px) center;
}

.square1:hover{
    background-color: #01011E;
}
.square2:hover{
    opacity: 0.5;
}
.square3:hover{
    opacity: 0.5;
}
.square4:hover{
    opacity: 0.5;
}
.square5:hover{
    opacity: 0.5;
}
.square6:hover{
    background-color: #FB5C3E;
}

.div_circle{
    background-image: url(../img/background_circle.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: calc(100% - 0px) center;
}

.square_three{
    display: none;
}

.square_white{
    border: 3px solid white;
    width: 80%;
    color: white;
    margin-right: 3rem;
    margin-left: 3rem;
    margin: auto;
    margin-bottom: 3rem;
    background-color: #fb5c3e;
}

.square_black{
    border: 3px solid white;
    width: 80%;
    color: white;
    margin-right: 3rem;
    margin-left: 3rem;
    margin: auto;
    background-color: #01011e;
}

.square_white p, .square_black p{
    font-weight: 500;
    font-size: 4.5rem;
    line-height: 4rem;
    margin: 9rem 2rem 2rem 2rem;
    height: 40vh;
}

.square_black a{
    color: white;
    text-decoration: none;
}

.square_white img{
    width: 100%;
}

/* Footer */

.div_footer{
    background-image: url(../img/background_footer.svg);
    background-size: cover;
    background-color: #01011e;
    padding: 3rem;
}

.orange_square{
    text-align: left;
}

.orange_square_cross{
    width: 40px;
    float: right;
    margin-top: 12rem;
}

.we_are_idea{
    width: 250px;
    margin-top: 16rem;
    margin-bottom: 3rem;
}

.link_footer{
    color: white;
}

.link_footer:hover{
    color: #fb5c3e;
    text-decoration: none;
}

.social_media{
    margin-top: 6rem;
    text-align: right;
}


footer div.social_media img:hover{
    opacity: 0.6;
}

/*A partir de 750px */
@media (min-width: 750px) {

    h3{
        font-size: 3rem;
        line-height: 2.5rem;
    }

    #trabajos h1{
        font-size: 5rem;
        line-height: 4.5rem;
    }
    .li-trabajos{
        font-size: 3.5rem;
        line-height: 3.2rem;
    }
    
    .first-li-trabajos{
        margin-top: 4rem;
        font-size: 4rem;
    }
    .item_title {
        font-size: 2rem;
    }
    .item_text {
        font-size: 1.6rem;
    }
    .div_cross_circle{
        background-image: url(../img/background_cross_circle_B.svg);
        background-size: cover;
    }
    .div_square{
        display: flex;
        background-image: none;
    }
    .div_circle{
        display: flex;
        background-image: none;
    }
    .square_white{
        width: 20rem;
        height: 20rem;
        margin-bottom: 4rem;
    }
    .square_white p, .square_black p{
        font-size: 4.2rem;
        line-height: 3.5rem;
        margin: 7rem 2rem;
    }   
    .square_black{
        width: 20rem;
        height: 20rem;
        margin-bottom: 4rem;
    }     
    .link_footer {
        font-size: 1.5rem;
    }
}

/*A partir de 850px */
@media (min-width: 850px) {
    .h1-div-tittle{
        margin: 5rem 3rem 3rem 3rem;
    }
    .h5-div-tittle{
        margin: 5rem 3rem 3rem 3rem;
    }
    .hr_white{
        margin-left: 3rem;
    }
    .we_are_idea{
        margin-top: 22rem;
    }
    .div_trabajos{
        margin-top: 6rem;
    }
    .li-trabajos{
        font-size: 3rem;
        line-height: 3.2rem;
    }
    .first-li-trabajos{
        font-size: 3.5rem;
        color: white;
    }
}

/*A partir de 950px */
@media (min-width: 950px) {
    h1, h3, h5{
        margin: 5rem;
    }
    .div_items {
        padding: 7rem;
    }
    .hr_white, .hr_orange{
        margin-left: 3rem;
        margin-right: 75%;
    }
    .hr_black{
        margin-right: 8rem;
        margin-left: 75%;
    }
    .div_square, .div_circle{
        margin-left: 4rem;
        margin-right: 4rem;
    }
    .div_trabajos{
        margin: 6rem 2rem 2rem 4rem;
    }
    .li-trabajos{
        font-size: 4.5rem;
        line-height: 4rem;
    }
    
    .first-li-trabajos{
        font-size: 5rem;
        color: #01011e;
    }
    .orange_square_cross{
        margin-right: 5rem;
    }
    .we_are_idea {
        margin-top: 24rem;
        margin-left: 5rem;
    }
    .social_media{
        margin-top: 10rem;
        margin-right: 5rem;
    }
}

/*En 992 px termina el menú hamburgesa */
@media (min-width: 992px) {
    .h1-div-tittle{
        margin: 5rem 3rem 3rem 9rem;
    }
    .h5-div-tittle{
        margin: 5rem 3rem 3rem 9rem;
    }
    .d-inline-block {
        margin-left: 8rem;
    }
    .navbar-nav {
        margin-right: 7.5rem;
    }
    #trabajos{
        background-image: url(../img/background_cross_circle_A.svg);
        background-size: cover;
        display: flex;
    }
    #trabajos h1{
        font-size: 3.8rem;
        line-height: 2.8rem;
    }
    .div_trabajos{
        margin: 4rem 0 4rem 6rem;
    }
    .li-trabajos{
        font-size: 2.4rem;
        line-height: 2.2rem;
    }    
    .ul-trabajos{
        width: 16rem;
    }
    .first-li-trabajos{
        font-size: 3rem;
        color: white;
        margin-top: 3.5rem;
    }
    .margin-slash1{
        margin-left: 1rem;
    }
    .div_items {
        margin: 7rem 6rem 3rem 6rem;
        padding: 0;
    }
    .div_subtitle{
        background-image: none;
        padding-top: 0rem;
    }
    .item_title {
        font-size: 1.3rem;
    }
    .item_text {
        font-size: 1.2rem;
    }
    .hr_white {
        margin-left: 9rem;
    }
    .hr_black {
        margin-right: 8rem;
    }
}

/*A partir de 1100px  */
@media (min-width: 1100px) {
    .h1-div-tittle {
        margin: 5rem 3rem 3rem 12rem;
    }
    .h5-div-tittle {
        margin: 5rem 3rem 3rem 12rem;
    }
    .hr_white {
        margin-left: 12rem;
    }
    .d-inline-block {
        margin-left: 11rem;
    }
    .navbar-nav {
        margin-right: 4.5rem;
    }
    #trabajos{
        background-image: url(../img/background_cross_circle_A.svg);
        background-size: cover;
        display: flex;
    }
    #trabajos h1{
        font-size: 3.8rem;
        line-height: 2.8rem;
    }
    .div_items {
        margin-top: 8rem;
    }
    .div_trabajos{
        margin: 3rem 0 6rem 9.5rem;
    }
    .margin-slash{
        margin-right: 1rem;
    }
    .ul-trabajos {
        width: 20rem;
    }
    .li-trabajos{
        font-size: 3rem;
        line-height: 2.5rem;
    }    
    .first-li-trabajos{
        font-size: 3rem;
        color: #01011e;
    }
    .div_subtitle{
        background-image: none;
        padding-top: 0rem;
    }
    .item_title {
        font-size: 1.3rem;
    }
    .item_text {
        font-size: 1.1rem;
    }
    .hr_black {
        margin-right: 5rem;
    }
    .square_three{
        display: block;
    }
    .square_white, .square_black {
        width: 18rem;
        height: 18rem;
    }
    .square_white p, .square_black p{
        margin: 5rem 1.4rem;
    }    
    .orange_square_cross {
        margin-top: 5rem;
        margin-right: 2rem;
    }
    .we_are_idea {
        margin-top: 16rem;
        margin-left: 17rem;
    }

    .div_footer h5{
        margin-left: 17rem;
    }
    .hr_orange{
        margin-left: 17rem;
        margin-right: 60%;
    }
    .social_media{
        margin-right: 2rem;
    }    
}

/*A partir de 1200px*/

@media (min-width: 1200px) {
    .h1-div-tittle {
        margin: 5rem 3rem 3rem 17rem;
    }
    .h5-div-tittle {
        margin: 5rem 3rem 3rem 17rem;
    }
    .d-inline-block {
        margin-left: 16rem;
    }
    .navbar-nav {
        margin-right: 8.5rem;
    }
    h1{
        margin-left: 10rem;
        margin-right: 10rem;
        font-size: 6rem;
        line-height: 4.2rem;
    }
    h3{
        margin-left: 10rem;
        margin-right: 10rem;
        font-size: 5rem;
        line-height: 3.5rem;        
    }
    h5{
        margin-left: 10rem;
        margin-right: 10rem;
    }
    .hr_white{
        margin-left: 17rem;
    }
    #trabajos h1{
        margin-top: 10rem;
    }
    .div_trabajos{
        margin: 2rem 0 8rem 14rem;
    }
    .div_items{
        margin-top: 10rem;
        margin-right: 5rem;
    }
    .hr_black {
        margin-right: 9.5rem;
    }
    .div_square, .div_circle {
        margin-left: 9rem;
        margin-right: 9rem;
    }
    .div_footer {
        background-image: url(../img/background_footer_desktop.svg);
    }
    .we_are_idea {
        margin-left: 34rem;
    }
    .div_footer h5 {
        margin-left: 34rem;
    }
    .hr_orange {
        margin-left: 34rem;
        margin-right: 43%;
    }
    .orange_square_cross {
        margin-top: 16rem;
        margin-right: 10rem;
    }
    .social_media {
        margin-right: 10rem;
    }
}

/*A partir de 1300px*/

@media (min-width: 1300px) {
    .orange_square_cross {
        margin-right: 5rem;
    }
    .social_media {
        margin-right: 5rem;
    }
    .div_trabajos {
        margin: 8rem 0 8rem 14rem;
    }
    .div_items {
        margin-top: 16rem;
        margin-right: 11rem;
    }
}

/*A partir de 1470px*/

@media (min-width: 1470px) {
    .h1-div-tittle {
        margin: 5rem 3rem 3rem 20rem;
    }
    .h5-div-tittle {
        margin: 5rem 3rem 3rem 20rem;
    }
    .d-inline-block{
        margin-left: 19rem;
    }
    .margin-slash1{
        margin-left: 1.5rem;
    }
    .div_trabajos {
        margin: 8rem 0 18rem 17.5rem;
    }
    .div_items {
        margin-top: 14rem;
        margin-right: 12rem;
    }
    .hr_white{
        margin-left: 20rem;
    }    
    .hr_black {
        margin-right: 9.5rem;
    }
    .navbar-nav {
        margin-right: 8.5rem;
    }
    #trabajos h1 {
        font-size: 4rem;
        line-height: 3.2rem;
    }
    .item_title {
        font-size: 1.4rem;
    }
    .item_text {
        font-size: 1.2rem;
    }
    .square_white, .square_black {
        width: 22rem;
        height: 22rem;
    }
    .square_white p, .square_black p {
        margin: 8rem 2.4rem;
        line-height: 3rem;
    }
}

/*A partir de 1740px*/

@media (min-width: 1740px) {
    .d-inline-block{
        margin-left: 19rem;
    }
    #trabajos h1 {
        font-size: 5rem;
        line-height: 4rem;
    }
    .li-trabajos {
        font-size: 4rem;
        line-height: 3.5rem;
    }
    .ul-trabajos {
        width: 27rem;
    }
    .first-li-trabajos {
        font-size: 4.5rem;
        margin-top: 9rem;
    }
    .margin-slash1{
        margin-left: 2rem;
    }
    .div_trabajos {
        margin: 3rem 0 12rem 17.5rem;
    }
    .div_items {
        margin-top: 18rem;
        margin-right: 22rem;
    }
    .item_title {
        font-size: 1.5rem;
    }
    .item_text {
        font-size: 1.2rem;
    }
    .square_white, .square_black {
        width: 26rem;
        height: 26rem;
    }
    .square_white p, .square_black p {
        margin: 8rem 2rem;
        font-size: 6rem;
        line-height: 4.3rem;
    }
}

/*A partir de 1980px*/

@media (min-width: 1980px) {
    .h1-div-tittle {
        margin: 5rem 3rem 3rem 20rem;
    }
    .h5-div-tittle {
        margin: 5rem 3rem 3rem 20rem;
    }
    .hr_white{
        margin-left: 20rem;
    }
    #trabajos h1 {
        font-size: 6rem;
        line-height: 4.8rem;
    }   
    .div_trabajos{
        margin: 8rem 12rem 10rem 18rem;
    }
    .div_items {
        margin-top: 25rem;
    }
    .li-trabajos{
        font-size: 4em;
        line-height: 4rem;
    }    
    .first-li-trabajos{
        font-size: 5.5rem;
        color: white;
    }
    .item_title {
        font-size: 1.8rem;
    }
    .item_text {
        font-size: 1.4rem;
    }
    .square_white, .square_black {
        width: 30rem;
        height: 30rem;
    }
    .square_white p, .square_black p {
        margin: 10rem 3rem;
        font-size: 7rem;
        line-height: 5rem;
    }
}