/*li a {
    color: green;
}
body {
    background: white url("images/background.jpeg") no-repeat;
}*/

@font-face {
    font-family: "GothamBook";
    src: url("../font/GothamBook\ Regular.otf");
    }
@font-face {
    font-family: "GothamUltra";
    src: url("../font/GothamUltra\ Regular.otf");
    }
@font-face {
    font-family: "GothamBookItalic";
    src: url("../font/GothamBook\ Italic.otf");
    }
@font-face {
    font-family: "GothamUltraItalic";
    src: url("../font/GothamUltra\ Italic.otf");
    }
@font-face {
    font-family: "GothamMedium";
    src: url("../font/Gotham\ Medium.otf");
    }
@font-face {
    font-family: "GothamBlack";
    src: url("../font/GothamBlack.otf");
    }
    
    
/* width */
::-webkit-scrollbar {
    width: 10px;
}
  
/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
}
   
/* Handle */
::-webkit-scrollbar-thumb {
    background: #14218d; 
    border-radius: 10px;
}
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #0432ff; 
}
    


html{
    font-family: 'GothamBook';
}

.popup_emocionate {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000000ad;
}

.popup_instrucciones {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000000ad;
}

.popup_emocionate img {
    display: block;
    margin: auto;
    margin-top: 15vh;
    width: 100%;
}

.popup_instrucciones img {
    display: block;
    margin: auto;
    margin-top: 45vh;
    width: 100%;
}

.popup_emocionate button {
    margin-top: -10vh !important;
    position: relative;
}


.banner {
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
    font-family: "GothamBlack";
    padding: 1rem;
    background-color: #14218d;
    font-size: 1rem;
}

#btnDetenerGrabacion,
#btnEliminarGrabacion{
    display: none;
}
.banner span{
    color: #08d9ff;
    text-decoration: underline;
}
.navbar {
    background-color: #14218d;
}
.navbar-brand{
    color: #fff !important;
}
.navbar-toggler{
    border-radius: 50px !important;
    padding: 5px 5px !important;
    box-shadow: 0px 0px 6px 1px #fff;
    background-color: #fff !important;
    
}
.navbar-toggler-icon{
    color: #14218d !important;    
}
.offcanvas-header{
    background-color: transparent;
}
.offcanvas-header .close {
    font-weight: 500;
    color: #14218d;
    background: #fff;
    border: none;
    font-size: 1.5rem;
    padding: 2px 12px;
    border-radius: 50px;
    box-shadow: 0px 0px 6px 1px #fff;
}
.offcanvas {
    background-color: transparent !important;
}
.offcanvas-header img {
    visibility: collapse;
}

.offcanvas-body ul {
    background-color: #fff;
    border-radius: 10px;
}
.offcanvas-body li {
    padding: 5px !important;
    font-size: 1.2rem;
    font-weight: 500;
    border-top: solid 1px #14218d;
    text-align: center;
}

.offcanvas-body li > .active {
    color: #14218d !important;
    font-weight: 900;
}

.offcanvas-body li:first-child {    
    border-top: none;
}

.offcanvas-body li a{
    color: #000;
    font-family: "GothamBook";
}
a.navbar-brand img, .offcanvas-header img{
    height: 2.5rem;
}

