body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}


.cafetitlos{
padding-left: 16px;}

.menu input[type=text] {
    float: right;
    padding: 6px;
    margin-top: 8px;
    margin-right: 16px;
    border: none;
    font-size: 17px;
    background: black;
   color: whitesmoke;
  }


  
.menu {
    overflow: hidden;
    background-color:#4e2806;
}

.menu a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.menu a:hover {
    background-color:black;
    color: whitesmoke;
  }
  
 .menu a.active {
    background-color:black;
    color: whitesmoke;
  }
  
header{
      padding: 1em;
      color: black;
      clear: left;
      text-align: center;
  }
  
  
section {
    max-width: 1000px;
    width: 90%;
    margin: auto;
    padding: 1.5em 0em;
   color: black;
}

article#art {
    border-bottom: 2px dotted #552c07;
    padding-bottom: 0.5em;
    margin-bottom: 2em;
    position: relative;
}


article p {
    font-weight:900;
    color:black ;
    margin-left: 0px;
}

main {
    float: left;
    width: 60%;
}

aside {
    float: right;
    width: 30%;
  border-color: black;
}

article h3  {
    font-weight:1500;
    color: black;
    font-size: 1.4em;
}    

.read_more  {
	text-align:right;
    font-style:italic;
   }

.read_more a:hover {
    color:#552c07;
}


.read_more a {
    color: black;
    
}

@media screen and (max-width: 868px) {
    main {
       float: none;
       width: 100%;
    }
   
    aside {
       float: none;
       width: 100%; 
    }
    
    .photome #me {
        display: none;
    }
   .photome #me2 {
    display: none;
    }
    .photocup #cup {
        display: none;
    }
    .freddo #cof {
        display: none;
    }
   
}

@media screen and (max-width: 1028px) {
    img#varieties {
        display: none;  
    }
    .container {
        display: none;
    }
} /*απο τα 1028 και κατω px οι φωτογραφιες της ιστοσελιδας Types θα εξεφανιζονται*/



  @media screen and (max-width: 625px) {
    article h3 {
        text-align: center;
    }
    
    article p {
        margin-left: 0px;
    }

    iframe {
       display: none;
    }

    .photome #me {
        display: none;
    }
   .photome #me2 {
       display: none;
    }

    .photocup #cup {
        display: none;
    }

    .freddo #cof {
        display: none;  
    }
}

   #bg {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -99;
    opacity: 0.7;
}

footer {

    padding: 1em;
      color: black;
      clear: left;
      text-align: center;
      font-weight: bolder;
}

address a {
    color:whitesmoke;
    font-weight: lighter;
}

iframe {
    margin: 6em;
    
}

.photome #me {
    width: 190px;
    height: 170px;
    margin-left: -3em;
    margin-top: 8em;
}


.photome #me2 {
   width: 200px;
   height: 170px;
   position: absolute; 
   margin-left: 0em;
   margin-top: 8em;

}

.photocup #cup {
    width: 300px;
    height: 200px;
    margin-left: 0em;
    margin-top: 8em;
}

.freddo #cof {
margin-left: 0.25em;

}


.places h5 {
    color:rgb(68, 16, 0);
    font-style:italic ;
    font-weight: bolder;
    font-size: initial;
    width: 1000px;
    margin-top: 100px;    
    
}
 


.places #pl1 {
width: 300px;
height: 200px;
margin-bottom: -13em;
}



.places #pl2 {
width: 300px;
height: 200px;
margin-left: 20em;
}




.places #pl3 {
width: 300px;
height: 200px;
margin-bottom: -13em;
}




.places #pl4 {
width: 300px;
height: 200px;
margin-left: 20em;

}





.places #pl5 {
width: 300px;
height: 200px;
margin-bottom: -13em;
}





.places #pl6 {
width: 300px;
height: 200px;
margin-left: 20em;
}

img.black {
    border: 2px solid black;
}


article.c {
    font-weight:1000;
}


img#varieties {
    width: 400px;
    height: 400px;
    margin-left: -7em;
    margin-top: 8.5em;
    border: 2px solid black;
}



  .image {
    width:520px;
    height:259px;
    margin-left: -7em;
    margin-top: 16em;
    border: 2px solid black;
    backface-visibility: hidden;
    opacity: 1; 
    display: block; 
    width: 100%;
  }
   
.container {
    position: relative; 
  }
   
  .container:hover .image {
    opacity: 0.3;
  }
  
  .middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
     
  .container:hover .middle {
    opacity: 1;
  }
  
  .text {
    background-color: rgb(90, 23, 2);
    color: black;
    font-size: 16px;
    padding: 16px 32px;
  }