/* MAIN WRAP
---------------------------------------*/

.main-wrap {
	padding: 100px 0 50px;
}

.home.loaded.webp .main-wrap {
	background: url(/wp-content/themes/charlie-child/images/mid-pattern.webp) top center no-repeat;
	background-size: cover;
}

.home.loaded.no-webp .main-wrap {
	background: url(/wp-content/themes/charlie-child/images/mid-pattern.jpg) top center no-repeat;
	background-size: cover;
}

.main-wrap h1 {
	margin-bottom: 40px;
}

.main-wrap h4 {
	margin-bottom: 5px;
}

.main-wrap .row {
	align-items: center;
}

.office-pic1 {
    width: 100%;
    height: 610px;
    position: relative;
    z-index: 2;
}

.loaded .office-pic1 {
	background: url(/wp-content/themes/charlie-child/images/office01.jpg) top center no-repeat;
	background-size: cover;
}

.loaded.webp .office-pic1 {
	background: url(/wp-content/themes/charlie-child/images/office01.webp) top center no-repeat;
	background-size: cover;
}

.main-content {
	max-width: 686px;
	margin: 30px auto;
	padding: 0 15px;
	position: relative;
}

.main-b {
	margin-top: 20px;
}

.main-c {
	max-width: 500px;
	position: relative;
}

.main-c .line {
	position: absolute;
	top: -25px;
    left: -225px;
}

/* CARE SECTION
---------------------------------*/
.care-section {
    position: relative;
    padding: 0 0 100px;
}

.home.webp .care-section {
	background: url(/wp-content/themes/charlie-child/images/doc-background.webp) top center no-repeat;
	background-size: cover;
}

.home.no-webp .care-section {
	background: url(/wp-content/themes/charlie-child/images/doc-background.jpg) top center no-repeat;
	background-size: cover;
}

.care-content {
	max-width: 610px;
	padding: 0 15px;
	margin: 30px auto;
	position: relative;
}

.care-section .row {
	align-items: center;
}

.care-content h2 {
	max-width: 580px;
	margin-bottom: 40px;
}

.care-content h4 {
	margin-bottom: 5px;
}

.care-pic {
    position: relative;
    width: 100%;
    height: 633px;
    z-index: 6;
}

.loaded .care-pic {
	background: url(/wp-content/themes/charlie-child/images/home-doc-2.jpg) top center no-repeat;
	background-size: cover;
}
.loaded.webp .care-pic {
	background: url(/wp-content/themes/charlie-child/images/home-doc-2.webp) top center no-repeat;
	background-size: cover;
}

.doc-pic1, .doc-pic2, .doc-pic3 {
    position: relative;
    width: 33%;
    height: 633px;
    z-index: 6;
}
.loaded .doc-pic1 {
	background: url(/wp-content/themes/charlie-child/images/home-doc1.jpg) top center no-repeat;
	background-size: cover;
}
.loaded.webp .doc-pic1 {
	background: url(/wp-content/themes/charlie-child/images/home-doc1.webp) top center no-repeat;
	background-size: cover;
}
.loaded .doc-pic2 {
	background: url(/wp-content/themes/charlie-child/images/home-doc2.jpg) top center no-repeat;
	background-size: cover;
}
.loaded.webp .doc-pic2 {
	background: url(/wp-content/themes/charlie-child/images/home-doc2.webp) top center no-repeat;
	background-size: cover;
}
.loaded .doc-pic3 {
	background: url(/wp-content/themes/charlie-child/images/home-doc3.jpg) top center no-repeat;
	background-size: cover;
}
.loaded .webp .doc-pic3 {
	background: url(/wp-content/themes/charlie-child/images/home-doc3.webp) top center no-repeat;
	background-size: cover;
}
.care-c {
	position: relative;
}

.care-c .line {
	position: absolute;
	top: -25px;
}

.cc-wrap {
	position: relative;
	z-index: 5;
}


/*  Review SECTION
-------------------------------------------*/


.rev-section {
    position: relative;
    padding: 30px 0 100px;
}


.home.webp .rev-section {
	background: url(/wp-content/themes/charlie-child/images/Reviews-bg.webp) top center no-repeat;
	background-size: cover;
}

.home.no-webp .rev-sectionn {
	background: url(/wp-content/themes/charlie-child/images/Reviews-bg.jpg) top center no-repeat;
	background-size: cover;
}

.rev-section .container{
    max-width: 1530px;
}

.rev-wrap {
    background: #F6D603;
    padding: 64px 244px 10px 244px;
    margin-top: 32px;
}

.rev-section h3 {
    font-family: Comfortaa;
font-style: normal;
font-weight: bold;
font-size: 44px;
line-height: 120%;
/* or 53px */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #000000;
}

.rev-section p {
    font-family: Open Sans;
font-style: normal;
font-weight: normal;
font-size: 23.1491px;
line-height: 46px;
/* or 200% */
text-align: center;
color: #000000;
}

.rev-section .patient-name {
    font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-size: 23.1491px;
line-height: 160%;
/* or 37px */
text-align: center;
color: #000000;
margin: 32px 0 32px;
}

.patient-name::after {
    content: "Citrus Smile Dental Customer";
    display: block;
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 15.4327px;
    line-height: 160%;
    text-align: center;
    color: #000000;
}

.rev-section a.arrow.arrow-left {display:none}

.rev-section a.arrow.arrow-right {display:none}

.number-crumb-container .option.selected {
    background-color: #000;
    border: 2px solid #000;
}

.number-crumb-container .option {
    border: 2px solid #000;
    opacity: 1;
}



/*  SHOWCASE SECTION
-------------------------------------------*/

.showcase-section {
	padding: 100px 0;
	position: relative;
}

.showcase-section .container {
	max-width: 1400px;
	position: relative;
	z-index: 5;
}

.loaded .showcase-section {
	background: url(/wp-content/themes/charlie-child/images/show-bg.jpg) top center no-repeat;
	background-size: cover;
}

.loaded.webp .showcase-section {
	background: url(/wp-content/themes/charlie-child/images/show-bg.webp) top center no-repeat;
	background-size: cover;
}

.showa,
.show-box {
	width: 100%;
	max-width: 348px;
	height: 314px;
	overflow: hidden;
	position: relative;
}

.loaded .s1 {
	background: url(/wp-content/themes/charlie-child/images/show1-general.jpg) top center no-repeat;
	background-size: cover;
}

.loaded.webp .s1 {
	background: url(/wp-content/themes/charlie-child/images/show1-general.webp) top center no-repeat;
	background-size: cover;
}

.loaded .s2 {
	background: url(/wp-content/themes/charlie-child/images/show2-sedation.jpg) top center no-repeat;
	background-size: cover;
}

.loaded.webp .s2 {
	background: url(/wp-content/themes/charlie-child/images/show2-sedation.webp) top center no-repeat;
	background-size: cover;
}

.loaded .s3 {
	background: url(/wp-content/themes/charlie-child/images/show3-implant.jpg) top center no-repeat;
	background-size: cover;
}

.loaded.webp .s3 {
	background: url(/wp-content/themes/charlie-child/images/show3-implant.webp) top center no-repeat;
	background-size: cover;
}

.loaded .s4 {
	background: url(/wp-content/themes/charlie-child/images/show4-ortho.jpg) top center no-repeat;
	background-size: cover;
}

.loaded.webp .s4 {
	background: url(/wp-content/themes/charlie-child/images/show4-ortho.webp) top center no-repeat;
	background-size: cover;
}

.show-row	{
	display: flex;
	
}

.show-row a {
	margin: 10px;
}

.show-title h2 {
	color: #fff;
}

.s-overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0, .61);
	z-index: 1;
	opacity: 0;
	
}

.s-content {
	position: absolute;
	z-index: 5;
	bottom: 20px;
	left: 20px;
	max-width: 300px;
	padding: 5px;
	overflow: hidden;
}

.s-content h4 {
	color: #fff;
	margin-bottom: 15px;
}

.s-content p {
	color: #fff;
	margin-bottom: 0;
	height: 0;
	overflow: hidden;
}

.s-content span {
	color: #fff;
	font-size: 12px;
	line-height: 19px;
	border: 2px solid #EED704;
	border-radius: 36px;
	letter-spacing: 1.15px;
	text-transform: uppercase;
	padding: 8px 20px;
}

.show-box:hover .s-content p {
	height: 150px;
}

.show-box:hover .s-overlay {
	opacity: 1;
}

.watermark	{
	position: absolute;
	width: 365px;
	height: 323px;
	right: 0;
	bottom: 50px;
	opacity: .2;
}

.loaded .watermark {
	background: url(/wp-content/themes/charlie-child/images/show-watermark.png) top center no-repeat;
	background-size: cover;
}

.loaded.webp .watermark {
	background: url(/wp-content/themes/charlie-child/images/show-watermark.webp) top center no-repeat;
	background-size: cover;
}

/* FRESH SECTION
---------------------------------*/

.fresh-section	{
	padding: 100px 0 0;
}

.fresh-section .row {
	align-items: center;
}

.office-pic3 {
    width: 100%;
    height: 602px;
    position: relative;
    z-index: 2;
}

.loaded .office-pic3 {
	background: url(/wp-content/themes/charlie-child/images/office03.jpg) top center no-repeat;
	background-size: cover;
}

.loaded.webp .office-pic3 {
	background: url(/wp-content/themes/charlie-child/images/office03.webp) top center no-repeat;
	background-size: cover;
}

.fresh-content {
	max-width: 550px;
	margin: 30px auto;
	padding: 0 15px;
}

.fresh-content h2 {
	margin-bottom: 40px;
	max-width: 400px;
	color: #545D60;
}

.fresh-c {
	position: relative;
	max-width: 550px;
}
.fresh-c .line {
	position: absolute;
	top: -25px;
	right: 130px;
}

.fresh-b {
	margin-top: 30px;
}


/* HOW WE DID SECTION
----------------------------------------*/

.how-we-did {
	padding: 50px 0 300px;
	background: linear-gradient(180deg, #FFFFFF 0%, #DBDBDB 100%);
}

.how-we-did .container {
	/*max-width: 900px;*/
}

.how-we-did .foot-social svg {
	width: 77px;
	fill: #545D60;
}

.how-we-did .foot-social a {
	background: none;
	border: 2.82211px solid #EED704; 
}

.hwd-row {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.hwd-social{
    width:340px;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
}
.social-item img{
    max-width:100px;
}
.social-item{
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
}

/* MAP SECTION
----------------------------------*/

.map-section .container {
	max-width: 1566px;
	position: relative;
	z-index: 5;
	margin-top: -187px;
	margin-bottom: -200px;
}


.map-area {
	/*margin-top: 30px;*/
    position: relative;
	max-height: 387px;
	overflow: hidden;
}

.map-overlay1 {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	text-align: center;
	cursor: pointer;
	background-position: center center;
	background-size: cover;
	display: flex;
    justify-content: center;
    align-items: center;
}

.loaded .map-overlay1 {
	background: url(/wp-content/themes/charlie-child/images/map.jpg) top center no-repeat;
	background-size: cover;
	
}

.loaded.webp .map-overlay1 {
	background: url(/wp-content/themes/charlie-child/images/map.webp) top center no-repeat;
	background-size: cover;
	
}

.map-txt {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 30px;
	color: #000;
	text-align: center;
}
.map-txt p {
	margin: 0;
}
.map-txt h4 {
    color: #000;
}
.map-txt .map-ph {
    font-weight: 700;
}
.map-txt .map-ph img {
    position: relative;
    top: 3px;
}

.livemap {
    left: 0;
    right: 0;
    bottom: 5%;
    width: 40%;
    margin: 0 auto !important;
    position: absolute;
	color: #000;
}

.map-info .main-btn2 {
	width: 100%;
	max-width: 217px;
	margin: 10px 10px;
}

.map-info h4 {
	margin-bottom: 10px;
}

/**** lightinthebox  ****/
#lightinthebox {
  position: fixed;
  background-color: #000;
  background-color: rgba(0,0,0,.7);
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1000;
  align-items: baseline;
}

#lightinthebox .light_content {
	margin-top: 60px;
	/* padding: 30px; */
	background-color: #fff;
	border-radius: 20px;
	max-width: 50%;
	max-height: 75%;
	overflow-y: auto;
	width: 700px;
}

#closeX {
	border: 1px solid #fff;
	background-color: #90D104;
	color: #fff;
	border-radius: 30px;
	height: 35px;
	width: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 3px 5px 0 rgba(0,0,0,.5);
	font-weight: 800;
	position: absolute;
	/* bottom: 20px; */
	/* right: 20px; */
}

#closeX:hover {
    border: 1px solid #000;
    background-color: #EED704;
    color: #000;
    cursor: pointer
}

@media only screen and (max-width: 600px) {
    #lightinthebox {
    display: block;
    }
    
    #lightinthebox .light_content {
      max-width: 100%;
      margin-top: 10px;
    }
}

/* RESPONSIVE 
-----------------------------------------------*/
@media (min-width: 992px) and (max-width: 1300px) {
	.office-pic1,
	.care-pic,
	.office-pic3,
	.doc-pic1, 
	.doc-pic2,
	.doc-pic3{
		height: 500px;
	}
}

@media only screen and (min-width: 1600px) {
	.cc-wrap {
		padding-left: 200px;
	}
} 

@media only screen and (min-width: 992px) {
	.show-title {
		transform: rotate(-90deg);
		position: relative;
		width: 457px;
	}
	
	.show-title h2 {
		
		width:342px;
		bottom: 5px;
	}
	
	.st {
		position: relative;
	}
	.show-title .line {
		position: absolute;
    	bottom: -13px;
    	left: -146px;
		width: 467px;
	}
	
	.st-wrap {
		position: absolute;
		bottom: 195px;
		left: -180px;
		
	}
}

@media (max-width: 1025px) {
    
    .rev-wrap {
    padding: 64px 100px 10px 100px;
}
    
}

@media only screen and (max-width: 991px) {
	.main-c {
		max-width: 100%;
	}
	.main-wrap {
		padding: 50px 0;
	}
	.care-section {
		padding: 0 0 50px;
	}
	
	.show-title {
		margin-bottom: 40px;
		text-align: center;
	}
	.show-title .line {
		margin-top: 20px;
	}
	
	.fresh-section {
		padding: 50px 0 0;
	}
	.how-we-did {
    	padding: 50px 0 240px;
	}
	.doc-pic1, 
	.doc-pic2,
	.doc-pic3{
		height: 500px;
	}
	    .rev-wrap {
    padding: 36px 16px 10px 16px;
    }
    .rev-section p {
    font-size: 20px;
    line-height: 34px;
    }
    .rev-section .patient-name {
    font-size: 22px;
    line-height: 160%;
    margin: 22px 0 22px;
    }
    .rev-section .container {
    max-width: 1240px;
    }
    .rev-section h3 {
    font-size: 28px;
    }
}

@media only screen and (max-width: 767px) {
	.show-row {
		flex-direction: column;
	}
	.show-row a {
		margin: 10px auto;
	}
	
	.office-pic1,
	.care-pic,
	.office-pic3 {
		height: 500px;
	}
	
} 

@media all and (max-width: 600px) {	
	.map-info .main-btn2 {
		width: unset;
	}
	.map-info h4 {
		padding: 10px;
	}
	.doc-pic1, 
	.doc-pic2,
	.doc-pic3{
		height: 400px;
	}
}

@media only screen and (max-width: 500px) {
	.loaded .office-pic1 {
		background: url(/wp-content/themes/charlie-child/images/office01m.jpg) top center no-repeat;
		background-size: cover;
	}

	.loaded.webp .office-pic1 {
		background: url(/wp-content/themes/charlie-child/images/office01m.webp) top center no-repeat;
		background-size: cover;
	}
	
/*
	.loaded .care-pic {
		background: url(/wp-content/themes/charlie-child/images/office02m.jpg) top center no-repeat;
		background-size: cover;
	}

	.loaded.webp .care-pic {
		background: url(/wp-content/themes/charlie-child/images/office02m.webp) top center no-repeat;
		background-size: cover;
	}
*/
	
	.loaded .office-pic3 {
		background: url(/wp-content/themes/charlie-child/images/office03m.jpg) top center no-repeat;
		background-size: cover;
	}

	.loaded.webp .office-pic3 {
		background: url(/wp-content/themes/charlie-child/images/office03m.webp) top center no-repeat;
		background-size: cover;
	}
	
	.loaded .map-overlay1 {
		background: url(/wp-content/themes/charlie-child/images/mapm.jpg) top center no-repeat;
		background-size: cover;

	}

	.loaded.webp .map-overlay1 {
		background: url(/wp-content/themes/charlie-child/images/mapm.webp) top center no-repeat;
		background-size: cover;

	}
	
	.office-pic1,
	.care-pic,
	.office-pic3 {
		height: 300px;
	}
	.doc-pic1, 
	.doc-pic2,
	.doc-pic3{
		height: 300px;
	}
	
	.hwd-row {
		flex-direction: column;
	}
	
	.hwd-title h2 {
		margin-bottom: 20px;
	}
}