/* :::::::::::::::::::::::::::::::::::::::::::::::::::
FONTS
::::::::::::::::::::::::::::::::::::::::::::::::::: */
@font-face { 
font-family:'ProximaNova'; src:url('/css/fonts/proximanova-light.eot'); src:url('/css/fonts/proximanova-light.eot?#iefix') format('embedded-opentype'),url('/css/fonts/proximanova-light.woff') format('woff'),url('/css/fonts/proximanova-light.ttf') format('truetype'); 
font-weight:300; 
font-style:normal; 
}

@font-face { 
font-family:'ProximaNova'; src:url('/css/fonts/proximanova-regular.eot'); src:url('/css/fonts/proximanova-regular.eot?#iefix') format('embedded-opentype'),url('/css/fonts/proximanova-regular.woff') format('woff'),url('/css/fonts/proximanova-regular.ttf') format('truetype'); 
font-weight:400; 
font-style:normal; 
}

@font-face { 
font-family:'ProximaNova'; src:url('/css/fonts/proximanova-semibold.eot'); src:url('/css/fonts/proximanova-semibold.eot?#iefix') format('embedded-opentype'),url('/css/fonts/proximanova-semibold.woff') format('woff'),url('/css/fonts/proximanova-semibold.ttf') format('truetype'); 
font-weight:600; 
font-style:normal; 
}

body{
  font-family: ProximaNova,Verdana,sans-serif;
  font-weight: 400;
  background-color: rgb(202,229,246);
  background-image: url('/static/reslife/background.jpg');
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: ProximaNova,Verdana,sans-serif;
  font-weight: 600;
  color: rgba(2,58,109,.9);
  color: #347bad;
  line-height: 1.2;
  margin-bottom: 10px;
}
h3, h4, h5, h6, .h3, .h4, .h5, .h6 {
  font-weight: 200;
}
h1, .h1 {
  text-transform: uppercase;
  border-bottom: 1px solid #347bad;
  margin-bottom: 30px;
}
h3, .h3 {
  text-transform: uppercase;
}
a {
  color: #8237ff;
}
h2 a, h3 a, h4 a {
  color: rgb(0,165,229);
}

/* SECTIONS */ 

.header {
  background: -webkit-linear-gradient(rgb(2,58,109), rgb(44,94,145)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgb(2,58,109), rgb(44,94,145)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgb(2,58,109), rgb(44,94,145)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgb(2,58,109), rgb(44,94,145)); /* Standard syntax */
  background-color: rgb(44, 94, 145);
  background-color: rgb(2,58,109);
  border: 0px;
}
.header .container {
  padding: 20px 0px 32px 0;
}
.content .container {
  box-shadow: 5px 0px 5px -5px rgba(128,128,128,.3), -5px 0px 5px -5px rgba(128,128,128,.3);
  background-color: rgb(255,255,255);
  margin-top: -48px;
  padding: 28px 30px 10px 30px;
}
.footer {
  font-size: 18px;
  font-weight: 200;
  padding-top: 10px;
  background-color: rgb(44, 94, 145);
  color: #FFF;
}
.footer .container {
  padding: 20px 0px 20px 0;
}
.footer a {
color: rgb(255,255,0);
}

/* CONTENT ASIDES */

.aside .callout {
  line-height: 1.2em;
  font-size: 30px;
  font-weight: 300;
  margin: 0px -30px 10px -30px;
  padding: 0.2em 30px;
  color: rgba(0, 0, 0, .7);
}
.aside + .aside {
  margin-top: 50px;
}
.aside h3 {
  color: #555;
  font-size: 16px;
  margin-bottom: 0;
}
.aside .callout {
  background: rgb(254,187,54);
  color: rgba(0,0,0,.7);
}
.aside + .aside .callout {
  background: rgb(0,255,135);
  color: rgba(0,0,0,.7);
}
.aside + .aside + .aside .callout {
  background: rgb(130,55,255);
  color: rgba(255,255,255,.9);
}
.aside + .aside + .aside + .aside .callout {
  background: rgb(0,255,255);
  color: rgba(0,0,0,.7);
}
.aside + .aside + .aside + .aside + .aside .callout {
  background: rgb(255,0,165);
  color: rgba(0,0,0,.7);
}
.aside + .aside + .aside + .aside + .aside + .aside .callout {
background: rgb(255,232,0);
}
/*
UCLA Blue
orgb(50,132,191);
UCLA Yellow
rgb(255,232,0);

Dark Blue
rgb(0,85,166);
Light Blue
rgb(0,165,229);

Tertiary Colors (Neon)
Yellow
rgb(255,255,0);
Green
rgb(0,255,135);
Pink
rgb(255,0,165);
Purple
rgb(130,55,255);
Light Blue
rgb(0,255,255);
Black
rgb(0,0,0);
Orange
rgb(254,187,54)o;
*/
form {
    max-width: 665px;
}
.youtube-video-wrapper {
  margin-left: 0px;
  margin-bottom: 0px;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
  margin-bottom: 10px;
}
.youtube-video-wrapper object,
.youtube-video-wrapper embed,
.youtube-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* HEADER */
.site-nav {
  list-style-type: none;
  text-align: right;
  margin: 0;
  padding: 2px 10px 2px 0;
  line-height: 1.4em;
  font-size: 20px;
}
.site-nav li {
  display: inline-block;
  text-transform: uppercase;
  padding: 0 2px;
}
.site-nav li:last-child {
  padding-right: 0px;
}
.site-nav a {
  background-color: rgb(255,232,0);
  padding: 0 14px;
  width: 100%;
  height: 100%;
  display: block;
  color: rgb(44,94,145);
}
.site-nav a:active, .site-nav a:focus, .site-nav a:hover {
  color: #FFe800;
  color: rgb(0,165,229);
  text-decoration: none;
}
.cursor-base {
  overflow: hidden;
  color: rgb(255,0,165);
  padding: 0 16px 0 0;
  margin-right: -20px;
  font-weight: 200;
  font-size: 150%;
  vertical-align: middle;
}
/* @group Blink */
.cursor-blink {
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  -ms-animation: blink 1s linear infinite;
  -o-animation: blink 1s linear infinite;
  animation: blink 1s linear infinite;
}
.cursor-transparent {
  color: transparent;
}

