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

.container-parents {
  
    width:100%;
    height:100%; 
    
}

.container-fixed{
    width:100%;
    height:140px;
    position:fixed;
    background:white;
}
.container-all {
    width:100%;
    height:140px;
    position: relative;
}
.container-img {
    width:100%;
    height:110px;
    position: relative;
    border-bottom:1px solid white;
}


 
#str1 {
    width:350px;
    height:100px;
    position: absolute;
    top:5%;
    left:0%;
       
    
}

#str2 {
    width:350px;
    height:98px;
    position: absolute;
    top:3%;
    left:75%;
       
    
}

#btnhead {
    width:135px;
    height:105px;
    border: 5px solid white;
    position: absolute;
    top:1%;
    left:65%;
    background:green;
    color:white;
    font-weight: bolder;
    z-index:2;
       
    
}

#btnhead a {
    text-decoration: none;
    color: white;
}

.warning {
    color:red;
    text-align: center;
    font-style: italic;
    font-weight: 200;
}



.container-imgout {
    width:100%;
    height:110px;
    position:absolute;
    top:0%;
    left:0%;
    background: black;
    opacity: 0.5;
}

.container-heading {
    width:500px;
    height:110px;
    position: absolute;
    top:-5%;
    left:30%;
}

.container-heading h1 {
    color:black;
    text-align: center;
   font-style:normal;
    font-family: monospace;
    font-size: 40px;
}


.container-heading p {
    color:black;
    text-align: center;
    font-style:italic;
    font-family: monospace;
    font-weight: 100;
}
#menup {
    color:rgb(12, 91, 122);
    text-align: center;
    font-style:italic;
    font-family: monospace;
    font-weight: bolder; 
    font-size: 20px;
}

#contact20{
    text-align: center;
    color: slategrey;
    font-weight: lighter;
    margin-top: -10px;
    font-size: 10px;
}

.categ {
    width:100%;
    height:80px;
    background:white;
    position: fixed;
    top:20%;
    left:0%;
}

.categ  div { 
    width:100%;
    height:25px;
    border: 1px solid white;
    display: flex;
    text-align: center;

}

.categ  div div  {
     width:50%;
     height:25px;
     border: 1px solid white;
     background: white;
     text-align: center;
     padding: 0px 220px;
}

.categ  div div a {
    text-align: center;
     color: green;
     font-size: 12px;
     font-style: oblique;
     text-decoration: none;
}

/*----------------------------tabslite-------------------------------------*/

.tab {
    display:block;
    width:30px;
    height:3px;
    margin:5px;
    background:green;
    
    
}




#tobbst {
    display: block;
    position: absolute;
    top:55%;
    left:45%;
    z-index :100;
    
}



#tobbst.is-active .tab:nth-child(1){
    transform: translateY(8px) rotate(45deg);
}

#tobbst.is-active .tab:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
}

#tobbst.is-active .tab:nth-child(2){
    opacity:0;
}


/*----------------------------tabslite-------------------------------------*\
/*----------------------------------------nav----------------------------*/


.nav {
    
    width:20%;
    height:250px;
    background: green;
    position: absolute;
    top:41%;
    left:-40%;
    transition: 1.5s;
    
    
}


.nav.active {
    
    width:20%;
    height:250px;
    background: green;
    position: absolute;
    top:41%;
    left:0%;
    transition: 1.5s;
}


.nav ul {
    width:100%;
    height:100%;
    display: flex;
    flex-direction: column;
    background: green ;
    list-style: none;
    
    
}
.nav ul li {
    width:100%;
    height:50px;
    background:  green;
    border:2px solid white;
    border-top:none;
    margin-left: 0px;
   padding:10px 0px;
    text-align: center;


}

.nav ul li a {
   text-align: center;
   color:white;
   text-decoration: none;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;



}


#logout {
    width:275px;
    height:45px;
    color:white;
    background: green;
    border: 2px solid white;
    margin-left: 10px;
   padding:10px 0px;
    text-align: center;
    position: absolute;
    left:-4%;
    top:99%;
}

