/* Media Queries */

@media screen and (min-width: 961px) and (max-width: 1224px) {
	
	#header nav ul.nav li{padding-right: 30px; font-size: 1.385em /* 16px */; font-weight: normal;}
	#header nav ul.idiomes li{padding-right: 10px;}
	
  .gaudeix .slide .imatge{width: 50%; float: left; margin-right: 10px; }
  .gaudeix .slide h3{ margin-left: 50%;  margin-top: 0px;}

  #footer .peu .logo{width: 30%;}
  #footer .credits{margin-left: 32%;}

  #apilador[data-columns]::before {content: '5 .column.size-1of5';}
    #apilador-central[data-columns]::before {content: '2 .column.size-1of2';}
    
}

@media screen and (max-width: 1100px){
  .cerca{font-size: 1em /* 13px */}
}


@media screen and (min-width: 769px) and (max-width: 960px){
 #header nav ul.nav li{padding-right: 17px; font-size: 1.231em /* 16px */; font-weight: normal;}
   #header nav ul.idiomes li{padding: 15px 5px 15px 5px;font-size: 0.846em /*11px*/; }



	.sidebar section {margin: 0 0px 20px 0px; }
	.sidebar section article{margin: 0 0px 20px 0;}
	.sidebar section article img,
	.sidebar section article .video{width: 100%;float: none;margin-right: 0; margin-left: 0;}
	.sidebar section article .capcalera_article {margin: 20px 20px 0 20px;}

	article.video .main-video{width: 100% !important;float: none;margin-right: 0px;margin-bottom: 10px;}

  #apilador[data-columns]::before {content: '3 .column.size-1of3';}

  #footer .peu .contacte{width: 20%;}
  
  .fons_imatge{background: #fff; float: none; width: 100%;}
    .fons_imatge img{ margin: auto; display: inline-block; }

}



@media screen  and (max-width: 768px) {
#header nav ul.nav li{padding-right: 17px; font-size: 0.9em /* 11px */; font-weight: normal;}
  #header nav{background: #F26321;}
	#header nav ul.nav { width: 60%;}
	#header nav ul.idiomes{width:18.8%; font-size: 0.8em /*11px*/; padding-bottom: 2px; padding-top: 2px;}
  #header nav ul.idiomes li{padding: 15px 10px 15px 5px;}

  .selector ul li{width: 31%;}
  .selector .tipuscontingut ul li{width: 100%;}
  .selector input[type=checkbox] + label {font-size: 0.7em;}


.rightmenu_vista_article article figure.article_head img{max-width: 100%; float: none; margin-right: 0px;}
  
  .gaudeix .slide .imatge{width: 100%; float: none; margin-right: 0px; }
  .gaudeix .slide h3{ margin-left: 0%;  margin-top: 10px;}
  

	#footer .peu .logo{width: 90%; float: none; margin: 0 auto;}

  #footer .peu .butlleti{width: 80%;margin: 0 auto;float: none;}
  #footer .peu .contacte, #footer .credits{width: 80%;margin: 0 auto;float: none;}

  #footer .peu{padding-top: 20px;}


 
    /* PORPORCIÓ PORTADA 3:2 */
  .rightmenu_portada .colleft {right:0%;}
  .rightmenu_portada .col1 {width:100%; left:0%; }
  .rightmenu_portada .col2 {width:100%; left:0%;}


  /* PROPORCIÓ VISTA ARTICLE 4:1*/
  .rightmenu_vista_article .colleft {float:none; width:100%; max-width: 100%; margin-left:0px; position:relative; right:0%;}
  .rightmenu_vista_article .col1wrap {float:none; width:100%; left:0%; padding-bottom:1em;}
  .rightmenu_vista_article .col1 { margin:0px; overflow:hidden;}
  .rightmenu_vista_article .col2 {float:none; width:100%; position:relative; left:0px;}


  /* PROPORCIÓ LLISTATS  1:1*/
  #apilador-central[data-columns]::before {
    content: '2 .column.size-1of2';
  }

}




