/* ------------ General styles ------------ */

html::selection,
body::selection,
h1::selection, 
h2::selection, 
h3::selection, 
h4::selection, 
h5::selection, 
h6::selection, 
p::selection,
a::selection,
li::selection,
label::selection { background: rgba(245,86,24,0.8); color: #fff; }
strong::selection { color: #bdcccc; }

.container { width: 94%; max-width: 940px; padding: 0 3%; margin: 0 auto; }
.clear { margin: 0; padding: 0; clear: both; }

.button {
	display: inline-block; 
    border: 1px solid #bdcccc;
    border-radius: 3px;
    padding: 8px 24px;
    white-space: nowrap;
    vertical-align: middle;
    color: #fff;
    background: #f65718;
    cursor: pointer;
    opacity: 0.7;
    text-decoration: none;
}
	.button:hover, .button:focus {
	   border-color: #bdcccc;
	   opacity: 1;
	   color: #fff;
	   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25);
	   -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25);
	   box-shadow: 0 1px 2px rgba(0,0,0,0.25);
	}
		.button:active {
		   border: 1px solid #AAA;
		   border-bottom-color: #CCC;
		   border-top-color: #999;
		   -webkit-box-shadow: inset 1px 1px 3px #8f3814;
		   -moz-box-shadow: inset 1px 1px 3px #8f3814;
		   box-shadow: inset 1px 1px 3px #8f3814;
		}

.left { float: left; width: 48%; }
.right { float: right; width: 48%; }
.full { clear: both; width: 100%; }




/* ------------ Header ------------ */

#header { 
	position: fixed;
	top: 0;
	float: left;
	width: 100%;
	height: 53px;
	z-index: 20;
	border-bottom: 3px solid #f65718;
	background: #fff;
}


	#header h1 { 
		display: block;
		float: left;
		width: 126px;
		height: 47px;
		margin: 6px 0 0 0;
		background: rgba(230,230,230,0.5);
		border-bottom: 0px solid #f65718;
		border-radius: 2px 2px 0px 0px
	}
		#header h1:hover { 
			margin: 3px 0 0 0;
			background: rgba(220,220,220,0.5);
			border-bottom: 3px solid #f65718;
		}

		a#logo img {
			display: block;
			margin: 0 auto;
			width: 108px;
			height: 47px;
		}
		
	#header .login {
		float: right;
	}

ul#menu {
	float: right;
    position: relative;
    padding: 0;
    margin: 7px 22px 0 0;
    white-space: nowrap;
}

ul#menu li {
	float: left;
    display: inline;
    text-align: center;
}

ul#menu li:nth-child(1) a { width: 5em; }
ul#menu li:nth-child(2) a { width: 5em; }
ul#menu li:nth-child(3) a { width: 5em; }
ul#menu li:nth-child(4) a { width: 5em; }
ul#menu li:nth-child(5) a { width: 5em; }

ul#menu li a {
	float: left;
    display: inline-block;
    box-sizing: border-box;
    padding: 8px 3px;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    background-color: transparent;
    transition: background-color .3s ease;
}

ul#menu li a:hover, ul#menu li a:focus {
    background-color: rgba(239,239,239,0.5);
    transition: background-color .3s ease .4s;
    text-shadow: 0 1px 0 #fff;
}

ul#menu li a:focus { border-bottom: 3px solid #f65718; }

ul#menu li:last-child::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: -3px;
    display: block;
    width: 6.45em;
    height: 3px;
    background: #f65718;
    transition: all .5s ease;
}

ul#menu li:hover ~ li:last-child::after,
ul#menu li:last-child:hover::after { background: #f65718; }

ul#menu li:nth-child(1):hover ~ li:last-child::after { left: 0; width: 6.4em; }
ul#menu li:nth-child(2):hover ~ li:last-child::after { left: 6.4em; width: 6.45em; }
ul#menu li:nth-child(3):hover ~ li:last-child::after { left: 12.85em; width: 6.45em; }
ul#menu li:last-child:hover::after { left: 19.3em; width: 6.45em; }

	#header .button { margin-top: 8px; }
	
/* ------------ Content-Slider ------------ */

#content { 
	padding-top: 54px;
	position: relative;
	overflow: hidden;
}


.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus { outline: none; }
.slides,
.flex-control-nav,
.flex-direction-nav { margin: 0; padding: 0; list-style: none; } 


