@charset "UTF-8";
/* CSS Document */



/*****************/
/* MEDIA QUERIES */
/*****************/

/* Shortens text boxes on wide desktop screens */
@media only screen and (min-width: 1530px) {
/* top dropdown animation / rollover */
.navtop-about:hover {
	padding-top: 360px;
	}
.navtop-about-blurb {
	top: -400px;
	}
.navtop-about-blurb-anime {
	top: -180px;
	}
@keyframes about-anime {
0%{	
    	 border-bottom: 3px solid white;
    	 padding-top: 0px;
    	 background: rgba(0, 0, 0, 1);
    	 }
10%{	
    	 border-bottom: 1px solid white;
    	 padding-top: 140px;
    	 background: rgba(0, 0, 0, 0.7);
    	 }
95%{	
    	 border-bottom: 1px solid white;
    	 padding-top: 140px;
    	 background: rgba(0, 0, 0, 0.7);
    	 }
100%{
     	 border-bottom: 3px solid white;
    	 padding-top: 0px;
    	 background-color: rgba(0, 0, 0, 1);
    }
    }
/* bottom dropdown animation / rollover */
.column:hover #navbottom-about1 {
	height: 280px;
	}
.column:hover #navbottom-about2 {
	height: 280px;
	}
.column:hover #navbottom-about3 {
	height: 280px;
	}
} 
/* Shortens text boxes on wide desktop screens */
@media only screen and (min-width: 1775px) {
/* top dropdown animation / rollover */
.navtop-about:hover {
	padding-top: 310px;
	}
.navtop-about-blurb {
	top: -350px;
	}
/* bottom dropdown animation / rollover */
.column:hover #navbottom-about1 {
	height: 250px;
	}
.column:hover #navbottom-about2 {
	height: 250px;
	}
.column:hover #navbottom-about3 {
	height: 250px;
	}
} 
/* Widths between the media queries above and below will take the default properties from style_home.css.*/ 
/* Extends text boxes on narrow desktop screens */
@media only screen and (max-width: 1320px) {
/* top dropdown animation / rollover */
.navtop-about:hover {
	padding-top: 400px;
	}
.navtop-about-blurb {
	top: -440px;
	}
.navtop-about-blurb-anime {
	top: -220px;
	}
@keyframes about-anime {
0%{	
    	 border-bottom: 3px solid white;
    	 padding-top: 0px;
    	 background: rgba(0, 0, 0, 1);
    	 }
10%{	
    	 border-bottom: 1px solid white;
    	 padding-top: 180px;
    	 background: rgba(0, 0, 0, 0.7);
    	 }
95%{	
    	 border-bottom: 1px solid white;
    	 padding-top: 180px;
    	 background: rgba(0, 0, 0, 0.7);
    	 }
100%{
     	 border-bottom: 3px solid white;
    	 padding-top: 0px;
    	 background-color: rgba(0, 0, 0, 1);
    }
    }
/* bottom dropdown animation / rollover */
.column:hover #navbottom-about1 {
	height: 360px;
	}
.column:hover #navbottom-about2 {
	height: 360px;
	}
.column:hover #navbottom-about3 {
	height: 360px;
	}
} 
/* Extends text boxes on narrow desktop screens */
@media only screen and (max-width: 1280px) {
/* top dropdown animation / rollover */
.navtop-about:hover {
	padding-top: 420px;
	}
.navtop-about-blurb {
	top: -460px;
	}
/* bottom dropdown animation / rollover */
.column:hover #navbottom-about1 {
	height: 380px;
	}
.column:hover #navbottom-about2 {
	height: 380px;
	}
.column:hover #navbottom-about3 {
	height: 380px;
	}
} 
/* Extends text boxes on narrow desktop screens */
@media only screen and (max-width: 1150px) {
/* top dropdown animation / rollover */
.navtop-about:hover {
	padding-top: 480px;
	}
.navtop-about-blurb {
	top: -520px;
	}
/* bottom dropdown animation / rollover */
.column:hover #navbottom-about1 {
	height: 410px;
	}
