/* 
 Theme Name:   Knothead
 Theme URI:    
 Description:  
 Author:       Roberts
 Author URI:   https://nallus.com
 Template:     Divi
 Version:      0.1

 /* == Add your own styles below this line ==
--------------------------------------------*/


#main-header{
 border-bottom:solid 8px; 
}
#top-menu li{
  font-size: 18px;
  padding-right:50px;
}
#main-header{
  padding:15px 0px;
  background: #232323;
}
#menu-footer{
  font-size:20px;
  font-family: 'mabry mono pro regular',Helvetica,Arial,Lucida,sans-serif;
}
#et_search_icon:hover, .mobile_menu_bar:before, .mobile_menu_bar:after, .et_toggle_slide_menu:after, .et-social-icon a:hover, .et_pb_sum, .et_pb_pricing li a, .et_pb_pricing_table_button, .et_overlay:before, .entry-summary p.price ins, .et_pb_member_social_links a:hover, .et_pb_widget li a:hover, .et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active, .et_pb_filterable_portfolio .et_pb_portofolio_pagination ul li a.active, .et_pb_gallery .et_pb_gallery_pagination ul li a.active, .wp-pagenavi span.current, .wp-pagenavi a:hover, .nav-single a, .tagged_as a, .posted_in a {
    color: #ffffff;
}

/**************Custom Css*************/
.business-section {
	width: 100%;
	float: left;
	margin: 8px 0;
}
.business-head {
	width: 100%;
	float: left;
	background: #232323;
	padding: 45px 0;
	margin: 0 0 8px 0;
}
.business-head .section-title {
	text-align: center;
	font-size: 55px;
	line-height: 69px;
}
.business-head .section-subtitle {
	text-align: center;
	font-size: 25px;
	line-height: 30px;
	font-family: 'mabry mono pro regular',Helvetica,Arial,Lucida,sans-serif
}
.business-info {
	width: 100%;
	float: left;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 8px;
	grid-row-gap: 8px;
	display: -ms-grid;
	display: grid;
}
.business-body {
	width: 100%;
	float: left;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}
.below-business-details, .business-details {
	width: 100%;
	float: left;
}
.business-details {
	background-size: cover !important;
	background-repeat: no-repeat !important;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin: 0 0 8px 0;
	justify-content: center;
	align-items: center;
	padding: 100px 50px;
	filter: grayscale(100%);
    background-blend-mode: overlay;
    background: rgba(0, 0, 0, .7);
	transition: ease all 1.3s;
}
.business-details h3 {
	font-size: 55px;
	line-height: 69px;
	text-align: center;
}
.business-details p {
	text-align: center;
	font-size: 16px;
	line-height: 19px;
	text-transform: uppercase;
	font-family: 'mabry mono pro regular',Helvetica,Arial,Lucida,sans-serif;
}
.below-business-details {
	background: #232323;
	padding: 40px 60px;
	box-sizing: border-box;
	position: relative;
}
.below-business {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  float: left;
}
.below-business p {
	font-family: 'mabry mono pro regular',Helvetica,Arial,Lucida,sans-serif;
}
.tex-center {
	width: 100%;
	float: left;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: absolute;
	bottom: 40px;
	left: 0;
}
.fun-details {
	background: rgba(255, 255, 255, 0.7);
}
.pdf-btn::before {
  content: url('/wp-content/uploads/2022/01/DOWNLOAD-PDF_BLACK-1.png');
  margin: 0 8px 0 0;
  position: relative;
  left: 0;
  top: 6px;
}
.pdf-btn {
	font-weight: bold;
  text-transform: uppercase;
  font-family: 'mabry mono pro regular',Helvetica,Arial,Lucida,sans-serif;
}
.pdf-btn:hover {
  text-decoration: underline;
}
.fun-head {
	background: #fff;
	margin: 0;
}
.fun-head .section-title {
	color: #232323;
}
.fun-head .section-subtitle {
	color: #232323;
}
.fun-info {
	background: #232323;
	padding: 8px 0 0;
}
.fun-details h3 {
	color: #232323;
	font-size: 48px;
}
.fun-details p {
	color: #232323;
}
.below-fun-details {
	background: #fff;
}
.below-fun p {
	color: #232323;
}
.below-fun-details .pdf-btn {
	color: #232323;
}
.below-fun-details .pdf-btn::before {
	content: url('/wp-content/uploads/2022/01/DOWNLOAD-PDF_BLACK-e1642159475910.png');
}
.business-details:hover img, .business-details:hover h3, .business-details:hover p {
	display: none;
}
.business-details:hover {
	filter: unset;
	background-blend-mode: unset;
	background: unset;
	background-image: unset;
	cursor: pointer;
}
.fun-details:hover img, .fun-details:hover h3, .fun-details:hover p {
	display: none;
}
.fun-details:hover {
	background: unset;
}
/******************************TABS CSS***************************/
.tabs-wrapper {
	width: 100%;
	float: left;
}
.tabs-container {
	width: 100%;
	float: left;
	padding: 4rem 2rem;
	box-sizing: border-box;
}
.tabs-block {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	float: left;
}
.tabs {
	width: 100%;
	float: left;
	display: flex;
}
.tab-head {
	list-style-type: none !important;
	margin: 0;
	padding: 0 !important;
	width: 50%;
	float: left;
}
.tabs > .tab-head li a, .tabs > .tab-head li a:visited {
	display: flex;
	text-decoration: none;
	color: rgba(255, 255, 255, .3);
	padding: 1rem 1.5rem;
	transition: all 0.2s ease-in-out;
	word-wrap: break-word;
	text-transform: uppercase;
	font: normal normal normal 25px/30px 'mabry mono pro regular',Helvetica,Arial,Lucida,sans-serif;
}
.tabs > .tab-head li a {
	flex-wrap: wrap;
}
.tabs section {
	width: 85%;
	padding: 1rem;
	display: none;
	word-wrap: break-word;
	text-align: center;
}
.tabs section {
	width: calc(100% - 150px);
	padding: 0 2rem;
	box-sizing: border-box;
}
.tabs section.active {
	display: block;
}
.tab-content {
	width: 100%;
	float: left;
	padding: 0 8em;
	box-sizing: border-box;
}
.tab-content p {
  margin: 59px 0 0;
  font-size: 14px;
  line-height: 17px;
  font-family: 'mabry mono pro regular',Helvetica,Arial,Lucida,sans-serif;
}

