/*
Theme Name: Definity
Theme URI: https://definitygroup.com
Author: Definity Group
Author URI: https://definitygroup.com
Description: Custom WordPress Theme
Version: 1.0
*/


:root {
    --font-base: Lato, Arial, Helvetica, sans-serif;
    --title-font: Kanit, Arial, Helvetica, sans-serif;
    --font-size: 16px;
    --light-text: #205e8f;
    --medium-text: #205e8f;
    --dark-text: #205e8f;
    --contrast_color: #e0e0e0;
    --dark_color: #205e8f; 
}


/* Fix Google Ad width problems
.screen ins.adsbygoogle.googleTop{ width: 900px !important; }
.screen ins.adsbygoogle.googleMiddle { width: 320px !important; }*/

.amazon-suggest {
    border: 1px solid #235e95;
    border-radius: 6px;
    background: #ffffff;
    padding: 5px;
    display: block;
    margin: 20px 0;
    overflow: visible;
}

.addthis_toolbox.addthis_32x32_style {
    margin: 40px;
}

/* ============================
    layout
   ============================ */

.screen #content,
.screen .footer {
    width: 85%;
}

.screen .header,
.screen .nav {

}


.mobile #content,
.mobile .footer {
    width: 90%;
}

.mobile .header,
.mobile .nav {
}

.screen .logo {
      width: 35%;
      display: inline-block;
}

.mobile .logo {
      width: 35%;
      display: inline-block;
}

#content {
  padding-bottom: 30px;
}

.home .screen #main-content {
    width: 100%;
    display: block;
}

.screen #main-content {
    width: 70%;
    display: inline-block;
    margin-left: 10px;
}

.mobile #main-content {
    width: 100%;
    display: block;
}

.screen #definity-sidebar {
    max-width: 320px !important;
    display: block;
    position: relative;
    width: 25%;
    float: right;
    margin-right: 10px;
}

.mobile #definity-sidebar {
    display: block;
    position: relative;
    overflow: auto;
}

.mobile .post {
    font-size: 1.05em;
}

.adsbygoogle {
    padding: 15px 0px;
}

.screen .footerDiv span,
.screen .footerDiv a {
    position: absolute;
}

.mobile .footerDiv span,
.mobile .footerDiv a {
    position: relative;
}


/* ============================
    
   ============================ */

.theiaStickySidebar {
    max-width: 320px !important;
    .navbar
   -webkit-backface-visibility: hidden;
}

a.cc-btn.cc-dismiss {
    background-color:  var(--dark-text);
}

/* Remove whitespace from top */
html {
    margin-top: -22px !important;
}

body {
    font-size: var(--font-size);
    font-family: var(--font-base);
    line-height: 1.6;
    color: #333333;
    margin: 0px;
    padding: 0px;
    background-color: #ffffff;
    background-image: url(../definity/images/lightwood.jpg);
}

html, body {
    min-height: 100%;
}

div#content {
    margin-top: 20px;
}


.entry-header{
	display: none;
}

a,
a:link {
	color: var(--medium-text);
	text-decoration: none;
}

a:visited,
a:hover {
    color: var(--dark-text);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, #site-name a {
    text-decoration: none !important;
    font-family: var(--title-font);
    color: var(--dark-text);
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

div#page {
    width: 100%;
    margin: 0 auto;
}

#footer {
	width: 100%;
}


.footer.grid {
    text-align: center;
    margin: 0 auto;
    width: 85%;
    padding: 0 10px;
    position: relative;
    height: 50px;
}

.tertiary {
    margin: 0 auto;
    position: relative;
    display: block;
    clear: both;
}

.tertiary.grid {
    grid-gap: 8%;
    margin: 0;
}

.flink {
    position: relative;
    margin-top: 40px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.6);
    border-radius: 5px;
}

.rope {
    background-image: url(../definity/images/rope_nail.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    left: 0px;
    padding-bottom: 31.66%;
    position: absolute;
    top: -75px;
    width: 100%;
}

.footerDiv span,
.footerDiv a {
    position: absolute;
    bottom: 5px;
    color: var(--light-text);
}

#header {
    width: 100%;
    background-color: transparent;
    padding: 0;
}

.header,
.nav,
#content,
#tertiary,
.footer {
    margin: 0 auto;
    max-width: 1264px;
    position: relative;
}

.screen .logo img {
    min-width: 247px;
}
.logo img {
    height: auto;
    display: block;
    max-width: 100%;
}

#content {
	-webkit-box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.6);
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.8);
}

.footer {
    text-align: center;
    margin: 40px 0 0 0;
}

