/*
    Theme Name: Custom New css
    Version: 2.0
    Template: Future Health Biobank
    Template Version: 2.0

*/
/*----------------General----------------------------*/
.site-header, .cd-main-header{
  background-color: #f7f7f7;
}
.accreditation{
  overflow: hidden;
  background-color: #ffffff;
}
.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.quote, .wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.callback {
    margin:1em;
}

@media only screen and (max-width: 1024px) {
.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.quote, .wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.callback {
    width:90%;
}

}
.standardcol footer, .premiumcol footer{
  display:none;
}
article.right-column-form.brochure {
    margin-left:2em;
    margin-top:1em;
}
section.clearfix {
    margin: 0 auto;
}

.fa.fa-chevron-right {
    margin-left:0.15em;
}


@media only screen and (max-width: 680px) {
.left_col, .left_col_singlepost {
    width: 23em;
    margin-right: 0;
}
.fhbb_blog_container article.post {
    margin: 0 auto;
    width: 19em;
}
.right_col, .right_col_singlepost {
  width: 23em;
}
}

/*----------------Widget-----------------------------*/

.widget-title{
	background-color: #E5426A;
	color:#ffffff;
	font-size: 1.250em;
    padding: 1em;
    font-weight: bold;
    border: 1px solid #ffffff;
    border-radius: 8px 8px 0 0;
    margin:0;

    
}
.widget-even h2{
background-color: #E5426A;
}
.widget-even li, .widget-odd li{
  padding:1.2em 1em 0 1em;
}
.widget-even ul, .widget-odd ul{
  padding-bottom: 2em;
}
.right_col, .right_col_singlepost{
  padding-top:1em;
}
section.widget_text{
  background-color: #fff;
}
.textwidget p {
  margin-top:0;
  margin-bottom:0;
}
.widget, section.widget-last {
	padding:0;
  overflow: hidden;
  background-color: #F2F1F1;
  border-radius: 8px 8px 0 0;
  border-bottom: 0;

}
div.navigation{
  background-color: rgba(87,87,86,0.25);
  height: 3em;
 padding-top: 0.7em;
 text-align: right;
 padding-right: 2em;
 border-radius: 8px 8px 0 0;
 margin-top:1em;
}
div.navigation-bottom{
  background-color: rgba(87,87,86,0.25);
  height: 3em;
 padding-top: 0.7em;
 text-align: right;
 padding-right: 2em;
  border-radius: 0 0 8px 8px ;
}
.navigation-bottom li a,
.navigation-bottom li a:hover,
.navigation-bottom li.active a,
.navigation-bottom li.disabled {
  color: #000;
  text-decoration:none;
}

.navigation li, .navigation-bottom li {
  display: inline;
  margin-right:1em;
}

.navigation-bottom li a,
.navigation-bottom li a:hover,
.navigation-bottom li.active a,
.navigation-bottom li.disabled {
  background-color: #ffffff;
  border-radius: 3px;
  cursor: pointer;
  padding: 12px;
  padding: 0.75rem;
}

.navigation-bottom li a:hover,
.navigation-bottom li.active a {
  background-color: #E5426A;
  color:#fff;
}
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
  color: #000;
  text-decoration:none;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
  background-color: #ffffff;
  border-radius: 3px;
  cursor: pointer;
  padding: 12px;
  padding: 0.75rem;
}

.navigation li a:hover,
.navigation li.active a {
  background-color: #E5426A;
  color:#fff;
}
/*----------------accordion FAQ----------------------*/

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.6s;
    margin-bottom: 1em;
    margin-top: 1em;
    border-radius:2em;

}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}
#name {
  text-decoration:none;


}
a#name:visited {
  color:#000;
}
.subtitle {
    font-size: 1.2em;
}
.advice_panel_article{
    width: 100%;
    margin:auto;
}
.img_quote_menu{
  display: inline-block;
  float: left;
}
.title{
  color: #E5426A;
}
@media only screen and (max-width: 1200px) {

.advice_panel_article{
    width: 100%;
    margin:auto;
 }
button.accordion {
    font-size: 0.8em;
 }
 .twentyfour_icon p img{
    width:40%;
 }
}
.nav-up{
    top: -240px;
}
/*------------back to top-----------------*/
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #E5426A;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#myBtn:hover {
  background-color: #555;
}
i.fa.fa-arrow-up {
    color:white;
}

