@charset "UTF-8";
/* CSS Document */
*{padding:0;margin:0;list-style:none;outline:none;}

.accueil-visuel-presentation-graphiste-montpellier{
width:100%;
max-width: 2000px;
margin-left:auto;
margin-right:auto;
padding:0;
margin-top: 70px;
background-image: url("../charte-graphique-site/visuels-index-v2/Pic-Saint-Loup-Graphiste-Montpellier-Pygmalis.jpg");
background-position: center top;
background-repeat: no-repeat;
}
.accueil-visuel-presentation-polygones-oranges{
background-image: url("../charte-graphique-site/visuels-index-v2/polygones-oranges-haut-droit.png");
background-position: top right;
background-repeat: no-repeat;
height: 500px;
}
.groupe-titre-h1{
position:relative;
height: 500px;
width: 500px;
}
.background-titre-principal{
position:absolute;
top: 370px;
left: 0;
line-height: 0.5;
text-align:left;
letter-spacing: -34px;
font-family: "ITCAvantGardeStdMd", Helvetica, Arial, sans-serif;
font-size: 6rem;
color: #000;
}
.display-none-background-titre {
display:inline;
}
.groupe-titre-h1 h1{
position:absolute;
top: 370px;
right: 220px;
line-height: 0.5;
text-align:right;
letter-spacing: -5px;
font-family: "ITCAvantGardeStdMd", Helvetica, Arial, sans-serif;
font-size: 6rem;
color: #fff;
}
.groupe-titre-h1 .montpellier{
letter-spacing: -1px;
font-size: 2.45rem;
}

.etoile-mer-graphiste-a-montpellier{
position:absolute;
top: 150px;
right: 0;
}
.etoile-mer-graphiste-a-montpellier img{
width:310px;
}

.accueil-presentation-graphiste-montpellier{
width:100%;
padding:0;
}
.accueil-presentation-polygones-gris{
padding:0;
background-image: url("../charte-graphique-site/visuels-index-v2/polygones-gris-gauche.png");
background-position: left bottom;
background-repeat: no-repeat;
padding-top: 50px;
padding-bottom: 50px;
}
.accueil-presentation-polygones-gris h2{
line-height: 1.1;
text-align:center;
letter-spacing: -1px;
font-family: "ITCAvantGardeStdDemi", Helvetica, Arial, sans-serif;
font-size: 3.3rem;
color: #000;
padding-left: 25px;
padding-right: 25px;
}
h2 .h2-noir-fin{
font-family: "ITCAvantGardeStdXLt", Helvetica, Arial, sans-serif;
}
h2 .h2-orange{
font-family: "ITCAvantGardeStdDemi", Helvetica, Arial, sans-serif;
font-size: 2.8rem;
color: #f24a08;
}
h2 .h2-orange-fin{
font-family: "ITCAvantGardeStdXLt", Helvetica, Arial, sans-serif;
}
.accueil-presentation-polygones-gris p{
line-height: 1.3;
text-align:center;
letter-spacing: 0;
font-size: 1.5rem;
color: #555;
max-width: 850px;
margin-left:auto;
margin-right:auto;
padding-left: 25px;
padding-right: 25px;
}
p .p-orange{
font-size: 1.8rem;
font-family: "ITCAvantGardeStdDemi", Helvetica, Arial, sans-serif;
color: #f24a08;
letter-spacing: -0.5px;
}
p .p-orange-projet{
font-size: 2.5rem;
font-family: "ITCAvantGardeStdDemi", Helvetica, Arial, sans-serif;
color: #f24a08;
letter-spacing: -0.5px;
}
p .p-orange-projet2{
font-size: 4.7rem;
line-height: 1.1;
font-family: "ITCAvantGardeStdXLt", Helvetica, Arial, sans-serif;
color: #f24a08;
letter-spacing: 0px;
}



