/********************************* colone droite *********************************/
.marginBottom{
	margin-bottom:10px;
}
#searchSocialAgendaHot_wrapper{
	padding:20px 2.55%;
	background-color:#FFFFFF; 
	position:relative;
}

#search{
	width:100%;
	height:30px;
	padding-right:216px;
	display:inline-block;
	position:relative;
}
#search input[type=text]{
	height:30px;
	background-color:#d8d8d8;
	border:none;
	width:100%;
	border-right:#FFFFFF 10px solid;
	padding:0 35px 0 10px;
}
#search input[type=submit]{
	height:30px;
	background:#7c7b7b url(imgs/loupe.png) 50% 50% no-repeat;
	border:none;
	width:35px;
	display:inline;
	position:absolute;
	right:216px;
	
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 3px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}
#social{
	position:absolute;
	right:2.55%;
	width:185px;
	height:30px;
	display:inline-block;
	vertical-align:bottom;
}

#social .logoMail{
	display:inline-block;
	width:30px;
	height:23px;
	margin-right:17px;
	background:url(imgs/enveloppe.png) 0 0 no-repeat
}

#social .logoFacebookPage{
	display:inline-block;
	width:138px;
	height:30px;
	background:url(imgs/pageFacebook.png) 0 0 no-repeat
}

#agendaHot{
	width:100%;
	background-color:#f08a1d;
	padding:10px 8px;
	margin-top:39px;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

}
.agendaHotListeFilms{
	margin-top:0 !important;
}
#agendaHot .agendaCkeck{
	background:url(imgs/Agenda-checked.png) 50% 50% no-repeat;
	background-size:contain;
	width:40px;
	height:40px;
	margin-right:4px;
	display:inline-block;
	vertical-align:bottom;
}
#agendaHot .agendaDate{
	font-family:"openSansBold", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;
	font-size:24px;
	color:#FFFFFF;
	margin-bottom:10px;
	text-transform:uppercase;
}

#agendaHot .agendaDesc{
	font-family:"openSansBold", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;
	font-size:18px;
	color:#000000;
	margin-bottom:12px;
	text-transform:uppercase;
}

#agendaHot .agendaLieu{
	font-family:"openSansBold", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;
	font-size:18px;
	color:#FFFFFF;
	text-transform:uppercase;
	display:inline;
}

#agendaHot .agendaLien{
	font-family:"openSans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;
	font-size:16px;
	line-height:18px;
	color:#FFFFFF;
	float:right;
	text-decoration:none;
	padding-left:16px;
	background:url(imgs/fleche_01.png) left 50% no-repeat;
	background-size:contain;
	margin:4px 0 0 12px;
}
#agendaHot .agendaLien:hover{
	text-decoration:underline;
}
#searchSocialAgendaHot_wrapper .listeFilmsItem{
	width:auto;
	margin-top:50px;
	max-width:380px;
	float:left;
	display:inline-block;
}
#searchSocialAgendaHot_wrapper .listeFilmsItem a{
	display:inline-block;
	font-family:"openSans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;
	text-decoration:underline;	
	color:#000000;
	font-size:16px;
	width:180px;
}
#searchSocialAgendaHot_wrapper .listeFilmsItem a:hover{
	text-decoration:none;
}

#inscriptionNewsletter{
	margin:18px 0 0;
	width:100%;
	height:30px;
	padding-right:0;
	display:inline-block;
	position:relative;
}
#inscriptionNewsletter input[type=text]{
	height:30px;
	background-color:#d8d8d8;
	border:none;
	width:100%;
	border-right:#FFFFFF 10px solid;
	padding:0 35px 0 10px;
}
#inscriptionNewsletter input[type=submit]{
	height:30px;
	background:#7c7b7b;
	border:none;
	width:auto;
	padding:0 12px;
	color:rgba(255,255,255,1.00);
	font-size:12px;
	display:inline;
	position:absolute;
	right:0px;
	text-transform:uppercase;
	font-family:"openSans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;
	
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 3px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}