.btn-slider-1 {
    background-color: #14218d !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-weight: 700 !important;
    min-width: 8rem;
    font-size: 1rem !important;
    font-family: "GothamBook" !important;
    border: solid 2px !important;
}
.btn-slider-2 {
    background-color: #14218d !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-weight: 700 !important;
    min-width: 8rem;
    font-size: 1rem !important;
    font-family: "GothamBook" !important;
}
.title-1{
    margin-top: 2rem;
    margin-bottom: 2rem;
    color: #14218d;
    font-size: 1.5rem;
    font-family: "GothamBlack";
    text-align: center;
    line-height: 1;
}
.title-1 span{
    color: #0432ff;
}
.btn-camisetas {
    background-color: #14218d !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-weight: 900 !important;
    min-width: 11rem;
    max-width: 14rem;
    font-size: 0.8rem !important;
    font-family: "GothamBook" !important;
    display: block !important;
    margin: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border: solid 2px !important;
}
.btn-camiseta {
    background-color: #14218d !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-weight: 900 !important;
    min-width: 9rem;
    max-width: 100%;
    font-size: 0.8rem !important;
    font-family: "GothamBook" !important;
    display: block !important;
    margin: auto;
    border: solid 2px !important;
}
.btn-record {
    background-color: #14218d !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-weight: 900 !important;
    font-size: 1rem !important;
    font-family: "GothamBook" !important;
    margin: auto;
    border: solid 2px !important;
}
.carousel-control-prev span, .carousel-control-next span {
    background-color: #14218d;
    font-weight: 400;
    border-radius: 50px;
    padding: 20px;
    box-shadow: 0px 0px 4px 2px #fff;
}
.slider-landing .carousel-item{
    margin-top: calc(18vw - 5px);
}
.slider-landing .carousel-item.first_slider_mobile{
    margin-top: calc(17.5vw - 5px);
  }
.formulario {    
    background-color: #c2dcf4 !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;    
    font-family: "GothamBook" !important;
}
.formComentaries {  
    font-family: "GothamBook" !important;
}

.formComentaries label{
    vertical-align: -webkit-baseline-middle;
}

.formComentaries small {
    width: 100%;
    display: block;
    text-align: end;
    margin-top: 5px;
    margin-left: 0px;
}

.comentaries{
    max-height: 20rem;
    overflow-y: auto;
}

.comentaries audio::-webkit-media-controls-panel {    
    color: #fff;
    background-color: #ffffff7e;
  }

.comentaries audio::-webkit-media-controls-current-time-display {
    color: #14218d;
  }

.comentaries audio::-webkit-media-controls-mute-button {
    
    color: #fff;
    border-radius: 50%;
  }

.comentaries audio::-webkit-media-controls-time-remaining-display {
    color: #14218d;
  }

.comentaries audio::-webkit-media-controls-play-button {
    background-color: #c2dcf4;
    color: #fff;
    border-radius: 50%;
  }

.comentaries audio::-webkit-media-controls-play-button:hover {
    background-color: #fff;
  }
