/*@import "mobstyle.css" screen and (max-width: 768px);*/

/*

@import "carrousel.css";
@import "contact.css";
@import "gallery4.css";


*/


body {
font-family : arial, verdana, sans-serif;
background-color : whitesmoke;
}
h1 {
font-size : 24px;
}
h2 {
font-size : 18px;
}
h3 {
font-size : 14px;
}
p {
font-size : 12px;
}
@media screen and (max-width: 1200px) and (min-width: 800px) {
div#block-haut img.icones-titre {
width : 26%;
margin-top : 25px;
margin-left : 25px;
}
div#block-haut img.logo-creartech {
width : 50%;
margin-left : 25%;
margin-top : 100px;
}
p {
font-size : 11px;
}
div.materiel-imprimante-3d-fdm, div.materiel-imprimante-3d-sla {
width : 90%;
margin-left : 2%;
}

div.gravure-laser{
height : 480px;
}
div.detail, div.detail-usinage-conventionnel {
height : 500px;
}


div.fleche-page {
bottom : 40px;
right : 25px;
}
div.reseau-sociaux-creartech {
top : 290px;
right : 10px;
width : 40px;
height : 90px;
}
div.contact-mail {
top : 170px;
right : 20px;
width : 45px;
height : 45px;
}
div.reseau-sociaux-creartech img {
width : 35px;
height : 35px;
background-color : white;
border : #f2f2f2 solid 1px;
border-radius : 8%;
box-shadow : 3px 4px 8px -4px #111;
}
div.contact-mail img {
width : 100%;
height : 40px;
padding-top : 5px;
background-color : white;
border : #f2f2f2 solid 1px;
border-radius : 6%;
box-shadow : 3px 4px 8px -4px #111;
}
div.detail-coin-des-geek {
min-height : 720px;
}
div.detail-coin-des-geek p {
width : 88%;
}
div.message-responsabilite {
margin-left : 5%;
height : 120px;
width : 85%;
}
div.message-responsabilite h3 {
font-size : 17px;
margin-top : 20px;
margin-left : 30px;
width : 85%;
}
div.titre-tuto-coin-des-geek {
margin-top : 60px;
margin-left : 4%;
}
div.titre-tuto-coin-des-geek h2 {
margin-top : 15px;
}
div.detail-coin-des-geek dd {
margin-left : 5px;
}
div.detail-coin-des-geek dt {
margin-left : 0;
}
div.detail-coin-des-geek dl {
font-size : 14px;
}
div.contact-telephone {
height : 52px;
border-bottom : 2px solid #fff;
top : 340px;
width : 220px;
left : 63%;
}
div.contact-telephone img {
margin-left : 10px;
width : 45px;
height : 45px;
}
div.contact-telephone p {
margin-top : 15px;
margin-left : 2px;
}
div.contact-telephone a {
padding : 0 5px 0 70px;
font-size : 21px;
font-weight : bold;
}
div.gravure-laser img {
height : auto;
width : 60%;
margin : 20px 0 20px 2%;
}
div.dialogue, div.reflexion, div.developpement, div.realisation {
top : 130px;
left : 50%;
width : 100px;
height : 100px;
}
div.dialogue {
left : 10.5%;
}
div.reflexion {
left : 30.5%;
}
div.developpement {
left : 50.5%;
}
div.realisation {
left : 72.5%;
}
div.dialogue img, div.reflexion img, div.developpement img, div.realisation img {
width : 50%;
height : 50%;
padding : 25px 30px 30px 25px;
}
div.dialogue p, div.reflexion p, div.developpement p, div.realisation p {
font-size : 14px;
}
div.dialogue img:hover + div {
margin-left : -40px;
}
div.reflexion img:hover + div {
margin-left : -155px;
}
div.developpement img:hover + div {
margin-left : -275px;
}
div.realisation img:hover + div {
margin-left : -415px;
}
div.contact, div.localisation, div.mentions, div.liens {
margin-left : 55px;
}
div.contact, div.localisation, div.mentions {
margin-left : 35px;
}
div.liens {
height : 140px;
margin-left : 5px;
}
}
@media screen and (max-width: 1200px) and (min-width: 1100px) {
div#block-centre section.presentation-af-creartech-accueil {
margin-left : 4%;
margin-right : 5%;
width : 39%;
margin-top : 3%;
}
div.tag-nuage-mot-clef {
width : 36%;
padding-bottom : 7%;
}
}
@media screen and (max-width: 1099px) and (min-width: 800px) {
div#block-centre section.presentation-af-creartech-accueil {
margin-left : 4%;
margin-right : 5%;
width : 38%;
margin-top : 3%;
}
div.tag-nuage-mot-clef {
width : 36%;
padding-bottom : 5%;
}
}
@media screen and (max-width: 799px) and (min-width: 431px) {
div.materiel-imprimante-3d-fdm, div.materiel-imprimante-3d-sla, div#block-centre section.presentation-af-creartech-accueil {
margin-left : 2.5%;
margin-right : auto;
width : 87%;
}
div.gravure-laser, div.detail, div.detail-usinage-conventionnel {
margin-left : 3.2%;
margin-top : 3%;
height : 680px;
}
div.gravure-laser img {
width : 50%;
height : auto;
margin-left : 4%;
margin-bottom : 15px;
}

