/*
Theme Name: Soins Dentaires
Theme URI: https://www.oui-soins-dentaires.ch
Author: Niels Wehrspann
Author URI: https://www.niels-wehrspann.com
Text Domain: soinsdentaires
*/

* {box-sizing: border-box;}
body {background-color: #5bc5f2; font-family: Helvetica Neue, 'Helvetica Neue', Helvetica, 'Helvetica', Arial, sans-serif; margin:0; padding:0; font-size:16px; font-size:2vw; color:white;}

body, div {scroll-behavior: smooth;}
table {border-collapse: collapse;}

h1 {font-size:2.75em; line-height:1em; height:auto; padding:0; margin-top:0.2em; hyphens: manual;}
#titre {height:0px; width:0px; opacity:0; margin:0; padding:0;}
h2 {font-size:2em; line-height:1em; height:auto; padding:0; margin:0.2em 0 0; hyphens: manual;}
h3 {font-size:1.5em; line-height:1em; height:auto; padding:0; margin:0.2em 0 0; hyphens: manual;}
h4 {font-size:1em; line-height:1em; height:auto; padding:0; margin:0.2em 0 0; hyphens: manual; text-align: center;}
p {margin:0; padding:0; hyphens:manual;}

a {text-decoration: none;}
#topbar {width: -webkit-calc(100% - 4em); width: -moz-calc(100% - 4em); width:calc(100% - 4em); height:1.2em; color:#5bc5f2; z-index:7; position: absolute; top:1em; left:1em; font-size: 0.8em; line-height:0.8em;}
#topbar tr {margin:0; padding:0; width:100%;}
#topbar td {margin:0; padding: 0.2em; background-color: white; vertical-align: top;}
#nav a {color: #5bc5f2;}
#bouton_menu {width:0.9em; height:0.9em; position:fixed; right:0.7em; top:0.8em; z-index:4; cursor: pointer; margin:0; padding:0;}
#bouton_menu:hover {width:1.1em; height:1.1em; right:0.6em; top:0.7em;}
#bouton_menu_close {width:0.8em; height:0.8em; display: inline; position:fixed; right:0.45em; top:0.4em; z-index:4; cursor: pointer; margin:0; padding:0;}
#bouton_menu_close:hover {width:1em; height:1em; right:0.35em; top:0.3em;}
#bouton_top {width:2em; height:2em; display: block; position:fixed; right:0.7em; bottom:1em; z-index:5; cursor: pointer;}
#bouton_top a:visited {color:#5bc5f2;}
#nav {z-index:11; position:fixed; top:0; left:0; width:100%; height:100%; background-color: white; color: #5bc5f2; visibility: hidden; font-size:1.5em; padding:2%; overflow:scroll;}
nav ul {list-style-type: none; margin-left:0; padding:0;}
nav li {border-top: 0.15em solid; margin-bottom:1em;}
#top_menu {width:100%; height:auto; overflow:scroll;}
#header_image {width:100%; height:auto; margin:0; padding:0; background-image: url("https://www.oui-soins-dentaires.ch/img/famille.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; z-index:1;}
#top_menu_argu {position:fixed; left: 2%; top; 2%; width: 3%; height:auto; display: block;}

#svg_un {position:absolute; width:auto; height:auto;}
#svg_deux {position:absolute; left:auto; right:0; width:auto; height:auto;}
#svg_un, #svg_deux {}
#svg_un_svg, #svg_deux_svg {height:auto; width:auto;}

.wp-video {width:100% !important; height:auto;}
.video { margin:1em 0 2em 0; border:3px solid #5bc5f2;}
#video {margin:3em 0 3em 0; padding:0;}
#video h2 {border-top: 0.8vw solid;}
.mejs-controls {background-color: #5bc5f2 !important;} 

#content {clear:both;}
#content, #content_pos {margin:0 auto 4em auto; padding:0 2%;}
body #content_pos {background-color: white;}
#content_pos {color: #5bc5f2;}
.bloc_main_pos {border-top:0.8vw solid; margin:3em 0; padding:0;}
.bloc_main_pos p, .bloc_main_pos h2 {margin-bottom:1em;}
#pourquoi, #pourquoi2 {display:-ms-flexbox; display:-webkit-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; display: flex; flex-wrap: wrap;}
.col_droite, .col_gauche {flex-basis:50%; padding-right:1em;}
#avs, #policliniques {display:-ms-flexbox; display:-webkit-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; display: flex; flex-wrap: wrap;}
.bloc_main_neg {margin:3em 0; padding:1em; background-color: white; color:#5bc5f2;}
.bloc_main_neg p, .bloc_main_neg h2 {margin-bottom:1em;}
#contre-verites {display:-ms-flexbox; display:-webkit-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; display: flex; flex-wrap: wrap; margin-bottom:2em;}
.contre-verites {flex-basis: 50%; padding-right:2em; position:relative;}
.faux {position:absolute; right:3em; transform: rotate(-15deg); font-size:2em;}
.contre-verites h3 {margin-top:2em; border-top: 0.5vh solid;}
.contre-verites p {margin-top:3em;}

.svg_chiffres {width:90%; height:auto;}
#un, #deux, #trois {padding-right:2%; flex:1; flex-basis: 32%; margin-top:1em;}

#demande, #sante, #pourcentages, #comite { margin-top:2em; border-top:0.8vw solid;}
#soutiens { width:96%; margin-top:1em;}
.titre_soutiens { margin-top:2em; border-top:0.8vw solid;}
#argumentaire_long { width:96%; margin-left: 2%; margin-right: 2%;}
#argumentaire_long h4 {background-color:white; padding-top:0.25em;}
#sante, #pourcentages, #soutiens, .lien_externe, #cas { display:-ms-flexbox; display:-webkit-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; display: flex; flex-wrap: wrap; }
#sante h2 {padding-right:1em; flex-basis:30%;  }
#bloc_deuxtiers {margin-top:0; padding-top:0; flex-basis:60%; }
.arrow {width:2em;}
tr, td {vertical-align: top;}
td {padding-top:1em;}
#bloc_deuxtiers table {margin-top:-0.5em;}
.lien_externe {width:100%; background-color:white; color:#5bc5f2; margin-top:3em; padding:0 0.5em 0.5em 0.5em; margin-bottom:2em;}
.fleche_externe {font-size:1.5em; flex-basis: auto; text-align:right; }
.lien_externe a, #lien_argumentaire a:visited {color:#5bc5f2;}
.lien_externe h3 {flex-basis: 90%;}

.pourcentages {flex-basis:32%; padding-right:2%;}
.soutiens {flex-basis:25%; padding-right:2%; font-size: 0.6em; margin-top:2em;}
.soutiens img {width:100%; height:auto;}
.pourcentages h2 {font-size:4em; letter-spacing: -2px;}
#comite {font-size:0.6em;}
.demi_bloc {width:46%; margin-right:4%; height:auto; float:left; margin-top:3em; margin-bottom:4em;}
.demi_bloc h2 {border-top:0.8vw solid; margin-bottom:1em;}
#ccp {background:white; color:#5bc5f2; padding:2em 0.5em;}
#fb-page {text-align:center;}
._2p3a {border:2px solid;}

#content_appel a {color: #5bc5f2;}
#content_appel p {margin-top: 1em;}
#content_appel h3 {margin-top: 4em; border-top: 0.8vw solid; clear:both;}
#content_appel {padding-bottom:10em;}
.appel {border-collapse: collapse; margin:0; padding:0; display: block; vertical-align: top;}
#intro_appel {width:48%; float:left; margin-top:2em;}
#formulaire {width:48%; float:right; margin:2em 0;}
.appel tr { vertical-align: top; height:auto;}
.initiale {width:3em;}
.nom {}
.lieu {width:12em;}
.appel td {vertical-align: top; padding:0.1em 0.5em 0 0;}
#bloc_mail {margin:1em 0; background-color: #5bc5f2; color:white; padding:0.5em;}
#bloc_mail a {color:white; font-weight: bold; text-decoration: underline;}
#demande_sub { display:-ms-flexbox; display:-webkit-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; display: flex; flex-wrap: wrap;  margin:0; padding:0;}
.nom, .lieu {border-top: 1px solid;}

#argu_layout p {margin-bottom:1em;}
#argu_layout h2 {margin-bottom:2em; margin-top:2em; border-top:0.8vh solid;}
#argu_layout h3 {margin: 2em 0 1em 4em;}
#argu_layout h3, #argu_layout h3 p {font-size:1em;}
#argu_layout {padding-bottom:10em; margin:auto; max-width: 30em;}
#argu_layout table {font-size: 0.6em;}

#content_medias {margin:0 auto 4em auto; padding:4em 2em 20em 2em; background-color:white; color:#5bc5f2; display:-ms-flexbox; display:-webkit-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; display: flex; flex-wrap: wrap;}
.medias {flex-basis: 33%; padding:0 1em 2em 0; hyphens: manual;}
.medias h3 {letter-spacing: -1px;}
.medias a {color:#5bc5f2;}
.medias p {color:white; background-color:#5bc5f2; padding:0 0.5em; font-size:0.5em;}
.titre_pos {background-color:white; color:#5bc5f2;}
form {}
#formulaire {color:white; background-color:#5bc5f2; padding:0 1em;}
#formulaire h3 {border:none; padding-top:0.5em; margin-top:0;}
#wpcf7 {color:white; background-color:#5bc5f2;}
#captcha {margin-top:1em;}
input {width:100%; height:3em; border:none;}
.wpcf7-submit {color:#5bc5f2; font-size:1.25em; background-color: white;}
	
.cas {flex-basis: 25%; padding-right:2em; margin:1em 0 2em 0;}
.cas p {line-height:1.1em;}
.cas h3 {line-height:0.7em; letter-spacing: -1px;}
.divider_cas {padding: 0.3em 0.5em; background-color: white; color:#5bc5f2; font-size:0.8em;}

#content_communiques {background-color:white; color:#5bc5f2; padding:2em;}
#content_communiques::after {content: "   "}
.spacer_communiques {border-top:0.8vh solid; margin-top:2em; clear:both;}
.date_communiques {width:20%; float:left; padding-top:0.5em;}
.communiques {width:77%; float:right;}
.communiques h3 {margin-top:1.5em;}
.communiques p, #communique p {margin-top:1em;}
#com {float:left; padding:2em;}
#date_communique {float:right; text-align:right; padding:2em;}
#communique {padding:2em 4em; clear:both;}
div.sharedaddy h3.sd-title::before {border-top:0px !important; margin-top:2em;}
.more-link {display:block; background-color:#5bc5f2; color:white; text-align:center; margin-top:1em; padding:0.1em;}


		#oeil_droit_ouvert {
			animation-name: fermeture;
			animation-duration: 6000ms;
			animation-iteration-count: infinite;
		}

        @-webkit-keyframes fermeture {
			0% {opacity: 1;}
			97% {opacity: 1;}
			100% {opacity: 0;}
		}
		
		@keyframes fermeture {
			0% {opacity: 1;}
			97% {opacity: 1;}
			100% {opacity: 0;}
		}
		
		#oeil_droit_ferme {
			animation-name: ouverture;
			animation-duration: 6000ms;
			animation-iteration-count: infinite;
		}

		@-webkit-keyframes ouverture {
			0% {opacity: 0;}
			97% {opacity: 0;}
			100% {opacity: 1;}
		}
		
		@keyframes ouverture {
			0% {opacity: 0;}
			97% {opacity: 0;}
			100% {opacity: 1;}
		}
		
		#header_block {	width:auto; height:40vh; margin-left:1vw; }
		svg { margin:10vh 0; }
		
		#dent {width:23%; height:auto; float:left;}
		
		#texte_banner_svg {width:71.5%; height:auto; float:left; margin-left:2%;}
		


	
@media screen and (max-width:900px) and (orientation:portrait) {
	body {font-size:5vw;}
	#header_block {height:100vh; padding-top:5vh;}
	svg { margin: 0; transform: translateY(0);}
		
	#dent {width:auto; height:auto; float:none;}
		
		#texte_banner_svg {width:auto; height:auto; float:none; margin-left:0;}
	#un, #deux, #trois, #sante h2, #bloc_deuxtiers, .pourcentages {flex-basis: 100%;}
	.soutiens {flex-basis:50%;}
	.demi_bloc {width:auto; height:auto; float:left; margin-top:2em;}
	#content_medias {padding:4em 0.5em 20em 0.5em;}
	.medias {flex-basis:50%;}
	.medias p {font-size:0.8em;}
	#intro_appel {width:auto; float:none; margin-top:2em;}
	#formulaire {width:auto; float:none; margin:2em 0 1em 0;}
	.cas {flex-basis: 50%; padding-right:1em;}
	.cas h3 {line-height:0.9em; font-size:1.25em;}
	.lien_externe {font-size: 0.85em; padding:0.75em 0.85em;}
	.date_communiques {width:100%; float:none; clear:both; padding-top:0.5em;}
	.communiques {width:98%; float:none;}
	#com, #date_communique {font-size: 0.75em;}
	#com {float:left; padding:2em 0 0 0.5em;}
#date_communique {float:right; text-align:right; padding:2em 0.5em 0 0;}
#communique {padding:2em 0.5em; clear:both;}
#communique h1 {font-size:2em;}
	#header h1 {width:0px; height:0px; overflow:hidden;}
	.col_droite, .col_gauche {flex-basis:100%; clear:both;}
	#contre-verites {display:-ms-flexbox; display:-webkit-flex; display: flex;}
.contre-verites {flex-basis: 100%; padding-right:2em; position:relative;}
}