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

body{
    background-color: #ffffff;
    overflow-x: hidden;
}
::-webkit-scrollbar {
  display: none;
}
.landingPageImg{
  height: 100%;
  width: auto;
}


























                                                                                            /*Basic structure of slider*/
.containermain {
    width: 100%;
    height: 80vh;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    overflow: hidden;
    border: solid #ffffff;
    border-width: 0px;
    border-radius: 0px;
    box-shadow: -1px 5px 15px black;
    top: -100px;
    margin-bottom: -425px;
 }

/*Area of images*/
.wrapper{
    width: 100%;
    display: grid;
    height: 65vh;
    align-items: center;
    justify-content: center;
    justify-items: center;
    /*animation: slide 60s infinite; dont forget to add back*/
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    position: absolute;
    top: 7%;
}

img{
    width: 100%;
    height: 100%;
}
.landingPagePicture1{
  width: 80%;
  height: 80%;
  order: 1;
  grid-column: 1;
  grid-row: 1;
}
.landingPagePicture2{
  width: 80%;
  height: 80%;
  order: 2;
  grid-column: 2;
  grid-row: 1;
}
.landingPagePicture3{
  width: 80%;
  height: 80%;
  order: 3;
  grid-column: 3;
  grid-row: 1;
}
.landingPagePicture4{
  width: 80%;
  height: 80%;
  order: 4;
  grid-row: 2;
  grid-column: 1;
}
.landingPagePicture5{
  width: 80%;
  height: 80%;
  order: 5;
  grid-row: 2;
  grid-column: 3;
}
/*Animation activated by keyframes*/
@keyframes slide{
    0%{
        transform: translateX(0);
    }
    5%{
        transform: translateX(0);
    }
    10%{
        transform: translateX(-100%);
    }
    15%{
        transform: translateX(-100%);
    }
    20%{
        transform: translateX(-200%);
    }
    25%{
        transform: translateX(-200%);
    }
    30%{
        transform: translateX(-300%);
    }
    35%{
        transform: translateX(-300%);
    }
    40%{
        transform: translateX(-400%);
    }
    45%{
        transform: translateX(-400%);
    }
    50%{
        transform: translateX(-500%);
    }
    55%{
        transform: translateX(-500%);
    }
    60%{
        transform: translateX(-600%);
    }
    65%{
        transform: translateX(-600%);
    }
    70%{
        transform: translateX(-700%);
    }
    75%{
        transform: translateX(-700%);
    }
    80%{
        transform: translateX(-800%);
    }
    85%{
        transform: translateX(-800%);
    }
}

.background-header {
  background: rgba(250,250,250,0.99) !important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #fff;
}

.background-header .main-nav .nav li:last-child a {
  color: #fff ;
}

.background-header .main-nav .nav li:last-child a:hover {
  color: #fff;
}



.background-header .nav li a.active {
  color: #005b96;
}

.header-area {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 80px;
  background:rgba(122, 59, 46, 1);                                      /*Header color*/
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}
                                                                                /*NAME*/
.header-area .main-nav .logo {
  padding-left: 60px;
  line-height: 70px;
  color: #fff;
  font-size: 60px;
  font-weight: 800;
  /*text-transform: uppercase;*/
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  font-family: 'Rochester', cursive;
  letter-spacing: px;
    
}

.header-area .main-nav .logo em {
  font-style: normal;
  color: #005b96;
  font-weight: 900;
  
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 27px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}
                                                                                /*MAIN MENU BUTTONS*/
.header-area .main-nav .nav li a {
    position: relative;
    top: -49.5%;
  display:block;
  font-weight: 400px;
  font-size: 20px;
  color: #7a7a7a;                                                                     
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1.4px;
     -webkit-mask: url("https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png");
	 mask: url("https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png");
	 -webkit-mask-size: 7100% 100%;
	 mask-size: 7100% 100%;
    -webkit-animation: ani2 0.7s steps(70) forwards;
	 animation: ani2 0.7s steps(70) forwards;
  font-weight: bold;

}
                                                                            /*BUTTONS!!!!!!!!!!!!!!!!!!!!! HERE */
.header-area .main-nav .nav li a {
    color: #fff;
    /*font-weight: 400;*/
}
                                                                            /*LAST BUTTON ON MAIN MENU*/

