body{
  margin:0;
  /* overflow-y: scroll; This is optional, but you need it for a full width gallery */
}

img {
  width: auto\9;
  height: auto;
  position: relative;
}

/* --- apply necessary styling for 'Blade' theme to make header the 'light' style --- */

/* change body bg color */
body.post-type-archive-class_note {
	background-color: #000000 !important;
}
/* change header bg to be transparent */
body.post-type-archive-class_note #grve-main-header.grve-default {
	background-color: transparent;
}
/* make header elements (links) be white */
body.post-type-archive-class_note #grve-main-header.grve-default .grve-header-element > a, body.post-type-archive-class_note #grve-main-header.grve-default #grve-main-menu .grve-wrapper > ul > li > a {
	color: #ffffff;
}
/* make header elements (links) be gold when hovered */
body.post-type-archive-class_note #grve-main-header.grve-default .grve-header-element > a:hover, body.post-type-archive-class_note #grve-main-header.grve-default #grve-main-menu .grve-wrapper > ul > li > a:hover {
	color: #f1b144;
}
body.post-type-archive-class_note #grve-main-header.grve-default #grve-main-menu .grve-wrapper > ul > li.current-menu-item > a {
	color: #f1b144;
}
/* make divider line between links and icons be white */
body.post-type-archive-class_note #grve-main-header.grve-header-default.grve-default .grve-header-elements-wrapper:before {
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 5%, rgba(255,255,255,0.30) 30%, rgba(255,255,255,0.30) 70%, rgba(255,255,255,0) 95%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 5%, rgba(255,255,255,0.30) 30%, rgba(255,255,255,0.30) 70%, rgba(255,255,255,0) 95%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 5%, rgba(255,255,255,0.30) 30%, rgba(255,255,255,0.30) 70%, rgba(255,255,255,0) 95%);
}


/* ********************************** CONFIGURE YOUR THEMES HERE ********************************** */

/* ==== THEME 1 ==== */

    ul.theme1{
        text-align: left; 
    }
    ul.theme1 li.select a{  /* This is how you target the selected option of the category navigation bar */
        background: #28ac86 !important;
    }
    .theme1 .thumbnail-caption{
        background: #28ac86 !important;
        background-color: rgba(40,172,134, .9) !important;
    }
    .theme1 .box-caption .box-date, .theme1 .box-caption .box-more a{
        color: #28ac86;
    }

/* ==== THEME 2 ==== */
  
    ul.theme2 li.select a{ 
        background: #09b0dd !important;
    }
    .theme2 .thumbnail-caption{
        background: #09b0dd !important;
        background-color: rgba(9,176,221, .9) !important;
    }
    .theme2 .box-caption .box-date, .theme2 .box-caption .box-more a{
        color: #09b0dd;
    }

/* ==== THEME 3 ==== */
  
    ul.theme3{
        text-align: left; 
    }
    .theme3 .thumbnail-caption>div>div{
        text-align: left;
        padding: 0;
    }
    .theme3 .box-caption{
        background: transparent;
        padding: 0 20px;
    }
    .theme3 .thumbnail-caption{
        background: #fff !important;
    }

/* ==== THEME 4 ==== */
  
    ul.theme4{
        text-align: right; 
    }
    .theme4 .thumbnail-caption>div>div{
        text-align: left;
        padding: 0;
    }
    .theme4 .box-caption{
        background: transparent;
        padding: 0 20px;
    }
    ul.theme4 li.select a{ 
        background: #28ac86; !important;
    }
    .theme4 .thumbnail-caption{
        background: #fff !important;
    }
    .theme4 .box-caption .box-date, .theme4 .box-caption .box-more a{
        color: #28ac86;;
    }

/* ==== THEME 5 ==== */
  
    ul.theme5{
        text-align: right; 
    }
    .theme5 .thumbnail-caption>div>div{
        text-align: left;
        padding: 0;
    }
    .theme5 .box-caption{
        background: transparent;
        padding: 0 20px;
    }
    ul.theme5 li.select a{ 
        background: #09b0dd; !important;
    }
    .theme5 .thumbnail-caption{
        background: #fff !important;
    }
    .theme5 .box-caption .box-date, .theme5 .box-caption .box-more a{
        color: #09b0dd;;
    }

/* *************************************** DEFAULTS FONTS AND COLORS *************************************** */

/* --- SELECTION --> */
::-moz-selection{
  background: #ffcc00;
  color: #ffffff;
}
::selection {
  background: #ffcc00;
  color: #ffffff;
}

