/*
 *=========================================== 
 *=========================================== 
 *=========================================== 
 *=========================================== 
 *=========================================== Import Fonts
 *=========================================== 
 *=========================================== 
 *=========================================== 
 *=========================================== 
*/

@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=c4429fbc-246c-48fc-bce5-0a1c4a2963ea&fontids=1491968,1491988");
    @font-face{
        font-family:"Neue Haas Unica W01 ExtraBlack";
        src:url("Fonts/1491968/cb97f48b-d834-42c2-888d-36f7f90011f4.eot?#iefix");
        src:url("Fonts/1491968/cb97f48b-d834-42c2-888d-36f7f90011f4.eot?#iefix") format("eot"),url("Fonts/1491968/8d9cecba-4c38-416b-a5ed-9a33dfdecdc9.woff2") format("woff2"),url("Fonts/1491968/90c62ffc-99f0-4e0e-a506-2500a6d74c98.woff") format("woff"),url("Fonts/1491968/6b09bc05-29a9-4c80-9ee4-1744cf080a6c.ttf") format("truetype");
    }
    @font-face{
        font-family:"Neue Haas Unica W01 Regular";
        src:url("Fonts/1491988/0ebd7648-5847-404a-a88a-28a353c0921c.eot?#iefix");
        src:url("Fonts/1491988/0ebd7648-5847-404a-a88a-28a353c0921c.eot?#iefix") format("eot"),url("Fonts/1491988/e0d80810-f7e3-4fea-8c57-ef8116f0465d.woff2") format("woff2"),url("Fonts/1491988/27645c8a-608b-4abf-a2f1-c4407b576723.woff") format("woff"),url("Fonts/1491988/bd3b3439-8eff-445c-80ed-87064138ca7d.ttf") format("truetype");
    }

/*
This CSS resource incorporates links to font software which is the valuable copyrighted property of Monotype and/or its suppliers. You may not attempt to copy, install, redistribute, convert, modify or reverse engineer this font software. Please contact Monotype with any questions regarding Web Fonts: https://www.linotype.com
*/


/*
 *=========================================== 
 *=========================================== 
 *=========================================== 
 *=========================================== 
 *=========================================== Mobile First: Default Style
 *=========================================== 
 *=========================================== 
 *=========================================== 
 *=========================================== 
*/


body {
	background-color: #ffffff;
	font-family: 'Neue Haas Unica W01 Regular', Helvetica, sans-serif; 
	font-size: 1em;
	line-height: 140%;
	margin: 0;
	padding: 0;
}

