@charset "utf-8";
/* CSS Document */

@media all and (max-width : 2400px) {
    #primary-menu > li > a { font-size: 17px; letter-spacing: 1; }
    #primary-menu .sub-menu a {padding: 8px 0; font-size: 17px;}
    
    #btn-billetterie {padding-top: 800px;}
    .home #btn-billetterie {padding-top: 1100px;}
    
    #btn-billetterie-soleil {width: 800px; height: 800px; top: 400px; margin-left: -400px; }
    .home #btn-billetterie-soleil {top: 700px;}
    
    #btn-billetterie-soleil:hover:before { width: 70px; height: 70px; margin-top: 30px; }
    #btn-billetterie-soleil-sous-titre {font-size: 45px; padding-top: 150px;}
    #btn-billetterie-soleil-titre { font-size: 110px;}
    
    header #logo { width: 230px;}
    #zone-top-icon {width: 180px;}
    #zone-top-sous-titre {font-size: 25px; letter-spacing: 8px;}
    .bg-move {width: 2000px; height: 161px;}
    #zone-orage-anishnabe {font-size: 40px; margin-bottom: 70px;}
    
    #footer-infos {padding-top: 50px;}
    #footer-infos-vagues {width: 800px; height: 302px; margin-top: -60px;}
}


@media all and (max-width : 2000px) {    
    #primary-menu > li { margin-right: 30px;}
    #primary-menu > li > a { font-size: 15px; letter-spacing: 0;}
    .home header {margin-top: 60px;}
    .home header #logo, #zone-top-theme { width: 450px;}
    #zone-top-theme { margin-top: 300px;}
    .home #zone-top-contenu h1 { font-size: 55px;}
    .home #zone-top-contenu p {font-size: 28px;}
    #zone-top:after {bottom: 70px;}
    .home #zone-top:after {width: 19px; height: 254px;}
    #zone-top::after {width: 19px; height: 42px;}
    
    #zone-orange { padding: 6vw 0 200px 0;}
    
    #zone-carte h2 {font-size: 60px;}
    #zone-carte h2 span:first-child {width: 50px; height: 50px; margin-left: -25px; bottom: 100px;}
    
    #btn-billetterie {padding-top: 700px; margin-top: -100px;}
    .home #btn-billetterie {padding-top: 850px;}
    #btn-billetterie-soleil {width: 700px; height: 700px; top: 350px; margin-left: -350px; }
    .home #btn-billetterie-soleil {top: 500px;}
    #btn-billetterie-soleil:hover:before { width: 60px; height: 60px; margin-top: 30px; }
    #btn-billetterie-soleil-sous-titre {font-size: 40px; padding-top: 130px;}
    #btn-billetterie-soleil-titre { font-size: 100px;}
    
    header #logo { width: 200px;}
    #zone-top {height: 500px;}
    #zone-top-icon {width: 160px;}
    #zone-top-contenu h1 { font-size: 70px;}
    #zone-top-sous-titre {font-size: 23px; letter-spacing: 6px;}
    .bg-move {width: 1800px; height: 145px;}
    #zone-orage-anishnabe {font-size: 40px; margin-bottom: 70px;}
    
    #station-coordonnees {padding: 0 5%;}
    
    #footer-infos-vagues {width: 700px; height: 265px; margin-top: -60px;}
    #footer-infos-gauche a {font-size: 22px;}
    #footer-infos-gauche p {font-size: 16px;}
    #footer-logo a {width: 250px;}
    #footer-infos-droit-titre {font-size: 18px;}
    #footer-infos-droit p {font-size: 20px;}
    #footer-social a {width: 70px; height: 70px; background-size: 25px 25px}
    
    p, .accordion ul {font-size: 24px;}
    .accordion ul li:before {top: 4px;}
}