div#block-centre .titre-af-creartech-accueil-materiel h2 {
margin-top: 30px;
}
}

@media screen and (max-width: 799px) and (min-width: 531px) {

div#block-centre .titre-af-creartech-accueil-materiel h2 {
margin-top: 20px;
}

div#block-haut img.icones-titre {
width : 35%;
}
div#block-haut img.logo-creartech {
width : 55%;
margin-left : 20%;
}
div.fleche-page {
right : 20px;
bottom : 25px;
}
div.reseau-sociaux-creartech, div.contact-mail {
right : 5px;
}
div.reseau-sociaux-creartech {
top : 150px;
width : 40px;
height : 90px;
}
div.contact-mail {
top : 80px;
width : 45px;
height : 45px;
}
div.reseau-sociaux-creartech img {
width : 35px;
height : 35px;
background-color : white;
border : #f2f2f2 solid 1px;
border-radius : 8%;
box-shadow : 3px 4px 8px -4px #111;
}
div.contact-mail img {
width : 100%;
height : 40px;
padding-top : 5px;
background-color : white;
border : #f2f2f2 solid 1px;
border-radius : 6%;
box-shadow : 3px 4px 8px -4px #111;
}
div.contact-telephone {
height : 40px;
top : 350px;
width : 220px;
left : 250px;
position : absolute;
}
div.contact-telephone:hover {
right : 150px;
}
div.contact-telephone img {
margin-left : 10px;
width : 38px;
height : 38px;
}
div.contact-telephone p {
margin-top : 8px;
margin-left : 5px;
}
div.contact-telephone a {
padding : 0 5px 0 50px;
font-size : 19px;
font-weight : bold;
}
div#block-bas{
margin-left: 4%;
}
div.detail-coin-des-geek {
min-height : 600px;
width : 92%;
clear: right;
padding-right: 15px;
}

}
@media screen and (max-width: 530px) {
div#block-haut img.icones-titre {
width : 50%;
margin-top : 15px;
margin-left : 15px;
}
div#block-haut img.logo-creartech {
width : 70%;
margin-left : 15%;
margin-top : 90px;
}
div.nav-haut-crea {
top : 195px;
}
div.nav-haut-crea a {
padding : 9px 11px;
font-size : 11px;
}
div#block-centre section.presentation-af-creartech-accueil {
margin-left : 4%;
margin-right : 4%;
width : 80%;
}
p {
font-size : 10px;
}
div.tag-nuage-mot-clef {
width : 80%;
margin-left : 8%;
padding-bottom : 5%;
min-height : 150px;
padding-top : 9%;
}
div.tag-nuage-mot-clef .tag-nuage-mot-clef-texte-creation {
float : left;
font-size : 5.7vw;
margin-top : 1%;
}
div.tag-nuage-mot-clef .tag-nuage-mot-clef-texte-realisation {
font-size : 5.7vw;
margin-top : 23%;
margin-left : 8%;
}
div.tag-nuage-mot-clef .tag-nuage-mot-clef-texte-fabrication {
font-size : 5.7vw;
margin-top : 7%;
margin-left : 11%;
}
div.tag-nuage-mot-clef .tag-nuage-mot-clef-texte-conception {
font-size : 4.6vw;
margin-top : 4%;
margin-left : 6%;
}
div.tag-nuage-mot-clef .tag-nuage-mot-clef-texte-prototype {
font-size : 4.6vw;
margin-top : 2%;
margin-left : 5%;
}
div.tag-nuage-mot-clef .tag-nuage-mot-clef-texte-gravure-laser {
font-size : 4.1vw;
margin-top : 25%;
margin-left : 40%;
}
div.tag-nuage-mot-clef .tag-nuage-mot-clef-texte-impression-3d {
font-size : 4.1vw;
margin-top : 52%;
margin-left : 60%;
}
div.tag-nuage-mot-clef .tag-nuage-mot-clef-texte-usinage {
font-size : 4.1vw;
margin-top : 2%;
margin-left : 20%;
}
div.materiel-imprimante-3d-fdm, div.materiel-imprimante-3d-sla {
width : 82%;
}
div.gravure-laser, div.detail, div.detail-usinage-conventionnel {
height : 530px;
}
div.fleche-page {
right : -5px;
height : 40px;
width : 40px;
bottom : 280px;
float : right;
position : relative;
visibility : visible;
}
div.fleche-page2 {
right : -5px;
height : 40px;
width : 40px;
bottom : 280px;
float : right;
position : relative;
visibility : visible;
display : block;
}
div.fleche-page img {
height : 100%;
width : 100%;
}
div.gravure-laser, div.detail, div.detail-usinage-conventionnel {
width : 96%;
}

div.gravure-laser {
margin-top: 25px;
}

div.gravure-laser img {
width : 50%;
height : auto;
margin-left : 4%;
margin-bottom : 15px;
}

