/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
	width:100%;
	height:100%;
	overflow: hidden;
}


::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}


a{
text-decoration: none;
color:white;
letter-spacing: 1px;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

p{
text-align:left;
padding-right:16px;
font-family:georgia;

}

.bold{
font-weight:bold;

}
.italic{
font-style: italic;

}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

#dvLoading
{
  background:#000 url(img/loading.gif) no-repeat center center;
   height: 100px;
   width: 100px;
   position: fixed;
   z-index: 1000;
   left: 50%;
   top: 50%;
   margin: -25px 0 0 -25px;
}
	
	
	
	/*home*/
	
	.header{
	background:black;
	height:180px;
	}
	
 .footer{
 height:60px;
 width:100%;
 position:absolute;
 	background:black;
 bottom:0;
 
 }
.home h1 {
font-variant: small-caps;
text-shadow: 2px 2px 3px #000;
font-family: georgia;

color: #FFF;
}

.home h1:first-child{
position:relative;
float:left;
left:25%;
background: url(../img/trait.png) no-repeat center fixed transparent;

}

.home h1:nth-child(2){
position:relative;
float:right;
right: 25%;

}
 
.bulleR{
position:relative;
float:right;
right:25%;
top:5px;
}

.bulleL{
position:relative;
float:left;
left: 25%;top:5px;
}
 
.bg{
position:absolute;

top:0;
width:430px;
height:700px;
z-index:1;

} 
 
 .bd{
position:absolute;

top:0;
width:430px;
height:700px; 
z-index:1;

} 
 
 
.bg2{
position:absolute;

top:0;
width:430px;
height:100%;
z-index:1;

} 
 
 .bd2{
position:absolute;

top:0;
width:430px;
height:700px;
z-index:1;

} 
 
 
 
.link{
position:absolute;
right:0;
width:150px;
top:20px;
color:yellow;

}


.title{
text-align:center;

}



/* footer */

.footer-container{
height:30px;
position:absolute;
background: url(../img/gradient.png) no-repeat center center rgba(240, 211, 59, 0.3);
color:black;
z-index:55;
font-size:14px;
letter-spacing: 2px;

}

.footer-container2{
height:30px;

position:absolute;

background: url(../img/gradient.png) no-repeat center center rgba(240, 211, 59, 0.25);

color:black;

font-size:14px;
letter-spacing: 2px;
}


.footer-container3{
height:30px;
bottom:0;
position:absolute;

background: url(../img/gradient.png) no-repeat center center rgba(240, 211, 59, 0.25);

color:black;

font-size:14px;
letter-spacing: 2px;
}


.footer-containerML{
height:30px;
bottom:0;
position:absolute;

background: url(../img/gradient.png) no-repeat center center rgba(240, 211, 59, 0.25);

color:black;
width:100%;
font-size:14px;
letter-spacing: 2px;
}


.citation{
background: url(../img/motif2.png) repeat repeat transparent;
position:relative;
width:400px;
height:45px;
margin:0 auto;
bottom:35px;
}



.citation h1 {
font-variant:small-caps;
text-shadow: 2px 2px 3px black;
font-family:georgia;

color:white;
}

.citation span{
width:24px;
height:22px;
}

.citation span:first-child{
position:absolute;
top:-12px;
left:-12px;

}
.citation span:nth-child(2){
position:absolute;
bottom:-12px;
right:-12px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);

}

.moder{
position:absolute;
left:10px;
top:-5px;
color:white;
}




.ml{
position:absolute;
right:24px;
top:-5px;
}




.trouver{
position:absolute;
right:155px;
top:-5px;

}


/* menu */


.menu{
background: url(../img/motif2.png) repeat repeat transparent;
width:483px;
height:130px;
z-index:55;
position:absolute;
}

.menu ul{
margin:10px 35px 10px 10px;
position:relative;
float:right;
list-style-type: none;
padding:0;
z-index:55;
}



.menu ul li{

display:list-item;
padding-bottom:4px;
z-index:55;
}


.menu2{
background: url(../img/motif2.png) repeat repeat transparent;
width:483px;
height:150px;
z-index:55;
position:absolute;
}

.menu2 ul{
margin:10px 35px 10px 10px;
position:relative;
float:right;
list-style-type: none;
padding:0;
z-index:55;
}

.menu2 ul li{

display:list-item;
padding-bottom:4px;
z-index:55;
}



.minlogo{
z-index:55;
width:320px;
}