@-webkit-keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 1; }
  50.01% { opacity: 0; }
  100% { opacity: 0; }
}

@-moz-keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 1; }
  50.01% { opacity: 0; }
  100% { opacity: 0; }
}

@-ms-keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 1; }
  50.01% { opacity: 0; }
  100% { opacity: 0; }
}

@-o-keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 1; }
  50.01% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 1; }
  50.01% { opacity: 0; }
  100% { opacity: 0; }
}

.logo {
  display: block;
  width: 400px;
  height: 40px;
  background-image: url('/static/reslife/ucla-residential-life-white.svg');
  background-size: 400px auto;
  background-repeat: no-repeat;
  text-indent: -1000em;
}
.section-root.page-index h1 {
  background: url('/static/reslife/holi-festival.jpg');
  background-size: 100% auto;
  border-width: 0px;
  margin: -28px -30px 0 -30px;
  text-align: center;
  text-transform: none;
  color: rgba(255,255,255,.9);
  line-height: 140px;
  font-style: italic;
  text-shadow: 2px 2px rgba(0,0,0,.1);
  font-weight: 600;
  font-size: 20px;
  height: 400px;
  }
.dot-container {
   display: block;
   height: 60px;
}
.dot {
  margin-top: -60px;
  margin-right: 100px;
  float: right;
  font-size: 24px;
  line-height: 24px;
  padding-top: 27px;
  padding-left: 25px;
  display: block;
  height: 120px;
  width: 120px;
  border-radius: 60px;
  color: rgb(44, 94, 145);
  background-color: rgb(255, 232, 0);
  box-shadow: 5px 5px 5px -5px rgba(128,128,128,.3), -5px 5px 5px -5px rgba(128,128,128,.3);
  padding-left: 13px;
  padding-top: 30px;
  line-height: 28px;
}
.dot {
  text-align: center;
  padding-left: 0;
}
.dot-itsonus {
  font-size: 19px;
}
.dot-pledge {
  font-size: 26px;
}
.dot-true-bruin {
  font-size: 20px;
}
.dot-welcome {
  font-size: 24px;
}
.dot:hover {
  text-decoration: none;
  color: rgb(0,165,229);
}
.section-root.page-index .events {
  margin-top: 160px;
  font-size: 36px;
  border-bottom: 1px solid #CCC;
 }
.section-root.page-index .events-heading-first {
   margin-top: 19px;
 }
.section-root.page-index .callout-blocks a {
  height: 200px;
  color: #347bad;
  font-weight: 600;
  font-size: 36px;
  display: block;
  margin-top: 12px;
  margin-bottom: 20px;
  background-position: center 50px;
  background-repeat: none;
  background-size: 100% auto;
  background-image: url('/static/reslife/sproul-cove.jpg');
  background-repeat: no-repeat;
}
.section-root.page-index .callout-blocks a:hover {
  text-decoration: none;
  background-color: rgb(255,232,0);
 }
.section-root.page-index .callout-blocks a.callout-rules {
  background-image: url('/static/reslife/rules-image.jpg');
}
.section-root.page-index .callout-blocks a.callout-places {
  background-image: url('/static/reslife/places-to-study.png');
}
.section-root.page-index .callout-blocks a.callout-sustainability {
  background-image: url('/static/reslife/sustainability.jpg');
}
.event-list .row {
  margin-bottom: 2em;
 }