.flexslider { 
	width: 100%; 
	height: 712px; 
	padding: 0; 
	overflow: hidden; 
	border-bottom: 1px solid #b8b8b8;
}

.flexslider .slides > li { 
	display: none; 
	position: relative; 
	-webkit-backface-visibility: hidden; 
} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img { width: 100%; display: block; }
.flex-pauseplay span { text-transform: capitalize; }

/* Clearfix for the .slides element */
.slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } 
html[xmlns] .slides { display: block; } 
* html .slides { height: 1%; }

/* No JavaScript Fallback */
.no-js .slides > li:first-child { display: block; }


.flexslider { position: relative; }
.flexslider .banner { 
	position: absolute; 
	width: 100%; 
	top: 0; 
	left: 0; 
	text-align: center; 
	font-size: 42px; 
	line-height: 51px; 
	color: #fff; 
	padding-top: 276px; 
}

.flexslider .title1, .flexslider .title2 { padding: 12px 20px 12px; display: inline-block; border-radius: 3px; }
.flexslider .title1 { background: rgba(245,86,24,0.8); color: #fff; margin-bottom: 3px; }
.flexslider .title2 { background: rgba(255,255,255,0.8); }

.flex-viewport {}
.loading .flex-viewport { max-height: 300px; }

/* Direction Nav */
.flex-direction-nav a { 
	width: 48px; 
	height: 48px; 
	margin: 0;
	padding: 12px; 
	display: block; 
	position: absolute; 
	top: 309px; 
	cursor: pointer; 
	text-indent: -9999px; 
	z-index: 5; 
	border-radius: 3px; 
}
.flex-direction-nav .flex-prev { left: 12px; background: url('../img/prev.png') 10px 12px no-repeat #fff; opacity: 0.5; }
.flex-direction-nav .flex-next { right: 12px; background: url('../img/next.png') 12px 12px no-repeat #fff; opacity: 0.5; }
.flex-direction-nav a:hover { opacity: 1; }


/* Control Nav */
.flex-control-nav { width: 100%; position: absolute; bottom: 12px; text-align: center; z-index: 5; }
.flex-control-nav li { margin: 0 6px; display: inline-block; display: inline; }
.flex-control-paging li a { width: 32px; height: 6px; display: inline-block; margin: 0 auto; background: #fff; cursor: pointer; text-indent: -9999px; opacity: 0.5; }
.flex-control-paging li a:hover, .flex-control-paging li a.flex-active { background: #f65718; opacity: 1; }
.flex-control-paging li a:hover { background: #fff; }

.flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden;  }
.flex-control-thumbs li { width: 25%; float: left; margin: 0; }
.flex-control-thumbs img { width: 100%; display: block; cursor: pointer; opacity: 0.5; }
.flex-control-thumbs img:hover { opacity: 1; }
.flex-control-thumbs .active { opacity: 1; cursor: default; opacity: 1; }


/* ------------ Content-Misc ------------ */

#services { padding-top: 56px; overflow: hidden; }

#services .wrapper { margin: 32px 0; }

.service { float: left; width: 28%; margin-left: 4%; }
.service h3, .service h4 { margin: 0; padding: 0; }

.img_wrap { 
	display: block;
	width: 150px;
	height: 150px;
	margin: 0 auto;
	background: url(../img/services.png); 
}

.service1 .img_wrap { background-position: 0 0; }
.service2 .img_wrap { background-position: -150px 0; }
.service3 .img_wrap { background-position: -300px 0; }





/* ------------ Content-dota ------------ */

#dota { padding-top: 56px; overflow: hidden; }

#dota .preview {
	border: 1px solid #bdcccc;
	border-radius: 2px;
}

#dota h2, #dota h4 { text-align: center; margin: 6px 0; }

#dota .left p:first-child { margin-top: 50px; }

#dota .main { padding: 24px 0; }
#dota .full { overflow: hidden; padding: 48px 0; }
#dota #logs { margin: 24px auto; width: 42%; }
	#logs .button { float: left; }
	#logs p { display: inline-block; float: left; margin: 8px 0 0 24px; }



/* ------------ Formulaires ------------ */

#contact { padding-top: 54px; overflow: hidden; }

#contact-form .row { overflow: hidden; }
#contact-form .row label { width: 300px; display: block; float: left; margin-left: 20px; }
#contact-form .row label:first-child { margin-left: 0; }

.info { float: left; margin: 32px 0 0; width: 300px; }
.info h5 { margin-bottom: 19px; }

#contact-form { padding: 48px 0 48px 0; width: 640px; float: left; }
#contact-form .success { 
	display: block;
	width: 246px; 
	height: 128px; 
	padding: 10px;
	background: rgba(255,255,255,0.8);
	border-radius: 3px;
	border: 1px solid #bdcccc;
	color: #bdcccc;
	
}

#contact-form textarea, #contact-form input {
	margin: 0; 
	font-size: 14px; 
	border: 1px solid #bdcccc; 
	border-radius: 3px; 
	color: #bdcccc; 
	padding: 13px 18px 15px;
	outline: none; 
	position: relative; 
	font-family: 'Gibson', Helvetica, Arial, sans-serif;
	background: #fcfcfc; 
}

#contact-form input { width: 262px; }

#contact-form textarea { 
	overflow: auto; 
	width: 582px; 
	height: 192px;
	resize: none; 
	float: left; 
	margin: 0;
}	

#contact-form label {
	display: block;
	min-height: 67px; 
	overflow: hidden;
}	

