/*

2014 Biomedical Engineering Campaign
Boston University College of Engineering
Ashley Kolodziej, BU Interactive Design

/* ----------------------------------- */
/* -- 1. ~Global Styles and Resets --- */
/* ----------------------------------- */

/* 1a. ~reset */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,font,img,ins,kbd,q,s,samp,small,strike,strong,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;outline:0;border:0;vertical-align:baseline;font-style:inherit;font-size:100%;font-family:inherit;}:focus{outline:0;}body{line-height:1;}ol,ul{list-style:none;}table{border-spacing:0;border-collapse:collapse;}caption,th,td{text-align:left;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}input.input-text,textarea,select{font-family:inherit;}
.cf:before,.cf:after{display:table;content:" ";}.cf:after{clear:both;}.cf{*zoom:1;}

.cf:before,.cf:after {content: " "; /* 1 */display: table; /* 2 */}.cf:after {clear: both;}

/* 1b. ~fonts */

@font-face {
    font-family: 'Bebas-Neue';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/BebasNeue-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
  font-family: "Benton-Sans";
  src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Regular/019c3a13-b3d7-4c5a-be27-07a8334a43e6-2.eot");
  src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Regular/019c3a13-b3d7-4c5a-be27-07a8334a43e6-2.eot?") format("embedded-opentype"),
       url("https://www.bu.edu/cdn/fonts/Benton-Sans-Regular/019c3a13-b3d7-4c5a-be27-07a8334a43e6-3.woff") format("woff"),
       url("https://www.bu.edu/cdn/fonts/Benton-Sans-Regular/019c3a13-b3d7-4c5a-be27-07a8334a43e6-1.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "Benton-Sans";
  src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Regular-Italic/3295fa07-2a3f-4cd1-ba86-e06161453a51-2.eot");
  src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Regular-Italic/3295fa07-2a3f-4cd1-ba86-e06161453a51-2.eot?") format("embedded-opentype"),
       url("https://www.bu.edu/cdn/fonts/Benton-Sans-Regular-Italic/3295fa07-2a3f-4cd1-ba86-e06161453a51-3.woff") format("woff"),
       url("https://www.bu.edu/cdn/fonts/Benton-Sans-Regular-Italic/3295fa07-2a3f-4cd1-ba86-e06161453a51-1.ttf") format("truetype");
  font-style: italic;
  font-weight: normal;
}

@font-face {
    font-family: "Benton-Sans-Comp";
        src: url("https://www.bu.edu/cdn/fonts/BentonSansComp-Bold/45b0ce09-9fae-45f1-8b3d-fdd995b91c6b-2.eot");
        src: url("https://www.bu.edu/cdn/fonts/BentonSansComp-Bold/45b0ce09-9fae-45f1-8b3d-fdd995b91c6b-2.eot?") format("embedded-opentype"),
         url("https://www.bu.edu/cdn/fonts/BentonSansComp-Bold/45b0ce09-9fae-45f1-8b3d-fdd995b91c6b-3.woff") format("woff"),
         url("https://www.bu.edu/cdn/fonts/BentonSansComp-Bold/45b0ce09-9fae-45f1-8b3d-fdd995b91c6b-1.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

body {
  background-color: #efefef;
  font-family: "Benton-Sans", Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Benton-Sans-Comp", "Benton-Sans", Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.2;
  margin-bottom: 1.25em;
}

h1 { font-size: 6.372em; }
h2 { font-size: 4.0em; }
h3 { font-size: 3.4em; }
h4 { font-size: 2.4em; }
h5 { font-size: 2.0em; }
h6 { font-size: 1.6em; }

p, a {
  font-size: 1.3em;
  line-height: 1.3;
}

p {
  margin: 1.25em 0;
}

a {
  font-family: inherit;
  font-size: inherit;
  color: #cc0000;
  text-decoration: underline;
}

.link,
.control-label {
  font-family: "Benton-Sans-Comp", "Benton-Sans", Helvetica, Arial, sans-serif;
  font-size: 1.5em;
  letter-spacing: .01em;
  text-decoration: none;
  text-transform: uppercase;
  color: #cc0000;
}

.link:after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 5px;
  background: url(images/sprite.png) 0 0 no-repeat transparent;
  position: relative;
  top: -2px;
  margin-left: 5px;
}

.link:hover:after {
  background-position: 0 -5px;
}

.container {
  position: relative;
  width: 960px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

section {
  padding: 35px 35px 10px 35px;
}

#header {
  background-color: #222;
  padding: 35px 0;
}

#header-logo-img {
  display: block;
  width: 272px;
  height: 35px;
  background: url(images/bme-logo.png);
  text-indent: -300%;
  overflow: hidden;
}

#rankings {
  background: url(images/rankings-bg.jpg) center top no-repeat #000;
  color: #fff;
  overflow: hidden;
  padding-bottom: 200px;
  background-size:cover;
}