.imgmin{
position:relative;
float:left;
margin: 20px 0 0 10px;
width:60%;
height:60%;
z-index:55;
}


/*description*/

.desc{
width:550px;
height:450px;
float:right;
position:relative;
margin-top:133px;
background: url(../img/motif4.png) repeat repeat  transparent;
margin-right:133px;

border-radius: 50px 0px 50px 0px;
}

.desc2{
width:550px;
height:450px;
float:right;
position:relative;
margin-top:133px;
background: url(../img/motif4.png) repeat repeat  transparent;
margin-right:133px;

border-radius: 50px 0px 50px 0px;
}





.desc3{
width:400px;
height:400px;

position:relative;

background: url(../img/motif4.png) repeat repeat  transparent;
margin:0 auto;
margin-top:20px;
border-radius: 40px 0px 40px 0px;
}

.desc4{
width:905px;
height:450px;

position:relative;

background: url(../img/motif4.png) repeat repeat  transparent;
margin:0 auto;
margin-top:150px;
border-radius: 40px 0px 40px 0px;
}


.desc3 p{
font-style:italic;
padding:0;
line-height:22px;
}

.contentT{

width:450px;
height:400px;
position:relative;
margin:25px auto;
overflow-y: auto;
overflow-x: hidden;
}

.contentT2{

width:320px;
height:360px;
position:relative;
margin:20px auto;
padding-top:20px;
overflow-y: auto;

overflow-x: hidden;
}


.contentT3{

width:820px;
height:440px;
position:relative;
margin:20px auto;
padding-top:20px;
overflow-y: auto;

overflow-x: hidden;
}

.contentT h2 {
margin-top:0;

font-variant: small-caps;
text-align: center;
font-family: georgia;
font-size: 1.5em;
}

.contentT h3{
margin-top:0;
font-variant: small-caps;
font-family: georgia;
}


.download {
display: block;
width: 28px;
height: 28px;
background-color: #F0D33B;
border-radius: 14px;
position: absolute;
top:22px;
right:10px;
color:black;

}

a.info span:nth-child(2) {
display:none;
}

a.info:hover  span:nth-child(2){
display: inline; /* On affiche l'infobulle. */
position: absolute;
 background:grey;
 right:32px;
 top:0px;
 font-family: georgia;
 font-size:10px;
 padding:4px;
 
}


.citation2{
background: url(../img/motif3.png) repeat repeat transparent;
position:relative;
width:650px;
min-height:65px;
bottom:55px;
left:-80px;
}

.citation2 h2 {
padding:7px 10px 0 10px;
text-shadow: 1px 1px 2px black;
font-family:georgia;

color:white;
}

.citation2 span{
width:24px;
height:22px;
}

.citation2 span:first-child{
position:absolute;
top:-12px;
left:-12px;

}
.citation2 span:nth-child(2){
position:absolute;
bottom:-12px;
right:-12px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);

}

.rubber1{
width:133px;
height:33px;
background: url(../img/rubber1.png);
margin-left:-15px;
margin-top:-45px;
position:relative;

}

.rubber2{
width:133px;
height:33px;
background: url(../img/rubber1.png);
margin-left:-15px;

position:relative;

}

.rubber3{
width:187px;
height:33px;
background: url(../img/rubber2.png);
margin-left:-15px;

position:relative;

}

.desc h2{

font-variant:small-caps;
text-align:center;
font-family:georgia;
font-size:16px;
color:white;

}


.desc h3{
margin:8px 6px 0 20px;
font-style:italic;
font-family:georgia;
font-size:14px;
}


.desc p{
font-family:georgia;
font-size:14px;
margin:0 0 0 14px;

}
.assemblage{
position:absolute;
left: 150px;
top:35px;
width:350px;
}

.degustation{
margin-bottom:0.83em;
}

/*contact*/

.contact{

z-index:990;
width:170px;
height:68px;
position:fixed;
right:20px;
top:20px;
}

.contact p{
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: 700; 
color:#f0d33b;
font-size:14px;
letter-spacing: 2px;
}

.contact span {
display:block;
width:28px;
height:28px;
background-color:#f0d33b;
border-radius:14px;
position:absolute;

}

.contact .fb{
top:9px;
right:6px

}

.contact .mail{
top:43px;
right:6px

}


.contact  span i {
color:black;
}

.contact2{

z-index:990;
width:130px;
height:68px;
position:fixed;
right:20px;
top:20px;
}

