/* CASCADE STYLE SHEET */
/* GLOBALS */
*{ margin: 0; padding: 0; box-sizing: border-box; }
@font-face { font-family: 'Poppins Bold'; src: url("/fonts/Poppins/Poppins-Bold.ttf"); }
@font-face { font-family: 'Poppins Regular'; src: url("/fonts/Poppins/Poppins-Regular.ttf"); }
/* TITLES */
h1,h2,h3,h4,.h1,.h2,.h3,.h4,a,p,span{ font-family: 'Poppins Regular'; text-align:center; }
h1,.h1{ font-size: 36px; margin-bottom:36px; }
h2,.h2{ font-size: 24px; margin-bottom:24px; }
h3,.h3{ font-size: 18px; margin-bottom:18px; }
.w30{ width:30%; }
a{ width:auto; color:#a3a; }
article>p{ width:70vw; margin:auto; text-align:justify; }
figure{ width:auto; }
figure img{ border-radius:7px; }
/* nav a figure img{ max-width:80px; width:80px; height:auto; } */
header{ background-color: white; display:flex; flex-direction: column; justify-content:space-around; align-items: center; padding: 50px; width: 100%; }
nav ul,footer{ background-color: white; display:flex; flex-direction: row; justify-content:space-around; align-items: center; padding: 50px; width: 100%; }
footer{ padding: 20px; }
nav ul{ padding: 20px; list-style-type: none; }
/* header a figure img{ max-width:80px; width:80px; height:auto; } */
/* header a figure.logo img{ max-width:120px; min-width:120px; height:auto; } */
a.h0{ color:#000; text-decoration: none; }
a.selected{ color:green; }
span.h0{ color:#000; text-decoration: none; }
body,main{ background-color: #ddd; width:100%;}
article{ padding: 100px; }
article.entreprise,article.register,article.new-project,article.bleu{ background-color: #aae; }
article.association,article.password,article.rose{ background-color: #eaa }
article.artiste,article.projets-valides,article.jaune{ background-color: rgb(244, 202, 87);; }
article.new-project{ text-align: center; }
div.projet,.flex-column{ display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; width: 100%; justify-content: space-around; }
form{ display:flex; flex-direction: column;	justify-content:space-around; align-items: center; flex-wrap: nowrap; padding: 50px; width: 100%; }
input,button,.button,label { padding:10px; margin:10px; width:80vw; border-radius:5px;; }
article>form>button { padding:30px; }
label{ text-align: center; margin-bottom:0; padding-bottom:0; }
button,.button { cursor:pointer; margin-top:20px; }
img.login,img.logo{ height:150px; border-radius: 20px; width:337.5px; }
iframe{ border-radius: 25px; }
iframe.html{ width:350px; height:622px; border-radius: 5px; }
iframe.mobile{ width:400px; height:750px; }
div.flash-success,div.flash-warning,div.flash-error{ padding:15px; margin:10px;background-color: white; }
div.flash-success{ color:rgb(125, 204, 6); }
div.flash-warning{ color:rgb(205, 148, 3); }
div.flash-error{ color:red; }
div#demande_de_devis{ display:flex; flex-direction: column; align-items: center; justify-content: space-between; }
textarea{ padding:10px; margin:10px; width:80vw; height:250px; }
.flex-row,div.flex-row{ display: flex; flex-direction: row; align-items: center; width: 100%; justify-content: space-around; }
@media screen and ( width < 1200px )
{
    img.logo,img.login{ height:100px; border-radius: 12px; margin-top: -20px; margin-bottom: 10px; width:225px; }
    img.hidden-if-small-width{ display: none; }
    header{ padding: 5px; padding-bottom: 0px; flex-direction: column; }
    nav ul,footer{ padding: 10px; }
    article{ padding: 30px 10px 30px; }
    form{ padding: 30px; }
    input,textarea{width:90vw;}
    div.flex-row{ flex-wrap: wrap; }
    header>h1,header>h2{ visibility: hidden; max-height: 0px;}
}
@media screen and ( width < 400px )
{
	h1{	font-size: 18px; }
	h2{ font-size: 14px; }
	p{ font-size: 9px; margin: 5% 1% 0; width: 98%; }
    nav ul,footer{ flex-direction: column; }
    form{ padding: 20px; }
    iframe.mobile{ width:300px; height:533px; }
    img.logo,img.login{ margin-bottom: 50px;}
    img.logo{ margin-top: 30px;}
}

@media screen and ( width > 600px )
{
    article>form>button{ font-size: large; }
}

@media screen and ( width > 800px )
{
    article>form>button{ font-size: x-large; }
}

p.mentions-legales{ margin:auto; min-width:fit-content; width:fit-content;margin-bottom: 50px }