/*
Theme Name:     arcdr3
Theme URI:      xlab.aud.ucla.edu/arcrd3
Description:	Arc DR3 WP-Theme
Version:		1.0
Author:			CHRS Interactive
Author URI:	    http://www.chrsinteractive.com/
*/

/* ---------------------------- */

/* -- @MASTERHEAD/NAVIGATION -- */
header {width:100%;position:fixed;top:0;left:0;padding:20px 0;z-index:99;background:#ffffff;-moz-transition: background 0.3s;-ms-transition: background 0.3s;-o-transition: background 0.3s;transition: background 0.3s;border-bottom:1px solid #eee;}
body {background:url(images/BACKGROUND_new.jpg) center top no-repeat;background-size:contain;}

.logo {display:block;float:left;width:50px;}
.logo img {display:block;}

.xlab-link {display:none;float:right;width:100px;margin-top:7px;}

/* Main Menu */
.mainNav {float:left;position:relative;padding-top:13px;margin-left:40px;}
.mainNav li {display:inline-block;margin-right:40px;font-size:1.3rem;font-weight:600;line-height:25px;position:relative;}
.mainNav li a {color:#222;text-transform:uppercase;border-bottom:5px solid transparent;}
.mainNav li:before {content:"";position:absolute;width:100%;transform: scaleX(0);bottom:0;left:0;border-top:2px solid #222;transition:all 0.5s}
.mainNav li:hover:before,
.mainNav li.current-menu-item:before {transform: scaleX(1);}

/* Level 2 */
.mainNav li ul {display:none;}
.mainNav li:hover > ul {display: block;}
.mainNav ul {position: absolute; top: 100%;padding:20px 0;width:100%;max-width:500px;text-align:left;z-index:99;background:rgba(255,255,255,0.8);}
.mainNav ul li {display:block;margin:0 20px 20px;line-height:1.2;}
.mainNav ul li:hover {border:none;}
.mainNav ul li a {border:none;color:#222;text-transform:none;}
.mainNav ul li a:hover {color:#004987;}

.mainNav ul {columns: 2;-webkit-columns: 2;-moz-columns: 2;}

/* Responsive Menu */
.mainNav {display:none;}

.mobile-nav-trigger-outter {float:right;width:30px;height:30px;}
.mobile-nav-trigger {display:block;}
.mobile-nav-trigger .cd-menu-icon {margin-top:15px;margin-left:15px;display: block;-webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 30px; height:2px; background-color: rgba(0,0,0,0.6); -webkit-transition: background-color 0.3s; -moz-transition: background-color 0.3s; transition: background-color 0.3s;}
.mobile-nav-trigger .cd-menu-icon::before,
.mobile-nav-trigger .cd-menu-icon:after { content: ''; width: 100%; height: 100%; position: absolute;top:0;left:0;z-index:9; background-color: rgba(0,0,0,0.6);-webkit-transition: -webkit-transform .3s, top .3s, background-color 0s; -moz-transition: -moz-transform .3s, top .3s, background-color 0s; transition: transform .3s, top .3s, background-color 0s; }
.mobile-nav-trigger .cd-menu-icon::before { top: -9px; }
.mobile-nav-trigger .cd-menu-icon::after { top: 9px; }
.mobile-nav-trigger .cd-menu-icon.is-clicked::before { top: 0; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);}
.mobile-nav-trigger .cd-menu-icon.is-clicked::after { top: 0; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); }
.mobile-nav-trigger .cd-menu-icon.is-clicked { background: none !important }

.mobile-nav {position: fixed; left: 0; top: 90px; height:calc(100% - 90px); width: 100%; background: rgba(255,255,255,0.98); z-index:15;padding:80px 0 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: auto;-webkit-overflow-scrolling: touch; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; }
.mobile-nav.is-visible { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }
.mobileNav {text-align:center;}
.mobileNav li {display:block;line-height:1.4;font-size:2.0rem;margin-bottom:15px;}
.mobileNav li a {color:#222;}
.mobileNav li a:hover,
.mobileNav li.current-menu-item a {color:#666;}
.mobileNav li ul {margin-top:15px;}

.social-links {float:right;padding-top:5px;margin-right:20px;}
.social-links li {display:block;font-size:2.0rem;}
.social-links li a {color:#000;}

.post-edit-link {display:block;position:fixed;top:150px;right:0;padding:10px;z-index:99999999;background:#1C1B4A;}
.post-edit-link:before {font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f085";color:#fff;}

/* -- @CONTENT ---------------- */
.header-spacer {height:91px;}
.banner {width:100%;position:relative;}
.banner-home {height:450px;}
.banner-small {height:250px;}
.banner-inner {position:absolute;bottom:0;left:0;width:100%;}

.banner h2 span {display:inline-block;padding: 7px 10px;background:#000;color:#fff;line-height:1;font-family: 'OCRBLT' !important;}
.narrow-content {max-width:960px;margin:0 auto;}

#map-canvas {width:100%;height:300px;}

.button {display:inline-block;padding:15px 30px;background:#222;color:#fff;border:none;border-radius:25.5px;min-width:220px;box-sizing: border-box;text-align:center;}
.button:hover {background:#666;color:#fff;}

.partner-logos {margin:40px 0 0;list-style: none;}
.partner-logos li {display:inline-block;width:32%;}

/* Timeline */
.timeline-banner {padding:40px 0;}
.timeline-banner h1 {margin:0;font-weight:300;}

.timeline-wrap {max-width:650px;margin:0 auto;}
.timeline-item {position:relative;margin-bottom:30px;}
.timeline-item:before {content:"";position:absolute;top:0;left:50%;width:0;height:0;border-left:1px solid #ccc;transition:all 3s;}
.timeline-item.inView:before {height:100%;}
.timeline-item-inner {position:relative;z-index:2;}
.timeline-year span {display:inline-block;background:#fff;padding:10px;font-size:2.0rem;font-weight:300;}
.timeline-year span,
.timeline-content p,
.timeline-content a {color:#222;}
.timeline-content {opacity:0;width:50%;float:right;margin:30px 0;padding-left:10%;box-sizing:border-box;position:relative;transition:all 1s;transition-delay: 1s;}
.timeline-content .event-date {font-size:2.0rem;}
.timeline-item.inView .timeline-content {opacity:1;}
.timeline-content:before,
.timeline-content:after {content:"";position:absolute;top:0;border-radius:100%;}
.timeline-content:before {left:-11px;width:22px;height:22px;border:2px solid #000;background:#fff;}
.timeline-content:after {top:3px;left:-8px;width:16px;height:16px;background:#000;}
.timeline-icon {background:#fff;padding:10px;}
.timeline-icon img {opacity:0.3;transition:all 0.4s;}
.timeline-item:hover .timeline-icon img {opacity:1;}

.timeline-item.even .timeline-content {padding-left:0;padding-right:10%;float:left;text-align:right;}
.timeline-item.even .timeline-content:before,
.timeline-item.even .timeline-content:after {left:auto;}
.timeline-item.even .timeline-content:before {right:-11px;}
.timeline-item.even .timeline-content:after {right:-8px;}

.timeline-content a:hover {text-decoration:underline;}

.post-event-row {padding-top:20px;border-top:1px solid #ddd;}


.post-block {position:relative;}
.post-block:hover img {opacity:1;transition:all 0.3s ease;}
.post-block:hover img {opacity:0.7;}

.category-grid li {position:relative;padding-top:60px;}
.category-grid li a.post-cover-link {position:absolute;display:block;}
.category-grid li img {max-height:400px;width:auto;max-width:70%;}

.category-grid li .post-summary {display:block;width:85%;float:right;padding:10px;background:#F2F2F2;color:#222;z-index:99;position:relative;}
.category-grid li .post-summary h2 {font-size:2.2rem;}
.category-grid li .post-summary p {font-size:1.2rem;font-weight:300; font-style:italic;}

.people-block {width:46%;float:left;margin:0 2% 30px;min-height:360px;}
.people-block img {display:block;border-radius:100%;-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);filter: grayscale(100%);transition: all 0.5s ease;}
.people-block:hover img {-webkit-filter: grayscale(0%);-moz-filter: grayscale(0%);filter: grayscale(0%);}
.people-block span {display:block;font-size:1.3rem;margin-bottom:5px;font-weight:500;}
.people-block .people-name {font-size:1.5rem;line-height:1.2;}
.people-block a {color:#000;}

.people-single-pic {width:15%;float:left;}
.people-single-pic img {display:block;border-radius:100%;}
.people-single-name {width:80%;float:right;}

.studio-block {width:44%;float:left;margin:0 3% 30px;position:relative;}
.studio-block-overlay {position:absolute;bottom:0;left:0;width:100%;background:#000;}
.studio-block-overlay h2 {font-size: 1.1rem;margin-bottom:0;letter-spacing: 2px;word-spacing: -3px;}
.studio-block-overlay a {display:inline-block !important;color:#fff;}
.studio-block-overlay-inner {padding:5px;}

/* -- @BLOG ------------------- */




/* -- @FOOTER ----------------- */
footer {margin-top:20px;padding-top:20px;border-top:1px solid #ccc;}
footer a {color:#222;}


/* #Clearer
================================================== */
.clearer:after,
.container:after,
.row:after,
.mainNav:after,
.timeline-item-inner:after {content: ""; display: table; clear: both;}