@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,latin-ext,cyrillic);
<!--
@font-face {
    font-family: 'MyriadWebPro';
    src: url('../..//user/images/fonts/MyriadWebPro.eot');
    src: url('../..//user/images/fonts/MyriadWebPro.eot?#iefix') format('embedded-opentype'),
         url('../..//user/images/fonts/MyriadWebPro.ttf') format('truetype'),
         url('../..//user/images/fonts/MyriadWebPro.svg#MyriadWebPro') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadWebPro-Bold';
    src: url('../..//user/images/fonts/MyriadWebPro-Bold.eot');
    src: url('../..//user/images/fonts/MyriadWebPro-Bold.eot?#iefix') format('embedded-opentype'),
         url('../..//user/images/fonts/MyriadWebPro-Bold.ttf') format('truetype'),
         url('../..//user/images/fonts/MyriadWebPro-Bold.svg#MyriadWebPro-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'News-Gothic-Regular';
    src: url('../..//user/images/fonts/News-Gothic-Regular.eot');
    src: url('../..//user/images/fonts/News-Gothic-Regular.eot?#iefix') format('embedded-opentype'),
         url('../..//user/images/fonts/News-Gothic-Regular.ttf') format('truetype'),
         url('../..//user/images/fonts/News-Gothic-Regular.svg#News-Gothic-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
-->

@font-face {
    font-family: 'Franklin-Gothic-Demi-Cond-Regular';
    src: url('../..//user/images/fonts/Franklin-Gothic-Demi-Cond-Regular.eot');
    src: url('../..//user/images/fonts/Franklin-Gothic-Demi-Cond-Regular.eot?#iefix') format('embedded-opentype'),
         url('../..//user/images/fonts/Franklin-Gothic-Demi-Cond-Regular.ttf') format('truetype'),
         url('../..//user/images/fonts/Franklin-Gothic-Demi-Cond-Regular.svg#Franklin-Gothic-Demi-Cond-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../..//user/images/fonts/BebasNeue-webfont.eot');
    src: url('../..//user/images/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../..//user/images/fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('../..//user/images/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dincond-mediumregular';
    src: url('../..//user/images/fonts/dincond-medium-webfont.eot');
    src: url('../..//user/images/fonts/dincond-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../..//user/images/fonts/dincond-medium-webfont.ttf') format('truetype'),
         url('../..//user/images/fonts/dincond-medium-webfont.svg#dincond-mediumregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'icomoon';
    src: url('../..//user/images/fonts/icomoon.eot');
    src: url('../..//user/images/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
         url('../..//user/images/fonts/icomoon.ttf') format('truetype'),
         url('../..//user/images/fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-Home3:before {
	content: "\e902";
	font-size:18px;
}

.icon-location:before {
	content: "\e947";
	font-size:33px;
	color:#626262;
}
.icon-location2:before {
	content: "\e948";
  font-size:33px;
  color:#84C33F
}

.icon-location:hover:before {
	content: "\e947";
	font-size:33px;
	color:#C53632
}
.icon-location2:hover:before {
	content: "\e948";
  font-size:33px;
	color:#C53632
}


h1 {
  font-size:80px;
  color:#555555;
}
h2 {
  font-size:40px;
  color:#555555;
}
.top {
  height:68px;
  padding-top:20px;
  line-height:50px;
  overflow:hidden;
  font-size:15px;
}
.w3-topnav {
  padding:0 0px;
}
.w3-topnav a{
  float:left;
  color:#000 !important;
  letter-spacing:2px;/**/
  font-size:16px; /**/
  line-height:71px;
  font-family:MyriadWebPro;
  /*Centrage vertical*/
  border-bottom:none; 
  border-top:2px solid transparent;
  height:71px !important;
}
.w3-topnav a:hover {
  background-color:#f5f5f5;
  color:#000 !important;
  /*Centrage vertical*/
  border-bottom:none;
  border-top:2px solid transparent;

 height:71px !important;
}
.topnavlinks {
  width:auto;
  float:right;
}

a.topnav-localicons {
  font-size:23px !important;
  padding:0pX 20px 0px 20px;
  font-weight:bold;
}

a.topnav-icons {
  font-size:21px;
}
#menubtn {
  float:left;
  font-size:16px;
  color:#33292e;
}

#navbtn_01{color:#33292e;padding-right:15px;padding-left:15px;}
#navbtn_boutique{color:#000;padding-right:15px;padding-left:15px;border-top:2px solid transparent;}
#navbtn_fb{color:#000;padding-right:8px;padding-left:8px;border-top:2px solid transparent;}

#navbtn_000,{color:#fff;padding-right:0px;padding-left:0px;}
.w3-sidenav {
  overflow:hidden;/**/
  position:absolute !important;
  display:none;
  background-color:#fff;
z-index:100
}
.w3-sidenav a:hover,#nav_menu-xs a:focus{background-color:#f5f5f5}
.w3-sidenav a {
  padding:8 20px;
  /*color:#ffffff; #555555;*/
}
.w3-sidenav h2 {
  font-size:20px;
  padding-left:20px;
  color:#434343; /*000000;*/
}
.w3-dropnav {
  display:none;
  padding-bottom:40px;
}
.w3-dropnav h3 {
  padding-top:20px;
}
.w3-dropnav .w3-col {
  height:260px;
}
.w3-closebtn {
  padding:10px 20px !important;
  position:absolute;
  right:0;
  color:#33292E !important;
}
#nav_menu-xs {background-color:#fff;text-align:center;}
#nav_menu-xs a {
  margin:10px;
  display:block;
  font-size:16px;
  letter-spacing:4px;
  color:inherit;/**/
  text-decoration:none;
  
}
#nav_menu-xs a:hover,#nav_menu-xs a:focus{background-color:#f5f5f5}
#nav_menu-xs a{display:block;transition:.3s}
#nav_menu-xs .w3-closebtn {margin:0;}

.w3-closebtn:hover {background-color:#cccccc;}

#sectionxs_01, #sectionxs_02, #sectionxs_03 {
  background-color:#ffffff;
}
#sectionxs_01 .w3-closebtn, #sectionxs_02 .w3-closebtn, #sectionxs_03 .w3-closebtn {
  display:none;
}
#sectionxs_01 a, #sectionxs_02 a, #sectionxs_03 a {
  letter-spacing:normal;
}
#nav_translate, #nav_search {
  display:none;
}
#nav_translate a {
  display:inline;
}
#googleSearch {
  color:#000000;
}
.searchdiv {
  max-width:400px;
  margin:auto;
  text-align:left;
  font-size:16px;
}



