
@font-face { 
font-family:'GothamBook'; 
src:url(https://www.smd-systems.com/fonts/gotham-book-webfont.eot);
src:url(https://www.smd-systems.com/fonts/gotham-book-webfont.eot?#iefix) format('embedded-opentype'),
    url(https://www.smd-systems.com/fonts/gotham-book-webfont.woff2) format('woff2'),
	url(https://www.smd-systems.com/fonts/gotham-book-webfont.woff) format('woff'),
	url(https://www.smd-systems.com/fonts/gotham-book-webfont.ttf) format('truetype'),
	url(https://www.smd-systems.com/fonts/gotham-book-webfont.svg#gothambook) format('svg');
	font-weight:200;
	font-style:normal;
}

.fontsforweb_fontid_10146 {
	font-family: 'GothamBook' !important;
}


* { 
    box-sizing: border-box;
	margin:0; 
	padding:0;
	vertical-align: top;
}

html {
	font-family: 'GothamBook' !important;
	font-size: 16px; 
	line-height : 1.5;
	text-align: left;  
	font-weight: normal; 
	color: #000000; 
	scroll-behavior: smooth;
}




body { 	

}

td {
	vertical-align: top;
	 padding-right: 16px;
}


.div-full {
	display: block;
	width: 100%; 
	min-width: 400px;
	padding: 20px 0px 0px 0px;
} 
.div-scaled {
	max-width: 850px;
	padding: 0px 10px 0px 10px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	/*display: table;*/
	
} 
.add-padding { padding-bottom: 48px; }

.div-scaled a:link, .div-scaled a:visited, .div-scaled a:focus { color: #a18e90; text-decoration: none;}	
.div-scaled a:hover { color: #a18e90; text-decoration: underline;}


.div-right-redim-center  { text-align: right; }
.div-right-redim-left  { text-align: right; }
.div-left-redim-center    { text-align: left; }

.div-redim-padding { }

[class*="div-cell-"] {	width: 100%; float: left;  display: table-cell; padding: 0px 0px 20px 0px; }
.div-cell-0    { width: auto; } 
.div-cell-5    { width:  5%; } 
.div-cell-10  { width: 10%; } 
.div-cell-15  { width: 15%; } 
.div-cell-20  { width: 20%; } 
.div-cell-25  { width: 25%; } 
.div-cell-30  { width: 30%; } 
.div-cell-35  { width: 35%; } 
.div-cell-40  { width: 40%; } 
.div-cell-45  { width: 45%; } 
.div-cell-50  { width: 50%; } 
.div-cell-55  { width: 55%; } 
.div-cell-60  { width: 60%; } 
.div-cell-65  { width: 65%; } 
.div-cell-70  { width: 70%; } 
.div-cell-75  { width: 75%; } 
.div-cell-80  { width: 80%; } 
.div-cell-85  { width: 85%; } 
.div-cell-90  { width: 90%; } 
.div-cell-100 { width: 100%; } 
@media only screen and (max-width: 780px) {
    /* For mobile : */
    [class*="div-cell-"] {	width: 100%; float: none; display: inline-block; padding: 0px 20px 0px 20px;}
	.div-cell-5 { display: none; }
	.div-right-redim-center  { text-align: center; }
	.div-right-redim-left  { text-align: left; }
	.div-left-redim-center    { text-align: center; }
	.div-redim-padding            { padding-bottom: 20px; }
  .redim100 { width: 100%; }
  .redimblock { display: block; width: auto; }
}

.div-title {
	font-size: 24px; 
	padding-bottom:20px;
	font-weight: bold; 
}

.div-title2 {
	font-size: 24px; 
	font-weight: bold; 
  text-align: center;
  text-transform: uppercase;
}

.div-dotrounded {
	background-image:url('images/bgdot.png');
	-moz-border-radius: 16px;
	border-radius: 16px;
	padding: 16px;
} 


.zoom img { transition: transform .2s; margin: 0 auto;}
.zoom:hover img { transform: scale(1.0); -webkit-filter: brightness(120%); filter: brightness(120%); text-decoration: underline; }
.zoom:hover a {text-decoration: underline;  cursor: pointer; }

.linkicon { color: #a18e90; padding: 10px; font-weight: bold; display: inline-block; padding: 0px; white-space: nowrap; cursor: pointer;}
.linkicon img { width: 60px; height: 60px; vertical-align:middle; padding: 4px; cursor: pointer; }

.calendar  { height: 80px; float: left; padding-right: 4px; padding-bottom: 32px; }

.div-select { 
    display: block;
	color: #fff;
	background-color:#7f676a; 
	padding: 8px;
	cursor: pointer;
	box-sizing: border-box;
	border: 4px solid #fff;
	border-radius: 0px 24px 24px 0px;
	-moz-border-radius: 0px 24px 24px 0px;
	white-space: nowrap;
}
.div-select:hover {
	color: #fff;
	background-color:#a18e90; 
	}

	
.div-form { 
    text-align: left;  
    display: block;
	margin-top: 16px;
	padding: 16px;
	border: 8px solid #e2dadb;
	/*
	border-style: dotted; 
	border-width: thick; 
	border-color: #eebbbb; 

	border-radius: 32px;
	-moz-border-radius: 32px;*/
}
	

.row::after {
    content: "";
    clear: both;
    display: table;
}



.navbar{
	box-sizing: border-box;
	/*background-color: #7f676a; */
    width: 100%;
	display:inline-block;
	font-size: 16px;
    letter-spacing: 2px;	
	line-height : normal;
	padding-bottom: 24px;	
	/*border-bottom: 12px solid #dc011a;*/
	/*border-bottom: 12px solid #ffffff;*/
}


.navbar a {
	white-space: nowrap;
	box-sizing: border-box;
	display: inline-block;
	padding: 4px 24px 4px 24px;	
    text-decoration: none;
    font-weight: bold;  
}
.navbar a:link, .navbar a:visited{ text-decoration: none; color: #a18e90; border-bottom: 4px solid #ffffff;}	
.navbar a:hover, .navbar a:focus { text-decoration: none; color: #a18e90; border-bottom: 4px solid #e2dadb;}


/*
 rouge balibom      : dc011a
 rouge clair        : ff5569
 fond de formulaire : e9e5de
 
 gris de liens      : a18e90
 gris foncé         : 7f676a
 gris super foncé   : 3f3334
 gris super foncé + : 2a2223
 gris trés clair    : e2dadb
 
 jaune "info"       : ffffcc
 
 2a2223
 
*/
.darkbg { background-color: #2a2223; color: #ffffff;}
.lightbg { background-color: #e2dadb; color: #000000;}
.linkbottom { color: #e2dadb; }
.linkbottom a:link, .linkbottom a:visited { text-decoration: none; color: #ffffff;}	
.linkbottom a:hover, .linkbottom a:focus { text-decoration: underline; color: #ffffff;}


img { vertical-align: middle; }


.parallax {
	height:350px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	vertical-align: bottom;
	position: relative;
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -moz-animation: fadein 1s; /* Firefox */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera */
    animation: fadein 1s;
	animation-timing-function: linear ;
}

@keyframes fadein         { from { opacity: 0; } to   { opacity: 1; } }
@-moz-keyframes fadein    { from { opacity: 0; } to   { opacity: 1; } } /* Firefox */
@-webkit-keyframes fadein { from { opacity: 0; } to   { opacity: 1; } } /* Safari and Chrome */
@-ms-keyframes fadein     { from { opacity: 0; } to   { opacity: 1; } } /* Internet Explorer */
@-o-keyframes fadein      { from { opacity: 0; } to   { opacity: 1; } } /* Opera */

.parallaxdiv {
	font-size: 24px; 
	line-height : normal;
    color: #000000;
	white-space: nowrap;
	margin: 40px; 
	padding: 20px;
    background-color: #fff;
	display: table; 
	border-radius: 0px 60px 60px 0px;
	-moz-border-radius: 0px 60px 60px 0px;
	position: absolute;
	bottom: 0px;
	right: 0%;
	min-width: 380px;
    width: auto;
}

.parallaxdiv a:link, .parallaxdiv a:visited, .parallaxdiv a:focus { color: #a18e90; text-decoration: none;}	
.parallaxdiv a:hover { color: #a18e90; text-decoration: underline;}

a.link-parallaxdiv {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

label {
 padding:4px;
 display:block;
 cursor: pointer;
 }
 
input, textarea, select, option {
 font-family: 'GothamBook' !important;
 font-size: 16px; 
 padding:8px;
 margin-bottom:8px;
 border-style: none none solid none;
 border-bottom:4px solid #e2dadb;
 background-color:#ffffcc;
 /*border-radius:5px;
 -moz-border-radius:5px;*/
 }	

input[type=radio],  input[type=checkbox] {
 /*background-color:transparent;*/
 background-color:#ffffcc;
 border:none;
 width:20px;
 height:20px;
 padding-right:4px;
 vertical-align: bottom;
 cursor: pointer;
 }


.labelradio {width:auto; font-weight: normal; display: inline-block;  border-radius:16px; -moz-border-radius:16px; padding: 4px 16px 4px 8px; margin: 0px 8px 0px 8px; }
.labelradio input[type=radio] { padding: 0px; margin: 2px 4px 0px 0px; vertical-align: top; }
.hoverlabel label:hover  { background-color: #e2dadb; }


input[type=button], input[type=submit], input[type=reset] {
  background-color: #7f676a;
  border: none;
  color: white;
  font-weight: bold;
  font-size: 24px;
  padding: 8px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor:pointer;
 } 
 
input[type=submit]:hover  {
 background-color: #a18e90;
}
 
input[type=image] {
 background-color:transparent;
 height: 60px;
 border:none;
 cursor:pointer;
 } 
  
 
input[type=select] {
 /*width: 100%;*/
 }

.INPUTSTYLE{
 width: 100%;
 }

.INPUTSTYLENUMBER{
 width: 60px;
 height: 50px;
 border-style: none none solid none;
 border-bottom:4px solid #e2dadb;
 background-color:#ffffcc;
 font-weight: bold;
 font-size: 32px;
 text-align: center; 
 }


.RADIOSTYLE{
vertical-align: middle; 
margin-top: 0px;
padding:3px;
}

textarea{
 font-weight: normal;
 resize: none;
 width: 100%;
 }
	

.imgAudio8Go{       width:130px;height:70px; background-size:contain; background-image:url(https://www.balibom.fr/images/baladeur-audio-tech.png); -moz-border-radius: 12px; border-radius: 12px; }
.imgVideo8Go{       width:130px;height:70px; background-size:contain; background-image:url(https://www.balibom.fr/images/baladeur-video24-tech2.png); -moz-border-radius: 12px; border-radius: 12px; }

.cc-selector-2 input{
    position:absolute;
    z-index:999;
	margin:8px;
}
.cc-selector-2 input:active +.drinkcard-cc{opacity: .8;}
.cc-selector-2 input:checked +.drinkcard-cc{
    -webkit-filter: none;
    -moz-filter: none;
	-o-filter: none;
	-ms-filter: none;
    filter: none;
	opacity: 1;
	filter: alpha(opacity=100);
	background-color: #dc011a;
}
.drinkcard-cc{
    cursor:pointer;
    background-color: #e9e5de;	
    background-repeat:no-repeat;
	background-position: bottom; 
    display:inline-block;
    /*width:240px;height:100px; */
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.drinkcard-cc:hover{
	opacity: 1;
	filter: alpha(opacity=100);
	background-color: #e9e5de;
}

.slideshow-container {
	position: relative; 
	background-color: #7f676a;
	}

.dot {
  cursor:pointer;
  height: 24px;
  width: 24px;
  margin: 0 2px;
  background-color: #7f676a;
  border-radius: 50%;
  -moz-border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
 
.active, .dot:hover { background-color: #e2dadb; }


.videoWrapper {
	position: relative;
	padding-bottom: 53.2%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.infos {
	background-color: #ffffcc; 
	color: #000000;
	text-align: left;
	padding: 10px; 
	border-style: dotted; 
	border-width: thick; 
	border-color: #eebbbb; 
	margin-top: 16px; 
	margin-bottom: 16px;
}


.heart {
    -webkit-animation: beat .25s infinite alternate; /* Safari and Chrome */
    -moz-animation: beat .25s infinite alternate; /* Firefox */
    -ms-animation: beat .25s infinite alternate; /* Internet Explorer */
    -o-animation: beat .25s infinite alternate; /* Opera */
	animation: beat .25s infinite alternate;
	transform-origin: center;
	position: absolute;
	z-index: 1;
	width: 120px; 
	height: 120px;
}

/* Heart beat animation */
@keyframes beat{
	to { transform: scale(1.05);  }
}


.div-expand{
	max-height: 0px;
	overflow: hidden;
	transition: max-height 3s ease-in;
    -webkit-transition: max-height 3s ease-in; /* Safari and Chrome */
    -moz-transition: max-height 3s ease-in; /* Firefox */
    -ms-transition: max-height 3s ease-in; /* Internet Explorer */
    -o-transition: max-height 3s ease-in; /* Opera */
}

.button-expand{
	max-height: 100px;
	overflow: hidden;
	transition: max-height .5s ease-out;
    -webkit-transition: max-height .5s ease-out; /* Safari and Chrome */
    -moz-transition: max-height .5s ease-out; /* Firefox */
    -ms-transition: max-height .5s ease-out; /* Internet Explorer */
    -o-transition: max-height .5s ease-out; /* Opera */
}

.button-expand  a{
	cursor: pointer;
	color: #a18e90;
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

#TopDiv {
	color: #000000;
	background-color: #ffffff;
	padding: 10px;
	border-radius:0px 10px 10px 0px;
    -moz-border-radius:0px 10px 10px 0px;
    display: none;
    position: fixed;
    bottom: 32px;
    left: 0px;
    z-index: 99;
    border: none;
    outline: none;
    cursor: pointer;
	font-size: 12px;
	font-weight: normal;
    opacity: 0.5; 
	filter: alpha(opacity=50);
}

#TopDiv a {
	
	color: #000000;
	text-decoration: none;
}
#TopDiv a:hover {
	color: #000000;
	text-decoration: none;
	font-weight: bold;
}

.apklist { font-weight: normal; text-align: center; height: 200px;}
.apklist img { height: 80px; }