/*price box*/
p.prices_cta_container_inner {
  font-size:1.1em;
}
h2.prices_cta_container_inner{
   font-size:1.5em;
}

/*---------------new class page------------------*/
.header-class{
  border-bottom: 0;
}
.subscribe{
  width: 50%;
border-bottom: 0;
}
.subscribe-title-mobile{
  visibility: hidden;
  display:none;

}
.mobile{
  border-bottom: #dadada solid 1px;
  padding-bottom: 1.6em;
}
.subscribe-title{
  width: 50%;
font-size: 1.5em;
font-weight: 500;
margin: 0;
float: left;
padding-top: 0.4em;
padding-right: 0.2em;
}
button.subscribe-cta{
width: 49%;
background-color: #E5426A;
font-weight: 700;
font-size:1.1em;

}
.program-class{
  border-bottom: 0;
}
.program {
  width: 58%;
float: left;
}
.class-program{
border-bottom: #dadada solid 1px;
padding-bottom: 1em;
padding-top: 0.2em;
margin: 0 1em;
}
.class-time{
  margin: 0;
color: #E5426A;
font-weight: 600;
font-size: 1.2em
}
.class-title{
  font-size: 1.2em;
}
.speaker{
  margin: 0.4em;
font-size: 0.8em;
}
.description{
  margin: 0;
}
.info {
width: 38%;
display: inline-block;
background-color: #475462;
border-radius: 10px;
color: white;
padding-bottom: 2em;
}
.program-title{
background-color: #E5426A;
border-radius: 12px 12px 0px 0px;
padding: 0.8em;
margin-bottom: 1.8em;
}
.info-title{
background-color: #4c5f6f;
border-radius: 12px 12px 0px 0px;
padding: 0.8em;
margin-bottom: 2em;
}
.class-header {
  color: white;
font-size: 1.8em;
}

.info-place, .info-address, .info-time {
margin-bottom: 2em;
border-bottom: solid 1px;
margin-left: 1em;
margin-right: 1em;
}
@media only screen and (max-width: 1200px) {
  .info, .subscribe, .program, .subscribe-title {
width: 90%; 
margin: 0em 1em 0.2em;

 }

 .program{
  width: 90%; 
  margin: 0 auto 1em auto;
 float: none;
 }
 button.subscribe-cta {
  width: 70%;
  }
 article.segment_twentyfour{
  width: 75%;
  }
  .mobile{
  visibility: visible;
  display:inline;
  border-bottom: #dadada solid 1px;
  padding-bottom: 1.6em;
  }
  
}

/*-----------------Faq tab--------------------*/

/* Style the tab buttons */
.tablink {
    background-color: #E5426A;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    width: 24.5%;
    margin-right:0.2em;
    border-radius:2em;
    }

/* Change background color of buttons on hover */
.tablink:hover {
    background-color: #777;
}

/* Set default styles for tab content */
.tabcontent {
    display: none;
    text-align: center;
    padding-top: 2em;
}
.tab-button-container{
  width:100%;
  margin:auto;

}

