*{
    text-decoration:none;
    list-style:none;
    
}



html,
body{
    text-decoration:none;
    margin:0;
    padding:0;
    box-sizing:border-box;
    top:0;
    left:0;
    background: radial-gradient(circle at 20% 32%, #742445, #8F2D56, #e52e71, #ff8000, #fab214    93%);
    height:100%;
    width:100%;
  /* #E7DBC8;*/
    background-size:cover;
    background-repeat:no-repeat;
    overflow-x: hidden;
    overflow-y:hidden;
}

a {text-decoration: none;
   font-family:'Roboto Flex', sans-serif; 
   color:white;
   list-style:none;
   cursor:pointer !important;
}

a:hover,
a:active,
.nav-link.active {
  /* styles for hover, active, and dynamically added active class */
  background: #742445;
  border-radius: 30px;
  font-family: 'Roboto Flex', sans-serif;
  color: white;
  /* other styles */
}


h2 {
    font-family: 'Roboto Flex', sans-serif;  
    font-size: 36px;
    font-weight: 400;
    color:#8F2D56;  
}


h3 {
    font-family: 'Roboto Flex', sans-serif;  
    font-size: 34px;
    font-weight: 400;
    color:#8F2D56;  
}

h4 {
    font-family: 'Roboto Flex', sans-serif;  
    font-size: 27px;
    font-weight: 400;
    color:#8F2D56;  
}

h5 {
    font-family: 'Roboto Flex', sans-serif;  
    font-size: 12px;
    font-weight: 400;
    color:#8F2D56;  
}

p {
    font-family: 'Roboto Flex', sans-serif;  
    font-size: 16px;
    font-weight: 400;
    color:#3c081d;
    line-height:25px;  
}

nav {
    display:flex;
    padding: 20px 0px 20px 0;
    height:75px;
    line-height:75px;
    background:none;
    flex-direction:row;
    width:100%;
    justify-content:space-between;
    z-index:10;
    
}

nav .navbar-brand{
    color:white;
    font-size:20px;
}

nav .nav-list{
    display:flex;
    background:none;
    align-items:center;
    vertical-align:middle;
    z-index:10;
}

nav .nav-list .nav-item{
    cursor:pointer;
    transition: .4s;
    height:100%;
    padding: 30px 10px 60px 10px;
    z-index:20;
}

nav .nav-list .nav-link{
    padding: 13px 25px 13px 25px;
    z-index:20;
}



 
#lailaPhotoLogoContainer{
    background:none;
    display:flex;
    flex-direction:row;
    width:auto;
    height:100%;
    justify-content:center;
    align-items:center;
    padding-left:3.5%;
    
    
}



#lailaPhotoSm {
    display:none;
    border-radius:50%;
    width:100%;
    height:100%;
    transition:transform 0.3s ease;
}




#logo {
    margin-left: 10%;
    font-family: 'Roboto Flex', sans-serif;    
    font-size:25px;
    color:white;
    font-weight: 200;
    white-space: nowrap;
    background-color: none;
    display:flex;
    justify-content:center;
    align-items:center;
}


.secondMenu {
  display: flex;
  align-items: center;
  background:none;
  flex-direction:row;
  padding-left:5%;
  padding-right:3%;
  justify-content:end;
 
}

.secondMenu li {
  display: flex;
  align-items: center;
  margin-right: 0px;
  background:none;
  flex-direction:row;
}

.secondMenu li a {
  color: white;
  background:none;
  padding: 15px 15px 15px 5%;
  margin-right:0%;
}

button {
  padding: 12px 18px 12px 18px;
  border-radius: 50px;
  border-color: transparent;
  font-family: 'Roboto Flex', sans-serif;
  cursor: pointer;
  background-color:green;
  color:white;
}

nav .navbar-toggler{
    display:none;
    cursor:pointer;
    z-index:11;
    margin-top:0;
    margin-left:2%;
}

