@font-face {
    font-family: "Fredericka the Great";
    src: local("Fredericka the Great"),url("https://fabricand.art/fonts/fredericka-the-great.regular.ttf");
}


html {
    height: 100%;
    background: url("../images/coinGauche.png") left top no-repeat, url('../images/nonUtil.png') right bottom no-repeat, #343434;
}

body{
    width: 100%;
}
h1 {
    font-family: "Fredericka the Great";
    color:#fff;
}

h2 {
    font-family: "Fredericka the Great";
    color:#eaa722;
    clear: both;
}

h3 {
    font-family: "Fredericka the Great";
    color:#159ae8;
}

.result h3{
    text-align: left;
    font-family: "Fredericka the Great";
    color:#fff;
}

.creations {
    background: #707070;
    padding:0.6%;
    border: 4px solid #2b2b2b;
    border-radius: 10px;
    font-size: 1.2rem;
}

a {
    text-decoration: none;
    color: #eaa722;
    font-weight: bold;
}

.flotgauche{
    float:left;
    border: 1px solid #2b2b2b;
    border-radius: 5px;
    margin: 10px;
}

.flotdroit{
    float:right;
    border: 1px solid #2b2b2b;
    border-radius: 5px;
    margin: 10px;
}

#contenu {
  padding: 1em;
}

#contenu::after {
  content: "";
  display: block;
  clear: both;
}

.centre {
    text-align: center;
}

ul {
    list-style: none;
}

.vrailiste {
    list-style: square outside;
    color : #159ae8;
}
.vrailiste span{
  color : #000;
}

/*------------------------------------------page contact------------------------------------------------*/
#content span, #content a {
    color: #343434;
    font-weight: bold;
}

.phone span::before {
    content: "benoit.";
    }
.phone span::after {
    content: "d.art";
}
.phone img, #content img {
    width: 3em;
    height: auto;
    vertical-align: middle;
    margin-right: 0.4em;
}

#formulaire fieldset {color:#159ae8;}

#formulaire fieldset input {
    display: inline-block;
    min-width: 60%;
}

#formulaire textarea[name=message]{
    min-width: 60%;
    min-height: 12em;
    vertical-align:top;
}

#formulaire fieldset .remarque { display:none; }

#button {
    position: relative;
    float: right;
    top: 1em;
    padding-bottom:2em;
}


#button input {
    font-family: "Fredericka the Great";
    font-size:1.5em;
    padding: 0.2em;
    color: #fff;
    background-color:#343434;
    border-radius:16px;
    border: 2px solid #fff;
    display: block;
    }
#button input:hover{
    color:#159ae8;
}
/*------------------------------------------------ MENU -----------------------------------------*
 *--------------- STYLES -------------*/

#petitCont {
    position: sticky;
    font-family: "Fredericka the Great";
    top: 0;
    left: 0;
    z-index: 1;
}

#petitCont .toggler {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    cursor: pointer;
    width: 60px;
    height: 76px;
    opacity: 0;
    transform: scale(1);
    transition: all 0.4s ease;
    -moz-transition: all 0.5s ease; /* Firefox */
    -webkit-transition: all 0.5s ease; /* Safari et Chrome */
    -o-transition: all 0.5s ease; /* Opera */
}

#petitCont #miniblasonOurs {
    background: #2b2b2b;
    border: 6px solid #707070;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 1;
    width: 50px;
    height: 66px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1);
    transition: all 0.4s ease;
    -moz-transition: all 0.5s ease; /* Firefox */
    -webkit-transition: all 0.5s ease; /* Safari et Chrome */
    -o-transition: all 0.5s ease; /* Opera */
}

#petitCont #miniblasonOurs img {
    width: 50px;
}

#petitCont .menu {
    position: fixed;
    top: 140px;
    left: 100px;
    width: 100%;
    height: 100%;
    visibility: hidden;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

#petitCont .menu > div {
    position: relative;
    top: -51.5%;
    left:-50%;
    background: rgba(85,85,85, 0.85);
    border-radius: 50%;
    width: 600px;
    height: 600px;
    display: flex;
    flex: none;
    align-items: end;
    justify-content: end;
    transform: scale(0);
    transition: all 0.4s ease;
}

#petitCont .menu > div > div {
    position: relative;
    top: -70px;
    left:-33px;
    text-align: left;
    max-width: 90vw;
    max-height: 100vh;
    opacity: 0;
    transition: opacity 0.4s ease 0.4s;
}

#petitCont .menu > div > div > ul > li {
    list-style: none;
    color: #fff;
    font-size: 1.2rem;
    padding: 1rem;
}

#petitCont .menu > div > div > ul > li > a {
    color: inherit;
    text-decoration: none;
    transition: color 0.4s ease;
}

/*--------------------- MENU-------------*
 *------------------ ANIMATION ----------*/