#soutien{
	margin-bottom:10px;
	margin-top:10px;
}
#soutien .soutienTitre{
	height:37px;
	line-height:37px;
	font-size:24.6px;
	font-family:"openSans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;
	color:#FFFFFF;
	text-transform:uppercase;
	width:100%;
	padding-left:50px;
	background:#e74a51 url(imgs/exclamation.png) 20px 50% no-repeat;
}
#soutien .soutienContenu{
	height:208px;
	background-color:#D8D8D8;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
}
#soutien .soutienContenu .soutienTexte{
	color:#FFFFFF;
	font-size:34px;
	font-family:"robotoBold", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;
	text-align:center;
	width:100%;
	padding-top:57px;
}
#soutien .soutienContenu .soutienDon{
	margin-top:42px;
	text-align:center;
}
#soutien .soutienContenu .soutienFaireUnDon{
	height:50px;
	width:205px;
	display:inline-block;
	background:url(imgs/faireUnDon.png) 0 0 no-repeat;
	vertical-align:bottom;
	margin-right:5px;
}
#soutien .soutienContenu .soutienMoyensPaiement{
	height:25px;
	width:225px;
	display:inline-block;
	background:url(imgs/moyensPaiement.png) 0 0 no-repeat;
}

#projets{
	padding:20px 2.55%;
	margin-bottom:10px;
	background-color:#FFFFFF; 
}
#projets .projetsChronoTitre{
	margin-top:1px;
	margin-left:22px;
	display:inline-block;
	background:url(imgs/Chrono.jpg) 0 0 no-repeat;
	text-transform:uppercase;
	font-size:30px;
	color:#175492;
	padding:0 0 0 54px;
	font-family:"openSansLight", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;	
}
#projets .projetsListeVignettes{
	padding:22px 0 0;
}
#projets .projetsVignette{
	display:inline-block;
	margin-left:6%;
	width:25.3%;
	padding-bottom:18%;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
}
#presse{
	padding:20px 2.55%;
	margin-bottom:10px;
	background-color:#FFFFFF; 
}

/********************************* fin colonne droite / début colonne gauche *********************************/
#fileArianne{
	font-family:"openSans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;
	line-height:18px;
	height:18px;
	margin:16px 0 21px;
	font-size:10px;
}
#fileArianne a{
	text-decoration:none;
	font-size:12px;
	color:#6e6d6d;
	margin:0 5px;
}
#fileArianne a:hover, #fileArianne a:last-child{
	text-decoration:underline;
}
#fileArianne span a{
	text-transform:uppercase;
	background-color:#424242;
	color:#FFFFFF;
	font-size:12px;
	text-decoration:none !important;
	padding:0 9px;
	display:inline-block;
	height:18px;
}
#filmsCpFull #fileArianne{
	margin-top:0 !important;
	color:#adacac !important;
}
#filmsCpFull #fileArianne a{
	color:#adacac !important;
}
#filmsCpFull #fileArianne span a{
	background-color:#000000;
}
#cartePostale{
	margin:43px 0 20px 0;
	background:#424242;
	border-top:#2d5df8 5px solid;
	border-bottom:#2d5df8 5px solid;
	position:relative;
	min-height:380px;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
#cartePostale .cartePostaleTitre{
	color:#2d5df8;
	margin-top:-34px;
	display:block;
	font-size:18px;
	height:45px;
	text-transform:uppercase;
	font-family:"openSansSemiBold", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;
	padding:1px 0 0 78px;
	background:url(imgs/timbre-45px.jpg) 20px 0 no-repeat;
}

#cartePostale .cartePostaleVideo{
	margin:15px 0 19px 2.8%;
	height:316px;
	width:60%;
	border:#FFFFFF 2px solid;
	border-bottom:#FFFFFF 3px solid;
	background-color:rgba(0,0,0,1.00);
}
#cartePostale .cartePostaleCentrageVertical{
	top:0;
	height:370px;
	line-height:370px;
	right:2%;
	position:absolute;
	padding:0 1.5%;
	width:34%;
}
#cartePostale .cartePostaleContenu{
	display:inline-block;
	vertical-align:middle;
	line-height:normal;
	color:#FFFFFF;
	font-size:30px;
	text-align:center;
	font-family:"robotoRegular", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;	
}
#cartePostale  .cartePostaleSousContenu{
	font-size:23px;
}
#cartePostale .cartePostaleNumero{
	font-size:144px;
	line-height:144px;
	color:#828282;
}