.session {
    color:green;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}



/*----------------------------------------endnav----------------------------*/

/*------------------------------------------container-publish------------------*/

.inputprofile {
    display:none;
}
.label {
    display:block;
    position:relative;
    width:150px;
    height:30px;
    background: green;
    color: white;
}

#button {
    background: white;
    color:green;
    font-weight: 100;
    font-style: oblique;
    border:none;
    padding: 10px 10px;
    cursor:pointer;
   
}
/*-------------------------containerten------------------------*/

.container-ten {
    width:100%;
    height:100%;
    position:absolute;
    top:5%;
    left: 0%;
    display: flex;
   justify-content: center;
    z-index:-100;
    
    
    
}

.container-tenpubl {
    width:100%;
    height:100%;
    position:absolute;
    top:5%;
    left: 0%;
    display: flex;
  
    z-index:-100;
    
    
    
}



.container-tenoneoi {
    width:50%;
    height:100%;
    margin-top:200px;
    margin-left: 20px;
    padding:0px 100px;
    
    
}

.container-tenon {
    width:25%;
    height:100%;
}


.container-tenone {
    width:50%;
    height:100%;
    margin-top:200px;
    padding:0px 0px;
    
    
}

.container-tenoneee  {
     width:25%;
    height:100%;
}
.container-tenoneeee {
    width:100%;
    display: flex;
    position: relative;
}

.container-tenonee {

    width:100%;
    height:150px;
    
 

}

.container-tenoneei {
    width:100%;
    height:100%;
    
}

.container-tenonepic {
    width:30%;
    height:150px;
    position: relative;
    
    
}



.container-tenoneinfo {
 width:70%;
    height:150px;
    border: 1px solid  green;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
   

}

#pictures {
    position: absolute;
    width:100%;
    height: 150px;
}

.produit {
    text-align: center;
    color:grey;
    font-weight: 900;
    font-size: 20px;
    margin-top: 20px;
    text-transform: uppercase;
}


.prix{

    text-align: center;
    color: green;
     font-weight: 900;
    font-size: 15px;
    
    text-transform: uppercase;
}

.picturesmore {
       
    width:100%;
    height: 400px;
}

#picturesmore1 {
    width:100%;
    height:400px;
}

.description {
    color:grey;
    font-weight: 200;
    font-style: normal;
}

.commune {
    font-weight: 400;
    font-size: 15px;
    text-transform: uppercase;
    color: grey;
}
.contact {
    color: green;
    font-weight: 800;
    font-size: 17px;
}


.email {
    font-weight: 400;
    font-size: 20px;
    color: grey;
}

.details  {
    text-align: center;
    margin-top: 10px;
}

.details a {
    color: green;
    text-decoration: none;
    font-style: oblique;
}



.publier {
    text-align: center;
    color:green;
}

.avez {
    text-align: center;
}

.avez a {
    text-align: center;
    color:red;
    font-style: italic;
    font-size: 15px;
}

#heading {
    text-align: center;
    color:gray;
}

.container-tenone input {
    width:400px;
    height:30px;
    border-bottom: 1px solid green;
    border-top: none;
    border-left: none;
    border-right: none;
    outline: none;
    padding: 0px 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   
}

.container-tenoneoi input {
    width:400px;
    height:30px;
    border-bottom: 1px solid green;
    border-top: none;
    border-left: none;
    border-right: none;
    outline: none;
    padding: 0px 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   
}
#submitreg {
    width:400px;
    height:30px;
    background: green;
    
    color: white;
    border: none;
    font-weight: bolder;
    cursor:pointer;
    
}

.fill {
    color:red;
}

/*----------------------------container-nine----------------------------------*/

.nine {

    width:100%;
    height:500px;
    display: flex;
    position: absolute;
    top:60%;
    z-index:-1;
}
.container-nine {
    width:100%;
    height:500px;
    display: flex;
    position: absolute;
    top:75%;
    left:0%;
    
}

