/*
Theme Name: Blue Moon
Theme URI: https://tractionworksseo.com
Author: Alex Martinez
Author URI: https://tractionworksseo.com
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: bluemoon

Blue Moon Main Stylesheet
-------------------------- */

/* Universal
-------------------------- */
html{
scroll-behavior: smooth !important;
overflow-x: hidden;
}
body{
    font-family: mr-eaves-modern, sans-serif !important;
    margin: 0;
    overflow-x:hidden;
    font-size: 1.1rem;
    color: #6d5545;
}
body.modal-open {
  height: 100vh;
  overflow-y: hidden;
}
#page{
    max-width: 1320px;
    margin: 0px auto;
}
#content{
    max-width: 1320px;
    margin: 0px auto;
    padding: 0 1em;
    margin-bottom: 3%;
}
p{
font-size: 1.4rem;
}
.container{
max-width: 1320px !important;
}
img{
max-width: 100%;
}
img.alignright{
float: right;
margin: 1% 0 2%;
}
img.alignleft{
float: left;
margin: 1% 2% 1% 0;
}
a{
text-decoration: none;
color: #ef4056;
}
a:hover{
color: #565d71;
text-decoration: none;
}
.clear{
clear: both;
height: 10px;
}
.social{
width: 100%;
margin: 0px auto;
}
.social-wrap{
  width: 80%;
text-align: center;
margin: 0px auto;
}
#st-1 .st-btn > img{
height: 30px !important;
width: 30px !important;
top: 8px !important;
}
.fb-share-button, .snapchat-creative-kit-share{
margin: .15% .5%;
}
.social-wrap h3{
margin-right: 1%;
}
input[type="submit"]{
  background: #ef4056;
  color: #fff;
  font-size: 1.3rem;
  text-transform: uppercase;
  border: 0;
  border-radius: 25px;
  padding: .5rem 2rem;
  border: 1px solid #00627b;
}
input[type="submit"]:hover{
background: none;
border: 1px solid #fff;
color: #fff;
}
/* Fonts
-------------------------- */
h1, h2, h3, h4, h5, h6{
font-family: mr-eaves-modern, sans-serif;
}
h1{font-size: 2.0em;}
h2{font-size: 1.7em;}
h3{font-size: 1.5em;}
h4{font-size: 1.3em;}
h5{font-size: 1.1em;}
h6{font-size: .9em;}
h1.page-title{
color: #e6e6e6;
}

/* Header
-------------------------- */
#logo{
width: 20%;
margin: 0 0 0 3%;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
}
#masthead{
width: 100%;
background: #fff;
position: initial;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
z-index: 200;
position: fixed;
top: 0;
}
#masthead.smaller{
position: fixed;
}
#masthead.smaller #logo{
width: 15%;
}
.header-wrap{
max-width: 1300px;
margin: 0px auto;
position: relative;
}
/* Nav
-------------------------- */
#main-navigation-wrap{
width: 70%;
margin: 25px 30px 0;;
right: 10%;
float: right;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
}
.primary-navigation-wrap ul{
text-align: right;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
}
#masthead.smaller .primary-navigation-wrap ul{
margin-bottom: 0;
}
.primary-navigation-wrap ul li{
display: inline-block;
vertical-align: top;
list-style: none;
margin: 1%;
}
.primary-navigation-wrap ul li.current-menu-item a{
font-weight: bold;
}

