body {
    background:#222 url("../images/bg_main.png") repeat center top;
    /* background-color:black; */
	/* background-size: 100%; */
	/* color: #DDD; */
    color: #666;
	/* font-weight:bold; */
	font-family: verdana;
    margin:0;
    /*position:relative;*/
    /* background: linear-gradient(top, #4293d6 0%,#001e96 100%); */
    /* position:relative;color: #666;background:#222 url("../images/bg_main.png") repeat center top; font: normal 62.5% "Helvetica Neue", Helvetica, Arial, sans-serif;overflow-x:hidden; */
}

a img {border: none;}
a {color: #39c; text-decoration: none;}
a:focus, 
a:hover { color: #ef9310; }
/* a { color: #444; text-decoration: none; } */

 .css1 { font-size: 1.2em; }
 .css2 { font-size: 1.8em; }
 .css3 { font-size: 2.4em; }
 .css4 { font-size: 3em; }
 .tag_cloud a{color:#777;padding:5px 5px 0 5px;margin:0;float:left;}
 .tag_cloud a:hover {color:#c3d9ff;}

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre 				{ margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }

.left{ float:left; }
.right{ float:right; }
hr,.hide{ display:none; }

iframe { z-index:-500; }

.h2_title {text-align:center;}
h2{font-size:2.5em;line-height:1.2em;margin:0;text-shadow:1px 1px 2px #000;}
h3{font-size:1.4em;line-height:1em;margin:0;text-shadow:1px 1px 2px #FFF;}
.desc{font-size:1.3em;line-height:1.4em;margin:0 0 1em 0;}

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

ul {list-style-type: none;}
/* a {
	text-decoration:none;
}
h1 {
	width:100%;
	text-shadow: 2px 2px #000; 
}
ul {
	text-decoration:none;
	list-style-type: none;
}
li a {
    color: green;
}

img {
	display:block;
	max-width:100%;
}
.clear {
	display:block;
	width:100%;
} */
#main_logo {position:absolute; top:0;left:100px; z-index:5500;}
#main_logo a img{width:200px;height:100px;}
#topbar {position:absolute; top:0;right:20px;z-index:5500;}
.language{width:40px;height:15px;font-variant:small-caps;float:right;z-index:5000;}
.language a{color:#FFF;font-variant:small-caps;font-size:12px;text-shadow:1px 1px 2px #000;padding-top:3px;z-index:5000;}

.topnav {
	position:absolute;
	top:0;
	left:0;
	background-color:black;
	opacity:0.6;
	margin-bottom:20px;
	width:100%;
    height:100px;
	padding:5px 0 5px 0;
    z-index:5000;
    border-bottom:4px solid #666;
    /* border-bottom: 1px solid #ccc; */
}

#black_tr_bg {
    position:absolute;
    top:114px;
    left:0;
    width:100%;
    height:300px;
    background: url("../images/black_tr_bg.png") repeat top left;
}
/* .topnav:hover #nav .navi a{
	color: #666;
} */
/* #content {
    margin-top: 150px;
} */
#contact_cont {position:relative;}
#contact_main_cont {
    /* position:relative; */
    position:absolute;
    top:50%;
    left:50%;
    width:177px;
    padding:30px 120px 35px 120px; 
    background-color: #CCC;
    
    margin-top: -80px;
    margin-left: -212px;
    /* opacity: 0.6; */
    box-shadow: inset 0 0 20px black;
    border-radius:20px;
    text-align:center;
    background: #0A539C;
    background: linear-gradient(top, #4293d6 0%,#001e96 100%);
}
#video_wrapper_cont {
    /* background-color: #000; */
    display:flex;
    position:relative;
    overflow:hidden;
}
#video_wrapper {
    background-color: #000;
    position:relative;
    display:flex;
    /* align-self:flex-start; */
    align-self:center;
    /* flex-wrap:nowrap;
    flex:1;
    align-items: center;
    align-content: center; */
    /* align-items: center;
    justify-content: center;
    vertical-align:middle; */
    /* align-content: flex-start;
    align-items: flex-start; */
    /* flex-wrap: nowrap; */
    /* flex:1; */
    width:100%;
    height:auto;
    /* justify-content: flex-start; */
    justify-content: center;
}

#welcome {
    position:relative;
    /* width:177px; */
    width:420px;
    height:130px;
    /* padding:30px 120px 100px 120px; */
    /* padding:3px; */
    background-color: #CCC;
    
    margin: 330px auto 280px auto;
    /* opacity: 0.6; */
    box-shadow: inset 0 0 20px black;
    border-radius:20px;
    /* text-align:center; */
    /* background: #0A539C; */
    background: linear-gradient(top, #4293d6 0%,#001e96 100%);
}

#welcome_1 {
    position:absolute;
    top:50%;
    left:50%;
    align-items:center;
    align-self:center;
    /* width:33%; */
    height:130px;
    vertical-align:middle;
    /* position:relative; */
    /* width:177px; */
    width:420px;
    height:130px;
    min-width:417px;
    margin-left:-208px;
    margin-top:-78px;

    /* padding:30px 120px 100px 120px; */
    /* padding:3px; */
    background-color: #CCC;
    
    /* margin: 330px auto 280px auto; */
    /* opacity: 0.6; */
    box-shadow: inset 0 0 20px black;
    border-radius:20px;
    /* text-align:center; */
    /* background: #0A539C; */
    background: linear-gradient(top, #4293d6 0%,#001e96 100%);
}

.welcome_img {
    width:417px;
    height:130px;
}
.welcome_left {
    display:block;
    width:147px;
    height:130px;
    float:left;
    overflow:hidden;
    /* background: transparent url('../images/welcome_all.png') top left; */
}
.welcome_mid {
    position:relative;
    display:block;
    width:123px;
    height:130px;
    float:left;
    overflow:hidden;
}
.welcome_mid img{
    position:absolute;
    top:0;
    left:-147px;
}
.welcome_right {
    position:relative;
    display:block;
    width:147px;
    height:130px;
    float:left;
    overflow:hidden;
}
.welcome_right img{
    position:absolute;
    top:0;
    left:-270px;
}
/*index links*/
#ff_sf_fix {
    position:absolute;
    top:-9000px;
    left:-9000px;
    display:none;
}
#linux_link_container, #mac_link_container, #win_link_container {
    width:200px;
    height:200px;
    position:absolute;
    top:-185px;
    left:-170px;
    /* background-color: white; */
    border: 150px solid white;
    border-radius: 300px;
    opacity:0.2;
    display:none;
}
#mac_link_container {
    left:-40px;
}
#win_link_container {
    left:90px;
}

