/******************************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(29px + (50 - 29) * (100vw - 320px) / (1920 - 320));
    font-family: 'Helvetica-Neue-Bold';
    color:#11507E;
}
.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-7   seccion6-7 seccion6-7 seccion6-7 seccion6-7 seccion6-7 seccion6-7 seccion6-7 seccion6-7 seccion6-7"
        "seccion8  seccion8 seccion8 seccion8 seccion8 seccion8 seccion8 seccion8 seccion8 seccion8"
        "seccion9 seccion9 seccion9 seccion9 seccion10  seccion10 seccion10 seccion10 seccion10 seccion10"
        "seccion11  seccion11 seccion11 seccion11 seccion11 seccion11 seccion11 seccion11 seccion11 seccion11"
        "seccion12  seccion12 seccion12 seccion12 seccion12 seccion13 seccion13 seccion13 seccion13 seccion13"
        "seccion14 seccion14 seccion14 seccion14 seccion14 seccion14 seccion14 seccion14 seccion14 seccion14"
        "seccion15 seccion15 seccion15 seccion15 seccion15 seccion15 seccion15 seccion15 seccion15 seccion15"
        "seccion16 seccion16 seccion16 seccion16 seccion16 seccion16 seccion16 seccion16 seccion16 seccion16"
        "seccion17 seccion17 seccion17 seccion17 seccion17 seccion17 seccion17 seccion17 seccion17 seccion17";
    grid-template-columns:repeat(10, 1fr);
}
/******************************Seccion 1****************************************/
.section1{
    grid-area:seccion1;
    background-image:url('https://assets.claro360.com/Corporativo/turismo/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: 890px;
    width: 50%;
}
.section1 h6{
    font-size: calc(28px + (60 - 28) * (100vw - 320px) / (1920 - 320));
    padding:29px 0px;
}
.section1 p{
    font-size: calc(20px + (24 - 20) * (100vw - 320px) / (1920 - 320));
    padding-right: 50px;
}
.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 10%;
}
.section2 .containerText {
    width: 58.5%;
    max-width: 1200px;
    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 18% 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: 100%;
    margin: auto;
}
.section3 .serviceIcons p {
    font-size: calc(14px + (20 - 14) * (100vw - 320px) / (1920 - 320));
    padding: 0px 90px;
    padding: 0 18%;
}
/******************************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: #056571;
    text-align: center;
    padding: 0 18.5%;
}
/******************************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 23% 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 23% 0px;
}
.section5 a{
    font-family: 'Helvetica-Neue-Regular';
    font-size: calc(14px + (18 - 14) * (100vw - 320px) / (1920 - 320));
    text-align: left;
    color:#09A6E0;
    margin:0 23%;
}
/******************************Seccion 6-7****************************************/
.section6-7{
    grid-area:seccion6-7;
    background-color:#ffffff;
    display:grid;
    grid-template-areas:"seccion6-7-1";
}
.section6-7 .seccion6-7 {
    grid-area: seccion6-7-1;
    display: flex;
    flex-direction: row;
    border-radius: 40px;
    box-shadow: 0px 2px 6px #00000029;
    margin: 8% 6.7%;
}
.section6-7 .seccion6-7 .containerText{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5% 7.5%;
    text-align: right;
    width:45%;
}
.section6-7 .seccion6-7 h6{
    color:#FFC172;
}
.section6-7 .seccion6-7 .linkSections {
    justify-content: flex-end;
}
.section6-7 .seccion6-7 img{
    width:55%;
    object-fit: contain;
}
/******************************Seccion 7****************************************/
.section7 {
    grid-area: seccion7;
    text-align: right;
    padding: 0px 13.7% 0% 20%;
    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: 10% 0px;
    width: 59%;
    margin: auto;
}
.section8 img{
    padding:30px 0;
    z-index:2;
    position:relative;
}
.section8 h6 {
    padding: 0 28%;
    z-index: 1;
}
.section8 h5 {
    padding: 0 22%;
    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% 4.5% 0px 17.7%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #FFC172;
}
.section9 h6, .section9 h5, .section9 p{
    color:#ffffff;
}
/******************************Seccion 10****************************************/
.section10 {
    grid-area: seccion10;
    padding: 20% 0 20% 0;
    background-color: #FFC172;
    margin-left: -1px;
}
.section10 .containerImages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    padding: 0px 12.7% 0% 8%;
    justify-items: center;
}
.section10 .stateImgOne {
    z-index: 1;
    width: 100%;
}
.section10 .stateImgTwo {
    z-index: 0;
    width: 100%;
}
.section10 .stateImgOne.spaceActive {
    margin-right:10%;
}
.section10 .stateImgTwo.spaceActive {
    margin-left:10%;
}
/******************************Seccion 11****************************************/
.section11{
    grid-area: seccion11;
    background-color: #FFC172;
    display:grid;
    grid-template-areas:"seccion11-1 seccion11-1 seccion11-1 seccion11-1 seccion11-1 seccion11-1 seccion11-2 seccion11-2 seccion11-2 seccion11-2"
        "seccion11-3 seccion11-3 seccion11-3 seccion11-3 seccion11-3 seccion11-4 seccion11-4 seccion11-4 seccion11-4 seccion11-4";
    grid-template-columns:repeat(10, 1fr);
}
/******************************Seccion 11-1****************************************/
.seccion11-1 {
    grid-area: seccion11-1;
    padding: 5% 0% 25% 13.7%;
    background-color: #FFC172;
    display: flex;
    align-items: center;
    justify-content: center;
}
.seccion11-1 div{
    position:relative;
}
.seccion11-1 img {
    position: relative;
    z-index: 2;
}
.seccion11-1 .pulse{
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity:0;
    transition:opacity 1.2s;
}
.seccion11-1 .imgAnimated{
    animation:pulseImg 1s  linear forwards;
    animation-iteration-count: 5;
}
@keyframes pulseImg{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
.seccion11-2 h6, .seccion11-3 h6{
    color:#ffffff;
}
.seccion11-2 h5, .seccion11-2 p, .seccion11-3 h5, .seccion11-3 p{
    color:#ffffff;
}
/******************************Seccion 11-2****************************************/
.seccion11-2{
    grid-area: seccion11-2;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    background-color:#FFC172;
}
.seccion11-2 .containerText {
    padding: 0px 17.7% 0% 19%;
    text-align: right;
    z-index: 1;
}
.seccion11-2 .linkSections {
    justify-content: flex-end;
}
/******************************Seccion 11-3****************************************/
.seccion11-3{
    grid-area:seccion11-3;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-bottom:20%;
    background-color:#FFC172;
    margin-top:-1px;
}
.seccion11-3 .containerText{
    padding: 0 26.7% 0% 13.7%;
    text-align: left;
}
/******************************Seccion 11-4****************************************/
.seccion11-4 {
    grid-area: seccion11-4;
    padding: 0 13.7% 25% 0;
    background-color: #FFC172;
    margin-top: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.seccion11-4 div{
    position:relative;
}
.seccion11-4 .detection{
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity:0;
    transition:opacity 1.2s;
}
.seccion11-4 .detectionAnimated{
    animation:scale .8s  linear;
    animation-iteration-count: 4;
}
@keyframes scale{
    from{
        transform:scale(1.13);
    }
    to{
        transform:scale(1);
    }
}
/******************************Seccion 12****************************************/
.section12 {
    grid-area: seccion12;
    background-color: #ffffff;
    padding: 15% 14.7% 5% 13.7%;
    display: flex;
    flex-direction: column;
}
.section12 .titleSections{
    color:#FFC172;
}
.section12 img{
    display: block;
    margin: auto;
    padding-bottom: 10%;
}
/******************************Seccion 13****************************************/
.section13 {
    grid-area: seccion13;
    background-color: #ffffff;
    padding: 15% 13.7% 5% 11.7%;
    display: flex;
    flex-direction: column;
}
.section13 .containerText{
    padding-top:10%;
}
.section13 img{
    display: block;
    margin: auto;
    padding-top: 10%;
}
.section13 .titleSections{
    color:#056571;
}
/******************************Seccion 14****************************************/
.section14{
    grid-area:seccion14;
    background-color:#ffffff;
    display:grid;
    grid-template-areas:"seccion14-1"
        "seccion14-2";
}
/******************************Seccion 14-1****************************************/
.section14 .seccion14-1 {
    grid-area: seccion14-1;
    display: flex;
    flex-direction: row;
    border-radius: 40px;
    box-shadow: 0px 2px 6px #00000029;
    margin: 12% 6.7%;
}
.section14 .seccion14-1 .containerText{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5% 6.5%;
    text-align: right;
    width:45%;
}
.section14 .seccion14-1 h6{
    color:#000000;
}
.section14 .seccion14-1 .linkSections {
    justify-content: flex-end;
}
.section14 .seccion14-1 img{
    width:55%;
    object-fit: contain;
}
/******************************Seccion 14-2****************************************/
.section14 .seccion14-2 {
    grid-area: seccion14-2;
    display: flex;
    flex-direction: row;
    border-radius: 40px;
    box-shadow: 0px 2px 6px #00000029;
    margin: 0% 6.7%  12%;
}
.section14 .seccion14-2 .containerText {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5% 6.5%;
    text-align: left;
    width: 45%;
}
.section14 .seccion14-2 h6{
    color:#000000;
}
.section14 .seccion14-2 img{
    width:55%;
    object-fit: contain;
}
/******************************Seccion 15****************************************/
.section15{
    grid-area:seccion15;
    background-image:url('https://assets.claro360.com/Corporativo/turismo/section15.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;
}
.section15 .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: 765px;
    width: 100%;
    position: relative;
    z-index: 2;
    transition: all 1.5s ease-in-out;
    transition-delay: 0.4s;
}
.section15 h6{
    font-family: 'Helvetica-Neue-Bold';
    font-size: calc(28px + (60 - 28) * (100vw - 320px) / (1920 - 320));
    color:#ffffff;
    position: relative;
}
.section15 h6:after {
    content: url("");
    background-image: url('https://assets.claro360.com/landingsMexico360/corporativo/turismo/web/logo_360_rojo.png');
    height: auto;
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -12px;
    left: 100%;
    width: 225px;
    height: 105px;
    margin-left: 15px;
}
.section15 h5 {
    font-size: calc(20px + (32 - 20) * (100vw - 320px) / (1920 - 320));
    font-family: 'Helvetica-Neue-Bold';
    padding-right: 50px;
    color: #ffffff;
    padding: 29px 0% 0px 0px;
}
.section15 .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 16****************************************/
.section16{
    grid-area:seccion16;
}
.section16 .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%;
}
.section16 h5{
    font-family: 'Helvetica-Neue-Bold';
    font-size: calc(18px + (24 - 18) * (100vw - 320px) / (1920 - 320));
    color:#5C5C5C;
    padding-bottom:22px;
}
.section16 p{
    font-family: 'Helvetica-Neue-Regular';
    font-size: calc(14px + (20 - 14) * (100vw - 320px) / (1920 - 320));
    color:#5C5C5C;
}
.section16 h6 {
    font-family: 'Helvetica-Neue-Bold';
    font-size: calc(24px + (50 - 24) * (100vw - 320px) / (1920 - 320));
    color: #000000;
    padding-bottom: 72px;
    text-align: center;
}
.section16 .box1{
    grid-area:box1;
}
.section16 .box2{
    grid-area:box2;
}
.section16 .box3{
    grid-area:box3;
}
.section16 .box4{
    grid-area:box4;
}
.section16 .box5{
    grid-area:box5;
}
.section16 .box6{
    grid-area:box6;
}
.section16 .box7{
    grid-area:box7;
}
/******************************Seccion 17****************************************/
.section17{
    grid-area:seccion17;
    background-color:#F0F0F0;
}
.section17 .containerText {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.section17 h6{
    font-size: calc(24px + (40 - 24) * (100vw - 320px) / (1920 - 320));
    padding:59px 0px;
    font-family: 'Helvetica-Neue-Bold';
}
.section17 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;
}
.section17 button p {
    font-size: calc(24px + (34 - 24) * (100vw - 320px) / (1920 - 320));
    height: 60px;
    line-height: 40px;
    display: block;
    padding: 10px 0;
}
.section17 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;
    }
    .titleSections{
        display:inline;
    }
    .subtitleSections {
        padding: 20px 0px;
    }
    .linkSections{
        padding-top: 10px;
    }
    /******************************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-7   seccion6-7 seccion6-7 seccion6-7 seccion6-7 seccion6-7 seccion6-7 seccion6-7 seccion6-7 seccion6-7"
            "seccion8  seccion8 seccion8 seccion8 seccion8 seccion8 seccion8 seccion8 seccion8 seccion8"
            "seccion9  seccion9 seccion9 seccion9 seccion9 seccion9 seccion9 seccion9 seccion9 seccion9"
            "seccion10 seccion10 seccion10 seccion10 seccion10 seccion10 seccion10 seccion10 seccion10 seccion10"
            "seccion11 seccion11 seccion11 seccion11 seccion11 seccion11 seccion11 seccion11 seccion11 seccion11"
            "seccion12  seccion12 seccion12 seccion12 seccion12 seccion12 seccion12 seccion12 seccion12 seccion12"
            "seccion13 seccion13 seccion13 seccion13 seccion13 seccion13 seccion13 seccion13 seccion13 seccion13"
            "seccion14 seccion14 seccion14 seccion14 seccion14 seccion14 seccion14 seccion14 seccion14 seccion14"
            "seccion15 seccion15 seccion15 seccion15 seccion15 seccion15 seccion15 seccion15 seccion15 seccion15"
            "seccion16 seccion16 seccion16 seccion16 seccion16 seccion16 seccion16 seccion16 seccion16 seccion16"
            "seccion17 seccion17 seccion17 seccion17 seccion17 seccion17 seccion17 seccion17 seccion17 seccion17";
    }
    /******************************Section1 ****************************************/
    .section1{
        background-image:url('https://assets.claro360.com/Corporativo/turismo/Responsive/section1.png');
    }
    .section1 .containerText {
        width: 100%;
        padding-right: 15%;
        justify-content: flex-start;
    }
    .section1 .containerText img {
        width: 50%;
        margin-top: 115px;
    }
    .section1 p {
        padding-right: 0px;
    }
    .section1 button{
        min-width: 200px;
        margin-bottom:10%;
    }
    .section1 button p {
        height: 40px;
        line-height: 20px;
    }
    /******************************Section2 ****************************************/
    .section2 {
        padding: 12% 0;
        text-align: center;
    }
    .section2 .containerText{
        width:100%;
    }
    .section2 h6 {
        padding: 0px 7.5% 50px;
        text-align: left;
    }
    .section2 p {
        padding: 0px 7.5% 0px;
        text-align: left;
    }
    /******************************Section3 ****************************************/
    .section3{
        padding-bottom:100px;
    }
    .section3 .title{
        padding:0 0 50px;
    }
    .section3 .serviceIcons p {
        padding: 0px 88px;
    }
    .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: 0 10%;
    }
    /******************************Section5 ****************************************/
    .section5 {
        padding-bottom: 10%;
    }
    .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-7 ****************************************/
    .section6-7 .seccion6-7 {
        flex-direction: column;
        margin: 10% 6.7% 15%;
    }
    .section6-7 .seccion6-7 img {
        border-radius: 40px 40px 0 0;
        width: 100%;
    }
    .section6-7 .seccion6-7 .containerText {
        padding: 10% 7.5%;
        text-align: left;
        width: 100%;
    }
    .section6-7 .seccion6-7 .linkSections {
        justify-content: flex-start;
    }
    /******************************Section7 ****************************************/
    .section7 {
        text-align: left;
        padding: 10% 7.5% 15%;
        align-items: flex-start;
    }
    /******************************Section8 ****************************************/
    .section8 {
        width: 100%;
        padding: 5% 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;
        margin-bottom: 0%;
    }
    /******************************Section10 ****************************************/
    .section10 {
        padding: 0% 0 15% 0;
        margin-top: -1px;
    }
    .section10 .containerImages {
        padding: 10% 7.5% 15%;
    }
    .section10 .stateImgOne.spaceActive {
        margin-right:0%;
        padding-right:2%;
    }
    .section10 .stateImgTwo.spaceActive {
        margin-left:0%;
        padding-left:2%;
    }
    /******************************Section11 ****************************************/
    .section11 {
        padding:0;
        grid-template-areas:"seccion11-1"
            "seccion11-2"
            "seccion11-3"
            "seccion11-4";
        grid-template-columns:1fr;
        margin-top:-1px;
    }
    /******************************Section11-1 ****************************************/
    .seccion11-1 {
        padding: 0;
    }
    .seccion11-1 img {
        padding: 0 7.5%;
    }
    /******************************Section11-2 ****************************************/
    .seccion11-2 .containerText {
        padding: 10% 7.5%;
        text-align: left;
    }
    .seccion11-2 .linkSections {
        justify-content: flex-start;
    }
    /******************************Section11-3 ****************************************/
    .seccion11-3 {
        padding-bottom: 0%;
    }
    .seccion11-3 .containerText {
        padding: 15% 7.5% 10%;
        text-align: left;
    }
    /******************************Section11-4 ****************************************/
    .seccion11-4 {
        padding: 0% 3.5% 10%;
    }
    /******************************Section12 ****************************************/
    .section12 {
        padding: 10% 7.5%;
    }
    .section12 img {
        padding: 12% 0 10%;
    }
    /******************************Section13 ****************************************/
    .section13 {
        padding: 10% 7.5%;
    }
    .section13 img {
        padding: 12% 0% 0%;
    }
    /******************************Section14-1 ****************************************/
    .section14 .seccion14-1 {
        flex-direction: column;
        margin: 20% 6.7%;
    }
    .section14 .seccion14-1 img {
        border-radius: 40px 40px 0 0;
        width: 100%;
    }
    .section14 .seccion14-1 .containerText {
        padding: 10% 7.5%;
        text-align: left;
        width: 100%;
    }
    .section14 .seccion14-1 .linkSections {
        justify-content: flex-start;
    }
    /******************************Section14-2 ****************************************/
    .section14 .seccion14-2 {
        flex-direction: column;
        margin-bottom: 20%;
    }
    .section14 .seccion14-2 img {
        border-radius: 0 0 40px 40px;
        width:100%;
    }
    .section14 .seccion14-2 .containerText {
        padding: 10% 7.5%;
        text-align: left;
        width:100%;
    }
    .section14 .seccion14-2 .linkSections {
        justify-content: flex-start;
    }
    /******************************Section15 ****************************************/
    .section15{
        background-image:url('https://assets.claro360.com/Corporativo/turismo/Responsive/section15.png');
        background-position:right;
    }
    .section15 .containerText {
        width: 100%;
    }
    .section15 h6:after {
        bottom: 3px;
        width: 72px;
        height: 47px;
        margin-left: 9px;
    }
    .section15 h5 {
        padding: 29px 39% 0px 0px;
    }
    /******************************Section16 ****************************************/
    .section16 .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%;
    }
    .section16 h6 {
        padding-bottom: 10px;
    }
    /******************************Section17 ****************************************/
    .section17 button {
        min-width: 200px;
    }
    .section17 button p {
        height: 40px;
        line-height: 20px;
    }
}

