/************************************************************
 *  @_Projet : Fuze - Blog
 *  @_Date : 02/2014
 *  @_Auteur : Philippe Bouchon
 * 
 *  ---------------
 *  @_Description : 
 *  ---------------
 *  
 * Communs CSS Rules with Fuze Website
 *   
 ************************************************************/
/************************************************************
 *  @_Projet : Fuze
 *  @_Date : 01/2014
 *  @_Auteur : Philippe Bouchon
 * 
 *  ---------------
 *  @_Description :
 *  ---------------
 *  
 *  Liste de fonctions et variables réutilisables.
 * 
 ************************************************************/
/************************************************************
 *  ------------
 *  - Sommaire -
 *  ------------
 *  
 *  @_01 : Background Colors
 *  @_02 : Transition
 *  @_03 : Border Radius
 *  @_04 : Box Shadow
 *  @_05 : Box Gradiant
 *  @_06 : Box Rotate
 *  @_07 : Box Scale
 * 
 ************************************************************/
/************************************************************
 *  @_01 : Colors
 ************************************************************/
/************************************************************
 *  @_02 : Transition
 ************************************************************/
/************************************************************
 *  @_03 : Border Radius
 ************************************************************/
/************************************************************
 *  @_04 : Box Shadow
 ************************************************************/
/************************************************************
 *  @_05 : Box Gradiant
 ************************************************************/
/************************************************************
 *  @_06 : Box Rotate
 ************************************************************/
/************************************************************
 *  @_07 : Box Scale
 ************************************************************/
/************************************************************
 *  @_08 : Transparent
 ************************************************************/