#rankings-title {
  width: 205px;
  float: left;
  font-family: "Bebas-Neue", "Benton-Sans-Comp", Helvetica, Arial, sans-serif;
  line-height: 1;
  margin: 0 0 .5em 10px;
}

#rankings-title span {
  background-color: #000;
  box-shadow: 10px 0 0 #000, -10px 0 0 #000;
}

#rankings-title em {
  font-style: normal;
  color: #000;
  background-color: #ffd900;
  box-shadow: 10px 0 0 #ffd900, -10px 0 0 #ffd900;
}

#rankings h2 {
  float: left;
  clear: left;
  font-size: 2.1em;
}

#rankings-links,
#rankings-content {
  width: 640px;
  top: auto;
  right: 0;
  position: absolute;
  overflow: hidden;
  opacity: 1;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

#rankings-links.inactive {
  opacity: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

.ranking {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 33.33%;
  height: 230px;
  padding: 35px;
  float: left;
  color: #fff;
  text-decoration: none;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSItMS40MjEwODU0NzE1MjAyZS0xNCUiIHkxPSIxMDAlIiB4Mj0iMTAwJSIgeTI9IjAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NiMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=);
  background-image: -moz-linear-gradient(bottom left, rgba(0,0,0,0) 0%, rgba(14,23,67,.3) 100%);
  background-image: -o-linear-gradient(bottom left, rgba(0,0,0,0) 0%, rgba(14,23,67,.3) 100%);
  background-image: -webkit-linear-gradient(bottom left, rgba(0,0,0,0) 0%, rgba(14,23,67,.3) 100%);
  background-image: linear-gradient(bottom left, rgba(0,0,0,0) 0%, rgba(14,23,67,.3) 100%);
}

.ranking h3 {
  line-height: 1.1;
  margin-bottom: .5em;
}

.ranking h3 span {
  font-size:14px;
  display:block;
  margin-top:.3em;
  font-weight:100 !important;

}

.rankings-number {
  display: block;
  width: 24px;
  padding: 2px 4px;
  margin-bottom: .5em;
  background-color: #ffd900;
  color: #000;
  font-family: "Benton-Sans-Comp", "Benton-Sans", Helvetica, Arial, sans-serif;
  font-size: 2em;
}

.ranking .link {
  color: #fff;
  opacity: .6;
  position: absolute;
  bottom: 25px;
  left: 35px;
}

.ranking .link:after {
  background-position: 0 -10px;
}

.ranking:hover {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSItMS40MjEwODU0NzE1MjAyZS0xNCUiIHkxPSIxMDAlIiB4Mj0iMTAwJSIgeTI9IjAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NiMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjYiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=);
  background-image: -moz-linear-gradient(bottom left, rgba(0,0,0,0) 0%, rgba(14,23,67,1) 100%);
  background-image: -o-linear-gradient(bottom left, rgba(0,0,0,0) 0%, rgba(14,23,67,1) 100%);
  background-image: -webkit-linear-gradient(bottom left, rgba(0,0,0,0) 0%, rgba(14,23,67,1) 100%);
  background-image: linear-gradient(bottom left, rgba(0,0,0,0) 0%, rgba(14,23,67,1) 100%);
}

