/* ================================================================
    1.GENERAL CSS
*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  color: var(--neutral-shade-3);
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-box-sizing:border-box;
  box-sizing:border-box;
}
body {
  background-color: var(--neutral-tint-5);
  scroll-behavior: smooth;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: auto;
  overflow-x: hidden;
  display: block;
  max-width: 2560px;
}
img {
	max-width: 100%;
}
section {
    position: relative;
}
main {
    margin-top: -148px;
}
/*---Scrollbar---*/
body::-webkit-scrollbar {
  width: 0.8em;
}
body::-webkit-scrollbar-track {
  border-radius: 100%;
}
body::-webkit-scrollbar-thumb {
  background-color: var(--neutral-tint-2);
  border-radius: 25px;
}
body::-webkit-scrollbar-thumb:hover {
  background-color: var(--neutral-tint-1);
}

/*---mouse selection---*/
::selection, ::-moz-selection {
  background: var(--neutral-tint-4);
  color: var(--neutral-base);
  text-shadow: none;
}

/* ================================
    2.GENERAL CSS - Responsive
*/
@media (max-width: 2560px) {
  section, footer {
    padding: 56px var(--desktop-margin);
    position: relative;
  }
}
@media (max-width: 1024px) {
  section, footer {
    padding: 48px var(--tablet-margin);
  }
}
@media (max-width: 480px) {
  section, footer {
    padding: 40px var(--phone-margin);
  }
}

/* ================================================================================================================================ */
/* ================================================================
    1.HEADER
*/
header {
    padding: 16px var(--desktop-margin);
    transition: transform 0.3s ease;
    position: sticky;
    transform: translateY(0%);
    top: 0;     
    z-index: 1000;
    background: linear-gradient(180deg, rgb(0 0 0 / 75%) 0%, rgba(0, 0, 0, 0) 100%);
}
header.header--hidden {
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}
header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
header .header-content nav ul {
    display: flex;
    gap: 32px;
}
header nav.main_nav {
    display: flex;
    align-items: center;
    gap: 56px;
}
header nav.main_nav li a {
    display: flex;
    align-items: center;
    gap: 4px;
} 

header nav.main_nav li {
    list-style-type: none;
    display: flex;
    align-items: center;
}
header nav.main_nav div {
    display: flex;
    gap: 24px;
}
header .nav-burger {
    display: flex;
    gap: 24px;
}
header .arrow-close .main-lvl2-nav__item {
    display: none;
}
header .arrow-open .main-lvl2-nav__item {
    display: flex;
}
li.main-lvl1-nav__item.main-lvl1-arrow:after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    right: 4%;
    top: 4px;
    background-image: url(../assets/icons/arrow-header.svg);
    background-position: center;
    background-repeat: no-repeat;
}
li.main-lvl1-nav__item.main-lvl1-arrow {
    position: relative;
}
  li.main-lvl1-nav__item.displayMobile {
    display: none;
}
header .burger {
    flex-direction: column;
    gap: 8px;
        width: fit-content;
    border-radius: var(--radii-8);
    cursor: pointer;
    display: flex;
    padding: 12px;
}
header .burger div {
    width: 56px;
    height: 8px;
    background: var(--neutral-tint-5);
    border-radius: 0 8px 8px 0;

}
header .burger div:nth-of-type(2) {
    width: 28px;
    margin: 0 0 0 auto;
   transition:0.2s ease-in all; 
}


header .burger:hover div:nth-of-type(2) {
    width: 56px;  
    margin: 0 0 0 auto;  
}