@media only screen and (max-width: 1024px) {

 .tab-button-container{
  width:100%;
  margin:auto;

}
.tablink{
  width:46%;
  
  margin-bottom: 1em;
  margin-left: 0.7em;
 }

}
@media only screen and (max-width: 750px) {

 .tab-button-container{
  width:100%;
  margin:auto;

}
.tablink{
  width:42%;
  
  margin-bottom: 1em;
  margin-left: 0.7em;
 }
}
 @media only screen and (max-width: 640px) {

 .tab-button-container{
  width:100%;
  margin:auto;

}
.tablink{
    width: 44%;
    margin-bottom: 1em;
    margin-left: 1em;
    font-size: 0.9em;
 }

}
/*----------------Listing page------------------*/
.city-title{
  height:100px;
}
.city-header{
  font-size: 1.8em;
}
.listing, .listing.listing-closed{
  height: 270px;
  border-radius: 12px;
  color: white;
  width:49%;
  display: inline-block;
  margin-bottom:2em;
  
}

div.listing-open{
  background-color: #e76481 ;
 
}
.city-title.listing-open {
  background-color: #E5426A;
 border-radius: 12px 12px 0px 0px;
 padding: 0.8em;
 margin-bottom: 0.8em;
 border-bottom: solid 1px #e86e87;
}
h2.city-header.listing-open , h5.city-date.listing-open {
  background-color: #E5426A;
  color:#ffffff;
}
.class-title.listing-open {
  display:none;
}
.button-listing-container{
  margin-top: 1.5em;
  height:80px;
}
.listing-closed{
  background-color:#dadada;
}
.city-title.listing-closed {
  background-color: #c6c6c6;
 border-radius: 12px 12px 0px 0px;
 padding: 0.8em;
 margin-bottom: 0.8em;
 border-bottom: solid 1px #e7e7e7;
}
.city-program {
 height: 70px;
}
h4.listing-closed{
  font-family: 'cocon-regularregular';
  font-size: 3em;
 /* padding-top: 0.9em;*/
  color: white;
}
h2.listing-closed , h5.listing-closed {
  background-color: #c6c6c6;
  color:#ffffff;
}
button.listing-closed{
  visibility: hidden;
}
button.listing-open{
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.20);
  background-color:#ffffff;
  color:#575756;
}
button.listing-open a{
  color:#575756;
}
i.listing-open{
  color:#575756;
}
.class-listing-title{
  font-size: 0.9em;
line-height: 2em;
}
 @media only screen and (max-width: 1050px) {
  .listing, .listing.listing-closed {
  width: 100%;
  }
  button.listing-open{
    width:45%;
    font-size:0.9em;
  }
  .button-listing-container{
    margin-top:2.5em;
  }
  .city-header{
    font-size: 1.3em;
  }
  h4.listing-closed {
    font-size: 2em;
  }  
}
/*-------------------Collection Page------------------------*/

/*Step*/

.step {
  padding:2em;
  margin-bottom: 2em;
  /*background-color: #fff;
  border: 1px solid #DADADA;
    border-radius: 8px;*/

}
.stepbox {
  padding: 1em 0;
  border-bottom: 1px solid #DADADA;
  margin-top: 1.2em;5em;

}
.stepbox:last-child {
  border-bottom:0;
}
.img-right{
  display: inline-block;
  width:25%;
  margin-left: 3em;
  margin-right: 3em;
 }
 /*.step-img {
  width: 80%;
  padding-top:2em;
  
 }*/

.step-article{

    width: 49%;
    text-align: left;
    display: inline-block;
    padding-bottom: 0.5em;
    margin-right: 3em;
    margin-left: 3em;
    vertical-align: top;
}
.left{
  text-align: right;

}

.steptitle {
  color:#000;
  font-size:0.9em;
}

.step-title{
  color: #E5426A;
  font-size:1.5em;
}

