body {
margin:0;
padding:0;}

#logo {
position:absolute;
left:0;
top:0;
Width:60%;
height:9%;
background:#33cccc;
color:#1d7373;
border:2px solid black;
border-left:none;
z-index:99;}

#gif {
float:left;}

#logo a {
padding-left:10px;}

#link1 {
position:absolute;
left:60%;
top:0;
width:10%;
height:9%;
background:#67e667;
text-align:center;
border:2px solid black;
z-index:99;
}

#link1:hover {
background:#008500;
transition-duration: 2s;
}

#link1:hover a {
color:#67e667;
transition-duration: 1s;
}

#link2 {
position:absolute;
left:70%;
top:0;
Width:10%;
height:9%;
background:#67e667;
border:2px solid black;
z-index:99;
}


#link2:hover {
background:#008500;
transition-duration: 2s;
 }

#link2:hover a {
color:#67e667; 
transition-duration: 1s;
}

#link3 {
position:absolute;
left:80%;
top:0;
Width:10%;
height:9%;
background:#67e667;
border:2px solid black;
z-index:999;
}

#link3:hover {
background:#008500; 
transition-duration: 2s;
}

#link3:hover a {
color:#67e667; 
transition-duration: 1s;
}

#link4 {
position:absolute;
left:90%;
top:0;
Width:10%;
height:9%;
background:#67e667;
border:2px solid black;
border-right:none;
border-left:none;
z-index:99;}

#link4:hover {
background:#008500; 
transition-duration: 2s;
}

#link4:hover a {
color:#67e667;
transition-duration: 1s;
}

iframe {
position:absolute;
top:15%;
left:0;
width:80%;
margin-left:10%;
height:80%;
z-index:9999;
margin-top:2px;
border:2px solid gray;}

#body {
position:absolute;
top:100%;
left:0;
margin:0;
padding:0;
width:100%;}

#intro {
width:80%;
margin-left:10%;
margin-right:10%;
background:#c0c0c0;
border-bottom:4px solid #008500;}

#introh1 {
color:#240aab; 
font:45px 'verida';}

#intro p {
padding:10px;
}

#introimg {
margin-bottom:10px;}

#contrib {
width:80%;
margin-left:10%;
margin-right:10%;}

td {
font:'arial';
text-align:center;
padding:10px;}

#contribh1 {
color:#240aab; 
font:45px 'verida';}

#models {
width:80%;
margin-left:10%;
margin-right:10%;
background:#c0c0c0;
border-bottom:4px solid #33cccc;
border-top:4px solid #33cccc;}

#footer {
background:#4671d5;
width:100%;
z-index:99999;
clear:both;}

ul {
list-style-type:none;
padding:0;}

ul li {
display:inline-block;
width:10%;
}

ul li a {
color:#1240ab;}

#model {
width:100%; }

#model li {
width:33%; 
display:inline-block;}

#footer div {
display:inline-block;}

#fleft {
position:absolute;
width:25%;
color:#4671d5;
background:#4671d5;
border-left:none;
}

#foot1 {
position:absolute;
left:25%;
width:10%;
background:#4671d5;
border-left:2px solid black;
}

#foot1:hover {
background:#1240ab;
transition-duration: 2s;
}

#foot1 a {
color:#1240ab;}

#foot1:hover a {
color:#4671d5;
transition-duration: 1s;
}

#foot2 {
position:absolute;
left:35%;
width:10%;
color:#1240ab;
background:#4671d5;
border-left:2px solid black;}

#foot2:hover {
background:#1240ab;
transition-duration: 2s;
}

#foot2 a {
color:#1240ab;}

#foot2:hover a {
color:#4671d5;
transition-duration: 1s;
}

#foot3 {
position:absolute;
left:45%;
width:10%;
color:#1240ab;
background:#4671d5;
border-left:2px solid black;}

#foot3:hover {
background:#1240ab;
transition-duration: 2s;
}

