@import 'framework-2020.css';
@import 'framework-form-2020.css';
@import 'framework-structure-2020.css';

 .btn{
 display: inline-block;
cursor: pointer;
border-radius: 0px;
padding: 6px 10px;
margin-bottom: 4px;
font-size: 15px;
font-weight: 100;
text-decoration: none;
text-align: center;
border: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
background-color: #ccc;
 }
 
li.item-104 a{
background-image:url(./../../../images/products/item-104.png);
}
li.item-105 a{
background-image:url(./../../../images/products/item-105.png);
}
li.item-106 a{
background-image:url(./../../../images/products/item-106.png);
}
li.item-107 a{
background-image:url(./../../../images/products/item-107.png);
}


.parent-category-name{
    display: none;
}

.popover{
background: #000;
color: #eee;
font-size: 12px;
width:0;
height: 0;
padding: 0px;
visibility: hidden;
display: none;
overflow: hidden;
}

.icons .btn-group{
    display: none;
}

.main{
    min-height: 540px;
}

body .contact img{ width: auto }

.accord{padding:0; margin:0}
.contact h3 { color:#000; font-size:16px; padding-top:5px; border-top:1px dotted #FFD200; padding-top:15px; padding-bottom:15px; margin:0; }
.contact h3:hover { /* background-image:url(https://www.defactotech.com/templates/defactoncwv1/images/1373360014_forward-2.png); background-position:right 20px; background-repeat:no-repeat; */ cursor:pointer;}
.contact a:link, .contact a:visited { color:#000; text-decoration:none; text-shadow:1px 1px 2px #999}
.contact a:hover {border-bottom:2px dotted #FFD200; }
.accord2 {display:none;}

.contact hr {border-top:none; border-bottom:1px dotted #ccc; border-left:none; border-right:none;}
.contact label {width:110px; display: inline-block; margin:0; padding:0;  }
.contact input {padding:10px; border:1px solid #CCC; border-radius:5px; width:164px; background-color:#f0f0f0; font-family: 'Questrial', sans-serif; margin:0  }
.contact input[type="radio"] { width:20px}
.contact textarea {padding:10px; border:1px solid #CCC; border-radius:5px; width:276px; background-color:#f0f0f0;height:100px; font-family: 'Questrial', sans-serif; }


.contact input[type="submit"] { width:100px; background-color:#FFD200; text-transform:uppercase; cursor:pointer;  font-family: 'Questrial', sans-serif; }
.contact input[type="submit"]:hover { background-color:#000; color:#FFF}



/* __________________________ Override framework Size __________________________ */

.btn-primary, button{
display: inline-block;
cursor: pointer;
border-radius: 0px;
padding: 6px 10px;
margin-bottom:4px;
font-size: 15px;
font-weight: 100;
text-decoration: none;
text-align: center;
border: none;
-moz-user-select: none; /* Firefox */
-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
user-select: none; /* Propriété standard */
outline: none;
background-color:#ffd119  
}

.color-yellow{color:#ffd119}
.bg-yellow{background-color:#ffd119}
.btn-yellow{background-color: #ffd119;}
.btn-simple, .btn-transparent, .btn-blue, .btn-white, .btn-black, .btn-dark-grey, .btn-grey, .btn-green, .btn-yellow, .btn-orange, .btn-red{border-radius: 0px; border:none; padding: 12px 18px;}


.bloc-black, .bloc-yellow{ border-radius:0; }

.bloc-black, .bg-black{ background:#191919 }

.bloc{ border-radius:0; border:none }

p, li{ 
    font-size: 17px;
}

#page-content p,
#page-content li{ 
    line-height: 140%;
}

.c3 > .c {
    width: 28%;
}

.c img{
    width: 100%;
}

#page-content img{
    max-width: 100%;
}

.fluid,
.fluid-x{
padding: 10px 0%;
}
 

@media screen and (max-width: 1080px)
{
.fluid,
.fluid-x{
padding: 10px 3%;
}  
} 
 
/* __________________________ Custom Defacto ___________________________________ */


body {
    background:#f1f1f1;
    font-family: 'Roboto', sans-serif;
} 

.article-info-term {display:none}
.article-info {padding:0; margin:0}

.anchor{
  margin-top: 10px;  
  margin-bottom: 20px; 
}

.item-281{
  
}

#menu-main .nav-child li{
width: 25%;
text-align: center;
}

#menu-main .item-282{ display: none;} /* home japanese */


html{
 
}



header#header{
margin:0;
padding:0;
}

.v-shadow{
box-shadow: 0px 0px 80px rgba(0,0,0,0.2);
}


header#header .fluid{
padding-top: 0px;
padding-bottom: 0px;
}

.logo{
    display: block;
    width: auto;
    float: none;
}
.logo a{
    display: block;
    width: 160px;
    float: none
}
.logo a img{
    display: block;
    width: 100%;
    padding-top: 12px;
}

nav{
background: #fff;
width:80%;
}

nav a.icon{
display: block;
padding:0px 10px;
height: 90px;
display: flex;
justify-content:align-center;
}
nav a.icon svg{
width:20px;
color:#000;
}
nav a.icon:hover{
background: #000;
color:#fff;
}
nav a.icon:hover svg{
fill: #fff;
color:#fff;
}



nav a.icon img{
display: block;
width:20px;
height: auto;
}

 
nav ul.nav{
display: flex;
text-transform: uppercase;
 
}

nav ul.nav li{
margin:0;
padding:0;
padding-right: 1px;
}

 nav #menu-main ul.nav > li > a{
font-size: 18px;
font-weight: 100;
text-decoration: none;
color: #333;
/*color: #fff;*/
display: block;
height:90px;
line-height: 90px;
margin:0;
padding:0px 20px;
 
}


nav #menu-main ul.nav > li.active > a,
nav #menu-main ul.nav > li.active:hover > a{
background:#ffd119;
background:rgba(0,0,0,1);

background:#191919;
color:#ffd119; 
}

nav #menu-main ul.nav > li.active:hover > a{
background:linear-gradient(0deg, rgba(0,0,0,1), #191919); 
}

nav #menu-main ul.nav > li:hover > a{
    

background:rgba(0,0,0,0.2);
color:#333;
background:rgba(0,0,0,1);
color:#fff; 
background:linear-gradient(0deg, rgba(0,0,0,1), #191919);
transition:ease all 0.2s; 
}





nav ul.nav .nav-child{
display: none;
z-index:10;
}
 
nav ul.nav > li:hover .nav-child{

width: 100%;
background:#ffd119;
background:rgba(0,0,0,1);
box-shadow:0px 5px 5px rgba(255,255,255,0.1);
box-shadow: 0px 2px 2px rgba(255, 255, 255, 0.2);
position:absolute;
left:0;
top:90px;
display: flex; 
justify-content: space-around;
padding:20px 20px;
}
 
nav #menu-main ul.nav > li:hover .nav-child li a{
padding:120px 20px 20px 20px;
display: block;
text-decoration: none;
font-size:14px;
color: #eee; 
background-repeat:no-repeat;
background-position: center 25px;
background-size: 130px auto;
}

nav #menu-main ul.nav > li:hover .nav-child li:hover a{
opacity:1; 
color: #fff;
}
 
 
body .slider{
    background:#ffd119;  
} 
 
#motion.bg-hat{
 background-image:url(./../images/hat-white-2.png);
 background-repeat:no-repeat;
 background-attachment: fixed;
 background-position: left top;
}
 
 
.breadcrumb{
    list-style-type: none;
    display: flex;
    color : #efefef;
    margin:0;
    font-size:10px
}
.breadcrumb a{
    color : #efefef;  
}
 
h1{
font-family: sans-serif;
font-family: sans-serif;
} 
 
h1, .h1style, h2.item-title, .blog > h2, .page-header h2, #news h3{
margin:30px 0px 30px 0px;
margin-bottom:15px;
text-transform:uppercase;
font-size: 30px;
font-weight: 900;
border-bottom:none;
color: #000;
text-align:left;
} 

h2, .blog .page-header h2{
margin:30px 0px 30px 0px;
margin-bottom:15px;
text-transform:uppercase;
font-size: 25px;
font-weight: 700;
border-bottom:1px solid #eee;   
} 

.c img{
    width:100%;
    margin: 0px;
    max-width: 100%;
    height: auto;
} 
 
 
#solutions img{
    width:100%;
    height: auto;
}
 
 
.moduletable h3{
  font-size: 24px;
  text-transform: uppercase;  
} 

