/*
 
  AffinityCom Website Main Style

*/

/*
  Colors
*/
 
/*
  Cyan text     : #00aeef
  Magenta text  : #ec008c
  Yellow text   : #ebd401
*/

/* slide sizes

  slides : 947x221
  controls : 28x25

*/

body {
  background: #fff;
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  text-align: center;
}

@font-face {
  font-family: "Amandine";
  src: url('../fonts/amandine-webfont.eot');
  src: url('../fonts/amandine-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/amandine-webfont.woff2') format('woff2'),
       url('../fonts/amandine-webfont.woff') format('woff'),
       url('../fonts/amandine-webfont.ttf') format('truetype'),
       url('../fonts/amandine-webfont.svg#amandinehandwriting') format('svg');  
}

.amandine {
  font-family: "Amandine", "Comic Sans MS", cursive, sans-serif;
}

header {
  color: #fff;
  z-index: 1000;
  width: 100%;
  background: #000;
  position: fixed;
  top: 0;
  padding-top: 10px;
  padding-bottom: 11px;
  text-align: left;
}

header nav {
  text-transform: uppercase;
  font-size: 0.75em;
  width: 947px;
  margin: 0 auto;
}

header h1 {
  width: 186px;
  float: left;
}

h1 {
  padding: 0px;
  margin: 0px;
}

header nav > ul {
  float: right;
  text-align: right;
  width: 760px;
  padding-top: 52px;
  margin: 0 auto;
}

header nav ul li {
  padding-left: 25px;
  padding-right: 25px;
  text-align: center;
/*  width: 80px; */
  display: inline-block;
  margin-bottom: 10px;
}

header > nav > ul > li:last-child {
  padding-right: 0px;
}

header .sub-menu {

  margin-top: 30px;
  z-index: 2000;
  position: absolute;
  color: #fff;
  font-size: 0.8em;
  background-color: rgba(0, 0, 0, 0.8);
  padding-top: 10px;
  padding-bottom: 15px;
}

header #sub-menu-agence {
  margin-left: -45px;
}

header #sub-menu-savoir-faire {
  margin-left: -15px;
}


header #sub-menu-creation {
  margin-left: -30px;
}


header .sub-menu li {
  padding-top: 10px;
  text-align: center;
  display: block;
}

header nav a {
  color: #fff;
  text-decoration: none;
}

header nav .sub-menu a:hover {
  text-decoration: underline;
}

#link-agence .selected,
#link-reference .selected,
#link-creation .selected,
header nav .cyan a:hover,
header nav ul li .cyan a {
  color: #00aeef;
}

#link-solutions .selected,
#link-news .selected,
#link-savoir-faire .selected,
header nav .magenta a:hover,
header nav ul li .magenta a {
  color: #ec008c;
}

#link-portfolio .selected,
#link-contact .selected,
#link-demo .selected,
header nav .yellow a:hover
header nav ul li .yellow a {
  color: #ebd401;
}

.clear {
  clear: both;
}

/** 
 * Slideshow
 */
 
#perso {
  cursor: pointer;
  position: absolute;
  top: 332px;
  margin-left: 700px;
}

#form-perso {
  padding-top: 20px;
  position: absolute;
  bottom: 81px;
  right: 0px;
  left: 0px;
  text-align: center;
  z-index: 500;
  width: 236px;
  height: 153px;
  background: url('../images/slides/fond_saisie_personnaliser_k.png');
}

#form-perso p {
  height: 20px;
  cursor: pointer;
  text-align: left;
  width: 173px; 
  padding: 0px;
  padding-left: 5px;
  margin: 0 auto;
  margin-top: 8px;
  color: #fff;
  border: 1px dotted #fff;
  background-position: 95% 50%; 
  background-repeat: no-repeat;
}


#form-perso input[type="text"] {
  height: 20px;
  width: 173px; 
  color: #fff;
  padding-left: 5px;
  border: 1px dotted #fff;
  background: transparent;
}

