@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Prosto+One|Raleway:400,500,500i,700');

 
body {
	font-family: 'Raleway', sans-serif;
	background-color: #316CA4;
	line-height: 25px;
}
.top-header {
	font-family: 'Prosto One', cursive;
	color: #193A59;
	font-size: 32pt;
	font-weight: 600;
	
	padding-top: 70px;
	line-height: 40px;
	margin-bottom: 10px;
}

@media all and (max-width: 685px) {
  .top-header { font-size: 22pt; padding-top: 0px; max-width: 260px; }
}

@media all and (max-width: 685px) {
  .top-midheader { max-width: 300px; }
}
.top-midheader {
	font-family: 'Open Sans', sans-serif;
	color: #57141f;
	font-size: 14pt;
	letter-spacing: .05em;
	font-weight: normal;
	
}
.title {
	font-family: 'Open Sans', sans-serif;
	color: #000;
	font-size: 18pt;
	letter-spacing: 0.05em;
	font-weight: 600;
}
.top-subheader {
	font-family: 'Open Sans', sans-serif;
	color: #57141f;
	font-size: 12pt;
	letter-spacing: .05em;
	font-weight: normal;
}
.top-sublittler {
	font-family: 'Open Sans', sans-serif;
	color: #57141f;
	font-size: 10pt;
	letter-spacing: .05em;
	font-weight: normal;
	line-height: 10px;
}


.wrap {
	width:100%;
	
	margin:0px auto;
}

/*----- Toggle Button -----*/
.toggle-nav {
	display:none;
}

/*----- Menu -----*/
@media screen and (min-width: 860px) {
	.menu {
		width:100%;
		padding:0px 0px;
		box-shadow:0px 0px 0px rgba(0,0,0,0.15);
		border-radius:0px;
		background:#C4DBE9;
		
	}
	
}

.menu ul {
	display:flex;
	flex-direction: column;
	min-width: 120px;
	max-width: 100%;
}

.menu li {
	float:left;
	list-style:none;
	font-size:17px;
	margin-top: 15px;
	margin-right: 20px;
	margin-bottom: 15px;
	margin-left: -20px;
	text-align: left;	
}

.menu li:last-child {
	margin-right:0px;
}

.menu a {
	text-shadow:0px 1px 0px rgba(0,0,0,0.5);
	color:#5E171F;
	transition:color linear 0.15s;
	text-decoration: none;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;	
	text-align: left;	
}


.menu a:hover, .menu .current-item a {
	text-decoration:none;
	color:#316CA4;
	
}



/*----- Responsive -----*/
@media screen and (max-width: 1150px) {
	.wrap {
		width:100%;
	}
}


