.{
    text-decoration:none;
    margin:0;
    padding:0;
    box-sizing:border-box;
    
}

body {
    background-color:#2D2E32;
}

::selection {
    background-color:#657600;
}
h1{
  font-family: 'Rajdhani', sans-serif;
  font-size:35px;
  color:#F9F6FB;
  margin:auto;
  padding:auto;
  letter-spacing:1px;
  font-weight:300;
  line-height:100%;
}

h2{
 
  font-family: 'Rajdhani', sans-serif;
  font-size:14px;
  color:#D7F426;
  margin:auto;
  padding:auto;
  letter-spacing:2px;
  font-weight:200;
  line-height:25px;

}

p{
  font-family: 'Rajdhani', sans-serif;
  font-size:16px;
  color:white;
  margin:auto;
  padding:auto;
  letter-spacing:2px;
  font-weight:200;
  line-height:30px;
  margin-top:1.5%;
}

::-webkit-scrollbar {
  width: 10px;
}
 
::-webkit-scrollbar-thumb {
  background-color: #3F3D41;
  border-radius: 20px;
}
 
::-webkit-scrollbar-track {
  background-color: #1A181B;
}


.navigation {
  display:flex;
  flex-direction:row;
  background:#2D2E32;
  width:100%;
  height:5%;
  z-index:10;
  margin:auto;
  padding:auto;
  position:fixed;
  top:0;
  left:0;
}

.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin:auto;
  padding:auto;

}

.navigation ul ul {
  display: none;
  position: absolute;
  top: 100%;
  width: 200px; /* increase the width as desired */
}

.navigation li {
  float: left;
  position: relative;
}



.navigation li a {
  display: block;
  padding: 10px;
  color: white;
  text-decoration: none;
}

.navigation li a:hover,
.menu li a:hover {
  color: #D7F426;
}

.navigation li ul {
  display: none;
  position: absolute;
  top: 100%;
  transform: translateX(10px); /* move the dropdown 120px to the left */
  z-index: 1;
}

.navigation li:hover > ul {
  display: block;
  background-color:none;
}

.navigation li ul li {
  float: none;
}

.navigation li ul a {
  padding: 4px;
  background-color: #2D2E32;
  color: white;
  padding-top:10px;
  padding-bottom:15px; /*dropdown menu elements*/
}

.navigation li ul a:hover {
  background-color: none;
}

.menu{
  display:flex;
  flex-direction:row;
  background:none;
  width:40%;
  margin:auto;
  padding:auto;
  z-index:4;
  position:relative;
  top:0%;
  
}

.menu li{
  list-style-type:none;
  font-family: 'Rajdhani', sans-serif;
  font-size:16px;
  color:none;
  margin:auto;
  padding:auto;
  letter-spacing:3px;
}

.menu li a{
  color:white;
  /*color:#D7F426;*/

}

.hamburger{
    position:absolute;
    width:25px;
    height:3px;
    background:#D7F426;
    border-radius:15px;
    cursor:pointer;
    transition:0.3s;
    z-index:2;
    margin-top:5%;
    margin-left:3%;
}

.hamburger:before,
.hamburger:after{
    content:"";
    position:absolute;
    height:3px;
    right:0;
    background:#D7F426;
    transition:0.3s;
}

.hamburger:before {
    top: -10px;
    width:24px;
 }

.hamburger:after {
    top: 10px;
    width:25px;
}

.toggle-menu {
    position:absolute;
    width:30px;
    height:25px;
    cursor:pointer;
    margin-top:5%;
    margin-left:3%;
    opacity:0;
    z-index:3;
}

.hamburger,
.toggle-menu {
    display:none;
}

.navigation input:checked ~ .hamburger
{
    background: transparent;
}
#videoPaintings{
    margin-top:-10%;
}
#cottonAv{
    margin-top:-10%;
}

.navigation input:checked ~ .hamburger:before
{
    top:0;
    transform: rotate(-45deg);
    width:24px;
}

.navigation input:checked ~ .hamburger:after
{
    top:0;
    transform: rotate(45deg);
    width:24px;
}


.navigation input:checked ~ .menu{
    right: 0;
}

#pageTitle{
  margin-top:9%;
  width:100%;
  text-align:center;
  padding-bottom:2%;
}

#mainContainer{
    width:80%;
    height:auto;
    background-color: #232426;
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    margin:auto;
    padding:auto;
    margin-top:1%;
    z-index:3;
}