/* --- APPLY FONT FAMILY --> */
.box, .category-navbar, .mediaBoxes-loadMore, .mediaBoxes-lightbox{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #333333;
  line-height: 15px;
}


.box{
}

#class-note-grids {
	padding-top: 1em;
}

/* --- SOME STYLE OF THE BOX CAPTION  --> */
.box-caption{
  background: #aaa;
  color: rgb(51, 51, 51);
  font-size: 12px;
}

/* --- WHEN NO IMAGE IS ATTACHED --- */
.box-caption.no-image {
  background: #f8f8f8 !important;
  border: 1px solid #e8e8e8;
}

.box-caption.no-image .alumni-name {
  color: #000 !important;
}
/*
.box-caption.no-image .grad-year {
  color: #000 !important;
}

.box-caption.no-image .box-text {
  color: #333 !important;
}
*/

.hover-text{
  margin-bottom: 15px;
  font-size: 17px;
}

.box-caption .box-title{
  font-size: 16px;
  color: #333333;
}

/* --- THE THUMBNAIL CAPTION  --> */
.thumbnail-caption{
  background: #ffcc00; /* fallback for IE8 */
  background-color: rgba(51,51,51, .9);
  color: #fff;
  text-align: center;
}

.alumni-name {
	font-family: 'Montserrat', sans-serif !important;
	color: #ffcc00;
	font-size: 15px;
	padding-bottom: 3px;
	border-bottom: 1px dotted #999;
}

.grad-year {
	padding: 3px 0px;
}

.grad-year-small {
	position: absolute;
	bottom: 0px;
	font-size: 11px;
	padding: 1px 8px 0px 0px;
	color: #fff;
	background: rgba(1,1,1,0.5);
	width: 98%;
	text-align: right;
	font-family: "Montserrat", sans-serif;
	text-transform: uppercase;
}

.major {
	padding-bottom: 15px;
}

/* --- THUMBNAIL CAPTION WITH NO IMAGE -- */
.alumni-name.no-img {
	color: #fff;
	text-align: center;
	padding-bottom: 3px;
	font-weight: bold;
	position: relative;
	border-bottom: 1px dotted #333 !important;
	/*z-index: 200;*/
}

.grad-year.no-img {
	color: #000;
	text-align: center;
	padding: 4px 0px;
	font-weight: normal;
	font-size: 14px;
	position: relative;
	/*z-index: 200;*/
}

.grad-year.no-img.large {
	font-size: 264px;
	position: absolute;
	top: -62px;
	left: -26px;
	opacity: 0.05;
	/*z-index: 100;*/
}

.major.no-img {
	color: #000;
	text-align: center;
	font-weight: normal;
	font-size: 14px;
	position: relative;
	padding-bottom: 0px !important;
	/*z-index: 200;*/
}

/* --- THE TIMER OF THE LIGHTBOX --> */
.lightbox-timer{
  background-color: white;
}

/* --- BACKGROUND COLOR OF THE NAV OF THE LIGHTBOX --> */
.mediaBoxes-nav{
  background: black;
}

/* --- BACKGROUND COLOR OF THE LIGHTBOX --> */
.mediaBoxes-lightbox{
  background: #313131; 
  background: rgba(0,0,0,.85);
}


/* *************************************** HIDE THE BOXES WHEN THE PAGE LOAD *************************************** */

.box{
  display: none;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity:inherit;
  
  filter:inherit;
  -webkit-border-radius: 1px !important;
     -moz-border-radius: 1px !important;
          border-radius: 1px !important;
  overflow: hidden;
}

/* *************************************** CATEGORY NAVIGATION BAR *************************************** */

/* hide nav bar on mobile devices */
@media only screen and (min-device-width: 480px)
.category-navbar {
  display: none;	
}

.category-navbar{
  font-size: 0px;
  list-style: none;
  margin: 0;
  padding: 0px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
}

.category-navbar li:first-child{
  margin: 0 0 0 0px;
}

.category-navbar li{
  display: inline-block;
  line-height: 16px;
  margin: 0 0 0 8px;
  padding: 5px 0 5px 0;
}

.category-navbar li:last-child{
  background: none;
}