#foot3 a {
color:#1240ab;}

#foot3:hover a {
color:#4671d5;
transition-duration: 1s;
}

#foot4 {
position:absolute;
left:55%;
width:10%;
color:#1240ab;
background:#4671d5;
border-left:2px solid black;}

#foot4:hover {
background:#1240ab;
transition-duration: 2s;
}

#foot4 a {
color:#1240ab;}

#foot4:hover a {
color:#4671d5;
transition-duration: 1s;
}

#foot5 {
position:absolute;
left:65%;
width:10%;
color:#1240ab;
background:#4671d5;
border-left:2px solid black;
border-right:2px solid black;
z-index:9999;}

#foot5:hover {
background:#1240ab;
transition-duration: 2s;
}

#foot5 a {
color:#1240ab;}

#foot5:hover a {
color:#4671d5;
transition-duration: 1s;
}

#fright {
position:absolute;
left:75%;
width:25%;
color:#4671d5;
background:#4671d5;
}

span {
font-family:verida;}

h1 {
font-family:verida;
}

h2 {
font-family:verida;
}

h3 {
font-family:verida
}

p {
font-family:verida;}

a {
text-decoration:none;
color:#008500;}

#left {
margin-left:25%;}


video {
position:absolute;
top:15%;
left:0;
width:80%;
margin-left:10%;
height:80%;
z-index:1;
margin-top:2px;
border:2px solid gray;}

#content {
width:100%;
margin-left:10%;
position:absolute;
top:100%;}

#outro {
background:#c0c0c0;
width:80%;
margin-left:10%;
border-bottom:4px solid #008500;}

#outro h1 {
color:#240aab; 
font:45px 'verida';}

#outro p {
padding:10px;}

#particles {
width:80%;
margin-left:10%;}

#particles h1 {
color:#240aab; 
font:45px 'verida';}

ul {
list-style-type:none;
padding-left:0;}

#particles ul li img {
float:left;
clear:both;}

#subatomicparts li {
display:block;
width:100%;
height:200px;}

#gray {
background:#c0c0c0;
border-bottom:4px solid #008500;}


   #timeewan {
			position:absolute;
			left:10%;
			
			width:80%;
			}
			
			#timeewan h1 {
			color:#240aab; 
			font:45px 'verida';}
			
            .timeline {
                width: 70%;
				position:absolute;
				left:15%;
				top:150%;
			
            }
            .timeline .timeline-item {
                width: 100%;
            }
            .timeline .timeline-item .info, .timeline .timeline-item .year {
                color: #000000;
                display: block;
                float:left;
                
                transition: all 1s ease;
            }
            .timeline .timeline-item.close .info, .timeline .timeline-item.close .year {
                color: #ffffff;
                
                transition: all 1s ease;
            }
            .timeline .timeline-item .year {
                font-size: 24px;
                font-weight: bold;
                width: 22%;
            }
            .timeline .timeline-item .info {
                width: 100%;
                width: 78%;
                margin-left: -2px;
                padding: 0 0 40px 35px;
                border-left: 4px solid #aaa;
                font-size: 14px;
                line-height: 20px;
            }
            .timeline .timeline-item .marker {
                background-color: #fff;
                border: 4px solid #aaa;
                height: 20px;
                width: 20px;
                border-radius: 100px;
                display: block;
                float: right;
                margin-right: -14px;
                z-index: 2000;
                position: relative;
            }
            .timeline .timeline-item.active .info, .timeline .timeline-item:hover .info {
                color: #444;
                
                transition: all 1s ease;
            }
            .timeline .timeline-item.active .year, .timeline .timeline-item:hover .year {
                color: #9DB668;
            }
            .timeline .timeline-item .marker .dot {
                background-color: white;
                
                transition: all 1s ease;
                display: block;
                border: 4px solid white;
                height: 12px;
                width: 12px;
                border-radius: 100px;
                float: right;
                z-index: 2000;
                position: relative;
            }
            .timeline .timeline-item.active .marker .dot, .timeline .timeline-item:hover .marker .dot {
                
                transition: all 1s ease;
                background-color: #9DB668;
                box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
            }
			.timeline .timeline-item .info 
     {
         width: 100%;
         width: 78%;
         margin-left: 22%;
         padding: 0 0 40px 35px;
         border-left: 4px solid #aaa;
         font-size: 14px;
         line-height: 20px;
       }

	   