#leftColumn{
    display:flex;
    flex-direction:column;
    width:31%;
    flex-wrap:wrap;
}
#midColumn{
    display:flex;
    flex-direction:column;
    width:31%;
    background:none;
    flex-wrap:wrap;
}
#rightColumn{
    display:flex;
    flex-direction:column;
    width:31%;
    background:none;
    flex-wrap:wrap;
}

.photos{
    margin-bottom:2%;
    padding-top:5%;
    max-width:100%;
    height:auto;
    transition: transform 0.3s ease-in-out;
    z-index:1;
}

.photosLong{
    margin-bottom:2%;
    padding-top:5%;
    max-width:100%;
    height:auto;
    transition: transform 0.3s ease-in-out;
    z-index:1;
}


/*.photos:hover{
    transform: scale(1.3);
    z-index:9;
}*/

#modal {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:9999;
    background-color:black;
}

#modalLong {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:9999;
    background-color:black;
}

#modalImage{
    max-width:100%;
    max-height:100%;
    margin:auto;
    display:block;
}

#modalImageLong{
    max-width:100%;
    max-height:100%;
    top:0;
    margin:auto;
    display:block;
}

@media screen and (min-width:900px){
    #modalImage{
        padding-top:5%;
    }
    #modalImageLong{
        padding-top:0%;
    }
}

@media screen and (min-width:700px) and (max-width:900px) {
    #modalImage{
        padding-top:15%;
    }
    #modalImageLong{
        padding-top:1%;
    }
    
}



@media screen and (min-width:500px) and (max-width:700px) {
    #modalImage{
        padding-top:30%;
    }
    #modalImageLong{
        padding-top:5%;
    }
    
}

@media screen and (min-width:400px) and (max-width:500px) {
    #modalImage{
        padding-top:50%;
    }
    #modalImageLong{
        padding-top:13%;
    }
    
}
@media screen and (max-width:400px) {
    #modalImage{
        padding-top:50%;
    }
    #modalImageLong{
        padding-top:30%;
    }
    
}

#network{

    width:80%;
    height:auto;
    display:flex;
    flex-direction:column;
    margin:auto;
    padding:auto;
    justify-content:center;
    text-align:center;
    background-color:none;
     margin-top:10%;
}

#iconsContainer{
    display:flex;
    flex-direction:row;
    width:290px;
    height:100px;
    margin:auto;
    padding:auto;
    justify-content:space-around;
    background:none;
    margin-top:3%;
}


.icons{
    width:27%;
    height:83px;
    margin-top:2%;
    padding: 1% 1% 1% 1%;
    cursor:pointer;
    object-fit:fit
}
#signature{
    margin-top:2%;
}

a {
   font-family: 'Rajdhani', sans-serif;
  font-size:14px;
  color:#D7F426;
  margin:auto;
  padding:auto;
  letter-spacing:2px;
  font-weight:200;
  line-height:25px;
  text-decoration:none;
 
}





@media (max-width:900px) and (min-width:300px){
    
    
    .navigation li ul a {
     
      background-color: #1A181B;         
      opacity:95%;
      color: white;
      padding-top:0px;
      padding-bottom:0px; /*dropdown menu elements*/
      margin-left:12%;
      margin-top:3%;
      font-size:15px;
}

    .menu li a{
    color:white; /*#D7F426;*/
    display:block;
    letter-spacing:1.5px;
    font-size:12px;
    font-weight:400;
    line-height:10px;
    transition:0.9s;
    margin-top:11%;
    margin-bottom:22%;

}
   
   .hamburger,
    .toggle-menu {
    display:block;
}

    .menu{
        justify-content:start;
        flex-direction:column;
        align-items:center;
        position:fixed;
        top:0%;
        right:-100%;
        background:#1A181B;
        opacity:95%;
        width:60%;
        height:100%;
        transition:1.2s;
    }
    
    .menu li {
        width:100%;
        
        background:none;
        
    }
    
   .menu li  a{
        font-size:20px;
        padding-top:2%;
        background:none;
    }
    
    .navigation li:hover > ul {
    margin-top:-20%;
    display: block;
    background-color:none;
}

#firstlink{
    margin-top:10%;
}
 
#secondlink{
    margin-top:-2%;
}

#thirdlink{
    margin-top:3%;
    z-index:100;
}

#fourthlink{
    margin-top:-2%;
}

#fifthlink{
    margin-top:2%;
}

#pageTitle{
  margin-top:10%;
  
}
#mainContainer{
    flex-direction:column;
}
#leftColumn{
    width:100%;
}
#midColumn{
    width:100%;
}
#rightColumn{
    width:100%;
}

.icons{
    width:17%;
    height:57px;
    margin-top:2%;
    padding: 1% 1% 1% 1%;
    cursor:pointer;
    object-fit:fit
}
}