.ranking:hover .link {
  opacity: 1;
}

.ranking:hover .link:after {
  background-position: 0 -15px;
}

#rankings-content {
  display: none;
  height: 580px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSItMS40MjEwODU0NzE1MjAyZS0xNCUiIHkxPSIxMDAlIiB4Mj0iMTAwJSIgeTI9IjAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NiMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=);
  background-image: -moz-linear-gradient(bottom left, rgba(0,0,0,0) 0%, rgba(14,23,67,.3) 100%);
  background-image: -o-linear-gradient(bottom left, rgba(0,0,0,0) 0%, rgba(14,23,67,.3) 100%);
  background-image: -webkit-linear-gradient(bottom left, rgba(0,0,0,0) 0%, rgba(14,23,67,.3) 100%);
  background-image: linear-gradient(bottom left, rgba(0,0,0,0) 0%, rgba(14,23,67,.3) 100%);
}

#rankings-content.active {
  display: block;
}

#rankings-content-close {
  color: #fff;
  position: absolute;
  top: 35px;
  right: 35px;
  z-index: 100;
}

#rankings-content-close:after {
  width: 16px;
  height: 16px;
  background-position: -23px -58px;
  top: 2px;
  right: -4px;
}

#rankings-content .rankings-number {
  display: inline-block;
  margin-right: .5em;
  position: relative;
  top: -6px;
  line-height: 1.3;
}

#rankings-content h3 {
  display: inline-block;
  font-size: 3em;
  margin-bottom: 1em;
}

#rankings-content h4 {
  margin-bottom: 1em;
}