.bg-black h3{
  color:#FFF; 
} 


form fieldset{
box-shadow: 0 1px 1px 0 rgba(51, 51, 51, 0.08), 0 1px 3px 1px rgba(51, 51, 51, 0.16);
padding:30px;
background: #fff;
text-decoration: none; 
border:none; 
} 
 
 
.defacto-links a{
box-shadow: 0 1px 1px 0 rgba(51, 51, 51, 0.08), 0 1px 3px 1px rgba(51, 51, 51, 0.16);
padding:30px;
/*box-shadow: 2px 4px 8px rgba(0,0,0,0.3);*/
transition: all 0.2s linear;
background: #fff;
text-decoration: none;
}
.defacto-links a:hover{
box-shadow: 0 1px 3px 1px rgba(51, 51, 51, 0.2), 0 2px 8px 4px rgba(51, 51, 51, 0.1);
} 
 
 
#partners .c{
margin-bottom: 50px;
display: flex;
justify-content:center;
align-items:center;
} 
#partners .c img{
display: block;
}  
 
.newsflash .c{
width: 30%;
margin-bottom: 50px;
} 
 


.defacto-links{
 
text-align:center;

} 

.defacto-links .link-title{
margin-top:15px;
margin-bottom:5px;
font-size: 18px;
font-weight: bold;
color:#333;
display:block;
text-align:center;
min-height: 70px;

}
.defacto-links .link-txt{
margin-top:0px;
margin-bottom:10px;
font-size: 15px;
font-weight: 100;
color:#333;
display:block;
}