.screen .logo {
      width: 247px;
      display: inline-block;

 }

 h1.site-title {
     margin: 0px;
}

div#breadcrumbs {
    color: #666666;
    font-size: .9em;
    padding: 15px;
}

.screen {

}

#main-content {
    min-height: 600px;
    /* fix for single extending beyond container */
    min-width: 0;
}

#main-content li {
    margin-bottom: 1.05em;
}

.mobile {

}
/* ============================
/* Responsive content columns */
/* 1st col gets 2 frames, 2nd gets 1 frame when .screen is active
/* https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431
   ============================ */
.search .screen div#content,
.error404 .screen div#content,
.archive .screen div#content,
.single .screen div#content {
}

/* Responsive content grids */
/* Automatically fits divs within space
   Used on index.php and footer.php */
.grid {
    display: grid;
    grid-gap: 40px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 350px));
    /* grid-template-rows: repeat(2, 100px); */
    margin: 20px;
}

/* ============================
    Search Form
   ============================ */

.screen .definity-search  {
    width: 35%;
    display: inline-block;
    float: right;
    margin-top: 10vh;
    position: relative;
 }

 .mobile .definity-search {
     width: 100%;
     display: block;
     float: none;
     z-index: 200;
}

.search-form {
    z-index: 1000;
}

.fa.fa-search {
    font-size: 2.3em;
    position: absolute;
    left: 5px;
    top: 8px;
    z-index: 100;
    color: var(--light-text);
}

.mobile .fa.fa-search {
    position: relative;
}

::placeholder {
    color: #d1d1d1;
}

.search-field {
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: inherit;
    height: 45px;
    margin: 0px;
    padding: 0 0 0 50px;
    position: relative;
    -webkit-transition: width 400ms ease, background 400ms ease;
    transition: width 400ms ease, background 400ms ease;
    width: 0;
}

.search-field:focus {
    background-color: #fff;
    border: 2px solid var(--light-text);
    border-radius: 6px;
    cursor: text;
    outline: 0;
    /*width: 450px;*/
    width: 100%;
}

.search-form
.search-submit {
	display:none;
}

/* ============================
    Back To Top
   ============================ */
.back-to-top {
	position: fixed;
    z-index: 600;
    bottom: 3.5em;
    right: 3em;
    display: none;
    font-size: 1.5em;
    border-radius: 300px;
    background: var(--contrast_color);
    padding: 4px 10px;
}

.back-to-top:after {
	box-shadow: 0px 0px 0px 4px #911484;
	opacity: 0;
	transform: scale(1);
	transition: all 1s ease 0s;
}

.back-to-top:hover {
	 color: #FFFFFF;
}

.back-to-top:hover:after {
	 box-shadow: 0px 0px 0px 4px #FFFFFF;
	 opacity: 9;
	 transform: scale(1.2);
}


.back-to-top a {
    font-size: 2em;
    border-radius: 300px;
    background: #e5e5e5;
    padding: 4px 6px 6px 6px;
}

/* ============================
    Cookie Consent
   ============================ */
.cc-grower {
    text-align: center;
    /* font-family: Lato; */
}

/* ============================
    Recent Related Posts
   ============================ */
.recent-post {
    display: flex;
}

.rp-img img, .rp-title img {
    /* display: inline-block; */
    float: left;
    width: 75px;
}

.rp-title {
    /* display: inline-block; */
    float: left;
    padding: 10px 0;
    font-size: .9em;
}

div#related-cats {
    clear: both;
}

/*  Enable to Troubleshoot div layout */
/* * {
   outline: 1px solid red;
  }*/


.post .wp-post-image {
    height: 125px;
    width: 125px;
}

.post, #definity-sidebar {
    border: 1px solid #256b9b;
    padding: 25px;
    border-radius: 6px;
    clear: both;
        background: #ffffff;
}

.post-categories {
    display: block;
    clear: both;
}

.post-categories a {
    margin: 2px 20px;
}

/* ============================
   Fix for Facebook Comments Width
 ============================ */

.fb-comments.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe {
	width: 100% !important;
}

._ohe.lfloat {
    font-weight: 600;
    color: var(--dark-text);
    font-size: 1.4em;
}

._ohe.lfloat::before, #fb-count::before {
    font-family: FontAwesome;
    content: "\f075";
    color: var(--dark-text);
}

div#fb-count {
    color: var(--dark-text);
}

/* ============================
   Pagination
 ============================ */

.pagination {
    text-align: center;
}