div.reseau-sociaux-creartech {
top : 295px;
right : 10px;
width : 40px;
height : 90px;
position : absolute;
z-index : 18;
}
div.contact-mail {
top : 250px;
right : 10px;
width : 45px;
height : 45px;
position : absolute;
z-index : 18;
border : #f2f2f2 solid 1px;
border-radius : 6%;
box-shadow : 3px 4px 8px -4px #111;
}
div.reseau-sociaux-creartech img {
width : 35px;
height : 35px;
background-color : white;
border : #f2f2f2 solid 1px;
border-radius : 6%;
box-shadow : 3px 4px 8px -4px #111;
}
div.contact-mail img {
width : 100%;
height : 40px;
background-color : white;
padding-top : 5px;
}
div.contact-telephone {
height : 40px;
border-bottom : 1px solid #fff;
top : 320px;
width : 220px;
left : 100px;
}
div.contact-telephone img {
margin-left : 10px;
width : 38px;
height : 32px;
}
div.contact-telephone p {
margin-top : 8px;
margin-left : 5px;
}
div.contact-telephone a {
padding : 0 5px 0 50px;
font-size : 19px;
font-weight : bold;
}
div.dialogue, div.reflexion, div.developpement, div.realisation {
top : 130px;
left : 50%;
width : 60px;
height : 60px;
}
div.dialogue {
left : 2.5%;
}
div.reflexion {
left : 27%;
}
div.developpement {
left : 51%;
}
div.realisation {
left : 75.5%;
}
div.dialogue img, div.reflexion img, div.developpement img, div.realisation img {
width : 65%;
height : 65%;
padding : 12px 20px 30px 9px;
}
div.dialogue p, div.reflexion p, div.developpement p, div.realisation p {
font-size : 12px;
}
div.dialogue img:hover + div {
margin-left : 0;
}
div.reflexion img:hover + div {
margin-left : -70px;
}
div.developpement img:hover + div {
margin-left : -135px;
}
div.realisation img:hover + div {
margin-left : -200px;
}


div#block-centre .titre-af-creartech-accueil-materiel {
height: 85px;
}
/*
div#block-centre .titre-af-creartech-accueil-materiel h2 {
font-size: 18px;
margin-top: 10px;
}
*/

div.dialogue-texte, div.reflexion-texte, div.developpement-texte, div.realisation-texte {
margin-top : 25px;
width : 260px;
height : 260px;
}
div.contact, div.localisation, div.mentions {
margin-left : 35px;
}
div.liens {
height : 140px;
margin-left : 5px;
}
div.liens a.liens-bas-page-principale {
font-size : 12px;
}
div.detail-coin-des-geek {
min-height : 600px;
width : 92%;
}
div.detail-coin-des-geek h4 {
font-size : 14px;
}
div.detail-coin-des-geek p {
width : 85%;
}
div.detail-coin-des-geek dd {
margin-left : 5px;
}
div.detail-coin-des-geek dt {
margin-left : 0;
}
div.detail-coin-des-geek dl {
font-size : 14px;
}
div.message-responsabilite {
margin-left : 5%;
height : 200px;
width : 85%;
}
div.message-responsabilite h3 {
font-size : 15px;
margin-top : 25px;
margin-left : 25px;
width : 85%;
}
div.titre-tuto-coin-des-geek {
margin-top : 60px;
margin-left : 3%;
}
div.titre-tuto-coin-des-geek h2 {
margin-top : 0;
margin-left : 20px;
font-size : 20px;
width : 85%;
}
div.ressources-credits-liens h2 {
font-size : 16px;
}
div.ressources-credits-liens h3 {
font-size : 15px;
}
div.ressources-credits-liens h4 {
font-size : 12px;
}
div.ressources-credits-liens a {
font-size : 11px;
}
div.ressources-credits-liens p {
font-size : 13px;
}

div.copy-af-creartech {
margin-bottom : 10px;
margin-right : 30px;
}


div.copy-af-creartech a {
font-size: 12px;
}

div.copy-af-creartech {
margin-bottom : 10px;
margin-right : 30px;
}