/*

*/
                                                                        /*Button color when you hover over it*/
.header-area .main-nav .nav li:last-child a:hover {
    opacity: 1;
    /*-webkit-animation: ani 0.7s steps(70) forwards;
    animation: ani 0.7s steps(70) forwards;*/
    color: #7A3B2E;
}

a:hover{
    text-decoration: none;
}
.header-area .main-nav .nav li a:hover{
    -webkit-animation: ani 0.7s steps(70) forwards;
  animation: ani 0.7s steps(70) forwards;
}
                                                                                            /* button after clicking on it*/

.header-area .main-nav .nav li a.active {
  color:   #D4AC6E!important;
  opacity: 1;
  font-size: 18x;
  
}

.header-area .main-nav .nav li:last-child a.active{
  color: #fff!important;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 23px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
  background-color:  white;
}


.header-area .main-nav .nav li a {
  transition: all 0.5s ease;
}



.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}
.header-area .main-nav .nav li:last-child a {
  font-family: 'Lato', sans-serif;
  position: absolute;
  top: -7px;
    display: block;
    font-size: 20px;
    padding: 11px 18px;
    background-color: #d4ac6e;                                                     
    color: #fff;
    text-align: center;
    font-weight: 400;
    letter-spacing: 0px;
    text-transform: uppercase;    
    height: auto;
    line-height: 30px;
  -webkit-mask: url("https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png");
  mask: url("https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png");
 -webkit-mask-size: 7100% 100%;
 mask-size: 7100% 100%;
  -webkit-animation: ani2 0.7s steps(70) forwards;
 animation: ani2 0.7s steps(70) forwards;
}
.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #7a7a7a;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 20px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color:  #7a7a7a;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #7a7a7a;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color:  #7a7a7a;
}

.header-area.header-sticky {
  width: 100vw;
  min-height: 80px;
    position: fixed;
}

.header-area.header-sticky .nav {
  margin-top: 20px !important;
}



.header-area.header-sticky .nav li a.active{
    color:white;
    
}
.Home{
  position: relative;
  margin-top: 80px;
  height: 95vh;
}
/*.profilepicturebox{
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 68%;
    height: 43%;
    width: 23.4%;
    border-radius: 90%;
    /*border-style: solid;
    border-color: white;
    border-radius: 20px;*/
    /*border: 15px solid white;
    box-shadow: 0px 0px 55px 0px black;
    
}*/
.profilepicture{
  position: relative;
  transform: translateX(-50%);
  left: 50%;
  height: 400px;
  width: 400px;
  border-radius: 90%;
  border: 20px solid white;
  box-shadow: 0px 0px 55px 0px black;
  z-index: 3;
}

.spacer1{
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    height: 175px;
}
/*will be deleted later on*/
.svgposition{
  position: absolute;
  left: -2400px;
  width: 7000px;
  height: 230px;
  top: 0px;
}

.profilepicturebox2{
    position: relative;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 10px;
    height: 400px;
    width: 400px;
    border-radius: 90%;
    /*border-style: solid;
    border-color: white;
    border-radius: 20px;*/
    /*border: 20px solid white;
    box-shadow: 0px 0px 55px 0px black;*/
    z-index: 2;
}
.profilepicture2{
    display: none;
}
.topOfScreen{
  position: absolute;
    top: -20%;
}

/*.header-area .main-nav .nav li a {
}*/



