/**
Theme Name:   GetMeds
**/

/*--------------------------------------------------------------
>>> MASTER.CSS TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 General
	1.1 Typography
	1.2 Layouts
2.0 Header
	2.1 Navigation
3.0 Pages
	3.1 Homepage
4.0	WooCommerce
	4.1	Category Pages
	4.2 Single Product Pages
  4.3 Gravity Forms
	4.4 Questionnaire Page
5.0	Footer
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 General
--------------------------------------------------------------*/

/** Fix Box around active links **/

button:focus,
button.menu-toggle,
button.menu-toggle:hover {
	font-size: 1rem;
  outline: none !important;
	border: 1px solid #000;
	border-radius: 3px;
  background-color: #fff;
  color: #000;
}
a:focus,
.focus a {
	outline: none !important;
}
a:focus,input:focus,textarea:focus,button:focus{
  outline:1px solid #00b949;
}

/** Make YouTube Videos Responsive **/

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin: 0 0 1.5em 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (min-width: 768px) {
	.home-video {
	  width: 80%;
	  height: 80%;
	  margin: 0 auto;
	}
}

/** END Make YouTube Videos Responsive **/

.hentry {
    margin: 0 0 1em;
}

/*--------------------------------------------------------------
1.1 Typography
--------------------------------------------------------------*/

html,
body,
button,
input,
select,
optgroup,
textarea {
	font-size: 15px;
	font-size: 0.9rem;
	line-height: 1.7;
	font-weight: 400;
	-moz-font-feature-settings: "liga", "kern";
	-moz-font-feature-settings:"liga=1, kern=1";
	-ms-font-feature-settings:"liga", "kern";
	-o-font-feature-settings:"liga", "kern";
	-webkit-font-feature-settings:"liga", "kern";
	font-feature-settings: "liga", "kern";
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

@media (min-width: 768px) {
    html,
    body,
    button,
    input,
    select,
    optgroup,
    textarea {
      font-size: 16px;
      font-size: 1rem;
    }

}

/*--------------------------------------------------------------
2.0 Header
--------------------------------------------------------------*/

/** Header Search **/

.site-search .widget_product_search form::before{
  top:1em;
  left:0.75em
}
.widget_search form:not(.wp-block-search)::before, 
.widget_product_search form:not(.wp-block-search)::before {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  vertical-align: baseline;
  content: "";
  position: absolute;
  line-height: 1;
  font-size: 1.1rem;
  color: #222;
}

.woocommerce-tabs ul.ta

.site-header-cart .widget_shopping_cart {
  background-color: #00a9d2;
}
a.cart-contents,
  .site-header-cart .widget_shopping_cart a {
    color: #fff;
}

/*--------------------------------------------------------------
2.1 Navigation
--------------------------------------------------------------*/

/*--------------------------------------------------------------
3.0 Pages
--------------------------------------------------------------*/

/*--------------------------------------------------------------
3.1 Homepage
--------------------------------------------------------------*/

/** Hero  **/

.homepg_hero {
  background-color: #f5f5f5;
}
.hero_content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: center;
  padding: 30px 0;
}
.hero_content div {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}
.hero_content div:nth-child(1) {
  flex-basis: 50%;
}
.hero_content div:nth-child(2) {
  flex-basis: 42%;
}
.hero_content h1 {
  font-family: ff-cocon-pro, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 2.3rem;
  line-height: 1.2;
}

ul.info {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: center;
  padding: 0 5%;
  margin: 0;
}
ul.info li {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
  width: 100%;
}
ul.info li a svg {
  width: 35%;
  margin: 0 10px 0 0;
}
ul.info li a span {
  width: 65%;
  font-size: 1.2rem;
  line-height: 1.2;
}
ul.info li a {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: center;
}
ul.info li a svg {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}
ul.info li a span {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}

