/*
 Theme Name:   Luba's Lab
 Theme URI:    https://generatepress.com
 Description:  Child theme for Luba's Lab
 Author:       Blackbox Web Design
 Author URI:   https://www.blackboxdesign.co.uk
 Template:     generatepress
 Version:      0.2
*/

/* Brand colours:
 * Midblue: #4361ee
 * Dark Blue: #3a0ca3
 * Purple: #7209b7;


/* All Devices */

/* Typography*/

h1, h2, h3, .likeh1, .likeh2  {
	font-weight:700;
	text-transform:uppercase;
	color:#7209b7;
}

h1 {
	font-size:2em;
}

.ll_hero_content h1, .ll_hero_content .likeh1 {
	color:#3a0ca3;
	letter-spacing:-0.04em;
	font-size:30px;
	line-height:1.2em;
}

h2 {
	font-size:28px;
}

.single-post h2 {
	font-size:22px;
}

.ll_blurbs h2, .ll_blurbs h3, .likeh2 {
	text-transform:uppercase;
	margin-bottom:1.5em;
}

.ll_blurbs h2, .ll_blurbs p.likeh2 {
	font-size:24px;
	font-weight:700;
}

h2.ll_smallhead {
	font-size:20px;
}

h3 {
	font-size:20px;
}

.single-post h3 {
	font-size:18px;
}

.ll_blurbs h3 {
	font-size:14px;
	font-weight:700;
}

#ll_home_services .ll_blurbs h3 {
	font-size:20px;
}

.ll_inline_title {
	display:inline-block;
}

.ll_blurbs {
	font-size:16px;
	text-align:center;
}

.ll_strapline {
	font-weight:700;
	text-transform:uppercase;
}

.ll_col_bg, .ll_col_bg h1, .ll_col_bg .likeh1, .ll_col_bg .likeh2, .ll_col_bg h2, .ll_col_bg h3, .ll_col_bg a {
	color:#fff!important;
}

.ll_col_bg a:not(.ll_cta_button) {
	text-decoration:underline;
}

.ll_col_bg.ll_mini_cf_sec p a {
	text-decoration:none;
}

.ll_icon img.icon {
	width:40px;
}


#ll_home_services .ll_blurbs .wp-block-column {
	position:relative;
	margin-bottom:16px;
}

.ll_button a {
	display:inline-block;
	padding:8px 40px;
	font-size:14px;
	font-weight:700;
	color:#fff;
	background-color:#7209b7;
	border-radius:20px;
	transition:0.4s all;
}

.ll_button.alt a {
	background-color:#3a0ca3;
}

.ll_button a:hover {
	background-color:#4361ee;
}

.timeline h3 {
	font-size:18px;
	margin-bottom:0;
	border-bottom: 2px solid #999;
    margin-bottom: 10px;
}

.timeline p:not(.timeline_content_type) {
	margin-bottom:5px;
}

.timeline p, .timeline ul {
	font-size:15px;
}

.ll_cta_sec {
	text-align:center;
}

p.subhead {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.04em;
	color:#7209b7;
	margin-bottom:10px;
	border-bottom:1px solid #e1e1e1;
}

p.ll_prehead {
	text-transform:uppercase;
	letter-spacing:2px;
	color:#000;
	margin-bottom:8px;
	border-bottom:1px solid #e1e1e1;
	font-size:14px;
	font-weight:700;
}

a.ll_cta_button, li.ll_cta_button a, a.read-more.button {
	color:#3a0ca3!important;
	transition:background 500ms;
}

a.ll_cta_button:hover, .ll_mini_cf input[type="submit"]:hover, li.ll_cta_button a:hover, a.read-more.button:hover {
	background-color:#4361ee!important;
	color:#fff!important;
}

#ll_contact_sidebar a {
	display:block;
	font-weight:700;
	font-size:20px;
	color:#7209b7;
	margin-bottom:10px;
}

#ll_contact_sidebar a img {
	width:1em;
	margin-right:8px;
	position:relative;
	top:3px;
}

ul {
	margin-left:1em;
}

