/**
 * If using a CSS pre-processor, tell it to overwrite this file. If not, place
 * your custom CSS modifications here.
 */

/*Global Styles*/
body {
    color: #54585A;
    font: 1rem 'Milo', sans-serif;
    line-height: 1.3125em;
    line-height: calc(1.5em - 3px);
}

.main-container.container.js-quickedit-main-content {
    margin-bottom: 100px;
}

.region-content {
    padding-top: 30px;
    padding-bottom: 30px;
}

.node--type-news .field {
    margin-bottom: 20px;
}

.field--name-field-project-title {
    font-size: 4em;
    line-height: 1em;
	margin-bottom:15px;
}

hr {
    border-top: 1px solid #54585A;
}

.footer{
	padding-bottom: 0;
	border-top: none;
}

a#become-a-member {
    color: #54585A;
}

a#become-a-member:hover {
    color: #000;
}

/*==================================================
 * Fonts
 * ===============================================*/
h1 {
    font: 4.5rem 'League Gothic', sans-serif; /* 72px */
    line-height: 1;
    /*margin: 1.125rem 0;*/
    margin: 0 0 1.125rem 0;
    text-transform: uppercase;
}

@media only screen and (max-width: 600px) {
    h1 {
        font: 4rem 'League Gothic', sans-serif;
    }
}

h2 {
    font: 3.375rem 'League Gothic', sans-serif; /* 54px */
    line-height: 1;
    margin: 1.125rem 0;
    text-transform: capitalize;
    margin-top: 10px;
    margin-bottom: 0;
	color: #54585A;
}

h3 {
    font: 2.25rem 'League Gothic', sans-serif; /* 36px */
    line-height: 1.08333333333333em;
    line-height: calc(1em + 3px);
    margin: 1.125rem 0;
    text-transform: none;
}

h4 {
    font: 1.625rem 'League Gothic', sans-serif; /* 24px */
    line-height: 1.625em;
    line-height: calc(1em + 3px);
    margin: 1.125rem 0 0;
}

h5 {
    font: bold 1.25rem 'Milo', sans-serif; /* 20px */
    line-height: 1.35em;
    line-height: calc(1.5em - 3px);
    margin: 1.125rem 0 0;
}

p, ul, ol, dl {
    font: 1.25rem 'Milo', sans-serif; /* 20px */
    line-height: 1.35em;
    line-height: calc(1.5em);
    margin: 1.125rem 0;
}

a {
    color: #00b388;
    text-decoration: none;
}

a:hover {
    color: #00b388;
    text-decoration: none;
}

.views-field.views-field-field-news-thumbnail {
    margin-bottom: 8px;
}


/*Aside*/
aside {
    margin-left: 15px;
    margin-right: 15px;
}

/*Full width containers*/
.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/*Hero*/
#hurri-hero {
    position: relative;
    display: flex;
    align-items: center;
    text-align: center;
    height: 600px;
    /*margin-top: -20px;*/
    /*transition: all .5s;*/
}

.section-wrapper {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 3.375rem 0;
    overflow: hidden;
}

#hurri-hero .watermark-hurri {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(https://hurri.uh.edu/sites/default/files/2019-06/hurricane-white.svg);
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: center calc(50% - 25px);
    opacity: .3;
    mix-blend-mode: overlay;
    transition: all .5s;
    min-height: 600px;
}

#hurri-hero .wordmark-hurri {
     position: absolute;
     margin: auto;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     width: 325px;
     transition: all .5s;
 }

@media only screen and (max-width: 600px) {
    #hurri-hero .wordmark-hurri {
        width: 225px;
        bottom: 30px;
    }
}

#hurri-hero:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0px;
    width: 100%;
    height: 100%;
    background: url(https://hurri.uh.edu/sites/default/files/2019-06/wedge-point-green.svg) no-repeat center 100px;
    background-size: cover;
}

/*About HuRRI*/
#hurri-about .bracket{
    max-width: 900px;
}

.vision-statement {
    margin-bottom: 50px;
}

#hurri-about strong {
    font-weight: bold;
}

.bracket {
    position: relative;
    padding: 30px 30px 30px 30px;
    margin: 0 auto 30px auto;
    clear: both;
    display: table;
    line-height: 1.5em;
}

.bracket:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    width: 40px;
    border-top: solid 1px rgba(182, 183, 183, 1);
    border-left: solid 1px rgba(182, 183, 183, 1);
    border-bottom: solid 1px rgba(182, 183, 183, 1);
}

.bracket:after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    border-top: solid 1px rgba(182, 183, 183, 1);
    border-right: solid 1px rgba(182, 183, 183, 1);
    border-bottom: solid 1px rgba(182, 183, 183, 1);
}

