/* CSS Document */


@font-face {
    font-family: 'gothambook';
    src: url('/fonts/gothambook-webfont.woff2') format('woff2'),
         url('/fonts/gothambook-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gothambold';
    src: url('/fonts/gothambold-webfont.woff2') format('woff2'),
         url('/fonts/gothambold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {font-family: 'gothambook'; font-size:14px; color:#404040; margin:0; padding:0}
section, div {display:block; margin:0; padding:0; position:relative}
section {padding:50px 0}
.container { width:1400px; max-width:90%; margin:0 auto;}

::-moz-selection { background-color:#f6f6f6; color:#404040}
::selection { background-color:#f6f6f6; color:#404040 }

h1 {line-height: 42px;
font-size: 30px;}

hr {border:0; border-bottom:1px solid #f0f0f0; margin:20px 0}
p {margin:10px 0; font-size:14px; line-height:18px}
p.small2 { font-size:12px; line-height:15px}
a, a:visited {color:inherit; text-decoration:none}
.tCenter {text-align:center}
.tLeft {text-align:left}

.bloc1-2, .bloc1-4, .bloc1-3, .bloc2-3, .bloc3-4   {display:inline-block; width:49%; margin:0 2% 0 0; vertical-align:top; position:relative}
.bloc1-4 {width:23.5%; margin:0 2% 25px 0; }
.bloc1-3 { width:31%}
.bloc2-3 { width:61%}
.bloc3-4 { width:67%}
.last {margin-right:0 !important}

.largeTitle { height:100px; overflow:visible; color:#606060; width:100%; text-align:center; margin-top:20px;
}

.largeTitle h2 { font-size:40px; letter-spacing:-0.5px; position:absolute; z-index:100; width:300px; left:50%; margin-left:-150px; top:0px;background-color: red;}
.largeTitle h2, h3.grad, .bgGrad{ 
  background-image: linear-gradient(45deg, #b574ce, #4c3480);
  background-size: 100%;  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;}

 /*h1.grad {color:#b574ce; text-shadow: 1px 1px 2px #fff, 0 0 1em #000, 0 0 0.2em #4c3480;}*/
 
 
.largeTitle span {letter-spacing:-3px; font-size:7vw; line-height:40px; color:#f6f6f6;  font-weight:300; padding-right:13% ; opacity:0.8 }

h1.grad { background-image: linear-gradient(45deg, #b574ce, #4c3480); display: inline-block; padding:15px 18px 12px 15px; margin-bottom:10px; border-radius:2px }
h1.grad strong { font-size:48px;}

p.descript { font-size:19px; line-height:23px; margin-left:15px; font-weight:bold}

/*VIDEO*/
#prod-video { min-height:100%; }
#prod-video .container { text-align:center}
#prod-video a {}
.padd {padding:4%}
.BackgroundVideo-0 {background-image:url(../img/bg-microphone.jpg)}

.blocVimeo { display: inline-block; height:245px; width:23%; background:#ffffff; margin:10px 0.5%; overflow:hidden; cursor:pointer}
.blocVimeoThumb { display:block; height:180px; background-size:cover; overflow:hidden}
.blocVimeoInfos { display:block; height:65px; font-size:14px; text-align:left; text-transform:uppercase;  }
.blocVimeoInfos p { margin:6px 0 0 0; padding:0 5px 0 0; font-size:11px; text-transform:none; letter-spacing:0; line-height:14px; }
.blocVimeo img {max-width:100%}
.blocVimeoThumb .hover{display: block; width:100%; height:100%; opacity:0.75; text-align:center; background:#222; position:relative; margin-top:-100% }
.blocVimeoThumb .hover .play { margin-top:50px;  }
.blocVimeo:hover .hover  { margin-top:0 }

/*
.blocVimeo { display: inline-block; height:215px; width:266px; background:#ffffff; margin:4px 5px; overflow:hidden; cursor:pointer}
.blocVimeoThumb { display:block; height:150px; background-size:cover; overflow:hidden}
.blocVimeoInfos { display:block; height:65px; font-size:13px; text-align:left; text-transform:uppercase; letter-spacing:1px;  }
.blocVimeoInfos p { margin:6px 0 0 0; padding:0 10% 0 0; font-size:10.5px; text-transform:none; letter-spacing:0; line-height:13px; opacity:0.8}
.blocVimeo img {max-width:100%}
.blocVimeoThumb .hover{display: block; width:100%; height:100%; background-color:rgba( 0, 0, 0, 0.35); opacity:0; position:relative }
.blocVimeoThumb .hover .play { margin-top:15% }
.blocVimeo:hover {background:#f1f1f1;}
.blocVimeo:hover .blocVimeoThumb .hover {opacity:1}
*/


#player {}

#top{ display:block; margin:0; padding:0; width:100%; color:#ffffff; margin-bottom:0; overflow:hidden; height: 50%;    min-height: 530px;   }


.bgHover {/*background: radial-gradient(circle, rgba(0,0,0,0.5704656862745099) 0%, rgba(255,255,255,0) 40%);*/ padding:34px; width:680px; max-width:80%; margin:120px auto 0 auto; animation-name: fadeInBottom; animation-duration: 2s;}
.bgHover .photo, .bgHover .content { display:inline-block; vertical-align:middle}
.bgHover .photo {width:30%; margin-right:5%}
.bgHover .content {width:62%}


#topBar, #nav {position:absolute; width:100%; top:0; left:auto;  z-index:100; text-align:center; padding:15px 0 }
#topBar  a  { position:relative; color:#ffffff; display:inline-block; float:left; margin:0 0 0 20px; font-size:12px; letter-spacing:0px; padding:4px;}
#topBar  a i {font-size:14px; display:inline-block; margin:0 5px 0 0; line-height:10px}
#topBar  a.links2  { float:right; margin:0 20px 0 0;}

#nav a  { position:relative; color:#ffffff; display:inline-block; margin:0 10px; text-transform:uppercase; font-size:11px; letter-spacing:1px; padding:4px; font-weight:bold}

#nav {bottom:40px; top:auto}

#nav a span {position:absolute; left:0; bottom:-2px; height:1px; background:#fff; width:0}
#nav a.active span, #nav a:hover span { width:100%}

#nav.navPersist {position:fixed; z-index:200; top:0; bottom:0; height:30px; margin:0; padding:15px 0 10px 0;  background:#202020}


/*agence-more*/
#agence-more { background:#202020 url(../img/bg-microphone.jpg) center center no-repeat;  background-size:cover; background-attachment:fixed; padding: 0; height:auto; margin:0; overflow:hidden; text-align:center}
#agence-more .mask {width:100%; background:rgba(0,0,0,0.2) url(../img/effect-2.png);  padding:90px 0 40px 0; display:block; height:100%;}
#agence-more.white h3{color:#fff; margin: 0 auto 30px; font-size:28px}
#agence-more.white p{color:#fff; margin-bottom:30px; font-size:15px; line-height:22px;}
#agence-more h3 {color:#FFF !important}

/*#logoContainer {}
#logoContainer img {max-width:12%; margin:0 1%}*/


/*bouton*/
.bt { display: inline-block;  line-height:12px;  font-size:12px; font-weight:bold; text-transform:uppercase; letter-spacing:0.05em; padding:8px 14px;  color:#222; border:1px solid #fff; text-align:center; background:rgb(255,255,255,0.95); border-radius:3px  }
.bt:hover {background:rgb(255,255,255,0.05); color:#fff}


/*ICO-UP*/
.icoUp {position:fixed; width:58px; height:58px; z-index:500; right:20px; bottom:20px; opacity:0.8; cursor:pointer }
.icoUp:hover {opacity:1}

/*FOOTER*/
#mainFooter { background:#222; padding:40px 0 0 0; color:#ffffff}
.subFooter { background:#000; margin-top:40px; color:#ffffff; overflow:hidden; text-align:center }
.subFooter a { display:inline-block; margin:0 20px; letter-spacing:0.03em; color:#ffffff; font-size:10px; text-transform:uppercase; line-height:40px}
.subFooter a.copyright {float:right}
.subFooter a:hover {opacity:0.7}
#mainFooter .social { margin:10px auto}
#mainFooter .social a { display:inline-block; margin:0 4px}
#mainFooter .bloc1-3 .line, #mainFooter .bloc1-3 .line2 {width:0px; height:100%; background:#505159; position:absolute; left:0; margin:0 0 0 -2%}
#mainFooter .bloc1-3 .line2 {left:auto; right:0; margin:0 -2% 0 0}
.modTitle { font-size:19px; letter-spacing:0; font-weight:300; display:block; line-height:28px}
.modSubTitle {display:inline-block; font-size:11px; line-height:11px; text-transform:uppercase; color:#fff; padding:6px;/* background:#d4047c*/}
#mainFooter .info {padding-top:12px}
#mainFooter .info img { float:left; margin:0 18px 0 -8px;}
#mainFooter .info p{ font-style:12px; line-height:16px; margin:5px 0 10px 0}
.mailchimp {margin-top:10px}
.mailchimp input {display:inline-block;vertical-align:top}
.mailchimp input.em { border:1px solid #ffffff; background:#ffffff; padding:0 10px; line-height:30px; font-size:12px; width:60% }
.mailchimp input.but{ cursor:pointer; margin:0; border:0;  height:32px; width:44px; padding-left:12px; background:url(../img/but-arrow.png) center left no-repeat; color:#ffffff; font-weight:700; text-transform:uppercase}


::-webkit-input-placeholder { color: #364f6b; font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:30px}
::-moz-placeholder {   color: #364f6b; font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:30px}
:-ms-input-placeholder {  color: #364f6b; font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:30px}
:-moz-placeholder {  color: #364f6b; font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:30px}




/*CONTACT*/
#contact {margin-bottom:0; padding-bottom:0}
.contactInfo {display:block; vertical-align:middle; font-size:19px; line-height:14px; margin:10px 0 0 0; text-align:left}
.contactInfo i {display:inline-block; margin:0 5px 0 0; font-size:18px;}
.contactInfo img { float:left; margin:0 12px 0 0}
.contactInfo small { font-size:13px;}
.logoSmall {margin:-20px 0 25px 30px; display:block; width:200px }

#formAjax {margin-top:30px; text-align:left}
#formAjax span  { display:block; margin:0 0 16px 0; position:relative}
#formAjax span.half  { display: inline-block; width:48%; margin:0 2% 16px 0; position:relative}
#formAjax span.last {margin-right:0 !important; }

#formAjax span input, #formAjax span textarea {display:block; width:96%; border:1px solid #e1e1e1; padding:10px;  font-size:18px; box-shadow:none }
#formAjax span textarea {height:130px}
#formAjax span label {position:absolute; top:-8px; left:10px; background:#ffffff;  padding:3px 8px; font-size:12.5px; line-height:11px; cursor:pointer } 
#formAjax span input:focus, #formAjax span textarea:focus {box-shadow: 0px 10px 8px #eeeeee;   }
#formAjax span input:focus + label, #formAjax span textarea:focus + label {  z-index: 200; top:-10px;  }
#formAjax span input:focus, #formAjax span input:focus + label, #formAjax span textarea:focus, #formAjax span textarea:focus + label{z-index: 200;    -webkit-transition: all 120ms ease-out;    -webkit-transform: scale(1.03);    -ms-transition: all 120ms ease-out;    -ms-transform: scale(1.03);       -moz-transition: all 120ms ease-out;    -moz-transform: scale(1.03);    transition: all 120ms ease-out;    transform: scale(1.03);}
#formAjax span input[type=checkbox] {width:20px; display:inline-block}
#formAjax span label.normal {position:relative; padding:0px; font-size:11.5px; line-height:11px; letter-spacing:0.5px; top:auto; left:auto } 
#formAjax span input:focus + label.normal {  z-index: 200; top:auto;  }

#formAjax .btNorm { display: inline-block;
    line-height: 12px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 15px 20px;
    color: #fff;
    border: 1px solid #fff;
    text-align: center;
    background: rgb(165,106,194);
background: linear-gradient(90deg, rgba(165,106,194,1) 0%, rgba(109,72,153,1) 63%);
    border-radius: 2px;}




/*GLOBAL EFFECT*/
.blocVimeo *, #nav a span  {-webkit-transition: all 0.5s; -moz-transition: all 0.5s ; -o-transition: all 0.5s ; transition: all 0.5s ; }