/* ==========================================================================
   RESPONSIVE STYLES
 ========================================================================== */ 

/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
@media (max-width: 1199px) {

    /*------------------------------------------*/
    /*    General Fixes
    /*------------------------------------------*/
    .btn{
        margin-bottom: 10px;
    }

    /*------------------------------------------*/
    /*    Overlay
    /*------------------------------------------*/
    .header .overlay{
        height: 650px;
    }
    
    /*------------------------------------------*/
    /*    About Section
    /*------------------------------------------*/
    .about-img {
        padding-top: 65px;
    }

       #section_plaquette
{
}

#intro h1, #intro .text-white
{
    text-align: right;
}

#section2, #section3
{
    padding: 40% 0px 0px !important;
}

#section4
{
    padding: 30% 0 0 !important;
}

#section5
{
    padding: 15% 0 0 !important;
}

#adrien, #elodie, #walid
{
    margin-bottom: 90px !important;
}
        
}


/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
@media (min-width: 992px) {

    /*-------------------------------------------------------------*/
    /*    Set Container Width at 970 also for Large Devices Desktop
    /*-------------------------------------------------------------*/
    .container .grid-md{
        margin:0 auto;
        width: 970px;
    }

}


/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
@media (max-width: 991px) {

    /*-----------------------------------------------------------*/
    /*    Show Navbar Toggle and Hide Navbar Menu, Bootstrap Fixes
    /*-----------------------------------------------------------*/
    .navbar-fixed-top {
        background: #323a45;
        background: rgba(50,58,69,0.95);
        padding-top: 0;
        padding-bottom: 0;
    }


    .vmiddle
    {
        top: 50%%;
        left: inherit;
    }

    .clear-mobile
    {
        clear: both;
    }

    #features
    {
        display: none;
    }

    #features2
    {
        display: block;
        background-size: contain;
        padding-bottom: 60px;
    }

    #features2 .col-md-4
    {
        display: block;
        margin: 30px auto 0;
        width: 450px;
    }

    #about .container
    {
        width: 100% !important;
    }

    #about .col-md-4
    {
        width: 50%;
        float: left;
        text-align: center !important;
    }

    #section1
    {
        width: inherit !important;
    }

    #testimonials .wrapper-lg
    {
        padding: 40px 0 70px;
    }

    #form-news
    {
        background-position: bottom;
    }

    #form-news .wrapper-lg
    {
        padding: 0px;
    }

    #form-news .wrapper-lg h2
    {
        font-size: 30px;
        padding-top: 20px;
    }

    #marge-mobile h3
    {
        margin-bottom: 20px;
    }

    #section_plaquette
    {
        min-height: initial;
        background-size: cover;
    }

    #section1
    {
        padding-top: 0px !important;
    }

    #section1 .btn-box
    {
        display: none;
    }

    #poche-mobile
    {
        float: left;
        width: 50%;
    }

    #gauche-pochette
    {
        float: left;
        width: 50% !important;
    }

    #liste-image-clickb li
    {
        width: 50% !important;
        margin-bottom: 50px;
        text-align: left;
    }

    #replaceb
    {
        width: 100% !important;
    }

    #replaceb img 
    {
        margin: 0 auto;
        max-width: 100%;
    }

    .navbar-header {
        float: none;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: none;
    }
    
    .navbar-collapse.collapse {
        display: none!important;
    }

    .navbar-collapse.collapse.in {  
        display: block!important; 
    }

    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }

    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }

    .navbar-nav>li {
        float: none;
    }

    .navbar-nav>li>a {
        padding-top: 5px;
        padding-bottom: 5px;
        display:inline-block;
    }

    .navbar-nav>li>a.btn-nav {
        margin: 3px 0 5px 15px;
        padding: 5px;
    }

    #footer .wrapper-lg
    {
        padding: 40px 0 15px;
    }

    .contact-item
    {
        float: left;
        width: 33.33%;
    }

    .footer-copy
    {
        clear: both;
        margin-top: 120px;
    }

    /*------------------------------------------*/
    /*    Header Overlay and Hero Section
    /*------------------------------------------*/
    .header .overlay{
        height: 580px;
    }

    /*------------------------------------------*/
    /*   Image with Action
    /*------------------------------------------*/
    .img-with-action{
        padding-left: 15px;
        padding-right: 15px;
    }

    /*------------------------------------------*/
    /*   Testimonial Section
    /*------------------------------------------*/
    .early-testimonial .large{
        margin-bottom: 0;
    }

    .early-testimonial blockquote{
        margin-top: 50px;
    }

    .early-testimonial .testimonial-name{
        padding-top: 19px;
    }

    /*------------------------------------------*/
    /*    About Section
    /*------------------------------------------*/
    .about-img {
        padding-top: 20px;
    }

    /*------------------------------------------*/
    /*    Footer
    /*------------------------------------------*/
    .footer-right {
        margin-top: 50px;
    }

