/* --------- -------- -------- -------- -------- -------- --------  POLICE   -------- -------- -------- --------  */






@font-face {
    font-family: 'sansation';
    src: url('http://www.sara-et-guillaume.com//polices/sansation_regular-webfont.eot');
    src: url('http://www.sara-et-guillaume.com//polices/sansation_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.sara-et-guillaume.com//polices/sansation_regular-webfont.woff') format('woff'),
         url('http://www.sara-et-guillaume.com//polices/sansation_regular-webfont.ttf') format('truetype'),
         url('http://www.sara-et-guillaume.com//polices/sansation_regular-webfont.svg#SansationRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SansationB';
    src: url('http://www.sara-et-guillaume.com//polices/sansation_bold-webfont.eot');
    src: url('http://www.sara-et-guillaume.com//polices/sansation_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.sara-et-guillaume.com//polices/sansation_bold-webfont.woff') format('woff'),
         url('http://www.sara-et-guillaume.com//polices/sansation_bold-webfont.ttf') format('truetype'),
         url('http://www.sara-et-guillaume.com//polices/sansation_bold-webfont.svg#SansationBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sansationL';
    src: url('http://www.sara-et-guillaume.com//polices/sansation_light-webfont.eot');
    src: url('http://www.sara-et-guillaume.com//polices/sansation_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.sara-et-guillaume.com//polices/sansation_light-webfont.woff') format('woff'),
         url('http://www.sara-et-guillaume.com//polices/sansation_light-webfont.ttf') format('truetype'),
         url('http://www.sara-et-guillaume.com//polices/sansation_light-webfont.svg#SansationLight') format('svg');
    font-weight: normal;
    font-style: normal;

}





html { 
  
	margin:0;
  padding:0;
  width: 100%;
	height: 100%;
  background: url("images/fd.jpg") no-repeat top left fixed;
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
  overflow-x: hidden;
  
}




body { 

	position: relative;
	margin: auto;
	width: 100%;
	height: 100%;
	background: transparent;
	font-family: sansation, Arial, sans-serif;
	font-size: 14px;
	overflow-x: hidden;

 
}


#header { 


	width: 100%;
	clear: both;


	position:relative;

	z-index: 4;
	height: 85px;
	overflow: hidden;





}


#std { 

	position: absolute;
	right: 5%;
	top:5%;
	width: 150px;
	height: 52px;
	border-radius: 5px;
	background: url("images/STD.jpg");
	


 }


#std a {  position: absolute; width: 100%; height: 100%; top:0px; left: 0px; display: block; z-index: 5000;  } 
#std a:hover {  border: 1px solid white;  } 

#menu {  

position: relative;
float: left;
z-index: 0;
width: 240px;
height: 240px;


 }




#main { 

position: relative;
clear: both;
float: left;
background: transparent;
padding: 0px;
text-align: justify;
color: #404041;
/*border: 1px solid #C9923F;*/
z-index: 2;
/*-moz-box-shadow: 0px 2px 5px -1px #000;
-webkit-box-shadow: 0px 2px 5px -1px #000;
box-shadow: 0px 2px 5px -1px #000;
min-height: 1030px;*/
margin-top: 25px;
width: auto;


 }
 


h3 {   

	margin-left: 0px;
	font-size: 25px;
	margin-top: 0px;
	font-weight: normal;
 } 
 
h3 img {  margin-right: 6px;  } 
 
#main p { 

margin: 20px;
line-height: 25px;


 } 



.ecran { 


	background: url("images/ecran.png") no-repeat;
	width: 870px;
	height: 530px;
	margin: auto;
	margin-top: -35px;
}


.Menu {


width: 760px;
margin-left: 20px;
margin-right: 20px;

margin-bottom: 15px;
text-shadow: 1px 1px 1px white;
float: left;

}



.sous {   

	float: left;
	margin: auto;
	width: 870px;
	margin-top: 35px;

 }

.sous a {  

   	clear: both;
    display: block;
    height: 35px;
    margin: auto;
    width: 300px;
    z-index: 5000; 
    font-size: 12px;
    
      }
    
.sous a:hover {  color: black;  }    


.ecran a {  text-decoration: underline; color: #414141; }
.ecran a:focus {  color: white; }
.ecran a:focus {  color: white; }


#logo { 
	
	margin: auto; 
	z-index: 2000;
	width: 505px;
	}
	


#googlemaps { 

	width:970px;
	height: 500px;
	margin-left: 5px;
	margin: auto;
	margin-top: 20px;
	border: 1px solid #b0b0b0;
	
	  }



#PizzaApero { 

