/*
Theme Name: Tutoriel-Video.com v3
Theme URI: https://www.tutoriel-video.com
Description: Thème du site Tutoriel-Video.com
Version: 3
Author: Alexis Dadache
Author URI: http://www.alexisdadache.com
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: white, gray, blue, flat
*/

@font-face {
    font-family: 'futura_lt_btlight';
    src: url('https://www.tutoriel-video.com/wp-content/themes/tutoriel-video-v2-2/font/futura_light_bt-webfont.eot');
    src: url('https://www.tutoriel-video.com/wp-content/themes/tutoriel-video-v2-2/font/futura_light_bt-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.tutoriel-video.com/wp-content/themes/tutoriel-video-v2-2/font/futura_light_bt-webfont.woff') format('woff'),
         url('https://www.tutoriel-video.com/wp-content/themes/tutoriel-video-v2-2/font/futura_light_bt-webfont.ttf') format('truetype'),
         url('https://www.tutoriel-video.com/wp-content/themes/tutoriel-video-v2-2/font/futura_light_bt-webfont.svg#futura_lt_btlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

body, html {
	font-family: Roboto, "Lucida Grande", Arial;
	font-size: 14px;
	background: #ecf0f1;
	background: -webkit-linear-gradient(#ecf0f1,#bdc3c7);
	background: linear-gradient(#ecf0f1,#bdc3c7);
}

a { text-decoration: none; color: #3498db; }
a:hover { text-decoration: underline; color: #0060AF; }

h2 {
	font-size: 2.5em;
	text-align:center;
	margin-bottom: 0.5em;
	font-family: "futura_lt_btlight",Roboto,sans-serif;
	color: #606060;
	font-weight: lighter;
	letter-spacing: -1px;
	text-transform: uppercase;
	line-height: 1em;
}

h3 {
	font-size: 1.2em;
	font-weight: bold;
}

h4, h5 {
	padding-bottom: 5px;
	border-bottom: 1px solid #CCCCCC;
	font-size: 90%;
	font-weight: bold;
}

p {	text-align: justify; }
ul, ol {	padding-left: 20px;	margin: 0; }
small { font-size: 10px; }

.nobreak{display:inline}
.sticky {}
.gallery-caption {}
.bypostauthor {}
.aligncenter {text-align: center;}
.wp-caption {}
.wp-caption-text {}

/*-------------------------------------------------
--------------------DIVERS-------------------------
---------------------------------------------------*/
.spacer { clear: both; }

li.column {
	list-style-type: none;
	margin-right: 0;
	width: 130px;
}

.bloc-center { margin: auto; }
.alignleft, .left {	float: left; }
.alignright, .right { float: right; }
.center{text-align:center;}
.hidden { display: none; }

a.back {
	display: block;
	color: #666;
	font-weight: bold;
	box-shadow: 0 2px 0 #bdc3c7;
	background: #ecf0f1;
	text-align: center;
	padding: 0.5em;
	border-radius: 3px;
	margin: 1.5em 0;
	-webkit-transition: all ease-in-out 0.5s;
	transition: all ease-in-out 0.5s;
}
.lt-ie10 a.back { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#eeeeee',GradientType=0 ); }

a.back:hover {
	background: #ecf0f1;
	color: #007ace;
	text-decoration: none;
}

.fleche-bas {
	border-color: #8D8D8D transparent transparent transparent;
	border-style: solid;
	border-width: 10px;
	height: 0;
	width: 0;
}

.fleche-haut {
	border-color: transparent transparent #8D8D8D transparent;
	border-style: solid;
	border-width: 10px;
	height: 0;
	width: 0;
}

p.edit-button a {
	display: block;
	width: 180px;
	height: 40px;
	line-height: 40px; 
	text-align: center;
	color: #666;
	font-weight: 600;
	background: #EEEEEE;
	box-shadow: 0 1px 3px #000; border-radius: 2px;
	background: -webkit-linear-gradient(top, #FCFCFC, #EEE); background: linear-gradient(#FCFCFC,#EEE);
}
p.edit-button a:hover { text-decoration: none; color: #007ace; }

ul.liste {
	list-style: none;
	margin: 0;
	padding: 0;
}
.borderradius ul.liste li{position:relative;padding-top:30px;}
.no-borderradius ul.liste li{padding-top:0;}
.borderradius ul.liste li .icon-container{
	width: 100%;
	position: absolute;
	top:0;
	left:0;
	z-index:10;
}
.borderradius ul.liste li .icon-container i{cursor:pointer;-webkit-transition:all ease-in-out 1s;transition:all ease-in-out 1s;}
.borderradius ul.liste li .icon-container i:hover{background:#dfe3e4;-webkit-transition:all ease-in-out 1s;transition:all ease-in-out 1s;}
.borderradius ul.liste li.download .icon-container i:hover{background:#F88723;}
.borderradius ul.liste li i{
	display: block;
	margin:0 auto;
	font-size: 3em;
	border-radius: 50%;
	width: 65px;
	line-height: 55px;
	height: 65px;
	text-align: center;
	background: #ecf0f1;
	color: #3498db;
	border: 5px solid #FCFCFC;
}
.no-borderradius ul.liste li i{display:none;}
.borderradius ul.liste li.download i{background:#e67e22;color:#fcfcfc;}

ul.liste li a {
	overflow: hidden;
	position: relative;
	z-index:0;
	display: block;
	min-height: 14em;
	width: 100%;
	padding: 0.9em 0.45em 2em 0.45em;
	text-align: center;
	font-size: 0.85em;
	font-weight: bold;
	background: #ecf0f1;
	box-shadow: 0 2px 0 #bdc3c7;
	border-radius: 3px;
	-webkit-transition: all ease-in-out 1s; transition: all ease-in-out 1s;
}
ul.liste li.download a:before {
	font-family: FontAwesome;
	content: "\f019";
	color: #FCFCFC;
	font-size: 10em;
	position: absolute;
	top: 0;
	left: .1em;
	z-index: -1;
	opacity: .2;
}
.no-borderradius ul.liste li a{min-height:11em;}
ul.liste li.download a{background:#e67e22;box-shadow:0 2px 0 #d35400;}

ul.liste li a:hover {	
	color: #606060;
	background:#DFE3E4;
	text-decoration: none;
	-webkit-transition: all ease-in-out 1s; transition: all ease-in-out 1s;
}
ul.liste li.download a:hover{
	background:#F88723;
	color:#fcfcfc;
}
ul.liste.blue li a{background: #4889C2;box-shadow: 0 2px 0 #255177;}
ul.liste.blue li a:hover{background: #5c96c9;color:#FCFCFC;}

ul.liste li a span.titre{display:block;width:100%;line-height:1.3em;padding-top:3em;color:#3498db;font-weight:bolder;text-transform:uppercase;}
.no-borderradius ul.liste li a span.titre{padding-top:1em;}
ul.liste li.download a span.titre{color:#FCFCFC;font-size:1.4em;}

ul.liste li a span.date {
	display: none;
	position: absolute;
	font-style: italic;
	bottom: 2px;
	right: 2px;
	font-size: 75%;
	color: #666;
}

ul.liste li a span.difficulte {
	font-size: 90%;
	text-transform: uppercase;
	display: block;
	padding: 0.3em 0;
	width: 105%;
	margin: 1em 0;
	margin-left: -0.45em;
	color: #FCFCFC;
}

ul.liste li a span.difficulte.debutant { 
	background: #27ae60;
	-webkit-transition: all ease-in-out 1s; transition: all ease-in-out 1s;
}
ul.liste li a span.difficulte.intermediaire { 
	background: #d35400; 
	-webkit-transition: all ease-in-out 1s; transition: all ease-in-out 1s;
}
ul.liste li a span.difficulte.avance { 
	background: #c0392b;
	-webkit-transition: all ease-in-out 1s; transition: all ease-in-out 1s;
}
ul.liste a:hover .difficulte.debutant {
	background: #2ecc71;
	-webkit-transition: all ease-in-out 1s; transition: all ease-in-out 1s;
}
ul.liste a:hover .difficulte.intermediaire {
	background: #e67e22;
	-webkit-transition: all ease-in-out 1s; transition: all ease-in-out 1s;
}
ul.liste a:hover .difficulte.avance {
	background: #e74c3c;
	-webkit-transition: all ease-in-out 1s; transition: all ease-in-out 1s;
}

ul.liste li a span.type {
	position: absolute;
	font-style: italic;
	bottom: 2px;
	left: 5px;
	color: #666;
	font-size: 80%;
	font-weight: bold;
}

ul.liste li a span.duree {
	bottom: 2px;
	right: 5px;
	padding: 0.5em;
	font-size: 0.8em;
	line-height: 1em;
	height: 2em;
	font-weight: normal;
}

ul.liste li a span.vues {
	position:absolute;
	bottom: 2px;
	left: 5px;
	color:#666;
}
.navigation, .ddsg-pagenav {
	overflow: hidden;
	height: 100%;
	padding: 0.5em 0;
	margin-bottom: 2em;
	font-size: 1em;
}
.navigation a{
	display:inline-block;
	padding:0.5em;
	background:#3498db;
	box-shadow:0 2px 0 #2980b9;
	border-radius: 20px;
	color: #FCFCFC;
	-webkit-transition: all ease-in-out 0.5s;transition: all ease-in-out 0.5s;
}
.navigation a:hover{
	text-decoration: none;
	background: #3AA8F1;
	-webkit-transition: all ease-in-out 0.5s;transition: all ease-in-out 0.5s;
}

.ddsg-pagenav p {
	margin: 0;
	text-align: center;
}

.conteneur-publicite-leaderboard {
	position: relative;
	background: #FCFCFC;
	border-top: 1px dotted #ecf0f1;
	border-bottom: 1px dotted #ecf0f1;
	padding: 5px 0;
	margin-bottom: 20px;
	text-align:center;
}

.header-publicite-leaderboard {
	position: absolute;
	top: 5px;
	left: 5px;
	font-weight: bold;
	font-size: medium;
	color: #8D8D8D;
	line-height: normal;
	display: none;
}

.publicite-leaderboard {
	width: 729px;
	height: 90px;
	margin: auto;
}

.adsbygoogle {width: 320px; height: 50px;}
@media (min-width:500px) { .adsbygoogle { width: 468px; height: 60px;}}
@media (min-width:800px) { .adsbygoogle { width: 728px; height: 90px;}}

.blue{color:#3498db;font-weight:bold;}

.bx-pager { padding: 10px 0 20px 0; }
.bx-pager a:hover { text-decoration: none; }
.bx-pager .pager-10 { padding: 3px 8px 3px 3px; }

.gray-gradient {
	background: #FCFCFC;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFCFC), color-stop(47%,#f6f6f6), color-stop(100%,#E3E3E3));
	background: -webkit-linear-gradient(top, #FCFCFC 0%,#f6f6f6 47%,#E3E3E3 100%);
	background: linear-gradient(to bottom, #FCFCFC 0%,#f6f6f6 47%,#E3E3E3 100%);
	-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px,inset 0px 1px 1px rgb(255,255,255);
	box-shadow:0px 1px 2px rgba(0,0,0,0.5) ,inset 0px 1px 1px rgb(255,255,255);
	border-radius: 2px;
}
.lt-ie10 .gray-gradient { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCFCFC', endColorstr='#E3E3E3',GradientType=0 ); border: 1px solid #EEE; }

.clear { clear: none; }
.clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

.error, .success {
	margin:0 0 10px 0;
	font-weight:bold;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	padding:1px;
	position:relative;
}

.error p, .success p {
	display:block;
	margin:0;
	padding:8px 30px 7px 10px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	font-size: 90%;
	line-height: 1.2em;
}

.error {
	background-color:#d29191;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#d29191), to(#bb5e5e));
	background-image:-webkit-linear-gradient(top, #d29191, #bb5e5e);
	background-image:linear-gradient(to bottom, #d29191, #bb5e5e);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#d29191', EndColorStr='#bb5e5e');
	-webkit-box-shadow:0px 0px 6px rgba(244,187,187,0.7);
	box-shadow:0px 0px 6px rgba(244,187,187,0.7);
}

.error p {
	display:block;
	margin:0;
	background-color:#f4baba;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#f4baba), to(#db7f7f));
	background-image:-webkit-linear-gradient(top, #f4baba, #db7f7f);
	background-image:linear-gradient(to bottom, #f4baba, #db7f7f);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f4baba', EndColorStr='#db7f7f');
	-webkit-box-shadow:inset 0px 1px 0px #f7d0d0;
	box-shadow:inset 0px 1px 0px #f7d0d0;
	color:#745050;
	text-shadow:1px 1px 0px #eaadad;
}

.error p:after {
	content:'\2718';
	position:absolute;
	top:10px;
	right:10px;
	font-size:16px;
}

.success {
	background-color:#c6cdaa;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#c6cdaa), to(#a8ae8e));
	background-image:-webkit-linear-gradient(top, #c6cdaa, #a8ae8e);
	background-image:linear-gradient(to bottom, #c6cdaa, #a8ae8e);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#c6cdaa', EndColorStr='#a8ae8e');
	-webkit-box-shadow:0px 0px 6px rgba(223,230,198,0.7);
	box-shadow:0px 0px 6px rgba(223,230,198,0.7);
}

.success p {
	background-color:#e2e8c9;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#e2e8c9), to(#c1c8a7));
	background-image:-webkit-linear-gradient(top, #e2e8c9, #c1c8a7);
	background-image:linear-gradient(to bottom, #e2e8c9, #c1c8a7);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#e2e8c9', EndColorStr='#c1c8a7');
	-webkit-box-shadow:inset 0px 1px 0px #ebf0da;
	box-shadow:inset 0px 1px 0px #ebf0da;
	color:#676b5b;
	text-shadow:1px 1px 0px #d6dcc3;
}

.success p:after {
	content:'\2714';
	position:absolute;
	top:10px;
	right:10px;
	font-size:16px;
}

.info{color:#95a5a6;}

.blue-button {
	border-radius: 3px;
	border: 1px solid #336895;
	box-shadow: inset 0 1px 0 #8dc2f0;
	padding: 10px;
	margin-top: 10px;
	
	background: #4889C2;
	background: -webkit-linear-gradient(bottom, #4889C2 0%, #5BA7E9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4889C2, endColorstr=#5BA7E9);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4889C2, endColorstr=#5BA7E9)";
	background: linear-gradient(to top, #4889C2 0%, #5BA7E9 100%);
	cursor: pointer;
	color: white;
	font-weight: bold;
	text-shadow: 0 -1px 0 #336895;
	font-size: 13px;
}

.blue-button:hover {
	background: #5c96c9;
	background: -webkit-linear-gradient(bottom, #5c96c9 0%, #6bafea 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#5c96c9, endColorstr=#6bafea);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#5c96c9, endColorstr=#6bafea)";
	background: linear-gradient(to top, #5c96c9 0%, #6bafea 100%);
	text-decoration: none;
	color: white;
}

.blue-button:active {
	background: #5BA7E9;
	background: -webkit-linear-gradient(bottom, #5BA7E9 0%, #4889C2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#5BA7E9, endColorstr=#4889C2);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#5BA7E9, endColorstr=#4889C2)";
	background: linear-gradient(to top, #5BA7E9 0%, #4889C2 100%);
	box-shadow: inset 0 0 2px rgba(0,0,0, .3), 0 1px 0 white;
}

a.thumbnail {
	position: relative;
}
.thumbnail:hover img {
	-webkit-filter: saturate(50%); -moz-filter: saturate(50%); -o-filter: saturate(50%); -ms-filter: saturate(50%); filter: saturate(50%);
}

span.duree {
	position: absolute;
	bottom: 10px;
	right: 2px;
	padding: 0 4px;
	font-weight: bold;
	font-size: 75%;
	background: #000;
	color: #FFF !important;
	height: 14px;
	line-height: 14px;
	opacity: 0.75;
	filter: alpha(opacity=75);
	display: -moz-inline-stack;
	vertical-align: top;
	zoom: 1;
	display: inline-block;
	border-radius: 3px;
}

.ribbon-wrapper-red {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
  z-index: 300;
}

.ribbon-red {
  font: bold 115% 'futura_lt_btlight';
  letter-spacing: -1px;
  font-weight: 100;
  text-transform: uppercase;
  color: #FCFCFC;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -3px;
  top: 39px;
  width: 195px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #C41B1D 0%, #A31819 100%); 
  background-image: linear-gradient(to bottom, #BFDC7A, #8EBF45); 
  color: #FCFCFC;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
  cursor: pointer;
}

.ribbon-red:before, .ribbon-red:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-red:before { left: 0; }
.ribbon-red:after { right: 0; }

.specular {
	position: absolute;
	top: 1px;
	left: 1px;
	z-index: 100;
	width: 200px;
	height: 112px;
	background: -webkit-linear-gradient(-30deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, 0) 50.1%) no-repeat;
	background: linear-gradient(-30deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, 0) 50.1%) no-repeat;
	background-position: -350px -300px;
	-moz-background-size: 660px 1000px;
	background-size: 660px 1000px;
	-webkit-background-size: 660px 1000px;
	-moz-mask: -moz-linear-gradient(top, #fff, transparent 70%);
	-webkit-mask: -webkit-linear-gradient(top, #fff, transparent 70%);
	mask: linear-gradient(to bottom, #fff, transparent 70%);
}

a.attachment {
	background: #80a9da;
	background: -webkit-linear-gradient(#80a9da, #6f97c5);
	background: linear-gradient(to bottom, #80a9da 0%, #6f97c5 100%);
	min-height: 3em;
	padding: 0.8em 50px 0.5em 33px;
	position: relative;
	display: inline-block;
	box-shadow: 0 2px 0 #5D81ab;
	border-radius: 3px;
	color: white;
	text-shadow: 0px -1px 1px #5d81ab;
	font-size: 0.9em;
	font-weight: normal;
	-webkit-transition: all ease-in-out 0.5s;
	transition: all ease-in-out 0.5s;
}
.lt-ie10 a.attachment { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f97c5', endColorstr='#80a9da',GradientType=0 ); }

a.attachment:before {
	content:"";
	position: absolute;
	left: 0;
	top: 9px;
	display: block;
	width: 30px;
	height: 22px;
	background: url(https://www.tutoriel-video.com/wp-content/themes/tutoriel-video-v2-2/images/attachment.png) no-repeat center 22px;
}
a.attachment.psd:before { background-position: center 0; }
a.attachment.excel:before { background-position: center -22px; }
a.attachment.word:before { background-position: center -44px; }
a.attachment.image:before { background-position: center -66px; top: 8px; left: 1px; }
a.attachment.logiciel:before { background-position: center -88px; left: 2px; }
a.attachment.powerpoint:before {background-position: center -110px;}

a.attachment:after {
	font-family: FontAwesome;
	font-size: 1.3em;
	text-align: center;
	content: "\F019";
	position: absolute;
	overflow: hidden;
	top: 0; 
	right: 0;
	display: block;
	border-left: 1px solid #5d81ab;
	width: 40px;
	height: 2.3em;
	padding: 0.5em 0;
	box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
}
a.attachment:hover {text-decoration:none;}

a.attachment:hover:after {
	-webkit-animation: arrowSlideDown 1.5s linear infinite;
	animation: arrowSlideDown 1.5s linear infinite;
}
@keyframes arrowSlideDown{
    0% { text-indent: -50px; }
    100% { text-indent: 100px;}
}
@-webkit-keyframes arrowSlideDown{
    0% { text-indent: -50px; }
    100% { text-indent: 100px;}
}
@-moz-keyframes arrowSlideDown{
    0% { background-position: center -25px; }
    100% { background-position: center 40px;}
}

.ruban-thumbnail-wrapper {
	position: absolute;
	overflow: hidden;
	width: 140px;
	height: 140px;
	z-index: 200;
	top: -2px;
	left: -2px;
}
.lt-ie9 .ruban-thumbnail-wrapper { display: none; }

.ruban-thumbnail-wrapper .ruban {	
	display: block;
	position: relative;
	left: -45px;
	top: 40px;
	-webkit-transform: rotate(-45deg); 
	-moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	font-weight: bold;
	font-size: 110%;
	text-transform: uppercase;
	text-align: center;
	padding: 4px 0;
	width: 195px;
	box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
}

.ruban-thumbnail-wrapper .ruban.difficulte.debutant { 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A8DBA8), color-stop(100%,#74B474));
	background: -webkit-linear-gradient(top, #A8DBA8 0%,#74B474 100%);
	background: linear-gradient(#A8DBA8,#74B474); 
	color: #3B8686;
}
.lt-ie10 .ruban-thumbnail-wrapper .ruban.difficulte.debutant { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8dba8', endColorstr='#74b474',GradientType=0 ); }
.ruban-thumbnail-wrapper .ruban.difficulte.intermediaire { 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D0E0EB), color-stop(100%,#AFD2EB));
	background: -webkit-linear-gradient(top, #D0E0EB 0%,#AFD2EB 100%);
	background: linear-gradient(#D0E0EB,#AFD2EB); color: #49708A;
}
.lt-ie10 .ruban-thumbnail-wrapper .ruban.difficulte.intermediaire { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e0eb', endColorstr='#afd2eb',GradientType=0 ); }
.ruban-thumbnail-wrapper .ruban.difficulte.avance { 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFA4A4), color-stop(100%,#E08888));
	background: -webkit-linear-gradient(top, #FFA4A4 0%,#E08888 100%);
	background: linear-gradient(#FFA4A4,#E08888); color:#965959;
}
.lt-ie10 .ruban-thumbnail-wrapper .ruban.difficulte.avance { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa4a4', endColorstr='#e08888',GradientType=0 ); }

.ruban-thumbnail-wrapper .ruban:before, .ruban-thumbnail-wrapper .ruban:after {
  content: "";
  border-top:   3px solid #6B6B6B;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ruban-thumbnail-wrapper .ruban:before { left: 6px; }
.ruban-thumbnail-wrapper .ruban:after { right: 2px; }

.btn {
	display: inline-block;
	font-family: Roboto, sans-serif;
	padding: 4px 10px 4px;
	margin-bottom: 0;
	font-size: 90%;
	color: #FCFCFC;
	text-align: center;
	vertical-align: middle;
	background: #4889C2;
	border-radius: 3px;
	box-shadow: 0 2px 0 #255177;
	cursor: pointer;
	border:0;
	-webkit-transition: all ease-in-out 0.5s;
	transition: all ease-in-out 0.5s;
}
.btn.flat{border-radius:0;box-shadow:0;}
.btn:hover { text-decoration: none; background: #5c96c9; color: #FCFCFC; -webkit-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s; }
.btn:active { background: #569DDB; box-shadow: inset 0 2px 1px #3B86C7; -webkit-transition: all ease-in-out 0.1s; transition: all ease-in-out 0.1s; }
.btn.active{background: #569DDB;box-shadow: inset 0px 2px 0px rgba(0,0,0,.2);}
.btn.flat:active { box-shadow: 0; }
.btn.carrot{background:#e67e22;box-shadow:0 2px 0 #d35400;}
.btn.carrot:hover{background:#F88723;}
.btn.red{background:#e74c3c;box-shadow:0 2px 0 #c0392b;}
.btn.red:hover{background:#F85645;}
.btn.green{background:#2ecc71;box-shadow:0 2px 0 #27ae60;}
.btn.green:hover{background:#30E07B;}

.btn.mini{padding: 2px 5px 2px; font-size:70%;}

#overlay {
    background:rgba(0,0,0,0.5);
    display:none;
    width:100%; height:100%;
    position:fixed; top:0; left:0; z-index:99998;
}
.exposed{position:relative;z-index:99999 !important;}

/*ANIMATIONS*/
.csstransitions .animation.slidein{
	position:relative;
	opacity:0;
	-webkit-animation:slideIn 1s;
	animation:slideIn 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode:forwards;
}
.animation.slidein.first{
	-webkit-animation-delay:1s;
	animation-delay:1s;
}
.animation.slidein.second{
	-webkit-animation-delay:2s;
	animation-delay:2s;
}
.animation.slidein.third{
	-webkit-animation-delay:3s;
	animation-delay:3s;
}
.animation.slidein.fourth{
	-webkit-animation-delay:4s;
	animation-delay:4s;
}
@-webkit-keyframes slideIn {
	from{opacity:0;bottom:-50px;}
	to{opacity:1;bottom:0;}
}
@keyframes slideIn {
	from{opacity:0;bottom:-50px;}
	to{opacity:1;bottom:0;}
}

/*---------------FILTRES---------------------*/
#Grid .mix,.liste .mix{
	opacity: 0;
	display: none;
}
.filter-container{position:relative;background:#ecf0f1;padding:0 2.5em;border-radius:3px;color:#7f8c8d;min-height:2.5em;line-height:2.5em;margin-bottom:1.5em;}
.filter-container:before{
	font-family: FontAwesome;
	content:'\f0b0';
	font-size: 1.4em;
	position:absolute;
	left:0.5em;
	color:#bdc3c7;
}
.filter-container .filter-area{display:inline-block;border-right:2px solid #fcfcfc;padding:0 0.2em;}
.filter-container .filter-area:last-child{border-right:none;}
.filter-container .filter-area span.sort{
	position:relative;
	top:5px;
	width:20px;
	height:20px;
	display:inline-block;
	cursor:pointer;
	-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;
}
.filter-container .filter-area span:hover:not(.btn){border-radius:3px;background:#bdc3c7;}
.filter-container .filter-area span.sort:after{
	content:"";
	position:absolute;
	top:5px;left:5px;
	width: 0;height: 0;
	border-style: solid;							
}
.filter-container .filter-area span.sort.asc:after{
	border-width: 0 5px 10px 5px;
	border-color: transparent transparent #7f8c8d transparent;
}
.filter-container .filter-area span.sort.asc:hover:after,.filter-container .filter-area span.sort.asc.active:after{border-color: transparent transparent #3498db transparent;}
.filter-container .filter-area span.sort.desc:after{
	border-width: 10px 5px 0 5px;
	border-color: #7f8c8d transparent transparent transparent;
}
.filter-container .filter-area span.sort.desc:hover:after,.filter-container .filter-area span.sort.desc.active:after{border-color: #3498db transparent transparent transparent;}
.filter-container .filter-area span.filter{padding:.2em .4em;cursor:pointer;}
.filter-container .filter-area span.btn{display:inline;vertical-align:0;padding:.3em .4em;}
.filter-container .filter-area span.filter:hover:not(.btn){color:#3498db;-webkit-transition:all ease-in-out 1s;transition:all ease-in-out 1s;}
.filter-container .filter-area span.filter.active:not(.btn){color:#3498db;background:#bdc3c7;border-radius:3px;font-weight:bold;}
@media only screen and (max-width:321px){
	.filter-container .filter-area{border-right:none;}
}

/*-------------------------------------------------
--------------------GLOBAL-------------------------
---------------------------------------------------*/
#global {
	z-index: 1;
	margin: 5em auto;
	margin-bottom:1em;
	background: #FCFCFC;
	padding: 0 1em;
	border-radius: 3px;
	box-shadow: 0 2px 0 #999;
	overflow:hidden;
}
.no-boxshadow #global { border: 1px solid #EEE; }

/*---------
	MAJ 15/05/2015 : On va décaler le #global lorsque l'utilisateur est connecté à Wordpress car on a décalé la barre de navigation vers le bas
	pour empêcher son chevauchement avec celle de WordPress.
-----------*/
body.admin-bar #global { margin: 8em auto; }

/*-------------------------------------------------
--------------------HEADER-------------------------
---------------------------------------------------*/
#header {margin-bottom: 1em;padding-top:0.2em;}
#header a { font-family: "futura_lt_btlight", "Myriad", Arial; color: black; }
#header a:hover { text-decoration: none; color: #1D62B3; }

#header #logo {
	height: 100px;
	line-height: 100px;
	overflow:hidden;
}

#header #logo a {
	font-size: 2em;
	font-family: "futura_lt_btlight", Roboto, sans-serif;
	text-transform: uppercase;
	letter-spacing: -1px;
	color: #2c3e50;
	font-weight: 100;
	position:relative;
	z-index:9;
	-webkit-animation:logoAnim 3s;
	-webkit-animation-delay: 2s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-fill-mode: forwards;
	animation:logoAnim 3s;
	animation-delay:2s;
	animation-timing-function:ease-out;
	animation-fill-mode:forwards;
}
.csstransitions #header #logo a{left:-100px;opacity:0;}
#header #logo img{vertical-align:top;position:relative;z-index:10;}

@keyframes logoAnim{
	from{opacity:0;left:-100px;}
	to{opacity:1;left:0;}
}
@-webkit-keyframes logoAnim{
	from{opacity:0;left:-100px;}
	to{opacity:1;left:0;}
}

#header #search {
	padding-left: 10px;
	width: 150px;
}

#header #searchform {
	padding-top: 15px;
}

#header #searchform #s {
	height: 20px;
	font-size: 12px;
	width: 115px;
	margin: 0;
	padding-left: 5px;
	border-radius: 3px;
}
#header #searchform #s:focus { box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1); }

#searchform .row.collapse{
	width:auto;min-width:auto;
}
#searchform #searchsubmit {
	width: 30px;
	border: none;
	background: #3498db url('https://www.tutoriel-video.com/wp-content/themes/tutoriel-video-v2-2/images/search-white.png') no-repeat center center;
	text-indent: -999em;
	-webkit-box-shadow: none;
	box-shadow: none;
	border-width: 0;
}
#searchform #searchsubmit:hover{background:#2980b9 url('https://www.tutoriel-video.com/wp-content/themes/tutoriel-video-v2-2/images/search-white.png') no-repeat center center;}
/*TOP-BAR*/
nav ul{padding-left:0;}
.top-bar {
   height: 60px;
  line-height: 60px;
  position: relative;
  background: #34495e;
}
.top-bar .title-area{padding-left:0;}
.top-bar .name {
	height: 60px;
	font-size: 14px;
}
.top-bar .name h1, .top-bar .name span {
	line-height: 60px;
	font-size: 0.9em;
	margin: 0;
	text-transform:uppercase;
	font-family:"futura_lt_btlight",Roboto,sans-serif;
	font-weight:100;
	letter-spacing:-1px;
 }
.top-bar .name h1 a,.top-bar .name span a{color: #FCFCFC;min-width:14em;padding:0 0 0 5px;}
.top-bar .name img{vertical-align:-10px;margin-right:1px;}
.top-bar .toggle-topbar a {
	color: #FCFCFC;
	height: 60px;
	line-height: 60px; 
}
.top-bar.expanded .title-area{background: #34495e;}
.top-bar-section .right{padding-left:0;}
.top-bar-section ul{background: #34495e;}
.top-bar-section ul li > a {
	font-size: .8em;
	background: #34495e; 
}
.expanded .top-bar-section ul li > a {
	height:45px;
	line-height:45px;
	padding:5px 0 5px 15px;
	border-top:1px solid #57738F;
}

@media only screen and (min-width: 76.750em) {
	.top-bar {background: #34495e;}
    .top-bar-section li a:not(.button) {
		padding: 0 15px;
		line-height: 60px;
		background: #34495e; 
	}
	.top-bar-section li a:not(.button):hover {
		background:#60808F;-webkit-transition: all ease-in-out 0.5s;transition: all ease-in-out 0.5s; 
	}
    .top-bar-section .has-dropdown > a:after {
		top: 29px; 
	}
	.top-bar-section .dropdown li a {
		color: #FCFCFC;
		padding: 8px 15px;
		line-height:35px;
		background: #3D5166;
		border-bottom: 1px solid rgba(252,252,252,.2);
	}
	.top-bar input, .top-bar .button{
		top:17px;
	}
}
#sticky-navigation{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	z-index: 99;
	opacity: 0.9;
	color: #FCFCFC;
}
#sticky-navigation a:hover{text-decoration:none;}
#sticky-navigation .blue{color:#63B4E3;}

/*-----------
	MAJ 15/05/2015 : on va décaler la barre de navigation pour empêcher le chevauchement de la barre d'admin de Wordpress quand un utilisateur
	est connecté.
-------------*/
body.admin-bar #sticky-navigation { margin-top: 32px; }

#sub-header{
	background: #34495e;
	color: #FCFCFC;
	padding: 0.5em 1em;
	margin-top: 0.3em;
	width: 135%;
	max-width:62.5em;
	margin-left: -1em;
	opacity: 0.9;
	box-shadow: 0 2px 0 #2c3e50;
}

@media screen and (max-width: 600px) {
	#header {height:auto;}
	#header #logo a {display:none;}
	#header #search {padding-left:0;width:100%;margin-bottom:1em;}
	#header #searchform #s {height:2.5em;width:80%;}
}

/*-------------------------------------------------
--------------------FOOTER-------------------------
---------------------------------------------------*/
#footer {
	color: #303030;
	margin: 3em 0 1em 0;
	font-size: 80%;
	border-radius: 3px;
	background: #ecf0f1;
	box-shadow: 0 2px 0 #bdc3c7;
}

#footer span.footer-title {
	display:block;
	color: #303030;
	font-size: 1.5em;
	margin-bottom: 0.5em;
	letter-spacing: 0;
	padding-left: 5px;
	font-weight: 100;
	font-family:"futura_lt_btlight",Roboto,sans-serif;
	line-height:1em;
	text-transform:uppercase;
	text-align:center;
}

#footer p {
	margin-bottom: 0.5em;
	text-align: justify;
	padding: 0 5px;
}

#footer a {
	color: #666;
	text-decoration: underline;
}

#footer a:hover {
	text-decoration: none;
	color: #007ACE;
}

#footer div {
	padding: 10px 0;
}

#footer ul {
	margin: 0;
	padding: 0 0 0 15px;
	width: 135px;
}

@media only screen and (max-width:768px){
	#footer ul{width:50%;}
}

/*-------------------------------------------------
--------------------ACCUEIL------------------------
---------------------------------------------------*/
#site-presentation{
	position:relative;
	background:#2980b9;
	box-shadow:0 2px 0 #34495e;
	color:#FCFCFC;
	border-radius:3px;
	min-height:12em;
	overflow:hidden;
	margin-bottom:2em;
}
#site-presentation .description-tabs{padding:0;}
#site-presentation .description-tabs .description-text h2{
	color: #FCFCFC;
	font-size: 1.9em;
	text-align: center;
	line-height:1.2em;
	margin-bottom:0.5em;
	-webkit-transform: translateY(-10em);
	-ms-transform:translateY(-10em);
	transform: translateY(-10em);
	opacity: 0;
	-webkit-transition: all 1s;transition: all 1s;
}
#site-presentation .description-tabs .description-text.active h2{
	-webkit-transform: translateY(0);
	-ms-transform:translateY(0);
	transform: translateY(0);
	opacity: 1;
	-webkit-transition: all 1s;transition: all 1s;
}
#site-presentation .description-tabs .description-text {
	position: relative;
	z-index: 0;
	overflow:hidden;
	height:0;
	padding:0;
	opacity:0;
}
#site-presentation .description-tabs .description-text.active{
	height: auto;
	min-height: 10em;
	opacity:1;
	-webkit-transition:all 1s;transition:all 1s;
}
#site-presentation .description-tabs .description-text:before{
	position:absolute;
	font-family:FontAwesome;
	top:0;
	left:-5em;
	color:#FCFCFC;
	opacity:0;
	z-index:-1;
}
#site-presentation .description-tabs .description-text.active:before{left:0;opacity:0.1;-webkit-transition:all 1s;transition:all 1s;}

#site-presentation .description-tabs .formation-gratuite:before{content: "\f109";font-size: 10em;}
#site-presentation .description-tabs .communaute:before{content:"\f0c0";font-size:8em;top:10px;}
#site-presentation .description-tabs .site-connu:before{content:"\f0ac";font-size:9em;}
#site-presentation .description-tabs .videos-qualite:before{content:"\f03d";font-size:8em;}

#site-presentation .description-tabs .description-text .description{
	font-weight:lighter;
	opacity:0;
	-webkit-transform: translateY(10em);
	-ms-transform:translateY(10em);
	transform:translateY(10em);
}
#site-presentation .description-tabs .description-text.active .description{
	-webkit-transform: translateY(0);
	-ms-transform:translateY(0);
	transform:translateY(0);
	opacity:1;
	-webkit-transition: all 1s;transition:all 1s;
}

#site-presentation .btn{position:absolute;left:1em;bottom:1em;padding:1em;font-size:1em;}

#index-formations{margin-bottom:2em;}
#index-formations h2,#index-top-tutoriels h2,#index-derniers-tutoriels h2 {text-align:center;margin-top:0;}

#index-top-tutoriels .link-more,#index-derniers-tutoriels .link-more{text-align:center;}
#index-top-tutoriels .link-more .btn,#index-derniers-tutoriels .link-more .btn{padding:1em 1em 1em 3em;font-size:1em;position:relative;}
#index-top-tutoriels .link-more .btn:before,#index-derniers-tutoriels .link-more .btn:before{
	font-family: FontAwesome;
	position:absolute;
	left:0.3em;
	top:0;
	font-size:2em;
	display:block;
	height:1.8em;
	line-height:1.8em;
}
#index-top-tutoriels .link-more .btn:before{content:"\f080";}
#index-derniers-tutoriels .link-more .btn:before{content:"\f073";}

hr.index-separator {
	margin-bottom: 20px;
	border: 0;
	height: 2px;
	background: #EEE;
}

.index-subheader{
	position:relative;
	text-align:center;
	color:#666;
	font-weight:lighter;
}

@media only screen and (max-width:320px){
	#site-presentation{min-height:22em;}
}

@media only screen and (max-width:480px){
	#site-presentation{min-height:17em;}
}

/*-------------------------------------------------
--------------------POSTS--------------------------
---------------------------------------------------*/

/*----------------------TITRE-------------------------*/
#tutoriel-title-container {
	position: relative;
	background: #3498db;
	margin:1.5em 0;
	border-radius: 3px;
	min-height: 7em;
	overflow:hidden;
}
#tutoriel-title-container:before {
	font-family: FontAwesome;
	content: "\f008";
	color: #FCFCFC;
	font-size: 7em;
	position: absolute;
	top: 0;
	left: 0.1em;
	opacity: 0.2;
}
#tutoriel-title {
	padding-top:1%;
	padding-left:0;
	padding-right:0;
}
.conteneur-tutoriel h1 {
	color: #FCFCFC;
	text-shadow: none;
	font-size: 32px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: -1px;
	font-family: "futura_lt_btlight";
	line-height: 1em;
	font-weight: 100;
	margin: 0;
}
@media screen and (max-width: 600px) {
	#tutoriel-title {float:none;width:98%;} 
	.conteneur-tutoriel h2 {font-size:1em;}
}

/*----------------------DETAILS-----------------------*/
#tutoriel-details {
	min-height: 8em;
	padding-top: 0.3em;
	border-left: 1px solid #FCFCFC;
}
#tutoriel-details ul {list-style: none;margin:0;padding:0;}
#tutoriel-details ul li {color: #FCFCFC;}
#tutoriel-details ul li a {color: #FCFCFC;text-decoration:underline;}
#tutoriel-details ul li i {margin-right: 0.5em;display:inline-block;width:15px;}
#tutoriel-details ul li .titre-detail-tutoriel {font-weight:100;}
#details-tutoriel {
	margin-bottom: 20px;
	font-size: 95%;
	width: 945px;
	color: #606060;
	height: 30px;
	line-height: 30px;
	text-align: center;
}

#details-tutoriel .titre-detail-tutoriel { font-weight: bold; }
#details-tutoriel .valeur-detail-tutoriel { color: #007ACE; }
#details-tutoriel .separateur { color: #999999; }
@media screen and (max-width: 600px) {
	#details-tutoriel {margin-bottom:2em;font-size: 95%;width: 95%;padding: 2.5%;line-height:1.5em;}
}

#news h2 { margin-bottom: 0; }
#news small { display: block; margin-bottom: 20px; }

.conteneur-tutoriel #tags {
	position:relative;
	font-size: 80%;
	min-height: 4em;
	font-weight: bold;
	text-align: center;
	background: #ecf0f1;
	background: -webkit-linear-gradient(#E8EDEE,#ecf0f1);
	background: linear-gradient(#E8EDEE,#ecf0f1);
	box-shadow: 0 2px 0 #bdc3c7;
	border-radius: 3px;
	padding: 1em;
	position: relative;
	z-index: 0;
	display: none;
}
.conteneur-tutoriel #tags:before{
	position:absolute;
	content:"\F02C";
	font-family: FontAwesome;
	top:0;
	left:0.3em;
	font-size:3em;
	opacity:0.2;
	z-index: -1;
}
#conteneur-video-html5{padding-left:0;}
/*----------------------VIDEO-------------------------*/
.vjs-default-skin{color:#FCFCFC !important;}
.vjs-default-skin .vjs-big-play-button{border-radius:3px !important;border:0 !important;background:#3498db !important;background:rgba(52,152,219,.9) !important;box-shadow:0 2px #2980b9 !important;width:3.5em !important;height:2.2em !important;}
.vjs-default-skin:hover .vjs-big-play-button,.vjs-default-skin .vjs-big-play-button:focus{background:#3498db !important;background:rgba(52,152,219,.9) !important;box-shadow:0 0 1em #2980b9 !important;}
.vjs-default-skin .vjs-big-play-button:before{text-shadow:none !important;color:#FCFCFC !important;line-height:2.2em !important;}
.vjs-default-skin .vjs-control-bar{background:#2980b9 !important;background:rgba(41,128,185,.9) !important;}
.vjs-default-skin .vjs-control:before{text-shadow:none !important;color:#FCFCFC !important;}
.vjs-default-skin .vjs-volume-level,.vjs-default-skin .vjs-play-progress{background:#2ecc71 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;}
.vjs-default-skin .vjs-slider{background:#7f8c8d !important;}
.vjs-loading-spinner{font-size:6em !important;}
.vjs-default-skin .vjs-loading-spinner:before{text-shadow:none !important;color:#3498db !important;}
#conteneur-video-html5 #video .vjs-poster { -moz-background-size: cover !important; background-size: cover !important; }
.video-js .vjs-captions{color:#fcfcfc !important;padding:.3em !important;background-color:rgba(0,0,0,.6) !important;display:inline-block !important;}

.videocontent{width:100%;max-width:539px;}
.video-js {padding-top: 56.25%;}
.vjs-fullscreen {padding-top:0;}

@media screen and (max-width: 767px) {
	.videocontent{max-width:695px;}
	#tutoriel-title{padding-top:1em;}
	#tutoriel-details {margin-left:0;margin-top:1em;padding-top:1em;padding-bottom:1em;border-left:none;border-top:1px solid #FCFCFC;}
}

/*----------------------PUBLICITE-----------------------*/

.conteneur-tutoriel .conteneur-publicite, #news .conteneur-publicite {
	position: relative;
	background: #FCFCFC;
	border-top: 1px dotted #CCCCCC;
	border-bottom: 1px dotted #CCCCCC;
	padding: 5px 0;
	margin-bottom: 20px;
}

.conteneur-tutoriel .header-publicite, #news .header-publicite {
	position: absolute;
	top: 5px;
	left: 5px;
	font-weight: bold;
	font-size: medium;
	color: #8D8D8D;
	line-height: normal;
	display: none;
}

.conteneur-tutoriel .publicite, #news .publicite {
	width: 729px;
	height: 90px;
	margin: auto;
}

.conteneur-tutoriel .conteneur-publicite-banniere {
	position: relative;
	background: #FCFCFC;
	border-top: 1px dotted #CCCCCC;
	border-bottom: 1px dotted #CCCCCC;
	padding: 5px 0;
	margin-top: 10px;
}
.conteneur-tutoriel .conteneur-publicite-banniere .publicite-banniere{text-align:center;}
/*----------------------TUTORIEL SIDE-----------------------*/
#tutoriel-side{padding-right:0;padding-left:0;}
.btn.tutoriel-side{margin:0.5em 0;font-size:1.4em;padding:0.5em 0.5em 0.5em 0.2em;text-transform:uppercase;font-weight:bolder;position:relative;text-align:center;}
.btn.tutoriel-side img{float:left;}
.btn.tutoriel-side i{overflow:hidden;}
.btn.tutoriel-side i span{display:none;}
#related-posts-overlay-popup{
	display:none;
	position:absolute;
	top: 275px;
	right: 110%;
	z-index:99999;
	border-radius:3px;
	background:#FCFCFC;
	width: 35em;
	padding:0.5em;
}
#related-posts-overlay-popup:before{
	content:"\F02D";
	font-family:FontAwesome;
	position:absolute;
	top: 5px;
	left:5px;
	font-size:4em;
	opacity:0.1;
	z-index:-1;
}
#related-posts-overlay-popup:after{
	content: "";
	position: absolute;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 12.5px 0 12.5px 25px;
	border-color: transparent transparent transparent #fcfcfc;
	right: -25px;
	top: 16%;
}
#related-posts-overlay-popup p.big{
	font-size: 2em;
	text-align: center;
	text-transform: uppercase;
	font-weight: bolder;
	color:#606060;
}
#related-posts-overlay-popup p{margin-bottom:0.5em;}

/*----------------------RELATED POSTS-----------------------*/

.wp_rp_wrap { clear: both; }
div.wp_rp_content { display: block !important; }
div.wp_rp_footer { text-align: right !important; overflow: hidden !important; }
div.wp_rp_footer a {
	color: #999 !important;
	font-size: 11px !important;
	text-decoration: none !important;
	display: inline-block !important;
}
div.wp_rp_footer a.wp_rp_edit {
	color: #fff !important;
	font-size: 12px !important;
	text-decoration: underline !important;
	font-weight: bold !important;
	background: #f79124 !important;
	border-radius: 2px !important;
	padding: 3px 6px;
}

ul.related_post li a {
	position: relative !important;
	text-decoration:none;
	text-indent: 0 !important;
}

ul.related_post li a img {
	width: 60px;
	height: 60px;
	float: left !important;
	margin: 0 10px 0 0 !important;
	padding: 0 !important;
	max-width: 100% !important;
	float: none !important;
}

ul.related_post li a img.wp_rp_santa_hat { display: none !important; }
ul.related_post li a.title { vertical-align: top !important; }

/* override old CSS for new plugin version with CSS classes */
ul.related_post li a.wp_rp_thumbnail { 
	float: left !important;
	margin-right: 10px !important;
}
ul.related_post li a.wp_rp_thumbnail img {
	float: none !important;
	margin-right: 0 !important;
	display: block !important;
}

.conteneur-tutoriel .related_post_title {
	font-family: "futura_lt_btlight", Roboto, sans-serif;
	text-transform: uppercase;
	font-weight: 100;
	letter-spacing: -1px;
	font-size: 1.3em;
	border-bottom: none;
	margin-bottom: 0.5em !important;
	margin-top: 0.5em;
	line-height: 1.2;
	color: #606060;
	text-shadow: none;
	text-align: left;
	font-variant: normal;
	padding-bottom: 0;
	background: none !important;
	clear: both;
	border:none !important;
}

.conteneur-tutoriel ul.related_post {
	list-style: none;
	padding: 0;
	margin: 0 0 1em 0;
}
.conteneur-tutoriel ul.related_post li{margin-bottom:1em;}
.conteneur-tutoriel ul.related_post li:last-child{margin-bottom:0;}
.conteneur-tutoriel ul.related_post li .wp_rp_thumbnail{display:none;}
.conteneur-tutoriel ul.related_post li .wp_rp_title{
	position:relative;
	z-index:0;
	display:inline-block;
	width: 100%;
	text-align:center;
	color:#FCFCFC;
	background:#2ecc71;
	box-shadow:0 2px 0 #27ae60;
	padding:0.7em;
	font-size:1.2em;
	min-height:3em;
	line-height:1.1em;
	border-radius:3px;
	overflow:hidden;
	-webkit-transition:all ease-in-out 1s;transition:all ease-in-out 1s;
}
.conteneur-tutoriel ul.related_post li .wp_rp_title:hover{background:#30E07B;-webkit-transition:all ease-in-out 1s;transition:all ease-in-out 1s;}
.conteneur-tutoriel ul.related_post li .wp_rp_title:before{
	position:absolute;
	content:"\F0C1";
	font-family: FontAwesome;
	left:0;
	top:0;
	color:#FCFCFC;
	opacity:0.2;
	z-index:-1;
	font-size:3em;
	text-align:left;
	line-height:1.2em;
	padding-left:0.1em;
}
.conteneur-tutoriel ul.related_post li .details{display:none;}

@media only screen and (max-width: 600px) {
	.conteneur-tutoriel #related-posts {padding-left:0;width:100%;}
}

/*----------------------DESCRIPTION-----------------------*/

.conteneur-tutoriel #description {
	text-align: justify;
	margin: 1em 0 0 0;
	color: #303030;
}
#description-content:before,#description-test-connaissances:before,#description-transcription:before {
	font-family: FontAwesome;
	content: "\F040";
	position: absolute;
	font-size: 6em;
	opacity: 0.2;
	color: #999;
	z-index: -1;
}
#description-test-connaissances:before{content:"\F02D";}
.conteneur-tutoriel #description-content,.conteneur-tutoriel #description-test-connaissances,.conteneur-tutoriel #description-transcription {
	position: relative;
	z-index: 0;
	padding: 1em;
	min-height: 120px;
	font-size: 95%;
	background: #ecf0f1;
	background: -webkit-linear-gradient(#E8EDEE,#ecf0f1);
	background: linear-gradient(#E8EDEE,#ecf0f1);
	border-radius: 3px;
	margin-bottom: 1em;
}
#description-content p:last-child {margin-bottom:0;}
.conteneur-tutoriel #description-content ul { margin-bottom: 1.5em; }
.conteneur-tutoriel #description-content h2,.conteneur-tutoriel #description-test-connaissances h2,.conteneur-tutoriel #description-transcription h2{ 
	font-size: 1.5em;
	border: 0;
	margin-bottom: 0.5em;
	font-family: "futura_lt_btlight";
	text-transform: uppercase;
	letter-spacing: -1px;
	font-weight: 100;
	text-align:left;
}

.conteneur-tutoriel #description-content .author {
	position: relative;
	font-weight: bold;
	margin: 0 0 0.5em 0;
	border-bottom: 1px solid #bdc3c7;
}

.conteneur-tutoriel #description-content .author .views {
	position: absolute;
	right: 0;
	font-style: italic;
	color: #999;
}
#description-content p {margin-bottom:1em;}
#description-test-connaissances p{font-weight:lighter;margin-bottom:1em;line-height:1.3;}
#description-test-connaissances p.center{margin-bottom:0;}
#description-test-connaissances .btn{padding:.5em;}
.conteneur-tutoriel #description-header {
	font-size: 80%;
	margin-bottom: 1em;
}
#sociable-container {
	min-height: 6em;
	margin-bottom: 0;
	background: #ecf0f1;
	background: -webkit-linear-gradient(#E8EDEE,#ecf0f1);
	background: linear-gradient(#E8EDEE,#ecf0f1);
	border-radius: 3px;
	padding: 1em;
	position: relative;
	z-index: 0;
}
#sociable-container:before {
	font-family: FontAwesome;
	content: "\f14d";
	color: #999;
	opacity: 0.2;
	position: absolute;
	font-size: 6em;
	z-index: -1;
	top: 0;
}
#sociable-container h2{
	padding: 0;
	border: 0;
	font-size: 1.8em;
	margin-bottom: 0.5em;
	font-family: "futura_lt_btlight";
	text-transform: uppercase;
	letter-spacing: -1px;
	font-weight: 100;
	text-align:left;
}
#sociable-container ul {list-style:none;margin:0;padding:0;float:left;}
#sociable-container ul li{float:left;margin-right:5px;}
#sociable-container a {
	display: block;
	width: 32px;
	height: 32px;
	background: url('https://www.tutoriel-video.com/wp-content/themes/tutoriel-video-v2-2/images/flat-social-icons-sprite.png') 0 0 no-repeat;
	text-indent: -5000px;
}
#sociable-container #facebook-sharing { background-position: 0 0; }
#sociable-container #twitter-sharing { background-position: -96px 0; }
#sociable-container #gmail-sharing { background-position: -32px 0; }
#sociable-container #linkedin-sharing { background-position: -64px 0; }
#sociable-container #pinterest-sharing {background-position: -128px 0;}
#sociable-container #email-sharing { background-position: -160px 0; }

#news .entry {
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	padding: 5px;
	background: #EEEEEE;
	font-size: 90%;
	margin-bottom: 20px;
}

/*----------------------RESSOURCES-------------------------*/
#description-ressources {
	background: #ecf0f1;
	background: linear-gradient(#E8EDEE,#ecf0f1);
	border-radius: 3px;
	padding: 1em;
	position: relative;
	z-index: 0;
	margin-bottom: 2em;
}
#description-ressources:before {
	font-family: FontAwesome;
	content: "\F01A";
	font-size: 6em;
	opacity: 0.2;
	position: absolute;
	top: 0;
	z-index: -1;
	color: #999;
}
#description-ressources h2{
	font-size: 1.5em;
	border: 0;
	margin-bottom: 0.5em;
	font-family: "futura_lt_btlight";
	text-transform: uppercase;
	letter-spacing: -1px;
	font-weight: 100;
	text-align:left;
}
#attachments-container p {
	font-size: 95%;
	margin: 0 0 0.5em 0;
	border-bottom: 1px solid #bdc3c7;
	font-weight: bold;
}
#attachments-container ul {list-style:none;padding:0;margin:0;}
#attachments-container ul li { margin-bottom: 0.5em; }
#attachments-container ul li:last-child { margin-bottom: 0; }

@media screen and (max-width: 600px) {
	#description-ressources {margin-bottom:1em;}
} 
@media screen and (max-width: 321px){
	#description-test-connaissances h3,#sociable-container h3,#description-content h3,#description-resources h3{text-align:center;}
}

/*----------------------TRANSCRIPTION----------------------*/
#description-transcription:before{content:"\F130";}
#description-transcription #toggle-transcription a:focus{color:#FCFCFC;}

/*----------------------COMMENTAIRES-----------------------*/
#respond { position: relative; margin-top: 2em; }
#comments {font-size: 1.3em; font-weight: bold;padding-bottom:0.5em;border-bottom:0;}
#respond h2{
	text-align:left;
	border-bottom: 0;
	font-size: 1.6em;
	color: #606060;
	font-family: "futura_lt_btlight", Roboto, sans-serif;
	font-weight: 100;
	text-transform: uppercase;
}

#respond #comment {
	height: 10em;border-radius: 3px;
}

#respond .loggedin-as { margin-bottom: 1em; }
#respond #commentform{
	width:50%;
	margin:0 auto;
	background: #ecf0f1;
	background: linear-gradient(#E8EDEE,#ecf0f1);
	box-shadow: 0 2px 0 #bdc3c7;
	border-radius: 3px;
	padding: 1em;
	position: relative;
	z-index: 0;
}
#respond #commentform label {font-weight:bold;}

#respond #commentform input[type="text"] {
	height: 2em;
	border-radius: 3px;
}

#respond #commentform p {margin:0.5em 0;}
#respond #commentform #submit-container { text-align: right; margin-top: 0; margin-right: 0; }
#respond #commentform #submit-container .btn{margin:0;}

#comments {
	border-top: 1px solid #ecf0f1;
	padding: 1.5em 0;
	margin-top: 1.5em;
	margin-bottom: 0;
	padding-bottom:0.5em;
}
#reach-commentform{margin-bottom:2em;}

.commentlist {
	margin-right: 0;
	margin-bottom: 10px;
	list-style: none;
	padding-left: 0;
}

.comment, .pingback { 
	background: #ECECEC;
	box-shadow: 0 2px 0 #DADADA;
	border-radius: 3px;
	padding: 0.5em;
	color: #333;
	margin-bottom: 1em;
}
.comment-body p { margin: 0; }
.comment a{color:#666;text-decoration:underline;}

.comment-author {
	height: 32px;
	line-height: 32px;
	position: relative;
}

.fn {
	height: 32px;
	line-height: 32px;
	font-style:normal;
	font-size:1em !important;
}

.pingback .fn { left: 0; }
.says{font-weight:lighter;color:#333;}

.comment-meta {
	font-size: smaller;
	padding: 5px 0;
}

.comment-information {
	padding: 0.5em;
	padding-left: 4.5em;
	width:80%;
	margin:0 auto;
	margin-bottom: 2em;
	font-weight: bold;
	text-align: justify;
	font-size: 90%;
	background: #e74c3c;
	box-shadow: 0 2px 0 #c0392b;
	border-radius: 3px;
	color: #FCFCFC;
	position: relative;
	z-index: 0;
	min-height:5em;
}
.comment-information:before {
	font-family: FontAwesome;
	content: "\F071";
	position: absolute;
	top: 0;
	left: 5px;
	font-size: 4em;
	opacity: 0.2;
	z-index: -1;
	color: #FCFCFC;
	width: 4em;
	height: 1.4em;
	line-height: 1.4em;
}
.comment-information a{color:#ecf0f1;}
.subscribe-label { width: 90% !important; }
.vcard{margin:0;padding:0;border:0;}
#respond #commentform p.comment-subscription-form{
	margin:0;
}

@media only screen and (max-width:768px) {
	#respond #commentform{width:100%;}
	.comment-information{width:100%;}
}

/*----------------------META NEWS-----------------------*/
#news #meta {
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	background: #EEEEEE;
	padding: 5px;
	width: 300px;
	font-size: 90%;
}

/*-------------------------------------------------
--------------------ARCHIVE------------------------
---------------------------------------------------*/
.conteneur-archives h2 {
	text-align: center;
	margin-bottom: 1.5em;
}

/*------------------POST ET ACTUALITES-------------*/
.conteneur-archives .post,.conteneur-actualites .post{
	background:#ecf0f1;
	border-radius:3px;
	box-shadow: 0 2px 0 #bdc3c7;
	padding:0.5em;
	margin-bottom:2em;
}
.conteneur-archives .post:last-child,.conteneur-actualites .post:last-child{
	margin-bottom:0;
}
.conteneur-archives .post h3, .conteneur-actualites .post h3 {
	text-align:center;
	font-size: 1.5em;
	line-height:1.2em;
	font-family: "futura_lt_btlight",Roboto,sans-serif;
	text-transform: uppercase;
	font-weight: 100;
	margin: 0;
	padding-bottom: 0;
	padding-top:0.5em;
	border: none;
}
.conteneur-archives .post h3 a,.conteneur-actualites .post h3 a{color:#606060;}

.conteneur-archives .details{
	font-size:0.9em;
	padding:0.5em;
	text-align:center;
	background:#2980b9;
	color:#FCFCFC;
	margin:1em 0;
}

.conteneur-archives .post .titre-details { font-weight: bold; }
.conteneur-archives .post .valeur-details { font-style: italic; color: #FCFCFC; }
.conteneur-archives .post .details a {color:#FCFCFC;}
.conteneur-archives .post .screenshot {
	position: relative;
	float: left;
	margin-right: 1em;
	border: 5px solid #FCFCFC;
	border-radius: 3px;
	box-shadow: 0 2px 0 rgba(0,0,0,.2);
}
.conteneur-archives .post .screenshot:after {
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background: rgba(0,0,0,0.1);
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: all ease-in-out 0.5s;transition: all ease-in-out 0.5s;
}
.conteneur-archives .post:hover .screenshot:after{
	background: transparent;
	-webkit-transition: all ease-in-out 0.5s;transition: all ease-in-out 0.5s;
}
.conteneur-archives .post .screenshot.small{
	margin-bottom: 1em;
}

.conteneur-archives .post .entry, .conteneur-actualites .post .entry {
	font-size: 0.9em;
	padding: 0 0.5em 0 0;
}

.conteneur-archives .post .entry p, .conteneur-actualites .post .entry p { line-height: normal; text-align: justify; }

.conteneur-archives .post .postmetadata, .conteneur-actualites .post .postmetadata {
	font-size: 0.9em;
	background:#2980b9;
	margin-top: 0.5em;
	margin-bottom:0;
	padding:0.5em;
	color:#FCFCFC;
}
.conteneur-archives .post .postmetadata a,.conteneur-actualites .post .postmetadata a{color:#FCFCFC;font-weight:bold;}

.conteneur-archives .post .postmetadata a[rel="tag"], .conteneur-archives .post .postmetadata a[rel="category tag"],
.conteneur-actualites .post .postmetadata a[rel="tag"], .conteneur-actualites .post .postmetadata a[rel="category tag"] {
	font-style: italic;
}

@media only screen and (max-width:480px) {
	.conteneur-archives .post .screenshot{float:none;display:block;width:310px;margin:1em auto;}
}

/*-------------------------------------------------
ACCUEIL, BUREAUTIQUE, INTERNET, WINDOWS, PROG, 404, LOGICIELS WINDOWS
---------------------------------------------------*/
.conteneur-bureautique h1,.conteneur-internet h1,.conteneur-windows h1,.conteneur-programmation h1,.conteneur-404 h1,.conteneur-logiciels h1{
	font-size: 2.5em;
	text-align: center;
	margin-bottom: 0.5em;
	font-family: "futura_lt_btlight",Roboto,sans-serif;
	color: #606060;
	font-weight: lighter;
	letter-spacing: -1px;
	text-transform: uppercase;
	line-height: 1em;

}
#liste-bureautique,#liste-internet,#liste-windows,#liste-programmation,#liste-404,#liste-accueil,#liste-logiciels-windows {
	margin-top:2em;
	text-align: center;
	list-style: none;
	position: relative;
	z-index: 1;
}
			
#liste-bureautique a,#liste-internet a,#liste-windows a,#liste-programmation a,#liste-404 a,#liste-accueil a,#liste-logiciels-windows a {
	margin: 0 auto;
	padding: 0.2em 0;
	display:block;
	background:#3498db;
	box-shadow: 0 2px 0 #2980b9;
	border-radius:6px;
	color:#FCFCFC;
	text-decoration:none;
	font-size:1.3em;
	line-height:1.1em;
	font-family: "futura_lt_btlight",Roboto,sans-serif;
	text-transform:uppercase;
	font-weight:100;
	-webkit-transition:all ease-in-out 0.5s;transition:all ease-in-out 0.5s;
}
#liste-bureautique a:hover,#liste-internet a:hover,#liste-windows a:hover,#liste-programmation a:hover,#liste-404 a:hover,#liste-accueil a:hover,#liste-logiciels-windows a:hover{background:#39A5EE;-webkit-transition:all ease-in-out 0.5s;transition:all ease-in-out 0.5s;}

#liste-accueil a{min-height:12em;font-size:1em;}
#liste-accueil li a img{margin-bottom:0.2em;}

#liste-bureautique a img,#liste-internet a img,#liste-windows a img,#liste-programmation a img,#liste-404 a img,#liste-accueil a img,#liste-logiciels-windows a img{display:block;margin:auto;}

#liste-bureautique li span,#liste-internet li span,#liste-windows li span,#liste-programmation li span,#liste-404 li span,#liste-accueil li span,#liste-logiciels-windows li span{
	display: block;
	margin-top:1em;
	background: #ecf0f1;
	border-radius: 3px;
	padding: 0.5em;
	color: #666;
	position:relative;
	font-size:0.9em;
}
#liste-bureautique li span:before,#liste-internet li span:before,#liste-windows li span:before,#liste-programmation li span:before,#liste-404 li span:before,#liste-accueil li span:before,#liste-logiciels-windows li span:before{
	position:absolute;
	top:-10px;
	left:50%;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 5px 10px 5px;
	border-color: transparent transparent #ecf0f1 transparent;
}
#liste-internet li i,#liste-windows li i,#liste-programmation li i,#liste-404 li i,#liste-accueil li i,#liste-logiciels-windowws li i{display:block;}
#liste-404 li i.fa-film,#liste-accueil li i.fa-film{font-size:7.15em;}

/*-------------------------------------------------
--------------------INTERNET-----------------------
---------------------------------------------------*/
#liste-internet li i{font-size: 127px;}

/*-------------------------------------------------
--------------------WINDOWS------------------------
---------------------------------------------------*/
#liste-windows li i{font-size: 123px;padding-top: 5px;}

/*-------------------------------------------------
-----------------PROGRAMMATION---------------------
---------------------------------------------------*/
#liste-programmation li i{font-size: 127px;}
#liste-programmation li a,#liste-programmation li span{width:60%;}
#liste-programmation li span{
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (max-width:321px) {
	#liste-programmation li a,#liste-programmation li span{width:100%;}
}

/*-------------------------------------------------
--------------------DETAILS FORMATION--------------
---------------------------------------------------*/
#details-formation-title {
	background: #3498db;
	box-shadow: 0px 2px 0px #2980b9;
	padding: 0.5em;
	border-radius: 3px;
	color: #FCFCFC;
	margin-bottom: 0.5em;
}
#details-formation-title img {float:left;}
.conteneur-details-formation h1 {
	text-align: center;
	font-size: 2.5em;
	margin:0;
	min-height: 65px;
	line-height: 65px;
	margin-left: 70px;
	color: #FCFCFC;
	font-weight: lighter;
	letter-spacing: -1px;
	text-transform: uppercase;
	font-family: "futura_lt_btlight",Roboto,sans-serif;
}

.conteneur-details-formation h2 {
	text-align:center;
	font-size: 1.8em;
	font-weight: normal;
	border-bottom: none;
	padding-bottom: 0;
	margin: 0.5em 0;
	padding-top: 1em;
	border-top: 1px solid #ecf0f1;
	font-family: "futura_lt_btlight",Roboto,sans-serif;
	text-transform: uppercase;
	color: #606060;
}
.conteneur-details-formation h2:first-child{padding-top:0;margin-top:0;border-top:none;}
.conteneur-details-formation .index-subheader:before{content:"\f10d";font-family:FontAwesome;position:absolute;left:0;top:-10px;font-size:2em;opacity:0.2;}

.tutoriel-top img { margin-bottom: 5px; }

.tutoriel-top h4, .tutoriel-top h5 {
	margin: 0 0 5px 0;
	padding-bottom: 5px;
	border-bottom: 1px solid #CCCCCC;
	font-size: 90%;
	font-weight: bold;
}

.tutoriel-top .description {
	font-size: 80%;
	text-align: justify;
}

.tutoriel-top .read-more {
	font-size: 80%;
	text-align: right;
}

@media only screen and (max-width:481px){
	.conteneur-details-formation h2 {line-height:1em;font-size:1.8em;}
}

/*-------------------------------------------------
--------------------RECHERCHE----------------------
---------------------------------------------------*/
.conteneur-recherche h3 {
	border-bottom: 0;
	font-size:1.3em;
	padding-bottom:1em;
	margin: 0;
	font-family: "futura_lt_btlight",Roboto,sans-serif;
	text-transform: uppercase;
	font-weight:normal;
	text-align:center;
}
.conteneur-recherche h3 a{color:#606060;}
.conteneur-recherche .post, .conteneur-recherche .page {
	margin-bottom:2em;
	padding: 1em 0.5em;
	background:#ecf0f1;
	box-shadow:0 2px 0 #bdc3c7;
	border-radius:3px;
}
.conteneur-recherche .post:last-child,.conteneur-recherche .page:last-child{margin-bottom:0;}
.conteneur-recherche .details {
	background:#2980b9;
	padding:0.5em;
	margin-bottom:1.1em;
	color:#FCFCFC;
	font-size:0.9em;
	text-align:center;
	line-height:1.3em;
}
.conteneur-recherche .details a{color:#FCFCFC;}
.conteneur-recherche .titre-details { font-weight: bold; }
.conteneur-recherche .url { text-align: right; }
.conteneur-recherche .corps {font-size: 90%;margin-bottom: 10px;}
.conteneur-recherche .thumbnail{text-align:center;}
.conteneur-recherche .thumbnail:before {
font-family:FontAwesome;
content:"\f144";
font-size:7em;
position:absolute;
top:0;
left:23px;
text-align:center;
display:block;
width:86.5%;
line-height:2;
text-shadow:0 2px 0 #2980b9;
}
.conteneur-recherche .corps img {border:5px solid #FCFCFC;box-shadow:0 2px 0 rgba(0,0,0,.2);border-radius:3px;}
.conteneur-recherche .url a.btn { font-size:1em;padding:1em; }
.conteneur-recherche .page .url { margin-top: 20px; }
.conteneur-recherche .page .extrait { margin-left: 0; }

/*-------------------------------------------------
--------------------LOGICIELS WINDOWS--------------
---------------------------------------------------*/
#liste-logiciels-windows li a,#liste-logiciels-windows li span{width:60%;}
#liste-logiciels-windows li span{
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (max-width:321px) {
	#liste-logiciels-windows li a,#liste-logiciels-windows li span{width:100%;}
}

/*-------------------------------------------------
--------------------SIDE---------------------------
---------------------------------------------------*/
#side {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	background: #FCFCFC;
	border-radius: 3px 0 0 3px;
	box-shadow: 0 2px 0 #999;
	padding: 5px 0;
}
.no-boxshadow #side { border: 1px solid #EEE; }

#side ul { list-style: none;	padding: 5px 5px 5px 10px; }
#side ul li { position: relative; margin-bottom: 5px; }
#side ul li:last-child { margin-bottom: 0; }

#side a {
	position: relative;
	display: block;
	width: 45px;
	height: 45px;
	text-align: center;
	border-radius: 3px;
	box-shadow: 0 1px 1px rgba(0,0,0,0.5);
	color: #FCFCFC;
	-webkit-transition: all ease-in-out 0.5s;
	transition: all ease-in-out 0.5s;
}
#side a:hover { text-decoration: none; }
#side a:hover:after {
	content: attr(data-tooltip);
	border-radius: 3px;
	background: #333;
	line-height: 1.2em;
	padding: 5px;
	width: 200px;
	position: absolute;
	right: 55px;
	min-height: 35px;
	opacity: 0.8;
	font-size: 95%;
	-webkit-animation: sideTooltip 0.5s; -o-animation: sideTooltip 0.5s;
	animation: sideTooltip 0.5s;
}
#side a:hover:before{
    border: solid;
    border-width: 5px 0 5px 10px;
	border-color: transparent transparent transparent #333;
    top: 17.5px;
    content: "";
    right: 45px;
    position: absolute;
    z-index: 99;
	opacity: 0.8;
	-webkit-animation: sideTooltipTriangle 0.5s; -o-animation: sideTooltipTriangle 0.5s;
	animation: sideTooltipTriangle 0.5s;
}
@-webkit-keyframes sideTooltip { from {opacity: 0; right: 45px;} to {opacity: 0.8; right: 55px;} }
@-o-keyframes sideTooltip { from {opacity: 0; right: 45px;} to {opacity: 0.8; right: 55px;} }
@keyframes sideTooltip { from {opacity: 0; right: 45px; } to {opacity: 0.8; right: 55px;} }

@-webkit-keyframes sideTooltipTriangle { from {opacity: 0; right: 35px;} to {opacity: 0.8; right: 45px;} }
@-o-keyframes sideTooltipTriangle { from {opacity: 0; right: 35px;} to {opacity: 0.8; right: 45px;} }
@keyframes sideTooltipTriangle { from {opacity: 0; right: 35px;} to {opacity: 0.8; right: 45px;} }

#side i { position: absolute; top: 9px; }

#menu-accueil { background: #FFBE40; box-shadow: 0 2px 0 #D69A26 !important; } #menu-accueil:hover { background: #FFAD0F; } #menu-accueil i { left: 10px; }
#menu-facebook { background: #3B5998; box-shadow: 0 2px 0 #24375E !important; } #menu-facebook:hover { background: #2B4375; } #menu-facebook i { left: 17px; }
#menu-contact { background: #95C4BA; box-shadow: 0 2px 0 #708D87 !important; } #menu-contact:hover { background: #6DB4A5; } #menu-contact i { left: 9px; }
#menu-rss { background: #FF6600; box-shadow: 0 2px 0 #913A00 !important; } #menu-rss:hover { background: #DA5700; } #menu-rss i  { left: 12px; }
#menu-suggestion { background: #8B7A5E; box-shadow: 0 2px 0 #352E23 !important; } #menu-suggestion:hover { background: #70634D; } #menu-suggestion i { left: 15px; }
#menu-forum { background: #9FD6D2; box-shadow: 0 2px 0 #597775 !important; } #menu-forum:hover { background: #83ADAA; } #menu-forum i { left: 8px; }
#menu-login { background: #B3CC57; box-shadow: 0 2px 0 #5C6830 !important; } #menu-login:hover { background: #98AD48; } #menu-login i { left: 10px; }
#menu-twitter { background: #4099FF; box-shadow: 0 2px 0 #2F73C2!important; } #menu-twitter:hover { background: #196ECF; } #menu-twitter i { left: 12px; }
#menu-google-plus { background: #DB4A37; box-shadow: 0 2px 0 #642118 !important; } #menu-google-plus:hover { background: #B43D2E; } #menu-google-plus i { left: 12px; }

/*-------------------------------------------------
--------------------WYSIJA-------------------------
---------------------------------------------------*/
.single-wysijap .post h2 {
	font-family: "Lucida Grande", Arial !important;
	text-shadow: none !important;
	border-bottom: 1px solid #CCCCCC;
	padding-bottom: 5px;
	font-size: 120% !important;
	margin-bottom: 15px !important;
	color: #007ACE !important;
}
/*-------------------------------------------------
--------------------PARTENAIRES--------------------
---------------------------------------------------*/
#liste-partenaires li > div{
	background: #ecf0f1;
	background: linear-gradient(#E8EDEE,#ecf0f1);
	box-shadow: 0 2px 0 #bdc3c7;
	border-radius: 3px;
	padding: 1em;
	position: relative;
	z-index: 0;
	min-height: 16em;
}

#liste-partenaires li > div p.description:last-child{margin-bottom:0;}
#liste-partenaires li:last-child > div h3{text-transform:uppercase;font-size:1.4em;color:#666;}

/*-------------------------------------------------
--------------------A PROPOS-----------------------
---------------------------------------------------*/
.conteneur-a-propos h1{
	text-align:center;
	font-size:3.5em;
	margin-bottom:1em;
	font-family:"futura_lt_btlight",Roboto,sans-serif;
	font-weight:normal;
}
.conteneur-a-propos h2{
	font-family: "futura_lt_btlight",Roboto,sans-serif;
	font-weight:normal;
	font-size:1.6em;
	color:#606060;
	text-transform:uppercase;
	padding-bottom:0;
	border-bottom:0;
}
.conteneur-a-propos em,.conteneur-a-propos strong{color:#3498db;}
.conteneur-a-propos .author { position:relative;float: left; margin-right:1em;overflow:hidden;border-radius:50%;margin-bottom:0; }
.conteneur-a-propos .author{-webkit-filter:contrast(0.9) saturate(0.9) sepia(0.2);filter:contrast(0.9) saturate(0.9) sepia(0.2);}

/*-------------------------------------------------
--------------------INSCRIPTION--------------------
---------------------------------------------------*/
.conteneur-inscription h1 { 
	font-size: 2.5em;
	text-align: center;
	margin-bottom: 0.5em;
	font-family: "futura_lt_btlight",Roboto,sans-serif;
	color: #606060;
	font-weight: lighter;
	letter-spacing: -1px;
	text-transform: uppercase;
	line-height: 1em;
}

#registerform {
	margin: 0;
	border-radius: 6px;
	box-shadow: 0 2px 0 #bdc3c7;
	padding: 1em;
	background: #ecf0f1;
}

#registerform h2 {
	border: none;
	font-size: 1.8em;
	text-align: center;
	font-weight: 100;
	margin-top: 0;
	padding-bottom: 0;
	color: #666;
	font-family: 'futura_lt_btlight', Roboto, sans-serif;
	text-transform: uppercase;
}

.lt-ie10 #registerform label {
	display: block;
	margin-bottom: -10px;
}
#registerform p { text-align: inherit; margin: 0; }

#registerform input[type="text"] {
	border: 1px solid #a6a6a6;
	height: 3em;
	border-radius: 3px;
	padding-left: 0.5em;
	color: #6c6c6c;
	background: #fcfcfc;
	outline: none;
}

.lt-ie9 #registerform input[type="text"] {
	line-height: 40px;
}

#registerform input[type="text"]:focus {
	box-shadow: inset 0 1px 2px rgba(0,0,0, .1);
	color: #a6a6a6;
	background: white;
}

#registerform input[type="submit"] {
	border-radius: 3px;
	font-weight: bold;
	font-size: 1em;
	padding: 1em;
}

#registerform #profile-details-section-wysija { float: none; width: 100%; text-align:center; }
#registerform .wysija-after-register { color: #666; margin: 1em 0 0 0; }

#registerform #reg_passmail {
	color: #666;
	font-style: italic;
	font-size: 90%;
	margin: 0;
	text-align: center;
}
.lt-ie10 #registerform #reg_passmail { margin-top: 1em; }

#registerform .submit{margin:0;text-align:center;}

#registrationinfos .contenu h3 {
	color: #666;
	font-size: 1.3em;
	font-family: "futura_lt_btlight",Roboto,sans-serif;
	text-transform: uppercase;
	border-bottom: 1px solid #ecf0f1;
}

#registerform-other {
	font-size: 95%;
	text-align: center;
	color: #999;
	margin-top: 5px;
}

@media only screen and (max-width:768px){
	#registrationinfos{margin-top:2em;}
}

/*-------------------------------------------------
------------LOGIN/LOST PASSWORD FORM---------------
---------------------------------------------------*/

div#login-form, div#lost-password-form {  
    width: 400px;   
    overflow: hidden;  
    position: relative;   
    font-family: Helvetica Neue, Helvetica, Arial !important;  
}
div#login-form { height: 285px; background: transparent url(https://www.tutoriel-video.com/wp-content/themes/tutoriel-video-v2-2/images/secure.png) no-repeat 50px 50px; }
div#lost-password-form { height: 215px; }

div#login-form p, div#lost-password-form p { margin-bottom: 5px; }
div#login-form label, div#lost-password-form label { font-weight: normal; }
div#login-form hr, div#lost-password-form hr { margin: 10px 0; }

div#login-form form, div#lost-password-form form {
	font-size: 90%;
	width: 242px;
	margin: auto;
} 

div#login-form input[type="text"], div#login-form input[type="password"], div#lost-password-form input[type="text"], div#lost-password-form input[type="password"] {  
    display: block;  
    border: 1px solid #ccc;  
    margin: 5px 20px;  
    padding: 9px 4px;    
    -webkit-border-radius:4px;  
	border-radius: 4px;
    width: 200px;  
    font-family: Helvetica Neue, Helvetica, Arial !important;   
}  

div#login-form input[type="checkbox"], div#lost-password-form input[type="checkbox"] { margin: 5px 5px 5px 20px; }
  
div#login-form input[type="text"]:hover, div#login-form input[type="password"]:hover, div#lost-password-form input[type="text"]:hover, div#lost-password-form input[type="password"]:hover {  
	border-color: #b1b1b1; }  
  
div#login-form input[type="text"]:focus, div#lost-password-form input[type="text"]:focus {  
    -moz-box-shadow: 0 0 3px #ccc;  
    -webkit-box-shadow: 0 0 3px #ccc;  
}    

div#login-form input[type="submit"], div#lost-password-form input[type="submit"] {
	border-radius: 3px;
	border: 1px solid #336895;
	box-shadow: inset 0 1px 0 #8dc2f0;
	width: 242px;
	height: 40px;
	margin-top: 10px;
	background: -webkit-linear-gradient(bottom, #4889C2 0%, #5BA7E9 100%);
	background: linear-gradient(to top, #4889C2 0%, #5BA7E9 100%);
	cursor: pointer;
	color: white;
	font-weight: bold;
	text-shadow: 0 -1px 0 #336895;
	font-size: 13px;
}

div#login-form input[type="submit"]:hover, div#lost-password-form input[type="submit"]:hover {
	background: -webkit-linear-gradient(bottom, #5c96c9 0%, #6bafea 100%);
	background: linear-gradient(to top, #5c96c9 0%, #6bafea 100%);
}

div#login-form input[type="submit"]:active, div#lost-password-form input[type="submit"]:active {
	background: -webkit-linear-gradient(bottom, #5BA7E9 0%, #4889C2 100%);
	background: linear-gradient(to top, #5BA7E9 0%, #4889C2 100%);
	box-shadow: inset 0 0 2px rgba(0,0,0, .3), 0 1px 0 white;
}

div#login-form span, div#lost-password-form span {  
    display: block;  
    margin-bottom: 22px;  
}  
  
div#login-form div.title, div#lost-password-form div.title {text-align: center;}  
div#login-form div.title h2,  
div#login-form div.title span,
div#lost-password-form div.title h2,  
div#lost-password-form div.title span {text-shadow:1px 1px 0px #fff}  
div#login-form div.title h2, div#lost-password-form div.title h2 {  
    margin:0 0 20px 0;  
}  

#login-form .title h2, #lost-password-form .title h2 { font-size: 115%; }
  
#login-form p.statement, #lost-password-form p.statement {  
    position:absolute;  
    bottom:-2px;  
    left:10px;  
    font-size:.9em;  
    color:#6d6d6d;  
    text-shadow:1px 1px 0px #fff;
	text-align: center;
}  

#login-form .others, #lost-password-form .others {
	color: #6D6D6D;
	margin-top: 5px;
	text-align: center;
}
#login-form .others { font-size: 90%;}

/*-------------------------------------------------
--------------------FAQ----------------------------
---------------------------------------------------*/
.conteneur-faq h2 {
	text-align:center;
	font-size:3.5em;
	margin-bottom:1em;
	font-family:"futura_lt_btlight",Roboto,sans-serif;
	font-weight:normal;
}
.conteneur-faq h3{color:#606060;border-bottom:0;padding-bottom:0;font-family:"futura_lt_btlight",Roboto,sans-serif;text-transform:uppercase;font-size:1.3em;border-top:1px solid #ecf0f1;padding-top:1em;}
.conteneur-faq h3:first-child{border-top:0;padding-top:0;}
.conteneur-faq  ul{margin-bottom: 1em;}

/*-------------------------------------------------
----------ADVANCED BROWSER CHECK-------------------
---------------------------------------------------*/
.advanced-browser-check {
	width: 100%;
	height: 100%;
	position: fixed;
	background: #000;
	background: rgba(0,0,0,0.8);
	z-index: 999999999;
	left: 0;
	top: 0;
}

.adv_browser_check {
	width: 720px;
	margin: 0 auto;
	position: fixed;
	top: 25%;
	left: 50%;
	margin: 0 0 0 -360px;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	background: #fff;
	color: #333;
	z-index: 9999999999;
	border: 1px solid #cc0000;
	overflow: hidden;
	text-align: center;
}

.adv_browser_check h1 {
	font-weight: bold;
	font-size: large;
	color: #333;
}
.adv_browser_check_msg { padding: 15px; }

.adv_browser_check_icons {
	list-style: none;
	margin: 0;
	padding: 0;
}

.adv_browser_check_icons li {	display: inline; }

/*-------------------------------------------------
--------------------CHAT---------------------------
---------------------------------------------------*/
#chat {
	position: fixed;
	right: 20px;
	z-index: 100;
	border-radius: 5px 5px 0 0;
	font-size: 0.9em;
	background: #2c3e50;
}

#chat.inactive {
	bottom: 0;
	width: 12em;
	padding: 0.5em 0.5em 0 0.5em;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	transition: all 1s;
}

#chat.active {
	bottom: 0;
	width: 32em;
	padding: 0.5em 1em 1em 0.5em;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	transition: all 1s;
}

#chat h4 {
	font-size: 110%;
	color: #ecf0f1;
	position: relative;
}

#chat.inactive h4 {
	margin-bottom: 0;
	border-bottom: none;
	cursor: pointer;
}

#chat h4 a {
	position: absolute;	
	right: 0;
	bottom: 5px;
	color: #ecf0f1;
}

#chat h4 a:hover {
	color: #3498db;
	text-decoration: none;
}

#chat.inactive h4 a { display: none; }
#chat.active h4 a { display: block; }
#chat .chat-body { color: #ecf0f1; }
#chat.inactive .chat-body { display: none; }
#chat.active .chat-body { display: block; }
#chat a { text-align: center; display: block; }
#chat a.btn{padding:0.8em;font-size:1.1em;}

@media screen and (max-width: 768px) {
	#chat {display:none;}
}

/* FACEBOOK POPUP*/
#open-facebook-like-box { display: block; text-align: center; }
#facebook-popup-h2 { font-size: 25px; text-align: center; padding-bottom: 10px; border-bottom: 1px solid #CCCCCC; }

/* SOCIAL POPUP */
#social-popup h2 { font-size: 160%; text-align: center; padding-bottom: 10px; border-bottom: 1px solid #CCC; }
#social-popup p { font-size: 90%; font-family: Roboto, "Lucida Grande", sans-serif; }
#social-popup ul { list-style: none; margin: 0; padding: 0; padding-left:81px; margin-top: 50px; }
#social-popup ul li { display: inline; }
#social-popup ul li:last-child  a{ margin-right: 0; }
#social-popup ul li a { display: inline-block; width: 80px; height: 80px; box-shadow: 0 1px 1px rgba(0,0,0,0.8); color: #FCFCFC; -webkit-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s; position: relative; margin-right: 20px; border-radius: 3px; }
#social-popup ul li a:hover { text-decoration: none; }
#social-popup ul li a i { position: absolute; top: 12.5px; }
#social-popup ul li a:hover:before { content: attr(data-tooltip); position: absolute; top: -73px; left: -60px; background: #000; opacity: 0.8; padding: 5px; border-radius: 3px; min-height: 51px; z-index: 9000; width: 200px; text-align: center; line-height: 1.3em; -webkit-animation: socialPopupTooltip 0.8s; animation: socialPopupTooltip 0.8s; }
#social-popup ul li a:hover:after { content: ""; position: absolute; left:35px; top: -9px; width: 0; height: 0; border-style: solid; border-width: 10px 5px 0 5px; border-color: #000000 transparent transparent transparent; opacity: 0.8; -webkit-animation: socialPopupTooltipTriangle 0.8s; animation: socialPopupTooltipTriangle 0.8s; }
#social-popup-facebook { background: #3B5998; } #social-popup-facebook:hover { background: #2B4375; } #social-popup-facebook i { left: 28.5px; }
#social-popup-twitter { background: #4099FF; } #social-popup-twitter:hover { background: #196ECF; }
#social-popup-google-plus { background: #DB4A37; } #social-popup-google-plus:hover { background: #B43D2E; }
#social-popup-twitter i, #social-popup-google-plus i { left: 15px; }
@-webkit-keyframes socialPopupTooltip { from { top: -50px; opacity: 0; } to { top: -73px; opacity: 0.8; } }
@keyframes socialPopupTooltip { from { top: -50px; opacity: 0; } to { top: -73px; opacity: 0.8; } }
@-webkit-keyframes socialPopupTooltipTriangle { from { top: 11px; opacity: 0; } to { top: -9px; opacity: 0.8; } }
@keyframes socialPopupTooltipTriangle { from { top: 11px; opacity: 0; } to { top: -9px; opacity: 0.8; } }
#social-popup-navigation { position: absolute; bottom: 10px; right: 0; }

/* TWITTER FOLLOW POPUP */
#twitter-follow-popup { padding-top: 25px; }
#twitter-follow-instructions { position: relative; margin-top: 52px; font-size: 130%; font-weight: bold; text-shadow: 0 1px 0 #F0F6FA; background: #D9DDE0; padding: 10px; border-radius: 3px; text-align: justify; -webkit-animation: twitterFollowInstructions 1s; animation: twitterFollowInstructions 1s; }
#twitter-follow-instructions i { position: absolute; top: -60px; left: 50px; text-shadow: none; color: #D9DDE0; } 
@-webkit-keyframes twitterFollowInstructions { from { margin-top: 32px; opacity: 0; } to { margin-top: 52px; opacity: 1; } }
@keyframes twitterFollowInstructions { from { margin-top: 32px; opacity: 0; } to { margin-top: 52px; opacity: 1; } }

/* GOOGLE+ FOLLOW POPUP */
#google-plus-follow-popup, #facebook-like-popup { padding-bottom: 45px; }

/*-------------------------------------------------
---------------LISTE NOUVEAUX TUTORIELS------------
---------------------------------------------------*/
.conteneur-liste-nouveaux-tutoriels .liste li a span.date {
	position: absolute;
	bottom: 2px;
	right: 5px;
	font-size: 0.9em;
	display:inline;
}

/*-------------------------------------------------
-----LISTE NOUVEAUX TUTORIELS ET TOP TUTORIELS-----
---------------------------------------------------*/
.conteneur-liste-nouveaux-tutoriels h1,.conteneur-top-tutoriels h1 {  
	text-align:center;
	font-size:3.5em;
	margin-bottom:1em;
	font-family:"futura_lt_btlight",Roboto,sans-serif;
	font-weight:normal;
}
.conteneur-liste-nouveaux-tutoriels h2,.conteneur-top-tutoriels h2{
	font-family: "futura_lt_btlight",Roboto,sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	border-bottom:0;
	padding-bottom:0;
	color: #606060;
	font-size:1.3em;
}
.conteneur-liste-nouveaux-tutoriels #tutoriel-top a.thumbnail,.conteneur-top-tutoriels #tutoriel-top a.thumbnail {
	display: block;
	height: 149px;
	width: 265px;
	margin-bottom: 1em;
}
.conteneur-liste-nouveaux-tutoriels #tutoriel-top a.thumbnail .duree,.conteneur-top-tutoriels #tutoriel-top a.thumbnail .duree {
	right: 5px;
	bottom: 5px;
	font-size: 0.9em;
	padding: 0.2em 0.5em;
	height: 2em;
	line-height: 1.5em;
}
.conteneur-liste-nouveaux-tutoriels h3,.conteneur-top-tutoriels h3 {margin: 0;font-family:"futura_lt_btlight",Roboto,sans-serif;text-transform:uppercase;border-bottom:0;padding-bottom:0.5em;}
.conteneur-liste-nouveaux-tutoriels #tutoriel-top .details,.conteneur-top-tutoriels #tutoriel-top .details { margin-bottom:1em; display: block;background:#2980b9;color:#FCFCFC;font-size:0.9em;}
.conteneur-liste-nouveaux-tutoriels #tutoriel-top .details a,.conteneur-top-tutoriels #tutoriel-top .details a{color:#FCFCFC;}
.conteneur-liste-nouveaux-tutoriels #tutoriel-top .details ul,.conteneur-top-tutoriels #tutoriel-top .details ul{list-style:none;padding-left:0.5em;}
.conteneur-liste-nouveaux-tutoriels #tutoriel-top .details ul li i,.conteneur-top-tutoriels #tutoriel-top .details ul li i{margin-right:0.2em;}
.conteneur-liste-nouveaux-tutoriels #tutoriel-top .read-more,.conteneur-top-tutoriels #tutoriel-top .read-more{text-align:right;}
.borderradius .conteneur-liste-nouveaux-tutoriels ul.liste li,.borderradius .conteneur-top-tutoriels ul.liste li{padding-top:0;}
.conteneur-liste-nouveaux-tutoriels ul.liste li a,.conteneur-top-tutoriels ul.liste li a{min-height:12em;}
.conteneur-liste-nouveaux-tutoriels ul.liste li span.titre,.conteneur-top-tutoriels ul.liste li span.titre{padding-top:1em;}

/*-------------------------------------------------
--------------------CONTACT------------------------
---------------------------------------------------*/
.conteneur-contact h1 { 
	text-align:center;
	font-size:3.5em;
	margin-bottom:1em;
	font-family:"futura_lt_btlight",Roboto,sans-serif;
	font-weight:normal;
}
#contact-form-details {
	padding: 0.5em;
	border-radius: 3px;
	box-shadow: 0 2px 0 #bdc3c7;
	margin-bottom: 30px;
	background: #ecf0f1;
	color: #666;
}
.lt-ie10 #contact-form-details { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#eeeeee',GradientType=0 ); }
#contact-form-details p:last-child { margin-bottom: 0; }
form.contact-form {
	width: 60%;
	margin: 0 auto;
	border: 1px solid #E7E7E7;
	padding: 70px 5px 20px 5px;
	border-radius: 3px;
	box-shadow: 0 2px 0 #BDBDBD;
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#eeeeee), color-stop(50%,#f6f6f6), color-stop(100%,#eeeeee));
	background: -webkit-linear-gradient(45deg, #eeeeee 0%,#f6f6f6 50%,#eeeeee 100%);
	background: linear-gradient(45deg, #EEE 0%,#f6f6f6 50%,#EEE 100%);
	position: relative;
}
.lt-ie10 form.contact-form { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=1 ); }
form.contact-form:before { 
	content: "Contacter l'équipe de Tutoriel-Video.com";
	font-family: 'futura_lt_btlight';
	font-size: 150%;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	text-align: center;
	width: 100%;
	text-transform: uppercase;
	color: #606060;
	padding: 10px 0;
	border-bottom: 1px solid #E7E7E7;
}
.contact-form input[type='text'], .contact-form input[type='email'], .contact-form select, .contact-form textarea {
	border-radius: 3px;
	border: 1px solid #DDD;
	color: #606060;
	margin-top: 0;
	padding-left: 5px;
	margin-bottom: 15px;
}
.contact-form label {
	font-weight: 700;
}
.contact-form label span {
	font-style: italic;
	color: #e74c3c;
	margin-left: 0.3em;
	font-size: 90%;
	font-weight: 400;
}
.contact-form input[type='text'], .contact-form input[type='email'] {
	height: 2.5em;
	line-height: 2.5em;
	padding-left: 1%;
}
.contact-form select {
	height: 2.5em;
	line-height: 2.5em;
}
.contact-form textarea {
	height: 15em;
	font-family: Roboto,sans-serif;
}
.contact-form .contact-submit{text-align:right;margin-bottom:0;}
.contact-form input[type="submit"]{padding:1em 2em;font-size:100%;}

@media only screen and (max-width:768px) {
	form.contact-form{width:100%;}
}

/*-------------------------------------------------
--------------------TUTOS PROGRESS-----------------
---------------------------------------------------*/
.conteneur-tuto-progress h1 { 
	text-align:center;
	font-size:3.5em;
	margin-bottom:1em;
	font-family:"futura_lt_btlight",Roboto,sans-serif;
	font-weight:normal;
}

.conteneur-tuto-progress h2 {
	font-size: 1.3em;
}

.conteneur-tuto-progress h3 {
    font-size: 2em;
    font-weight: lighter;
    font-family: Roboto;
    color: #2c3e50;
}

.conteneur-tuto-progress h4 {
    font-family: Roboto;
    font-weight: 200;
    color: #2c3e50;
    font-size: 1.3em;
}

.conteneur-tuto-progress h5 {
	font-family: Roboto;
	font-weight: bolder;
	border-bottom: none;
	font-size: 1.3em;
} 

.conteneur-tuto-progress h7 {
    font-size: 1em;
    font-weight: bolder;
    margin-bottom: 1em;
    padding-bottom: .5em;
    border-bottom: 1px solid #cccccc;
    display: block;
    color: #2980b9;
}

.conteneur-tuto-progress .formation .title img{
	vertical-align: middle;
}

.conteneur-tuto-progress .tuto {
	margin-bottom: 1em;
    padding: 1em;
    background-color: #ecf0f1;
    border-radius: 3px;
    box-shadow: 0 2px 0 #bdc3c7;
}

.conteneur-tuto-progress .watched-history-container {
    background-color: #E2E7E8;
    padding: 1em;
    border-radius: 3px;
    box-shadow: 2px 3px 0 0 #bdc3c7 inset;
}

.conteneur-tuto-progress .watched-history {
    margin: 0 .5em;
}

.progress {
    background-color: transparent;
    height: 1.5625em;
    border: 1px solid #bdc3c7;
    padding: 0.125em;
    margin-bottom: 0.625em;
}

.progress.round {
    -webkit-border-radius: 1000px;
    border-radius: 1000px;
}

.progress .meter {
    background: #3498db;
    height: 100%;
    display: block;
    text-align: center;
    color: #fcfcfc;
    font-size: .8em;
    padding: .25em;
}

.progress.green .meter {
    background: #2ecc71;
    height: 100%;
    display: block;
}

.progress.round .meter {
    -webkit-border-radius: 999px;
    border-radius: 999px;
}

/*-------------------------------------------------
--------------------COOKIE CUTTR-------------------
---------------------------------------------------*/
.cc-cookies { position:fixed; width: 100%; left: 0; bottom: 0; padding: 0.5em 5%; background: #7f8c8d; background: rgba(127,140,141,.95); color: #fcfcfc; font-size: 13px; font-weight: 700; z-index: 99999; text-align: center; color: #fcfcfc; }
.cc-cookies a, .cc-cookies a:hover { color: #fcfcfc; text-decoration: underline; }
.cc-cookies a:hover { text-decoration: none; }
.cc-overlay { height: 100%; padding-top: 25%; }
.cc-cookies-error { float: left; width: 90%; text-align: center; margin: 1em 0 2em 0; background: #fcfcfc; padding: 2em 5%; border: 1px solid #ccc; font-size: 18px; color: #333; }
.cc-cookies a.cc-cookie-accept, .cc-cookies-error a.cc-cookie-accept, .cc-cookies a.cc-cookie-decline, .cc-cookies-error a.cc-cookie-decline, .cc-cookies a.cc-cookie-reset { display: inline-block; color: #fcfcfc; text-decoration: none; background: #2ecc71; padding: 0.5em 0.75em; border-radius: 3px; -o-transition: background 0.5s ease-in; -webkit-transition: background 0.25s ease-in; -moz-transition: background 0.25s ease-in; }
.cc-cookies a.cc-cookie-decline, .cc-cookies-error a.cc-cookie-decline { background: #af3b3b; margin-left: 0.5em; }
.cc-cookies a.cc-cookie-reset { background: #f15b00; }
.cc-cookies a:hover.cc-cookie-accept, .cc-cookies-error a:hover.cc-cookie-accept, .cc-cookies a:hover.cc-cookie-decline, .cc-cookies-error a:hover.cc-cookie-decline, .cc-cookies a:hover.cc-cookie-reset  { background: #27ae60; -o-transition: background 0.5s ease-in; -webkit-transition: background 0.25s ease-in; -moz-transition: background 0.25s ease-in; }
.cc-cookies-error a.cc-cookie-accept, .cc-cookies-error a.cc-cookie-decline { display: block; margin-top: 1em; }
.cc-cookies.cc-discreet { width: auto; padding: 0.5em 1em; left: auto; top: auto; }
.cc-cookies.cc-discreet a.cc-cookie-reset { background: none; text-shadow: none; padding: 0; text-decoration: underline; }
.cc-cookies.cc-discreet a:hover.cc-cookie-reset { text-decoration: none; }

@media screen and (max-width: 768px) {
.cc-cookies a.cc-cookie-accept, .cc-cookies a.cc-cookie-decline, .cc-cookies a.cc-cookie-reset { display: block; margin: 1em 0; }
}

@media screen and (max-width: 480px) {
.cc-cookies { position: relative; float: left; }
}