@media (max-width:1490px) {
.accueil-visuel-presentation-graphiste-montpellier{
width:100%;
padding:0;
margin-top: 70px;
background-image: url("../charte-graphique-site/visuels-index-v2/Pic-Saint-Loup-Graphiste-Montpellier-Pygmalis.jpg");
background-position: center top;
background-repeat: no-repeat;
background-size: 1500px 400px;
}
.accueil-visuel-presentation-polygones-oranges{
background-image: url("../charte-graphique-site/visuels-index-v2/polygones-oranges-haut-droit.png");
background-position: top right;
background-repeat: no-repeat;
height: 400px;
background-size: 363px 176px;
}

.background-titre-principal{
width:320px;
position:absolute;
top: 310px;
left: 0;
line-height: 0.5;
text-align:left;
letter-spacing: -28px;
font-family: "ITCAvantGardeStdMd", Helvetica, Arial, sans-serif;
font-size: 5rem;
color: #000;
}
.display-none-background-titre {
display:none;
}
.groupe-titre-h1 h1{
position:absolute;
top: 310px;
right: 175px;
line-height: 0.5;
text-align:right;
letter-spacing: -5px;
font-family: "ITCAvantGardeStdMd", Helvetica, Arial, sans-serif;
font-size: 5rem;
color: #fff;
}
.groupe-titre-h1{
position:relative;
height: 400px;
width: 400px;
}

.groupe-titre-h1 .montpellier{
letter-spacing: -2px;
font-size: 2rem;
}

.etoile-mer-graphiste-a-montpellier{
position:absolute;
top: 130px;
right: 0;
}
.etoile-mer-graphiste-a-montpellier img{
width:248px;
}


.accueil-presentation-graphiste-montpellier{
background: none;
}
}
@media (max-width:1250px) {
.accueil-visuel-presentation-graphiste-montpellier{
width:100%;
padding:0;
margin-top: 70px;
background-image: url("../charte-graphique-site/visuels-index-v2/Pic-Saint-Loup-Graphiste-Montpellier-Pygmalis.jpg");
background-position: 15% top;
background-repeat: no-repeat;
}
.accueil-presentation-polygones-gris{
padding:0;
background-image: url("../charte-graphique-site/visuels-index-v2/polygones-gris-gauche.png");
background-position: left bottom;
background-repeat: no-repeat;
padding-top: 50px;
padding-bottom: 50px;
background-size: 300px;
}


.background-titre-principal{
width:320px;
position:absolute;
top: 310px;
left: 0;
line-height: 0.5;
text-align:left;
letter-spacing: -2.6rem;
font-family: "ITCAvantGardeStdMd", Helvetica, Arial, sans-serif;
font-size: 4.5rem;
color: #000;
}
.display-none-background-titre {
display:inline;
}
.groupe-titre-h1 h1{
position:absolute;
top: 310px;
right: 133px;
line-height: 0.5;
text-align:right;
letter-spacing: -0.4rem;
font-family: "ITCAvantGardeStdMd", Helvetica, Arial, sans-serif;
font-size: 4.5rem;
color: #fff;
}
.groupe-titre-h1{
position:relative;
height: 400px;
width: 348px;
}

.groupe-titre-h1 .montpellier{
letter-spacing: -0.15rem;
font-size: 1.8rem;
}

.etoile-mer-graphiste-a-montpellier{
position:absolute;
top: 178px;
right: 0;
}
.etoile-mer-graphiste-a-montpellier img{
width:186px;
}
}
@media (max-width:1150px) {
.accueil-visuel-presentation-polygones-oranges{
background: none;
}
.accueil-presentation-polygones-gris{
padding:0;
background-image: url("../charte-graphique-site/visuels-index-v2/polygones-gris-gauche.png");
background-position: left bottom;
background-repeat: no-repeat;
padding-top: 50px;
padding-bottom: 50px;
background-size: 250px;
}
}
@media (max-width:750px) {
.accueil-visuel-presentation-graphiste-montpellier{
width:100%;
padding:0;
margin-top: 70px;
background-image: url("../charte-graphique-site/visuels-index-v2/Pic-Saint-Loup-Graphiste-Montpellier-Pygmalis.jpg");
background-position: 70% top;
background-repeat: no-repeat;
}
.accueil-visuel-presentation-polygones-oranges{
background-image: url("../charte-graphique-site/visuels-index-v2/polygones-oranges-haut-droit.png");
background-position: top right;
background-repeat: no-repeat;
height: 400px;
background-size: 363px 176px;
}
.groupe-titre-h1{
position:relative;
height: 400px;
width: 100%;
}
.display-none-background-titre {
display:none;
}
.background-titre-principal{
width:250px;
position:absolute;
top: 308px;
left: 0;
line-height: 0.6;
text-align:left;
letter-spacing: -2.9rem;
font-family: "ITCAvantGardeStdMd", Helvetica, Arial, sans-serif;
font-size: 5rem;
color: #000;
}
.groupe-titre-h1 h1{
position: absolute;
top: 308px;
left: 20px;
line-height: 0.6;
text-align:left;
letter-spacing: -5px;
font-family: "ITCAvantGardeStdMd", Helvetica, Arial, sans-serif;
font-size: 5rem;
color: #fff;
}
.groupe-titre-h1 .montpellier{
letter-spacing: -2px;
font-size: 2rem;
}

.etoile-mer-graphiste-a-montpellier{
position:absolute;
top: 40px;
right: 10%;
}
.etoile-mer-graphiste-a-montpellier img{
width:186px;
}
}
@media (max-width:600px) {
.accueil-visuel-presentation-graphiste-montpellier{
width:100%;
padding:0;
margin-top: 70px;
background-image: url("../charte-graphique-site/visuels-index-v2/Pic-Saint-Loup-Graphiste-Montpellier-Pygmalis.jpg");
background-position: 60% top;
background-repeat: no-repeat;
}
.accueil-visuel-presentation-polygones-oranges{
background: none;
}
}
@media (max-width:460px) {
.accueil-visuel-presentation-graphiste-montpellier{
width:100%;
padding:0;
margin-top: 70px;
background-image: url("../charte-graphique-site/visuels-index-v2/Pic-Saint-Loup-Graphiste-Montpellier-Pygmalis.jpg");
background-position: 58% top;
background-repeat: no-repeat;
}
}
@media (max-width:360px) {
.accueil-visuel-presentation-graphiste-montpellier{
width:100%;
padding:0;
margin-top: 70px;
background-image: url("../charte-graphique-site/visuels-index-v2/Pic-Saint-Loup-Graphiste-Montpellier-Pygmalis.jpg");
background-position: 55% top;
background-repeat: no-repeat;
}
.etoile-mer-graphiste-a-montpellier{
position:absolute;
top: 28px;
right: 10px;
}
.etoile-mer-graphiste-a-montpellier img{
width:186px;
}
}