/*
 Theme Name:   Marine Discovery Center
 Theme URI:    https://www.marinediscoverycenter.org/
 Description:  Customized Child Theme for MDC
 Author:       Lois Reed
 Author URI:   https://www.loisreed.com
 Template:     Divi
 Version:      4.14.6
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 */



/* =Theme customization starts here = */
/* ----- structure ---- */




html,body {
	font-size: 18px;
	background-image: url('https://www.marinediscoverycenter.org/wp-content/uploads/2016/11/SEAGRASS-2-website.jpg');
	background-position: top;
	background-repeat: no-repeat;
}


/*---- mobile menu -----------*/
.mobile_menu_bar::before{
color:white; font-weight: bold !important;
}
ul#mobile_menu {
background-color: rgba(0, 0, 0, 0.54) !important;
}
/* ----------------- BUTTONS ----------------*/
.et_pb_button_0 {
    background: #00a29b;
    border-color: #00978e;
    letter-spacing: 3px;

    font-size: 16px;

}
/*header and menu*/
#top-header {
	padding-bottom: 10px;
	
}
.secondarymdc {
	float: left;
	clear: both;
	/*display:  inline-block;*/
}
/*---- phone in header -----*/
#top-header a.phone {
	font-size: 20px;
}
.main_adress .phone {
float: right;
clear: both;
	margin-right: 6px;
	margin-bottom: 6px;
	
}
.main_adress .address {
	float: right;
	font-family: "tk-brandon-grotesque", sans-serif;
	font-weight: normal;
	margin-right: 6px;
	text-align: right;
	text-transform: none;
	clear: both;
}

/*-------------- MEga MEnu Alterations -----------------*/
#top-menu li.mega-menu > ul > li > a:first-child
{
	font-size: 20px;
}
/*---- SLOW dropdown menu ----*/
@media (min-width: 981px){
.et_primary_nav_dropdown_animation_fade #et-top-navigation ul li:hover > ul, .et_secondary_nav_dropdown_animation_fade #et-secondary-nav li:hover > ul {
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
}
/*------------------ PRIMARY NAVIGATION -----------------*/
#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #00e1d7; /*** COLOR OF THE LINE ***/
 height: 3px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}

/*-------------- MEga MEnu Alterations -----------------*/
#top-menu li.mega-menu > ul > li > a:first-child
{
	font-size: 20px;
}
#top-menu li.mega-menu > .sub-menu {
max-width: 80%;
}


/*----- HEADINGS for Sections -----*/
.heading_a_image {
	color: #ffffff;
}
.heading_a_image a:link{
	text-decoration: none;
	color: #ffffff;
	
}
.heading_a_image a:hover{
	text-decoration: none;
	color: #D7D7D7;	
}
.heading_a_image a:visited{
	text-decoration: none;
	color: #ffffff;
	
}

/*------------------- LINKS ------------------------------------*/
/*---- for Conser Edu Explor heading --------*/
.ece .tk-minion-pro {
	font-family: "minion-pro-display",serif;
	color: #ffffff;
	 text-shadow: 2px 2px 4px #000000;
	
}
a.ece  {
	color: #ffffff;
	text-decoration: none;
}
a:hover.ece  {
	color: #fffffff;
	text-decoration: underline;
}
a:visited .ece {
	color: #ffffff;
	text-decoration: none;
}
a:link.ece {
	color: #fffffff;
	text-decoration: none;
}

/* sub breadcrumb style menu*/
.subtwo {
	background-color: #00998f;
}

.subtwo a:link {
    color: #ffffff;
	font-family: "brandon-grotesque", san-serif;
    font-weight: bold;
    font-style: normal;
}
.subtwo a:hover {
    color: #EBEBEB;
    font-family: "brandon-grotesque", san-serif;
    font-weight: bold;
    font-style: normal;
    text-decoration: underline;
}
.subtwo a:visited {
    color: #ebebeb;
    font-family: "brandon-grotesque", san-serif;
    font-weight: bold;
    font-style: normal;
}