button.reverse  {
  background-color: #fff;
  color:#000;
  text-decoration: none;
}
a.reverse:visited {
  text-decoration: none;
  color: #000;
}
.choosepackage{
  background-color: #e5426a;
  color: #fff;
  padding: .8em 2.3em;

}
h2.choose{
  font-size: 2em;
  font-family: 'cocon-regularregular';
  color:#fff;
}
/*Step-babybondpage*/
.baby-right {
    display:inline-block;
    width:50%;
}
.baby-article{
  width: 40%;
  /* text-align: left; */
display: inline-block;
/*padding-bottom: 50%;*/
margin-right: 3em;
margin-left: 3em;
/* margin-bottom: 2em; */
vertical-align:2.5em;
}
.babybox{
  margin-top: 2em;
  /*margin-bottom: 2em;*/
  border-bottom: 1px solid #f1eae0;
  padding-bottom: 2em;

}
.babybox:last-child{
  border-bottom: 0px ;
}

div.baby-article{
   background-color: rgba(246, 246, 246, 0.60);
   padding: 2em
}
@media only screen and (max-width: 1024px) {
.baby-article, .baby-right {
  width: 100%;
  margin:0;
}
}
/*faq*/
.article-collection{

  /*margin: auto 50px;*/
  background-color: #fff;
  padding: 2em;
  border-bottom: 1px solid #DADADA;

}
.article-collection:last-child {
  border-bottom: 0;
}
.faq-collection {
  border: 1px solid #DADADA;
  border-radius: 8px;
  background-color: #fff;
  margin-top: 2em;
}

@media only screen and (max-width: 1200px) {
  .img-right {
    width: 50%;
    margin-right: 0;
     margin-left: 0;
    }
  div.step-article {
    width: 100%; 
    text-align: left;
    display: inline-block;
    padding-bottom: 0.5em;
     margin-right: 0;
     margin-left: 0;
    vertical-align: top;
    }  
  }


/*----------------------New Segments------------------------*/

/*condition container*/
.header-condition{
  border-bottom: 0;
}
.condition-newsegment.full_width{
  margin-top:0;
}
.condition-name{
  font-size: 0.9em;
 }
.condition-box {
  width: 24%;
  display: inline-block;
  padding-left: 1em;
  padding-right: 1em;
  
}
.condition-container{
  max-width: 1024px;
  margin: auto;
  
}
.condition-outlook{
  background-color: rgba(186, 220, 197, 0.15);
}
.condition-button{
  border:0;
  background-color: transparent;
}
i.icon-condition {
  color:#000;
  font-size:1em;
  padding-left: 0.3em;
}
.Outlook-line{
border-bottom: solid 1px #B8DBC3;
margin-bottom: 1em;
}
.condition-vision{
  background-color: rgba(234, 220, 130, 0.15);
}
.Vision-line{
border-bottom: solid 1px #E8DB82;
margin-bottom: 1em;
}

@media only screen and (max-width: 1280px) {
  .condition-box{
 width:48%; 

  }
  section.half_width{
   width:100%;
   margin-left:0;
   margin-right:0;

  } 
  section.brochure-price-left.half_width {

    float: none;
}
  section.condition-newsegment{
    width:100%;
  }
  div.price-container{
    margin-right:0;

  }
  div.brochure-container{
    margin-left:0;
  }
  section.accreditation{
    margin:0;
    width:100%;
    padding:0;
   }
  section{
    padding: 1em 1em;

  }
 
  }

