*
{
    padding:0;
    margin:0;
    line-height: 1.2em;
} 
    
body {
    background: #EBEAE8; 
    text-align: center;
}
 
.home
    {top: 0;
    width: 2%;
    position: absolute;
    left: 0;
    margin: 1%;
    cursor: pointer;}
    
.home:hover{opacity: 0.5;}

.download1{background: #FF7565; color: white; border:none;border-radius: 10px 10px ;padding: 1.5%;margin-top:5%;}
.download1:hover{background: #ED6358}
a{text-decoration: none;color: white;font-family: 'Fjalla One', sans-serif;font-size: 25px;}
    
h1
    {color: #090022;
    font-family: 'Fjalla One', sans-serif;
    text-transform: uppercase;
    padding-top: 12%;
    padding-bottom: 2%
    font-size: 6vh;
    font-size: 6vw;}
    
h2
    {color: #090022;
    font-family: 'Fjalla One', sans-serif;
    text-transform: uppercase;
    margin-top: 1%}

.sidenav {
    height: 100%;
    width: 0px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #090022;
    overflow-x: hidden;
    transition: 1s;
    text-align: center;
    -webkit-box-shadow: 5px 0px 76px 3px rgba(0,0,0,0.39);
-moz-box-shadow: 5px 0px 76px 3px rgba(0,0,0,0.39);
box-shadow: 5px 0px 76px 3px rgba(0,0,0,0.39);
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
    text-align: center;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}


#main {
    transition: margin-left 1s;
 -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
    
.eye
    {width: 80%;
    position: absolute;
    margin-left: -40%;}
    
.colour
    {color: #47BDA4;}
    
.kerning
    {padding-right: 0.3vw;}
    
.kerning2
    {padding-right: 0.2vw;
    padding-left: 0.1vw;}
    
.logo
    {width: 50%;
    margin: 20px; 
    }
    
.logo-box
    {width: 100%;
    height: 8%;
    background:#1D1A33;}
    
.tile-container{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
cursor: pointer;
}
.tile{
  flex:1 0 250px;
  align-self:center;
  max-width:100%;
width: 250px;
    height: 250px;
  min-height: 10rem;
  background:white;
  
  // Min width
  &:nth-child(2n+3){
    flex-basis:300px;
  }
  &:nth-child(4n+5){
    flex-basis:450px;
  }
  // End Min width
  
  // Color
  &:nth-child(odd){
     border-top-color:teal;
  }
  &:nth-child(even){
     border-top-color:wheat;
  }
  // End Color
  
}
    
.content
    {height: 200px;}
    
.tile-content{
  flex:3 0 100%;
  align-self:center;
  max-width:100%;
width: 250px;
    height: 500px;
  min-height: 10rem;
  background:white;
  
  // Min width
  &:nth-child(2n+3){
    flex-basis:300px;
  }
  &:nth-child(4n+5){
    flex-basis:450px;
  }
  // End Min width
  
  // Color
  &:nth-child(odd){
     border-top-color:teal;
  }
  &:nth-child(even){
     border-top-color:wheat;
  }
  // End Color
  
}

@media screen and(max-width:500px){
  .tile{
     flex-basis:100% !important;
     max-width:100%;
  }
}

#box1{background-image: url(images/pic1.png);background-size: 100%;transition: background 0.5s ease}
#box1:hover{background-image: url(images/pic5.png);background-size: 100%;transition: background 0.5s ease}
#box2{background-image: url(images/pic2.png);background-size: 100%;transition: background 0.5s ease}
#box2:hover{background-image: url(images/pic8.png);background-size: 100%;transition: background 0.5s ease}
#box3{background-image: url(images/pic3.png);background-size: 100%;transition: background 0.5s ease}
#box3:hover{background-image: url(images/pic7.png);background-size: 100%;transition: background 0.5s ease}
#box4{background-image: url(images/pic4.png);background-size: 100%;transition: background 0.5s ease}
#box4:hover{background-image: url(images/pic6.png);background-size: 100%;transition: background 0.5s ease}
#box5{background-image: url(images/pic5.png);background-size: 100%;transition: background 0.5s ease}
#box5:hover{background-image: url(images/pic12.png);background-size: 100%;transition: background 0.5s ease}
#box6{background-image: url(images/pic6.png);background-size: 100%;transition: background 0.5s ease}
#box6:hover{background-image: url(images/pic15.png);background-size: 100%;transition: background 0.5s ease}
#box7{background-image: url(images/pic7.png);background-size: 100%;transition: background 0.5s ease}
#box7:hover{background-image: url(images/pic14.png);background-size: 100%;transition: background 0.5s ease}
#box8{background-image: url(images/pic8.png);background-size: 100%;transition: background 0.5s ease}
#box8:hover{background-image: url(images/pic13.png);background-size: 100%;transition: background 0.5s ease}
#box9{background-image: url(images/pic11.png);background-size: 100%;transition: background 0.5s ease}
#box9:hover{background-image: url(images/pic6.png);background-size: 100%;transition: background 0.5s ease}
#box10{background-image: url(images/pic10.png);background-size: 100%;transition: background 0.5s ease}
#box10:hover{background-image: url(images/pic1.png);background-size: 100%;transition: background 0.5s ease}
#box11{background-image: url(images/pic9.png);background-size: 100%;transition: background 0.5s ease}
#box11:hover{background-image: url(images/pic2.png);background-size: 100%;transition: background 0.5s ease}
#box12{background-image: url(images/pic12.png);background-size: 100%;transition: background 0.5s ease}
#box12:hover{background-image: url(images/pic5.png);background-size: 100%;transition: background 0.5s ease}
#box13{background-image: url(images/pic14.png);background-size: 100%;transition: background 0.5s ease}
#box13:hover{background-image: url(images/pic3.png);background-size: 100%;transition: background 0.5s ease}
#box14{background-image: url(images/pic13.png);background-size: 100%;transition: background 0.5s ease}
#box14:hover{background-image: url(images/pic8.png);background-size: 100%;transition: background 0.5s ease}
#box15{background-image: url(images/pic15.png);background-size: 100%;transition: background 0.5s ease}
#box15:hover{background-image: url(images/pic6.png);background-size: 100%;transition: background 0.5s ease}

span{color:#FF7565;text-decoration:underline;}

/*-----------------------------------------food-------------------------------------------------------*/
    
#box1-1{background-image: url(images/f-icon1.png);background-size: 100%;transition: background 0.5s ease}
#box1-1:hover{background-image: url(images/f-icon15.png);background-size: 100%;transition: background 0.5s ease}
#box2-1{background-image: url(images/f-icon2.png);background-size: 100%;transition: background 0.5s ease}
#box2-1:hover{background-image: url(images/f-icon6.png);background-size: 100%;transition: background 0.5s ease}
#box3-1{background-image: url(images/f-icon3.png);background-size: 100%;transition: background 0.5s ease}
#box3-1:hover{background-image: url(images/f-icon5.png);background-size: 100%;transition: background 0.5s ease}
#box4-1{background-image: url(images/f-icon4.png);background-size: 100%;transition: background 0.5s ease}
#box4-1:hover{background-image: url(images/f-icon12.png);background-size: 100%;transition: background 0.5s ease}
#box5-1{background-image: url(images/f-icon5.png);background-size: 100%;transition: background 0.5s ease}
#box5-1:hover{background-image: url(images/f-icon8.png);background-size: 100%;transition: background 0.5s ease}
#box6-1{background-image: url(images/f-icon6.png);background-size: 100%;}
#box6-1:hover{background-image: url(images/f-icon10.png);background-size: 100%;transition: background 0.5s ease}
#box7-1{background-image: url(images/f-icon7.png);background-size: 100%;}
#box7-1:hover{background-image: url(images/f-icon5.png);background-size: 100%;transition: background 0.5s ease}
#box8-1{background-image: url(images/f-icon8.png);background-size: 100%;}
#box8-1:hover{background-image: url(images/f-icon14.png);background-size: 100%;transition: background 0.5s ease}
#box9-1{background-image: url(images/f-icon9.png);background-size: 100%;}
#box9-1:hover{background-image: url(images/f-icon2.png);background-size: 100%;transition: background 0.5s ease}
#box10-1{background-image: url(images/f-icon10.png);background-size: 100%;}
#box10-1:hover{background-image: url(images/f-icon6.png);background-size: 100%;transition: background 0.5s ease}
#box11-1{background-image: url(images/f-icon11.png);background-size: 100%;}
#box11-1:hover{background-image: url(images/f-icon4.png);background-size: 100%;transition: background 0.5s ease}
#box12-1{background-image: url(images/f-icon12.png);background-size: 100%;}
#box12-1:hover{background-image: url(images/f-icon15.png);background-size: 100%;transition: background 0.5s ease}
#box13-1{background-image: url(images/f-icon13.png);background-size: 100%;}
#box13-1:hover{background-image: url(images/f-icon10.png);background-size: 100%;transition: background 0.5s ease}
#box14-1{background-image: url(images/f-icon14.png);background-size: 100%;}
#box14-1:hover{background-image: url(images/f-icon2.png);background-size: 100%;transition: background 0.5s ease}
#box15-1{background-image: url(images/f-icon15.png);background-size: 100%;}
#box15-1:hover{background-image: url(images/f-icon6.png);background-size: 100%;transition: background 0.5s ease}
/*-----------------------------------------food-------------------------------------------------------*/
    
/*-------------------------------------------landscape------------------------------------------------*/
    
#box1-2{background-image: url(images/l-icon1.png);background-size: 100%;transition: background 0.5s ease}
#box1-2:hover{background-image: url(images/l-icon15.png);background-size: 100%;transition: background 0.5s ease}
#box2-2{background-image: url(images/l-icon2.png);background-size: 100%;transition: background 0.5s ease}
#box2-2:hover{background-image: url(images/l-icon6.png);background-size: 100%;transition: background 0.5s ease}
#box3-2{background-image: url(images/l-icon3.png);background-size: 100%;transition: background 0.5s ease}
#box3-2:hover{background-image: url(images/l-icon5.png);background-size: 100%;transition: background 0.5s ease}
#box4-2{background-image: url(images/l-icon4.png);background-size: 100%;transition: background 0.5s ease}
#box4-2:hover{background-image: url(images/l-icon12.png);background-size: 100%;transition: background 0.5s ease}
#box5-2{background-image: url(images/l-icon5.png);background-size: 100%;transition: background 0.5s ease}
#box5-2:hover{background-image: url(images/l-icon8.png);background-size: 100%;transition: background 0.5s ease}
#box6-2{background-image: url(images/l-icon6.png);background-size: 100%;}
#box6-2:hover{background-image: url(images/l-icon10.png);background-size: 100%;transition: background 0.5s ease}
#box7-2{background-image: url(images/l-icon7.png);background-size: 100%;}
#box7-2:hover{background-image: url(images/l-icon5.png);background-size: 100%;transition: background 0.5s ease}
#box8-2{background-image: url(images/l-icon8.png);background-size: 100%;}
#box8-2:hover{background-image: url(images/l-icon14.png);background-size: 100%;transition: background 0.5s ease}
#box9-2{background-image: url(images/l-icon9.png);background-size: 100%;}
#box9-2:hover{background-image: url(images/l-icon2.png);background-size: 100%;transition: background 0.5s ease}
#box10-2{background-image: url(images/l-icon10.png);background-size: 100%;}
#box10-2:hover{background-image: url(images/l-icon6.png);background-size: 100%;transition: background 0.5s ease}
#box11-2{background-image: url(images/l-icon11.png);background-size: 100%;}
#box11-2:hover{background-image: url(images/l-icon4.png);background-size: 100%;transition: background 0.5s ease}
#box12-2{background-image: url(images/l-icon12.png);background-size: 100%;}
#box12-2:hover{background-image: url(images/l-icon15.png);background-size: 100%;transition: background 0.5s ease}
#box13-2{background-image: url(images/l-icon13.png);background-size: 100%;}
#box13-2:hover{background-image: url(images/l-icon10.png);background-size: 100%;transition: background 0.5s ease}
#box14-2{background-image: url(images/l-icon14.png);background-size: 100%;}
#box14-2:hover{background-image: url(images/l-icon2.png);background-size: 100%;transition: background 0.5s ease}
#box15-2{background-image: url(images/l-icon15.png);background-size: 100%;}
#box15-2:hover{background-image: url(images/l-icon6.png);background-size: 100%;transition: background 0.5s ease}
/*---------------------------------------landscape-------------------------------------------------*/
    
/*-------------------------------------------plants------------------------------------------------*/
    
#box1-3{background-image: url(images/p-icon1.png);background-size: 100%;transition: background 0.5s ease}
#box1-3:hover{background-image: url(images/p-icon15.png);background-size: 100%;transition: background 0.5s ease}
#box2-3{background-image: url(images/p-icon2.png);background-size: 100%;transition: background 0.5s ease}
#box2-3:hover{background-image: url(images/lp-icon6.png);background-size: 100%;transition: background 0.5s ease}
#box3-3{background-image: url(images/p-icon3.png);background-size: 100%;transition: background 0.5s ease}
#box3-3:hover{background-image: url(images/p-icon5.png);background-size: 100%;transition: background 0.5s ease}
#box4-3{background-image: url(images/p-icon4.png);background-size: 100%;transition: background 0.5s ease}
#box4-3:hover{background-image: url(images/p-icon12.png);background-size: 100%;transition: background 0.5s ease}
#box5-3{background-image: url(images/p-icon5.png);background-size: 100%;transition: background 0.5s ease}
#box5-3:hover{background-image: url(images/p-icon8.png);background-size: 100%;transition: background 0.5s ease}
#box6-3{background-image: url(images/p-icon6.png);background-size: 100%;}
#box6-3:hover{background-image: url(images/p-icon10.png);background-size: 100%;transition: background 0.5s ease}
#box7-3{background-image: url(images/p-icon7.png);background-size: 100%;}
#box7-3:hover{background-image: url(images/p-icon5.png);background-size: 100%;transition: background 0.5s ease}
#box8-3{background-image: url(images/p-icon8.png);background-size: 100%;}
#box8-3:hover{background-image: url(images/p-icon14.png);background-size: 100%;transition: background 0.5s ease}
#box9-3{background-image: url(images/p-icon9.png);background-size: 100%;}
#box9-3:hover{background-image: url(images/p-icon2.png);background-size: 100%;transition: background 0.5s ease}
#box10-3{background-image: url(images/p-icon10.png);background-size: 100%;}
#box10-3:hover{background-image: url(images/p-icon6.png);background-size: 100%;transition: background 0.5s ease}
#box11-3{background-image: url(images/p-icon11.png);background-size: 100%;}
#box11-3:hover{background-image: url(images/p-icon4.png);background-size: 100%;transition: background 0.5s ease}
#box12-3{background-image: url(images/p-icon12.png);background-size: 100%;}
#box12-3:hover{background-image: url(images/p-icon15.png);background-size: 100%;transition: background 0.5s ease}
#box13-3{background-image: url(images/p-icon13.png);background-size: 100%;}
#box13-3:hover{background-image: url(images/p-icon10.png);background-size: 100%;transition: background 0.5s ease}
#box14-3{background-image: url(images/p-icon14.png);background-size: 100%;}
#box14-3:hover{background-image: url(images/p-icon2.png);background-size: 100%;transition: background 0.5s ease}
#box15-3{background-image: url(images/p-icon15.png);background-size: 100%;}
#box15-3:hover{background-image: url(images/p-icon6.png);background-size: 100%;transition: background 0.5s ease}
/*-----------------------------------------plants--------------------------------------------------*/
.content
    {background: #090022;
    color: white;
    text-align: center;}
    
.sidenav2 {
    height: 30%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-y: hidden;
    transition: 1s;
    text-align: center;
-webkit-box-shadow: 5px 8px 36px -1px rgba(0,0,0,0.09);
-moz-box-shadow: 5px 8px 36px -1px rgba(0,0,0,0.09);
box-shadow: 5px 8px 36px -1px rgba(0,0,0,0.09);
}

.sidenav2 a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
    text-align: center;
}

.sidenav2 a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}
#main2 {
    transition: margin-top 1s;
 -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
    
.tile-container2{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
    margin-top: 15%;
    
}
.tile2{
  flex:1 0 250px;
  align-self:center;
  max-width:100%;
width: 250px;
    height: 250px;
  min-height: 10rem;
  background:white;
  
  // Min width
  &:nth-child(2n+3){
    flex-basis:300px;
  }
  &:nth-child(4n+5){
    flex-basis:450px;
  }
  // End Min width
  
  // Color
  &:nth-child(odd){
     border-top-color:teal;
  }
  &:nth-child(even){
     border-top-color:wheat;
  }
  // End Color
  
}

@media screen and(max-width:500px){
  .tile{
     flex-basis:100% !important;
     max-width:100%;
  }
}

.f-h1
    {color: #090022;
    font-family: 'Fjalla One', sans-serif;
    text-transform: uppercase;
    padding-top: 4%;
    padding-bottom: 2%;
    font-size: 6vh;
    font-size: 6vw;}
    
.dot1{width: 20%;margin: 300% 0% 40% 0%;cursor: pointer;}
.dot1:hover{opacity: 0.5;cursor: pointer;}
.dot2{width: 30%;margin: 40% 0%;cursor: pointer;}
.dot2:hover{opacity: 0.5;cursor: pointer;}
.dot3{width: 20%;margin: 40% 0%;cursor: pointer;}
.dot3:hover{opacity: 0.5;cursor: pointer;}