.primary-navigation-wrap ul li a{
text-transform: uppercase;
color: #00627b;
position: relative;
}
.primary-navigation-wrap ul li a:after{
  position: absolute;
   left: 0;
   content: '';
   height: 30px;
   width: 100%;
   border-bottom: solid 2px #ef4056;

   -webkit-transform: scaleX(0);
   -ms-transform: scaleX(0);
   transform: scaleX(0);

   -webkit-transition: -webkit-transform 250ms ease-in-out;
   transition: transform 250ms ease-in-out;
}
.primary-navigation-wrap ul li a:hover:after{
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);

}
#responsive-menu-pro-container li.responsive-menu-pro-item{
padding: 3%;
margin: 3% 0;
}
button#responsive-menu-pro-button{
  position:relative;
  margin: 0;
  float: right;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -ms-transition: all .3s ease;
}
#masthead.smaller button#responsive-menu-pro-button{
  margin-top: -10px;
}
#masthead.smaller #main-navigation-wrap{
margin: 15px 60px 0;
}
li.promiseBtn{
display: none !important;
}
.home li.promiseBtn{
display: inline-block !important;
}
li.homePromise{
display: inline-block !important;
}
.home li.homePromise{
display: none !important;
}
/* Slider
-------------------------- */
.owl-carousel.home{
height: 422px;
overflow: hidden;
}
.owl-carousel.home .item{
position: relative;
}
.slide-wrap .overlay{
position: absolute;
width: 47%;
text-align: left;
height: 275px;
top:0;
left:5%;
bottom:0;
margin: auto;
background: rgba(0,98,123,0.77);
padding: 2%;
z-index: 100;
}
.slide-wrap .overlay h3{
color: #fff;
font-size: 2.6rem;
text-transform: uppercase;
font-style: normal;
font-weight: 100;
}
.slide-wrap .overlay p{
color: #FAB634;
text-transform: uppercase;
font-size: 1.3rem;
font-style: normal;
font-weight: 100;
letter-spacing: .1rem;
}
.owl-nav{
position: absolute;
width:100%;
top: 37%;
z-index: 100 !important;
}
.owl-nav button{
  font-size: 5rem !important;
  color: #fff !important;
  position:absolute;
  opacity: .8;
}
.owl-nav button.owl-prev{
left: 0;
}
.owl-nav button.owl-next{
right: 0;
}
.slide-wrap{
width: 100%;
height: 422px;
position: relative;
top: 75px;
margin: 1% 0 10%;
}
/* Home
-------------------------- */
.home-content{
margin: 5% 0;
font-size: 1.3rem;
}