.event-list-date-col {
  text-align: center;
}
.event-list-date {
  font-size: 88px;
  font-weight: 600;
  line-height: 88px;
  margin: 0;
  padding: 0;
}
.event-list-day {
  font-size: 28px;
  font-weight: 200;
  line-height: 28px;
  /*  text-transform: uppercase; */
  margin: 0;
  padding: 0;
}
.event-list-title,
.event-list-time {
  font-size: 28px;
  font-weight: 200;
  line-height: 36px;
  /*  text-transform: uppercase; */
  margin: 0;
  padding: 0;
}
.event-list-time {
color: rgba(0,0,0,.8);
}
.event-list-location {
  margin-top: 4px;
  font-style: italic;
 }
.event-list-items .event-list-item {
  margin-top: 30px;
  margin-left: -5px;
  margin-right: -5px;
  padding-left: 5px;
  padding-right: 5px;
}
.event-list-items .event-list-item:first-child {
  margin-top: 10px;
}

.event-list-item:hover {
  cursor: pointer;
  background-color: rgb(255,232,0);
}
.event-list-item-expanded:hover {
cursor: default;
background: transparent;
}

.event-list-item .event-list-summary {
  max-height: none;
  height: auto; 

  -webkit-transition-property: all;
  -webkit-transition-duration: 1.0s;
  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

  -moz-transition-property: all;
  -moz-transition-duration: 1.0s;
  -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

  -ms-transition-property: all;
  -ms-transition-duration: 1.0s;
  -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

  transition-property: all;
  transition-duration: 1.0s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.event-list-item-closed .event-list-summary {
  overflow-y: hidden;
  max-height: 0;
  height: 0;
}
form {
  margin-bottom: 2em;
}
.alert {
border: 0;
 }
.alert-danger {
  background-color: rgb(254,187,54);
  color: rgba(0,0,0,.9);
}
.btn-default,
.btn-success,
.btn-primary {
  border-width: 0px;
  box-shadow: 5px 5px 5px -5px rgba(128,128,128,.3), -5px 5px 5px -5px rgba(128,128,128,.3);

 }
.btn-primary {
  background-color: #347bad;
  color: rgba(255,255,255,.9);
}
.btn-success {
  background-color: rgb(0, 255, 135);
  color: rgba(0, 0, 0, 0.701961);
}
.btn-primary:hover,
.btn-primary:active,
.btn-success:hover,
.btn-success:active {
  background-color: rgb(255,232,0);
  color: rgba(0,0,0,.8);
}
.load-more-btn {
  font-size: 28px;
  font-weight: 200;
}

@media (max-width:479px){
  .section-root.page-index h1{
    font-size: 24px;
    line-height: 140px;
    height: 140px;
  }
  .dot-container {
    height: 40px;
    margin-bottom: 50px;
  }
  .dot {
    float: none;
    margin: -40px auto 20px auto;
    height: 80px;
    width: 80px;
    border-radius: 40px;
    font-size: 18px;
    line-height: 24px;
    padding: 16px 0 0 20px;

  padding-left: 8px;
  padding-top: 18px;
  line-height: 20px;
}
.dot {
    padding-left: 0;
    text-align: center;
}
.dot-itsonus {
    font-size: 13px;
}
.dot-pledge {
    font-size: 17px;
}
.dot-true-bruin {
  font-size: 14px;
}
.dot-welcome {
  font-size: 16px;
}

  .footer {
    padding: 0 30px;
    font-size: 14px;
  }
  .footer .row div {
    padding-bottom: 14px;
  }
  .section-root.page-index .events {
    font-size: 24px;
    text-align: center;
  }
  .event-list .row {
    margin-bottom: 1em;
  }
 .event-list-title, .event-list-time {
    font-size: 16px;
    font-weight: 200;
    line-height: 24px;
  }
.event-list-date {
font-size: 72px;
}
.section-root.page-index .callout-blocks a {
    font-size:28px;
height:160px;
}
}
@media (min-width:480px){
  .section-root.page-index h1{
    font-size: 36px;
    line-height: 200px;
    height: 200px;
  }
}
@media (max-width:767px){
  .logo { background-position: center; width: 100%; background-size: 300px auto; }
  .site-nav {
    text-align: center;
    font-size: 16px;
  }
}
@media (max-width:479px){
  .header {
  }
  .header .container {
    padding-top: 10px;
  }
  .content .container {
    padding-top: 0px;
  }

  .logo { background-position: center; width: 100%; background-size: 200px auto; height: 32px;}
  .site-nav {
    text-align: center;
    font-size: 12px;
  }
  .site-nav li {
    text-transform: none;

  }
  .site-nav a {
    text-align: center;
    padding: 3px 6px;
    margin: 5px;
  }
  .section-root.page-index h1 {
    margin-top: 0;
  }
  h1, .h1 {
    margin-bottom: 12px;
    margin-top: 30px;
    font-size: 18px;
    text-align: left;
    font-weight: 200;
    text-transform: uppercase;
  }
  h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
    font-weight: 200;

  }
}
@media (min-width:768px){
  .section-root.page-index h1 {
    font-size: 48px;
    line-height: 280px;
    height: 280px;
  }
}
@media (min-width:992px) and (max-width:1199px){
  .section-root.page-index h1 {
    font-size: 64px;
    line-height: 350px;
    height: 350px;
  }
}
@media (min-width:1200px){
  .section-root.page-index h1 {
    font-size: 80px;
    line-height: 400px;
    height: 400px;
  }
}
img {
    max-width: 100%;
    height: auto;
}
.orl-avatar {
   border-radius: 50%;
}
.align-center {
   text-align: center;
}
.section-fir h1 {
    color: #FFF;
    border-color: #FFF;
    line-height: 12px;
}
.sub-heading {
    margin-top: 0;
}
img.pull-left {
    margin-right: 5px;
}
form + fieldset[data-section] {
    margin-top: auto;
}
fieldset[data-section] {
    margin-top: 3em;
}
.form-widget-number [type="tel"] {
    max-width: 160px;
}
.form-actions {
    padding-top: 1em;
    padding-bottom: 2em;
}
.center {
    text-align: center;
}
.orl-avatar img {
    border-radius: 50%;
}
@media print {
    .site-nav { display: none; }
    .noprint { display: none; }
    .footer { display: none; }
    .header {
        background-color: red; 
    }
    .aside { display: none; }
}