.bloc_neutre{
	margin:43px 0 20px 0;
	background:#424242;
	border-top:#2d5df8 5px solid;
	border-bottom:#2d5df8 5px solid;
	position:relative;
	min-height:320px;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.bouton_carte_postale{
	margin-top:8px;
	background-color:rgba(255,255,255,1.00);
	padding:3px 8px; 
	color:#000000;
	display:block;
}
.bouton_carte_postale:hover{
	background-color:#F2F2F2;
	color:#030303;
}









#dispoDvd{
	background:#FFFFFF;
	margin:0 0 20px 0;
	padding:20px 21px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	position:relative;
	min-height:328px;
}
#dispoDvd .dispoDvdJaquette{
	height:286px;
	width:200px;
	position:absolute;
}
#dispoDvd .dispoDvdConteneur{
	width:auto;
	position:relative;
	padding:0 0 0 220px;
	line-height:normal;
}
#dispoDvd .dispoDvdSurTitre{
	background:url(imgs/carreOrange.png) 0 50% no-repeat;
	line-height:18px;
	font-size:18px;
	padding:0 0 0 22px;
	margin-bottom:10px;
	text-transform:uppercase;
	font-family:"openSansRegular", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;
	color:#000000;
}
#dispoDvd .dispoDvdTitre{
	font-family:"robotoRegular", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;
	font-size:30px;
	color:#000000;
	display:inline-block;
	margin-bottom:10px;
}
#dispoDvd .dispoDvdContenu{
	font-family:"openSansRegular", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;
	font-size:16px;
	color:#000000;
	line-height:23px;
}
#dispoDvd .dispoDvdSuite{
	font-family:"openSansRegular", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;
	font-size:16px;
	color:#d2301f;
	padding-left:17px;
	line-height:20px;
	margin:13px 0 30px 0;
	background:url(imgs/fleche_01_rouge.png) 0 0 no-repeat;
}
#dispoDvd a:hover{
	text-decoration:none;
}
#dispoDvd .dispoDvdBoutonCommander, #derniereParution .derniereParutionBoutonCommander {
	background:url(imgs/commanderDvd.png) 0 0 no-repeat;
	width:240px;
	height:41px;
	display:inline-block;
}
#dispoDvd .dispoDvdBoutonCommander{
	float:right;
}
#derniereParution{
	margin-bottom:20px;
}
#derniereParution .derniereParutionHeader{
	background:#f08a1d url(imgs/carreBlanc.png) 20px 11px no-repeat;
	line-height:35px;
	font-family:"openSansSemiBold", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;
	font-size:18px;
	color:#FFFFFF;
	padding:0 42px;
	text-transform:uppercase;
	
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
#derniereParution .derniereParutionContenu{
	background-position:50% 50%;
	background-size:cover;
	background-repeat:no-repeat;
	height:291px;
	display:block;
	padding:20px;
	position:relative;
	
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}
#derniereParution  .derniereParutionTitre{
	font-family:"robotoRegular", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;	
	font-size:40px;
	text-align:right;
	color:#FFFFFF;
}
#derniereParution  .derniereParutionSousTitre{
	font-family:"openSansSemiBold", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;
	font-size:16px;
	text-align:right;
	color:#FFFFFF;
}
#derniereParution .derniereParutionBoutonCommander{
	bottom:17px;
	right:17px;
	position:absolute;
}
#aParaitre{
	
}
#aParaitre .aParaitreCase{
	width:50%;
	display:inline-block;
	
}
#aParaitre .aParaitreCase:nth-child(1){
	padding-right:2%;
}
#aParaitre .aParaitreCase:nth-child(2){
	padding-left:2%;
}
#aParaitre .aParaitreSurTitre{
	font-family:"openSansSemiBold", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;
	line-height:18px;
	font-size:18px;
	color:#000000;
	text-transform:uppercase;
	padding-left:20px;
	margin:0 0 8px 3px;
	background:url(imgs/carreBleuTurquoise.png) 0 bottom no-repeat;	
}
#aParaitre .aParaitreContenu{
	position:relative;
	background-position:50% 50%;
	background-size:cover;
	background-repeat:no-repeat;
	width:100%;
	display:block;
	padding-top:201px;
	margin-bottom:30px;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