@media screen and (max-width: 800px) {
	.menu {
		position:absolute;
		display:block;
		top: 5px;
		left: 25px;
		z-index: 1;
		min-width: 90%;
		 -webkit-animation: slide-down .3s ease-in-out;
    -moz-animation: slide-down .3s ease-in-out;
}

@-webkit-keyframes slide-down {
      0% { opacity: 0; -webkit-transform: translateY(-100%); }   
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes slide-down {
      0% { opacity: 0; -moz-transform: translateY(-100%); }   
    100% { opacity: 1; -moz-transform: translateY(0); }

		
	}

	.menu ul.active {
		display:none;
	}

	.menu ul {
		width:100%;
		position:absolute;
		top:100%;
		left:0px;
		padding:10px 10px;
		box-shadow:1px 1px 1px rgba(0,1,1,1.15);
		border-radius:3px;
		background:#f5fbfe;
		 -webkit-animation: slide-down .3s ease-in-out;
    -moz-animation: slide-down .3s ease-in-out;
}

@-webkit-keyframes slide-down {
      0% { opacity: 0; -webkit-transform: translateY(-100%); }   
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes slide-down {
      0% { opacity: 0; -moz-transform: translateY(-100%); }   
    100% { opacity: 1; -moz-transform: translateY(0); }

	
	}

	.menu ul:after {
		width:0px;
		height:0px;
		position: relative;
		top:0%;
		left:22px;
		content:'';
		transform:translate(0%, -100%);
		
		border-left:7px solid transparent;
		border-right:7px solid transparent;
		border-bottom:7px solid #f5fbfe;
		 -webkit-animation: slide-down .3s ease-in-out;
    -moz-animation: slide-down .3s ease-in-out;
}

@-webkit-keyframes slide-down {
      0% { opacity: 0; -webkit-transform: translateY(-100%); }   
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes slide-down {
      0% { opacity: 0; -moz-transform: translateY(-100%); }   
    100% { opacity: 1; -moz-transform: translateY(0); }

	
		
	}

	.menu li {
		margin:5px 0px 5px 0px;
		float:none;
		display:block;
		 -webkit-animation: slide-down .3s ease-in-out;
    -moz-animation: slide-down .3s ease-in-out;
}

@-webkit-keyframes slide-down {
      0% { opacity: 0; -webkit-transform: translateY(-100%); }   
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes slide-down {
      0% { opacity: 0; -moz-transform: translateY(-100%); }   
    100% { opacity: 1; -moz-transform: translateY(0); }

	}

	.menu a {
		display:block;
		 -webkit-animation: slide-down .3s ease-in-out;
    -moz-animation: slide-down .3s ease-in-out;
}

@-webkit-keyframes slide-down {
      0% { opacity: 0; -webkit-transform: translateY(-100%); }   
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes slide-down {
      0% { opacity: 0; -moz-transform: translateY(-100%); }   
    100% { opacity: 1; -moz-transform: translateY(0); }

	
		
	}

	.toggle-nav {
		padding:2px;
		float:left;
		display:inline-block;
		box-shadow:0px 1px 1px rgba(0,0,0,0.15);
		border-radius:3px;
		background: #f5fbfe;
		text-shadow:0px 1px 0px rgba(0,0,0,0.5);
		color:#777;
		font-size:20px;
		transition:color linear 0.15s;
		
		
	}

	.toggle-nav:hover, .toggle-nav.active {
		text-decoration:none;
		color:#66a992;
		
	}

}
.wrapper {
	display: flex;
	flex-flow: row wrap;
	margin: 0 auto;
	max-width: 1100px;
	border-radius:3px;
	border-top-width: 1px;
	border-right-width: 5px;
	border-bottom-width: 1px;
	border-left-width: 5px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #58141F;
	border-right-color: #58141F;
	border-bottom-color: #58141F;
	border-left-color: #58141F;
}

.wrapper > * {
  padding: 0px;
  flex: 1 100%;
}

.header {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,c4dbe9+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #c4dbe9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#c4dbe9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#c4dbe9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c4dbe9',GradientType=0 ); /* IE6-9 */
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #58141f;
}
#top-bg {
	background-image: url(../img/flower-bg8.png);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}

.footer {
	background: #C4DBE9;
	bottom: 0px;
	
}

.main {
  text-align: left;
  background: #E3F5FF;
}

.aside-1 {
  background: #C4DBE9;
  max-width: 200px;
}



@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {
  .main    { flex: 4 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }

  .footer  { order: 3; }
}

@media all and (max-width: 800px) {
  .wrapper { margin-top:40px }
}
@media all and (max-width: 800px) {
  .aside { width:100% }
}

.photo-main {
	border: 5px solid #193A59;
	float: left;
	max-width: 20%;
}
@media all and (max-width: 800px) {
  .photo-main { float: none; }
}

.sentence-bg {
	margin-top: 0px;
	margin-right: 15px;
	margin-left: 6px;
	margin-bottom: 0px;
	line-height: 22px;
	text-align: left;
	
	
}
@media all and (max-width: 800px) {
  .sentence-bg { margin: 0px; }
}
 .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px; height: 0; overflow: hidden;
	
	
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: -15px;
	
    width: 100%;
    height: 100%;
	max-width: 598px;
	max-height: 478px;
	
}
#container {
   padding: 0;
   margin: 0;
   height: 300px;
   width: 580px;
   background-color: white;
   display: block;
   overflow: hidden;
   position: relative;
}

video {
   padding: 0;
   margin: 0;
  width: 100%;
    height: auto;
  
  
   position: absolute;
  
}
#background{
	position:relative;
	padding-bottom:80%;
	text-align:center;
	overflow:hidden;
	margin-right: -5px;
	margin-left: -1px;  
}
#background video{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
	text-align:center;
	overflow:hidden;
	margin-right: -5px;
	margin-left: -1px;
	   
}
#table-frame {
	border: 0px solid #58141F;
	padding: 20px;
	background-color: #E3F5FF;
}