body{
  font: 1.6vw/1.5 Helvetica, Arial, sans-serif;
  padding:0;
  margin:0;
  background-color:#f4f4f4;
}

/* --------- Global styling ---------------*/
.container{
  width:75%;
  margin:auto;
  text-align:center;
  overflow:hidden;
}

.main_text{
  width:65%;
  margin:auto;
  text-align:justify;
  overflow:hidden;
  /*background:#cacfd2;*/
  padding:2%;
}

ul{
  margin:0;
  padding:0;
}



.paragraph_style_2{
  font-size:2vw;
  color:#9b0014;
  font-weight:bold;
}

.paragraph_style_3{
  font-weight:bold;
  text-align: center;
  padding:3px;
  background-color: #cacfd2;
}

.paragraph_style_4{
  font-size: 1.8vw;
}

.paragraph_style_5{
  font-size:1.8vw;
  font-weight:bold;
  color: #9b0014;
}

.paragraph_style_6{
  font-weight:bold;
}

.paragraph_style_7{
  font-size:1.8vw;
  font-weight:bold;
}

.paragraph_style_8{
  font-size:3vw;
  font-weight:bold;
}

.paragraph_style_caption{
  font-size:1.5vw;
  text-align:center;
  font-style:italic;
}


.bullets{
  padding-left:35px;
}


.yellow_background{
padding:15px;
border:1px;
border-style:solid;
border-color:#000000;
background-color:#fcfca4;
margin-top:15px;
}


.stripe_ACME img{
  padding:10px 0 0 0;
  width:100%;
  float:left;
}

footer{
  padding:2%;
  color:#ffffff;
  background-color:#9b0014;
}

.text_footer{
  position:relative;
  text-align:left;
  top:1.5vw;
}

.caption_pictures_people{
  font-size: 1.2vw;
}


/* The following lines are needed to remove the color from the hyperlinks*/
a{
    color: #0060B6;
    text-decoration: none;
}

a:hover{
     color:#00A0C6;
     text-decoration:none;
     cursor:pointer;
}



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

header{
  padding-top:30px;
  min-height:70px;
  border-bottom:  #9b0014  3px solid;
}

header a{
  color: #9b0014;
  text-decoration: none;
  text-transform: uppercase;
  font-size:1.2vw;
}

header ul{
  margin-left:0;
  padding:0;
}

header li{
  float:left;
  display:block;
  padding:0 20px 0 0;
}


header a:hover {
  color: #cccccc;
  font-weight:bold;
}

#logo img{
  position:absolute;
  left:3vw;
  top:3vw;
  width:7%;
  padding:0 30px 0 0;
}

#logo_extended img{
  position:absolute;
  right:15vw;
  top:3vw;
  width:15%;
  padding:0 0 30px 0;
}

#branding{
  text-align:left;
}

/* -------- Showcase ----------- */

/*#showcase h1{
  margin-top:100px;
  font-size:55px;
  margin-bottom:10px;
}*/


.image_showcase{
  height:20vw;
  background:url('../Images_ACME/Photo_gran_type_GRAG_3.jpg') no-repeat 0 -500px;
  /*opacity:.3;*/
  /*text-align:center;
  color:#ffffff;*/
}

/*
.image_showcase:before{
    content: '';
    position: absolute;
    top: 225px;
    right: 0;
    left: 0;
    bottom: 425px;
    background: rgba(255,255,255,.3);
}*/

.text_showcase {
  font-size:4vw;
  text-align:center;
  position:relative;
  top:-20vw;
  color:#ffffff;
}


/*Styling of the sidebar NEWS*/

aside#sidebar{
float:right;
width:30%;
margin-top:1vw;
}






/* The following lines are needed to style the slider in the homepage */

.slider{
  width:100%;
  text-align: justify;
  display:flex;
  justify-content:space-between;
  padding-top:60px;
}

.image_container_slider_left {
  width:60%;
  padding-top:5%;
  padding-bottom:20%;
  overflow:hidden;
  position:relative;
  margin:auto;
  /* background-color: #9b0014; */
}

.image_container_slider_left img{
  position:absolute;
  animation:fling-minislide 40s infinite;
  opacity:0;
  width:85%;
  height:auto;
  margin-left:7%;
}

@keyframes fling-minislide {25%{opacity:1;} 30%{opacity:0;}}
.image_container_slider_left img:nth-child(4){animation-delay:0s;}
.image_container_slider_left img:nth-child(3){animation-delay:10s;}
.image_container_slider_left img:nth-child(2){animation-delay:20s;}
.image_container_slider_left img:nth-child(1){animation-delay:30s;}



.image_container_slider_center {
  width:60%;
  padding-top:5%;
  padding-bottom:20%;
  overflow:hidden;
  position:relative;
  margin:auto;
}

.image_container_slider_center img{
  position:absolute;
  animation:fling-minislide 44s infinite;
  opacity:0;
  width:85%;
  height:auto;
  margin-left:7%;
}

@keyframes fling-minislide {25%{opacity:1;} 30%{opacity:0;}}
.image_container_slider_center img:nth-child(2){animation-delay:0s;}
.image_container_slider_center img:nth-child(1){animation-delay:11s;}
.image_container_slider_center img:nth-child(4){animation-delay:22s;}
.image_container_slider_center img:nth-child(3){animation-delay:33s;}