span.page-numbers.current {
    background-color: #f4f4f4;
    padding: 10px 15px;
    border-radius: 30px;
    color: <?=$light_text?>;
	font-weight: bold;
    font-size: 1.4em;
}

a.page-numbers {
    background-color: var(--light-text);
    color: #FFFFFF;
    padding: 10px 15px;
    border-radius: 30px;
    margin: 6px;
    font-weight: bold;
    text-decoration: none;
}

/* ============================
   Mega Menu
 ============================ */

.screen div#nav {
    width: 101%;
    position: relative;
    right: .5%;
}

.nav {
    height: 50px;
    display: block;
    z-index: 1000;
}

.screen #mega-menu-wrap-main {
	background: transparent url(../definity/images/menu-bg.png) repeat-x;
    width: 101%;
    position: relative;
    right: .5%;
}

.mobile #mega-menu-wrap-main {
	background: transparent url(../definity/images/menu-bg.png) repeat-x;
	 position: relative;
}
#mega-menu-wrap-main #mega-menu-main > li.mega-menu-item > a.mega-menu-link {
	color: var(--medium-text);
}

#mega-menu-wrap-main #mega-menu-main > li.mega-menu-item,
#mega-menu-wrap-main .mega-menu-toggle {
    margin: 4px 20px;
    background-color: transparent;
    padding: 2px 4px;
    border-radius: 30px;
}

#mega-menu-wrap-main #mega-menu-main > li.mega-menu-item > a.mega-menu-link {
    padding: 0px 5px 0px 5px;
}
#mega-menu-wrap-main #mega-menu-main > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, 
#mega-menu-wrap-main #mega-menu-main > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, 
#mega-menu-wrap-main #mega-menu-main > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
    background-color: transparent;
}

#mega-menu-wrap-main #mega-menu-main > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-main #mega-menu-main > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-main #mega-menu-main > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-main #mega-menu-main > li.mega-menu-item.mega-toggle-on > a.mega-menu-link{
    color: var(--medium-text);
    font-weight: bold;
    text-decoration: none;
    background-color: transparent;
    border-radius: 30px;
}

#mega-menu-wrap-main #mega-menu-main > li.mega-menu-item > a.mega-menu-link {
    font-family: var(--title_font);
    font-size: 1.4em;
    font-weight: bold;
}


#mega-menu-wrap-main .mega-menu-toggle + #mega-menu-main {
    background: transparent;
}

/* ============================
   Mega Menu Flyout Menus
 ============================ */
 /* main container */
 #mega-menu-wrap-main #mega-menu-main > li.mega-menu-flyout ul.mega-sub-menu {
     z-index: 999;
     position: absolute;
     width: 250px;
     border: 0;
     padding: 0px 0px 0px 0px;
     background: #ffffff;
     max-width: none;
     border-radius: 6px;
     color: var(--light-text);
     border: 2px solid  var(--light-text);
}

/* default sub-menu link items */
#mega-menu-wrap-main #mega-menu-main > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
    display: block;
    background: #f1f1f1;
    color: #666;
    font-family: var(--title_font);
    font-size: 1.3em;
}

 /* hover items */
#mega-menu-wrap-main #mega-menu-main > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover, #mega-menu-wrap-main #mega-menu-main > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
    background: #ffffff;
    border-radius: 6px;
    text-decoration: none;
    color: var(--light-text);
}

.mega-sub-menu li#mega-menu-item, .mega-sub-menu mega-menu-link,
a.mega-sub-menu mega-menu-link {
    border-radius: 6px;
}


.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#mega-menu-wrap-main .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-label {
    color:  var(--dark-text);
}

#mega-menu-wrap-main .mega-menu-toggle .mega-toggle-block-1::after {
    color:  var(--dark-text);
}

.mobile .mega-menu-horizontal {
    background-color: #ffffff !important;
}

/* ============================
   Hide Amazon Header and Ads Fix
 ============================ */

.amzn-native-header {
    display: none;
}

div#googleMiddle {
    margin: 35px 0;
}

.screen .um_input {
    width: 300px;
}

.mobile .um_input {
    width: 100%;
}
/* ============================
   Species Database Form Display
 ============================ */
 
 .views-exposed-form {
     display: flex;
}

.views-exposed-form label {
    font-weight: bold;
    padding-right: 15px;
}

.views-exposed-form > div {
    margin: 10px 20px;
}
.table {
    width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    border-spacing: 0px;
}
.table tr:nth-child(even) {
  background-color: #f2f2f2;
}
.table td {
    padding: 2px 10px;
}

.table th {
    text-align: left;
    padding: 2px 8px;
}