@media all and (max-width : 1600px) {   
    .div-inner-large { margin: 0 5%; position: relative;}
    #header-social { right: 5%; top: 20px;}
    header {margin-top: 40px;}
    header #menu {margin-left: 40%; padding-top: 10px;}
    .home header #logo, #zone-top-theme { width: 400px;}
    .home #zone-top-contenu h1 { font-size: 45px; margin-bottom: 20px;}
    .home #zone-top-contenu p {font-size: 22px;}
    .home header #logo, #zone-top-theme { width: 350px;}
    #zone-top-theme { margin-top: 250px; margin-bottom: 200px;}
    #zone-top:after {bottom: 80px;}
    .home #zone-top:after {width: 15px; height: 200px;}
    #zone-top::after {width: 15px; height: 33px; bottom: 90px;}
    
    #reservation-obligatoire { font-size: 19px; padding: 15px 60px 15px 30px; top: 500px;}
    
    #zone-orange p {font-size: 26px;}
    
    .btn-arrondi, .gform_button {border-radius: 15px; padding: 15px 25px; font-size: 17px; }
    
    #div-inner-map {width: 1250px;}
    .map-slide-attrait-pointeur { width: 70px; height: 93px;}
    .map-slide-attrait-pointeur:after {width: 90px; height: 56px; left: 30px;}
    .map-slide-attrait-infos {box-shadow: 20px 20px 20px rgba(0,0,0,0.2); width: 400px; height: 400px; top: 180px; left: 30px;}
    #map-infos-conteneur { top: 510px; left: 84px;}
    .map-slide-attrait-infos-inner {padding: 60px;}
    .map-slide-attrait-titre {font-size: 26px; margin-bottom: 10px;}
    .map-slide-attrait-infos p {font-size: 16px; margin-bottom: 15px;}
    .map-slide-attrait-infos .btn-arrondi {padding: 6px 10px; font-size: 12px;}
    
    #btn-billetterie {padding-top: 550px;}
    .home #btn-billetterie {padding-top: 750px;}

    #btn-billetterie-soleil {width: 600px; height: 600px; top: 300px; margin-left: -300px; }
    .home #btn-billetterie-soleil {top: 440px;  }
    #btn-billetterie-soleil:hover:before { width: 50px; height: 50px; margin-top: 30px; }
    #btn-billetterie-soleil-sous-titre {font-size: 30px; padding-top: 110px;}
    #btn-billetterie-soleil-titre { font-size: 80px;}
    
    .station #zone-top { height: 600px;}
    header #logo { width: 180px;}
    #zone-top .div-inner-large {width: 90%;}
    #zone-top-icon {width: 140px;}
    #zone-top-contenu h1 { font-size: 60px;}
    #zone-top-sous-titre {font-size: 20px; }
    .bg-move {width: 1600px; height: 129px;}
    #zone-orage-anishnabe {font-size: 40px; margin-bottom: 70px;}
    
    #footer-infos-vagues {width: 550px; height: 208px; margin-top: 0;}
    #footer-infos {padding-top: 0;}
    #footer-infos-gauche ul, #footer-infos-droit-titre  { width: 200px;}
    #footer-infos-gauche ul {margin-bottom: 60px;}
    #footer-infos-gauche a {font-size: 20px;}
    #footer-infos-gauche p {font-size: 14px;}
    #footer-logo a {width: 200px;}
    #footer-infos-droit-titre {font-size: 17px;}
    #footer-infos-droit p {font-size: 18px;}
    #footer-social {margin-top: 60px;}
    #footer-social a {width: 60px; height: 60px; background-size: 20px 20px}
    #footer-partenaires {padding: 80px 0; margin-top: 80px;}
    #footer-partenaires .logo-element {height: 90px;}
    #footer-partenaires .logo-element img {max-height: 90px; max-width: 150px;}
    
    p, .accordion ul {font-size: 22px;}
    .accordion ul li:before {top: 2px;}
    .billetterie-questions {font-size: 30px; margin: 40px 0 25px 0;}
    h2 {font-size: 50px; margin-bottom: 40px;}
    h3 {font-size: 26px; letter-spacing: 3px;}
}