.contact2 p{
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: 700; 
color:#f0d33b;
font-size:14px;
letter-spacing: 2px;
}

.contact2 span {
display:block;
width:28px;
height:28px;
background-color:#f0d33b;
border-radius:14px;
position:absolute;

}

.contact2 .fb{
top:9px;
right:6px

}

.contact2 .mail{
top:43px;
right:6px

}


.contact2  span i {
color:black;
}



/*map*/

.map-container{
width: 1000px;
height: 300px;
margin:0 auto;
margin-top:150px;
margin-bottom:50px;

}
.map {
width:480px;
height: 300px;
margin:10px;
z-index:100;
position:relative;

float:left;
}



.precisions{
width:890px;
margin:0 auto;
}
.precisions p{
color:white;
font-style:italic;
font-family:georgia;
font-size:16px;
text-align:center;
padding-right:0;
}

.pos{
position:absolute;
z-index:800;
top:75%;
}

/*collection*/


.containercoll{
background: url(../img/bkg2.jpg) no-repeat center 20px black;

width:890px;
height:650px;
position:relative;
margin:0 auto;
top:50px;
}

.containercoll h1 {
font-variant: small-caps;
text-shadow: 2px 2px 3px #000;
font-family: georgia;

color: #FFF;

}

.containercoll h2 {
font-variant: small-caps;
font-family: georgia;

color: #FFF;
letter-spacing: 1px;
font-weight:500;
}

.ghm{
position:relative;

width:445px;
float:left;
height:91%;
margin-top:9%;

}

.containercoll .gamme{
width:100%;


margin:0 auto;

}

.gamme #brut{

position:absolute;
width:90px;
height:330px;
margin-left:184px;
}


.gamme #millesime{
position:absolute;

width:36px;
height:330px;
margin-left:97px;
}

.gamme #demi{
position:absolute;

width:25px;
height:330px;
margin-left:72px;
}

.gamme #premier{
position:absolute;

width:51px;
height:330px;
margin-left:133px;
}

.gamme #bdb{
position:absolute;

width:51px;
height:330px;
margin-left:274px;
}

.gamme #bdn{
position:absolute;

width:36px;
height:330px;
margin-left:325px;
}

.gamme #rose{
position:absolute;

width:25px;
height:330px;
margin-left:360px;
}


.victoire{
position:relative;
width:445px;
float:right;
height:91%;
margin-top:9%;
}

.gamme #fdc{

position:absolute;
width:96px;
height:330px;
margin-left:175px;
}

.gamme #v1c{

position:absolute;
width:64px;
height:330px;
margin-left:111px;
}


.gamme #vbrut{

position:absolute;
width:64px;
height:330px;
margin-left:271px;
}

.gamme #vmillesime{

position:absolute;
width:52px;
height:330px;
margin-left:59px;
}

.gamme #vrose{

position:absolute;
width:52px;
height:330px;
margin-left:335px;
}

.span1{
width: 70px;
    height: 70px;
    display: block;
      -moz-border-radius: 35px;
    -webkit-border-radius: 35px;
    border-radius:35px;
    cursor: pointer;
	 opacity: 0.8;
    position: absolute;
    top:-50px;
  right: 380px;
  z-index:200;
 }
 
 .span2{
width: 70px;
    height: 70px;
    display: block;
      -moz-border-radius: 35px;
    -webkit-border-radius: 35px;
    border-radius:35px;
    cursor: pointer;
	 opacity: 0.8;
    position: absolute;
    top:-50px;
  left: 380px;
    z-index:200;
 }

.next{
 background: #666 url(../img/bt-next.png) no-repeat center center; 
}

.prev{
 background: #666 url(../img/bt-prev.png) no-repeat center center;
}

.award{
width:150px;
height:80px;
position:absolute;
right:40px;
top:20%;
color:black;
text-align:center;
font-variant: small-caps;

font-family: georgia;
}


a.award span{
display:none;
width:366px;
position: absolute;
background: url(../img/motif3.png) repeat repeat rgba(0, 0, 0, 0.5);
 right:-108px;
 top:110px;
 font-family: georgia;
 font-size:10px;
 padding:4px;
 border-radius: 25px 0px 25px 0px;
}

a.award:hover span{
display: inline; /* On affiche l'infobulle. */

 
}

.award ul{
list-style-type: none;
padding: 0 0 0 0px;
}

