/* ================================================================ */
/* Estils UB 'responsive' 
	per a pàgines estàtiques amb comportament 'responsive'.
	-------------------------------------------------------------
	Author: Entorns Web - Universitat de Barcelona
	[JG]
	-------------------------------------------------------------
	Version: Versió 1.1 - Passat per Beautify [http://codebeautify.org/css-beautify-minify]
	Version: Versió 1.2 - Modificacions diverses [./versions-i-millores.txt]
	-------------------------------------------------------------
	Date: 2017-07-06
	Modified: 2017-07-06
  ================================================================= */

/* ================================================================ */
/* ================================================================ */


/* ============================================================================= */
@media only screen and (min-width: 395px) {
/* @media min-width: 395px { */
	#wrapper {
		box-shadow: 0 2px 10px #aaa;
	}
	.aside {
		width: 100%;
	}
	.aside.intro {
		width: auto;
	}
	.pag2nnivell #top_title {
		height: 200px;
		background: #ffdc68 url(../recursos/fons/fons_cap_mobil.jpg) no-repeat scroll left top / contain;
	}
	.article_2nnivell h1 {
		font-size: 2.5em;
	}
	a.bloc {
		width: 375px;
		height: 300px;
	}
	.article_presentacio {
		width: 363px;
		min-height: 242px;
	}
	.article_presentacio h2 {
		display: none;
		margin-left: -9px;
	}
	article h3 {
		font-size: 1.2em;
		margin: 1em 0;
		font-family: arial, sans-serif;
		font-weight: bold;
		line-height: 1.3em;
	}
	.article_2nnivell iframe {
		float: left;
		margin: 1em -3px;
		width: 355px; 
		height: 200px;
	}
	.bloc-imatge-esq .imatge {
		width: 100%;
	}
	.bloc-imatge-esq .imatge img {
		float: none;
	}
	.bloc-imatge-esq .text {
		width: 100%;
	}
	
	.peu_ub {
		background-color: #333;
	}
	.peu_ub .logoub {
		text-align: center;
		margin-left: -1.4em;
		margin: auto 3em;
		width: auto;
	}
}


