/*Pantallas grandes (desktops de menos de 1200px)*/
@media (max-width: 1200px) {  }

/*Pantallas medianas (tablets de menos de 992px)*/
@media (max-width: 992px) { }

/*Pantallas pequeñas (móviles en landscape de menos de 768px)*/
@media (max-width: 768px) {  }

/*Pantallas muy pequeñas (móviles en portrait de menos de 576px)*/
@media only screen and (max-width: 576px) {
    #loader-icon { left: 20%; top: 20%;   width: 0px;}
    .h4__div-secondary { margin-left: -15px; }
    .data__user-ig { display:flex; margin-left: -15px; }
    .span__div-secondary { display:grid; font-size: 11px; line-height: 12px; }
    .h5__div-secondary { margin-left: -105px; }
    .p__div-secondary { line-height: 15px; font-size: 12px; margin-left: -105px; width: 60%; padding-right: 20px; }

	.div-title { width: 80vw; }
	.div-right {  
		height: 35vh;
  		margin-left: -20px;
  		margin-top: -25px;
  		width: 100vw;
  		position: absolute; 
  	}
	.div-left {  
		width: 100vw; 
  		height:80vh;
  		margin-left: -20px;
  		margin-top: 22vh;
  	}
	.div-title__h3, .div-title__h5  { width: 100%; padding-left:2%}
	.div-title__h3 { padding-top: 30%;}
	.welcome-message__h4, .goodbye-message_error__h4, .goodbye-message__h4 { width: 80vw!important; }
	#div--comenzar{ margin-top: 90%; display: block;}

	.form__input, .label__spam { width: 80vw; }
    .form__input { margin-top: 24%!important; font-size: 1.75rem; line-height: 2rem;}
    .label__spam { padding-left:2%; font-size: 0.85rem; letter-spacing: 0rem; line-height: normal;}
	.form__a { margin-top: 50%; margin-left: 4%; }

	.label__h4 { left: 2%; margin-top: 7%; font-size: 0.55rem; letter-spacing: 0rem;}
	#form__div-answer { position: absolute; top: 30%; display: none; width: 80vw; }

	.answer__a, .answer__a-white { letter-spacing: 0.05rem; font-size: 0.70rem; padding-left: 7px; padding-right: 7px; }
	.answer__a { margin-right: 3px; margin-left: 5px; }

   .form__nav-buttom { top: 76% }
	#form__a-prev { margin-left:10px; padding-left: 20px; padding-right: 20px; }
	#form__a-next { margin-left: 150px; padding-left: 20px; padding-right: 20px; }
    
.form__input-range {
	width: 75vw!important;
    margin-top: 25%!important;
}

#range__label { font-size: 10px; padding-left: 10px; margin-top: 29%;}

#list-container {
	width: 90vw;
    margin-top: 38%;
    left: -10vw;
    overflow-y: scroll;
    height: 100px; 
}

#list-container::-webkit-scrollbar {
    display: block;
    width: 10px;
}
#list-container::-webkit-scrollbar-track {
    background: #7A7A7A;
}
    
#list-container::-webkit-scrollbar-thumb {
    background: #4B4F58;
    border-right: none;
    border-left: none;
}

#list-container::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 10px; 
}

#list-container::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 10px;
}

.form__button {
	margin-top: 75%; left: 50%; margin-left:10px;
}
#form__a-prev {
	margin-top: 75%;
}

}