#hurri-about p {
    padding-bottom: 30px;
    font-family: "Milo", "sans-serif";
    font-size: 1.2em;
    font-weight: 100;
}

#hurri-about {
    padding-bottom: 0;
    margin-bottom: -60px;
}

/*HuRRI logo*/
#hurri-about .container{
    padding: 0 1.25rem;
}

#hurri-about .logo-items {
    display: flex;
    flex-wrap: wrap;
    margin: 30px auto;
    align-items: center;
    text-align: center;
    justify-content: center;
    max-width: 900px;
}

#hurri-about .logo-item {
    width: 33%;
    padding: 30px;
}

@media only screen and (max-width: 600px) {
    #hurri-about .logo-item {
        width: 50%;
        padding: 20px;
    }
}

#hurri-about .logo-item img{
    max-width: 100%;
}

/*Footer*/
.top_footer {
	margin-top: -100px;
    margin-bottom: 100px;
}

#footer-wrapper {
    position: relative;
    height: 300px;
    background-position: center center;
}

#footer-wrapper:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0px;
    width: 100%;
    height: 100%;
    background: url(https://hurri.uh.edu/sites/default/files/2019-06/wedge-pointer-white.svg);
    background-size: 1920px 260px;
    background-position: center -1px;
    background-repeat: no-repeat;
    opacity: 1;
}

#footer-wrapper:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: -55px;
    width: 100%;
    height: 100px;
    border-top: solid 1px white;
    box-shadow: 0px -40px 0px rgba(0, 134, 108, .7);
    background: linear-gradient(to right, #b6b7b7 0%, #b6b7b7 16%, #ffffff 16%, #ffffff 16.4%, #00866c 16.4%, #00866c 100%);
}



/*Reduce breadcrumb font size and unset background color*/
.breadcrumb {
    font-size: 1em;
    background-color: unset;
    margin-top: 20px;
    margin-bottom: 0;
    padding-bottom: 0;
}



/*Related Links*/
#related-links {
    margin-bottom: 50px;
}

#related-links a{
	color: #00866C;
    text-decoration: none;
}
#related-links a:hover{
    color: #00b388;
    text-decoration: none;
}


/*Research Page*/
.images-wrapper img {
    max-width: 250px;
    padding: 20px;
}

#hurri-map img {
    float: right;
    padding: 20px;
    max-width: 350px;
}

/*Site Nav*/
.uh-header-secondary .site-name {
    padding-top: .35em;
    padding-bottom: .35em;
}

/*News and Project Full Content*/
.news .content, .projects .content{
  max-width: 800px;
}
.news .content .field--name-field-news-teaser, .projects .content .field--name-field-projects-teaser{
  margin-bottom: 30px;
 }

.news .content .field--name-field-news-thumbnail, .projects .content .field--name-field-project-thumbnail{
  margin-bottom: 15px;
}

.news .content .field--name-field-news-full-text, .projects .content .field--name-field-project-full-text{
  margin-bottom: 30px;
}

.news .content .field--name-field-news-read-more, .projects .content .field--name-field-project-read-more{
  margin-bottom: 30px;
}

.news .content .field--name-field-news-read-more , .projects .content .field--name-field-project-read-more a{    
	color: #00866C;
    text-decoration: none;
}

.news .content .field--name-field-news-read-more a:hover, .projects .content .field--name-field-project-read-more a:hover{
    color: #00b388;
    text-decoration: none;
}
.region.region-header .page-header {

    margin-top: 50px;

}

/*Projects*/
.view-id-projects{
    margin-bottom: 50px;
}

@media only screen and (max-width: 960px) {
    .view-id-projects{
        margin-bottom: 0;
    }
}

.projects {
    margin-bottom: 50px;
}

@media only screen and (max-width: 760px) {
    .projects {
        margin-bottom: 0;
    }
}

.project-item {
    padding-top: 30px;
    padding-bottom: 30px;
}
.views-field.views-field-field-project-thumbnail {
    float: left;
    padding-right: 20px;

}

.project-item .views-field-title a{
    color: rgba(84, 88, 90, 1);
    text-decoration: none;
}

.project-item .views-field-title a:hover{
    color: rgba(0, 134, 108, 1);
    text-decoration: none;
}

@media only screen and (max-width: 960px) {
    .views-field.views-field-field-project-thumbnail {
        float: none;
    }
}

/*News*/
.view-id-news{
    margin-bottom: 50px;
}

@media only screen and (max-width: 960px) {
    .view-id-news{
        margin-bottom: 0;
    }
}

.news-item {
    padding-top: 30px;
    padding-bottom: 30px;
}
.views-field.views-field-field-news-thumbnail {
    float: left;
    padding-right: 20px;

}