.rankings-data {
  padding: 35px;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.rankings-data.active {
  display: block;
}

.data {
  position: relative;
  background-color: #5B0000;
  background-color: rgba(14,23,67,.6);
  width: 100px;
  height: 20px;
  padding: 3px 5px 3px;
  margin: 5px 0;
  font-family: "Benton-Sans-Comp", "Benton-Sans", Helvetica, Arial, sans-serif;
  font-size: 2.2em;
  color: #b9a3a3;
  text-align: right;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

.highlight {
  background-color: #ffd900;
  color: #000;
}

.highlight .label {
  color: #ffd900;
}

.label {
  position: absolute;
  width: 200px;
  right: -210px;
  top: auto;
  text-align: left;
  color: #fff;
}

.citation {
  font-size: 1.1em;
  position: relative;
  top: 1em;
}

#rankings-1 .animate.dp-1,
.no-csstransitions #rankings-1 .dp-1 { width: 450px; }
#rankings-1 .animate.dp-2,
.no-csstransitions #rankings-1 .dp-2 { width: 430px; }
#rankings-1 .animate.dp-3,
.no-csstransitions #rankings-1 .dp-3 { width: 370px; }
#rankings-1 .animate.dp-4,
.no-csstransitions #rankings-1 .dp-4 { width: 350px; }
#rankings-1 .animate.dp-5,
.no-csstransitions #rankings-1 .dp-5 { width: 325px; }
#rankings-1 .animate.dp-6,
.no-csstransitions #rankings-1 .dp-6 { width: 320px; }
#rankings-1 .animate.dp-7,
.no-csstransitions #rankings-1 .dp-7 { width: 312px; }
#rankings-1 .animate.dp-8,
.no-csstransitions #rankings-1 .dp-8 { width: 270px; }
#rankings-1 .animate.dp-9,
.no-csstransitions #rankings-1 .dp-9 { width: 260px; }
#rankings-1 .animate.dp-10,
.no-csstransitions #rankings-1 .dp-10 { width: 228px; }
#rankings-1 .animate.dp-11,
.no-csstransitions #rankings-1 .dp-11 { width: 210px; }
#rankings-1 .animate.dp-12,
.no-csstransitions #rankings-1 .dp-12 { width: 192px; }

#rankings-2 .animate.dp-1,
.no-csstransitions #rankings-2 .dp-1 { width: 400px; }
#rankings-2 .animate.dp-2,
.no-csstransitions #rankings-2 .dp-2 { width: 390px; }
#rankings-2 .animate.dp-3,
.no-csstransitions #rankings-2 .dp-3 { width: 350px; }
#rankings-2 .animate.dp-4,
.no-csstransitions #rankings-2 .dp-4 { width: 340px; }
#rankings-2 .animate.dp-5,
.no-csstransitions #rankings-2 .dp-5 { width: 325px; }
#rankings-2 .animate.dp-6,
.no-csstransitions #rankings-2 .dp-6 { width: 315px; }
#rankings-2 .animate.dp-7,
.no-csstransitions #rankings-2 .dp-7 { width: 315px; }
#rankings-2 .animate.dp-8,
.no-csstransitions #rankings-2 .dp-8 { width: 295px; }
#rankings-2 .animate.dp-9,
.no-csstransitions #rankings-2 .dp-9 { width: 260px; }
#rankings-2 .animate.dp-10,
.no-csstransitions #rankings-2 .dp-10 { width: 240px; }
#rankings-2 .animate.dp-11,
.no-csstransitions #rankings-2 .dp-11 { width: 250px; }
#rankings-2 .animate.dp-12,
.no-csstransitions #rankings-2 .dp-12 { width: 235px; }

#rankings-3 .animate.dp-1,
.no-csstransitions #rankings-3 .dp-1 { width: 400px; }
#rankings-3 .animate.dp-2,
.no-csstransitions #rankings-3 .dp-2 { width: 285px; }
#rankings-3 .animate.dp-3,
.no-csstransitions #rankings-3 .dp-3 { width: 270px; }
#rankings-3 .animate.dp-4,
.no-csstransitions #rankings-3 .dp-4 { width: 260px; }
#rankings-3 .animate.dp-5,
.no-csstransitions #rankings-3 .dp-5 { width: 230px; }
#rankings-3 .animate.dp-6,
.no-csstransitions #rankings-3 .dp-6 { width: 215px; }
#rankings-3 .animate.dp-7,
.no-csstransitions #rankings-3 .dp-7 { width: 210px; }
#rankings-3 .animate.dp-8,
.no-csstransitions #rankings-3 .dp-8 { width: 200px; }
#rankings-3 .animate.dp-9,
.no-csstransitions #rankings-3 .dp-9 { width: 190px; }
#rankings-3 .animate.dp-10,
.no-csstransitions #rankings-3 .dp-10 { width: 170px; }
#rankings-3 .animate.dp-11,
.no-csstransitions #rankings-3 .dp-11 { width: 260px; }
#rankings-3 .animate.dp-12,
.no-csstransitions #rankings-3 .dp-12 { width: 260px; }

#rankings-4 .animate.dp-1,
.no-csstransitions #rankings-4 .dp-1 { width: 400px; }
#rankings-4 .animate.dp-2,
.no-csstransitions #rankings-4 .dp-2 { width: 395px; }
#rankings-4 .animate.dp-3,
.no-csstransitions #rankings-4 .dp-3 { width: 355px; }
#rankings-4 .animate.dp-4,
.no-csstransitions #rankings-4 .dp-4 { width: 345px; }
#rankings-4 .animate.dp-5,
.no-csstransitions #rankings-4 .dp-5 { width: 340px; }
#rankings-4 .animate.dp-6,
.no-csstransitions #rankings-4 .dp-6 { width: 330px; }
#rankings-4 .animate.dp-7,
.no-csstransitions #rankings-4 .dp-7 { width: 305px; }
#rankings-4 .animate.dp-8,
.no-csstransitions #rankings-4 .dp-8 { width: 300px; }
#rankings-4 .animate.dp-9,
.no-csstransitions #rankings-4 .dp-9 { width: 290px; }
#rankings-4 .animate.dp-10,
.no-csstransitions #rankings-4 .dp-10 { width: 280px; }
#rankings-4 .animate.dp-11,
.no-csstransitions #rankings-4 .dp-11 { width: 300px; }
#rankings-4 .animate.dp-12,
.no-csstransitions #rankings-4 .dp-12 { width: 190px; }

#rankings-5 .animate.dp-1,
.no-csstransitions #rankings-5 .dp-1 { width: 400px; }
#rankings-5 .animate.dp-2,
.no-csstransitions #rankings-5 .dp-2 { width: 380px; }
#rankings-5 .animate.dp-3,
.no-csstransitions #rankings-5 .dp-3 { width: 370px; }
#rankings-5 .animate.dp-4,
.no-csstransitions #rankings-5 .dp-4 { width: 355px; }
#rankings-5 .animate.dp-5,
.no-csstransitions #rankings-5 .dp-5 { width: 340px; }
#rankings-5 .animate.dp-6,
.no-csstransitions #rankings-5 .dp-6 { width: 330px; }
#rankings-5 .animate.dp-7,
.no-csstransitions #rankings-5 .dp-7 { width: 320px; }
#rankings-5 .animate.dp-8,
.no-csstransitions #rankings-5 .dp-8 { width: 300px; }
#rankings-5 .animate.dp-9,
.no-csstransitions #rankings-5 .dp-9 { width: 290px; }
#rankings-5 .animate.dp-10,
.no-csstransitions #rankings-5 .dp-10 { width: 285px; }
#rankings-5 .animate.dp-11,
.no-csstransitions #rankings-5 .dp-11 { width: 280px; }
#rankings-5 .animate.dp-12,
.no-csstransitions #rankings-5 .dp-12 { width: 270px; }

#rankings-6 .animate.dp-1,
.no-csstransitions #rankings-6 .dp-1 { width: 450px; }
#rankings-6 .animate.dp-2,
.no-csstransitions #rankings-6 .dp-2 { width: 440px; }
#rankings-6 .animate.dp-3,
.no-csstransitions #rankings-6 .dp-3 { width: 420px; }
#rankings-6 .animate.dp-4,
.no-csstransitions #rankings-6 .dp-4 { width: 390px; }
#rankings-6 .animate.dp-5,
.no-csstransitions #rankings-6 .dp-5 { width: 370px; }
#rankings-6 .animate.dp-6,
.no-csstransitions #rankings-6 .dp-6 { width: 355px; }
#rankings-6 .animate.dp-7,
.no-csstransitions #rankings-6 .dp-7 { width: 340px; }
#rankings-6 .animate.dp-8,
.no-csstransitions #rankings-6 .dp-8 { width: 330px; }
#rankings-6 .animate.dp-9,
.no-csstransitions #rankings-6 .dp-9 { width: 255px; }
#rankings-6 .animate.dp-10,
.no-csstransitions #rankings-6 .dp-10 { width: 195px; }
#rankings-6 .animate.dp-11,
.no-csstransitions #rankings-6 .dp-11 { width: 195px; }
#rankings-6 .animate.dp-12,
.no-csstransitions #rankings-6 .dp-12 { width: 180px; }


#faculty {
  position: relative;
  background: #000000;
  margin-top: -150px;
  color: #fff;
}

#faculty h1 {
  font-size: 2.4em;
  position: absolute;
  background: #000000;
  top: -58px;
  right: 64px;
  padding: .7em 1em;
  height: 58px;
}