#section2, #section3
{
    padding: 40% 0px 0px !important;
}

#section4
{
    padding: 30% 0 0 !important;
}

#section5
{
    padding: 15% 0 0 !important;
}

#adrien, #elodie, #walid
{
    margin-bottom: 90px;
}
        

}


/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    
    /*----------------------------------------------------------------------*/
    /*    IMPORTANT!!! DISABLE WOW ANIMATION ON SMALL SCREENS (<768px)
    /*-----------------------------------------------------------------------*/
    
    .row
    {
        margin: 0 !important;
    }

    #contenu-pochette
    {
        margin: 0 !important;
        padding: 0 !important;
    }

    #liste-image-click li, #liste-image-clickb li, #liste-image-clickc li
    {
        width: 17%;
    }

    /*------------------------------------------*/
    /*    Typography
    /*------------------------------------------*/
    h2 {
        text-align: center;
    }

    .large {
        text-align: center;
    }

    /*------------------------------------------*/
    /*   Countdown Header
    /*------------------------------------------*/
    #section3 .col-md-8
    {
        width: 75%;
        margin: 0 auto;
    }

    .vmiddle
    {
        top: 50%%;
        left: inherit;
    }
    
    .countdown {
        width: 100%;
    }

    .modal-content
    {
        background: none;
    }

    .modal-title
    {
        width: 100%;
    }

    #register-form .clear
    {
        display: none;
    }

    #register-form input
    {
        width: 100%;
    }

    #register-form #lastname
    {
        margin-top: 10px;
    }

    .login .modal-dialog
    {
        margin: 50px auto;
    }

    .login .modal-header .close
    {
        color: #333;
    }

    .contact-item
    {
        float: none;
        width: 100%;
    }

    .contact-content br
    {
        display: none;
    }

    .footer-copy
    {
        margin-top: 40px;
    }

    .client-logo .col-md-3
    {
        width: 50%;
        display: inline;
    }

    #features2
    {
        display: none;
    }

    #features3
    {
        display: block;
    }

    #replacec img
    {
        max-width: 100%;
        margin: 0 auto;
    }

    #gauche-pochette
    {
        text-align: center;
        width: 100% !important;
        margin-bottom: 30px;
    }

    #poche-mobile
    {
        width: 100%;
    }

    #about .col-md-4
    {
        width: 100%;
    }

    #section_plaquette
    {
        background: url('http://www.theconnectedsleeve.by.derigueur.fr/assets/images/fond3-4.jpg') no-repeat top center;
    }
    
    .wrapper-lg
    {
        padding: 40px 0px !important;
    }

    .feature-box
    {
        margin-top: 30px;
    }

    #features .container
    {
        width: inherit !important;
    }

    #icon-mobile
    {
        display: block !important;
    }

    #icon-ordi
    {
        display: none !important;
    }

    h2
    {
        font-size: 30px;
    }
        
    .img-left
    {
        display: none;
    }

    #img-mobile
    {
        display: block !important;
        margin-bottom: 35px;
    }

    #img-mobile img 
    {
        max-width: 100%;
    }

    .clear
    {
        clear: both;
        margin-bottom: 20px;
    }

    .feature-box .icon-box i
    {
        height: auto !important;
    }

    #section1
    {
        width: 100% !important;
        padding-top: 0px !important;
    }

    .swiper-slide img 
    {
        margin: 0 auto;
    }

    #register-form2 span, #register-form2 input[type="submit"]
    {
        float: none;
    }

    #register-form2 span input
    {
        margin-top: 20px;
    }

    #register-form2 input[type="submit"]
    {
        width: 80%;
        margin: 20px auto 0;
        display: block;
    }