@media (min-width:768px) {

  .hero_content {
    flex-direction: row;
  }
  ul.info {
    flex-direction: column;
    padding: 15% 0%;
  }
  ul.info li a svg {
    width: 40%;
    margin: 10px 30px 10px 0;
  }
  ul.info li a span {
    width: 60%;
    font-size: 1.8rem;
  }
 

}
@media (min-width:820px) {

  .hero_content h1 {
    font-size: 2.6rem;
  }
  
}
@media (min-width:1024px) {

  .hero_content h1 {
    font-size: 3.0rem;
  }
  
  ul.info {
    padding: 15% 15% 15% 15%;
  }

}
@media (min-width:1181px) {

  .hero_content {
    padding: 0;
  }
  
  .hero_content h1 {
    font-size: 3.7rem;
  }
  
  ul.info {
    padding: 15% 15% 15% 25%;
  }

}

/** CTA **/

.homepg_cta {
  background-color: #00b949;
}
.cta {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  padding: 50px 0;
  }

.cta>div {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
  flex-basis: 25%;
  position: relative;
  }
div.journey_line {
  display: inline-block;
  width: 2px;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 27px;
}
div.num {
  border-radius: 100%;
  background-color: #fff;
  color: #00b949;
  border: 2px solid #00b949;
  width: 54px;
  height: 54px;
  margin-bottom: 10px;
  float: left;
  font-size: 2rem;
  line-height: 1.7;
  text-align: center;
  font-family: ff-cocon-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  z-index: 1;
  position: relative;
}
div.info_text {
  float: left;
  width: 80%;
  padding: 16px 0 10px 10px;
}
.cta h3,
.cta p {
  color: #fff;
  width: 100%;
}
.cta h3 {
  font-size: 1.4rem;
  line-height: 1.2;
}
.cta p {
  font-size: 0.9rem;
  line-height: 1.7;
}
.cta a.button {
  font-size: 1.3rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 1px;
  width: 100%;
  text-align: center;
  background-color: #f5582d;
  position: relative;
  top: 2px;
}
.cta a:hover.button {
  background-color: #e5441f;
}

@media (min-width:768px) {

  .cta {
    flex-direction: row;
    padding: 50px 0;
  }
  div.journey_line {
    width: 100%;
    height: 2px;
    top: 25px;
    left: 0;
  }
  div.info_text {
    padding: 0 0 0 0;
    float: none;
  }
  .cta h3,
  .cta p {
    width: 85%;
  }

}

/** Treatments **/

.treatments_wrap {
  padding: 50px 0 0;
}
.treatments_wrap h2 {
  text-align: center;
  margin-bottom: 60px;
}
ul.treatments_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: flex-start;
}
ul.treatments_list li {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
  flex-basis: 100%;
  margin-bottom: 40px;
}
ul.treatments_list li a {
  display: block;
  border: 1px solid #ddd;
  border-radius: 3px;
  min-height: 340px;
  padding: 40px;
  position: relative;
  overflow: hidden;
}
ul.treatments_list li a p {
  width: 70%;
}
ul.treatments_list li a button {
  font-size: 1.2rem;
  position: absolute;
  bottom:40px;
  background-color: #00b949;
}
ul.treatments_list li a:hover button {
  background-color: #02a53c;
}
ul.treatments_list li a svg {
  position: absolute;
  right: -120px;
  top: -30px;
  width: auto;
  height: 400px;
  z-index: -1;
}
@media (min-width:768px) {

  ul.treatments_list {
    flex-direction: row;
    gap: 4%;
  }
  ul.treatments_list li {
    flex-basis: 46%;
    margin-bottom: 40px;
  }
  
}

/*--------------------------------------------------------------
4.0	WooCommerce
--------------------------------------------------------------*/

/*--------------------------------------------------------------
4.1	Category Pages
--------------------------------------------------------------*/
.term-description .collapseomatic {
  background-repeat: no-repeat;
  padding: 10px 50px 10px 16px;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin-bottom: 20px;
  display: table;
  font-size: 1.4rem;
  color: #00a9d2;
}
.term-description .collapseomatic {
  background-image: url('../images/arrow-down.svg') !important;
  background-size: 24px 15px;
  background-position: right 20px center;
}
.term-description .colomat-close {
  background-image: url('../images/arrow-close.svg') !important;
}
.term-description .collapseomatic_content {
  margin-left: 0;
}
.term-description .collapseomatic_content p:first-of-type{
  margin: 0;
}
.test {
  color: rgb(255, 0, 230);
}
ul.getmeds_products_loop li.product-category a {
  padding-top: 20px;
  padding: 20px 4%;
  display: block;
  min-height: 290px;
}
ul.getmeds_products_loop li.product-category a p {
  margin: 20px 0 30px 0;
  line-height: 1.9;
}
ul.getmeds_products_loop li.product .woocommerce-loop-category__title {
  font-size: 1.4rem;
  line-height: 1.4;
}


