/********************************************************
							$BASE
********************************************************/
html, body{
	line-height:1.4;
	height: 100%;
	margin:0;
	padding:0;
	background-color: #ccc;
}
a {text-decoration: none; color: inherit;}
.container {
	max-width: 960px;;
	background-color: #fff;
	border-top: 6px solid #000;
	padding: 5px 10px;
}
.site_content{}
.illu {max-width: 100%; height: auto;}
/********************************************************
							$HEADER
********************************************************/
.header{
	/*position:fixed;*/
	width: 100%;
	/*left: 0;
	right:0;*/
	height:100px;
	/*line-height: 100px;*/
	color:#fff;
	background-color: #ccc;
	margin-top: 5px;
	margin-bottom: 60px;
}
.header_logo{
	padding: 0 10px;
	float:left;
	background-image: url(../../img/FrontBundle/logo.png);
	background-repeat: no-repeat;
	height: 71px;
	width:310px;
}

/********************************************************
							$TITRE
********************************************************/
h2.accueil1::before{ content:url('../../img/FrontBundle/accueil1.png')}
h2.accueil2::before{ content:url('../../img/FrontBundle/accueil2.png')}
h2.accueil3::before{ content:url('../../img/FrontBundle/accueil3.png')}
h2, h3, h4, h5, h6{line-height: 0.4em;}
/********************************************************
							$SLIDE
********************************************************/
#foobar{ max-width: 960px; 
	height: auto;
	/*margin: 0 auto;*/
}

/********************************************************
							$MIN
********************************************************/
.min3{min-height: 150px; min-width:200px; }
.min2 {min-width:280px; }
/********************************************************
							$FLAG
********************************************************/
.flag a {	display:block;
	min-width:32px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	color: #fff;
	text-decoration: none;
	padding: 2px 6px;
	cursor: pointer}
.fl_de::after{ content:url('../../img/FrontBundle/flag_de.png'); width: 32px; height: 32px;}
.fl_en::after{ content:url('../../img/FrontBundle/flag_uk.png'); width: 32px; height: 32px;}
.fl_fr::after{ content:url('../../img/FrontBundle/flag_fr.png'); width: 32px; height: 32px;}

/********************************************************
							$separator
********************************************************/
.separator{border-bottom: 1px solid #ccc;
			width:100%}