nav .navbar-toggler .bar{
    width:40px;
    height:5px;
    margin-bottom:10px;
    background:white;
    border-radius:10px;
    transition: .4s;
    z-index:11;
}

input{
    display:none;
}

input:checked ~ nav .nav-list{
    transform:translateY(0);
}

input:checked ~ nav .navbar-toggler {
    margin-top:15px;
}

input:checked ~ nav .navbar-toggler .bar:nth-child(1){
    position:absolute;
    transform: rotate(45deg);
}

input:checked ~ nav .navbar-toggler .bar:nth-child(2){
    display:none;
}

input:checked ~ nav .navbar-toggler .bar:nth-child(3){
    transform: rotate(-45deg);
}

/*************************************************************************/
/*************************************************************************/
/*************************************************************************/

#animationContainer{
    width:100%;
    height:100%;
    position:absolute;
    z-index:10;
}

img#tomato {
  width: 4%;
  height: auto;
  transform: translate(-50%, -50%);
  animation: moveTomato 15s infinite linear;
  z-index:5;
}

@keyframes moveTomato {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(330px) translateY(0px);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(330px) translateY(0px);
  }
}

img#carot {
  width: 4%;
  height: auto;
  transform: translateX(-600px);
  animation: x-axisCarot 24s infinite linear;
}

#carotWrapper1 {
  transform: translateY(-200px);
  animation: y-axisCarot 4s infinite ease-in-out;
}



@keyframes x-axisCarot {
  
  25% {
    transform: translateX(700px);
  }
  
  50% {
    transform: translateX(1600px);
  }
  
  
}

@keyframes y-axisCarot {
  
  
  50% {
    transform: translateY(220px);
  }
  75% {
    transform: translateY(120px);
  }
  
  
}


img#carot {
  width: 4%;
  height: auto;
  transform: translateX(-600px);
  animation: x-axisXXX 24s infinite linear;
}

#carotWrapper1 {
  transform: translateY(-200px);
  animation: y-axisXXX 4s infinite ease-in-out;
}

#carotWrapper2 {
  transform: rotateZ(0deg);
  animation: z-axisXXX 40s infinite linear;
}


@keyframes x-axisXXX {
  
  25% {
    transform: translateX(700px);
  }
  
  50% {
    transform: translateX(1600px);
  }
  
  
}

@keyframes y-axisXXX {
  
  
  50% {
    transform: translateY(220px);
  }
  75% {
    transform: translateY(120px);
  }
  
  
}

@keyframes z-axisXXX {
  
  
  50% {
    transform: rotateZ(360deg);
  }
  
}


img#brocoli {
  width: 4%;
  height: auto;
  transform: translate(-50%, -50%);
  animation: moveBrocoli 55s infinite linear;
}

@keyframes moveBrocoli {
  0% {
    transform: translate(150%, 150%) rotate(0deg) translateX(650px) translateY(0px);
  }
  25% {
    transform: translate(150%, 150%) rotate(720deg) translateX(650px) translateY(0px);
  }
  50% {
    transform: translate(150%, 150%) rotate(1440) translateX(650px) translateY(0px);
  }
  75% {
    transform: translate(150%, 150%) rotate(2880) translateX(650px) translateY(0px);
  }
  100% {
    transform: translate(150%, 150%) rotate(5760) translateX(650px) translateY(0px);
  }
}

img#eggplant {
  width: 7%;
  height: auto;
  animation: moveImage 10s infinite linear;
}

@keyframes moveImage {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  25% {
    transform: translateX(30vw) translateY(40px) rotate(45deg);
  }
  50% {
    transform: translateX(50vw) translateY(58px) rotate(120deg);
  }
  100% {
    transform: translateX(100vw) translateY(0) rotate(90deg);
  }
}

img#pumpkin {
  width: 10%;
  height: auto;
  animation: movePumpkin 20s infinite linear;
  z-index: 3;
}