div.cse .gsc-control-cse, div.gsc-control-cse {
  background-color:transparent;
  border:none;
  padding:0px;
  margin:0px;
}
td.gsc-search-button input.gsc-search-button {
  background-color:#555555;
}
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gsc-search-button {
  box-sizing:content-box;
  line-height:normal;
}
.gsc-tabsArea div {
  overflow:visible;
}
.gsst_a .gscb_a {
  margin-top:3px;
}
.section{
  padding:4%;
}
.section p {
  color:#555555;
  font-size:30px;
	margin:0 0 10px !important;
}
.w3-code {
  padding:12px 16px;
  border-left:4px solid #8AC007 !important;
}
.sectionbtn {
  background-color:#555555;
  margin:10px 5px 5px 5px;
}
.section.onethird p {
  font-size:20px;
}
.section.onethird .w3-card-2 {
  padding:15px 10px;
  height:260px;
}
footer a {
  text-decoration:none;
}
.about {
  text-align:center;
  margin:20px auto auto auto;
  font-size:14px;
  letter-spacing:4px;
  word-spacing: 10px;
  color:#555555;
}
#fblikeframe {
  display:none;
}
#popupframe {
  position:fixed;
  height:100%;
  width:100%;
  top:0;
  left:0;
  background-color:#000000;
  opacity:0.5;
  z-index:999;
}
#popupDIV {
  position:fixed;
  height:40%;
  width:40%;
  min-width:310px;
  min-height:250px;
  top:30%;
  left:30%;
  background-color:#ffffff;
  z-index:9999;
}

/**/


/*@media only screen and (min-width :1100px) {
  #main {
    margin-left:230px;
  }
  #sidemenu {
    width:230px;
    display:block;
  }

}*/

@media only screen and (min-width :992px) {
  .about {text-align:right;margin:auto;}
  .css-hide-when-large {display:none;}
}

/*--------------------------------------------------*/
/* TOPNAV navbtn
/*--------------------------------------------------*/
@media screen and (min-width :1920px) {
     #main {width:1920px !important; margin:auto !important;} 
} 

