/*--------HEADER---------*/

header
{
	box-shadow: 0 2px 20px 0 rgba(0,0,0,0.05);
	background-color: #131212;
	width: 100%;
	height: 80px;
	position: fixed;
	top: 40px;
	left: 0;
	z-index: 9;
	display: block;
	/*overflow: hidden;*/
}

h3
{
	margin: auto;
	margin-bottom: 40px;
}

.content
{padding-top: 120px;}

section div .legenda
{
	background-color: white;
	color: #77808D;
	font-family: 'Conv_Roboto-Medium', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	padding: 25px;
}


section div .small-text
{
	font-size: 18px;
	line-height: 36px;
}

.bold-text
{
	font-family: 'Conv_Roboto-Medium', sans-serif;
}

section div li
{list-style-type: disc !important; line-height: 40px !important; font-size: 18px; margin-left: 20px;}

li
{color: #1A1B1B;}

/*--------- area 1 --------*/

section.area1
{
	width: 1170px;
	height: 740px;
	margin: auto;
	overflow: hidden;
	position: relative;
	padding-top: 90px;
}

section.area1 .info-area-1
{
	position: absolute;
    width: 970px;
    height: 300px;
    left: 200px;
}

section.area1 .alunos1
{
	width: 970px;
	height: 350px;
	background-image:url(../contents/erasmus/alunosErasmus.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;  /*chrome e safari*/
	-moz-background-size: cover;  /*firefox*/
	-ms-background-size: cover;  /*microsoft*/
	position: relative;
	margin-top: 390px;
}

section div .legenda.foto1
{
	position: absolute;
	top: 50%;
	margin-top: -40px;
	right: -200px;
	width: 220px;
}




/*--------- area 2 --------*/


section.area2
{
	width: 1170px;
	height: 950px;
	margin: auto;
	position: relative;
	padding-top: 90px;
}

section.area2 .info-area-2
{
	position: absolute;
    left: 200px;
}

section.area2 .alunos2
{
	width: 570px;
	height: 450px;
	background-image:url(../contents/erasmus/Dinamarca2018.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;  /*chrome e safari*/
	-moz-background-size: cover;  /*firefox*/
	-ms-background-size: cover;  /*microsoft*/
	position: relative;
	margin-top: 500px;
	float: left;
}

section div .legenda.foto2, section div .legenda.foto3
{
	position: absolute;
	bottom: 0;
	left: 60px;
	padding-bottom: 0px !important;
}


section.area2 .alunos3
{
	width: 570px;
	height: 450px;
	background-image:url(../contents/erasmus/MasstrichtPolo.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;  /*chrome e safari*/
	-moz-background-size: cover;  /*firefox*/
	-ms-background-size: cover;  /*microsoft*/
	position: relative;
	margin-top: 500px;
	float: right;
	background-position: center; 
}



/*--------- area 3 --------*/


section.area3
{
	width: 1170px;
	height: 595PX;
	margin: auto;
	overflow: hidden;
	position: relative;
	padding-top: 90px;
}

section.area3 .info-area-3
{
	position: absolute;
    left: 200px;
}

section.area3 .alunos4
{
	width: 970px;
	height: 350px;
	background-image:url(../contents/erasmus/HolandaPolo.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;  /*chrome e safari*/
	-moz-background-size: cover;  /*firefox*/
	-ms-background-size: cover;  /*microsoft*/
	position: relative;
	margin-top: 245px;
	background-position: center;
}

section div .legenda.foto4
{
	position: absolute;
	top: 50%;
	margin-top: -40px;
	right: -200px;
	width: 220px;
}



/*--------- area 4 --------*/


section.area4
{
	width: 1170px;
	height: 1405px;
	margin: auto;
	overflow: hidden;
	position: relative;
	padding-top: 90px;
}

section.area4 .info-area-4
{
	position: absolute;
    left: 200px;
}

section.area4 .alunos5
{
	width: 970px;
	height: 350px;
	background-image:url(../contents/erasmus/SanSebastian2019_01.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;  /*chrome e safari*/
	-moz-background-size: cover;  /*firefox*/
	-ms-background-size: cover;  /*microsoft*/
	position: relative;
	margin-top: 1055px;
	background-position: center;
}

section div .legenda.foto5
{
	position: absolute;
	top: 50%;
	margin-top: -40px;
	right: -70px;
	right: -200px;
	width: 220px;
}

ul.no-disc li
{list-style-type: none !important; margin-left: 0px;}




/*--------- area 5 --------*/


section.area5
{
	width: 1170px;
	height: 1140px;
	margin: auto;
	position: relative;
	padding-top: 90px;
}

section.area5 .info-area-5
{
	position: absolute;
    left: 200px;
}

section.area5 .alunos6
{
	width: 270px;
	height: 450px;
	background-image:url(../contents/erasmus/FrancaPolo.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;  /*chrome e safari*/
	-moz-background-size: cover;  /*firefox*/
	-ms-background-size: cover;  /*microsoft*/
	position: relative;
	margin-top: 535px;
	float: left;
	margin-right: 30px;
	background-position: center center;
}
section.area5 .alunos7
{
	width: 270px;
	height: 450px;
	background-image:url(../contents/erasmus/Copenhaga2017.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;  /*chrome e safari*/
	-moz-background-size: cover;  /*firefox*/
	-ms-background-size: cover;  /*microsoft*/
	position: relative;
	margin-top: 535px;
	float: left;
	margin-right: 30px;
	background-position: center;
}
section.area5 .alunos8
{
	width: 270px;
	height: 450px;
	background-image:url(../contents/erasmus/SanSebastian2019_02.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;  /*chrome e safari*/
	-moz-background-size: cover;  /*firefox*/
	-ms-background-size: cover;  /*microsoft*/
	position: relative;
	margin-top: 535px;
	float: left;
	margin-right: 30px;
}
section.area5 .alunos9
{
	width: 270px;
	height: 450px;
	background-image:url(../contents/erasmus/FrancaPolo2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;  /*chrome e safari*/
	-moz-background-size: cover;  /*firefox*/
	-ms-background-size: cover;  /*microsoft*/
	position: relative;
	margin-top: 535px;
	float: left;
	background-position: center;
}

section div .legenda.foto6, section div .legenda.foto7, section div .legenda.foto8, section div .legenda.foto9
{
	position: absolute;
	bottom: 0;
	left: 0px;
	padding-bottom: 0px !important;
}



/*----------------SMALLER SCREENS / MEDIA QUERIES---------------*/


@media (max-width: 1300px){

	section.area1
	{width: 1100px;}

	section.area1 .info-area-1
	{width: 900px;}

	section.area2
	{width: 1100px; height: 945px;}

	section.area2 .info-area-2
	{width: 900px;}

	section.area2 .alunos2, section.area2 .alunos3
	{width: 535px; height: 400px; margin-top: 545px;}

	section.area3
	{width: 1100px; height: 635px;}

	section.area3 .info-area-3
	{width: 900px;}

	section.area3 .alunos4
	{margin-top: 285px;}

	section.area4
	{width: 1100px; height: 1440px;}

	section.area4 .info-area-4
	{width: 900px;}

	section.area4 .alunos5
	{margin-top: 1090px;}

	section.area5
	{width: 1100px; height: 1025px;}

	section.area5 .info-area-5
	{width: 900px;}

	section.area5 .alunos6
	{width: 252px; height: 400px; margin-top: 535px;}
	section.area5 .alunos7
	{width: 253px; height: 400px; margin-top: 535px;}
	section.area5 .alunos8
	{width: 252px; height: 400px; margin-top: 535px;}
	section.area5 .alunos9
	{width: 253px; height: 400px; margin-top: 535px;}

}



@media (max-width: 1160px){

	section.area1
	{width: 960px;}

	section.area1 .info-area-1
	{width: 960px; left: 0;}

	section.area1 .alunos1
	{width: 960px;}

	section div .legenda.foto1
	{position: absolute; top: 345px; margin-top: -40px; width: auto; right: 740px;}

	section.area2
	{width: 960px; height: 835px;}

	section.area2 .info-area-2
	{width: 960px; left: 0;}

	section.area2 .alunos2
	{width: 465px; height: 330px; margin-top: 505px; background-position: bottom center; background-size: 120%;}
	section.area2 .alunos3
	{width: 465px; height: 330px; margin-top: 505px; background-position: center;}

	section.area3
	{width: 960px; height: 610px;}

	section.area3 .info-area-3
	{width: 960px; left: 0;}

	section.area3 .alunos4
	{width: 960px; margin-top: 260px;}

	section div .legenda.foto4
	{position: absolute; top: 345px; margin-top: -40px; width: auto; right: 798px;}

	section.area4
	{width: 960px; height: 1415px;}

	section.area4 .info-area-4
	{width: 960px; left: 0;}

	section.area4 .alunos5
	{margin-top: 1065px;}

	section div .legenda.foto5
	{position: absolute; top: 345px; margin-top: -40px; width: auto; right: 730px;}

	section.area5
	{width: 960px; height: 1435px;}

	section.area5 .info-area-5
	{width: 960px; left: 0;}

	section.area5 .alunos6
	{width: 465px; height: 360px; margin-top: 535px; background-position: center; float: left; background-size: 140%;}
	section.area5 .alunos7
	{width: 465px; height: 360px; margin-top: 535px; background-position: center; float: left; margin-right: 0px;}
	section.area5 .alunos8
	{width: 465px; height: 360px; margin-top: 90px; background-position: center; float: left;}
	section.area5 .alunos9
	{width: 465px; height: 360px; margin-top: 90px; background-position: bottom center; float: left; margin-right: 0px;}
	
	section.area5 .alunos6 .legenda, section.area5 .alunos7 .legenda, section.area5 .alunos8 .legenda, section.area5 .alunos9 .legenda
	{left: 60px;}
}



@media (max-width: 1050px){

	section.area1
	{width: 688px; height: 675px;}

	section.area1 .info-area-1
	{width: 688px;}

	section.area1 .alunos1
	{width: 688px; height: 250px; margin-top: 428px;}

	section div .legenda.foto1
	{top: 245px; right: 468px;}

	section.area2
	{width: 688px; height: 1375px;}

	section.area2 .info-area-2
	{width: 688px; left: 0;}

	section.area2 .alunos2
	{width: 688px; height: 330px; margin-top: 625px; background-position: center;}
	section.area2 .alunos3
	{width: 688px; height: 330px; margin-top: 90px; background-position: center;}

	section.area3
	{width: 688px; height: 610px;}

	section.area3 .info-area-3
	{width: 688px; left: 0;}

	section.area3 .alunos4
	{width: 688px; height: 250px; margin-top: 365px;}

	section div .legenda.foto4
	{top: 240px; right: 526px;}

	section.area4
	{width: 688px; height: 1415px;}

	section.area4 .info-area-4
	{width: 688px; left: 0;}

	section.area4 .alunos5
	{width: 688px; height: 250px; margin-top: 1170px;}

	section div .legenda.foto5
	{top: 240px; right: 445px;}

	section.area5
	{width: 688px; height: 1965px;}

	section.area5 .info-area-5
	{width: 688px; left: 0;}

	section.area5 .alunos6
	{width: 688px; height: 250px; margin-top: 605px; background-size: 120%; margin-right: 0px;}
	section.area5 .alunos7
	{width: 688px; height: 250px; margin-top: 90px; background-position: 0px -200px; margin-right: 0px;}
	section.area5 .alunos8
	{width: 688px; height: 250px; margin-top: 90px; background-position: 0px -300px; margin-right: 0px;}
	section.area5 .alunos9
	{width: 688px; height: 250px; margin-top: 90px; background-position: 0px -350px; margin-right: 0px;}

}

@media (max-width: 850px){

	.dark-header
	{display: none;}

	header
	{top: 0; height: 60px;}

	header nav ul
	{display: none;}

	header nav .logo-header
	{width: 160px !important; height: 45px; margin-top: 7px; margin-left: 30px;}

	.burger 
	{display: block; top: 15px; right: 30px;}
	
	.content
	{padding-top: 60px;}
}


@media (max-width: 800px){

	
	
}


@media (max-width: 740px){

	section div .small-text
	{font-size: 16px; line-height: 26px; margin-bottom: 10px;}

	section div li
	{font-size: 16px; line-height: 30px !important; margin-bottom: 10px;}

	section div .legenda
	{padding-top: 20px;}

	section.area1
	{width: 500px; height: 550px;}

	section.area1 .info-area-1
	{width: 500px;}

	section.area1 .alunos1
	{width: 500px; height: 200px; margin-top: 350px; background-position: -50px -22px; background-size: 125%;}

	section div .legenda.foto1
	{top: 200px; right: 310px;}

	section.area2
	{width: 500px; height: 1010px; padding-top: 60px;}

	section.area2 .info-area-2
	{width: 500px;}

	section.area2 .alunos2
	{width: 500px; height: 200px; margin-top: 550px; background-position: -50px -185px; background-size: 130%;}
	section.area2 .alunos3
	{width: 500px; height: 200px; margin-top: 60px; background-position: 0px -220px;}

	section div .legenda.foto2, section div .legenda.foto3
	{left: 30px;}

	section.area3
	{width: 500px; height: 525px; padding-top: 60px;}

	section.area3 .info-area-3
	{width: 500px;}

	section.area3 .alunos4
	{width: 500px; height: 200px; margin-top: 295px;}

	section div .legenda.foto4
	{top: 200px; right: 370px;}

	section.area4
	{width: 500px; height: 1365px; padding-top: 60px;}

	section.area4 .info-area-4
	{width: 500px;}

	section.area4 .alunos5
	{width: 500px; height: 200px; margin-top: 1165px;}

	section div .legenda.foto5
	{top: 200px; right: 290px;}

	section.area5
	{width: 500px; height: 1595px; padding-top: 60px;}

	section.area5 .info-area-5
	{width: 500px; left: 0;}

	section.area5 .alunos6
	{width: 500px; height: 200px; margin-top: 525px;}
	section.area5 .alunos7
	{width: 500px; height: 200px; margin-top: 60px; background-position: 0px -145px;}
	section.area5 .alunos8
	{width: 500px; height: 200px; margin-top: 60px; background-position: 0px -200px;}
	section.area5 .alunos9
	{width: 500px; height: 200px; margin-top: 60px; background-position: 0px -250px;}
	
	section.area5 .alunos6 .legenda, section.area5 .alunos7 .legenda, section.area5 .alunos8 .legenda, section.area5 .alunos9 .legenda
	{left: 30px;}


}


@media (max-width: 560px){

	section.area1
	{width: 100%; height: 735px;}

	section.area1 .info-area-1
	{width: 300px; left: 50%; margin-left: -150px;}

	section.area1 .alunos1
	{width: 100%; height: 230px; margin-top: 505px; background-position: bottom center; background-size: 140%;}

	section div .legenda.foto1
	{top: 230px; right: 310px;}

	section.area2
	{width: 100%; height: 1070px; padding-top: 60px;}

	section.area2 .info-area-2
	{width: 300px; left: 50%; margin-left: -150px;}

	section.area2 .alunos2
	{width: 100%; height: 230px; margin-top: 870px; background-position: -60px -190px; background-size: 130%;}
	section.area2 .alunos3
	{width: 100%; height: 230px; margin-top: 60px; background-position: 0px -230px;}

	section div .legenda.foto2, section div .legenda.foto3
	{left: 30px;}

	section.area3
	{width: 100%; height: 655px; padding-top: 60px;}

	section.area3 .info-area-3
	{width: 300px; left: 50%; margin-left: -150px;}

	section.area3 .alunos4
	{width: 100%; height: 230px; margin-top: 425px;}

	section div .legenda.foto4
	{top: 230px; right: 370px;}

	section.area4
	{width: 100%; height: 1740px; padding-top: 60px;}

	section.area4 .info-area-4
	{width: 300px; left: 50%; margin-left: -150px;}

	section.area4 .alunos5
	{width: 100%; height: 230px; margin-top: 1510px; background-size: 140%;}

	section div .legenda.foto5
	{top: 230px; right: 290px;}

	section.area5
	{width: 100%; height: 1820px; padding-top: 60px;}

	section.area5 .info-area-5
	{width: 300px;  left: 50%; margin-left: -150px;}

	section.area5 .alunos6
	{width: 100%; height: 230px; margin-top: 630px;}
	section.area5 .alunos7
	{width: 100%; height: 230px; margin-top: 60px; background-position: 0px -135px;}
	section.area5 .alunos8
	{width: 100%; height: 230px; margin-top: 60px; background-position: 0px -190px;}
	section.area5 .alunos9
	{width: 100%; height: 230px; margin-top: 60px; background-position: 0px -270px;}

}