@import 'custom.css';

/* --------------------------------------------
COMMON CSS
----------------------------------------------- */
/* =General
----------------------------------------------- */

.clearfix{
    clear:both;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.inner {
    max-width: 1520px;
    width: 100%;
    margin: 0 auto;
}

html, body {
    height: 100%;
    font-family: "Poppins", "Arial", "Helvetica", "sans-serif";
}

header, footer, .databoxes, #slideshow, #content {
    width: 100%;
}

h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    padding-top: 0;
    font-family: "Poppins", "Arial", "Helvetica", "sans-serif";
}

h1, h2, h4, h5, h6 {
    font-weight: 700;
}

h2,h3,h4,h5,h6 {
    color: #5c9d00;
}

p, li {
    font-weight: 300;
}

h4 {
    font-size: 1.3em;
}

h2 {
    margin-bottom:0.5em;
}




input {
    font-family: "Poppins", "Arial", "Helvetica", "sans-serif";
}

#content {
    clear: both;
    border-top: 24px solid #5c9d00;
    border-bottom: 16px solid #5c9d00;
}

a {
    text-decoration: none;
}

.orange_btn {
    display: inline-block;
    color: #FFF;
    text-align: center;
    background: #fd9500;
    padding: 0.5em 1em;
}

.date {
    font-style:italic;
}

/* =Header
----------------------------------------------- */

#mobile_logo {
    display:none;
}
header {
    width: 100%;
    z-index: 10;
    position: relative;
}

header h1 {
    position:absolute;
    bottom:0;
    left:0;
    margin-bottom: 0;
    margin-top:0;
    padding-top:0;
    padding-bottom: 0;
}

header img {
    height: auto;
}

#breadcrumbs {
    clear:left;
}

/* =Nav
----------------------------------------------- */
#search {
    width: 100%;
    margin-bottom: 1em;
}

#search input {
    float: none;
    width: 96%;
    padding: 1% 2%;
    color: #1f1f1f;
    border: none;
}

#desktop_menu {
    background: #edf0ec;
    width: 96%;
    padding: 2%;
}

#desktop_menu ul, #desktop_menu li {
    list-style: none;
}

#desktop_menu ul {
    clear: both;
    margin: 0 0 1em 0;
    padding: 0;
}

#desktop_menu a {
    color: #5c9d00;
    display: block;
    padding: 0.2em;
}

#desktop_menu .green_btn {
    display: inline-block;
    width: 96%;
    color: #FFF;
    background: #5c9d00;
    text-align: center;
    padding: 1%;
    margin: 1% 0;
}

#desktop_menu .icon_btn {
    display: inline-block;
    margin-top: 1em;
}

/* =Slideshow
----------------------------------------------- */
#slideshow {
    position: relative;
    z-index: 1;
}

#slideshow .inner {
    position:relative;
}

.slide {
    position: relative;
    display:none;
}

.slide.first {
    display:block;
}

.slide .photo {
    width: 100%;
    height: auto;
}

.slide .caption {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    font-size: 1.5em;
    padding: 0.5em 0;
}

.slide .caption .inner {
    width:96%;
    padding:0 2% 0 2%;
}

.slide h2, .slide p {
    color: #FFF;
    text-align: right;
    padding: 0;
    margin-bottom: 0;
}

.slide .button {
    background: #fd9500;
    color: #FFF;
    display: inline-block;
    text-decoration: none;
    padding: 0.25em;
    margin-left: 3em;
}

/* =Databoxes
----------------------------------------------- */
.databox {
    background: #eee;
}

.databox .text p {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.databox .black{
	color: #1f1f1f;
}

/* =Primary
----------------------------------------------- */
article h2, article h3, article h4, article h5, article h6, article p, article li {
    color: #1f1f1f;
}

article img {
    width: 100%;
    height: auto;
}

article h4 {
    margin-top: 1em;
    /*clear: both;*/
}

#main_image {
    width:100%;
    heigth:auto;
}

#primary a {
    color: #5c9d00;
}

#primary .orange_btn {
    color:#FFF;
}

.summary {
    clear: both;
}

.summary a {

}

.summary.no_image {
    margin-bottom:1em;
    border-bottom:1px solid #ccc;
    clear:both;
}

.summary.no_image .text {
    width:100%;
    float:none;
}

.summary .image {
    width: 18%;
    padding: 0 2% 2% 0;
    float: left;
}

.summary .image img {
    width: 100%;
    height: auto;
}

.summary .text {
    width: 80%;
    float: left;
}

.summary h3 {
    margin-bottom:0;
    padding-bottom:0;
}

.pagination {
    clear: left;
}