.defacto-links .btn-yellow{
margin-top:10px;
font-weight: bold;
}


.cols-2, .cols-3{
    display:flex;
    justify-content:space-between;
}
.cols-2 .item{
    width:45%;
}
.cols-3 .item{
    width:30%;
}


 
#linkedin{
text-decoration:none;
}
#linkedin .linkedin-title{
font-weight:900;
}
#linkedin .linkedin-logo{
width:52px;
height:52px;
padding:10px;
color:#000;
margin-left:10px; 
}  

.footer{
    padding:20px 0px;
    color:#666;
}

.footer ul{
    list-style-type: none;
    display:flex;
    margin:0;
}
.footer ul li::after{
    content:"|";
}

.footer a{
    color:#bbb;
    text-decoration:none;
    padding:0px 10px;
}

.footer li:first-child a{
    padding-left: 0;
}

.footer ul li:last-child::after{
    content:"";
}

.footer a:hover{
    color:#fff;
}
  

/* __________________________ Modules Defacto ___________________________________ */
 
 
.login form,
.search form{
   max-width:50%;
 
} 


.search button{
   margin-top:5px;
 
} 
  
form fieldset{
    padding:20px;
} 

.control-group {
    display:flex;
    align-items:center;
    margin:10px
}

.control-label {
 
    margin-right:10px
}
  
 
#searchForm{
    width:100%;
     
    margin:0 auto;
    padding-top: 60px;
} 

#search-searchword{
    font-size: 16px;
    padding:10px;
} 

body.search .form-limit{
    display: flex;
    display: none;
}

body.search .tooltip{ opacity:0;  visibility:hidden; height: 0; width:0 }
  
body.search .footer, body.search .copyright  { display:none; opacity:0 }
   
  
.search-results a{
   color:#3972ac; 

}
.search-results .small{
   color:#666; 
   font-size: 10px; 
}  

.result-title{
   font-size: 20px; 
   color:#999;
   margin-top: 30px; 
}

.result-text{
   color:#333; 
   font-size: 13px; 
}  

.result-created{
   display: none;
}  
 
 
.pagination{
display: flex;
justify-content:center;
} 
.pagination ul{
    list-style-type: none;
    display: flex;
}
.pagination ul li{
    margin:10px;
    background: #fff;
    
}  
 
  
#searchForm fieldset legend{
    display: none;
}  
  
#searchForm fieldset{
    margin-bottom:10px;
    display: none;
}    
  
.pagination a,.pagination span{
padding:10px;
display: inline-block;
}

.pagination a{
background-color: #ffd119;
text-decoration: none;
color:#333;
}


form#formulaire_contact textarea {
    min-height: 160px ;
}

  
body #system-message {
 margin-bottom: 10px; 
} 
 
#system-message .close{
 display: none; 
} 

#system-message .alert{
    background-color:#e57f12 ;
    padding:20px;
}

#system-message .alert-warning,
#system-message .alert-warning .alert-message{
    background-color:#e57f12 ;
    padding:20px;
}


#system-message .alert-message{
    background-color: #57a116;
    padding:20px;
}    
 
 
 #member-registration legend{
     display: none;
 }
 
 
 
  .control-group .controls .btn{
     
     float: left;
     margin-right: 10px;
     
 }
 
  
/* _____________ native _____________*/
  
  
  
  
  
  
/* System Messages */

.error
{
    padding:0px;
    margin-bottom: 20px;
}

.error h2
{
    color:#000 !important;
    font-size:1.4em !important;
    text-transform:uppercase;
    padding:0 0 0 0px !important
}