/*--------------------------------------------------------------
4.2 Single Product Pages
--------------------------------------------------------------*/

/** Fix Stupid Storefront Image Not Fitting Correctly **/

@media (min-width:768px) {
	.single-product div.product .summary {
		width:34%;
	}
	.single-product div.product .woocommerce-product-gallery {
		width:60%;
	}
	.single-product div.product .woocommerce-product-gallery img {
		width:100%;
	}
}
.wpgs-for .slick-arrow::before,
.wpgs-nav .slick-prev::before,
.wpgs-nav .slick-next::before {
    color: #000000 !important;
    background-color: white;
    border-radius: 50%;
    margin: 0 10px;
}
#page .flaticon-right-arrow:before {
	content: "\f100";
}
#page .flaticon-left-arrow:before {
	content: "\f100";
}
#page .flaticon-back:before {
    content: "\f101";
}


/** Tabs Fixer **/

/*
vanbo/wc-css-make-storefront-product-tabs-horizontal
credit: https://gist.github.com/vanbo/c05e9b9512bd53e3680c82e1c6e4e6a3
*/
.product .woocommerce-tabs ul.tabs {
    width: 100%;
    float: none;
    margin-right: 5.8823529412%;
    border-top: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    list-style: none;
    padding: 0;
    /*padding: 0 0 0 1em;*/
    margin: 0 0 1.618em;
    overflow: hidden;
    position: relative;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    position: absolute;
    content: ' ';
    width: 100%;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #292f57;
    z-index: 1;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #fff;
    /*background-color: #ebe9eb;*/
    display: inline-block;
    position: relative;
    z-index: 0;
    /*margin: 0 -5px;*/
    padding: 0 1em;
    margin-left: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    /*background: #fff;*/
    z-index: 2;
    background-color: #fff;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    margin-bottom: -1px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
    border: 1px solid #000;
    position: absolute;
    bottom: -1px;
    width: 0;
    height: 0;
    content: ' ';
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
    left: -6px;
    border-bottom-right-radius: 4px;
    border-width: 0 1px 1px 0;
    box-shadow: 2px 2px 0 #ebe9eb;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before {
    box-shadow: 2px 2px 0 #fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    right: -6px;
    border-bottom-left-radius: 4px;
    border-width: 0 0 1px 1px;
    box-shadow: -2px 2px 0 #ebe9eb;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
    box-shadow: -2px 2px 0 #fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: .5em 0;
    /*font-weight: 700;*/
    color: #000;
    text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #000;
    text-shadow: inherit;
    font-weight:normal;
	font-size: 1.1rem;
}

@media screen and (min-width: 768px) {

	.woocommerce div.product .woocommerce-tabs ul.tabs li {
	    margin-left: 1em;
	}

}

/* https://stackoverflow.com/questions/14144426/remove-outline-from-active-jquery-ui-tab */
.woocommerce .wc-tabs li a:focus, .ui-state-focus:focus { outline: none !important }

.ui-tabs-anchor:active, .ui-tabs-anchor:focus{
     outline:none;
}
.product .woocommerce-tabs .panel {
    width: 100%;
}

/** Delivery Countdown display **/

.cd_timer {
	border:1px solid #dddddd;
	border-radius:4px;
	padding:5px 15px;
	width:100%;
	display:block;
}
.cd_timer:before {
	content:'';
	display:inline-block;
	width:50px;
	height:21px;
	background: url('https://dev.123meds.uk/wp-content/themes/getmeds/assets/images/countdown-delivery.svg') no-repeat center center;
	background-size:100% auto;
	position:relative;
	top:2px;
	margin-right:10px;
}
.cd_timer strong {
	font-size:1.2rem;
}
.cd_date {
	color:#00b949;
}

