@media only screen and (max-width: 540px){
	.lab-member-view-column{
		min-height: 220px;
	}
}


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

    .brand.logo {
    margin-bottom: 18px;
}
}


@media only screen and (min-width: 767px){
	.top-nav {
  text-align: center;
  }

  .brand.logo {
        padding-right: 20px;
        border-right: 2px solid black;  
        margin-right: 20px;
  }

  .header .navbar-header.col-md-3 {
    flex: none;
    max-width: none;
  }
  .header .col-md-9 {
  	flex: none;
    margin: auto;
    width: 1140px;
  }
  
   .region-primary-menu ul ul {
    background: #2a334d; /* dark blue */
  }

 
}



@media only screen and (max-width: 767px){
    .brand.logo {
        padding-bottom: 10px;
        margin-bottom: 10px;
        padding-right: 20px;

    }

    header.main-header{
        text-align: center;
        width: 100%;
    }
    .site-branding__name{
      *    border-top: 2px solid black;   
      }
    .site-branding__name a{
      	font-size: 42px;
         height:auto;
         line-height: normal;
     }
    .region-sidebar-first{
        padding: 0 30px;
    }
    .region-header .brand{
        line-height: normal;
    }
    .top-email,
    .region-email{
    	width: 100%;
    }


}

@media (min-width: 48rem) {
  .calendar-view-day__row.is-multi {
    --calendar-view-day-multi-offset: calc(-1rem - 8px);
  }
}



@media only screen and (min-width: 540px) {
  .site-name a {
    font-size: 42px;

  }
  
  
  .view-team .views-field-field-photo{
      float: left;
      margin-right: 20px;
      margin-bottom: 11px;
  }
  
  .views-view-grid .lab-member-view-column {
  	float: left;
    width: 183px;
    min-height: 320px;
    text-align: center;
    margin: 1px;
    padding: 15px 10px;
    background: #eee;
  }
  
}

@media (min-width: 1200px) {
  .region-email {
    width: 1140px;
  }
}
/***************************************/

body{
	color: black;
	background: none;
	line-height: 140%;
}

a {
	color: #2d4895;
}
a:hover{
*	color: #5975c4;
	color: #900;
}

img {
  height: auto;
}

blockquote{
	padding: 5px 15px;
	margin: 0 1rem;
  border-left: 5px solid #ddd;
}

.fa-envelope::before {
  content: none;
}
.top-nav{
	background: none;
	padding: 25px;
}

.brand.logo{
	width: 250px;
	float: left;
}
.site-branding__name{
    float: left;
    padding-top: 8px;
    text-align: left;
}

.site-branding__slogan{
	display: block;
    font-size: 18px;
    letter-spacing: 1px;
    color: #222;
    text-align: left;
}

#search-block-form input.form-submit {
  background: url("/themes/contrib/coffee_zymphonies_theme/images/search.png") no-repeat center #2d4895;
  border-radius: 0;
}
#search-block-form input.form-submit:hover {
  background-color: #5975c4;
  border-color: #475c99;
}

.top-nav .search-block-form{
	float: right;
	margin-top: 12px;
}
input.form-search{
	border: 1px solid #BBB;
}

.main-content{
	padding:0;
}
.block-views{
	margin-top: 55px;
}



/**** topmessage, topwidget *********/
.top-message{
	padding: 0;
	background: #202020;
}
.top-message .block{
	margin-bottom: 0;
}
/*
.top-message .container{
	max-width: 100%;
	padding: 0;
}
*/
.topwidget {
  text-align: left;
}
.topwidget .topwidget-list .region .block {
  background: #eee;
  border: 1px solid #ddd;
}
.topwidget .topwidget-list .region .block:hover {
  background: #e0e5fd;
}

/**********************/


/**** sidebar ***********/


.sidebar .block {
  padding: 12px;
  background: #eee;
  border-top: 5px solid #2d4895;
}

/************************/

/***** node view ********/

.field__label {
  font-weight: bold;
}
.field__label::after {
  content: ":";
}


.field--label-inline .field__label, 
.field--label-inline .field__items {
  float: left;
}
.field--name-field-event-location{
	clear: both;
}
.field--label-inline .field__label, 
.field--label-inline > .field__item, 
.field--label-inline .field__items {
  padding-right: 0.5em;
}


body.page-node-type-lab-member fieldset legend,
summary, 
.block-views h2 {
  padding: 0.9em 1.2em;
  cursor: pointer;
  background: #555;
  font-size: 16px;
  color: white;
}
details {
	margin-top: 30px;
  border: 1px solid #888;
}
details > .details-wrapper {
  padding: 1.0em 1.5em;
}


body.page-node-type-lab-member .field--name-field-photo{
	width: 120px;
  height: 150px;
}

body.page-node-type-lab-member .field--name-field-photo img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.page-node-type-lab-member .field--name-field-photo a img{
	border: 2px solid;
}


/************************/