@media all and (max-width : 1400px) {  
    
    #primary-menu > li > a { font-size: 14px;}
    #primary-menu .sub-menu a {padding: 6px 0; font-size: 16px;}
    
    #zone-orange { padding: 80px 0 150px 0; margin-bottom: 80px;}
    #zone-carte {padding: 80px 0 180px 0;}
    
    #reservation-obligatoire { font-size: 16px; padding: 15px 30px 15px 30px; top: 450px;}
    
    .station #zone-top { height: 550px;}
    header #logo { width: 160px;}
    #zone-top-icon {width: 120px;}
    #zone-top-contenu {width: 100%;}
    #zone-top-contenu h1 { font-size: 50px;}
    #zone-top-sous-titre {font-size: 18px; }
    .bg-move {width: 1400px; height: 112px;}
    
    #station-coordonnees {padding: 0;}
    .contenu-colonne:first-child {width: 40%; margin-right: 10%;}
    .contenu-colonne:last-child {width: 50%; text-align: center;}
    
    #contact-logo {margin: 80px 0 60px 0;}
    #contact-logo a {display: block;}
    #contact-logo img {width: 220px; height: auto;}
    
    #circuit-video {padding: 20px; width: calc(100% - 40px); margin-left: 0; margin-bottom: 150px;}
}


@media all and (max-width : 1250px) {
    #primary-menu > li > a { font-size: 15px; text-transform: none;}
    
    #header-social { top: 20px;}
    #header-social a {margin-left: 10px;}
    
    .home header {margin-top: 40px;}
    .home header #logo, #zone-top-theme { width: 300px;}
    #zone-top-theme { margin-top: 200px; margin-bottom: 200px;}
    .home #zone-top-contenu h1 { font-size: 40px; margin-bottom: 20px;}
    .home #zone-top-contenu p {font-size: 20px;}
    .div-inner-petit { margin: 0 4%; width: 92%;}
    
    #div-inner-map {width: 800px;}
    #zone-carte h2 {font-size: 50px;}
    #zone-carte h2 span:first-child {width: 40px; height: 40px; margin-left: -20px; bottom: 70px;}
    .map-slide-attrait-pointeur { width: 45px; height: 60px;}
    .map-slide-attrait-pointeur:after {width: 50px; height: 30px; left: 20px; opacity: 0.6;}
    .map-slide-attrait-pointeur-icon { top: 5px;}
    .map-slide-attrait-infos {width: 300px; height: 300px; top: 50px; left: 0;}
    #map-infos-conteneur { top: 290px; left: 0;}
    .map-slide-attrait-infos-inner {padding: 40px;}
    .map-slide-attrait-titre {font-size: 20px; margin-bottom: 10px;}
    .map-slide-attrait-infos p {font-size: 12px; margin-bottom: 15px;}
    .map-slide-attrait-infos .btn-arrondi {padding: 6px 10px; font-size: 12px;}
    
    #station-coordonnees-conteneur { margin: 80px 0 80px 0;}
    #station-coordonnees-conteneur-inner {padding: 30px 40px;}
    .coordonnees-liste-element {font-size: 16px;}
    
    #popUpAnisipi > div {width: 90%; padding: 20px; }
    #popUpAnisipi .popup-border {padding: 35px;}
    .popup-titre {font-size: 30px; margin-bottom: 20px;}
    #popUpAnisipi .popup-close::after {font-size: 60px;}
}