@media screen and (max-width: 639px) {

.selector ul li{width: 48%;}
  .subscripcio .logo{background-color: #F26322; width: 100%;}

  #header .colleft {background-color: #F26322; background-image: none;}
  #header .colleft .logo{height: 90px; width: auto;}
  #header .colleft .logo img{width: 170px;}

  #header .nav-toggle {position: absolute; top:30px; right: 30px;width:40px;height:40px; text-decoration: none; color: #fff; font-size: 2.5em;}
  

  #header nav ul.nav { width: 100%;  list-style: none; margin: 0; background: rgba(61,57,56,1); overflow: visible;padding: 20px 0; }
    #header nav ul.nav li{width: 20%; min-width: 50px;float: left; padding: 45px 0 0 0; text-indent: 15px; font-size: 0.9em /*20px*/; }
      
      #header nav ul.nav li:first-child {padding-left: 0;}
      
      #header nav ul.nav li#noticies{background-image: url(noticies.svg); background-size: 30%; background-position:  20px 0; background-repeat:  no-repeat;}
      #header nav ul.nav li#articles{background-image: url(articles.svg); background-size: 25%; background-position:  20px 0; background-repeat:  no-repeat;}
      #header nav ul.nav li#entrevistes{background-image: url(entrevistas.svg); background-size: 35%; background-position:  20px 5px; background-repeat:  no-repeat;}
      #header nav ul.nav li#videos{background-image: url(videos.svg); background-size: 30%; background-position:  20px 0; background-repeat:  no-repeat;}
      #header nav ul.nav li#agenda{background-image: url(agenda.svg); background-size: 30%; background-position:  20px 0; background-repeat:  no-repeat;}
      #header nav ul.nav li#imatges{background-image: url(http://www.uab.cat/Xcelerate/UABDivulga2014/img/imagenes.svg); background-size: 30%; background-position:  20px 0; background-repeat:  no-repeat;}

  #header nav ul.idiomes{width: 100%; background: rgba(242,99,34,1); border-bottom: 2px solid #333; }
  #header nav ul.idiomes li{float: left; width: 50%; padding: 15px 0; font-size: 1.2em; text-align: center;border-bottom: 2px solid: #333;} 


  .collapsible-heading {background: #333 url(fletxa_ambits_obert.png) top right no-repeat !important; line-height: 35px;}
  .collapsible-heading-collapsed {background: #333 url(fletxa_ambits.png) 3em 0 no-repeat !important; line-height: 35px;}

  .cerca{width: 100%; margin-left: 0; text-align: center; color: #fff; margin-bottom: 0; padding:0;}
  .selector input[type=checkbox] + label {font-size: 0.8125em /* 13px */}
  .tipuscontingut{float: none; width: 100%;}


  .sidebar section article .capcalera_article,
  .sidebar section article:first-child .capcalera_article {margin: 10px 20px 30px 20px;}
    .gaudeix .slide .imatge{width: 50%; float: left; margin-right: 10px; }
    .gaudeix .slide h3{margin-top: 0px; margin-left: 50%; font-size:1.385em /* 18px */; }


 
	#footer .peu .logo{ width: 250px; margin: 0 auto;float: none;margin-top: 10px; }

  .rightmenu_vista_article section .sidebar section .llistat{margin: 0px;}
   .rightmenu_vista_article section .sidebar .llistat h3{margin: 0;}

  .rightmenu_vista_article section .sidebar .llistat p{padding: 0;}

    
    .subscripcio{width: 440px;}

  .sidebar section article, 
  .sidebar aside .butlleti, 
  .sidebar aside.gaudeix, 
  .sidebar aside.destaquem,
  .sidebar aside #mycustomscroll{display: none;}
  .sidebar section article.primer{display: block;}
  #footer #apilador{display: none;}
#footer h2#interes_titol {display: none;}

}


@media screen and (min-width:501px) and (max-width: 639px) {
#apilador-central[data-columns]::before {content: '2 .column.size-1of2';}


}

@media screen and (max-width:500px) {

#header nav ul.nav { width: 100%;  list-style: none; margin: 0; background: rgba(61,57,56,1); overflow: visible;padding: 20px 0; }
    #header nav ul.nav li{width: 33%; min-width: 50px;float: left; padding: 55px 0 20px 0 ; text-indent: 15px; font-size: 0.9em /*20px*/; }
      
      #header nav ul.nav li:first-child {padding-left: 0;}
      
      #header nav ul.nav li#noticies{background-image: url(noticies.svg); background-size: 30%; background-position:  center 0; background-repeat:  no-repeat;}
      #header nav ul.nav li#articles{background-image: url(articles.svg); background-size: 25%; background-position:  center 0; background-repeat:  no-repeat;}
      #header nav ul.nav li#entrevistes{background-image: url(entrevistas.svg); background-size: 35%; background-position:  center 5px; background-repeat:  no-repeat;}
      #header nav ul.nav li#videos{background-image: url(videos.svg); background-size: 30%; background-position:  center 10px; background-repeat:  no-repeat;}
      #header nav ul.nav li#agenda{background-image: url(agenda.svg); background-size: 25%; background-position:  center 10px; background-repeat:  no-repeat;}
      #header nav ul.nav li#imatges{background-image: url(http://www.uab.cat/Xcelerate/UABDivulga2014/img/imagenes.svg); background-size: 30%; background-position:  center 0; background-repeat:  no-repeat;}

      #header nav ul.nav li a{display: block; text-align: center;}

      .rightmenu_vista_article article figure.article_head img{width: 100%; float: none; margin-right: 0px;}
  

.selector{display: none;}
.sidebar section article .capcalera_article,
.sidebar section article:first-child .capcalera_article {margin: 20px 20px 0 20px;}

#footer h2{margin: 0 0 0 20px;}
#footer .interes{width: 90%; margin-left: 20px; border-top: none; margin-top: 0px;}
#footer .interes:first-child {border-top: 6px solid #F26321;}
#footer .interes a{padding: 15px 20px;}
#footer h2#interes_titol{margin-bottom: 15px;}
.colmask{padding: 0;}

  #apilador[data-columns]::before {content: '1 .column.size-1of1';}

  #apilador-central[data-columns]::before {content: '1 .column.size-1of1';}

  

  .nosidebar article{width: 100%;}
  .sidebar section article, 
  .sidebar aside .butlleti, 
  .sidebar aside.gaudeix, 
  .sidebar aside.destaquem,
  .sidebar aside #mycustomscroll{display: none;}
  .sidebar section article.primer{display: block;}
  .sidebar aside.butlleti
.subscripcio{width: 320px; margin-top: 20px; margin-bottom: 20px;}



#footer #apilador{display: none;}
#footer h2#interes_titol {display: none;}


.leftmenu_agenda .colright {
    float:none;
    width:100%;
    position:relative;
    left:0px;
    background:#fff;
    }
    .leftmenu_agenda .col1wrap {
      float:none;
      width:100%;
      position:relative;
      right:0px;
      padding-bottom:1em;
  }
  .leftmenu_agenda .col1 {
      margin:0 ;
      position:relative;
      right:0;
      overflow:hidden;
      background: #fff;
      padding: 10px;
  }
    .leftmenu_agenda .col2 {
        float:none;
        width:100%;
        position:relative;
        right:0px;
        background: #E3E4DF;
      }

      }


@media screen and (max-width:350px) {

    
    .gaudeix .slide .imatge{width: 100%; float: none; margin-right: 0px; }
    .gaudeix .slide h3{margin-top: 10px; margin-left: 0%;}

    .subscripcio{width: 250px; margin-top: 20px;}
    #header .colleft .logo{width: auto;}
    #header .colleft .logo img {padding: 25px 0 0 20px; width: 140px;}
    #header nav ul.nav li{width: 50%; min-width: 50px;float: left; padding: 55px 0 20px 0 ; text-indent: 15px; font-size: 0.9em /*20px*/; }

    selector{display: none;}

}