/*Top recherche*/
@media screen and (min-width :768px) {
     #navbtn_x2 {display:none !important;border-top:2px solid transparent;} 
     #navbtn_x1 {display:inline-block !important;border-top:2px solid transparent;}  
} 

@media screen and (max-width: 768px)  {
     #navbtn_x2 {display:inline-block !important;width:71px;border-top:2px solid transparent;} 
     #navbtn_x1 {display:none !important;border-top:2px solid transparent;} 
}
/*Top recherche*/

@media screen and (max-width: 2560px) and (min-width :1960px) {
  #navbtn_00 {font-size:21px !important;}
}
@media screen and (max-width: 1960px) and (min-width :1720px){
  .w3-topnav a{font-size:15px;font-family:MyriadWebPro !important;line-height:69px;text-transform:uppercase;letter-spacing:2px;}
  #navbtn_00 {font-size:21px !important;}
 }
@media screen and (max-width: 1720px) and (min-width :1570px){
  .w3-topnav a{font-size:14px;font-family:MyriadWebPro !important;line-height:69px;text-transform:uppercase;letter-spacing:2px;}
  #navbtn_01{padding-right:8px;padding-left:8px;}
   #navbtn_00 {font-size:21px !important;}
}
@media screen and (max-width: 1570px) and (min-width :1480px){
  .w3-topnav a{font-size:14px;font-family:MyriadWebPro !important;line-height:69px;text-transform:uppercase;letter-spacing:1px;}
  #navbtn_01{padding-right:8px;padding-left:8px;}
  #navbtn_00 {font-size:21px !important;}
}
@media screen and (max-width: 1480px) and (min-width :1360px){
  .w3-topnav a{font-size:13px;font-family:MyriadWebPro !important;line-height:69px;text-transform:uppercase;letter-spacing:0px;}
  #navbtn_01{padding-right:8px;padding-left:8px;}
  #navbtn_00 {font-size:21px !important;}
}

@media screen and (max-width: 1360px) and (min-width :1040px) {
  .w3-topnav a{font-size:13px;font-family:MyriadWebPro !important;line-height:69px;text-transform:uppercase;letter-spacing:0px;}
  #navbtn_01,#navbtn_000 {display:none !important;}/* */
  #navbtn_00 {font-size:21px !important;}
 }

@media screen and (min-width: 1152px) {
 /*max main*/
  #maincontainer {display:inline-block;width:852px;}  
  #mustcontainer {display:inline-block;width:300px;}  
  #fullcontainer {display:block;width:1152px;margin:auto;} 
}
@media only screen and (max-width :1040px) {
  #navbtn_01,#navbtn_02,#navbtn_03,#navbtn_04,#navbtn_05,#navbtn_06,#navbtn_07,#navbtn_08,#navbtn_09,#navbtn_10,#navbtn_000 {display:none !important;}/**/
  #navbtn_00 {font-size:21px !important;} 
}

@media only screen and (max-width :991px) {
  .topsection {text-align:center;}
  .topsection img, .topsection div {float:none;margin:auto;}
  .top {height:100px;}
  .top img {display:block;margin:auto;}
  .toptext {width:100%;text-align:center;}
  .css-hide-when-small {display:none;} 
   #navbtn_01,#navbtn_02,#navbtn_03,#navbtn_04,#navbtn_05,#navbtn_06,#navbtn_07,#navbtn_08,#navbtn_09,#navbtn_10,#navbtn_000 {display:none !important;} /**/
}
@media screen and (max-width: 880px) {
   #navbtn_01,#navbtn_02,#navbtn_03,#navbtn_04,#navbtn_05,#navbtn_06,#navbtn_07,#navbtn_08,#navbtn_09,#navbtn_10,#navbtn_000 {display:none !important;}
  #navbtn_00 {font-size:21px !important;} 
}




@media screen and (max-width: 768px) {
  h1 {font-size:50px;}
  .section p {font-size:18px;}
  .sectionexample {display:none !important;}
  .section {padding:0 0 30px 0;}
  .onethird {padding:30px;}
  #navbtn_01,#navbtn_02,#navbtn_03,#navbtn_04 {display:none !important;}
  #menubtn {background-repeat:repeat-x !important;/*To test for devices less than 768px*/}
  .w3-sidenav {display:none !important;}
  #main {margin-left:0% !important;}
}
@media screen and (min-width: 769px) { 
  #nav_menu-xs {display:none !important;}
}
@media screen and (max-width:600px) {
  .top {height:68px;}
  .toptext {display:none;}
  .w3-dropnav .w3-col {height:auto;} 
  .imgheader2 {width:240px;margin-top:8px;}
  .imgheader3 {width:90px;margin-top:8px;}
}
@media screen and (max-width:560px) {
  #typedeproduitonmenu {display:none !important;}
  #typedeproduitoffmenu {display:none !important;}

}

