/* -------------------------------- 

CSS ITC

-------------------------------- */


/* Font for English and French version */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);

body, h1, h2, h3, h4, h5, h6, p, div, a, span, button, input, textarea                   
  { font-family: 'Open Sans', sans-serif; }

/* Import a different font for korean page */  
@import url(nanumgothic.css);

html:lang(kr) body, html:lang(kr) h1, html:lang(kr) h2, html:lang(kr) h3, html:lang(kr) h4, html:lang(kr) h5, html:lang(kr) h6,
p, html:lang(kr) div, html:lang(kr) a, html:lang(kr) span:not(.glyphicon), html:lang(kr) button, html:lang(kr) input, html:lang(kr) textarea { 
 font-family: 'Nanum Gothic', sans-serif; 
}
  /* ... except for these texts in european caracters */
  html:lang(kr) a[hreflang=en-us], html:lang(kr) a[hreflang=fr-fr] {
   font-family: 'Open Sans', sans-serif; 
  }


/* Global modification of Bootstrap's core design */
a:focus, a:hover { text-decoration: none; }


h1 { font-size: 2em; }
@media (max-width: 768px) {
    .text-left-xs {
        text-align: left;
    }
}
.text-italic { font-style: italic; }



/* Header design */

   /* Top-line */

.redify {   color: #fff;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  transition-timing-function: ease-in;
}
.redify:hover {
  color: #ee3733 !important;
}

