body {

}
@font-face {
    font-family: "Albertsthal Typewriter";
	src: url("Img/albertsthal_typewriter-webfont.woff") format("woff"), url("Img/albertsthal_typewriter-webfont.woff2") format("woff2");
}

@font-face{
	font-family: arial, verdana;
	src: url("Img/Overpass-Bold.woff") format("woff");
}
#Header {
    background-color:black;

    padding: 5px 10px 5px 10px;
    min-height: 150px;
    color:white;
    text-align:center;
}
#Menu{
    min-height: 40px;
    width:375px;
    text-align:center;
    margin:0 auto;
    padding-top:15px;
    background-color:white;
    color:black;
    font:bold 16px arial, verdana;
}
.MenuLink {
    float:left;
    margin-left:10px;
    text-decoration: underline;
	
}
a:hover{
	color:darkcyan;
}
.modal-header{
	margin: 0 auto;color:navy; font:bold 24px arial, verdana; text-align: center;
}
button{
  background-color: #104FA6;
  color: white;
  padding: 5px;
	margin-right:10px;
  font-size: 14px;
  height: 130px;
  width: 130px;
  box-shadow: 0 2px 4px #001A61;
  border-radius: 50%;
	
}
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
	margin-bottom:20px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
@keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        /* Fade-in effect on hover */
        button:hover {
            background-color:darkcyan;
            color: #fff;
        }
button.animated {
            animation: pulse 3s infinite;
        }
#Content {
    text-align:left;
    font:16px arial,verdana;
    background-color:lightgray;
    min-height:315px;
    height:100%;
    margin:0 auto;
    width:800px;
    padding-top:0px;
    padding-bottom:10px;
    padding-left:10%;
    padding-right:10%;
}
.feature-box{
    text-align:left;
    font:16px arial,verdana;
    background-color:whitesmoke;
	margin: 0 auto;
	width: 95%;
	padding:10px;
	line-height: 1.5;
	box-shadow: 10px 10px darkcyan;
	
}
footer{
    clear:both;
}
h2 {
	color:navy;
    padding-left:20px;
    font: bold 24px arial, verdana;
}
p{
    margin-left:20px;
    margin-right:20px;
}
a {
    color: black;
}
.link {
    font: bold 14px arial, verdana;
}
.feature {
    font: 17px arial,verdana;
}
.vid {
    width:100%;
    display:block;
    text-align:center !important;
    margin:0 auto;
}
.fit-picture{
    float:left;
}
.fit-text{
    	display:inline;
		line-height: 1.5;

}
/*
.tabcontent{
	text-align:left;
    font:16px arial,verdana;
    background-color: lightgray;
    min-height:315px;
    height:100%;
    margin:0 auto;
    width:800px;
    padding-top:0px;
    padding-bottom:10px;
    padding-left:10%;
    padding-right:10%;
}
*/
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  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.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: lightgray;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  font: bold 16px arial,verdana;
  line-height: 1.5;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
    #Content {
        width: 90%;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }
	.fit-text{
    	
}
}
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */

    #Content {
        width: 90%;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }
	.fit-text{
    	
}
}
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */

    #Content {
        width: 90%;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }
		.fit-text{

}
}
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
    #Content {
        width: 90%;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }
		.fit-text{
	
}
}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
    #Content {
        width: 700px;
    }
}
@media (min-width:1281px) { /* hi-res laptops and desktops */
    #Content {
        width: 800px;
    }

}