div#block-bas{
margin-left: 5%;
}


}
@media screen and (max-width: 390px) and (min-width: 371px) {
div.tag-nuage-mot-clef {
min-height : 125px;
}
div.contact-telephone {
top : 320px;
left : 60px;
}
}
@media screen and (max-width: 370px) {
div.nav-haut-crea {
top : 185px;
}

div.tag-nuage-mot-clef {
min-height : 130px;
}
div.contact-telephone {
top : 320px;
left : 40px;
}
div.nav-haut-crea a {
padding : 9px 9px;
font-size : 12px;
}
div.fleche-page {
height : 36px;
width : 36px;
float : right;
bottom : 280px;
position : relative;
visibility : visible;
right : -5px;
}
div.detail-usinage-conventionnel {
height : 540px;
}
div.gravure-laser{
height : 440px;
}

div.detail{
height : 340px;
}


}
@media screen and (max-width: 360px) {
div.nav-haut-crea a {
padding : 9px 6px;
font-size : 12px;
}
div.fleche-page {
display : block;
right : -5px;
height : 36px;
width : 36px;
float : right;
bottom : 280px;
position : relative;
visibility : visible;
}
}
@media screen and (max-width: 384px) {
div.contact-telephone {
top : 320px;
left : 60px;
}
div.dialogue-texte, div.reflexion-texte, div.developpement-texte, div.realisation-texte {
visibility : visible;
width : 240px;
height : 200px;
position : relative;
float : left;
margin-left : -60px;
}
div.dialogue, div.reflexion, div.developpement, div.realisation {
position : absolute;
float : left;
left : 80px;
display : block;
width : 100px;
height : 100px;
text-align : center;
background-color : #d6e2e2;
border : #f2f2f2 solid 1px;
border-radius : 50%;
box-shadow : 3px 4px 8px -4px #111;
transition : none 0.5s;
}
div.dialogue {
top : 130px;
bottom : 20px;
}
div.reflexion {
top : 530px;
bottom : 20px;
}
div.developpement {
top : 920px;
bottom : 20px;
}
div.realisation {
top : 1320px;
bottom : 20px;
}
div.block-centre-crea-projet {
width : 93%;
height : 1850px;
float : left;
position : relative;
left : 7%;
top : 20px;
z-index : 10;
clear : both;
margin-bottom: 20px;
padding-bottom: 30px;
z-index : 10;
clear : both;
background : url(../images/logo-af-creartech-gris-nb-2.png) 80% 50% no-repeat;
background-size: 60%;
background-position: center bottom;
background-color: #e7eaea;
border-radius: 10px;
}
div.dialogue img, div.reflexion img, div.developpement img, div.realisation img {
width : 70%;
height : 70%;
padding : 15px 30px 10px 15px;
}
div.dialogue img:hover + div, div.reflexion img:hover + div, div.developpement img:hover + div, div.realisation img:hover + div {
margin-left : -60px;
}
}
@media screen and (max-width: 530px) and (min-width: 385px) {
div.dialogue-texte, div.reflexion-texte, div.developpement-texte, div.realisation-texte {
visibility : visible;
width : 280px;
height : 200px;
position : relative;
float : left;
margin-left : -80px;
}
div.dialogue, div.reflexion, div.developpement, div.realisation {
position : absolute;
float : left;
left : 90px;
display : block;
width : 100px;
height : 100px;
text-align : center;
background-color : #d6e2e2;
border : #f2f2f2 solid 1px;
border-radius : 50%;
box-shadow : 3px 4px 8px -4px #111;
transition : none 0.5s;
}
div.dialogue, div.reflexion, div.developpement, div.realisation {
bottom : 20px;
}
div.dialogue {
top : 130px;
}
div.reflexion {
top : 530px;
}
div.developpement {
top : 920px;
}
div.realisation {
top : 1320px;
}
div.block-centre-crea-projet {
width : 82%;
height : 1850px;
float : left;
position : relative;
left : 12%;
top : 20px;
margin-bottom: 20px;
padding-bottom: 30px;
z-index : 10;
clear : both;
background : url(../images/logo-af-creartech-gris-nb-2.png) 80% 50% no-repeat;
background-size: 60%;
background-position: center bottom 50px;
background-color: #e7eaea;
border-radius: 10px;
}
div.dialogue img, div.reflexion img, div.developpement img, div.realisation img {
width : 70%;
height : 70%;
padding : 15px 30px 10px 15px;
}
div.dialogue img:hover + div {
margin-left : -80px;
}
div.reflexion img:hover + div {
margin-left : -80px;
}
div.developpement img:hover + div {
margin-left : -80px;
}
div.realisation img:hover + div {
margin-left : -80px;
}
}
@media screen and (max-width: 820px) and (min-width: 600px) {
div.dialogue-texte, div.reflexion-texte, div.developpement-texte, div.realisation-texte {
visibility : visible;
width : 440%;
height : 200px;
position : relative;
float : left;
margin-left : -80px;
}
div.dialogue, div.reflexion, div.developpement, div.realisation {
position : absolute;
float : left;
left : 190px;
display : block;
width : 100px;
height : 100px;
text-align : center;
background-color : #d6e2e2;
border : #f2f2f2 solid 1px;
border-radius : 50%;
box-shadow : 3px 4px 8px -4px #111;
transition : none 0.5s;
}
div.dialogue, div.reflexion, div.developpement, div.realisation {
bottom : 20px;
}
div.dialogue {
top : 130px;
}
div.reflexion {
top : 530px;
}
div.developpement {
top : 920px;
}
div.realisation {
top : 1320px;
}
div.dialogue-texte, div.reflexion-texte, div.developpement-texte, div.realisation-texte {
margin-left : -180px;
}
div.block-centre-crea-projet {
width : 66%;
height : 1850px;
float : left;
position : relative;
left : 18%;
top : 20px;
margin-bottom: 20px;
z-index : 10;
clear : both;
background : url(../images/logo-af-creartech-gris-nb-2.png) 80% 30% no-repeat;
background-size: 60%;
background-position: center bottom;
background-color: #e7eaea;
border-radius: 10px;
}


div.dialogue img, div.reflexion img, div.developpement img, div.realisation img {
width : 70%;
height : 70%;
padding : 15px 30px 10px 15px;
}
div.dialogue img:hover + div {
margin-left : -180px;
}
div.reflexion img:hover + div {
margin-left : -180px;
}
div.developpement img:hover + div {
margin-left : -180px;
}
div.realisation img:hover + div {
margin-left : -180px;
}
}
@media screen and (max-width: 599px) and (min-width: 531px) {
div.dialogue-texte, div.reflexion-texte, div.developpement-texte, div.realisation-texte {
visibility : visible;
width : 440%;
height : 200px;
position : relative;
float : left;
margin-left : -100px;
}
div.dialogue, div.reflexion, div.developpement, div.realisation {
position : absolute;
float : left;
left : 180px;
display : block;
width : 100px;
height : 100px;
text-align : center;
}
div.dialogue, div.reflexion, div.developpement, div.realisation {
bottom : 20px;
}
div.dialogue {
top : 130px;
}
div.reflexion {
top : 530px;
}
div.developpement {
top : 920px;
}
div.realisation {
top : 1320px;
}
div.dialogue-texte, div.reflexion-texte, div.developpement-texte, div.realisation-texte {
margin-left : -170px;
}
div.block-centre-crea-projet {
width : 94%;
height : 1850px;
float : left;
position : relative;
left : 3%;
top : 20px;
}
div.dialogue img, div.reflexion img, div.developpement img, div.realisation img {
width : 70%;
height : 70%;
padding : 15px 30px 10px 15px;
}
div.dialogue img:hover + div, div.reflexion img:hover + div, div.developpement img:hover + div, div.realisation img:hover + div {
margin-left : -170px;
}
}
@media screen and (min-width: 1201px) {
div.dialogue, div.reflexion, div.developpement, div.realisation {
position : absolute;
float : left;
top : 130px;
left : 50%;
display : block;
width : 150px;
height : 150px;
text-align : center;
background-color : #d6e2e2;
border : #f2f2f2 solid 1px;
border-radius : 50%;
box-shadow : 3px 4px 8px -4px #111;
transition : all 0.5s;
clear : both;
}
div.dialogue {
left : 12.5%;
}
div.reflexion {
left : 30.5%;
}
div.developpement {
left : 50.5%;
}
div.realisation {
left : 72.5%;
}
div.dialogue img:hover + div {
margin-left : -50px;
}
div.reflexion img:hover + div {
margin-left : -250px;
}
div.developpement img:hover + div {
margin-left : -250px;
}
div.realisation img:hover + div {
margin-left : -350px;
}
div.dialogue img, div.reflexion img, div.developpement img, div.realisation img {
width : 55%;
height : 55%;
padding : 30px 20px 30px 15px;
}
}
@media screen and (max-width: 1500px) and (min-width: 1000px) {
div.liens {
height : 170px;
}
div.contact {
clear : left;
}
}
@media screen and (max-width: 1500px) and (min-width: 1200px) {
div#block-centre .presentation-af-creartech-accueil {
width : 43%;
margin-top : 4%;
}
div.tag-nuage-mot-clef {
width : 37%;
padding-bottom : 7%;
}
}
@media screen and (max-width: 1200px) {
div.detail-coin-des-geek .detail-coin-des-geek-image-exemple img {
width : 80%;
margin : 10px 6.5%;
}
}



/*
@media screen and (max-width: 1500px) {
div#block-centre .titre-af-creartech-accueil {
width : 90%;
margin-left : 5%;
}
}*/
.reseau-sociaux-creartech, .contact-mail {
position : fixed;
float : right;
width : 55px;
height : 90px;
}
.reseau-sociaux-creartech {
top : 400px;
right : 15px;
}
.contact-mail {
top : 270px;
right : 20px;
}
.reseau-sociaux-creartech img {
width : 45px;
height : 45px;
margin-top : 15px;
}
.contact-mail img {
width : 45px;
height : 45px;
}
.contact-telephone {
position : absolute;
background-color : whitesmoke;
height : 72px;
color : darkorange;
transition : 1s ease;
border-bottom : 3px solid #fff;
z-index : 20;
top : 310px;
width : 250px;
left : 75%;
box-shadow : 0 7px 21px rgb(28, 85, 89, 0.46), 0 14px 32px rgb(68, 48, 22, 0.08);
border-radius : 10px;
}
.contact-telephone img {
margin-left : 10px;
margin-top : 5px;
float : left;
}
.contact-telephone p {
margin-top : 20px;
margin-left : 5px;
position : absolute;
float : right;
}
.contact-telephone a {
padding : 5px 5px 0 70px;
font-size : 26px;
font-weight : bold;
}
.nav-haut-crea {
margin-top : 12px;
float : left;
position : absolute;
z-index : 10;
top : 270px;
font-size : 16px;
width : 700px;
}
.nav-haut-crea a {
float : left;
color : #408191;
text-align : center;
padding : 12px 14px;
text-decoration : none;
width : auto;
font-weight : bold;
border-bottom-color : whitesmoke;
border-bottom-width : 2px;
border-bottom-style : solid;
}
.nav-haut-crea a:hover {
color : #d07e44;
animation-duration : 0.7s;
animation-name : bord-anim;
}
.nav-haut-crea a::after {
border-bottom-color : blanchedalmond;
border-bottom-width : 2px;
border-bottom-style : solid;
}
.nav-haut-crea a::before {
border-bottom-color : whitesmoke;
border-bottom-width : 2px;
border-bottom-style : solid;
}
/*}*/
@keyframes bord-anim {
from {
border-bottom-color : #008080;
border-bottom-width : 2px;
border-bottom-style : solid;
}
to {
border-bottom-color : wheat;
border-bottom-width : 2px;
border-bottom-style : solid;
}
}
.nav-haut-crea a.active {
color : #38586f;
border-bottom-color : #b1a59d;
border-bottom-width : 2px;
border-bottom-style : solid;
font-weight : bold;
}
#block-haut {
float : left;
width : 100%;
height : 400px;
background : url(../images/bg-fond-haut.jpg) 0 0 no-repeat;
}
#block-haut img.icones-titre {
width : 20%;
margin-top : 30px;
margin-left : 30px;
position : absolute;
}
#block-haut img.logo-creartech {
width : 35%;
position : relative;
margin-top : 130px;
margin-left : 30%;
}
#block-centre, #block-centre-mail {
float : left;
width : 90%;
height : auto;
margin : 20px auto 20px auto;
}
#block-centre .presentation-af-creartech-accueil, #block-centre .presentation-desciption-af-creartech-accueil, #block-centre .coin-des-geek {
width : 80%;
background-color : white;
padding : 20px;
margin : 30px auto 30px 5%;
}
#block-centre .presentation-af-creartech-accueil, #block-centre .presentation-desciption-af-creartech-accueil, #block-centre .coin-des-geek {
background-color : white;
}
#block-centre .presentation-af-creartech-accueil, #block-centre .titre-af-creartech-accueil, #block-centre .titre-af-creartech-accueil-materiel {
box-shadow : 0 7px 21px rgb(28, 85, 89, 0.46), 0 14px 32px rgb(68, 48, 22, 0.08);
border-radius : 10px;
}
#block-centre .titre-af-creartech-accueil, #block-centre .titre-af-creartech-accueil-materiel {
float : left;
position : relative;
margin-left : 6%;
margin-top : 30px;
width : 90%;
clear : right;
}


#block-centre .titre-af-creartech-accueil-materiel {
height: 65px;
}

#block-centre .titre-af-creartech-accueil h1, #block-centre .titre-af-creartech-accueil-materiel h2 {
margin-left : 20px;
}

#block-centre .titre-af-creartech-accueil-materiel h2 {
font-size: 22px;
margin-top: 20px;
}

#block-centre .presentation-desciption-af-creartech-accueil {
float : left;
position : relative;
margin-left : 8%;
background-color : #e8e0db;
border-right : 2px solid brown;
border-bottom : 2px solid brown;
border-radius : 6px;
}
#block-centre .coin-des-geek {
width : 80%;
}
#block-centre .presentation-af-creartech-accueil {
width : 50%;
float : left;
margin-top : 4%;
}

#block-centre .lien-inter-page{
margin-left: 40%;
font-weight: bold;
color: darkorange;
}

#block-centre .lien-inter-page:hover{
color: darkred;
}


#block-centre-mail {
background : url(../images/carte/carte-marseille-11e-fond-gris.jpg) 0 0 no-repeat;
background-size : cover;
}
.titre-tuto-coin-des-geek {
width : 90%;
position : relative;
margin-top : 50px;
margin-left : 70px;
bottom : 30px;
background : whitesmoke;
float : left;
height : auto;
box-shadow : 0 7px 21px rgb(28, 85, 89, 0.46), 0 14px 32px rgb(68, 48, 22, 0.08);
border-radius : 10px;
padding-top : 20px;
}
.titre-tuto-coin-des-geek h2 {
font-size : 23px;
margin-left : 70px;
}
.detail-coin-des-geek {
width : 44%;
height : auto;
position : relative;
float : left;
background-color : white;
min-height : 500px;
margin : 3%;
}
.detail-coin-des-geek h2, .detail-coin-des-geek h3, .detail-coin-des-geek h4, .detail-coin-des-geek p {
width : 94%;
}