#ewan {
position:absolute;
top:100%;
width:80%;
margin-left:10%;}

#foot {
position:absolute;
bottom:0;
background:#4671d5;
width:100%;
z-index:99999;
clear:both;}

#body {
position:absolute;
top:120%;}




#header {
position:absolute;
top:15%;
width:80%;
margin-left:10%;
margin-right:10%;}

#header h1 {
color:#240aab; 
font:45px 'verida';}

a {
text-decoration:none;
color:#008500;}

.hoverBoxBox {width:600px; height:425px; margin:0 auto; border:20px solid #fc6; background:#000000; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);
background: url(democritus.jpg), url(johndalton.jpg), url(roentgen.jpg), url(mariecurie.jpg), url(thomson.jpg), url(rutherford.jpg), url(bohr.jpg), url(schrodinger.jpg), url(chadwick.jpg), url(democritus.jpg);
background-position: 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 0;
background-repeat: no-repeat;

transition: 0s 9999999s;
position:absolute;
top:275px;
right:50px;

}
.hoverBox {
padding:10px; margin:10px; border:1px solid #aaa; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);}

img.pic1 {
position:absolute;
left:0;
top:40%;}

img.pic2 {
position:absolute;
left:200px;
top:40%;}

img.pic3 {
position:absolute;
left:400px;
top:40%;}

img.pic4 {
position:absolute;
left:0;
top:65%;}

img.pic5 {
position:absolute;
left:200px;
top:65%;}

img.pic6 {
position:absolute;
left:400px;
top:65%;}

img.pic7 {
position:absolute;
left:0;
top:90%;}

img.pic8 {
position:absolute;
left:200px;
top:90%;}

img.pic9 {
position:absolute;
left:400px;
top:90%;}

img.pic1:hover ~ .hoverBoxBox {border-color:#F8737A;
background-position: 0 0, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px;

transition:0.5s;
}
img.pic2:hover ~ .hoverBoxBox {border-color:#FFA366;
background-position: 0 -500px, 0 0, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px;

transition:0.5s;
}
img.pic3:hover ~ .hoverBoxBox {border-color:#FFFFA3;
background-position: 0 -500px, 0 -500px, 0 0, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px;

transition:0.5s;
}
img.pic4:hover ~ .hoverBoxBox {border-color:#A3FF85;
background-position: 0 -500px, 0 -500px, 0 -500px, 0 0, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px;

transition:0.5s;
}
img.pic5:hover ~ .hoverBoxBox {border-color:#597ADE;
background-position: 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 0, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px;

transition:0.5s;
}
img.pic6:hover ~ .hoverBoxBox {border-color:#9C59FF;
background-position: 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 0, 0 -500px, 0 -500px, 0 -500px, 0 -500px;

transition:0.5s;
}
img.pic7:hover ~ .hoverBoxBox {border-color:#A366A3;
background-position: 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 0, 0 -500px, 0 -500px, 0 -500px;

transition:0.5s;
}
img.pic8:hover ~ .hoverBoxBox {border-color:#ABFFFF;
background-position: 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 0, 0 -500px, 0 -500px;

transition:0.5s;
}
img.pic9:hover ~ .hoverBoxBox {border-color:#ABC7C7;
background-position: 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 -500px, 0 0, 0 -500px;

transition:0.5s;
}


img.pic1:hover ~ #box-1 {  
    background-color: rgba(0,0,0,0.8);  
    position: absolute;  
    color: #fff;   
   
    transition: 0.5s 300ms ;  
    right:70px;
    top: 1000px;
    visibility: visible;
} 
img.pic2:hover ~ #box-2 {  
    background-color: rgba(0,0,0,0.8);  
    position: absolute;  
    color: #fff;   
   
    transition: 0.5s 300ms ;  
    right:70px;
    top: 640px;
    visibility: visible;
} 
img.pic3:hover ~ #box-3 {  
    background-color: rgba(0,0,0,0.8);  
    position: absolute;  
    color: #fff;   
   
    transition: 0.5s 300ms ;  
    right:70px;
    top: 640px;
    visibility: visible;
} 
img.pic4:hover ~ #box-4 {  
    background-color: rgba(0,0,0,0.8);  
    position: absolute;  
    color: #fff;   
   
    transition: 0.5s 300ms ;  
    right:70px;
    top: 640px;
    visibility: visible;
} 
img.pic5:hover ~ #box-5 {  
    background-color: rgba(0,0,0,0.8);  
    position: absolute;  
    color: #fff;   
   
    transition: 0.5s 300ms ;  
    right:70px;
    top: 640px;
    visibility: visible;
} 
img.pic6:hover ~ #box-6 {  
    background-color: rgba(0,0,0,0.8);  
    position: absolute;  
    color: #fff;   
   
    transition: 0.5s 300ms ;  
    right:70px;
    top: 640px;
    visibility: visible;
} 
img.pic7:hover ~ #box-7 {  
    background-color: rgba(0,0,0,0.8);  
    position: absolute;  
    color: #fff;   
   
    transition: 0.5s 300ms ;  
    right:70px;
    top: 640px;
    visibility: visible;
} 
img.pic8:hover ~ #box-8 {  
    background-color: rgba(0,0,0,0.8);  
    position: absolute;  
    color: #fff;   
   
    transition: 0.5s 300ms ;  
    right:70px;
    top: 640px;
    visibility: visible;
} 
img.pic9:hover ~ #box-9 {  
    background-color: rgba(0,0,0,0.8);  
    position: absolute;  
    color: #fff;   
   
    transition: 0.5s 300ms ;  
    right:70px;
    top: 640px;
    visibility: visible;
} 

#box-1 {position: absolute; 
    right:70px;
    top: 660px;
	visibility:hidden;
	width: 600px;
	height: 50px;


    transition: 0s;  
} 
#box-2 {position: absolute; 
    right:70px;
    top: 640px;
	visibility:hidden;
	width: 600px;
	height: 50px;

    transition: 0s;  
} 
#box-3 {position: absolute; 
    right:70px;
    top: 640px;
	visibility:hidden;
	width: 600px;
	height: 50px;

    transition: 0s;  
} 
#box-4 {position: absolute; 
    right:70px;
    top: 640px;
	visibility:hidden;
	width: 600px;
	height: 50px;

    transition: 0s;  
} 
#box-5 {position: absolute; 
    right:70px;
    top: 640px;
	visibility:hidden;
	width: 600px;
	height: 50px;

    transition: 0s;  
} 
#box-6 {position: absolute; 
    right:70px;
    top: 640px;
	visibility:hidden;
	width: 600px;
	height: 50px;

    transition: 0s;  
} 
#box-7 {position: absolute; 
    right:70px;
    top: 640px;
	visibility:hidden;
	width: 600px;
	height: 50px;

    transition: 0s;  
} 
#box-8 {position: absolute; 
    right:70px;
    top: 640px;
	visibility:hidden;
	width: 600px;
	height: 50px;

    transition: 0s;  
} 
#box-9 {position: absolute; 
    right:70px;
    top: 640px;
	visibility:hidden;
	width: 600px;
	height: 50px;

    transition:0s;  
}