.column:hover #navbottom-about2 {
	height: 410px;
	}
.column:hover #navbottom-about3 {
	height: 410px;
	}
} 

/* VERY IMPORTANT MEDIA QUERY */
/* Effects change from desktop to touch-screen (iPad) mode. Transitions are removed, replaced by auto animations*/
@media only screen and (max-width: 1024px) {
/* Top dropdown features removed completely. */
.navtop-about {
	pointer-events: none;
	display: none;
	}
.navtop-about-anime {
	display: none;
    animation-delay: 1s;
    -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
    animation-duration: 8s;
    -webkit-animation-duration: 8s; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;    
}
.navcurrent-about {
	display: inline;
	}
@keyframes about-anime {
0%{	
    	 border-bottom: 3px solid white;
    	 padding-top: 0px;
    	 background: rgba(0, 0, 0, 1);
    	 }
12.5%{	
    	 border-bottom: 1px solid white;
    	 padding-top: 155px;
    	 background: rgba(0, 0, 0, 0.7);
    	 }
94.75%{	
    	 border-bottom: 1px solid white;
    	 padding-top: 155px;
    	 background: rgba(0, 0, 0, 0.7);
    	 }
100%{
     	 border-bottom: 3px solid white;
    	 padding-top: 0px;
    	 background-color: rgba(0, 0, 0, 1);
    }
    }
/* The three nav buttons at the bottom lose all transition effects, replaced by automated timed animations. */
#navbottom-about1 {
    animation-name: bottom-blurbs-anime;
    -webkit-animation-name: bottom-blurbs-anime; /* Chrome, Safari, Opera */
    animation-duration: 1s;
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-delay: 3.0s;
    -webkit-animation-delay: 3.0s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
#navbottom-about2 {
    animation-name: bottom-blurbs-anime;
    -webkit-animation-name: bottom-blurbs-anime; /* Chrome, Safari, Opera */
    animation-duration: 1s;
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-delay: 3.5s;
    -webkit-animation-delay: 3.5s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
#navbottom-about3 {
    animation-name: bottom-blurbs-anime;
    -webkit-animation-name: bottom-blurbs-anime; /* Chrome, Safari, Opera */
    animation-duration: 1s;
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-delay: 4.0s;
    -webkit-animation-delay: 4.0s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
@keyframes bottom-blurbs-anime {
0%{
    height: 40px;
    border-top: 3px solid white;
    background-color: rgba(40, 55, 68, 0.5);
    }  
100%{
	height: 420px;
    border-top: 1px solid white;
    background-color: rgba(40, 55, 68, 0.7);
    }
    }
/* Transitions triggered by desktop mouse rollover on columns fully removed. */
.column:hover #navbottom-about1 {
	height: 40px;
	transition: none;
	}
.column:hover #navbottom-about2 {
	height: 40px;
	transition: none;
	}
.column:hover #navbottom-about3 {
	height: 40px;
	transition: none;
	}
}
  

@media only screen and (max-width: 1000px) {
@keyframes bottom-blurbs-anime {
0%{
    height: 40px;
    border-top: 3px solid white;
    background-color: rgba(40, 55, 68, 0.5);
    }  
100%{
	height: 460px;
    border-top: 1px solid white;
    background-color: rgba(40, 55, 68, 0.7);
    }
    }
}
@media only screen and (max-width: 930px) {
@keyframes bottom-blurbs-anime {
0%{
    height: 40px;
    border-top: 3px solid white;
    background-color: rgba(40, 55, 68, 0.5);
    }  
100%{
	height: 480px;
    border-top: 1px solid white;
    background-color: rgba(40, 55, 68, 0.7);
    }
    }
}
@media only screen and (max-width: 900px) {
@keyframes bottom-blurbs-anime {
0%{
    height: 40px;
    border-top: 3px solid white;
    background-color: rgba(40, 55, 68, 0.5);
    }  
100%{
	height: 520px;
    border-top: 1px solid white;
    background-color: rgba(40, 55, 68, 0.7);
    }
    }
}
@media only screen and (max-width: 820px) {
@keyframes bottom-blurbs-anime {
0%{
    height: 40px;
    border-top: 3px solid white;
    background-color: rgba(40, 55, 68, 0.5);
    }  
100%{
	height: 560px;
    border-top: 1px solid white;
    background-color: rgba(40, 55, 68, 0.7);
    }
    }
}
@media only screen and (max-width: 770px) {
@keyframes bottom-blurbs-anime {
0%{
    height: 40px;
    border-top: 3px solid white;
    background-color: rgba(40, 55, 68, 0.5);
    }  
100%{
	height: 580px;
    border-top: 1px solid white;
    background-color: rgba(40, 55, 68, 0.7);
    }
    }
}
/* V IMPORTANT CSS. LONG TEXT SWAPPED FOR ABRIDGED TEXT from 750px down.*/
/* Large Mobile Landscape Screen Sizes (iPhone 6 plus 735, for example) */
@media only screen and (max-width: 750px) {
#navbottom-about1, #navbottom-about2, #navbottom-about3 {
	display: none;
	}
