@charset "UTF-8";
* { margin: 0; padding: 0; } 
body{background-color: #1B264B}

/* format the header */
.Header{height: 350px;
	background-image: url("Images/Header.jpg");
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	text-align: center;
	color: white;
}
	
#Top{display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	font-family: "American Typewriter";
}

#Column1{width:300px;
	position: left}


#Column2 nav ul li{list-style: none;
	padding: 10px;
}

#Column2 nav ul li:before{content: '';
   display: inline-block;
   height: 12px;
   width: 20px;
   background-image: url("Images/Spain.png");
	background-size:contain;
	background-repeat: no-repeat;
}

#Column2 nav ul li a{color: white;
	text-decoration: none;
}

#Column2{padding-top: 20px;
	text-align: right;
	padding-right: 20px;
}

#Column2 ul li:hover{text-decoration: underline}
#Column2 ul li:active{font-weight: bold}
#Column2 ul li:visited{color: white}

.Title{font-family: "American Typewriter";
	padding: 60px;
	text-align: center;
	color: white;
}

#secotitle{font-weight: normal;}

#maintitle{letter-spacing: 10px;
	font-size: 35px;
}

#secotitle{padding-top: 30px}

/* format the main */

#LatestNews {background-color: white;
    border: 1px solid black;
    text-align: center;
    padding: 20px;
    font-family: "American Typewriter";
}

.container {display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
	font-family: "American Typewriter";
	text-align: center;
	color: white;
}

.container a{color: white;
	text-decoration: none;
}

#OURRESEARCH H1, #PEOPLE H1, #PUBLICATIONS H1, #DOCUMENTS H1{font-weight: normal;
	font-size: 25px;
	padding-top: 125px;
	padding-bottom: 125px;
}

#OURRESEARCH{background-image: url("Images/Our research.jpg");
			background-position:center;
			background-repeat:no-repeat;
			background-size: cover;
			border: 10px transparent;
}

#OURRESEARCH:hover{border: 5px solid #9C4849;
	transition: all 0.3s;
}

#OURRESEARCH:active{opacity: 0.75}

#PEOPLE{background-image: url("Images/people.jpg");
			background-position:center;
			background-repeat:no-repeat;
			background-size:cover;
}

#PEOPLE:hover{border: 5px solid #D69F03;
	transition: all 0.3s;
}

#PEOPLE:active{opacity: 0.75}

#PUBLICATIONS{background-image: url("Images/publications.jpg");
			background-position:center;
			background-repeat:no-repeat;
			background-size:cover;
}

#PUBLICATIONS:hover{border: 5px solid #59885D;
	transition: all 0.3s;
}
#PUBLICATIONS:active{opacity: 0.75}

#DOCUMENTS{background-image: url("Images/documents.jpg");
			background-position:center;
			background-repeat:no-repeat;
			background-size:cover;
}

#DOCUMENTS:hover{border: 5px solid #565A80;
	transition: all 0.3s;
}
#DOCUMENTS:active{opacity: 0.75}

/* format of the footer */
.footer{display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
}

#lowernews {margin:50px auto;
	width: 80%;
}

#News { background-color: white;
  border-radius: 25px;
  border: 2px solid #CC4949;
  padding: 20px; 
  width: auto;
  font-family: "American Typewriter";
}

#Newstitle{text-align: center;
	font-size: 20px;
}

#Newstext{text-align: left;
	padding-top: 10px;
}

#Newstext p{padding-bottom: 10px;
}


@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

#twitter{margin:50px auto; 
}

@media only screen and (max-width: 950px) {.container {grid-template-columns: 1fr 1fr;}

@media only screen and (max-width: 768px) {
	#maintitle{font-size: 30px;}
	#Column1 {margin: auto}
	#Column2 {margin: auto}
	#secotitle {display: none;}
}

@media only screen and (max-width: 420px) {
	.Header{height: 230px}
	.container {grid-template-columns: 1fr;}
	#Column1 {margin-top: 20px;
			margin-left: 0px;}
	#maintitle {display: none;}
	#map {height: 350px; 
		width: 350px;}
	#Imglogo {width: 370px; height: auto}
	
}
	
}