.news-item .views-field-title a{
    color: rgba(84, 88, 90, 1);
    text-decoration: none;
}

.news-item .views-field-title a:hover{
    color: rgba(0, 134, 108, 1);
    text-decoration: none;
}

@media only screen and (max-width: 960px) {
    .views-field.views-field-field-news-thumbnail {
        float: none;
    }
}

/*Content management menu*/
#block-contentmanagement{
    margin-bottom: 50px;
}

#block-contentmanagement h2 {
    border-bottom: 1px dotted #CBCBCB;
    border-bottom: 1px dotted rgba(0,0,0,.2);
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.125em;
    line-height: 21px;
    margin: 0 0 12px;
    padding: 0 0 12px;
    text-transform: uppercase;
}

#block-contentmanagement ul, #block-contentmanagement li  {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}

#block-contentmanagement a {
    color: #00b388;
    text-decoration: none;
    padding: 5px 8px;
}

/*==================================================
 * Newsroom
 * ===============================================*/
/* Newsroom landding page */
.view .item-list ul {
    list-style-type: none;
    padding-left: 0;
}

.newsroom h1 {
    margin-bottom: 0;
}

.newsroom h3 {
    font-size: 1.75rem;
	color: #00b388;
}

.newsroom h3 a {
    font-size: 1.75rem;
	color: #00866C;
}

.newsroom h3 a:hover {
	color: #00b388;
}

.newsroom .view-header {
    line-height: .5;
    /*margin-bottom: 30px;*/
}

.newsroom .item {
    max-width: 450px;
	min-height: 450px;
	margin-bottom: 30px;
}

.views-field-field-news-source-name a:before {
    content: 'Source: ';
    width: 30px;
    height: 20px;
    color: #000;
}

@media screen and (max-width: 1200px) {
    .newsroom .item {
        min-height: 450px;
    }
}

.newsroom .view-header a {
    padding-left: 6px;
    text-decoration: none;
}

.newsroom .view-header a:hover {
    text-decoration: none;
}

.views-field-field-news-source-name {
    margin-top: 20px;
}

/* ==========================================================================
   Events Page
   ========================================================================== */
/**LiveWhale**/
/*Grid Date Background*/
.field--name-field-livewhale-feed-block {
    margin-right: auto;
    margin-left: auto;
    max-width: 1600px;
    padding: 50px 35px;
    width: 100%;
}

.paragraph--type--livewhale-feed-block {
    background: #fff;
}

.grid-date-wrapper {
    color: #fff9d9;
    font: .875rem 'Milo', sans-serif;
    line-height: 1;
    margin-left: -1rem;
    margin-top: 1rem;
    position: absolute;
    text-align: center;
    -webkit-transition: color .25s ease;
    -o-transition: color .25s ease;
    transition: color .25s ease;
    z-index: auto;
}

.grid-anchor:hover .grid-date-wrapper {
    color: white;
}

.grid-date-wrapper:before {
    background: #961a24;
    bottom: -.5rem;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    width: 1rem;
    -webkit-transform: skewY(45deg);
    -ms-transform: skewY(45deg);
    transform: skewY(45deg);
}

.grid-date {
    background: #c8102e;
    min-width: 4.5em;
    padding: .5em .5em .5em 1em;
    position: relative;
    z-index: 1;
    -webkit-transform: translate3d(0, 0, 16px);
    transform: translate3d(0, 0, 16px);
}

.grid-date:before, .grid-date:after {
    background: #c8102e;
    content: '';
    height: 50%;
    margin: 0;
    position: absolute;
    right: -10%;
    width: 100%;
    z-index: -1;
}

.grid-date:before {
    top: 0;
    -webkit-transform: skewX(-16deg);
    -ms-transform: skewX(-16deg);
    transform: skewX(-16deg);
}

.grid-date:after {
    bottom: 0;
    -webkit-transform: skewX(16deg);
    -ms-transform: skewX(16deg);
    transform: skewX(16deg);
}

.grid-date span {
    display: block;
}

.grid-date .day {
    font-size: 2em;
    font-weight: bold;
}

.calendar-item {
    margin-bottom: 30px;
}

.calendar-item h3, .calendar-item p {
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 1.2em;
}

.calendar-item h3 {
    color: #c8102e;
}

.livewhale-events h2 {
    margin-bottom: 30px;
}

.calendar-item a {
    color: #c8102e;
    text-decoration: none;
}

.calendar-item a:hover {
    color: #950d22;
}
.calendar-item {
    max-width: 300px;
}

.calendar-item img {
    max-width: 300px;
}

