/*
  ##Device = Most of the Smartphones Mobiles
  ##Screen = B/w 320px to 767px
*/
@media only screen and (min-width: 320px) and (max-width: 767px) {
    /*--------------------------------------------------------------
    # Typography
    --------------------------------------------------------------*/

        h2 {
            font-size: 39px;
            line-height: 44px;
        }

        #page blockquote {
            padding: 0;
        }

        #page blockquote p:first-child {
            font-size: 22px;
            line-height: 30px;
        }

        p,
        li {
            line-height: 24px;
        }

    /*--------------------------------------------------------------
    # Links
    --------------------------------------------------------------*/

        a {
            transition: none !important;
        }

        #content .cta {
            max-width: inherit;
        }

        .watermark {
            display: none;
        }

    /*--------------------------------------------------------------
    # Media
    --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # Forms
    --------------------------------------------------------------*/

        input[type],
        textarea {
            transiton: none;
        }

    /*--------------------------------------------------------------
    # Structure
    --------------------------------------------------------------*/

        .wrap {
            padding-left: 24px;
            padding-right: 24px;
        }

        /* Sections */

            /* Section: Hero */
            .hero-section {
                height: 60vh;
            }

            .hero-section.no-image {
                background: #00a6a3;
            }

            /* Section: Content */
            .content-section {
                padding: 32px 24px;
            }

            .content-section .section-content p:not(:last-of-type) {
                margin-bottom: 16px;
            }

    /*--------------------------------------------------------------
    # Header
    --------------------------------------------------------------*/

        .site-branding a {
            margin: 0;
            background-position: 0 50%;
        }

        body:not(.home) #mobile-navigation-trigger {
            display: block;
        }

        .site-header .main-navigation {
            display: none;
            background-color: #fff;
            height: 100vh;
            position: fixed;
            top: 0;
            padding: 0;
        }

        .site-header.mobile .main-navigation {
            display: block;
        }

        .site-header .main-navigation .primary-menu-wrap,
        .site-header .main-navigation #primary-menu {
            height: 100%;
        }

        .site-header .main-navigation ul#primary-menu {
            display: block;
            text-align: left;
            padding: 50% 8%;
        }

        .site-header .main-navigation ul#primary-menu > li {
            margin: 0 0 18px;
            text-align: left;
            display: block;
        }

        .site-header .main-navigation ul#primary-menu > li > a {
            color: #00A6A3;
            padding: 0;
            text-shadow: none;
            font-size: 20px;
            line-height: 40px;
            display: inline-block;
        }

        .site-header .main-navigation ul#primary-menu li > a:hover,
        .site-header .main-navigation ul#primary-menu li.current_page_item > a,
        .site-header .main-navigation ul#primary-menu li.current-menu-item > a,
        .site-header .main-navigation ul#primary-menu li.current-menu-parent > a {
            color: #00A6A3;
        }

        .site-header .main-navigation ul#primary-menu li.current_page_item > a:after,
        .site-header .main-navigation ul#primary-menu li.current-menu-item > a:after,
        .site-header .main-navigation ul#primary-menu li.current-menu-parent > a:after {
            background-color: #00A6A3;
            width: auto;
            height: 2px;
        }

    /*--------------------------------------------------------------
    # Home
    --------------------------------------------------------------*/

        .home .site-branding {
            position: relative;
            top: 0;
			height: 0;
            left: inherit;
        }

		.home .site-branding a {
            max-width: 100%;
            width: 100%;
            height: 70vh;
        }

        .home .slick-slider,
        .home .slick-track,
        .home .slick-slide {
            height: 100vh;
        }

        .home .site-footer {
            bottom: 0;
            width: 100%;
            position: absolute;
        }

    /*--------------------------------------------------------------
    # Magasins
    --------------------------------------------------------------*/

        #shops ul {
            display: block;
            margin: 0;
        }

        #shops ul .shop {
            width: 100%;
        }

        #shops ul .shop img {
            border-radius: 0px;
        }

    /*--------------------------------------------------------------
    # Showroom
    --------------------------------------------------------------*/

        #showroom-col {
            display: block;
        }

        .acf-map {
            width: 100%;
        }

        .showroom-image {
            margin: 32px 0;
            width: 100%;
            padding-left: 0;
            margin-left: inherit;
        }

    /*--------------------------------------------------------------
    # Esprit
    --------------------------------------------------------------*/

        #esprit ul li .grid-layout {
            display: block;
        }

        #esprit ul li .grid-item {
            width: 90%;
            padding: 0;
            margin: 0 auto 30px;
        }

        #esprit ul li .grid-item[rel="1"],
        #esprit ul li .grid-item[rel="3"],
        #esprit ul li .grid-item[rel="5"],
        #esprit ul li .grid-item[rel="7"] {
            transform: none;
        }

        #esprit ul li .grid-item.logo {
            margin: 40px auto;
        }

        #esprit ul li .grid-item.logo:before {
            content: "";
            display: block;
            position: absolute;
            border: 2px dashed #fff;
            bottom: 5px;
            top: 5px;
            left: 5px;
            width: calc(100% - 10px);
            border-radius: 50%;
        }

        #esprit ul li .grid-item.logo img {
            height: 250px;
            width: auto;
            max-width: inherit;
            margin: 0 auto;
        }

        #esprit ul li .grid-item:nth-child(even):not(.logo) img {
            transform: rotate(2deg);
        }

        #esprit ul li .grid-item:not(.logo) img {
            padding: 5px;
        }

    /*--------------------------------------------------------------
    # Contact
    --------------------------------------------------------------*/

        #content form .row {
            display: block;
            margin-bottom: 12px;
        }

        #content form .row p {
            flex: inherit;
            margin-bottom: 12px;
        }

        #content form .row p:last-child {
            margin-bottom: 0;
        }

        #content div.wpcf7 { margin-bottom:80px; }

    /*--------------------------------------------------------------
    # Footer
    --------------------------------------------------------------*/

        .site-footer .footer-inner {
            padding: 0;
        }

        #footer-navigation ul {
            margin: 0;
            padding: 30px 0 0 0;
        }

        #footer-menu > li:not(.footer-only):not(:last-child) {
            display: none;
        }

        #footer-info .footer-inner {
            padding-top: 20px;
            padding-left: 0;
            padding-right: 0;
            display: block;
            text-align: center;
        }

}