sup {
	font-size:0.6em;
	bottom:0.4em;
}

.ll_extra_pad_20 {
	padding:20px 0;
}

/* Navigation  */


.mobile-menu-control-wrapper .menu-toggle {
	background-color:transparent;
}

#sticky-navigation .grid-container {
	max-width:100%;
}

.ll_center {
	text-align:center;
}

/* Polylang */

aside.widget_polylang ul li {
	display:inline-block;
	margin-right:10px;
}

/* Headers & Banners */

.ll_mob_banner {
	min-height:40vh;
}

section.ll_page_head {
	margin-bottom:20px;
}

section.ll_page_head.minimal_margin {
	margin-bottom:0;
}

#ll_header_cta .ll_cta_button, .ll_button_wrapper .ll_cta_button, .ll_mini_cf input[type="submit"], li.ll_cta_button a, a.read-more.button {
	display: inline-block;
    padding: 8px 30px;
    background-color: #ffd300!important;
    border-radius: 30px;
    font-weight: 700;
	text-transform:uppercase;
	font-size:14px;
	transition: background 0.3s!important;
}
.ll_mini_cf input[type="submit"] {
		color:#3a0ca3;
	min-width:150px;
	}

.ll_hero_content .ll_button_wrapper {
	text-align:right;
	margin-top:30px;
}


/* Timeline */
/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #7209b7;
  top: 22px;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.tl_container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.tl_container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -13px;
  background-color: white;
  border: 4px solid #999;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -12px;
}

/* The actual content */
.tl_content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
  box-shadow: 5px 5px 3px #ddd;
}

/* Shifting the boxes up a bit */
		.tl_container:not(:first-of-type) {
			margin-top:-50px;
		}

/* End of timeline */

/* Hide & Reveal */

.faq_item {
	position:relative;
	margin-bottom:20px;
}

.jqreveal {
	display:none;
	padding-bottom:20px;
}

a.jqtoggle {
	margin-left:30px;
}

a.jqtoggle:before {
	position:absolute;
	left:0px;
	content:'';
	width:20px;
	height:20px;
	background-image:url(/assets/plus.svg);
	background-size:20px 20px;
	top:2px;
}

a.jqtoggle.toggled:before {
		background-image:url(/assets/minus.svg);
}

a.jqtoggle:hover {
	cursor:pointer;
}

/* Blog & Posts */

#ll_blog_header {
	min-height:50vh;
	background-image:url(/wp-content/uploads/2021/12/blog_1b_1920.jpg);
	background-size:cover;
	background-position:center;
}

.blog .page-hero .inside-page-hero.grid-container {
	max-width:100%;
}

.blog.separate-containers .site-main {
	margin-top:60px;
}

/* General Content */

.hide_me {display:none!important}

#ll_home_services .ll_blurbs .wp-block-column {
	background-color:#f1f1f1;
	padding:20px;
}

#ll_home_services .ll_blurbs p:last-of-type {
	margin-bottom:0;
}

.ll_blurbs .wp-block-columns {
	margin-bottom:0;
}

/*.site-main .ll_blurbs .wp-block-group__inner-container {
	padding:20px 40px;
}*/

.ll_boxed_cols .wp-block-column {
	padding:20px;
	background-color:#fff;
	border:1px solid #e1e1e1;
	margin-bottom:30px;
}

.ll_shiftup.wp-block-group {
	margin-top:-140px;
}

.ll_shiftup.no_cols {
	background:#fff;
}

.no_bot_marg {
	margin-bottom:0;
}

.ll_flag_icon {
	width: 80px;
    display: inline-block;
    margin-right: 20px;
    position: relative;
    top: -5px;

}

.ll_flag_icon.long_title {
	vertical-align:top;
	top:6px;
}

#ll_flag_grid {
	display:flex;
	flex-wrap:wrap;
	max-width: 800px;
    margin-left: auto;
    margin-right: auto;
	text-align:center;
}

#ll_flag_grid img {
	max-width:100px;
}



/* Vertical Banner images */

.ll_vert_banner {
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}

