/******************************************************
	Smaller than 1020px
*******************************************************/

@media screen and (max-width: 1020px) {
    .wrapper {
        width: 690px;
    }

    /*-------------------------------------------*\
		Main Header Styling
	\*-------------------------------------------*/

    #header-social {
        width: 140px;
    }
    #header-social ul {
        gap: 15px;
    }

    #header-search {
        width: 210px;
    }

    #header-search #s {
        width: 118px;
        padding: 0 14px;
    }

    /*** Main Nav Styling ***/

    #main-nav {
        width: 690px;
    }

    #main-nav.stick-it {
        position: relative;
        opacity: 1;
    }

    .stick-it {
        animation-name: none;
    }

    #menu-icon {
        position: relative;
        z-index: 15;
        width: 46px;
        height: 48px;
        float: left;
        margin-left: 1px;
        border-bottom: 2px solid #f34e4e;
        background: url(../images/menu-icon.png) no-repeat rgba(255, 255, 255, 0.05);
        cursor: pointer;
        transition: background 0.3s;
    }

    #menu-icon:hover {
        background-color: rgba(255, 255, 255, 0.03);
    }

    #main-nav .menu {
        position: absolute;
        left: 0;
        top: 50px;
        z-index: 4000;
        display: none;
        width: 290px;
        padding-top: 12px;
        padding-bottom: 16px;
        background-color: #2f2f2f;
        opacity: 0.98;
    }

    #main-nav li {
        clear: both;
        line-height: 34px;
        border-right: none;
    }

    #main-nav li::after {
        display: none;
    }

    #main-nav li a {
        height: 34px;
        padding-left: 20px;
        border-right: none;
        font-size: 13px;
        font-weight: 400;
    }

    #main-nav li a:hover,
    #main-nav ul li ul .current-menu-item a:hover {
        color: #ccc;
        background-color: transparent;
    }

    /*** Main Nav Drop Down Menu ***/

    .drop-sign,
    #main-nav ul li ul .drop-sign {
        display: none;
    }

    #main-nav .menu li ul {
        position: static;
        float: none;
        display: block !important;
        background-color: transparent;
        border: none;
        padding-left: 16px;
    }

    #main-nav .menu li ul li {
        border: none;
        line-height: 34px;
    }

    #main-nav ul li ul a {
        height: 34px;
    }

    /*-------------------------------------------*\
		Main Sidebar Styling
	\*-------------------------------------------*/

    #main-sidebar {
        width: 690px;
        float: none;
    }

    #main-sidebar .widget {
        width: 670px;
    }

    #main-sidebar .widget-title {
        width: 690px;
    }

    .widget_molabout img {
        width: 100%;
    }

    .video-widget-wrap,
    .widget_molavid iframe {
        height: 372px;
    }

    /*-------------------------------------------*\
		Main Footer Styling
	\*-------------------------------------------*/

    #main-footer .widget {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
        margin-left: 0;
    }

    #main-sidebar .mc4wp-form-fields p:nth-child(1) input,
    #main-footer .mc4wp-form-fields p:nth-child(1) input {
        width: calc(100% - 24px);
    }

    .widget-divider {
        display: none;
    }

    #copyright p {
        padding: 20px 0;
        line-height: 2.5em;
    }
    #copyright p a,
    #copyright p span {
        white-space: nowrap;
    }
}

/******************************************************
	Smaller than 690px
*******************************************************/

@media screen and (max-width: 690px) {
    body {
        padding-left: 10px;
        padding-right: 10px;
    }
    .wrapper,
    #content {
        max-width: 100%;
    }

    .top-banner-ads {
        margin-left: -10px;
        margin-right: -10px;
        max-width: 100vw;
    }
    #header-elements,
    #featured-slider {
        display: none;
    }

    #main-nav {
        width: 100%;
    }

    #posts-wrap,
    #posts-wrap .post {
        width: 100%;
    }

    img,
    iframe {
        width: 100%;
    }

    #main-header {
        height: auto !important;
        margin-bottom: 7px;
        margin-left: -10px;
        margin-right: -10px;
    }
    #logo {
        float: none;
        text-align: center;
    }
    #logo-img,
    #logo h1 {
        height: 80px;
        float: none;
    }
    #logo-img img {
        max-height: 100% !important;
        width: auto;
    }
    #menu-navigation-dans-entete-pages {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        width: calc(100% - 94px);
        align-items: stretch;
    }
    .menu-navigation-dans-entete-pages-container li {
        border-bottom: 2px solid #eb6c0b;
        background: rgba(255, 255, 255, 0.05);
    }
    .menu-navigation-dans-entete-pages-container li a {
        color: #fff;
        padding: 0 9.5px;
        font-weight: 600;
        display: flex;
        align-items: center;
        height: 48px;
        border-left: 1px solid #2f2f2f;
    }
    .menu-navigation-dans-entete-pages-container li:nth-child(2) a {
        margin-left: -2.35px;
    }
    .menu-navigation-dans-entete-pages-container li:after {
        display: none;
    }

    body:not(.home, .archive, .category) .bandeau-entete-page {
        background: none;
    }
    body:not(.home, .archive, .category) .wrapper #content {
        margin-top: -20px;
    }

    /*-------------------------------------------*\
        Main Sidebar Styling
    \*-------------------------------------------*/

    #main-sidebar {
        width: 100%;
    }
    #main-sidebar .widget-title {
        width: calc(100% + 20px);
    }
    #main-sidebar .widget {
        width: calc(100% - 20px);
    }

    .video-widget-wrap,
    .widget_molavid iframe {
        height: 169px;
    }

    /*-------------------------------------------*\
		Single Page Styling
	\*-------------------------------------------*/

    .single-thumb {
        width: calc(100% + 20px);
        height: auto;
    }

    #page-wrap .post-media {
        width: 320px;
        height: 189px;
    }

    .post-tags {
        margin-bottom: 15px;
    }

    #single-share {
        float: left;
    }

    #related-posts .small-post {
        width: 300px;
        margin-right: 0;
    }

    #related-posts .small-post:last-child {
        margin-top: 20px;
    }

    #comment {
        width: 96%;
    }
    #featured-slider,
    #featured-slider .slides > li {
        height: auto;
        max-width: 100%;
    }
    #featured-slider .slides > li .slide-cap {
        background: #333;
        position: static;
        width: calc(100% - 30px);
        padding: 15px;
    }
    .slide-cap-bg {
        display: none;
    }
    #slider-nav a {
        top: calc((410 / 690 * 100vw) - 35px);
    }
    #slider-nav .flex-prev {
        left: 5px;
    }
    #slider-nav .flex-next {
        right: 5px;
    }

    /*-------------------------------------------*\
        Contact Page / Error Page Styling
    \*-------------------------------------------*/

    .wpcf7 p {
        float: none;
    }
    .wpcf7-text,
    .wpcf7-textarea {
        width: 100%;
    }

    /*** Error Page Styling ***/

    #error-wrap #searchform {
        width: 300px;
    }

    #error-wrap #s {
        width: 202px;
    }

    /*-------------------------------------------*\
		Main Footer Styling
	\*-------------------------------------------*/

    #main-footer {
        padding-left: 20px;
        padding-right: 20px;
        margin-left: -10px;
        margin-right: -10px;
    }
    .pu_facebook_widget {
        text-align: center;
        display: none;
    }
}

@media only screen and (max-width: 1019px) {
    .mobile-hidden {
        display: none;
    }
    .desktop-hidden {
        display: block;
    }
}
@media only screen and (min-width: 1020px) {
    .mobile-hidden {
        display: block;
    }
    .desktop-hidden {
        display: none;
    }
}