@keyframes movePumpkin {
  0% {
    transform: translate(-170%, -170%) rotate(90deg) translateX(-50px) translateY(-50px);
  }
  50% {
    transform: translate(2%, 2%) rotate(360deg) translateX(1250px) translateY(200px);
  }
  100% {
    transform: translate(-170%, -17%) rotate(20deg) translateX(-250px) translateY(0px);
  }
}

img#lettuce {
  width: 8%;
  height: auto;
  animation: moveLettuce 20s infinite linear;
  z-index: 3;
}

@keyframes moveLettuce {
  0% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(230px) translateY(0px);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(230px) translateY(0px);
  }
}



img#corn {
  width: 7%;
  height: auto;
  transform: translateX(-50%);
  animation: xAxisCorn 245s infinite linear;
  z-index:1;
}

@keyframes xAxisCorn {
  0% {
    transform: translate(110%, 150%) rotate(0deg) translateX(650px) translateY(0px) rotate(0deg);
  }
  50% {
    transform: translate(110%, 150%) rotate(2880deg) translateX(650px) translateY(0px) rotate(720deg);
  }
  100% {
    transform: translate(110%, 150%) rotate(5760deg) translateX(650px) translateY(0px) rotate(1440deg);
  }
}

#cornWrapper1{
    animation: zAxisCorn 10s infinite ease-in-out;
    transform-origin: center;
}

@keyframes zAxisCorn {
 
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
 
}
#columnsContainer{
    display:flex;
    flex-direction:column;
    min-width:100%;
    min-height:100%;
    justify-content:center;
    margin:auto;
    padding:auto;
    z-index:1;
}

#firstColumn{
    display:flex;
    background:none;
    white-space:nowrap;
    padding-left:3.5%;
    width:100%;
    align-items:center;
}
#mottoContainer{
    font-family: 'Roboto Flex', sans-serif;
    font-size:90px;
    color:white;
    margin-top:-10%;
    font-weight:200;
    
}



#lailaPhoto {
 position:absolute;
 bottom:-6%;
 width:35%;
 padding-left:45%;
 z-index:1;
}


#secondColumn{
    display:flex;
    flex-direction:column;
    background:orange;

    width:100%;
    justify-content:center;
    
}




#blob2{

}

#blob2 path{
    animation: blob2 25s ease-in-out infinite;
    animation-direction: reverse;

}

@keyframes blob2{
    0%{
    d: path("M63.4,1C63.4,27.7,31.7,55.4,1.5,55.4C-28.7,55.4,-57.4,27.7,-57.4,1C-57.4,-25.7,-28.7,-51.4,1.5,-51.4C31.7,-51.4,63.4,-25.7,63.4,1Z");
    }
    25%{
    d: path("M63.1,-2C63.1,28.9,31.5,57.8,2,57.8C-27.5,57.8,-55,28.9,-55,-2C-55,-33,-27.5,-65.9,2,-65.9C31.5,-65.9,63.1,-33,63.1,-2Z");
    }
    50%{
    d: path("M63.8,3.4C63.8,30.8,31.9,61.5,0.3,61.5C-31.3,61.5,-62.6,30.8,-62.6,3.4C-62.6,-24,-31.3,-47.9,0.3,-47.9C31.9,-47.9,63.8,-24,63.8,3.4Z");
    }
    75%{
    d: path("M44.5,-0.3C44.5,24.2,22.2,48.5,-4,48.5C-30.2,48.5,-60.5,24.2,-60.5,-0.3C-60.5,-24.9,-30.2,-49.9,-4,-49.9C22.2,-49.9,44.5,-24.9,44.5,-0.3Z");
    }
    100%{
    d: path("M63.4,1C63.4,27.7,31.7,55.4,1.5,55.4C-28.7,55.4,-57.4,27.7,-57.4,1C-57.4,-25.7,-28.7,-51.4,1.5,-51.4C31.7,-51.4,63.4,-25.7,63.4,1Z");
    }
    }
  