#documents a {
    display: block;
    padding: 0.75em 0 0.75em 35px;
    background: url(../images/site/doc-icon.png) 0 50% no-repeat;
}

#documents h4 {
    margin-bottom: 0;
    padding-bottom: 0;
}

#documents p {
    padding-top: 0;
    margin-left: 35px;
    margin-top: 0;
}

#documents .document.bordered {
    border-bottom: 1px solid #CCC;
    padding-bottom: 0.2em;
    margin-bottom: 0.5em;
}

#databoxes {
    clear: both;
    padding-top: 2em;
    font-size: 0.9em;
}

#databoxes p, #databoxes a {
    color: #1f1f1f;
}

#databoxes p a{
    color: #5c9d00;
}

#databoxes h2 {
    font-weight: 300;
    margin-bottom: 0.35em;
    color: #000 !important;
}

#databoxes h3{
    color: #000 !important;
}

#databoxes h3, #databoxes p {
    margin: 0;
    padding: 0;
}

#databoxes p {
    font-weight: 300;
}

#databoxes .orange_btn {
    color: #FFF;
    margin-top: 1em;
}

#social_feeds .panel {
    clear: left;
    width: 96%;
    padding: 2%;
    background: #edf0ec;
}

#social_feeds .panel_tab {
    background: #5c9d00;
    color: #FFF;
    text-decoration: none;
    display: inline-block;
    width: 46%;
    padding: 2%;
    margin: 0;
    float: left;
    text-align: center;
    font-size: 1.2em;
}

#social_feeds .panel_tab.selected {
    background: #edf0ec;
    color: #1f1f1f;
}

.twitter {
    display: none;
}

.facebook {
    display:none;
    max-height: 729px;
    overflow-y: scroll;
}

.instagram a {
    display:block;
    float:left;
    width:46%;
    padding:2%;
}

.instagram img {
    width:100%;
    height:auto;
    object-fit: cover;
    height: 150px;
}
.facebook-post {
    padding: 15px;
    border: 1px solid #ddd;
    margin-bottom: 15px;
    background: #fff;
    border-radius: 5px;
    overflow-y: auto;
}
.facebook-post__header {
    margin-bottom: 6px;
}
.facebook-post__header__date {
    color: #999;
}
.facebook-post__link {
    text-decoration: none;
    float: left;
    margin: 0 12px 12px 0;
}
.facebook-post__content {
    overflow-wrap: break-word;
    font-size: 0.85em;
}
.facebook-post__cta {
    width: 100%;
    display: block;
    clear: both;
}

.invasive.detail img {
    width:100%;
    max-width: 640px;
    margin:0.5em 0;
    border:5px solid white;
    border-radius:1em;
}


.invasive dt{
	float:left;
	clear:left;
	background:#a7c9a9;
	width:25%;
	color:#FFF;
	font-size:1.2em;
	padding:0.2em 2%;
	margin:0.2em 0;
	text-align: right;
}

.invasive dd {
	float:left;
	width:67%;
	background:#c6d9c7;
	color:#333;
	font-size:1.2em;
	padding:0.2em 2%;
	margin:0.2em 0;
}

ul.resources {
	margin-left:0;
	padding-left:0;
	}
.resources li {
	list-style:none;
	background:url(../images/site/file_pdf.png) 0 50% no-repeat;
	margin:0.5em 0;
	padding:0.5em 0 0.5em 2em;
	}

.regional-invasive-contact {
    border-top:1px solid #CCC;
    padding:1em 0;
    margin:1em 0;
}

.regional-invasive-contact h3 {
    margin-bottom:0;
}

.contact-methods p {
    margin:0;
    padding:0;
}

#target_species_container {
    position:relative;
    text-align: center;
}

#target_species_container .slidesjs-pagination {
    position:absolute;
    bottom:4%;
    z-index:11;
    list-style: none;
    margin:0;
    padding:0 0 0 7%;
    left:0;
    width:93%;
}

#target_species_container .slidesjs-pagination li {
    list-style: none;
    float:left;
    position: relative;
}

#target_species_container .slidesjs-pagination a {
    color:#FFF;
    display:inline-block;
    background:none;
    border-radius:8px;
    width:12px;
    height:12px;
    border:2px solid #FFF;
    text-indent: -9999em;
    margin-right:5px;
    position: relative;
}

#target_species_container .slidesjs-pagination a.active, #target_species_container .slidesjs-pagination a:hover {
    background:#FFF;
}


.target_species {
    position:relative;
    z-index:1;
}

.target_species .crosshairs {
    position:absolute;
    z-index:3;
    top:0;
    left:0;
    width:100%;
    height:auto;
}