a { text-decoration: none; color: #30919c; }
a:hover { text-decoratin: underline; color: #558580; }

strong, b {
	font-weight: normal;
	font-family: 'Neue Haas Unica ExtraBlack', Helvetica, sans-serif; 
}



/* *=========================================== HEADER ===========================================* */

header {
	clear:both;
	background-color: #ffffff;
	margin: 35px auto 35px auto;
	width: 95%;
	z-index: 900;
}
@media screen and (min-width: 1275px) { header {width: 1024px;} }
@media screen and (min-width: 1024px) and (max-width: 1274px) { header {width: 1024px;} }


header a {
	color: black;
}

#navline{font-size: .75em;} 

#navline .left, #navline .right{
	border-bottom: solid 3px black;
	height: 35px;
}
@media screen and (min-width: 560px) and (max-width: 1024px) { #navline .left, #navline .right {height: 45px;} }
@media screen and (max-width: 880px) { #navline .right {display: none;} #navline .left {height: 45px;}}


#newnav {
	display: none;
	position: relative;
	float: left;
	margin-top: 7px;
	margin-right: 25px;
}
@media screen and (min-width: 881px) { #newnav {display: block;} }


.left {
	width: 70%;
	position: relative;
	float: left;
	padding-right: 0px;
	margin-right: 10px;
}
@media screen and (min-width: 1024px)  { .left {width: 728px;} }
@media screen and (max-width: 880px) { .left {width: 100%;} }

.right {
	width: 27%;
	position: relative;
	float: left;
	margin-left: 10px;
}
@media screen and (min-width: 1275px)  { .right {width: 275px;} }
@media screen and (min-width: 1024px) and (max-width: 1274px) { .right {width: 275px;} }
@media screen and (max-width: 880px) { .right {width: 100%; margin-left: 0px;} }

#logo {
	margin: 10px 0px 0px 0px;
	padding: 0;
	position: relative; 
	float: left;
	font-size: 2em;
}

.dologo {
	width: 100%;
}

#menu-btn {
	position: relative; 
	float: left;
	margin-right: 10px;
	
}

.is-active {
	color: #e02921;
	transform: rotate(90deg);
}

@media screen and (max-width: 880px) { #nav {display: none;} }

#mobilenav {
	position: relative; 
	float: left;
	margin-right: 10px;
	font-size: 2em;
}
@media screen and (min-width: 881px) { #mobilenav {display: none;} }

#nav .icon:hover, #mobilenav .icon:hover {
  color: #93a2ad;
}

#adnav{
	position: relative; 
	float: right; 
	margin: 7px 0 0 0;
	display: none;
}
@media screen and (min-width: 881px) { #adnav {display: block;} }

.responsive-menu{

	background-color: rgba(224, 41, 33, 0.8);
	padding: 10px;
	margin: 30px 0 0 0;
	display: none;
	position: absolute;
	left: 0px; 
	top: 0px;
	font-weight: bold;
	z-index: 100000;

  -webkit-transition: display .55s ease;
  -moz-transition: display .55s ease;
  -ms-transition: display .55s ease;
  -o-transition: display .55s ease;
  transition: display .55s ease;
}

.responsive-menu ul{
	padding: 0px;
	list-style: none;	
	color: white;
}

.responsive-menu a{
	color: white;
}

.responsive-menu li{
	padding: 0px 15px 0 15px;
}
.expand {
 display: block !important; 
}




/* *=========================================== CONTAINER ===========================================* */

#container {
	clear: both;
	width: 95%;
	position: relative;
	margin: 15px auto 5px auto;
	z-index: 10;
}
@media screen and (min-width: 1275px) { #container {width: 1024px;} }
@media screen and (min-width: 1024px) and (max-width: 1274px) { #container {width: 1024px;} }

#container .left {
	width: 70%;
	margin-right: 0;
	padding-right: 10px;
}

@media screen and (min-width: 1024px)  { #container .left {width: 728px;} }
@media screen and (max-width: 880px) { #container .left {width: 100%;  border: 0} }

#container .indexleft {
	width: 70%;
	margin-right: 0;
}

@media screen and (min-width: 1024px)  { #container .indexleft {width: 738px;} }
@media screen and (max-width: 880px) { #container .indexleft {width: 100%;  border: 0; padding-right: 10px;} }


#breadcrumb{
  font-size: .75em;
} 

#breadcrumb a{
	color: black;
}
/*
=========================================== Right Column
*/

#right-1{
	position: relative; 
	float: left;
	border-top: solid 1px black;
	width: 95%;
	font-size: .85em;
	line-height: 130%;
}

/* =========================================== Content */

.topborder {
	border-top: solid 1px; black;
}

#content {
	padding-right: 30px;
	border-top: solid 1px black;
}

#title {
    font-family: 'Neue Haas Unica ExtraBlack';
    font-weight: normal;
    font-size: 1.75em;
    letter-spacing: -.01em;
    margin: 10px 0 20px 0;
    padding: 0;
    line-height: 100%;
}

#smallertitle {
    font-family: 'Neue Haas Unica ExtraBlack';
    font-weight: normal;
    font-size: 2.25em;
    letter-spacing: -.01em;
    margin: 10px 0 20px 0;
    padding: 0;
    line-height: 100%;
}