.container-nineone {
    width:50%;
    height:350px;
    padding:10px 10px;
    background: white;
  
    position:relative;
    border-right: 1px solid green;
    
}

.container-ninetwo {
    width:50%;
    height:350px;
    
    position: relative;
   
    position:relative;
  
    padding:10px 30px;
    
}

#profilepic {
    width:80px;
    height:80px;
    border-radius: 50%;
    border: 3px solid green;
}

.frontheading {
    margin-top: -60px;
    margin-left: 90px;
    font-size: 20px;
    text-decoration: none;
    font-style: italic;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: gray;
}

.frontheading a {
    font-size: 15px;
    color:green;
    text-decoration: underline;
    font-style: italic;
}

#deletepost {
    background: green;
    border: none;
    color:white;
    font-weight: 600;
    padding:10px 10px;
    border-radius: 20px;
    margin-left:100px;
    margin-top: 10px;
}


/*-----------------------selection-------------------------*/
.selection {
     width: 100%;
    height:520px;
    background: red;
    position:absolute;
    top:32%;
    left: 0%;
}
.selectionone {
    width: 100%;
    height: 520px;
    background: black;
    position: relative;
}

#kin1 {
    position: absolute;
    top: 0%;
    left: 0%;
}
#kin3 {
    position: absolute;
    top: 0%;
    left: 60%;
}

#kin5 {
    position: absolute;
    top: 0%;
    left: 25%;
    width: 230px;
    height: 500px;
}

#kin6 {
    position: absolute;
    top: 0%;
    left: 85%;
}
.selectiontwo {
    width: 100%;
    height:100%;
    position: absolute;
    top: 0%;
    left: 0%;
    background: gray;
    opacity: 0.8;
    border: 1px solid green;
}

.selectionthree {
    width: 100%;
    height:100%;
    position: absolute;
    top: 0%;
    left: 0%; 
    display:flex;
}

.selectionthree div {
     width:250px;
     height:100px;
     margin-left:5px;
     margin-top:120px;
     background:green;
     text-align:center;
     padding:30px 0px;
}

.selectionthree div a {
   
   color:white;
     
}

/*---------------container-eleven--------------------*/


/*---------------------------------------containerhundred---------------*/



.hundred {
    width:100%;
    height:100%;
    background: white;
    display: flex;
    justify-content: center;
    position: absolute;
    top:40%;

}

.hundred-one {
    width:50%;
    height:100%;
    background: white;
    padding: 0px 100px;
}

.topic{
    text-align: center;
    color: green;
    font-size: 19px;

}

.topicd{
    text-align: center;
    color: grey;
    font-size: 19px;

}

.telimage {
    color:green;
    text-align: center;
    font-size: 17px;
}

.hundred-one input {
    width:500px;
    height:40px;
    border-radius: 20px;
    border: 1px solid green;
    padding:10px 10px;
    outline:none;
}

#bodyone {

    width:500px;
    height:130px;
    border-radius: 20px;
    border: 1px solid green;
    padding:10px 10px;
    outline:none;
    resize: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;

}

#subpublish {
    padding: 10px 20px;
    background: green;
    color:white;
    font-weight: 800;
    border: 2px solid green;
    margin-left: 200px;
      
    cursor: pointer;
}



.hundredupload input {
    width:500px;
    height:40px;
    border-radius: 20px;
    border: 1px solid green;
    padding:10px 10px;
    outline:none;
  
}
.hundredupload label {
    margin: auto;
}
/*------------------------inputfile-------------------------------*/

.input {
    display:none;
}

label {
    display:block;
    position:relative;
    background: green;
    width:150px;
    height:30px;
    padding:5px 10px;
    color:white;
    font-weight: 900;
    border-radius: 20px;
    text-align: center;
    margin-left: 130px;
    margin-top:5px;
    cursor: pointer;
}

#num-of-files{
   
    margin-top: 5px;
    color: green;
    font-weight: 900;
    text-align: center;

}