/*--------------------------------------------------------------
4.3 Gravity Forms
--------------------------------------------------------------*/

.getmeds_questions .gfield_label {
  font-weight: 600;
}
.getmeds_questions .small_label label.gfield_label {
  font-size: 12px;
  font-weight: normal;
  color: #000;
}
.getmeds_questions .gfield {
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
}
.getmeds_questions .gfield_description {
  padding-bottom: 0!important;
}
.gfield_description ul {
  margin: 0 0 0 20px;
}
.gm_alert {
  color: red;
}
.gm_warning {
  color: rgb(255, 187, 0);
}

#main .gform_wrapper.gravity-theme .gf_progressbar_percentage.percentbar_blue {
  background-color: #00b949;
}

/** Radios to buttons **/

.questionnaire_sidebar .gform_wrapper.gravity-theme .gfield {
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
}

.gform_wrapper.gravity-theme .gfield-choice-input {
  position: relative;
}
.gchoice input[type=radio] {
  background: transparent;
  position: absolute;
  left: 27px;
  border: 0px;
}
.gfield_radio .gchoice input[type=radio] {
  display: none;
}
.gfield_radio .gchoice input[type=radio]+label {
  display: table;
  margin: 0 20px 0 0;
  padding: 0 20px 0 20px;
  background: #fff;
  color: #222;
  border: 1px solid #00a9d2;
  border-radius: 3px;
  height: 38px;
  line-height: 36px;
  min-width: auto;
  font-size: 16px;
  font-size: 1rem;
}
.gfield_radio .gchoice input[type=radio]:checked+label {
  background: #00a9d2;
  color: #fff;
}
.gfield_radio .gchoice {
  float: left;
}
.Checkbox_fieldButton__1U_RC .Checkbox_checkbox__exCc_:checked {

}
.Checkbox_fieldButton__1U_RC .Checkbox_checkbox__exCc_:checked~.Checkbox_buttonLabel__O_JZs {

}

@media screen and (min-width: 768px) {

}

/*--------------------------------------------------------------
4.4 Questionnaire Page
--------------------------------------------------------------*/

@media (min-width: 768px) {
	.questionnaire_sidebar  {
    width: 73.9130434783%;
    float: left;
    margin-right: 4.347826087%;
		margin-bottom: 2.617924em;
	}
}
/*--------------------------------------------------------------
5.0 Footer
--------------------------------------------------------------*/

/** Footer Socials **/

.footer_socals {
  border-top: 1px solid #ddd;
  padding: 50px 4%;
  border-bottom: 1px solid #ddd;
}
.footer_socials_flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 3%;
  }
.footer_socials_flex div:nth-child(1) {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
  flex-basis: 100%;
  }
  .footer_socials_flex div:nth-child(2),
  .footer_socials_flex div:nth-child(3),
  .footer_socials_flex div:nth-child(4),
  .footer_socials_flex div:nth-child(5) {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
  }
.footer_socials_flex p {
  margin: 0 0 20px;
  font-size: 1.1rem;
  text-align: center;
}
.footer_socials_flex a {
  height: 42px;
  width: auto;
  display: block;
} 
.footer_socials_flex svg {
  height: 42px;
  width: auto;
}

@media (min-width: 768px) {
  .footer_socials_flex div:nth-child(1) {
    flex-basis: auto;
    }
  
  .footer_socials_flex p {
    margin: 0;
    font-size: 1.4rem;
  }
}

/** Footer Payment Methods **/

.footer_payment_methods {
  border-top: 1px solid #ddd;
  background-color: #f5f5f5;
  padding: 50px 4%;
}
.footer_payment_methods img {
  display: block;
  margin: 0 auto;
}

/** Address **/

.footer_address a img {
  display: block;
  margin-bottom: 20px;
}
.footer_address p {
  font-size: 0.9rem;
  line-height: 1.8;
}