/* Foundation v2.1.5 http://foundation.zurb.com */
/* Artfully masterminded by ZURB  */

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: Shared Styles
:: Page Name 1
:: Page Name 2
*/

/* -----------------------------------------
   Font Faces
----------------------------------------- */

@import "http://fonts.googleapis.com/css?family=Arimo:400,700,400italic,700italic";
@import "http://fonts.googleapis.com/css?family=Questrial";


/* -----------------------------------------
   Shared Styles
----------------------------------------- */

.row  { max-width: 1200px; }
/* .reveal-modal { width: 768px; } */

/* head + generic stuff */

.container { 
	padding: 0;
}

p {
	font-size: 1.5rem;
}

body {
    font-family: 'Arimo',"Helvetica Neue", "HelveticaNeue", Helvetica, Arial;
}

body.noframe {
	background: url(/assets/images/backtexture.png) repeat white;
}

body.frame {
	background-color: transparent;
}

.logo {
	margin-top: 15px;
	display: block;
}

.clouds {
	color: #0084af;
	position: relative;
}

.content {
	padding-top: 55px;
	background: linear-gradient(top, rgba(255, 255, 255, 1) 0px, rgba(255, 255, 255, 0) 80px);
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0px, rgba(255, 255, 255, 0) 80px);
	background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0px, rgba(255, 255, 255, 0) 80px);
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0px, rgba(255, 255, 255, 0) 80px);
	
}


@media only screen and (min-width: 768px) and (max-width: 960px) {
	.clouds .nav-bar li a.main {
		padding: 8px 13px 0 !important;
		font-size: 1.3rem;
	}
	
	
}
 
@media only screen and (max-width: 1200px) { 
	.container section {
		padding-right: 5px; 
		padding-left: 5px;
		}
}
 
 
 
/* -----------------------------------------
   For screens bigger than 768px (tablet portrait and after)
----------------------------------------- */

@media only screen and (min-width: 768px) {
	.clouds {
		background-color: #22abd8;
		background-image: url('/assets/images/navbarbg.png'), url('/assets/images/mastheadbg.png'), url('/assets/images/herbe.jpg');
		background-repeat: repeat-x;
		background-position: center top, center top, center bottom;
		border-top: 6px solid black;
	}
	
	.clouds .nav-bar li {
		line-height:;
	}
	
	.clouds .nav-bar li a.main {
		color: #0084af;
		line-height: 105px;
		padding: 8px 18px 0px 18px;
	}
	
	/*
	ul.nav-bar a.main img {
		display:block;
		margin: 0 auto;
	}
	*/
	
	.icon {
		background-position: center 18px;
		background-image: url('/assets/images/icons-off.png');
		background-repeat : no-repeat;
		background-color: transparent;
	}
	
	.clouds .nav-bar li:hover .icon {
		background-image: url('/assets/images/icons-on.png');
	}

	.icon.activite { background-position:; }
	.icon.contact      { background-position: center  -75px; }
	.icon.apropos  { background-position: center -378px; }
	.icon.dev  { background-position: center -280px; }
	
	.clouds .nav-bar > li.has-flyout > a.flyout-toggle {
		top: 38px;
		right: -15px;
	}

	.clouds .flyout {
		/* CSS pour la partie déroulante du menu */	
		top: 80px;
	}
	
	.clouds .nav-bar li.selectedtab a.main { background-color: #22abd8; color: white !important;	background-image: url('/assets/images/icons-on.png');  }
	
	.clouds .nav-bar li.selectedtab a.flyout-toggle span {
		border-top-color: white;
	}

}




/* -----------------------------------------
   For screens smaller than 768px (tablet portrait and below)
----------------------------------------- */

@media only screen and (max-width: 768px) {
	.logo {

	}

	.logo img {
		margin: 0 auto;
		display: block;
		margin-bottom: 10px;
	}
	
	h1 {
	color: black !important;
	}
	
	/*
	ul.nav-bar a.main img {
		display:none;
	}
	*/
	section.triptik {
		text-align: center;
	}

}

h1, h2, h3, h4, h5 {
	font-family: 'Questrial';
	font-weight: normal;
    letter-spacing: -0.03em;
}

h2, h3, h4, h5 {
	text-shadow: 1px 1px white;
}

.title {
	margin-top: 15px;
	
}

h1 { color: white; }

/* TOPNAV */

.clouds .nav-bar {
    border: none;
    background-color: transparent;
	margin-top: 0;
}

.clouds .nav-bar li:hover {
	background-color: #22abd8;
}

.clouds .nav-bar li:hover>a:first-child {
	color: white !important;
}

.clouds .nav-bar li.has-flyout:hover a.flyout-toggle span {
	border-top-color: white;
} 

.clouds .nav-bar .flyout a.navitem { padding-left: 6px; }
.clouds .nav-bar .flyout a.navitem:before {
	content: "→ ";
}

.clouds .nav-bar li {
    border: none;
}

.clouds .nav-bar li a.main {
    font-weight: bold;
	color: #0084af;

}

.clouds .nav-bar > li.has-flyout > a.flyout-toggle {}
.clouds .flyout { 
	border-color: #22abd8;
}



/* RETOUR PSEUDO NAV */
.retours .nav-bar {
	background:  none;
	border: none;
}

.retours .nav-bar li {
	border: none;
}

.retours .flyout {
	top: 65px !important;
	border: none !important;
}

.retours .flyout.panel {
	border: none;
}

.retours .flyout-toggle {
	display: none !important;
}

.retours .nav-bar li.has-flyout a.main {
	padding-right: 20px;
    color: #181818;
    font-size: 19px;
    font-weight: bold;
    letter-spacing: -0.05em;
    text-align: center;
    text-transform: uppercase;
}

.retours .nav-bar li.has-flyout a.main img, .retours .nav-bar li.has-flyout a.main span {
	width: 100px;
	height: 60px;
	line-height: 60px;
	display: block;
	margin-bottom: 15px;
}

.retours .nav-bar li.has-flyout a.main span {
	display: block;
}

.retours .nav-bar li:hover {
	background-color: #fff;
}

.retours .nav-bar .flyout {
	line-height: 18px;
}




#mantle {
	margin-top:40px; 
	margin-bottom: 30px;
}