.lang a { background: transparent;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  transition-timing-function: ease-in;
}
.lang a:hover { background-color: #fff !important; }


.top_bar { background-color: #444444; }
.top_bar .container-fluid .pull-right ul li { 
    display: inline-block;
    position: relative;
    }
.top_bar ul { margin-bottom: 0; padding: 0; }
.top_bar ul li { list-style: none;
                 padding: 3px 20px 3px 20px;
               }
  
.top_bar ul li a { color: #fff; display: inline-block; }
.top_bar .fa { padding-right: 10px; color: #ee3733; }
.top_bar ul li:last-child { margin-right: 25px; }
    @media screen and (max-width: 768px) { 
      .top_bar ul li:last-child { margin-right: 0px; }
    }

.top_bar ul .lang { padding: 0px; }
.top_bar ul .lang a { padding: 3px 10px; }         
.border-r { border-right: 1px solid #fff; }
.top_bar a:hover { text-decoration: none; }




/* Navigation menu */


  /* line height is 20px by default so add 30px top and bottom to equal the new .navbar-brand 80px height  */
.itc-navigation .nav >li >a {
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 16px;
  }
.itc-navigation .navbar-toggle {
  padding: 10px;
  margin: 25px 15px 25px 0;
  }
.navbar-brand { padding: 0px; }
.navbar-brand>img {
  height: 100%;
  padding: 0 0 0 15px;
  width: auto;
  }


@media screen and (max-width: 768px) {
  .navbar-brand { height: 80px; }
}
@media screen and (min-width: 990px) {
  .navbar-brand { height: 80px; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .navbar-brand>img { 
    display: inline-block;
    position: absolute;
    padding: 15px 0;
    left: 10px;
  }
}
@media screen and (max-width: 330px) {
  .navbar-brand { height: 60px; margin-top: 10px; }
}



.container>.navbar-header { margin-right: 0px; } /* regle pb de marge sur mobile à cause de less.css */


.navbar-default { background-color: #fff;    /* style de la barre de navigation */
                  border-top: none;  }
.navbar-collapse ul li:hover, .navbar-nav li a.active  { background-color: #ee3733 !important; }  /* style du hover sur la navigation */
.navbar-collapse ul li a:hover, .navbar-nav li a.active { color: #fff !important; }
.navbar { margin-bottom: 0px; }




/* Home slider */
.full-screen { padding-left: 0px; padding-right: 0px; }

/* Ligne sous le titre */
.horizontal-line-square h6:before {
  border-top: 1px solid #6E6E6E;
  content: " ";
  display: inline-block;
  margin: 0 0 5px;
  width: 25%;
  }
.horizontal-line-square h6 { font-size: 16px; }
.horizontal-line-square h6:after {
    border-top: 1px solid #6E6E6E;
    content: " ";
    display: inline-block;
    margin: 0 0 5px;
    width: 25%;
}
.fa-square {
    color: #ee3733;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* Intro Section */

#intro {
  padding-bottom: 2em; 
}

@media screen and (max-width: 768px) { 
  #intro button.button { 
    float: none !important;
    margin: 2em auto 1em;
  }
}

#intro #submit span {
  color: #000 !important;
}
#intro #submit {
  border-color: #000;
}


/* Section Services */


#services { 
  background: url('../images/servicebg.jpg') no-repeat center center fixed;
  background-size: cover;
  padding: 5em 0;
}
@media screen and (max-width: 480px) {
  #services { padding: 15px 0 25px; }
  #services .container.hidden-sm.hidden-md.hidden-lg h1 { margin-bottom: 24px; }
}



.services-round { padding: 100px 0 100px 0; }
.circle {
    display: table;
    position: relative;
    margin: 50px auto 80px auto;  /* Marge autour du cercle extérieur */
    padding: 9em; /* largeur du cercle central "nos services" */
    width: 30em; height: 30em; /* Taille du cercle extérieur */
    border-radius: 50%;
    text-align: center;
}

.circle-2 {
  display: table;
    position: relative;
    margin: 50px auto 80px auto;  /* Marge autour du cercle extérieur */
    padding: 9em; /* largeur du cercle central "nos services" */
    width: 30em; height: 30em; /* Taille du cercle extérieur */
    text-align: center;
 /*   border: solid 4px #fff;
      border-radius: 50%; */
}

.arc {
    overflow: hidden;
    position: absolute;
    /* make sure top & left values are - the width of the border */
    /* the bottom right corner is the centre of the parent circle */
    top: -4px; right: 50%; bottom: 50%; left: -4px;
    /* the transform origin is the bottom right corner */
    transform-origin: 100% 100%;
    /* rotate by any angle */
    transform: rotate(25deg) skewX(30deg);  /* changer rotate pour faire glisser la bordure autour du cercle */
}
.arc:before {
    box-sizing: border-box;
    display: block;
    border: solid 4px #fff;  /* Grosseur des bordure de cercle */
    width: 200%; height: 200%;
    border-radius: 50%;
    transform: skewX(-30deg);
    content: '';
}

.arc2 {
    overflow: hidden;
    position: absolute;
    /* make sure top & left values are - the width of the border */
    /* the bottom right corner is the centre of the parent circle */
    top: -4px; right: 50%; bottom: 50%; left: -4px;
    /* the transform origin is the bottom right corner */
    transform-origin: 100% 100%;
    /* rotate by any angle */
    /* the skew angle is 90deg - the angle you want for the arc */
    transform: rotate(140deg) skewX(30deg);
}
.arc2:before {
    box-sizing: border-box;
    display: block;
    border: solid 4px #fff;
    width: 200%; height: 200%;
    border-radius: 50%;
    transform: skewX(-30deg);
    content: '';
}

.arc3 {
    overflow: hidden;
    position: absolute;
    /* make sure top & left values are - the width of the border */
    /* the bottom right corner is the centre of the parent circle */
    top: -4px; right: 50%; bottom: 50%; left: -4px;
    /* the transform origin is the bottom right corner */
    transform-origin: 100% 100%;
    /* rotate by any angle */
    /* the skew angle is 90deg - the angle you want for the arc */
    transform: rotate(260deg) skewX(30deg);
}
.arc3:before {
    box-sizing: border-box;
    display: block;
    border: solid 4px #fff;
    width: 200%; height: 200%;
    border-radius: 50%;
    transform: skewX(-30deg);
    content: '';
}

.circle-content { 
   display: table-cell;
   vertical-align: middle;
/* background: #EE3733;
   border-radius: 50%; */
   color: #b6b6b6;
   text-align: center;
   font-size: 20px;
}

.icon-circle { 
  display: inline-block;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid #ee3733;
  padding-top: 8px;
  color: #ee3733;
  background: transparent;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.icon-circle:hover {
  color: #fff;
  background: #ee3733;
}

.services-titles {
  display: inline-block;
  position: absolute;
  top: 50px;
}

@media (min-width: 768px) and (max-width: 1200px) {
  .services-titles { top: 0px; }
}
@media (min-width: 991px) and (max-width: 1200px) {
  .services-titles { left: 8em; }
}


/* Project Management */  .serv-1 { top: -1em; left: 16em; }    
/* Admin IT Parc */       .serv-2 { top: 4em;  left: 7em;  width: 150px; }  
/* Support */             .serv-3 { top: 4em;  left: 27em; }  
/* Reseller */            .serv-4 { top: 14em; left: 28em; }                
/* Development */         .serv-5 { top: 15em; left: 6em;  }
/* Hosting */             .serv-6 { top: 20em; left: 17em; }                 
/* Business Intelligence */.serv-7 { top: 13em; left: 17.5em; }   
            /* Project Management */  html:lang(kr) .serv-1, html:lang(en) .serv-1 { left: 16em; }    
            /* Admin IT Parc */       html:lang(kr) .serv-2, html:lang(en) .serv-2 { left: 6em;  }  
            /* Support */             html:lang(kr) .serv-3, html:lang(en) .serv-3 { left: 26em; }  
            /* Reseller */            html:lang(kr) .serv-4, html:lang(en) .serv-4 { left: 27em; }                
            /* Development */         html:lang(kr) .serv-5, html:lang(en) .serv-5 { left: 5em; top: 14em;   }
            /* Hosting */             html:lang(kr) .serv-6, html:lang(en) .serv-6 { left: 16em; }  
			/* Business Intelligence */html:lang(kr) .serv-7, html:lang(en) .serv-7 { left: 17.5em; }  
                                      html:lang(kr) .circle-2, html:lang(en) .circle-2 { padding-left: 10em; }

@media (min-width: 768px) and (max-width: 1200px) {
    /* Project Management */  .serv-1 { top: -1em; left: 9em; }    
    /* Admin IT Parc */       .serv-2 { top: 4em;  left: 0em;  width: 150px; }  
    /* Support */             .serv-3 { top: 4em;  left: 20em; }  
    /* Reseller */            .serv-4 { top: 14em; left: 21em; }                
    /* Development */         .serv-5 { top: 15em; left: -1em;  }
    /* Hosting */             .serv-6 { top: 20em; left: 10em; }
	/* Business Intelligence */.serv-7 { top: 13em; left: 17em; }
    .circle-content { color: transparent; }    
}
            @media (min-width: 768px) and (max-width: 1200px) {
            /* Project */       html:lang(kr) .serv-1 { left: 10em; } 
            }


.s-btn {
  display: inline-block;
  position: absolute;
  border: none !important; /* overide default bootstrap */
  font-size: 1.3em;
  text-align: center;
  background: transparent !important; /* overide default bootstrap */
  color: #000;
  padding: 10px;
}
.md-trigger:focus, .md-close:focus {  /* enlever l'encadrement du lien sur Google Chrome */
  outline-style:none;
  box-shadow:none;
  border-color:transparent; }

.s-btn {
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -o-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.s-btn em {
  color: #fff;
  background: #ee3733;
  border: 2px solid #ee3733;
  border-radius: 50%;
  padding: 10px 11px;
}

.s-btn:hover {
  -webkit-transform:scale(1.1);
  -ms-transform:scale(1.1);
  transform:scale(1.1);
}
.s-btn:hover em { 
  color: #ee3733;
  background: transparent; 
}

/* Fix for Korean version */

            html:lang(kr) .s-btn em, html:lang(en) .s-btn em {
              display: block;
              margin-bottom: 2px;
              width: 45px;
              margin-left: auto;
              margin-right: auto;
            }
            html:lang(kr) .serv-1, html:lang(kr) .serv-2, html:lang(kr) .serv-3, 
            html:lang(kr) .serv-4, html:lang(kr) .serv-5, html:lang(kr) .serv-6,
			html:lang(kr) .serv-7,
              html:lang(en) .serv-1, html:lang(en) .serv-2, html:lang(en) .serv-3, 
              html:lang(en) .serv-4, html:lang(en) .serv-5, html:lang(en) .serv-6, html:lang(en) .serv-7 {
              width: 180px;
            }
                                
/* End Service section Korean fix */



.md-close {   /* overide default boostrap button */
  background: transparent;
  border: none;
  float: right;
}
.md-close em { font-size: 22px; padding: 10px; }

.closebt {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    cursor: pointer;
    opacity: 0.5;

}
.closebt:hover {
  transform:rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}


.md-content {
  background: #fff;
  color: #444444;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 4px;
  -moz-border-radius: 4px;
}

.no-padding { 
  padding-left: 0;
  padding-right: 0;
}


.popup-img {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  overflow: hidden;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: inherit !important;
  background-size: cover !important;
  -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}


/* Images des popup */
.popup-img-1 {  /* project management */
  background: url('../images/service-1-project-management.jpg');
  padding-bottom: 119%;
}
.popup-img-2 {  /* IT Parc admin */
  background: url('../images/service-2-parc-it.jpeg');
  padding-bottom: 116%;
}
.popup-img-3 { /* support */
  background: url('../images/service-3-support.jpg');
  padding-bottom: 116%;
}
.popup-img-4 { /* reseller - integration */
 background: url('../images/service-4-reseller.jpg');
 padding-bottom: 124%;
}
.popup-img-5 { /* Development */
 background: url('../images/service-5-development.jpg');
 padding-bottom: 116%;
}
.popup-img-6 { /* Hosting */
 background: url('../images/service-6-hosting.jpg');
 padding-bottom: 129%;
}
.popup-img-7 { /* Business Intelligence */
 background: url('../images/service-7-BusinessIntelligence.jpg');
 padding-bottom: 129%;
}

.popup-img, .popup-box {
  padding-right: 0 !important;
  padding-left: 0 !important;
}


.popup-box-inside { padding: 0 25px 40px; }
.popup-box-inside h3 { margin-top: 37px; }
.popup-box-inside p { 
  font-style: italic; 
  padding: 10px 10px 10px 0;
  line-height: 1.5em;
}
.popup-box-inside li { 
  padding-left: 15px; 
  line-height: 1.8em;
  font-weight: 600;
}
.popup-box-inside li em { 
  padding-right: 10px;
  color: #ee3733;
  font-size: 15px;
}

@media screen and (max-width: 375px) {
 .popup-box-inside li {
  padding-left: 0px;
 }
}

.panel-heading {
  padding: 10px 0 !important;
}



/* Section MyPCStore */

#mypcstore .container-fluid { background-color: #ee3733; color: #fff; }
#mypcstore .fa { font-size: 5em; padding: 50px 0 10px 0; }
#mypcstore p { font-size: 1.5em;
               display: inline-block;
               position: relative;
               padding: 0 20px 50px 20px;
              }
  html:lang(en) #mypcstore p { padding-top: 45px; }
  html:lang(en) #mypcstore .fa { font-size: 7em; }

#mypcstore a { color: #fff; display: block; width: 100%; height: 100%; }

.trigger-bounceInRight, .trigger-bounceInLeft {
  opacity: 0;
}
.animated.bounceInRight, .animated.bounceInLeft {
  opacity: 1;
}


/* Section Team */

#team { margin-top: 20px; }
.team-section em { margin-right: 25px; }
.top-div { margin-bottom: 30px; }
.rgt-div p { font-size: 18px; margin-bottom: 20px; }

.lft-div {  display: block; }
.rgt-div {  margin-top: 25px;
            margin-bottom: 70px;
            padding-left: 57px;
          }

.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid #f9f9f9;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: -49px;
  }

#team .fa-square {
  color: white;
  text-shadow: -1px 0 #b6b6b6, 0 1px #b6b6b6, 1px 0 #b6b6b6, 0 -1px #b6b6b6;
}
.fa-square.pulse {
  color: #ee3733 !important;
  -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
  animation-delay: 2s;
}


.ex-projet .btn { background-color: #ee3733; color: #fff; border: none;} 

@media screen and (max-width: 768px) {
  .lft-div img { 
    float: none !important; 
    width: 100% !important; 
  }
  .rgt-div {
    padding-left: 25px;
  }
}

@media screen and (min-width: 768px) {
  .lft-div {  height: 100%;
            padding-right: 0px;
            border-right: 2px solid #b6b6b6;
            margin-left: 1px;
         }
  .rgt-div {  padding-left: 0px;
            margin-left: -8px;
            padding-top: 60px;
         }
}

.ex-projet button span, .case-study.button--naira em { 
  font-size: 1.5em;
}
.case-study.button--naira > span, .button--naira .button__icon {
 padding: 20px !important;
}

.case-study { 
  float: none !important;
  margin: 0 auto !important;
}

.case-study.button--naira em { color: #f0f0f0 !important; }


.panel-heading a em:first-child {
  background: #ee3733;
  border-radius: 50%;
  padding: 10px;
  color: #f0f0f0;
}
.panel-heading a .fa-phone {
  padding: 10px 12px !important; 
}

.panel-heading a em:nth-child(2) {
  float: right;
  margin-top: 10px;
}

.panel, .panel-default>.panel-heading {
  border: 0;
  background: transparent; /* overide default bootstrap */
}

.panel-group .panel-heading+.panel-collapse>.list-group, .panel-group .panel-heading+.panel-collapse>.panel-body {
  border-top: 0;
  border-bottom: 1px solid #ddd;
  background: rgba(255,255,255,0.8);
  border-radius: 2px;
}



/* Section Expertise */

#expertize { margin-top: -1px;  padding: 30px 0; }
.expertize-section { background-color: #f9f9f9; padding-bottom: 30px; }
.clients { margin: 20px 0 50px 0; }
.clients .row img {  margin: 20px auto 20px auto;
                      opacity: 0.5;
                      filter: alpha(opacity=50); /* For IE8 and earlier */
                   }

.count, .counted {  line-height: 30px; 
                    color: #000; 
                    font-size: 40px;
                    font-weight: 600;
                 }
@media (max-width: 768px) {
  .count, .counted {
    font-size: 30px;
  }
}         
.spacer { margin-top: 50px; }

.keyfigures { padding: 15px 0 15px 0; font-size: 20px; }
@media (max-width: 768px) {
  .keyfigures .xs-adjustment { margin-top: -15px; }
}

html:lang(en) .expertize-section button { max-width: 350px; }

.ex-projet { padding-top: 40px; padding-bottom: 20px; }

.case-studies-modal .md-content { 
  padding: 20px 25px;
  background: rgba(255,255,255,0.8) !important;
  overflow-y: auto;
}
.case-studies-modal .md-content .md-close { margin-top: 30px;  }
.case-studies-modal h3 { 
  margin-top: 0; /* overide bootstrap default */
  margin-bottom: 20px;
 }
.case-studies-modal .md-content li {
  margin-left: 15px;
  line-height: 1.8em;
}
.indent { margin-left: 15px; }

.case-studies-modal .md-content li em {
  margin-right: 5px;
  color: #ee3733;
}
.md-modal.case-studies-modal {
  width: 50%;
  max-width: 800px;
}
@media screen and (max-width: 768px) {
  .md-modal.case-studies-modal { 
    width: 90%; 
  }
}

.md-show.md-effect-12 ~ .md-overlay {
  background-color: transparent !important;
  background: url('../images/servicebg.jpg') no-repeat center center fixed !important; 
  background-size: cover !important;
}

.close-2 { 
  float: none;
  margin: 0 auto;
  display: block;
}

.invert { 
 -webkit-filter: invert(100%);
 filter: invert(100%);
}

#expertize .container.hidden-sm.hidden-md.hidden-lg {
  margin: 40px 0;
}

.ex-projet .case-study em { margin-top: 5px; }



@media (max-width: 768px) {
 .popup-box-inside { padding: 0;
 }
 .popup-box-inside h3 {
  display: none;
 }
 #accordion .panel-title a em {
  margin-right: 5px;
 }
 .popup-box-inside p {
  padding: 0;
 }
}

/* marge before logos */

.our-clients h5, .our-partners h5  {
    color: grey;
}

.our-clients h5 { margin-top: 60px; }
.our-partners h5 { margin-top: 50px; }



  /*  Section Contact */

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid #f9f9f9;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -49px;
    z-index: 1;
  }

#contact h1 { color: #ccc; }
#contact { 
  margin-top: -2px;
}

#contact-form #submit {
  border-color: #444444;
  color: #444444;
}
#contact-form #submit:hover { 
  border-color: #ee3733;
}