#num-of-files200{
   
    margin-top: 5px;
    color: green;
    font-weight: 900;
    text-align: center;


}

#num-of-files210{
   
    margin-top: 5px;
    color: green;
    font-weight: 900;
    text-align: center;

}

#num-of-files220{
   
    margin-top: 5px;
    color: green;
    font-weight: 900;
    text-align: center;

}

#num-of-files2001{
   
    margin-top: 5px;
    color: green;
    font-weight: 900;
    text-align: center;


}

#num-of-files2101{
   
    margin-top: 5px;
    color: green;
    font-weight: 900;
    text-align: center;

}

#num-of-files2201{
   
    margin-top: 5px;
    color: green;
    font-weight: 900;
    text-align: center;

}

#num-of-files2005{
   
    margin-top: 5px;
    color: green;
    font-weight: 900;
    text-align: center;

}

#num-of-files2105{
   
    margin-top: 5px;
    color: green;
    font-weight: 900;
    text-align: center;


}

#num-of-files2205{
   
    margin-top: 5px;
    color: green;
    font-weight: 900;
    text-align: center;

}

#num-of-files2006{
   
    margin-top: 5px;
    color: green;
    font-weight: 900;
    text-align: center;

}

#num-of-files2106{
   
    margin-top: 5px;
    color: green;
    font-weight: 900;
    text-align: center;


}

#num-of-files2206{
   
    margin-top: 5px;
    color: green;
    font-weight: 900;
    text-align: center;

}

#num-of-files2007{
   
    margin-top: 5px;
    color: green;
    font-weight: 900;
    text-align: center;

}

#num-of-files2107{
   
    margin-top: 5px;
    color: green;
    font-weight: 900;
    text-align: center;


}

#num-of-files2207{
   
    margin-top: 5px;
    color: green;
    font-weight: 900;
    text-align: center;

}


#num-of-filesemploi{
   
    margin-top: 5px;
    color: green;
    font-weight: 900;
    text-align: center;

}

.input2 {
    display:none;
}


#num-of-files2{
   
    margin-top: 5px;
    color: green;
    font-weight: 900;
     text-align: center;

}

.input3 {
    display:none;
}


#num-of-files3{

    margin-top: 5px;
    color: green;
    font-weight: 900;
     text-align: center;

}

#num-of-files100{
 
    margin-top: 5px;
    color: green;
    font-weight: 900;
     text-align: center;

}

#num-of-files110{
    
    margin-top: 5px;
    color: green;
    font-weight: 900;
     text-align: center;

}

.picupl {
    display: flex;
    justify-content: center;
}

/*-----------------------profilen-------------------------*/



/*--------------------------------endsearch--------------------------------*/
@media screen and (max-width: 430px){

 
.container-all {
    width:100%;
    height:100px;
    position: relative;
}


.container-fixed{
    width:100%;
    height:100px;
    position:fixed;
}
.container-img {
    width:100%;
    height:80px;
    position: relative;
    border-bottom:1px solid white;
}

#str1 {
    width:90px;
    height:80px;
    position: absolute;
    top:1%;
    left:0%;
       
    
}

#str2 {
    width:20px;
    height:20px;
    position: absolute;
    top:3%;
    left:80%;
       
    
}
#btnhead {
    width:90px;
    height:80px;
    border: 5px solid green;
    position: absolute;
    top:2%;
    left:76%;
    background:green;
    color:white;
    font-weight: bolder;
       
    
}




.container-imgout {
    width:100%;
    height:100px;
    position:absolute;
    top:0%;
    left:0%;
    background: black;
    opacity: 0.5;
}

.container-heading {
    width:100%;
    height:80px;
    position: absolute;
    top:1%;
    left:0%;
    padding:0 15px;
}

.container-heading h1 {
    color:black;
    text-align: center;
    font-style:normal;
    font-family: monospace;
    font-size: 20px;
}



.container-heading p {
    color:black;
    text-align: center;
    font-style:italic;
    font-family: monospace;
    font-weight: 100;
    margin-top:-5px;
} 


