/******************************Generales****************************************/
@font-face {
    font-family: 'DINPro-Bold';
    font-style: normal;
    font-weight: normal;
    src: url('../../fonts/DINPro-Bold_13934.ttf') format('truetype');
}
@font-face {
    font-family: 'Helvetica-Neue-Light';
    font-style: normal;
    font-weight: normal;
    src: url('../../fonts/Helvetica/HelveticaNeueLight.ttf') format('truetype');
}
@font-face {
    font-family: 'Helvetica-Neue-Bold';
    font-style: normal;
    font-weight: normal;
    src: url('../../fonts/Helvetica/helvetica-neue-lt-std-75-bold-590b9e7229917.otf') format('opentype');
}
@font-face {
    font-family: 'Helvetica-Neue-Regular';
    font-style: normal;
    font-weight: normal;
    src: url('../../fonts/Helvetica/HelveticaNeueRegular.ttf') format('truetype');
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.row, .segmento{
    width: 100%;
    margin: 0;
}
img{
    image-rendering: -webkit-optimize-contrast; /* Safari         */
    image-rendering: optimize-contrast;         /* CSS3 Proposed  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+           */
    max-width: 100%;
    height: auto;
}
p, h1, h2, h3, h4, h5, h6{
    margin: 0;
}
.titleSections{
    font-size: calc(30px + (50 - 30) * (100vw - 320px) / (1920 - 320));
    font-family: 'Helvetica-Neue-Bold';
    color: #000000;
}
.subtitleSections{
    font-size: calc(18px + (22 - 18) * (100vw - 320px) / (1920 - 320));
    font-family: 'Helvetica-Neue-Bold';
    color: #5C5C5C;
    padding: 30px 0px;
}
.paragraphSections{
    font-size: calc(14px + (20 - 14) * (100vw - 320px) / (1920 - 320));
    font-family: 'Helvetica-Neue-Regular';
    line-height: normal;
    color: #5C5C5C;
}
.linkSections{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    font-size: calc(14px + (18 - 14) * (100vw - 320px) / (1920 - 320));
    font-family: 'Helvetica-Neue-Regular';
    padding-top: 20px;
}
.linkSections a{
    color:#09A6E0;
}
.imgResponsive{
    display:none !important;
}
.fromLeft{
    transform: translateX(-100%);
    opacity: 0;
    transition: all 1s ease-in-out;
}
.fromRight{
    transform: translateX(100%);
    opacity: 0;
    transition: all 1s ease-in-out;
}
.toRight, .toLeft{
    transform: translateX(0);
    opacity: 1;
}
/******************************Contenedor****************************************/
main.container-grid{
    display:grid;
    grid-template-areas: "seccion1 seccion1 seccion1 seccion1 seccion1 seccion1 seccion1 seccion1 seccion1 seccion1"
        "seccion2  seccion2 seccion2 seccion2 seccion2 seccion2 seccion2 seccion2 seccion2 seccion2"
        "seccion3  seccion3   seccion3  seccion3  seccion3  seccion3  seccion3  seccion3  seccion3  seccion3"
        "seccion4  seccion4  seccion4 seccion4 seccion4 seccion4 seccion4 seccion4 seccion4 seccion4"
        "seccion5  seccion5   seccion5  seccion5  seccion5  seccion5  seccion5  seccion5  seccion5  seccion5"
        "seccion6   seccion6  seccion6  seccion6  seccion6  seccion6  seccion7  seccion7  seccion7  seccion7"
        "seccion8  seccion8  seccion8  seccion8  seccion8  seccion8  seccion8  seccion8  seccion8  seccion8"
        "seccion9  seccion9   seccion9  seccion9  seccion9  seccion10  seccion10  seccion10  seccion10  seccion10 "
        "seccion11  seccion11   seccion11  seccion11  seccion11   seccion12  seccion12  seccion12  seccion12  seccion12"
        "seccion13 seccion13   seccion13  seccion13  seccion13  seccion14  seccion14  seccion14  seccion14  seccion14"
        "seccion15 seccion15   seccion15  seccion15  seccion15  seccion16  seccion16  seccion16  seccion16  seccion16"
        "seccion17 seccion17  seccion17  seccion17  seccion17  seccion18  seccion18  seccion18  seccion18  seccion18"
        "seccion19 seccion19   seccion19  seccion19  seccion19  seccion20  seccion20  seccion20  seccion20  seccion20"
        "seccion21 seccion21   seccion21  seccion21  seccion21  seccion21  seccion21  seccion21  seccion21  seccion21"
        "seccion22 seccion22   seccion22  seccion22  seccion22  seccion22  seccion22  seccion22  seccion22  seccion22"
        "seccion23 seccion23   seccion23  seccion23  seccion23  seccion23  seccion23  seccion23  seccion23  seccion23";
    grid-template-columns: repeat(10, 1fr);
}
/******************************Seccion 1****************************************/
.section1{
    grid-area:seccion1;
    background-image:url('https://assets.claro360.com/Corporativo/construccion/section1.png');
    background-color: #ffffff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 100vh;
    margin-top: 60px;
    font-family: 'Helvetica-Neue-Bold';
    color: #ffffff;
}
.section1 .containerText {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    min-height: 100vh;
    justify-content: center;
    align-items: flex-start;
    padding-left: 7.5%;
    max-width: 1030px;
    width: 51.5%;
}
.section1 h6 {
    font-size: calc(28px + (60 - 28) * (100vw - 320px) / (1920 - 320));
    padding: 29px 10px 29px 0;
}
.section1 p{
    font-size: calc(20px + (24 - 20) * (100vw - 320px) / (1920 - 320));
}
.section1 button {
    font-family: arial;
    font-weight: bold;
    background-color: #9F2240;
    border-radius: 40px;
    color: #ffffff;
    margin-top: 66px;
    min-width: 297px;
    outline: none;
    border: 0px;
}
.section1 button:focus{
    box-shadow:0px 0px 10px black;
}
.section1 button p {
    font-size: calc(23px + (35 - 23) * (100vw - 320px) / (1920 - 320));
    display: block;
    padding: 10px 0;
}
.section1 img{
    width: 52.5%;
}
/******************************Seccion 2****************************************/
.section2{
    grid-area: seccion2;
    font-family: 'Helvetica-Neue-Bold';
    color: #5C5C5C;
    text-align: center;
    padding: 110px 0;
}
.section2 .containerText {
    width: 67.5%;
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    margin: auto;
}
.section2 h6 {
    font-size: calc(28px + (50 - 28) * (100vw - 320px) / (1920 - 320));
    color: #000000;
    padding: 0px 28% 50px;
}
.section2 p{
    font-family: 'Helvetica-Neue-Regular';
    font-size: calc(14px + (24 - 14) * (100vw - 320px) / (1920 - 320));
    padding: 0px 40px 0px;
    line-height: normal;
}
/******************************Seccion 3****************************************/
.section3{
    grid-area: seccion3;
    font-family: 'Helvetica-Neue-Bold';
    color: #5C5C5C;
    text-align: center;
    padding-bottom: 211px;
}
.section3 .containerText {
    width: 88%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: center;
    margin: auto;
}
.section3 .title {
    font-size: calc(24px + (50 - 24) * (100vw - 320px) / (1920 - 320));
    color: #000000;
    padding: 0px 0px 107px;
}
.section3 p{
    font-family: 'Helvetica-Neue-Regular';
}
.section3 .containerServices {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: center;
    flex-direction: row;
}
.section3 .serviceIcons{
    width:25%;
}
.section3 .serviceIcons h6{
    padding:30px 0px;
    font-size: calc(18px + (24 - 18) * (100vw - 320px) / (1920 - 320));
    width: 45%;
    margin: auto;
}
.section3 .serviceIcons p {
    font-size: calc(14px + (20 - 14) * (100vw - 320px) / (1920 - 320));
    padding: 0px 31%;
}
/******************************Seccion 4****************************************/
.section4{
    grid-area: seccion4;
    position: relative;
    overflow: hidden;
    height: 100vh;
}
.section4 img{
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
    object-fit: cover;
}
.section4 .containerText {
    display: flex;
    align-content: flex-end;
    height: auto;
    width: 65%;
    margin: auto;
    justify-content: center;
    align-items: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
}
.section4 .box {
    background-color: rgba(255,255,255,0.62);
    height: 395px;
    height: auto;
    padding: 6.8% 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section4 .box h6 {
    font-size: calc(36px + (68 - 36) * (100vw - 320px) / (1920 - 320));
    font-family: 'Helvetica-Neue-Bold';
    color: #000000;
    text-align: center;
    padding: 0 21%;
}
/******************************Seccion 5****************************************/
.section5{
    grid-area: seccion5;
    color: #5C5C5C;
    padding-bottom: 10%;
}
.section5 h6 {
    font-family: 'Helvetica-Neue-Bold';
    font-size: calc(18px + (30 - 18) * (100vw - 320px) / (1920 - 320));
    text-align: center;
    padding: 85px 30% 40px;
}
.section5 p {
    font-family: 'Helvetica-Neue-Regular';
    font-size: calc(14px + (24 - 14) * (100vw - 320px) / (1920 - 320));
    text-align: left;
    line-height: normal;
    padding: 0 26% 0px 21%;
}
.section5 a{
    font-family: 'Helvetica-Neue-Regular';
    font-size: calc(14px + (18 - 14) * (100vw - 320px) / (1920 - 320));
    text-align: left;
    color: #09A6E0;
    margin: 0 21%;
}
/******************************Seccion 6****************************************/
.section6{
    grid-area:seccion6;
    width: 100%;
}
.section6 img {
    width: 100%;
    padding: 0 3% 0 6%;
}
/******************************Seccion 7****************************************/
.section7 {
    grid-area: seccion7;
    text-align: right;
    padding: 0px 17.7% 0% 0.7%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
}
/******************************Seccion 8****************************************/
.section8 {
    grid-area: seccion8;
    text-align: center;
    padding: 15% 0px;
    width: 59%;
    margin: auto;
}
.section8 img{
    padding: 30px 0;
    z-index: 2;
    position: relative;
}
.section8 h6{
    padding: 0 16%;
    z-index: 1;
}
.section8 h5 {
    padding: 0 15% 0 16%;
    z-index: 1;
}
.section8 p{
    text-align:left;
    padding: 30px 15% 0px;
    z-index: 1;
}
.section8 a{
    text-align: left;
    margin: 0 15%;
    z-index: 1;
}
/******************************Seccion 9****************************************/
.section9 {
    grid-area: seccion9;
    text-align: left;
    padding: 0% 23.5% 0px 13.7%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
}
/******************************Seccion 10****************************************/
.section10{
    grid-area:seccion10;
}
.section10 .containerImages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    padding: 0 13.7% 0% 0%;
    justify-items: center;
    align-items: center;
}
.section10 .stateImgOne {
    z-index: 1;
    width: 100%;
}
.section10 .stateImgTwo {
    z-index: 0;
    width: 100%;
    padding: 0 0% 0 5%;
}
.section10 .stateImgTwo.spaceActive {
    padding: 0 0% 0 5%;
}
/******************************Seccion 11****************************************/
.section11 {
    grid-area: seccion11;
    padding: 30% 0% 30% 7.7%;
}
.section11 img {
    position: relative;
    z-index: 2;
    width: 100%;
}
/******************************Seccion 12****************************************/
.section12{
    grid-area: seccion12;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
.section12 .containerText {
    padding: 0px 13.7% 0% 18%;
    text-align: right;
    z-index: 1;
}
.section12 .linkSections {
    justify-content: flex-end;
}
.section12 .titleSections{
    padding-left: 0%;
}
.section12 .subtitleSections{
    padding-left: 10%;
}
.section12 .paragraphSections{
    padding-left: 9%;
}
/******************************Seccion 13****************************************/
.section13{
    grid-area: seccion13;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-bottom: 20%;
}
.section13 .containerText {
    padding: 0 23.7% 0% 13.7%;
    text-align: left;
}
.section13 .subtitleSections{
    padding-right: 10%;
}
.section13 .paragraphSections{
    padding-right: 9%;
}
/******************************Seccion 14****************************************/
.section14{
    grid-area: seccion14;
    padding: 0 13.7% 25% 0;
}
.section14 div{
    position: relative;
}
.section14 .showElement{
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition:opacity 1.2s;
}
.section14 img{
    width: 100%;
}
.section14 .detectionAnimated{
    animation: opacity 2.5s  ease-in-out forwards ;
    animation-iteration-count: 1;
}
@keyframes opacity{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
/******************************Seccion 15****************************************/
.section15{
    grid-area: seccion15;
    background-color: #F0F0F0;
    padding: 0% 14.7% 5% 13.7%;
}
.section15 img {
    display: block;
    margin: auto;
    padding: 10% 0%;
}
.section15 .titleSections {
    padding-right: 10%;
}
/******************************Seccion 16****************************************/
.section16{
    grid-area: seccion16;
    background-color: #000000;
    padding: 5% 13.7% 5% 11.7%;
    display: flex;
    flex-direction: column;
}
.section16 .containerText{
    padding-top:10%;
}
.section16 h6, .section16 h5, .section16 p{
    color:#ffffff;
}
.section16 img{
    display: block;
    margin: auto;
    padding-top: 10%;
}
/******************************Seccion 17****************************************/
.section17 {
    grid-area: seccion17;
    padding: 20% 0 20% 13.7%;
}
.section17 img{
    width: 100%;
    transform: translateX(20px);
}
/******************************Seccion 18****************************************/
.section18 {
    grid-area: seccion18;
    padding: 15% 13.7% 15% 20%;
    text-align: right;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
}
.section18 .linkSections {
    justify-content: flex-end;
}
/******************************Seccion 19****************************************/
.section19 {
    grid-area: seccion19;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0% 18.7% 0 13.7%;
}
/******************************Seccion 20****************************************/
.section20 {
    grid-area: seccion20;
    padding: 15% 13.7% 20% 0%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-end;
}
/******************************Seccion 21****************************************/
.section21{
    grid-area: seccion21;
    background-image: url('https://assets.claro360.com/Corporativo/construccion/section21.png');
    background-color: #ffffff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    position: relative;
    margin:auto;
    width: 100%;
    transition: all 2.5s;
}
.section21 .containerText {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    min-height: 100vh;
    justify-content: center;
    align-items: flex-start;
    padding-left: 7.5%;
    padding-top: 7%;
    max-width: 700px;
    width: 100%;
    position: relative;
    z-index: 2;
    transition: all 1.5s ease-in-out;
    transition-delay: 0.4s;
}
.section21 h6{
    font-family: 'Helvetica-Neue-Bold';
    font-size: calc(28px + (60 - 28) * (100vw - 320px) / (1920 - 320));
    color:#ffffff;
    position: relative;
}
.section21 h6:after {
    content: url("");
    background-image: url('https://assets.claro360.com/landingsMexico360/corporativo/construccion/web/logo_360_rojo.png');
    height: auto;
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    position: absolute;
    left: 100%;
    bottom: 8px;
    width: 140px;
    margin-left: 15px;
}
.section21 h5 {
    font-size: calc(20px + (32 - 20) * (100vw - 320px) / (1920 - 320));
    font-family: 'Helvetica-Neue-Bold';
    padding-right: 50px;
    color: #ffffff;
    padding: 29px 0px 0px 0px;
}
.section21 .overlaySection{
    position: absolute;
    background-color: rgba(0,0,0,0.65);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    transition: all 1.8s;
}
/******************************Seccion 22****************************************/
.section22{
    grid-area:seccion22;
}
.section22 .containerBoxGrid {
    display: grid;
    grid-template-areas: "box1 box1 box1"
        "box2 box3 box4"
        "box5 box6 box7";
    width: 80%;
    margin: auto;
    padding: 10% 0 5% 0;
    grid-gap: 50px 11.8%;
}
.section22 h5{
    font-family: 'Helvetica-Neue-Bold';
    font-size: calc(18px + (24 - 18) * (100vw - 320px) / (1920 - 320));
    color:#5C5C5C;
    padding-bottom:22px;
}
.section22 p{
    font-family: 'Helvetica-Neue-Regular';
    font-size: calc(14px + (20 - 14) * (100vw - 320px) / (1920 - 320));
    color:#5C5C5C;
}
.section22 h6 {
    font-family: 'Helvetica-Neue-Bold';
    font-size: calc(24px + (50 - 24) * (100vw - 320px) / (1920 - 320));
    color: #000000;
    padding-bottom: 72px;
    text-align: center;
}
.section22 .box1{
    grid-area: box1;
}
.section22 .box2{
    grid-area: box2;
}
.section22 .box3{
    grid-area: box3;
}
.section22 .box4{
    grid-area: box4;
}
.section22 .box5{
    grid-area: box5;
}
.section22 .box6{
    grid-area: box6;
}
.section22 .box7{
    grid-area: box7;
}
/******************************Seccion 23****************************************/
.section23{
    grid-area:seccion23;
    background-color:#F0F0F0;
}
.section23 .containerText {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.section23 h6{
    font-size: calc(24px + (40 - 24) * (100vw - 320px) / (1920 - 320));
    padding:59px 0px;
    font-family: 'Helvetica-Neue-Bold';
}
.section23 button {
    background-color: #9F2240;
    font-family: arial;
    font-weight: bold;
    border-radius: 18px;
    color: #ffffff;
    margin-bottom: 79px;
    min-width: 297px;
    outline: none;
    border: 0px;
}
.section23 button p {
    font-size: calc(24px + (34 - 24) * (100vw - 320px) / (1920 - 320));
    height: 60px;
    line-height: 40px;
    display: block;
    padding: 10px 0;
}
.section23 button:focus{
    box-shadow:0px 0px 10px black;
}

/*PORTRAIT*/
@media (max-width: 991px){
    /******************************Generales****************************************/
    .imgWeb{
        display:none !important;
    }
    .imgResponsive{
        display:block !important;
        margin:auto;
    }
    .fromLeft{
        transform:translateX(0);
        opacity:1;
        transition:all 1s ease-in-out;
    }
    .fromRight{
        transform:translateX(0);
        opacity:1;
        transition:all 1s ease-in-out;
    }
    .toRight, .toLeft{
        transform:translateX(0);
        opacity:1;
    }
    .subtitleSections {
        padding: 20px 0px;
    }
    .linkSections{
        padding-top: 10px;
    }
    /******************************Contenedor****************************************/
    main.container-grid{
        display:grid;
        grid-template-areas: "seccion1 seccion1"
            "seccion2  seccion2"
            "seccion3  seccion3"
            "seccion4  seccion4"
            "seccion5  seccion5"
            "seccion6   seccion6"
            "seccion7 seccion7"
            "seccion8  seccion8"
            "seccion9  seccion9"
            "seccion10 seccion10"
            "seccion12 seccion12"
            "seccion11  seccion11"
            "seccion13 seccion13"
            "seccion14 seccion14"
            "seccion15 seccion15"
            "seccion16 seccion16"
            "seccion18 seccion18"
            "seccion17 seccion17"
            "seccion19 seccion19"
            "seccion20 seccion20"
            "seccion21 seccion21"
            "seccion22 seccion22"
            "seccion23 seccion23";
        grid-template-columns: repeat(2, 1fr);
    }
    /******************************Section1 ****************************************/
    .section1{
        background-image:url('https://assets.claro360.com/Corporativo/construccion/Responsive/section1.png');
    }
    .section1 .containerText {
        width: 100%;
        padding-right: 10%;
    }
    .section1 .containerText img {
        width: 64%;
        margin-top: 10%;
    }
    .section1 button{
        min-width:200px;
        margin-bottom:10%;
    }
    .section1 button p {
        height: 40px;
        line-height: 20px;
    }
    /******************************Section2 ****************************************/
    .section2{
        padding:15% 0;
        text-align:left;
    }
    .section2 .containerText{
        width:100%;
    }
    .section2 h6 {
        padding: 0px 7.5% 50px 7.5%;
    }
    .section2 p {
        padding: 0px 7.5% 0px;
    }
    /******************************Section3 ****************************************/
    .section3{
        padding-bottom:100px;
    }
    .section3 .title{
        padding:0 0 50px;
    }
    .section3 .containerServices{
        flex-direction:column;
        grid-row-gap: 50px;
    }
    .section3 .serviceIcons {
        width: 100%;
    }
    /******************************Section4 ****************************************/
    .section4 .containerText{
        width:90%;
    }
    .section4 .box h6 {
        text-align: left;
        padding: 5% 3%;
    }
    /******************************Section5 ****************************************/
    .section5 {
        padding-bottom: 15%;
    }
    .section5 h6 {
        text-align: left;
        padding: 50px 7.5% 30px;
    }
    .section5 p {
        padding: 0 7.5% 0px;
    }
    .section5 a, section6 img {
        margin: 0 7.5%;
    }
    /******************************Section6 ****************************************/
    .section6 img {
        padding: 0 7.5% 10%;
    }
    /******************************Section7 ****************************************/
    .section7 {
        text-align: left;
        padding: 10% 7.5% 15%;
        align-items: flex-start;
    }
    .section7 .paragraphSections {
        padding-left: 0;
    }
    /******************************Section8 ****************************************/
    .section8 {
        width: 100%;
        padding: 10% 0px 15%;
    }
    .section8 h6 {
        padding: 0 7.5%;
    }
    .section8 img {
        padding: 30px 7.5%;
    }
    .section8 h5 {
        padding: 0 7.5%;
        text-align:left;
    }
    .section8 p {
        padding: 30px 7.5% 10px;
    }
    .section8 a {
        margin: 0 7.5%;
    }
    /******************************Section9 ****************************************/
    .section9 {
        padding: 10% 7.5% 0;
    }
    /******************************Section10 ****************************************/
    .section10 .containerImages {
        padding: 10% 7.5% 20%;
    }
    /******************************Section11 ****************************************/
    .section11 {
        padding: 10% 7.5% 15%;
    }
    /******************************Section12 ****************************************/
    .section12 {
        grid-area: seccion12;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
    }
    .section12 .containerText {
        padding: 0 7.5% 0;
        text-align: left;
    }
    .section12 .linkSections {
        justify-content: flex-start;
    }
    .section12 .titleSections, .section12 .subtitleSections, .section12 .paragraphSections {
        padding-left: 0;
    }
    /******************************Section13 ****************************************/
    .section13{
        padding-bottom:0;
    }
    .section13 .containerText {
        padding: 10% 7.5%;
        text-align: left;
    }
    /******************************Section14 ****************************************/
    .section14 {
        padding: 0 7.5% 20%;
    }
    /******************************Section15 ****************************************/
    .section15 {
        padding: 15% 7.5% 15%;
    }
    .section15 img {
        padding: 5% 0% 10%;
    }
    .section15 .containerText {
        padding: 0;
    }
    .section15 .titleSections {
        padding-right: 0;
    }
    /******************************Section16 ****************************************/
    .section16 {
        padding: 10% 7.5%;
    }
    .section16 img {
        padding: 15% 0;
    }
    /******************************Section17 ****************************************/
    .section17 {
        padding: 15% 7.5% 10%;
    }
    .section17 img {
        transform: translateX(0px);
    }
    /******************************Section18 ****************************************/
    .section18 {
        padding: 15% 7.5% 0;
        text-align: left;
    }
    .section18 .linkSections {
        justify-content: flex-start;
    }
    /******************************Section19 ****************************************/
    .section19 {
        padding: 15% 7.5% 10%;
    }
    .section19 .titleSections {
        padding-right: 0;
    }
    /******************************Section20 ****************************************/
    .section20 {
        padding: 0% 7.5% 20%;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    /******************************Section21 ****************************************/
    .section21{
        background-image:url('https://assets.claro360.com/Corporativo/construccion/Responsive/section21.png');
        background-position:right;
    }
    .section21 .containerText {
        width: 100%;
    }

    .section21 h6:after {
        bottom: 3px;
        margin-left: 10px;
        width: 80px;
    }

    .section21 h5 {
        padding: 29px 25% 0px 0px;
    }
    /******************************Section22 ****************************************/
    .section22 .containerBoxGrid {
        grid-template-areas: "box1 box1 box1"
            "box2 box2 box2"
            "box5 box5 box5"
            "box3 box3 box3"
            "box6 box6 box6"
            "box4 box4 box4"
            "box7 box7 box7";
        grid-gap: 40px 11.8%;
        padding: 20% 0 10% 0;
        width:84%;
    }
    .section22 h6 {
        padding-bottom: 10px;
    }
    /******************************Section23 ****************************************/
    .section23 button {
        min-width: 200px;
    }
    .section23 button p {
        height: 40px;
        line-height: 20px;
    }
}

@media only screen and (min-width: 768px) and (max-width:991px) and (orientation: portrait){
    .section1 .containerText {
        width: 93%;
    }
    .section4 .box h6 {
        padding: 5% 10%;
    }
    .section21 h5 {
        padding: 29px 44% 0px 0px;
    }
    
    .section21 h6:after {
        bottom: 2px;
        margin-left: 10px;
        width: 95px;
    }
}

@media only screen and (min-width: 992px) and (max-width:1300px) and (orientation: portrait){
    .section1 .containerText {
        width: 64.5%;
    }
    .section2 .containerText {
        width: 82.5%;
    }
    .section2 h6 {
        padding: 0px 23% 50px;
    }
    .section3 .serviceIcons h6 {
        width: 70%;
    }
    .section3 .serviceIcons p {
        padding: 0px 30px;
    }
    .section3 .serviceIcons img{
        max-width:120px;
    }
    .section4 .box h6 {
        padding: 0 15%;
    }
    .section5 h6 {
        padding: 85px 20% 35px 20%;
    }
    .section5 p {
        padding: 0 20% 0px;
    }
    .section5 a {
        margin: 0 20%;
    }
    .section6 {
        display: flex;
        align-items: center;
    }
    .section6 img {
        padding: 0 5% 0 7.7%;
    }
    .section7 {
        padding: 0px 17.7% 0% 2%;
    }
    .section8 {
        width: 75%;
    }
    .section8 h6 {
        padding: 0 8%;
    }
    .section9 {
        padding: 15% 7% 15% 13.7%;
    }
    .section10 {
        display: flex;
        align-items: center;
    }
    .section11 {
        display: flex;
        align-items: center;
        padding: 15% 0% 15% 13.7%;
    }
    .section12 .containerText {
        padding: 15% 13.7% 15% 8%;
    }
    .section13 .containerText {
        padding: 15% 8% 15% 13.7%;
    }
    .section14 {
        display: flex;
        align-items: center;
        padding: 0 13.7% 10% 0;
    }
    .section15 {
        padding: 0% 11.7% 5% 13.7%;
    }
    .section15 img {
        padding: 10% 0%;
    }
    .section15 .titleSections {
        padding-right: 0%;
    }
    .section17 {
        display: flex;
        align-items: center;
    }
    .section17 img {
        transform: translateX(0px);
    }
    .section18 {
        padding: 15% 13.7% 15% 8%;
    }
    .section19 {
        padding: 0% 8% 15% 13.7%;
    }
    .section19 .titleSections {
        padding-right: 0%;
    }
    .section20 {
        display: flex;
        align-items: center;
        padding: 15% 13.7% 20% 5%;
    }

    .section21 h6:after {
        bottom: 3px;
        width: 110px;
        height: 90px;
    }

    .section21 .containerText {
        width: 50%;
    }
}


/*LANDSCAPE*/
@media (max-width: 990px){
    .section11 {
        padding: 10% 7.5% 10%;
    }
    .section14 .showElement{
        opacity: 1;
    }
}

@media (max-width: 991px) and (orientation:landscape){
    .section1{
        background-image:url('https://assets.claro360.com/Corporativo/construccion/section1.png');
    }
    .section1 .containerText img {
        width: 35%;
    }    
    .section4 .imgWeb{
        display:block !important;
    }
    .section4 .imgResponsive{
        display:none !important;
    }
    .section4 .box h6 {
        padding: 0 9%;
    }
    .section7 {
        padding: 10% 7.5% 5%;
    }
    .section8 {
        padding: 10% 0px 5%;
    }
    .section21{
        background-image:url('https://assets.claro360.com/Corporativo/construccion/section21.png');
    }
}

@media (min-width: 992px) and (max-width:1199px) and (orientation: landscape){
    .section2 p{
        padding: 0 7% 0;
    }
    .section3 {
        padding-bottom: 8%;
    }
    .section3 .serviceIcons h6 {
        width: 75%;
    }
    .section3 .serviceIcons img{
        max-width:110px;
    }
    .section7 {
        padding: 0px 17.7% 0% 4%;
    }
    .section8 {
        width: 70%;
    }
    .section11 {
        padding: 15% 0% 20% 13.7%;
    }
    .section13 {
        padding-bottom: 0;
    }
    .section14 {
        padding: 0 13.7% 5% 0;
    }
    .section15 img {
        padding: 10% 0%;
    }
    .section17 img {
        transform: translateX(0px);
    }

    .section21 h6:after {
        bottom: 3px;
        margin-left: 10px;
        width: 100px;
        height: 90px;
    }
}
@media (min-width: 1200px) and (max-width:1300px) and (orientation: landscape){
    .section2 p{
        padding: 0 7% 0;
    }
    .section3 {
        padding-bottom: 8%;
    }
    .section3 .serviceIcons h6 {
        width: 75%;
    }
    .section3 .serviceIcons img{
        max-width:110px;
    }
    .section7 {
        padding: 0px 17.7% 0% 4%;
    }
    .section8 {
        width: 70%;
    }
    .section11 {
        padding: 15% 0% 20% 13.7%;
    }
    .section13 {
        padding-bottom: 0;
    }
    .section14 {
        padding: 0 13.7% 5% 0;
    }
    .section15 img {
        padding: 10% 0%;
    }
    .section17 img {
        transform: translateX(0px);
    }

    .section21 h6:after {
        bottom: 7px;
        margin-left: 10px;
        width: 100px;
        height: 90px;
    }
}

@media (min-width: 1301px) and (max-width:1700px) and (orientation: landscape){
    .section2 .containerText {
        width: 60.5%;
    }
    .section2 h6 {
        padding: 0px 20% 50px;
    }
    .section2 p {
        padding: 0px 0px 0px;
    }
    .section5 h6 {
        padding: 85px 22% 40px;
    }
    .section7 {
        padding: 0px 17.7% 0% 4.7%;
    }
    .section6 img {
        padding: 0 0 0 10%;
    }
    .section12 .titleSections {
        padding-left: 10%;
    }
    .section13 .containerText {
        padding: 0 16.7% 0% 13.7%;
    }
    .section15 .titleSections {
        padding-right: 10%;
    }
    .section18 {
        padding: 15% 13.7% 15% 18%;
    }
    .section19 .titleSections {
        padding-right: 3%;
    }
    .section21 h5 {
        padding: 29px 25% 0px 0px;
    }

    .section21 h6:after {
        bottom: 7px;
        width: 110px;
        height: 90px;
    }
}

@media (min-width: 2100px){
    .section2 h6 {
        padding: 0px 23% 50px;
    }
    .section3 .containerText {
        width: 80%;
    }
    .section3 .serviceIcons h6 {
        width: 40%;
    }
    .section5 {
        padding-bottom: 7%;
    }
    .section5 h6 {
        padding: 85px 25% 40px;
    }
    .section6 img {
        padding: 0 8% 0 10.7%;
    }
    .section7 {
        padding: 0px 20.7% 0% 10%;
    }
    .section8 img {
        width: 100%;
    }
    .section9 {
        padding: 0% 20.5% 0px 20.7%;
    }
    .section10 .containerImages {
        padding: 0 17.7% 0% 0%;
    }
    .section11 {
        padding: 30% 0% 30% 17.5%;
    }
    .section12 .containerText {
        padding: 0px 20.7% 0% 23%;
    }
    .section13 .containerText {
        padding: 0 16.7% 0% 20.7%;
    }
    .section14 {
        padding: 0 20.7% 25% 0;
        display: flex;
        justify-content: flex-end;
    }
    .section14 img{
        width: 100%;
        min-width: 1100px;
        max-width: 1200px;
    }
    .section15 img {
        padding: 10% 0% 5%;
        width: 100%;
    }
    .section16 img {
        width: 100%;
    }
    .section18 {
        padding: 15% 20.7% 15% 22.7%;
    }
    .section19 {
        padding: 0% 17.7% 0 20.7%;
    }
    .section20 {
        padding: 15% 18.7% 20% 0;
        display: flex;
        justify-content: flex-end;
    }
    .section20 img{
        width:100%;
    }
    .section21 .containerText {
        max-width: 780px;
    }

    .section21 h6:after {
        bottom: 7px;
        width: 170px;
    }

    .section22 h6 {
        padding-bottom: 20px;
    }
    .section22 .containerBoxGrid {
        grid-gap: 100px 11.8%;
    }
}