.ll_boxed_cols .wp-block-column.ll_vert_banner {
	border:none;
}

#translations.ll_vert_banner {
	background-image:url(/wp-content/uploads/2021/10/vert_banner_icon_translate_2_600.jpg);
}

#localization.ll_vert_banner {
	background-image:url(/wp-content/uploads/2021/10/vert_banner_icon_localization_1_600.jpg);
}

#content_writing.ll_vert_banner {
	background-image:url(/wp-content/uploads/2021/10/vert_banner_icon_copywriting_1_600.jpg);
}

#voiceovers.ll_vert_banner {
	background-image:url(/wp-content/uploads/2021/10/vert_banner_icon_voiceover_1_600.jpg);
}

#luba_bio_pic {
	text-align:center;
	margin:30px 0;
}

#luba_bio_pic img {
	width:100px;
	border-radius:50%;
}

#luba_bio_pic p {
	margin-bottom:0;
}

/* Slick Slider */

.ll_postslider_wrapper .slick-slide {
	padding:20px;
	/*border:1px solid #e1e1e1;*/
	margin-right:10px;
} 

.ll_postslider_wrapper .slick-slide h3 {
	font-size:14px;
	text-align:center;
}

.ll_slider_item_content .img-responsive {
	margin-bottom:30px;
}

/* Contact Forms */

form.wpcf7-form input[type="text"], form.wpcf7-form input[type="email"], form.wpcf7-form textarea, form.wpcf7-form input[type="tel"], form.wpcf7-form input[type="file"]  {
	width:100%;
	font-size:14px;
}

form.wpcf7-form label {
	font-size:14px;
}

form.wpcf7-form p {
	margin-bottom:10px;
}

.ll_mini_cf.contact {
	padding:20px;
	background-color:#3a0ca3;
	color:#fff;
}

#ll_main_cf {
	display:flex;
	flex-wrap:wrap;
}

#ll_main_cf .ll_main_cf_field {
	flex-basis:49%;
	margin-right:2%;
	margin-bottom:20px;
}

#ll_main_cf #last.ll_main_cf_field, #ll_main_cf #phone.ll_main_cf_field {
	margin-right:0;
}

#ll_main_cf .ll_cf_twocols .ll_main_cf_field:nth-of-type(2n) {
	margin-right:0;
}

#ll_main_cf #message.ll_main_cf_field {
	flex-basis:100%;
	margin-right:0;
}

#ll_main_cf input:not([type="submit"]):not([type="file"]), #ll_main_cf textarea {
	padding:20px;
}

/*
#ll_main_cf #file span>input {
	visibility:hidden;
}*/

#ll_main_cf #file span {
	position:relative;
}

#ll_main_cf #file {
	margin-bottom:50px;
}

#ll_main_cf #file, #ll_cf_file_upload {
	flex-basis:100%;
	margin-right:0;
}

#ll_cf_file_upload p.parenthetical, .parenthetical {
	font-size:12px;
	font-style:italic;
	margin-top:15px;
}

/*#ll_main_cf #file span:before {
  content:"Upload file(s)";
  position:absolute;
  left:0;
  padding:5px;
  background:#999;
  color:#222;
  width:200px;
  text-align:center;
  border-radius:30px;
  cursor:pointer;
  font-size:14px;
}*/

#ll_main_cf input[type="submit"] {
	background-color:#ffd300;
	transition: 0.3s all;
	padding:8px 30px;
	min-width:200px;
	text-align:center;
	border-radius:30px;
}

#ll_main_cf input[type="submit"]:hover {
	background-color:#4361ee;
}

.codedropz-upload-inner h3 {
	font-size:16px;
	line-height:16px;
}

.dnd-upload-counter {
	right:-10px;
}
/* 404 */


/* Footer */

.ll_footer_widget ul li {
	display:inline-block;
	margin-right:18px;
}

.ll_footer_widget {
	font-size:15px;
	text-align:center;
	font-weight:700;
}