.list_carousel {
  background-color: #000;
  margin: 99px 0 0 0;
  width: 947px;
}
.list_carousel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
  width: 947px;
  height: 221px;
}
.list_carousel li {
  color: #999;
  text-align: center;
  background-color: #000;
  width: 947px;
  height: 221px;
  padding: 0;
  display: block;
  float: left;
  margin-right: 12px;
  margin-bottom: 12px;
}
.list_carousel.responsive {
  width: auto;
}

#slideshow {
  margin-bottom: 25px;
}

.slide {
  display: block;
}

#slide-0 {
  background: url('../images/slides/fond_perso_crayon_nb.jpg') no-repeat;
}

#slide-1 {
  background: url('../images/slides/fond_perso_pot_nb.jpg') no-repeat;
}

#slide-2 {
  background: url('../images/slides/fond_perso_bombe_nb.jpg') no-repeat;
}

#slide-3 {
  background: url('../images/slides/fond_perso_stabilo_nb.jpg') no-repeat;
}

#slide-4 {
  background: url('../images/slides/fond_perso_peinture_nb.jpg') no-repeat;
}

/** 
 * Slideshow controls style rules.
 */

.controls {
  position: relative;
  bottom: 145px;
  width: 1060px;
  margin: 0 auto;
}

#leftControl {
  float: left;
}

#rightControl {
  float: right;
  margin-right: 16px;
}

/** 
 * Content
 */
.cyan {
  color: #00aeef;
}

.magenta {
 color  : #ec008c;
}

.yellow {
  color: #ebd401;
}

.black {
  color: black;
}
 
.content {
  text-align: justify;
  width: 947px;
  margin: 0 auto;
  background: #fff;
  margin-bottom: 48px;
}

.content strong {
  font-weight: bold;
}

.content p,
.content ul {
  font-size: 0.75em;
  line-height: 180%;
}

.content p {
  padding-bottom: 20px;
}

/** 
 * Content Home
 */
 
#home #intro {
  background: url('../images/home/home_bandeau1.jpg') center bottom no-repeat;
  padding-bottom: 20px;
}

#home #intro-description {
  text-align: center;
  font-family: 'Open Sans', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 22pt;
  font-weight: 300;
  padding: 0px 30px;
  background: url('../images/home/intro_background.png') center top no-repeat;
  width: 887px;
  height: 255px;
  border-bottom: 1px solid #000;
  margin-bottom: 30px;
}

#home #intro-description strong {
  font-size: 20pt;
  font-weight: 600;
}

#home #intro-video {
  padding-top: 24px;
  background: url('../images/home/home_bandeau2_fond.jpg') center top repeat-y;
  padding-bottom: 42px;
}

#description-video {
  margin-top: 40px;
  width: 350px;
  display: inline-block;
  vertical-align: top;
}

#description-video img {
  float: right;
  margin-bottom: 36px;
}

#description-video p {
  clear: both;
  padding-right: 66px;
}

.block-left {
  display: inline-block;
  width: 408px;
  padding-right: 0px;
}

.block-right {
  float: right;
  width: 514px;
  padding-left: 0px;
}

#keywords {
  padding: 20px 0px 20px 0px;
  clear: both;
  border-bottom: 1px solid #000;
}

#proverbe {
  height: 161px;
  width: 205px;
  display: inline-block;
  margin-right: 0px;
}

#couleurs {
  width: 700px;
  float: right;
}

.couleur {
  float: left;
  width: 125px;
  margin-left: 50px;
  font-family: arial;
  text-align: left;
  vertical-align: top;
  display: inline-block;
}

.couleur h4 {
  font-size: 18px;
  margin: 10px 0px 10px 0px;
  font-weight: bold;
  padding-left: 18px;
  background: url('../images/heading/sharp.png') no-repeat;
}

.cyan h4 {
  background-image: url('../images/heading/sharp_cyan.png');
}

.magenta h4 {
  background-image: url('../images/heading/sharp_magenta.png');
}