#kali_link, #dortania_link, #azure_link {
    display:none;
    position:absolute;
    transform: rotate(90deg);
}
#ubuntu_link, #osx_link, #window_link {
    display:none;
    position:absolute;
    transform: rotate(210deg);
}
#fedora_link, #par_link, #cmd_link {
    display:none;
    position:absolute;
    transform: rotate(300deg);
}

#mac_left_cont, #lin_mid_cont, #win_mid_cont, #mac_right_cont {
    /* background-color:black;
    opacity:0.4; */
    width:28px;
    height:106px;
    position:absolute;
    left:242px;
    top:10px;
}
#win_mid_cont {
    border-top-left-radius:30px;
    border-bottom-left-radius:30px;
}
#lin_mid_cont {
    left: 145px;
    border-top-right-radius:30px;
    border-bottom-right-radius:30px;
    width:30px;
}
#mac_right_cont {
    left: 270px;
    width:37px;
    border-top-right-radius:30px;
    border-bottom-right-radius:30px;
}
#mac_left_cont {
    left: 115px;
    border-top-left-radius:30px;
    border-bottom-left-radius:30px;
    width:30px;
}

.main_link {
    width:417px;
    /* overflow:hidden; */
}
.rotated_character {
    /* padding-left:20px; */
    display: inline-block;
    transform: rotate(45deg); /* Rotate the character by 180 degrees */
}
.depth {
    /* font-size:100px; */
    float:left;
    margin:0;
    display: block;
    /* padding: 0 20px; */
    color: black;
    font: bold 4em Arial, sans-serif;
    position: relative;
}

.depth:before, .depth:after {
    content: attr(title);
    /* padding: 0 20px; */
    color: rgba(255,255,255,.1);
    position: absolute;
}

.depth:before { top: 1px; left: 1px }
.depth:after  { top: 2px; left: 2px }

.first_text_container {
    background-color: #222;
}
.first_text_container p {
    width: 33%;
    float:left;
}
.bg_video {
    position:relative;
    /* position: absolute;
    top:0;
    left:0; */

    width: 100%;
    aspect-ratio: auto;
    /* z-index: -200; */
    /* align-self:flex-start; */
    /* align-self: center; */
    max-width: 1350px;
    margin:0 auto;

}
.container {
	display: flex;
	justify-content: center;
	justify-items: center;
}

.post {
	width:600px;
	background-color: #777;
	color: black;
	padding:20px;
	box-shadow: inset 0 0 10px black;
}
#output {
	height: 200px;
    width: 200px;
    z-index: 1;
    border-radius: 50%;
    background-color: #fff;
    background-position: center;
    background-size: cover;
	background: #CCC url("../images/no-avatar.jpg") no-repeat;
	box-shadow: 0 0 40px rgb(158 153 220);
    /* rgba(29,91,12.2,15.4); */
	/*box-shadow: inset 0 0 10px #f8a100;*/
		/*108, 147, 0, 0.1019607843);*/

}
#output_img {
	height: 200px;
    width: 200px;
    z-index: 1;
    border-radius: 50%;
    background-color: #fff;
    background-position: center;
    background-size: cover;
	background: #CCC url("../images/no-avatar.jpg") no-repeat;
	box-shadow: 0 0 40px rgb(158 153 220);
    /* rgba(29,91,12.2,15.4); */
	/*box-shadow: inset 0 0 10px #f8a100;*/
		/*108, 147, 0, 0.1019607843);*/

}
#cropping_window {
	display:none;
	position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -220px;
    width: 440px;
    height: 440px;

}
#avatar_container{
	position:relative;
	width:200px;
	height:200px;
}
#post_form {
	width:600px;
	position:relative;
}
.cropper-container{
	width:400px;
	height:400px;
	border: 20px solid black;
	background-color: #000;
}
/*.crop-actions{
	padding: 10px 20px 10px 20px;
	background-color:black;
}*/
#avatar_sumbit_btn, #post_submit_btn {
	display:none;
}
.fi-sr-pencil{
	filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}