img.event-thumbnail:hover {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    margin-bottom: 10px;
}
/*Grid Date Background End*/
/**LiveWhale End**/

/**LiveWhale The Drupal Way Begin**/
.calendar-items-wrapper {
    max-width: 450px;
}

.calendar-items-wrapper h3 {
    color: #00866C;
}

.view-livewhale-events img {
    width: 100%;
    max-width: 450px;
}

.views-field.views-field-field-event-id {
    display: none;
}

.view-livewhale-events-featured .view-header {
    line-height: .5;
    margin-bottom: 30px;
}
/**LiveWhale The Drupal Way End**/

/* Sendit Subscibe Form */
.event-notifications-wrapper {
    background: #00866C;
    padding-top: 30px;
    padding-bottom: 50px;
	padding-left: 8px;
    padding-right: 8px;
    margin-top: 50px;
	margin-bottom: 50px;
}

.event-notifications-wrapper p{
    color: #fff;
	max-width: 1000px;
}

input#name, input#email {
    margin-right: 10px;
    min-width: 200px;
    min-height: 50px;
    margin-top: 20px;
	font-size: 20px;
	padding: 20px 30px;
	border: 1px solid #ccc;
    border-radius: 4px;
}

input#submit {
    margin-top: 20px;
    min-height: 50px;
    min-width: 100px;
    font-size: 20px;
    background: #fff9da;
    color: #000;
	padding: 20px 30px;
	border: 1px solid #ccc;
    border-radius: 4px;
}

input#name::-webkit-input-placeholder, input#email::-webkit-input-placeholder {
  color: #000;
  opacity: 1; /* Firefox */
}

input#name::-moz-placeholder, input#email::-moz-placeholder {
  /*! color: #000; */
  /*! opacity: 1; */ /* Firefox */
}

input#name:-ms-input-placeholder, input#email:-ms-input-placeholder {
  color: #000;
  opacity: 1; /* Firefox */
}

input#name::-ms-input-placeholder, input#email::-ms-input-placeholder {
  color: #000;
  opacity: 1; /* Firefox */
}

input#name::placeholder, input#email::placeholder {
  /*! color: #000; */
  /*! opacity: 1; */ /* Firefox */
}

input#name:-ms-input-placeholder, input#email:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #000;
}

input#name::-ms-input-placeholder, input#email::-ms-input-placeholder { /* Microsoft Edge */
 color: #000;
}

h2#eventNotificationForm {
    color: #fff9da;
}

.event-notifications-wrapper .form .input {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

input#name::placeholder, input#email::placeholder {
    color: #000;
    opacity: 1;
}

/* Sendit Subscibe Form End */

/* ==========================================================================
   Drupal Views Using CSS Grid - Four Column Layout
   ========================================================================== */
/* Custom, iPhone Retina */
/* Extra Small Devices, Phones */
@media only screen and (min-width : 724px) {
    .four-column-grid .view-content {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        grid-gap: 30px;
        justify-items: left;
    }
}

/* XSmall Devices, Tablets */
@media only screen and (min-width : 725px) {
    .four-column-grid .view-content {
        -ms-grid-columns: 1fr 30px 1fr;
        grid-template-columns: 1fr 1fr;
    }
}

/* Medium Devices, Tablets */
@media only screen and (min-width : 1050px) {
    .four-column-grid .view-content {
        -ms-grid-columns: 1fr 30px 1fr 30px 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Large Devices, Desktops */
@media only screen and (min-width : 1400px) {
    .four-column-grid .view-content {
        -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

/* XLarge Devices, Wide Screens */
@media only screen and (min-width : 1600px) {
    .four-column-grid .view-content {
        -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}


/* ==========================================================================
   Drupal Views Using CSS Grid - Three Column Layout
   ========================================================================== */
/* Custom, iPhone Retina */
/* Extra Small Devices, Phones */
@media only screen and (min-width : 600px) {
    .three-column-grid .view-content {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        grid-gap: 30px;
        justify-items: left;
    }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 750px) {
    .three-column-grid .view-content {
        -ms-grid-columns: 1fr 30px 1fr;
        grid-template-columns: 1fr 1fr;
    }
}

/* Medium Devices, Tablets */
@media only screen and (min-width : 1200px) {
    .three-column-grid .view-content {
        -ms-grid-columns: 1fr 30px 1fr 30px 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Large Devices, Desktops */
@media only screen and (min-width : 1400px) {
    .three-column-grid .view-content {
        -ms-grid-columns: 1fr 30px 1fr 30px 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* XLarge Devices, Wide Screens */
@media only screen and (min-width : 1600px) {
    .three-column-grid .view-content {
        -ms-grid-columns: 1fr 30px 1fr 30px 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
}