/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 30 mars 2019, 15:35:03
    Author     : samiasfaha
*/

@import url('https://fonts.googleapis.com/css?family=Montserrat|Nunito|PT+Sans|Poppins');
@import url('https://fonts.googleapis.com/css?family=Raleway:900');

*{
    /*font-family: 'Nunito', sans-serif; */
    /*font-family: 'Montserrat', sans-serif;*/

    /*font-family: 'Poppins', sans-serif;*/
    /*font-family: 'PT Sans', sans-serif;*/

}

.linkcontact{
    color: white;
}

@media only screen and (max-device-width: 480px){/*Mobile*/
    body{
        /*border:solid; border-color: red;*/
        min-height: 100%;
        position: relative;
    }

    /* ********************************     ECRAN 1 MOBILE    ******************************** */
    .ecran1{
        font-family: 'Raleway', sans-serif;
        /*height: 25em;*/
        height: auto;

        padding-bottom: 25%;

        /*background-image: url(../ressources/bg2.png);*/

        /*        background-image: url(../ressources/flou2.png);*/
        background-color: rgba(93, 218, 145, 0.8);

        background-position: 43% 0%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;  

        color:white;

        /* border-bottom: 1px #fff solid;
         box-shadow: 0px 3px 5px #aaa; 
        */

        /*filter: blur(3px);
        -webkit-filter: blur(3px);*/

        /*border:solid; border-color: chartreuse; */
    }

    .logo{
        padding-top: 5em;
        text-align: center;
    }

    .logotitre{
        padding-bottom: 20px;
        text-align: center;
    }

    .logoimg{
        margin-top: 3em;
        max-width: 60%;
    }

    .img-store{
        width: 73%;
    }

    .slogan{
        padding-top: 2em;
        padding-bottom: 2em;
        text-align: center;
        font-weight: normal;
        font-size: 600%;
    }

    .store{
        /*padding-top: 20em;*/
        text-align: center;

        font-family: 'Nunito', sans-serif;
    }
    
    .store img{
        
    }

     .telecharger{
         font-weight: bold;
         font-size: 40px;
    }
    
    .bientot{
        font-size: xx-large;
    }

    /*
    .store-soon{
        opacity: 0.5;
        filter: alpha(opacity=50);
    }*/


    /* ********************************     ECRAN 2 MOBILE    ******************************** */

    .ecran2{
        font-family: 'Nunito', sans-serif;

        /*padding-top: 2em;*/
        display: inline-block;
        /*background-color: rgba(46, 204, 112, 0.2);*/

        /*background-color: rgba(188, 240, 210, 1);*/
        height: auto;
        background-color: rgba(168, 237, 197, 1);

        /*border:solid; border-color: chartreuse;*/
        /*border-bottom:1px gray solid;*/
    }

    a[name='send']{
        font-weight: bold;
        font-size: 40px;
    }

    a[name='transport']{
        font-size: 35px;
    }

    a[name='transport']:link,
    a[name='transport']:visited,
    a[name='transport']:hover,
    a[name='send']:link,
    a[name='send']:visited,
    a[name='send']:hover,
    a[name='send']:active{
        text-decoration: none;
        /*color: #2ecc71;
        color:white; */
    }

    figure{
        margin-top: 1em;
        height: auto;
    }

    figcaption{
        margin-top: 15px;
    }

    .envoyer1, .envoyer2, .envoyer3, .envoyer4,
    .transporter1, .transporter2, .transporter3, .transporter4{
        margin-bottom: 15em;
    }

    .img-ccm{
        height: 70em;
    }

    .img-ccm-num{
        height: 4em;
        margin-top: 1em;
        margin-bottom: 5px;
    }

    .ccm-legends{
        font-weight: bold;
        color: gray;
        font-size: 35px;
    }

    .logotitre{
        padding-top: 3em;
        color:white;
        /*background-color: rgba(188, 240, 210, 1);*/
        background-color: rgba(168, 237, 197, 1);
    }

    .logotitre.floatable {
        position: fixed;
        z-index: 99;
        top: 0;
        width:100%;
    }

    .logotitre-hide{
        padding-top: 3em;
        color:white;
        background-color: rgba(188, 240, 210, 1);
    }

    .logotitre-hide.floatable-hide {
        top:10px;
        z-index: 9999;

    }

    /* ********************************     ECRAN 3 MOBILE   ******************************** */

    .ecran3{
        font-family: 'Nunito', sans-serif;
        /*height: 28em;*/

        padding-bottom: 15rem;
        padding-top: 5rem;
        color:white;

        text-align: center;
        font-weight: 400;
        display: inline-block;
        background-color: rgba(93, 218, 145, 1);
        /*background-color: rgba(46, 204, 112, 0.8);*/
        /*border:solid; border-color: chartreuse;*/
    }


    .rounded-circle{
        /*border-radius: 5% !important;*/
        /*border:1px solid grey;*/
    }

    .mystyle{
        padding: 16!important;
        border-color: white!important;
        border-width: 3px!important;
        width:210px;
        height:210px;
    }

    .market{
        padding-left: 15em;
        padding-right: 15em;
        padding-top: 12em;
    }

    .market-legends{
        font-size: 36px;
    }

    h2{
        font-size: 60px !important;
    }

    /* ********************************     ECRAN 4 MOBILE    ******************************** */

    .ecran4{
        font-family: 'Nunito', sans-serif;
        height: auto;
        background-color: lightgrey;
        /*box-shadow: 0px -3px 5px #aaa; */
        padding-top: 4em;
        color:white;

        text-align: center;
        font-size: 38px;

        background-color: rgba(46, 204, 112, 0.5);

        /*position: absolute; bottom: 0;*/
        /*border:solid; border-color: fuchsia;*/ 
    }

    h3{
        font-size: 52px !important;
        font-weight: bold;
    }

    .footer-part1, .footer-part2, .footer-part3{
        margin-bottom: 130px;
    }

    .fb, .insta, .yt{
        width: 110px;
        height: 110px;
    }

    .fb, .insta{
        margin-right:40px;
    }

    .ecran4 li{
        margin-top:2em;
    }

    .ecran4 ul{
        list-style:none;
        padding: 0;
    }

    hr.two{
        border-top: 1px solid gray;

        /*box-shadow: 0px -3px 5px #aaa; */
    }


}