position: absolute;
top: 150px;
left:20px;
z-index: 1;


 }



#paiements {


	background: transparent url("images/paiements.png") no-repeat center ;
	width: 100%;
	height: 70px;
	margin: auto;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
 }


#tel { 


	width: 250px;
	height: 80px;
	background: transparent url("images/fd-tel.png") no-repeat ;
	position: relative;
	float: left;
	border-bottom: solid 2px #D4623E;
	-moz-box-shadow: 0px 0px 2px #888;
	-webkit-box-shadow: 0px 0px 2px #888;
	box-shadow: 0px 0px 2px #888;
	margin: 7px 0px 15px 0px;
	font-size: 9px;
	text-align: right;

  }

#tel .num { 

	font-size: 20px;
	font-weight: bold;
	margin: 21px 5px 0px 0px;
	color: #616264;
	letter-spacing: 0.3px;
	background-color: transparent;
	text-align: right;

 }

#rappel { 

	float: left;
	width: 250px;
	height: 40px;
	-moz-box-shadow: 0px 0px 2px #888;
	-webkit-box-shadow: 0px 0px 2px #888;
	box-shadow: 0px 0px 2px #888;
	margin-bottom: 15px;


 }
 
 
#contact {

	float: left;
	width: 250px;
	height: 40px;
	-moz-box-shadow: 0px 0px 2px #888;
	-webkit-box-shadow: 0px 0px 2px #888;
	box-shadow: 0px 0px 2px #888;
	margin-bottom: 15px;

 } 
 
 
#ami {  

	float: left;
	width: 250px;
	height: 40px;
	-moz-box-shadow: 0px 0px 2px #888;
	-webkit-box-shadow: 0px 0px 2px #888;
	box-shadow: 0px 0px 2px #888;
	margin-bottom: 15px;

  } 


#facebook { 

	float: left;
	width: 250px;
	height: 100px;
	overflow: hidden;



 }





.legende { 

	float: right;
	font-size: 10px; 
	margin-right: 30px;
	clear: both;
	width: 650px;
	display: block;
	text-align: right;
	margin: 14px 30px 10px 0px;
	
	}


.diapos a { 

width: 155px;
height: 95px;
background: url("images/fd-miniature.png"); 
display: block;
float: left;
margin-right: 10px;


 }
 

.diapos img { 

width: 135px;
height: 70px;
margin: auto;
float: left;
margin: 13px 0px 0px 9px;

 } 


#footer {

clear: both;
margin-bottom: 30px;



 }



a.tel {  text-decoration: none; cursor: pointer; z-index: 5000; color: gray;   }
a.tel:hover {  color: black;    }

#footer .bloc { 

float: left;
width: 190px;

 }


#footer a, #footer span {

text-decoration: none;
color: #b93400;
margin-bottom: 5px;
height: 15px;
display: block;
font-size: 12px;

 }


#footer a:hover {

color: #414141;


 }
 
h5 { font-size: 13px; margin-bottom: 10px;  } 


#desserts, #boissons {  

	width:480px; height: 250px; margin-top: 20px; background: #DDBC75 url("images/fd-pizza.jpg"); float: left; 
	-moz-box-shadow: 0px 2px 5px -1px #000;
	-webkit-box-shadow: 0px 2px 5px -1px #000;
	box-shadow: 0px 2px 5px -1px #000;  
	border: solid 1px #DDBC75;
	
	}

#desserts { margin-right: 20px;  }
 
 
/* The Nivo Slider styles */
.slider {
	position:relative;
	//See the "style-pack" below for image
	background:url(images/loading.gif) no-repeat 50% 50%; 
	z-index: 4;
	height: 150px;
	overflow: hidden;
	margin-left: 212px;
}


.slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
}
/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:10px;
	background:#000;
	color:#fff;
	opacity:0.7; /* Overridden by captionOpacity setting */
	width:395px;
	z-index:8;
	padding: 3px;
}

.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */

.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
	background:url("arrows.png") no-repeat scroll 0 0 transparent;
}
.nivo-prevNav {
	
	left: 15px;
}
.nivo-nextNav {
	right:15px;
	background-position:-30px 0;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
	position:relative;
	z-index:9;
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}




/* Coda sliders */

#onglets {

    float: left;
    height: auto;
    margin: 0 auto 0 ;
    overflow:visible;
    position: relative;
    width:100%;
    text-align: justify;
    z-index: 10;
    
  
	}


#navig {

	
	background: transparent;
	width: 100%; height: 39px;


}



/*menu coda */


