@font-face {
    font-family: 'yekan';
    src: url(../fonts/yekan.woff);
    src: url(../fonts/yekan.eot?#iefix) format("embedded-opentype"),
    url(../fonts/yekan.woff) format("woff"), url(../fonts/yekan.ttf) format("truetype"), url(../fonts/yekan.svg#yekan) format("svg");
    font-weight: normal;
    font-style: normal
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'yekan';
}

html {
    direction: rtl;
}

p {
    font-size: 1em;
}

h1 {
    font-size: 1.9em;
}

#wrapper {
    width: 1200px;
    height: auto;
    margin: 15px auto 0 auto;
}

#logo, #slider, #main-footer, #wrapper > #product > div {
    border-radius: 0.3em;
}

#logo-container {
    width: auto;
    text-align: center;
    min-height: 100px;
    height: auto;
}


#logo {
    width: 6em;
    height: 6em;
    margin: 0 auto;
    vertical-align: middle;
}

/*#wrapper > #slider {*/
    #slider {
        width: auto;
        /*width: 1920px;*/
        height: 33.33vw;
        
        
        /*https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio*/
        /*aspect-ratio: 3/1;*/
        
        margin-bottom: 15px;
        /*background-color: rgba(220,220,220,.8);*/
        padding: 25px;
        background-image: url("../images/offer.jpg");
        
        background-position: center;
        /*background-position:0 -270px;*/ /* ?  use in media queries */
        
        background-size: cover;
    }
    
    #slider > h1 {
        font-size: 1.6em;
        text-shadow: 0 0 3px #000;
        color: #fd7cc2;
        font-weight: normal;
    }
    #slider > span {
        font-size: 0.9em;
        text-shadow: 0 0 3px #000;
        color: #ffdaea;
        font-weight: normal;
    }
    
    
    
    .flex-container {
        display: flex;
        flex-wrap: wrap;
        font-size: 2.2em;
        text-align: center;
        justify-content: space-around;
        
    }
    .flex-container>div{
        flex:12%;
        padding: 0.9em 0.1em;
        background-color: #ddd;
        margin:0.2em;
        border-radius: 0.1em;
        color: #444;
    }
        
    #wrapper > #product {
        width: 100%;
        height: 350px;
        margin-bottom: 15px;
        /*background-color: #ccc;*/
    }
    
    #wrapper > #product > div {
        width: 24%; /* 4*24=96 */
        height: 350px;
        background-color: #f1f1f1;
        /*border: 1px #333 solid;*/
        float: right;
        padding: 15px;
        /*text-align: justify;*/
        text-align: right;
        font-size: 0.7em;
    }
    
    #wrapper > #product > div header{
        font-size: 1.2em;
        color: #f30290;
        text-shadow: 0 0 1px #fff;
    }
    
    #wrapper > #product > div:nth-child(2) {
        margin: 0 1.33%;
    }
    #wrapper > #product > div:nth-child(3) {
        margin-left: 1.33%;
    }
    
    #wrapper > #product > div > img {
        width: 100%;
        /*float: left;*/
        margin:auto;
        border-radius: 0.4em;
    }
    
    
    #wrapper > #product > div > span {
        font-size: 1.2em;
        font-weight: bold;
    }
    /*#wrapper > #product > div > a {
        text-decoration: none;
        color: orangered;
        !*font-size: 1.2em;*!
        !*font-weight: bold;*!
    }*/
    
    #wrapper > #product > div > a.a-btn{
        text-decoration: none;
        padding: 0.3em 0.7em;
        background-color: #1ccb6b;
        color:#fff;
        text-shadow: 0  0 1px #000;
        border-radius: 0.3em;
        transition: all 300ms linear;
    }
    #wrapper > #product > div > a.a-btn:hover{
        background-color: #ff1170;
    }
    
    
    .grid-container {
        display: grid;
        grid-gap: 10px 15px;
        grid-template-columns: auto auto auto;
        /* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); more than 3 columns when we don't use media query  */
        grid-template-columns: repeat(3, 1fr);  
        background-color: #333;
        padding: 20px;
    }
    .grid-container>div{
        background-color: #555;
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 2em;
        text-align: center;
        min-height: 200px;
    }
    .grid-container>div#grid1{
        grid-column: 1;
        /* grid-row: 1 / 3; */
        grid-row: span 2;
    }
    
    
    
    
    
    #main-footer {
        display: block;
        width: auto;
        height: 50px;
        background-color: #222;
        color:#aaa;
        text-align: center;
        padding-top: 15px;
        padding-bottom: 10px;
        font-size: 0.8em;
        /* clear: both; */
        /*
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        */
        border-radius: 0;
    }
    
    /* start  responsive */
    
    /* media query */
    /*Large devices (desktops, less than 1200px)*/
    @media all and (max-width: 1200px) {
        #wrapper {
            width: 100%;
        }
        
        #wrapper > #slider {
            width: 100vw;
            height: 33.33vw;
        }
    }
    
    /*Medium devices (tablets, less than 992px)*/
    @media all and (max-width: 991.98px) {
        #wrapper > #product {
            background: transparent;
        }
        
        #wrapper > #product > div {
            width: 49%;
            height: auto;
        }
        
        #wrapper > #product > div:nth-child(1) {
            margin-left: 2%;
        }
        
        #wrapper > #product > div:nth-child(2) {
            margin: 0;
        }
        #wrapper > #product > div:nth-child(3) {
            margin-left: 2%;
        }
        
        #wrapper > #product > div:nth-child(3) , #wrapper > #product > div:last-child {
            margin-top:15px;
            margin-bottom: 15px;
            
        }
        .grid-container {
            grid-template-columns: repeat(2, 1fr);
        }
        
        #wrapper > #main-footer {
            /*clear: right;*/ /* clear:both  if we had float:left and float:right  before   */
            /*margin-top: 290px;*/
        }
    }
    
    
    /*Small devices (landscape phones, less than 768px)*/
    @media all and (max-width: 767.98px) {
        #slider {
            text-align: center;
            width: 100%;
        }
        
        #wrapper > #product > div {
            width: 100%;
            float: none;
            height: auto;
        }
        
        #wrapper > #product {
            height: auto;
        }
        
        #wrapper > #product > div:nth-child(2) {
            /*margin: 2% 0;*/
            margin: 15px 0;
        }
        
        #wrapper > #product > div:nth-child(3) {
            margin: 0;
        }
        
        #wrapper > #product > div > img {
            width: 100%;
            margin: 0 0 10px 0;
        }
        
        .grid-container {
            grid-template-columns: repeat(1, 1fr);
            
        }
        
    }
    
    /*X-Small devices (portrait phones, less than 576px)*/
    @media all and (max-width: 575.98px) {
        #slider {
            /*height: 125px;*/
            width: 100%;
        }
        
        #slider > h1 {
            font-size: 1em;
        }
        
        #main-footer {
            height: auto;
            /*line-height: 50%;*/
            font-size: .8em;
        }
    }