/* local.css */

@media all and (max-width: 540px) {
	header .menu--top-menu ul.menu{
	display: flex;
	flex-direction: column;
}
    .site-logo{
		height: auto;
        padding-bottom: 10px;
        border-right: none;
        margin-bottom: 0;
    }
    .site-name{
        border-top: 2px solid black;
        padding-top: 12px;
    }
    #header .block-system-branding-block{
        width:100%;
        padding: 20px 5px;
        text-align: center;
    }

        
}



@media (min-width: 540px) {
    .site-logo{
		  height: auto;
      float: left;
      padding-right: 8px;
      border-right: 1px solid #000;
      margin-right: 8px;
    }
    #header .block-system-branding-block{
       width:720px;
       padding: 20px 5px;
       float: left;
       overflow: auto;
    }

}


@media (max-width: 991px) {
  #main-menu{
  *	background: #eee;
  }  
  #main-menu .navbar-collapse.in .container{
  	background: #ddd;
  	border-radius: 0;
  }

  #main-menu .navbar-collapse .container ul.menu li a,
  #main-menu .navbar-collapse .container ul.menu li ul.menu li a,
  #main-menu .navbar-collapse .container ul.menu li ul.menu li ul.menu li a{
  	padding: 7px 12px;
  }
  
  #main-menu .navbar-collapse .container ul.menu li a:hover,
	#main-menu .navbar-collapse .container ul.menu li a:focus,
  #main-menu .navbar-collapse .container ul.menu li ul.menu li a:hover, 
  #main-menu .navbar-collapse .container ul.menu li ul.menu li a:focus {
    background: #293352;
  }
  
  #main-menu .navbar-collapse .container ul.menu li{
  	border-bottom: 2px solid #fff;
  }

}


body{
	background: #fff;
  font-size: 15px;
  color: #000;
        
}

a,
a:link,
a:visited{
  /*  color: #CE2525; */ /* crimson */
  color: #215990;
  outline: medium none;
  text-decoration: none;
}


.h1, h1, .h2, h2, .h3, h3{
	   font-family: "Lato" ,sans-serif;
}

#header{
 margin-bottom: 25px;
}

#header .container {
	width: 100%;
  padding-bottom: 5px;
  padding-top: 0;
}



.site-logo{
    max-width: none;
}
.site-logo img{
  width: 248px;
  max-width: none;
  padding: 0 10px;
}

.site-name{
  font-size: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-top: 9px;
}
.site-name a{
  color:#333333;
}

.box_shadow,
#main-menu .container,
#slideshow .container,
#featured .container,
#main .container,
#panel_first .container,
#panel_second .container{
    box-shadow:none;
    
}

#header .search-block-form{
  border: 1px solid #ccc;
  border-radius: 0;
  height: inherit;
  margin-top: 30px;
  margin-right: 18px;
}

.form-search span{
	display: none;
}

/*** breadcrumb ***/
.breadcrumb{
  padding: 0;
  margin-bottom: 20px;
  background: transparent;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.1em;
}
#breadcrumb .breadcrumb{
    padding: 0;
    margin: 0;
}

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

/***** mobile menu ***/
.navbar-toggle{
    background: #900;
}
.navbar-toggle .icon-bar{
    background: #eee;
}
.navbar-toggle:hover, 
.navbar-toggle:focus{
    background: #333330;

}

#main-menu .navbar-collapse .container{
    background: none;
}

 #main-menu .navbar-collapse .container ul.menu li ul.menu li a,
* #main-menu .navbar-collapse .container ul.menu .menu-item--expanded > a::before,
#main-menu .navbar-collapse .container ul.menu li a{
    color: #293352;
}

#main-menu .navbar-collapse .container ul.menu li.menu-item--active-trail a,
#main-menu .navbar-collapse .container ul.menu li ul.menu li.menu-item--active-trail a,
#main-menu .navbar-collapse .container ul.menu li ul.menu li ul.menu li.menu-item--active-trail a{
*  color: #fff;
*  background: #293352;
*  padding-left: 10px;
  color: #293352;
}


#main-menu .container ul.menu li.menu-item--expanded.menu-item--active-trail > a::before {
*	color: #fff;
	
}

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

/***** top menu *******/

header .menu--top-menu{
	overflow: auto;
  background: #A51C30;
  padding: 9px;
}