.AboutMeTextAnimation{
  font-family: 'Rochester';
  font-size: 100px;
  z-index: 2;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10%;
}
/*Untill here will be deleted only here for the reminder of the animation*/
.aboutmeText{
    position: relative;
    font-family: 'Rochester', cursive;
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: -5%;
    min-height: 225px;
}
.spacer2{
  width: 100vw;
  overflow: hidden;
  position: absolute;
  height: 330px;
  z-index: 1;
  bottom: 0
  ;
    /*margin-bottom: 0px;
    position: absolute;
    top: 120vh;
    padding-bottom: 0px;
    z-index: -2;
    aspect-ratio: 1920/600;
    width: 100%;
    height: 600px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;*/
}
.bottomsvgposition {
  position: absolute;
  left: -2200px;
  width: 7000px;
  height: 300px;
  margin-top: 0px;
  z-index: 1;
}
.aboutMe{
    position: absolute;
    top: 85%;
}
.AboutMe{
  position: relative;
  margin-top: 50px;
}
.svgwavestop2{
  position: relative;
  margin-top: 0px;
  width: 100vw;
  height: 400px;
  overflow: hidden;
  z-index: 2;
}
.spacerInbetweenWaves{
  height: 86px;
  background-color: #7A3B2E;
  position: absolute;
  width: 100vw;
  bottom: -50px;
}
.svgposition2{
  position: relative;
  width: 7000px;
  height: 350px;
  left: -2200px;
}
.myworkmenu{
    position: absolute;
    top: 175%;
}
.Myworktext{
    position: absolute;
    top: 3%;
    left: 50%;
    font-size: 100px;
    font-family: 'Rochester', cursive;
    font-weight: 500;
    z-index: 3;
    transform: translateX(-50%);
}
.myWork{
    position: relative;
    top: 250%;
    left: 50%;
    transform: translateX(-50%);    
    width: 90vw;
}
.polaroidCamera{
    position: absolute;
    top: 200%;
    left: 40%;
    
    width: 22%;
    height: 40%;
}
.polaroidWeapper{
    display: grid;
    place-items: center;
    position: relative;
    margin-top: 5%;
    grid-template-columns: repeat(3, 1fr);
    gap: 100px;
    grid-auto-rows: minmax(100px, auto);
}
.MyWorkButtons{
    font-family: 'Rochester', cursive;
    font-size: 80px;
    text-align: center;
    font-weight: bold;
}
.DrawingText{
  order: 1;
}

.PaintingsText{
  order: 2;
}

.CosplayText{
  order: 3;
}

.firstPicture{
  order: 4;
}

.secoundPicture{
  order: 5;
}

.thirdPicture{
  order: 6;
}

.forthPicture{
  order: 7;
}

.fifthPicture{
  order: 8;
}

.sixthPicture{
  order: 9;
}

.seventhPicture{
  order: 10;
}

.eighthPicture{
  order: 11;
}

.ninthPicture{
  order: 12;
}

.buttonDrawings{
  order: 13;
}

.buttonPaintings{
  order: 14;
}

.buttonCosplays{
  order: 15;
}