.yellow h4 {
  background-image: url('../images/heading/sharp_yellow.png');
}

.couleur ul {
  font-size: 0.54em;
}

/** 
 * Content References
 */
 
#references ul {
 margin-bottom: 20px; 
}

#clients {
  padding-bottom: 50px;
  text-align: center;
}

#clients img {
  margin: 10px;
}


#references h3 {
  clear: both;
  margin-bottom: 42px;
}

#references .content-block {
  clear: both;
  border-top: 1px solid #000;
  margin-top: 30px;
  padding-top: 42px;
}

#references-clients-logos {
  display: block;
  width: 611px;
  text-align: center;
  margin: 0 auto;
}

#activities {
  text-align: left;
}

#activities ul li {
  margin-right: 50px;
  font-weight: bold;  
  display: inline-block;
  width: 88px;
}

#activities ul .end_of_line {
  float: right;
  margin-right: 0px;
}

#activities > img {
  height: 30px;
  float: right;
}

#testimonials {
  float: left;
  width: 482px;
}

#testimonials h3 {
  float: left;
  width: 482px;
}

#testimonials h4 {
  font-size: 0.75em;
  padding-bottom: 30px;
}

#testimonials p {
  clear: both;
  font-style: italic;
}

#testimonials h4,
#testimonials .signature {
  font-style: normal;
  font-weight: bold;
}

#link-references {
  float: right;
  padding-top: 130px;
  padding-left: 140px;
  width: 265px;
  height: 355px;
  background: url('../images/reference/refrence_bottom.jpg') center top no-repeat;
}

#link-references ul li {
  cursor: pointer;
  display: block;
}

#link-references ul li a {
  color: #000;
  text-decoration: none;
}

/** 
 * Content Valeurs
 */
 
.valeur {
  font-size: 0.95em;
  float: left;
  width: 202px;
  margin-right: 46px;
}

.valeur h3,
.last_valeur h3 {
  font-size: 1.5em;
  margin-bottom: 40px;
}

.last_valeur strong,
.valeur strong {
  font-weight: bold;
}

.last_valeur {
  font-size: 0.95em;
  float: right;
  width: 202px;
}

#valeurs > img {
  margin-top: 10px;
  border-top: 1px solid #000;
}

/** 
 * Content Portfolio
 */

#portfolio h3 {
  padding-left: 20px;
  margin-bottom: 20px;
  background: url('../images/heading/sharp.png') no-repeat;
}

#portfolio h3 .note {
  font-size: 0.75em;
}
 
#portfolio .client,
#portfolio .last_client {
  vertical-align: top;
  display: inline-block;
  width: 209px;
  padding-bottom: 22px;
  border-bottom: 1px solid #000;
  margin-bottom: 32px;
}

#portfolio .client {
  margin-right: 32px;
}

#portfolio .client a,
#portfolio .last_client a {
  text-decoration: none;
  color: #000;
}




/** 
 * Content Portfolio Client
 */
#portfolio-client h2 {
  margin-bottom: 10px;
}

#portfolio-client h3 {
  clear: both;
  padding-left: 20px;
  margin-bottom: 20px;
  background: url('../images/heading/sharp.png') no-repeat;
}

#portfolio-client #description {
  padding-bottom: 20px;
  border-bottom: 1px solid #000;
  margin-bottom: 50px;
}
 
#portfolio-client #description img {
  width: 209px;
  float: left;
  display: inline-block;
}

#portfolio-client #description-client {
  vertical-align: top;
  margin-left: 36px;
  width: 450px;
  display: inline-block;
}

#portfolio-client #notre-mission {
  margin-left: 36px;
  display: inline-block;
  width: 209px;
  font-weight: bold;
}

#portfolio-client #photos {
  text-align: center;
}

#portfolio-client #photos img {
  margin: 0 auto;
  margin-bottom: 40px;  
}