header .menu--top-menu ul.menu{
	display: flex;
	justify-content: flex-end;
	text-transform: uppercase;
	margin-bottom: 3px;
}
header .menu--top-menu ul.menu li{
	display: block;
	font-size: 13px;
}
header .menu--top-menu ul.menu li a{
	color: white;
	padding: 0.3em 15px 0.3em 15px;
}

header .menu--top-menu ul.menu li a:hover{
	background: #293352;
}


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

/******** menu ****/

#main-menu{
  border-bottom: 1px solid #ccc;
  box-shadow: 0.5px 5px 3px #f4f4f4;
  margin-bottom: 25px;
}

#main-menu .container{
*	width: 99%;
}
#main-menu .container ul.menu li:first-child > a{
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}


#main-menu .container ul.menu li > a{
	font-family: Montserrat,sans-serif;
	font-size: 1em;
	letter-spacing: 1px;
	border-top: 4px solid transparent;
}


#main-menu .container ul.menu li {
    border-left: none;
}

* #main-menu .container ul.menu li.menu-item--active-trail > a,
.not-front #main-menu .container ul.menu li:first-child .is-active,
#main-menu .container ul.menu li .is-active{
*	color: #fff;
*  background: #293352;
  color: inherit;
	background: #EEE;
  border-top: 4px solid #a51c30
}

#main-menu .container ul.menu li:hover > a,
#main-menu .container ul.menu ul.menu li:hover > a,
#main-menu .container ul.menu li a.is-active:hover,
.not-front #main-menu .container ul.menu li:first-child .is-active{
	color: #ffffff !important;
  background: #293352 !important;
  border-top: 4px solid #a51c30;
}

#main-menu .container ul.menu ul.menu li a{
    color: #293352;
}
#main-menu .container ul.menu ul.menu{
    background: #fff;
    border: 1px solid #aaa;

}


#main-menu nav.menu--main{
    background: transparent;
}



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



#main .container{
		border-radius: 0;
}


/**** slideshow ***/

#block-views-block-slideshow-block-1{
      *  margin:-15px -15px 7px;
}

#slideshow_container{
     *   height: 650px !important; /* overwrites height that is applied directly to element by js G.S. */
     /* removed above code since it doesn't work on mobile. instead I added this change to templates/views/views-view-unformatted--slideshow.html.twig */
}
#slideshow .container{
        border-radius: 0;
}
#slideshow .flex-caption{
        display: none;
}

#slideshow{
        margin-bottom: 0;
}
/********/



/*** blocks ***/

#block-views-block-jobs-block-1 h2:first-of-type{
    font-size: 2.571em;
}

#block-views-block-jobs-block-1 article.node h2{
    font-size: 1.57em;
    margin: 0;
}

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

/*** sidebar ***/

.sidebar .block{
	border-radius: 0;
	border-top: 2px solid #a51c30;
	border-left: none;
	border-bottom: none;
	border-right: none;
	overflow-wrap: break-word;
}

.sidebar .block > h2{
  font-size: 1em;
	background: #f4f4f4;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	color: #a51c30;
}


.sidebar .views-row h2{
        text-transform: none;
        background: none;
        padding: 5px 15px;
        margin: -15px -15px 0;
}

.sidebar .field--name-field-date{
        font-weight: bold;
}

.sidebar-second .block{
*	padding: 0;
	border: none;
}

.sidebar-second .block > h2{
	background: transparent;
	color: #222;
	margin-bottom: 0;
}

.sidebar-second .field--name-body{
	background-color: #f4f4f4;
	padding: 10px 20px 20px 20px;
}
/****************/


h1.page-title{
	   font-family: "Lato", Montserrat, sans-serif;
}

table.views-table{
		width: 100%;
}

table.views-table thead{
	border-bottom: 2px solid;
}

table.views-table th,
table.views-table td{
	padding: 5px;
}

table.views-table td{
	border-bottom: 1px solid #bbb;
}

/*** People node START ***/

.page-node-type-lab-member h1.page-title{
    margin: 0;
}
.node.node--view-mode-full .field--name-field-image{
    float: left;
    margin-right: 20px;
    width: 100px;
    height:200px;
}

.page-node-type-lab-member .field--name-lab-member-positions{
    margin-bottom: 20px;
}

.page-node-type-lab-member .field--name-field-address,
.page-node-type-lab-member .field--name-field-phone,
.page-node-type-lab-member .field--name-field-fax,
.page-node-type-lab-member .field--name-body{
    overflow: hidden;
}
/*** People node ENDS ***/

/*** people view display ***/