.target_species .photo {
    position:relative;
    z-index:1;
}

.target_species .name {
    position:absolute;
    top:32%;
    left:25%;
    padding:4% 6%;
    text-align:center;
    background:url(../images/site/transparent-white.png);
    font-size:1.4em;
    font-weight:normal;
    min-width:40%;
}

.target_species .orange_btn {
    text-align: center;
    position: absolute;
    top:65%;
    left:43%;
    z-index:10;
}

/* =Forms
----------------------------------------------- */
label {
    display: block;
}

input[type="text"], textarea {
    width: 98%;
    padding: 1%;
    margin: 0;
}

/* =Databoxes
----------------------------------------------- */

.databox .inner {
    position:relative;
    float:left;
    padding-bottom:3em;
}

.databox .orange_btn {
    position: absolute;
    bottom:0;
    left:0;
}

.databox.newsletter .orange_btn{
    position: relative;
    
}

/* =Footer
----------------------------------------------- */
footer {
    background: #fff;
    clear: both;
}

footer * {
    color: #1f1f1f;
}

/* Mailchimp archive list
------------------------------------------------ */
.campaign {
    margin: 10px 0px;
    font-weight: 100;
}
div.databox.newsletter img{
    mix-blend-mode: darken; 
    margin: 10px 0 0 10px;
}
/* Category listing on Invasive page
---------------------------------------------*/
.cat-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }
  
  .cat-list li {
    flex: 0 0 calc(33.33% - 20px); /* Adjust the width as needed */
    margin: 10px;
    text-align: center;
  }
  
  .cat-list a {
    text-decoration: none;
    color: #333;
    display: block;
  }
  
  .cat-list img {
    max-width: 100%;
    height: auto;
    margin-bottom: 5px;
    width: 100%;
    height: 300px;
  }
  
  .cat-list .item-content {
    margin-top: 5px;
  }
  
  /*----------- Invaisve spice detail -----------*/
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .species-top {
    display: flex;
    flex-wrap: wrap;
  }
  
  .image-card {
    flex: 3;
    display: flex;
    justify-content: center;
  }
  .image-card img {
    width: auto;
    height: auto;
  }
  .meta-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin: 0 20px;
    border: 1px solid #daeaf9;
  }
  .meta-card .item-content {
    margin: 5px 0px;
  }
  .meta-card .item-content span {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    margin-right: 0.75rem;
    vertical-align: top;
    border-radius: 1.5rem;
  }
  span.Prevent {
    background-color: #fbb91c;
  }
  span.Control {
    background-color: #dbd803;
  }

  .species-detail {
    display: flex;
    margin-top: 20px;
    flex-wrap: wrap;
  }
  .species-gallery { 
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
  }

  .species-gallery .item-content {
    flex: 0 0 calc(16% - 10px); /* Adjust the width as needed */
    margin: 5px;
    text-align: center;
  } 
  .species-gallery .item-content img {
    width:auto;
  }

  .species-gallery h2 {
    flex-basis: 100%;
  }
  .col-left,
  .col-right {
    flex: 1;
    padding: 20px;
  }
  .credit-text {
    font-size: 14px;
    font-style: italic;
  }
    
/* --------------------------------------------
Mobile CSS
----------------------------------------------- */
@media (max-width: 480px) {
    .cat-list {
        flex-direction: column;
    }
    .cat-list li {
      flex: 0 0 calc(50% - 10px); /* Adjust the width for smaller screens */
    }
    .cat-list img {
        width: auto;
    }
    .image-card,
    .meta-card {
        flex-basis: 100%;
    }
    .meta-card {
        margin: 20px 0;
    }
}

@media screen and (max-width: 639px) {
    #mobile_logo {
        display:block;
        background:#5C9D00;
        width:86%;
        padding:0.5em 7%;
        height:auto;
    }

    header h1 {
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        padding: 1em 0 0 0;
        background: #5c9d00;
    }
    header h1 img {
        width: 95%;
        height: auto;
    }
    /* =Nav
----------------------------------------------- */
    #desktop_menu {
        display: none;
    }
    #menu_btn {
        display: block;
        background: #5c9d00;
        color: #FFF;
        text-align: center;
        padding: 0.5em;
        clear: both;
        font-size: 1.4em;
        text-decoration: none;
        font-weight: bold;
        font-family: "Poppins", "Arial", "Helvetica", "sans-serif";
    }
    #mobile_menu {
        display: none;
        background: #edf0ec;
    }
    #mobile_menu ul {
        padding: 0;
        margin: 0;
    }
    #mobile_menu li {
        list-style: none;
    }
    #mobile_menu a {
        display: block;
        text-decoration: none;
        padding: 0.75em 1em 0.75em 1em;
        border-bottom: 1px solid #CCC;
        color: #5c9d00;
    }
    /* =Primary
----------------------------------------------- */
    #primary article {
        padding: 1em;
    }
    /* =Sidebar
----------------------------------------------- */
    /* =Databoxes
----------------------------------------------- */
    .databox {
        margin: 1em 0;
        width: 96%;
        padding: 2%;
        position: relative;
    }
    .databox h2 {
        margin: 1em 0;        
    }
    .databox img {
        width: 100%;
        height: auto;
    }
    .databox .orange_btn {
        width: 96%;
        padding: 1%;
        margin: 1%;

    }
    /* =Forms
----------------------------------------------- */
    /* =Footer
----------------------------------------------- */
    footer {
        width: 96%;
        padding: 2%;
    }
}