@media all and (max-width : 1000px) {  
    
    header {position: absolute; margin-top: 0; z-index: 8;}
    .home header {margin-top: 0;}
    header #logo, .home header #logo {margin-top: 40px;}
    #header-social { top: 40px; right: 120px;}
    
    #zone-top {background-attachment: scroll;}
    
    #zone-orange p {font-size: 20px;}
    #zone-orange { padding: 40px 0 100px 0;}
    #zone-carte {padding: 60px 0;}
    
    footer { background-size: contain;}
    
    #btn-billetterie {padding-top: 500px; margin-top: -50px;}
    .home #btn-billetterie {margin-top: 0; padding-top: 600px;}
    
    #btn-billetterie-soleil {top: 200px; }
    .home #btn-billetterie-soleil {top: 300px;  }
    
    .station #zone-top { height: 500px;}
    #zone-top {height: 400px;}
    #zone-top-contenu {top: 40%;}
    header #logo { width: 140px;}
    #zone-top-icon {width: 100px;}
    #zone-top-contenu h1 { font-size: 45px;}
    #zone-top-sous-titre {font-size: 16px; }
    
    #reservation-obligatoire { font-size: 15px; padding: 10px 20px 10px 20px; top: 400px;}
    
    .bg-move {width: 1000px; height: 80px; bottom: 30%; opacity: 0.3;}    
    
    .bloc-photo-texte {margin-bottom: 60px;}
    .bloc-photo-texte:last-child {margin-top: 60px;}
    .bloc-photo-texte-image {width: 100%; position: relative; z-index: 1;}
    .bloc-photo-texte-texte { width: 100%; margin-top: 0;}
    .bloc-photo-texte-texte-inner { padding: 10% 0;}
    .bloc-photo-texte-gauche .bloc-photo-texte-image {left: auto;}
    .bloc-photo-texte-gauche .bloc-photo-texte-texte { margin-left: 0;}
    .bloc-photo-texte-gauche .bloc-photo-texte-texte-inner { padding: 10%;}
    .bloc-photo-texte-droit .bloc-photo-texte-image {right: auto;}
    .bloc-photo-texte-droit .bloc-photo-texte-texte { margin-right: 0;}
    .bloc-photo-texte-droit .bloc-photo-texte-texte-inner { padding: 10%;}
    
    .wp-block-columns {display: block !important;}
    .wp-block-column:first-child {width: 100%; margin-right: 0;}
    .wp-block-column:last-child {width: calc(100% - 80px); margin-left: 0; padding: 40px;}
    .wp-block-column {margin-bottom: 40px !important;}
    
    #footer-logo {display: none;}
    #footer-infos-gauche, #footer-logo, #footer-infos-droit {width: 100%; align-self: flex-end; text-align: center !important;}
    #footer-infos-gauche {margin-top: 230px;}
    #footer-infos-gauche ul {margin-bottom: 40px; display: inline-block;}
    #footer-infos-gauche a {font-size: 20px;}
    #footer-infos-gauche p {font-size: 14px; margin-bottom: 40px;}
    #footer-logo a {width: 200px;}
    #footer-infos-droit-titre {font-size: 17px;}
    #footer-infos-droit p {font-size: 18px;}
    #footer-social {margin-top: 40px;}
    #footer-social a {width: 60px; height: 60px; background-size: 20px 20px}
    #footer-partenaires {padding: 60px 0; margin-top: 60px;}
    
    p, .accordion ul {font-size: 20px;}
    .accordion ul li:before {top: 0;}
    h2 {font-size: 40px; margin-bottom: 30px;}
    h3 {font-size: 24px; letter-spacing: 2px;}
    
    .gform_wrapper .ginput_container_text input, .gform_wrapper .ginput_container_email input, .gform_wrapper .ginput_container_textarea textarea { padding: 8px 12px !important; font-size: 16px !important;}
    
    #primary-menu {background-color: var(--main-color-bleu-moyen); box-shadow: 0 20px 20px rgba(0,0,0,0.5); width: 100vw; left: 50%; margin-left: -50vw; position: relative; padding-top: 100px;}
    .home #primary-menu {padding-top: 140px;}
    #primary-menu a {color: #fff;}
    #primary-menu ul {
      box-shadow: none;
      float: none;
      position: relative;
    }
    
    /*.main-navigation #primary-menu {max-height: 0; overflow: hidden;}
    .main-navigation.toggled #primary-menu {max-height: 1000px;}*/
    
    .main-navigation.toggled ul ul {display: none !important; left: 0;}
    .main-navigation.toggled ul li.focus ul { display: block !important;}
    #primary-menu > li { border-bottom: 1px solid rgba(0,0,0,0.1);}
    #primary-menu > li > a { font-size: 17px; font-weight: bold;}
    #primary-menu li {width: 100%; margin-right: 0;}
    #primary-menu li a { padding: 10px 5% !important; width: 90%;}    
    #primary-menu > li:last-child > a {border: 0;}
    
    #circuit-video {padding: 10px; width: calc(100% - 20px); border-radius: 10px; margin-bottom: 100px;}
}