/*

.views-field-field-photo{
        float: left;
        margin-right: 30px;
}
body.path-people .views-field-title h2{
        margin-bottom:3px;
}



body.path-people .views-field-body{
        margin-top: 15px;
        
}

table.views-table{
		width: 100%;
		border: white;
}
table.views-table caption{
    border-bottom: 1px dotted #bbb;
    color: #444;
    font-size: 1.3em;
    line-height: 2em;
    text-align: left;
}
table.views-table tr th{
		color: white;
		font-weight: normal;
		background: #777;
		border: 1px solid white;
		padding: 8px;
}

table.views-table tr th a{
        color: white;
        text-decoration: underline;
}

table.views-table tr td{
		padding:8px;
		vertical-align: top;
		background: #ddd;
		border: 1px solid white;
		
}


.people-view-name{
		font-weight: bold;
}

td.views-field-field-image{
    width: 150px;
    min-width: 150px;
}

.views-field-field-image img,
img.image-style-people-photo{
    border: 2px solid #999;
    padding: 2px;
}
*/

/*** people alumni view display ENDS ***/

/*** photo album node ***/

/*
.field--name-field-photos .field__item{
    border: 2px solid #ce2525;
    float: left;
    margin: 10px;
    padding: 1px;
}
*/
/*** photo albumn node ENDS ***/

p#news {
    font-size: 14px;
    font-weight: bold;
    margin: 5px 0;
    text-transform: uppercase;
}
/*** news node and view ***/
.field--name-field-news-image{
    float:left;
    margin-right: 20px;
}
/*** news node and view ENDS ***/


/*** view ***/

#main .container .content .views-row{
    border-top: none;
    margin-bottom: 10px;
    padding-top: 0;
}

.attachment-after h1{
    border-bottom: 1px solid #bbb;
    font-size: 2.571em;
    margin-top: 25px;
}

/**** publicatins ***/
/*
body.path-publications #main .container .content .views-row{
    margin-bottom: 8px;

}
body.path-publications #main .container .content .views-row .views-field-body p{
    margin-bottom: 0;
}
*/
/*** publications END ***/


/*** panel_first ***/

section#panel_first{
	    background: #333330;
					margin-bottom: 0;
}

section#panel_first a{
    color: #bbb;   
}

section#panel_first a:hover{
    color: #eee;   
}

#panel_first .container {
    background: none;
}

/************************/
 
 
/*** footer START ***/

#footer{
	   background: #1e1e1e;
				padding: 10px;
}
#footer .block{

}
/*** footer END ***/

/*** copyright ***/
#footer #block-copyright{
    text-align: center;
}
/*** copyright ENDS ***/

/*** button ***/

a.btn-btt{
    color: #AAA;
}

/*** button ENDS ***/

/*** limited the width of sequence2 field used in Common Primer content type ***/
.field--name-field-sequence2,
.views-field-field-sequence2{
   word-wrap: break-word;
   max-width: 23em;
}

/**** FAQ ***/

body.page-node-type-faq #main .container img,
body.path-faq-page #main .container img{
    border: 1px solid #aaa;
    box-shadow: 0 0 2px 1px #ddd;
    padding: 5px;
    margin: 8px 0 8px 0;
	
}


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


/****** Paragraph based components ********/
.paragraph--type--documents,
.paragraph--type--text-formatted,
.paragraph--type--image-left,
.paragraph--type--image-album{
	margin-bottom: 30px;
}
.paragraph--type--heading h2{
	margin: 0 0 8px;
}


.field--name-field-table table th,
.field--name-field-table table td{
	border: 1px solid #999;
	
}
.field--name-field-table table th,
.field--name-field-table table td{
	padding: 8px;
	border-bottom: 2px solid #555;
}
.field--name-field-table table thead tr{
	border-top: 4px solid #555;
	border-bottom: 4px solid #555;
}
/******************************************/

/******* Block Updated *****************/
.block-updated{
	color: #999;
  font-size: 90%;
  font-style: italic;
}
/*************************************/

/******* Block downtime ***************/

#block-zircon-websitedowntime{
	padding: 20px 30px;
	color: white;
	background: #222;
}
#block-zircon-websitedowntime a{
	color: #fb4141;
}
/***************************************/

/*********** OpenID Connect block **********/
.block-openid-connect-login{
	padding: 1em 1em 2em 1em;
	text-align: center;
}
.block-openid-connect-login input.button{
	color: #fff;
  background: #900;
  padding: 8px 15px 12px 15px;
  font-weight: bold;
}

.block-openid-connect-login input.button:hover{
	background: #222;
}

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