.rotate_left {
    -ms-transform: rotate(-8deg); /* IE 9 */
    -webkit-transform: rotate(-8deg); /* Safari */
    transform: rotate(-8deg);
  /*  transition-duration: 1s;
    transition-delay: 0.25s; */   
}
.rotate_right {
    -ms-transform: rotate(8deg); /* IE 9 */
    -webkit-transform: rotate(8deg); /* Safari */
    transform: rotate(8deg);
    /*transition-duration: 1s;
    transition-delay: 0.25s;*/
}
.straight_element{
  -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Safari */
    transform: rotate(0deg);
     will-change: transform;

}
.polaroid {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
    width: 85%;
    height: 90%;  
    padding: 10px 15px 100px 15px;
    border: 1px solid #BFBFBF;
    border-radius: 2%;
    background-color: white;
    box-shadow: 10px 10px 5px #aaaaaa;
    box-sizing: border-box;
    overflow: hidden;
    transition: all 0.5s ease opacity 0.5s ease;;
    will-change: transform, opacity;
}
.polaroid:hover{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 15px 100px 15px; /* Adjusted padding to keep the same size */
  border: 1px solid #BFBFBF;
  border-radius: 2%;
  background-color: white;
  box-shadow: 10px 10px 5px #aaaaaa;
  transition: all 0.5s ease opacity 0.5s ease;;
}
.caption{
    font-size: 29px;
    font-family: 'Rochester',cursive;
    text-align: center;
    white-space: nowrap;
    overflow: auto;
    font-weight: 800;
    padding-top: 4%;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.Clickhere {
    background-color: #d4ac6e;
    border: 2px solid #422800;
    border-radius: 30px;
    box-shadow: #422800 4px 4px 0 0;
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
    padding: 0 18px;
    line-height: 50px;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.Clickhere:hover {
  background-color: #c1502e;
}

.Clickhere:active {
  box-shadow: #422800 2px 2px 0 0;
  transform: translate(2px, 2px);
}
.Clickherebox{
    position: relative;
}
.ButtonText{
    color: white;
}
.ButtonText:hover{
    color: white;
    text-decoration: none;
}
.spacer4{
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: hidden;
    height: 400px;
    margin-top: -3%;
}
.bottomsvgpositionspacer4{
  position: absolute;
    left: -2200px;
    width: 7000px;
    height: 300px;
    bottom: 0px;
}
.spacer5{
    position: relative;
    z-index: 2;
    height: 250px;
    width: 100vw;
    overflow: hidden;
}
.spacerInbetweenWavesAboutMeAndMyProjects{
  height: 86px;
  background-color: #7A3B2E;
  position: relative;
}
.svgpositionMyWork{
    position: absolute;
    left: -2230px;
    width: 7000px;
    height: 350px;
}
.MyWorkSection{
    position: relative;
}
.myexperience{
    position: relative;
}

.spacer6{
    position: relative;
    margin-top: 0%;
    overflow: hidden;
}
.bottomsvgpositionspacer6{
  position: relative;
  left: -2200px;
  width: 7000px;
  height: 300px;
  bottom: 0px;
}
.spacerInbetweenWavesAboutMeAndExperience{
    height: 86px;
    background-color: #7A3B2E;
    position: relative;
    width: 100vw;
    bottom: 0px;
}
.spacer7{
    position: relative;
    z-index: 2;
    height: 250px;
    width: 100vw;
    overflow: hidden;
}
.spacer8{
    position: relative;
    z-index: 2;
    height: 280px;
    width: 100vw;
    margin-bottom: -50px;
    overflow: hidden;
}
.spacer9{
  position: relative;
  height: 350px;
  top: 0px;
  width: 100vw;
  overflow: hidden;
}
.spacer10{
  position: relative;
  z-index: 2;
  height: 314px;
  width: 100vw;
  margin-bottom: -50px;
  overflow: hidden;
}
.bottomsvgpositionspacer10{
  position: absolute;
  left: -2200px;
  width: 7000px;
  height: 300px;
  bottom: 0px;
}
.contactme{
  position:relative;
}
.spacerInbetweenWavesAboutMeAndContact{
  height: 86px;
  background-color: #7A3B2E;
  position: relative;
  width: 100vw;
  bottom: 0px;
}
@media (max-width :1920px){
  .Myworktext{
    top: 5%;
  }
  .spacerInbetweenWaves{
    height: 100px;
    bottom: -100px;
  }
  .svgposition {
    height: 200px;
    left: -2500px ;
  }
  .spacer2{
    height: 250px;
  }
  .bottomsvgposition{
    height: 250px;
    left: -2500px;
  }
  .containermain {
    height: 85vh;
  }
  .profilepicture {
    width: 300px;
    height: 300px;
    bottom: 0px;
    border: 15px solid white;
  }
  .profilepicturebox2 {
    width: 300px;
    height: 300px;
    border: 15px solid white;
    top: 0px;
    transform: translate(-50% , -45%);
  }
  /* what did i do here? ceck back after responsivness done
  .AboutMeTextAnimation{
    font-size: 28px;
  }*/
  .spacer4{
    height: 250px;
  }
  .spacer5{
    height: 270px;
  }
  .MyWorkButtons{
    margin-bottom: -20%;
  }
  .polaroidWeapper{
    margin-top: -3%;
  }
}
@media (min-width:1600px) and (max-width: 1800px){
  .caption{
    font-size: 24px;
    padding-top: 8%;
  }
}
@media (max-width: 1600px){
  .polaroidWeapper{
    display: grid;
    top: 250%;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 100px;
    grid-column-gap: 0px;
    grid-auto-rows: minmax(100px, auto);
  }
  .Myworktext{
    top: 3%;
  }
}
@media (max-width: 1599px){
  .DrawingText{
    order: 1;
  }
  .PaintingsText{
    order: 2;
  }
  .firstPicture{
    order: 3;
  }
  .secoundPicture{
    order: 4;
  }
  .thirdPicture{
    order: 5;
  }
  .forthPicture{
    order: 6;
  }
  .fifthPicture{
    order: 7;
  }
  .sixthPicture{
    order: 8;
  }
  .buttonDrawings{
    order: 9;
  }
  .buttonPaintings{
    order: 10;
  }
  .CosplayText{
    order: 11;
  }
  .seventhPicture{
    order: 12;
    grid-column: 1;
  }
  .eighthPicture{
    order: 13;
    grid-column: 1;
  }
  .ninthPicture{
    order: 14;
    grid-column: 1;
  }
  .buttonCosplays{
    order: 15;
    grid-column: 1;
  }
}
@media (min-width: 1360px) and (max-width: 1366px){
  /*.Home{
    height: 65vw;
  }*/
  /*.spacer2{
    position: static;
  }*/
  .polaroidWeapper{ /*Might have to go back to 2.1fr*/
    grid-template-columns: 33% 33% 33% ;
  }
}
@media (max-width:1050px){
  .MyWorkButtons{
    font-size: 70px;
  }
  .caption{
    padding-top: 7%;
    font-size: 24px;
  }
  .AboutMeText{
    font-size: 90px;
  }
  .Myworktext{
    font-size: 90px;
  }
}
@media (max-width:1024px) {
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #D4AC6E!important;
    opacity: 1;
    animation: none;
  }
  .header-area {
    background-color: #7A3B2E;
    padding: 0px 0px;
    height: 50px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
    background-color: transparent!important;
  }
  /*.header-area .main-nav {
    overflow: hidden;
  }*/
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
/*
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
*/
  .header-area .main-nav .nav li:last-child {
    width: 100%;
    background-color: #D4AC6E;
    color: #fff;
  }
  .header-area .main-nav .nav li:last-child a {
    background-color: #D4AC6E!important;
    color: #fff!important;
    animation: none;
  }

  .header-area .main-nav .nav li:last-child a:hover,
  .header-area .main-nav .nav li:last-child:hover a {
    color: #7A3B2E!important;
  }

  .header-area.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #7A3B2E;
/*    border-bottom: 1px solid #eee;*/
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
    
  .header-area .main-nav .nav li a {
    position: relative;
    height: 55px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border-bottom: none !important;
    background: #7A3B2E;
    color: #fff;
    animation: none;
  }
    
  /*.header-area .main-nav .nav li a {
    background: #eee !important;
    color: #D4AC6E!important;
  }*/
    
   .header-area .main-nav .nav li span{
        display: none!important;
    }
    
    .header-area .main-nav .nav li:last-child a{
        position: inherit;
        padding-top: 1px!important;
    }
    
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #D4AC6E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
  .header-area .main-nav .nav li span{
    animation: none!important;
    transition: none!important;
    -webkit-animation: none!important;
    -webkit-transition: none!important;
  }
  .header-area .main-nav .nav li:last-child a.active{
    color: white;
  }
  .wrapper{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1r;
  }
  .landingPagePicture1{
    height: 70%;
  }
  .landingPagePicture2{
    height: 70%;
  }
  .landingPagePicture3{
    display: none;
  }
  .landingPagePicture4{
    display: none;
  }
  .landingPagePicture5{
    display: none;
  }
}
@media (max-width: 900px){
  .polaroidWeapper{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-row-gap: 150px;
    grid-column-gap: 100px;
    grid-auto-rows: minmax(100px, auto);
  }
  .AboutMeTextAnimation{
    font-size: 80px;
    top: 20%;
  }
  .Myworktext{
    font-size: 80px;
    top: 2%;
  }
  .caption {
    padding-top: 3%;
    font-size: 35px auto;
  }
  .DrawingText{
    order: 1;
  }
  .firstPicture{
    order: 2;
  }
  .secoundPicture{
    order: 3;
  }
  .thirdPicture{
    order: 4;
  }
  .buttonDrawings{
    order: 5;
  }

  .PaintingsText{
    order: 6;
  }
  .forthPicture{
    order: 7;
  }
  .fifthPicture{
    order: 8;
  }
  .sixthPicture{
    order: 9;
  }
  .buttonPaintings{
    order: 10;
  }

  .CosplayText{
    order: 11;
  }
  .seventhPicture{
    order: 12;
  }
  .eighthPicture{
    order: 13;
  }
  .ninthPicture{
    order: 14;
  }
  .buttonCosplays{
    order: 15;
  }
}
@media (max-width: 800px){
  .landingPagePicture1{
    height: 60%;
  }
  .landingPagePicture2{
    height: 60%;
  }
}
@media (max-width: 768px) {
  .button-74 {
    min-width: 120px;
    padding: 0 25px;
  }
  .AboutMeTextAnimation{
    font-size: 70px;
  }
  .Myworktext{
    font-size: 70px;
  }
}
@media(max-width: 650px){
  .AboutMeTextAnimation {
    font-size: clamp(4rem, 5vw, 3rem);
    width: 100%;
    display: grid;
    justify-content: center;
}
  .Myworktext{
    font-size: clamp(4rem, 5vw, 3rem);
    width: 100%;
    display: grid;
    justify-content: center;
  }
  .wrapper{
    grid-template-columns: auto;
  }
  .landingPagePicture1{
    height: 70%;
  }
  .landingPagePicture2{
    display: none;
  }
  .landingPagePicture3{
    display: none;
  }
  .landingPagePicture4{
    display: none;
  }  
  .landingPagePicture5{
    display: none;
  }

}
@media (min-width:601px) and (max-width:700px){
  .polaroidWeapper {
    display: grid;
    top: 250%;
    grid-template-columns: repeat(1, 1fr);
    grid-row-gap: 90px;
    grid-column-gap: 100px;
    grid-auto-rows: minmax(100px, auto);
    margin-top: 60%;
  }
}
@media (min-width:551px) and (max-width:600px){
  .polaroidWeapper {
    display: grid;
    top: 250%;
    grid-template-columns: repeat(1, 1fr);
    grid-row-gap: 90px;
    grid-column-gap: 100px;
    grid-auto-rows: minmax(100px, auto);
    margin-top: 60%;
  }

}
  @media (min-width:502px) and (max-width:550px){
    .polaroidWeapper {
      display: grid;
      top: 250%;
      grid-template-columns: repeat(1, 1fr);
      grid-row-gap: 90px;
      grid-column-gap: 100px;
      grid-auto-rows: minmax(100px, auto);
      margin-top: 60%;
    }
    .AboutMeTextAnimation{
      font-size: 60px;
    }
   
    .Contacttext{
      font-size: 60px;
    }
  }

@media (min-width:360px) and (max-width:501px){
  .polaroidWeapper{
    margin-top: 0%;
    grid-row-gap: 10px;
  }
  .Myworktext{
  	top: 3%!important;
  }
  .caption{
  	font-size: 20px;
    padding-top: 8%;
  }
  .aboutmeText{
  	margin-left: 5%;
    margin-right: 5%;
    font-size: 24px;
  }
  .Myexperiencetext{
  	top: 5%;
  }
  .svgpositionMyWork{
    height: 290px;
  }
  #progress-content-section .section-content p {
  	font-size:16px!important;
  }
  #progress-content-section{
  	width: 100%!important;
  }
  #progress-bar-container li .step-inner{
  font-size: 15px!important;
  }
  .ExperiencePictures{
  	width: 75%!important;
  }
}
@media(max-width:360px){
  .profilepicture{ 
    width: 250px;
    height: 250px;
    bottom: -30px;
    border: 15px solid white;
  }
   #progress-content-section{
  	width: 100%;
  }
   #progress-content-section .section-content p {
  	font-size:16px;
  }
   .svgpositionMyWork{
    height: 290px;
  } 
   .Myexperiencetext{
  	top: 5%;
  }
  .aboutmeText{
  	margin-left: 5%;
    margin-right: 5%;
    font-size: 24px;
  }
  .Myworktext{
  	top: 4%!important;
  }
  .caption{
    font-size: 18px;
    padding-top: 10%;
  }
 
}
@media (min-width: 260px) and (max-width:360px){
  .polaroidWeapper {
    grid-row-gap: 35px;
  }
}
@media (max-width: 580px){
  .polaroidWeapper{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-row-gap: 50px;
    grid-column-gap: 100px;
    grid-auto-rows: minmax(100px, auto); 
}
}
@media only screen and (max-height: 430px) and (orientation: landscape){
  .polaroidWeapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 0px;
    grid-column-gap: 0px;
    grid-auto-rows: minmax(100px, auto);
  }
}
@media only screen and (height: 390px) and (orientation: landscape){
  .polaroidWeapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 0px;
    grid-column-gap: 0px;
    grid-auto-rows: minmax(100px, auto);
}
.MyWorkButtons{
  font-size: 50px;
}
}
@media (max-height: 900px){
  .wrapper{
  	top: 9%;
  }
  .landingPagePicture4{
  	display: none;
  }
  .landingPagePicture5 {
  	display: none;
  }
}