/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, textarea { box-sizing: border-box; margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }
html, body{ height: 100%; font-family: 'Work Sans', sans-serif; font-size: 16px; text-align: center; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { font-size: 62.5%; line-height: 1; background-color: #f9f9f9; color: #34444c; position: relative; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a{ text-decoration: none; }
input, textarea { outline: none; }
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}




/* FONT CLAS */
.fira { font-family: 'fira sans', sans-serif; font-weight: 300; font-style: italic; }




/* HEADER */
.header { background: url(../img/bgk-header.jpg) center bottom no-repeat fixed; background-size: cover; padding: 15px 30px 100px 30px; }
.header img { margin-bottom: 20px; }
.header h1 { font-size: 6em; color: #FFF; margin-bottom: 20px; }
.header p { font-size: 2.4em; line-height: 1.4em; color: #FFF; margin-bottom: 20px; }
.header .operateur-telephonique { color: #00ff3c; font-size: 1.4em; margin-bottom: 80px; }




/* CATEGORIE */
.titre-categorie { background-color: #FFF; padding: 100px 20px; }
.titre-categorie h2 { font-size: 4em; margin-bottom: 20px; }
.titre-categorie p { font-size: 2.4em; line-height: 1.4em; margin-bottom: 20px; }




/* SERVICES */
.services { height: 300px; padding: 50px 35px; transition: all 0.2s; background-repeat: no-repeat; background-size: cover; background-color: #00d700; background-blend-mode: soft-light; }
.services p { font-size: 1.5em; line-height: 1.4em; color: #FFF; margin-bottom: 30px; margin-top: 10px; }
.services a { font-size: 1.2em; color: #FFF; border: 2px solid #FFF; padding: 10px 30px; transition: all 0.2s; }
.services a:hover { text-decoration: none; color: #34444c; background-color:  #FFF; cursor: pointer; }
.services.standardfacile{ background-image: url(../img/bgk-standard.jpg); }
.services.ringover{ background-image: url(../img/bgk-ringover.jpg); background-repeat: no-repeat; background-size: cover; background-color: #212b30; background-blend-mode: multiply; }
.services.workline{ background-image: url(../img/bgk-workline.jpg); }
.services.monfax { background-image: url(../img/bgk-monfax.jpg); background-color: #212b30; background-blend-mode: multiply;  }
.services.soconference{ background-image: url(../img/bgk-soconf.jpg); }
.services.telecom-sur-mesure{ background-image: url(../img/bgk-telecom.jpg); background-color: #212b30; background-blend-mode: multiply; }
.services.simplicitel{ background-image: url(../img/bgk-simplicitel.jpg); }
.services.simplicitel-eco{ background-image: url(../img/bgk-simplicitel-eco.jpg); background-color: #212b30; background-blend-mode: multiply; }
.services.telefute{ background-image: url(../img/bgk-telefute.jpg); }
.services.repondeur-direct{ background-image: url(../img/bgk-repondeur-direct.jpg); background-repeat: no-repeat; background-size: cover; background-color: #212b30; background-blend-mode: multiply; }
.services.allocestqui{ background-image: url(../img/bgk-allocestqui.jpg); }
.services.changetavoix{ background-image: url(../img/bgk-changetavoix.jpg); background-color: #212b30; background-blend-mode: multiply; }
.logo { text-align: center; width: 66%; height: 60px; margin: 0 auto; background-position: center center; background-repeat: no-repeat; background-size: contain;}
.logo-standard { background-image: url(../img/logo-standard.svg); }
.logo-ringover { background-image: url(../img/logo-ringover.svg); }
.logo-workline { background-image: url(../img/logo-workline.svg); }
.logo-monfax { background-image: url(../img/logo-monfax.svg); }
.logo-soconference { background-image: url(../img/logo-soconference.svg); }
.logo-telecom { background-image: url(../img/logo-telecom.svg); background-size: 45%; }
.logo-simplicitel{ background-image: url(../img/logo-simplicitel.svg); }
.logo-simplicitel-eco{ background-image: url(../img/logo-simplicitel-eco.svg); }
.logo-telefute { background-image: url(../img/logo-telefute.svg); background-size: 100%; }
.logo-repondeur-direct{ background-image: url(../img/logo-repondeur-direct.svg); }
.logo-allocestqui { background-image: url(../img/logo-allocestqui.svg); }
.logo-changetavoix { background-image: url(../img/logo-changetavoix.svg); }
.services:hover { background-color: rgba(0, 0, 0, 0.7); transition: all 0.2s; }




/* ACTIVITES MOBILES */
.antena {  background: url(../img/bgk-antena.jpg) center top no-repeat; background-size: cover; }
.antena-texte { padding: 150px 40px; background-color: rgba(255,255,255,0.8); }
.antena-texte p { font-size: 1.5em; line-height: 1.4em; }
.made-in-france { background: url(../img/bgk-madeinfrance.jpg) center top no-repeat; background-size: cover; }
.made-in-france-texte { padding: 150px 40px; background-color: rgba(0,215,0,0.8); }
.made-in-france-texte p { font-size: 1.5em; line-height: 1.4em;color: #FFF; }




/* INFRASCTRUCTURE */
.data-center { background: url(../img/bgk-datacenter.jpg) center top no-repeat; background-size: cover; }
.data-center-texte { padding: 150px 40px; background-color: rgba(0,0,0,0.8); }
.data-center-texte p { color: #FFF; font-size: 1.5em; line-height: 1.4em; padding-top: 30px;}
.data-center-texte p:first-child { padding-top: 0px; }




/* TEAM BJT */
.equipe { padding: 150px 40px; background: url(../img/bgk-equipe.png) center top no-repeat; background-size: cover; }
.equipe p { color: #FFF; font-size: 1.5em; line-height: 1.4em; padding-top: 30px;}
.equipe p:first-child { padding-top: 0px; }
.photo-equipe { height: 200px; background: url(../img/photo-equipe.jpg) center top no-repeat; background-size: cover; }
.photo-cours { height: 200px; background: url(../img/photo-cours.jpg) center top no-repeat; background-size: cover; }
.rejoingnez-nous { background: url(../img/bgk-rejoingnez-nous.jpg) no-repeat; background-size: cover; padding: 100px 20px; }
.rejoingnez-nous h2 { font-size: 2.4em; margin-bottom: 20px; }
.rejoingnez-nous p { font-size: 1.5em; line-height: 1.4em; margin-bottom: 50px; }
.rejoingnez-nous a { font-size: 1.2em; color: #FFF; background-color: #34444c; padding: 10px 30px; transition: all 0.2s; }
.rejoingnez-nous a:hover { text-decoration: none; background-color: #1a2429; cursor: pointer; }



/* CONTACT */
.photo-contact { background: url(../img/bgk-maps.jpg) -100px 0 no-repeat; background-size: cover; }
.photo-contact-texte { padding: 100px 40px; background-color: rgba(0,215,0,0.9); }
.photo-contact-texte h2 { font-size: 2.4em; color: #FFF; margin-bottom: 50px; }
.photo-contact-texte label { font-size: 1.4em; color: #FFF; text-align: left; margin-bottom: 10px; }
.photo-contact-texte input { height: 40px; font-size: 1.4em; margin-bottom: 20px; border: solid 2px #00bd00; transition: all 0.2s; }
.photo-contact-texte input:focus { border: solid 2px #00ff3c; }
.photo-contact-texte input.error { border: solid 2px #FF0000; background-color: #e59191; }
.photo-contact-texte textarea { height: 154px; font-size: 1.4em; margin-bottom: 30px; border: solid 2px #00bd00; padding-top: 10px; resize: none; transition: all 0.2s; }
.photo-contact-texte textarea:focus { border: solid 2px #00ff3c; }
.photo-contact-texte textarea.error { border: solid 2px #FF0000; background-color: #e59191; }
.photo-contact-texte a {  display: inline-block; font-size: 1.2em; color: #FFF; border: 2px solid #FFF; padding: 10px 30px; transition: all 0.2s; margin-bottom: 30px;}
.photo-contact-texte a:hover { text-decoration: none; color: #34444c; background-color:  #FFF; cursor: pointer; }
.photo-contact-texte span{ font-size: 1.6em; line-height: 44px; color: #FFF; transition: all 0.2s; opacity: 0; margin-bottom: 30px; background-color: rgba(0, 0, 0, 0.3); height: 44px; }
.photo-contact-texte span.visible{ opacity: 1; }
.photo-contact-texte p { font-size: 1.6em; color: #FFF; line-height: 1.4em; }
.captcha-patch {margin-bottom: 30px;display:inline-block;padding:2px 1px 1px 2px;border-radius:4px; transition: all 0.2s; }
.captcha-patch.error {background:#FF0000;}




/* FOOTER */
.footer { background-color: #FFF; padding: 100px 0; }
.footer p { font-size: 1.4em; line-height: 1.4em; padding: 40px; }
.footer img { margin: 10px; margin-bottom: 40px; width: 66%; height: 66%; }
.retour-ligne { display: none; }




/* MEDIA QUERIES BUG FIXE TABLETTES 600PX */
@media screen and (min-width:480px) {
.data-center-texte { padding: 150px 60px; }
}




/* MEDIA QUERIES SM */
@media screen and (min-width:768px){
.header { padding: 15px 0 150px 0; }
.titre-categorie { padding: 100px 50px; }
.antena { background-position: 0 0;}
.antena-texte { background-color: rgba(0, 0, 0, 0); }
.made-in-france { background-position: 0 0; }
.rejoingnez-nous { padding-left: 200px; padding-right: 200px; }
.footer img { margin: 10px; width: auto; height: auto; }
.services.workline{ background-image: url(../img/bgk-workline.jpg); background-size: cover; background-color: #212b30; background-blend-mode: multiply; }
.services.monfax{ background-image: url(../img/bgk-monfax.jpg); background-position: -80px 0; background-size: cover; background-color: #00d700; background-blend-mode: soft-light;  }
.services.telefute{ background-image: url(../img/bgk-telefute.jpg); background-size: cover; background-color: #212b30; background-blend-mode: multiply; }
.services.repondeur-direct{ background-image: url(../img/bgk-repondeur-direct.jpg); background-size: cover; background-color: #00d700; background-blend-mode: soft-light; }
.services:hover { background-color: rgba(0, 0, 0, 0.7); transition: all 0.2s; }
.photo-contact-texte span.br{ display: none; }
}




/* MEDIA QUERIES MD*/
@media screen and (min-width:992px){
.header { padding: 30px 0 250px 0; }
.header .operateur-telephonique { margin-bottom: 150px; }
.logo { margin: 70px auto; transition: all 0.2s;  }
.services:hover .logo { margin: 0px auto; margin-bottom: 10px; transition: all 0.2s; }
.services p { margin-top: -200px; opacity: 0; transition:  all 0.2s; }
.services a { opacity: 0; transition: all 0.2s; }
.services:hover p { margin-top: 0; opacity: 1; transition:  all 0.2s; }
.services:hover  a { opacity: 1; transition: all 0.2s; }
.services.standardfacile { background-position: -70px 0; }
.services.workline{ background-image: url(../img/bgk-workline.jpg); background-size: cover; background-color: #00d700; background-blend-mode: soft-light; }
.services.monfax{ background-image: url(../img/bgk-monfax.jpg); background-position: -80px 0; background-size: cover; background-color: #212b30; background-blend-mode: multiply;  }
.services.telefute{ background-image: url(../img/bgk-telefute.jpg); background-size: cover; background-color: #00d700; background-blend-mode: soft-light; }
.services.repondeur-direct{ background-image: url(../img/bgk-repondeur-direct.jpg); background-size: cover; background-color: #212b30; background-blend-mode: multiply; }
.antena { background-position: 0 -50px;}
.data-center-texte { text-align: left; }
.photo-equipe { height: 300px; }
.photo-cours { height: 300px; }
.rejoingnez-nous { height: 500px; }
.services:hover { background-color: rgba(0, 0, 0, 0.7); transition: all 0.2s; }
.retour-ligne { display: inline; }
}