/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */


/* #Site Styles
================================================== */

/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-family: 'open sans'; font-size: 14px; color: #000; }
body { background: #eeefef; }
input, select, textarea { font-family: 'open sans'; font-size: 14px; color: #000; }
img { border: 0; display: block; }
ul, li { list-style: none; }
.agenda ul, .agenda li { list-style: disc; list-style-position: inside; }
.agenda ol li {list-style-type: decimal;}
.agenda ol li:before {padding-left: 5px; content: " ";}
:focus { outline: none; }

/* ### global classes ### */
.clear { clear: both; visibility: hidden; line-height: 0; height: 0; }
.center { margin: 0 auto; position: relative; max-width: 1200px; }
.centered { padding-right: calc((100% - 1200px) / 2); padding-left: calc((100% - 1200px) / 2); }
.set { margin: 0; }
.set > div { padding: 0; }
h1, h2, h3, h4, h5, h6, ul, img, figure { margin-bottom: 0; padding-bottom: 0; }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; }

/* ### main container ### */
#mainCntr { width: 100%; }

/* ### header container ### */
#headerCntr { position: relative; width: 100%; height: 215px; background: #fff; z-index: 1000; }
#headerCntr .logo { float: left; margin-top: 35px; }
#headerCntr .logo img { width: 290px; height: 119px; }
#headerCntr .mobileMenu { cursor: pointer; z-index: 15; float: left; width: 54px; height: 54px; position: absolute; bottom: 0; left: 0; background: url(../img/mobile-trigger.svg) no-repeat; background-size: 100%; text-indent: -9999px; }

	/* ### menu box ### */
	.menuBox { position: absolute; top: 215px; left: -100%; z-index: 100; transition: 0.5s; width: 160px; background: #eeefef; }
	.menuBox.is-active { left: 0; transition: 0.5s; }
	.menuBox ul { overflow: hidden; padding: 20px; }
	.menuBox ul li { font-size: 13px; font-weight: bold; margin-bottom: 5px; }
	.menuBox ul li a { color: #000; display: block; padding-left: 20px; }
.menuBox ul li.login a { background: url(../img/icon.svg) no-repeat left; background-size: 17px; }

	/* ### social box ### */
	.socialBox { float: right; margin: 50px 20px 0 0; }
	.socialBox li { float: left; margin-left: 8px; }
	.socialBox li img { width: 30px; height: 30px; }

	/* ### content container ### */
	#contentCntr { width: 100%; }

	/* ### slider box ### */
	.sliderBox { position: relative; }
	.sliderBox ul { width: 100%; }
	.sliderBox li  { width: 100%; }
	.sliderBox li img { width: 100%; }
	.sliderBox .cycle-pager { position: absolute; bottom: 10px; right: 10px; z-index: 100; }
	.sliderBox .cycle-pager span { width: 7px; height: 7px; background: #fff; border-radius: 50%; margin-left: 5px; cursor: pointer; text-indent: -9999px; display: inline-block; }
	.sliderBox .cycle-pager span.cycle-pager-active { background: #0087cc; }

	/* ### tagline box ### */
	.taglineBox { background: #0087cc; text-align: center; }
	.taglineBox figure { display: block; padding: 90px 0 50px; }
	.taglineBox figure img { display: inline-block; max-width: 170px; }
	.taglineBox p { text-transform: uppercase; color: #fff; font-size: 16px; padding: 0 20px; line-height: 30px; }
	.taglineBox p span { color: #000; }

	/* ### news box ### */
	.newsBox { background: #fff; }
	.newsBox .title { background: #878787; padding: 10px 20px; overflow: hidden; }
	.newsBox .title.black { background: #000; }
	.newsBox .title h3 { float: left; font-size: 15px; text-transform: uppercase; color: #fff; }
	.newsBox .title a { float: right; color: #fff; font-size: 11px; }
	.newsBox figure { display: block; }
	.newsBox figure img { width: 100%; }
	.newsBox .text { padding: 20px; }
	.newsBox h4 { font-size: 15px; text-transform: uppercase; color: #000; margin-bottom: 10px; font-weight: bold; }
	.newsBox p { font-size: 13px; line-height: 18px; color: #000; }
	.newsBox p a { color: #0087cc; font-weight: bold; margin-top: 3px; }

	/* ### activity box ### */
	.activityBox { background: linear-gradient(135deg, rgba(119,118,118,1) 1%,rgba(85,84,84,1) 36%,rgba(85,84,84,1) 100%); }
	.activityBox .holder { height: 400px; overflow-y: auto; padding: 30px 45px; }
	.activityBox h3 { font-size: 20px; color: #fff; text-transform: uppercase; margin-bottom: 30px; }
	.activityBox ul { list-style: none; color: #fff; }
	.activityBox li { margin-bottom: 10px; color: #fff; font-size: 11px; list-style: none; padding-left: 20px; position: relative; text-transform: uppercase; line-height: 13px; }
	.activityBox li:before { content: ''; width: 5px; height: 5px; background: #fff; position: absolute; top: 5px; left: 0; border-radius: 50%; }
	.activityBox li a { color: #fff; text-decoration: none; }
	.activityBox li a span { color: #0087cc; display: block; text-transform: none; }

	/* ### brand box ### */
	.brandBox { background: #fff; position: relative; }
	.brandBox .title { background: #0087cc; padding: 10px 20px; overflow: hidden; }
	.brandBox .title h3 { font-size: 15px; text-transform: uppercase; color: #fff; }
	.brandBox .holder { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 100%; }
	.brandBox .imageScroller { width: 100%; padding: 0 10px; text-align: center; }
	.brandBox .imageScroller a { display: inline-block; margin: 0 10px; }

	/* ### member box ### */
	.memberBox { position: relative; background: #d2d2d2; }
	.memberBox .holder { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 100%; padding: 0 30px; }
	.memberBox h3 { font-size: 15px; text-transform: uppercase; color: #000; margin-bottom: 10px; font-weight: 600; }
	.memberBox p { font-size: 13px; line-height: 18px; color: #000; }
	.memberBox p a { color: #0087cc; font-weight: bold; margin-top: 3px; }
	.memberBox .login { position: absolute; bottom: 30px; right: 25px; width: 130px; height: 72px; background: url(../img/bg1.png) no-repeat; background-size: 100%; }
	.memberBox .login span { float: right; text-transform: uppercase; color: #000; font-size: 12px; width: 75px; text-align: center; font-weight: bold; padding-top: 15px; }

	/* ### board box ### */
	.boardBox { position: relative; }
	.boardBox img { width: 100%; }
	.boardBox p { position: absolute; top: 45%; left: 0; width: 100%; text-align: center; font-size: 16px; text-transform: uppercase; color: #fff; z-index: 100; }

/* ### footer container ### */
#footerCntr { overflow: hidden; width: 100%; background: #000; padding-top: 20px; padding-bottom: 20px; min-height: 120px; }
#footerCntr p { float: left; color: #fff; font-size: 10px; }
#footerCntr .logo { float: right; }
#footerCntr .logo img { width: 25px; height: 21px; }

/* #Media Queries
================================================== */
@media only screen and (max-width: 1199px) {
	#footerCntr.centered, #headerCntr.centered { padding-left: 20px; padding-right: 20px; }
	.taglineBox figure { padding: 40px 0; }
}

@media only screen and (max-width: 979px) {
	.taglineBox figure img { max-width: 150px; }
	.taglineBox figure { padding-bottom: 30px; }
	.taglineBox p { font-size: 14px; line-height: 20px; }
	.activityBox .holder { padding: 20px; }
	.memberBox .holder { position: static;  -webkit-transform: translate(0);  transform: translate(0); padding-top: 20px; }
	.memberBox .login { bottom: 10px; right: 10px; }
	#footerCntr { min-height: 80px; }
}

@media only screen and (max-width: 767px) {
	#headerCntr .logo { margin-top: 10px; }
	#headerCntr .logo img { width: 150px; height: 58px; }
	#headerCntr { height: 135px; }
	.socialBox { margin: 20px 0 0 0; }
	.menuBox { top: 135px; }
	.brandBox .holder { position: static; -webkit-transform: translate(0); transform: translate(0); padding: 20px; }
	.memberBox .holder { padding: 20px; padding-bottom: 100px; }
}