#contact-form label.message { display: block; padding-bottom: 0; }
#contact-form .error, #contact-form .empty, #contact-form .success { display: none; }
	
#contact-form .error, #contact-form .empty { 
	text-align: left; 
	color: red; 
	font-size: 11px; 
	clear: both; 
}

#contact-form .buttons { 
	overflow: hidden; 
	position: relative; 
	clear: both; 
	padding-top: 20px; 
	margin: 0;
}

#contact-form .button {	margin: 0 4px 0 0; font-size: 18px; color: #fff; background: #bdcccc; }
#contact-form .submit { margin: 0 4px 0 0; font-size: 24px; color: #fff; background: #f65718; }
#contact-form .button:last-child {	padding: 6px 14px 4px 12px; }

#contact-form .submit .picto { margin: 5px 14px 0 0; }
#contact-form .button:last-child .picto { margin: 0 4px 0 0; }

.demo:hover{ text-decoration: underline; }

.contact_info { margin-top: 36px; }


/* ------------ Footer ------------ */

#footer {
	background: #fff;
	border-top: 3px solid #f65718;
	color: #bdcccc;
	margin-top: 72px;
	padding: 12px 0;
	overflow: hidden;
	clear: both;
	position: relative;
}

	.privacy { float: left; display: inline-block; padding-top: 2px; }

ul#social { 
	margin: 0 auto;
	float: right;
	overflow: hidden;
	width: 148px;
	padding-right: 2px;
	margin-top: 14px;
}

ul#social li {
	width: 24px;
	height: 24px;
	float: left;
	overflow: hidden;
	list-style: none;
	margin-left: 24px;
	display: block;
}

ul#social li a {
	display: block;
	text-indent: -9999px;
	width: 24px;
	height: 24px;
	opacity: 0.5;
}

ul#social li a:hover { opacity: 0.9; }

#SkypeButton_Chat_Cobaydy_1_paraElement { margin: 0; }
ul#social #SkypeButton_Chat_Cobaydy_1 a { background: url(../img/picto.png) no-repeat; background-position: -360px -72px; }



/* ------------ Animations ------------ */


ul li a, 
ul li a:hover,
.wrapper-dropdown:hover { transition: background 0.3s 0s ease-in;
				-webkit-transition: background 0.3s 0s ease-in;
				-moz-transition: background 0.3s 0s ease-in; }
				
				
#header h1, #header h1:hover { transition: 0.1s 0s ease-in;
				-webkit-transition: 0.1s 0s ease-in;
				-moz-transition: 0.1s 0s ease-in; }

.button,
.submit,
ul#social li a,
ul#social li a:hover,				
.flex-direction-nav a, 
.flex-direction-nav a:hover, 
.flex-control-paging li a, 
.flex-control-paging li a:hover, 
.flex-control-paging li a.active,
#search a,
#search a:hover { transition: 0.3s;
				-webkit-transition: 0.3s;
				-moz-transition: 0.3s; }
				
/* ------------ Picto Sprite ------------ */


.picto {
	display: block;
	float: left;
	width: 24px;
	height: 24px;
	background: url(../img/picto.png) no-repeat;
}