/**************************************
*               Summary               *
***************************************

* @_01 Font
* @_02 Layout
* @_03 Form
* @_04 Header
* @_05 Footer
* @_06 Content
* @_07 

****************************************/
/*************************************************
* @_01 Font
*************************************************/
body {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
a {
  color: #0071cf;
}
a:hover {
  color: #00aabb;
}
a.colorFFFFFF:hover {
  color: #FFFFFF;
}
.font11 {
  font-size: 11px ;
}
.font12 {
  font-size: 12px ;
}
.font13 {
  font-size: 13px ;
}
.font14 {
  font-size: 14px ;
}
.font15 {
  font-size: 15px ;
  font-weight: 200;
}
.font16 {
  font-size: 16px ;
}
.font17 {
  font-size: 17px ;
}
.font18 {
  font-size: 18px ;
}
.font20 {
  font-size: 20px ;
}
.font22 {
  font-size: 22px ;
}
.font25 {
  font-size: 25px ;
}
.font26 {
  font-size: 26px ;
}
.font28 {
  font-size: 28px ;
}
.font30 {
  font-size: 30px ;
}
.font32 {
  font-size: 32px ;
}
.font35 {
  font-size: 35px ;
}
.font40 {
  font-size: 40px ;
}
.font50 {
  font-size: 50px ;
}
.font60 {
  font-size: 60px ;
}
.lineHeight20 {
  line-height: 20px;
}
.lineHeight22 {
  line-height: 22px;
}
.lineHeight24 {
  line-height: 24px;
}
.lineHeight26 {
  line-height: 26px;
}
.lineHeight28 {
  line-height: 28px;
}
.lineHeight30 {
  line-height: 30px;
}
.lineHeight32 {
  line-height: 32px;
}
.lineHeight34 {
  line-height: 34px;
}
.lineHeight36 {
  line-height: 36px;
}
.lineHeight38 {
  line-height: 38px;
}
.lineHeight40 {
  line-height: 40px;
}
.lineHeight42 {
  line-height: 42px;
}
.lineHeight44 {
  line-height: 44px;
}
.lineHeight46 {
  line-height: 46px;
}
.lineHeight48 {
  line-height: 48px;
}
.lineHeight50 {
  line-height: 50px;
}
p.noVMargin {
  margin-top: 0;
  margin-bottom: 0;
}
.colorFFFFFF {
  color: #FFFFFF !important;
}
.color000000 {
  color: #000000 !important;
}
.color282828 {
  color: #282828 !important;
}
.color3b3b3b {
  color: #3b3b3b !important;
}
.colora0a0a0 {
  color: #a0a0a0 !important;
}
.color00aabb {
  color: #00aabb !important;
}
.color0071cf {
  color: #0071cf !important;
}
.color00aabb {
  color: #00aabb !important;
}
.color797979 {
  color: #797979 !important;
}
.color797979 {
  color: #797979 !important;
}
.color58595b {
  color: #58595b !important;
}
.colore4002b {
  color: #e4002b !important;
}
.color929292 {
  color: #929292 !important;
}
.fontArialBold {
  font-family: arial, helvetica, sans-serif !important;
  font-weight: bold !important;
}
.fontArial {
  font-family: arial, helvetica, sans-serif !important;
  font-weight: normal !important;
}
.fontHelveticaNeue {
  font-family: 'HelveticaNeue-Light', arial, helvetica, sans-serif !important;
  font-weight: normal !important;
}
@font-face {
  font-family: 'HelveticaNeue-Light';
  src: url('webfont/HelveticaNeue-Light.eot');
  src: url('webfont/HelveticaNeue-Light.svg#HelveticaNeue-Light') format('svg'), url('webfont/HelveticaNeue-Light.eot?#iefix') format('embedded-opentype'), url('webfont/HelveticaNeue-Light.woff') format('woff'), url('webfont/HelveticaNeue-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/*************************************************
* @_02 Layout
*************************************************/
body {
  background: #000000;
  margin: 0;
  overflow-x: hidden;
}
#wrapper {
  margin: 0 auto;
  width: 960px;
}
#main-background {
  background: #f5f5f5;
  left: 50%;
  margin-left: -700px;
  min-height: 600px;
  padding: 140px 0;
  position: relative;
  width: 1400px;
}
#top-corner-blue {
  background: url('../img/layout/top-corner-blue.png') top left no-repeat;
  height: 409px;
  position: absolute;
  right: 0;
  top: 0;
  width: 409px;
}
#top-corner-plans {
  background: url('../img/layout/top-corner-plans.png') top left no-repeat;
  height: 687px;
  position: absolute;
  right: 0;
  top: 0;
  width: 482px;
}
#bottom-corner-red {
  background: url('../img/layout/bottom-corner-red.png') top left no-repeat;
  height: 279px;
  width: 279px;
  position: absolute;
  left: 0;
  bottom: 0;
}
#bottom-corner-blue {
  background: url('../img/layout/bottom-corner-blue.png') top left no-repeat;
  height: 202px;
  width: 202px;
  position: absolute;
  left: 0;
  bottom: 0;
}
#top-product {
  background: url('../img/layout/product-deskop-top.jpg') top right no-repeat;
  height: 812px;
  width: 990px;
  position: absolute;
  right: 0;
  top: 0;
}
#middle-product {
  background: url('../img/layout/product-deskop-middle.jpg') top left no-repeat;
  height: 1148px;
  width: 631px;
  position: absolute;
  left: 0;
  top: 580px;
}
#bottom-product {
  background: url('../img/layout/product-deskop-bottom.jpg') top right no-repeat;
  height: 1179px;
  width: 750px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.hidden-part {
  display: none;
}
@media all and (max-width: 767px) {
  #main-background {
    left: 0;
    margin-left: 0;
    width: 100%;
  }
}
/*************************************************
* @_03 Form
*************************************************/
.placeholder {
  color: black;
}
form.contact-form {
  background: #e0e1e1;
}
form.contact-form h2 {
  margin: 0;
  line-height: 40px;
}
form.contact-form p {
  margin: 0;
}
form.contact-form input {
  border: 1px solid #ffffff;
  height: 40px;
  padding: 0 5px 0 15px;
  width: 200px;
}
form.contact-form input:focus {
  border: 1px solid #75dde8;
}
form.contact-form textarea {
  border: 1px solid #ffffff;
}
form.contact-form textarea:focus {
  border: 1px solid #75dde8;
}
form.contact-form li#submitButton {
  display: block;
}
form.contact-form li#submitButton input {
  border: 1px solid #e4012c;
  line-height: 40px;
  height: 48px;
  padding: 0;
  text-transform: uppercase;
  width: 220px;
}
form .errorMessage {
  display: none;
}
form .error input {
  border: 1px solid #e4012c !important;
}
form .error .errorMessage {
  display: block;
}
/*************************************************
* @_04 Header
*************************************************/
#main-header {
  background: url('../img/layout/header-bar.png') top left repeat;
  clear: both;
  height: 75px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
}
#main-header .container {
  width: auto;
  max-width: 960px;
  min-width: 850px;
}
#main-header #logo-header {
  float: left;
  margin-right: 0;
}
#main-header h1 {
  margin-bottom: 0;
  margin-top: 15px;
}
#main-header .title {
  height: 75px;
  margin: 0;
  width: 127px;
}
#main-header .title a {
  line-height: 75px;
}
#main-header #main-nav {
  float: right;
  margin-top: 18px;
  margin-left: 0;
}
#main-header #main-nav ul {
  list-style: none;
}
#main-header #main-nav li {
  display: inline-block;
}
#main-header #main-nav li.hide {
  display: none;
}
#main-header #main-nav .left {
  float: left;
}
#main-header #main-nav .right {
  float: right;
}
#main-header #main-nav a.header-link,
#main-header #main-nav .header-link a {
  border-bottom: 5px solid #ffffff;
  color: #ffffff;
  display: inline-block;
  height: 35px;
  margin-right: 20px;
  text-decoration: none;
  margin-top: 17px;
  width: 100px;
}
#main-header #main-nav a.header-link:hover,
#main-header #main-nav .header-link a:hover {
  color: #dcdcdc;
  border-bottom: 5px solid #dcdcdc;
}
#main-header #main-nav a.colorFFFFFF:hover {
  color: #dcdcdc;
  border-bottom: 5px solid #dcdcdc;
}
#main-header #main-nav form {
  display: inline-block;
}
#main-header #main-nav .input-text {
  background: #ffffff;
  border: 1px solid #ffffff;
  padding: 3px 10px;
  position: relative;
  top: 12px;
}
#main-header #main-nav .input-text input {
  border-left: 2px solid #e4012c;
  border-top: none;
  border-right: none;
  border-bottom: none;
  padding: 0 2px;
  position: relative;
  top: -1px;
  width: 140px;
}
#main-header #main-nav .header-button {
  border: 0 !important;
  cursor: pointer;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  top: 10px;
}
#main-header #main-nav .header-button:hover {
  border: 0 !important;
}
#main-header #main-nav #get-free {
  background: #e4012c;
}
#main-header #main-nav #login {
  background: #969696;
  margin-left: 10px;
}
@media all and (max-width: 960px) {
  #main-header .container {
    width: 100%;
    min-width: 100%;
  }
  #main-header #main-nav {
    display: none;
  }
  #main-header #logo-header {
    margin-left: 40px;
  }
}
@media all and (max-width: 768px) {
  #main-background {
    padding: 80px 0;
  }
  #main-header {
    height: 50px;
  }
  #main-header #logo-header {
    margin-left: 15px;
    width: 90px;
  }
  #main-header #logo-header h1 {
    margin: 0;
  }
  #main-header #logo-header img {
    width: 100%;
  }
}
/*************************************************
* @_05 Footer
*************************************************/
#main-footer {
  background: #000000;
}
#main-footer #identity-footer .logo-footer {
  height: 30px;
  margin: 25px 0 0;
  width: 95px;
}
#main-footer #identity-footer .logo-footer a {
  background: url('../img/icons/sprite.png') -180px -40px transparent;
  display: block;
  height: 30px;
  text-indent: -10000px;
  width: 95px;
}
#main-footer #identity-footer .info-list {
  margin: 0;
  padding: 0;
}
#main-footer #identity-footer .social-networks {
  margin: 20px 0 0 0;
  padding: 0;
}
#main-footer #identity-footer .social-networks li {
  display: block;
  float: left;
  margin: 0 4px 0 0;
}
#main-footer #identity-footer .social-networks li a {
  background: url('../img/icons/sprite.png') 0 0 transparent;
  display: block;
  height: 30px;
  text-indent: -10000px;
  width: 30px;
}
#main-footer #identity-footer .social-networks li a.twitter {
  background-position: -210px -110px;
}
#main-footer #identity-footer .social-networks li a.facebook {
  background-position: -160px -110px;
}
#main-footer #identity-footer .social-networks li a.linkedin {
  background-position: -110px -110px;
}
#main-footer #identity-footer .social-networks li a.youtube {
  background-position: -60px -110px;
}
#main-footer #identity-footer .social-networks li a.googleplus {
  background-position: -10px -110px;
}
#main-footer #footer-cols {
  float: right;
}
#main-footer .three.columns {
  border-top: solid 5px #fff;
  padding-top: 20px;
}
#main-footer .three.columns h4 {
  color: #fff;
  font: bold 18px Arial, sans-serif;
  margin: 0;
}
#main-footer .three.columns ul {
  margin: 0;
  padding: 0;
}
#main-footer .three.columns ul li {
  display: block;
  font: 14px/20px Arial, sans-serif;
}
#main-footer .three.columns ul li a {
  color: #fff;
  text-decoration: none;
}
#main-footer .language {
  border-top: solid 1px #fff;
  margin: 50px 0 60px;
  padding: 0;
}
#main-footer .language li {
  border-right: solid 1px #a0a0a0;
  display: inline-block;
  height: 11px;
  margin: 12px 0 0 ;
  padding: 0;
}
#main-footer .language li a {
  color: #a0a0a0;
  font-size: 11px;
  line-height: 11px;
  padding-right: 5px;
  text-decoration: none;
  vertical-align: top;
}
/* Responsive */
@media only screen and (max-width: 767px) {
  #main-footer .three.columns {
    height: 185px;
    margin: 0 5%;
    width: 40%;
  }
  #main-footer #identity-footer {
    margin: 0 5% 85px;
    width: 90%;
  }
  #main-footer .language {
    display: none;
  }
}
/*************************************************
* @_06 Content
*************************************************/
.page-title {
  line-height: 55px;
  width: 100%;
  margin: 0 10px 40px;
}
.columns .page-title {
  margin-left: 0;
}
.title-details {
  margin-top: -20px;
}
.title-details p {
  line-height: 1.2em;
  margin: 0;
}
.subtitle {
  margin: 0;
}
.button {
  background: #e4012c;
  border: 1px solid #e4012c !important;
  padding: 10px 30px;
  text-decoration: none;
  text-transform: uppercase;
}
.separator {
  margin: 40px 0 20px;
}
.separator div {
  background: #000000;
  height: 4px;
  width: 47px;
}
ul.person {
  list-style-image: url('../img/icons/list-person.png');
  margin: 0 0 0 20px;
}
ul.person li {
  line-height: 1.5em;
  margin: 5px 0;
}
@media all and (max-width: 767px) {
  .page-title {
    line-height: 50px;
    margin: 0 0 30px !important;
  }
}
.background-blue {
  background: #00c1d5;
}
.background-red {
  background: #e4012c;
}
.background-yellow {
  background: #f0b323;
}
.background-black {
  background: #000000;
}
.background-white {
  background: #ffffff;
}