/*----*/
                    /*--Basic set up--*/
                /*-------UjimaLive-------*/
                         /*----*/

*{
    margin:0;
    padding:0;
    box-sizing: border-box;    
}

.clearfix:after{
    content:"";
    display:table;
    clear:both;
}

html{
 background-color:rgb(247, 234, 218);
    font-family: 'Roboto', sans-serif;
    font-size:20px;
    font-weight:400;
    text-rendering:optimizeLegibility;
   }

.row {max-width: 1140px;
    margin:0 auto 0 auto;
     }


                             

                                 /*--Color Palat--*/

                               /*   background-color:#D35400;

                                    about,tag text & :#F39C12;
                            Icon & header color:#F39C12-*/
                                    /*--Color Palat--*/



                                            /*----*/
                                    /*--Header set up--*/
                                /*-------UjimaLive-------*/
                                         /*----*/

.title{margin-right: 20px;}


header{
    background-image:linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(sun540792355.jpg);
    height:100vh;
    background-size:cover;
    background-position: center;
    background-attachment: fixed;
    display: block;
    
    }





h1{margin:0;
    color:#D35400;
    text-align: center;
    font-size:250%;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 4px;
    margin-bottom: 50px;
}

.banner-text{
    margin:0;
    color:#D35400;
    font-size:150%;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 4px;
    margin-bottom: 50px;
    
}





h2{margin-top: 30px;
    font-size:200%;
    margin-bottom: 30px;
    color:#D35400;
    text-align: center;
    font-weight: 300;}


h3{margin-top: 20px;
    font-size: 70%;
    font-weight: 300;
    color:#40200a; 
    text-transform: uppercase;
}

.sf-h3{
    margin-top: 25px;
    margin-bottom: .5em;
    text-align: center;
    font-size: 60%;
    font-weight:250;
    color:#40200a; 
    text-transform: uppercase;
    
}

.product-text{
    margin-top: 20px;
    font-size: 80%;
    font-weight: 300;
    color:#40200a; 
    text-transform: uppercase;
    text-align: center;
    margin-bottom:10px;
}


h4{
    font-size: 60%;
    font-weight: 300;
    color:#40200a;
    padding-bottom: 10px;
    margin-top: 1em;
    text-align: left;
    
}



.mudcloth-dashiki-text{
    color:#40200a;
    font-size: 80%;
}


                                        /*----*/
                                /*--Header set up Grid addition--*/
                                    /*-------UjimaLive-------*/
                                        /*----*/





                                /*--Main-Navigation--*/







.sticky{
    display: none;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    background-color: rgba(191, 133, 41, 0.88); 
    z-index: 3;
    box-shadow: 0  2px 2px rgba(211, 84, 0, 0.93);
}

.sticky.main-nav li a:link,
.sticky.main-nav li a:visited{
    padding:8px 0px;
    color:#D35400;

}




.main-nav li{
    list-style: none;
    margin-right: 40px;
    margin-top: 50px;
    display:inline-block;

}



.main-nav li a:link,
.main-nav li a:visited{
    padding:8px 0px;
    color:#D35400;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    border-bottom: 2px solid transparent;
    transition:border 0.2s;
}

.main-nav li a:hover,
.main-nav li a:active{
    border-bottom: 2px solid #e67e22;
}

/*


.ul-li{display:block;
}

*/


                                    /*--Sticky-Navigation--*/



.sticky .main-nav li a:link,
.sticky .main-nav li a:visited{
    padding:8px 0px;
    color:#D35400;
    
}





.logo-box{
    position:absolute;
    top:15px;
    left:15px;
       
}





.header-ico{
    color:#D35400;
    font-size:100px;
    margin-bottom: 10px;
}





                                            /*----*/
                                        /*--Button set up--*/
                                    /*-------UjimaLive-------*/
                                             /*----*/

.btn:link,
.btn:visited
{   display:inline-block;
    color:#fff1c4;
    border:1px solid;
    border-radius: 200px;
    padding:10px 30px;
    font-weight: 300;
    text-decoration: none;
    transition: background-color 0.2s,border 0.2s color 0.2s;
}

.btn-full:link,
.btn-full:visited
    {
    background-color:#F39C12;
    border-radius: 200px;
    border:1px solid #FBEEE6 ;
    margin-right: 15px;
    }

.btn-ghost:link,
.btn-ghost:visited
     {
    border:1px solid #FBEEE6 ;
}

.btn:hover,
.btn:active{
    color:#F39C12;
    background-color:#D35400;
}


.btn-full:hover,
.btn-full:active{
    
    
    border:1px solid #16a085;
        }



.btn-ghost:hover,
.btn-ghost:active{
    border:1px solid #16a085;
    color:#F39C12;
}


                    
                                        /*----*/
                                    /*--animation--*/
                                /*-------UjimaLive-------*/
                                         /*----*/


.js--wp-1{
    opacity: 1;
}

.js--wp-1.animated{
    opacity: 1;
}


.js--wp-2{opacity: 0;}

.js--wp-2.animated{opacity: 1;}


.js--wp-3{opacity: 0;}

.js--wp-3.animated{opacity: 1;}




  




                                    /*----*/
                                /*--Text Box set up--*/
                            /*-------UjimaLive-------*/
                                     /*----*/


.ujima-text-box{
    position:absolute;
    width:1140px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%); 
    text-align:center;
    
}







.ico-text{display: flex;
          object-position: center;
          margin-top: 10px;
          text-align:center;
          font-size:75%;
          width: 260px;
          font-size:70%;
          color:#D35400;
          }









                                    /*----*/
                                /*--About- Section--*/
                            /*-------UjimaLive-------*/
                                     /*----*/


  .about-wrap>div{
           display: flex;
           flex-direction: row;
           flex-basis: auto;
           justify-content: space-between;
           }


    /*--about section text--*/
