/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
 
form{
 background-color: transparent !important;
  border: none !important;
  padding: 30px !important;
}
form input[type='text'], form input[type='email'], form input[type='password'], form input[type='tel'], form input[type='number'], form input[type='search'], form select, form textarea{
     border: 1px solid #707070 !important;
}
.form-row p{
 font-size: 20px !important; 
}
.form-wizard-content-wrapper h2{
 font-size: 50px;
  
  
}

.Profile-h2{
  margin-left: 20%;
}
.form-column {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.full-wdth{
    width: 100%;
}
.form-column, .full-wdth {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 10px;
}

.float-right{
    float: right;
}
.float-left{
    float: left;
}
label {
    display: inline-block;
    margin-bottom: .5rem;
}
.form-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: 0;
    margin-left: 0;
}
.paddingleft{
 padding-left: 20%; 
 width: 100%;
}
.checkbox-row{
  align-items: center;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-left: 13px;
}
.checkbox-row p{
 margin: 0;
  padding-left: 10px;
}
.form-wizard-wrapper {
    max-width: 1170px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    padding-top: 40px;
    z-index: 1;
    height: 1270px;
}
.form-wizard-wrapper .form-wizardmove-button {
    position: absolute;
    width: 153.4px;
    left: 0;
    top: 0;
    bottom: -4px;
   /* color: white;
     background: none; */
    -webkit-transition: all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1) 0s;
    -moz-transition: all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1) 0s;
    -ms-transition: all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1) 0s;
    -o-transition: all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1) 0s;
    transition: all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1) 0s;

}
.form-wizard-wrapper ul {
   background-color: #fff;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}
.form-wizard-wrapper ul span{
 color: black; 
}
.active > .form-wizard-wrapper ul span{
 color: white; 
}
.form-wizard-wrapper ul li {
    
  display: flex;
    justify-content: space-between;
    list-style-type: none;
    border-radius: 50%;
    width: 125px !important;
    height: 125px;
  /**  border: 1px solid; **/
    text-align: center;
    align-items: center;
  
}
.form-wizard-wrapper ul li a {
    display: block;
    padding: 10px;
    width: 100%;
    color: white;
    text-decoration: none;
}
.form-wizard-wrapper ul li a:focus{
    outline: 0;
}
.form-wizard-wrapper ul li a span {
    position: relative;
    z-index: 1;
}
.form-wizard-wrapper ul li.active a {
    background-color: #ffffff;
}
.form-wizard-wrapper .form-wizard-content {
    background-color: #ffffff;
    padding: 20px;
    color: #777777;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1) 0s;
    transform: translate3d(100%, 0px, 0px);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}
.form-wizard-wrapper .form-wizard-content.show {
    transform: translate3d(0px, 0px, 0px);
}
.form-wizard-wrapper .form-wizard-content h6 {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 10px;
}
.form-wizard-wrapper .form-wizard-content .form-wizard-next-btn,
.form-wizard-wrapper .form-wizard-content .form-wizard-previous-btn {
    background-color: #000000;
    color: #ffffff;
    display: inline-block;
    padding: 6px 26px;
    
    margin-top: 20px;
    text-decoration: none;
}
.form-wizard-wrapper .form-wizard-content .form-wizard-previous-btn {
    background-color: #f1f1f1;
    color: #000000;
}

.form-wizard-content-wrapper {
    height: 1200px;
    position: relative;
background-color: #fff;
}
.form-wizard-content p{
 font-size: 18px !important; 
  padding-top: 20px;
  color: black;
}
.text-field {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.newslettergroup{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        }
        .newsletters-items{
            width: 29%;
            height: 170px;
            margin: 1%;
          background-color: transparent;
          background-size: cover;
          background-repeat: no-repeat;
           box-shadow: 3px 6px 8px 0px #00000021;
}
.newsletter-title{
            background-color: black;
            padding: 3px;
              font-weight: 900;
            text-align: center;
            color: white;
}
.next-btn-newsletter{
    display: flex;
    background-color: black;
    align-items: center;
    justify-content: center;
}
.channel-prefrence{
 display: flex;
      justify-content: space-around;
  margin-left: -58px;
}
.frequency-btn{
  border: 1px solid #707070;
  color: #6C757D;
  padding: 10px 25px 10px 25px;
   text-decoration: none;
  min-width: 144px;
    text-align: center;
}
form input[type='text']{
      border: 1px solid #707070 !important;
}
.frequency-btn a{
     text-decoration: none;
}
.active{
  
  color: white !important;
}
.active span, .active a{
 color: white !important; 
}
.activech{
 background-color: #6C757D;
  color: white;
   text-decoration: none;
}
.activech a {
  color: white !important; 
   text-decoration: none;
}
.btns a:focus,.btns a:hover{
   color: white !important; 
   text-decoration: none;
}
.radiobox{
  display: flex;
}
.activeNL{
 border: 10px solid black; 
}
.overbutton{
    width: 100%;
    height: 170px;
    position: absolute;
    top: 10px;
    z-index: 2;
}
.hs-fieldtype-radio,.hs_submit{
 display: none;
}
.actions{
   display: none;
}
.legal-consent-container{
 display: none; 
}
.form-title{
 display: none; 
}
.hs_cos_wrapper_type_form{
 width: 100%; 
}
 .radiobox{
       margin-bottom: 14px;
}

.newsletters-items{
  /*  -webkit-filter: grayscale(100%); Safari 6.0 - 9.0 
  filter: grayscale(100%);*/
  background-position: bottom;
  background-size: auto;
  &:hover {
      -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
       border: 5px solid #8cc63f;
         
  }

  &:active {
      -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
     border: 5px solid #8cc63f;
   
  } 
  
}
a:hover{
 color: white; 
}
a, a:hover{
  text-decoration: none !important;
}
a:active{
  text-decoration: none !important;
}
.activeitems{
     -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  border: 5px solid #8cc63f;
}
.items-title-options{
 color: white !important; 
}
.radiobox label{
     display: inline-block;
    max-width: 100%;
    margin-bottom: 0px;
    font-weight: 300;
    margin-left: 10px; 
    color: #000;
}
.form-wizard-next-btn{
    font-weight: 900;
    font-size: larger;
    padding: 9px 59px !important;
}
 
.shop{
  
 background-position-y: 33px !important; 
}
 
@media screen and (max-width: 1200px) {
 .form-wizard-wrapper .form-wizardmove-button{
  display: none;
  }
  .form-wizard-wrapper{
      height: 805px !important;
  }
  .form-wizard-wrapper ul li{
       border-radius: 0; 
       height: 0;
  }
  .Profile-h2{
   margin-left: 0; 
  }
  
  .top-path li{
   border-bottom: 3px solid;
    margin-left: 1% !important; 
    background-image: none !important;
  }
  
  .form-wizard-wrapper ul{
    margin: 0 auto;
    width: 95%;
  }
  .socialmedia--icons img{
       margin: 5px !important;
    max-width: 25px !important;
    }
  .socialmedia--icons{
    width: 90% !important;
}
  }
  form{
      padding: 0px !important;
  }
  .paddingleft{
   padding-left: 0%; 
  }
  .channel-prefrence{
   margin-left: 0;
    display: flex;
    justify-content: space-around;
    flex-direction: column; 
  }
  .shop{
       background-position-y: 46px !important; 
  }
  .newsletters-items{
   width: 48%;
    max-width: 330px;
    height: 170px; 
  }
  .newslettergroup{
       width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-direction: inherit;
    align-items: center; 
  }
  .form-wizard-wrapper{
    max-width: 1170px;
    margin: 0 auto;
     
    position: relative;
    padding-top: 40px;
    z-index: 1;
    
  }
  .Selection{
   height: 1500px!important; 
  }
  .newslettler{
    background-image: url(https://explore.wwf.org.za/hubfs/Preference%20Center/Vertical/New_Newsletter_Preference%20Centre_Vertical.png) !important;
    background-position: center !important;
    background-size: cover;
  }
  .LEGACY{
    background-image: url(https://explore.wwf.org.za/hubfs/Preference%20Center/Vertical/New_Legacy_Preference%20Centre_Vertical.png) !important;
    background-position: center !important;
    background-size: cover;
  }
  .SUPPORTERS{
    background-image: url(https://explore.wwf.org.za/hubfs/Preference%20Center/Vertical/New_SASSI%201_Preference%20Centre_Vertical.png) !important;
    background-position: center !important;
    background-size: cover;
  }
  .ADOPTIONS{
    background-image: url(https://explore.wwf.org.za/hubfs/Preference%20Center/Vertical/PrefCentre_Adoptions_Vertical.png) !important;
    background-position: center !important;
    background-size: cover;
  }
  .CONSERVATIONS{
    background-image: url(https://explore.wwf.org.za/hubfs/Preference%20Center/Vertical/New_SASSI%202_Preference%20Centre_Vertical.png) !important;
    background-position: center !important;
    background-size: cover;
  }
  .GREENTRUST{
    background-image: url(https://explore.wwf.org.za/hubfs/Preference%20Center/Vertical/New_GreenTrust_Preference%20Centre_Vertical.png) !important;
    background-position: center !important;
    background-size: cover;
  }
  .PANDA{
    background-image: url(https://explore.wwf.org.za/hubfs/Preference%20Center/Vertical/New_WearItWild%202_Preference%20Centre_vertical.png) !important;
    background-position: center !important;
    background-size: cover !important;
  }
  .SASSI{
    background-image: url(https://explore.wwf.org.za/hubfs/Preference%20Center/Vertical/New_SASSI%203_Preference%20Centre_Vertical.png) !important;
    background-position: center !important;
    background-size: cover;
  }
   .WILD{
    background-image: url(https://explore.wwf.org.za/hubfs/Preference%20Center/Vertical/New_WearItWild%201_Preference%20Centre_Vertical.png) !important;
     background-position: center !important;
     background-size: cover;
  }
   .SHOP{
    background-image: url(https://explore.wwf.org.za/hubfs/Preference%20Center/Vertical/New_WWF%20Shop_Preference%20Centre_Vertical.png) !important;
     background-position: center !important;
     background-size: cover;
  }
}
.inputs-list li{
      border: none !important;
      border-radius: 0 !important;
      height: auto!important;
      min-width: 100% !important;
}

.submit{
      background-color:transparent;
      border:1px solid #6C757D;
      font-size: 30px !important;
      background-color: white !important;
      color: black !important;
      display: flex !important;

}
.submit:hover{
      background-color: #707070 !important;
      border:none;
      color: white !important;
}
div .submitbtn:hover{
      background-color: #707070;
      border:none;
      color: white !important;
}
.submitbtn{
      background: transparent !important;
      color: black; 
      font-size: 30px;
      font-weight: 200;
}
.submitbtn:hover a{
      color: white;
}
.form-wizard-next-btn:hover{
       background-color: #707070;
       border:none;
}
.form-wizard-wrapper ul li{
      background-position: center;
      background-repeat: no-repeat;
      background-size: 60%; 
}
li.form-wizardmove-button{
      filter: opacity(0.1); 
}
.socialmedia--icons img{
      max-width: 50px;
      margin: 10px;
}
.socialmedia--icons{
      display: flex;
      width: 66%;
      margin: 0 auto;
      justify-content: space-around;
      align-items: center;
      align-content: center;
      flex-wrap: wrap;
      padding: 10px 0px 10px 1px;
}
.Sub-note{
   font-size: 14px;
    color: #000000;
    text-align: center;
}