/* Responsive Desktop - Everything ABOVE 1024 */
@media only screen
	and (min-width: 1024px) {
		
		.blog h2 {
			font-size:20px;
		}
		
		.ll_mob_banner {
			display:none;
		}
		
		.ll_hero_content {
			padding:50px 0;
		}
		
		.ll_hero_content h1, .ll_hero_content .likeh1 {
			text-align:right;
			font-size:3em;

		}
		
		#services_desk .ll_hero_content .likeh1 {
			text-align:initial;
		}
		
		.ll_hero_content p.ll_strapline {
			text-transform:uppercase;
			margin-bottom:10px;
			letter-spacing:2px;
			text-align:right;
		}
		
		.ll_hero_content p.ll_substrap {
			margin-bottom:10px;
			text-align:right;
			font-size:24px;			
		}
		
		.ll_blurbs h2 {
			font-size:28px;
		}
		
		#ll_home_services .ll_blurbs .wp-block-column {
			padding:40px;
		}
		
		.ll_blurbs .ll_button {
			position:absolute;
			bottom:-16px;
			left:50%;
			transform: translate(-50%,0);
		}
		
		.ll_page_head.no_text, .ll_page_head {
			min-height:50vh;
		}
		
		ul.multi_col_3 {
			column-count:3;
		}
		
		.ll_shiftup.wp-block-group {
			margin-top:-140px;
		}
		
		.ll_boxed_cols .wp-block-column {
			padding:50px
		}
		
		.ll_shiftup.wp-block-group .wp-block-group__inner-container {
			padding:60px 60px 0 60px;
		}
		
		.ll_shiftup.wp-block-group .wp-block-group__inner-container {
			padding:40px 60px 0 60px;
		}		
		
		.ll_pre_shiftup .wp-block-group__inner-container {
			padding:40px 40px 80px 40px;
		}
		
		.ll_vert_banner_sec .wp-block-column:not(:first-child) {
			margin-left:0;
		}
		
		#services_desk {
			background-position:center top;
		}
		
		.ll_mini_cf_sec .wp-block-column:first-of-type {
			padding-right:30px;
			border-right:2px solid #e1e1e1;
		}
		
		.ll_mini_cf_sec .wp-block-column.text_col h2, .ll_mini_cf_sec .wp-block-column.text_col p {
			text-align:right;
		}
		
		.ll_mini_cf_sec h2 {
			font-size:36px;
		}
		
		.main-navigation .main-nav ul li a {
			text-transform:uppercase;
			font-weight:700;

		}
		
		.main-navigation .main-nav ul li.ll_cta_button a {
			line-height:20px;
		}
		
		.ll_inline_title {
			max-width:calc(100% - 130px);
		}
		
		.ll_icon {
			display:inline-block;
			margin-right:5px;
		}
		
		div.ll_icon + h2.ll_smallhead {
			display:inline-block;
			width:calc( 100% - 60px );
			vertical-align:top;
		}
		
		.ll_only_mob {
			display:none!important;
		}
		
		.blog .generate-columns-container {
			margin-top:-120px;
		}
		
		#ll_flag_grid {
			margin:60px auto 30px auto;
		}
		
		#ll_flag_grid .ll_grid_flag {
			flex-basis:16.8%;
			margin-bottom:30px;
}

		#ll_flag_grid .ll_grid_flag:not(:nth-of-type(5n)) {
			margin-right:4%;
		}
		
		
}

/* Responsive - Everything BELOW 1024 */
@media only screen
	and (max-width: 1023px) {
		

		
		.ll_no_bg_mob.ll_page_head, .ll_no_bg_mob  {
			background-image:none!important;
		}
		
		.ll_hide_mob {
			display:none;
		}
		
		.ll_fw_mob {
			flex-wrap:wrap;
		}
		
		.ll_fw_mob .wp-block-column {
			flex-basis:100%!important;
		}
		
		.ll_fw_mob .wp-block-column:nth-child(2n) {
			margin-left:0;
		}
		
		.ll_vert_banner_sec .wp-block-column.ll_vert_banner {
			min-height:40vh;
			margin:0;
		}
		
		.ll_vert_banner_sec.banner_right .wp-block-column:first-of-type {
			order:2;
		}
		
		.ll_vert_banner_sec.banner_right .wp-block-column:nth-of-type(2) {
			order:1;
		}
		
		.main-navigation .main-nav ul li.ll_cta_button a {
			line-height:20px;
		}
		
		.main-navigation .main-nav ul li.ll_cta_button  {
			text-align:center!important;
			margin-top:30px;
		}
		
		#ll_blog_header {
			background-image:url(/wp-content/uploads/2021/12/blog_1b_1024.jpg);
			min-height:auto;
			padding-bottom:22.2%;
			margin-top:20px;
		}
		
		#ll_flag_grid {
			margin-top:30px;
			margin-bottom:20px;
		}

		
}