.home-content h3{
font-size: 1.9rem !important;
text-transform: uppercase;
color: #00627b;
max-width: 420px;
border-bottom: 4px solid #ef4056;
padding-bottom: 3%;
margin-bottom: 3%;
}
.home-content h4{
line-height: 185%;
}
.button-circle{
position: absolute;
padding: 2.75%;
color: #333 !important;
font-size: 2rem;
text-align: center;
/* background: #00627b;*/
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00627b+0,ffffff+65,0e6176+100 */
background: #00627b; /* Old browsers */
background: -moz-linear-gradient(45deg,  #00627b 0%, #ffffff 65%, #00627b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #00627b 0%,#ffffff 65%,#00627b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #00627b 0%,#ffffff 65%,#00627b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00627b', endColorstr='#00627b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border: 3px solid #fff;
bottom: -20px;
right: 5%;
z-index: 101;
width: 200px;
height: 200px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
line-height: 130%;
transition: all .4s ease;
-webkit-transition: all .4s ease;
-ms-transition: all .4s ease;
outline: 0;
}
.button-circle:hover{
background: #fff !important;
color: #ef4056 !important;
border: 3px solid #ccc;
}
.promise-list{
width: 80%;
margin: 4% auto 0;
}
.promise-list .list_item{
width: 100%;
display: flex;
text-align: left;
margin: 3% 0 1%;
}
.promise-list .icon{
margin: 0 2% 0 0;
width: 5%;
display: inline-block;
vertical-align: top;
}
.promise_item span{
font-weight: bold;
text-transform: uppercase;
}
.accordion input {
	display: none;
}
.promise_item {
font-size: 1.6rem;
display: inline-block;
vertical-align: top;
}
.toggleBox{
width: 100%;
margin: 3% 0;
}
.toggleBox a.toggle{
position: relative;
display: inline-block;
vertical-align: top;
width: 25px;
height: 25px;
color: #ef4056;
}
.toggleBox a.toggle:after {
  content:'\f055';
  font-family: FontAwesome;
  position:absolute;
  top:1px;
    -webkit-transition:all 300ms ease-in 0s;
    -moz-transition: all 300ms ease-in 0s;
    -o-transition: all 300ms ease-in 0s;
  transition: all 300ms ease-in 0s;}

.list_item.active a.toggle:after {
    content: '\f056';
    font-family: FontAwesome;
    color: #ef4056;
    top: 0px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.accordion {
  font-size: 1rem;
  width: 100%;
  margin: 0 auto;
  border-radius: 5px;
}


.accordion__item.active:last-child .accordion-header {
  border-radius: none;
}

.accordion:first-child > .accordion__item > .accordion-header {
  border-bottom: 1px solid transparent;
}

.toolkitHome{
background: url('https://nmsafepromise.org/wp-content/themes/BlueMoon/Images/zia_bg.jpg') no-repeat #00627b;
background-position: 90% !important;
width: 100%;
margin-top: 3%;
}
.toolkitHome h3{
font-size: 2.5rem !important;
color: #fff;
padding: 3% 3%;
text-transform: uppercase;
}
.embed-container {
        position: relative;
        padding-bottom: 56.25%;
        overflow: hidden;
        max-width: 100%;
        height: auto;
    }

    .embed-container iframe,
    .embed-container object,
    .embed-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* Modal Form
-------------------------- */
.modal-content{
background: #00627b !important;
color: #fff;
}
.modal-dialog{
max-width: 60% !important;
}
.gform_wrapper form{
text-align: center !important;
}
.gform_wrapper .top_label .gfield_label, .gform_wrapper legend.gfield_label{
width: 100% !important;
margin-left: 26%;
text-align: left;
}
.promiseChkBox .gfield_label{
  margin-left: 0% !important;
}
.gfield_checkbox li input,
.gfield_checkbox li input[type=checkbox],
.gfield_radio li input[type=radio]{
display: inline-block !important;
vertical-align: top !important;
margin: 13px 5px 0 0 !important;
}
.ginput_recaptcha{
margin: 0px auto;
width: 30%;
}
.gform_wrapper .gfield_checkbox li, .gform_wrapper .gfield_radio li{
  line-height: 200px;
}
.gform_wrapper ul.gfield_checkbox li label, .gform_wrapper ul.gfield_radio li label{
vertical-align: top;
}
.promiseChkBox{
display: inline-block;
margin: 0px auto;
width: 100%;
text-align: left;
font-size: 1.8rem;
padding-left: 17%;
position: relative;
}
.promiseChkBox .gfield_required{
display: none;
}
.gfield_required{
color: #ef4056 !important;
}
.promiseChkBox .gfield_description:after{
content: '*';
color: #ef4056;
margin-left: 5px;
}
.promiseChkBox ul.gfield_checkbox li input[type=checkbox]:checked+label,.promiseChkBox ul.gfield_checkbox li input[type=checkbox]:not(:checked)+label {
  margin-left:19px;
  font-weight: 400;
  font-size: 1.8rem;
}
.promiseChkBox ul.gfield_checkbox li input[type=checkbox]:first-line{
font-weight: bold;
text-transform: uppercase;
color: #FAB634;
}
/*Custom subscribe box for .promiseChkBox class*/
.promiseChkBox [type="checkbox"]:not(:checked), .promiseChkBox [type="checkbox"]:checked {
  position: absolute!important;
  left: -9999px;
}

.promiseChkBox [type="checkbox"]:not(:checked) + label, .promiseChkBox [type="checkbox"]:checked + label {
  position: relative!important;
  padding-left: 1.0em!important;
  cursor: pointer!important;
}

.promiseChkBox [type="checkbox"]:not(:checked) + label:before, .promiseChkBox [type="checkbox"]:checked + label:before {
  content: '\f111';
  font-family: FontAwesome;
  position: absolute;
  left: -17px;
  top: 0;
  padding: 2px;
  font-size: 2rem;
  transition: all .4s ease;
  -webkit-transition: all .4s ease;
  -ms-transition: all .4s ease;
}

.promiseChkBox [type="checkbox"]:not(:checked) + label:after, .promiseChkBox [type="checkbox"]:checked + label:after {
  /*content: '\f336';*/
  content: '\f058';
  font-family: FontAwesome;
  /*color: #00627b;*/
  color: #FAB634;
  position: absolute;
  top: 0;
  left: -17px;
  font-size: 2rem;
}

/* checked mark aspect changes */
.promiseChkBox [type="checkbox"]:not(:checked) + label:after {

  opacity: 0;
  transform: scale(0);
}

.promiseChkBox [type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
.promiseChkBox [type="checkbox"]:not(:checked) + label:before {

  opacity: 1;
  transform: scale(1);
}

.promiseChkBox [type="checkbox"]:checked + label:before {
  opacity: 0;
  transform: scale(0);
}
.gravity-tooltip{
background: none !important;
}
.gravity-tooltip .gravity-tooltiptext{
font-size: 1.2rem !important;
}
.gravity-tooltip:after{
background: none !important;
content:'\f059';
color: #fff;
font-family: FontAwesome;
}
li.promiseEmail label{
position: relative;
}

.homeForm{
background: #00627b;
border: 2px solid #ccc;
padding: 3%;
color: #fff;
margin: 3% 0 0;
}
#logo.form{
margin: 0px auto;
background: #fff;
padding: 1%;
width: 40%;
}
button.promise-btn{
  background: #FAB634 !important;
  font-size: 1.5rem;
  color: #000;
  text-transform: uppercase;
  border: 1px solid #000;
  padding: .3rem 1.5rem;
  text-align: center;
}
.button-promise{
width: 100%;
text-align: center;
margin: 4% 0 0%;
}
.no-access{
width: 100%;
text-align: center;
margin-bottom: 4%;
}
.narwhal{
font-size: 8rem;
margin: 0px auto;
text-align: center;
color: #ef4056;
}
/* Interior
-------------------------- */
header.interior{
padding: 5% 0;
width: 100%;
/* background: #FAB634; */
margin: 100px 0 3%;
text-align: center;
background-size: cover !important;
background-position: 100% 0% !important;
position: relative;
}
body.page-template-thank-you header.interior{
padding: 5% 0;
}
header.interior .overlay{
background: rgba(0,98,123,.9);
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
header.interior .wrap{
max-width: 1320px;
margin: 0px auto;
}
header.interior h1.page-title{
font-size: 2.9rem;
color: #ffcb05;
position: relative;
width: 60%;
text-align: center;
margin: 0px auto;
text-transform: uppercase;
font-weight: bold;
}

/*  header.interior h1.page-title .bg {
    background: rgba(255,226,147,.7);
      max-width: 300px;
      padding: 2% 3%;
      position: absolute;
      z-index: 100;
      left: 0;
      right: 0;
      margin: 0px auto;
      top: -35px;
  } */

/*header.interior h1.page-title span:before,header.interior h1.page-title span:after{
  border-top: 4px solid #fff;
  content: '';
  width: 40%;
  margin: 0px auto;
  position: absolute;
  top: 50%;
}
header.interior h1.page-title span:before{
left: 0;
}
header.interior h1.page-title span:after{
right: 0;
}*/
.thank{
align-self: center;
}
.thank h3{
font-size: 2.5rem;
}
h3.pink{
color: #ef4056;
text-align: center;
width: 100%;
}
h3.brand{
text-align: center;
width: 100%;
margin: 2% 0;
font-size: 2.4rem;
}
h3.shareHeader, h3.logoHeader{
text-align: center;
width: 100%;
background: #21abb0;
color: #fff;
text-transform: uppercase;
padding: 1% 0;
font-size: 1.8rem;
margin-bottom: 0;
letter-spacing: .1rem;
cursor: pointer;
position: relative;

}
h3.shareHeader.collapsed{
width: 100%;
padding: 1% 0;
margin: 1% 0;
}
h3.shareHeader:hover:after{
color: #ef4056;
}
h3.shareHeader:after {
  content: "\f055";
  font-family: FontAwesome;
  font-size: 1.2em;
  position: relative;
  margin: 5px 1%;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transform: rotate(0deg);
}

h3.shareHeader.active:after {
  transform: rotate(-180deg);
  content: '\f056';
  font-family: FontAwesome;
}
.shareBox{
background: #f8f0e2;
margin: 0 auto 1%;
text-align: center;
width: 100%;
}
.shareBox.four_logos{
  background: none;
  margin: 2% auto 1%;
  text-align: center;
  width: 100%;
}
.shareBox img.fbFrame {
    width: 20%;
    margin: 2% 5%;
    /* height: auto !important; */
    flex-grow: 3;
    display: inline-block;
    vertical-align: top;
}
.thankShare{
text-align: center;  
}
.promises{
margin: 2% 0 0;
}
.resource{
padding: 3%;
}
.sample{
text-align: center;
background: #f8f0e2;
width: 100%;
padding: 2% 8%;
margin-bottom: 1%;
}
.sample h4{
font-size: 1.7rem;
}
.shareBox img.post_image{
width: 40%;
display: inline-block;
vertical-align: top;
margin: 3%;
}
.shareBox img.cover_image{
width: 70%;
display: inline-block;
vertical-align: top;
margin: 3%;
}
.shareBox .social_links{
width: 50%;
margin: 0px auto;
text-align: left;
line-height: 100%;
}
.four_logos img.fourLogo{
width: 21%;
display: inline-block;
vertical-align: top;
}
.counter{
background: #016076;
color: #fff;
text-align: center;
position: relative;
}
.counter .heart{
position: absolute;
color: #ef4056;
font-size: 1.2rem;
right: 7%;
top: 7%;
}
.counter .border{
  border: 3px solid #FAB634 !important;
  margin: 3% 1%;
  padding: 3%;
}
.counterNum{
font-size: 5rem;
color: #fff;
font-weight: bold;
}
.divider{
width: 100%;
background: #ffcb05;
height: 3px;
margin: 3% 0;
}

.yellow h3{
background: #FAB634;
text-align: center;
font-size: 1.3rem;
padding: 2% 0;
margin: 0;
}
.yellow h2{
margin-bottom: 2%;
}
.yellow .instructions{
background: #016076;
color: #fff;
width: 100%;
padding: 2%;
float: left;
font-size: 1.3rem;
}
.darkTurq h3{
background: #00627b;
color: #fff;
text-align: center;
font-size: 1.3rem;
padding: 2% 0;
margin: 0;
}
.darkTurq h2{
margin-bottom: 2%;
}
.darkTurq .instructions{
background: #ffcb05;
color: #333;
width: 100%;
padding: 2%;
float: left;
font-size: 1.3rem;
}
.social{
margin: 3% 0 0;
}
/* Footer
-------------------------- */
.footer-above{
background: #79cdd0;
width: 100%;
padding: 3% 0 .5%;
}
.footer-above .wrap{
max-width: 1300px;
margin: 0px auto 3%;
}
.footer-above .wrap .main_tagline h3{
color: #016076;
text-transform: uppercase;
font-style: italic;
letter-spacing: .1rem;
}
.footer-above #logo-footer{
  width: 70%;
  margin:0px auto;
}
.footer-above .main_tagline{
align-self: center;
}
#footer{
    width: 100%;
}
#footer .site-footer{
    max-width: 1320px;
    margin: 0px auto;
}
footer .right{
text-align: right;
}
.cookie-banner {
  position: fixed;
  bottom: 40px;
  left: 10%;
  right: 10%;
  width: 80%;
  padding: 2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #eee;
  border-radius: 5px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  z-index: 20;
  font-size: 2rem;
}
.cookie-banner a{
color: #79cdd0 !important;
}
.close {
  height: 20px;
  background-color: #777;
  border: none;
  color: #333;
  border-radius: 2px;
  cursor: pointer;
  font-size: 1.5rem;
}
/*--------Responsive---------*/
@media only screen and (max-width: 600px) {
  #content{
  padding: 0 1rem;
  }
  .owl-carousel.home, .owl-carousel .owl-stage-outer, {
    height: 100%;
  }
  .owl-carousel.home .item{
  height: 422px;
  }
  .owl-carousel .owl-item img{
  height: 100%;
  object-fit: cover;
  }