#blob3{
  
}
 #blob3 path{
        animation: blob3 32s reverse infinite;
    
    }
    
    @keyframes blob3{
        0%{
        d: path("M67.5,-16.9C75.9,4.1,63.3,37,39.6,54C16,71.1,-18.8,72.4,-37.6,57.4C-56.4,42.4,-59.2,11.1,-50.3,-10.5C-41.3,-32.1,-20.7,-44,4.4,-45.4C29.5,-46.9,59,-37.8,67.5,-16.9Z");
        }
        25%{
        d: path("M43.9,-12C50.2,5.1,44,28.6,27.6,41.3C11.2,54,-15.4,55.9,-34,43.3C-52.6,30.6,-63.1,3.3,-56.1,-14.8C-49.1,-32.9,-24.5,-41.9,-2.9,-41C18.8,-40.1,37.6,-29.2,43.9,-12Z");
        }
        50%{
        d: path("M61.4,-22.1C68.4,1.8,55.4,30.1,35.6,43C15.9,56,-10.7,53.6,-26.4,41.1C-42,28.6,-46.8,5.9,-40.6,-16.8C-34.4,-39.6,-17.2,-62.4,5,-64.1C27.2,-65.7,54.3,-46.1,61.4,-22.1Z");
        }
        75%{
        d: path("M66.6,-15.4C75.5,5.8,64.5,39.7,43.8,53C23.2,66.2,-7.1,58.9,-27.4,42.9C-47.6,27,-57.8,2.5,-51.5,-15.1C-45.3,-32.7,-22.6,-43.2,3.1,-44.3C28.8,-45.3,57.7,-36.7,66.6,-15.4Z");
        }
        100%{
        d: path("M67.5,-16.9C75.9,4.1,63.3,37,39.6,54C16,71.1,-18.8,72.4,-37.6,57.4C-56.4,42.4,-59.2,11.1,-50.3,-10.5C-41.3,-32.1,-20.7,-44,4.4,-45.4C29.5,-46.9,59,-37.8,67.5,-16.9Z");
        }
        }

/********************************************************************/
/********************************************************************/
/********************************************************************/


@media screen and (max-width:1200px) and (min-width:800px)
{
   
   
   body{
    background-size:cover;
}
   
   
    nav {
    padding:0;
    background:none;
    width:100%;
    margin-top:2%;
    align-items:center;
    vertical-align:middle;
    z-index:10;
}

nav .nav-list{
    display:grid;
    position:absolute;
    background:#ed4107;
    width:100%;
    top:-20px;
    left:80px;
    transform: translateY(-100%);
    z-index:100;
    transition: .6s;
    
}

nav .nav-list .nav-item{
    padding: 0 30px;
    z-index:100;
}

nav .navbar-toggler{
    display:grid !important;
    margin-top:0%;
    z-index:100;
}


    
    .secondMenu {
        display:flex;
        float:right;
        
    }
    #loginButton{
        display:none;
    }




    #lailaPhotoLogoContainer{
        display:none;    
        
    }
    
    #lailaPhotoLogoContainerSM{
        display:flex;
        flex-direction:column;
        width:50%;
        justify-content:center;
        margin:auto;
        padding:auto;
        background:none;
        margin-top:-3%;
    }    
    
    #logoSM{
       
    font-family: 'Roboto Flex', sans-serif;    
    font-size:25px;
    color:white;
    font-weight: 200;
    white-space: nowrap;
    background-color: none;
    display:flex;
    justify-content:center;
    align-items:center;

}  
    #lailaPhotoSmSM {
    border-radius:50%;
    width:50%;
    height:50%;
    margin:auto;
    padding:auto;
    margin-top:6%;

}
  
    #logo{
        display:block;
    }

    
    img#pumpkin {
  width: 10%;
  height: auto;
  animation: movePumpkin 20s infinite linear;
  z-index: 3;
}