.category-navbar li a{
  cursor: pointer;
  color: #676767;
  font-size: 12px;
  font-weight: 300;
  text-decoration: none;
  margin: 0 0px 0px 0;
  padding: 8px 11px;
  background-color: white;
  -webkit-border-radius: 1px;
     -moz-border-radius: 1px;
          border-radius: 1px;

  -webkit-transition: background-color .1s;
     -moz-transition: background-color .1s;
       -o-transition: background-color .1s;
      -ms-transition: background-color .1s;
          transition: background-color .1s;
}

.category-navbar li a:hover{
  text-decoration: none;
  background: #333333;
  color: #fff;
}

.category-navbar li.select a{
  background: #ffcc00;
  color: #000;
}

#main-category-navbar-wrapper {
  background: #fff;
  color: #000;
  height: 50px;
  z-index: 1;
  padding-top: 1em;
}

.navbar-fixed {
  position: fixed;
  top: 55px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f2f2f2;
  width: 100%;
}

/* ************************ Years Menu *********************************** */
#toggle {
  background: #ffcc00 url('../../plu-class-notes/images/open.png') no-repeat;
  border: 1px solid #febf10;
  border-right: none;
  width: 42px;
  height: 42px;
  position: fixed;
  top: 20%;
  right: 0px;
  z-index: 5;
}

#toggle:hover {
  cursor: pointer;
}

#toggle.close-menu { background: #ffcc00 url('../../plu-class-notes/images/close.png') no-repeat; }

#years {
  background: #fff;
  box-shadow: 0px 0px 8px rgba(0,0,0,0.14);
  position: fixed;
  top: 14%;
  right: -200px;
  width: 200px;
  z-index: 5;
  overflow-x: hidden;
}

#years div {
  padding: 10px;
  border-bottom: 1px solid #e8e8e8;
}

#years div p { font-size: 12px; }

#years div div {
  background: #f8f8f8;
  color: #818181;
  margin: -10px 0px 7px -10px;
  width: 200px;
  font-size: 11px;
  padding: 15px 10px !important;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
}

#years .submit {
	background: #fbba37;
	border-radius: 2px;
	text-align: center;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	list-style: none;
}

.choose-year {
  padding: 2px 14px;
  font-size: 12px;
}

/* *************************************** BOX HTML *************************************** */

div.box-iframe{
  background: #161616;
}

iframe.box-iframe{
  border: 0;
  padding: 0;
  background: #161616;
  display:block;
}

.box-caption{
  display: block;
  padding: 20px;
  position: relative;
  word-wrap: break-word;
}

.box-video:hover .video-circle{
    -webkit-transform: scale(1.2);
       -moz-transform: scale(1.2);
         -o-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
}

.video-circle{
    -webkit-transition: all .3s;
       -moz-transition: all .3s;
         -o-transition: all .3s;
        -ms-transition: all .3s;
            transition: all .3s;


    content: "";
    -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;

    border:2px solid white;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    margin-top: -15px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
}

.video-arrow{
    content: "";
    background: none;
    width: 0;
    height: 0;
    border-left: 15px solid white;
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -8px;
    margin-left: -6px;
    z-index: 3;
}


.box-caption .box-title{
  letter-spacing: 0px;
  line-height: 1.1;
  font-weight: 500;
  width: 100%;

  -webkit-transition: all .2s;
     -moz-transition: all .2s;
       -o-transition: all .2s;
      -ms-transition: all .2s;
          transition: all .2s;
}

.box-caption .box-date{
  font-size: 11px;
  line-height: 15px;
  color: #ffcc00;
  margin-top: 5px;
}

.box-caption .box-text{
  margin: 13px 0px 13px 0 !important;
  font-size: 12px;
  color: #333;
  text-align: center;
  position: relative;
  /*z-index: 200;*/
}
.box-caption .box-text a {
	color: #000000;
	text-decoration: underline;
}

/* --- hide images from boxes --- */
.box-caption .box-text img {
  display: none !important;
}

.box-caption .box-text p {
  padding: 0px !important;
}

.box-caption .box-more {
  text-align: center;
  position: relative;
  /*z-index: 200;*/
}

.box-caption .box-more a{
  text-decoration: none !important;
  color: inherit;
  padding: 4px 12px;
  margin: 0;
  color: #000;
  font-weight: 500;
  font-size: 10px;
  background: #ffcc00;
  text-transform: uppercase;
}