.image_container_slider_right{
  width:60%;
  padding-top:5%;
  padding-bottom:20%;
  overflow:hidden;
  position:relative;
  margin:auto;
}

.image_container_slider_right img{
  position:absolute;
  animation:fling-minislide 48s infinite;
  opacity:0;
  width:85%;
  height:auto;
  margin-left:7%;
}

@keyframes fling-minislide {25%{opacity:1;} 30%{opacity:0;}}
.image_container_slider_right img:nth-child(1){animation-delay:0s;}
.image_container_slider_right img:nth-child(2){animation-delay:12s;}
.image_container_slider_right img:nth-child(3){animation-delay:24s;}
.image_container_slider_right img:nth-child(4){animation-delay:36s;}





#link_slider{
  text-align: center;
  padding:5%;
  color: #9b0014;
  transform: translateY(300%);
}

#slider_left{
  border:2px;
  border-style:solid;
  /*border-radius:10px;*/
  border-color: #ffffff;
  background-color: #ffffff;

}

#slider_left:hover, #slider_left:active {
  border: 2px;
  border-style: solid;
  border-radius:10px;
  border-color: #0282ce;
  background-color: #aad9f5;
}


#slider_center{
  border:2px;
  border-style:solid;
  /*border-radius:10px;*/
  border-color: #ffffff;
  background-color: #ffffff;
  margin-left:20px;
  margin-right: 20px;
}


#slider_center:hover, #slider_center:active {
  border:2px ;
  border-style: solid;
  border-radius:10px;
  border-color:  #0282ce;
  background-color: #aad9f5;
  margin-left:20px;
  margin-right: 20px;
}


#slider_right{
  border:2px;
  border-style:solid;

  border-color: #ffffff;
  background-color: #ffffff;
}


#slider_right:hover, #slider_right:active {
border: 2px;
border-style: solid;
border-radius:10px;
border-color: #0282ce;
background-color:  #aad9f5;
}


#link_slider:hover{
  color: #ffffff;
  font-weight:lighter;
}


.button_container{
  top:200px;
  position:absolute;
}


.slider_button{
  display:inline-block;
  height:20px;
  width:20px;
  border-radius:20px;
  background-color:#000000;
}




/* Code for styling the photos in the people page*/

.container_people{
  width:75%;
  margin:auto;
  overflow:hidden;
}


#People_ACME .Photo_person img{
  width:70%;
  float:center;
  padding: 0 0 40px 0;
}



#People_ACME .Photo_person {
 /*display:inline;*/
 margin-right: 2vw;
 width:28%;
 float:left;
 text-align:center;
 padding:10px 10px 80px 10px;
}





.button {
  font-size: 1.5vw;
  padding: 5%;
  background-color: #E0E0E0;
  color: #000000;
  border: 1px solid #666666;
  /*border-radius: 20px/50px;*/
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  color: #ffffff;
  background: #aad9f5;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 5%;
  background: #ffffff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  text-align: left;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #000000;
  text-align: left;
  font-family: Helvetica, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  /*transition: all 200ms;*/
  font-size: 2vw;
  font-weight: bold;
  text-decoration: none;
  color: #000000;
}
.popup .close:hover {
  color: #ff3333;
}

.popup .contents {
  max-height: 80%;
  text-align: left;
  padding:10px 0 0 10px;
  /*overflow: auto;*/
  font-family: Helvetica, Arial, sans-serif;
}


hr{
border:  #9b0014  1.5px solid;
width:90%;
}




/* Code for styling the photos in the research page*/




.main_text_research{
  width:70%;
  margin:auto;
  text-align:justify;
  overflow:hidden;
  /*background:#cacfd2;*/
  padding:20px;
}



.center_map{
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
padding:30px 0 20px 0;
}


/* Code for styling the photos in the facilities page*/




.main_text_facilities{
  width:70%;
  margin:auto;
  text-align:justify;
  overflow:hidden;
  /*background:#cacfd2;*/
  padding:20px;
}



.center_image{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
padding:20px 0 20px 0;
}


.image_Prep_lab_facilities img{
  display:inline-block;
  width:32.5%;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 0 20px 0;
}

#Prep_lab_facilities_img{
  text-align:center;

}



.image_piston_facilities img{
  width:32.5%;
  float:center;
  padding: 20px 0 20px 0;
}


/* Code for styling the photos in the contacts page*/




#Address_ACME .Photo_person img{
  width:70%;
  float:center;
  padding: 0 0 40px 0;
}



#Address_ACME .Photo_person{
 /*display:inline;*/
 margin-left:5vw;
 margin-right: 5vw;
 width:28%;
 float:left;
 text-align:center;
 padding:10px 10px 80px 10px;
}















/* Media queries -> These commands style the size of the page when you make the window smaller.
   Floating of the different elements is also controlled. 479 px is the size of smartphone */

@media only (max-width: 479px){
   #sidebar,{
    float:none;
  }
}

header{
  padding-bottom: 5vw;
}







/* Hidden hitcounter (visible only by the webmaster)*/
/*
.hitcounter{
  display:none;
}
*/

/* ------- Styling people's photos ------------- */