@charset "UTF-8";
/*TYPI info */
/*FAW icons*/
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
/* Document
   ========================================================================== */


:root {
  --event-color: #ffffba;
  --biom-color: #8d9898;
  --event-bgrd:#2d2d2d;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: 0;
}

 @font-face {
    font-family: "Darby Sans bold";
    src:    url('../fonts/DarbySans/DarbySans-Bold-Web.woff2') format('woff2'),
            url('../fonts/DarbySans/DarbySans-Bold-Web.woff') format('woff');
}


 @font-face {
    font-family: "Darby Sans";
    src:    url('../fonts/DarbySans/DarbySans-Regular-Web.woff2') format('woff2'),
            url('../fonts/DarbySans/DarbySans-Regular-Web.woff') format('woff');
}


.first_title{

   /* Font options */
font-family: 'Darby Sans ', sans-serif;

font-size:40px;

font-weight:400;
font-size: 4rem;
line-height: 4rem;
color: #070505;

}


.confirmation{

  font-size: 1.5rem;

}


html {
  font-family: 'Darby Sans', sans-serif;
  /* 1 */
  line-height: 1.15;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 3 */ 
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  font-family: 'Darby Sans', sans-serif;
  margin: 0;
  background-color: red
}

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block; 
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0;
  padding: 0.67em 0; }

h2{
  margin: 0;
  padding: 0.67em 0; 

}

p{
  margin: 0;
  padding: 0.67em 0; 
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block; }

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px; }

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */ }

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0; }

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit; }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic; }

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000; }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block; }

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none; }

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden; }

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */ }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto; }

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block; }

/**
 * Add the correct display in IE.
 */
template {
  display: none; }

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none; }

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before, section:before, .logo:before, .logo__img:before, .footer:before,
.cf:after,
section:after,
.logo:after,
.logo__img:after,
.footer:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }

.cf:after, section:after, .logo:after, .logo__img:after, .footer:after {
  clear: both; }

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf, section, .logo, .logo__img, .footer {
  *zoom: 1; }

/**
 * Set up a decent box model on the root element
 */
html {
  box-sizing: border-box; }

/**
 * Make all elements from the DOM inherit from the parent box-sizing
 * Since `*` has a specificity of 0, it does not override the `html` value
 * making all elements inheriting from the root box-sizing value
 * See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
*, *::before, *::after {
  box-sizing: inherit; }

/*Avoid iOs Zoom on iOS*/
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] { font-size: 16px; }
/*Sites styles*/
html,body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
body{
     background: #FFF;
}
html {
    overflow: hidden;
}

body {
    overflow: auto;
}

html{
    pointer-events: auto;
}

body{

    letter-spacing: 0em;
    line-height: 1.6em;
    font-style: normal;
    font-size: 16px;
    letter-spacing: .02em;
    line-height: 28px;
    text-transform: none;
    color: #303030;


}

header,
main,
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
}


a{
    color: #FFF;
    text-decoration: underline;
}

a:hover{
    text-decoration: wavy underline;
}

.under_title{
  font-size: 30px;
}

.title {
 
    padding: 0;
    margin:  0.2em 0 0 0;

    font-family: 'Open Sans', sans-serif;
    font-size: 1.8rem;
    font-style: bold;


    letter-spacing: 0px;
    line-height: 1em;
    text-transform: uppercase;
    text-align: center;
    text-rendering: optimizeLegibility;
    color:#FFF;

}