li.main-lvl1-nav__item ul {
    flex-direction: column;
    gap: 8px !important;
    padding-left: 12px;
    margin-top: 8px;
}
li.main-lvl1-nav__item ul li a:hover {
    color: var(--neutral-tint-5);
}
li.main-lvl1-nav__item ul a {
    color: var(--neutral-tint-3);
}
/*link_contextual_3 - default*/
.main_link_lvl1 {
    color: var(--neutral-tint-5);
    position: relative;
    font-weight: var(--font-fw-semi-bold);
    text-transform: uppercase;
}
.main_link_lvl1::after {
    content: "";
    background-image: url(../assets/icons/separateur-header.svg);
    width: 24px;
    height: 24px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    right: -28px;
}
.main_link_lvl1:hover {

}
.main_link_lvl1:hover::before {

}
.main_link_lvl1:active {

}
.main_link_lvl1:active::before {

}
.main_link_lvl1:focus-visible {

}
a.close-menu-mobile {
    font-size: 24px;
    position: absolute;
    top: 12px;
    right: 20px;
}

a.close-menu-mobile:hover {
    color: white !important;
}

  .displayMobile {
    display:none!important;
  }
/* ================================
    2.HEADER - Responsive
*/
@media (max-width: 1440px) {
    header nav.main_nav {
        display: none;
    }
  .displayMobile {
    display: flex;
  }
    header .burger {
        display: flex
    }
    li.main-lvl1-nav__item.displayMobile {
    display: flex!important;
}
    nav#mobileMenu .btn {
    width: 100%;
}
}
/* ================================
    3. MOBILE MENU
*/

/*
.mobile_menu {
    display: none;
  }

.mobile_menu li a:after {
    display: none;
}
.mobile_menu {
display: none;
    flex-direction: column;
    gap: 24px;
    background-color: var(--neutral-shade-3);
    padding: 24px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
    border-radius: 8px 0 0 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    width: 400px;
    height: 100vh;
}

.mobile_menu.open {
  display: flex;
}

.mobile_menu a.main_link_lvl1 {
  font-size: var(--font-size-3);
  padding: 8px 0;
}

.mobile_menu div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
*/

#menu:not( .mm-menu ) {
        display: none;
}

.mm-menu, .mm-menu--theme-dark {
    --mm-color-background: var(--neutral-shade-3)!important;
    box-shadow: -1px 1px 4px 2px rgba(0,0,0,0.32);
    -webkit-box-shadow: -1px 1px 4px 2px rgba(0,0,0,0.32);
    -moz-box-shadow: -1px 1px 4px 2px rgba(0,0,0,0.32);    

}

.mm-listitem__btn:not(.mm-listitem__text) {

    border-left-style: none!important;
}

/* ================================================================
    1.FOOTER
*/
footer {
    background: var(--neutral-shade-3);
    color: var(--neutral-tint-5);
    position: relative;
    padding: 56px var(--desktop-margin) 16px;
}
footer a {
    color: white;
}
footer .col-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}
footer .col-l {
    display: flex;
    gap: 40px;
    align-items: center;
    width: 100%;
}
footer .col-r {
    width: 30%;
}
footer .info-rs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
footer .links, footer .links div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
footer input#email::placeholder {
    color: #d7d7d7;
}
footer form {
    display: flex;
    align-items: end;
}
footer .btn_primary {
    background: var(--neutral-tint-5);
    color: var(--neutral-shade-3);
    /*border: none;*/
    margin-top: 10px;
    cursor: pointer;
    
}


footer input#email {
    background: none;
    border: none;
    border-bottom: 2px solid white;
    height: 44px;
    margin-top: 24px;
}
.reseaux_sociaux_icons {
    margin-top: 16px;
    display: flex;
    gap: 24px;
}
.reseaux_sociaux_icons img {
    padding: 8px;
    border-radius: 100%;
    border: 1px solid;
    z-index: 8;
    position: relative;
}
.reseaux_sociaux_icons img:hover {
    background-color:rgba(255,255,255,0.3);
    
}

#reseaux_sociaux_menu {

    position:absolute;
    bottom:0;
    right:0;
    margin:10px;    
}