@media only screen and (min-device-width: 480px){/*Ecran*/
    body{
        /*border:solid; border-color: red;*/
        min-height: 100%;
        position: relative;
    }

    /* ********************************     ECRAN 1 ECRAN    ******************************** */

    .ecran1{
        font-family: 'Raleway', sans-serif;
        /*height: 25em;*/
        height: 40em;

        /*background-image: url(../ressources/bg2.png);*/

        /*        background-image: url(../ressources/flou2.png);*/
        background-color: rgba(93, 218, 145, 0.8);

        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;  

        color:white;

        /* border-bottom: 1px #fff solid;
         box-shadow: 0px 3px 5px #aaa; 
        */

        /*filter: blur(3px);
        -webkit-filter: blur(3px);*/


        /*border:solid; border-color: chartreuse; */
    }

    .logo{
        text-align: center;
    }

    .logotitre{
        text-align: center;
        padding-bottom: 20px;
    }

    .logoimg{
        margin-top: 3em;
        max-width: 40%;
    }

    .img-store{
        /*padding-top: 2em;*/
        height: auto;
        width: 60%;
    }

    .slogan{
        padding-top: 1em;
        text-align: center;
        font-weight: normal;
        /*font-size: 25px;*/
        font-size: 250%;
    }

    .store{
        font-family: 'Nunito', sans-serif;
        padding-top: 2em;
        text-align: center;

    }
    
    .telecharger{
         font-weight: bold;font-size: medium;
    }
    
    .bientot{
        font-size: medium;
    }

    /*
    .store-soon{

        opacity: 0.5;
        filter: alpha(opacity=50);
    }*/

    /* ********************************     ECRAN 2 ECRAN    ******************************** */

    .ecran2{
        font-family: 'Nunito', sans-serif;
        height: auto;
        padding-top: 2em;

        background-color: rgba(188, 240, 210, 1);

        /*background-color: rgba(46, 204, 112, 0.2);*/

        /*border:solid; border-color: chartreuse;*/
        /*border-bottom:1px gray solid;*/


    }

    a[name='send']{
        font-weight: bold;
        font-size: 19px;
    }

    a[name='transport']{
        font-size: 17px;
    }

    a[name='transport']:link,
    a[name='transport']:visited,
    a[name='transport']:hover,
    a[name='send']:link,
    a[name='send']:visited,
    a[name='send']:hover,
    a[name='send']:active{
        text-decoration: underline;
        /*color: #2ecc71;*/
        color:#1b96fe;
    }

    figure{
        margin-top: 1em;
    }

    figcaption{
        margin-top: 15px;
    }

    /* ********************************     ECRAN 3 ECRAN    ******************************** */

    .ecran3{
        font-family: 'Nunito', sans-serif;
        /*height: 28em;*/

        padding-bottom: 13rem;
        padding-top: 7rem;
        color:white;

        text-align: center;
        font-weight: 400;
        display: inline-block;

        background-color: rgba(46, 204, 112, 0.8);
        /*border:solid; border-color: chartreuse;*/
    }

    .footer-part2 img{
        width: 40px;
        height: 40px;
        margin-right:10px;
        margin-bottom: 10px;
    }

    .img-ccm-num{
        max-height: 25px;
        margin-bottom: 5px;
    }

    .ccm-legends{
        font-weight: bold;
        color: gray;
        font-size: 18px;
    }

    .img-ccm{
        max-height: 400px;   
    }

    .market-legends{
        font-size: 16px;
    }

    .rounded-circle{
        /*border-radius: 5% !important;*/
        /*border:1px solid grey;*/
    }

    .mystyle{
        padding: 16!important;
        border-color: white!important;
        width:150px;
        height:150px;
    }

    .market{
        padding-left: 5em;
        padding-right: 5em;
        padding-top: 4em;
    }

    /* ********************************     ECRAN 4 ECRAN    ******************************** */

    .ecran4{
        font-family: 'Nunito', sans-serif;
        height: auto;
        background-color: lightgrey;
        /*box-shadow: 0px -3px 5px #aaa; */
        padding-top: 2em;
        color:white;

        background-color: rgba(46, 204, 112, 0.5);

        /*position: absolute; bottom: 0;*/
        /*border:solid; border-color: fuchsia;*/ 
    }

    .ecran4 li{
        margin-top:2em;
    }

    .ecran4 ul{
        list-style:none;
        padding: 0;
    }

    hr.two{
        border-top: 1px solid gray;

        /*box-shadow: 0px -3px 5px #aaa; */
    }
}