#aParaitre .aParaitreTitre{
	position:absolute;
	bottom:16px;
	left:0;
	rigt:0;
	width:100%;
	height:35px;
	line-height:35px;
	font-size:25px;
	font-family:"robotoRegular", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif !important;
	color:#000000;
	text-align:center;
	background-color:#e8e8e8;
}

#sliderDvd{
	height:194px;
	line-height:194px;
	background-color:#000000;
	margin-bottom:31px;
	position:relative;
	overflow:hidden;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
#sliderDvd #sliderDvdFlecheGauche, #sliderDvd #sliderDvdFlecheDroite{
	width:42px;
	height:100%;
	display:block;
	position:absolute;
	z-index:100;
	cursor:pointer;
}
#sliderDvd #sliderDvdFlecheGauche{
	background:#000000 url(imgs/flecheGauche.png) 50% 50% no-repeat;
	left:0;
}
#sliderDvd #sliderDvdFlecheDroite{
	background:#000000 url(imgs/flecheDroite.png) 50% 50% no-repeat;
	right:0;
}
#sliderDvd #sliderDvdConteneur{
	position:absolute;
	left:40px;
	white-space:nowrap;
}
#sliderDvd .sliderDvdJaquette{
	height:160px !important;
	width:120px !important;
	display:inline-block;
	margin:0 10px;
	-webkit-transition:all ease 0.6s;
	-moz-transition:all ease 0.6s;
	transition:all ease 0.6s;
}

/********************************* fin colonne gauche / début règles responsive *********************************/
@media only screen and (max-width: 1180px) {
	#search{
		display:block;
		padding-right:0;
		margin-bottom:30px;
	}
	#search input[type=submit]{
		right:0;
	}
	#social{
		top:62px;
	}
	#agendaHot{
		margin-top:59px;
	}
	#agendaHot .agendaDate{
		font-size:20px;
	}
	#agendaHot .agendaCkeck{
		background:url(imgs/Agenda-checked.png) 50% 50% no-repeat;
		background-size:contain;
		width:32px;
		height:32px;
	}
	#agendaHot .agendaLieu, #agendaHot .agendaDesc{
		font-size:16px
	}
	#soutien .soutienContenu .soutienTexte{
		padding-top:6px;
	}
	#soutien .soutienDon{
		padding-top:17px;
	}
	#soutien .soutienTitre{
		text-align:center;
		font-size:20px;
		padding:0 12px;
	}

	#projets .projetsChronoTitre{
		background-image:url(imgs/Chrono_mini.jpg);
		font-size:23px;
	}
	#projets .projetsVignette{
	}
	#projets .projetsVignette img{
	}
	#aParaitre .aParaitreTitre{
		font-size:20px;
	}
}

@media only screen and (max-width: 1180px) {
	#soutien .soutienTitre{
		text-align:center;
		font-size:17px;
		padding:0 7px;
		background-image:none;
	}
}
@media (max-width: 560px) {
	.dispoDvdJaquette,	.dispoDvdConteneur{
		width:100% !important;
		height:auto !important;
		position:relative !important;
		display:block !important;
		padding:0 !important;
	}
	.dispoDvdConteneur{
	}
}

@media all and (orientation:portrait) {
	#cartePostale{
		min-height:100px !important;
	}
	.cartePostaleCentrageVertical{
		text-align: center !important;
		line-height:normal !important;
		position:relative !important;
		padding-bottom:12px !important;
		height:auto !important;
		width:100% !important;
	}
	.cartePostaleVideo{
		margin: 15px 3% !important;
		width: 94% !important;
		height:auto !important;
	}
}




/********************************* fin règles responsive / debut crowdfunding *********************************/
.contenu_crowdfunding{
	padding:0 20px 20px;
}
.contenu_crowdfunding h4{
	margin-bottom:0;
}

