@media handheld, only screen and (min-width: 768px) and (max-width: 1024px){

}


@media handheld, only screen and (min-width: 768px) and (max-width: 1023px) {
	 
}

/* ---------------------------- 320px-640px -------------------------- */

@media handheld, only screen and (max-width: 667px) {
	.main-cards article{

	}
	ul.timeline{
		display: block;
		margin: 0;
		width: 100%;
	}
	ul.timeline li{
		width: 100%;
		max-width: 100%;
		        display: block;
        clear: both;
		
	}
	ul.timeline i{
		left: 197px;
		right: 0;
		bottom: auto;
		top: 15px;
		max-width: 105px;
	}
	ul.timeline i img {
		max-height: 110px;
	}
	ul.timeline li:nth-child(4) i {
		right: 0;
		top: 17px;
	}
	ul.timeline:after{display: none;}
	ul.timeline li:after{
		top: 27px;
    	left: 72px;
		width: 15px;
		height: 15px;
	}
	ul.timeline li span{
		left: 94px;
		top: -70px;
	}
	.main-cards{
		display: block;		
		padding: 20px 30px 20px 15px;
	}
	.funciones, .entregables{
		max-width: 100% !important;
		display: block !important;
		width: 100% !important;
	}
	ul.timeline li h5{
		    float: left;
    border-left: 2px solid #24d0fb;
    margin-left: 15px;
    padding-left: 15px;
    min-height: 90px;
	        display: flex;
        align-items: center;
        justify-content: center;
        width: 130px;
	}
	ul.timeline li .circle{
		right: auto;
		top: 90px;
		left: 0;
		max-width: 55px;
	}
	ul.timeline li h3 {
		left: 80px;
		right: auto;
		top: 84px;
		max-width: 190px;
	}
	ul.timeline li:nth-child(3) i{
		top: -20px;
	}
	.img-xl{
		display: none;
	}
	.img-xs{
		display: block;
	}
	ul.timeline li h4{
		    float: left;
			    width: 55px;
    margin: 0;
    line-height: 90px;
	}
	.main-cards figure{
		max-width: 160px;
		height: 80px;
		margin-bottom: 20px;
		margin: 0 auto 20px;
	}
	.main-cards figure img{
		max-height: 80px;
	}
	.entregables{
		margin-left: 0;
	}
	.equipo{
		    max-width: 100%;
    width: 100%;
    margin: 0 auto 20px;
	}
	.banner-home .button-next-home, .banner-home .button-prev-home{
		top: auto;
    bottom: -30px;
	}
	.teams{
		    width: 100%;
    padding: 10px 15px;
    border-radius: 20px;
	}
	.equipo ul li{
		margin: 0;
    	padding: 0 7px;
	    display: inline-block;
        vertical-align: middle;
	}
	.servicios{
		max-width: 100%;
		width: 100%;
		display: block !important;
		margin: 0 auto;
	}
	.servicios li{
		font-size: 9px;
    display: inline-block;
    vertical-align: top;
    max-width: 50px;
    width: 50px;
	}
	.funciones{
		min-height: auto;
		margin-left: 0;
		padding: 0;
	}
	.servicios ul{
		    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	}
	.funciones ul{
		clear: both;
		width: 100%;
		padding-top: 15px;
	}
	
	.section{
		padding: 0 30px 0 15px;
		text-align: center;
	}
	#section4  {
		padding-right: 0;
		padding-left: 0;
	}
	.fp-viewing-home .redes,
	.fp-viewing-turbinas .redes{
		display: none;
	}	
	.main-bg-home h2{
		font-size: 29px;
	}
	.year-1955 h2{
		font-size: 34px;
	}
	.year-1955 h3{
		font-size: 37px;
		margin-top: 0;
	}
	.section-3 article{
		max-width: 145px;
    	margin: 0 auto 30px;
	}
	.main-brans figure{
		height: 95px;
		max-width: 120px;
		margin: 0 15px 20px 15px;
	}
	.main-brans figure img {
		max-height: 95px;
	}
	.section-3 h2{
		font-size: 65px;
		letter-spacing: 0;
	}
	.main-theams article{
		margin: 0 10px;
    	max-width: 110px;
		overflow: hidden;
	}
	.main-theams article h3{
		font-size: 14px;
	}
	.all-time-line h6{
		opacity: 0.45 !important;
    	line-height: 47px;	
    	font-size: 54px;
	}
	.main-theams h5{
		writing-mode: vertical-rl;
		text-orientation: upright;
		white-space: nowrap;
		font-size: 70px;
		letter-spacing: 0;
		top: 0;
		left: 0;
		right: auto;
		margin: 0;
	}
	.btn-art{
		font-size: 16px;
	}
	.card-gracias h3{font-size: 55px;}
	.main-theams article figure{
		margin-bottom: 10px;
	}
	.pd-xs-0{
		padding: 0 0 !important;
	}	
	.main-bg-home{
		padding: 0 40px 0 15px;
	}	
	.main-bg-home article p{
		font-size: 15px;
    	line-height: 18px;
	}
	#fp-nav.right {
	    right: 5px;
	}	
	.ir-up{
		left: 10px;
		top: 10px;
	}
	.scroll-down{bottom: 10px; max-width: 25px}
	.scroll-relative{display: none;}
	.redes{		
	    max-width: inherit;
	    bottom: 10px;	    	    
	    left: 10px;
	    text-align: center;
	    display: none;
	}
	.info-impacto{
		margin-bottom: 30px;
	}
	.title-details {
	    max-width: 215px;
	    float: left;
	    margin-right: 0;
	    padding-top: 0;
	    margin-bottom: 30px;
	}
	.redes ul{
		display: inline-block;
		vertical-align: top;
	}
	.redes ul li{
		margin: 0 3px;
		float: left;
	}
	.section-3 .info-year-recorrido span{
		display: none;
	}
	.sostenible-xs{
		display: block;
	}
	.section-10 .flex-end{
		display: block;
	}
	.section-9 .flex-home{
		justify-content: center;
	    align-items: center;
	    flex-direction: column;
	    flex-wrap: wrap;
	}
	.sostenible{
		margin-right: 10px;
    	margin-top: 30px;
    	max-width: 70px;
    	display: none;
	}
	.leyengd {	    
	    max-width: 215px;	    
	    margin-bottom: 0;
	    padding-top: 20px;
	}
	.leyengd .text {
	    margin-bottom: 15px;
	}
	.title-carbono {
	    max-width: 190px;
	    margin: 0 0 30px 0;
	}
	.card-infografico-carbono figure {
	    float: left;
	    max-width: 194px;
	    margin-top: 0;
	    display: none;
	}
	.card-infografico-carbono{
		padding-top: 50px;
	}
	.ir-site{
		left: 25px;
	}
	.btn-register{
	  max-width: 175px;
	}
	.circle-modal{
		display: flex;
	}
	.section-6 .info-circle,
	.title-tomar-parte{
		display: none;
	}
	.info-infografia{
		overflow: auto;
    	white-space: nowrap;
    	display: none;
	}
	.info-infografia-xs{
		display: block;
	}
	.grid-cards{
		display: inline-block;
		vertical-align: top;
	}
	
	.logo-single{
		max-width: 140px;
		margin-bottom: 30px;
	}		
	.flex-center-xs{
		align-items: center;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	}
	.logo-inteia-bottom{
		bottom: 80px;
		right: 0;
	}
	.main-footer h2{
		font-size: 45px;
	    line-height: 42px;
	    margin-bottom: 20px;
	}
	.main-footer{
		padding: 0 30px;
	}
	.main-footer h3{font-size: 23px;}
	.main-footer p{
		font-size: 18px;
		line-height: 20px;
	}
	.main-bg-home h1{
		font-size: 32px;
	}
	.main-bg-home br{
		display: none;
	}
	.flex-between{
		align-items: center;
	    justify-content: center;
	    flex-direction: column;
	}
	.main-bg-home article{
		margin: 0 auto 30px;
	}
	.info-year-recorrido{
		margin-bottom: 0;
		padding-top: 30px;
		max-width: 200px;
	}
	.line-left,
	.info-year-recorrido .info br{display: none;}
	.btns-recorrido a{
		margin-bottom: 20px;
	}
}