.about-head{
        color:#D35400;
        text-align: center;
        font-weight: 300;
        padding:25px;
}




.about-ico{
        color:#d35400;
        text-align:center;
        font-size:150px;
}


   


.about-section P{
    padding: 15px;
}

.about-text{
    color:#d35400;
    margin-left: 1em;
    margin-right: 1em;     
}

.about-text-1{
    margin-top: 1em;
    color:#d35400;
    margin-left: 1em;
    margin-right: 1em;  

}

.about-box{
    margin: 1em;
}

    






.ico-tag{
    text-align: center;
    color:#FBEEE6;
    font-weight: 300;
    font-size:110%;
    background-color: #F39C12;
    padding: 20px;
    border-radius: 5%;
    margin-right: 25px;
}
                                         /*----*/
                                    /*--Blog Section--*/
                                /*-------UjimaLive-------*/
                                         /*----*/

           /*--putting blog grid in comments--*/
 
    
.blog-container{
    display:grid; 
    box-sizing: border-box;
  
    grid-template-columns: (repeat 12, 1fr);
    grid-template-rows:(repeat 12, 1fr);
    width:auto;
    margin-left: 1.5rem;
    margin-right: 1.5em;
    margin-top: 40px;  
    grid-column-gap: 40px;
}

.main-text{
    grid-column-start:1;
    grid-column-end: 10;
    font-size:70%;
    background-color: #FEF5E7;
    Padding:1em;
    column-count: 4;
    width:100%;
   

        }

.main-text{
    font-size: 16px;
    color:#40200a;
    line-height: 1.5;
}

.other-blogs{
    font-size:80%;
    background-color:#FEF9E7;
    grid-column-start:10;
    grid-column-end:12;
    grid-row-start: 1;
    grid-row-end:4;
 
    Padding:10px;}

.author-box{
    background-color:#F39C12;
    font-size:80%;
    Padding:10px;
    grid-column-start:1;
    grid-column-end:8;
    grid-row-start: 3;
    grid-row-end: 4;}


      /*----*/
                                    /*--Start product pageredue--*/
                                /*-------UjimaLive-------*/
                                         /*--Product page redo--*/










  
                                    /*--Blog Section The Redo--*/
                                /*-------UjimaLive-------*/
                                         /*----*/





                                     /*----*/
                                /*--Icon Section--*/
                            /*-------UjimaLive-------*/
                                     /*----*/






/*------- Product Grid SET UP-------*/





/*------- store grid front page-------*/






                         /*--putting Store grid in comments--*/


.store-front{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));

}

.store-front img{
    display:block;
    width:100%;
    height:1fr;
    width:1fr;
    padding-left: 1em;
    padding-right:1em;
    
}


  

/*-------end-store front grid comments-------*/



/*-------Product Pages-------*/


   /*--line-break--*/











                  /*--New Product Container--*/


.product-grid{
    display:grid;
   
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));

    
    grid-template-rows: repeat (2, 300px);
    
}


.product-grid img{
    display:block;
    width:100%;
    height:1fr;
    width:1fr;
    padding-left: 1em;
    padding-right:1em;
       
}

 /*--contact form--*/ 


 /*--Form-Messages--*/ 

.contact-form{
    margin-top: 10em;
 
   
  
}



.form-messages{
    width:70%;
    margin:0 auto;
}

.form-messages-success{
    background-color: #0fd417;
    color:#fff;
  
    
}
.form-messages-failure{background-color: rgba(214, 28, 4, 0.9);
    color :white;
    
}





                                      /*--Community Section--*/
                                    /*-------UjimaLive-------*/
                           
.community-heading{margin-top:60px;}



                             
                                /*--Icon Section--*/
                            /*-------UjimaLive-------*/
                            /*--icon animmation end state--*/
.ico-row{
        display:block;
        float:left;
        width:25%;
        }

.ico-row{
        list-style: none;
        }

.ul{
    height:250px;
    width:300px;
 
    }



.ico-move{
    color:#e8e8e8;
    font-size: 70px;}


.contact-info{
    
    margin-left: 50px;
    margin-top: 50px;
    color:#D35400;
    
}





*--------------------------*/
      /*Footer Section*/
/*--------------------------*/

footer {
        background-color:#333;
        padding:50px;
        font-size:80%
        }

.footer-nav{
            list-style:none;
            float:left;
            }

.social-icons {
                list-style:none;
                float:right;
                }
.footer-nav li,
.social-icons li{
                display:inline-block;
                margin-right: 20px;
                }

.footer-nav li:last-child,
.social-icons li:last-child{
 margin-right:0;
            }


.footer-nav li a:link,
.footer-nav li a:visited,
.social-icons li a:link,
.social-icons li a:visited
   {text-decoration: none;
    border:0;
    color:#888;
    transition: color 0.2s;}

.footer-nav li a:hover,
.footer-nav li a:active{
    color:#ddd;
}

.social-icons li a:link,
.social-icons li a:visited{
    font-size:160%;  
}

.ion-social-facebook,
.ion-social-twitter,
.ion-social-googleplus,
.ion-social-instagram{
    Transition:color:0.2s;
}

.ion-social-facebook:hover{
    color:#3b5998;
}
.ion-social-twitter:hover{
    color:#00aced;
}
.ion-social-googleplus:hover{
    color:#dd4b39;
}

.ion-social-instagram:hover{
    color:#D35400;
}

.icon-asase-ye-duru:hover{
    color:#b0ddb0;
}



footer p{
        color:#888;
        text-align: center;
        margin-top:20px;
        }