/* --- reset --- */
html{ height:100%; }
body{ height:100%;padding:0;border:0;margin:0; font-family: 'Titillium Web', sans-serif; color:#50748A; font-size: 100%; }
a,a:visited,a:link,input[type="submit"]{ text-decoration:none; color:#50748A; } a:focus,a img{ border:none; outline:0; color:#50748A; } a:hover{ }
h1,h2,h3,h4,h5,h6,div,blockquote,p,span,ul,li,hr,form,fieldset,menu,section,article,hr,form,fieldset{ padding:0; border:none; margin:0; }
ul{ list-style-position:inside; list-style-type:none; }
hr{ clear:both; height:0; }
input,select,textarea { border:1px solid transparent; }
input:hover,select:hover,textarea:hover{ border:1px solid transparent; }
input[type="submit"]{ padding:0; border:none; margin:0; background-color:transparent; text-decoration:none; }
input[type="submit"]:hover{ text-decoration:underline; cursor:pointer; cursor:hand; text-decoration:none;  }
input[type="radio"],input[type="radio"],input[type="checkbox"],label{ border:none !important; }

/* --- comuns --- */
.flex { display:flex; }
.flex .bottom { align-self:flex-end; width:50%; }
.flex .middle { align-self:center; width:50%; }
#cap, #cos, #peu{ width:100%; max-width:1100px; margin:0 auto; }

/* --- general --- */
#principal{ background:transparent url('bg_cos.jpg') center 113px no-repeat; background-size: cover; min-height:100%; margin-bottom:-130px; /* igual que l'alçada de #secundari */ }
#principal:after { content: ""; display: block; height:120px; /* igual que el marge-bottom negatiu de #principal */  }
	#cap_fons{ border-bottom:6px solid #FFF; background:#FFF url('bg_cap.png') left no-repeat; background-size:100% 100%; position:fixed; top:0: left:0; width:100%; }
	#cap{ position:relative;}
	#cap .flex .logotip{ padding:24px 0 18px 0; width: 40%;}
	#cap .flex .lema { padding-bottom: 18px; width: 60%; }
	#cap .flex .lema h1{  line-height:24px; text-align:right; font-size:21px; font-weight:300; }	
	#cap #menu_idiomes{ position:absolute; top:0; right:0; text-align: center;  box-sizing: border-box; }
	#cap #menu_idiomes ul{ /* overflow:auto; */ box-sizing:border-box; }
	#cap #menu_idiomes ul li{ display: inline-flex; box-sizing: border-box; }
	#cap #menu_idiomes ul li a{ padding:0 10px; font-size:14px; line-height:28px; font-weight:300; color:#FFF; display: block; }
	#cap #menu_idiomes ul li a:hover{ background-color: rgba(80, 116, 138, 0.50); }
	#cap #menu_idiomes ul li.lang_actiu a{ background-color:#50748A; }
	
	#cos{ padding-top:113px; }
	#cos .info{ padding:30px; margin:30px 0; background-color:rgba(255,255,255,.7); width:50%; box-sizing: border-box; }
	#cos .info p {font-size:16px; font-weight:400; }
	#cos .info p span{ font-size:15px; font-weight:700;  }
	#cos .info h3{ padding-bottom: 5px; border-bottom:1px solid #50748A; margin:15px 0;  font-size:42px;  font-weight:300;  }
	#cos .info p + p, #cos .info p + h3{  margin-top:15px; }	

#secundari{ height:130px; /* igual que el marge-bottom negatiu de #principal */ border-top:6px solid #FFF; background:#FFF url('bg_peu.png') left no-repeat; background-size:100% 100%; }
	#peu {  font-size:14px; }
	#peu p{padding-top: 15px;  }
	
	#peu .mail_contact{ }
	#peu .mail_contact a{ display: block; width:42px; height:42px; margin:0 0 0 auto; padding-top:15px; }
	#peu .mail_contact span{ display:none; }
	
@media screen and (max-width: 1160px) {
	
#cap, #cos, #peu{ width:100%; max-width:720px; margin:0 auto; }
	
	#cap .flex .lema h1 { line-height: 22px; font-size: 19px; }
	#cos .info h3{  font-size:28px; }
}

@media screen and (max-width: 768px) {
	
#cap, #cos, #peu{ width:calc(100% - 30px); max-width:auto; margin:0 auto; }

	
	#cap .flex .logotip{ width: 50%;}
	#cap .flex .lema { width: 50%; }

	#cap .flex .lema h1{ font-size: 17px; }	
	#cap .flex .lema h1 br{ display: none; }
	
	#cos .info{ width: 60%; }
}

@media screen and (max-width: 768px) and (orientation: landscape) {
	/* --- fem que el cap ja no sigui sticky --- */
	#cap_fons{ position:static; }
	#cos{ padding-top:0 !important; }
}

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

.flex { display: block;	}
#cap, #cos, #peu{ width:calc(100% - 15px); max-width:auto; margin:0 auto; }

#principal { margin-bottom: 0; padding-bottom: 1px; }
#principal:after { height: auto; }
	#cap_fons { background-color: #e8f0f0; background-size: 140% 100%; }
	#cap .flex > div { width: 70%; }
	#cap .flex .lema h1 { text-align: left; font-size: 14px; line-height: 17px; }
	#cap .flex .logotip { padding: 24px 0 0px 0; }
	#cap .flex .logotip img { width: 100%; height: auto; }
	#cap #menu_idiomes { padding-top: 15px; padding-right: 0; margin-right: 0; }
	#cap #menu_idiomes ul li { display: block; margin: 5px 0 5px auto; }

	#cos { padding-top:140px; }
	#cos .info { width: 100%; padding:15px; background-color:rgba(255,255,255,.85); }
	#cos .info h3 { font-size: 32px; }

#secundari { height: auto; background-color: #f0f3f5; background-size: 140% 100%; }	
	#peu .flex > div { width: 100%; text-align: center; }
	#peu .mail_contact a { margin: 0 auto 0 auto; padding-bottom: 15px; }	
}


	
@media screen and (max-width: 400px) {
	
	#cap #menu_idiomes ul li a{ color:#50748A; }
	#cap #menu_idiomes ul li.lang_actiu a { color: #fff;}
#secundari, #cap_fons { background-image: none; }

}