@keyframes movePumpkin {
  0% {
    transform: translate(-170%, -170%) rotate(90deg) translateX(-50px) translateY(-50px);
  }
  50% {
    transform: translate(2%, 2%) rotate(360deg) translateX(450px) translateY(200px);
  }
  100% {
    transform: translate(-170%, -17%) rotate(20deg) translateX(-250px) translateY(0px);
  }
}


img#corn {
  width: 7%;
  height: auto;
  transform: translateX(-50%);
  animation: xAxisCorn 245s infinite linear;
  z-index:1;
}

@keyframes xAxisCorn {
  0% {
    transform: translate(110%, 150%) rotate(0deg) translateX(650px) translateY(0px) rotate(0deg);
  }
  50% {
    transform: translate(110%, 150%) rotate(2880deg) translateX(650px) translateY(0px) rotate(720deg);
  }
  100% {
    transform: translate(110%, 150%) rotate(5760deg) translateX(650px) translateY(0px) rotate(1440deg);
  }
}

#cornWrapper1{
    animation: zAxisCorn 20s infinite ease-in-out;
    transform-origin: center;
}

@keyframes zAxisCorn {
 
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
 
}

}
/*****************************************************************/
/*******************************************************************/
@media screen and (max-width:800px) and (min-width:650px){
    
    nav {
    padding:0;
    background:none;
    width:100%;
    margin-top:2%;
    align-items:center;
    vertical-align:middle;
    z-index:100;
}

nav .nav-list{
    display:grid;
    position:absolute;
    background:#f0430e;
    width:100%;
    top:-20px;
    left:80px;
    transform: translateY(-100%);
    z-index:100;
    transition: .6s;
    
}

nav .nav-list .nav-item{
    padding: 0 5px;
    z-index:100;
}

nav .navbar-toggler{
    display:grid !important;
    z-index:100;
    margin-top:0%;
}

   
    
    .secondMenu {
        display:flex;
        float:right;
        
    }
    #loginButton{
        display:none;
    }




    #lailaPhotoLogoContainer{
        display:none;    
        
    }
    
    #lailaPhotoLogoContainerSM{
        display:flex;
        flex-direction:column;
        width:50%;
        justify-content:center;
        margin:auto;
        padding:auto;
        background:none;
        margin-top:-3%;
    }    
    
    #logoSM{
       
    font-family: 'Roboto Flex', sans-serif;    
    font-size:25px;
    color:white;
    font-weight: 200;
    white-space: nowrap;
    background-color: none;
    display:flex;
    justify-content:center;
    align-items:center;

}  
    #lailaPhoto {
 position:absolute;
 bottom:-6%;
 width:45%;
 padding-left:45%;
 z-index:1;
}
  
    
    #mottoContainer{
        font-size:40px;
    }
    
   
 
    
    

        
    img#pumpkin {
  width: 10%;
  height: auto;
  animation: movePumpkin 20s infinite linear;
  z-index: 3;
}

@keyframes movePumpkin {
  0% {
    transform: translate(-170%, -170%) rotate(90deg) translateX(-50px) translateY(-50px);
  }
  50% {
    transform: translate(2%, 2%) rotate(360deg) translateX(350px) translateY(200px);
  }
  100% {
    transform: translate(-170%, -17%) rotate(20deg) translateX(-250px) translateY(0px);
  }
}

img#corn {
  width: 7%;
  height: auto;
  transform: translateX(-50%);
  animation: xAxisCorn 245s infinite linear;
  z-index:1;
}

@keyframes xAxisCorn {
  0% {
    transform: translate(110%, 150%) rotate(0deg) translateX(350px) translateY(0px) rotate(0deg);
  }
  50% {
    transform: translate(110%, 150%) rotate(2880deg) translateX(350px) translateY(0px) rotate(720deg);
  }
  100% {
    transform: translate(110%, 150%) rotate(5760deg) translateX(350px) translateY(0px) rotate(1440deg);
  }
}