.comentaries .list-group-item:first-child {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.comentaries .list-group-item:last-child {
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

.comentaries li.list-group-item:hover {
    background-color: #c2dcf4;
}
.comentaries li.list-group-item {
    background-color: #fff;
}
.comentary_name {
    text-align: left;
    font-weight: 700;
    color: #000;
}
.comentary_date{
    text-align: right;
    color: darkslategray;
    font-size: 0.6rem;
}
.comentary_text{
    text-align: justify;
    font-weight: 300;
    color: #676767;
}

.camisetas, .camiseta_individual {
    background-image: url("../images/fondo_camiseta_individual.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    font-family: "GothamBook";
    color: #14218d;
    font-size: 0.8rem;
    min-height: 86vh;
}
.camiseta_individual{
    background-image: url("../images/fondo_camiseta_individual.png");
    min-height: 94vh;
}
.iniciativa .presentacion {
    background-image: url("../images/fondo_camiseta_individual_desktop.jpg");
    background-size: 100%;
    background-repeat: repeat;
    background-position: top center;
    font-family: "GothamBook";
    color: #14218d;
}
.carousel.camiseta_individual{
    min-height: auto !important;
    background-size: cover;
    padding: 2rem 1rem;
}

.carousel.camiseta_individual h1, 
.collectionsAudio h1,
.carousel.content_medium h1
{
    font-size: 1.4rem;
}

.second-section {
    padding: 2rem;
    text-align: center;        
    font-family: "GothamBook";
    color: #14218d;
    /*background-image: url("../images/fondo_formulario_4.png");
    background-size: contain;*/
    background-image: url(../images/fondo_camiseta_individual.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center; 
}

.second-section h1 {
    font-family: "GothamBlack";
    line-height: 1;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.second-section p {
    font-size: 0.8rem;
    line-height: 1 !important;
    font-weight: 700;
}
.presentacion {
    background-repeat: no-repeat;
    background-position: top center;    
    font-family: "GothamBook";
    color: #14218d;
    font-size: 1.2rem;
    padding: 2rem;
    font-weight: 700;
    text-align: center;
}
.camisetas h1, .camiseta_individual h1, .content_medium h1{
    font-family: "GothamBlack";
    line-height: 1;
}
.camisetas h3, .camiseta_individual h3, .content_medium h3{
    font-family: "GothamBlack";
}
.formulario form{
    padding: 2rem !important;
    font-family: "GothamBook" !important;
}
.formComentaries{
    padding: 0rem !important;
    font-family: "GothamBook" !important;
}
.formulario .form-control, .formComentaries .form-control {
    border-radius: 15px !important;
    box-shadow: 0px 2px 8px 0px darkgray !important;
}
.formulario input.form-control{
    padding: 1.5rem 0.75rem !important;
}
.formComentaries input.form-control{
    padding: 1rem 0.75rem !important;
}
.formulario .top-container{
    padding: 0 2rem;
    font-family: "GothamBook" !important;
}
.formulario .btn-info{
    background-color: #14218d !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-weight: 900 !important;
    min-width: 9rem;
    max-width: 100%;
    font-size: 1rem !important;
    font-family: "GothamBook" !important;
    display: block !important;
    margin: auto;
    border: solid 2px !important;
}
.formulario span{
    background-color: transparent !important;
}

.formulario input[type=checkbox], .formComentaries input[type=checkbox]{
    border: none;
    height: 2rem;
    width: 2rem;
    box-shadow: 0px 0px 6px 1px darkgray;
  }
.formulario .checkbox {
    margin-bottom: 1rem !important;
}
.formulario .checkbox span {
    padding-left: 1rem;
    vertical-align: text-top;
}
#duracion{
    font-size: 1.4rem;
    text-align: end;
    width: 100%;
    display: block;
    margin: auto;
}
.barra-azul{
    background-color: #14218d;
}
footer{
    /*color: #14218d;*/
    font-size: 0.8rem;
    font-family: "GothamMedium";
    width: 100%;
    /*background-color: #ffffffa6;*/
    margin-top: -6rem;
}
footer a{
    text-decoration: none;
    color: #fff;
}
footer h5 {
    font-size: 1rem;
    font-family: "GothamBook";
}
footer a img {
    width: 2rem;
    padding: 2px;
}
.btn-shirt{
    color: #0432ff;
    font-weight: 700;
    font-family: "GothamBook";
    border: dashed 2px #0432ff;
    border-radius: 50px;
    padding: 5px 12px;
    opacity: 1;
    transition: opacity 0.3s ease;
    text-decoration: none !important;
    height: 30px;
    width: 30px;
}
.btn-shirt:hover{
    opacity: 1;
}

/*  posición manchas */
.btn-shirt{
    position: absolute;
}
.shirt-1 {
    top: 754px;
    left: 141px;
}

.shirt-2 {
    top: 489px;
    left: 205px;
}

.shirt-3 {
    top: 400px;
    left: 210px;
}

.shirt-4 {
    top: 409px;
    left: 157px;
}

.shirt-5 {
    top: 315px;
    left: 124px;
}

.shirt-6 {
    top: 715px;
    left: 198px;
}

.shirt-7 {
    top: 679px;
    left: 142px;
}

.cuadro_texto {
    background-color: #c2dcf4 !important;
    width: 80%;
    margin: 2rem auto;
    display: block;
    border-radius: 30px;
    box-shadow: 0px 0px 25px 0px darkgray;
    text-align: justify;
    padding: 2rem;
    color: #14218d;
    font-family: "GothamBook" !important;
    font-size: 1rem;
    font-weight: 500;
}

/* REPRODUCTOR DE AUDIO */
.btn-next{
    width: 100%;
    display: block;
    margin: auto;
    text-align: center;
    padding-top: 0.5rem;
}
.btn-next i{
    color: #14218d;
    font-size: 2.5rem;
    display: none;
}
#audio-player-container {
    position: relative;
    margin: auto;
    display: block;
    width: 75%;
    max-width: 500px;
    background: transparent;
    margin-top: 2rem;
  }
 
  #duration {
    float: right;
  }
 
  #play-icon, .play-icon {
    display: block;
    margin: auto;
    background-color: transparent;
    border-radius: 50px;
    border: none;
    padding: 10px;
  }
  #play-icon svg, .play-icon svg {
    width: 2.2rem !important;
  }
  path {
    stroke: #14218d;
    stroke-width: 5;
  }

  input[type="range"] {
    position: relative;
    --webkit-appearance: none;
    width:100%;
    margin: auto;
    display: block;
    padding: 0;
    height: 19px;
    outline: none;
    background: transparent;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: linear-gradient(to right, #14218d var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
  }
  input[type="range"]::before {
    position: absolute;
    content: "";
    top: 8px;
    left: 0;
    width: var(--seek-before-width);
    height: 5px;
    background-color: #08d9ff;
    cursor: pointer;
  }
  input[type="range"]::-webkit-slider-thumb {
    position: relative;
    -webkit-appearance: none;
    box-sizing: content-box;
    border: 1px solid #14218d;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    margin: -7px 0 0 0;
    opacity: 0;
  }
  input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.2);
    background: #08d9ff;
  }
  input[type="range"]::-moz-range-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
  }
  input[type="range"]::-moz-range-progress {
    background-color: #08d9ff;
  }
  input[type="range"]::-moz-focus-outer {
    border: 0;
  }
  input[type="range"]::-moz-range-thumb {
    box-sizing: content-box;
    border: 1px solid #14218d;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    opacity: 0;
  }
  input[type="range"]:active::-moz-range-thumb {
    transform: scale(1.2);
    background: #08d9ff;
  }
  input[type="range"]::-ms-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: transparent;
    border: solid transparent;
    color: transparent;
  }
  input[type="range"]::-ms-fill-lower {
    background-color: #08d9ff;
  }
  input[type="range"]::-ms-fill-upper {
    background: linear-gradient(to right, #14218d var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
  }
  input[type="range"]::-ms-thumb {
    box-sizing: content-box;
    border: 1px solid #08d9ff;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
  }
  input[type="range"]:active::-ms-thumb {
    transform: scale(1.2);
    background: #08d9ff;
  }

  .btn-audio-control {
    border: none;
    background: transparent;
    font-size: 2rem;
    color: #14218d;
}

  .small-title{
    font-family: 'GothamMedium';
    color: #14218d;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
  }
  .small-title span{
    color: #08d9ff;
    /*text-decoration: underline;*/
    background-color: #fff;
    border-radius: 30px;
  }

  .info-box {
    border: solid 3px #fff;
    margin-top: -13.5rem;
    margin-bottom: 4rem;
    color: #fff;
    position: relative;
    border-radius: 10px;
    width: 57%;
    margin-left: 2rem;
    padding: 1rem;
    font-weight: 700;
    background-color: #0000005c;
    font-size: 0.7rem;
}

.info-box .border-buttom {
    padding-bottom: 1rem;
    border-bottom: solid;
    margin-bottom: 1rem;
}
.v-desktop {
    display: none !important;
}
.v-mobile {
    display: flex;
}
.v-desktop-block {
    display: none !important;
}
.v-mobile-block {
    display: block;
}
.img-btn {
    display: none;
    width: 50px;
    margin-top: -3rem;
    margin-left: 0rem;
    border: solid 1px #14218d;
    padding: 1px;
    border-radius: 5px;
    position: absolute;
}

.shirt-1:hover .img-btn {
    display: block;
    margin-top: -3vw;
    margin-left: -1vw;
}
.shirt-2:hover .img-btn {
    display: block;
    margin-top: -4vw;
    margin-left: 1vw;
}
.shirt-3:hover .img-btn{
    display: block;
    margin-top: -4vw;
    margin-left: 2.5vw;
}
.shirt-4:hover .img-btn{
    display: block;
    margin-top: -4vw;
    margin-left: 4.5vw;
}
.shirt-5:hover .img-btn{
    display: block;
    margin-top: -4vw;
    margin-left: 6.5vw;
}
.shirt-6:hover .img-btn{
    display: block;
    margin-top: -4vw;
    margin-left: 8vw;
}
.shirt-7:hover .img-btn{
    display: block;
    margin-top: -4vw;
    margin-left: 9.5vw;
}

video#video {
    display: block;    
    object-fit: cover;
}