.award ul li{

color:white;
font-family: georgia;
font-size: 14px;
font-variant: normal;
}

.award ul p{
font-style: italic;
font-family: georgia;
font-size: 12px;
text-align:center;
color:white;
font-variant: normal;
}
/*home*/

.main-container{


  position:relative;
  width:960px;
 
  margin:0 auto;
}



.header-container {
   height:150px;
    position:relative;
}

.centerlogo{
width:400px;
margin:0 auto;
padding:30px 0 0 0;
}

.main-content{
position:relative;
width:100%;
height:100%;
}

.main{
position: relative;
padding-top:0;

}


nav{
position:absolute;
z-index:100;
width:100%;
}


nav ul{
float:left;

}

ul{
font-variant:small-caps;
font-family:georgia;
font-size:14px;
}

nav ul li{
font-variant:small-caps;
font-family:georgia;
padding:12px 0;
}

nav ul:first-child{
margin-left:170px;

}


nav ul:first-child li:first-child{
margin-left:127px;

}
nav ul:first-child li:nth-child(2){
margin-left:25px;

}

nav ul:nth-child(2) li:first-child{
margin-left:20px;

}

nav ul:nth-child(2) li:nth-child(2){
margin-left:110px;

}

nav ul:nth-child(2) li:nth-child(3){
margin-left:168px;

}


nav a {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-decoration: none;
    color: white;
   
}

 #carousel {
        width:960px;
        height:480px;
		margin:auto auto;
        position:relative;
        clear:both;
        overflow:hidden;
	
      }
		
	 #carousel2 {
        width:960px;
        height:480px;
		margin:auto auto;
        position:relative;
        clear:both;
        overflow:hidden;
	
      }	
		
      #carousel img {
        visibility:hidden; /* hide images until carousel can handle them */
        cursor:pointer; /* otherwise it's not as obvious items can be clicked */
		height:470px;
		
      }

	 #carousel2 img {
        visibility:hidden; /* hide images until carousel can handle them */
        cursor:pointer; /* otherwise it's not as obvious items can be clicked */
		height:470px;
		
      }	
		
/*mosaic*/

#mosaic{

position:relative;
margin-top:134px;
overflow-y: auto;
overflow-x: hidden;
}

#mosaic2{

position:relative;
margin-top:134px;
overflow-y: auto;
overflow-x: hidden;
}

.item{
width:19.6%;
 float: left;
 margin:2px;


}

.item.w2 { width:  39.2%; }




/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
 
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}



input[type=text] { 
	border:0; width:100%; height:17px;
	border-radius:5px 0px 5px 0px;
	padding:0px 5px;
	font-size:14px;
}

textarea {
	width:90%; 
	height:100px;
	border-radius:10px 0px 10px 0px;
	padding:10px;
	
}

textarea:hover, input[type=text]:hover { background-color:#F0D33B } 
textarea:focus, input[type=text]:focus { background-color:#F0D33B; color:#484242; font-style:italic } 


.send {
display: block;
width: 48px;
height: 28px;
background-color: #F0D33B;
position: absolute;
margin-top:10px;
right:44px;
border-radius:8px 0px 8px 0px;
}

form a{
color:black;
}

.icon-ok{
position:relative;
margin-left:10px;
}


.return{

position:absolute;
top:50px;
left:25%;
width: 80px;
height: 28px;
padding: 0;
text-align:center;
background-color: #F0D33B;
border-radius:8px 0px 8px 0px;
}

.return a {
font-family: "Trebuchet MS", Helvetica, sans-serif;
color:black;
}


/*

.control{

margin-top:300px;
}

.control a{
height: 50px;
width: 50px;

}

.control #prev .prev{
 background: #666 url(../img/bt-prev.png) no-repeat center center;
width: 50px;
    height: 50px;
    display: block;
    text-indent: -9000px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    cursor: pointer;
	
	 opacity: 0.4;
    position: absolute;
    top: 75%;
    left: 100px;
	  background-size: 17px 25px;
    margin: -23px 0 0 -23px;
    -webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.control #next .next{
 background: #666 url(../img/bt-next.png) no-repeat center center;
width: 50px;
    height: 50px;
    display: block;
    text-indent: -9000px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    cursor: pointer;
	
	 opacity: 0.4;
    position: absolute;
    top: 75%;
    right: 100px;
	  background-size: 17px 25px;
    margin: -23px 0 0 -23px;
    -webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
*/