/* MA SUPER PHOTO DE BACKGROUND TOTALEMENT DELAISSÉE PAR LE SUDISTE
   A MORT LE GERS !
   VOUS PREFEREZ DES FONDS GRIS A DES CIELS BLEU ? REVOLUTIOOOOOOON 
#contact .container-fluid {      
  background:url('../img/contact-section.png')no-repeat center center fixed !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 800px;
}*/

#map {
  height: 450px;
  width: 100%;
}


.map-control {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
    font-family: 'Roboto','sans-serif';
    margin: 10px;
    /* Hide the control initially, to prevent it from appearing
       before the map loads. */
    display: none;
}

/* Display the control once it is inside the map. */
#map .map-control { display: block; }

.selector-control {
    font-size: 14px;
    line-height: 30px;
    padding-left: 5px;
    padding-right: 5px;
}

.widget-contact {
  font-family: 'Open Sans', sans-serif;
  line-height: 21px;
  font-weight: 300;
  color: #666;
}

.widget-contact table { width: initial !important; } /* overide default bootstrap in order to center the table inside the div*/

ul.icons-list li em {
    color: #ee3733;
}

ul, ol {
  list-style: none;
}

ul {
    padding: 0;
    margin: 0;
}

ul.icons-list li, ul.list-unstyled li {
    margin-bottom: 4px;
}