.crowdfunding_conteneur{
	background-color:#f2df06;
	position:relative;
	width:100%;
	max-width:500px;
	margin:0 auto;
	text-align:center;
}
.crowdfunding_image{
	width:100%;
}
.crowdfunding_video{
	position: absolute;
	width:100%;
	z-index: 100;
	left: 0;
	top: 0;
}
.crowdPlay{
    position: absolute;
    width: 100%;
    z-index: 100;
    left: 0;
    top: 0;
	cursor:pointer;
}
.crowd{
	background-color:#FFFFFF;
}
.texte_crowdfunding_parution{
	width:50%;
	background-color:#FFFFFF;
	padding:20px;
	font-size:15px;
	float:right;
}
.conteneur_bouton{
	text-align:center;
	padding:20px 0 16px;
}
.crowd_bouton{
	margin:16px auto 12px;
	background-color:#4890DA;
	padding:8px 14px;
	font-weight:bold;
	color:#FFFFFF;
	font-size:20px;
}
.crowd_bouton:hover{
	background-color:#E0E0E0;
	color:#030303;
}
.affiche_crowd, .crowd p{
	width:100%;
	max-width:500px;
	margin:0 auto;
	display:block
}
.colonne_dons{
	float:right;
	padding:0 0 20px 40px;
}
.bloc_contrepartie{
	cursor:pointer;
	width:320px;
	font-size:12px;
	border:#DDDDDD 1px solid;
	padding:5px 18px;
	margin-bottom:14px;
	background-color:rgba(250,250,250,1.00);
	
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
}
.bloc_contrepartie:hover{
	background-color:rgba(240,240,240,1.00);
}
.bloc_contrepartie h3{
	font-size:16px;
	font-weight:bold;
}

.bloc_palier{
	width:46%;
	margin:20px 2% 20px 1%;
	vertical-align:middle;
	display:inline-block;

	font-size:12px;
	border:#DDDDDD 1px solid;
	padding:5px 18px;
	margin-bottom:14px;
}
.bloc_palier img{
	height:120px;
	width:auto;
}
.bloc_palier h3{
	color:#F08A1D;
	font-size:22px;
	font-weight:bold;
}
.progress{
	background:#D0D0D0 !important;
}
@media (max-width: 560px) {
	 .texte_crowdfunding_parution{
		width:100%;
		float:none;
	}
	.crowd img{
		width:100% !important;
	}

}
@media (max-width: 850px) {
	.colonne_dons {
	    float: none;
	    padding: 0;
		width:100%
	}
	.bloc_contrepartie{
		width:100%;
	}
	#cf_affiche, #cf_dons{
		width:100% !important;
	}
	.bloc_palier{
		margin:10px auto;
		width:100%;
	}
	
}



/******************/

.video-container {
position: relative;
padding-bottom: 51%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.ytplaylist_conteneur{
	width:100%;
	max-width:600px;
	margin:0 auto;
}

.thumbs_conteneur{
	width:100%;
	height:66px;
	background-color:#E0E0E0;
}
.thumbs_conteneur .padder{
	padding:6px;
	height:100%;
	width:16%;
	display:block;
	float:left;
}
.thumbs_conteneur a{
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50% 50%;
	display:block;
	height:100%;
	width:100%;
	opacity:0.6;
	outline:none !important;
	border:none;
	cursor:pointer;
	
	-webkit-transition:opacity ease 0.3s;
	-moz-transition:opacity ease 0.3s;
	transition:opacity ease 0.3s;
}
.thumbs_conteneur .padder.playing{
	padding:4px !important;
}
.thumbs_conteneur .padder.playing a{
	border:2px #1F47FF solid;
	opacity:1 !important;
}

.thumbs_conteneur .padder a:hover{
	opacity:1 !important;
}
/***************** tooltips *****/
.mytooltip {
	position:relative;
}

.mytooltip .mytooltiptext {
    visibility: hidden;
    width: 120px;
    background-color:rgba(52,52,52,0.85);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 3px 5px;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 0.3s;
}

.mytooltip:hover .mytooltiptext {
    visibility: visible;
    opacity: 1;
}