.page-getonboard .getonboard-workshops .lead {
    color: #000;
}
.page-getonboard h1 {
    display: none;
}
.page-getonboard .getonboard-header {
    background: url('/static/get-on-board-the-leadership.svg');
    background-size: 250px auto;
    background-repeat: no-repeat;
    background-position: 100px center;
    padding-left: 400px;
    height: 320px;
    padding-top: 16px;
    margin-top: 40px;
}
.page-getonboard .tagline {
    font-size: 62px;
    text-transform: uppercase;
}
.page-getonboard .schedule .lead,
.page-getonboard .schedule p {
    margin-bottom: 0;
}
.page-getonboard .schedule .row {
    margin-bottom: 14px;
}

.event-highlight-getonboard {
    height: auto;
    width: 100%;
    background: url('/static/get-on-board-the-leadership.svg');
    background-size: 200px auto;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center 20px;
    padding-top: 200px;
}
.event-highlight-getonboard .event-highlight-title {
    text-transform: uppercase;
    font-size: 48px;
    margin-top: 250px;
    height: auto !important;
    margin-bottom: 0px !important;
}    

.event-highlight-majorblast .event-highlight-title {
    text-indent: -1000em;
    height: 200px;
    width: 100%;
    background: url('/static/major-blast.svg');
    background-size: 80% auto;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center; 
}
.event-highlight .event-list-title {
    font-size: 22px;
    font-weight: bold;
}
.event-highlight a {
    text-align: center;
    color: #2685bb;
    display: block;
    margin-bottom: 2em;
    margin-left: -5px;
    margin-right: -5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 5px;
}
.event-highlight a:hover {
    text-decoration: none;
    cursor: pointer;
    background-color: rgb(255,232,0);
}
.page-majorblast h1 {
    text-indent: -1000em;
    height: 160px;
    width: 100%;
    background: url('/static/major-blast.svg');
    background-size: 80% auto;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center; 
    border: 0px;
}
h3 + h2, h2 + h3, h3 + h3 {
    margin-top: 0;
}