@media all and (max-width : 800px) {
    #zone-top {height: 300px;}
    .home header #logo, #zone-top-theme { width: 200px;}
    #zone-top-theme { margin-top: 150px; margin-bottom: 50px;}
    .home #zone-top-contenu { top: 0; transform: none; width: 50%; right: 0;}
    .home #zone-top-contenu h1 { font-size: 35px; margin-bottom: 10px;}
    .home #zone-top-contenu p {font-size: 18px;}
    #zone-top:after {display: none;}
    
    #galerie-contact {margin: 80px 0 300px 0;}
    
    #zone-orange { mask: none; margin-top: 0;}
    
    #footer-partenaires .logo-element {height: 70px;}
    #footer-partenaires .logo-element img {max-height: 70px; max-width: 120px;}
    
    #div-inner-map {width: 100%;}
    #zone-carte h2 {font-size: 40px; padding: 0 10px;}
    #zone-carte h2 span:first-child {width: 30px; height: 30px; margin-left: -15px; bottom: 55px;}
    .map-slide-attrait-pointeur { transform: translateY(-30%);}
    .map-slide-attrait-infos {width: 90%; margin: 0 5%; height: auto; top: 0; left: 0; border-radius: 0; box-shadow: none; background-color: transparent;}
    .map-slide-attrait-infos-inner {padding: 0;}
    
    .map-slide-attrait-infos p {font-size: 18px;}
    #map-infos-conteneur { top: 0; left: 50%; position: relative; transform: translateX(-50%); margin: 40px 0 20px 0;}
    .map-slide-attrait-pointeurs {position: relative; height: 80%; margin-top: 15%;}
    #zone-carte-bg {margin-top: 200px;}

    .galerie-parallax {margin-top: 0;}
    .galerie-parallax-element:nth-child(1) {width: 31%; left: 5%; transform: translateY(-40%); z-index: 0;}
    .galerie-parallax-element:nth-child(2) {width: 36%; left: 30%; transform: translateY(-20%); z-index: 1;}
    .galerie-parallax-element:nth-child(3) {width: 30%; left: 20%; transform: translateY(180%); z-index: 2;}
    .galerie-parallax-element:nth-child(4) {width: 30%; left: 45%; transform: translateY(150%); z-index: 3;}
    .galerie-parallax-element:nth-child(5) {width: 35%; left: 64%; transform: translateY(40%); z-index: 0;}
    
    #btn-billetterie {padding-top: 500px;}
    .home #btn-billetterie {padding-top: 900px; margin-top: -100px;}

    #btn-billetterie-soleil {width: 450px; height: 450px; top: 250px; margin-left: -225px; }
    .home #btn-billetterie-soleil {top: 650px;}
    #btn-billetterie-soleil:hover:before { width: 40px; height: 40px; margin-top: 30px; }
    #btn-billetterie-soleil-sous-titre {font-size: 28px; padding-top: 90px; letter-spacing: 5px;}
    #btn-billetterie-soleil-titre { font-size: 70px;}
    
    .station #zone-top { height: 400px;}
    #zone-top-contenu {top: 55%;}
    header #logo { width: 120px;}
    #zone-top-icon {width: 80px;}
    #zone-top-contenu h1 { font-size: 45px;}
    #zone-top-sous-titre {font-size: 15px; letter-spacing: 5px;}
    
    .bg-move {width: 800px; height: 64px; bottom: 10%;}
    
    #zone-orage-anishnabe {font-size: 35px; margin-bottom: 60px;}    
    
    .home footer {background-size: cover;}
    
    #footer-infos-vagues {width: 400px; height: 151px; margin-top: 0;}
    #footer-infos-gauche {margin-top: 160px;}
    
    .contenu-colonne {float: none;}
    .contenu-colonne:first-child {width: 100%; margin-right: 0;}
    .contenu-colonne:last-child {width: 100%;}
    #station-coordonnees .map-slide-attrait-pointeur {margin-top: 60px;}
    #station-coordonnees-conteneur-inner {padding: 20px;}    
    
    .station .galerie-parallax {margin-bottom: 500px;}
    
    #circuit-video {margin-bottom: 40px;}
}