@media only screen and (min-width: 768px) and (max-width:991px) and (orientation: portrait) {
    .section1 button{
        min-width: 260px;
        height: 60px;
        margin-bottom:10%;
    }
    
    .section15 h6:after {
        bottom: 5px;
        width: 90px;
        margin-left: 9px;
    }
}

@media only screen and (min-width: 992px) and (max-width:1300px)  and (orientation: portrait){
    .section1 img {
        width: 65%;
    }

    .section2 .containerText {
        width: 82.5%;
    }
    .section3 .serviceIcons h6 {
        width: 70%;
    }
    .section3 .serviceIcons p {
        padding: 0 10%;
    }
    .section3 .serviceIcons img {
        max-width: 120px;
    }
    .section5 h6 {
        padding: 85px 20% 35px 20%;
    }
    .section5 p {
        padding: 0 20% 0px;
    }
    .section5 a {
        margin: 0 20%;
    }
    .section6-7 .seccion6-7 img {
        width: 40%;
        object-fit: cover;
    }
    .section6-7 .seccion6-7 .containerText {
        width: 60%;
    }
    .section7 {
        padding: 0px 13.7% 0% 8%;
    }
    .section8 {
        padding: 15% 0px;
    }
    .section9 {
        padding: 20% 7% 0% 13.7%;
    }
    .section10 {
        display: flex;
        align-items: center;
        padding: 20% 0 0% 0;
    }
    .section11 {
        margin-top: -1px;
    }
    .seccion11-1 {
        padding: 20% 0% 20% 13.7%;
    }
    .seccion11-2 .containerText {
        padding: 20% 13.7% 20% 17%;
    }
    .seccion11-3 .containerText {
        padding: 0 19.7% 0% 13.7%;
    }
    .seccion11-4 {
        padding: 0 13.7% 20% 0;
    }
    .section12 {
        padding: 15% 14.7% 5% 13.7%;
    }
    .section13 {
        padding: 15% 13.7% 5% 11.7%;
    }
    .section13 img {
        padding: 10% 8%;
    }
    .section14 .seccion14-1 img {
        width: 40%;
        object-fit: cover;
    }
    .section14 .seccion14-1 .containerText {
        width: 60%;
    }
    .section14 .seccion14-2 img {
        width: 40%;
        object-fit: cover;
    }
    .section14 .seccion14-2 .containerText {
        width: 60%;
    }
    .section15 h5 {
        padding: 29px 29% 0px 0px;
    }
    
    .section15 h6:after {
        bottom: 3px;
        width: 100px;
        height: 100px;
        margin-left: 9px;
    }
}


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