.crop-actions {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    background-color:black;
	border: 20px solid black;
}
.crop-actions button{
    height: 40px;
    width: 40px;
    padding: 2rem;
    background-color:#2962FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0;
    top: 75%;
    z-index: 2;
    cursor: pointer;
	
	border-color:black;
	color:white;
	font-weight:bold;

    &:hover {
        transition: all .25s;
        background-color: darken(#2962FF, 15%);
    }

    .icon {
        color: white;
    }
}
#image {
    width: 400px;
    height: 400px;
}
.container {
  margin: 20px auto;
  max-width: 640px;
}

.fi {
  max-width: 100%;
}
.cropper-view-box,
.cropper-face {
  border-radius: 50%;
}
.cropper-hidden{
	display:block;
	position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 400px;
    height: 400px;
}

#message {
	width:100%;
	text-align:center;
}
.success_mess {
	color:darkgreen;
}
.error_mess {
	color:darkred;
}

/* from angular*/

.avatar-container {
    position: relative;
    width: fit-content;
}

.image-container {
    height: 200px;
    width: 200px;
    z-index: 1;
    border-radius: 50%;
    background-color: #fff;
    background-position: center;
    background-size: cover;
    box-shadow: 0 10px 20px 20px #6c93001a;
}

.icon-wrapper {
    label {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    input[type='file'] {
        display: none;
    }
}

.icon-wrapper {
    position: absolute;
    height: 40px;
    width: 40px;
    padding: .35rem;
    background-color:#2962FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 10px;
    bottom:10px;
    z-index: 2;
    cursor: pointer;

    &:hover {
        /*transition: all .25s;
        background-color: darken(#2962FF, 15%);*/
	    transition: all .75s;
	    background-color: #191173;
		.fi-sr-pencil{
			filter: invert(62%) sepia(88%) saturate(330%) hue-rotate(125deg) brightness(92%) contrast(89%);
		}
    }

    .icon {
        color: white;
    }

    label {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    input[type='file'] {
        display: none;
    }
}

.box-shadow-avatar{
    box-shadow: 0 10px 20px 20px #6c93001a;
}

.image-container {
    height: 200px;
    width: 200px;
    z-index: 1;
    border-radius: 50%;
    background-color: #fff;
    background-position: center;
    background-size: cover;
    box-shadow: 0 10px 20px 20px #6c93001a;

    &.avatar-placeholder{
        background-image: url('../../assets/img/no-avatar.jpg');
    }
}

input[type="file" i] {
    appearance: none;
    background-color: initial;
    cursor: default;
    align-items: baseline;
    color: inherit;
    text-overflow: ellipsis;
    text-align: start !important;
    padding: initial;
    border: initial;
    white-space: pre;
    overflow: hidden !important;
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}
.mat-icon {
    -webkit-user-select: none;
    user-select: none;
    background-repeat: no-repeat;
    display: inline-block;
    fill: currentColor;
    height: 24px;
    width: 24px;
    overflow: hidden;
}
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
/* HEADER */
#header{flex:1;z-index:2;position:relative;margin:0 auto;padding:0px;overflow:visible;
    /* height:398px; */
}
#header h1 {position:absolute;top:-150px;left:0;}
#header_inner {flex:1; margin-top:145px;
    /* position:absolute;top:145px;left:0;height:257px;width:1004px; */
}
/* NAV */
/*NAV*/
#nav {position:absolute;top:10px;left:0;width:1004px;height:65px;overflow:visible;}
#nav .navi {position:absolute;left:320px;top:25px;font-size:16px;font-weight:bold;}
#nav .navi div{display:inline;padding:21px 21px 21px 21px;overflow:visible;}
#nav .navi div a{font-variant:small-caps;display:inline;color:#666;border-top: 4px solid transparent;} /*color:#222;*/
#nav .navi #serviceslist ul li{float:left;padding:0;}
#nav div a:hover{text-shadow:1px 1px 2px #000;padding: 5px 0 23px 0;border-top: 4px solid #ef9310; color: #FFF;}

/* #nav .navi #serviceslist {position:absolute;left:120px;top:30px;background: rgba(85,85,85,0.6) url('sidebar_bg.png') repeat top left;padding:5px;border:1px solid #bbb;width:172px;height:107px;z-index:500;} */
#nav .navi #serviceslist {position:absolute;left:120px;top:30px;background: #000;padding:5px;border-radius: 10px;border:4px solid #666;width:172px;height:107px;z-index:500;} 
#nav .navi #serviceslist div{float:left;padding:0;}
#nav .navi #serviceslist div a{color:#777;border:0;padding:2px 10px 2px 10px;}
#nav .navi #serviceslist a:hover {text-shadow:1px 1px 2px #000;color:#FFF;border:0;padding:2px 10px 2px 10px;}
/*sub nav*/
/* #nav .navi #seolist {color:#222;position:absolute;left:117px;top:14px;background: rgba(85,85,85,0.6) url('sidebar_bg.png') repeat top left;padding:5px;border:1px solid #bbb;width:180px;z-index:2000;} */
#nav .navi #seolist {color:#222;position:absolute;left:140px;top:10px;background: #000;padding:5px;border-radius: 10px;border:4px solid #666;width:180px;z-index:2000;}
#nav .navi #seolist div {width:150px;}
#nav .navi #hostinglist {color:#222;position:absolute;left:140px;top:15px;background: #000;padding:5px;border-radius: 10px;border:4px solid #666;width:180px;z-index:2000;}
#nav .navi #hostinglist div {width:150px;}
#nav .navi #websitelist {color:#222;position:absolute;left:140px;top:60px;background: #000;padding:5px;border-radius: 10px;border:4px solid #666;width:180px;z-index:2000;}
#nav .navi #websitelist div {width:150px;}
#nav .navi #portfoliolist {color:#222;position:absolute;left:140px;top:81px;background: #000;padding:5px;border-radius: 10px;border:4px solid #666;width:180px;z-index:2000;}
#nav .navi #portfoliolist div {width:150px;}
#nav .navi #businesslist {color:#222;position:absolute;left:140px;top:50px;background: #000;padding:5px;border-radius: 10px;border:4px solid #666;width:180px;z-index:2000;}
#nav .navi #businesslist div {width:150px;}