@media (max-width: 768px) {
  #accordion-1 ul,
  #accordion-2 ul,
  #accordion-3 ul,
  #accordion-4 ul,
  #accordion-5 ul,
  #accordion-6 ul {
    display: none;
    margin: 0;
    padding: 10px 1rem;
  }
  .servicios li:before{
	    width: 30px;
    height: 30px;
  }

  #accordion-1 h4,
  #accordion-2 h4,
  #accordion-3 h4,
  #accordion-4 h4,
  #accordion-5 h4,
  #accordion-6 h4 {
    cursor: pointer;
    padding: 10px 1rem;
    background: #f0f0f0;
    margin: 0;
    border-bottom: 1px solid #ccc;
	font-size: 11px;
  }

  #accordion-1 ul.active,
  #accordion-2 ul.active,
  #accordion-3 ul.active,
  #accordion-4 ul.active,
  #accordion-5 ul.active,
  #accordion-6 ul.active {
    display: block;
  }
    .entregables {
		display: none !important;
	}
  .entregables ul li{
	font-size: 11px;
    margin: 0 0 4px 0;
  }
  .entregables{
	min-height: auto;
  }
  .entregables ul {
		margin-bottom: 7px;
	}
	.funciones h4{position: relative;}
	/* #accordion-1 h4::after {
		content: '';
		position: absolute;
		right: 1rem;
		top: 50%;
		width: 8px;
		height: 8px;
		border-right: 2px solid #333;
		border-bottom: 2px solid #333;
		transform: translateY(-50%) rotate(45deg);
		transition: transform 0.3s ease;
	}

	
	#accordion-1 ul.active ~ h4::after,
	#accordion-1 h4.active::after {
		transform: translateY(-50%) rotate(-135deg); 
	} */

	.funciones h4::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.3s ease;
  }

  .funciones h4.active::after {
    transform: translateY(-50%) rotate(-135deg);
  }
}