* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
	margin: 0;
/*	background: #ecf0f1;
	background: #ffffff;
	color: #fff; */
	font-family: sans-serif;
	line-height: 1.5;
}

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

.main-header {
	margin: auto;
/*	width: 75%; */
	width: 98%; 	/* the width of the whole menu bar
/*  min-height: 90px; */
	min-height: 45px;
	padding: 1em 2em;
	border-top: none;
	
/*	border: 2px solid #2675a9;
	border-radius: 0 0 5px 5px;
	background: #2980b9; */
	background: #ffffff; 	/* the color of the whole menu bar background */	
}

  .main-header:after {
    content: " ";
    display: table;
    clear: both;
  }

.logo {
	display: block;
	text-decoration: none;
	float: left;
/*	margin-top: 5px;*/
	margin-top: 5px;
}

  .logo::before {
    color: #fff;
    content: "\e001";
    font-weight: normal;
    font-style: normal;
    font-size: 2.5em;
    font-family: "icomoon";
    -webkit-font-smoothing: antialiased;
  }

/* Nav Demo Styles -------------------- */

.main-nav,
.drop-nav {
/*	background: #2c3e50; */
	background: #ffffff;
}

.main-nav {
	float: right;
	margin-top: 2px;
/*	margin-top: 8px;
	border-radius: 4px;
	border: solid 1px #1e2a36; */
	width: 75%;
}

  .main-nav > li {
	float: left;
/*	border-left: solid 1px #1e2a36; */
	width: 25%;
  }
  
  .main-nav li:first-child {
	border-left: none;
  }

  .main-nav a {
/*	color: #ff0000; */
	color: #000000; /* text color for menu items */
	display: block;
/*	padding: 10px 30px; */
	padding: 4px 10px;
	text-decoration: none;
/*	width: 100%; */
  }



.dropdown,
.flyout {
	position: relative;
	width: 100%;
}

.dropdown:after { /* the drop down caret */
 /*	content: "\25BC";
	font-size: .5em;
	display: block;
	position: absolute;
	top: 38%;
	right: 12%;
	color: #000000; 
*/
}

.drop-nav,
.flyout-nav {
	position: absolute;
	display: none;
	width: 100%;
}

.drop-nav li {
/*	border-bottom: 1px solid rgba(255,255,255,.2); */
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
}

	.dropdown:hover > .drop-nav,
	.flyout:hover > .flyout-nav {
	display: block;
}

.flyout-nav {
	left: 100%;
	top: 0;
}

.flyout:hover a,
.flyout-nav {
/*	background: #395066; */
	background: #ffffff;	/* set the color of the selected menu background when moused over */
}


/* ================================================================================== */

div.tc_top_block {
	width: 100%;
	background-color: #F0F0F0;
	padding: 10px;
/*	
	margin: 0;
	text-align: center;
    align-items: center;
*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
/*    border: 1px solid black; /* for demo purposes */    
}
	
div.tc_text {
	/*	font-family: SansSerif;
	font-family: source-sans-pro, sans-serif;
	font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
	font-family: source-sans-pro, sans-serif;*/
	font-family: 'Didact Gothic',  serif;	
	font-size: 36px;
	color: #000000; 
/*	text-align: center;
	font-weight: normal;*/
	width: 75%;
	margin: 5px;
	text-align: center;
	font-weight: 10;
}

.tc_download {
	padding: 8px;
	border-radius: 10px;
	width: 240px;
	background-color: #0099FF;
	color: #FFFFFF;
	text-align: center;
	height: auto;
}

#tc_button_link:link, #tc_button_link:visited {
    background-color: #0099FF;
    color: white;
    padding: 14px 25px;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

#tc_button_link:hover, #tc_button_link:active {
	background-color: #0091F0;
}

#tc_img_popout {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 350px;
}

#tc_img:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

#container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: top;
/*    align-items: center;
    height: 300px;
    border: 1px solid black;  for demo purposes */
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;
}

.box_1 {
	width: 80%;
    margin: 25px;
    padding: 15px;
	text-align: left;
	font-family: 'Didact Gothic',  serif;
	font-weight: 100;
/*    border: 1px solid black; */
}

.box_2 {
    width: 50%;
    margin: 25px;
    padding: 15px;
    text-align: left;
	font-family: 'Didact Gothic',  serif;
	font-weight: 100;
}

.box_3 {
    width: 33%;
    margin: 25px;
    padding: 15px;
    text-align: left;
	font-family: 'Didact Gothic',  serif;
	font-weight: 100;
}

#text_link_white:link {
	text-decoration: none;
	color: #9DD3FF;
}

#text_link_white:visited {
	text-decoration: none;
	color: #9DD3FF;
}

#text_link_white:hover {
	text-decoration: none;
	color: #FFFFFF;
}

#text_link_white:active {
	text-decoration: none;
	color: #9DD3FF;
}

#text_link_black:link {
	text-decoration: none;
	color: #000000;
}

#text_link_black:visited {
	text-decoration: none;
	color: #000000;
}

#text_link_black:hover {
	text-decoration: none;
	color: #404040;
}

#text_link_black:active {
	text-decoration: none;
	color: #000000;
}


#para_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: top;
}

.para_box_1 {
	width: 100%; /*margin: 25px;*/;
	margin: 60px 0px 60px 0px;
/*padding: 15px;*/padding: 24px 80px 24px 80px;
	text-align: center;
	font-family: 'Didact Gothic', serif;
	border-style: solid;
	border-width: 0px 12px 0px 12px;
	border-color: #C0C0C0;
	/*border-color: #FF0000;*/
}
	
.para_trans {
	background-color: transparent; 
	/*background: #F0F0F0;*/
	padding: 5px 80px 5px 80px; 
	margin: 10px 0px 10px 0px; 
	width:100%;  
	justify-content: center; 
	align-items: center; 
	text-align: center;
}

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
/*   height:120px;
   background:#999; */
   width:100%;
   
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: top;
   
}

.footer_box_3 {
	width: 33%;
	margin: 4px 25px 4px 25px;
	padding: 4px 15px 4px 15px;
	text-align: left;
	font-family: 'Didact Gothic', serif;
	font-weight: 100;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

/* ================================================================================== */

.modelImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.modelImg:hover {
	opacity: 0.7;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 60px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    
	z-index: 20; 
}

/* Modal Content (Image) */
.modal-content {
	margin: auto;
	display: block;
	/*width: 80%;*/
	/*max-width: 700px;*/
	/*width: 90%;*/
	max-width: 1200px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
.caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    /*color: #ccc;*/
    color: #ffffff;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, .caption { 
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

/* ================================================================================== */

* {
    box-sizing: border-box;
}

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }