/* Mi_Thumb stylesheet */
.mi_thumb {width:100%; height:100vh; position:relative; -webkit-tap-highlight-color: rgba(0,0,0,0); -ms-user-select: none; margin:0 auto; background:#000; display:none; box-sizing:border-box; border:20px solid #fff; z-index:1000;}
.mi_thumb .mi_wrap {display:block; position:relative; left:0; top:0; width:100%; height:100%; overflow:hidden;}

.mi_thumb .mi_cont .mi_pane:nth-of-type(1) {background-image:url(../images/analyse-esthetique.jpg);}
.mi_thumb .mi_cont .mi_pane:nth-of-type(2) {background-image:url(../images/rehabilitation-du-sourire.jpg);}
.mi_thumb .mi_cont .mi_pane:nth-of-type(3) {background-image:url(../images/pink-esthetic-score.jpg);}
.mi_thumb .mi_cont .mi_pane:nth-of-type(4) {background-image:url(../images/sourire-kinesitherapie.jpg);}

.mi_thumb .mi_cont .mi_pane h2 {padding:0; margin:0; font: 30px/40px 'gotham_condensedmedium', 'arial-bold', sans-serif; color:#fff; position:absolute; left:20px; top:20px; z-index:100;}

.mi_thumb .thumbs {top:auto; bottom:2px;}
.mi_thumb .thumbArrows {bottom:50px;}
.mi_thumb .close {position:absolute; top:15px; right:15px; cursor:pointer;}

/* page styling */
#implants .header-panel {width:100%; height:100vh; min-width:320px; position:relative;}
#implants .header-panel .header-image {display:block; width:100%; height:100vh; background:url(../images/dentisterie-esthetique-sourire.jpg) no-repeat center center; background-size:cover; min-width:320px;}
#implants .header-panel .header-para {position:absolute; top:0; left:0; height:100%; width:45%; text-align:center; color:#fff;}
#implants .header-panel .header-para h1 {padding:20% 0 0 0; margin:0; font-family:'gotham_condensedmedium', 'arial-bold', sans-serif; font-size:calc(60px + 6vw);}
#implants .header-panel .header-para h3 {padding:0; margin:0; font:italic 400 40px/40px 'Lato', arial, sans-serif; font-size:calc(30px + 0.3vw);}

#implants .header-panel .header-para p {padding:0; margin:0; font:400 17px/24px 'Lato', arial, sans-serif; font-size:calc(12px + 0.3vw); position:absolute; bottom:15%; left:0; width:100%;}
#implants .header-panel h4 {position:absolute; bottom:1%; width:244px; height:40px; background:#000000; text-align:center; border-radius:20px; left:22.25%; margin-left:-122px; cursor:pointer;}
#implants .header-panel h4 span {padding:0; margin:0 10px 0 0; font:400 16px/40px 'Lato', arial, sans-serif; color:#fff; display:inline-block;}
#implants .header-panel h4 img {display:inline-block;vertical-align:middle;}

@media only screen and (max-width: 768px) {
#implants .header-panel .header-para {text-align:left; width:100%;}
#implants .header-panel .header-para h1 {padding:50% 0 0 10px; font-family:'gotham_condensedmedium', 'arial-bold', sans-serif; font-size:calc(40px + 6vw);}
#implants .header-panel .header-para h3 {padding-left:10px; font:italic 400 30px/30px 'Lato', arial, sans-serif; font-size:calc(20px + 0.3vw);}
#implants .header-panel h4 {left:10px; margin-left:0;}
#implants .header-panel .header-para p {padding:10px; background:#191919; color:#fff; margin:0; font:400 17px/24px 'Lato', arial, sans-serif; font-size:calc(12px + 0.3vw); color:#fff; top:100%; bottom:auto; width:100%; box-sizing:border-box;}
#scrollto {margin-top:150px;}
}
@media only screen and (max-height: 480px) and (orientation:landscape) {
#implants .header-panel .header-para {text-align:left; width:100%;}
#implants .header-panel .header-para h1 {padding:10% 0 0 40px; font-family:'gotham_condensedmedium', 'arial-bold', sans-serif; font-size:calc(40px + 6vw);}
#implants .header-panel .header-para h3 {padding-left:40px; font:italic 400 30px/30px 'Lato', arial, sans-serif; font-size:calc(20px + 0.3vw);}
#implants .header-panel h4 {left:10px; margin-left:0;}
#implants .header-panel .header-para p {padding:10px; background:#42498c; color:#fff; margin:0; font:400 17px/24px 'Lato', arial, sans-serif; font-size:calc(12px + 0.3vw); color:#fff; top:100%; bottom:auto; width:100%; box-sizing:border-box;}
#scrollto {margin-top:150px;}
}
#implants .wide-image {display:block; width:95%; max-width:1380px; margin:50px auto;}

#implants .article-7 {position:relative; margin:100px 0; text-align:center; width:100%; height:800px; background:url(../../implants-dentaires/images/osseuse.jpg) center center; background-size:cover;}
#implants .article-7 .overlay-panel {position:absolute; width:100%; height:100%; left:0; top:0;}
#implants .article-7 .overlay-panel a.social {display:inline-block; margin:10px;}
#implants .article-7 .overlay-panel h2 {padding:0; margin:0 0 2% 0; font:300 60px/60px 'Lato', arial, sans-serif; color:#fff;}
#implants .article-7 .overlay-panel .mid-block {width:700px; height:350px; margin:50px auto; background:#02536d;}
#implants .article-7 .overlay-panel .mid-block .leftCol {display:inline-block; width:350px; height:350px; vertical-align:middle; background:url(../images/analyse-sourire.jpg) center center; background-size:cover;}
#implants .article-7 .overlay-panel .mid-block .rightCol {display:inline-block; width:350px; height:350px; vertical-align:middle; padding:28px; box-sizing:border-box; color:#fff; text-align:left;}
#implants .article-7 .overlay-panel p {font:400 17px/20px 'Lato', arial, sans-serif;}
#implants .article-7 .overlay-panel h3 {margin:0; padding:0; font:300 36px/36px 'Lato', arial, sans-serif; color:#fff;}
#implants .article-7 .overlay-panel a.rejoindre {display:inline-block; font:400 17px/34px 'Lato', arial, sans-serif; border:1px solid #fff; border-radius:17px; text-decoration:none; padding:0 15px; color:#fff; transition:0.25s}
#implants .article-7 .overlay-panel a.rejoindre:hover {background:#fff; color:#02536d;}
#implants .article-7 .overlay-panel .barline {width:700px; height:1px; background:#6c6c6c; margin:30px auto;}

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

	#implants .article-7 {height:1000px;}
	#implants .article-7 .overlay-panel .mid-block {width:320px; height:auto;}
	#implants .article-7 .overlay-panel .mid-block .leftCol {display:block; width:320px; height:320px;}
	#implants .article-7 .overlay-panel .mid-block .rightCol {display:block; width:320px; height:auto; padding:10px;}
	#implants .article-7 .overlay-panel h2 {font:300 40px/40px 'Lato', arial, sans-serif;}
	#implants .article-7 .overlay-panel .barline {width:320px;}

}

#implants .implant-divider {display:block; margin:0 auto;}
#implants .article-implants {width:95%; margin:50px auto; max-width:1380px;}
#implants .article-implants .implants-column {width:48%; display:inline-block; vertical-align:top;}
#implants .article-implants .implants-column:first-child {margin-right:4%;}
#implants .article-implants .implants-column img {display:block; width:100%;}

#implants .article-implants .implants-column h5 {padding:0; margin:0; font:300 24px/34px 'Lato', arial, sans-serif; color:#999;}
#implants .article-implants .implants-column h3 {padding:0; margin:0 0 20px 0; font: 60px/60px 'gotham_condensedmedium', 'arial-bold', sans-serif; color:#89111b;}
#implants .article-implants .implants-column p {font:400 17px/20px 'Lato', arial, sans-serif; color:#000; width:90%;}
#implants .article-implants .implants-column p a {color:#1d89aa; text-decoration: underline;}

#implants .article-implants .implants-column .slide-lnk1 {color:#1d89aa;}
#implants .article-implants .implants-column .slide-lnk1 img {display:inline-block; vertical-align:middle; margin-right:15px; cursor:pointer; width:auto;} 

@media only screen and (max-width: 768px) {
	#implants .article-implants {padding-bottom:50px;}
	#implants .article-implants .implants-column {width:100%; display:block; margin:20px 0;}
	#implants .article-implants .implants-column:first-child {margin-right:0;}
	#implants .implant-divider {width:300px;}
}


/* slideshow styling */
.slideshow {width:95%; margin:100px auto 0 auto; position:relative; text-align:center; overflow:hidden;}
.slideshow-inner {display:inline-block; white-space: nowrap; position:relative;}
.slide {display:inline-block; width:25%; vertical-align:top; position:relative;}
.slide img {display:block; width:100%;}
.slideshow .leftarrow {position:absolute; left:10px; top:50%; margin-top:-18px; z-index:200; cursor:pointer;}
.slideshow .rightarrow {position:absolute; right:10px; top:50%; margin-top:-18px; z-index:200; cursor:pointer;}
.slideshow .slideshow-inner .slide .cover {
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	position: absolute;
	left: -1px;
	top: 2px;
	transition: 0.5s;
	z-index: 100;
}
.slideshow .slideshow-inner .slide.current .cover {background:rgba(0,0,0,0); z-index:10;}
.slideshow .slideshow-inner .slide a {display:none; position:absolute; left:0; top:0; width:100%; height:100%; z-index:100;}
.slideshow .slideshow-inner .slide a span {display:inline-block; height:15px; vertical-align:middle; padding:0; margin:0; font:italic 400 17px/17px 'Lato', arial, sans-serif; color:#fff; position:absolute; bottom:10%; left:10%; z-index:20; text-decoration:underline;}
.slideshow .slideshow-inner .slide a span::after {content:url(../images/icon-on-bottom.png); display:inline-block; vertical-align:middle; padding-left:10px; z-index:20;}

.slideshow .slideshow-inner .slide.current a {display:block;}
#slideshow-bullets {display:block; text-align:center; margin-bottom:100px;}
#slideshow-bullets span {display:inline-block; width:20px; height:20px; border-radius:20px; background:#999; margin:5px 8px; cursor:pointer; transition:0.25s;}
#slideshow-bullets span.current {background:#990000; cursor:default;}

@media only screen and (max-width: 1200px) {
.slide {width:calc(100% / 3);}
}

@media only screen and (max-width: 900px) {
.slide {width:50%;}
}

@media only screen and (max-width: 450px) {
.slide {width:100%;}
}