@media all and (max-width : 640px) {
    header #logo {margin-top: 30px;}
    .home header #logo, #zone-top-theme { width: 300px; left: 50%; margin-left: -150px; position: relative;}
    
    header #logo, .home header #logo {margin-top: 20px;}
    
    .home #zone-top-contenu { width: 100%; right: auto; position: relative; text-align: center; left: 0;}
    #myVideo {display: none;}
    
    .menu-toggle {top: 15px;}
    .menu-toggle, .toggled .menu-toggle {background-size: 25px 25px;}
    #primary-menu {padding-top: 85px;}
    
    .home .menu-toggle { top: 180px; left: 50%; right: auto; transform: translateX(-50%);}
    .home #site-navigation {position: absolute; top: 0; margin-top: -40px;}
    .home #primary-menu {text-align: center; padding-top: 220px;}
    #primary-menu {background: url("../images/bg-sub.jpg") bottom center no-repeat; background-size: cover;}
    
    .home #header-social { top: 230px; right: auto; left: 50%; transform: translateX(-50%);}
    #header-social {top: 20px; right: 80px;}
    
    #zone-top-theme { margin-top: 300px;}
    
    #reservation-obligatoire { font-size: 14px; letter-spacing: 2px; padding: 10px 0; width: 300px; left: 50%; transform: translate(-50%, -50%); border-radius: 30px; top: 350px; text-align: center;}
    
    #zone-orange { padding: 40px 0 70px 0;}
    
    .map-slide-attrait-pointeurs {  height: 70%; margin-top: 28%;}
    #zone-carte-bg {margin-top: 280px;}
    
    #btn-billetterie {padding-top: 320px;}
    .home #btn-billetterie {padding-top: 680px;}
    #btn-billetterie-soleil {width: 300px; height: 300px; top: 160px; margin-left: -150px; }
    .home #btn-billetterie-soleil { top: 520px;}
    #btn-billetterie-soleil:hover:before { width: 30px; height: 30px; margin-top: 20px; }
    #btn-billetterie-soleil-sous-titre {font-size: 20px; padding-top: 60px; letter-spacing: 3px;}
    #btn-billetterie-soleil-titre { font-size: 50px;}
    
    .station #zone-top { height: 350px;}
    header #logo { width: 120px;}
    #zone-top-contenu h1 { font-size: 40px;}
    #zone-top-sous-titre {font-size: 14px; letter-spacing: 4px;}
    
    .bg-move {width: 600px; height: 48px; bottom: 10%; transform: translateX(25%);}
    
    #zone-orage-anishnabe {font-size: 30px; margin-bottom: 50px;}
    
    
    #station-coordonnees .map-slide-attrait-pointeur {margin-top: 40px;}
    #station-coordonnees-conteneur {margin: 60px 0 60px 0;}
    #station-coordonnees-titre {margin: 0;}
    
    .bloc-photo-texte {margin-bottom: 40px;}
    
    #footer-infos-vagues {width: 300px; height: 113px;}
    
    .station .galerie-parallax {margin-bottom: 350px;}
}

@media all and (max-width : 500px) {
    .map-slide-attrait-pointeurs {  height: 70%; margin-top: 36%;}
    .map-slide-attrait-infos p {font-size: 16px;}
    
    .bg-move {transform: translateX(35%);}
}

@media all and (max-width : 400px) {
    #footer-facebook, #footer-instagram {display: none !important;}
}

@media all and (max-width : 350px) {
    .home header #logo, #zone-top-theme { width: 200px; left: 50%; margin-left: -100px; position: relative;}
    
    .home .menu-toggle { top: 130px; }
    .home #primary-menu {padding-top: 180px;}
    
    .home #header-social { top: 160px;} 
    
    #zone-top-contenu h1 { font-size: 30px;}
    
    #galerie-contact {margin: 80px 0 250px 0;}
    
    #zone-top-theme { margin-top: 240px;}
    
    #zone-carte h2 {font-size: 35px; }
    #zone-carte h2 span:first-child {bottom: auto; top: 0; margin-top: -40px;}
    .map-slide-attrait-pointeurs {  height: 65%; margin-top: 55%;}
    #zone-carte-bg {margin-top: 320px;}
    
    .bg-move {display: none;}
    
    #btn-billetterie {padding-top: 250px;}
    .home #btn-billetterie {padding-top: 600px;}
    #btn-billetterie-soleil {top: 90px;}
    .home #btn-billetterie-soleil {top: 420px;}
    
    #reservation-obligatoire { font-size: 13px; letter-spacing: 1px; width: 250px; }
    
    .station .galerie-parallax {margin-bottom: 250px;}
}