/* ===========================
--- Formulaire
============================ */

.wrapper { position: relative; }
.formulaire { 
 position: absolute;
 margin-top: -250px;
 z-index: 1;
 background: #f9f9f9;
 border: 1px solid #f9f9f9;
 border-radius: 5px;
}

@media screen and (max-width: 768px) {
 .formulaire { 
    position: relative;
    margin-top: 15px;
  }
}

.formulaire h1 { margin: 20px 0; }

.boxed-grey { background: #f9f9f9; }

.gris-clair { color: #f0f0f0; }



form#contact-form .form-group label {
  text-align: left !important;
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
}
form#contact-form input,form#contact-form select,form#contact-form textarea {
  border-radius: 0;
  border: 1px solid #eee;
  -webkit-box-shadow: none;
          box-shadow:  none;
}

form#contact-form input:focus,form#contact-form select:focus,form#contact-form textarea:focus {
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
          box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
}
.input-group-addon {
  background-color: #fefefe;
  border: 1px solid #eee;
  border-radius: 0;
}

@media screen and (max-width: 768px) { 
  #contact-form #submit { 
    float: none !important;
    max-width: none !important;
    margin: 2em 0 2em;
    width: 100%;
  }
  #contact-form .button--naira::before {
    top: -60%;
  }
}

 