#portfolio-client #link-top {
  position: fixed;
  bottom: 0;
  margin: 0;
  margin-bottom: 70px;
  margin-left: 825px; 
}

#portfolio-client #back-portfolio {
  margin-left: 310px;
  padding-top: 10px;
  padding-left: 50px;
  background: url('../images/portfolio/portfolio_fleche.png') left top no-repeat;
}


 

/** 
 * Content News
 */

#home-news .news-row, 
#news .news-row {
  border-bottom: 1px solid black;
  margin-bottom: 25px;
}

/* 
#home-news h3,
#news h3 {
  padding-left: 20px;
  margin-bottom: 20px;
  background: url('../images/heading/sharp.png') no-repeat;
}
*/

#home-news .h_cyan,
#news .h_cyan{
    color: #00aeef;
    background-image: url('../images/heading/sharp_cyan.png');
}

#home-news .h_magenta,
#news .h_magenta {
    color: #ec008c;
    background-image: url('../images/heading/sharp_magenta.png');
}

#home-news .h_yellow,
#news .h_yellow {
    color: #ebd401;
    background-image: url('../images/heading/sharp_yellow.png');
}

.news a,
.last_news a {
  background-image: none;
}

#news .news a,
#news .last_news a {
  text-decoration: none;
}

 
#home-news .news,
#home-news .last_news,
#news .news,
#news .last_news {
  vertical-align: top;
  display: inline-block;
  width: 209px;
  margin-bottom: 32px;
}

#home-news .news-row .news img,
#home-news .news-row .last_news img,
#news .news img,
#news .last_news img{
  padding-bottom: 22px;
  margin-bottom: 8px;
  border-bottom: 1px solid #000;
}

#home-news .news,
#news .news {
  margin-right: 32px;
}

/** 
 * Content Equipe
 */
#portraits img {
  display: inline-block;
  text-align: justify;
  margin-bottom: 33px;
}
 
#portraits .portrait {
  margin-right: 33px;
}

#portraits {
  margin-bottom: 22px;
}

#equipe > p {
  margin-top: 32px;
}

/** 
 * Content Solutions
 */
#solutions .cyan p,
#solutions .magenta p,
#solutions .yellow p {
  color: #000;
}

#solutions a {
  text-decoration: none;
}

#solutions .cyan a {
  color: #00aeef;
}

#solutions .magenta a {
  color: #ec008c;
}

#solutions .yellow a {
  color: #ebd401;
}

#solutions h3 {
  font-weight: lighter;
  font-size: 2em;
  padding-left: 30px;
  margin-bottom: 20px;
  background: url('../images/heading/sharp_large.png') no-repeat;
}

#solutions .cyan h3 {
  background-image: url('../images/heading/sharp_large_cyan.png');
}

#solutions .yellow h3 {
  background-image: url('../images/heading/sharp_large_yellow.png');
}

#solutions .magenta h3 {
  background-image: url('../images/heading/sharp_large_magenta.png');
}

#solutions .solution {
  width: 425px;
}

#solutions .left {
  clear: left;
  float: left;
}

#solutions .cyan h3 {
  background-position: 225px 0px;
  text-align: right;
}

#solutions .yellow h3 {
  background-position: 285px 0px;
  text-align: right;
}

#solutions .right {
  clear: right;
  float: right;
}

#solutions #savoir-faire {
  margin-top: 45px;
}

#solutions .packages {
}  

/** 
 * Content Contact
 */
#contact {
  margin-bottom: 50px;
} 
 
#contact #adresse {
  margin-top: 38px;
  font-size: 0.75em;
  float: left;
  width: 425px;
  text-align: center;
  line-height: 150%;
}
 
#contact #form_contact {
  float: left;
  width: 150px;
  display: inline-block;
  vertical-align: top;
}

#info_contact {
  float: left;
  width: 350px;
  display: inline-block;
  vertical-align: top;
}

#contact #email-message {
  text-align: left;
  float: right;
  width: 450px;
}