.smallgrass {
	background: url(/assets/images/smallgrass.png) repeat-x;
	width: 100%;
	height: 30px;
	position: absolute;
	z-index: 100;
	bottom: -1px;
}

.orbit-bullets { 
	bottom: -75px !important;
} 


#mantle .mantleitem.loadinghide {
	display: none;
}

#mantle .mantleitem.orbit {
	display: block !important;
}

#mantle .mantleitem img {
	
}

#mantle .mantleitem h2 {
	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);
    position: absolute;
	top: 20px;
	padding: 14px;
	max-width: 570px;
}
#mantle .mantleitem h2 b {
	color: #5ea20d;
}

#mantle .mantleitem .button {
	position: absolute;
	bottom: 20px;
	right: 20px;
	box-shadow: 0 0 5px 0px black;
}


.triptik {
/*   text-align: justify; */
}

.triptik.content p a {
	display:inline-block;
}

.footer {
	margin-top:50px;
	padding-top: 25px;
	box-shadow: inset 0 2px 3px #aaa;
	border-top: 1px #bbb solid;
	background: linear-gradient(top , rgba(0, 0, 0, .1) 0px, rgba(255, 255, 255, 0) 100%);
	background: -moz-linear-gradient(top , rgba(0, 0, 0, .1) 0px, rgba(255, 255, 255, 0) 100%);
	background: -webkit-linear-gradient(top , rgba(0, 0, 0, .1) 0px, rgba(255, 255, 255, 0) 100%);
	background: -ms-linear-gradient(top , rgba(0, 0, 0, .1) 0px, rgba(255, 255, 255, 0) 100%);
}

ul.partnerlist {
	text-align:center;
}

ul.partnerlist li {
	display: inline;
}

ul.partnerlist li img {
	margin: 10px;
} 

.subfoot {
	/*border-top: 1px solid #bbb;
	margin-top: 25px;*/
	padding-top: 35px;
}

.subfoot p {
	font-size: 1.5rem;
}

.subfoot h5 {
	margin-bottom: 15px;
}

.transition {
	-moz-transition: all 0.1s ease-out;  /* FF4+ */
	-o-transition: all 0.1s ease-out;  /* Opera 10.5+ */
	-webkit-transition: all 0.1s ease-out;  /* Saf3.2+, Chrome */
	-ms-transition: all 0.1s ease-out;  /* IE10? */
	transition: all 0.1s ease-out;  
}

.lightpanel {
	border: 1px solid #ccc;
	padding: 20px;
}


/* -----------------------------------------
   Contact
----------------------------------------- */

form.contact label {
	/*float:left;
	width: 150px;
	clear: both;*/
}

form.contact input, form.contact textarea {
	margin-top:0;
}

/* -----------------------------------------
   Form Frame
----------------------------------------- */

body.frame {
	height: 100%;
}

.reveal-modal {
	padding: 15px 30px 0;
}

.reveal-modal iframe {
	overflow:hidden;
}

.frameform a img {
	margin-top: 5px;
	opacity: 0.7;
}

.frameform a:hover h5  {
	color: #11639d !important;
}

.frameform a:hover img {
	border: 1px solid black;
	-moz-box-shadow: 0 0 5px 0px #777;
	-webkit-box-shadow: 0 0 5px 0px #777;
	box-shadow: 0 0 5px 0px #777;
	opacity: 1;
}

.frameform .explain {
	height: 128px;
	width: 100%;
}
.frameform .explain.mailbox { background: url('/assets/images/icons/mailbox.png') no-repeat left center; }
.frameform .explain.kiala { background: url('/assets/images/icons/kiala.png') no-repeat left center; }
.frameform .explain.telephone { background: url('/assets/images/icons/telephone.png') no-repeat left center; }

.frameform .explain p, .frameform .explain form {
	display: block;
	margin-left: 150px;
	margin-top: 15px;
}

.frameform .button {
	position: fixed;
	bottom: 15px;
	right: 0;
}

.puces {
	list-style: disc inside none;
}

section.rhs {
	padding-top: 155px;
}

.rhs .rhsimg {
}

#pagecurl {
	display: none !important;
	width: 180px;
	height:174px;
	position: absolute;
	right: 0px;
	top: 0;
	z-index: 40;
	transition: all 0.1s ease-out 0s;
	overflow: hidden;
}

#pagecurl img {
	width: 180px;
	height:174px;
}

#pagecurl:hover {
}

@media only screen and (max-width: 1024px) {
	#pagecurl {
		display:;
	}
	
	.nav-bar > li > a.main {
    display: block;
    font-size: 1.4rem !important;
}

.pseudoblog article {
  margin-bottom: 15px;
}

.pseudoblog article:after {
    clear: both;
    content: ".";
    display: block;
}

.pseudoblog p img {
	float: right;
	margin-left: 15px;
	margin-bottom: 15px;
}
.pseudoblog h3 {
	margin-bottom: 5px;
}
.pseudoblog span.postdate {
	margin-bottom: 15px;
	display: block;
	color: grey;
    font-style: italic;
    margin-top: -6px;
}