.box-caption.has-image .box-more a { background: #fff; }

/* **** Grids are now broken apart for each year/decade, this is the large H3 style for each year/decade **** */
.class-year {
  font-size: 74px;  
  margin: 0.5em 0;
  padding: 0px !important;
  text-align: center;
  width: 100%;
  text-transform: none;
  font-weight: 400;
}
.class-year a {
	color: #000000;
}

.class-year a:hover {
  text-decoration: none;
}

.hide-me {
  visibility: hidden;
  height: 0px;
}

.show-me {
  visibility: visible;
}


/* *************************************** CAPTION STYLE *************************************** */
.box{
  overflow: hidden;
}
.hover-lightbox, .hover-url, .hover-text, .hover-iframe{
  position: relative;
}

.hover-lightbox, .hover-url, .hover-iframe{
  
  cursor: pointer;
  display: inline-block;
  margin-top: 1px;
  line-height: 14px;
  
  width: 27px;
  height: 27px;
  background: url(../../img/caption-icons.png);
  background-position: -1px -1px;

  margin: 0 6px;
}


.hover-url{
  background-position: -51px -2px;
}

.hover-iframe{
  background-position: -98px -2px; 
}

.hover-lightbox:hover, .hover-url:hover, .hover-iframe:hover{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  opacity: 0.8;
}

.box-image{
  position: relative;
  overflow: hidden;
}

.lightbox-text{
  display: none;
}

.thumbnail-caption{
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
}

/* The style for centering the caption (vertically and horizontally) */
.thumbnail-caption>div{
  height: 100%;
  width: 100%;
  display: table !important;
}

.thumbnail-caption>div>div{
  padding: 15px;
  display: table-cell !important;
    vertical-align: middle; /* FOR VERTICAL ALIGN */
    text-align:center; /* FOR HORIZONTAL ALIGN */
}

/* *************************************** LOADING STYLE *************************************** */
.mediaBoxes-loader, .mediaBoxes-loadMore{
   height: 15px;
   padding: 10px 15px 10px 15px;
   margin: 20px auto;
}

.mediaBoxes-loader{
  width: 43px;
  background: url(../../img/loader.gif) no-repeat;
  background-position:center;
}

.mediaBoxes-loadMore{
  cursor: pointer;
  width: 150px;
  text-align: center;
  color: white;
  background-color: #333333;
  font-size: 14px !important;
  -webkit-box-sizing: content-box !important;
     -moz-box-sizing: content-box !important;
          box-sizing: content-box !important;
}

.mediaBoxes-loadMore:hover{
  text-decoration: none;
  background-color: #494949;
}
/* *************************************** LIGHT-BOX STYLE *************************************** */
.lightbox-alignment{
  height: 100%;
  width: 100%;
  display: table !important;
  table-layout: fixed !important;
}

.lightbox-alignment2{
  display: table-cell !important;
  vertical-align: middle; /* FOR VERTICAL ALIGN */
  text-align:center; /* FOR HORIZONTAL ALIGN */
}

.mediaBoxes-lightbox img{
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.open-lightbox-iframe{
  cursor: pointer;
}

.lightbox-timer{
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 99;
}

.lb-loader{
  width: 43px;
  height: 11px;
  background: url(../img/lightbox-loader.gif);
  
  margin: 20px auto;
}

.mediaBoxes-lightbox{
  display: none;
  position: fixed;
  top:0;
  width: 100%;
  height: 100%;
  z-index: 999999;

  text-align: center;
}

.mediaBoxes-lightbox img{
  max-width: 100%;
  vertical-align: top;
  margin-top: 58px !important; 
}

.mediaBoxes-lightbox iframe{
  max-width:  100%;
  margin-top: 58px;
}

.mediaBoxes-lightbox iframe body img {
  border: 3px solid red;
}

.mediaBoxes-nav{
  margin-top: -57px;
  height: 57px;
  width: 100%;
  position: absolute;
  z-index: 1002;

  border-bottom: 1px solid #1D1D1D;
}

.mediaBoxes-play, .mediaBoxes-close, .mediaBoxes-next, .mediaBoxes-prev, .mediaBoxes-font{
  width: 88px;
  height: 57px;
  position: relative;
  cursor: pointer;
}

.mediaBoxes-play:hover, .mediaBoxes-close:hover, .mediaBoxes-next:hover, .mediaBoxes-prev:hover, .mediaBoxes-font:hover{
  background: #1B1B1B; 

}

.selected{
  background: black;
}

.selected .iconPlay{
  background-position: -164px -3px;
}

.mediaBoxes-lbcaption{
  /* float: left; */
  /* height: 57px; */
  position: fixed;
  bottom: 0px;
  background: rgba(1,1,1,0.65);
  width: 100%;
  font-size: 16px;
  color: white;
  padding: 10px 0px;
  line-height: 20px;
}

.mediaBoxes-lbcaption .hide-text {
  background: #ffcc00;
  padding: 5px;
  position: absolute;
  top: -30px;
  right: 0px;
  font-size: 10px;
  color: #000;
}

/* --- hides additional images in lightbox --- */
.mediaBoxes-lbcaption img {
  display: none !important;
}

.mediaBoxes-lbcaption p {
  padding: 0px !important;
  line-height: 2;
}

.mediaBoxes-lbcaption span:first-child {
  color: #D7D7D7;
  font-size: 11px;
  position: fixed;
  top: 20px;
  left: 20px;
}

.mediaBoxes-lbcaption>div{
  height: 100%;
  width: 100%;
  display: table !important;
}

.mediaBoxes-lbcaption>div>div{
  padding: 0 15px 0 15px;
  display: table-cell !important;
    vertical-align: middle; /* FOR VERTICAL ALIGN */
    text-align:center; /* FOR HORIZONTAL ALIGN */
}

.mediaBoxes-play, .mediaBoxes-close{
  float: right;
}

.mediaBoxes-next, .mediaBoxes-prev{
  float: right;
}

.iconPlay, .iconClose, .iconNext, .iconPrev, .iconFont{
  position: absolute;

  top: 50%;
  left: 50%;

  height: 25px;
  display: block;
} 

.iconClose{
  width: 25px;
  margin: -13px 0 0 -13px;

  background: url(../../img/lightbox-icons.png);
  background-position: -2px -3px;
}

.iconPlay{
  width: 17px;
  margin: -13px 0 0 -8px;
  background: url(../../img/lightbox-icons.png);

  background-position: -137px -3px;

  -webkit-transition:all .3s;
     -moz-transition:all .3s;
       -o-transition:all .3s;
      -ms-transition:all .3s;
          transition:all .3s;
}

.iconFont{
  width: 46px;
  margin: -13px 0 0 -23px;

  background: url(../../img/lightbox-icons.png);
  background-position: -85px -3px;
}

.iconNext, .iconPrev{
  width: 15px;
  margin: -13px 0 0 -8px;
  background: url(../../img/lightbox-icons.png);
}

  .iconPrev{
    background-position: -40px -3px;
  }

  .iconNext{
    background-position: -70px -3px;
  }


/* *************************************** GRID STYLE *************************************** */

.grid {
	padding-bottom: 0px;
}

.centered { 
    margin: auto; 
}

.box {
  line-height: 20px;
  float: left;
  -webkit-border-radius: 0px;
     -moz-border-radius: 0px;
          border-radius: 0px;
}

.box img{
  display: block;
  width: 100%;
}

.rtl .box {
  float: right;
  text-align: right; 
  direction: rtl;
}

/**** Transitions ****/

.transitions-enabled.masonry,
.transitions-enabled.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
      -ms-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.transitions-enabled.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.transitions-enabled.masonry  .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}


/* disable transitions on container */
.transitions-enabled.infinite-scroll.masonry {
  -webkit-transition-property: none;
     -moz-transition-property: none;
      -ms-transition-property: none;
       -o-transition-property: none;
          transition-property: none;
}

/**** Clearfix ****/
.mediaBoxes-clearfix:before, .mediaBoxes-clearfix:after { content: ""; display: table; }
.mediaBoxes-clearfix:after { clear: both; }
.mediaBoxes-clearfix { zoom: 1; }


.centered{
  /*overflow: auto;*/
  width: 100%;
}

.visible{
  overflow: visible !important;
}

.noTransform{
  -webkit-transform: none !important;
     -moz-transform: none !important;
       -o-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
}

/* --- Image when the link is clicked --- */
.class-notes-page {
	max-width: 50%;
	max-height: 50%;
	border-radius: 12px;
	padding: 5px;
	border: 1px solid #333;
	background: #000;
}

/* --- Single Class Notes Page --- */

/* remove author name and post date */
.single-class_note .grve-title-meta {
	display: none !important;
}

/* make image be centered and max width of 500px */
.single-class_note .class_note .grve-media {
	text-align: center;
}
.single-class_note .class_note .grve-media img {
	max-width: 500px;
}

/*** responsive styles ***
*************************/

@media screen and (min-width: 320px) and (max-width: 720px) {
	/* remove class notes categories on mobile */
	#class-note-grids {
		padding-top: 6em;
	}
	#main-category-navbar-wrapper {
		display: none;
	}
}