/*
  ##Device = Most of the Smartphones Mobiles (Landscape)
  ##Screen = B/w 320px to 767px
*/
@media only screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {}

/*
  ##Device = Tablets
  ##Screen = B/w 768px to 1203px
*/
@media only screen and (min-width: 768px) and (max-width: 1203px) {


    /*--------------------------------------------------------------
    # Structure
    --------------------------------------------------------------*/

        /* Sections */

            /* Section: Content */
            .content-section {
                padding: 40px 188px 60px 45px;
            }


    /*--------------------------------------------------------------
    # Header
    --------------------------------------------------------------*/

        body:not(.home) #mobile-navigation-trigger {
            display: block;
        }

        .site-header .main-navigation {
            display: none;
            background-color: #fff;
            height: 100vh;
            width: 33.33%;
            position: fixed;
            top: 0;
            right: 0;
            padding: 0;
            box-shadow: -3px 0 32px rgba(0,0,0,.1);
        }

        .site-header.mobile .main-navigation {
            display: block;
        }

        .site-header .main-navigation .primary-menu-wrap,
        .site-header .main-navigation #primary-menu {
            height: 100%;
        }

        .site-header .main-navigation ul#primary-menu {
            display: block;
            text-align: left;
            padding: 200px 8%;
        }

        .site-header .main-navigation ul#primary-menu > li {
            margin: 0 0 18px;
            text-align: left;
            display: block;
        }

        .site-header .main-navigation ul#primary-menu > li > a {
            color: #00A6A3;
            padding: 0;
            text-shadow: none;
            font-size: 20px;
            line-height: 40px;
            display: inline-block;
        }

        .site-header .main-navigation ul#primary-menu li > a:hover,
        .site-header .main-navigation ul#primary-menu li.current_page_item > a,
        .site-header .main-navigation ul#primary-menu li.current-menu-item > a,
        .site-header .main-navigation ul#primary-menu li.current-menu-parent > a {
            color: #00A6A3;
        }

        .site-header .main-navigation ul#primary-menu li.current_page_item > a:after,
        .site-header .main-navigation ul#primary-menu li.current-menu-item > a:after,
        .site-header .main-navigation ul#primary-menu li.current-menu-parent > a:after {
            background-color: #00A6A3;
            width: auto;
            height: 2px;
        }

    /*--------------------------------------------------------------
    # Home
    --------------------------------------------------------------*/

        .home .site-branding {
            position: relative;
            top: 0;
			height: 0;
            left: inherit;
        }

		.home .site-branding a {
            max-width: 100%;
            width: 100%;
            height: 70vh;
        }

        .home .slick-slider,
        .home .slick-track,
        .home .slick-slide {
            height: 100vh;
        }

        .home .site-footer {
            bottom: 0;
            width: 100%;
            position: absolute;
        }

    /*--------------------------------------------------------------
    # Univers
    --------------------------------------------------------------*/

        #esprit {
            padding-top: 0;
        }

        #esprit ul li .grid-item[rel="1"],
        #esprit ul li .grid-item[rel="3"] {
            transform: translateY(120px);
        }

        #esprit ul li .grid-item[rel="5"],
        #esprit ul li .grid-item[rel="7"] {
            transform: translateY(-120px);
        }

    /*--------------------------------------------------------------
    # Footer
    --------------------------------------------------------------*/

        .site-footer .footer-inner {
            padding: 0;
        }

        #footer-navigation ul li a {
            padding: 5px 14px;
            font-size: 16px;
        }

}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1203px
*/
@media only screen and (min-width: 768px) and (max-width: 1203px) and (orientation: landscape) {}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1203px
*/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    /*--------------------------------------------------------------
    # Links
    --------------------------------------------------------------*/

        .watermark {
            display: none;
        }

    /*--------------------------------------------------------------
    # Structure
    --------------------------------------------------------------*/

        /* Sections */

            /* Section: Content */
            .content-section {
                padding: 32px 24px;
            }

    /*--------------------------------------------------------------
    # Header
    --------------------------------------------------------------*/

        .site-header .main-navigation {
            width: 45%;
        }

    /*--------------------------------------------------------------
    # Magasins
    --------------------------------------------------------------*/

        #shops ul {
            display: block;
            margin: 0;
        }

        #shops ul .shop {
            width: 100%;
        }

}

/* Desktops */
@media only screen and (min-width: 1204px) {}

/* Large Desktops */
@media only screen and (min-width: 1395px) {}