.company-social {
  margin-left: 0;
  padding-left: 0;
  text-align: left;
  vertical-align: top;
}

.company-social li{
  display: inline-block;
  margin:0 !important;
  padding:0;
}


.company-social a{
  margin:0;
  padding:0;
    display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #3bbec0;
  color: #fff;
    -webkit-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}
.company-social li a i{
  text-align: center;
  margin:0;
  padding:0;
  font-size: 12px;
}
.company-social .social-facebook a    { background: #3873ae; }
.company-social .social-twitter a     { background: #62c6f8; }
.company-social .social-linkedin a    { background: #3bbec0; }
.company-social .social-facebook a:hover, 
  .company-social .social-twitter a:hover,  
    .company-social .social-linkedin a:hover { opacity: 0.8; }


/* Button Naira*/
.button--naira {
  padding: 0;
  overflow: hidden;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.button--naira::before {
  content: '';
  position: absolute;
  left: -50%;
  width: 200%;
  height: 200%;
  background: #ee3733;
  top: -50%;
  z-index: -1;
  -webkit-transform: translate3d(0, -100%, 0) rotate3d(0, 0, 1, -10deg);
  transform: translate3d(0, -100%, 0) rotate3d(0, 0, 1, -10deg);
}
.button--naira.button--inverted::before {
  background: #7986cb;
}
.button--naira-up::before {
  -webkit-transform: translate3d(0, 100%, 0) rotate3d(0, 0, 1, 10deg);
  transform: translate3d(0, 100%, 0) rotate3d(0, 0, 1, 10deg);
}
.button--naira > span {
  display: block;
}
.button--naira .button__icon {
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  color: #fff;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}
.button--naira-up .button__icon {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
.button--naira > span,
.button--naira .button__icon {
  padding: 1em 2em;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
  transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button--naira:hover::before {
  -webkit-animation: anim-naira-1 0.3s forwards ease-in;
  animation: anim-naira-1 0.3s forwards ease-in;
}
.button--naira-up:hover::before {
  -webkit-animation: anim-naira-2 0.3s forwards ease-in;
  animation: anim-naira-2 0.3s forwards ease-in;
}
@-webkit-keyframes anim-naira-1 {
  50% {
    -webkit-transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
    transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
    transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes anim-naira-1 {
  50% {
    -webkit-transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
    transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
    transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
  }
}
@-webkit-keyframes anim-naira-2 {
  50% {
    -webkit-transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg);
    transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
    transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes anim-naira-2 {
  50% {
    -webkit-transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg);
    transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
    transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
  }
}
.button--naira:hover {
  background-color: #ee3733;
  border-color: #ee3733;
  -webkit-transition: background-color 0s 0.3s;
  transition: background-color 0s 0.3s;
}
.button--naira.button--inverted:hover {
  background-color: #ee3733;
}
.button--naira:hover .button__icon {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.button--naira:hover > span {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
.button--naira-up:hover > span {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}


/* Common button styles */
.button {
  float: left;
  min-width: 150px;
  max-width: 250px;
  display: block;
  margin: 1em;

  border: none;
  background: none;
  color: inherit;
  vertical-align: middle;
  position: relative;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.button:focus {
  outline: none;
}
.button > span {
  vertical-align: middle;
}


/* Typography and Roundedness */
.button--text-upper {
  letter-spacing: 2px;
  text-transform: uppercase;
}
.button--text-thin {
  font-weight: 300;
}
.button--text-medium {
  font-weight: 500;
}
.button--text-thick {
  font-weight: 600;
}
.button--round-s {
  border-radius: 5px;
}
.button--round-m {
  border-radius: 15px;
}
.button--round-l {
  border-radius: 40px;
}

/* Borders */
.button--border-thin {
  border: 1px solid;
}
.button--border-medium {
  border: 2px solid;
}
.button--border-thick {
  border: 3px solid;
}

/* Footer */

.footer-contact, .footer-contact .fa-mobile {
  font-size: 1em;
}
@media screen and (max-width: 768px) { 
  .footer-contact, .footer-contact .fa-mobile {
    font-size: 1.1em;
  }
  .footer-contact table tr {
    display: block;
    margin: 15px 0;
  }
}


.footer-contact {
  padding-top: 40px;
}

.footer-contact table tr td {
  border: none;
}

.footer-brand {
  color: #f0f0f0;
  padding-bottom: 10px;
}

.footer-brand h3 {
 font-size: 11px;
}
.footer-brand h3 a { 
  color: #f0f0f0;
}

.footer-contact table td a {
    color: #f0f0f0;
}

.company-social, .language-footer { 
  display: inline-block;
}

.logowhite img { 
    filter: brightness(0) invert(1);
    width: 180px;
}

.hard-grey { background-color: #444444; color: #fff; }
.language-div { padding-top: 10px; }

.language-footer {
  display: inline-block; 
  margin-bottom: 0px;
  height: 100%;
  margin-left: 20px;
}

.language-footer li { 
  display: table;
  list-style: none;
  font-size: 14px;
  display: inline-block;
  height: 100%;
  line-height: 1;
}
.language-footer li a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 30px;
  height: 30px;
  color: #f0f0f0;
  background: #444444;
  border: 1px solid #f0f0f0;
  font-size: 11px;
}
.language-footer li a:hover { 
 background: #f0f0f0;
 color: #444444;
 border: 1px solid #444444;
}

@media screen and (min-width: 768px) { 
  .footer-brand { 
   padding-top: 50px;
  }
  .logowhite {
    margin-bottom: 5px;
  }
}

@media screen and (max-width: 768px) { 
  .logowhite {
    text-align: center;
  }
  .info-company { 
    position: relative;
    width: 100%;
    height: 100%; 
  }
  .company-social, .language-footer {
    text-align: center;
    float: none;
    display: inherit;
  }
  .language-footer {
    display: block !important;
    margin-top: 15px;
    margin-left: 0 !important;
    margin-bottom: 15px;
  }
  .footer-contact {
    padding-top: 0;
  }
  .logo-itc-footer {
    margin-top: -15px;
  }
  .company-social a {
    display: table; 
  }
  .company-social li a em {
    display: table-cell;
    vertical-align: middle;
  }
}