html, body {
	font-family: Helvetica, sans-serif;
	font-size: 91%;
	line-height: 21px;
      margin: 0;
      padding: 0;
      display: flex;
  	flex-direction: column;
  	height: 100%;
  	background-color: #EAECEE;
    }
    
/* ofuscate emails */

.ofuscated_email {
	font-style: italic;

}

.ofuscated_email spam {
	display: none;
}


/* ANIMATIONS */

@keyframes anim-fromLeft {
  0% {
    opacity: 0;
    transform: translateX(-10vw);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateX(0%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes anim-fromRight {
  0% {
    opacity: 0;
    transform: translateX(10vw);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateX(0%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes anim-fromBottom {
  0% {
    opacity: 0;
    transform: translateY(5vh);
  }
  10% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}


@keyframes anim-fadeToBottom {
  0% {
    opacity: 1;
    transform: translateY(0%);
    
  }
  10% {
  opacity: 1;
    transform: translateY(0);
  }
  25% {
  opacity: 0;

  }
  100% {
    opacity: 0;
    transform: translateY(5vh);
  }
}

@keyframes anim-smoother-fromLeft {
  0% {
    opacity: 0;
    transform: translateX(-1%);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateX(0%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes anim-fadeIn {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.1;
  }
  20% {
    opacity: 0.2;
  }
  30% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.5;
  }
  60% {
    opacity: 0.6;
  }
  70% {
    opacity: 0.7;
  }
  80% {
    opacity: 0.8;
  }  
  90% {
    opacity: 0.9;
  }  
  100% {
    opacity: 1;
  }
}


/* HOME */
    
h1, h2, h3 {
	font-family: 'Helvetica', sans-serif;
}
/*
.csbg-logo {
position: absolute;
top: 16px;
left: 30px;
width: 105px;
visibility: hidden;
}
*/
.csbg-logo {
position: absolute;
top: 12px;
left: calc(((100vw - 1280px) / 2) + 30px);
width: 450px;

}




    header {
      color: white;
background: #536976;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #292E49, #536976);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #292E49, #536976); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      padding-top: 20px;
      padding-bottom: 30px;
      padding-left: 170px;
      height: 42px;
      min-height: 42px;
      font-size: 92%;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.35);
      z-index: 20;
      /*position: sticky;*/
  top: 0;
  border-bottom: 1px ridge #515A5A;
    }
 
header h1 {display: none} 
    
footer {
	border-top: 1px ridge #515A5A;
	background-color: #010b0b;
	text-align: center;
	color: white;
	font-size: 70%;
}


mark.orange{
	color:#cfd80e;
	background: none;
	font-size: 150%;

                 padding-right: 1px;
}

/*
.header_buttons {
	position: absolute;
	left: calc(100vw - 870px);
	top: 30px;
	height: auto;
	background: none;
  justify-content: space-around;
}

.hover-border {
color: white;
	background: none;
	border: none;
	font-size: 105%;
	padding-top:13px;
	padding-bottom:14px;
	padding-left: 20px;
	padding-right: 20px;
	margin-left: 5px;
	margin-right:5px;
	cursor: pointer;
  position: relative; /* Needed for the absolute positioning of the hover border 
  overflow: hidden; /* Hide any overflow caused by the hover border
}
*/

.header_buttons {
	position: absolute;
	left: calc(((100vw - 1280px) / 2) + 540px);
	top: 30px;
	height: auto;
	background: none;
  justify-content: space-around;
}

.hover-border {
color: #ECF0F1;
	background: none;
	border: none;
	font-size: 105%;
	padding-top:13px;
	padding-bottom:14px;
	padding-left: 15px;
	padding-right: 15px;
	margin-left: 3px;
	margin-right:3px;
	cursor: pointer;
  position: relative; /* Needed for the absolute positioning of the hover border */
  overflow: hidden; /* Hide any overflow caused by the hover border*/
}







.hover-border::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  border-top: 3px solid transparent;
  z-index: 10; /* Put the hover border behind the button content */
  transition: border-top-color 0.6s; /* Add a smooth transition for the border color change */
}



.current-page{
  color: #cfd80e;
}

.hover-border:hover {
	color: #cfd80e;
}

.hover-border:hover::before{
  border-top-color: #cfd80e;
}




 /* Main content container styles */
.main-container {
	display: grid;
	grid-template-columns:1fr;
	grid-template-rows: 2fr 7fr;
background-color: #fffcfc;
	padding: 0;
	margin: 0;
	max-width: 1280px;
	margin-left: calc((100vw - 1280px) / 2);
	border-left: 0px solid darkgray;
	border-right: 0px solid darkgray;
	overflow: hidden;
	height: 100%;
}

.presentation-div {
padding-right: 25%;
	padding-left:25%;
	padding-top: 30px;
	border-right: 1px solid darkgray;
	border-left: 1px solid darkgray;
}

.presentation-div a {
	text-decoration: none;
	font-weight: bold;
	color:#3299d5;
}

.presentation-div a:hover {
	color:#b35de0;
	text-decoration: underline;
}


.updates-carrousel-grid {
	display: grid;
	grid-template-columns: 5fr 3fr;
	padding: 0;
}



.carrousel-div {
padding:0;
border-top: 1px solid darkgray;
border-right: 1px solid #262b44;
	border-left:  1px solid darkgray;
}



.updates-changes {
background: rgb(124,139,151);
background: -moz-linear-gradient(0deg, rgba(86,95,118,1) 0%, rgba(124,139,151,1) 85%, rgba(124,139,151,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(86,95,118,1) 0%, rgba(124,139,151,1) 85%, rgba(124,139,151,1) 100%);
background: linear-gradient(0deg, rgba(86,95,118,1) 0%, rgba(124,139,151,1) 85%, rgba(124,139,151,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7c8b97",endColorstr="#565f76",GradientType=1);
	padding: 0px;
	padding-top: 10px;
	padding-left: 0;
	padding-bottom: 75px;
	z-index: 15;
	overflow-y: hidden;
	color: #22273d;
	border-top: 1px solid #262b44;
	border-right:  1px solid #262b44;
	
}


.updates-changes p {
	margin-left: 30px;
	margin-bottom: 25px;
	padding-right: 20px;
}

.updates-changes-title  {
	text-decoration: none;
	color: #f2f2f4;

  
	padding: 5px;
	margin:0px;

	margin-left: 0;

	border-left: 0px solid #cfd80e;
	border-radius: 0px 10px 10px 0px;
}

.updates-changes-title h1 {
	font-size: 200%;
	line-height: 100%;
	border-left: 0px solid #3299d5;
	margin-left: 15px;
	padding: 8px;
	padding-left: 20px;
}

.inner-updates-changes {
	margin-top: 0px;
}

.updates-changes a {
	text-decoration: none;
	font-weight: bold;
	color:#cfd80e;
}

.updates-changes a:hover {
	text-decoration: underline;
	color:#cfd80e;
}

.updates-changes hr {
	height: 1px;
	border: 0px solid #062331;
	border-radius: 50px;
 background: #262b44;
}

.h2_header {
	color: #09263F;
}

.p-presentation {
	font-size: 100%;
}


#slide{
	height: 100%;
	vertical-align: top;

}

.mySlides {
	display: none;
	height: 100%;

}

.mySlides img {
		overflow: hidden;
		position:absolute;
		/* 
		top: 0;
		right: 0; 
		min-width: 100%;
		min-height: 100%;
		*/
}

.img-caption {
	position: absolute;
	bottom: 10%;
	padding-bottom: 0px;
	color: #ECF0F1;
background: rgb(41,46,73);
background: -moz-linear-gradient(90deg, rgba(41,46,73,1) 0%, rgba(86,95,118,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(41,46,73,1) 0%, rgba(86,95,118,1) 100%);
background: linear-gradient(90deg, rgba(41,46,73,1) 0%, rgba(86,95,118,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#292e49",endColorstr="#565f76",GradientType=1);

  



	max-width: 500px;
	min-height: 10%;
	text-align: left;
	padding-left: 2%;
animation: 2.5s anim-fromLeft ease-out;
	align-items: center;
	border-radius: 0px 20px 20px 0px;
	border: 0px solid purple;
	border-left: 0px solid #3299d5;
	display: flex;
	font-size: 125%;
	line-height: 135%;
	font-weight: bold;
	z-index: 25;
}



.img-caption p {
  padding: 10px;
  margin-right: 40px;
  animation: 4s anim-fromLeft ease-out;
}



.slideshow-container {
	width: 100%;
	height: 100%;
	position: relative;
	margin: 0px;
	overflow: hidden;
}
/* Next & previous buttons */

.shadow-prev, .shadow-next {
	cursor: pointer;
	position: absolute;
	top: 0%;
	width: 10%;
	height: 100%;
}

.shadow-prev {

}

.shadow-next {
	right: 0;
	
}
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	
	



}

.shadow-prev:hover .prev, .shadow-next:hover .next {
	color: #3299d5;
}

.shadow-prev {
	transition: 10s background;
}

.shadow-next {/*default shadow at the left*/

	transition: 10s background;
}

.prev {
	border-radius: 0px 10px 10px 00px;
background: rgb(41,46,73);
background: -moz-linear-gradient(270deg, rgba(41,46,73,1) 0%, rgba(86,95,118,1) 100%);
background: -webkit-linear-gradient(270deg, rgba(41,46,73,1) 0%, rgba(86,95,118,1) 100%);
background: linear-gradient(270deg, rgba(41,46,73,1) 0%, rgba(86,95,118,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#292e49",endColorstr="#565f76",GradientType=1);
	
}

/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 10px 0px 0px 10px;
	border-right: 0px solid black;
	
background: rgb(41,46,73);
background: -moz-linear-gradient(90deg, rgba(41,46,73,1) 0%, rgba(86,95,118,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(41,46,73,1) 0%, rgba(86,95,118,1) 100%);
background: linear-gradient(90deg, rgba(41,46,73,1) 0%, rgba(86,95,118,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#292e49",endColorstr="#565f76",GradientType=1);
}
/* On hover, add a black background color with a little bit see-through */
.shadow-prev:hover {
	background: linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
}


.shadow-next:hover {
	background: linear-gradient(270deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
}


/* The dots/bullets/indicators */
.dot {
	cursor: pointer;
	height: 13px;
	width: 13px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.active, .dot:hover {
	background-color: #717171;
}
/* Fading animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1s;
	animation-name: fade;
	animation-duration: 1s;
	color:black;
}
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}


/* RESEARCH LINES*/

.allwidth-container {

	background-color: #fffcfc;
	padding: 0;
	margin: 0;
	max-width: 1280px;
	margin-left: calc((100vw - 1280px) / 2);
	border-left: 1px solid darkgray;
	border-right: 1px solid darkgray;
}

.introduction-div {
	position: relative;
	text-align: justify;
	margin: 0;
	padding-right: 25%;
	padding-left:25%;
	padding-top: 50px;
	padding-bottom: 3%;
	font-size: 100%;
	/*box-shadow: 0px 10px 12px rgba(0, 0, 0, 0.5);*/
	
	z-index: 5;
	border-left:1px solid #ECF0F1;
	border-right:1px solid #ECF0F1;
}

.introduction-div a {
	color:#3299d5;
	text-decoration:none;
	font-weight: bold;
}


.introduction-div a:hover {
	color:#b35de0;
	text-decoration:underline;
}


.introduction-div h1 {
	color: #010b0b;
	text-align: center;
	margin-top: 0;
	margin-bottom: 5%;
	 animation: 1s anim-smoother-fromLeft ease-out;

}


/*
.introduction-div::after {
    content:'';
    position: absolute;
    top: 99%;
    left: 50%;
    margin-left: -50px;
    width: 0;
    height: 0;
    border-top: solid 50px #116ea4;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;

  z-index: 2;
}
*/


.uncolored-div, .colored-div {
/*box-shadow: 0px 10px 12px rgba(0, 0, 0, 0.5);*/

z-index: 0;

}

.colored-div, .uncolored-div {
	flex:1;
	margin: 0;
	padding-top: 30px;
	padding-bottom:30px;
	text-align: justify;
}

.colored-div {
	display: grid;
	grid-template-columns: 6fr 4fr;
	padding-right: 30px;
	padding-left: 50px;
}

.uncolored-div {
	display: grid;
	grid-template-columns: 4fr 6fr;
	padding-right: 50px;
	padding-left: 30px;
	border-top: 0px solid #cfd80e;
	border-bottom: 0px solid #cfd80e;
	
}

.colored-div {
background: #536976;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #292E49, #536976);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #292E49, #536976); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  
	color:white;
	border-top: 0px solid #cfd80e;
	border-bottom: 0px solid #cfd80e;
}

.colored-div h2 {
	color: white;
	border-left: 5px solid #cfd80e;
	padding-left: 15px;
	padding-top: 10px;
	padding-bottom: 6px;
}

.uncolored-div {
z-index: -1;
 background: white;  
	color:black;
}

.uncolored-div h2 {
	color: black;
	border-left: 5px solid #3299d5;
	padding-left: 15px;
	padding-top: 10px;
	padding-bottom: 6px;
}

.colored-div > p, .uncolored-div > p {
	width: 50%;
}

.colored-div > ul, .uncolored-div > ul {
	width: 40%;
}


.colored-div a, .uncolored-div a {
	text-decoration: none;
	font-weight: bold;
}

.colored-div a {
	color: #cfd80e;
}



.colored-div a:hover {
	text-decoration: underline;
	color: #b35de0;
}

.uncolored-div a {
	color:#3299d5;
}

.uncolored-div a:hover {
	text-decoration: underline;
	color: #b35de0;
}

.colored-div-imgs {
	text-align: right;
	padding: 0;
	margin: 0;
	padding-left: 45px;
	padding-top:10px;
	
}

.colored-div-imgs img {
	width: 100%;
	margin: 0;
}

.uncolored-div-imgs {
	text-align: left;
	padding-right: 45px;
	padding-top: 10px;

}

.uncolored-div-imgs img {
	width: 100%;
	margin: 0;
	margin-top: 0;
}

.div-funding{
	text-align: center;
	background-color: rgba(124,139,151,1);
	padding-top: 20px;
	padding-bottom: 50px;
	border-top: 0px solid #4C4D4D;
}

.div-funding p {
	padding-bottom: 20px;
	color: black;
}

.funding-logo {
	height: 80px;
	margin-left: 20px;
	margin-right: 20px;

}

/* PEOPLE */

.div-current-members {
	position: relative;
	text-align: center;
	margin: 0;
	padding-top: 49px;
	padding-right: 30%;
	padding-left:30%;
	padding-bottom: 35px;
	font-size: 100%;
	/*box-shadow: 0px 10px 12px rgba(0, 0, 0, 0.5);*/

	z-index: 3;
}

.title-people-div {
	margin: 0;
	padding: 0;
	padding-bottom: 25px;
}

.div-current-members h1 {
	color: #010b0b;
	margin:0;
	padding:0;
	 animation: 1s anim-smoother-fromLeft ease-out;
}

.table-current-members {
	width: 130%;
	text-align: left;
	white-space:nowrap;
}

.div-current-members a {
	color: #3299d5;
	font-weight: bold;
	text-decoration: none;
}

.div-current-members a:hover {
	text-decoration: underline;
	color: #b35de0;
}

.twitter-user img{
	width: 22px;
	padding-top: 0px;
	display: inline;
}
.twitter-user p {
	display: inline;
	margin-bottom: 100px;
}


.job-offer {
	margin-top: 25px;
	border-top: 2px solid #010b0b;
	padding-top: 20px;
	width: 100%;
}

.former-members-div {
	flex:1;
	margin: 0;
	padding: 40px;
	padding-left: 5%;
	text-align: justify;
background: #536976;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #292E49, #536976);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #292E49, #536976); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


	color: white;
		border-top: 0px solid #083987;

}

.former-members-div h2 {
	color: white;
	border-left: 5px solid #cfd80e;
	padding-left: 15px;
	padding-top: 10px;
	padding-bottom: 6px;
}


.former-members-div a {
	text-decoration: none;
	font-weight: bold;
	color: #cfd80e;
}



.former-members-div a:hover {
	text-decoration: underline;
	color:  #b35de0;
}

.former-members-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}


.former-member .ofuscated_email {
	color: #3299d5;
}
.former-member {
	padding-left: 45px;
	padding-right: 45px;
}


/* WEBSERVERS */

.div-webservers {
 text-align: center;
 background-color: #fffcfc;
	max-width: 1280px;
	margin-left: calc((100vw - 1280px) / 2);
	/*box-shadow: 0px 10px 12px rgba(0, 0, 0, 0.5);*/
		border-left: 1px solid darkgray;
	border-right: 1px solid darkgray;
}

.div-webservers a {
  text-decoration: none;
  font-weight: bold;
  color: #3299d5;
}

.div-webservers a:hover{
  text-decoration: underline;
  color: #b35de0;
}


.title-webservers-div {
	padding: 0;
	margin: 0;
	padding-top: 50px;
	padding-bottom: 40px;
}

.title-webservers-div h1 {
padding: 0;
	margin: 0;
	padding-bottom: 25px;
	text-align: center;
	color: #010b0b;
	animation: 1s anim-smoother-fromLeft ease-out;

}



.grid-webservers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width:100%;
	border: 1px solid #292E49  ;
	margin: 0;
	width: 99.9%;
 margin-left: 0;
 background-color:#292E49; 
 border-radius:00px;


}

.program-webserver {
color: white;
 text-align: center;
background: rgb(70,86,104);
background: -moz-radial-gradient(circle, rgba(70,86,104,1) 0%, rgba(73,89,107,1) 0%, rgba(92,109,124,1) 100%);
background: -webkit-radial-gradient(circle, rgba(70,86,104,1) 0%, rgba(73,89,107,1) 0%, rgba(92,109,124,1) 100%);
background: radial-gradient(circle, rgba(70,86,104,1) 0%, rgba(73,89,107,1) 0%, rgba(92,109,124,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#465668",endColorstr="#5c6d7c",GradientType=1);
 border: 1px solid #292E49;
 padding-left: 20%;
 padding-right: 20%;
 cursor: pointer;
 min-height: 12vh;
 
 border-radius:0px;
 
}




.program-webserver:hover {
color: white;
background: rgb(94,110,124);
background: -moz-radial-gradient(circle, rgba(94,110,124,1) 0%, rgba(124,142,153,1) 100%);
background: -webkit-radial-gradient(circle, rgba(94,110,124,1) 0%, rgba(124,142,153,1) 100%);
background: radial-gradient(circle, rgba(94,110,124,1) 0%, rgba(124,142,153,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5e6e7c",endColorstr="#7c8e99",GradientType=1);
border-style: solid;
}




.program-webserver h2 {
color: #3299d5;

	padding: 0;
	margin:0;
	margin-top: 2vh;
	margin-bottom: 1vh;
	


}



.program-webserver a {
color: #3299d5;


}


.program-webserver a:hover {
color: #b35de0;
    text-shadow: 0px 0px 0 rgb(41,46,73),
                 0px 1px  0 rgb(41,46,73),
                 0px 2px 1px rgba(0,0,0,0),
                 0px 2px 1px rgba(0,0,0,0.5),
                 0px 0px 1px rgba(0,0,0,.2);
}

.program-webserver:hover > h2 {
	color: #cdf803;
	    text-shadow: 0px 0px 0 rgb(41,46,73),
                 0px 1px  0 rgb(41,46,73),
                 0px 2px 1px rgba(0,0,0,0),
                 0px 2px 1px rgba(0,0,0,0.5),
                 0px 0px 1px rgba(0,0,0,.2);

}

.program-webserver:hover a {
	color: #cdf803;

}

.dashL, .dashR {
	display: none;
	color: #3299d5;
	padding-left: 10px;
	padding-right: 10px;
	
}


.program-webserver:hover .dashL,  .program-webserver:hover .dashR{
	display: none;
}




/* CONTACT */

.div-contact {
	flex-grow: 1;
	overflow: hidden;
	background-color: #fffcfc;
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	font-size: 130%;
	line-height: 150%;
	min-height: 75%
}

.title-contact-div h1 {
animation: 1s anim-smoother-fromLeft ease-out;
	padding: 0;
	margin: 0;
	padding-top: 5vh;
	text-align: center;
	margin-top: 0;
	color: #010b0b;
	
}


.map-container {
 padding-top: 8vh;
 padding-left: 7vw;

}
.map-container iframe {
	width: 30vw;
	height: 50vh;
}

.map {
	width: 10%;
	height: 100%;
}

.contact-text-div {
	padding-top: 10vh;
	padding-left: 20vw;

}

.contact-text-div a{
   	color: #3299d5;
	text-decoration: none;
	font-weight: bold;

}

.contact-text-div a:hover {
   	color:#b35de0;
	font-weight: bold;
	text-decoration: underline;

}

.contact-footnote {
	text-align: center;
	height: 10vh;
	border-top: 1px ridge #515A5A;

background: #536976;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #292E49, #536976);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #292E49, #536976); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


	color: #fffaf8;
	font-weight: bold;
	padding-top: 2vh;
	height: 100%;
	box-shadow: 0px -4px 15px rgba(0, 0, 0, 0.4);
	
}

.contact-footnote a {
	color: #cfd80e;
}

.contact-footnote a:hover {
	color:#b35de0;
}

.contact-footnote img {
	margin-left: 10px;
}

.contact-footnote .ofuscated_email {
	color: #3299d5;
}


/* PUBLICATIONS */

.allwidth-container-publications {
	flex: 1;
	background-color: grey;
	padding: 0;
	margin: 0;
	max-width: 1280px;
	margin-left: calc((100vw - 1280px) / 2);
	/*box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.50);*/
	border-left: 1px solid darkgray;
	border-right: 1px solid darkgray;
}

.gotopublications-div {
	background:  #fffcfc;
	/*
background: -moz-radial-gradient(circle, rgba(252,247,245,1) 0%, rgba(198,196,193,1) 100%);
background: -webkit-radial-gradient(circle, rgba(252,247,245,1) 0%, rgba(198,196,193,1) 100%);
background: radial-gradient(circle, rgba(252,247,245,1) 0%, rgba(198,196,193,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fcf7f5",endColorstr="#c6c4c1",GradientType=1);
*/
	color: black;
	margin: 0;
	padding-right: 15%;
	padding-left: 15%;
	padding-top: 45px;
	padding-bottom: 20px;
	text-align: center;
	line-height: 35px;
}

.gotopublications-div p {
	margin-bottom: 0;
}

.gotopublications-div h1 {
	color: #010b0b;
	margin: 0;
	padding: 0;
animation: 1s anim-smoother-fromLeft ease-out;
	/*
background: rgb(147,55,162);
background: -moz-linear-gradient(135deg, rgba(147,55,162,0) 15%, rgba(147,55,162,1) 15%, rgba(147,55,162,1) 18%, rgba(147,55,162,0) 18%, rgba(212,217,0,0) 82%, rgba(212,217,0,1) 82%, rgba(212,217,0,1) 85%, rgba(212,217,0,0) 85%);
background: -webkit-linear-gradient(135deg, rgba(147,55,162,0) 15%, rgba(147,55,162,1) 15%, rgba(147,55,162,1) 18%, rgba(147,55,162,0) 18%, rgba(212,217,0,0) 82%, rgba(212,217,0,1) 82%, rgba(212,217,0,1) 85%, rgba(212,217,0,0) 85%);
background: linear-gradient(135deg, rgba(147,55,162,0) 15%, rgba(147,55,162,1) 15%, rgba(147,55,162,1) 18%, rgba(147,55,162,0) 18%, rgba(212,217,0,0) 82%, rgba(212,217,0,1) 82%, rgba(212,217,0,1) 85%, rgba(212,217,0,0) 85%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3299d5",endColorstr="#3299d5",GradientType=1);
*/
}


.gotopublications-div a {
	color: #3299d5;
	text-decoration: none;
	font-weight: bold;	
}

.gotopublications-div a:hover {
	color:#b35de0;
	text-decoration: underline;
}



.anchor {
	display: block;
    position: relative;
    top: -0px; /*BEWARE!!! THIS VALUE MUST ADJUSTED "A OJO DE BUEN CUBERO" RELATION TO THE HEIGHT OF THE HEADER (aprox minus twice the value of heder heigth, idk why)*/
    visibility: hidden;

}


.journal-articles-div > li, .book-chapters-div > li, .book-monographs-div > li {
    margin-left: 75px;
    margin-right: 10%;
    text-align: justify;
}

.journal-articles-div a, .book-chapters-div a, .book-monographs-div a {
    color: #3299d5;
    text-decoration: none;
    font-weight: bold;
}

.journal-articles-div a:hover, .book-chapters-div a:hover, .book-monographs-div a:hover {
	color:#b35de0;
	text-decoration: underline;
}


.journal-articles-div, .book-chapters-div, .book-monographs-div {
	background-color: #fffcfc;
}



.sectionP {
background: #536976;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #292E49, #536976);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #292E49, #536976); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


	/*
	padding-top: 30px;
	padding-left: 100px;
	padding-bottom: 15px;
*/
	font-weight: bold;
	color: white;
	font-size: 160%; 
	margin-bottom: 20px;
	display: grid;
	grid-template-columns: 1fr 20fr;
	grid-template-rows: 1fr;
}

/*
.square-arrow {
fill:lime;fill-rule:evenodd;display: block;
margin: 0;
padding:0;
height: 50%;

}
*/

.sectionP h3 {
 padding-left: 50px;
 margin-top: 27px;
 margin-bottom: 22px;
}


.square-arrow {
  display: inline-block;
  height: 100%;
  position: relative;
  width:83px;
  display: grid;
  grid-template-columns: 2fr 2fr 4fr 2fr 4fr 2fr 17fr;
  grid-template-rows: 1fr;

  
}
.square-arrow:before {
    border-left:30px solid #cfd80e;
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent;
    content: "";
    height: 0;
    position: absolute;
    width: 0;
    right: -30px;
}

.square-arrow div {
	height: 100%;
}

.square-arrow .colored-stripe {
	background-color:#cfd80e;
}

.square-arrow .uncolored-stripe {
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 0px;
  margin-bottom: 8px;
  margin-top: 20px;
  font-weight: bold;
  color: #010b0b;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 2px solid  #010b0b;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}


/* TEACHING */

.title-teaching-div {
	padding: 0;
	margin: 0;
	padding-top: 50px;
	padding-bottom: 50px;
	
}

.title-teaching-div h1 {
padding: 0;
	margin: 0;
	text-align: center;
	color: #010b0b;
	animation: 1s anim-smoother-fromLeft ease-out;
}

.div-teaching {
	height: 100%;
	flex-grow: 1;
	padding-bottom: 60px;
	background-color: #fffcfc;
	max-width: 1280px;
	margin-left: calc((100vw - 1280px) / 2);
	/*box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.50);*/
	border-left: 1px solid darkgray;
	border-right: 1px solid darkgray;
}

.div-teaching li {
  font-size: 100%;
  line-height: auto;
}

.div-teaching ul {
	margin: 0;
	padding-left: 10vw;
	padding-right: 15vw;
}

.div-teaching a {
 color:#3299d5;
 text-decoration: none;
 font-weight: bold;
}

.div-teaching a:hover {
 color:#b35de0;
 text-decoration: underline;
 
}

.div-teaching p {
	text-align: center;
	  font-size: 115%;
	  padding: 0;
	  margin: 0;
	  margin-bottom: 15px;
}



/* @MEDIA queries */
/*
@media screen and (max-width: 1810px) {
   header {
        padding-top: 35px;
        padding-bottom: 20px;
   
   }
   header h1 { 
      font-size: 170%;
   }
   
   .header_buttons {
   	font-size: 90%;
   	padding-top: 5px;
   	left: 47vw;
   }
}*/



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

html {
	width: 1280px;
}


.main-container, .allwidth-container, .div-webservers, .div-teaching, .allwidth-container-publications {
	margin-left: 0;
}

header {
	width: 1110px;
}

.csbg-logo {
	left: 30px;
}

.header_buttons {
	position: static;
	margin-top: 10px;
	margin-left: 360px;
	justify-content: auto;

}
 
 /* CONTACT MEDIA QUERIES*/
 
 .map-container iframe {
	width: 435px;
	height: 435px;
} 
 
 
.contact-grid {
	font-size: 115%;
}


.map-container {
 padding-left: 6vw;

}




.contact-text-div {
	padding-top: 10vh;
	padding-left: 15vw;

}

/*RESEARCH MEDIA QUERIES
   .colored-div {
     padding-right: 0;
   }
   .colored-div-imgs {
	padding-top: 10%;
	width: 98%;
	padding-left:0px;
	}
    .colored-div-imgs img {
    	width: 90%;
    }
   
	.uncolored-div{
	padding-left: 0%;
	margin-left: 0;
	}
   .uncolored-div-imgs {
   	margin-left: 0;
	padding-top: 6%;
	width: 96%;
	padding-right:2px;
	}
*/ 

}

@media screen and (max-height: 870px) {
html {
	height: 870px;
	overflow-y; scroll;
}
	


}

/*
li {list-style-type: none;}

li:before {color: black; content: "-"; font-size: 130%; margin-left: -30px; margin-right: 5px;}
*/


.goback {
	display: none;
background: #536976;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #292E49, #536976);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #292E49, #536976); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


	color: #cfd80e;
	font: bold 11px "Helvetica";
	padding: 12px;
	text-decoration: none;

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;

	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .25);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .25);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .25);
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	position: fixed;
	bottom: 30px;
	right: 50px;
	animation: 2.5s anim-fromBottom ease-out;

}
/*⬆*/
.goback:after {
	background: #cfd80e;
	color: #000100;
	content: "⬆";
	display: inline-block;
	font: bold 15px "Arial";
	height: 25px;
	line-height: 25px;
	margin-left: 10px;
	text-align: center;
	width: 25px;
	
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.goback:hover {
	-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 1);
	-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 1);
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 1);
	color: #b35de0;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.goback:hover:after {
background: #b35de0;
}