/*************POPUP CODE************************************/
/*.slick-slide {
    margin: 0px 20px;
}
.slick-prev:before,
.slick-next:before {
   color: black;
}
.slick-slide {
	transition: all ease-in-out .3s;
	opacity: .2;
}
.slick-active {
	opacity: .5;
}
.slick-current {
	opacity: 1;
}*/
.fade img {
  width: 100%;
  object-fit: cover;
}
.mdodal {
	display: none;
	position: fixed; /* Stay in place */
	z-index: 9999999; /* Sit on top */
	padding: 0; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgba(0,0,0,0.9); 
}
.modal-close {
  color: #fff;
  font-size: 50px;
  font-weight: bold;
}
.modal-close:hover,
.modal-close:focus {
  text-decoration: none;
  cursor: pointer;
}
.popup-wrapper {
  width: 100%;
object-fit: cover;
/*max-height: 90vh;*/
  display: grid;
  grid-template-columns: 2fr 1fr;
  background-color: #fff;
  padding: 8px;
  grid-template-rows: auto;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}
.popup-left {
  width: 100%;
  float: left;
}
.popup-left .image-left {
	float: left;
	position: relative;
	margin: 0 auto;
	width: 100%;
}
.popup-left .image-left .mySlides1, .popup-left .image-left .mySlides2, .popup-left .image-left .mySlides3 {
	display: none;
}
.image-heading .prev, .image-heading .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.image-heading .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.image-heading .prev:hover, .image-heading .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.fade-img {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}
@-webkit-keyframes fade {
	from {opacity: .4} 
	to {opacity: 1}
}
@keyframes fade {
	from {opacity: .4} 
	to {opacity: 1}
}
.popup-left .image-heading {
  width: 100%;
  float: left;
  background-color: #2e2e2e;
  padding: 2em 0;
  position: relative;
}
.image-heading h3 {
  color: #fff;
  font-size: 55px;
  line-height: 69px;
  text-align: center;
  padding: 0;
}
.mySlides img {
  width: 100%;
}
.popup-right {
  width: 100%;
  float: left;
  display: flex;
  flex-direction: column;
}
.popup-right-heading {
  width: 100%;
  float: left;
  display: flex;
}
.popup-head {
  background-color: #2e2e2e;
  width: 100%;
  flex: 0 1 80%;
  text-align: center;
}
.popup-close {
  background-color: #2e2e2e;
  width: 100%;
  flex: 0 1 20%;
  margin-left: 8px;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
}
.popup-right-heading h3 {
  color: #fff;
  font-size: 55px;
  line-height: 69px;
  padding: 0
}
.popup-right-content {
  width: 100%;
  float: left;
  padding: 2em;
  background: #2e2e2e;
  margin: 8px 0 0;
  flex: 1;
}
.popup-right-content p {
  text-align: left;
  font-size: 14px;
  line-height: 17px;
  font-family: 'mabry mono pro regular',Helvetica,Arial,Lucida,sans-serif;
  color: #fff;
}
.fun-popup-wrapper {
  background: #232323;
}
.popup-left .fun-image-heading, .fun-popup-right-content, .fun-popup-head, .fun-popup-c {
  background: #fff;
}
.fun-popup-right-content *, .fun-popup-head *, .fun-popup-c *, .fun-popup-right-content *, .popup-left .fun-image-heading *  {
  color: #232323 !important;
}
.fun-popup-right-content .pdf-btn:before {
	content: url('/wp-content/uploads/2022/01/DOWNLOAD-PDF_BLACK-e1642159475910.png');
}
.popup-right-content .pdf-btn {
  display: inline-block;
  margin: 20px 0 0;
  font: normal normal bold 16px/19px 'mabry mono pro regular',Helvetica,Arial,Lucida,sans-serif;
}

