header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px}
body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
.content-slider{overflow:hidden;visibility:hidden;position:relative}.slider-wrapper{overflow:hidden;position:relative}.slider-wrapper>*{float:left;width:100%;position:relative}.slider-control{height:30px;position:relative}.slider-control a,.slider-control .slider-menu{position:absolute;top:9px;display:inline-block}.slider-control .slider-prev{left:0}.slider-control .slider-next{right:0}.slider-control .slider-menu{top:0;width:50%;left:50%;margin-left:-25%;font-size:27px;text-align:center}.slider-control .slider-menu b{color:#bbb;cursor:pointer}.slider-control .slider-menu b.active{color:#666}
/* lazyload related styles start */

/** required by edge to see the images **/
img[data-src]:not(.loaded),
img[data-srcset]:not(.loaded) {
    display: block !important;
    min-height: 1px !important;
}

/* Prevents img without src to appear */
img:not([src]) {
    visibility: hidden !important;
}

.image-wrapper:not(.loaded) .image-aspect-ratio {
    padding-bottom: 66.67%; /* You define this doing height / width * 100% */
    width: 100%;
    height: 0;
    position: relative;
}

/* lazyload related styles stop */
/***** SLIDER STYLES *****/
/*************************/

.onebyone-slider { margin: 0px auto; width: 980px; height: 355px; position: relative; }

.onebyone-slider2 { margin: auto; width: 980px; height: 355px; position: relative; }
.onebyone-slider2 .arrowButton .prevArrow { bottom: 10px; right: 58px; }
.onebyone-slider2 .arrowButton .nextArrow { bottom: 10px; right: 10px; }
.onebyone-slider2 .buttonCon { bottom: -10px; }

.byone-slider { position: absolute; top: 0; left: 0; }     
.byone-slider .oneByOne_item { position: absolute; width: 980px; height: 355px; overflow: hidden; display: none; }    

.slidetxt { position: absolute; top: 305px; right: 10px; }
/* custom style from jquery.onebyone.css */
.arrowButton div { opacity: 0.8; }
.arrowButton div:hover { opacity: 1; }

/***** MEDIA QUERIES *****/
/*************************/

/* 1024 screens */
@media only screen and (min-width: 960px) and (max-width: 1024px) {
		
	.onebyone-slider, .onebyone-slider2, .byone-slider .oneByOne_item, .byone-slider { width: 860px;}
	.onebyone-slider2, .onebyone-slider2 .byone-slider .oneByOne_item, .onebyone-slider2 .byone-slider { height: 310px;}
	.slidetxt { position: absolute; top: 260px; right: 10px; }

}

/* iPad Portrait */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	.onebyone-slider, .onebyone-slider2, .byone-slider .oneByOne_item, .byone-slider { width: 718px; }
	.onebyone-slider, .byone-slider .oneByOne_item { height: 350px; }
	.onebyone-slider { margin: 0px auto; }
	
	.onebyone-slider2, .onebyone-slider2 .byone-slider .oneByOne_item { width: 718px; height: 260px; }

	.slidetxt { position: absolute; top: 216px; right: 5px; }
	


}

/* iPhone Landscape */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	.onebyone-slider, .onebyone-slider2, .byone-slider .oneByOne_item, .byone-slider { width: 430px; }
	.onebyone-slider, .byone-slider .oneByOne_item { height: 250px; }
	.onebyone-slider { margin: 0px auto; }
	
	.onebyone-slider2, .onebyone-slider2 .byone-slider .oneByOne_item { width: 430px; height: 156px; }
	
	.arrowButton .nextArrow { width: 32px; height: 32px; background-image: url(../../files/click-on/images/onebyone/next_small.png); right: 0; }
	.arrowButton .prevArrow { 
		width: 32px; height: 32px; background-image: url(../../files/click-on/images/onebyone/prev_small.png); right: 33px; 
	}
	
	.slidetxt { position: absolute; top: 115px; right: 4px; }
}

/* iPhone Portrait */
@media screen and (max-width: 479px) {
	
	.onebyone-slider, .onebyone-slider2, .byone-slider .oneByOne_item, .byone-slider { width: 280px; }
	.onebyone-slider, .byone-slider .oneByOne_item { height: 170px; }
	.onebyone-slider { margin: 0px auto; }
	
	.onebyone-slider2, .onebyone-slider2 .byone-slider .oneByOne_item { width: 280px; height: 100px; }
	
	.arrowButton .nextArrow { width: 32px; height: 32px; background-image: url(../../files/click-on/images/onebyone/next_small.png); right: 0; }
	.arrowButton .prevArrow { 
		width: 32px; height: 32px; background-image: url(../../files/click-on/images/onebyone/prev_small.png); right: 33px; 
	}
	.onebyone-slider2 .arrowButton .prevArrow { bottom: 5px; right: 41px; }
	.onebyone-slider2 .arrowButton .nextArrow { bottom: 5px; right: 5px; }

		.slidetxt { position: absolute; top: 58px; right: 4px; }
}
/*CLICK**/
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-menu {
	line-height:	1.0;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
}
.sf-menu a {
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			2.5em; /* match top ul list item height */
	z-index:		99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}

/*** DEMO SKIN ***/
.sf-menu {
	float:			left;
	margin-bottom:	1em;
}
.sf-menu a {
	padding: 		.75em 1em;
	text-decoration:none;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	outline:		0;
}
body:not(.index) .sf-menu .level_2 li:hover{
	background-color: black;
}
body:not(.index) .sf-menu .level_2 li.current a span,
body:not(.index) .sf-menu .level_2 li:hover a,
body:not(.index) .sf-menu .level_2 li:hover a span{
	color:white !important;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			.8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}

/***
 * Created by: Mienard Lumaad
 * Date: August 4, 2012
 * Website: http://themepixels.com/
***/


/***** 1. RESET BROWSER STYLE *****/
/**********************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
.gr {
	margin-right:20px !important;	
}
img{
	/*max-width:100%;height:auto;*/
}
body { color: #666; font-family: "Roboto", sans-serif; font-size: 16px; line-height: 24px; }
body.body-fixed { background: #eee; }
body.body-fixed .mainwrapper { 
	background: #fff; 
	width: 1030px; 
	margin: auto; 
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2); 
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2); 
	box-shadow: 0 0 5px rgba(0,0,0,0.2); 
}

input,select,textarea,button { color: #666; font-family: "Roboto", sans-serif; outline: none; margin: 0; }

blockquote { 
	font-family: 'PT Serif', Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 15px; line-height: 28px; 
	padding: 20px 20px 20px 60px; background: #f9f9f9 url(../../files/click-on/theme/images/quotes.png) no-repeat 20px 25px; color: #999; margin: 20px 0;
}
blockquote.bqfloatleft { float: left; width: 500px; margin: 0 25px 25px 0; }
blockquote.bqfloatright { float: right; width: 500px; margin: 0 0 25px 25px; }

img { display: block; }
img.imgfloatleft { float: left; margin: 0 20px 20px 0; }
img.imgfloatright { float: right; margin: 0 0 20px 20px; }

a, a:active { text-decoration: none; outline: none; }
h1,h2,h3,h4 { color: #424445; font-weight: normal; }
h1 { font-size: 2.2rem; line-height: 38px; }
h2 { font-size: 1.5rem; line-height: 30px; }
h3 { font-size: 1.4rem; line-height: 28px; }
h4 { font-size: 1.3rem; line-height: 26px;   margin-bottom: 5px;
	font-weight: 600;}
table { border-collapse: collapse; }
table tr td { padding: 5px 0; }
hr { border: 0; border-top: 1px solid #ddd; margin: 25px 0; clear: both; }


/***** 2. COLUMN STYLE *****/
/***************************/
.one_half{ width:48.5%; }
.one_third{ width:31.16%; }
.two_third{ width:65.83%; }
.one_fourth{ width:22.7%; }
.three_fourth{ width:74.3%; }
.one_fifth{ width:17.3%; }
.two_fifth{ width:38.1%; }
.three_fifth{ width:58.9%; }
.four_fifth{ width:67.7%; }
.one_sixth{ width:13.83%; }
.five_sixth{ width:83.17%; }

.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,
.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth{ position:relative; margin-right:2%; float:left; }

:not(.mod_article):not(.ce_text).last{ margin-right:0 !important; clear:right; }



/***** 3. HEADER STYLES *****/
/****************************/

.headwrapper { margin-bottom: 5px; } /* add background-color here */
body:not(.index) .headwrapper{
	margin-bottom: 26px;
  	background: #FCFCFC;
  	box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.1);
	position:fixed;
	left:0;
	right:0;
	top:0;
	z-index:100;
}
body:not(.index) #container{
	margin-top:155px;
}
@media only screen and (max-width: 1024px) {
	body:not(.index) .headwrapper{
		position: relative;
	}
	body:not(.index) #container{
		margin-top:0;
	}
}
.header { 
	max-width: 1460px;
	margin: auto; 
	padding: 15px 0; 
	position: relative; 
	z-index: 100; 
}

.headerinner { 
	position: relative;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px; 
	/*-moz-box-shadow: inset 0 1px 0 rgba(250,250,250, 0.1);
	-webkit-box-shadow: inset 0 1px 0 rgba(250,250,250, 0.1); 
	box-shadow: inset 0 1px 0 rgba(250,250,250, 0.1);*/
}

.headerinner .logo { 
	/*position: absolute;
	top: 0; 
	left: 0; 
	z-index: 100; 
	padding-right: 1px; */
}

.headerinner .logoinner { 
	padding: 0px; 

}

