@font-face {
    font-family: Roboto;
    src: url(Roboto-Light.ttf);
}    
   

body {
    background-color:
 #001803;
    text-align: center;
    margin: 0 auto;
    font-family: Roboto, Arial, sans-serif;Garamond, serif;
    padding: 50px;body 
    width:100%
img {
 
}
    
}

.imgborder img{
    border: 1px ridge silver;
    padding: 4px;
}

h1{
    color:#f03ea9;
    font-size:40px;
    font-weight: 700;
}

h2{
 font-size:30px;
    color:#e60000;
    font-weight: 600;
     font-family: Roboto;
}

h2 a{
    color:#E36887;
    font-weight: 600;
}

h3, h3 a, h3 a:visited{
    font-size:15pt;
    color:#0a6b0d;
    font-weight:300;
    padding: 0;
    margin: 0px;
}

h3.vicolo {color: indigo;}

h2.works, h2.works a, h2.works a:visited {
    color:#F9DEFC;
font-weight: 500;
 font-size : 16pt;
}

h2.works2, h2.works2 a, h2.works2 a:visited {
    color:#B6F3F1;
font-weight: 300;
 font-size : 16pt;
}


h2.works3, h2.works3 a, h2.works3 a:visited {
    color:#87027C;
font-weight: 500;
 font-size : 18pt;
 }

 h2.works4, h2.works4 a, h2.works4 a:visited {
    color:#A3F4FD;
font-weight: 500;
 font-size : 14pt;
 }

 h2.works5, h2.works5 a, h2.works5 a:visited {
    color:#aaf2ea;
font-weight: 500;
 font-size : 12pt;
 }

  h2.works6, h2.works6 a, h2.works6 a:visited{
    color:#000000;
font-weight: 550;
 font-size : 13pt;
line-height: 5pt;
text-align: center;
  justify-content: left; 
 }

  h2.works7, h2.works7 a, h2.works7 a:visited{
    color:#000000;
font-weight:800;
 font-size : 16pt;
 }



.special {
    font-size : 16pt;
    text-align : left;
    color : #5CB3FF;
    font-family:
}

.custom1 {
    font-size : 13pt;
    text-align : center;
    color :#F4E3FD;
}
.custom1bold {
    font-size : 12pt;
    text-align : left;
    color :  #fed1e8 ;
    font-weight:900;
}

.custom2, .custom2 a, .custom2 a:visited {
    font-size :12pt;
    text-align : center;
    color :#59E6FD;
}

.custom3 {
    font-size :15pt;
    text-align : center;
    color :#59E6FD;
    font-weight: 550;
}

.custom4 {
    font-size :14pt;
    text-align : left;
    color :#C2ACEA;
}

.custom5 {
    color:#67FEFE;
    text-align : center;
    font-size:13px;
    margin-bottom:10px;
}

.custom7 {
    color:#000;
    text-align : left;
    font-size:14pt;
    margin:0;
    padding:0;
}

.heavy{font-weight;900;}

  {
  box-sizing: border-box;
}
.imagegrid

{
column-gap: 100px;
flex: 50%;
    max-width: 50%;
}

.column {
  float: center;
  width: 25%;
  padding:50px;
  height: 300px; 
   column-count: 3;
}



.grid-container {
  display: grid;
  grid-template-columns: auto auto ;
  grid-gap: 5px;
  
  padding: 5px;
}

.grid-container > div {
  background-color: rgba(255, 255,  0.8);
  text-align: center;
  padding: 10px 0;
 
}

*.col {
    float: left;
    width: 50%;
    height: 40px;
    background-color:white;
}
.grid-container {
  position: relative;
  width:100%;
  padding:5px;
  
 /* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.grid-container:hover .image {
  opacity: 0.4;
}

.grid-container:hover .middle {
  opacity: 1;
}

.text {
  background-color: 
  color: <font color="  #ffffff ";>
  font-size: 32px;
  padding: 5px 5px;
}
p.detail1 { color:#1A0073;font-weight:bold;font-family:Roboto;font-size:35 }
    span.name { color: #C4008C;font-weight:bold;font-family:Roboto;font-size:28 }

p.detail2 { color:#004F1F;font-weight:bold;font-family:Roboto;font-size:35 }
    span.name { color: #C4008C;font-weight:bold;font-family:Roboto;font-size:28 }
* {box-sizing: border-box;}

.container {
  position: relative;
  width: 50%;
  max-width: 300px;

}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute; 
  bottom: 10; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0); /*0 see-through */
  color: #ffffff; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: re;
  font-size: 24px;
  padding: 20px;
  text-align: center;
  font-family: Roboto;
}

.container:hover .overlay {
  opacity: 1;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.container {
  position: relative;
  width:100%;
  padding:5px;
  
 
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.2;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: 
  color:blue;
  font-size:36px;
  padding: 8px 16px;
  font-family: Roboto;
   text-align: left;

}




var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

>
var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block";  
  setTimeout(carousel, 9000);    
}

* {box-sizing: border-box;}
body {font-family: Roboto, sans-serif;}

.mySlides {display: none;}
img {vertical-align: middle;}

@media only screen and (max-width: 600px) {
.grid-container {grid-template-columns: 49% 49%;grid-column-gap: 2%;}
}

@media only screen and (max-width: 400px) {
.grid-container {display:block}
}

#footer {
}

/* The bit where you describe hatch */
#footer #upper {
	background: #ADD8E6;
}

#footer #upper p {
	color:#343848;
}

/* Your contact details */
#footer #lower {
	background: #88BFCA;
}

#footer #lower p{
	color:#ffffff;
}

#footer #uppercontent, #footer #lowercontent {
	max-width:1010px;
	padding:20px;
	margin: 0 auto;
}

#footer a {
	text-decoration: none;
	color: #ffffff;
}