a.parlink  {
	color: #00978e;
}
.parlink a:visited{
	color: #00978e;
}
.parlink a:hover{
	color: #00978e;
	text-decoration: underline;
}
.morelink a { color: #007c77;
text-decoration: underline
}


.linelink a {
	text-decoration: underline;
}
.linelink a:link {
	text-decoration: underline;
}
.linelink a:hover {
	text-decoration: none;
}
.linelink a:visited {
	text-decoration: underline;
}
/*------------------- for moving innner headers to the right --------------------*/
/*.slider-wrap .bxslider .slide-overlay:last-child {
    margin-right: 0px!important;*/

/*---------------------------- TYPOGRAPHY -----------------------------------*/
.tk-brandon-grotesque {font-family: "brandon-grotesque", san-serif;}
.tk-lato {font-family: "lato",sans-serif;}
.tk-minion-pro {font-family: "minion-pro",serif;}

/*------------------ Typography special---------------*/

.staff ul {
	margin-top: 10px;
}
.textbox ul {
	margin-top: 10px;
	color: #1A1A1A;
}
.fullheader 
{
	font-family: "minion-pro",serif;
	font-style: normal;
	font-weight: bold;
}
/*-------------- SLIDER ------------------*/
.et_pb_slide_description .et_pb_slide_title {
    font-size: 40px;
      font-family: "brandon-grotesque", san-serif;
}

/*------------------ LISTS ------------------------------*/
.aae ul li {
	list-style: disc;
	margin-bottom:5px;
	margin-top: 10px;
	margin-left:42px;
	text-align: left;
	}

.aae ol li {
	margin-bottom:5px;
	margin-left:48px;
	margin-top: 10px;
	text-align: left;
	}
	

/*----------------------- SIDEBAR -----------------------*/
h4.widgettitle  {
text-align:center;
	text-transform: uppercase;
font-size: 18px;
	font-family: "minion-pro",serif;
	font-weight: bold;
/*padding-bottom: 20px;*/
}

.widgettitle {
    border-bottom: solid 2px #000000;
    /*margin-bottom: 25px;*/
	
}

.et_pb_sidebar .et_pb_widget .et_pb_widget ul li {
margin-bottom: 14% !important;
}
.et_pb_bg_layout_light .et_pb_widget li a {
    border-bottom-style: solid;
    border-top-style: none;
    border-bottom-color: #8A8A8A;
    border-bottom-width: 1px;
    border-right-style: none;
    border-left-style: none;
}


/*--------------- BLOG ------------------*/
/*---------------------------------------*/



/*featured image size*/
.et_pb_posts.et_pb_module a img {
width: 250px;
float: left;
margin-right: 25px;
}

.et_pb_posts a.more-link {
    display: block;
    clear: both;
    float: right;
}


/*---------------- BUTTON -------------*/
body #page-container .wpc-bnt btn-one {
    background: #00a29b;
    border-color: #00978e;
    letter-spacing: 3px;
    font-size: 20px;
}

/*------------- footer -------------------*/
#footer-widgets .footer-widget li:before {
border-style: none !important;
}

.footer-widget .et_pb_widget ul li {
background-color: #005652 !important;
padding-right: 14px;
}
#main-footer .footer-widget h4.title {
	margin-bottom: 0px;
}
#menu-footer.menu {
	line-height: normal;
}
#footer-widgets .footer-widget li {
    position: relative;
    padding-left: 0px;
}

/*---- Donation Form ----*/
.dolphin_society input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
   
     display: none; 
}