#menup {
    color:green;
    text-align: center;
    font-style:italic;
    font-family: monospace;
    font-weight: bolder; 
    font-size: 12px;
    
    }


    .categ {
    width:100%;
    height:80px;
    background:white;
    position: fixed;
    top:14%;
    left:0%;
    z-index :-2;
}

.categ  div { 
    width:100%;
    height:25px;
    border: 1px solid white;
    display: flex;
    text-align: center;

}

.categ  div div  {
     width:50%;
     height:25px;
     border: 1px solid white;
     background: white;
     text-align: center;
     padding: 0px 10px;
}

.categ  div div a {
    text-align: center;
     color: green;
     font-size: 12px;
     font-style: oblique;
     text-decoration: none;
}

/*-----------------------------tabs-----------------------*/

.tab {
    display:block;
    width:30px;
    height:3px;
    margin:5px;
   background:green;
  
    
}



#tobbst {
    display: block;
    position: absolute;
    top:45%;
    left:45%;
    z-index :100;
    
}
/*------------------------endtabs-----------------------*/
/*---------------------------------------------accom------------*/


/*-----------------------accomend------------------------------------*/
/*------------------------containerfrontsstart---------------------*/

/*-----------------------------container-frontsend----------------*/



/*-------------------nav-------------------------------------*/
.nav {
    
    width:50%;
    height:250px;
    background:green;
     position: absolute;
    top:80%;
    left:-50%;
    transition: 1.5s;
    
    
}


.nav.active {
    
    width:50%;
    height:250px;
    background:green;
    position: absolute;
    top:80%;
    left:0%;
    transition: 1.5s;
}


.nav ul {
    width:100%;
    height:100%;
    display: flex;
    flex-direction: column;
    background: green;
    list-style: none;
    
    
}
.nav ul li {
    width:100%;
    height:50px;
    background: green;
    border:2px solid white;
    border-top:none;
    margin-left: 0px;
   padding:10px 0px;
    text-align: center;


}

.nav ul li a {
   text-align: center;
   color:white;
   text-decoration: none;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;



}


#logout {
    width:195px;
    height:45px;
    color:white;
    background:green;
    border: 2px solid white;
    margin-left: 10px;
   padding:10px 0px;
    text-align: center;
    position: absolute;
    left:-9.5%;
    top:99%;
}

/*-------------------nav-------------------------------------*/



#promread{
    color:green;
    font-weight: lighter;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style: italic;
    font-size: 12px;
   

}

/*----------------------------------container-ten-----------------------*/

.container-ten {
 
    width:100%;
height:100%;
position:absolute;
top:5%;
left: 0%;
display: flex;
justify-content: center;
z-index:-100;

}


.container-tenone {
    width:100%;
    height:100%;
    margin-top:230px;
    padding:0px 6px;
    
    
}

.container-tenoneoi {
    width:100%;
    height:100%;
    margin-top:230px;
    margin-left: 0px;
    padding:0px 6px;
    
    
}

.container-tenon {
  display: none;
}




.container-tenoneee  {
    display:none;
}



.publier {
    text-align: center;
    color:green;
}

.avez {
    text-align: center;
}

.avez a {
    text-align: center;
    color:red;
    font-style: italic;
    font-size: 15px;
}

#heading {
    text-align: center;
    color:green;
}

.container-tenone input {
    width:100%;
    height:30px;
    border-bottom: 1px solid green;
    border-left: none;
    border-right: none;
    border-top: none;
    outline: none;
    padding:0px 5px;
   
}


.container-tenoneoi input {
    width:100%;
    height:30px;
    border-bottom: 1px solid green;
    border-left: none;
    border-right: none;
    border-top: none;
    outline: none;
    padding:0px 5px;
   
}
#submitreg {
    width:100%;
    height:30px;
    background: green;
    color: white;
    font-weight: bolder;
    
}
/*--------------------------containertenend------------------*/

.container-nine {
    width:100%;
    height:100%;
    display: flex;
    flex-direction: column;
    
    position: absolute;
    top:25%;
    left:0%;
    
}