#contact a {
  color: #ec008c;
  text-decoration: none;
}

#contact label {
  font-size: 0.75em;
  padding-top: 3px;
  padding-right: 10px;
  vertical-align: top;
  display: inline-block;
  text-align: right;
  width: 100px;
}

#contact fieldset {
  margin-bottom: 10px;
}

#contact #civilite {
  padding-left: 98px;
}

#contact #civilite label {
  width: 30px;
}

#contact #form_contact input[type="text"] {
  border: 1px solid #aaa;
  width: 300px;
}

#contact textarea {
  border: 1px solid #aaa;
  width: 296px;
  height: 80px;
}

#contact input[type="submit"] {
  float:  right;
  margin-right: 10px;
  width: 67px;
  height: 27px;
  cursor: pointer;
  background: url('../images/contact/contact_ok.png') no-repeat;
  border: none;
}

#contact #plan {
  clear: both;
  margin-top: 10px;
  text-align: center;
  border-top: 1px solid #000;
  padding-top: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #000;
}

#contact #link-legal {
  clear: both;
}

#contact #link-legal {
  text-align: center;
}

#contact #link-legal img {
  padding: 40px;
}

/** 
 * Recrutement
 */

 
#recrutement #description {
  float: left;
  width: 430px;
}

#recrutement #description h3 {
  font-weight: bold;
  margin-bottom: 30px;
}
 
#recrutement #equipe {
  float: right;
}

/** 
 * Mentions & Charte
 */

#mentions p {
  padding: 0;
}
 
#mentions h3 {
  margin-top: 30px;
  margin-bottom: 15px;
}

#mentions {
  margin-bottom: 100px;
}

/** 
 * Content B2Me
 */
 
#b2me h3 {
  text-align: center;
  margin-bottom: 20px;
}

#b2me h4 {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 12px;
}

#b2me h4 img {
  vertical-align: -10px;
}

#b2me .image-perso-demo {
  margin-top: 20px;
  border-bottom: 1px solid black;
  padding-bottom: 30px;
  margin-bottom: 30px;
}

#b2me #b2me-mission  {
  margin-top: 15px;
  float: left;
}

#b2me-demo-link {
  margin-top: 45px;
}

#b2me #b2me-mission ul li {
  margin-bottom: 15px;
}

#b2me #b2me-process {
  margin-top: 15px;
  margin-left: 70px;
}

#b2me #b2me-resultats {
  float: right;
  margin-right: 30px;
}

#b2me #b2me-resultats ul li {
  margin-bottom: 7px;
}
 
/** 
* Content Demo
*/

#demo-maincontent {
  text-align: left;
  padding-bottom: 50px;
}

#demo-maincontent h3,
#demo-maincontent p {
  margin: 0 auto;
  font-size: 25px;
  font-family: "Open Sans",
    "HelveticaNeue-Light",
    "Helvetica Neue Light",
    "Helvetica Neue",
    Helvetica, Arial,
    "Lucida Grande",
    sans-serif;
  padding: 0px;
  text-align: center;
}

#demo-maincontent strong {
  font-weight: 600;
  
}

#demo-maincontent h3 {
  font-weight: 300;
  vertical-align: middle;
}

#demo-maincontent p {
  font-size: 14px;
}

#demo-maincontent #intro-note {
  padding-bottom: 15px;
  width: 300px;
  background: url('../images/demo/fleche_formulaire.png') no-repeat right;
  margin-bottom: 15px;
}


#demo-maincontent #demo-form {
  width: 876px;
  margin: 0 auto;
}

#demo-maincontent #demo-video-title {
  margin-top: 40px;
  width: 520px;
  padding-bottom: 35px;
  background: url('../images/demo/fleche_video.png') no-repeat right;
}

#demo-maincontent #demo-share {
  width: 876px;
  margin: 0 auto;
}