/********************************************************
							$COLOR
********************************************************/
.color1{color:#e08d08;}
.bgcolor2{background-color:#f1efef;}
/********************************************************
							$FORM
********************************************************/
form {
  margin: 2% auto;
  width: 100%;
  color: #aaa;

}
.name  {width: 100%;}
select,
textarea {
  width: 47%;
  height: 3em;
  text-indent: .5em;
  border: .1em solid #ddd;
  outline-color: #e08d08;
}
.name input[type="text"],.name input[type="mail"], .message input[type="text"]  {
  margin-top: 1em;
  width: 100%;
  height: 3em;
  text-indent: .5em;
  border: .1em solid #ddd;
  outline-color: #e08d08;
}
.radio,
.dropdown,
.message,
.check,
.submit {margin-top: 1em;}
.dropdown select,
.message textarea,
.submit input {width: 100%;}
.dropdown select {color: #aaa;}
.message textarea {height: 8em;}
.radio input,
.check input {position: relative;top: 1px;}
.radio input:before,
.check input:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  background: #e9e9e9;
}
.radio input:checked:before,
.check input:checked:before {
  content: "\f00c";
  color: #e08d08;
}
.check input:before {left:-.1px;}
.submit input {
	float:left;
	cursor:pointer;
	font-size:1em;
	padding-top:1em;
	padding-bottom:1em;
  /*display: block;
  //margin: auto;*/
  background: #e08d08;
  color: #fff;
  border: 0;
 /*// border-bottom: $radius solid darken(#e08d08, 7%);*/
 
}
.submit input:focus, 
.submit input:hover {
    background: #e08d88;
   /*border-bottom-color: darken(#e08d88, 7%);*/
}

.submit input:active {
    background: #e08d08;
    /*border-bottom-color: darken(#e08d08, 7%);*/
  }


/********************************************************
							$SOCIALICON
********************************************************/

.icons a {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 10px;
	vertical-align: middle;
	-o-transition: all .3s;
	-moz-transition: all .3s;
	-webkit-transition: all .3s;
	-ms-transition: all .3s;
}

.icons a.twitter { background: url(../../img/FrontBundle/social-icons/twitter.png) left top no-repeat; }
.icons a.dribbble { background: url(../../img/FrontBundle/social-icons/dribbble.png) left top no-repeat; }
.icons a.rss { background: url(../../img/FrontBundle/social-icons/rss.png) left top no-repeat; }
.icons a.pinterest { background: url(../../img/FrontBundle/social-icons/pinterest.png) left top no-repeat; }
.icons a.digg { background: url(../../img/FrontBundle/social-icons/digg.png) left top no-repeat; }
.icons a.flickr { background: url(../../img/FrontBundle/social-icons/flickr.png) left top no-repeat; }
.icons a.forrst { background: url(../../img/FrontBundle/social-icons/forrst.png) left top no-repeat; }
.icons a.vimeo { background: url(../../img/FrontBundle/social-icons/vimeo.png) left top no-repeat; }
.icons a.reddit { background: url(../../img/FrontBundle/social-icons/reddit.png) left top no-repeat; }
.icons a.linkedin { background: url(../../img/FrontBundle/social-icons/linkedin.png) left top no-repeat; }
.icons a.facebook { background: url(../../img/FrontBundle/social-icons/facebook.png) left top no-repeat; }
.icons a.paypal { background: url(../../img/FrontBundle/social-icons/paypal.png) left top no-repeat; }
.icons a.stumbleupon { background: url(../../img/FrontBundle/social-icons/stumbleupon.png) left top no-repeat; }
.icons a.email { background: url(../../img/FrontBundle/social-icons/email.png) left top no-repeat; }
.icons a.deviantart { background: url(../../img/FrontBundle/social-icons/deviantart.png) left top no-repeat; }
.icons a.netvibes { background: url(../../img/FrontBundle/social-icons/netvibes.png) left top no-repeat; }
.icons a.yahoo { background: url(../../img/FrontBundle/social-icons/yahoo.png) left top no-repeat; }
.icons a.github { background: url(../../img/FrontBundle/social-icons/github.png) left top no-repeat; }
.icons a.addthis { background: url(../../img/FrontBundle/social-icons/addthis.png) left top no-repeat; }
.icons a.behance { background: url(../../img/FrontBundle/social-icons/behance.png) left top no-repeat; }
.icons a.blogger { background: url(../../img/FrontBundle/social-icons/blogger.png) left top no-repeat; }
.icons a.slashdot { background: url(../../img/FrontBundle/social-icons/slashdot.png) left top no-repeat; }
.icons a.technorati { background: url(../../img/FrontBundle/social-icons/technorati.png) left top no-repeat; }
.icons a.googleplus { background: url(../../img/FrontBundle/social-icons/googleplus.png) left top no-repeat; }
.icons a.apple { background: url(../../img/FrontBundle/social-icons/apple.png) left top no-repeat; }
.icons a.myspace { background: url(../../img/FrontBundle/social-icons/myspace.png) left top no-repeat; }
.icons a.sharethis { background: url(../../img/FrontBundle/social-icons/sharethis.png) left top no-repeat; }
.icons a.yelp { background: url(../../img/FrontBundle/social-icons/yelp.png) left top no-repeat; }
.icons a.delicious { background: url(../../img/FrontBundle/social-icons/delicious.png) left top no-repeat; }
.icons a.lastfm { background: url(../../img/FrontBundle/social-icons/lastfm.png) left top no-repeat; }
.icons a.youtube { background: url(../../img/FrontBundle/social-icons/youtube.png) left top no-repeat; }
.icons a.skype { background: url(../../img/FrontBundle/social-icons/skype.png) left top no-repeat; }
.icons a.tumblr { background: url(../../img/FrontBundle/social-icons/tumblr.png) left top no-repeat; }
.icons a.aim { background: url(../../img/FrontBundle/social-icons/aim.png) left top no-repeat; }
.icons a.google { background: url(../../img/FrontBundle/social-icons/google.png) left top no-repeat; }

.icons a:hover { background-position: left -34px; }

/********************************************************
							$MENU
********************************************************/
nav {position:relative;
    z-index:1;   }

.menu {
	float:left;
	background-color: #333;
	height: 48px;
	width: 100%;
	border-bottom: 5px solid #df8d06;
	font-size:14px; 
	line-height:48px;		
}

 nav ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
}

/*Create a horizontal list with spacing*/
 nav li {
	display:inline-block;
	float: left;
	margin-right: 1px;
}

/*Style for menu links*/
 nav li a {
	display:block;
	min-width:100px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	color: #fff;
	text-decoration: none;
	padding: 0 5px;
}

/*Hover state for top level links*/
 nav li:hover a {
	background: #df8d06;
	color:#fff;
 }

/*Style for dropdown links*/
 nav li:hover ul a {
	background: #f3f3f3;
	color: #2f3036;
	height: 40px;
	line-height: 40px;
}

/*Hover state for dropdown links*/
 nav li:hover ul a:hover {
	background: #df8d06;
	color: #fff;
}

/*Hide dropdown links until they are needed*/
 nav li ul {
	display: none;
}

/*Make dropdown links vertical*/
 nav li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
 nav li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

/*Display the dropdown on hover*/
 nav li a:hover + .hidden, .hidden:hover {
	display: block;
}
/********************************************************
							$thumb
********************************************************/
.thumb ul {
  list-style-type: none;
}
 
.thumb li img {
  float: left;
  margin: 5px;
  border: 2px solid #fff;
 
  -webkit-transition: box-shadow 0.5s ease;
  -moz-transition: box-shadow 0.5s ease;
  -o-transition: box-shadow 0.5s ease;
  -ms-transition: box-shadow 0.5s ease;
  transition: box-shadow 0.5s ease;
}
 
.thumb li img:hover {
  -webkit-box-shadow: 0px 0px 7px rgba(224,141,8,0.9);
  box-shadow: 0px 0px 7px rgba(2224,121,8,0.9);
}
/********************************************************
							$FOOTER
********************************************************/
footer{background-color: #f1efef;}


/********************************************************
							$RESPONSIVE
********************************************************/
@media only screen and (max-width:800px){
	.resp-hidden{display:none !important}.small-visible{display:block !important}
	.site-container{overflow: hidden; height: 100%;}
	.site_pusher{
		height: 100%;
		-webkit-transition-duration: 0.3s;
    	transition-duration: 0.3s;
		-webkit-transform: translate(0);
		-moz-transform: translate(0);
		-o-transform: translate(0);
		transform: translate(0);
	}
	.site_content{
		position: absolute;
		top: 10px;
		bottom: 0;
		left: 0;
		right:0;
		padding-top: 0;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.header{position:static; height: auto;}
	.header_icon{
		position:relative;
		display: block;
		float: left;
		width: 10px;
		height: 66px;
		cursor: pointer;
		}
	.header_icon:after{
		content: '';
		position: absolute;
		display: block;
		width: 2rem;
		height: 0;
		top: 16px;
		left:5px;
		-webkit-box-shadow: 0px 10px 0px 2px rgba(255, 255, 255, 1),0 18px 0px 2px rgba(50, 50, 50, 1), 0 26px 0px 2px rgba(50, 50, 50, 1);
		-moz-box-shadow:    0px 10px 0px 2px rgba(50, 50, 50, 1),0 18px 0px 2px rgba(50, 50, 50, 1), 0 26px 0px 2px rgba(50, 50, 50, 1);
		box-shadow:         0px 10px 0px 2px rgba(50, 50, 50, 1),0 18px 0px 2px rgba(50, 50, 50, 1), 0 26px 0px 2px rgba(50, 50, 50, 1);
		
	}

	nav {position:inherit;}

	.menu{
		position: fixed;
		left: 0;
		top: 0;
		bottom:0;
		width: 300px;
		height: auto;
		background-color: #cccccc;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		-webkit-transform: translate(-100px);
		-moz-transform: translate(-300px);
		-o-transform: translate(-300px);
		transform: translate(-300px);
		-webkit-transition-duration: 0.3s;
		transition-duration: 0.3s;		
	}
		.menu a{
		display: block;
		height: 40px;
		text-align: center;
		line-height: 40px;
		border-bottom: 1px solid #ccc;
		background-color: #000;
		}
	.menu ul {
		position: static;
		display: none;
	}
	/*Create vertical spacing*/
	.menu li {
		margin-bottom: 1px;
	}
	/*Make all menu links full width*/
	.menu ul li, .menu li a {
		width: 100%;
	}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
	}
	
	.menu li a {
	min-width:300px;
	}
	.with_sidebar .site_pusher{
		-webkit-transform: translate(250px);
		-moz-transform: translate(250px);
		-o-transform: translate(250px);
		transform: translate(250px);
			
	}
	.with_sidebar .site-cache{
		position: absolute;
		top:0;
		left: 0;
		bottom: 0;
		right:0;
		background-color: #000;
		opacity: 0.5;
	}
	

	

}