.container-nineone {
    width:100%;
    height:100%;
    background: white;
   
    
}

.container-ninetwo {
    width:100%;
    height:350px;
    
   
    
}


/*---------------selection-------------------*/
.selection {
     width: 100%;
    height:100%;
    background: red;
    position:absolute;
    top:29%;
    left: 0%;
}
.selectionone {
    width: 100%;
    height: 100%;
   
    position: relative;
    background:black;
}

#kin1 {
    position: absolute;
    top: 0%;
    left: 0%;
    width:150px;
    height:50%;
}

#kin2 {

     position: absolute;
    top: 0%;
    left: 20%;
    width:150px;
    height:50%;
    
}
#kin3 {
    position: absolute;
    top: 20%;
    left: 25%;
    width:200px;
    height:50%;
}

#kin4 {
       position: absolute;
    top: 35%;
    left: 35%;
    width: 230px;
    height: 430px;
    width:100px;
    
}

#kin5 {
    position: absolute;
    top: 0%;
    left: 25%;
    width: 230px;
    height: 500px;
    width:150px;
    height:200px;
}

#kin6 {
    position: absolute;
    top: 0%;
    left: 70%;
    width:100px;
    height:40%;
}
.selectiontwo {
    width: 100%;
    height:100%;
    position: absolute;
    top: 0%;
    left: 0%;
    background: gray;
    opacity: 0.8;
    border: 1px solid green;
}

.selectionthree {
    width: 100%;
    height:100%;
    position: absolute;
    top: 0%;
    left: 0%; 
    display:flex;
    flex-direction:column;
    padding: 0 15%;
}

.selectionthree div {
     width:250px;
     height:70px;
     margin-left:5px;
     margin-top:20px;
     background:green;
     text-align:center;
     padding:30px 0px;
}

.selectionthree div a {
   
   color:white;
     
}



/*---------------------------------------containerhundred---------------*/
.hundred {
    width:100%;
    height:100%;
    background: red;
    display: flex;
    justify-content: center;
    position: absolute;
    top:40%;

}

.hundred-one {
    width:100%;
    height:100%;
    background: white;
    padding: 0px 20px;
}

.topic{
    text-align: center;
    color: green;
    font-size: 19px;

}

.hundred-one input {
    width:100%;
    height:40px;
    border-radius: 20px;
    border: 1px solid green;
    padding:10px 10px;
    outline:none;
}


.hundredupload input {
 width:100%;
    height:40px;
    border-radius: 20px;
    border: 1px solid green;
    padding:10px 10px;
    outline:none;
  
}
.hundredupload label {
    margin: auto;
}

#bodyone {

    width:100%;
    height:130px;
    border-radius: 20px;
    border: 1px solid green;
    padding:10px 10px;
    outline:none;
    resize: none;

}

#subpublish {
    padding: 10px 20px;
    background: green;
    color:white;
    font-weight: 800;
    border: 2px solid green;
    margin-left: 120px;
    cursor: pointer;
}

#heading {
    text-align: center;
    color:gray;
}

/*-----------------------containersocial-------------------------*/


/*-----------------------profilen-------------------------*/


.singleposttwo img {
    width:100%;
    height:300px; 
}

.singleposttwo p {
    width:100%;
    font-weight: 600;
    color: gray;
    font-family: 'Segoe UI', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    color:black
     
}

.text {
    width:100%;
    font-weight: 100;
    color: gray;
    font-family: 'Segoe UI', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/*--------------onlineorder-----------------------*/

.container-search {
    width:100%;
    height:100vh;
    position:fixed;
    top:89.5%;
    left:0%;
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.container-searchone {
    width:100%;
    height:100%;
    
}


}







/*----------------------------------------------------------------------------------*/




/*----------------------------endevent--------------------------------------------*/

/*-------------------------------------theteam-------------------------------------*/


/*------------------------------endpromo-----------------------------------*/






/*------------------------------endevent--------------------------------*/