#faculty h1:before,
#faculty h1:after {
  content: "";
  display: block;
  width: 44px;
  height: 58px;
  position: absolute;
  top: 0;
  background: url(images/sprite-black.png) -4px 0 no-repeat transparent;
}

#faculty h1:before {
  left: -44px;
}

#faculty h1:after {
  right: -44px;
  background-position: -48px 0;
}

#faculty .feature {
  float: left;
  margin-right: 35px;
}

.faculty-slide {
  background: #000000;
  color: #1f1f1f;
  overflow: hidden;
}

.faculty-text {
  opacity: 0;
  left: 75%;
  width: 40%;
  height: 100%;
  background-color: #fff;
  padding: 35px;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.faculty-text:before {
  content: "";
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right:15px solid #fff;
  position: absolute;
  top: auto;
  left: auto;
  margin-left: -50px;
  margin-top: -5px;
}

.faculty-text h4 {
  margin-bottom: 0;
}

#faculty-slider {
  min-height: 310px;
}

.faculty-text,
.feature {
  transition-delay: 0s !important;
}

.animate-in .faculty-text {
  left: 60%;
  opacity: 1;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

.animate-out .faculty-text {
  left: 40%;
  opacity: 1;
  -webkit-transition-duration: .75s;
  -moz-transition-duration: .75s;
  -ms-transition-duration: .75s;
  -o-transition-duration: .75s;
  transition-duration: .75s;
}

.feature {
  width: 60%;
  left: 100px;
  opacity: 0;
  position: relative;
}

.feature-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  /* padding-top: 25px; */
  height: 0;
}
.feature-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.animate-in .feature {
  left: 0;
  opacity: 1;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s; }