@media (min-width: 992px) and (max-width:1300px) and (orientation: landscape){
    .section1 img {
        margin-top: 100px;
    }
    .section3 {
        padding-bottom: 8%;
    }
    .section3 .serviceIcons h6 {
        width: 75%;
    }
    .section3 .serviceIcons img {
        max-width: 110px;
    }
    .section7 {
        padding: 0px 13.7% 0% 8%;
    }
    .section8 {
        padding: 10% 0px;
    }
    .seccion11-1 {
        padding: 20% 0% 25% 13.7%;
    }
    .section13 img {
        padding: 10% 0;
    }
}

@media (min-width: 1301px) and (max-width:2099px) and (orientation: landscape) {
    .section15 h6:after {
        bottom: 7px;
        width: 130px;
        height: 110px;
        margin-left: 9px;
    }
}

@media (min-width: 2100px){
    .section3 .containerText {
        width: 80%;
    }
    .section3 .serviceIcons h6 {
        width: 40%;
    }
    .section5 {
        padding-bottom: 7%;
    }
    .section6-7 .seccion6-7 {
        margin: 5% 6.7%;
    }
    .section7 {
        padding: 0px 20.7% 0% 15%;
    }
    .section9 {
        padding: 0% 20.5% 0px 25.7%;
    }
    .section10 {
        margin-left: -1px;
    }
    .section10 .containerImages {
        padding: 0 20.7% 0% 0%;
    }
    .section10 .containerImages {
        padding: 0 17.7% 0% 4%;
    }
    .section11 {
        margin-top: -1px;
    }
    .seccion11-1 {
        padding: 15% 0% 15% 17.5%;
    }
    .seccion11-1 div {
        width: 100%;
    }
    .seccion11-1 img {
        width: 100%;
    }
    .seccion11-2 .containerText {
        padding: 0px 25.7% 0% 20%;
    }
    .seccion11-3 .containerText {
        padding: 0 20.7% 0% 25.7%;
    }
    .section12 {
        padding: 15% 14.7% 5% 25.7%;
    }
    .section13 {
        padding: 15% 25.7% 5% 11.7%;
    }
    .seccion11-4 {
        padding: 0 20.7% 25% 0;
        justify-content: flex-end;
    }
    
    .section15 .containerText {
        max-width: 893px;
    }

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