.headerinner .logo h1 { text-transform: uppercase; font-size: 32px; line-height: 20px; }
.headerinner .logo h1 a { color: #fff; }
.headerinner .logo h1 a span { display: inline-block; margin-left: 5px; vertical-align: baseline; width: 7px; height: 7px; }

.headerinner .menuicon { 
	/*background: url('../../files/click-on/theme/images/opline20.png') repeat-y 0 0;*/
	position: absolute;
	top: 0;
	right: 10px;
	z-index: 100;
	display: none; 
}
.headerinner .menuiconinner { 
	background: #878787 url('../../files/click-on/images/svg/menu.svg') no-repeat center center;
	background-size:40%;
	padding: 20px; 
	border-bottom: 0; 
	-moz-border-radius: 10px 30px;
	-webkit-border-radius: 10px 30px;
	border-radius: 10px 30px;
	-moz-box-shadow: inset 0 1px 0 rgba(250,250,250, 0.1);
	-webkit-box-shadow: inset 0 1px 0 rgba(250,250,250, 0.1);
	box-shadow: inset 0 1px 0 rgba(250,250,250, 0.1);
	width: 20px; 
	height: 21px; 
	display: block; 
	cursor: pointer;
	margin-top: 5px;;
}

.headerinner .menu { 
	/*border-bottom: 5px solid;*/
	height: 51px; 
	position: relative;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}



/***** NAV MENU *****/
/********************/
.sf-menu { float: right; line-height: 21px; margin-bottom: 0; box-sizing: border-box}
.sf-menu li { position:relative; display: inline-block; width:100%; float: left; height:100%; background: none; padding:10px 0; box-sizing: border-box;}
.sf-menu a { display: inline-flex; justify-content: center;align-items: center; padding:0 5px; font-family:'Roboto', sans-serif !important; height: 100%; color:#424445;text-transform: capitalize;border:none;}
.sf-menu li a span { display: inline-block; font-size: 18px;}

.sf-menu li a:hover, .sf-menu li.sfHover a:hover {
	color:#9FA0A1;
	-webkit-transition: all 0.5s ease 0s !important;
	-moz-transition: all 0.5s ease 0s !important;
	-ms-transition: all 0.5s ease 0s !important;
	-o-transition: all 0.5s ease 0s !important;
	transition: all 0.5s ease 0s !important;
}
.sf-menu>li.trail::after,
.sf-menu>li:not(:last-of-type).current::after{
	content:'';
	display: block;
	border-radius: 50px 50px 0px 0px;
	background: #FF9C00;
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 5px;
}
body:not(.index) .sf-menu>li:last-of-type.current a{
    background-color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color: #424445 !important;
    padding: 0 15px;
}
.sf-menu>li:not(:last-of-type):hover::after{
	content: '';
    display: block;
    border-radius: 50px 50px 0px 0px;
    background: #FF9C00;
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 5px;
}
body:not(.index) .sf-menu>li:last-of-type.current a span{
	color: #424445 !important;
}
/*.sf-menu li.sfHover > a > span { background-color: #444; }*/

.sf-menu a.sf-with-ul { padding-right: 0; }

.sf-menu li a span {
	display:  block;
}
.sf-menu li ul { 
	width: 190px; 
	/*-moz-box-shadow: 0 0 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2); 
	box-shadow: 0 0 3px rgba(0,0,0,0.2); opacity: 0.97;*/
}
.sf-menu ul li a { padding-left: 0; }
.sf-menu ul li a span { text-transform: none; }
.sf-menu ul li.withsub > a > span, .sf-menu ul li.withsub > a:hover > span { 
	background-image: url(../../files/click-on/theme/images/submenuarrow.png); background-repeat: no-repeat; background-position: right center; 
}
.sf-menu li:hover ul, .sf-menu li.sfHover ul { 
	top: 56px; 
	background-color: #424445;
	padding: 0; 
}
.sf-menu li li { background-color: #424445; }
.sf-menu li:hover ul li a span, .sf-menu li.sfHover ul li a span { 
	padding: 10px; 
	border-bottom: 1px solid #444; 
	-moz-transition: border,background-color 0.2s ease-out 0s;
	-webkit-transition: border,background-color 0.2s ease-out 0s; 
	transition: border,background-color 0.2s ease-out 0s;
}
.sf-menu li.sfHover ul li:last-child > a > span { border-bottom: 0; }
.sf-menu li:hover ul li a:hover, .sf-menu li.sfHover ul li a:hover { color: #fff; }
.sf-menu li:hover ul li a:hover span, .sf-menu li.sfHover ul li a:hover span { background-color: #424445; }

.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 190px; top: 0; }
.sf-menu li li li { background-color: #424445; }
.sf-menu ul li.sfHover > a > span { background-color: #2c2c2c !important; }

.sf-shadow ul { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }

/* menu in mobile*/
.menupopup { background: rgba(0,0,0,0.9);}/*#292929; }*/
.menupopup ul { width: auto; margin: 30px auto; overflow: auto; }
.menupopup ul li { display: block; /*background: #424445; */}
.menupopup ul li.current { /*background: #444;*/ }
.menupopup ul a { background: none; text-transform: uppercase; display: block; padding: 10px 20px; color: #fff; font-size:16px; }
.menupopup ul a span { display: block; }
.menupopup ul ul { margin: 0; }
.menupopup ul ul a { padding-left: 24px; color: #ccc; text-transform: none;}/*background: url(../../files/click-on/theme/images/list/list-type0.png) no-repeat 10px center; } */
.menupopup ul ul li.withsub ul li a { padding-left: 39px; background-position: 25px center; }

.menutitle {
	position: absolute; 
	top: 0; 
	left: 20px; 
	right: 20px; 
	height: 20px; 
	padding: 10px 0; 
	/*background: #424445;*/
	color: #fff; 
	text-transform: uppercase; 
	font-size: 16px; 
	font-weight: bold;
	display: grid;
}
.menutitle .menuclose { 
	display: flex; justify-self: end; margin-top: 2px; width: 24px; height: 24px; 
	/*background: url(../../files/click-on/theme/images/closewhite.png) no-repeat center center; */
}
.menutitle .menuclose img{
	max-width: 100%;
	height:auto;
}

/***** PAGE TITLE *****/
/**********************/

.pagetitle { max-width: 1460px; border-bottom: 1px solid #ddd; margin: 0 auto 0 auto; padding-bottom: 25px; position: relative; }
.pagetitle h1 { font-size: 24px; color: #424445; font-weight: normal; text-transform: uppercase; line-height: 21px; }
.pagetitle span { font-size: 13px; color: #999; display: block; margin-top: 5px; }

.headrightpanel { position: absolute; right: 0; top: 3px; }
.headrightpanel .btn { padding: 10px 20px; font-size: 14px; }

.searchwidget { position: absolute; right: 0; top: 3px; }
.searchwidget input { color: #999; width: 80px; padding-left: 40px; background: #fff url(../../files/click-on/theme/images/icons/transblackicons/glass.png) no-repeat 10px 12px; }
.searchwidget input:focus { color: #666; width: 150px; background: #fff url(../../files/click-on/theme/images/icons/transblackicons/glass.png) no-repeat 10px 12px; }

.notitledesc .searchwidget { top: 15px; }


/***** BUTTON STYLES *****/
/*************************/

.btn { display: inline-block; }
.btn-large { font-size: 14px; padding: 10px 30px; }
.btn-medium { font-size: 12px; padding: 7px 20px; }
.btn-small { font-size: 16px; font-family: 'Roboto', sans-serif;}

.btn-white { background-color: #fcfcfc; border: 1px solid #ccc; color: #666; }
.btn-orange { color: #fff; background-color: #FF9C00; }
.btn-black { color: #fff; background-color: #424445; border: 1px solid #272727; }
.btn-blue { color: #fff; background-color: #0388f8; border: 1px solid #027fea; }
.btn-red { color: #fff; background-color: #dd0000; border: 1px solid #cc0000; }
.btn-lime { color: #fff; background-color: #6edf22; border: 1px solid #64ce1d; }

.btn-white:hover { color: #424445; border-color: #aaa; background-color: #f7f7f7; }
.btn-orange:hover { background-color: #444;}
.btn-black:hover { background-color: #272727; }
.btn-blue:hover { background-color: #027fea; }
.btn-red:hover { background-color: #cc0000; }
.btn-lime:hover { background-color: #64ce1d; }

.btn-icon { background-repeat: no-repeat; background-position: 10px center; padding-left: 35px; color: #424445; }

.btn-chat { background-image: url(../../files/click-on/theme/images/icons/transblackicons/chat.png); }
.btn-folder { background-image: url(../../files/click-on/theme/images/icons/transblackicons/folder.png); }
.btn-search { background-image: url(../../files/click-on/theme/images/icons/transblackicons/glass.png); }
.btn-like { background-image: url(../../files/click-on/theme/images/icons/transblackicons/like.png); }
.btn-link { background-image: url(../../files/click-on/theme/images/icons/transblackicons/link.png); }
.btn-lock { background-image: url(../../files/click-on/theme/images/icons/transblackicons/lock.png); }
.btn-newdoc { background-image: url(../../files/click-on/theme/images/icons/transblackicons/newdoc.png); }
.btn-pencil { background-image: url(../../files/click-on/theme/images/icons/transblackicons/pencil.png); }
.btn-print { background-image: url(../../files/click-on/theme/images/icons/transblackicons/print.png); }
.btn-rss { background-image: url(../../files/click-on/theme/images/icons/transblackicons/rss.png); }
.btn-settings { background-image: url(../../files/click-on/theme/images/icons/transblackicons/settings.png); }
.btn-tag { background-image: url(../../files/click-on/theme/images/icons/transblackicons/tag.png); }
.btn-trash { background-image: url(../../files/click-on/theme/images/icons/transblackicons/trash.png); }
.btn-unlock { background-image: url(../../files/click-on/theme/images/icons/transblackicons/unlock.png); }
.btn-videochat { background-image: url(../../files/click-on/theme/images/icons/transblackicons/videochat.png); }

.buttonlist { list-style: none; overflow: hidden; clear: both; }
.buttonlist li { float: left; margin: 0 10px 10px 0; }


/***** MAIN CONTENT *****/
/************************/

.maincontent { max-width: 1460px; margin: auto; position: relative; }
.contentinner { position: relative; }
.contentinner p { margin: 0; }
.contentinner p:first-child { margin-top: 0; }
.contentinner p:last-child { margin-bottom: 0; }

.posttitle { padding-top: 5px; margin-bottom: 25px; font-size: 18px; }
.postimg { padding: 10px; border: 1px solid #ddd; }
.postimg div { display: block; overflow: hidden; height: 330px; }
.postimg div img { max-width: 668px; margin:0 auto;}
.postcontent { margin-top: 25px; }
.postcontent p { margin: 20px 0; }

.readmore { display: inline-block; color: #424445; }
.readmore:hover { color: #424445; }
.readmore span { padding-left: 5px; font-size: 18px; display: inline-block; }
.readmore:hover span { padding-left: 10px; }

.headlinebox { padding: 10px; border: 1px solid #ddd; background: #fcfcfc; margin: 25px 0; }
.headlinebox p { 
	/*font-family: 'PT Serif', Georgia, "Times New Roman", Times, serif; */
	font-style: italic; 
	font-family: "Roboto", sans-serif !important;
	font-size: 16px;
	line-height: 28px; 
	padding: 0px 20px 10px 60px; 
	background: #fcfcfc url(../../files/click-on/theme/images/quotes.png) no-repeat 20px 5px; 
	color: #999; 
	margin: 0 0 0 0; 
}

@media only screen and (max-width: 768px) {
	.headlinebox p {
		padding: 0px 20px 10px 25px;
		background-position: 0 5px;
		background-size: 16px;
	}
}

.headlinebox h2 { 
	font-size: 1.5rem;
	color: #4e85c1;
	margin-bottom: 10px;
}

.headlinebox2 { margin: 5px 0; padding: 15px 0;}
.headlinebox2 h1 { line-height: 21px; margin-bottom: 10px;}
.headlinebox2 h3 { padding-top: 10px; line-height: 21px; color: #999; }

.jcarousel-container-horizontal{height: 135px;}

/***** PAGE STYLES *****/
/***********************/
.contentinner .ce_text h1 { margin: 0; }
.contentinner .ce_text h2 { margin: 0; }
.contentinner .ce_text h3 { margin: 0; }
.contentinner .ce_text h4 { margin: 0; }
.contentinner .ce_text h5 { margin: 0; }
.ce_text {margin-bottom: 10px;}
.ce_text p{line-height: normal;}


/***** PAGE CLIENTS *****/
/************************/
.contentinner .logo_client{
	float: left;
	margin:10px;
}
.contentinner .logo_client img{
	/*border: 1px solid #dddddd;*/
	/*width: 153px;*/
	height: 106px;
}


/***** PAGE RÉALISATIONS *****/
/*****************************/
.realisation-item{
	float: left;
	margin: 0 8px 10px 0; 
}


/***** HOME PAGE STYLES *****/
/****************************/

.servicelist { list-style: none; margin: 25px 0; overflow: hidden; }

.icon { float: left; padding-bottom: 10px; background: url(../../files/click-on/theme/images/msgtail.png) no-repeat center bottom; }
.iconinner { display: block; width: 45px; height: 45px; background-color: #444; background-repeat: no-repeat; background-position: center center; }
.icon-settings { background-image: url(../../files/click-on/theme/images/icons/whiteicons/settings.png); }
.icon-colorpicker { background-image: url(../../files/click-on/theme/images/icons/whiteicons/colorpicker.png); }
.icon-phone { background-image: url(../../files/click-on/theme/images/icons/whiteicons/phone.png); }

.jcarousel-list li { position: relative; width: 230px; height: 130px; margin-right: 20px; overflow: hidden; }
.jcarousel-list .jcarousel-clip { overflow: hidden; }
.jcarousel-list li .postinfo { 
	position: absolute; 
	top: 105px; 
	left: 0; 
	width: 210px; 
	padding: 0px 10px; 
	height: 130px; 
	background: url(../../files/click-on/theme/images/transblack.png);
	text-align: center;
}
.jcarousel-list li .postinfo h4,.jcarousel-list li .postinfo h3 { font-size: 14px; color: #fff; margin-bottom: 10px; }
.jcarousel-list li .summary { display: block; font-size: 12px; color: #B8B8B8; line-height: 16px; }
.jcarousel-list li .postinfo h4 a,.jcarousel-list li .postinfo h3 a { color: #fff; }
.jcarousel-list li .viewpost { 
	display: block; 
	width: 130px;
	height: 20px; 
	background: #000 url(../../files/click-on/theme/images/more.png) no-repeat 120px center; 
	position: absolute; 
	bottom: 0; 
	right: 0; 
}

.jcarousel-list li a.viewpost{
	font-size: 11px;
	padding-left: 5px;
}

.jcarousel-list li a.viewpost:hover{
	color: #ffffff;
}

.jcarousel-prev { 
	position: absolute; 
	right: 21px; 
	top: 0;
	display: block; 
	width: 20px; 
	height: 21px; 
	background: url(../../files/click-on/theme/images/widgetnav.png) no-repeat 5px 5px; opacity: 0.5;
}
.jcarousel-next { 
	position: absolute; right: 0; 
	top: 0;
	display: block; 
	width: 20px; 
	height: 21px; 
	background: url(../../files/click-on/theme/images/widgetnav.png) no-repeat -39px 5px; opacity: 0.5;
}
.jcarousel-prev:hover, .jcarousel-next:hover { opacity: 1; cursor: pointer; }
.jcarousel-prev-disabled, .jcarousel-next-disabled,
.jcarousel-prev-disabled:hover, .jcarousel-next-disabled:hover { cursor: default; opacity: 0.3; }

.newsletterform { display: block; }
.newsletterform input { width: 165px; display: inline-block; margin-right: 5px; }

#service-accordion h3 { border-bottom: 1px dashed #eee; }
#service-accordion .ui-accordion-content { border-bottom: 1px dashed #eee; }

#accueil .one_half p{
	margin-bottom: 10px;
}

.service-right{
	float: left;
	width: 33%;
	margin-bottom: 30px;
}

.service-right h1 { 
	line-height: 35px; 
	padding-left: 40px;
	color: #424445;
	font-size: 20px;
	padding-bottom: 10px;
}

.icon-conception-graphique h1{background: url(../../files/click-on/theme/images/icons/35-35-concept-graphique.png) no-repeat 0px 0px;}
.icon-webmarketing h1{background: url(../../files/click-on/theme/images/icons/35-35-web-marketing.png) no-repeat 0px 0px;}
.icon-maintenance h1{background: url(../../files/click-on/theme/images/icons/35-35-maintenance.png) no-repeat 0px 0px;}
.icon-hebergement h1{background: url(../../files/click-on/theme/images/icons/35-35-hebergement.png) no-repeat 0px 0px;}
.icon-dns h1{background: url(../../files/click-on/theme/images/icons/35-35-noms-de-domaine.png) no-repeat 0px 0px;}
.icon-developpement h1{background: url(../../files/click-on/theme/images/icons/35-35-developpement.png) no-repeat 0px 0px;}

.service-right p { 
	margin-top: 5px;
	margin-right: 30px;
	font-size: 13px;
	font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif !important;
	line-height: normal;
}

.service-right .readmore{ 
	font-weight: bold; 
	font-family: "Roboto", sans-serif;
	font-size: 12px;
	color: #424445;
}

.service-right .readmore:after {
	 content: "→";
	 color: #FF9C00;
	 font-size: 18px;
	 line-height: 18px;
	 padding-left: 5px;
 }


.service-right .readmore:hover{ 
	color: #FF9C00;
}

/***** SERVICES STYLES *****
/***************************/

.serviceslist { list-style: none; margin: 50px 0; }
.serviceslist li .servicepanel { border-right: 1px dotted #ddd; padding-right: 20px; }
.serviceslist li:last-child .servicepanel { border-right: 0; }
.serviceslist .servicepanel h4 { text-transform: uppercase; margin-left: 80px; }
.serviceslist .servicepanel .servicelogo { display: block; float: left; }
.serviceslist .servicepanel p { margin: 10px 0 10px 80px; }
.serviceslist .servicepanel .readmore { font-weight: bold; }

/***** PORTFOLIO STYLES *****/
/****************************/

.portfoliowrapper { float: left; clear:both; overflow: hidden; }
.portfoliowrapper .preloader { background:url(../../files/click-on/theme/images/loader.gif) center center no-repeat #ffffff; display: block; }

.pcolumn { 
	margin: 0 8px 10px 0; 
	float: left; 
}
.clast { margin-right: 0; }

.cfour { width: 239px; }
.cthree { width: 313px; }
.ctwo { width: 480px; }

.pcategory { 
	display:flex;
	flex-flow: row wrap;
	gap:10px;
	margin-bottom: 20px;
	margin-top: 20px;
}
.pcategory li { 
	display: inline-block; 
	font-size: 16px;
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}
.pcategory li a { 
	display: block; 
	color: black; 
	background-color:rgba(0,0,0,0.05);
	padding:5px 15px;
	border-radius: 10px 20px;
}
.pcategory li a:hover{
	background-color: #424445;
	color: white;
}
.pcategory li.active a { 
	background-color: #FF9C00;
	color: white;
}

.pcontent { 
	padding: 0px; 
	font-size: 11px; 
	line-height: 18px; 
}
.pcontent:hover { 
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1); 
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1); 
	box-shadow: 0 0 5px rgba(0,0,0,0.1); 
}
.pimg { position: relative; overflow: hidden; display: flex;}
.poverlay { 
	position: absolute;
	left: 20px;
	bottom: -115px;
	right:20px;
	display: block;
	height: 150px;
	background: white;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
	-webkit-border-top-left-radius: 25px;
	-webkit-border-top-right-radius: 25px;
	-moz-border-radius-topleft: 25px;
	-moz-border-radius-topright: 25px;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px){
	.poverlay { 
		bottom:0;
		right:20px;
	}
}
@media only screen and (min-width: 600px) and (max-width: 768px){
	.pimg{
		display: grid;
		grid-template-columns: auto 1fr;
	}
	.poverlay { 
		position: inherit;
		height: auto;
		border-radius: 0;
		left:auto;
		right:auto;
		bottom: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
}
@media only screen and (max-width: 600px){
	.poverlay { 
		bottom:0;
		right:20px;
	}
}
.poverlay a { 
	display: inline-block; 
	width: 115px; 
	padding: 0px 10px;
	height: 25px; 
	line-height: 25px;
	background-color: #000; 
	background-repeat: no-repeat; 
	background-position: 125px center; 
	position: absolute; 
	bottom: 0;
}
.poverlay a.more:hover { 
	color: #ffffff;
}

.poverlay a.more {
	width: auto;
	left:10px;
	right:10px;
	background: #ff9c00;
	color: white;
	-webkit-border-top-left-radius: 25px;
	-webkit-border-top-right-radius: 25px;
	-moz-border-radius-topleft: 25px;
	-moz-border-radius-topright: 25px;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	font-size: 1rem;
	text-align: center;
	padding: 10px;
	font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
}
@media only screen and (min-width: 600px) and (max-width: 768px){
	.poverlay a.more{
		position: inherit;
		border-radius: 20px;
		padding:5px;
	}
}
.poverlay .title { 
	font-size:16px;
	margin: 0 10px 10px 10px; 
	line-height: 21px;
	color: black; 
}
.poverlay h3{
	font-weight: 600;
}
.poverlay div,
.poverlay p{
	color:black;
	font-size: 12px; 
}
.summary{
	color: #b8b8b8; 
	margin: 0 5px;
	font-size: 12px; 
}

.poverlay a.zoom { right: 33px; background-image: url(../../files/click-on/theme/images/zoom.png); }
.ptitle { font-size: 14px; margin: 10px 0; line-height: 21px; }
.ptitle a { color: #424445; display: block; }

/* WITH AUTHOR */
.ptitle_author { margin-bottom: 0; }
.pauthor_thumb { padding: 2px; display: block; float: left; border: 1px solid #ddd; margin: 10px 10px 0 0; }
.pdesc_author { margin-top: 15px; }

/* COLUMN THREE */
.pcolumnthree .poverlay { width: 291px; height: 160px; }

/* COLUMN TWO */
.pcolumntwo .poverlay { width: 458px; height: 270px; }
.pcolumntwo .pdesc { line-height: 21px; }

/* BORDERLESS */
.borderless4 .pcontent { padding: 0; border: 0; margin-bottom: 20px; }
.borderless4 .pcontent:hover { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.borderless4 .poverlay { width: 230px; }

.borderless3 .pcontent { padding: 0; border: 0; margin-bottom: 20px; }
.borderless3 .pcontent:hover { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.borderless3 .poverlay { width: 313px; }

.borderless2 .pcontent { padding: 0; border: 0; margin-bottom: 20px; }
.borderless2 .pcontent:hover { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.borderless2 .poverlay { width: 480px; }

.portbutton { margin: 20px 0; }
.portbutton a { display: block; text-align: center; padding: 10px 20px; font-weight: bold; color: #fff; text-transform: uppercase; }
.portbutton a:hover { 
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.portbutton a.preview { background: #444; border: 1px solid #444; margin-bottom: 10px; }
.portbutton a.preview:hover { background-color: #424445; border-color: #222; }
.portbutton a.download { border: 1px solid; }
.portbutton a.download:hover { background-color: #f36701; border-color: #c95601; }

.nextprev { position: absolute; top: 0; right: 0; font-size: 24px; overflow: hidden; clear: both; display: inline-block; }
.nextprev a { 
	float: left; display: inline-block; color: #666; border: 1px solid #ddd; width: 30px; height: 30px; 
}
.nextprev a.npprev { 
	border-right: 0; -moz-border-radius: 2px 0 0 2px; -webkit-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px; 
	background: url(../../files/click-on/theme/images/pagiarrow.png) no-repeat 8px 10px;
}
.nextprev a.npprev:hover { background-position: 8px -30px; }
.nextprev a.npnext { 
	-moz-border-radius: 0 2px 2px 0; -webkit-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; 
	background: url(../../files/click-on/theme/images/pagiarrow.png) no-repeat -29px 10px;
}
.nextprev a.npnext:hover { background-position: -29px -30px; }
.nextprev a:hover { background-color: #666; color: #fff; border-color: #555; }

.portable { width: 100%; border-spacing: 0; }
.porttable tr td { border-bottom: 1px dotted #ccc; color: #424445; background-repeat: no-repeat; background-position: 0 center; }
.porttable tr td:first-child { padding-left: 30px; }
.porttable tr td:last-child { font-weight: bold; }
.porttable tr td a:hover { text-decoration: underline; }
.porttable tr td.published { background-image: url(../../files/click-on/theme/images/icons/time.png); }
.porttable tr td.like { background-image: url(../../files/click-on/theme/images/icons/love.png); }
.porttable tr td.downloads { background-image: url(../../files/click-on/theme/images/icons/arrowdown.png); }
.porttable tr td.views { background-image: url(../../files/click-on/theme/images/icons/view.png); }
.porttable tr td.url { background-image: url(../../files/click-on/theme/images/icons/link.png); }

.slidenav { list-style: none; text-align: center; padding: 10px 0 2px 0; background: #f7f7f7; border: 1px solid #ddd; border-top: 0; }
.slidenav li { display: inline-block; margin-right: 5px; border: 1px solid #ddd; padding: 5px; background: #fff; }
.slidenav li a { display: block; opacity: 0.5; }
.slidenav li a:hover { opacity: 1; }
.slidenav li.activeSlide a { opacity: 1; }
.slidenav li img { width: 50px; height: 50px; } 


/***** FORM STYLES *****/
/***********************/

form { display: block; }
.address form input.checkbox{
	width:inherit;
}
form input, form textarea { 
	border: 1px solid #ddd;
	padding: 5px 5px;
	background: #fcfcfc;
	-moz-border-radius: 2px; 
	-webkit-border-radius: 2px;
	border-radius: 2px;
	margin-bottom: 5px;
}
form input:focus, form textarea:focus { 
	border-color: #bbb; 
	background: #fff; 
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
	color: #444;
}
form button { 
	padding: 10px 20px; 
	color: #fff;
	-moz-border-radius: 20px !important;
	-webkit-border-radius: 20px !important;
	border-radius: 20px !important;
	border:none !important;
}
form button:hover { cursor: pointer; }
form button:active { background: #444; }

form input.error, form input.error:focus,  form textarea.error, form textarea.error:focus { border-color: #ff0000; }
form label.error { font-size: 11px; display: block; color: #ff0000; margin-top: 5px; font-style: italic; }


::-webkit-input-placeholder  {
   color: #d2d2d2;
}

:-moz-placeholder { /* Firefox 18- */
   color: #d2d2d2; 
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #d2d2d2;
}

:-ms-input-placeholder {  
   color: #d2d2d2;
}


.address form p.error{
	margin: 0px;
	background: url(../../files/click-on/theme/images/icons/error.png) no-repeat 0px 0px;
	padding-left: 20px;
	font-style: italic;  
	line-height: 16px;
	font-size: 12px;
	color: #ff6262;
	margin-bottom: 5px;
}

form span.mandatory{display: none;}
form span.captcha_text{
	border: 1px solid #ff0000;
	padding: 3px 5px;
	font-weight: bold;
	color: #000000;
	background-color: #fbc2c2;
}

form span.captcha_text:before {
	 content: "→";
	 color: #ff0000;
	 font-size: 18px;
	 line-height: 18px;
	 padding-right: 5px;
 }

form label.mandatory {color: #FF6c00;}


.submit_container{
	padding-top: 10px;
}

.submit_container input.submit{
	float: right;
	width: auto;
}

#confirmation-envoi .ce_text h4{margin-bottom: 25px;} 
#confirmation-envoi .ce_text p{
	margin-bottom: 15px;
	font-size: 14px; 
	font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
} 


/***** BLOG STYLES *****/
/***********************/

.blogpanel { margin: 40px 0; border-bottom: 1px solid #eee; }
.blogpanel:first-child { margin-top: 0; }

.blogcategory { margin-bottom: 10px; line-height: normal; }
.blogcategory a { color: #999; }

.blogtitle { margin-bottom: 20px; line-height: normal; }
.blogtitle a { color: #424445; }

.blogimg { position: relative; display: block; margin: 25px 0; clear: both; }
.blogimg a { height: 320px; display: block; overflow: hidden; }
.blogimg img { width: 100%; }
.blogimg .flex-direction-nav a { height: 60px; }
.blogimg span { 
	display: none; border: 10px solid #fff; opacity: 0.5; width: 660px; height: 300px; position: absolute; top: 0; 
	left: 0; z-index: 5; background: #bbb; 
}

.blogmeta { list-style: none; margin-bottom: 25px; overflow: hidden; clear: both; }
.blogmeta li { display: inline-block; font-size: 11px; float: left; margin-right: 10px; }
.blogmeta li a { display: block; padding: 2px 10px 2px 30px; border: 1px solid #ddd; color: #666; background-repeat: no-repeat; }
.blogmeta li a:hover { background-color: #eee; border: 1px solid #ccc; }
.blogmeta li.date a { background-image: url(../../files/click-on/theme/images/meta.png); background-position: 5px 4px; }
.blogmeta li.author a { background-image: url(../../files/click-on/theme/images/meta.png); background-position: 5px -28px; }
.blogmeta li.tags a { background-image: url(../../files/click-on/theme/images/meta.png); background-position: 7px -60px; }
.blogmeta li.comment a { background-image: url(../../files/click-on/theme/images/meta.png); background-position: 7px -91px; }

.blogsummary { margin: 25px 0 40px 0; }
.blogsummary p { margin: 20px 0; }
.blogsummary .readmore { font-weight: bold; }
.blogsummary ul, .blogsummary ol { margin: 20px 25px; }

.blogpanel-smallthumb .blogimg { float: left; width: 300px; margin: 5px 0 0 0; }
.blogpanel-smallthumb .blogimg a { height: 200px; overflow: hidden; }
.blogpanel-smallthumb .blogimg .flex-control-nav a { height: 10px; }
.blogpanel-smallthumb .blogimg .flex-direction-nav a { height: 65px; }
.blogpanel-smallthumb .blogimg span { width: 280px; height: 180px; }
.blogpanel-smallthumb .blogimg img { height: 100%; }
.blogpanel-smallthumb .blogsummary { margin-left: 330px; margin-bottom: 25px; min-height: 205px; }


/* override flexslider styles */
.flex-control-nav { bottom: 0; }
.flexslider { 
	margin: 0; background: none; border: 0; padding: 0; -moz-border-radius: none; -webkit-border-radius: none; border-radius: none; 
	-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}


/***** BLOG SINGLE STYLES *****/
/******************************/

.shareblog { background: #f7f7f7; list-style: none; overflow: hidden; margin: 25px 0; }
.shareblog li { float: left; display: inline-block; border-right: 1px solid #fff; }
.shareblog li.label h4 { padding: 10px 20px; font-size: 14px; text-transform: uppercase; background: #eee; }
.shareblog li a { display: block; width: 45px; height: 46px; background-repeat: no-repeat; background-position: 7px 5px; }
.shareblog li a:hover { background-position: 7px -60px; }
.shareblog li a:active { background-color: #999; }
.shareblog li a.twitter { background-image: url(../../files/click-on/theme/images/icons/social/twitter.png); }
.shareblog li a.facebook { background-image: url(../../files/click-on/theme/images/icons/social/facebook.png); }
.shareblog li a.gplus { background-image: url(../../files/click-on/theme/images/icons/social/gplus.png); }
.shareblog li a.pinterest { background-image: url(../../files/click-on/theme/images/icons/social/pinterest.png); }
.shareblog li a.yahoo { background-image: url(../../files/click-on/theme/images/icons/social/yahoo.png); }
.shareblog li a.linkedin { background-image: url(../../files/click-on/theme/images/icons/social/linkedin.png); }

.sectitle, #accueil .one_half h1{ font-size: 16px; text-transform: uppercase; color: #424445; padding-bottom: 0px; border-bottom: 1px solid #ddd; margin-bottom: 15px; }
.sectitle{font-size:2.2rem;border:none;}
@media only screen and (max-width: 990px) {
	.sectitle{font-size:1.8rem;}
}
.sectitle span, #accueil .one_half span { display: inline-block; }

.authorinfo { position: relative; overflow: hidden; margin: 25px 0; }
.authorinfo .authorimg { float: left; padding-top: 5px; }
.authorinfo .authordetails { margin-left: 115px; }
.authorinfo .authordetails p { margin: 10px 0; }
.authorinfo .authordetails h4 { margin-bottom: 10px; }

.relatedpost { list-style: none; overflow: hidden; margin: 25px 0; }
.relatedpost li { overflow: hidden; }
.relatedpost a.relatedimg { display: block; position: relative; }
.relatedpost a.relatedimg span { 
	background: #bbb; position: absolute; top: 0; left: 0; width: 192px; height: 110px; border: 10px solid #fff; opacity: 0.4; display: none; 
}
.relatedpost .relatedtitle { margin-top: 10px; font-size: 14px; }
.relatedpost .relatedtitle a { color: #666; }

.blogcomments { list-style: none; }
.blogcomments li { display: block; overflow: hidden; clear: both; border-bottom: 1px solid #eee; padding-bottom: 25px; margin-bottom: 25px; }
.blogcomments li:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.blogcomments li .authorimg { display: block; float: left; margin-right: 20px; padding: 5px; border: 1px solid #eee; }
.blogcomments li .comment { margin-left: 95px; position: relative; }
.blogcomments li:last-child .comment { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.blogcomments li .replybutton { 
	position: absolute; top: 0; right: 0; display: inline-block; font-size: 10px; font-weight: bold; text-transform: uppercase; color: #424445; 
	background: #eee; padding: 3px 10px; line-height: normal;  
}
.blogcomments li .replybutton:hover { color: #fff; }
.blogcomments li .commentauthor { border-bottom: 1px dashed #eee; padding-bottom: 5px; }
.blogcomments li .commenttime { font-size: 11px; color: #999; display: inline-block; margin-left: 10px; }
.blogcomments li .commentbody { margin-top: 15px; }
.blogcomments ul { margin-left: 95px; margin-top: 25px; border-top: 1px solid #eee; padding-top: 25px; }
.blogcomments ul li:last-child .comment { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.commentform { margin: 25px 0; }
.commentform p { margin: 20px 0; }
.commentform p label { color: #424445; padding-top: 7px; float: left; width: 100px; font-size: 14px; text-transform: uppercase; }
.commentform p span.field { margin-left: 100px; display: block; padding-right: 20px; }
.commentform p input { 
	width: 100%; background: #fff; padding: 12px 10px; border: 1px solid #ddd; 
}
.commentform p input:focus { border-color: #bbb; }
.commentform p textarea { width: 100%; background: #fff; resize: vertical; display: block; }


/***** PAGINATION STYLES *****/
/*****************************/

.pagination { clear: both; overflow: hidden; margin: 25px 0; list-style: none; }
.pagination li { display: inline-block; float: left; font-weight: bold; margin-right: 5px; }
.pagination li span.dotdot { display: block; padding: 5px 10px; }
.pagination li a,.pagination li span { display: block; padding: 5px 10px; border: 1px solid #ddd; color: #666; }
.pagination li a:hover { background: #999; color: #fff; border-color: #888; }
.pagination li.current a, .pagination li span.current { color: #fff; }
.pagination li a span { font-size: 18px; line-height: 0; }
.pagination li.prev a, .pagination li.next a { 
	width: 8px; height: 21px; background-repeat: no-repeat; 
	-moz-transition: border,background-color 0.2s ease-out 0s; -webkit-transition: border,background-color 0.2s ease-out 0s; 
	transition: border,background-color 0.2s ease-out 0s; 
}
.pagination li.prev a { background-image: url(../../files/click-on/theme/images/pagiarrow.png); background-position: 8px 10px; }
.pagination li.prev a:hover { background-position: 8px -30px; }
.pagination li.next a { text-indent:-50000px;background-image: url(../../files/click-on/theme/images/pagiarrow.png); background-position: -29px 10px; }
.pagination li.next a:hover { background-position: -29px -30px; }
.pagination li.first a span { margin-right: 20px; }
.pagination li.last a span { margin-left: 20px; }

.pagination li span.current { background-color: #FF6C00; }

/***** WITH SIDEBAR *****/
/************************/

.leftsidebar .portfoliowrapper, .leftsidebar .contentinner { float: right; width: 680px; margin-left: 50px; }
.rightsidebar .portfoliowrapper, .rightsidebar .contentinner { float: left; width: 680px; margin-right: 50px; }

.leftsidebar .cthree, .rightsidebar .cthree { width: 213px; }
.leftsidebar .cthree .pimg img, .rightsidebar .cthree .pimg img { margin-left: -30px; }
.leftsidebar .cthree .poverlay, .rightsidebar .cthree .poverlay { width: 213px; }

.leftsidebar .ctwo, .rightsidebar .ctwo { width: 330px; }
.leftsidebar .ctwo .pimg, .rightsidebar .ctwo .pimg { height: 200px; }
.leftsidebar .ctwo .pimg img, .rightsidebar .ctwo .pimg img { margin-left: -30px; margin-top: -30px; }
.leftsidebar .ctwo .poverlay, .rightsidebar .ctwo .poverlay { width: 330px; height: 200px; }

.sidebar { float: left; width: 250px; position: sticky; top:155px; }
.sidebar .inside{ margin-top: 2rem; padding-left:10px;}

.leftsidebar .sidebar { left: 0; }
.rightsidebar .sidebar { right: 0; }

.sidebartitle { 
	font-size: 16px; line-height: 21px; text-transform: uppercase; color: #424445; padding-bottom: 5px; 
	border-bottom: 1px solid #ddd; margin-bottom: 25px; 
}
.sidebartitle span { display: inline-block; }
.sidebarcontent { margin-bottom: 40px; }
.sidebarcontent a,.sidebarcontent span{font-size:18px;}

.postswidget-nav { position: absolute; top: -53px; right: 0; }
.postswidget-nav a { display: inline-block; background-color: #eee; background-repeat: no-repeat; width: 20px; height: 21px; opacity: 0.6; }
.postswidget-nav a:hover { opacity: 1; }
.postswidget-nav a.prev { background-image: url(../../files/click-on/theme/images/widgetnav.png); background-position: 5px 5px; }
.postswidget-nav a.next { background-image: url(../../files/click-on/theme/images/widgetnav.png); background-position: -38px 5px; }


/***** SIDEBAR: FEATURED WORK *****/
/**********************************/

.textwidget p { margin: 20px 0; }
.linklistwidget ul { list-style: none; }
.linklistwidget ul li { 
	background: url(../../files/click-on/theme/images/list1.png) no-repeat 0 11px; display: block; padding: 7px 0; border-bottom: 1px solid #eee; 
	padding-left: 20px; 
}
.linklistwidget ul li a { color: #424445; font-weight: bold; }
.linklistwidget ul li.current a{ color: #FF6C00; font-weight: bold; }
.linklistwidget ul li span.desc { font-size: 11px; display: block; }

.categorylist { list-style: none; }
.categorylist li { display: block; background: url(../../files/click-on/theme/images/list1.png) no-repeat 0 11px; display: block; padding: 7px 0; border-bottom: 1px solid #eee; 
	padding-left: 20px;
}
.categorylist li a { display: block; color: #666; }


/***** SIDEBAR: TAGLIST *****/
/****************************/

.taglist { list-style: none; }
.taglist li { display: inline-block; margin: 0 5px 10px 0; font-size: 11px; line-height: 20px; } 
.taglist li a { display: block; background: url(../../files/click-on/theme/images/tag.png) no-repeat 0 0; padding-left: 13px; }
.taglist li a span { background: #f7f7f7; color: #666; padding: 2px 10px 2px 5px; display: block; border: 1px solid #ddd; border-left: 0;}
.taglist li a:hover { background-position: 0 -26px; }
.taglist li a:hover span { border-color: #cf5902; color: #fff; }


/***** SIDEBAR: TRENDING POSTS *****/
/***********************************/

.trending-posts { list-style: none; clear: both; height: 160px; position: relative; }
.trending-posts li { display: block; overflow: hidden; width: 250px; height: 160px; position: relative; }
.trending-posts li .desc { position: absolute; top: 115px; left: 0; width: 230px; height: 140px; padding: 10px; background: url(../../files/click-on/theme/images/transblack.png); }
.trending-posts li h4 { font-size: 14px; color: #fff; margin-bottom: 10px; }
.trending-posts li h4 a { color: #fff; }
.trending-posts li .summary { display: block; font-size: 11px; color: #999; line-height: 16px; }
.trending-posts li .viewpost { display: block; width: 32px; height: 32px; background: #000 url(../../files/click-on/theme/images/more.png) no-repeat center center; position: absolute; bottom: 0; right: 0; 
}



/***** POST LIST *****/
/*********************/

.postlist { list-style: none; }
.postlist li { display: block; padding: 10px 0; border-bottom: 1px dashed #ddd; clear: both; overflow: hidden; }
.postlist li:first-child { padding-top: 0; }
.postlist li:last-child { border-bottom: 0; text-align: right; font-weight: bold; }
.postlist .listimg { float: left; width: 100px; height: 70px; display: block; overflow: hidden; padding: 5px 0 10px 0; position: relative; }
.postlist .listimg img { height: 70px; }
.postlist .listimg span { 
	background: #bbb; position: absolute; top: 5px; left: 0; width: 90px; height: 60px; border: 5px solid #fff; opacity: 0.4; display: none; 
}
.postlist .listsummary { float: left; margin-left: 15px; width: 135px; overflow: hidden; }
.postlist .listsummary h4 { font-size: 14px; line-height: 18px; }
.postlist .listsummary h4 a { color: #424445; }
.postlist .listdate { display: block; color: #999; font-size: 11px; }


/***** COMMENT LIST *****/
/************************/

.commentlist { list-style: none; }
.commentlist li { display: block; padding: 10px 0; border-bottom: 1px dashed #ddd; clear: both; overflow: hidden; }
.commentlist li:first-child { padding-top: 0; }
.commentlist li:last-child { border-bottom: 0; }
.commentlist .listimg { float: left; width: 50px; height: 50px; display: block; overflow: hidden; padding: 5px 0 10px 0; position: relative; }
.commentlist .listimg img { height: 50px; }
.commentlist .listtitle { color: #999; }
.commentlist .listtitle a { font-weight: bold; color: #666; }
.commentlist .listsummary { margin-left: 60px; }
.commentlist .commentsummary { font-size: 11px; line-height: 18px; }
.commentlist .listdate { font-size: 11px; color: #999; }


/***** SIDEBAR: TESTIMONIAL SLIDE *****/
/**************************************/

.testi-list { list-style: none; }
.testi-list li { display: block; padding: 20px; border: 1px solid #eee; background: #fcfcfc; }
.testi-list li p.author { margin-top: 20px; text-align: right; color: #999; }
.testi-list li p.author strong { color: #424445; display: block; }


/***** CONTACT STYLES *****/
/**************************/

.addresstitle { border-bottom: 1px dashed #ddd; padding-bottom: 25px; margin-bottom: 25px; }

.address form { padding-right: 20px; }
.address form p { margin: 20px 0; padding-right: 2px; }
.address form input, .address form textarea { width: 100%; }
.address form textarea { height: 100px; }
.address .successmsg { margin: 25px 0; clear: both; display: none; border: 1px solid #C1D779; background: #EFFEB9; padding: 7px 10px; color: #424445; }

.map { 
	padding: 0px; 
	border: 1px solid #FF9C00; 
	margin-top: 20px; 
	background: #fff; }


/***** ACCORDION *****/
/*********************/

.ui-accordion .ui-accordion-header { 
	outline: none; font-size: 14px; border-bottom: 1px solid #ddd; background: url(../../files/click-on/theme/images/plus.png) no-repeat 0 center; }
.ui-accordion .ui-accordion-header a { color: #424445; padding: 5px 0 5px 30px; display: block; }
.ui-accordion .ui-accordion-header a:hover { color: #000; }
.ui-accordion .ui-accordion-header a span { 
	font-size: 11px; font-weight: normal; color: #999; font-family: Arial, Helvetica, sans-serif; display: block; line-height: normal; 
	margin-bottom: 10px; 
}
.ui-accordion .ui-accordion-header a:hover span { color: #666; }
.ui-accordion .ui-state-active { background-image: url(../../files/click-on/theme/images/minus.png); }
.ui-accordion .ui-state-active a span, .ui-accordion .ui-state-active a:hover span { color: #666; }
.ui-accordion div.ui-accordion-content { padding: 10px 0; border-bottom: 1px solid #ddd; }


/***** TABS *****/
/****************/

.ui-tabs-nav { list-style: none; clear: both; border-bottom: 1px solid #ccc; height: 37px; }
.ui-tabs-nav li { display: inline-block; float: left; margin-right: 1px; }
.ui-tabs-nav li a { border: 1px solid #fff; background: #fff; display: block; color: #666; padding: 7px 15px; }
.ui-tabs-nav li a:hover { color: #424445; }
.ui-tabs-nav li.ui-tabs-selected a { 
	padding: 6px 15px 8px 15px; border-color: #ccc; border-bottom: 1px solid #fff; border-top: 2px solid #ccc; 
}
.ui-tabs-panel { clear: both; margin: 20px 0; }
.ui-tabs-hide { display: none; }


/***** CAREER STYLES *****/
/*************************/

.careerlist .ui-accordion .ui-accordion-header { font-size: 18px; }
.careerlist .ui-accordion-content { padding: 25px 0px 25px 30px; }
.careerlist ul { margin: 25px 0; padding: 0 15px; }


/***** SIDE NAVIGATION *****/
/***************************/

.sidemenu { list-style: none; }
.sidemenu li { display: block; margin-bottom: 1px; }
.sidemenu li a { display: block; padding: 10px; background: #f7f7f7; color: #666; font-weight: bold; }
.sidemenu li a:hover { background: #eee; color: #424445; }
.sidemenu li a.active { color: #fff; }
.sidemenu li:first-child a { -moz-border-raidus: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; }
.sidemenu li:last-child a { -moz-border-radius: 0 0 2px 2px; -webkit-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px; }

.sidecontent { overflow: hidden; }
.sidebarcontentwrapper { overflow: hidden; }
.sidecontentinner { float: left; }


/***** LIST STYLES *****/
/***********************/

.list { margin: 20px 0; }
.list li { padding-left: 30px; display: block; margin-bottom: 5px; }
.list-type1 li { background: url(../../files/click-on/theme/images/list/list-type1.png) no-repeat 0 2px; }
.list-type2 li { background: url(../../files/click-on/theme/images/list/list-type2.png) no-repeat 0 2px; }
.list-type3 li { background: url(../../files/click-on/theme/images/list/list-type3.png) no-repeat 0 4px; }
.list-type4 li { background: url(../../files/click-on/theme/images/list/list-type4.png) no-repeat 0 2px; }
.list-type5 li { background: url(../../files/click-on/theme/images/list/list-type5.png) no-repeat 0 2px; }
.list-type6 li { background: url(../../files/click-on/theme/images/list/list-type6.png) no-repeat 0 4px; }



/***** NOTIFICATION STYLES *****/
/*******************************/

.notibar { 
	height: 51px; overflow: hidden; position: relative; margin-bottom: 20px; -moz-border-radius: 2px; 
	-webkit-border-radius: 2px; border-radius: 2px; line-height: 21px; -moz-box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.8); 
	-webkit-box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.8); box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.8);
}
.notibar p { margin: 15px 10px 0 55px; font-size: 13px; color: #424445; }
.notibar a.close { 
	position: absolute; width: 14px; height: 14px; top: 5px; right: 5px; background-image: url(../../files/click-on/theme/images/close.png); background-repeat: no-repeat; }
.notibar a.close:hover { cursor: pointer; }
.msgalert a.close { background-position: -14px 0; }
.msgalert a.close:hover { background-position: -14px -14px; }
.msginfo a.close { background-position: -42px 0; }
.msginfo a.close:hover { background-position: -42px -14px; }
.msgsuccess a.close { background-position: -28px 0; }
.msgsuccess a.close:hover { background-position: -28px -14px; }
.msgerror a.close { background-position: 0 0; }
.msgerror a.close:hover { background-position: 0 -14px; }
.announcement a.close { background-position: -56px 0; }
.announcement a.close:hover { background-position: -56px -14px; }

.msgalert { border: 1px solid #eac572; background: #ffe9ad url(../../files/click-on/theme/images/notifications.png) no-repeat 0 -52px; }
.msginfo { border: 1px solid #99c4ea; background: #d1e4f3 url(../../files/click-on/theme/images/notifications.png) no-repeat 0 -156px; }
.msgsuccess { border: 1px solid #c1d779; background: #effeb9 url(../../files/click-on/theme/images/notifications.png) no-repeat 0 -104px; }
.msgerror { border: 1px solid #e18b7c; background: #fad5cf url(../../files/click-on/theme/images/notifications.png) no-repeat 0 0; }
.announcement { 
	border: 1px solid #fbe187; background: #ffffdf url(../../files/click-on/theme/images/advertisment-32.png) no-repeat 10px 10px; 
	color: #95673f; height: auto;
}
.announcement h3 { color: #95673f; margin: 15px 10px 10px 55px; line-height: normal; }
.announcement span { display: block; margin: 15px 10px 15px 55px; }


/***** PRICING STYLES ******/
/***************************/

.pricing { width: 700px; margin: 50px auto; }
.pricing-column { border: 1px solid #bbb; position: relative; padding: 10px; }
.pricing-column .btn { display: block; text-align: center; }
.pricing-header { 
	text-align: center; position: absolute; top: -10px; left: 23px; width: 170px; padding: 5px 0; background: #ccc; 
	text-transform: uppercase;
}
.pricing-inner { border: 1px solid #ddd; text-align: center; padding: 50px 0 20px 0; background: #fcfcfc; }
.pricing-inner h1 { font-size: 42px; }
.pricing-inner span { text-transform: uppercase; display: block; margin-top: 5px; }
.pricing-details { list-style: none; margin: 25px 0; }
.pricing-details li { display: block; text-align: center; padding: 10px 0; border-top: 1px dashed #ccc; }
.pricing-details li:first-child { padding-top: 0; border-top: 0; }


.pricing-best { 
	background: #f7f7f7; -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2); 
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.pricing-best .pricing-header { background-color: #424445; color: #fff; box-shadow: none; top: -20px; padding: 10px 0; }
.pricing-best .pricing-inner { background: #666; color: #fff; border-color: #555; }
.pricing-best .pricing-inner h1 { color: #fff; }

.pricingtable { width: 100%; border-collapse: collapse; border-spacing: 0; margin: 25px 0; }
.pricingtable td { padding: 10px 0; text-align: center; border-bottom: 1px dashed #ddd; vertical-align: middle; }
.pricingtable td img { display: inline; }
.pricingtable td .btn { display:  block; text-align: center; margin: 0 10px; }
.pricingtable tr td:first-child { text-align: left; font-weight: bold; }
.pricingtable tr td:first-child p { font-weight: normal; color: #999; }
.pricingtable tr td.best { background: #f7f7f7; }
.pricingtable tr:last-child td { border: 0; }
.pricingtable-head td div { 
	padding: 10px 0; text-align: center; background: #ccc; font-size: 14px; text-transform: uppercase; color: #424445; 
	margin-right: 1px;
}
.pricingtable-head td { border-bottom: 1px solid #ccc; padding: 0; }
.pricingtable-head td.empty { width: 40%; }
.pricingtable-head td.first, .pricingtable-head td.best, .pricingtable-head td.last { width: 20%; }
.pricingtable-head td.first div { -moz-border-radius: 2px 0 0 0; -webkit-border-radius: 2px 0 0 0; border-radius: 2px 0 0 0; }
.pricingtable-head td.last div { -moz-border-radius: 0 2px 0 0; -webkit-border-radius: 0 2px 0 0; border-radius: 0 2px 0 0; }
.pricingtable-head td.best div { color: #fff; background: #424445; }
.pricingtable-head td.best { border-color: #424445; }
.pricingtable-price { padding: 20px 0; }
.pricingtable-price h1 { font-size: 42px; }
.pricingtable-price span { text-transform: uppercase; display: block; margin-top: 5px; }



/***** FOOTER STYLES *****/
/*************************/

#footer { 
	/*background: #444; */
	margin-top: 5rem; 
	clear: both; 
}
.footerinner { 
	max-width: 1460px;
	margin: auto; 
	padding: 10px 0; 
	color: #999; 
}
.footerinner h4 { 
	color: #fff; font-size: 14px;
	text-transform: uppercase; 
	border-bottom: 1px solid #555; 
	padding-bottom: 5px; 
	margin-bottom: 5px; 
}

.footerinner ul { list-style: none; }
.footerinner a { color: #ccc; }

.footerinner .about { font-size: 11px; }
.footerinner .about ul li { display: inline-block; float: left; width:48.5%; margin-right: 3%; }
.footerinner .about ul li.last { margin-right: 0; }

.footerinner .posts ul li { border-bottom: 1px dashed #555; padding: 20px 0; }
.footerinner .posts ul li:first-child { padding-top: 0; }
.footerinner .posts ul li:last-child { border-bottom: 0; padding-bottom: 0; }
.footerinner .posts ul li a { font-weight: bold; }
.footerinner .posts ul li span { display: block; font-size: 11px; line-height: 18px; }



.footerinner .footer_partner{margin-top: 0px;}

.footerinner .footer_partner_item p{
	font-size: 11px; 
	line-height: 13px;
	padding-top: 5px;
	margin-right: 20px;
}
.footerinner .footer_partner_item img{float: left; margin-right: 5px;}

.footerbottom { background: #424445; color: #777; border-top: 1px solid #272727; font-size: 11px; overflow: hidden; }
.footerbottominner { max-width: 1460px; margin: auto; padding: 10px 0; }
.footerbottominner .left { float: left; }
.footerbottominner .right { float: right; }
.footerbottom a { color: #999; }
.footerbottom a:hover { color: #ccc; }
.footerbottom ul { list-style: none; }
.footerbottom ul li { float: left; display: inline-block; margin-left: 10px; border-left: 1px solid #474747; padding-left: 10px; }
.footerbottom ul li:first-child { border-left: 0; padding-left: 0; }
.footerbottom ul li a { display: block; }

.nav_footer a:hover { color: #ffffff;}
.nav_footer .current a span{ color: #FF9C00;}

/***** USING ROBOTO FONT *****/
/****************************/

h1,h2,h3,h4,
.btn-medium, .btn-large, 
.commentform p label,
.pricing-inner span, .btn-icon,
.pricingtable-head td div,
.pricingtable-price span,
.byone-slider .oneByOne_item,
.menupopup ul li, .menutitle { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; }

.sidebartitle span,
.pagetitle h1,
#accueil .one_half h1,
#accueil .one_half p,
.sectitle span, 
.pricing-inner h1,
.pricingtable-price h1,
.slidetxt2-1, .slidetxt2-2,
.slidetxt3-1, .slidetxt7-1, 
.slidetxt7-2, .slidetxt7-3, 
.slidetxt7-4, .slidetxt7-5,
.slidetxt8-1 { font-family: 'RobotoBoldCondensed', 'Helvetica Neue', Arial, sans-serif; }

/*revert to original*/
.slidetxt2-4, .slidetxt1-3,
.slidetxt3-3, .slidetxt8-2 { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; }


/***** USING #FF6C00 (PRIMARY) COLOR *****/
/*******************************/

a, a:active, .slidetxt1-2, .slidetxt6-2,
.jcarousel-list li .postinfo h4 a:hover,
.ptitle a:hover, .blogcategory a:hover,
.blogtitle a:hover, .relatedpost .relatedtitle a:hover,
.linklistwidget ul li a:hover, .categorylist li a:hover,
.trending-posts li h4 a:hover, .slidetxt9-2,
.postlist .listsummary h4 a:hover, .readmore span,
.commentlist .listtitle a:hover,
.ui-tabs-nav li.ui-tabs-selected a,
.footerinner a:hover, .slidetxt7-2 { color: #FF6C00; }

form button, .slidebg2-1, 
.jcarousel-list li .viewpost:hover, .poverlay a:hover,
.portbutton a.download, .shareblog li a:hover,
.blogcomments li .replybutton:hover,
.pagination li.current a, .taglist li a:hover span,
.trending-posts li .viewpost:hover,
.sidemenu li a.active { background-color: #444; }



.headerinner .menu, .sf-menu li a span, .portbutton a.download, form button,
.slidenav li.activeSlide, .blogcomments li .authorimg:hover,
.pagination li.current a, .footerinner .flickr ul li a:hover { border-color: #FF9C00; }


/***** USING #FF9C00 (SECONDARY) COLOR *****/
/*******************************/

.slidetxt3-1 span, .slidetxt4-2,
.sectitle span, .sidebartitle span,
#accueil .one_half h1,
.ui-accordion .ui-state-active a, 
.ui-accordion .ui-state-active a:hover { color: #FF9C00; }


.headerinner .logo h1 a span,
.slidebg3-2, form button:hover { background-color: #FF9C00; }


/***** WITH EASE ANIMATION *****/
/*******************************/

form input[type=text], 
form textarea,
form button,
.footerinner a,
.footerbottom a,
.pcontent,
.poverlay,
.poverlay a,
.ptitle a,
.pcategory li a,
.pagination li a,
.readmore span,
.linklistwidget ul li a,
.portbutton a,
.slidenav li a,
.categorylist li a,
.blogcategory a, .blogtitle a,
.blogmeta li a,
.flex-direction-nav a,
.postswidget-nav a,
.ui-accordion h3 a, .shareblog li a,
.relatedpost .relatedtitle a,
.blogcomments li .authorimg,
.blogcomments li .replybutton,
.blogcomments li .authorimg, .btn,
.sidemenu li a, .arrowButton div,
#trending li .viewpost:hover { 
	-moz-transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; 
}

.nextprev a {
	-moz-transition: background-color,border 0.2s ease-out 0s; -webkit-transition: background-color,border 0.2s ease-out 0s; 
	transition: background-color,border 0.2s ease-out 0s;	
}



/***** WITH BORDER RADIUS 2 *****/
/********************************/

.map,
form button,
.pagination li a,
.pcontent, .postimg,
.portbutton, .portbutton a,
.slidenav li, .blogmeta li a,
.blogimg a, .blogimg span,
.postswidget-nav a, 
.trending-posts li a,
.postlist .listimg,
.testi-list li, .shareblog li a:hover,
.blogcomments li .replybutton, 
.blogcomments li .authorimg, .btn,
.commentform p input, .address .successmsg,
.headlinebox, .pricing-column, .pricing-inner,
.pricing-header, .iconinner, .socialist li a,
.arrowButton div, .jcarousel-container .jcarousel-prev,
.jcarousel-container .jcarousel-next, .slidebg4-1, 
.onebyone-slider2 { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }

.btn{
	display: inline-block;
	-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; 
}
a.btn{
	padding:10px;
}
.flex-direction-nav li a, .trending-posts li .viewpost { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }


/***** WITH INSET SHADOW *****/
/*****************************/

form button,
.portbutton a,
.btn, .menutitle { 
}

.commentform p input {
	-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;	
}


/***** BLACK TEXT SHADOW *****/
/*****************************/

.portbutton a.download,
form button, .btn-orange,
.pricing-best .pricing-inner,
.slidetxt3-1 { /*text-shadow: 1px 1px rgba(0,0,0,0.2);*/ }

.btn-icon { /*text-shadow: 1px 1px rgba(250,250,250,0.2);*/ }


/***** CUSTOM STYLES *****/
/*************************/

.margin0 { margin: 0; }
.marginleft100,
.commentform p.marginleft100 { margin-left: 100px; }
.centeralign { text-align: center; }
.notfound a.btn { font-weight: bold; }
.color999 { color: #999; }
.clearall { clear: both; }
.posrel { position: relative; }

#main .mod_article .ce_text ul{
	margin-left:20px;
	list-style: disc;
}

/***** MEDIA QUERIES *****/
/*************************/
/* > 1024 screens */
@media only screen and (min-width: 1025px) {

	/* Réalisations */
	div.realisations div:nth-of-type(4n+4){
		margin-right: 0px;
	} 


}

/* 1024 screens */
@media only screen and (max-width: 1024px) {
	
	body.body-fixed .mainwrapper { width: 920px; }	
	.header, .maincontent, .footerinner, .footerbottominner, .pagetitle { width: 95%; }
	.headlinebox2 { padding: 5px 0; margin: 15px 0; }
	.headlinebox2 h1 { font-size: 20px; line-height: 28px; }
	.headlinebox2 h3 { font-size: 14px; line-height: 23px; margin-top: 5px; }
		
	/* home */
	.jcarousel-list li { width: 200px; }
	.jcarousel-list li .postinfo { width: 180px; }
	.newsletterform input { width: 120px; }
	.jcarousel-list li .postinfo h4 { font-size: 13px; }
	
	.rightsidebar .portfoliowrapper, .rightsidebar .contentinner { width: 560px; }
	.leftsidebar .portfoliowrapper, .leftsidebar .contentinner { width: 560px; }

	.service-right{	float: left; width: 285px; margin-bottom: 30px;}


	/* réalisations */
	div.realisations div:nth-of-type(3n+3){
		margin-right: 0px;
	} 
	.poverlay a{padding-left: 3px;}
	
	/* portfolio */
	.cfour { width: 200px; }
	.cthree { width: 273px; }
	.ctwo { width: 420px; }
	
	.cfour .poverlay { width: 200px; }
	.cthree .poverlay { width: 251px; }
	.ctwo .poverlay { width: 398px; }
	
	.borderless4 .poverlay { width: 200px; }
	.borderless3 .poverlay { width: 273px; }
	.borderless2 .poverlay { width: 420px; }
	
	.leftsidebar .cthree, .rightsidebar .cthree { width: 173px; }
	.leftsidebar .cthree .poverlay, .rightsidebar .cthree .poverlay { width: 173px; }
	
	.leftsidebar .ctwo, .rightsidebar .ctwo { width: 270px; }
	.leftsidebar .ctwo .poverlay, .rightsidebar .ctwo .poverlay { width: 270px; }

	/* blog */
	.blogimg a { height: 286px; }
	.blogimg span { width: 540px; height: 266px; }
	
	/* contat */
	.map iframe { width: 395px; }
	
	/* footer */
	.footerinner .flickr ul li a { margin: 0 8px 8px 0; }
	.footerinner .flickr ul li a img { width: 45px; }
}

/* iPad Portrait */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	body.body-fixed .mainwrapper { width: 768px; }
	.header, .maincontent, .footerinner, .footerbottominner, .pagetitle { width: 100%; }
	.headwrapper { margin-bottom: 20px; }
	.headlinebox2 { padding: 5px 0; margin: 15px 0; }
	.headlinebox2 h1 { font-size: 20px; line-height: 28px; }
	.headlinebox2 h3 { font-size: 14px; line-height: 23px; margin-top: 5px; }
	
	/* home */
	.newsletterform input { width: 200px; margin-bottom: 10px; }
	.newsletterform button { width: 222px; text-align: center; }
	
	.jcarousel-list li { width: 228px; margin-right: 17px; }
	.jcarousel-list li .postinfo { width: 208px; }

	.service-right{	float: left; width: 350px; margin-bottom: 15px;}

		/* réalisations */
	div.realisation-item{ 
		margin-right: 0px;
	}
	div.realisations div:nth-of-type(3n+3){
		margin-right: 0px;
	} 



	/* footer */
	.footerinner .one_fourth { width:48.5%; margin-bottom: 40px; }
	
	/* contact */
	.map iframe { width: 325px; }
	
	/* portfolio */
	.cfour { width: 172px }
	.cthree { width: 232px; }
	.ctwo { width: 348px; }
	
	.pcontent { padding: 10px; }
	.pcolumn { margin-right: 10px; }
	.clast { margin-right: 0; }
	.poverlay { 
		right:0;
	}
	.poverlay a{padding-left: 3px;}
	
	.borderless4 .poverlay { width: 172px; }
	
	.pcolumnthree .poverlay { width: 210px; }
	.pcolumnthree .pimg img { margin-left: -30px; }
	.borderless3 .poverlay { width: 232px; }
	
	.pcolumntwo .pcolumn { margin-right: 20px; }
	.pcolumntwo .clast { margin-right: 0; }
	.pcolumntwo .pimg { width: 325px; height: 180px; }
	.pcolumntwo .pimg img { height: 185px; }
	.pcolumntwo .poverlay { height: 180px; width: 325px; }
	
	.borderless2 .pimg { width: 345px; }
	.borderless2 .pimg img { height: 200px; }
	.borderless2 .poverlay { width: 345px; }

	.leftsidebar .cthree, .rightsidebar .cthree { width: 148px; }
	.leftsidebar .cthree .pimg { height: 100px; }
	.leftsidebar .cthree .pimg img, .rightsidebar .cthree .pimg img { width: 200px; }
	.leftsidebar .cthree .poverlay, .rightsidebar .cthree .poverlay { width: 150px; height: 102px; }
	
	.leftsidebar .ctwo, .rightsidebar .ctwo { width: 223px; }
	.leftsidebar .ctwo .pimg, .rightsidebar .ctwo .pimg { height: 150px; width: 222px; }
	.leftsidebar .ctwo .pimg img, .rightsidebar .ctwo .pimg img { margin: 0; }
	.leftsidebar .ctwo .poverlay, .rightsidebar .ctwo .poverlay { height: 150px; width: 222px; }
	
	.rightsidebar .portfoliowrapper, .rightsidebar .contentinner { width: 468px; }
	.leftsidebar .portfoliowrapper, .leftsidebar .contentinner { width: 468px; }
	
	.posttitle { line-height: 21px; width: 400px; line-height: 24px; margin-bottom: 20px; padding-top: 0; }
	
	/* blog */
	.blogcategory { font-size: 11px; margin-bottom: 5px; }
	.blogmeta { margin-bottom: 15px; }
	.blogmeta li { margin-bottom: 10px; }
	.blogimg a { height: 240px; }
	.blogimg span { width: 448px; height: 220px; }
	.blogpanel-smallthumb .blogimg { width: 200px; }
	.blogpanel-smallthumb .blogimg a { height: 150px; }
	.blogpanel-smallthumb .blogsummary { margin-left: 225px; }
	.blogpanel-smallthumb .blogimg span { width: 180px; height: 130px; }
	
	.relatedpost a.relatedimg span { width: 126px; }
	.relatedpost .relatedtitle { line-height: 21px; }
	
	/* sidebar */
	.sidebar { width: 200px; }
	.trending-posts li { width: 200px; }
	.trending-posts li .desc { width: 180px; }
	.ui-accordion div { font-size: 11px; }
	.ui-accordion .ui-accordion-header { font-size: 13px; }
	.ui-tabs-nav li a, .ui-tabs-nav li.ui-tabs-selected a { padding: 7px; }
	.postlist .listimg { width: 70px; height: 40px; padding: 3px 0 10px 0; }
	.postlist .listsummary { width: 120px; margin-left: 10px; }
	.postlist .listsummary h4 { font-size: 13px; line-height: 18px; }
	.postlist .listimg img { height: 50px; }
	.postlist .listimg span { width: 60px; height: 40px; top: 3px; }

	/* footer */
	.footer .one_fourth { width: auto; float: none; margin: 0 0 40px 0; overflow: hidden; }
	.footer .follow { margin-bottom: 0; }
	.footerinner { padding: 20px 0; }
	.footerbottominner .left, .footerbottominner .right { float: none; text-align: center; }
	.footerbottominner .right { margin-top: 5px; }
	.footerbottom ul li { display: inline-block; float: none; }
	.footerbottominner .clearall { display: none; }

	
	
}

/* iPhone Landscape */
@media only screen and (min-width: 480px) and (max-width: 1024px) {
	
	body.body-fixed .mainwrapper { width: 480px; }
	.header { padding: 20px 0; }
	.header, .maincontent, .footerinner, .footerbottominner, .pagetitle { width: 100%; }
	.headwrapper { margin-bottom: 20px; }
	.headlinebox2 { padding: 5px 0; margin: 15px 0; }
	.headlinebox2 h1 { font-size: 20px; line-height: 28px; }
	.headlinebox2 h3 { font-size: 14px; line-height: 23px; margin-top: 5px; }
	.headerinner .logoinner { padding: 5px; }
	.headerinner .menuicon { display: block; }
	.headerinner .menu { height: 61px; }
	.menu ul { display: none; }
	.pagetitle h1 { line-height: 21px; }
	
	/* menu popup */
	.menupopup { position: fixed; top: 0; right: -280px; height: 100vh; z-index: 200;  }
	.menupopupinner { width: 100%; margin: 0; position: relative; overflow: hidden; padding-top: 40px; }/*background: #292929; */

	/* home */
	.headlinebox2 { padding: 5px 0; margin: 0; margin-bottom: 10px;}
	.headlinebox2 h1 { line-height: auto; font-size: 18px; }
	.headlinebox2 h3 { line-height: auto; font-size: 13px; margin-top: 5px; }
	
	.servicelist { margin: 0; }
	.servicelist li { float: none; width: auto; margin: 20px 0; padding-bottom: 10px; border-bottom: 1px solid #f7f7f7; }
	.servicelist li:last-child { padding-bottom: 0; border-bottom: 0; }

	.service-right{	float: left; width: 480px; margin-bottom: 15px;}

	.jcarousel-list li { width: 205px; }
	.jcarousel-list li .postinfo { width: 185px; }
	
	.widget-services, .widget-text, .widget-newsletter { float: none; margin: 0; margin-bottom: 40px; width: auto; }
	.widget-newsletter { margin-bottom: 0; }
	
	.newsletterform input { width: 280px; }
	.searchwidget { display: none; }
	.pagetitle { padding-bottom: 20px; }
	.contentinner .one_third, .contentinner .one_fourth, .contentinner .one_half { float: none; margin: 0 0 30px 0; width: auto; }
	.serviceslist { margin-bottom: 0; }
	.serviceslist li { border-bottom: 1px solid #eee; padding-bottom: 20px; }
	.serviceslist li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
	.serviceslist li .servicepanel { border-right: 0; }
	.contentinner p { margin: 0px; }
	
	.headlinebox { padding-bottom: 80px; }
	.headlinebox h4 { font-size: 14px; line-height: 21px; }
	.headlinebox a.btn { position: absolute; bottom: 20px; left: 20px; padding: 10px 20px; }
	.bqfloatleft { width: 200px !important; }
	.bqfloatright { width: 200px !important; }

	.leftsidebar .portfoliowrapper, .leftsidebar .contentinner { float: none; margin-left: 0; width: auto; }
	.sidecontent { margin-bottom: 20px; }
	.sidebar { float: none; width: auto; }
	.notibar p { margin: 15px 20px 0 55px; }
	
	.pricing { width: auto; margin-bottom: 0; }
	.pricing-inner { padding: 20px 0; }
	.pricing-header, .pricing-best .pricing-header { width: auto; position: relative; left: 0; top: 0; }
	.pricing-inner { border-top: 0; }
	.pricingtable tr td { font-size: 11px; line-height: 18px; }
	.pricingtable tr td.infotext p { display: none; }
	.pricingtable tr td .btn { font-size: 11px; padding: 2px 5px; }
	.pricingtable-price h1 { font-size: 16px; }
	
	/* blog */
	.rightsidebar .portfoliowrapper, .rightsidebar .contentinner { float: none; margin: 0; width: auto; }
	.widget-testimonial { height: 200px; }
	.blogtitle { margin-bottom: 10px; }
	.bloglist { margin-bottom: 40px !important; }
	.bloglist .blogclear { display: none; }
	.blogmeta li { margin-right: 5px; margin-top: 10px; }
	.blogimg { height: 220px; }
	.blogimg span { width: 410px; height: 200px; }
	.blogpanel-smallthumb .blogimg { width: 200px; height: 150px; }
	.blogpanel-smallthumb .blogimg a { height: 150px; }
	.blogpanel-smallthumb .blogsummary { margin-left: 225px; }
	.blogpanel-smallthumb .blogimg span { width: 180px; height: 130px; }
	
	.relatedpost li.one_third { float: left; width: 136px; margin-right: 10px; margin-bottom: 0; }
	.relatedpost li.one_third:last-child { margin-right: 0; }
	.relatedpost a.relatedimg span { width: 116px; height: 60px; }
	.relatedpost a.relatedimg img { width: 140px; }
	.relatedpost .relatedtitle { line-height: 21px; font-size: 13px; }
	.commentform { margin-bottom: 40px; }
	.commentform p span.field { padding-right: 23px; }
	
	/* portfolio */
	.pcategory { margin-bottom: 10px; }
	.pcategory li { margin-bottom: 10px; }
	.portfoliowrapper { margin-bottom: 20px; }

	.cfour, .cthree, .ctwo { width: 205px; }
	.cfour .poverlay, .cthree .poverlay, .ctwo .poverlay { width: 184px; height: 116px; }
	.cfour .pimg img{ width: 205px; }
	.cthree .pimg img { width: 225px; }
	.ctwo .pimg img { width: 207px; }
	.ctwo .ptitle { font-size: 12px; }
	.clast2 { margin-right: 0; }
	
	.borderless4 .poverlay, .borderless3 .poverlay, .borderless2 .poverlay { width: 205px; }
	
	.leftsidebar .cthree, .rightsidebar .cthree { width: 205px; }
	.leftsidebar .ctwo, .rightsidebar .ctwo { width: 205px; }
	.leftsidebar .cthree .poverlay, .rightsidebar .cthree .poverlay { width: 205px; }
	.leftsidebar .ctwo .poverlay, .rightsidebar .ctwo .poverlay { width: 205px; height: 116px; }
	.leftsidebar .ctwo .pimg, .rightsidebar .ctwo .pimg { height: 116px; }
	.leftsidebar .cthree .pimg img, .rightsidebar .cthree .pimg img { margin-left: 0; }
	.leftsidebar .ctwo .pimg img, .rightsidebar .ctwo .pimg img { margin: 0; }
	
	.postimg div img { width: 408px; }
	.postimg div { height: 208px; }
	.posttitle { line-height: 26px; }
	.nextprev { display: none; } /* disable in mobile. It's up to you to show it */
	.rightsidebar .portfolio-single { margin-bottom: 40px; }
	.porttable { width: 100%; }
		
	.pagination li.first a span { margin-right: 5px; }
	.pagination li.last a span { margin-left: 5px; }
	.pagination li a { padding: 3px 8px; }
	.pagination li.prev a { background-position: 6px 8px; }
	.pagination li.next a { background-position: -31px 8px; }
	
	/* contact */
	.page-contact .one_half { width: auto; float: none; margin-right: 0; }
	.page-contact .address { margin-top: 20px; }
	.map iframe { width: 408px; }
	
	/* footer */
	.footer .one_fourth { width: auto; float: none; margin: 0 0 40px 0; overflow: hidden; }
	.footer .follow { margin-bottom: 0; }
	.footerinner { padding: 20px 0; }
	.footerbottominner .left, .footerbottominner .right { float: none; text-align: center; }
	.footerbottominner .right { margin-top: 5px; }
	.footerbottom ul li { display: inline-block; float: none; }
	.footerbottominner .clearall { display: none; }

	.footerinner .one_half { width: auto; float: none; margin-right: 0; margin-bottom: 10px;}
	.footerinner .footer_partner{margin-top: 0px;}
	.footerinner .footer_partner_item img{float: none;}	

	/* radius */
	.slidebg2-1, .slidebg3-1, .menupopupinner { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
	.pricing-header, .pricing-inner { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }

	/* Sites */
	.realisations{
		grid-template-columns: repeat(3,1fr);
		gap:10px;
		max-width: 100%;
	}
}

/* iPhone Portrait */
@media screen and (max-width: 479px) {

	body.body-fixed .mainwrapper { width: 320px; }
	.header { padding: 20px 0; }
	.header, .maincontent, .footerinner, .footerbottominner, .pagetitle { width: 100%; }
	
	.headwrapper { margin-bottom: 20px; }
	.headlinebox2 { padding: 5px 0; margin: 15px 0; }
	.headlinebox2 h1 { font-size: 20px; line-height: 28px; }
	.headlinebox2 h3 { font-size: 14px; line-height: 23px; margin-top: 5px; }
	.headerinner .logoinner { padding-top: 10px; }

	.headerinner .menuicon { display: block; }
	.headerinner .menu { height: 61px; }
	.menu ul { display: none; }
	.pagetitle h1 { line-height: 21px; }
	
	/* menu popup */
	.menupopup { position: fixed; ;top: 0; right: -280px; height: 100%; z-index: 200; }
	.menupopupinner { width: 100%; margin: 0; position: relative; overflow: hidden; background: #292929; padding-top: 40px; }
	
	/* home */
	.headlinebox2 { padding: 5px 0; margin: 0; margin-bottom: 10px;}
	.headlinebox2 h1 { line-height: auto; font-size: 18px; }
	.headlinebox2 h3 { line-height: auto; font-size: 13px; margin-top: 0px; }

	.service-right{	float: left; width: 320px; margin-bottom: 15px;}
	.contentinner .service-right p{margin: 0px;}
	
	.servicelist { margin: 0; }
	.servicelist li { float: none; width: auto; margin: 20px 0; padding-bottom: 10px; border-bottom: 1px solid #f7f7f7; }
	.servicelist li:last-child { padding-bottom: 0; border-bottom: 0; }

	.jcarousel-list li { width: 130px; }
	.jcarousel-list li .postinfo { width: 110px; }
	.jcarousel-list li .summary { display: none; }
	.jcarousel-list li .postinfo h4 { font-size: 10px; line-height: 14px; }
	
	.widget-services, .widget-text, .widget-newsletter { float: none; margin: 0; margin-bottom: 40px; width: auto; }
	.widget-newsletter { margin-bottom: 0; }
	
	.newsletterform input { width: 255px; margin: 0; margin-bottom: 10px; }
	.newsletterform button { width: 277px; text-align: center; }
	.searchwidget { display: none; }
	.pagetitle { padding-bottom: 20px; }
	.contentinner .one_third, .contentinner .one_fourth, .contentinner .one_half { float: none; margin: 0 0 30px 0; width: auto; }
	.serviceslist { margin-bottom: 0; }
	.serviceslist li { border-bottom: 1px solid #eee; padding-bottom: 20px; }
	.serviceslist li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
	.serviceslist li .servicepanel { border-right: 0; }
	.contentinner p { margin: 20px 0; }
	
	.headlinebox { padding-bottom: 80px; }
	.headlinebox h4 { font-size: 14px; line-height: 21px; }
	.headlinebox a.btn { position: absolute; bottom: 20px; left: 20px; padding: 10px 20px; width: 200px; text-align: center; }
	.bqfloatleft { width: 40% !important; font-size: 12px; line-height: 21px; }
	.bqfloatright { width: 40% !important; font-size: 12px; line-height: 21px; }
	blockquote.bqfloatright { margin: 20px 0 20px 20px; }
	blockquote.bqfloatleft { margin: 20px 20px 20px 0; }

	.leftsidebar .portfoliowrapper, .leftsidebar .contentinner { float: none; margin-left: 0; width: auto; }
	.sidecontent { margin-bottom: 20px; }
	.sidebar { float: none; width: auto; }
	.notibar p { margin: 15px 20px 0 55px; }
	.trending-posts li { width: auto; } 
	.trending-posts li .desc { width: 260px; }
	
	
	.pricing { width: auto; margin-bottom: 0; }
	.pricing-inner { padding: 20px 0; }
	.pricing-header, .pricing-best .pricing-header { width: auto; position: relative; left: 0; top: 0; }
	.pricing-inner { border-top: 0; }
	.pricingtable tr td { font-size: 11px; line-height: 18px; }
	.pricingtable tr td:first-child { font-weight: normal; }
	.pricingtable-head td div { font-size: 11px; }
	.pricingtable tr td.infotext p { display: none; }
	.pricingtable tr td .btn { font-size: 11px; padding: 2px 5px; }
	.pricingtable-price h1 { font-size: 16px; }
	
	.imgfull { width: 100%; }
	img.imgfloatleft, img.imgfloatright { width: 50%; }
	
	/* blog */
	.rightsidebar .portfoliowrapper, .rightsidebar .contentinner { float: none; margin: 0; width: auto; margin-bottom: 20px; }
	.widget-testimonial { height: 200px; }
	.blogcategory { font-size: 11px; }
	.blogtitle { margin-bottom: 10px; font-size: 18px; }
	.blogsummary { margin-top: 20px; margin-bottom: 20px; }
	.bloglist { margin-bottom: 40px !important; }
	.bloglist .blogclear { display: none; }
	.blogmeta li { margin-right: 5px; margin-top: 10px; }
	.blogimg { height: 143px; }
	.blogimg span { width: 260px; height: 123px; }
	.blogpanel-smallthumb .blogimg { width: 280px; height: 150px; float: none; }
	.blogpanel-smallthumb .blogimg a { height: 150px; }
	.blogpanel-smallthumb .blogsummary { margin: 20px 0; }
	.blogpanel-smallthumb .blogimg span { width: 260px; height: 130px; }
	.shareblog li:first-child { display: block; float: none; margin: 0; border-bottom: 1px solid #fff; }
	.shareblog li.label h4 { text-align: center; }
	.authorinfo { margin: 20px 0; }
	.authorinfo .authordetails { margin-left: 105px; }
	
	.blogcomments li .authorimg { margin-right: 10px; }
	.blogcomments li .authorimg img { width: 30px; }
	.blogcomments li .comment { margin-left: 55px; }
	.blogcomments ul { margin-left: 55px; }
	.blogcomments li .replybutton { padding: 3px 5px; left: -55px; top: 50px; right: auto; }
	.blogcomments li .commenttime { display: block; margin-left: 0; }
	.commentform p label { display: block; float: none; padding: 0; width: auto; }
	.commentform p span.field { margin-left: 0; }
	.commentform p.marginleft100 { margin-left: 0; }
	
	.relatedpost li.one_third { float: none; width: auto; margin-right: 0; margin-bottom: 20px; }
	.relatedpost li.one_third:last-child { margin-right: 0; }
	.relatedpost a.relatedimg span { width: 260px; height: 139px; }
	.relatedpost a.relatedimg img { width: 100%; }
	.relatedpost .relatedtitle { line-height: 22px; font-size: 14px; }
	.commentform { margin-bottom: 40px; }
	.commentform p span.field { padding-right: 23px; }
	
	/* portfolio */
	.portfoliowrapper { margin-bottom: 20px; }
	.pcolumn { margin: 0 10px 10px 0; }
	.pcolumn p { display: none; }
	.ptitle { margin-bottom: 0; font-size: 12px; }
	.ptitle_author { font-size: 12px; line-height: 18px; }
	.clast, .clast2 { margin-right: 0; }
	.pcategory { margin-bottom: 10px; }
	.pcategory li { margin: 0 10px 10px 0; }
	.poverlay a.zoom { right: auto; left: 0; }
	.pauthor_thumb { margin-top: 15px; }
	.pauthor_thumb img { width: 20px; }

	.cfour, .cthree, .ctwo { width: 135px; }
	.cfour .poverlay, .cthree .poverlay, .ctwo .poverlay { width: 114px; height: 77px; }
	.cfour .pimg img{ width: 135px; }
	.cthree .pimg img { width: 150px; }
	.ctwo .pimg img { width: 135px; }
	.ctwo .ptitle { font-size: 12px; }
	
	.borderless4 .pcontent { margin-bottom: 10px; }
	.borderless4 .poverlay, .borderless3 .poverlay, .borderless2 .poverlay { width: 135px; }
	
	.leftsidebar .cthree, .rightsidebar .cthree { width: 135px; }
	.leftsidebar .ctwo, .rightsidebar .ctwo { width: 135px; }
	.leftsidebar .cthree .poverlay, .rightsidebar .cthree .poverlay { width: 135px; }
	.leftsidebar .ctwo .poverlay, .rightsidebar .ctwo .poverlay { width: 135px; height: 77px; }
	.leftsidebar .ctwo .pimg, .rightsidebar .ctwo .pimg { height: 77px; }
	.leftsidebar .cthree .pimg img, .rightsidebar .cthree .pimg img { margin-left: 0; }
	.leftsidebar .ctwo .pimg img, .rightsidebar .ctwo .pimg img { margin: 0; }
	
	.postimg div img { width: 408px; }
	.postimg div { height: 208px; }
	.posttitle { line-height: 26px; }
	.nextprev { display: none; } /* disable in mobile. It's up to you to show it */
	.rightsidebar .portfolio-single { margin-bottom: 40px; }
	.porttable { width: 100%; }
		
	.pagination li { display: none; }
	.pagination li.first, .pagination li.last, .pagination li.prev, .pagination li.next { display: block; }
	.pagination li.first a span { margin-right: 5px; }
	.pagination li.last a span { margin-left: 5px; }
	.pagination li a { padding: 3px 8px; }
	.pagination li.prev a { background-position: 6px 8px; }
	.pagination li.next a { background-position: -31px 8px; }
	
	/* contact */
	.page-contact .one_half { width: auto; float: none; margin-right: 0; }
	.page-contact .address { margin-top: 20px; }
	.map iframe { width: 258px; height: 250px; }
	
	/* footer */
	.footer .one_fourth { width: auto; float: none; margin: 0 0 40px 0; overflow: hidden; }
	.footer .follow { margin-bottom: 0; }
	.footerinner { padding: 20px 0; }
	.footerbottominner .left, .footerbottominner .right { float: none; text-align: center; }
	.footerbottominner .right { margin-top: 5px; }
	.footerbottom ul li { display: inline-block; float: none; }
	.footerbottominner .clearall { display: none; }
	.footerinner .flickr ul li a { margin-right: 5px; margin-bottom: 5px; }

	.footerinner .one_half { width: auto; float: none; margin-right: 0; margin-bottom: 10px;}
	.footerinner .footer_partner{margin-top: 0px;}
	.footerinner .footer_partner_item img{float: none;}


	/* radius */
	.slidebg2-1, .slidebg3-1, .menupopupinner { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
	.pricing-header, .pricing-inner { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
	
	/* Sites */
	.realisations{
		display:flex;
		flex-flow:row wrap;
		justify-content: center;
		align-items:center;
	}
}
.cat_site{
	width:100%;
	margin-bottom:1rem;
}
.cat_site select{
	width:100%;
	height: 32px;
	background-color: #444;
	color: white;
	padding: 0 10px;
	font-family: 'Roboto';
	font-size: 16px;
}
/*********************
  Media Query Classes
**********************/
@media only screen and (max-width: 600px) {
	.hide-on-small-only, .hide-on-small-and-down {
	  display: none !important;
	}
  }
  
  @media only screen and (max-width: 992px) {
	.hide-on-med-and-down {
	  display: none !important;
	}
  }
  
  @media only screen and (min-width: 601px) {
	.hide-on-med-and-up {
	  display: none !important;
	}
  }
  
  @media only screen and (min-width: 600px) and (max-width: 992px) {
	.hide-on-med-only {
	  display: none !important;
	}
  }
  
  @media only screen and (min-width: 993px) {
	.hide-on-large-only {
	  display: none !important;
	}
  }
  
  @media only screen and (min-width: 1201px) {
	.hide-on-extra-large-only {
	  display: none !important;
	}
  }
  
  @media only screen and (min-width: 1201px) {
	.show-on-extra-large {
	  display: block !important;
	}
  }
  
  @media only screen and (min-width: 993px) {
	.show-on-large {
	  display: block !important;
	}
  }
  
  @media only screen and (min-width: 600px) and (max-width: 992px) {
	.show-on-medium {
	  display: block !important;
	}
  }
  
  @media only screen and (max-width: 600px) {
	.show-on-small {
	  display: block !important;
	}
  }
  
  @media only screen and (min-width: 601px) {
	.show-on-medium-and-up {
	  display: block !important;
	}
  }
  
  @media only screen and (max-width: 992px) {
	.show-on-medium-and-down {
	  display: block !important;
	}
  }
  
  @media only screen and (max-width: 600px) {
	.center-on-small-only {
	  text-align: center;
	}
  }
.hausse-de-nos-tarifs-2023 .entete{
    margin:2rem auto;
    font-size:1rem;
}
.hausse-de-nos-tarifs-2023 .entete p{
    line-height:normal;
    margin-bottom: 12px;
}
figure{
    display:inline-flex;
    margin:1rem auto;
}
.center{
    text-align: center;
}
.row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:20px;
}
@media only screen and (max-width: 1024px) {
    .row{
        display:block;
    }
    .hide-on-med-and-down{
        display:none !important;
    }
}

.row .col{
    background-color:#F8F8F8;
    padding:1rem;
    margin: 1rem 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.row .col .ce_text{
    /*display: grid;*/
}
.row h2{
    /*color:#FF9C00;*/
}
/*.row h2::after{
    content: '';
    display:block;
    height:1px;
    width:100%;
    background-color:#666;
    margin:10px 0;
}*/
.row h3{
    color:black;
    font-weight: 400;
    font-size: 1.4rem;
    margin-bottom: 8px !important;
}
@media only screen and (max-width: 768px){
    .row{
        display:block;
    }
    .hausse-de-nos-tarifs-2023 #container{
        width:100%;
        box-sizing: border-box;
        padding:10px;
    }
}
div.tarifs{
    display: inline-block;
    margin:1rem auto;
    font-family: 'RobotoCondensed', sans-serif;
    font-weight: 400;
    font-size: 1rem;
}
div.tarifs p{
    line-height: normal;
}
.vert{
    background-color:#444444;/*#8FBF21;*/
    padding:2rem;
    position: relative;
    margin-top:1rem;
}
.fleche{
    position: absolute;
    left: 50%;
    width: 50px;
    height: 50px;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
    top: -39px;
    background-color:white;
}
.txt-white,
.txt-white *{
    color:white;
    line-height: normal;
}
.txt-white h2{
    margin-bottom: 1rem !important;
}
.txt-white p,
.txt-white ul li{
    font-size:1rem;
}
.txt-white p{
    margin-bottom: 12px;
    line-height: normal;
}
.txt-white ul{
    margin: 1rem;
}
.txt-white p a{
    display:inline-flex;
    padding:5px 10px;
    border: 1px solid white;
    margin-top:1rem;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.txt-white p a:hover{
    background-color:#FF9C00;
    color: white;
}
table.google tr th{
    background-color:rgba(0,0,0,0.1);
    border:1px solid #CCC;
}
table.google tr td{
    padding:5px;
    border:1px solid #CCC;
}
.google-consent-mode-v2-comment-se-mettre-en-conformite .col.center{
    display: grid;
    justify-content: center;
}
/*---Transition---*/
.transition{
    -webkit-transition: all 0.5s ease 0s !important;
    -moz-transition: all 0.5s ease 0s !important;
    -ms-transition: all 0.5s ease 0s !important;
    -o-transition: all 0.5s ease 0s !important;
    transition: all 0.5s ease 0s !important;
}
/*********************
  Media Query Classes
**********************/
@media only screen and (max-width: 600px) {
    .hide-on-small-only, .hide-on-small-and-down {
      display: none !important;
    }
  }
  
  @media only screen and (max-width: 992px) {
    .hide-on-med-and-down {
      display: none !important;
    }
  }
  
  @media only screen and (min-width: 601px) {
    .hide-on-med-and-up {
      display: none !important;
    }
  }
  
  @media only screen and (min-width: 600px) and (max-width: 992px) {
    .hide-on-med-only {
      display: none !important;
    }
  }
  
  @media only screen and (min-width: 993px) {
    .hide-on-large-only {
      display: none !important;
    }
  }
  
  @media only screen and (min-width: 993px) {
    .show-on-large {
      display: block !important;
    }
  }
  
  @media only screen and (min-width: 600px) and (max-width: 992px) {
    .show-on-medium {
      display: block !important;
    }
  }
  
  @media only screen and (max-width: 600px) {
    .show-on-small {
      display: block !important;
    }
  }
  
  @media only screen and (min-width: 601px) {
    .show-on-medium-and-up {
      display: block !important;
    }
  }
  
  @media only screen and (max-width: 992px) {
    .show-on-medium-and-down {
      display: block !important;
    }
  }
  
  @media only screen and (max-width: 600px) {
    .center-on-small-only {
      text-align: center;
    }
  }
  
.maincontent{
    max-width: 100%;
}
.leftsidebar.maincontent{
    max-width: 1460px;
}
#main .mod_article>.inside,
#main .mod_article{
    max-width: 1460px;
    margin: 2rem auto;
    padding:0 10px;
    box-sizing: border-box;
}
.secHeadline{
    margin-top: 2rem !important;
    padding-left:10px;
}
.mod_breadcrumb{
    max-width: 1460px;
    margin: 0 auto;
    padding-left:10px;
    box-sizing: border-box;
}
.mod_breadcrumb ul{
    display: flex;
    align-items: center;
    gap:5px;
}
.mod_breadcrumb a,
.mod_breadcrumb li{
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}
.mod_breadcrumb li:not(.last)::after{
    content:'>';
    display:inline-flex;
    margin-left:5px;
}
#main .mod_article>.inside,
.headerinner{
    padding:0 10px;
    box-sizing: border-box;
}
.headerinner{
    max-width: 1460px;
    margin: 1rem auto;
}
.headerinner .grid{
    display:grid;
    grid-template-columns: repeat(2,1fr);
}
.grid{
    display:grid;
}
.grid.two_cols{
    grid-template-columns: repeat(2,1fr);
}
.headerinner .grid .headlinebox2{
    grid-column-end: 3;
}
#main .mod_article.fullWidth{
    max-width: 100%;
}
@media only screen and (max-width: 600px) {
    .header, .maincontent, .footerinner, .footerbottominner, .pagetitle {
        width: 100%;
    }
    .header .headerinner{
        padding:0 10px;
    }
    .grid.two_cols{
        grid-template-columns: repeat(1,1fr);
    }
}
.index .headlinebox2{
    max-width: 85%;
}
@media only screen and (max-width: 600px) {
    .index .headlinebox2{
        max-width: 100%;
    }
}
.headlinebox2 h2{
    padding-top: 10px; 
    line-height: 21px !important; 
    color: #999; 
    font-size: 18px;
    margin-bottom: 0 !important;
}
.service-right{
    padding:0 10% 60px 10% !important;
    /*background-size:auto 70px;
    background-position: center 20px;
    background-repeat: no-repeat;*/
    border-bottom:10px solid #ff9c00 !important;
    position: relative;
    overflow: hidden;
    background-color: white;
}
@media only screen and (max-width: 600px) {
    .service-right{
        padding:0 5% 60px 5% !important;
    }
}
.service-right figure{
    justify-content: center;
    width: 100%;
}
.service-right figure::before{
    content: '';
    display: block;
    width: 210px;
    height: 105px;
    background-image: url(../../files/click-on/images/2024/cercle.svg);
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-border-bottom-right-radius: 50%;
    -webkit-border-bottom-left-radius: 50%;
    -moz-border-radius-bottomright: 50%;
    -moz-border-radius-bottomleft: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    position: absolute;
    top:-105px;
    opacity: 1;
    margin-left: -105px;
    left:50%;
    z-index: 0;
    -webkit-transition: all 0.5s ease 0s !important;
    -moz-transition: all 0.5s ease 0s !important;
    -ms-transition: all 0.5s ease 0s !important;
    -o-transition: all 0.5s ease 0s !important;
    transition: all 0.5s ease 0s !important;
}
.service-right:hover figure::before{
    top:0;
    opacity: 1;
}
.service-right figure img{
    transition: all 500ms;
}
.service-right:hover figure img{
    transform: scale(70%);
}
.service-right figure img{
    z-index: 1;
}
.service-right h3 {
	line-height: 35px;
	color: #333; 
	font-size: 1.4rem;
	padding: 10px 0;
    font-weight: 600;
    margin-bottom: 0 !important;
    font-family: 'Roboto Condensed', sans-serif;
}
.service-right p{
    font-size: 16px;
    margin-right: 0;
}

/*.icon-conception-graphique {background-image: url(../../files/click-on/images/2024/responsive.png);}
.icon-webmarketing {background-image: url(../../files/click-on/images/2024/social-media-marketing.png);}
.icon-maintenance {background-image: url(../../files/click-on/images/2024/website.png);}
.icon-hebergement {background-image: url(../../files/click-on/images/2024/cloud-computing.png);}
.icon-dns {background-image: url(../../files/click-on/images/2024/browser.png);}
.icon-developpement {background-image: url(../../files/click-on/images/2024/coding.png);}*/
img{
    display:inline-flex;
}

.row .col{
    background-color:white;
    padding:10px;
}
.row.col_3{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    padding: 10px;
    background: rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    gap: 10px;
}
@media only screen and (max-width: 1025px) {
    .index .grid-template,
    .row.col_3{
        grid-template-columns: repeat(2,1fr) !important;
    }
}
@media only screen and (max-width: 768px) {
    .index .grid-template,
    .row.col_3{
        grid-template-columns: repeat(1,1fr) !important;
    }
}
.index .grid-template{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:20px;
}
.index .grid-template .service-right{
    float:none;
    width:inherit;
    margin-bottom: 0;
    padding:10px;
    border:1px solid #CCC;
    -webkit-border-radius: 20px 70px;
    -moz-border-radius: 20px 70px;
    border-radius: 20px 70px;
}
.jcarousel-list#realisations li { 
    position: relative; 
    width: 450px; 
    height: 350px; 
    margin: 0 10px; 
    overflow: hidden; 
}
.jcarousel-list#realisations li .postinfo{
    height: 200px;
}
/*---Textes et titres---*/
h1{
    font-size:2.2rem;
    margin-bottom: 2rem;
    font-weight: 600;
}
body:not(.index) h1{
    text-transform: uppercase;
}
h2{
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem !important;
    font-family: 'Roboto Condensed', sans-serif;
}
@media only screen  and (max-width: 1025px) {
    .headlinebox2 h1{
        font-size: 24px;
        font-weight: 600;
    }
    .headlinebox2 h2{
        font-weight: 500;
    }
    h2{
        /*font-size:18px;*/
    }
    h3{
        font-size:16px;
        font-weight: 500;
    }
    p{
        font-size: 16px !important;
    }
}
p{
    font-size:18px;
    color:black;
    line-height: normal;
}
.service-right .readmore{
    text-indent: -50000px;
    display: block;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:-60px;
    background-image: url(../../files/click-on/images/2024/fleche.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: auto;
    -webkit-transition: all 0.5s ease 0s !important;
    -moz-transition: all 0.5s ease 0s !important;
    -ms-transition: all 0.5s ease 0s !important;
    -o-transition: all 0.5s ease 0s !important;
    transition: all 0.5s ease 0s !important;
}
@media only screen and (max-width: 600px) {
    .service-right .readmore{
        background-position: right bottom;
    }
}
.service-right .readmore:hover{
    margin-left:1rem;
}
.jcarousel-container-horizontal{
    min-height:466px;
    padding-top:45px;
}
.jcarousel-list#realisations li{
    width:466px;
    height:466px;
    -webkit-border-radius: 20px 70px;
    -moz-border-radius:  20px 70px;
    border-radius:  20px 70px;
}
@media screen and (max-width: 768px) {
    .jcarousel-list#realisations li{
        width:365px;
    }
}

.jcarousel-list#realisations li .postinfo{
    top:385px;
    background-color:white;
    background-image: none;
    width:396px;
    left:35px;
    padding: 20px 10px;
    box-sizing: border-box;
    -webkit-border-top-left-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
@media screen and (max-width: 768px) {
    .jcarousel-list li .summary{
        display:block;
    }
    .jcarousel-list#realisations li .postinfo{
        top:405px;
        width:auto;
        box-sizing: border-box;
        left:10px;
        right:10px;
    }
}
.jcarousel-list li a.viewpost{
    right:25px;
    left:25px;
    width:auto;
    background: #ff9c00;
    color:white;
    -webkit-border-top-left-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    font-size:1rem;
    text-align: center;
    padding:10px;
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
}
.mod_article#nos-expertises{
    background-image: url(../../files/click-on/images/2024/fond-expertises-accueil.png);
    background-repeat: repeat-x;
    background-position: center;
}
.headlinebox2 h1{
    font-family: 'RobotoBold', sans-serif;
    font-size: 48px;
    margin-bottom: 10px !important;
    line-height: normal;
    text-wrap-style: balance;
}
.headlinebox2 p{
    font-size: 18px !important;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.headlinebox2.txt-white p{
    color:rgba(255,255,255,0.7) !important;
}
.headlinebox2.txt-white strong{
    color:rgba(255,255,255,1) !important;
    font-weight:normal;
}
#main .ce_text p{
    font-family: 'Roboto Condensed', sans-serif;
    color:#424445;
}
body:not(.index) #main .ce_text p{
    font-family: "Roboto", sans-serif;
}
#main .ce_text.fsize p{
    font-size:24px;
}
.headlinebox2 .ce_text p{
    font-family: 'RobotoLight', sans-serif;
}
.valign-wrapper{
    display:flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    flex-flow: column;
    justify-content: center;
}
.center{
    margin:0 auto;
    text-align: center;
}
.index .header{
    background-color: #424445;
    background-image: url('../../files/click-on/images/2024/decor-bas-circle.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    max-width: 100%;/*1460px;*/
    margin:0 auto;
}
.index .header .row .col{
    background-color: inherit;
}
.index #sites-responsive {
    background-repeat: no-repeat !important;
    background-size: 60% auto;
    background-position: 60% top !important;
}
.index #sites-responsive>div{
    width:100%;
}
.sf-menu{
    background: #424445;
    display: inline-flex;
    height: 55px;
    line-height: normal;
    padding: 0 23px;
    justify-content: center;
    align-items: center;
    gap: 30px;
    border-radius: 16px;
    backdrop-filter: blur(7.150000095367432px);
}
.index .sf-menu{
    background-color: white;
}
body:not(.index) .sf-menu .level_2 li.current{
    background-color:black;
}
.sf-menu .current span,
.sf-menu .submenu span,
.sf-menu a{
    color:white !important;
}
.index .sf-menu li:not(.contact) span,
.index .sf-menu li:not(.contact) a{
    color:#424445 !important;
}
.sf-menu li.contact a{
    background-color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color:#424445 !important;
    padding:0 15px;
}
.index .sf-menu li.contact a{
    background-color: #424445;
    color:white !important;
}
h2.ce_headline{
    text-transform: none;
    font-family: 'Roboto Condensed', sans-serif;
}
.index .sf-menu li.sfHover ul,
.index .sf-menu li.sfHover li{
    background-color: white !important;
}
.sf-menu ul.level_2,
.sf-menu ul.level_2 li.last{
    -webkit-border-bottom-right-radius: 16px;
    -webkit-border-bottom-left-radius: 16px;
    -moz-border-radius-bottomright: 16px;
    -moz-border-radius-bottomleft: 16px;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
}
.sf-menu .level_2 a:hover span{
    border-color:#424445 !important;
    background-color: rgba(68,66,69,0.5) !important;
    color:white !important;
}
.sf-menu ul.level_2 li a:hover span,
.sf-menu ul.level_2 li.sfHover a:hover span{
    background-color: rgba(68,66,69,0.5) !important;
    color:white !important;
}
.sf-menu li li{
    padding:0;
}
.sf-menu li.sfHover li a{
    width: 100%;
}
.sf-menu li.sfHover li span{
    font-size:17px;
    display: block;
    width: 100%;
    /*font-family: 'RobotoLight', sans-serif;*/
}

.leftsidebar .portfoliowrapper, .leftsidebar .contentinner{
    width:1140px;
    max-width: 95%;
    margin:2rem auto;
}
@media only screen and (max-width: 1389px) {
    .leftsidebar .portfoliowrapper, .leftsidebar .contentinner{
        float: none;
    }
    .secHeadline,
    .leftsidebar .mod_breadcrumb,
    body:not(.index) .maincontent{
        max-width: 95%;
        margin:0 auto;
    }
}
.jcarousel-list li .summary{
    font-family: 'Roboto Condensed', sans-serif;
    margin:0;
}
.jcarousel-list li .summary *{
    color:#7a7e80;
}
.jcarousel-item h3,
.jcarousel-item h3 a{
    font-size:24px;
    text-align: center;
    font-weight: 600;
    font-family: 'Roboto Condensed', sans-serif;
}
@media only screen and (max-width: 1280px) {
    .jcarousel-item h3,
    .jcarousel-item h3 a{
        font-size:18px;
    }
}
.jcarousel-item figure.logo img{
    max-width: 30%;
    max-height: 75px;
}
.jcarousel-list li .postinfo h4, .jcarousel-list li .postinfo h3,
.jcarousel-list li .postinfo h4 a, .jcarousel-list li .postinfo h3 a{
    color:#424445;
}
.jcarousel-item figure.logo{
    position: absolute;
    left:0;
    right:0;
    filter: saturate(0) brightness(0) invert(1);
    display:flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}
#main .mod_article > .inside{
    padding:0 20px;
}
#main .mod_article.no_margin>.inside{
    max-width: inherit;
    margin-top:0;
}
footer{
    padding-top:165px; /*225px;*/
    background-image:url('../../files/click-on/images/2024/footer.svg') !important;
    background-size: cover !important;
    background-color:inherit;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    position: relative;
}
footer .inside{
    position: initial;
    max-width: 1920px;
    margin:0 auto;
}
footer #contact p{
    margin-bottom: 12px;
    font-size:16px;
}
footer #contact h2{
    color: black;
    font-weight: 600;
    font-size: 1.6rem;
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
}
@media screen and (max-width: 990px) {
    footer{
        padding-top:60px;
        padding-bottom: 10px;
    }
}
#footer-inside{
    background-color:#444444;
    padding-bottom: 10px;
}
#footer #contact{
    position: absolute;
    top:-2rem;
    width:750px;
    left:50%;
    margin-left:-375px;
    background-color:white;
    padding: 2rem 2rem 0 2rem;
    border:15px solid var(--Gris, #424445);
    -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  text-align: center;
  box-sizing: border-box;
}
@media screen and (max-width: 990px) {
    #footer #contact{
        position: initial;
        border:none;
        margin:1rem auto;
        width:95%;
    }
}
#footer #contact p strong{
    font-size: 1.5rem;
}
#footer #contact .ce_hyperlink{
    display: inline-flex;
    margin-top:1rem;
}
#footer #contact .ce_hyperlink a{
    display:inline-flex;
    background: #ff9c00;
    color: white;
    -webkit-border-top-left-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    font-size: 1.2rem;
    text-align: center;
    padding:10px 20px;
    margin:0 1rem;
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    -webkit-transition: all 0.5s ease 0s !important;
    -moz-transition: all 0.5s ease 0s !important;
    -ms-transition: all 0.5s ease 0s !important;
    -o-transition: all 0.5s ease 0s !important;
    transition: all 0.5s ease 0s !important;
}
@media screen and (max-width: 600px) {
    #footer #contact .ce_hyperlink a{
        border-radius: 20px;
        margin-bottom: 10px;
    }
}
#footer #contact .ce_hyperlink a:hover{
    background-color: #444;
}
#footer-inside>div{
    background-color: white;
    margin:30px 50px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    padding:1.5rem;
}
@media screen and (max-width: 768px) {
    #footer-inside>div{
        margin:20px;
        padding:1rem;
    }
}
footer figure{
    margin:0 0 1rem 0;
}
footer .grid_2 figure{
    margin:0;
}
footer .grid_2{
    margin:2rem 0;
}
footer .grid_2 .col{
    display: flex;
}
footer .ce_text{margin-bottom: 0 !important;}
footer p{
    color: var(--Gris, #424445);
}footer .grid_4 p{
    margin-bottom:10px;
}
.grid_2{
    grid-template-columns: repeat(2,1fr);
}
@media screen and (max-width: 768px) {
    .grid_2{
        grid-template-columns: repeat(1,1fr);
        display: grid !important;
    }
}
.grid_3{
    grid-template-columns: repeat(3,1fr);
}
footer .grid_3{
    grid-template-columns: repeat(3,auto);
}
.grid_3 .mod_customnav ul{
    display:flex;
    gap:20px;
    align-items: center;
}
@media screen and (max-width: 768px) {
    .grid_3{
        grid-template-columns: repeat(1,1fr);
        display: grid !important;
    }
}
@media screen and (max-width: 600px) {
    .grid_3{
        grid-template-columns: repeat(1,1fr);
        display: grid !important;
    }
}
.grid_4{
    grid-template-columns: repeat(4,1fr);
}
@media screen and (max-width: 1490px) {
    .grid_4{
        grid-template-columns: repeat(4, auto);
    }
}
@media screen and (max-width: 1024px) {
    .grid_4{
        grid-template-columns: repeat(2,1fr);
    }
}
footer .row .col{
    padding:0 10px;
    margin:0;
}
footer .grid_2 .ce_text{
    display: inline-flex;
    color: var(--Gris, #424445);
    font-family:  'Roboto', sans-serif;
    font-size: 18px !important;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
footer .grid_3{
    align-items: center;
}
footer .grid_3 p,
footer .grid_3 a,
footer .grid_3 span,
footer .grid_3 strong{
    color: var(--Gris, #424445);
    font-family: 'Roboto', sans-serif;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: normal;
}
footer .grid_3 ul{
    width:100%;
    justify-content: center;
    gap:5px;
    white-space:nowrap;
}
@media screen and (max-width: 600px) {
    footer .grid_3 ul{
        white-space: wrap;
        flex-direction: column;
    }
}

footer .grid_3 ul li{
    width:auto;
}
.left{
    float: left;
}
.right{
    float: right;
    justify-content: end;
}
footer h2{
    color: var(--Gris, #9E9E9E);
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 92%; /* 17.025px */
}
footer .mod_customnav ul li a,
footer .mod_customnav ul li span,
footer .mod_customnav ul li strong{
    color: var(--Gris, #424445);
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 600;
    text-transform: none;
}
@media screen and (max-width: 1280px){
    footer .mod_customnav ul li a,
    footer .mod_customnav ul li span,
    footer .mod_customnav ul li strong{
        font-size: 1rem;
    }
}
footer #votre_futur p{
    color: var(--Gris, #424445);
    font-family: "Roboto Condensed";
    font-size: 50px !important;
    font-style: normal;
    font-weight: 700;
    line-height: 92%; /* 42.564px */
}
footer #votre_futur strong{
    color: var(--Vert, #8FBF21);
    font-family: "Roboto Condensed";
    font-size: 50px !important;
    font-style: normal;
    font-weight: 700;
    line-height: 92%;
}
@media screen and (max-width: 1280px){
    footer #votre_futur p,
    footer #votre_futur strong{
        font-size:30px !important;
    }
}
@media only screen and (max-width: 1024px) {
    footer #votre_futur p br{
        display: none;
    }
    footer #votre_futur p,
    footer #votre_futur strong{
        font-size:30px !important;
    }
    footer #votre_futur p{
        display: flex;
        flex-flow: row nowrap;
        gap:10px;
        align-items: center;
        justify-content: center;
    }
}
@media only screen and (max-width: 600px) {
    footer #votre_futur p{
        flex-wrap: wrap;
    }
}
footer #btn_contact a{
    display: flex;
    height: 50px;
    padding: 0px 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 16px;
    color: var(--Blanc, #FFF);
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background: var(--Gris, #424445);
}
footer a{
    -webkit-transition: all 0.5s ease 0s !important;
    -moz-transition: all 0.5s ease 0s !important;
    -ms-transition: all 0.5s ease 0s !important;
    -o-transition: all 0.5s ease 0s !important;
    transition: all 0.5s ease 0s !important;
    position: relative;
}
footer #btn_contact a:hover{
    background-color:#ff9c00;
}
footer ul li a{
    padding-bottom: 2px;
    margin-bottom: 2px;;
}
footer ul li a::after{
    content:'';
    position: absolute;
    bottom:0;
    left:0;
    width:0;
    height:2px;
    background-color:#444;
    -webkit-transition: all 0.5s ease 0s !important;
    -moz-transition: all 0.5s ease 0s !important;
    -ms-transition: all 0.5s ease 0s !important;
    -o-transition: all 0.5s ease 0s !important;
    transition: all 0.5s ease 0s !important;
}
footer ul li a:hover::after{
   width:100%;
}
footer ul li.active strong{
    color:#ff9c00;
}

@media only screen and (min-width: 870px) and (max-width: 1024px) {
	.index .header, .index .maincontent, .index .footerinner, .index .footerbottominner, .index .pagetitle { width: 100%; }
}
.responsive-img,
.responsive-img figure,
.responsive-img img,
video.responsive-video{
  max-width: 100%;
  height: auto;
}
.round-corners-all img{
    border-radius: 70px 20px;
}
.round-corners img{
    border-radius: 20px 70px;
}
.ce_text.headlinebox.on-top{
    padding:30px;
    max-width:75%;
    margin:0 auto -5rem auto;
    border-radius: 15px;
}
#main .ce_text.headlinebox.on-top{
    margin-bottom: 2rem;
}
.ce_text.headlinebox.on-top p{
    line-height: 25px !important;
    margin-bottom: 0;
}
body:not(.index) .ce_text h3{
    color:black;
    font-weight: 600;
    margin-bottom: 20px !important;
}
body:not(.index) .ce_text p{
    color:#424445;
    font-size: 16px;
}
body:not(.index) .ce_text h3::before{
    content: '';
    display: block;
    background-color: #ff9c00;
    width: 50px;
    height: 10px;
    margin-bottom: 1rem;
}
body:not(.index) .ce_text p{
    margin-bottom: 1rem;;
}
/*-----Bouton retour haut----*/
@keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to { opacity: 1 }
  }
@keyframes fadeOutBottom {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(100%);
    }
}
a.btn_up{
    display: flex;
    justify-content: center;
    align-items: center;
    width:32px;
    height:32px;
    background-color:#424445;
    border-radius:5px 10px;
    position: fixed;
    bottom:1rem;
    cursor: pointer;
    right:10px;
    opacity: 0;
    -webkit-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
    -moz-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
    -o-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
    animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
}
a.btn_up.active{
    opacity:1;
    -webkit-animation: fadeInBottom 1s;
    -moz-animation: fadeInBottom 1s;
    -o-animation: fadeInBottom 1s;
    animation: fadeInBottom 1s;
}
body .sites_index{
    margin:0 auto;
}
body .realisations{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    gap:30px;
    column-gap: 40px;
    margin:2rem auto;
    justify-content: center;
    align-items:center;
}
@media only screen and (max-width: 1024px) {
    body .realisations{
        grid-template-columns: repeat(2,1fr);
    }
}
@media only screen and (min-width: 600px) and (max-width: 768px){
    body .realisations{
        grid-template-columns: repeat(1,1fr);
    }
}
@media only screen and (max-width: 600px) {
    body .realisations{
        grid-template-columns: repeat(1,1fr);
    }
}
body .realisations>div{
    margin: 0;
}
body .realisations>div img{
    width:100%;
    height:auto;
    border-radius:20px 70px;
    box-sizing: border-box;
}
@media only screen and (min-width: 600px) and (max-width: 768px){
    body .realisations>div img{
        border-radius:20px 40px;
        max-width:210px;
    }
    body .realisations .realisation-item{
        padding-bottom: 40px;
        margin-bottom: 40px;
        border-bottom: 5px solid rgba(0, 0, 0, 0.1);
        border-radius: 0 0 20px 20px;
    }
}
iframe{
    border-radius: 20px 70px;
    max-width: 100%;
}
/*--- formulaires---*/
.widget{
    margin-bottom: 10px;
}
.widget:not(.widget-checkbox) label{
    font-size: 16px;
    margin-bottom: 5px;
    display: block;
}
input[type="text"],
input[type="file"],
input[type="email"],
textarea{
    border-radius: 20px !important;
    padding:10px 15px;
    height:inherit;
    box-sizing: border-box;
}
.widget.btn{
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px; 
}
button.submit{
    padding-left:60px;
    background-image: url('../../files/click-on/images/svg/send.png');
    background-repeat: no-repeat;
    background-position: 20px center;
}
.flex-clients{
    display:flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap:15px;
}
.cta{
    display:flex;
    flex-flow: column;
    max-width: 50% !important;
    padding: 5rem !important;
	-moz-border-radius: 20px 70px;
	-webkit-border-radius: 20px 70px;
	border-radius: 20px 70px;
    background-color:rgba(0,0,0,0.05);
}
.cta .ce_text{
    display:grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}
.cta .ce_text p{
    margin-bottom: 0 !important;
}
@media only screen and (max-width: 990px) {
    .cta{
        max-width: 90% !important;
        padding:2rem !important;
    }
}

@media only screen and (max-width: 768px) {
    .cta .ce_text{
        display: block;
    }
    .cta .ce_text p{
        margin-bottom:1rem !important;
    }
}
/*---Barres de défilement---*/
::-webkit-scrollbar {
    width:5px;
    height:8px;
    background-color:#424445;
}

::-webkit-scrollbar-thumb{
    background-color:#8FBF21 !important;
}
.circles_animation path{
    opacity: 0;
}
/*---Animations accueil---*/
@keyframes zoomIn {
    0% {
      transform: scale(1);
      transform-origin: center;
      opacity: 0;
    }
    50% {
      transform: scale(.5) translateY(-50px);
      opacity: 1;
    }
    100% {
      transform: scale(1) translateY(0);
    }
}
@keyframes showMe {
    0% {
      opacity: 0;
      margin-left:-40px;
    }
    100% {
      opacity: 1;
      margin-left:0;
    }
}

.circles_animation path.active {
    animation: zoomIn 1s ease-in-out;
    opacity: 1;
}
.index .headlinebox2{
    animation: showMe 1s ease-in;
}

/*---Menu mobile---*/
.menupopup .trail{
    background-color: rgba(0,0,0,0.5);
}
.menupopup ul a.active{
    background-color:#ff6c00;
    color:white;
}

/*----Animation checkmarl circle----*/
/**
  * Extracted from: SweetAlert
  * Modified by: Istiak Tridip
  */
  .success-checkmark {
    width: 80px;
    height: 115px;
    margin: 0 auto;

    .check-icon {
        width: 80px;
        height: 80px;
        position: relative;
        border-radius: 50%;
        box-sizing: content-box !important;
        margin-top:8px;

        &::before {
            top: 3px;
            left: -2px;
            width: 30px;
            transform-origin: 100% 50%;
            border-radius: 100px 0 0 100px;
        }

        &::after {
            top: 0;
            left: 30px;
            width: 60px;
            transform-origin: 0 50%;
            border-radius: 0 100px 100px 0;
            animation: rotate-circle 4.25s ease-in;
        }

        &::before, &::after {
            content: '';
            height: 100px;
            position: absolute;
            /*background: #FFFFFF;*/
            transform: rotate(-45deg);
        }

        .icon-line {
            height: 5px;
            background-color: rgba(119, 211, 13, 0.5);
            display: block;
            border-radius: 2px;
            position: absolute;
            z-index: 10;
            box-sizing: content-box !important;

            &.line-tip {
                top: 46px;
                left: 14px;
                width: 25px;
                transform: rotate(45deg);
                animation: icon-line-tip 0.75s;
            }

            &.line-long {
                top: 38px;
                right: 8px;
                width: 47px;
                transform: rotate(-45deg);
                animation: icon-line-long 0.75s;
            }
        }

        .icon-circle {
            top: -8px;
            left: -8px;
            z-index: 10;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            position: absolute;
            box-sizing: content-box !important;
            border: 8px solid #8FBF21 !important;
        }

        .icon-fix {
            top: 8px;
            width: 5px;
            left: 26px;
            z-index: 1;
            height: 85px;
            position: absolute;
            transform: rotate(-45deg);
            /*background-color: #FFFFFF;*/
        }
    }
}

@keyframes rotate-circle {
    0% {
        transform: rotate(-45deg);
    }
    5% {
        transform: rotate(-45deg);
    }
    12% {
        transform: rotate(-405deg);
    }
    100% {
        transform: rotate(-405deg);
    }
}

@keyframes icon-line-tip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }
    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }
    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}

@keyframes icon-line-long {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    84% {
        width: 55px;
        right: 0px;
        top: 35px;
    }
    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}