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


footer {
	clear:both;
    text-align:center ;
    width:100%;
    margin-bottom:20px;
}

footer img {
     height:44px;
    margin-top:3px;
    margin-bottom:3px;
}






/* Desktops and laptops ----------- */
@media all and (min-width:1280px) {
  /* CSS rules */




header {
    width:100%;
    background-color: aliceblue;
    }

header h1 {
    position: relative;
    bottom:120px;
    text-align: center;
    font-size:2.5em;
    }
    
 img#logo {    
    width:150px;
    display:inline;
    margin-left:230px;
    border-radius:70%; 
    margin-top:40px; 
    }




nav {
    width:100%;
    height:50px;
    background-color: aqua;
    }

ul.topnav li {
    list-style-type: none;
    float:left;
    width:20%;
    text-align: center;
    font-size:1.9em;
    font-weight: 800;
    position:relative;
    line-height: 50px;
    }

ul.topnav li a {
    color:red;
    text-decoration: none;
    display:block;
    }

ul.topnav li a:hover {
    background:#4184Bf;
    display:block;
    }

    .icon, row {
        display:none;
    }    

main {
   
    
    background-color: beige;
   
    }

.third {
    width:31.81%;
    float:left;
    margin:0.712%; 
    }


.icon  {
        display:none;
    }   

.blueberry {
    width:50%;
    
    }
.blueberry .slides {
    top:10px;
    }
    

}

/* Tablets  (portrait and landscape) ----------- */
@media all and (min-width:768px) and (max-width:1279px) {
  /* CSS rules */
    
header {
    width:100%;
    background-color: green;
    }

header h1 {
    position: relative;
    
    text-align: center;
    font-size:2.5em;
    }
    
 img#logo {    
    width:150px;
    display:block;
    margin:0 auto; 
    border-radius:70%; 
    padding-top:10px; 
    }

    nav {
    width:100%;
    height:50px;
    background-color: aqua;
    }

ul.topnav li {
    list-style-type: none;
    float:left;
    width:20%;
    text-align: center;
    font-size:1.9em;
    font-weight: 800;
    position:relative;
    line-height: 50px;
    }

ul.topnav li a {
    color:red;
    text-decoration: none;
    display:block;
    }

ul.topnav li a:hover {
    background:#4184Bf;
    display:block;
    }
    
.icon {
        display:none;
    }    
    
main {
   background-color: beige;   
    }
    
   .third {
    width:47.50%;
    float:left;
    margin:1.212%; 
    }

    
    .row {
        width:95%;
        
    }   
    
    .blueberry {
    width:90%;
    
    }

}
    
/* Smartphones (portrait and landscape) ----------- */
@media all and (max-width:767px) {
  /* CSS rules */
    
    header {
        width:100%;
        background-color: blue;
    }  

header h1 {
    position: relative;
    
    text-align: center;
    font-size:2.5em;
    }
    
 img#logo {    
    width:100px;
    display:block;
    margin:0 auto; 
    border-radius:70%; 
    padding-top:10px; 
    }
    
  

    
   
ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
   }    
    
    
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  ul.topnav.responsive li {
    float: none;
    display: inline;
  }

  ul.topnav.responsive li a {
    display: block;
    text-align: left;
    float:none;  
  }
    
.topnav {
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {
    list-style-type: none;
    float:left;
    font-weight: 800;
    position:relative;
    
    }
 

.topnav a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}
    
    .third {
        margin:30px;
    }   
    
    .blueberry {
    width:100%;
        
    }
 

    
    
    
    
    
    
}
    
    