.picto.grey { background-position: 0 0; }
.picto.lightgrey { background-position: 0 -24px; }
.picto.white { background-position: 0 -48px; }
.picto.orange { background-position: 0 -72px; }
.picto.blue { background-position: 0 -96px; }

.picto.grey.share { background-position: 0 0; }
.picto.grey.plane { background-position: -24px 0; }
.picto.grey.log-out { background-position: -48px 0; }
.picto.grey.download { background-position: -72px 0; }
.picto.grey.log-in { background-position: -96px 0; }
.picto.grey.check { background-position: -120px 0; }
.picto.grey.network { background-position: -144px 0; }
.picto.grey.cross { background-position: -168px 0; }
.picto.grey.upload { background-position: -192px 0; }
.picto.grey.twitter { background-position: -216px 0; }
.picto.grey.feather { background-position: -240px 0; }
.picto.grey.database { background-position: -264px 0; }
.picto.grey.book { background-position: -288px 0; }
.picto.grey.plus { background-position: -312px 0; }
.picto.grey.up { background-position: -336px 0; }
.picto.grey.skype { background-position: -360px 0; }
.picto.grey.fullsize { background-position: -384px 0; }
.picto.grey.search { background-position: -408px 0; }
.picto.grey.video { background-position: -432px 0; }
.picto.grey.eye { background-position: -456px 0; }
.picto.grey.downsize { background-position: -480px 0; }
.picto.grey.clock { background-position: -504px 0; }
.picto.grey.compass { background-position: -528px 0; }
.picto.grey.file { background-position: -552px 0; }
.picto.grey.music { background-position: -576px 0; }
.picto.grey.links { background-position: -600px 0; }
.picto.grey.folder { background-position: -624px 0; }
.picto.grey.image { background-position: -648px 0; }
.picto.grey.arrow { background-position: -672px 0; }

.picto.lightgrey.share { background-position: 0 -24px; }
.picto.lightgrey.plane { background-position: -24px -24px; }
.picto.lightgrey.log-out { background-position: -48px -24px; }
.picto.lightgrey.download { background-position: -72px -24px; }
.picto.lightgrey.log-in { background-position: -96px -24px; }
.picto.lightgrey.check { background-position: -120px -24px; }
.picto.lightgrey.network { background-position: -144px -24px; }
.picto.lightgrey.cross { background-position: -168px -24px; }
.picto.lightgrey.upload { background-position: -192px -24px; }
.picto.lightgrey.twitter { background-position: -216px -24px; }
.picto.lightgrey.feather { background-position: -240px -24px; }
.picto.lightgrey.database { background-position: -264px -24px; }
.picto.lightgrey.book { background-position: -288px -24px; }
.picto.lightgrey.plus { background-position: -312px -24px; }
.picto.lightgrey.up { background-position: -336px -24px; }
.picto.lightgrey.skype { background-position: -360px -24px; }
.picto.lightgrey.fullsize { background-position: -384px -24px; }
.picto.lightgrey.search { background-position: -408px -24px; }
.picto.lightgrey.video { background-position: -432px -24px; }
.picto.lightgrey.eye { background-position: -456px -24px; }
.picto.lightgrey.downsize { background-position: -480px -24px; }
.picto.lightgrey.clock { background-position: -504px -24px; }
.picto.lightgrey.compass { background-position: -528px -24px; }
.picto.lightgrey.file { background-position: -552px -24px; }
.picto.lightgrey.music { background-position: -576px -24px; }
.picto.lightgrey.links { background-position: -600px -24px; }
.picto.lightgrey.folder { background-position: -624px -24px; }
.picto.lightgrey.image { background-position: -648px -24px; }
.picto.lightgrey.arrow { background-position: -672px -24px; }