@media only screen and (max-width: 1569px) {
	.fun-details h3 {
	  font-size: 37px;
	}
	.fun-details {
		padding: 100px 25px;
	}
}
@media only screen and (max-width: 1300px) {
	.tabs-container {
		padding: 4rem 0;
	}
	.tab-content {
		padding: 0 4em;
	}
}
@media only screen and (max-width: 1140px) {
	.business-info {
		grid-template-columns: repeat(2,1fr);
	}
}
@media only screen and (max-width: 1023px) {
	.business-details {
		padding: 50px 25px;
	}
	.below-business-details {
		padding: 40px 30px 0;
	}
	.business-head .section-title {
		font-size: 40px;
		line-height: 49px;
	}
	.business-head .section-subtitle {
		font-size: 18px;
		line-height: 20px;
	}
	.tab-content {
		padding: 0;
	}
}
@media only screen and (max-width: 980px) {
	#et-main-area {
		position: relative;
		z-index: 0;
	}
}
@media only screen and (max-width: 767px) {
	.business-head .section-subtitle {
		text-align: center;
}
	#main-footer #block-5, #main-footer #block-7 {
		width: 100%;
		text-align: center;
	}
	#block-5 > div:nth-child(1) {
		width: 100% !important;
	}
	.tabs > .tab-head li .tab-link {
	  text-align: center;
	  display: block;
	}
	/*.no_popup1 img, .no_popup1 h3, .no_popup1 p {
		display: none;
	}*/
	.tabs section {
		margin: 2em 0 0;
	}
	.tabs {
		flex-wrap: wrap;
	}
	.tab-head, .tabs section {
		width: 100%;
	}
	.business-head .section-title {
		font-size: 28px;
		line-height: 32px;
	}
	.business-head .section-subtitle {
		font-size: 14px;
		line-height: 18px;
	}
	.fun-details h3 {
		font-size: 43px;
		line-height: 40px;
	}
	.business-info {
		grid-template-columns: repeat(1,1fr);
	}
	.popup-wrapper {
		grid-template-columns: 1fr;
	}
}
#footer-widgets .footer-widget li:before {
    content: none;
}
/* jumping divs fix */
.business-body{
    display: grid;
    grid-auto-rows: minmax(700px, 1fr) 350px;
}

/* remove header from on top of modal */
#main-header{
	z-index:1;
}

#main-footer {
  /* background-color: #222222; */
  background-color: #232323;
}
#menu-footer{
	  text-transform: uppercase;
}

/* Element | https://knotheaddev.nallus.com/ */

#block-5 > div:nth-child(1) {
  width: max-content;
}

/* Inline #3 | https://knotheaddev.nallus.com/ */

#page-container {
	width: 100%!important;
}

::selection {
	color:  #cede49;
}
.tab-head {
	min-width: 60%;
}

.tab-link.active {
	color: #fff !important;
}
#top-menu li {
	margin-left: 30px;
}
.tab-content { 
	padding: 0; 
} 
#footer-bottom {
	background-color:#232323;
}
#footer-widgets .footer-widget li {
	padding-bottom: 8px;
}

body {
	background: #292929;
}
.business-details {
	transition: cubic-bezier(.47,0,.74,.71) all 1.3s;
}
.popup-wrapper {
	max-width: 1500px;
	margin: 50px auto;
}

.business-section {
	margin: 0;
}
.image-heading .prev, .image-heading .next {
	font-size: 35px;
}
.image-heading .prev:hover, .image-heading .next:hover {
	background-color: rgba(0,0,0,0.0);
}
@media only screen and (max-width: 600px) {
.image-heading h3 {
font-size: 35px;
}
}

@media only screen and (min-width: 2100px) {
#page-container {
border-right: 8px solid white;
border-left: 8px solid white;
border-top: 8px solid white;
border-bottom: 8px solid white;
}
}

.business-details {
transition: linear all 0.5s;
}

body {
background: #232323;
}