body {
	font-size: 16px;
/*	font-weight: 300;*/
/*  font-family: sans-serif*/
	margin: 0;
	padding: 0;
}

#page {
	margin: 0 auto;
	position: relative;
}

.main{
    margin-left: 120px;
    margin-right: auto;
}

.content {
	margin: 0 5%;
}

.bottom-left{
  	max-width:99%;
}

.searchbox{
	 width:300px;
	 float: right;
	 font: bolder;
	 padding-right: 10px;
	 padding-top: 10px;	
}


/*Text*/
h1 {
	margin: 0 0 1em 0;
	font-size: 2.8em;
	font-weight: 700;
}

h2 {
	margin: 0 0 .5em 0;
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1.1em;
}

h3 {
	margin: 0 0 .5em 0;
	font-size: 1.3em;
	font-weight: 700;
}

h4 {
	margin: 0 0 1.5em 0;
	font-size: 1em;
	font-weight: 700;
}

p {
	margin: 0 0 1em 0;
}

a {
	color: #180590;
}

a:visited {
	color: #4CB7C0;
}

a:hover {
	text-decoration: underline;
}

/*Header*/

header {
	height: 95px;
	background-color: #a4a7aa;
	position: relative;
}

header a {
	color: #fff;
}

header a:visited {
	color: #fff;
}


/*Navigation*/

.topnav {
	color: #fff;
	position: absolute;
	top: 50px;
	left: 0px;
	padding: 0;
	width:calc(100% - 170px);
	font-family: sans-serif;
    font-weight: bold;
}

.topnav::after {
	content: '';
	display: block;
	clear: both;
}

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

.topnav ul li {
	display: block;
	color: #fff;
	text-decoration: none;
	text-align: left;
}

.topnav ul li:hover {
	background-color: #a4a7aa;
}

.topnav ul li:hover > ul {
	display: block;
}

.topnav ul {
	z-index: 1000;
}

/*#myDropdownOne{
	display: none;
}

#myDropdownTwo{
	display: none;
}

.topnav ul li:hover > #myDropdownOne{
	display: block;
}

.topnav ul li:hover > #myDropdownTwo{
	display: block;
}*/

.dropdown-content1{
	display: none;
}

.dropdown-content2{
	display: none;
}

.topnav ul li:hover > .dropdown-content1{
	display: block;
}

.topnav ul li:hover > .dropdown-content2{
	display: block;
}

.topnav ul li a {
	text-decoration: none;
	display: inline-block;
	color: #fff;
	padding: 10px 20px;
	text-align: left;
	width: 185px;
	position: relative;
}

.topnav .text {
	cursor: text;
}

.topnav ul li a:visited {
	color: #fff;
}

.topnav ul li a:hover {
	background-color: #7a7e83;
	text-decoration: none;
}

.topnav ul li a:hover > ul {
	display: block;
}

.topnav ul ul {
	position: absolute;
	top: 100%;
	background-color: #dcddde;
	/*display: none;*/
	margin-top: -3px; /* pretty nav 9/30/25 */
}

.topnav ul ul a{
	color: #000;
}

.topnav ul ul a:visited{
	color: #000;
}

.topnav ul ul a:hover{
	color: #fff;
}

.topnav ul ul li {
	width: auto;
}

.topnav ul ul ul {
	left: 100%;
	top: 0px;
}


/* top-level*/

/*nav > ul {
	padding-left: 200px;
}*/

.topnav > ul > li {
	float: left;
}

.topnav > ul > li > a {
	width: auto;
	padding: 10px 20px 10px 20px;
}

.topnav a[aria-haspopup="true"]::after {
	content: '';
	display: block;
	width: 0px;
	height: 0px;
	position: absolute;
	top: 16px;
	right: 15px;
}

.topnav > ul > li > a[aria-haspopup="true"]::after {
	left: 20px;
	right: auto;
	bottom: 6px;
	top: auto;
}

.icon{
    width:25px;
    display:block;
    height:20px;
    color:white;
    text-decoration:none;
}
.icon:before{
    content: '';
    background:url('../images/hamburger4.png');
    background-size:cover;
    position:absolute;
    width:35px;
    height:35px;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
    position: absolute;/* pretty nav 9/30/25 */
    top: 0!important;/* pretty nav 9/30/25 */
    right: 20px!important;/* pretty nav 9/30/25 */
}

.left-image {
	max-width:50%;
	padding-right:5px;
}

.right {
	 max-width:49.4%;
}

.right-top-image img{
     padding-bottom: 5px;
}

/*This will work for firefox*/
@-moz-document url-prefix() {
    .right-top-image img{
        padding-bottom: 1px;
    }
}

.bottom{
	max-width:1205px;
}

/*This will work for IE*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.bottom{
	 	width: 1205px;
		max-width:100%;
	}
}

/* Footer */
.footer {
	background-color: #2ea7ba;
	clear: both;
	position: relative;
}
.translate {
	float: right;
  }
  
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.macpg2{
	display: none;
  }

 /* When the screen is less than 600 pixels wide, hide all links. Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1070px) {
  .topnav ul {display: none;}
  .topnav a.icon {float: left; display: block;}
  .topnav .icon {float: left; display: block;}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1044px) {
  .topnav.responsive {
    position: relative;
    width:calc(100% - 170px);
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive ul {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive li {
    float: none;
    display: block;
    text-align: left;
    font-size: small;
  }
  .topnav.responsive ul ul{
  	display: none;
  }
  .topnav.responsive ul li ul {
	display: block;
	position: relative;
	padding-left: 20px;
  }
  .topnav ul li a:hover {
  	width: auto;
	display: block;
	position: relative;
  }
  .topnav.responsive ul li {
    background-color: #dcddde;
    color: #000;
	display: block;
	position: relative;
  }
  .topnav.responsive ul li a{
  	color: #000;
  }
  .topnav.responsive ul li ul li a{
  	color: #5f5f5f;
  }
  .topnav.responsive ul li a:hover{
  	color: #fff;
  }
  .left-image {
	max-width:100%;
	padding-right: 0;
	padding-bottom: 5px;
  }
  .right {
	max-width:100%;
  }
  .bottom-left{
  	max-width:100%;
  }
} 

@media screen and (max-width: 700px) {
  .main{
    margin-left: 5px;
    margin-top: 60px;
  }
  .translate{
  	margin-top: 20px;
	float: none;
  }
  .macpg{
	display: none;
  }
  .macpg2{
	display: inline-block;
  }
  .copyright{
  	display: block;
  }
  .topnav.responsive ul li ul {
    padding: 1px;
  }
  .topnav a.icon {
    position: absolute;
    right: 20px;
    top: 0;
  }
}

@media screen and (max-width: 480px) {
	.searchbox{
	width:150px;
	}
  
    .banner{
	font-size: 1.8em;
	}
}

.banner{
	color: #211C58;
	margin-bottom: .5rem;
	background-color: #4BBABC;
}

.allButFooter{
	min-height: calc(100vh - 262px);
}

main > .container{
	padding-top: 60px;
}

.underline{
	text-decoration: underline;
}