#navbottom-about1-750 {
	display: block;
	animation-name: bottom-blurbs-anime;
    -webkit-animation-name: bottom-blurbs-anime; /* Chrome, Safari, Opera */
    animation-duration: 1s;
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-delay: 3.0s;
    -webkit-animation-delay: 3.0s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
	}
#navbottom-about2-750 {
	display: block;
    animation-name: bottom-blurbs-anime;
    -webkit-animation-name: bottom-blurbs-anime; /* Chrome, Safari, Opera */
    animation-duration: 1s;
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-delay: 3.5s;
    -webkit-animation-delay: 3.5s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
#navbottom-about3-750 {
	display: block;
    animation-name: bottom-blurbs-anime;
    -webkit-animation-name: bottom-blurbs-anime; /* Chrome, Safari, Opera */
    animation-duration: 1s;
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-delay: 4.0s;
    -webkit-animation-delay: 4.0s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
@keyframes bottom-blurbs-anime {
0%{
    height: 40px;
    border-top: 3px solid white;
    background-color: rgba(40, 55, 68, 0.5);
    }  
100%{
	height: 240px;
    border-top: 1px solid white;
    background-color: rgba(40, 55, 68, 0.7);
    }
    }
}
@media only screen and (max-width: 680px) {
.navbottom-about-blurb {
	font-size: 67%;
	}
} 
@media only screen and (max-width: 640px) {
.navbottom-about-blurb {
	font-size: 65%;
	}
} 
@media only screen and (max-width: 620px) {
@keyframes bottom-blurbs-anime {
100%{
	height: 210px;
    }
    }
.navbottom-about-blurb {
	font-size: 55%;
	}
}	  
@media only screen and (max-width: 530px) {
.navbottom-about-blurb {
	font-size: 55%;
	}
}	    
@media only screen and (max-width: 505px) {
.navbottom-about-blurb {
	font-size: 52%;
	}
}	  
/* CSS FOR MOBILE PORTRAIT FROM HERE ON */
/* This query is especially for captions iPhone5 - with or without address bar. */
@media only screen and (max-width: 320px) and (min-height: 490px) {
.caption-blurb-about {
	font-size: 70%;
	width: 62%;
	padding-left: 19%;
	padding-right: 19%;
	}
.caption-blurb-about-short {
	font-size: 70%;
}	
}
/* This query is especially for captions on 320x480 phones. */	 
@media only screen and (max-width: 320px) and (max-height: 490px)  {
.caption-blurb-about {
	font-size: 70%;
	width: 70%;
	padding-left: 15%;
	padding-right: 15%;
	}
.caption-blurb-about-short {
	font-size: 70%;
}	
}	 
@media only screen and (max-width: 240px) {
.caption-blurb-about {
	width: 52%;
	padding-left: 24%;
	padding-right: 24%;
	}
.caption-blurb-about-short {
	width: 46%;
	padding-left: 27%;
	padding-right: 27%;
}	
.caption-heading {
	font-size: 120%;
	}
}