.detail-coin-des-geek h2 {
margin : 25px 0 10px 25px;
}
.detail-coin-des-geek h3 {
margin : 10px 0 10px 25px;
font-size : 18px;
}
.detail-coin-des-geek h4 {
margin : 5px 0 5px 25px;
font-size : 16px;
}
.detail-coin-des-geek p {
margin-left : 25px;
font-size : 14px;

}
.detail-coin-des-geek-important {
font-weight : bold;
font-size : 13px;
}
.detail-coin-des-geek dl, .detail-coin-des-geek dt {
width : 95%;
margin-top : 10px;
margin-bottom : 15px;
margin-left : 25px;
}
.detail-coin-des-geek dd {
width : 90%;
margin-top : 5px;
margin-bottom : 5px;
height : auto;
}
.detail-coin-des-geek-image-exemple ul {
display : inline;
float : left;
}
.detail-coin-des-geek-image-exemple li {
list-style-type : none;
float : left;
}
.detail-coin-des-geek-image-exemple img {
width : 55%;
margin : 15px 17.5% 15px 17.5%;
height : auto;
}
.message-responsabilite {
margin-left : 10%;
width : 70%;
background-color : red;
float : left;
box-shadow : 0 7px 21px rgb(28, 85, 89, 0.46), 0 14px 32px rgb(68, 48, 22, 0.08);
border-radius : 10px;
}
.message-responsabilite h3 {
font-size : 18px;
color : white;
width : 94%;
}
.materiel-imprimante-3d-fdm, .materiel-imprimante-3d-sla {
width : 42%;
float : left;
margin : 1.5%;
padding : 20px;
}
.materiel-imprimante-3d-fdm {
background-color : white;
}
.materiel-imprimante-3d-sla {
background-color : #dac095;
}
.image-zoom-1, .image-zoom-2 {
width : 50%;
height : 50%;
margin-right : 8%;
margin-top : 2%;
z-index : 12;
display : none;
box-shadow : 0 7px 21px rgb(28, 85, 89, 0.46), 0 14px 32px rgb(68, 48, 22, 0.08);
border-radius : 10px;
display : none;
}
.techniques-usinage, .gravure-laser, .detail, .detail-usinage-conventionnel, .af-creartech-a-propos, .detail-a-propos, .liste-a-propos {
margin : 1.5%;
float : left;
background : white;
padding-top : 30px;
}
.techniques-usinage, .af-creartech-a-propos, .detail-a-propos, .liste-a-propos {
width : 96%;
}
.gravure-laser, .detail, .detail-usinage-conventionnel {
width : 44%;
height : 450px;
}
.techniques-usinage h1, .gravure-laser h1, .detail-usinage-conventionnel h1, .detail h1, .techniques-usinage h2, .gravure-laser h2, .detail-usinage-conventionnel h2, .detail h2, h2, h3, p {
margin : 0.5% 1.5% 0.5% 1.5%;
}
.ressources-credits-liens {
background-color : white;
box-shadow : 0 7px 21px rgb(28, 85, 89, 0.46), 0 14px 32px rgb(68, 48, 22, 0.08);
border-radius : 10px;
padding : 10px;
margin : 20px;
width : 85%;
}
.af-creartech-a-propos h1, .ressources-credits-liens h1 {
margin-left : 25px;
}
.af-creartech-a-propos, .detail-a-propos {
padding: 15px;

border-radius : 10px;
}
.ressources-credits-liens h4 {
margin-left : 40px;
}
.ressources-credits-liens a {
margin-left : 70px;
}
.ressources-credits-liens a:link {
color : orange;
font-weight : bold;
}
.ressources-credits-liens a:hover {
color : grey;
}
.techniques-usinage p, .gravure-laser p, .detail p, .detail-usinage-conventionnel p {
padding : 2%;
}

.gravure-laser p{
clear: left;
}

.gravure-laser {
position: relative;
height : 35%;
width : 35%;
margin-right : 8%;
margin-top : 2%;
display : none;
box-shadow : 0 7px 21px rgb(28, 85, 89, 0.46), 0 14px 32px rgb(68, 48, 22, 0.08);
border-radius : 10px;
display : none;
}
.exemple-liste ul {
width : 400px;
height : auto;
background-color : grey;
z-index : 5;
float : left;
position : relative;
}
.exemple-liste ul li:nth-child(5n) {
clear : left;
}
.exemple-liste li {
width : 200px;
height : 400px;
background-color : whitesmoke;
display : block;
float : left;
margin : 10px;
z-index : 11;
position : relative;
box-shadow : 0 7px 21px rgb(28, 85, 89, 0.46), 0 14px 32px rgb(68, 48, 22, 0.08);
border-radius : 10px;
}
.exemple-liste a {
width : 85%;
display : block;
margin-left : 4%;
}
.exemple-liste img {
width : 90%;
height : auto;
background-color : white;
display : block;
margin-left : 4%;
margin-bottom : 15px;
margin : 15px 4%;
border-radius : 10px;
}
.block-centre-crea-projet {
width : 96%;
height : 600px;
float : left;
position : relative;
left : 1.5%;
top : 20px;
margin-bottom: 20px;
z-index : 10;
clear : both;
background : url(../images/logo-af-creartech-gris-nb-2.png) 50% 80%  no-repeat;
background-color: #e7eaea;
background-size: 40%;
border-radius : 10px;

}
.block-centre-crea-projet h2, h3 {
margin-top: 15px;
}

.block-centre-crea-projet h2, h4 {
margin-left: 20px;
}



.block-centre-crea-projet h2, h4 {
margin-left: 15px;
margin-top: 
}