/* ================================
    2.FOOTER - Responsive
*/
@media (max-width: 900px) {
    footer .links a, footer .links p {
        font-size: var(--font-fs-body-sm);
    }
    footer .col-2 {
        flex-direction: column;
        gap: 32px;
    }
    footer .col-l {
        justify-content: space-between;
    }
    footer .col-r {
        width: 100%;
    }
    footer .links, footer .links div {
        flex-wrap: wrap;
    }
    footer .links div {
        gap: 16px;
    }
}




button.splide__arrow.splide__arrow--prev svg, button.splide__arrow.splide__arrow--next svg {
    display: none;
}

 button.splide__arrow.splide__arrow--prev {
     transform: scaleX(-1);
     margin-top: -22px;
}
button.splide__arrow.splide__arrow--prev, button.splide__arrow.splide__arrow--next {
    background-image: url(../assets/icons/arrow-slide-no-border.svg);
    background-repeat: no-repeat;
    width: 44px;
    height: 44px;
    background-size: contain;
    transition:0.2s ease-in all;
    box-shadow: 0 0 1px 1px #00000042;
}

button.splide__arrow.splide__arrow--prev:hover, button.splide__arrow.splide__arrow--next:hover {
    box-shadow: 0 0 2px 2px #0000006e;
}

.splide:not(.is-overflow) .splide__arrows {
  display: none;
}

/* ================================================================================================================================ */
/* ================================================================
    1.PAGE ACCUEIL
*/
/*---SECTION HERO---*/
.section_hero {
    padding: 0;
    position: relative;
}
.section_hero .spectacle-home {
    position: relative;
    width:100%;
}
.section_hero .spectacle-home .info {
    position: absolute;
    top: 42%;
    left: 8%;
    z-index: 1;
    
    display: flex;
    flex-direction: column;
    gap:12px;
}

.fond_info {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 20px;
}

.section_hero .spectacle-home .info p.date {
    border: 2px solid;
    border-radius: 100px;
    background: #ffffff1c;
    text-align: center;
    width: fit-content;
    padding: 2px 24px;
    backdrop-filter: blur(2px);
}
.section_hero .spectacle-home .info p:last-of-type {
    margin-bottom: 24px;
}

.section_hero .spectacle-home p.sous_titre {
    font-weight:600;
}

.section_hero .spectacle-home p.accroche {
    max-width:40%;
    font-weight:200;
}

.section_hero .splide__slide img {
    vertical-align: bottom;
    height: 80vh;
    object-fit: cover;
    width: 100%;
}
.section_hero .spectacle-home .info  :is(h1, p) {
    color: var(--neutral-tint-5);
}
.bg-gradient:after {
    position: absolute;
    z-index: 0;
    height:100%;
    width: 100%;
    content: "";
    left: 0;
    background: #000000;
   background: linear-gradient(0deg, rgb(0 0 0 / 58%) 0%, rgba(0, 0, 0, 0) 100%);
}
.section_hero .splide__arrows.splide__arrows--ltr {
    position: absolute;
    bottom: 8%;
    right: 13%;
}
.section_hero .splide__pagination {
    bottom: 6%;
    left: 8%;
    padding: 0 1em;
    position: absolute;
    right: 0;
    z-index: 1;
    width: fit-content;
    gap: 16px;
}
.section_hero .splide__pagination__page {
    background: #ffffff63;
    border: 3px solid white;
    border-radius: 50%;
    display: inline-block;
    height: 16px;
    margin: 3px;
    opacity: .9;
    padding: 0;
    position: relative;
    transition: transform .2s linear;
    width: 16px;
}
.section_hero .splide__arrow--next {
    right: -40px;
}
.section_hero .splide__arrow--prev {
    left: -72px;
}
/*---SECTION A AFFICHE---*/
.section_spectacle-affiche {
    /*padding: 56px 0 56px var(--desktop-margin);*/
}
.section_spectacle-affiche .listes-spectacle-affiche {
  /*gap: 24px;*/
}
.section_spectacle-affiche button.splide__arrow.splide__arrow--prev {
    left: 4%;
}