#cornWrapper1{
    animation: zAxisCorn 20s infinite ease-in-out;
    transform-origin: center;
}

@keyframes zAxisCorn {
 
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
 
}

}

/*************************************************************/
/*************************************************************/
@media screen and (max-width:650px) and (min-width:350px){
        nav {
    padding:0;
    background:none;
    width:100%;
    margin-top:2%;
    align-items:center;
    vertical-align:middle;
}

nav .nav-list{
    display:grid;
    position:absolute;
    background:#f0430e;
    width:100%;
    top:-20px;
    left:80px;
    transform: translateY(-100%);
    z-index:20;
    transition: .6s;
    
}

nav .nav-list .nav-item{
    padding: 0 5px;
    z-index:20;
}

nav .navbar-toggler{
    display:grid !important;
    z-index:11;
    margin-top:0%;
}

   
    
    .secondMenu {
        display:flex;
        float:right;
        
    }
    #loginButton{
        display:none;
    }


    #lailaPhotoLogoContainer{
        display:none;    
        
    }
    
    #lailaPhotoLogoContainerSM{
        display:flex;
        flex-direction:column;
        width:50%;
        justify-content:center;
        margin:auto;
        padding:auto;
        background:none;
        margin-top:-3%;
    }    
    
    #logoSM{
       
    font-family: 'Roboto Flex', sans-serif;    
    font-size:25px;
    color:white;
    font-weight: 200;
    white-space: nowrap;
    background-color: none;
    display:flex;
    justify-content:center;
    align-items:center;

}  
    #lailaPhoto {
 position:absolute;
 bottom:-6%;
 width:50%;
 padding-left:45%;
 z-index:1;
}
    
    #mottoContainer{
        font-size:40px;
    }
    
   
    
    
   img#pumpkin {
  width: 10%;
  height: auto;
  animation: movePumpkin 20s infinite linear;
  z-index: 3;
}

@keyframes movePumpkin {
  0% {
    transform: translate(-170%, -170%) rotate(90deg) translateX(-50px) translateY(-50px);
  }
  50% {
    transform: translate(2%, 2%) rotate(360deg) translateX(250px) translateY(200px);
  }
  100% {
    transform: translate(-170%, -17%) rotate(20deg) translateX(-250px) translateY(0px);
  }
}

img#corn {
  width: 7%;
  height: auto;
  transform: translateX(-50%);
  animation: xAxisCorn 245s infinite linear;
  z-index:1;
}

@keyframes xAxisCorn {
  0% {
    transform: translate(110%, 150%) rotate(0deg) translateX(350px) translateY(0px) rotate(0deg);
  }
  50% {
    transform: translate(110%, 150%) rotate(2880deg) translateX(350px) translateY(0px) rotate(720deg);
  }
  100% {
    transform: translate(110%, 150%) rotate(5760deg) translateX(350px) translateY(0px) rotate(1440deg);
  }
}

#cornWrapper1{
    animation: zAxisCorn 20s infinite ease-in-out;
    transform-origin: center;
}

@keyframes zAxisCorn {
 
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
 
}


}
/****************************************************************/
/******************************************************************/
/*************************************************************/
@media screen and (max-width:500px) and (min-width:350px){
    a.leftFilterSM{
    font-size: 10px;
    padding: 4% 18% 4% 15%;
    width:40%;
    font-weight:400;
    margin:2%;
    }
    #mottoContainer{
        font-size:27px;
    }
    .sectionTitle{
        font-size:27px;
    }

  



button {
  padding: 6px 9px 6px 9px;
  border-radius: 50px;
  border-color: transparent;
  font-family: 'Roboto Flex', sans-serif;
  font-size:11px;
  cursor: pointer;
  background-color:green;
  color:white;
}

}