/* latin-ext */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Josefin Sans Regular'), local('JosefinSans-Regular'), url(Qw3aZQNVED7rKGKxtqIqX5EUA3x4RHw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Josefin Sans Regular'), local('JosefinSans-Regular'), url(Qw3aZQNVED7rKGKxtqIqX5EUDXx4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Barlow Semi Condensed Regular'), local('BarlowSemiCondensed-Regular'), url(wlpvgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXdoqqOEo.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Barlow Semi Condensed Regular'), local('BarlowSemiCondensed-Regular'), url(wlpvgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXeIqq.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(MaterialIcons-Regular.woff2) format('woff2'),
    url(MaterialIcons-Regular.woff) format('woff'),
    url(MaterialIcons-Regular.ttf) format('truetype');
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input { -webkit-user-select:text;font-size: 16px;}
input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
*
{
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none; /* Propriété standard */
    /*enleve le bleu au clic*/
    outline: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body
{
    font-family: 'Josefin Sans', sans-serif;
    padding: 0;
    margin: 0;
    background-image: url(../img/pw_maze_black_@2X.png);
    background-color: #282336;
}
#loader.loaded
{
    opacity: 0;
    overflow: auto;
}
.button:hover, .button, aside.active, aside, aside #numberToAddContainer.active, aside #numberToAddContainer, .scrolled #logo, #logo, nav, .scrolled nav, .scrolled #cartButton, #cartButton, #popupConfirmCart, #popupConfirmCart.active, .inputUnderline.active, nav, nav.active
{
    transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
}
#secretContent, #secretContent.active, #login input, #login input.active, #login i, #login i.active, form.active .inputUnderline, form .inputUnderline,#lost, #lost.active, .inputContainer i, .inputContainer i, .hidden #loginUtils, .hidden#login form, .hidden #companyName, #loginUtils, #login form, #companyName, #orderStatusContent, #orderStatusContent.active
{
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
}
#logoSecret i, #logoSecret i.active, #logoSecret span, #logoSecret span.active,#loader.loaded, #loader
{
    transition: 0.75s ease;
    -webkit-transition: 0.75s ease;
    -moz-transition: 0.75s ease;
    -o-transition: 0.75s ease;
    -ms-transition: 0.75s ease;
}
nav {
    position: fixed;
    width: 100%;
    height: 75px;
    left: 0;
    top: 0;
    background-color: #282336;
    z-index: 1;
    opacity: 0;
}
nav.active
{
    opacity: 1;
}
.scrolled nav
{
    height: 45px;
}
#logo
{
    width: 150px;
    display: block;
    margin: 0 auto;
}
.scrolled #logo
{
    position: relative;
    top:6px; 
    width:75px;
}
#cartButton
{
    width: 40px;
    position: absolute;
    top: 20px;
    right: 25px;
    cursor: pointer;
}
.scrolled #cartButton
{
    width: 30px;
    top: 9px;
}
#menuContainer
{
    margin-top: 75px;
    padding-top: 75px;
    color: white;
    text-align: center;
    min-height: 500px;
    padding-bottom: 0px;
}
#pizzaContainer
{
    max-width: 100%;
    width: 1024px;
    margin:0 auto;
}
h1
{
    text-transform: uppercase;
    font-size: 2.5em;
    font-weight: 400;
    margin-top: 40px;
}
.separator {
    position: relative;
    display: block;
    width: 100%;
    margin: 40px 0;
    z-index: 0;
    height: 15px;
}
.separator:before {
    position: absolute;
    bottom: 4px;
    left: 120px;
    right: 0;
    content: '';
    width: 60px;
    height: 1px;
    background: #f9b943;
    margin: 0 auto;
}
.separator span.deg1 {
    position: absolute;
    bottom: 2px;
    left: -30px;
    right: 0;
    width: 6px;
    height: 6px;
    content: '';
    background: #f9b943;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    margin: 0 auto;
}
.separator span.deg2 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 10px;
    height: 10px;
    content: '';
    background: #f9b943;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    margin: 0 auto;
}
.separator span.deg3 {
    position: absolute;
    bottom: 2px;
    left: 30px;
    right: 0;
    width: 6px;
    height: 6px;
    content: '';
    background: #f9b943;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    margin: 0 auto;
}
.separator:after {
    position: absolute;
    bottom: 4px;
    left: -120px;
    right: 0;
    content: '';
    width: 50px;
    height: 1px;
    background: #f9b943;
    margin: 0 auto;
}
.blocPizza
{
    display: inline-block;
    margin-bottom: 40;
    width:100%;
}
.imgPizza
{
    width: 130px;
    height: 130px;
    display: inline-block;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-bottom: 10px;
}
.blocPizza .content
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.price
{
    color: #f9b943;
}
.price::after
{
    content:",00 €";
}
#resumen .price
{
    color: #c70000;
}
.quantity::before
{
    content:" x";
}
@media (min-width:350px){
    .blocPizza .content
    {
        margin-left: 20px;
    } 
    .blocPizza .content
    {
        margin-left: 20px;
        width: calc(100% - 170px);
        max-width: calc(100% - 170px);
        text-align: left;
    }
    .price
    {
        float: right;
        margin-top: 0;
    }
}
@media (min-width:700px){
    .blocPizza
    {
        width: calc(50% - 13px);
        box-sizing: border-box;
    }
    .blocPizza:nth-of-type(2n)
    {
        /* margin-left: 20px */
    }
}
.blocPizza .content h2
{
    font-weight: normal;
    margin-bottom: 0;
    margin-top: 0;
    /* text-align: center; */
    display: inline-block;
}
.blocPizza .content p.description
{
    color: #999;
    margin-top: 5px;
}
p.button
{
    color: white;
    padding: 15px;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 2px;
    background-color: #c70000;
    text-transform: uppercase;
}
.centered
{
    text-align: center;
}
.verticalSeparator
{
    width:1px;
    background-color: grey;
    height: 100%;
    display: inline-block;
}
#containerCart
{
    background-image: url(../img/pw_maze_white_@2X.png);
    padding: 40px 5px;
    text-align: center;
    color:#282336
}
#resumen table
{
    display: inline-block;
    color: #282336
}
#resumen table td
{
    padding: 0 20px;
    /* vertical-align: baseline; */
    line-height: 35px;
    position: relative;
    /* width: 120px; */
    padding-left: 0;
}
#resumen table td.nameContainer
{
    width: 120px;
}
#resumen table td.price
{
    width: 100px;
    text-align: right;
}
#resumen table td.delete
{
    padding: 0;
}
.total
{
    font-size: 1.2em;
    font-weight: 600;
    border-top: 20px solid;
}
#resumen h2
{
    margin: 40px 0;
}
#resumen .button
{
    margin-top: 40px;
}
.button:hover{
    background-color: #282336;
}
footer
{
    padding: 20px;
    background-color: #282336;
    color: white;
    text-align: center;
}
footer h3
{
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 0;
    color: #c70000;
}
footer p
{
    margin-top: 5px;
}
.pizzaResumen
{
    display: none;
}
.pizzaResumen.active
{
    display: inherit;
}
.pizzaResumen .material-icons
{
    position: relative;
    top: -2px;
    cursor: pointer;
}
#total
{
    font-weight:600;
    text-transform: uppercase;
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 0;
}
#total .price
{
    float: none;
    margin-left: 20px;
}
aside
{
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    /* background-color: rgba(255,255,255,0.6); */
    height: 100%;
    z-index: 2;
    display: none;
}
aside.active
{
    display: block;
}
aside #numberToAddContainer
{
    max-width: 100%;
    text-align: center;
    color:black;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 40px;
    max-width: 95%;
    width: 400px;
    background-color: rgba(255,255,255,0.9);
    box-sizing: border-box;
    opacity: 0;
    transform:translateX(-50%) translateY(-50%);
}
aside #numberToAddContainer.active
{
    opacity: 1
}
input#numberToAdd
{
    width: 50px;
}
#less,#more
{
    display: inline-block;
    cursor: pointer;
    width: 45px;
    height: 45px;
    vertical-align: middle;
    line-height: 45px;
    font-size: 1.7em;
    font-weight: normal;
    background-color: #282336;
    color: white;
    margin-top: 0;
}
input
{
    border-radius: 0;
    outline: none;
    text-align: center;
    padding: 5px;
    border: none;
    line-height: 45px;
    height: 45px;
    padding: 0;
    border: none;
    position: relative;
    top: -12px;
    margin-bottom: 20px;
}
p.submit.button
{
    cursor: pointer;
    display: block;
}
#question
{
    font-size: 1.2em;
}
#numberToAddContainer i
{
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}
#nonEmptyCart
{
    display: none;
}
#popupConfirmCart
{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
}
#popupConfirmCart.active
{
    transform: scale(1);
}
#scooterContainer
{
    background-color: #282336;
    width: 400px;
    max-width: 95%;
    margin: 0 auto;
    padding: 40px;
    box-sizing: border-box;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 5px;
    transform: translateX(-50%) translateY(-50%);
}
#scooterContainer .close
{
    position: absolute;
    right: 20px;
    top: 20px;
    font-size:1.5em;
    color: white;
    cursor: pointer;
}
#scooterContainer h2
{
    color: white;
    font-size:1.2em;
}
#scooterContainer img
{
    width:100px;
}
#secretContent
{
    font-family: 'Barlow Semi Condensed';
    color: white;
    background-color: #131418;
    width: 100%;
    min-height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    opacity: 0;
    overflow-y: auto;
}
#secretContent.active
{
    opacity: 1;
}
#login
{
    text-align: center;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translateX(-50%) translateY(-30%);
}
#logoSecret
{
    text-align: center;
    font-size: 2em;
    text-transform: uppercase;
    margin:0;
}
#logoSecret i
{
    font-size: 2.8em;
    opacity: 0;
    position: relative;
    top: -40px;
}
#logoSecret i.active
{
    opacity: 1;
    top: 0;
}
#logoSecret span
{
    opacity: 0;
    position: relative;
    left: -40px;
}
#logoSecret span.active
{
    opacity: 1;
    left: 0;
}
#secretContent .button
{
    background-color: #00e676;
    color: #131418;
    margin-top: 30px;
}
#secretContent .button:hover
{
    background-color:#00cc69;
    color: #131418;
}
#login form
{
    width: 250px;
    box-sizing: border-box;
    margin: 0 auto;
}
#login input
{
    display: inline-block;
    margin: 0;
    background-color: transparent;
    width: 250px;
    box-sizing: border-box;
    padding-left: 30px;
    position: relative;
    top: 0;
    left: 0;
    color:white;
    font-size: 1em;
    text-align: left;
    opacity: 0;
}
#login form.active input
{
    opacity: 1;
}
#login form i
{
    color:#00e676; 
    position: absolute;
    font-size: 1.3em;
    top: 12px;
    opacity: 0;
}
#login form.active i
{
    opacity: 1;
}
#login form i.id
{
    top: 44px;
}
.inputContainer
{
    position: relative;
    /* width: 250px; */
}
.inputUnderline
{
    margin-bottom: 20px;
    display: block;
    width: 0;
    height: 1px;
    background-color:#00e676;
}
#login form .inputContainer.error i
{
    color:#c4001d;
}
.inputUnderline.error
{
    background-color: #c4001d;
}
form.active .inputUnderline
{
    width: 250px;
}
input#id
{
    margin-top: 30px;
}
input#pass, .inputUnderline.bis
{
    margin-bottom: 0;
}
#login .button
{
    position: relative;
    top: 40px;
    opacity: 0;
}
#login .button.active
{
    opacity: 1;
    top: 0;
}
#lost
{
    display: block;
    cursor: pointer;
    opacity: 0;
    position: relative;
    top: -10px;
}
#lost.active
{
    opacity: 1;
    top: 0;
    color: #ddd;
}
#error
{
    display: none;
    color: #c4001d;
}
#hint
{
    font-weight: 500;
    font-size: 1.1em;
}
.animate{
  animation-name: shake;
  animation-duration: 0.75s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
}
@keyframes shake {
  10% {left: 0}
  20% {left: -3px}
  30% {left: 5px}
  40% {left: -8px}
  50% {left: 8px}
  60% {left: -5px}
  70% {left: 3px}
  80% {left: 0}
  90% {left: -3px}
  100% {left: 0}
}
#loginUtils, #login form, #companyName.active
{
    position: relative;
    left: 0;
    opacity: 1;
}
.hidden #loginUtils, .hidden#login form, .hidden span#companyName.active
{
    left:100%;
    opacity: 0
}
#orderStatusContent
{
    position: relative;
    left: -100%;
    opacity: 0;
    display: none;
}
#orderStatusContent.active
{
    left: 0;
    opacity: 1;
}
#login.next
{
    width: 350px;
    max-width: 95%;
    margin: 0 auto;
    text-align: center;
    transform: translateX(-50%);
    top: 0;
}
.green
{
    color:#00e676; 
}