.dialogue, .reflexion, .developpement, .realisation {
position : absolute;
float : left;
top : 130px;
left : 50%;
display : block;
width : 150px;
height : 150px;
text-align : center;
background-color : #d6e2e2;
border : #f2f2f2 solid 1px;
border-radius : 50%;
box-shadow : 3px 4px 8px -4px #111;
transition : all 0.5s;
clear : both;
}
.dialogue {
left : 12.5%;
}
.reflexion {
left : 30.5%;
}
.developpement {
left : 50.5%;
}
.realisation {
left : 72.5%;
}
.dialogue img, .reflexion img, .developpement img, .realisation img {
width : 100%;
height : 100%;
padding : 35px 30px 30px 25px;
}
.dialogue h3, .reflexion h3, .developpement h3, .realisation h3 {
margin-top : 50px;
margin-bottom : 10px;
}
.dialogue-texte, .reflexion-texte, .developpement-texte, .realisation-texte {
visibility : hidden;
background-size : cover;
background-color : white;
width : 550px;
height : 200px;
border-top : 10px solid wheat;
box-shadow : 2px 2px 4px -2px #111;
margin-top : 50px;
border-radius : 6px;
}
.dialogue img:hover + div, .reflexion img:hover + div, .developpement img:hover + div, .realisation img:hover + div {
visibility : visible;
transition : all 0.5s;
background-color : burlywood;
}
.dialogue img:hover + div {
margin-left : -50px;
}
.reflexion img:hover + div {
margin-left : -250px;
}
.developpement img:hover + div {
margin-left : -250px;
}
.realisation img:hover + div {
margin-left : -350px;
}
.dialogue:hover, .reflexion:hover, .developpement:hover, .realisation:hover {
border : orange 2px;
background-color : #b1bcbc;
box-shadow : 3px 3px 5px -3px #111;
transition : all 1s;
}
#block-bas {
float : left;
width : 80%;
min-height : 200px;
background-color : #a79a8b;
margin-left : 10%;
border-radius : 6px;
border-bottom : 3px solid brown;
border-right : 3px solid brown;
bottom : 30px;
}
.contact, .localisation, .mentions, .liens, .block-bas {
float : left;
}
.contact, .localisation, .mentions, .liens {
margin : 15px 15px 15px 5%;
}
.localisation, .contact {
width : 250px;
}
.liens, .mentions {
width : 170px;
}
.liens a, .contact a, .localisation a, .mentions a {
text-align : left;
font-weight : bold;
margin : 10px;
float : left;
clear : both;
text-decoration : none;
font-size : 14px;
color : white;
}
.liens a:hover, .contact a:hover, .localisation a:hover, .mentions a:hover {
font-weight : normal;
color : black;
}
.liens a.active, .contact a.active, .localisation a.active, .mentions a.active {
color : wheat;
font-weight : bold;
}
.contact dl, .localisation dl {
color : whitesmoke;
font-size : 14px;
}
.contact dt, .localisation dt {
margin-bottom : 10px;
font-weight : bold;
}
.contact dd, .localisation dd {
margin-top : 10px;
}
.tag-nuage-mot-clef {
position : relative;
float : left;
width : 32%;
height : 100%;
background : url(../images/tag-nuage-mot-clef.png) 0 0 no-repeat;
background-size : 100%;
margin : 3%;
box-shadow : 2px 2px 4px -2px #111;
border-radius : 10px;
padding : 2% 2% 3% 2%;
}
.tag-nuage-mot-clef-texte-creation {
float : left;
font-size : 2.8vw;
margin-top : 3%;
margin-left : 3%;
color : red;
z-index : 13;
width : 100%;
position : relative;
}
.tag-nuage-mot-clef-texte-realisation {
font-size : 2.8vw;
margin-top : 23%;
margin-left : 8%;
color : wheat;
z-index : 15;
position : relative;
}
.tag-nuage-mot-clef-texte-fabrication {
font-size : 2.8vw;
margin-top : 7%;
margin-left : 11%;
color : greenyellow;
z-index : 15;
position : relative;
}
.tag-nuage-mot-clef-texte-conception {
font-size : 1.5vw;
margin-top : 4%;
margin-left : 6%;
color : red;
z-index : 15;
position : relative;
}
.tag-nuage-mot-clef-texte-prototype {
font-size : 1.5vw;
margin-top : 4%;
margin-left : 5%;
color : red;
z-index : 15;
position : relative;
}
.tag-nuage-mot-clef-texte-gravure-laser {
font-size : 1.3vw;
margin-top : 25%;
margin-left : 40%;
color : red;
z-index : 12;
position : relative;
}
.tag-nuage-mot-clef-texte-impression-3d {
font-size : 1.3vw;
margin-top : 52%;
margin-left : 60%;
color : cadetblue;
z-index : 52;
position : relative;
}
.tag-nuage-mot-clef-texte-usinage {
font-size : 1.8vw;
margin-top : 6%;
margin-left : 15%;
color : green;
z-index : 56;
position : relative;
}
.fleche-page, .fleche-page2 {
position : fixed;
bottom : 50px;
right : 70px;
height : 50px;
width : 50px;
float : right;
z-index : 99;
}
.fleche-page {
display : none;
}
.fleche-page2 {
display : block;
}

.copy-af-creartech{
margin-bottom : 20px;
float : right;
margin-right : 70px;
clear: both;
/*z-index : 99;*/
}

.copy-af-creartech a{
font-weight: bold;
color: whitesmoke;;
}