.coda-nav {
    float: none;
    list-style: none outside none;
    margin: auto;
    padding: 0;
    z-index: 5000;
    margin-bottom: 5px;
}


.coda-nav ul { 

list-style: none;
padding: 0px;
height: 40px;
margin: auto;
min-width: 790px;
position: relative;
overflow: hidden;


 }

.coda-nav li { 

background: url(images/fd-bt.png);
width: 170px;
float: left;
margin-right: 50px;
height: 25px;
position: relative;
margin: 0;
text-align: right;
font-size: 15px;
line-height: 25px;
margin-right: 1.2%;
border: 1px solid white;
border-top: 1px solid #c9c9c9;

-moz-box-shadow: 0px 2px 6px -4px #000000;
-webkit-box-shadow: 0px 2px 6px -4px #000000;
box-shadow: 0px 2px 6px -4px #000000;





 }

.coda-nav li.current { background:;  }
.coda-nav li.current a { color: black; text-shadow: 1px 1px 1px white;  }
.coda-nav li:hover { background: ; cursor: pointer; }
.coda-nav li.current:hover {  cursor:default; }
.coda-nav li.current a:hover { color: gray; }

.coda-nav a.current { color: black;  }

.coda-nav li a { 

position: absolute;
top:0;
right: 0;
width: 100%;
height: 40px;
color: #7A7E7E;
text-align: center;
margin: 0px 0px 0px 0px;
letter-spacing: 0.5px;
text-decoration: none;


 }

.coda-nav li a:hover { color: black; } 


.coda-nav li a:focus { color: black; } 

/* Insignificant stuff, for demo purposes */


	.panel h2.title { margin-bottom: 0px; display: none; }
	noscript div { background: #ccc; border: 1px solid #900; margin: 20px 0;  }

/* Most common stuff you'll need to change */

	.coda-slider-wrapper { overflow-x: hidden }
	.coda-slider { background-color: transparent; }
	
	/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
	.coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px }
	
	/* Change the width of the entire slider (without dynamic arrows) */
	.coda-slider, .coda-slider .panel {  overflow: hidden; } 
	
	/* Change margin and width of the slider (with dynamic arrows) */
	.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width:1000px; margin:auto;  }
	.coda-slider-wrapper.arrows .coda-slider {  }
	
	/* Arrow styling */
	.coda-nav-left a, .coda-nav-right a { display: none; background: #000; color: #fff; padding: 5px; width: 100px }
	
		
	/* Panel padding */ 
	
	#coda-slider {}
	
	
	.coda-slider .panel-wrapper { text-align: center;	color: #414141;}
	
	/* Preloader */
	.coda-slider p.loading { padding: 0px; text-align: center }

/* Don't change anything below here unless you know what you're doing */

	
	
	/* Miscellaneous */
	.coda-slider-wrapper { clear: both; overflow: auto }
	.coda-slider { float: left; overflow: hidden; position: relative }
	.coda-slider .panel { display: block; float: left }
	.coda-slider .panel-container { position: relative }
	.coda-nav-left, .coda-nav-right { float: left; display: none; }
	.coda-nav-left a, .coda-nav-right a { display: none; text-align: center; text-decoration: none }
	
	
/* projekktor */


#player_a, #player_b, #player_c {
    float: left;
    margin-left: 72px;
    margin-top: 64px;
}


/* Tablet Portrait Styles
=================================================*/



@media screen and (max-width: 1920px) {


	
	.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel {  width: 1900px;  }
	.coda-nav ul { min-width: 726px;}
}





@media screen and (max-width: 1680px) {


	
	.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel {  width: 1600px;  }
	.coda-nav ul { min-width: 724px;}
}




@media screen and (max-width: 1440px) {


	
	.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel {  width: 1440px;  }
	.coda-nav ul { min-width: 863px;}
	#logo { width: 633px; }
	#header {  height: 115px; }
}





@media screen and (max-width: 1366px) {


	
	.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel {  width: 1366px;  }
	.coda-nav ul { min-width: 945px;}
}




@media screen and (max-width: 1280px) {


	
	.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel {  width: 1280px;  }
	.coda-nav ul { min-width: 725px;  }
	#logo { width: 520px;  }
	

}





@media screen and (max-width: 1024px) {

	


	body img {  max-height: 440px; }

	#main {  margin-top: 20px;  }
	
	#header {  height: 70px; }
	
	#logo img {  width: 360px; margin: auto; }
	#logo {  width: 370px;  }
	
	
	.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel {  width: 1024px;  }

	.coda-nav ul {  min-width: 747px;  }
	
	.coda-nav li {  width: 175px;   }
	
	

}