#section2, #section3
{
    padding: 10% 0px 0px !important;
}

#section4
{
    padding: 10% 0 0 !important;
}

#section5
{
    padding: 10% 0 0 !important;
}

#adrien, #elodie, #walid
{
    margin-bottom: 40px !important;
}
#section0
    {
        background-image: url(http://www.theconnectedsleeve.by.derigueur.fr/imgs/slide1m.jpg) !important;
        background-size: 100% 100% !important;
        background-attachment: inherit !important;
    }

    #section2
    {
        background-image: url(http://www.theconnectedsleeve.by.derigueur.fr/imgs/slide3m.jpg) !important;
        background-size: 100% 100% !important;
        background-attachment: inherit !important;
    }

    #section4
    {
        background-image: url(http://www.theconnectedsleeve.by.derigueur.fr/imgs/slide5m.jpg) !important;
    }

    #fp-nav
    {
        display: none;
    }

    #features
    {
        background: #f2f3f5;
    }

    .vmiddle
    {
        top: 25% !important;
    }

    #intro h1, #intro .text-white
    {
        text-align: center;
    }

    #intro h1
    {
        font-size: 25px;
    }

    #intro .text-white
    {
        font-size: 15px;
    }

    .logo-intro
    {
        padding-top: 20px;
        text-align: center;
        left: 50% !important;
        margin-left: -100px;
        top: 10px !important;
    }

    .hero-section p
    {
        margin-bottom: 15px;
    }

    

    #ces img 
    {
        width: 50px !important;
    }

    #down
    {
        margin-left: -41px;
        bottom: 10px !important
    }
    
    #section2
    {
        padding-top: 0px;
    }

    #marge-mobile
    {
        padding-top: 50px;
    }

    #content-section3 h2
    {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 50px;
        margin-top: 20px;
    }

    #section3 .wrapper-lg
    {
        padding-top: 0px !important;
    }

    #section3 .col-md-8
    {
        font-size: 13px;
    }

    #section4 .container
    {
        margin-top: 0px;
    }

    #section1 #gauche-pochette
    {
        position: inherit !important;
        left: inherit !important;
        opacity: 1!important;
    }

    #section1 #replaceimg
    {
        opacity: 1!important;
        position:inherit !important;
    }

    #section1 #droite-pochette
    {
        position: inherit !important;
        left: inherit !important;
        opacity: 1!important;
    }


    #section2 #marge-mobile
    {
        opacity: 1!important;
        position:inherit !important;
    }

    #section3 #content-section3
    {
        opacity: 1!important;
        margin-top: inherit !important;
        position: inherit !important;
    }

    #section4 form
    {
        opacity: 1!important;
        left: inherit !important;
        position: inherit !important;
    }

    #section5 #adrien, #section5 #elodie, #section5 #walid
    {
        opacity: 1!important;
        margin-top: inherit !important;
        position: inherit !important;
    }

    #adrien, #elodie, #walid
    {
        margin-bottom: 80px !important;
    }

    .client-logo img
    {
        padding: 10px 0;
    }

    #section1
    {
        padding-bottom: 0px !important;
    }

    #section2
    {
        padding: 0px !important;    
    }

    #section3, #section5
    {
        padding-top: 0px !important;
    }

    #section2 .logo-intro
    {
        display: none;
    }

    #marge-mobile h3
    {
        font-size: 20px;
    }

    #marge-mobile p
    {
        font-size: 12px;
    }

    #about-p
    {
        font-size: 13px;
    }

    #section4
    {
        padding: 10px 0 0 0 !important;
    }



    #section4 h2
    {
        font-size: 20px;
    }

    #section4 .wrapper-lg
    {
        padding: 0px !important
    }
}


/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
@media (max-width: 599px) {

    /*------------------------------------------*/
    /*   Typography
    /*------------------------------------------*/
    h1{
        font-size: 42px;
        line-height: 46px;
    }

    h2{
        font-size: 30px;
        line-height: 42px;
    }

    h3{
        font-size: 28px;
        line-height: 32px;
    }

    #section0
    {
        background-image: url(http://www.theconnectedsleeve.by.derigueur.fr/imgs/slide1m.jpg) !important;
        background-size: 100% 100% !important;
        background-attachment: inherit !important;
    }

    #section2
    {
        background-image: url(http://www.theconnectedsleeve.by.derigueur.fr/imgs/slide3m.jpg) !important;
        background-size: 100% 100% !important;
        background-attachment: inherit !important;
    }

    #section4
    {
        background-image: url(http://www.theconnectedsleeve.by.derigueur.fr/imgs/slide5m.jpg) !important;
    }

    #fp-nav
    {
        display: none;
    }

    #features
    {
        background: #f2f3f5;
    }

    .vmiddle
    {
        top: 25% !important;
    }

    #intro h1, #intro .text-white
    {
        text-align: center;
    }

    #intro h1
    {
        font-size: 25px;
    }

    #intro .text-white
    {
        font-size: 15px;
    }

    .logo-intro
    {
        padding-top: 20px;
        text-align: center;
        left: 50% !important;
        margin-left: -100px;
        top: 10px !important;
    }

    .hero-section p
    {
        margin-bottom: 15px;
    }

    

    #ces img 
    {
        width: 50px !important;
    }

    #down
    {
        margin-left: -41px;
        bottom: 10px !important
    }
    
    #section2
    {
        padding-top: 0px;
    }

    #marge-mobile
    {
        padding-top: 50px;
    }

    #content-section3 h2
    {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 50px;
        margin-top: 20px;
    }

    #section3 .wrapper-lg
    {
        padding-top: 0px !important;
    }

    #section3 .col-md-8
    {
        font-size: 13px;
    }

    #section4 .container
    {
        margin-top: 0px;
    }

    #section1 #gauche-pochette
    {
        position: inherit !important;
        left: inherit !important;
        opacity: 1!important;
    }

    #section1 #replaceimg
    {
        opacity: 1!important;
        position:inherit !important;
    }

    #section1 #droite-pochette
    {
        position: inherit !important;
        left: inherit !important;
        opacity: 1!important;
    }


    #section2 #marge-mobile
    {
        opacity: 1!important;
        position:inherit !important;
    }

    #section3 #content-section3
    {
        opacity: 1!important;
        margin-top: inherit !important;
        position: inherit !important;
    }

    #section4 form
    {
        opacity: 1!important;
        left: inherit !important;
        position: inherit !important;
    }

    #section5 #adrien, #section5 #elodie, #section5 #walid
    {
        opacity: 1!important;
        margin-top: inherit !important;
        position: inherit !important;
    }

    #adrien, #elodie, #walid
    {
        margin-bottom: 80px !important;
    }

    .client-logo img
    {
        padding: 10px 0;
    }

    #section1
    {
        padding-bottom: 0px !important;
    }

    #section2
    {
        padding: 0px !important;    
    }

    #section3, #section5
    {
        padding-top: 0px !important;
    }

    #section2 .logo-intro
    {
        display: none;
    }

    #marge-mobile h3
    {
        font-size: 20px;
    }

    #marge-mobile p
    {
        font-size: 12px;
    }

    #about-p
    {
        font-size: 13px;
    }

    #section4
    {
        padding: 10px 0 0 0 !important;
    }



    #section4 h2
    {
        font-size: 20px;
    }

    #section4 .wrapper-lg
    {
        padding: 0px !important
    }
        
}


/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
@media (max-width: 479px) {

    /*------------------------------------------*/
    /*   Typography
    /*------------------------------------------*/
    h1{
        font-size: 40px;
        line-height: 44px;
    }

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

    /*------------------------------------------*/
    /*    Hero-Section
    /*------------------------------------------*/
    .hero-section .btn{
        margin-bottom: 5px;
    }

    /*------------------------------------------*/
    /*    Early Access Modal
    /*------------------------------------------*/
    .login .modal-dialog{
        width: 80%;
        margin: 90px auto;
    }

    /*------------------------------------------*/
    /*    Early Access Fixes
    /*------------------------------------------*/
    .earlyaccess .btn{
        font-size: 10px;
        padding: 16px 5px 15px;
    }
    
    /*------------------------------------------*/
    /*   Early Access Feature Fixes
    /*------------------------------------------*/
    .icon-sm.feature-box-left{
        text-align:left;
        overflow: hidden;
    }

    

}