.section_spectacle-affiche button.splide__arrow.splide__arrow--next {
    right: 4%;
}

.section_spectacle-affiche .titre-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:32px;
}

.section_spectacle-affiche .titre-div h2, .section_a-propos h2 {
    margin:0;
    text-transform: uppercase;
}

.section_spectacle-affiche .view_saison {
    color:#000;
    text-decoration: none;
    /*margin: 0 30px;*/
    border-bottom: 1px solid #000;
}

.section_spectacle-affiche .view_saison:hover {
    color: var(--warning-base);
    border-bottom: 1px solid var(--warning-base);
}

/*---SECTION A PROPOS---*/
.section_a-propos .container {
    position:relative;
    overflow: hidden;
    display:flex;
    align-content: center;
    justify-content:space-between;
    min-height: 44vh;
    padding:32px;
}

.section_a-propos .bloc_text {
    text-align: center;
    color: white;
    width: 700px;
    margin: auto;
    max-width: 100%;
    backdrop-filter: blur(3px);
}
.section_a-propos {  
    min-height: 44vh;
    height:auto;
    background-image: url(../assets/img/le-theatre.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;    
    position:relative;
    overflow: hidden;
    padding:0;
}
.section_a-propos p:last-of-type{
    margin-bottom: 24px;
}
.section_a-propos .btn_secondary {
    margin: 0 auto;
}
/*---SECTION RS---*/
.section_rs .col-2 .col-r {
    width: 70%;
}
.section_rs .col-2 .col-l {
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.section_rs .col-2 {
    display: flex;
    gap: 56px;
}
.section_rs .splide__list {
    gap: 16px;
}
.section_rs .col-2 .col-l h2 {
    margin: 0;
}
/* ================================
    2.HOME - Responsive
*/
@media (max-width: 900px) {
    .section_hero .spectacle-home .info {
        width: -webkit-fill-available;
        display: flex;
        flex-direction: column;
        /*align-items: center;*/
        gap:12px;
        top: initial;
        bottom:15%;
        
    }
    .section_rs .col-2 .col-l, .section_rs .col-2 .col-r {
        width: 100%;
    }
    .section_rs .col-2 {
        flex-direction: column;
    }
    .section_hero .spectacle-home p.accroche {
        width:80%;
    }    
}
/* ================================================================================================================================ */
/* ================================================================
    1.PAGE SPECTACLE DETAIL
*/
/*---SECTION BANDEAU---*/
.bandeau-interne img {
    height: 40vh;
    width: 100%;
    object-fit: cover;
}
.bandeau-interne {
    padding: 0;
}
/*---SECTION DETAIL---*/
.section_detail-spectacle-infos .col-2 {
    display: flex;
    gap: 56px;
    /*justify-content: space-evenly;*/
}
.section_detail-spectacle-infos .col-2 .col-l {
    width: 70%;
}
/*fiche spectacle*/
.fiche-spectacle-header {
    margin-bottom: 32px;
}
.fiche-spectacle {
    display: flex;
    /*align-items: end;*/
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 32px;
}
.section_detail-spectacle-infos .fiche-spectacle .col-l span {
    font-weight: var(--font-fw-medium);
}
.section_detail-spectacle-infos .fiche-spectacle .col-l div:first-of-type {
    margin-bottom: 16px;
}
/*Description*/
.section_detail-spectacle-infos .col-2 .col-l .description p {
    text-align: justify;
}
/*Quote*/
.section_detail-spectacle-infos .col-2 .col-l .quote {
    text-align: center;
    padding: 0 24px;
}
.section_detail-spectacle-infos .quote:after, .section_detail-spectacle-infos .quote:before {
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    background-image: url(../assets/icons/quote.svg);
}
.section_detail-spectacle-infos .quote:after {
    bottom: 32px;
    right: 0px;
}
.section_detail-spectacle-infos .quote:before {
    top: 0;
    left: 0;
    rotate: 180deg;
}
.section_detail-spectacle-infos .col-2 .col-l .quote p:first-of-type {
    font-weight: var(--font-fw-semi-bold);
    font-size: var(--font-fs-title-subsection);
}
.section_detail-spectacle-infos .col-2 .col-l :is(.description, .quote) {
    margin-bottom: 32px;
    position: relative;
}
.description p {
    margin-bottom: 1em;
}
.section_detail-spectacle-infos .col-2 .col-l .quote p.author {
    margin-top: 16px;
}
/*Sticky*/
.section_detail-spectacle-infos .info-pratique, .section_detail-spectacle-infos  .dates {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.section_detail-spectacle-infos .info-pratique {
    margin-bottom:10px;
}

.section_detail-spectacle-infos .info-pratique img {
    width:24px;
}
.section_detail-spectacle-infos .info-pratique a {
    color: var(--neutral-shade-2);
    text-decoration:none;
}
.section_detail-spectacle-infos .info-pratique a:hover {
    color: var(--neutral-shade-2);
    text-decoration:underline;
}

.mobile_dates {
    padding:24px;
    border:1px solid var(--neutral-tint-2);
    margin-bottom:16px;
}

.section_detail-spectacle-infos p, .section_detail-spectacle-infos p {
    font-weight: 600;
}
.section_detail-spectacle-infos .col-2 .col-r .sticky {
    /*background: var(--neutral-tint-4);*/
    border:1px solid  var(--neutral-tint-2);
    padding: 24px;
    margin-bottom: 32px;
}
.section_detail-spectacle-infos .col-2 .col-r .sticky-bloc {
    position: sticky;
    top: 0;
    z-index: 99;
}
.section_detail-spectacle-infos .col-2 .col-r a.btn.btn_primary.large {
    width: 100%;
}
.section_recomandation {
    /*padding: 56px 0 56px 8%;*/
}
.section_recomandation .listes-spectacle-affiche {
    /*gap: 32px;*/
    display: flex;
}
.section_recomandation {
    position: relative;
    /*z-index: -1;*/
}

.spectacle_pictos {

}
.spectacle_pictos img {
    width:50px;
    height:50px;
    margin:4px;
}

.fiche-spectacle-header .compagnie {
    color: var(--neutral-tint-2);
}

.fiche-spectacle .genre, .fiche-spectacle .duree, .fiche-spectacle .public {
    /*color: var(--warning-base);*/
}

.sequence div {
    font-weight:bold;
}
.sequence p {
    font-style:italic;
}
/* ================================
    2.SPECTACLE DETAIL - Responsive
*/
@media (max-width: 900px) {
    .section_detail-spectacle-infos .col-2 .col-l {
        width: 100%;
    }
    .section_detail-spectacle-infos .col-2 {
        flex-direction: column;
    }
    .section_detail-spectacle-infos .col-2 .col-r .sticky {
        display: none !important;
    }
    .section_detail-spectacle-infos .col-2 .col-l .toggle h3 {
        width: 100%;
        text-align: center;
    }
    .section_detail-spectacle-infos .col-2 {
        gap: 0;
    }
    .resa {
        position: fixed;
        bottom: 0;
        z-index: 9;
        width: -webkit-fill-available;
        padding: 16px;
        background: var(--neutral-tint-4);
        left: 0;
    }
    
  .spectacle_pictos img {
      width:50px;
      height:50px;
      margin:0 4px 4px 0;
  }   
  
  .fiche-spectacle {
    margin-bottom: 0;
  } 
}
@media (max-width: 768px) {
    .fiche-spectacle {
        gap: 0px;
        margin-bottom: 0;
        align-items: start;
        flex-direction: column;
    }
}



/* ================================================================================================================================ */
/* ================================================================
    1.PAGE SAISON
*/
.spectacle_grid-view .container {
    display: flex;
    flex-direction: column;
}
.spectacle_grid-view  .grid-view {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}
.spectacle_grid-view .spectacle-affiche {
    width: calc(100% / 5 - 26px);
}
section.bandeau-interne .titre {
    width: 100%;
    position: absolute;
    top: calc(80% - 27px);
    text-align: center;
    z-index: 99;
}
/* ================================
    2.SAISON - Responsive
*/
@media (max-width: 1920px) {
    .spectacle_grid-view .spectacle-affiche {
        width: calc(100% / 4 - 24px);
    }
}
@media (max-width: 1600px) {
    .spectacle_grid-view .spectacle-affiche {
        width: calc(100% / 3 - 24px);
    }
}
@media (max-width: 1200px) {
    .spectacle_grid-view .spectacle-affiche {
        width: calc(100% / 2 - 24px);
    }
}

@media (max-width: 750px) {
    .spectacle_grid-view .spectacle-affiche {
        width: 100%;
    }
}

.mobileOnly {
    display:none;
}
@media (max-width: 900px) {
  .mobileOnly {
      display:block;
  }
}

/***** jquery ui ****/
.ui-icon {
    width: 32px!important;
    height: 32px!important;
}
.ui-icon-triangle-1-s, .ui-icon-triangle-1-e {
    background-position: 0!important;
}
.ui-icon, .ui-widget-content .ui-icon {
    background-image: url('../assets/icons/arrow-toggle-off.svg')!important;
}
.ui-state-active .ui-icon, .ui-button:active .ui-icon {
    background-image: url('../assets/icons/arrow-toggle.svg')!important;
}
.ui-widget-content {
    border: 0!important;
    background: initial!important;
    color: initial!important;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 0!important;
    background: initial!important;
    font-weight: var(--font-fw-semi-bold)!important;
    font-size: var(--font-fs-title-subsection)!important;
    color: var(--font-neutral-shade-4)!important;
    text-transform: uppercase;
    text-align:left!important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 0!important;
    background: initial!important;
    font-weight: 500!important;
    font-size: var(--font-fs-title-subsection)!important;
    color: #000000!important;
    text-align:left!important;
}

.ui-accordion .ui-accordion-content {
    max-height: fit-content!important;
    height: auto !important;
    overflow: hidden!important;
}

.aucun_resultat {
    display:flex;
    gap:16px;
    margin:20px auto;
    align-items:center;
    padding:10px 14px;
    border:1px solid var(--neutral-shade-3);
    border-radius:10px;
}

.aucun_resultat:before {
    content: "";
    width: 36px;
    height: 36px;
    background-image: url(../assets/icons/loupe-no-result.svg);
    background-size:cover;
}


#header_search {
    position:relative;
}
#header_search img {
    cursor:pointer;
}
#header_search_form_contener {
    display:none;
}
#header_search_form {
    position: absolute;
    top: 30px;
    right: 0;
    padding: 8px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.3);
    display:flex;
    gap:0;
}
#header_search_form input {
    border:0;
    padding:6px;
    
}
#header_search_form input[type=text] {
    background-color: rgba(255, 255, 255, 0.8);
    border-top-left-radius:6px;
    border-bottom-left-radius:6px;
    font-size: var(--font-fs-body-lg); 
}
#header_search_form input[type=submit] {
    cursor:pointer;
    background-color: var(--neutral-shade-3);
    color:#fff;
    border-top-right-radius:6px;
    border-bottom-right-radius:6px;    
    font-size: var(--font-fs-body-lg); 
}
#header_search_form input[type=submit]:hover {
    background-color: var(--neutral-shade-2);
    color:#fff; 
}

.netc-editor {

}

.netc-editor p {
    margin-bottom: 1em;    
}

.complet {
    display:inline-block;
    padding:2px 4px;
    border-radius:3px;
    background-color:var(--warning-base);
    color:#fff;
    margin-left:6px;
}
.r_precisions {
    font-weight:200;
    margin-left:20px;
    display:inline-block;
}

.parallax {
    position: relative;
    overflow: hidden;
}