#system-message dt
{
    font-weight: bold;
}
#system-message dd
{
    margin: 0 0 15px 0;
    font-weight: bold;
    text-indent: 0px;
    padding:0
}
#system-message dd ul
{
    color: #000;
    list-style: none;
    padding: 0px;
}
#system-message dd ul li
{
    line-height:1.5em
}

/* System Standard Messages */
#system-message dt.message
{
    position:absolute;
    top:-2000px;
    left:-3000px;
}

#system-message dd.message  ul
{
    background: #fff  url(../images/system/notice-info.png) no-repeat;
    padding-left:40px;
    padding: 10px 10px 10px 40px;
    border: 2px solid #90B203;
    border-radius:10px
}

#system-message dd.message ul li{background:none !important}

/* System Error Messages */
#system-message dt.error
{
    position:absolute;
    top:-2000px;
    left:-3000px;
}

#system-message dd.error ul
{
    background:#fff url(../images/system/notice-alert.png) no-repeat ;
    padding-left:40px;
     padding: 10px 10px 10px 40px;
    border: 2px solid #990000;
    border-radius:10px

}



/* System Notice Messages */
#system-message dt.notice
{
    position:absolute;
    top:-2000px;
    left:-3000px;
}

#system-message dd.notice  ul
{
    background:#fff url(../images/system/notice-note.png) no-repeat ;
    padding-left:40px;
    padding: 10px 10px 10px 40px;
    border: 2px solid #FAA528;
    border-radius:10px

}
#system-message dd.notice ul { color: #000;margin:10px 0 }

#system-message
{
    margin-bottom: 0px;
    padding: 0;
}

#system-message dt
{
    font-weight: bold;
}

#system-message dd
{
    font-weight: bold;
    padding: 0;
}


.tip-wrap { background:#FEFDE2; font-size:0.8em ; padding:5px; border:solid 1px #ddd; border-radius:3px; box-shadow: 0 1px 5px #ccc }
.tip-title {font-weight:bold}

#all #upload-flash ul li a:hover,
#all .item a:hover span {
    background:#095197;
    color:#fff;
}


/* ##########################  user profile  ########################### */

#users-profile-core,
#users-profile-custom
{
    margin:10px 0 15px 0;
    padding:15px;
}

#users-profile-core dt,
#users-profile-custom dt
{
    float:left;
    width:12em;
    padding:3px 0;


}

#users-profile-core dd,
#users-profile-custom dd
{
    padding:3px 0;
}

#member-profile fieldset,
.registration fieldset
{
    margin:10px 0 15px 0;
    padding:15px;

}

#users-profile-core legend,
#users-profile-custom legend,
.profile-edit legend,
.registration legend
{
    font-weight:bold
}

.profile-edit form#member-profile fieldset dd,
.registration form#member-registration fieldset dd
{ float:none; padding:5px 0}

.profile-edit form#member-profile fieldset dd input,
.profile-edit form#member-profile fieldset dd select,
.registration form#member-registration fieldset dd input
{width:17em}
.profile-edit form#member-profile fieldset dt,
.registration form#member-registration fieldset dt
{padding:5px 5px 5px 0; width:13em}


span.optional
{font-size:0.9em}

/* ##########################  clearing  ########################### */
.clr {
    clear: both;
    overflow: hidden;
    height: 0;
}

/* ##########################  tooltip  ########################### */
.tooltip {
    position: absolute;
    z-index: 103000;
    display: block;
    visibility: visible;
    font-size: 11px;
    line-height: 1.4;
    opacity: 0;
    filter: alpha(opacity=0);
}
.tooltip.in {
    opacity: 0.8;
    filter: alpha(opacity=80);
}
.tooltip.top {
    margin-top: -3px;
    padding: 5px 0;
}
.tooltip.right {
    margin-left: 3px;
    padding: 0 5px;
}
.tooltip.bottom {
    margin-top: 3px;
    padding: 5px 0;
}
.tooltip.left {
    margin-left: -3px;
    padding: 0 5px;
}
.tooltip-inner {
    max-width: 200px;
    padding: 8px;
    color: #fff;
    text-align: left;
    text-decoration: none;
    background-color: #000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}
.element-invisible {
    position: absolute;
    padding: 0;
    margin: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
}
#filter-search {
    vertical-align: top;
}
.input-mini {
    width: 60px;
}

