@import url('https://fonts.googleapis.com/css?family=Raleway');
/**
 * Germàn Soto Ponce
 */
.story1{ height: 550px; padding: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.4); box-shadow: 0 0 50px rgba(0,0,0,0.8); z-index: 3;}
.story2{ height: 550px; padding: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.4); box-shadow: 0 0 50px rgba(0,0,0,0.8);}
.story { top:20%; height: 1000px; padding: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.4); box-shadow: 0 0 50px rgba(0,0,0,0.8);}
.story3{ top:20%; min-height: 1000px; padding: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.4); box-shadow: 0 0 50px rgba(0,0,0,0.8); z-index: 3;overflow: hidden;	}
#first { background: url(/templates/intercambios/img/brussel/textura_azul.png) 50% 0  fixed; }
#second { background: url(/templates/intercambios/img/brussel/foto1_vub.jpg) 50% 0 no-repeat fixed; }
#fourth { background: url(/templates/intercambios/img/brussel/foto2_vub.jpg) 50% 0 no-repeat fixed; }
#third { background: url(/templates/intercambios/img/brussel/textura_azul.png) 50% 0  fixed; z-index: 3;}
#theend { background: url(/templates/intercambios/img/brussel/puckered.png) 50% bottom no-repeat fixed; }
#five { background: url(/templates/intercambios/img/brussel/textura_gris.png) 50% bottom  fixed; z-index: 3;}
/* Introduction */
#first .smashinglogo { z-index:100; background: url(/templates/intercambios/img/brussel/logo_vub.png) 50% 103px no-repeat fixed; min-height: 550px; padding: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }
#first article { width: 100%; top: 200px; position: absolute; text-align: center; }
#first article h1{ width: 100%; top: 150px; position: absolute; text-align: center; }
#first article p, #first article a { color: #fff; }
#first article a { text-decoration: underline; }
#first article a:hover { color: #fff; }
/* Background Only */
#second { padding: 50px 0;}#second article { margin-top:18%; background: url(/templates/intercambios/img/brussel/grain.png) repeat #333; color: #fff; width: 445px; margin-left: 37%; padding: 10px 20px; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; box-shadow: 0 0 25px rgba(0,0,0,0.3); border: 1px solid rgba(150,150,150,0.1); }
#second article p { font-size: 14px;font-weight:normal;margin: 0;font-family: 'Raleway';color: #FFFFFF;line-height: 1.5; text-align:left;}
#second article a { color: #ff0;}
/* Photograph */
#third article { right:10%; width:80%; height:200px; color: #fff; padding: 10px 20px; margin: 100px 0 0 60%; line-height: 1.5em; position: absolute; top: 0; }
#third .photograph { background: url(/templates/intercambios/img/brussel/mini_vub1.png) transparent 100px 150px no-repeat fixed; min-height: 550px; padding: 0;  width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }
#third article p{position:relative;margin-left:40%;font-size: 14px;font-weight:normal;font-family: 'Raleway';color: #FFFFFF;line-height: 1.2; text-align:left;text-shadow: 0 2px 1px #000;}
#third article h2{position:relative;margin-left:40% !important;text-transform:none;	}
#third article span{font-size: 140px;font-weight: normal;margin: 0;font-family: 'Raleway';color: #003566;text-shadow: none;line-height: .8; }
/* Background Only */
#fourth article { margin-top:27%; background: url(/templates/intercambios/img/brussel/grain.png) repeat #333; color: #fff; width: 445px; margin-left: 37%; padding: 10px 20px; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; box-shadow: 0 0 25px rgba(0,0,0,0.3); border: 1px solid rgba(150,150,150,0.1); }
#fourth article p { font-size: 14px;font-weight:normal;margin: 0;font-family: 'Raleway';color: #FFFFFF;line-height: 1.5; text-align:left; }
#fourth video { position: fixed; left: 50%; box-shadow: 0 0 25px rgba(0,0,0,0.7); z-index: 1;}
/* Photograph */
#five article { right:10%; width:80%; height:200px; color: #fff; padding: 10px 20px; margin: 100px 0 0 60%; line-height: 1.5em; position: absolute; top: 0; }
#five .photograph2 { background: url(/templates/intercambios/img/brussel/mini_vub2.png) transparent 70% 100px no-repeat fixed; min-height: 290px; padding: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }
#five article p{position:relative;margin-left:40%;font-size: 14px;font-weight:normal;margin: 0;font-family: 'Raleway';color: #FFFFFF;line-height: 1.5; text-align:left;text-shadow: 0 2px 1px #000;}
#five article h2{position:relative;text-transform:none;	}
#five article span{	font-size: 120px;font-weight: normal;margin: 0;font-family: 'Raleway';color: #003566;text-shadow: none; }
#five img{ margin-top:50px;}
#costos{width:60%;}
#first h1 {font-size: 28px;font-weight: bold;margin: 0;font-family: 'Raleway';text-transform: uppercase;color: #FFFFFF;text-shadow: 0 5px 8px #000;line-height: .8;}
#third  h2,#second h2,#fourth h2,#five h2{font-size: 30px;font-weight: bold;margin: 0;font-family: 'Raleway';color: #FFFFFF;text-transform: uppercase;text-shadow: 0 2px 1px #000;line-height: .8;margin-bottom:20px;text-align:left;}
#title {overflow: hidden;font-size: 80px;margin: 0 auto -580px;width: 100%;position: relative;padding-top: 30px;z-index: 99;}
.title-line {position: relative;  margin: auto; width: 300%;}
.title-line span {line-height: 1.1; position: relative;}
#msg {   background-image: url("/templates/intercambios/img/brussel/bajar.png");    border-top-left-radius: 8px;    border-top-right-radius: 8px;    bottom: 0;    color: rgb(255, 255, 255);    font-size: 13px;    height: 53px;    line-height: 13px;    margin-left: 46%;    padding-top: 12px;    position: relative;    text-align: center;    top: 270px;    width: 102px;    z-index: 500;	}
#msg div {	display: inline-block;	}
#msg .word {	font-weight: bolder;	text-transform: uppercase;}
#msg a {	color: #FFFFFF;	margin-left: 10px;	}
#msg a:hover {	text-decoration: none;	}
#msg a:hover .word {	text-decoration: underline;	}
#msg img {	vertical-align: bottom;	}
#msg div.scroll {	width: 12px;	height: 13px;	vertical-align: bottom;	background-image: url("/templates/intercambios/img/brussel/demo_arrow_scroll.png");	}
#costos li{	font-family: 'Raleway';	}
.rovira_programa{	width: 769px;	}
@media (max-width: 1024px){	#third article{		margin: 50px 0 0 60%;		}	#five article span  {  	font-size: 100px;	}}
@media (max-width: 900px){	#five .photograph2{	display: none;	}	#five article h2{	text-align: center; line-height: normal;	}	#costos{	width: 100%;	}	#third .photograph{		display: none;	}	#third article p {		margin-left: 5%;	}	#third article h2{		margin-left: 0px !important;		text-align: center;	}	.rovira_programa{		width: 100%;	}	#second article, #fourth article{		width: 80%;		margin-left: 10%;	}	.story, .story2{		height: 700px;	}	.story3{		min-height: 1200px;	}}		
@media (max-width: 830px){	#five article span, #third article span {		font-size: 80px;		color: #FFF;	}}
@media (max-width: 680px){	#first h1 {
font-size: 16px;
    top: 139px !important;  }  #third h2, #second h2, #fourth h2, #five h2 {
    font-size: 18px;}  div#costos .contenido {
    width: 100% !important;
} #five article span, #third article span {		font-size: 50px;	}	.story {		height: 500px;	}	#second article {    	margin-top: 10%;	}}
@media (max-width: 450px){	#third article{		margin-top: 20px;	}	#five article span, #third article span {	    font-size: 30px;}	#five article{		margin-top: 10px;	}	#title{		padding-top: 0px;	} 	#first .smashinglogo {	background-position-y: 130px; background-size: 304%;	}	#first article h1 {	top: 85px;	} 	.story1 {    height: 353px;} #msg {top: 206px;	 margin: 0 auto; } #first article {    top: 60px; }}
@media (max-width: 328px){	#second{		padding: 0px;	}	.story {   		height: 550px;	}	.story2 {    	height: 800px;	}	.story3 {    	min-height: 520px;	}	.story3 h1{		display: none;	}	#msg{		background-size: contain;		margin-left: 38%;		width: 73px;		height: 45px;	}	#first article {		width: 100%;		top: 49px;	}		}