button#snap {
    margin-top: -5rem !important;
    position: relative;
    font-size: 1rem !important;
}

.luzScanner {
    background: #08d9ff;
    height: 2px;
    position: absolute;
    z-index: 99;
    width: 100%;
    top: 10%;
    box-shadow: 0px 0px 10px 3px #08d9ff;
    animation-name: luzScanner;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    display: none;
}

@keyframes luzScanner {
    0%   {top: 10%;}
    50%  {top: 85%;}
    100% {top: 10%;}
  }

  a.btn.btn-slider-2 {
    position: absolute;
    top: -12vw;
    width: 10rem;
    left: 16vw;
    border: solid #fff 2px;
}

a.btn.btn-slider-1 {
    position: absolute;
    top: -88vw;
    left: 18vw;
}

.presentacion img{
    width: 50%;
}
.presentacion b{
    -webkit-text-stroke: 1px;
}

#marcoScanner,
video#video{
    position: relative;
}

/*#marcoScanner,
video#video{
    min-height: 90vh !important;
    min-width: 100vw;
    max-width: 100vw;
    height: 100vh;
    width: 100vw;
}*/

#marcoScanner {
    position: absolute;
    top: 3.5rem;
    left: 0;
    
}
  
@media only screen and (min-width: 600px) {

    .desktop-banner {
        margin-top: 4vw;
        margin-bottom: 6vw;
    }

    .second-section p {
        font-size: 1.2rem;
        width: 70%;
        margin: auto;
        display: block;
    }
    .banner{
        font-size: 1.4rem;
    }

    .presentacion {
        margin: auto;
        display: block;
        width: 100%;
        text-align: justify;
        padding: 4% 15%;
    }
    .presentacion img{
        width: 20%;
    }

    .content_medium {
        background-image: url(../images/fondo_desktop_medio.jpg);
        background-size: 100%;
        background-repeat: repeat;
        font-family: "GothamBook";
        color: #14218d;
        font-size: 0.8rem;
    }

    .comentaries {
        max-height: 30rem;
    }

    .offcanvas-body ul {
        background-color: transparent;
        color: #fff;
    }

    .second-section {
        background-size: 100%;
        background-repeat: repeat;
        background-image: url(../images/fondo_desktop_medio.jpg);
    }

    button.btn.btn-slider-1 {
        position: absolute;
        top: 92vh;
        right: 16vw;
        font-size: 1.6rem !important;
        padding: 0.5rem 3rem;
    }

    a.btn.btn-slider-1 {
        position: absolute;
        font-size: 1.6rem !important;
        padding: 0.5rem 3rem;
        top: 212vh;
        left: 15vw;
    }

    

    button.btn.btn-slider-1:hover{
        box-shadow: 0px 0px 6px 2px #14218d;
    }
    
    a.btn.btn-slider-1:hover{
        box-shadow: 0px 0px 6px 2px #fff;
    }

    .offcanvas-body li a{
        color: #fff;
    }

    .offcanvas-body li a:hover{
        color: #08d9ff;
    }

    .offcanvas-body li > .active {
        color: #08d9ff !important;
    }
    
    .info-box {
        width: 30%;
    }

    .popup_emocionate img {
        width: 30vw;;
    }

    .popup_instrucciones img {
        width: 30vw;;
    }
   
    .title-1 {
        font-size: 2.5rem;
    }

    .modal .title-1 {
        font-size: 1.3rem;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }
    .v-desktop {
        display: flex !important;
    }
    .v-mobile {
        display: none !important;
    }
    .v-desktop-block {
        display: block !important;
    }
    .v-mobile-block {
        display: none !important;
    }

    .btn-shirt {
        position: relative;
        width: 30px;
        height: 30px;
    }

    .shirt-5 {
        top: -24.5vw;
        left: -5vw;
    }
    .shirt-4 {
        top: -17vw;
        left: 19vw;
    }
    .shirt-3 {
        top: -18.5vw;
        left: 5vw;
    }
    .shirt-2 {
        top: -12vw;
        left: 6.5vw;
    }
    .shirt-7 {
        top: -22.5vw;
        left: 13vw;
    }
    .shirt-6 {
        top: -19.5vw;
        left: 19.5vw;
    }
    .shirt-1 {
        top: -18vw;
        left: 4.5vw;
    }

    .btn-camisetas{
        font-size: 1.2rem !important;
        width: 22rem !important;
        max-width: 22rem;
    }
    .btn-camiseta {
        background-color: #14218d !important;
        border-radius: 50px !important;
        color: #fff !important;
        font-weight: 900 !important;
        min-width: 9rem;
        max-width: 100%;
        font-size: 1rem !important;
        font-family: "GothamBook" !important;
        display: block !important;
        margin: auto;
        border: solid 2px !important;
        width: 65%;
        padding: 8px !important;
    }

    .btn-camiseta:hover{
        box-shadow: 0px 0px 6px 2px #14218d;
    }

    .camisetas{
        background-image: url("../images/fondo_escritorio.png");
        background-size: cover;
        
    }
    
    .camisetas.v2{
        background-image: url("../images/fondo_camiseta_individual_desktop.jpg");
    }
    
    .camisetas_individual {
        margin-left: -5vw;
        width: 45vw;      
    }
    .camiseta_individual {
        background-image: url("../images/fondo_camiseta_individual_desktop.jpg") !important;
        background-size: 100%;
        background-repeat: repeat;
    }
    .small-title{
        font-size: 1.3rem;
        padding-top: 0.5rem;
    }
    #play-icon{
        margin-top: -1.2rem;
    }
    #audio-player-container {
        margin-top: 1rem;
    }
  }

  @media only screen and (max-width: 380px){
    video#video{
        margin: auto;
        display: block;
    }
    .shirt-7 {
        top: 645px;
        left: 122px;
    }
    .shirt-6 {
        top: 677px;
        left: 180px;
    }
    .shirt-1 {
        top: 712px;
        left: 129px;
    }
    .shirt-4 {
        top: 396px;
        left: 142px;
    }
    .shirt-5 {
        top: 315px;
        left: 114px;
    }
    .shirt-3 {
        top: 388px;
        left: 191px;
    }
    .shirt-2 {
        top: 468px;
        left: 188px;
    }
  }

  @media only screen and (max-width: 400px) and (min-width: 381px){
    
    .shirt-1 {
        top: 754px;
        left: 141px;
    }
    
    .shirt-2 {
        top: 489px;
        left: 205px;
    }
    
    .shirt-3 {
        top: 400px;
        left: 210px;
    }
    
    .shirt-4 {
        top: 409px;
        left: 157px;
    }
    
    .shirt-5 {
        top: 315px;
        left: 124px;
    }
    
    .shirt-6 {
        top: 715px;
        left: 198px;
    }
    
    .shirt-7 {
        top: 679px;
        left: 142px;
    }
  }

  @media only screen and (max-width: 420px) and (min-width: 401px){
    .shirt-3 {
        top: 407px;
        left: 220px;
    }
    .shirt-1 {
        top: 778px;
        left: 148px;
    }
    .shirt-2 {
        top: 499px;
        left: 212px;
    }
    .shirt-4 {
        top: 414px;
        left: 163px;
    }
    .shirt-5 {
        top: 321px;
        left: 124px;
    }
    .shirt-6 {
        top: 743px;
        left: 208px;
    }
    .shirt-7 {
        top: 704px;
        left: 142px;
    }
    
    
  }
  @media only screen and (max-width: 450px) and (min-width: 421px){
    .shirt-5 {
        top: 319px;
        left: 133px;
    }
    .shirt-4 {
        top: 423px;
        left: 161px;
    }
    .shirt-1 {
        top: 803px;
        left: 157px;
    }
    .shirt-2 {
        top: 514px;
        left: 226px;
    }
    .shirt-3 {
        top: 410px;
        left: 229px;
    }
    .shirt-6 {
        top: 764px;
        left: 219px;
    }
    .shirt-7 {
        top: 723px;
        left: 156px;
    }
  }

  @media only screen and (max-width: 2000px) and (min-width: 1800px){
    .shirt-1 {
        top: -17.5vw;
        left: 4.5vw;
    }
    .shirt-2 {
        top: -12vw;
        left: 6.8vw;
    }
    .shirt-3 {
        top: -18.5vw;
        left: 5.5vw;
    }
    .shirt-7 {
        top: -22.5vw;
        left: 15.5vw;
    }
    .shirt-5 {
        top: -24.5vw;
        left: -3.5vw;
    }
    .shirt-6 {
        top: -19.5vw;
        left: 21.5vw;
    }
    .shirt-4 {
        top: -17vw;
        left: 20.2vw;
    }

    a.btn.btn-slider-1 {        
        left: 14vw;
    }
  }

  @media only screen and (max-width: 1400px) and (min-width: 1300px){
    .shirt-5 {
        top: -24.5vw;
        left: -6vw;
    }
    .shirt-1 {
        top: -17.5vw;
        left: 4.5vw;
    }
    .shirt-3 {
        top: -18.5vw;
        left: 4.5vw;
    }
    .shirt-2 {
        top: -12vw;
        left: 6vw;
    }
    .shirt-7 {
        top: -22.5vw;
        left: 11.5vw;
    }
    .shirt-6 {
        top: -19.5vw;
        left: 18.5vw;
    }
    .shirt-4 {
        top: -17vw;
        left: 18.2vw;
    }
  }
  @media only screen and (max-width: 1300px) and (min-width: 1200px){
    .shirt-5 {
        top: -24.5vw;
        left: -7vw;
    }
    .shirt-1 {
        top: -17.5vw;
        left: 4.5vw;
    }
    .shirt-2 {
        top: -12vw;
        left: 5.8vw;
    }
    .shirt-3 {
        top: -18.5vw;
        left: 4vw;
    }
    .shirt-7 {
        top: -22.5vw;
        left: 11vw;
    }
    .shirt-6 {
        top: -19.5vw;
        left: 17.8vw;
    }
    .shirt-4 {
        top: -17vw;
        left: 17.8vw;
    }

    button.btn.btn-slider-1 {
        position: absolute;
        top: 42vw;
        right: 14.5vw;
        font-size: 1.6rem !important;
        padding: 0.5rem 3rem;
    }
    a.btn.btn-slider-1 {
        position: absolute;
        font-size: 1.6rem !important;
        padding: 0.5rem 3rem;
        top: 94vw;
        left: 13vw;
    }
  }

  @media only screen and (max-width: 600px){
    .camisetas, .camiseta_individual{
        background-size: 100% 100%;        
    }
    .iniciativa .presentacion{
        background-image: url(../images/fondo_camiseta_individual.png);
        background-size: 100%;
    }

    .content_medium {
        background-image: url(../images/fondo_camiseta_individual.png);
        font-family: "GothamBook";
        color: #14218d;
        font-size: 0.8rem;
        background-size: 100%;
    }
    .second-section,
    .camisetas.v2
    {
        background-size: 100%;
        background-repeat: repeat-y;
    }

    .presentacion{
        font-size: 0.8rem;
    }
  }