/* ##########################  popover  ########################### */
.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1010;
    display: none;
    max-width: 276px;
    padding: 1px;
    text-align: left;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.2);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    white-space: normal;
}
.popover.top {
    margin-top: -10px;
}
.popover.right {
    margin-left: 10px;
}
.popover.bottom {
    margin-top: 10px;
}
.popover.left {
    margin-left: -10px;
}
.popover-title {
    margin: 0;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: normal;
    line-height: 18px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
.popover-title:empty {
    display: none;
}
.popover-content {
    padding: 9px 14px;
    min-height: 33px;
}
.popover .arrow,
.popover .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
.popover .arrow {
    border-width: 11px;
}
.popover .arrow:after {
    border-width: 10px;
    content: "";
}
.popover.top .arrow {
    left: 50%;
    margin-left: -11px;
    border-bottom-width: 0;
    border-top-color: #999;
    border-top-color: rgba(0,0,0,0.25);
    bottom: -11px;
}
.popover.top .arrow:after {
    bottom: 1px;
    margin-left: -10px;
    border-bottom-width: 0;
    border-top-color: #fff;
}
.popover.right .arrow {
    top: 50%;
    left: -11px;
    margin-top: -11px;
    border-left-width: 0;
    border-right-color: #999;
    border-right-color: rgba(0,0,0,0.25);
}
.popover.right .arrow:after {
    left: 1px;
    bottom: -10px;
    border-left-width: 0;
    border-right-color: #fff;
}
.popover.bottom .arrow {
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #999;
    border-bottom-color: rgba(0,0,0,0.25);
    top: -11px;
}
.popover.bottom .arrow:after {
    top: 1px;
    margin-left: -10px;
    border-top-width: 0;
    border-bottom-color: #fff;
}
.popover.left .arrow {
    top: 50%;
    right: -11px;
    margin-top: -11px;
    border-right-width: 0;
    border-left-color: #999;
    border-left-color: rgba(0,0,0,0.25);
}
.popover.left .arrow:after {
    right: 1px;
    border-right-width: 0;
    border-left-color: #fff;
    bottom: -10px;
}
  
  
  
  
  
/* _____________ tinymce _____________*/
 

 
#tinymce {
box-sizing: border-box;
padding:10px; 
}
 
#tinymce .c2,#tinymce .c3,#tinymce .c4,#tinymce .c5,#tinymce .c6,
#tinymce .c2sameonmob, #tinymce .c3sameonmob, #tinymce .c4sameonmob, #tinymce .c5sameonmob,
#tinymce .c2largeonpad, #tinymce .c3largeonpad, #tinymce .c4largeonpad, #tinymce .c5largeonpad,
#tinymce .c4toc2onmob{
  box-sizing: border-box;
  border:1px dashed rgba(0,0,0,0.5);
  background:#efefef;
  width:100%;
  padding:10px;
  margin-bottom: 20px;
}

#tinymce .c{
  border:1px dashed rgba(0,0,0,0.5);
  background:#fff;
  padding:10px;
}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
/* __________________________ Mobile Defacto ___________________________________ */




@media screen and (max-width: 1080px)
{
  
    #mobile-menu-links #btn-logout{
        min-height: 100%;
        flex-direction:unset;
     
    }
    #btn-logout a{ 
        padding: 10px;
        display: block;
    }
    
    
    #body img {
    max-width: 100%;
    height: auto;
    }
    
    
    body.nav-open #page-content{
    display: none;
    }

    nav {
    width: 100%;
    }
    
    #mobile-menu-links .nav-icons{
        flex-direction: row;
    }
    nav .nav-icons a{
        padding: 0px 20px;
    }
    
    header#header {
    height: 100px;
    }
    .logo{
        position:absolute;
    }
    #menu-main{
        padding-top:120px;
        width:100%;
    } 
    
    #menu-main li{
        width:100%;
        border-bottom: 1px solid #ddd;
    }
    
    nav #menu-main ul.nav > li > a {
        display: block;
        width:100%;
        color: #000;
        font-size: 18px;
        text-decoration: none;
        height: 70px;
        line-height: 70px;
    }
 
    nav ul.nav > li:hover > a  {
        background: none;
    }
    body nav ul.nav li:hover .nav-child {
    display: none;
    }
    
    body #motion-nav{
        display: none;
    }
    
    body#body #motion a{
        display: none;
    }
    
    #solutions .c{
        margin-bottom: 20px;
    }
    
    body .newsflash .c{
        width:100%;
    }
    
    .footer .flex-between,
    .footer .copyright {
        flex-direction:column;
    }
    
    .c3 > .c {
    width: 100%;
    }
    
    body .login form, .search form {
    max-width: 100%;
    }
      
}