.animate-out .feature {
  left: -100px;
  opacity: 0;
  -webkit-transition-duration: .75s;
  -moz-transition-duration: .75s;
  -ms-transition-duration: .75s;
  -o-transition-duration: .75s;
  transition-duration: .75s;
}

#faculty-slider-controls {
  position: relative;
  z-index: 2;
  margin-top: 25px;
}

#faculty-slider-controls li {
  display: block;
  float: left;
  width: 11.111111111111111%;
  background-color: #000;
  position: relative;
}

.control-label {
  display: inline-block;
  color: #fff;
  background: #000;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: .3em;
  font-size: 1.1em;
}

.control-label:before {
  content: "";
  display: block;
  float: left;
  width: 11px;
  height: 10px;
  margin-right: 7px;
  margin-top: 2px;
  background: url(images/sprite.png) 0 -58px;
}

.profile:before { background-position: 0 -58px; }
.video:before { background-position: -11px -58px; }

#faculty-slider-controls li img {
  width: 100%;
  height: auto;
  display: block;
}

#sequence {
  margin: 0 auto;
  position: relative;
  width: 100%;
}

#sequence > .sequence-canvas {
  position: relative;
  height: 300px;
  width: 100%;
}

#sequence > .sequence-canvas li {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  top: 0;
}

#sequence > .sequence-canvas li > * {
  position: absolute;
  /* only cause the left and opacity properties to transition */
  -webkit-transition-property: left, opacity;
  -moz-transition-property: left, opacity;
  -ms-transition-property: left, opacity;
  -o-transition-property: left, opacity;
  transition-property: left, opacity;
}

.sequence-pagination {
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.sequence-pagination li img {
  cursor: pointer;
  /*opacity: 0.3;*/
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: width, margin, opacity;
  -moz-transition-property: width, margin, opacity;
  -ms-transition-property: width, margin, opacity;
  -o-transition-property: width, margin, opacity;
  transition-property: width, margin, opacity;
}

.sequence-pagination li:hover img {
  opacity: 1;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.sequence-pagination:hover li:not(:hover) img {
  opacity: .5;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

#faculty-slider-controls li:hover img,
.sequence-pagination li.current img {
    opacity: 1 !important;
    margin-left: -10%;
    margin-top: -6%;
    position: relative;
    width: 120% !important;
    z-index: 100;
}

.sequence-pagination li.current img {
  z-index: 101;
}

.sequence-pagination li:hover img {
  border-top: 1px solid transparent; /* so this looks okay next to current state */
}

.sequence-pagination li.current img {
  border: 1px solid #fff;
}

.sequence-pagination li.current .control-label {
  left: -9%;
  bottom: 1px;
}

#faculty-slider-controls li:hover img {
  z-index: 102;
}

.sequence-pagination li.current img {
  opacity: 1;
}

#joinus  {
  padding: 0;
  margin: 90px auto;
  font-family: "Benton-Sans-Comp", Helvetica, Arial, sans-serif;
  font-size: 2.7em;
}

#joinus h1 {
  font-family: "Bebas-Neue", "Benton-Sans-Comp", Helvetica, Arial, sans-serif;
  font-size: 1.1em;
  display: inline-block;
  padding: .1em .5em;
  color: #fff;
  background: #000;
  margin-right: .5em;
  margin-bottom: 0;
}