@media screen and (max-width:320px) {
    #navbtn_fb{display:none;}
}

@media screen and (max-width:560px) {
  .imgheader {width:240px;margin-top:8px !important;}
}

@media screen and (max-width:440px) {
  .imgheader {width:190px;margin-top:14px !important;}
}

@media screen and (max-width:390px) {
  .imgheader {width:160px;margin-top:17px !important;padding-left:0px !important;padding-right:0px !important} 
}


@media screen and (max-width:478px) {
  .yttn {width:120px;}
  .imgheader2 {width:160px;margin-bottom:0px;}
  .imgheader3 {width:90px;margin-top:8px;}
}

/* IPAD Landscape*/
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape){#navbtn_01,#navbtn_02,#navbtn_03,#navbtn_04,#navbtn_05,#navbtn_06,#navbtn_07,#navbtn_08,#navbtn_09,#navbtn_10 {display:none !important;} #maincontainer {display:inline-block;width:724px;} #mustcontainer {display:inline-block;width:300px;} #fullcontainer {display:block;width:1024px;margin:auto;} }



/*---------------------------------------*/
.w3-theme {
  color:#33292e !important;
  background-color:#fff !important;
}
/*---------------------------------------*/
.shadowed {
	filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12,OffY=12,Color='#444')";
	filter: url(#drop-shadow);
	-webkit-filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.3));
	filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.3));
}
/*---------------------------------------*/
/*Centrage vertical*/
.imgheader {vertical-align: top;display: inline-block;/*Centrage vertical*/border-top:none;border-bottom:0px solid transparent;padding:0px 10px 0px 10px;}
/*---------------------------------------*/
#hr15 {
height: 1px;/**/
width: auto;
clear: both;
margin-bottom:16px;
padding-top:7px;
border-bottom: 1px solid #ccc;
background-color:transparent;
}

/*---------------------------------------*/
/*Title Subheader*/
.subheadertitle{
font: 2.4em 'Open Sans Condensed', sans-serif;
}
/*---------------------------------------*/
/*Youtube*/
.yt-image,.yt-tooltip{position:relative;margin-right:10px;}
img.yt-image,.yt-image img{max-width:205px;width:100%;height:auto}
.yt-image .yt-title{position:absolute;bottom:2px;right:2px;color:#fff;font-size:11px;line-height:12px;padding-right:4px;padding-left:4px;}
.yt-fluid{max-width:100%;height:auto}
.yttnmust {width:120px;}
.yttnmust-container {margin-left:16px;margin-right:16px;}
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 0px; height: 0; overflow: hidden;}
.video-container iframe,.video-container object,.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
a.linkyt,a.linkyt:link,a.linkyt:visited{text-decoration:none;color:#333333;}
a.linkyt:hover{text-decoration:underline;}

/*--------------------------------------------------*/
/* QUARTERBREAK */
/*--------------------------------------------------*/
@media only screen and (max-width:767px){.myquarterbreak{width:100%;}}
@media only screen and (min-width:768px) and (max-width:800px) {.myquarterbreak{width:50%;}}
@media only screen and (min-width:801px) and (max-width:1044px) {.myquarterbreak{width:33.33333%;}}

/*--------------------------------------------------*/
/* MENU CARDS */
/*--------------------------------------------------*/

.columns1 {   
  padding-top:10px;
  padding-bottom:10px;
}

.columns2 {   
  padding-top:10px;
  padding-bottom:10px;
	-webkit-column-count: 2; 
	-webkit-column-gap: 10px;
	-webkit-column-fill: auto;
	-moz-column-count: 2; 
	-moz-column-gap: 10px;
	-moz-column-fill: balance; /*auto; */
	column-count: 2; 
	column-gap: 15px;
	column-fill: auto;
}

/*--------------------------------------------------*/
/* BLOCKQUOTE fron w3 < 2.0 */
/*--------------------------------------------------*/
.w3-blockquote{margin:0;padding:0.01em 16px;border-left:5px solid #ccc;font-style:italic}

.w3-xmedium{font-size:16px !important;}