/* ============================================================================= */
/* @media only screen and (min-width: 1280px) { */
@media only screen and (min-width: 800px) {
/* @media min-width: 1280px { */
	#wrapper {
		width: 100%;
		box-shadow: none;
	}
	#top_logo {
		background: #474747 url(../recursos/fons/fons_cap_dkt_3_b.png) no-repeat scroll right center; 
		height: 45px;
	}
	.logoub {
		/* background: url(../recursos/logos/logo_ub_vermell_1.png) no-repeat scroll center center; */
		background-image: none;
		position: relative;
		top: 42px; /* 70px; */
		z-index: 1000;
	}
	.debatsub #top_logo {
		background: none; 
		height: 90px;
	}
	.debatsub .logoub {
		background: #333 url(../recursos/icones/logo_ub_1.png) no-repeat scroll center center; 
		top: 0;
	}
	
	.pag2nnivell .logoub {
		/*! background: url(../recursos/logos/logo_ub_vermell_groc.png) no-repeat scroll right 0; */
		position: relative;
		top: 420%;
	}
	.logoub > a {
		left: 944px; /* 40%; */
		top: 310px;
		/* background: rgba(255,255,255,.5); */
	}
	.debatsub .logoub > a {
		left: 42%;
		top: 0;
	}
	.pag2nnivell .logoub > a {
		left: unset;
		top: 10px;
		position: relative;
		float: right;
		width: 300px;
		right: 270px;
	}
	
	#top_lang {
		right: 0;
		top: 1em;
		width: 50%;
	}
	#top_lang label {
		display: none;
	}
	#top_lang ul {
		display: flex;
		flex-flow: row nowrap;
		width: 280px;
		float: right;
		margin-right: 80px; /* 372px; */
	}
	.languages li {
		width: auto;
		flex: 1 0 auto;
		font-size: 1.2em;
		font-style: unset;
		background: none;
		border: none;
	}
	.languages li:hover, 
	.languages li:focus {
		 background-color: unset;
	}
	.languages li a:hover, 
	.languages li a:focus {
		 border-bottom: 1px dotted #333;
	}

	#top_title {
		background: #ffdc68 url(../recursos/fons/fons_cap_amb_logo.jpg) no-repeat scroll left top / contain; /*  / cover; */
		height: 400px;
	}
	.debatsub #top_title {
		background: #0d6fb6 url(../recursos/fons/capcalera-debatsub-1920x650.jpg) no-repeat scroll left top / contain; /*  / cover; */
		height: 400px;
	}
	.pag2nnivell #top_title {
		height: 200px;
		background: #ffdc68 url(../recursos/fons/fons_cap_amb_logo_petit.jpg) no-repeat scroll left top / contain;
	}
	#top_title h2 {
		margin: 3em auto .5em;
	}
	#top_title h3 {
		font-size: 1.5em;
		margin-top: 1em;
	}
	#top_title .video {
		margin: 2em auto 1em;
	}
	#top_subtitle {
		text-align: left;
	}
	#top_title .video #top_subtitle {
		margin-top: unset;
	}
	.aside.filariadna {
		padding: .5em 13.5em;
	}

	.aside.intro h1, .aside.tinteressa h2 {
		font-size: 3em;
		padding: 0 6em;
	}
	.aside.intro h2 {
		font-size: 2em;
	}
	.aside.intro p {
		padding: 0 10em;
	}
	.contingut_element_tinteressa h2.titol {
		font-size: 2em;
	}
	#main {
		/* background-color: #fff; */ /* #3d3d3d; */
		/* display: flex;
		justify-content: center;
		height: 700px; */
	}
	.bloc-imatge-esq .imatge {
		width: 180px;
	}
	.bloc-imatge-esq .text {
		/* width: 80%; */
		width: min-content;
	}
	.pag2nnivell #main {
		background-color: initial;
	}
	
	a.bloc { 
		width: 500px;
		height: 333px;
	}

	.article_presentacio {
		width: 450px;
		min-height: 300px;
	}
	.article_presentacio h2 {
		margin-left: 77px;
	}
	
	article {
		/* float: left;
		width: 25%;
		max-width: 375px; */
		font-size: 1.1em;
	}
	article h2 {
		padding-left: 8em;
		width: 226px;
	}
	article:nth-child(2n) {
		background-color: #888; /* #404040; */
	}
	article.article_2nnivell {
		width: 100%;
		max-width: 100%;
		margin: 0 5em 1em 10em;
		padding: 1em;
	}
	article.article_2nnivell img {
		width: auto;
		height; auto;
		margin: 20px;
	}
	article.article_2nnivell img.mitjana {
		width: 375px;
		height: 250px;
		margin: 20px;
	}
	article.article_2nnivell img.petita {
		width: 250px;
		height: 166px;
		margin: 15px;
	}
	article.article_2nnivell img.xpetita {
		width: 125px;
		height: 83px;
		margin: 10px;
	}
	article.article_2nnivell img.img-esq {
		margin-left: 0;
	}
	article.article_2nnivell img.img-dre {
		margin-right: 0;
	}
	article.article_2nnivell .video {
		width: auto;
		height: auto;
		margin: 1em auto;
	}
	article.article_2nnivell .video-gran {
		display: block;
		margin: 1em auto;
	}
	article.article_2nnivell .video-petit {
		display: none;
	}

	
	.aside .properament {
		 margin: 0 40%;
		 padding-left: 1em;
	}
	.aside p, .aside ul {
		 text-align: center;
	}
	.aside ul {
		margin: 0 auto 1em;
		width: 90%; /* 900px; */
		display: flex;
	}
	.aside li.element_tinteressa {
		 min-width: 300px;
		 display: inline-block;
		 flex: 1 auto;
	}
	.contingut_element_tinteressa {
		width:75%;
	}
	
	.peu_ub {
		height: 90px;
		margin: 0 auto;
		width: 1100px;
	}
	.media {
		height: 80px;
		text-align: center;
	}
	.media ul {
		width: 500px;
		margin: 0 auto;
	}
	.media li:first-child {
		display: inline;
		float: left;
		width: auto;
		margin: 16px 20px;
	}
	.peu_ub .logoub {
		background: url(../recursos/icones/logo_ub_2.png) no-repeat scroll left center;
		float: left;
		margin: 0;
		/* position: inherit; */
		top: 0;
		left: 40%;
	}
	.peu_ub .logoub > a {
		top: 1.4em;
		padding: 10px 0 50px 105px; /*  275px; */
	}
	.membre_de {
		margin-top: 0;
		padding-top: .7em;
		margin-left: 20em;
	}
	.excellencia {
		margin-top: 0;
		padding-top: .7em;
		margin: -4em 0 0 26em;
	}
	.excellencia li a {
		height: 48px;
	}
	.excellencia li.excel_hr {
		width: 50px;
		display: inline-block;
	}
	.excellencia li.excel_bkc {
		width: 180px;
		display: inline-block;
	}
	.excellencia li.excel_hubc {
		width: 160px;
		display: inline-block;
	}


	.article_2nnivell h1 {
		font-size: 2.8em;
	}
	article h3 {
		font-size: 1.3em;
	}
	.article_2nnivell iframe {
		margin: 1em;
		width: 560px; 
		height: 315px;
	}
	
}

/* ============================================================================= */
/* @media only screen and (min-width: 1920px) { */
@media only screen and (min-width: 1280px) {
	#wrapper {
		width: 100%;
		box-shadow: 0 2px 10px #aaa;
	}
	#top_title {
		height: 500px;
	}
	#top_title h2 {
		margin: 4em auto .5em;
		font-size: 5em
	}
	#top_subtitle {
		 font-size: 2em;
	}
	.logoub > a {
		left: 1204px;
		top: 388px;
	}
	/* .debatsub .logoub > a {
		left: 42%;
		top: 0;
	} */
	.aside ul {
		width: 1050px;
	}
	.aside li.element_tinteressa {
		 width: 350px;
	}

	.article_2nnivell h1 {
		font-size: 3em;
	}
	article h3 {
		font-size: 1.5em;
	}
	.article_2nnivell iframe {
		margin: 1.5em;
		width: 800px; 
		height: 450px;
	}

}

/* ============================================================================= */
@media only screen and (min-width: 1920px) {
	#wrapper {
		width: 1920px;
		box-shadow: 0 2px 10px #aaa;
	}
}