/*
=========================================== Topic
*/

.sqimg {
	display: block;
	position: relative; 
	float: left;
	width: 225px;
	height: 225px;
}

.sqtxt {
	display: none;
    font-family: 'Neue Haas Unica ExtraBlack';
    font-weight: normal;
    font-size: 1.5em;
    letter-spacing: -.01em;
	background-color: rgba(255, 255, 255, 0.75);	
	padding: 10px;
	width: 95%;
	color: black;
	position: absolute;
	bottom: 40px;
}

.sqimg:hover > div {
	display: block;
}

#navcolumn {
	width: 100%;
	font-size: 1em;
	line-height: 135%;
	padding-top: 10px;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
		
}

#navcolumn a {
	float: left;
	width: 100%;
	color: black;
	padding: 2px 5px 3px 6px;
}

.topic-item{
	display: block;
	position: relative; 
	float: left; 
	width: 207px; 
	height: 207px; 
	background-color: white; 
	padding: 10px; 
	margin: 0 15px 15px 0;
	font-size: 2em;
	line-height: 110%;
}

.topic-item-inner{
	display: block;
	width: 217px; 
	height: 217px; 
	overflow: hidden ; 
}

.topic-item-inner .top{
	font-size: 2em;
}

a .topic-item {
	color: black;
}

a:hover .topic-item {
	background-color: #e9f7f8;
}


.topic-image {
	display: none;
	position: relative; 
	float: left;
	width: 20%;
	height: 20%;
	margin-right: 10px;
}

.topic-image img {
	width: 100%;
	height: 100%;
}

@media screen and (min-width: 700px)  { .topic-image {display: block} }

.topic-item-text{
	position: relative; 
	float: left;
	width: 70%;
}

a .topic-item-text{
	color: black;
}

.topic-hover{
	display: block;
	background: rgba(255, 255, 255, 0.7);
	position: absolute;
	bottom:25px;
	font-size: .69em;
	width: 217px;
	margin:-10px;
	padding: 5px;	
}

.topic-hover-main{
	display: block;
	background: rgba(255, 255, 255, 0.7);
	position: absolute;
	bottom:25px;
	font-size: .70em;
	width: 217px;
	margin:-10px;
	padding: 25px 5px 25px 5px;	
	font-family: 'Neue Haas Unica ExtraBlack', Helvetica, sans-serif;
}


/*
=========================================== Footer
*/
#copyright{
	clear:both;
	position: absolute;
	bottom: 0;
	height: 20px;
	width: 100%;
	margin-top: 25px;
	padding-top: 5px;
	border-top: solid thin black;
	font-size: .70em;
}



/**
===========================CREDIT/CONTACTS
**/

.credits p {
	padding: 15px;
	background-color: white;
	margin-bottom: 10px;
}

.contact p {
	padding: 15px;
	background-color: white;
	margin-bottom: 10px;
}

/**
===========================FORMS
**/

input[type=text] {
	border: 0;
	background-color: #dddddd;
	padding: 8px;
	margin: 0 0 8px 0;
}

input[type=password] {
	border: 0;
	background-color: #dddddd;
	padding: 8px;
	margin: 0 0 8px 0;
}

textarea {
	border: 0;
	background-color: #dddddd;
	padding: 8px;
	margin: 0 0 8px 0;
}

input[type=submit] {
	font-size: .75em;
	border: 0;
	padding: 8px;
	color: white;
	background-color: #558580;	
	margin: 0 0 8px 0;
}

.archive input[type=text] {
	width: 90%;
}

.archive p{
	width: 90%;
	background-color: white;
	padding: 10px;
}

.archive #navcolumn {
	padding: 10px;
	width: 90%;
	height: 70px;
	overflow: hidden;
}

.archive #content548 {
	width: 100%;
}



/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}


.button{
	background-color: #30919c;
	color: white;
	padding: 10px;
	margin-right: 10px;
	margin-top: 10px;
}