footer {

    padding: 0 0 2em 0;
    background-color: var(--event-bgrd);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

.address {
    display: block;
    box-sizing: border-box;
    padding: 3em 4em 2em 4em;
    color:  #FFF;
    text-align: center;
}
.contact{}


.form__label {
    display: block;
    text-align: left;
    color: #FFF;
    font-weight: 400;
    font-size: 1.4rem;
}

.form__field {
    position: relative;
    margin: 0 0 2em;
    margin-left: 0px;
    padding: 0 1em;
}

.field {
    margin: 0 0 .5em 0;
}

.form__input {
    border: 1px solid #e99292;
    width: 100%;
    padding: 12px;
    margin: 6px 4px;
    border: 1px solid #ccc;
    background: #fafafa;
    color: #000;
    font-size: 12px;
    line-height: normal;
    box-sizing: border-box;
    border-radius: 2px;
}

.error-message {

    display: inline-block;
    position: relative;
    margin: 1em 0 0.5em 0;
    padding-bottom: 3px;
    padding-left: 25px;
    padding-right: 15px;
    padding-top: 5px;

    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgb(204, 59, 59);
    background-image: url("../img/6Y4GO4PM/icon_close.png");
    background-origin: padding-box;
    background-position: 9px 50%;
    background-repeat: no-repeat;
    background-size: auto auto;
    border-radius: 2px;
    color: rgb(255, 255, 255);
    display: inline-block;
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.316667px;
    line-height: 23px;

    pointer-events: auto;
    text-transform: none;
}

.error-message::before{
     margin-top: -1px;

    border-color: inherit;

    border-width: 1px 0 0 1px;
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    top: 0;
    left: 50%;
    position: absolute;
    content: '';
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 2;
    width: .6666em;
    height: .6666em;
    -webkit-transition: background .1s ease;
    transition: background .1s ease;
    background-color: rgb(204, 59, 59);
    background-image: none;

    border: none;
}


/*Steps elements*/

.step{
    border: none;
    /*stacking fieldsets above each other*/
    /* position: relative; */
}

/*Hide all except first fieldset*/
.step:not(:first-of-type) {
    display: none;
}

/*Utilities*/
.is-hidden{
    display: none;
}

.is-visible{
    display: block;
}

.informations {
    margin: 0;
    padding: 4em;
    color: var(--event-color);
    text-transform: none;
    text-align: center;
    font-size: 1rempx;
}


.intro__more{}
.informations__when,



.informations__contact {
    margin: 1em 0 0 0;
    font-weight: 2;
}

.informations__where
 {
  margin: 0;
    padding: 1em 0 0 0;
    /*! font-size: 50%; */

    font-weight: 2;

    font-size: 13px;
}


.title_part{
  margin: 0;
  padding-top: 2em;
  color: var(--);

  letter-spacing: 0em;

  font-style: normal;
  letter-spacing: 1px;
  text-transform: none;
  font-size: 33px;

}
.button{

    display: block;
    margin: 2% auto;

    background-color: transparent;
    color: ##e94633;
    border-radius: 3px;
    border: 2px solid ##e94633;
    -webkit-transition: 0.1s background-color linear, 0.1s color linear;

    -moz-transition: 0.1s background-color linear, 0.1s color linear;
    -o-transition: 0.1s background-color linear, 0.1s color linear;
    transition: 0.1s background-color linear, 0.1s color linear;
    padding: 1em 2em;
    cursor: pointer;

}

/* .button--blocked{

    color: #c3c3c3;
    border: 2px solid rgb(195,195,195);
    opacity: 0.5;

} */

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}


.button:hover{

    background-color: ##319f4b;
    color: #fff;
}





/*Radio button style
From
https://codepen.io/Zerk/pen/mWNXVy
*/

.list {
  flex: 0 0 20rem;
}

.list__item {
  position: relative;
}
.list__item:hover > .form__label--radio {
  color: #f40a28;
}
.list__item:hover > .form__label--radio::before {
  border: 0.2rem solid #f40a28;
  margin-right: 2rem;
}