tbody tr:hover, tbody tr:focus {
  background: #f7f7f7;
}

/******** lab member view **************/

.lab-member-view-column{
	text-align: center;
}

.lab-member-view-column .views-field-field-photo .field-content{
	width: 120px;
  height: 150px;
  margin: 0 auto;
}

.lab-member-view-column .views-field-field-photo .field-content img{
	border: 1px solid;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/****************************************/

/******** Calendar View ****************/

ul.calendar-view-pager{
	background: #EEE;
	padding: 0 15px;
}

table.calendar-view-table caption {
  font-size: 130%;
  background: #eee;
}

.calendar-view-table tr,
.calendar-view-table td{
	padding: 0;
}

.calendar-view-pager .pager__item,
.calendar-view-table .calendar-view-day__row,
.view-events-calendar ul li{
	list-style: none;
}

.view-events-calendar tr {
  border-bottom: none;
  padding: 0;
}
.block-views-blockevents-calendar-block-1 td.views-field-field-date-3{
	width: 90px;
	vertical-align: top;
}
.event-year-month-day{
	text-align: center;
	text-transform: uppercase;
	border-top: 5px solid #aaa;

}
.event-year-month-day .event-day{
	font-size: 18px;
}
.upcoming-event-title{
	font-size: 18px;
}



/*************************************/


/***** pager (until it is fixed in the theme) ******/
.pager {
  text-align: center; }
  .pager .pager__items {
    padding: 0;
    margin: 0; }
    .pager .pager__items .pager__item {
      display: inline-block; }
      .pager .pager__items .pager__item a {
        padding: 4px 10px;
        background: #2d4895;
        color: #fff;
        font-size: 1.2em; }
      .pager .pager__items .pager__item a:hover, .pager .pager__items .pager__item.is-active {
        color: #fff;
        background: #900; }
/*********************************/

/******* mobile menu **********/

.navbar-toggle .fas {
  color: #fff;
}

/*******************************/


/*** hide HarvardKey login link from authenticated users 
& hide the Drupal login link from anonymous users 
It works only if "HarvardKey Login" is the first and the Drupal "Log in" is the second in the "User Account Menu" **********/



body.user-logged-in #block-coffee-zymphonies-theme-account-menu ul li:first-child{
	display: none;
}
body:not(.user-logged-in) #block-coffee-zymphonies-theme-account-menu ul li:nth-child(2){
	display: none;
	
}
/***************************************************************************************/

/***** equipment ********/
tr.equipment-row td{
	vertical-align: top;
}
.views-field-field-photo a img{
	border: 1px solid;
}
/*************************/


/***** paragraphs *********/
.paragraph--type--restricted-photos{
	overflow: auto;
}

.paragraph--type--restricted-photos .field--name-field-photos-restricted .field__item{
	float: left;
	margin: 0 10px 20px 0;
}

.paragraph--type--restricted-photos .field--name-field-photos-restricted .field__item a img{
	border: 1px solid;
}
/************************/

/***** webform *********/
.form-email, 
.form-text, 
.form-textarea {
  border: 1px solid #aaa;
  border-radius: .25rem;
  display: block;
}
label{
	font-weight: bold;
}

.form-required::after{
	display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0.3em;
  content: "";
  vertical-align: super;
  background-image: url(/core/misc/icons/ee0000/required.svg);
  background-repeat: no-repeat;
  background-size: 6px 6px;
}


.webform-progress ul li{
	list-style: none;
}

/*************************/

/*** CKEditor Accordion *****/
.ckeditor-accordion-container > dl {
	border: none;
}
.ckeditor-accordion-container > dl dt > a, 
.ckeditor-accordion-container > dl dt > a:not(.button) {
	background-color: #2d4895;
	border-bottom: 2px solid #fff;
}
.ckeditor-accordion-container > dl dt > a:hover, 
.ckeditor-accordion-container > dl dt > a:not(.button):hover {
	background-color: #5975c4;
}

.ckeditor-accordion-container > dl dt > a, 
.ckeditor-accordion-container > dl dt > a:not(.button) {
	
}

/*****************************/

/****** button ****************/

.btn{
	background: #2d4895;
}
.btn:hover{
	background: #900;
}
/*******************************/

/*** bottom widget ************/

.bottom-widget{
	background: #eee;
}

.bottom-widget ul.menu li{
	list-style: none;
}

/*****************************/


/******** OpenID Connect login button *********/

#bottom-widget .block-openid-connect-login{
	margin: 0;
}
#bottom-widget form#openid-connect-login-form{
	text-align: right;
}
#bottom-widget input#edit-openid-connect-client-harvardkey-login{
	color: #2d4895;
	font-weight: normal;
	border: none;
	background: none;
	padding: 0;
	line-height: normal;
}

#bottom-widget input#edit-openid-connect-client-harvardkey-login:hover{
	color: #900;
}
/********************************************/


/****** copyright *******/

.copyright{
	background: #ddd;
}

/*******************************/