@import 'https://fonts.googleapis.com/css?family=Open+Sans|Amarante|Gayathri|Playfair+Display|Uncial+Antiqua|Cookie' ;


}


/* FONT STUFF*/
.atext {font-family:'open sans', times; serif; font-size:10px; color:#144d75;}
.atext a { font-size:14px;color: #4626a0; font-weight: bold;text-decoration:none;}
.atext a:hover { font-size:14px;font-weight: bold;color: #bf9ef8; text-decoration:none;}
.atext h1 { font-size:20px;   font-weight: bold; color:#144d75; margin: 0px 0px 0px 10px; }
.atext h2 {font-family:'Fredoka One', sans-serif; font-size:17px;  color:#03648f; padding:0; margin:0}

/*FLEX STUFF*/
.flex-container {
  display: flex;
  flex-wrap: wrap;
 justify-content: center;
  background-color: DodgerBlue9;
}

.flex-container>div {
  background-color: #f1f1f1;
  width: 500px;
  margin: 20px;
 padding: 2px;
}

#synopsis {border-style:solid; border-color: #810a0b;  border-width: 1px; padding:10px; 
font-family:times new roman, times; serif; font-size:20px; color: #810a0b; font-style: italic;}


/*BIG MENU STUFF*/

    #trans-nav { list-style-type: none; height: 44px; padding: 0; margin: 0; }
    #trans-nav { list-style-type: none; height: 44px; padding: 0; margin: 0; display:inline-block;}
    #trans-nav li { font-family:'open sans', sans, ariel; font-size; 10px; font-color; darkblue; float: left; position: relative; padding: 0; line-height: 44px; background:#144d75; ;border-left: solid 1px #fff;  }
	#trans-nav li:first-child { border-left: none; }
    #trans-nav li:hover { background-position: 0 -40px;   z-index: 5;}
    #trans-nav li a { display: block; padding: 0 1.2em; color: #fff; text-decoration: none; width:250px }
    #trans-nav li a:hover { color: #a3f1d7;  }
    #trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 16em; background: #176b6d; list-style-type: none; padding: 20px; margin: 0; text-align:left; }
    #trans-nav li:hover ul { opacity: 1; }
	#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
	#trans-nav li:hover ul li { height: 60px; line-height: 25px; border-left: none; margin: 4px;}
    #trans-nav li { -webkit-transition: all 0.2s; }
    #trans-nav li a { -webkit-transition: all 0.5s; }
    #trans-nav li ul { -webkit-transition: all 1s; }
    #trans-nav li ul li { -webkit-transition: height 0.5s; }
	

	#big-menu  {color: #fff; background-color:#144d75;  text-align:center; width:100%; }
	#med-menu {width:600px; margin:auto}


/*

#big-menu a { color: #; background-color:#144d75; display: block; padding: 0.5em 1em; text-decoration: none; width:100px; }
#big-menu a:hover { color: #fff; background-color:#507b9a; text-decoration:underline; }
#big-menu ul,
#big-menu ul li { list-style-type: none; padding: 0; margin: 0; }

#big-menu > ul { background: #144d75; text-align: center; }
#big-menu > ul > li { display: inline-block; border-left: solid 1px #aaa; }
#big-menu > ul > li:first-child { border-left: none; }
*/
.sub-menu {
  background: #144d75;
}

#large-sub-title {font-family:'open-sans', sans, ariel; font-size:15px; color:#144d75; padding:10px;  text-align:center;  }*/
/*END OF BIG MENU STUFF*/
/*NEW MEDIUM MENU */

    #medium-nav { list-style-type: none; height: 40px; padding: 3px; margin: 0; display:inline-block; }
    #medium-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; display:inline-block; }
   #medium-nav li { float: left; position: relative;  padding: 0 0px;  line-height: 40px; background:#144d75; ;border-left: solid 1px #fff; }
	#medium-nav li:first-child { border-left: none; }
    #medium-nav li:hover { background-position: 0 -40px; }
    #medium-nav li a { display: block; width: 75px; padding:  0 3px ; color: #fff; text-decoration: none;   }
    #medium-nav li a:hover { color: #a3f1d7;  }
    #medium-nav li ul { opacity: 0; position: absolute; left: 0; top: 40px; width: 73px; background: #144d75;; list-style-type: none; padding: 5px 1px; margin: 0; }
    #medium-nav li:hover ul { opacity: .8; width:79px }
	#medium-nav li ul li { float: none; position: static; font-size: .8em; height: 0;    }
	#medium-nav li:hover ul li { height: 30px; line-height: 15px; border-left: none; }

    #medium-nav li { -webkit-transition: all 0.2s; }
    #medium-nav li a { -webkit-transition: all 0.5s; }
    #medium-nav li ul { -webkit-transition: all 1s; }
    #medium-nav li ul li { -webkit-transition: height 0.5s; }

	#medium-menu  {font-family: sans, arial; color: #fff; background-color:#144d75;  text-align:center; width: 580px; margin:auto }









/*END OF NEW MEDIUM MENU */

/* MEDIUM MENU STUFF
.med-sub-menu-parent { position: relative; }

.med-sub-menu { 
  visibility: hidden; /* hides sub-menu */
  opacity: .5;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transform: translateY(-2em);
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.med-sub-menu-parent:focus .med-sub-menu,
.med-sub-menu-parent:focus-within .med-sub-menu,
.med-sub-menu-parent:hover .med-sub-menu {
  visibility: visible; /* shows med-sub-menu */
  opacity: 0.8;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */
}


#med-menu a { color: #fff; background-color:#144d75; display: block; padding: 0.5em 0.4em; text-decoration: none; width:90px; }
#med-menu a:hover { color: #Fff; background-color:#507b9a; text-decoration:underline; }
#med-menu ul,
#med-menu ul li { list-style-type: none; padding: 0; margin: 0; }

#med-menu > ul { background: #144d75; text-align: center; width:660px; margin:auto }
#med-menu > ul > li { display: inline-block; border-left: solid 1px #aaa; }
#med-menu > ul > li:first-child { border-left: none; }

.med-sub-menu {
  background: #144d75;
}
.med-menu-text {
font-family:'open sans', sans, ariel; font-size: 10pt; font-color; darkblue;
}
#med-sub-title {font-family:'open-sans', sans, ariel; font-size:15px; color:#144d75; padding:15px;  text-align:center;  }


END OF THE MEDIUM MENU STUFF*/

/*SMALL MENU STUFF */

.little-nav {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
	background-color: white;
	opacity: 0.9;
	color: #000;
	line-height: 2;
	text-align: left;
	padding:5px;
}

.little-nav a {
color: #000;
text-decoration:none;
}

.little-nav  :hover {
color: #3332db;
text-decoration:none;
}

.nav-holder{
	position:absolute;
	top:10px;
	left: 7px;
	overflow:hidden;
	max-height: 10px;
	max-width:30px;
	padding:10px;
z-index:1;
	transition: max-width 1s,max-height 2s;
	
}

.nav-holder:hover {
  max-height: 200px;
max-width: 600px;
}
/*END OF THE SMALL MENU STUFF */
/*SMALL MENU STUFF */

.little-nav {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
	background-color: white;
	opacity: 0.9;
	color: #000;
	line-height: 2;
	text-align: left;
	padding:5px;
}

.little-nav a {
color: #000;
text-decoration:none;
}

.little-nav  :hover {
color: #3332db;
text-decoration:none;
}

.nav-holder{
	position:absolute;
	top:10px;
	left: 7px;
	overflow:hidden;
	max-height: 10px;
	max-width:30px;
	padding:10px;
	transition: max-width 1s,max-height 2s;
	
}

.nav-holder:hover {
  max-height: 400px;
max-width: 200px;
}
/*END OF THE SMALL MENU STUFF */





/* STUFF TO MAKE THE SITE REACTIVE*/

#div1 {display:block;}
#div2 {display:none;}
#div3 {display:none;}

@media only screen and ( max-width: 1200px ) {
#div1{display:none; }
#div2{display:block;}
#div3{display:none;}
.content-text { font-size: 1em;}
.content-text h1 {font-size: 1.2em}
#general-content {border-radius: 25px;background: url(images/tile1.png);margin: 10px ;padding: 3px 20px;}
#footer-content {positon:absolute;top: 5px;left: 10px;border-radius: 25px;background: url(images/tile2.png);margin: 5px 30px;padding: 10px;}
}


@media only screen and (min-width: 1px) and ( max-width: 600px ) {
 html {
        -webkit-text-size-adjust: none;
     }