/*brochure-price*/
.half_width{
  width: 50%;
  display: inline-block;
  height:350px;
}
.brochure-price-left{
  background-color: #4B5F6F;
  float: left;
}
.brochure-price-right{
  background-color: #E5426A;
}
.brochure-container{
  margin-left: 13%;
  padding:1em;
}
.price-container{
  margin-right:13%;
  padding:1em;
}
.bp-title{
  color:#ffffff;
}
.bp-button{
  background-color:#ffffff;
  border-radius: 100px;
  padding: 0.8em 1.375em;
  font-weight: bold;
  font-size: 0.875em;
  margin: 0 auto;
  text-align: center;
  line-height: 1.3em;
  display: inline-block;
  overflow: hidden;
  color:#000;
}
/*Clinic trials segment*/
.clinic-box{
  border-bottom: 1px solid #d7d7d7;
  
}
.condition-name{
  border-bottom: 1px solid #d7d7d7;
  padding-bottom: 1em;
}
.purple{
  color: #E5426A;
}
.grey{
  color:#4B5F6F;
}
.trial-box{
  margin-top: 1em;
}
.clinictrial-grey{
  background-color: rgba(243, 243, 243, 0.29);
}
.header-clinic{
  border:0;
}
/*----Tooltips*----/

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 300px;
    background-color: #fff;
    color: #000;
    text-align: center;
    padding: 5px 2em;
    border-radius: 0.3em;
    border: solid #DADADA 0.1em;
     /* Position the tooltip text */
    position: absolute;
    z-index: 20;
    top: 40%;
    left: 60%;
    margin-left:-160px;
    /*width: 100%;*/

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -11px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent transparent #fff  transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 0.8;
}
.lists
{
  float:left;
  margin-right: 1.5em;
  /*text-align: center;*/
  display: inline-block;
    width: 180px;
    margin-bottom: 2em;
}
figure.lists:nth-child(5n+6){
  margin-right: 0;
}

/*------------------------Paymentcentre--------------------*/
.form-text{ 
width: 45%;
text-align: left;
display: inline-block;
margin: 1em;
}
.wpcf7-form-control.wpcf7-submit.payment-button {
background-color: #e5426a;
border-radius: 8px;
color: #FFFFFF;
border: 1px solid #fff;
padding:0.8em;
}
.wpcf7-form-control.wpcf7-optgroups.wpcf7-validates-as-required.option {
    font-size:0.9em;
    border: 1px solid #CCCCCC;
   background-color: rgba(236, 236, 236, 0.71);
   width:100%;
   box-shadow: 0px 8px 3px -9px #000000;
   padding-left:1em;

}
/*.dropdown {
    position: relative;
}

.dropdown:before {
    content: "";
    position: absolute;
    right: 20px;
    top: 30px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(150, 150, 150, 0.79);
    z-index: 20;
   }*/
/*--------------------------------Landing page--------------------------*/
/*top*/
/*.landing-img{
    margin-top:2em;
  }*/
.landig-top-left {
    width: 60%;
    display: inline-block ;
}
.landing-top-right article {
  
margin-left: 1em;

}
.landing-top-right {
    width: 39%;
    display: inline-block;
    vertical-align:top;
    
}

.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required.dropdown_form.landing-form {
    width:58%;
}
.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.callback.option {
    margin:0.6em;
}
.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required.dropdown_form.landing-form-bottom {
    width: 38%;
    margin: 1em;
}
/*middle*/
.landing-middle-content {
    width: 30%;
    display: inline-block;
    vertical-align: top;
    padding:1.2em;
}

.landing-middle {
    background-color:#E5426A;
    color:#fff;
    
}

/*.landing-middle-container {
    border-bottom: solid 1px;
}
article.landing-middle-container:last-child {
  border-bottom: 0;
}*/
.middle {
    background: #FFFFFF;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.21);
    border-radius: 78px;
   font-family: sans-serif;
   color: #000;
   padding: 1em 1em;

}
/*.img-bottom{
  width:100%;
}*/
.landing-bottom-content {
  width: 32%;
  display: inline-block;
  vertical-align: top;
  padding:1em;
  border-right: 1px #dadada solid;
}
.landing-bottom-content h2{
  font-size: 1em;
}
article.landing-bottom-content:last-of-type {
  
  border-right:0;
}
main.landingpage{
  margin-top:0;
}
@media only screen and (max-width: 1200px) {
 .landig-top-left, .landing-top-right, .landing-middle-content, .landing-bottom-content  {
    width: 100%;
 }
 .wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required.dropdown_form.landing-form-bottom , .wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required.dropdown_form.landing-form {
  width:90%;
 }
 .landing-bottom-content  {
    border:0;
 }
}