.item2 { grid-area: menu;  grid-row: 1;  background-size: cover; background-position: center center; background-repeat: no-repeat;}
.item3 { grid-area: main;  grid-row: 1;  background-size: cover; background-position: center center; background-repeat: no-repeat;}
.item4 { grid-area: right;  grid-row: 1 / span 2; background-size: cover; background-position: center center; background-repeat: no-repeat;}
.item5 { grid-area: menu; grid-row: 2;  background-size: cover; background-position: center center; background-repeat: no-repeat;}
.item6 { grid-area: main;  grid-row: 2; background-size: cover; background-position: center center; background-repeat: no-repeat;}
.grid-container {
  display: grid;
  grid-template-areas: 'menu main right right right';
  gap: 0px;
}
.grid-container > div > img {
    height: 100%;
    width: 100%;
}
/* Overlay Hover CSS */
.grid-container > div:hover .overlay {
    opacity: 1;
}
.overlay {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    background-color: #f19f1fc9;
}
.overlay:before {background-color: transparent !important;}
.overlay h2 {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}
.overlay h3 {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 60%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.et-menu li {
    display: flex !important;
    align-items: center !important;
}

@media screen and (min-width: 320px) and (max-width: 425px) {
  .grid-container {
    grid-template-areas: 'menu menu main main right right right';
  }
  .item2 {
    grid-row: 1;
    grid-column: 1/8;
  }
  .item3 {
    grid-row: 2;
    grid-column: 1/8;
  }
  .item4 {
    grid-row: 3;
    grid-column: 1/8;
  }
  .item5 {
    grid-row: 4;
    grid-column: 1/8;
  }
  .item6 {
    grid-row: 5;
    grid-column: 1/8;
  }
}
@media screen and (min-width: 426px) and (max-width: 767px) {
  .grid-container {
    grid-template-areas: 'menu menu main main right right right';
  }
  .item2 {
    grid-row: 1;
    grid-column: 1/8;
  }
  .item3 {
    grid-row: 2;
    grid-column: 1/8;
  }
  .item4 {
    grid-row: 3;
    grid-column: 1/8;
  }
  .item5 {
    grid-row: 4;
    grid-column: 1/8;
  }
  .item6 {
    grid-row: 5;
    grid-column: 1/8;
  }
}
@media screen and (min-width: 768px) and (max-width: 980px) {
  .item2 .overlay h2 {
    font-size: 20px;
  }
  .item2 .overlay h3 {
    font-size: 15px;
    top: 75%;
  }
  .item3 .overlay h2 {
    font-size: 20px;
  }
  .item3 .overlay h3 {
    font-size: 15px;
    top: 75%;
  }
  .item5 .overlay h2 {
    font-size: 20px;
  }
  .item5 .overlay h3 {
    font-size: 15px;
    top: 75%;
  }
  .item6 .overlay h2 {
    font-size: 20px;
  }
  .item6 .overlay h3 {
    font-size: 15px;
    top: 75%;
  }
}
@media screen and (min-width: 981px) and (max-width: 1300px) {
  .item2 .overlay h2 {
    font-size: 22px;
  }
  .item2 .overlay h3 {
    font-size: 20px;
    top: 70%;
  }
  .item3 .overlay h2 {
    font-size: 22px;
  }
  .item3 .overlay h3 {
    font-size: 20px;
    top: 70%;
  }
  .item5 .overlay h2 {
    font-size: 22px;
  }
  .item5 .overlay h3 {
    font-size: 22px;
    top: 70%;
  }
  .item6 .overlay h2 {
    font-size: 22px;
  }
  .item6 .overlay h3 {
    font-size: 22px;
    top: 70%;
  }
}
@media screen and (min-width: 1301px) and (max-width: 1499px) {
  .item2 .overlay h2 {
    font-size: 22px;
  }
  .item2 .overlay h3 {
    font-size: 20px;
    top: 70%;
  }
  .item3 .overlay h2 {
    font-size: 22px;
  }
  .item3 .overlay h3 {
    font-size: 20px;
    top: 70%;
  }
  .item5 .overlay h2 {
    font-size: 22px;
  }
  .item5 .overlay h3 {
    font-size: 22px;
    top: 70%;
  }
  .item6 .overlay h2 {
    font-size: 22px;
  }
  .item6 .overlay h3 {
    font-size: 22px;
    top: 70%;
  }
}
@media screen and (min-width: 1301px) and (max-width: 1499px) {
	.item4 .overlay h3 {
		top: 57%;
	}
}
@media screen and (min-width: 1700px) and (max-width: 1920px) {
	.item4 .overlay h3 {
		top: 55%;
	}
	
}.menu-toggle {
color: white;
}
.main-navigation ul {
background-color: black;
}