#joinus h1 em {
  font-style: normal;
  color: #ffd900;
}

#footer {
  background: #000;
  font-family: Helvetica, Arial, sans-serif;
}

#footer .container {
  background: none repeat scroll 0 0 #000;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  margin: 0 auto;
  min-height: 60px;
  padding: 40px 0 30px 10px;
}

#footer li {
  border-right: 1px solid #666;
  display: inline;
  font-size: 1.1em;
  line-height: 1.5em;
  margin-right: 6px;
  padding-right: 6px;
}

#footer a {
  color: #acacac;
  text-decoration: none;
}

#footer li.butoday {
    border-right: medium none;
}

#footer .butoday a {
  color: #8aa5b1;
  font-weight: bold;
}


.stat img {
	margin-bottom:10px;
}

.stat {
    width: 33%;
    text-align: center;
    height: 200px;
    float: left;
    margin-bottom: 22px;
}

.stat h4{
	font-size:2.2em;
}



@media only screen and (max-width: 959px) {

  .container {
    width: auto;
    margin: 20px;
  }

  #header .container {
    margin-top:0;
    margin-bottom:0;
  }

  #rankings-title {
    text-align: center;
    width: auto;
    float: none;
    max-width: 900px;
    margin: 1em auto .5em;
  }

  #rankings-title em {
    margin-left: 15px;
  }

  #rankings h2 {
    float: none;
    text-align: center;
    margin-bottom: 3em;
  }

  #rankings-links, #rankings-content {
    width: 100%;
    margin: 0;
    position: relative;
  }

  #rankings-content {
    position: absolute;
    top: 250px;
    left: auto;
  }

  #faculty {
    margin-top: -50px;
  }

  #sequence > .sequence-canvas {
    position: relative;
    height: 335px;
    width: 100%;
  }

  .feature {
    width: 50%;
  }

  .animate-in .faculty-text {
    width: 50%;
    left: 50%;
  }

  #joinus {
    margin: 90px 20px;
  }

}

@media only screen and (max-width: 768px) {

  #rankings-title {
    margin-top: 0;
  }

  #rankings-content {
    top: 300px;
  }

  .label {
    left: 10px;
  }

  .highlight .label {
    color: #000;
  }

  #sequence > .sequence-canvas {
    height: 575px;
  }

  #sequence > .sequence-canvas li > * {
    position: relative;
  }

  #faculty .feature {
    float: none;
    margin: 0 auto;
    display: block;
  }

  .feature {
    width: 100%;
  }

  .animate-in .faculty-text {
    width: auto;
    height: auto;
    margin: 0 auto;
  }

  .animate-in .faculty-text {
    left: 0;
  }

  .faculty-text:before {
    display: none;
  }

  .control-label {
    position: relative;
    float: right;
    top: 10px;
  }

  #faculty-slider-controls li {
    width: 100%;
    height: 50px;
    float: none;
    background: transparent;
    border-top: 1px dotted rgba(255,255,255,.5);
  }

  #faculty-slider-controls li:first-child {
    border-top: none;
  }

  #faculty-slider-controls li:hover img,
  #faculty-slider-controls li img {
    height: 100%;
    width: auto !important;
    margin-top: 0;
    margin-left: 0;
  }

  #faculty-slider-controls li:after {
    content: attr(data-title);
    font-family: "Benton-Sans-Comp", "Benton-Sans", Helvetica, Arial, sans-serif;
    font-size: 2em;
    position: absolute;
    top: 16px;
    left: 100px;
    opacity: .5;
  }

  .sequence-pagination li.current img {
    border: none;
  }

  #faculty-slider-controls li.current:after {
    opacity: 1;
  }

  .sequence-pagination li.current .control-label {
    left: auto;
    bottom: auto;
  }

  #faculty-slider-controls li:hover:after {
    opacity: 1;
  }

}