#demo-maincontent #demo-share-title {
  width: 876px;
  margin-top: 10px;
  padding-top: 30px;
  border-top: 1px solid #000;
  background: url('../images/demo/fleche_formulaire.png') no-repeat 800px bottom;
  padding-bottom: 35px;
}


#demo-maincontent input[type="text"] {
  width: 308px;
  color: #ec008c;
}

#demo-maincontent input[type="button"],
#demo-maincontent input[type="submit"] {
  padding-bottom: 3px;
  text-indent: 10000%;
  border: none;
  width: 62px;
  height: 25px;
  background: url('../images/demo/btn_ok.png');
}

#demo-maincontent label {
  display: inline-block;
  width: 63px;
  font-family: "Amandine", "Comic Sans MS", cursive, sans-serif; 
}

#demo-maincontent .radio-label {
  color: #ec008c;
  font-family: Arial, Helvetica, sans-serif; 
}

#demo-maincontent fieldset {
  text-align: left;
  display: inline-block;
  width: 45%;
  margin-bottom: 30px;
}

#demo-maincontent #anim-perso-demo-container {
  margin: 0 auto;
  width: 893px;
  height: 559px;
  text-align: left;
}

#demo-maincontent #anim-perso-demo {
  margin: 0 auto;
  margin-top: 80px;
  width: 712px;
  height: 400px;
}

#demo-maincontent #mandatory-note {
  margin-left: 63px;
  margin-bottom: 30px;
  text-align: left;
}

/*
#demo #anim-perso {
  width: 946px;
  height: 478px;
}

#demo #anim-perso,
#demo #demos-perso {
  padding-bottom: 50px;
  border-bottom: 1px solid black;
  margin-bottom: 33px;
}

#demo #demos-perso {
  margin-bottom: 100px;
}

#demo #demo-links {
  margin-left: 64px;
  display: inline-block;
  width: 384px;
}

#demo #consignes-formulaire {
  margin-top: 50px;
  margin-bottom: 30px;
  display: block;
}

#demo h3 {
  text-align: center;
  margin-bottom: 20px;
}
*/

/* 
  Form Demo
*/

/*
#demo #form-demo-perso {
  text-align: center;
  margin-right: 30px;
  float: right;
  display: inline-block;
  width: 371px;
  height: 393px;
  background: url('../images/demo/ac_site_page_demo_fond_formulaire.png');
}

#demo #form-demo-perso input {
  margin: 0 auto;
}

#demo #form-demo-perso input[type="text"] {
  margin-top: 43px;
  width: 220px;
  display: block;
  background-color: transparent;
  border: none;
  height: 1.5em;
}

#demo #form-demo-perso input[type="radio"] {
  margin-top: 32px;
}

#demo #form-demo-perso input[type="submit"] {
  color: #fff;
  margin-top: 32px;
  width: 99px;
  height: 27px;
  background: url('../images/demo/ac_site_page_demo_btn_valider.jpg');
  border: none;
  text-indent: -1000%;
  cursor: pointer;
}

#demo #form-demo-perso #civilite-mme {
  margin-right: 100px;
}

#demo #form-demo-perso #civilite-m {
  margin-left: 100px;
}
*/

/* News home */

.news-main {
  width: 100%;
  height: 286px;
  margin-bottom: 30px;
}

.news-main p {
  float: right;
  width: 33%;
  margin-left: 10px;
  height: 190px;
  font-size: 0.75em;
  padding-bottom: 0.6em;
}

.news-main h3 {
  float: right;
  width: 33%;
  padding-top: 30px;
  border-top: 1px solid black;
  margin-bottom: 20px;
  font-size: 2em;
}

.news-main img {
  float: left;
}

.news-main .news-main-text {
  border-bottom: 1px solid black;
}

.news-main a,
.news-main a:hover,
.news-main a:visited{
  font-weight: bold;
  font-size: 1.1em;
  color: #000;
}


#hom-news .news-row {
  clear: both;
}

/** 
 * Footer
 */

footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  margin: 0 auto;
  clear: both;
  background: #000;
}