/* TABS */
.group:after {display:block;content:".";height:0;clear:both;visibility:hidden;}


/*CONTENT*/

#content {z-index:1;position:relative;margin:0 auto;width:1004px;padding:0; min-height: 650px;}

#content #inner_left h2{margin:0;}

#content_inner{position:relative;width:1004px;padding:0px;}

#left-content {position:relative;float:left;width:500px;padding-left:95px;}

#content_inner #inner_left{ float:left; width:550px;padding-bottom:20px; }

#left-content #inner_left {float:left;width:400px;padding-bottom:20px;background:#FFF;}
/*.blog_wrap {background: url(/assets/pelicule.jpg) repeat-y top left;margin:0;width:1004px;padding:0;}*/
.arrowstart {position:absolute;top:0px;left:-12px;}
.histoire{width:600px;margin: 0 auto;}
.map{float:left;}
.contact_tip{font-size:12px;text-align:center;float:left;width:400px;padding-left:40px;}
.contact_tip h3 {color:maroon;}
.catalogue {padding-left:15px;float:right;}
.catalogue a{color:#39c;float:left;text-shadow:1px 1px 2px #FFF;}
.celebrity_search{width:300px;margin:0 auto;}
.loginform{margin-bottom:20px;}
.notifier{float:right;width:400px;}
.paginate {padding-right:10px;}
.newstitle{width:197px;height:149px;position:absolute;top:-30px; left:300px;}
.user_content {float:left;width:650px;height:232px;overflow:hidden;}
.user_movie {float:left;width:230px;overflow:visible;}

div.profile_tab a {color:#FFF;position:fixed;top:50%;left:-72px;float:left;border-radius-bottomright:15px;-moz-border-radius-bottomright:15px;-webkit-border-bottom-right-radius:15px;border-radius-bottomleft:15px;-moz-border-radius-bottomleft:15px;-webkit-border-bottom-left-radius:15px;padding:1px 15px;background:#aaff33;font-size:15px;font-weight:bold;font-family:Verdana;-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);text-shadow:1px 1px 2px #000;}
 div.profile_tab a:hover {color:#c3d9ff;}

.tab {position:absolute;width:700px;height:40px;top:55px;left:0;font-weight:bold;padding-bottom:5px;}
.tab a {background:#EEE;text-shadow:1px 1px 3px #000;font-size:14px;margin-right:5px;border:1px solid #EEE;border-style:solid;border-width:1px;padding:5px 15px;text-decoration:none;border-radius: 5px 5px 0 0;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;-webkit-border-top-left-radius:5px;-moz-box-shadow:-3px 8px 10px 2px #999;-webkit-box-shadow:-5px 10px 10px #999;box-shadow:-5px 10px 10px #999;}
.tab a:hover {color:#222 !important;padding:7px 15px;text-shadow:1px 1px 3px #000;}

ul.column1{font-size:10px;float:left;width:299px;padding-right:10px;overflow:hidden;}
ul.mid {border-left:2px solid #EEE;border-right:2px solid #EEE;}
ul.column{font-size:14px;float:left;width:299px;padding-left:15px;padding-right:15px;overflow:hidden;}
ul.column li a:hover {color:#FFF !important;}
ul.column p a:hover {color:#FFF !important;}
#dialog {background:#EEE;padding:10px; -webkit-border-radius:20px;-moz-border-radius:20px;}
#title {position:relative;background: transparent url('../images/title_shade.png') top left repeat-x;background-color: rgba(238,238,238,0.3); border-radius: 20px 20px 20px 20px;border:1px solid #EEE; -webkit-border-radius:20px;-moz-border-radius:20px;z-index:2;box-shadow:-3px 8px 10px 2px #999;-moz-box-shadow:-3px 8px 10px 2px #999;-webkit-box-shadow:-5px 10px 10px #999;}
#title p {color:#777;text-shadow:0px 1px 0px #FFF;}


.h2_title {text-align:center;}

.column { float:left;width:300px; padding:0 20px 20px 0;}
.column h3{font-size:130%;line-height:25px;margin-bottom:5px;}
.column .first{padding-left:0;}
.column .last{padding-right:0;}

#storage-icon-container {
    position:absolute;
    top:50%;
    left:50%;
    width:1000px;
    /* height: 300px; */
    /* padding:30px 120px 0px 120px; */
    /* background-color: #CCC; */
    /* margin: 200px auto 0px auto; */
    /* opacity: 0.6; */
    /* box-shadow: inset 0 0 20px black; */
    /* border-radius:20px; */
    /* text-align:center; */
    /* background: #0A539C; */
    /* background: linear-gradient(top, #4293d6 0%,#001e96 100%); */
}

#storage-icon-container img {
    margin-left:-500px;
    margin-top:-120px;
    width:100%;
    height: 300px;   
}

#business-icon-container {
    position:absolute;
    top:50%;
    left:50%;
    width:177px;
    margin-left:-220px;
    margin-top:-100px;
    padding:30px 120px 30px 120px;
    background-color: #d4d5ca;
    /* height: 300px; */
    /* margin: 250px auto 0px auto; */
    /* opacity: 0.6; */
    box-shadow: inset 0 0 20px black; 
    border-radius:20px;
    /* text-align:center; */
    /* background: #0A539C; */
    /* background: linear-gradient(top, #4293d6 0%,#001e96 100%); */
}
#business-icon-container img {
    width:100%;
    height: 150px; 
}

/* index */
.ai_logo {
    display: flex;
    flex-wrap: wrap;            /* Permet le retour à la ligne */
    justify-content: center;    /* Centre les lignes horizontalement */
    align-items: center;        /* Centre verticalement si nécessaire */
    padding: 0;
    margin: 0 auto;             /* Centre le ul lui-même */
    list-style: none;
    max-width: 100%;
    box-sizing: border-box;
}
.ai_logo li {float:left;padding:18px;}
.ai_logo li img {border-radius:20px;}
/* mobile */
.mobile_logo li {float:left;padding:18px;}

/* slider schedulum */
.bg_gradient_text {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  /* background-color: #53242f;
  color: white;
  mix-blend-mode: difference; */
  background: linear-gradient(to left, #8850ad, #507dad);
  /* background: linear-gradient(to left, #ff0000, #0000ff);  */
  /* du rouge à gauche au bleu à droite */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* pour Firefox, tu peux essayer : */
  background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
}

.home_phones {
  width: 150px;
  height: 300px;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .home_phones {
    width: 100px;
    height: 250px;
  }
}

@media (max-width: 500px) {
  .home_phones {
    width: 70px;
    height: 180px;
  }
}
.logo-slider-container {
  overflow: hidden;
  width: 100%;
  /* background-color: white;  */
  padding: 20px 0;
}

.logo-slider-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.logo-slider-track {
  display: flex;
  align-items: center;
  gap: 60px;
  animation: scroll 30s linear infinite;
  width: max-content;
}

.logo-slider-group {
  display: flex;
  gap: 40px;
}

.logo-slider-group img {
  height: 100px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.logo-slider-group img:hover {
  transform: scale(1.1);
}

@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* hosting */
.cloud_logo li {float:left;padding:50px;}
/* gaming */
.gaming_logo {
    display: flex;
    flex-wrap: wrap;            /* Permet le retour à la ligne */
    justify-content: center;    /* Centre les lignes horizontalement */
    align-items: center;        /* Centre verticalement si nécessaire */
    padding: 0;
    margin: 0 auto;             /* Centre le ul lui-même */
    list-style: none;
    max-width: 100%;
    box-sizing: border-box;
}

.gaming_logo li {padding:50px;}
/* BOUTON */
div.btn1-more {  text-align:center;margin-top:21px;margin-right:20px; width:130px;height:28px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#c3d9ff url('../images/btn-gr.png') repeat-x 0 50%;border-bottom: 2px; border-left:2px; border-style:solid; border-color:#a4b6d5; }
div.btn1-more a{color:#fff;font-size:150%;}
div.btn1-more a:hover {background: url('../images/btn-gr.png') repeat-x 0 -110%;color:#EEE;text-shadow:1px 1px 2px #555; }
div.btn2{padding:5px 14px;color:#fff;font-size:150%;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#3792b3 url('../images/btn-gr.png') repeat-x 0 50%;}
div.btn2-more a{margin-left:245px;padding:5px 14px;color:#fff;font-size:150%;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#3792b3 url('../images/btn-gr.png') repeat-x 0 50%; }
div.btn{padding:5px 14px;color:#fff;font-size:150%;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#3792b3 url('../images/btn-gr.png') repeat-x 0 50%;border:1px solid #0695D0;}

a.btn-more:hover {background:#007799 url('../images/btn-gr.png') repeat-x 0 -110%;color:#000;text-shadow:0px 1px 0px #bbb;font-weight:bold;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; border:1px solid #295b6d;box-shadow: inset 0px 0px 5px 2px #666;}
a.btn-more{padding:5px 30px 7px 30px;color:#fff;font-size:20px;font-variant:small-caps;font-weight:bold;text-shadow:0px 1px 0px #000;background:#3792b3; border:1px solid #4d99b4;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;margin-left:75px;}

/*FOOTER*/
#footer{position:relative;margin: 0 auto;padding:0;background: #222; border-top:3px solid #CCC;}
#footer_inner {text-align: center;position:relative;min-height:300px;height:20px;height:auto !important;width:1004px;margin:0 auto;background: transparent;margin-bottom:0px;padding-top:10px;border-top:1px dotted #000;}
#footer_inner ul {margin-top:0px;padding:5px;}
#footer_inner ul li{display:inline;float:right;list-style-type:none;}
#footer_inner li a{font-variant:small-caps;padding:3px 5px;margin:5px 0;border-left:1px solid transparent !important;;border-bottom:1px solid transparent !important;color:#444;} 
#footer_inner li a:hover{background:#111 url('../images/button_gr.png') repeat-x top left;border-left:1px solid #393939 !important;border-bottom:1px solid #393939 !important;padding:3px 5px;margin:0;color:#FFF;}
.home_link{position:absolute;bottom:8px;left:8px;height:24px;width:111px;}
.banner{width:720px;height:90px;background: #444;margin: 0 auto;}

.rss {z-index:100;position:absolute;top:-64px;right:136px;}
.facebook{z-index:100;position:absolute;top:-64px;right:68px;}
.twitter{z-index:100;position:absolute;top:-64px;right:0px;}
#copyright {font-size: 10px;color:#666;}
/* #footer_link {padding-left:40px;} */

#logout_form {display:none;}
/* forms */
#password {border:3px solid maroon;margin:0;padding:5px;padding-left:15px;padding-bottom:10px;outline:1px solid black;}

form fieldset{margin:0 0 15px 0;}

form fieldset label{display:block;margin:0;font-size:1.4em;font-weight:bold;}

.notifier textarea{width:300px;}
.notifier textfield{width:300px;}

.center{ text-align:center !important; }


/* Clients */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#clientsList { position: relative; margin: 0; padding: 0; list-style: none; overflow: hidden; background: url('../images/loading.gif') 50% 210px no-repeat; }
body.loaded #clientsList { background: none; }
#clientsList li { position: absolute; width: 250px; height: 150px;
        -webkit-transition-property: -webkit-transform, top, left, width, height; -webkit-transition-duration: .3s; -webkit-transition-timing-function: ease-out; -webkit-transform: scale3d(0,0,1) rotate(-15deg) translate3d(-500px, -500px, 0);
           -moz-transition-property:    -moz-transform, top, left, width, height;    -moz-transition-duration: .3s;    -moz-transition-timing-function: ease-out;    -moz-transform:   scale(0,0)   rotate(-15deg)   translate(-500px, -500px);
            -ms-transition-property:     -ms-transform, top, left, width, height;     -ms-transition-duration: .3s;     -ms-transition-timing-function: ease-out;     -ms-transform:   scale(0,0)   rotate(-15deg)   translate(-500px, -500px);
             -o-transition-property:      -o-transform, top, left, width, height;      -o-transition-duration: .3s;      -o-transition-timing-function: ease-out;      -o-transform:   scale(0,0)   rotate(-15deg)   translate(-500px, -500px);
                transition-property:         transform, top, left, width, height;         transition-duration: .3s;         transition-timing-function: ease-out;         transform:   scale(0,0)   rotate(-15deg)   translate(-500px, -500px);
    }
#clientsList li.highlight { width: 501px; height: 301px; }
body.loaded #clientsList li {
        -webkit-transform: scale3d(1,1,1) rotate(0deg) translate3d(0, 0, 0);
           -moz-transform:   scale(1,1)   rotate(0deg)   translate(0, 0);
            -ms-transform:   scale(1,1)   rotate(0deg)   translate(0, 0);
             -o-transform:   scale(1,1)   rotate(0deg)   translate(0, 0);
                transform:   scale(1,1)   rotate(0deg)   translate(0, 0);
    }
#clientsList li a { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
#clientsList li a img { margin: 0; padding: 0; border: 0; display: block; position: absolute; top: 0; left: 0; }
#clientsList li a img.hover { top: auto; bottom: 0; opacity: 0; filter: alpha(opacity=0);
        -webkit-transition: opacity .3s linear;
           -moz-transition: opacity .3s linear;
            -ms-transition: opacity .3s linear;
             -o-transition: opacity .3s linear;
                transition: opacity .3s linear;
    }
#clientsList li a:hover img.hover { opacity: 1; filter: alpha(opacity=100); }

#clientsList li div.img_wrapping { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
#clientsList li div.img_wrapping img { margin: 0; padding: 0; border: 0; display: block; position: absolute; top: 0; left: 0; }
#clientsList li div.img_wrapping img.hover { top: auto; bottom: 0; opacity: 0; filter: alpha(opacity=0);
        -webkit-transition: opacity .3s linear;
           -moz-transition: opacity .3s linear;
            -ms-transition: opacity .3s linear;
             -o-transition: opacity .3s linear;
                transition: opacity .3s linear;
    }
#clientsList li div.img_wrapping:hover img.hover { opacity: 1; filter: alpha(opacity=100); }

#clientsButton { width: 250px; height: 150px; cursor: pointer; }
#clientsButton p { color: #fff; font-size: 1.692307692307692em /* 22px/13px */; text-transform: uppercase; width: 206px; height: 102px; margin: 0; padding: 48px 22px 0; background: url(/assets/details-icon-white.png) 214px 214px no-repeat #e52323;
        -webkit-transition-property: background-position, background-color; -webkit-transition-duration: .3s; -webkit-transition-timing-function: ease-in-out;
           -moz-transition-property: background-position, background-color;    -moz-transition-duration: .3s;    -moz-transition-timing-function: ease-in-out;
            -ms-transition-property: background-position, background-color;     -ms-transition-duration: .3s;     -ms-transition-timing-function: ease-in-out;
             -o-transition-property: background-position, background-color;      -o-transition-duration: .3s;      -o-transition-timing-function: ease-in-out;
                transition-property: background-position, background-color;         transition-duration: .3s;         transition-timing-function: ease-in-out;
    }
#clientsButton:hover p, #clientsButton:focus p, #clientsButton.doHide p { background-position: 214px 114px; background-color: #000; }

#clientsButton p br { display: none; }
#clientsButton p a { color: #fff; font-size: 0.636363636363636em /* 14px/22px */; text-transform: none; text-decoration: none; width: 100%; height: auto; display: block; position: static; }


#clients h2 { font-size: 2.307692307692308em /* 30px/13px */; padding-top: 40px; margin-right: 22px; margin-left: 22px; }

#clients .listing { display: inline-block; margin: 0 22px; }
*>/**/#clients .listing { display: block; }
#clients .listing:after { content: "."; width: 0; height: 0; overflow: hidden; display: block; clear: both; visibility: hidden; }

#clients .listing div { float: left; width: 33.33%; }
#clients .listing h3 { font-size: 1.076923076923077em /* 14px/13px */; margin-right: 20px; }
#clients .listing ul { margin-right: 20px; }

/*NEWS*/
#home_new_wrapper {width:598px;display:block;margin:20px auto 0 auto;height:510px;background:#EEE;overflow:hidden;border:2px solid #DDD;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px 10px 10px 10px;font-size:12px;}
.sheet {/*position:relative;*/background: #FFF url('../images/curl1.png') no-repeat top right;width:580px;padding:20px 20px;margin:20px auto 0 auto;box-shadow:-5px 8px 5px 0 #999999;-moz-box-shadow:-5px 8px 5px 0 #999999;-webkit-box-shadow:-5px 8px 5px 0 #999999;}
#home_new_wrapper .sheet p {font-size:14.4px;}
.sheet p {font-size:14.4px;}
.sheet a {color:#39c; font-weight:bold;}
.sheet a:hover {color:#ef9310;}
.the_month {font-size:12px;float:left;/*20px;bottom:20px;*/margin-top:-50px;width:40px;height:54px;background:#333;text-align:center;}
.the_day {font-size:12px;margin-left:5px;/*bottom:5px;*/width:30px;height:29px;margin-top:3px;background:#FFF;font-size:bold;text-align:center;}
.sheet:hover {background: #FFF url('../images/curl.png') no-repeat top right;}
.avatar_post {float:left;padding-right:10px}
.post_title, .post_link {float:left;}
.post_title_sheet {font-size:2em;line-height:2.7em;margin:0;text-shadow:1px 1px 2px #000;} 
/* a {color: #0000FF;} */


#post_link_container {display:none;}

.empty_posts {margin:0 auto;text-align:center;margin-top:0px;}
#search_container {display:flex;justify-content:center;}
#search_form {position:relative;}
#title_search {position:relative;background: transparent url('../images/title_shade.png') top left repeat-x;background-color: rgba(238,238,238,0.3); border-radius: 20px 20px 20px 20px;border:1px solid #EEE; -webkit-border-radius:20px;-moz-border-radius:20px;z-index:2;box-shadow:-3px 8px 10px 2px #999;-moz-box-shadow:-3px 8px 10px 2px #999;-webkit-box-shadow:-5px 10px 10px #999;width:280px;padding:5px 10px;}
.search_icon {
    position:absolute;
    height: 40px;
    width: 40px;
    padding: .35rem;
    background-color:#460104;
    /* #2962FF; */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    right: -4em;
    top:-10px;
    /* top: 75%; */
    z-index: 2;
    cursor: pointer;
}
.search_icon img {filter: invert(93%) sepia(82%) saturate(4033%) hue-rotate(276deg) brightness(88%) contrast(69%);}
.search_icon img:hover {filter: invert(100%) sepia(97%) saturate(0%) hue-rotate(177deg) brightness(109%) contrast(100%);}


/*DETAIL*/
#avatar_form {margin-bottom: 20px;}
#new_post_link {margin-top:40px;}

/* FLASH */
#legal{padding:10px;margin-right:20px;background-color:#fff;}
#flash_notice, #flash_error {width:475px;text-align:center;padding: 5px 8px;margin: 0 auto;font-size:12px;}
#flash_notice {background-color: #CFC;border: solid 1px #6C6;}
#flash_error {background-color: #FCC;border: solid 1px #C66;}
.fieldWithErrors {display: inline;}
#errorExplanation {width: 320px;border: 2px solid #CF0000;padding: 0px;padding-bottom: 12px;margin-bottom: 20px;background-color: #f0f0f0;margin:0 auto;}
#errorExplanation h2 {text-align: center;font-weight: bold;padding: 5px 5px 5px 15px;font-size: 12px; margin: 0;background-color: #c00;color: #fff;}
#errorExplanation p {text-align: center;color: #333; margin-bottom: 0;padding: 8px;}
#errorExplanation ul {margin: 2px 24px;}
#errorExplanation ul li {font-size: 12px;list-style: disc;}


/* FOLIO */
#thumb_wrapper {
    display: flex;
    flex-wrap: wrap;            /* Permet le retour à la ligne */
    justify-content: center;    /* Centre les lignes horizontalement */
    align-items: center;        /* Centre verticalement si nécessaire */
    padding: 0;
    margin: 0 auto;             /* Centre le ul lui-même */
    list-style: none;
    max-width: 100%;
    box-sizing: border-box;
}
ul.thumb {
    display: flex;
    flex-wrap: wrap;            /* Permet le retour à la ligne */
    justify-content: center;    /* Centre les lignes horizontalement */
    align-items: center;        /* Centre verticalement si nécessaire */
    margin: 0 auto;             /* Centre le ul lui-même */
    list-style: none;
    /* max-width: 100%; */
    box-sizing: border-box;
	/* float: left; */
	list-style: none;
    padding-top: 5px;
    padding-left:4px;
	max-width: 1004px;
}
ul.thumb li {
  /*box-shadow:-3px 8px 10px 2px #999;-moz-box-shadow:-3px 8px 10px 2px #999;-webkit-box-shadow:-5px 10px 10px #999;*/
	margin: 0; padding: 6px;
	float: left;
	position: relative;  /* Set the absolute positioning base coordinate */
	width: 99px;
	height: 99px;
}
ul.thumb li a {
    display: block;
}
ul.thumb li img {
	width: 100px; 
    height: 100px; /* Set the small thumbnail size */
	-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
	border: 1px solid #bbb;
	padding: 3px;
	position: absolute;
	left: 0; 
    top: 0;
}
ul.thumb li img.hover {
	background: rgba(85,85,85,0.6);border:1px solid #bbb;  /* Image used as background on hover effect
	border: none; /* Get rid of border on hover */
}

.precode {background: #eee;color:#333;border-radius:20px;padding:20px 15px; overflow-y:scroll;position:relative;}
.precode_cont {position:relative;}
.precode_copy_img {position:absolute;top:15px; right:25px;}
.precode_copy_img img:hover {filter: invert(55%) sepia(8%) saturate(2000%) hue-rotate(227deg) brightness(92%) contrast(88%);}

/* VIDEO STREAMING */
#video_player {align-self:center;width:100%;aspect-ratio:16 / 9;}


/* SCROLLING ANIMATION */
.js-scroll {
    opacity: 0.3;
    transition: opacity 500ms;
}
.js-scroll.scrolled {
    opacity: 1;
};


.scrolled.fade-in {
    animation: fade-in 1s ease-in-out both;
}
.scrolled.fade-in-bottom {
    animation: fade-in-bottom 1s ease-in-out both;
  }
  .scrolled.slide-left {
    animation: slide-in-left 1s ease-in-out both;
  }
  .scrolled.slide-right {
    animation: slide-in-right 1s ease-in-out both;
  }
  @keyframes slide-in-left {
    0% {
      transform: translateX(-300px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-right {
    0% {
      transform: translateX(100px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes fade-in-bottom {
    0% {
      transform: translateY(50px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }


  @media (max-width: 1020px) {
    #nav {
        width: 100%;
    }

    .mobile_img {
        margin-left: 20%;
        padding-top: 200px;
        width: 500px;
    }

    #content {
        width: 100%;
        padding: 0;
    }

    #content_inner {
        /* text-align: center; */
        margin: 0 auto;
        width: 90%;
    }

    #title {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .tab {
        width: 100%;
    }
    .tab a {
        float:left;
    }

    .column {
        text-align: center;
        width: 70% !important;
        border: 0 !important;
        border-bottom: 2px solid #ccc !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .last {
        border: 0 !important;
    }

    #footer_inner {
        width: 100%;
        padding: 0;
    }
}

@media (max-width: 910px) {

    #nav .navi {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* ou space-between selon le style voulu */
        /* gap: 12px 20px; */ 
        /*vertical (12px), horizontal (20px) spacing */
    }

    #nav .navi > div {
        padding-top: 0 !important;
        min-width: 100px;
        text-align: center;
    }

    #seolist, #hostinglist, #businesslist {
        left: -175px !important;
    }

    #content_inner .posts_container {
        padding-top:150px;
    }

    .posts_container li {
        margin: 0 auto;
    }

    .sheet {
        width: 90%;
        padding: 20px;
        margin: 0 auto;
    }

    #title_search {
        width: 200px; 
    }
}

@media (max-width: 760px) {
    #main_logo {
        top: 20px;
        left: 20px;
    }
    #main_logo a img{
        width: 80px;
        height: auto;
    }
    .mobile_img {
        margin-left: 20%;
        padding-top: 280px;
        width: 400px;
    }

    #nav .navi {
        left:50px;
    }

    #seolist, #hostinglist, #businesslist {
        left: 120px !important;
    }

    #title_search {
        margin-left: 80px; 
    }
    .post_video_wrapper {
        width: 370px !important;
    }
}

@media (max-width: 600px) {
    #main_logo {
        top: 60px;
    }
    #nav .navi {
        left: 0px;
    }

    #seolist, #hostinglist, #businesslist {
        left: 0 !important;
        width: 100%;
    }

    .mobile_img {
        margin-left: 10%;
        padding-top: 350px;
        width: 300px;
    }

    #title_search {
        margin-left: 50px; 
    }
}