body {
  font-family: sans-serif;
  margin: 50px;
}
main {
  margin-top: 60px;
}
nav a {
		
		width:6em;
		float:left;
		text-decoration:none;
		padding-top :0.2em;
		padding-bottom :0.2em;
		padding-right :0.6em;
		padding-left :0.6em;
		color:white;
		background-color:blue;
		border: 1px solid white;	
		}
nav a:hover {
		background-color: #c39b77;
		}
		
.form{
width:340px;
height:460px;
background:#e6e6e6;
border-radius:8px;
box-shadow:0 0 40px -10px #000;
margin:auto;
padding:20px 30px;
max-width:calc(100vw - 40px);
box-sizing:border-box;
font-family:'Montserrat',sans-serif;
position:relative
}
input{width:100%;
padding:10px;
box-sizing:border-box;
background:none;
outline:none;
resize:none;
border:0;
font-family:'Montserrat',sans-serif;
transition:all .3s;
border-bottom:2px solid #bebed2;}
input:focus
{border-bottom:2px solid #78788c;}
p:before{
	content:attr(type);
	display:block;
	margin:28px 0 0;
	font-size:14px;
	color:#5a5a5a;}
button{float:right;
padding:8px 12px;
margin:8px 0 0;
font-family:'Montserrat',sans-serif;border:2px solid #78788c;
background:0;color:#5a5a6e;
cursor:pointer;
transition:all .3s}
button:hover{
background:#78788c;
color:#fff;}

span{margin:0 5px 0 15px;}		

th {
	color: red;
	background-color:  black;
}
caption{
	font-size: 200%;
	font-weight:  bold;
}


td         { border: inset 5pt;  
             background-color:  yellow;
			}
td.special { border: inset 5pt;
             color: blue;
background-color:  white;
			 } 

header {
background-color:#654321;
}
header h1 { text-align: center; 
color: white; 
border: 8px solid blue;
border-radius: 15px;

}

h2 { text-align: center; 
color: blue; 

}
aside {
  float: right;
  width: 30%;
  color: #000000;
background-color: #D3D3D3;
}

img div{
padding: 50px;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
.textleft {
	clear: right;
	float:left;
	margin:10px;
}
.textright {
	clear: left;
	float:right;
	margin:10px;
}
#movies li img{
    float:left;
    margin:0 5px;
}
.centerstudy{
    float:left;
    margin:0 5px;
	border: solid;
}


 /* Image slide show */      
.slide1 {float:left; width:650px; height:450px; overflow:hidden;}
.slide1 img{float:left; position:absolute; animation:slide1 25s infinite; opacity:0; width: 55%; height: 75%;}

@keyframes slide1 {25%{opacity:1;} 40%{opacity:0;}}
.slide1 img:nth-child(5){animation-delay:0s;}
.slide1 img:nth-child(4){animation-delay:5s;}
.slide1 img:nth-child(3){animation-delay:10s;}
.slide1 img:nth-child(2){animation-delay:15s;}
.slide1 img:nth-child(1){animation-delay:20s;}

 /* Slide in caption to image*/      
figure {
  display: block;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 0 20px 20px 0;
}
figcaption {
  position: absolute;
  background: black;
  background: rgba(0,0,0,0.75);
  color: white;
  padding: 10px 20px;
  opacity: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
}
figure:hover figcaption {
  opacity: 1;
}
figure:before {
  content: "?";
  position: absolute;
  font-weight: 800;
  background: black;
  background: rgba(255,255,255,0.75);
  text-shadow: 0 0 5px white;
  color: black;
  width: 24px;
  height: 24px;
  -webkit-border-radius: 12px;
  -moz-border-radius:    12px;
  border-radius:         12px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  -moz-transition: all 0.6s ease;
  opacity: 0.75;
}
figure:hover:before {
  opacity: 0;
}

.cap-left:before {  bottom: 10px; left: 10px; }
.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }

.cap-right:before { bottom: 10px; right: 10px; }
.cap-right figcaption { bottom: 0; right: -30%; }
.cap-right:hover figcaption { right: 0; }

.cap-top:before { top: 10px; left: 10px; }
.cap-top figcaption { left: 0; top: -30%; }
.cap-top:hover figcaption { top: 0; }

.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }

 /*  front page box layout */      
.gridcon {
    display: grid;
    /*grid-template areas: 'orange green yellow red';*/
    grid-gap: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    max-width: 750px;
    position: center; /* needed to work properly even though error  */
	left: 0;
	right: 0;
	background-color: #000000;
	}
 .center{
	  text-align: center;
	  margin-left:auto;
	  margin-right: auto;
}

.gridcon div {
padding: 1px;
display:inline-block;
box-sizing: border-box;
border-width:3px;
bottom: 1px;
right: 1px;
background-color: #000000;

}
#box1 {
 border-style: solid;
 grid-area: red 1/1/2/2; 
 border-width:10px;
 border-color: red;
 text-align: center;
 box-sizing: border-box;
 width: 350px;
 height: 320px;
 margin:10px 10px ;
 padding:5px ;
 background-color: #FBD222;
 
}

#box2  {
 border-style: solid;
 border-color: orange;
  grid-area: orange 1/2/2/3; 
 border-width:10px;
 text-align: center;
 box-sizing: border-box;
 width: 350px;
 height: 320px;
 margin:10px 10px ;
 padding:5px ;
 background-color: #FBD603;
}



footer {
		clear:both;
		position: fixed;
            padding: 10px 10px 0px 10px;
            bottom: 0;
            width: 100%;
            /* Height of the footer*/ 
            height: 40px;
            background: grey;
		}
/* Make image in link jump out */		
.zoom {
      text-align: center;
}
.zoom a img{
    transition: transform .2s; /* Animation */
}
.zoom a:hover img {
  transform: scale(1.5); /* (150% zoom)*/
}