@charset "UTF-8";
/* CSS Document */

html,
html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

header {
	padding: 20px;
}

div.style-logo {
	float: left;
}

div.style-mainmenubutton {
    float: right;
	padding-top: 25px;
    cursor: pointer;
}

div.style-mainmenuword{
	position: relative;
	left: -20px;
	color: darkslategrey;
}

div.style-mainmenu ul li {
	text-align: right;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 8px;
	list-style-type: none;
}

div.style-mainmenu ul li a {
	color: darkslategrey;
	text-decoration: none;
}

div.style-mainmenu ul li a:hover {
	text-decoration: underline;
}

div.style-mainmenu{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

div.style-underline{
	width: 100%;
	border-bottom : 1px solid lightgrey;
}


.bar1, .bar2, .bar3 {
    width: 12px;
    height: 2px;
    background-color: darkslategrey;
    margin: 2px 0;
    transition: 0.4s;
	position: relative;
	left:24px;
	top: -15px;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-2.5px, 3px) ;
    transform: rotate(-45deg) translate(-2.5px, 3px) ;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-2.5px, 3px) ;
    transform: rotate(45deg) translate(-2.5px, -3px) ;
}

div.style-submenu{
	padding: 20px;
	background-color: lightgray;
}

div.style-submenu ul li{
	display: inline-block;	
}

div.style-submenu ul li a {
	color: darkslategrey;
	text-decoration: none;
	padding-left: 8px;
	list-style-type: none;
}

div.style-submenu ul li a:hover {
	text-decoration: underline;
}

footer {
	padding: 20px;
	width: 100%;
}

div.style-name {
	float: left;
	color: darkslategrey;
}

div.style-date {
	float: right;
	color: darkslategrey;
}

div.style-main {
	padding: 20px; 
	position: relative;
	max-width: 850px;
	min-height: 300px;
	margin:auto;
}

/*
div.style-main a {
	color: darkslategrey;
}
	*/

div.style-main h1 {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; 
	margin-top:30px; 
	margin-bottom:20px;
	font-size:18px;
	color: teal;
}

div.style-main h2 {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; 
	margin-top:20px;
	margin-bottom:20px;
	font-size:14px;
	color: teal;
}

div.style-main p {
	margin-top:10px;
	margin-bottom:10px;
	text-align: justify;
}

div.style-main ul {
	margin-left:20px;
}

div.style-main div.style-TOC ul li {
	margin-left:40px;
	font-size:12px;
	color: teal;
	text-decoration: none;
}

div.style-main div.style-TOC ul li a {
	color: teal;
}


div.style-main table caption {
	font-style: italic;	
	margin: 10px;
}

datum{
	color: teal;
	font-size: 12px;
}

top {
	color: teal;
	font-size: 12px;
	text-align: right;
	display: block;
}

.mailicon:hover .mailflyover {
    visibility: visible;
	top:50px;  
	right: 20px;
	z-index: 1;
	background-color: darkgray;
	border-radius: 6px;
}

.mailicon .mailflyover {
    visibility: hidden;
	position:absolute;
	float: right;
}


.row:before, .row:after{
	content: "";
	display: table;
}

.row:after{
	clear: both;
}

.Penguins{
	background-image: url(images/image41.jpg);
	background-size: cover;
	background-position: center center; 
	padding: 20px 20px 50px 20px;
	text-align: center;
	height:450px;
}

.Travel{
	background-image: url(images/DSC_0253.jpg);
	background-size: cover;
	background-position: center center; 
	padding: 20px 20px 50px 20px;
	text-align: center;
	height:450px;
}

.SensorWiki{
	background-color:#C8A139; 
	padding: 30px 20px 60px;
	height:300px;
}

.About{
	background-color:#13A89D; 
	padding: 30px 20px 60px;
	height:300px;
}

.Publications{
	background-size: cover 120pt;
	background-image: url("images/Thesis_Pagina_001b.png");
	background-repeat: no-repeat;
	background-position: center 20pt; 
	
	padding: 30px 20px 60px;
	background-color: steelblue; 
	height:300px;
}

.Projects{
/*	background-color:#C8A139 ; */
	background-image: url("images/DVC00010.jpg");
	background-size: cover;
	background-position: center center; 
	padding: 30px 20px 60px;
	height:300px;
}

.MainPage .button{
	border: 2px antiquewhite solid;
	padding: 4px 20px;
	border-radius: 25px;
}

.MainPage .row .col p {
	font-size: 15px;
	font-weight: 200;
	margin-bottom: 20px;
	color:antiquewhite;
	text-align: center;
	text-decoration: none;
}

.MainPage .row .col h1{
	font-size: 30px;
	text-transform: capitalize;
	font-weight: 200;
	color:antiquewhite;
	text-decoration: none;
	text-align: center;
}

.MainPage .row .col a {
	font-weight: 200;
	color:antiquewhite;
	text-align: center;
	text-decoration: none;
}

.MainPage .row .col .Publications img{
	width: 35%;
	height: auto;
/*	vertical-align: middle;*/
}


/* Desktop view */
@media (min-width: 1024px){
	.Penguins{
		height:250px;
	}
	
	.Travel{
		height:250px;
	}
	
	.col-main {
		width: 50%;
		float: left;
	}
	
	.col {
		padding: 0px 7px 14px;
	}
	
	.MainPage .row .col h1 {
		font-size: 20px;
	}

}

/* Tablet view */
@media (min-width: 768px){

	
	.SensorWiki{
		height:250px;
		padding: 10px 20px 60px;
	} 
	
	.About{
		height:250px;
		padding: 10px 20px 60px;
	}

	.Publications{
		height:250px;
		padding: 10px 20px 60px;
	}

	.MainPage .row .col .Publications img{
		width: 55%;
	}
	
	.Projects{
		height:250px;
		padding: 10px 20px 60px;
	}

	.col-md-one-half {
		width: 50%;
		float: left;
	}
	
	.col {
		padding: 0px 7px 14px;
	}
		
	div.style-mainmenubutton {
    	display: none;
	}
	
	div.style-mainmenu {
		float: right;	
		max-height: 50px;
		padding-top: 20px;
	}
	
	div.style-mainmenu ul li {
		display: inline-block;	
	}
	
	div.style-mainmenu ul li .style-languagebutton{
	padding-right: 50px;
}
	
}