.page-getinvolved h1 {
  overflow: hidden;
  background: url('/static/getinvolved-header.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 90% auto;
  border-width: 0px;
  padding: 0;
  margin: -28px -30px 0 -30px;
/*  color: rgba(52, 123, 173, .8); */
  text-align: center;
  text-transform: uppercase;
  font-family: ProximaNova, Verdana, sans-serif;
  font-weight: 600; 
  font-size: 140px;
  height: 400px;
  line-height: 400px;
}

.img-sm {
    width: 140px;
}

@media (max-width: 479px) {
    .img-sm {
	width: 80px;
    }
    .page-getonboard .getonboard-header {
        background-size: 200px;
        background-position: center top;
        padding-top: 230px;
        padding-left: 0px;
        text-align: center;
        height: auto;
    }
    .page-getonboard .getonboard-header .tagline {
        font-size: 32px;
    }
    .page-getonboard .getonboard-header h2 {
        font-size: 16px;
    }
    .page-getonboard .getonboard-header h3 {
        font-size: 24px;
    }
    .event-highlight .event-highlight-title {
	background-size: 260px auto;
	height: 130px;
    }    
    .event-highlight  .event-list-title {
	font-size: 16px;
    }
    

}

@media (min-width: 480px) {
    .page-majorblast h1 {
        background-size: 80% auto;
	height: 240px;
    }
    .event-highlight .event-highlight-title {
	background-size: 60% auto;
	height: 190px;
    }
    .event-highlight .event-list-title {
	font-size: 20px;
    }
}
@media (max-width: 479px) {
    .page-getinvolved h1 {
	line-height: 200px;
	height: 200px;
	font-size: 40px;
    }
}
@media (min-width: 480px) and (max-width: 599px) {
    .page-getinvolved h1 {
	line-height: 220px;
	height: 220px;
	font-size: 60px;
    }
}
@media (min-width: 600px) and (max-width: 767px) {
    .page-getinvolved h1 {
	line-height: 260px;
	height: 260px;
	font-size: 70px;
    }
}
@media (min-width: 480px) and (max-width: 767px) {
     .page-getonboard .getonboard-header {
        background-size: 200px;
        background-position: center top;
        padding-top: 230px;
        padding-left: 0px;
        text-align: center;
        height: auto;
    }

}
@media (min-width: 768px) and (max-width: 991px) {
    .page-getinvolved h1 {
	line-height: 300px;
	height: 300px;
	font-size: 80px;
    }
    .event-highlight-getonboard {
        margin-top: 5px;
        background-size: 160px auto;
        background-position: 30px center;
   }
    .event-highlight a {
       text-align: left;
        padding-left: 244px;
        height: 180px;
    }
    .event-highlight-getonboard .event-highlight-title {
        margin-top: 10px;
    }
   .page-getonboard .getonboard-header {
    background: url('/static/get-on-board-the-leadership.svg');
    background-size: 180px auto;
    background-repeat: no-repeat; 
    background-position: 20px 40px;
    padding-left: 270px;
    height: 320px;
    padding-top: 0;
    margin-top: 40px;
    }

}
@media (min-width: 992px) and (max-width: 1199px) {
    .page-getinvolved h1 {
	line-height: 360px;
	height: 360px;
	font-size: 120px;
    }
}
@media (min-width: 768px) {
    .page-majorblast h1 {
        background-size: 80% auto;
	height: 300px;
    }

}
@media (min-width: 992px) {
    .page-majorblast h1 {
        background-size: 80% auto;
	height: 360px;
    }
    .event-highlight .event-highlight-title {
	background-size: 80% auto;
	height: 170px;
    }
    .event-highlight .event-list-title {
	font-size: 18px;
    }
}
@media (min-width: 1200px) {
    .page-majorblast h1 {
        background-size: 60% auto;
	height: 400px;
    }
    .event-highlight .event-highlight-title {
	background-size: 80% auto;
	height: 200px;
    }
    .event-highlight .event-list-title {
	font-size: 22px;
    }

}
.row > div > h2:first-child {
    margin-top: 0;
}

@media (min-width: 480px) and (max-width: 991px) {
    .dot-container {
        text-align: center;
        height: 120px;
    }
    .dot {
        margin: -60px auto 0 auto;
        float: none;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .dot {
        margin-right: 80px;
    }
}
.header-link {
  display: block;
  text-align: center;
  text-decoration: none;
  background-color: rgb(255,232,0);
  line-height: 36px;
  font-size: 18px;
  color: rgb(44, 94, 145);
}
.header-link:hover {
  color: rgb(0,165,229);
}
@media (max-width: 479px) {
  .header-link { font-size: 14px; line-height: 30px; }
}


.page-academics h1 {
  background: url('/static/academics-banner.jpg');
  height: 300px;
  background-size: 100% auto;
  border-width: 0px;
  margin: -28px -30px 0 -30px;
  text-align: center;
  text-transform: none;
  color: rgba(255,255,255,1);
   font-family: ProximaNova, Verdana, sans-serif;
   font-weight: 600; 
   font-size: 80px;
   height: 400px;
   padding-top: 0px;
   line-height: 480px;
   text-shadow: 0 0 0.2em #000000;
   margin-bottom: 30px;
   background-position: center -20px;
}


.page-academics .page-section { margin-top: 3em; margin-bottom: 5em; }
.page-academics .h4 { text-transform: none; }

@media (max-width: 991px) {
  .page-academics h1 { 
   background-position: center top;
   font-size: 60px;
   height: 340px;
   padding-top: 120px;
   line-height: 220px;
  }

}
@media (max-width: 767px) {
  .page-academics h1 { 
   font-size: 40px;
   height: 200px;
   padding-top: 80px;
   line-height: 120px;
  }

}
@media (max-width: 479px) {
  .page-academics h1 { 
      margin-top: 0px;
      font-size: 30px;
      height: 140px;
   padding-top: 0px;
   line-height: 140px;
  }

}


.ol-key {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}
.ol-key > li {
    position:relative; /* Create a positioning context */
    margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
    padding:4px 8px; /* Add some spacing around the content */
    list-style:none; /* Disable the normal item numbering */
}

.ol-key > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:-1px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding:4px;
    color:#fff;
    background:#666;
    text-align:center;
    border-radius: 50%;
}
.ol-key-darkblue  > li:before {background-color: #3284BF;}
.ol-key-green     > li:before {background-color: #35B558;}
.ol-key-gold      > li:before {background-color: #FFC828;}
.ol-key-lightblue > li:before {background-color: #20C4F4;}
.ol-key-purple    > li:before {background-color: #6658A6;}
.ol-key-pink      > li:before {background-color: #F033A3;}

.hlead {
    font-size: 21px;
    text-transform: none;
    color: #000;
    margin-bottom: 0;
}

.page-getinvolved strong {
    font-weight: normal;
    background: rgb(255,232,0);
    background: rgba(0,255,135, 0.8);
    padding: 0 .5em 0 .5em;
    margin: 0 .2em 0 .2em;
    color: rgba(0,0,0, .7);
    text-transform: uppercase;
}

.page-theme-generic-ucla .header,
.page-theme-generic-ucla .footer {
    display: none;
}
.page-theme-generic-ucla h1 {
    text-transform: none;
    font-size: 28px;
}
.page-theme-generic-ucla .container {
    max-width: 800px;
    padding-top: 5em;
}
.page-theme-generic-ucla form {
    max-width: 800px;
}

.section-chat .header,
.section-chat .footer {
    display: none;
}
.section-chat h1 {
    text-transform: none;
    font-size: 28px;
}
.section-chat .container {
    /* max-width: 800px; */
    padding-top: 5em;
}

.section-chat form {
    /* max-width: 800px; */
}

/* SECTION */
.section-root.page-index .event-highlight .event-image {
   margin-top: 13px;
   width: 100%;
}
.section-root.page-index .glo-fest-ad {
  width: 100%;
  height: 300px;
  background-color: #404041;
  background-image: url('/static/do-it-in-the-dark-logo.svg');
  background-size: auto 80%;
  background-repeat: no-repeat;
  background-position: center;
  color: #FFF;
  font-weight: 200;
  text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
  text-align: center;
  font-size: 24px;
  line-height: 30px;
}
.section-root.page-index .glo-fest-ad h2 {
  padding-top: 60px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 90px;
  font-size: 80px;
  color: #FFF;
  text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}
.page-about h1 {
    border-width: 0;
    margin: 30px auto;
    text-indent: -1000em;
    background: transparent url('/static/reslife-multi-colored-logo.svg') no-repeat center top;
    display: block;
    height: 380px;
    width: 620px;
}
.page-about .lead {
    text-align: center;
    padding-bottom: 2em;
}

dd { padding-bottom: 10px; }

.page-employment .main-content {
    background-image: url('/static/employment-heading-holly-view.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
}
.page-employment h1 {
    text-align: center;
    margin: 164px 140px 170px 140px;
    line-height: 72px;       
    font-size: 52px;
    text-align: center;
    color: rgb(44,94,145);
    background-color: rgba(255,232,0,0.9);
    border-width: 0;
}
.page-employment .col-md-6 .hlead:first-child,
.page-employment .col-sm-6 .hlead:first-child {
  margin-top: 0;
}

@media (max-width: 479px) {
  .page-employment .main-content {
      background-size: 768px auto;
  }
  .page-employment h1 {
      margin: 80px 20px 120px 20px;
      line-height: 42px;
      font-size: 28px;
  }
  .page-about h1 {
     width: 200px;
     height: 120px;
  }
  .section-root.page-index .event-highlight {
    margin-left: -14px;
    margin-right: -14px;
  }
  .section-root.page-index .glo-fest-ad {
    height: 200px;
    font-size: 16px;
    line-height: 20px;
  }
  .section-root.page-index .glo-fest-ad h2 {
    padding-top: 40px;
    line-height: 50px;
    font-size: 40px;
  }
}
@media (min-width: 480px) and (max-width: 599px) { 
  .page-employment .main-content {
      background-size: 600px auto;
  }
  .page-employment h1 {
      margin: 50px 0px 100px 0px;
      line-height: 42px;
      font-size: 28px;
  }
   .footer {
     padding: 0 30px;
     font-size: 14px;
  }
 .page-about h1 {
     width: 240px;
     height: 140px;
  }
  .section-root.page-index .glo-fest-ad h2 {
    font-size: 60px;
  }
}
@media (min-width: 600px) and (max-width: 767px) {
  .page-employment .main-content {
      background-size: 768px auto;
  }
  .page-employment h1 {
      margin: 100px 60px 120px 60px;
      line-height: 42px;
      font-size: 28px;
  }
   .footer {
     padding: 0 30px;
  }
  .page-about h1 {
     height: 220px;
     width: 360px;
  }

}
@media (min-width: 768px) and (max-width: 991px) {
  .page-employment h1 {
      margin: 90px 70px 110px 70px;
      line-height: 48px;
      font-size: 36px;
  }
  .page-about h1 {
     height: 250px;
     width: 400px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .page-employment h1 {
      margin: 130px 80px 150px 80px;
      line-height: 60px;
      font-size: 48px;
  }
  .page-about h1 {
     height: 320px;
     width: 550px;
  }
  .section-root.page-index .glo-fest-ad h2 {
    font-size: 70px;
  }
}
@media (min-width: 1200px) {
  .page-about .lead {
      font-size: 28px;
  }
}


/*** CSS Flip from David Walsh under MIT License http://davidwalsh.name/css-flip ***/
.flip-container{-webkit-perspective:1000;-moz-perspective:1000;-ms-perspective:1000;perspective:1000;-ms-transform:perspective(1000px);-moz-transform:perspective(1000px);-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d}
.flip-container.hover .back,.flip-container:hover .back{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg)}
.flip-container.hover .front,.flip-container:hover .front{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}
.flip-container,.flip-container .back,.flip-container .front{width:320px;height:427px}
.flip-container.flipper{-webkit-transition:.6s;-webkit-transform-style:preserve-3d;-ms-transition:.6s;-moz-transition:.6s;-moz-transform:perspective(1000px);-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transition:.6s;transform-style:preserve-3d;position:relative}
.flip-container .back,.flip-container .front{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:.6s;-webkit-transform-style:preserve-3d;-webkit-transform:rotateY(0deg);-moz-transition:.6s;-moz-transform-style:preserve-3d;-moz-transform:rotateY(0deg);-o-transition:.6s;-o-transform-style:preserve-3d;-o-transform:rotateY(0deg);-ms-transition:.6s;-ms-transform-style:preserve-3d;-ms-transform:rotateY(0deg);transition:.6s;transform-style:preserve-3d;transform:rotateY(0deg);position:absolute;top:0;left:0}
.flip-container .front{-webkit-transform:rotateY(0deg);-ms-transform:rotateY(0deg);background:#90ee90;z-index:2}
.flip-container .back{background:#add8e6;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg)}
.flip-container.vertical{position:relative}
.flip-container.vertical .back{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-ms-transform:rotateX(180deg);transform:rotateX(180deg)}
.flip-container.vertical .flipper{-webkit-transform-origin:100% 213.5px;-moz-transform-origin:100% 213.5px;-ms-transform-origin:100% 213.5px;transform-origin:100% 213.5px}
.flip-container.vertical.hover .back,.flip-container.vertical:hover .back{-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);-o-transform:rotateX(0deg);-ms-transform:rotateX(0deg);transform:rotateX(0deg)}
.flip-container.vertical.hover .front,.flip-container.vertical:hover .front{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-o-transform:rotateX(180deg);transform:rotateX(180deg)}

/*** END CSS Flip from David Walsh ***/
.flip-container, .flip-container .front, .flip-container .back, .geekweek-social {
    width: 390px;
    height: 390px;
}
.page-geekweek .flip-container .geekweek-event-title a{
  text-transform: uppercase;
}

body.page-geekweek {
  background-image: none;
  background-color: rgba(52,193,217,0.1);
}
.page-geekweek .header,
.page-geekweek .footer {
  background: none;
  background-color: #0A2E52;
}
.page-geekweek .main-content {
  background-image: url('/static/geekweek/geek-week-2015-banner.svg');
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.page-geekweek h1 {
  height: 492px;
  border-width: 0;
  text-indent: -1000em;
}

.page-geekweek .main-content { padding: 0; }
.page-geekweek .flip-container {display: block; float: left; border-width: 0; }
.page-geekweek .flip-container .back { font-size: 90%; padding: 20px; text-align: center; }
.page-geekweek .flip-container .geekweek-event-summary { text-align: left; }
.page-geekweek .flip-container .geekweek-event-title { font-weight: bold; color: #FFF100; }
.page-geekweek .flip-container .geekweek-event-time { margin-bottom: 0; }
.page-geekweek .flip-container .geekweek-event-fbevent { font-weight: bold; color: #FFF100; text-transform: uppercase; margin: -5px 0 5px 0; }

.geekweek-nerd-girl .geekweek-event-fbevent a { color: #790045; }
.geekweek-super-awesome .geekweek-event-fbevent a { color: #35B558; }



.page-geekweek .geekweek-laser-tag .geekweek-event-title { color: #0A2E52; }
.page-geekweek .geekweek-super-awesome .geekweek-event-title { color: #2CABE1; }

/* geekweek-twitter.svg */
/* geekweek-facebook.svg */
/* geekweek-instagram.svg */

.geekweek-text-scream {
  display: block;
  background-color: red;
  color: #FFF;
  padding: 8px;
  margin: 0 -8px;
  text-transform: uppercase;
}
.page-geekweek .flip-container .front { cursor: pointer; background-position: center; background-size: 100% 100%; }
.geekweek-domain-night .front   { background-color: #0A2E52; color: #FFF; background-image: url('/static/geekweek/geekweek-domain-night.svg');    }
.geekweek-game-night .front     { background-color: #231F20; color: #FFF; background-image: url('/static/geekweek/geekweek-game-night.svg');      }
.geekweek-game-of-thrones .front{ background-color: #6658A6; color: #FFF; background-image: url('/static/geekweek/geekweek-game-of-thrones.svg'); }
.geekweek-geek-pride .front     { background-color: #2CABE1; color: #FFF; background-image: url('/v-20150330/static/geekweek/geekweek-geek-pride.svg');      }
.geekweek-laser-tag .front      { background-color: #FFA700; color: #000; background-image: url('/static/geekweek/geekweek-laser-tag.svg');       }
.geekweek-nerd-girl .front      { background-color: #EB008B; color: #FFF; background-image: url('/static/geekweek/geekweek-nerd-girl.svg');       }
.geekweek-smash-bros .front     { background-color: #35B558; color: #FFF; background-image: url('/static/geekweek/geekweek-smash-bros.svg');      }
.geekweek-super-awesome .front  { background-color: #FFF100; color: #000; background-image: url('/static/geekweek/geekweek-super-awesome.svg');   }


.geekweek-domain-night .back    { background-color: #0A2E52; color: #FFF; }
.geekweek-game-night .back      { background-color: #231F20; color: #FFF; }
.geekweek-game-of-thrones .back { background-color: #6658A6; color: #FFF; }
.geekweek-geek-pride .back      { background-color: #2CABE1; color: #FFF; }
.geekweek-laser-tag .back       { background-color: #FFA700; color: #000; }
.geekweek-nerd-girl .back       { background-color: #EB008B; color: #FFF; }
.geekweek-smash-bros .back      { background-color: #35B558; color: #FFF; }
.geekweek-super-awesome .back   { background-color: #FFF100; color: #000; }



.geekweek-social { display: block; float: left; border-width: 0; }
.geekweek-social a { display: block; height: 33.3%; width: 100%; text-indent: -1000em; background-repeat: repeat; background-size: 60px 60px; background-position: top center;
  transition:all 0.5s ;
  -webkit-transition:all 0.5s ;
  -o-transition:all 0.5s ;
  -moz-transition:all 0.5s ;
}
.geekweek-social a:hover {
   background-size: 120px 120px;
}

.geekweek-social a:hover { background-color: #BFFF00; }

.geekweek-social-twitter { background-image: url('/static/geekweek/geekweek-twitter.svg'); }
.geekweek-social-facebook { background-image: url('/static/geekweek/geekweek-facebook.svg'); }
.geekweek-social-instagram { background-image: url('/static/geekweek/geekweek-instagram.svg'); }


@media (min-width:992px) and (max-width:1199px){
  .page-geekweek h1 {
    height: 400px;
  }
  .flip-container, .flip-container .front, .flip-container .back, .geekweek-social {
    width: 323px;
    height: 323px;
  }
  .geekweek-nerd-girl .geekweek-event-summary {
     font-size: 10px; 
      
  }
}
@media (min-width:768px) and (max-width:991px){
  .page-geekweek h1 {
    height: 298px;
  }
  .flip-container, .flip-container .front, .flip-container .back {
    width: 375px;
    height: 375px;
  }
  .geekweek-social {
    height: 375px;
    width: 100%;
  }
}
@media (min-width:600px) and (max-width:767px){
  .page-geekweek .main-content {
      background-position: top center;
      background-size: auto 550px;
  }
  .page-geekweek h1 {
    height: 298px;
  }
}
@media (min-width:480px) and (max-width:599px){
  .page-geekweek .main-content {
      background-position: top center;
      background-size: auto 450px;
  }
  .page-geekweek h1 {
    height: 235px;
  }
}
@media (max-width:479px){
  .page-geekweek .main-content {
      background-position: top center;
      background-size: auto 350px;
  }
  .page-geekweek h1 {
    height: 175px;
  }
}
@media (max-width:767px) {
  .flip-container, .flip-container .front, .flip-container .back, .geekweek-social {
    height: 360px;
    width: 100%;
  }
  .page-geekweek .flip-container .front {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto;
  }
  .page-geekweek .flip-container .back div {
    font-size: 10px;
    margin: 0;
    padding: 0;
    margin-top: 10px;
  }
  .page-geekweek .flip-container .back p {
    margin: 0;
    padding: 0;
  }
}
@media (max-width:480px) {
  .flip-container, .flip-container .front, .flip-container .back, .geekweek-social {
    height: 320px;
    width: 100%;
  }
}

.page-theme-calendar-small .event-list-date {
  font-size: 40px;
  line-height: 60px;
}
.page-theme-calendar-small .event-list-day {
  font-size: 20px;
  line-height: 20px;
}
.page-theme-calendar-small h2.events {
  border-bottom: 1px solid #347bad;
}
.page-theme-calendar-small .event-row-date + .event-row-month {
    margin-top: 3em;
}