body {background:#ffffff; font-family: 'Karla', sans-serif; margin: 0; min-width: 600px; min-height: 700px;}
.clear {clear:both; }
.red {color: #c52127; }

#container {margin:auto; width: 600px; height: 700px; position: relative;}
#container .img-cell {float: left; width: 150px; height: 150px; }
#container .img-cell .cell-link {display: block; width: 150px; height: 150px; background-position: center center; background-repeat: no-repeat; position:relative;}
#container .img-cell.active .cell-link {z-index: 100; }
#container .img-cell.active .cell-link:after {content:''; display: block; position:absolute; background:url(images/sprite.png) no-repeat; left:50%; margin-left: -17px; width: 33px; height: 17px; }
#container .img-cell.topalign .cell-link:after {background-position: right top; top: 0; }
#container .img-cell.bottomalign .cell-link:after {background-position: right -19px; bottom: 0; }
#container .img-cell .logo-link {display: block; width: 150px; height: 150px; background: url(images/logo.png) no-repeat center center #000; position: relative; z-index: 100; }
#container .img-cell .info-board { display:none; background:#fff; position: absolute; left: 0; right: 0; height: 300px; overflow:hidden;}
#container .img-cell.active .info-board {display: block;  z-index: 100;}
#container .img-cell .info-board .photo {display: none; }
#container .img-cell .info-board .info-wrap {margin: 40px 0 0 40px; width: 385px; height: 225px; float: left;}
#container .img-cell .info-board .info-wrap .title {float: left; padding-right: 40px; font-size: 20px; margin-top: -2px;}
#container .img-cell .info-board .info-wrap .title .name {font-weight: bold; color: #c52127; text-transform: uppercase; }
#container .img-cell .info-board .info-wrap .title .position {font-style: italic;}
#container .img-cell .info-board .info-wrap .contact {float: left; font-size: 14px;}
#container .img-cell .info-board .info-wrap .contact .phone span {color: #c52127; }
#container .img-cell .info-board .info-wrap .contact .email {font-style: italic; }
#container .img-cell .info-board .info-wrap .contact .email a {color: #000; text-decoration: none; }
#container .img-cell .info-board .info-wrap .contact .email a:hover {text-decoration: underline; }
#container .img-cell .info-board .info-wrap .bio {clear: both; overflow: scroll; height: 200px; color: #58595b; font-size: 14px; padding-right: 40px;}
#container .img-cell .info-board .info-wrap hr {height: 0; border:none; border-top: 1px solid #c52127; margin-right: 30px;}
#container .img-cell .info-board .close-button {position: absolute; right: 20px; top: 40px; line-height: 20px; display: block; width: 80px; height: 20px; background: url(images/sprite.png) no-repeat 59px -48px; color: #000; font-weight: bold; font-size: 16px; text-transform: uppercase; text-decoration: none; }
#container .img-cell .info-board .close-button:hover {opacity: 0.8; }
#container .img-cell .info-board .social-wrap {position: absolute; right: 20px; bottom: 40px; height:36px; margin: 0 -3px;}
#container .img-cell .info-board .social-wrap a {display: inline-block; width: 38px; height: 36px; background:url(images/sprite.png) no-repeat; margin: 3px; }
#container .img-cell .info-board .social-wrap a:hover {opacity: 0.8; }
#container .img-cell .info-board .social-wrap a.facebook {background-position: 0 0; }
#container .img-cell .info-board .social-wrap a.linkedin {background-position: -46px 0; }
#container .img-cell .info-board .social-wrap a.twitter {background-position: -90px 0; margin-left: 10px; margin-right: 10px;}
#footer {padding: 20px 20px 20px 0; clear:both; background:#000000;position: relative; z-index: 100; position: relative;}
#footer .left-text {font-size: 26px; line-height: 60px; font-weight: bold; color: #fff; text-transform: uppercase; float: left; width:408px; text-align: center;}
#footer .left-text.active-title {font-size: 22px; }
#footer .right-logo {float: right; border-left: 1px solid #4f4f4f; padding-left: 36px; padding-top: 10px;}
#mask {position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); z-index: 50; display: none;}

.slimScrollBar {opacity: 1 !important; height:80%;}

body.landscape-view {min-width: 980px; min-height: 600px;}
body.landscape-view #container {width: 980px; height: 600px;}
body.landscape-view #container #mosaic {width: 600px; float: left; }
body.landscape-view #footer {float:left; width: 380px; height:600px; clear:none; padding:0;}
body.landscape-view #footer .left-text {display:none; line-height: 1.5; width: auto; float: none; padding: 45px 0; margin-top: 150px;}
body.landscape-view #footer .large-logo {text-align: center; margin: 100px auto;}
body.landscape-view #footer .left-text.active-title {display: block; position: relative;}
body.landscape-view #footer .left-text.active-title:before {display: block; content: ''; position: absolute; left: 50%; top: 0; height: 1; width: 56px; margin-left: -28px; background: rgba(255,255,255,0.3); height: 1px;}
body.landscape-view #footer .left-text.active-title:after  {display: block; content: ''; position: absolute; left: 50%; bottom: 0; height: 1; width: 56px; margin-left: -28px; background: rgba(255,255,255,0.3); height: 1px;}
body.landscape-view #footer .left-text.active-title span.red {display: block; font-size: 18px; }
body.landscape-view #footer .left-text.active-title + .large-logo {display: none; }
body.landscape-view #footer .right-logo {float: none; border-left: none; text-align: center; padding: 0; padding-top: 52px; position: absolute; left: 0; bottom: 50px; right: 0; }
body.landscape-view #container .img-cell.active .cell-link:after {display: none; }
body.landscape-view #container .img-cell .info-board {width: 380px; left: auto; height: 600px; top: 0 !important; z-index: 200;}
body.landscape-view #container .img-cell .info-board .info-wrap {width: auto; height: auto; float: none; margin: 20px;}
body.landscape-view #container .img-cell .info-board .info-wrap hr {margin-right: 0; }
body.landscape-view #container .img-cell .info-board .social-wrap {bottom: 25px;}
body.landscape-view #container .img-cell .info-board .info-wrap .contact {position: absolute; left: 20px; bottom: 23px; }
body.landscape-view #container .img-cell .info-board .close-button {top: 20px;}
body.landscape-view #container .img-cell .info-board .whoswho {text-transform: uppercase; font-size: 18px; margin: 20px; margin-bottom: 60px;}
body.landscape-view #container .img-cell .info-board .whoswho .red {font-size: 38px; font-weight: bold;} 

body.mobile #container .img-cell.active .cell-link:after {display: none; }
body.mobile #container .img-cell .info-board {height: 600px; top: 0; background: rgba(0,0,0,0.8); color:#fff;}
body.mobile #container .img-cell .info-board .photo {display: block; border: 5px solid #fff; margin: 20px auto;}
body.mobile #container .img-cell .info-board .social-wrap {position: static; text-align: center; margin-bottom: -20px; }
body.mobile #container .img-cell .info-board a {color: #fff; }
/* body.mobile #container .img-cell .info-board .social-wrap a.facebook {background-position: -82px -68px; }
body.mobile #container .img-cell .info-board .social-wrap a.linkedin {background-position: -128px -68px; }
body.mobile #container .img-cell .info-board .social-wrap a.twitter {background-position: -172px -68px; }*/
body.mobile #container .img-cell .info-board .close-button {top: 20px; background-position: -23px -116px; color: #fff; }
body.mobile #container .img-cell .info-board .info-wrap {margin: 40px 20px 20px; width: auto; height: auto; float: none; }
body.mobile #container .img-cell .info-board .info-wrap .contact {float: right; font-size: 14px; }
body.mobile #container .img-cell .info-board .info-wrap .bio {clear: both; overflow: scroll; height: 200px; color: #fff; padding-right: 40px; font-size: 22px;}
body.mobile #container .img-cell .info-board .info-wrap .contact .email a {color: #fff; }
body.mobile #container .img-cell .info-board .info-wrap hr {margin-right: 0; }