/* Responsive Tablet - Between 768 and 1023 */
@media only screen
	and (min-width: 768px)
	and (max-width: 1023px) {
		
		.ll_boxed_cols .wp-block-column {
			padding:50px;
		}
		
		.ll_pre_shiftup .wp-block-group__inner-container {
			padding:40px 40px 80px 40px;
		}
		
		#ll_flag_grid .ll_grid_flag {
			flex-basis:16.8%;
			margin-bottom:10px;
}

		#ll_flag_grid .ll_grid_flag:not(:nth-of-type(5n)) {
			margin-right:4%;
		}		
}


/* Responsive Mobile - Everything BELOW 768 */
@media only screen
	and (max-width: 767px) {
		
		h1, .ll_hero_content h1 {
			font-size:24px;
		}
		
		h2 {
			font-size:20px;
		}
		
		h3 {
			font-size:16px;
		}
		
		.gb-inside-container {
			padding:40px 20px!important;
		}
		
		.site-header .header-image {
			max-width:240px!important;
		}
		
		/*.wp-block-group:not(.ll_shiftup) .wp-block-group__inner-container {
			padding:30px 0;
		}*/
		
		.no_mob_inner_pad .wp-block-group__inner-container {
			padding:30px 0;
		}
		
		.ll_boxed_cols .gb-inside-container {
			padding:40px 20px!important;
		}
		
		.ll_boxed_cols .wp-block-group__inner-container {
			padding:10px;
		}
		
		#ll_process_flow .gb-inside-container {
			padding:40px 0;
		}
		
		.ll_shiftup.wp-block-group {
			margin-top:-120px;
		}
		
		.home .ll_page_head p.ll_substrap {
			margin-bottom:0;
		}
		
		.home .ll_page_head .wp-block-columns {
			margin-bottom:0;
		}
		
		.navigation-branding .sticky-navigation-logo img {
			height:50px;
			padding-left:20px;
		} 
		
		#ll_main_cf .ll_main_cf_field {
			flex-basis:100%;
			margin-right:0;
		}
		.ll_footer_widget ul li {
			display:block;
			margin-bottom:20px;
		}
		
		.ll_footer_widget ul li a {
			padding:20px 0;			
		}
		
		.ll_hero_content .ll_button_wrapper, .ll_hero_content {
			text-align:center;
}		
		
		#ll_flag_grid .ll_grid_flag {
			flex-basis:45%;
			margin-bottom:10px;
}

		#ll_flag_grid .ll_grid_flag:not(:nth-of-type(2n)) {
			margin-right:10%;
		}
		
		.ll_postslider_wrapper .slick-slide {
			padding:0;
			margin-right:0;
} 
		
		/* Responsive timeline */
		
		#ll_process_flow .wp-block-group__inner-container {
			padding:30px 0;
		}
		
/* Place the timelime to the left */
  .timeline::after {
  left: 31px;
  }
  
  /* Full-width containers */
  .tl_container {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  }
		
  
  /* Make sure that all arrows are pointing leftwards */
  .tl_container::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left::after, .right::after {
  left: 18px;
  }
  
  /* Make all right containers behave like the left ones */
  .right {
  left: 0%;
  }
		
		#grc_timeline .wp-block-group__inner-container {
			padding:0;
		}
		
	/* Remove the 'pointer' elements */
		
		.right::before, .left::before {
			display:none;
		}
	/* End of responsive timeline */
		
}