@media only screen and (min-width: 600px) {





	.break {
	display:block;
	}
}


@media only screen and (max-width: 600px) {

  h1 { font-size: 4.0em; }
  h2 { font-size: 3.6em; }
  h3 { font-size: 2.4em; }
  h4 { font-size: 2.0em; }
  h5 { font-size: 1.6em; }
  h6 { font-size: 1.4em; }

  .ranking {
    display: block;
    width: 100%;
    height: auto;
    padding: 15px;
  }

  #rankings-links .rankings-number {
    float: left;
    margin-right: 15px;
  }

  .ranking h3 {
    margin-top: 3px;
    font-size: 2em;
  }

  .ranking .link {
    left: auto;
    right: 15px;
    top: 22px;
  }

  #rankings-content {
    top: 200px;
  }

  .rankings-data {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .data {
    width: 100% !important;
  }

	.stat img {
		margin:-5px 10px 10px 0;
		float:left;
		width:40px;
		height:40px;
	}

	.stat {
	    width: 100%;
	    text-align: center;
	    height: 40px;
	    float: none;
	}

	.stat h4{
		font-size:1.8em;
		padding:5px 0 0 10px;
		text-align: left;
	}
}

@media only screen and (max-width: 500px) {

  #faculty-slider-controls li img {
    display: none;
  }

  #faculty-slider-controls li:after {
    left: 0;
    font-size: 1.75em;
  }

  .control-label {
    width: 10px;
    height: 14px;
    text-indent: 100px;
    overflow: hidden;
  }

}

@media only screen and (max-width: 490px) {

  #rankings {
    padding-right: 0;
    padding-left: 0;
  }

  #faculty h1 {
    padding: 0.7em 0;
    right: 0;
    text-align: center;
    top: -31px;
    width: 100%;
  }

  #faculty h1:before,
  #faculty h1:after {
    display: none;
  }

}

@media only screen and (max-width: 420px) {

  .ranking h3 {
    font-size: 1.8em;
    margin-top: 3px;
  }

  #rankings-content {
    top: 300px;
  }

  #rankings-content-close {
    width: 13px;
    text-indent: 100px;
    top: 15px;
  }

  #faculty {
    margin-top: 0;
  }

  .ranking .link {
	bottom: 25px;
   }

}

@media only screen and (max-width: 380px) {

  #faculty h1 {
    font-size: 2em;
  }

  p {
    font-size: 1.2em;
  }

  .ranking .link {
    width: 10px;
    height: 10px;
    text-indent: 100px;
    overflow: hidden;
    bottom: 25px;
  }

  .ranking .link:after {
    position: absolute;
    top: 0;
    left: 0;
  }

  .cilse h3 {
	margin-top:-20px;
	}
}

.lte9 #sequence {
  overflow: hidden;
}

.lte8 #rankings-links {
  display: block;
}

.lte8 #rankings-links.inactive {
  display: none;
}

.lte8 .ranking {
  border: 1px solid #450000;
}

.cilse {
    background-color: #FFD900;
    background-image: none;
    color: #000;
}

.ranking.cilse{
  background-image: -moz-linear-gradient(bottom left, rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 100%);
  background-image: -o-linear-gradient(bottom left, rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 100%);
  background-image: -webkit-linear-gradient(bottom left, rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 100%);
  background-image: linear-gradient(bottom left, rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 100%);
}

.ranking.cilse:hover {
	background-image:none;
}

.cilse-container h3 {
	margin-top:15px;
}

.cilse .link {
	color: #000000;
}