.picto.white.share { background-position: 0 -48px; }
.picto.white.plane { background-position: -24px -48px; }
.picto.white.log-out { background-position: -48px -48px; }
.picto.white.download { background-position: -72px -48px; }
.picto.white.log-in { background-position: -96px -48px; }
.picto.white.check { background-position: -120px -48px; }
.picto.white.network { background-position: -144px -48px; }
.picto.white.cross { background-position: -168px -48px; }
.picto.white.upload { background-position: -192px -48px; }
.picto.white.twitter { background-position: -216px -48px; }
.picto.white.feather { background-position: -240px -48px; }
.picto.white.database { background-position: -264px -48px; }
.picto.white.book { background-position: -288px -48px; }
.picto.white.plus { background-position: -312px -48px; }
.picto.white.up { background-position: -336px -48px; }
.picto.white.skype { background-position: -360px -48px; }
.picto.white.fullsize { background-position: -384px -48px; }
.picto.white.search { background-position: -408px -48px; }
.picto.white.video { background-position: -432px -48px; }
.picto.white.eye { background-position: -456px -48px; }
.picto.white.downsize { background-position: -480px -48px; }
.picto.white.clock { background-position: -504px -48px; }
.picto.white.compass { background-position: -528px -48px; }
.picto.white.file { background-position: -552px -48px; }
.picto.white.music { background-position: -576px -48px; }
.picto.white.links { background-position: -600px -48px; }
.picto.white.folder { background-position: -624px -48px; }
.picto.white.image { background-position: -648px -48px; }
.picto.white.arrow { background-position: -672px -48px; }

.picto.orange.share { background-position: 0 -72px; }
.picto.orange.plane { background-position: -24px -72px; }
.picto.orange.log-out { background-position: -48px -72px; }
.picto.orange.download { background-position: -72px -72px; }
.picto.orange.log-in { background-position: -96px -72px; }
.picto.orange.check { background-position: -120px -72px; }
.picto.orange.network { background-position: -144px -72px; }
.picto.orange.cross { background-position: -168px -72px; }
.picto.orange.upload { background-position: -192px -72px; }
.picto.orange.twitter { background-position: -216px -72px; }
.picto.orange.feather { background-position: -240px -72px; }
.picto.orange.database { background-position: -264px -72px; }
.picto.orange.book { background-position: -288px -72px; }
.picto.orange.plus { background-position: -312px -72px; }
.picto.orange.up { background-position: -336px -72px; }
.picto.orange.skype { background-position: -360px -72px; }
.picto.orange.fullsize { background-position: -384px -72px; }
.picto.orange.search { background-position: -408px -72px; }
.picto.orange.video { background-position: -432px -72px; }
.picto.orange.eye { background-position: -456px -72px; }
.picto.orange.downsize { background-position: -480px -72px; }
.picto.orange.clock { background-position: -504px -72px; }
.picto.orange.compass { background-position: -528px -72px; }
.picto.orange.file { background-position: -552px -72px; }
.picto.orange.music { background-position: -576px -72px; }
.picto.orange.links { background-position: -600px -72px; }
.picto.orange.folder { background-position: -624px -72px; }
.picto.orange.image { background-position: -648px -72px; }
.picto.orange.arrow { background-position: -672px -72px; }

.picto.blue.share { background-position: 0 -96px; }
.picto.blue.plane { background-position: -24px -96px; }
.picto.blue.log-out { background-position: -48px -96px; }
.picto.blue.download { background-position: -72px -96px; }
.picto.blue.log-in { background-position: -96px -96px; }
.picto.blue.check { background-position: -120px -96px; }
.picto.blue.network { background-position: -144px -96px; }
.picto.blue.cross { background-position: -168px -96px; }
.picto.blue.upload { background-position: -192px -96px; }
.picto.blue.twitter { background-position: -216px -96px; }
.picto.blue.feather { background-position: -240px -96px; }
.picto.blue.database { background-position: -264px -96px; }
.picto.blue.book { background-position: -288px -96px; }
.picto.blue.plus { background-position: -312px -96px; }
.picto.blue.up { background-position: -336px -96px; }
.picto.blue.skype { background-position: -360px -96px; }
.picto.blue.fullsize { background-position: -384px -96px; }
.picto.blue.search { background-position: -408px -96px; }
.picto.blue.video { background-position: -432px -96px; }
.picto.blue.eye { background-position: -456px -96px; }
.picto.blue.downsize { background-position: -480px -96px; }
.picto.blue.clock { background-position: -504px -96px; }
.picto.blue.compass { background-position: -528px -96px; }
.picto.blue.file { background-position: -552px -96px; }
.picto.blue.music { background-position: -576px -96px; }
.picto.blue.links { background-position: -600px -96px; }
.picto.blue.folder { background-position: -624px -96px; }
.picto.blue.image { background-position: -648px -96px; }
.picto.blue.arrow { background-position: -672px -96px; }