#petitCont .toggler:checked ~ #miniblasonOurs,
#petitCont .toggler:checked ~ #miniblasonOurs > img {
    transform: rotate(360deg);
    transition-duration: 0.75;
}

#petitCont .toggler:checked ~ #miniblasonOurs > img {
    filter:invert(1);
}

#petitCont .toggler:checked ~ .menu {
    visibility: visible;
}

#petitCont .toggler:checked ~ .menu > div {
    transform: scale(1);
    transition-duration: 0.75;
}

#petitCont .toggler:checked ~ .menu > div > div {
    opacity: 1;
    transition:  opacity 0.4s ease 0.4s;
}

#petitCont .toggler:checked ~ .menu > div > div > ul > li > a{
    background: #343434;
    padding: 2px 5px 2px 5px;
    border: 2px solid;
    border-color:#eaa722 #e9441b #e9441b #eaa722;
    border-radius: 10px;
}

#petitCont .toggler:checked ~ .menu > div > div > ul > li > a:hover{
    opacity: 0.7;
    transition:  opacity 0.1s;
}

#formulaire label {
    display: inline-block;
    min-width: 35%;
    color: #343434;
}

/*------------------------------------------------ ELEMENTS RESPONSIVES ---------------------------------------*/

@media only screen and (max-width: 900px) {
#medaillon {
    height : 100px;
    border: none;
    -moz-border-radius : 50%;
    -webkit-border-radius : 50%;
    border-radius : 50%;
    position: absolute;
    margin-left: 75%;
    margin-top: -10%;
}
#petitCont {
    position: fixed;
    top: 10px;
    left:4px;
}
div:nth-of-type(2) {
  margin-top: 120px;
}
#petitCont .menu > div {
    position: relative;
    top: -67.5%;
    left:-48%;
}
#petitCont .menu > div > div > ul > li {
    font-size: 1.3rem;
}

#contenu {
    position: relative;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#content {
    position:relative;
}

#numtel {
    margin-bottom: 1em;
}

#mailPhone {
    position: relative;
    margin-top: 2em;
    }

#formulaire {
    position:relative;
    margin-top: 0em;
}
}

/*-----------------------------------------------------------grands écrans-----------------------------------------------------*/

@media only screen and (min-width:901px) {

#contenu {
    position: relative;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}
.moi3 {
    float:right;
}
.moi3 img {
    margin-top: -50px;
}

#topocrea {
    position: absolute;
    top: 5%;
    left: 10%;
}

#contenucrea {
    position: relative;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

#content {
    overflow:auto;
}

#numtel{
    float:left;
    width:40%;
}

.phone {
    overflow: auto;
    padding-top: 0.3em;
    }

#Crobard {
    display: block;
    margin: auto;
}

#medaillon {
    height : 100px; /* x83px */
    border: none;
    -moz-border-radius : 50%;
    -webkit-border-radius : 50%;
    border-radius : 50%;
    position: absolute;
    margin-left: 75%;
    margin-top: -10%;
}

#ditpouet {
    display: block;
    position: absolute;
    background:#fff;
    color: blue;
    width: 200px;
    height: 50px;
    margin-left: 84%;
    margin-top: -10%;
    opacity: 0;
    font-family: "Fredericka the Great";
    font-size: 2em;
    text-align: center;
    color: #e9441b;
    border-radius: 50%;
    }

#dothepouet {
    position: absolute;
    margin-left: 79.4%;
    margin-top: -2.6%;
}

#dothepouet:active + #ditpouet {
    opacity: 1;
}

#result img {
    -webkit-filter: grayscale(30%) blur(10px);
    filter: grayscale(30%) blur(10px);
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    animation-fill-mode: forwards;
}

#result img:hover {
    -webkit-transform: scale(1.10);
    transform: scale(1.10);
    -webkit-filter: grayscale(0) blur(0);
    filter: grayscale(0) blur(0);
    border: 4px solid #2b2b2b;
    border-radius: 10px;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    animation-fill-mode: forwards;
    z-index: 100;
}

#phot {
    opacity: 0;
    animation: fadeout 0.01s;
    -moz-animation: fadeout 0.01s;
    -webkit-animation: fadeout 0.01s;
    -o-animation: fadeout 0.01s;
    position: absolute;
    width:600px;
    left: 38.8%;
    top: 20%;
    pointer-events:none;
}

img .class1 {
    transform: rotate(10deg);
}

img .class2 {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.class3 {
    -webkit-transform: rotate(32deg);
    transform: rotate(32deg);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.class4 { /* dôme */
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.class5 { /* Rampe lC */
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.class6 {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.class7 {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* sur Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* sur Safari et Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* sur Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-moz-keyframes fadeout { /* sur Firefox */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-webkit-keyframes fadeout { /* sur Safari et Chrome */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-o-keyframes fadeout { /* sur Opera */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

}