/*-------BACK TO TOP-------*/
    #topButton {
      display: none;
      position: fixed;
      bottom: 20px;
      right: -20px;
      z-index: 99;
      border: none;
      outline: none;
      color: white;
      background-color: #FB4533;
      padding: 10px 16px;
      border-radius: 8px;
      font-size: 26px;
      margin-right: 4vh;
      border: solid 1px #000000;
      box-shadow: .3rem .3rem .5rem rgba(0, 0, 0, 1);
    }
    #topButton:hover {
       background-color: 	#7C8184;
      color: black;
      padding: 10px 16px;
      border-radius: 8px;
      font-size: 26px;
      margin-right: 4vh;
      border: solid 1px #7C8184;
      transition: .6s all;
      transform: scale(1.15);
    }
    /*-------BACK TO TOP-------*/
    /*----------NAVBAR---------*/
    .navbar-toggler{
      background-color: #FB4533;
    }
    .navBackground{
      background-color: rgb(17, 17, 17);
      border-bottom: solid 1px #FB4533;
    }
    .logoPart1{
      color: #DFE1DF;
      font-size: 54px;
      font-family: 'Signika Negative', sans-serif;
      margin-left: 10vh;
      padding-top: 1vh;
    }
    .logoPart2{
      color: #FB4533;
    }
    .navbarLinks{
      margin-right: 10vh;
      font-size: 22px;
      transition: .4s;
      color: #FB4533;
      font-family: 'Fira Sans Condensed', sans-serif;
    }
    .navbarLinks:hover{
      color: #7C8184;
      transform: translateY(-7px);
    }
    @media (min-width: 375px) and (max-width: 667px){
      .navbar{
        padding-left: 2vh;
      }
      .logoPart1{
        margin-left: 6vh;
      }
      .logoPart1{
        font-size: 6vh;
      }
    }
    @media (min-width: 768px) and (max-width: 1024px){
      .navbar{
        padding-left: 2vh;
        padding: 2vh;
      }
      .logoPart1{
        padding-left: 8vh;
      }
      .navbarLinks{
        font-size: 4vh;
      }
    }
    /*----------NAVBAR---------*/
    /*-----------HERO----------*/
    .heroBackground{
      background-image: url(images/icon2.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      width: 100%;
      filter: drop-shadow(30px 15px 10px #111111);
    }
    .heroGreetings{
      margin-top: 22vh;
      text-align: left;
      margin-left: 15vh;
      color: #DFE1DF;
      font-size: 54px;
      font-family: 'Signika Negative', sans-serif;
      text-shadow: 1px 1px 4px #FB4533;
    }
    .heroTitle{
      color: #DFE1DF;
      font-size: 11vh;
      margin-left: 14vh;
      font-family: 'Signika Negative', sans-serif;
      text-shadow: 3px 3px 5px #ff1500;
    }
    .heroSubtitle{
      margin-left: 24vh;
      color: #DFE1DF;
      font-size: 38px;
      font-family: 'Signika Negative', sans-serif;
      text-shadow: 1px 1px 4px #FB4533;
    }
    .heroButton{
      background-color: #FB4533;
      color: white;
      padding: 6px 16px;
      border-radius: 8px;
      font-size: 20px;
      margin-right: 4vh;
      border: solid 1px #FB4533;
      margin-left: 42vh;
      box-shadow: .3rem .3rem .5rem rgba(0, 0, 0, 1);
      text-decoration: none;
    }
    .heroButton:hover{
      background-color: 	#7C8184;
      color: black;
      padding: 6px 16px;
      border-radius: 8px;
      font-size: 20px;
      margin-right: 4vh;
      border: solid 1px #7C8184;
      transition: .6s all;
      transform: scale(1.15);
    }
    .personalPic{  
      width: 85%;
    }
    @media (min-width: 375px) and (max-width: 667px){
      .heroBackground{
        width: 100%;
        background-image: url(images/icon2.jpg);
        background-position: middle;
      }
      .heroGreetings{
        margin-top: 2vh;
        margin-left: 1vh;
        font-size: 3vh;
      }
      .heroTitle{
        font-size: 7vh;
        margin-left: 1vh;
      }
      .heroSubtitle{
        margin-left: 1.5vh;
        font-size: 3vh;
      }
      .heroButton{
        margin-left: 16vh;
        width: 40%;
      }
      .personalPic{
        margin-left: 1vh;
        width: 100%;
      }
      .heroButton{
        font-size: 2.5vh;
        padding-left: 10px;
        padding-right: 10px;
      }
    }
    @media (min-width: 820px) and (max-width: 1180px){
      .heroBackground{
        height: 38vh;
      }
      .heroGreetings{
        margin-top: 2vh;
        margin-left: 1vh;
        font-size: 3vh;
      }
      .heroTitle{
        font-size: 7vh;
        margin-left: 1vh;
      }
      .heroSubtitle{
        margin-left: 1.5vh;
        font-size: 3vh;
      }
      .heroButton{
        margin-left: 16vh;
        width: 40%;
      }
      .personalPic{
        margin-left: 1vh;
        width: 100%;
      }
      .heroButton{
        margin-left: 1.5vh;
      }
      .personalPic{
        margin-top:40px;
      }
    }
    /*-----------HERO----------*/
    /*-----------ABOUT----------*/
    .aboutBackground{
      background-image: url(images/icon5.jpg);
      background-size: cover;
      background-position: center center;
      background-attachment: fixed;
      color: white;
      text-align: justify;
      padding-top: 8vh;
      }
      .aboutContent{
        backdrop-filter: blur(1.5rem);
        box-shadow: .5rem .5rem 1rem rgba(0, 0, 0, 0.7);
        background-color: rgba(41, 41, 41, 0.712);
        font-size: 1.9vh;
        padding: 6vh 6vh;
        border-radius: 15px;
        margin-bottom: 9vh;
      }
      .aboutTitle{
        color: white;
        text-align: center;
        padding-bottom: 4vh;
        font-size: 6vh;
           font-family: 'Signika Negative', sans-serif;
      }
      .aboutmeDesc{
        text-align: center;
          font-size: 2.2vh;
          font-family: 'Work Sans', sans-serif;
          color: white;
      }
        .cardBig{
          height: 95%;
          width: 100%;
          box-shadow: .5rem .5rem 1rem rgba(0, 0, 0, 0.3);
          background-color: rgba(43, 43, 43, 0.479);
          color: white;
        }
        .cardSmall{
          height: 45%;
          box-shadow: .5rem .5rem 1rem rgba(0, 0, 0, 0.3);
          background-color: rgba(43, 43, 43, 0.479);
          color: white;
        }
        .card-header{
          text-align: center;
          font-size: 2vh;
          color: #ff5344;
          font-family: 'Signika Negative', sans-serif;
        }
        .card-title{
          text-align: center;
          font-size: 2vh;
          font-family: 'Work Sans', sans-serif;
        }
        .card-text{
          text-align: center;
          font-size: 1.8vh;
          font-family: 'Work Sans', sans-serif;
        }
    @media screen and (max-width:1180px) {
      .aboutContent{
        font-size: 1.9vh;
        padding-left: 2vh;
        padding-right: 2vh;
        margin-bottom: 9vh;
      }
      .cardBig{
        height: 100%;
        width:100%;
        box-shadow: .5rem .5rem 1rem rgba(0, 0, 0, 0.3);
        background-color: rgba(43, 43, 43, 0.479);
        color: white;
      }
      .cardSmall{
        height: 48%;
        margin-top: 2vh;
      }
      .card-text{
        font-size: 2vh;
      }
      .responsiveOne{
        margin-bottom: 2vh ;
      }
      .cardRespon1{
        margin-bottom: 2vh;
      }
    }
 
    /*-----------ABOUT----------*/
    /*-----------SKILLS----------*/
    .skillsBackground{
      background-color: #52575C;
      padding-top: 2vh;
      padding-bottom: 2vh;
      filter: drop-shadow(30px 15px 10px #111111);
    }
    .skillsMainTitle{
      color: white;
      text-align: center;
      padding-top: 2vh;
      padding-bottom: 2vh;
      font-size: 6vh;
    }
    .iconsSize{
      font-size: 10vh;

      color: #000000;
    }
    .iconsSize:hover{
      color: #FB4533;
    }
    .skillsTitle{
      font-size: 2.5vh;
      color: black;
      font-weight: 600;
      margin-bottom:4vh;
      font-family: 'Signika Negative', sans-serif;
      font-family: 'Work Sans', sans-serif;
      text-align: center;
    }
    .responsiveTextTwo{
      padding-left: -3vh;
    }
    @media (min-width: 375px) and (max-width: 667px){
      .iconsSize{
        font-size: 22vh;
      } 
      .skillsTitle{
        text-align: center;
      }
    }
    @media (min-width: 820px) and (max-width: 1180px){
      .iconsSize{
        font-size: 5vh;
      } 
      .skillsTitle{
        font-size: 1vh;
      }

    }
     /*-----------SKILLS----------*/
     /*----------PROJECTS---------*/
    .projectsBackground{
     background-image: url(images/icon5.jpg);
      background-size: cover;
      background-position: center center;
      background-attachment: fixed;
      color: white;
      text-align: justify;
      }
      .projectsTitle{
        color: white;
        text-align: center;
        padding-top: 6vh;
        padding-bottom: 2vh;
        font-size: 6vh;
        font-family: 'Signika Negative', sans-serif;
      }
      .ladyDahnyImage{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 75%;
        border-radius: 15px;
        margin-bottom: 4vh;
        box-shadow: .5rem .5rem 1rem rgba(0, 0, 0, 0.7);
      }
      .projectsContent{
        backdrop-filter: blur(1.5rem);
        background-color: rgba(41, 41, 41, 0.712);
        border-radius: 15px;
        margin-bottom: 10vh;
        margin-top: 10vh;
        box-shadow: .5rem .5rem 1rem rgba(0, 0, 0, 0.7);
      }
      .ladyDahnyTitle{
        text-align: center;
        font-family: 'Signika Negative', sans-serif;
        font-size: 4vh;
      }
      .stacksUsed{
        font-size: 2vh;
        text-align: center;
        font-family: 'Work Sans', sans-serif;
      }
      .ladyDahnyDesc{
        text-align: center;
        font-size: 2.1vh;
        margin-left: 20vh;
        margin-right: 20vh;
        font-family: 'Work Sans', sans-serif;
      }
      .awardTitle{
        font-size: 5vh;
        text-align: center;
        margin-top: 6vh;
        font-family: 'Signika Negative', sans-serif;
      }
      .awardDesc{
        text-align: center;
        font-size: 4vh;
        margin-bottom: 4vh;
        font-family: 'Signika Negative', sans-serif;
        color: #FB4533;
      }
      .seeLiveButton{
        background-color: #FB4533;
        color: white;
        padding: 6px 16px;
        border-radius: 8px;
        font-size: 20px;
        border: solid 1px #FB4533;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 4vh;
        margin-bottom: 6vh;
        width: 10%;
        box-shadow: .3rem .3rem .5rem rgba(0, 0, 0, 1);
      }
      .seeLiveButton:hover{
        background-color: 	#7C8184;
        color: black;
        padding: 6px 16px;
        border-radius: 8px;
        font-size: 20px;
        border: solid 1px #7C8184;
        transition: .6s all;
        transform: scale(1.15);
      }
      @media (min-width: 375px) and (max-width: 667px){
      .ladyDahnyDesc{
        margin-left: -1vh;
        margin-right: -1vh;
        font-size: 3vh;
      }
      .seeLiveButton{
        width: 14vh;
      }
      .stacksUsed{
        font-size: 2.5vh;
      }
    }
    @media screen and (max-width:1180px) {
      .stacksUsed{
        font-size: 2.5vh;
      }
      .ladyDahnyDesc{
        margin-left: 1vh;
        margin-right: 1vh;
        font-size: 3vh;
      }
      .seeLiveButton{
        width: 14vh;
      }
      .ladyDahnyImage{
        width: 90%;
      }
    }
      /*----------HIRE ME---------*/
      .hiremeBackground{
        background-image: url(images/icon5.jpg);
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
        color: white;
 
      }
      .hiremeBGBlack{
        backdrop-filter: blur(1.5rem);
        box-shadow: .5rem .5rem 1rem rgba(0, 0, 0, 0.7);
        background-color: rgba(41, 41, 41, 0.712);
        border-radius: 20px;
        padding: 10vh 10vh;
        margin-bottom: 6vh;
      }
      .hiremeQuotes{
        font-size: 4vh;
        text-align: center;
        padding: 4vh 4vh;
        font-family: 'Signika Negative', sans-serif;
      }
      .hireMeButton{
        background-color: #FB4533;
        color: white;
        padding: 6px 16px;
        border-radius: 8px;
        font-size: 20px;
        border: solid 1px #FB4533;
   
     
        width: 14%;
        box-shadow: .3rem .3rem .5rem rgba(0, 0, 0, 1);
      }
      .hireMeButton:hover{
        background-color: 	#7C8184;
        color: black;
        padding: 6px 16px;
        border-radius: 8px;
        font-size: 20px;
        margin-right: 4vh;
        border: solid 1px #7C8184;
        transition: .6s all;
        transform: scale(1.15);
      }
      @media (min-width: 375px) and (max-width: 667px){
      .hiremeQuotes{
        font-size: 4vh;
      }
      .hiremeBGBlack{
        padding-left: 1vh;
        padding-right: 1vh;
      }
    }
    @media (min-width: 820px) and (max-width: 1180px){
      .hireMeButton{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
      }
      .hiremeQuotes{
        font-size: 4vh;
      }
    }
      /*----------HIRE ME---------*/
      /*----------FOOTER---------*/
      .footerBackground{
        background-color:    #1d1d1f;
      border-top: solid 1px #FB4533;
      }
      .nameFooter{
        text-align: center;
        color: white;
        font-size: 3vh;
      }
      .jobFooter{
        text-align: center;
        color: #FB4533;
        font-size: 2vh; 
      }
      .emailFooter{
        text-align: center;
        color: #FB4533;
        font-size: 2vh; 
        padding-bottom: 2vh;
      }
      .logoPart3{
      color: #DFE1DF;
      font-size: 54px;
      font-family: 'Signika Negative', sans-serif;
    text-align: center;
      padding-top: 1vh;
    }
    .logoPart4{
      color: #FB4533;
    }
    @media (min-width: 375px) and (max-width: 667px){
      .hireMeButton{
        margin-left: 18vh;
        width: 35%;
      }
      .logoPart3{
        font-size: 6vh;
        text-align: center;
      }
    }
    .socialFacebook{
      font-size: 8vh;
      color: #DFE1DF;
      padding-left: 42%;
      margin-bottom: 1vh;
      text-decoration: none;
    }
    .socialFacebook:hover{
      color: #FB4533;
    }
    .socialGithub{
      font-size: 8vh;
      color: #DFE1DF;
      margin-left: 2vh;
    }
    .socialGithub:hover{
      color: #FB4533;
    }
    .socialLinkedin{
      font-size: 8vh;
      color: #DFE1DF;
      margin-left: 2vh;
    }
    .socialLinkedin:hover{
      color: #FB4533;
    }
    @media (min-width: 375px) and (max-width: 667px){
      .socialFacebook{
        margin-left: -8.5vh;

      }
    }
    @media (min-width: 820px) and (max-width: 1180px){
      .socialFacebook{
        margin-left: -8.5vh;

      }
    }

        /*----------FOOTER---------*/
        /*---------hero page animation---------*/
        .tracking-in-expand {
	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
        }
        @-webkit-keyframes tracking-in-expand {
          0% {
            letter-spacing: -0.5em;
            opacity: 0;
          }
          40% {
            opacity: 0.6;
          }
          100% {
            opacity: 1;
          }
        }
        @keyframes tracking-in-expand {
          0% {
            letter-spacing: -0.5em;
            opacity: 0;
          }
          40% {
            opacity: 0.6;
          }
          100% {
            opacity: 1;
          }
        }

.text-focus-in {
	-webkit-animation: text-focus-in 1.5s linear both;
	        animation: text-focus-in 1.5s linear both;
}
@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

.flicker-1 {
	-webkit-animation: flicker-1 4s linear infinite both;
	        animation: flicker-1 4s linear infinite both;
}
@-webkit-keyframes flicker-1 {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}
@keyframes flicker-1 {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}