.slide-wrap .overlay{
  top: 10%;
  width: 80% !important;
  margin: 0px auto;
  left: 0;
  right: 0;
  }
.slide-wrap .overlay h3{
  font-size: 1.3rem !important;
  }
  .button-circle{
  left: 0;
  right: 0;
  width: 150px;
  height: 150px;
  margin: 0px auto;
  font-size: 1.5rem;
  padding: 1.6rem;
}
.promise-list{
width: 100%;
margin: 6% 0;
}
.toggleBox .promise_item{
font-size: 1.3rem;
}
.promise-list .icon{
padding: 3% 3%;
}
#logo{
width: 60%;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
}
#masthead.smaller #logo{
width: 45%;
}
.footer-above #logo-footer{
  width: 70%;
  margin: 0px auto;
}
.footer-above .main_tagline{
text-align: center;
width: 70%;
margin:0px auto;
}
.home-content{
margin: 40% 0 10%;
}
.toolkitHome{
background: #00627b;
}
footer .col-sm{
text-align: center;
}
.modal-dialog{
max-width: 90% !important;
margin: 0px auto;
}
.shareBox .social_links{
width: 70%;
}
h3.shareHeader{
font-size: 1.6rem;
}
h1.page-title.share{
font-size: 2rem !important;
}
.four_logos img.fourLogo{
width: 47%;
margin: 1% 0;
}
}
@media only screen and (min-width: 600px) {
  .owl-carousel.home, .owl-carousel .owl-stage-outer, {
    height: 100%;
  }
  .owl-carousel .owl-item img{
  height: 100%;
  object-fit: cover;
  }
}