/* end mobile media query */
/* --------------------------------------------
Desktop CSS
----------------------------------------------- */
@media screen and (min-width: 640px) {

    #content {
        overflow: hidden;
    }
    .image-card,
    .meta-card {
        width: 100%; 
    }
    /* =Nav
----------------------------------------------- */
    #desktop_menu {
        width: 16%;
        padding-right:0;
        float: left;
        padding-bottom: 5000px;
        margin-bottom: -5000px;
    }

    #desktop_menu li a {

    }

    #desktop_menu input, #desktop_menu .green_btn {
        width:85%;
    }

    #desktop_menu li {
        position: relative;
    }
    #desktop_menu li ul {
        position: absolute;
        left: 100%;
        padding:4%;
        z-index: 100000;
        width: 250px;
        top: 0;
        display: none;
        background: #edf0ec;
    }
    #desktop_menu li:hover > ul, #desktop_menu li.sfhover > ul {
        display: block;
    }
    #mobile_menu, #menu_btn {
        display: none;
    }
    /* =Primary
----------------------------------------------- */
    #primary {
        width: 78%;
        padding: 2% 2% 0 2%;
        float: left;
    }
    #primary article.main {
        width: 55%;
        float: left;
    }
    #social_feeds {
        float: right;
        margin: 0 0 2% 2%;
        width: 37%;
    }
    #main_image {
        width:45%;
        float:right;
        padding:0 0 2em 2em;
    }

    #social_feeds .panel_tab {
        font-size: 10px;
    }
    
    /* =Photo Gallery
    ----------------------------------------------- */

    .galleryThumbnail {
        float:left;
        width:23%;
    	margin:2% 2% 2% 0;
    }

    .galleryThumbnail img {
        width:100%;
        border-radius: 0.5em;
        border:none;
        }

    .galleryThumbnail p {
        color:#FFF;
        background:#86a788;
        text-align:center;
        margin:0;
        }

    .galleryThumbnail a {
        color:#FFF;
        }

    /* =Sidebar
----------------------------------------------- */
    #secondary {
        width: 33%;
        float: right;
    }
    /* =Databoxes
----------------------------------------------- */
    .databox {
        float: left;
        width: 27.33333%;
        margin: 0 1%;
        padding: 2%;
    }
    .databox .text {
        float: left;
        width: 60%;
    }
    .databox img {
        float: right;
        width: 35%;
    }
    .databox.left {
        margin: 0 2% 0 0;
    }
    .databox.right {
        margin: 0 0 0 2%;
    }
    /* =Forms
----------------------------------------------- */

    /* =Footer
----------------------------------------------- */
    footer {
        font-size: 0.8em;
        padding-top: 1em;
    }
    footer p {
        width: 50%;
        float: left;
    }
    footer #credits {
        text-align: right;
    }
}

/* end media query */
/* --------------------------------------------
TABLET CSS
----------------------------------------------- */
@media screen and (min-width: 640px) and (max-width: 768px) {
    #content .inner, header .inner, footer .inner {
        width: 96%;
        padding: 0 2%;
    }
    .cat-list li {
        flex: 0 0 calc(50% - 20px); 
    }
    .species-top {
        flex-direction: column;
    }

    .meta-card {
        margin-top: 20px;
    }

    .species-detail {
        flex-direction: column;
        margin-top: 10px;
    }
    /* =General
----------------------------------------------- */
    .target_species .name {
        font-size:1em;
    }
    .image-card,
    .meta-card {
        width: 100%; 
    }

}

/* end media query */

@media screen and (min-width:1024px) {
    .target_species .name {
        font-size:2em;
    }
    #social_feeds .panel_tab {
        font-size: 1.2em;
    }
}