.form__input--radio {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
.form__input--radio:checked + .form__label--radio {
  color: #f40a28;
}
.form__input--radio:checked + .form__label--radio::before {
  margin-right: 2rem;
  border: 0.2rem solid #f40a28;
  background: #e99292;
}

.form__label--radio {
  display: flex;
  align-items: center;
  padding: 0.2rem 0;
  color: #000;
  font-size: 1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.35s linear;
}

.form__label--radio::before {
  display: inline-block;
  content: "";
  height: 1.125rem;
  width: 1.125rem;
  margin-right: 0.625rem;
  border: 0.2rem solid #e99292;
  border-radius: 50%;
  transition: all 0.25s linear;
}


fieldset{
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 764px){

    .ui[class*="very padded"].segment {
        padding: 1em;
    }

    .ui.container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

a.link.link--info {
    color: #000;
}


*::selection {
  background-color: transparent;
  color: #000;
}

input::selection {
  background-color: #000000;
  color: #fff;
}



.wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
  background-color: var(--event-bgrd);
  color: var(--event-color);
}

.formulaire {
    padding: 1em;
}

.note {
    top: 0;
    left: 0;
    width: 2rem;
    display: block;
    position: fixed;
    z-index: 999;
    pointer-events: none;
}

@keyframes fly {
    0% {

        transform: translate(-200%,110vh) rotateZ(0deg);opacity: 1;
    }

    12.5% {
        transform: translate(120vw,-120%) rotateZ(20deg);
    }

    25% {
        transform: translate(-200%,50vh) scale(1.75) rotateZ(-20deg);
    }

    37.5% {
        transform: translate(-200%,-120%) rotateZ(-40deg);opacity: .5;
    }

    50% {
        transform: translate(100vw,50vh) rotateZ(0deg);
    }

    62.5% {
        transform: translate(20vw,100vh) rotateZ(20deg);
    }
    75% {
        transform: translate(200%,100vh) rotateZ(20deg);opacity: .25;
    }
    87.5% {
        transform: translate(50vw,-200%) scale(1.75) rotateZ(20deg);
    }

    100% {
        transform: translate(-200%,110vh) rotateZ(0deg);opacity: 1;
    }
} 

@keyframes fly2 {
    0% {

        transform: translate(-200%,110vh) rotateZ(0deg);opacity: 1;
    }

    12.5% {
        transform: translate(100vw,-120%) rotateZ(40deg);
    }

    25% {
        transform: translate(-210%,30vh) scale(1.5) rotateZ(-10deg);
    }

    37.5% {
        transform: translate(-200%,-120%) rotateZ(-40deg);opacity: .5;
    }

    50% {
        transform: translate(100vw,40vh) rotateZ(10deg);
    }

    62.5% {
        transform: translate(20vw,100vh) rotateZ(20deg);
    }
    75% {
        transform: translate(200%,100vh) rotateZ(20deg);opacity: .25;
    }
    87.5% {
        transform: translate(50vw,-200%) scale(1.75) rotateZ(20deg);
    }

    100% {
        transform: translate(-200%,110vh) rotateZ(0deg);opacity: 1;
    }
} 

@keyframes fly3 {
    0% {

        transform: translate(-200%,110vh) rotateZ(0deg);opacity: 1;
    }

    12.5% {
        transform: translate(120vw,-120%) rotateZ(20deg);
    }

    25% {
        transform: translate(-200%,50vh) scale(1.75) rotateZ(-20deg);
    }

    37.5% {
        transform: translate(-200%,-120%) rotateZ(-40deg);opacity: .5;
    }

    50% {
        transform: translate(100vw,50vh) rotateZ(0deg);
    }

    62.5% {
        transform: translate(20vw,100vh) rotateZ(20deg);
    }
    75% {
        transform: translate(200%,100vh) rotateZ(20deg);opacity: .25;
    }
    87.5% {
        transform: translate(50vw,-200%) scale(1.75) rotateZ(20deg);
    }

    100% {
        transform: translate(-200%,110vh) rotateZ(0deg);opacity: 1;
    }
} 

.visuel {
    height: 50vh;
    background-image: url("../img/micro.png"), url("../img/guitariste.png"),  url("../img/lumiere.png"), url("../img/fond.png");
    background-repeat:  no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 22%, contain, cover, contain;
    background-position: bottom right 30%, center center, center center, center center;
    position: relative;
}

/*        footer{
            height: 220px;
        }
*/

/*info block*/
.head{
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
    color:var(--event-color);
}
.info{
    display: flex;
    flex-direction: row;
}
.info--event {
    flex: 50%;
}
.info--lineup{
    flex: 50%;
}
.biom{
    color: var(--biom-color);
}
.bands {
    list-style: none;
}
.title{
    text-align: center;
}
.date,
.lieu {
    text-align: right;
}


/*.micro{
      background-image: url("../img/micro.png");
      background-size: 10%;
      background-position: bottom right 40%;
}
*/
@media all and (min-width: 600px) {

    .title{
        font-size: 3rem;
    }

    .visuel{
        background-size: 10%, contain, cover, contain;
        background-position: bottom right 40%, center center, center center, center center;
    }
}

@media all and (min-width: 800px) {

    .title{
        font-size: 4rem;
    }

    fieldset {
        padding:0 3rem;
    }
}

@media all and (min-width: 1200px) {
    .content {
        display: flex;
        flex-direction: row;
    }
    .visuel{
        height: 100vh;
        flex: 1 ;

         background-size: 22%, contain, cover, contain;
        background-position: bottom right 30%, center center, center center, center center;
    }

    .formulaire{
         flex: 1 ;
    }

    fieldset {
        padding:0 4rem;
    }

}

/*button*/

.button {
    color: var(--event-color);
}

.strong-tilt-move-shake:hover {
  animation: tilt-n-move-shaking 0.15s infinite;
}


@keyframes tilt-n-move-shaking {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, 5px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0eg); }
  75% { transform: translate(-5px, 5px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}        




.info{
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

/*Adaptations*/
.biom {
font-weight: bold;
}
p {
padding: 0.67em 0;
}

.date, .lieu {
line-height: 1.2;
}


.date, .lieu {
  line-height: 1.2;
  font-size: 1.5rem;
  padding: 0;
}

.note1{
    animation: fly 25s linear infinite;

}


.note2{
       animation: fly2 20s ease-in-out infinite;
 
}

.note3{
       animation: fly3 15s linear infinite;
 
}

.info--lineup {
padding: 0 0 0 2rem;
}
.bands {
line-height: 1.2;
}

#submit:focus {
   animation-duration: 400ms;
   animation-name: blink;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   color:#dd265a;
}


@keyframes blink {
   from {
      opacity: 1;
   }
   to {
      opacity: 0.5;
   }
 }