/*Home Screen Specific*/
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

#TopLeftNav{
    color: white;
    cursor: pointer;
}

.imageRelativeBlock {
    width: 0;
    height: auto;
}

.HomeScreenVid{
    text-align: center;
    background-color: white;
    height: 100vh;
    width: auto;
    overflow: hidden;
    position: relative;
    left: 0;
    top: 0;
    max-height: 100vh;
    margin: 0;
}
.video-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%; 
    overflow: hidden;
  }
  .video-container video {
    /* Make video to at least 100% wide and tall */
    min-width: 100%; 
    min-height: 100%; 
  
    /* Setting width & height to auto prevents the browser from stretching or squishing the video */
    width: auto;
    height: auto;
  
    /* Center the video */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
.BackgroundVid{
    left: 0;
    top: 0;
    width: 100vw;
    max-height: 100vh;
    height: auto;
    position: relative;
    display: block;
    align-content: center;
    opacity: 1;
    z-index: 1;
    /*Left ajusted with jquery*/
}
.ContentOverVid{
    color: white;
    position: relative;
    text-align: center;
    padding: 3vw;
    z-index: 2;
    display: table-cell;
    vertical-align: middle;
    height: 100vh;
    width: auto;
}
.HiddenText{
    opacity: 0;
    padding-top: 4%;
    font-weight: 400;
}
.HomeScreenTextAn{
    opacity: 1;
    padding-top: 0;
    animation: HomeScreen 1.7s ease;
}
@keyframes HomeScreen{
  0% {
     opacity: 0;
     padding-top: 4%;
  }
  100% {
    opacity: 1;
    padding-top: 0;
  }
}
.SiteYellow{
    background-color: #FFD621!important;
}
.AboutMeTxt{
    margin-bottom: 0.5em;
    font-weight: 400;
}
.ArrowHolder{
    width: 94%;
    height: 6em;
    bottom: 0;
    position: absolute;
    position: absolute;
    display: none;
}
.ArrowHolder p1{
        width: 0px;
        height: 0px;
        position: relative;
        margin: auto;
        display: flex;
        align-content: bottom!important;
        bottom: 0;
        border-style: solid;
        animation: an 3.5s ease infinite;
        box-sizing: border-box;
    }
    @keyframes an{
  0% {
     border-width: 34.6px 20px 0 20px;
      border-color: #FFD621 transparent transparent transparent;
  }
50%{
      border-width:  60px 30px 0 30px;
       border-color: #28a745 transparent transparent transparent;
      }
  100% {
    border-width: 34.6px 20px 0 20px;
      border-color: #FFD621 transparent transparent transparent;
  }
}
.Fixers{
    width: 0;
    display: block;
    position: relative;
}
.Why3D{
    position: relative;
    left: 0;
    height: auto;
    width: 100vw;
    background-color: #ebebeb;
}
.Why3D2{
    position: relative;
    left: 0;
    height: auto;
    width: 100vw;
    background-color: #ebebeb;
}
.Why3D3{
    position: relative;
    left: 0;
    height: auto;
    width: 100vw;
    background-color: #ebebeb;
}
.Contact{
    position: absolute;
    left: 0;
    height: auto;
    width: 100vw;
    background-color: #ebebeb;
}
.MySkills{
    position: relative;
    display: block;
    left: 0;
    height: auto;/*1180px*/
    width: 100vw;
    background-color: #ebebeb;
}
.FlexOuterContainer{
    display: flex;
    align-items: center;
    height: auto; /*Must be the same as its outer div*/
}
.Col1{
   width: 48.75vw;
   text-align: center;
   padding: 1.5%;
}
.Img4Col{
    width: 100%;
    height: auto;
}
.Col2{
    float: 50%;
    padding: 1.5%;
    width: 48.75vw;
    text-align: center;
}
.Col2 p u{
    color: #0645AD;
}
.Col2 p u:hover{
    color: #0160fc;
}
.IntroductionText{
    max-width: 30em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: auto;
    padding: 5%;
    font-family: 'Montserrat', sans-serif;
}
.ContactTxt{
    max-width: 30em;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    height: auto;
    padding: 5%;
    font-family: 'Montserrat', sans-serif;
}
.TextMaxWidth{
    margin-left: auto;
    margin-right: auto;
    max-width: 40em;
    font-family: 'Montserrat', sans-serif;
}

.SkillsText{
    margin-left: 5%;
    margin-right: 7%;
    margin-top: 4%;
    margin-bottom: 0;
    text-align: center;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: auto;
}
.TitleWords{
    position: relative;
    text-align: center;
    font-size: 2em;
    white-space: nowrap;
}
.ImageStandards{
    height: 50px;
    width: 50px;
}
.BrandaWebTxt{
    position: relative;
    display: block;
    text-align: center;
    background-color: rgb(10, 50, 100);
    color: white;
    width: 100%;
    margin-top: 1%;
    transition: 0.4s ease;
    font-size: 2em!important;
}
.BrandaWebTxt:hover{
    color: #FFD621;
}
.Title4Description{
    font-size: 1.2em;
    font-weight: 400;
}
.elsUsed{
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    position: relative;
    flex-wrap: wrap;
}
.Bordered{
    border-style: solid;
    border-color: #FFD621;
    border-radius: 20em;
}
.SPACE{
    height: calc(40px + 5vw);
    width: 0;
}
.SPACE2{
    height: calc(5px + 5vw);
    width: 0;
}
.carousel{
    max-height: 450px;
    max-width: 700px;
    margin: auto;
}
.carousel-indicators li:hover{
    background-color: #FFD621;
}
.carousel-control-next:hover > .ArrowColor{
    color: #FFD621!important;
}
.carousel-control-prev:hover > .ArrowColor{
    color: #FFD621!important;
}
@media only screen and (max-width: 382px){
  .Overflowchecker1 {
    display: none;
}
  .Overflowchecker2 {
    display: visible;
}
}
@media only screen and (min-width: 382px){
  .Overflowchecker1 {
   display: visible;
}
  .Overflowchecker2 {
    display: none;
}
}
.ContactTxt form{
    width: 80%;
}
/*End of Home Screen Specific*/



/*From Old home Pg Testing*/
.back{
        width: cover;
        height: calc(500px + 1vw);
        position: relative;
        left: 0;
        font-family: 'Montserrat', sans-serif;
        background: url(../assets/JadenFarquhar.png);
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
        display: table;
        background-repeat: no-repeat;
        padding: 0;
        outline: 0;
        margin-bottom: 0;
        background-color: orange;
        z-index:1000;
    }
.ImgClean{
    max-width: 30em;
    height: auto;
    width: 90%;
    margin-right: 1%;
}
.FlexDivContainer{
    text-align: center;
    margin-left: 5%;
    margin-right: 5%;
}
/*Will want to make this more efficient with JQUERY!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.imageBox1{
             max-height: 214px;
             max-width: 400px;
             height: auto;
             width: 90vw;
             vertical-align: middle;
             background-color: transparent;
             position: relative;
             box-sizing: border-box;
             padding: 0 10px;
         }
         .imageBox2{
             max-height: 214px;
             max-width: 400px;
             height: auto;
             width: 90vw;
             vertical-align: middle;
             background-color: transparent;
             box-sizing: border-box;
             padding: 0 10px;
         }
         .imageBox3{
             max-height: 214px;
             max-width: 400px;
             height: auto;
             width: 90vw;
             vertical-align: middle;
             background-color: transparent;
             box-sizing: border-box;
             padding: 0 10px;

         }
    @media only screen and (min-width: 0px) , only screen and (max-width: 768px) {
    .imageBox1{
             margin: 10px auto;
         }
    .imageBox2{
             margin: 10px auto;
         }
     .imageBox3{
             margin: 10px auto;
         }
  }

          @media only screen and (min-width: 769px) , only screen and (max-width: 1280px) {
    .imageBox1{
             margin: 10px auto;
         }
    .imageBox2{
             margin: 10px auto;
         }
    .imageBox3{
             margin: 10px auto;
         }
  }


   @media only screen and (min-width: 1281px) {
       .imageBox1{
             margin: auto 0;
             vertical-align: center;
             align-items: center;
         }
     .imageBox2{
             margin: auto 0;
             vertical-align: center;
         }
      .imageBox3{
             margin: auto 0;
         }
  }
@media only screen and (max-width: 799px){
    .holder{

             height: auto;
         }
}
@media only screen and (min-width: 800px){
    .holder{
           height: inherit;
       }
}

         .holder
         {
             width: 100vw;
             background-color: transparent;
             display: flex;
            flex-flow: wrap;
             flex-wrap: wrap;
             align-content: center;
             align-items: center;
             justify-content: center;
             vertical-align: middle;
             font-family: 'Montserrat', sans-serif;
         }
          #full1{
        width: 400px;
        height: 214px;
        display: inline-block;
        position: relative;
        background: none;
    }
    .pic{
        animation-duration: 24s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in;
        height: 214px;
        width: 400px;
        left: 0;
        top: 0;
    }
     .top{
         position: absolute;
         animation-name: dart;
    }.mid{
        position: absolute;
        animation-delay: 8s;
        opacity: 0;
        animation-name: dart;
    }
    .bot{
        animation-delay: 16s;
        position: absolute;
        opacity: 0;
        animation-name: dart;}
   @keyframes dart{
        0%{opacity: 0.1;}
        7%{opacity: 1;}
        25% {opacity: 1;}
        33% {opacity: 0;}
        100% {opacity: 0;}
    }

         #full{
        width: 100%;
        height: 100%;
         }

    .imageBox1 figure
    {
        position: relative;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    
    .imageBox1 figure img
    {
        width: 100%;
        height: 100%;
    }
    .imageBox1 figure figcaption
    {
        position: absolute;
        top: 6px;
        left: 20px;
        bottom: 20px;
        right: 20px;
        background: #fff;
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        padding-top: 8px;
        opacity: 0;
        transition: .5s;
        transition-delay: .45s;
        transform: translateY(-20px);
        z-index: 3;
    }
    .imageBox1:hover figure figcaption
    {
        opacity: 1;
        transform: translate(0px);
        z-index: 2;
    }
    .imageBox1 figure figcaption h1
    {
        margin: 0;
        padding: 0;
        font-size: 22px;
    }
    .imageBox1 figure figcaption p
    {
        margin: 10px 0 0;
        padding: 0;
        font-size: 16px;

    }
    .imageBox1 figure figcaption a
    {
        display: inline-block;
        padding: 10px 20px;
        border-radius: 49%;
        background: #21894a;
        color: #fff;
        margin-top: 5px;
        text-decoration: none;
        transition: .5s
    }
    .imageBox1 figure figcaption a:hover
    {
        background: #FFD621;
        color: black;
    }
        .imageBox2 figure
    {
        position: relative;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    
    .imageBox2 figure img
    {
        width: 100%;
        height: 100%;
    }
    .imageBox2 figure figcaption
    {
        position: absolute;
        top: 20px;
        left: 20px;
        bottom: 20px;
        right: 20px;
        background: #fff;
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        padding-top: 8px;
        opacity: 0;
        transition: .5s;
        transition-delay: .45s;
        transform: translateY(-20px);
        z-index: 3;
    }
    .imageBox2:hover figure figcaption
    {
        opacity: 1;
        transform: translate(0px);
        z-index: 2;
    }
    .imageBox2 figure figcaption h1
    {
        margin: 0;
        padding: 0;
        font-size: 22px;
    }
    .imageBox2 figure figcaption p
    {
        margin: 10px 0 0;
        padding: 0;
        font-size: 16px;

    }
    .imageBox2 figure figcaption a
    {
        display: inline-block;
        padding: 10px 20px;
        border-radius: 49%;
        background: #21894a;
        color: #fff;
        margin-top: 5px;
        text-decoration: none;
        transition: .5s
    }
    .imageBox2 figure figcaption a:hover
    {
        background: #FFD621;
        color: black;
    }
         .imageBox3 figure
    {
        position: relative;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    .imageBox3 figure img
    {
        width: 100%;
        height: 100%;
    }
    .imageBox3 figure figcaption
    {
        position: absolute;
        top: 20px;
        left: 20px;
        bottom: 20px;
        right: 20px;
        background: #fff;
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        padding-top: 8px;
        opacity: 0;
        transition: .5s;
        transition-delay: .45s;
        transform: translateY(-20px);
        z-index: 3;
    }
    .imageBox3:hover figure figcaption
    {
        opacity: 1;
        transform: translate(0px);
        z-index: 2;
    }
    .imageBox3 figure figcaption h1
    {
        margin: 0;
        padding: 0;
        font-size: 22px;
    }
    .imageBox3 figure figcaption p
    {
        margin: 10px 0 0;
        padding: 0;
        font-size: 16px;

    }
    .imageBox3 figure figcaption a
    {
        display: inline-block;
        padding: 10px 20px;
        border-radius: 49%;
        background: #21894a;
        color: #fff;
        margin-top: 5px;
        text-decoration: none;
        transition: .5s
    }
    .imageBox3 figure figcaption a:hover
    {
        background: #FFD621;
        color: black;
    }













































body {
            height: auto;
            width: 100vw;
            height: auto;
            overflow-x: hidden;
            background-color: #ebebeb;
        }
        html, body {
            overflow-x:hidden
        }

        html {
            scroll-behavior: smooth;
        }
        
        /*!important --> when your at the stage of testing on different browers if this overflow-x doesn't work then try creating a div that covers all of the content and adding this css to it

        .overflowFix4Mobile {
            overflow-x: hidden;
            position: relative;
        }
        */
        .starter-template {
            padding: 2rem 1.5rem;
            text-align: center;
        }
     .nav-link{
        font-size: 0.8em!important;
         display: inline-block!important;
    }
.HeaderSlider{
             display: flex;
             vertical-align: middle;
             align-content: center;
             align-items: center;
             justify-content: center;
             text-align:center;
             transition:all 1s ease;
        }
       .HeaderSlider:hover{
  background-position:left top;
        }
        .nav-link{
            font-weight: 600;
        }
        .nav-item:hover > h2 .nav-link{
            color: #FFD621!important;
        }
        @media (min-width: 767px) {
   
    .navbar-nav {
    float:none;
    margin: 0 auto;
    padding-right: 9%;
    display:inline-block;
    text-align: center;
}
    
    }
        .test{
            width: 35px;
            height: 35px;
            border-radius: 5px;
            transition:all .2s ease;
        }
        .test:hover{
            border-radius: 16px;
        }
        
       
        
        .OddTutEls{
            background-color: #dcddd5;
            color: black;
        }
        .EvenTutEls{
            background-color: #FFD621;
            color: black;
        }
        .InsideTutEls{
            background-color: rgb(221, 221, 218);
        }
        #ModelingInnerDiv{
            display: none;
        }
        #RiggingInnerDiv{
            display: none;
        }
        .rotated {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
        }
        .Alignment4List{
            text-align: left;
        }
        #ArrowDown1, #ArrowDown2{
        -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
        }
        .CatSize{
          font-size: 10vw;
        }
        .Line{
          width: 100%;
          height: 0.2em;
          background-color: #FFD621;
          z-index: 100;
          display: block;
          position: relative;
          animation: LineExpand 0.7s linear;
          margin-top: -0.6em;
        }
        .Circle{
          width: 0.8em;
          height: 0.8em;
          margin-Top: -0.3em;
          border-radius: 50%;
          display: block;
          background-color: #FFD621;
          position: relative;
          float: right;
        }
        @keyframes LineExpand{
          0%{
            width: 0%;
          }
          100%{
            width: 100%;
          }
        }
        #SiteTutOptionsBox{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  background-color: #343a3e;
}
    #SiteTutOptionsBox2{
    display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: no-wrap;
  height: 100%;
  background-color: #343a3e;
        }
.SiteTutOptions{
  height: 8em;
  display: flex;
  align-items: center; /*aligns items vertically*/
  justify-content: center;/*aligns items horizantally*/
  text-align: center;
  background-color: transparent;
  min-width: 10em;
  color: white;
}
.SiteTutOptions:hover {
  color: #FFD621;
}
html::-webkit-scrollbar {
    -webkit-appearance: none;
}
html::-webkit-scrollbar-thumb {
    border-radius: 1em;
    border: 0.15em solid white;
    background-color: #FFD621;
}
html::-webkit-scrollbar-track {
    background-color: white;
    border-radius: 2em;
}
h2{
  display: flex;
  align-items: center; /*aligns items vertically*/
  justify-content: center;/*aligns items horizantally*/
  font-size: 1.34rem!important;
}
@media (min-width: 768px){
.navbar-expand-md, .navbar-nav, .nav-link {
    padding-right: 1.1rem!important;
    padding-left: 1.1rem!important;
}
}
/*
Underline Animation Idea inspired from:
http://tobiasahlin.com/blog/css-trick-animating-link-underlines/
*/
h2 > a {
  position: relative;
  color: #FFD621;
  text-decoration: none;
}

h2 > a:hover {
  color: #FFD621;
}
.HeaderSlider > h2 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #FFD621;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.HeaderSlider:hover > h2 > a:before {
  visibility: visible;
  -webkit-transform: scaleX(1.03);
  transform: scaleX(1.03);
}
.active > h2 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #FFD621;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  visibility: visible;
  -webkit-transform: scaleX(1.03);
  transform: scaleX(1.03);
}
.active > h2 .nav-link{
            color: #FFD621!important;
}
        .TutProviderFlexContainer{
           width: 100vw;
           height: auto;
           margin: 0;
           display: flex;
           flex-wrap: wrap;
           flex-direction: row;
           justify-content: center;
           position: absolute;
           left: 0;

        }
        .LogoList{
            position: relative;
            height: 10vw;
            width: 10vw;
            min-height: 4em;
            min-width: 4em;
            max-height: 10em;
            max-width: 10em;
            width: 10vw;
        }
        .LogoSize{
            width: 100%;
            height: 100%;
        }
        .SearchBar{
  width: 100%;
  border-style: solid;
  height: 2.6em;
  border-color: black;
  border-width: 0.05em;
  border-radius: 4em;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: none;
  box-shadow: 0 2px 6px;
}
.InnerSearchBar{
  height: 1.8em;
  color: black; /*should change color to black on navbar*/
  border-style: none;
  outline: none;
  width: 100%;
  margin-left: 1em;
  font-size: 0.95em;
  margin-top: 0.45em;
}
.ButSearchBar{
  text-align: center;
  width: 3.1em;
  height: 2.5em;
  background-color: transparent;
  border-style: none;
  outline: none;
  margin-top: 0em;
  border-top-right-radius: 4em;
  border-bottom-right-radius: 4em;
  float: right
}
.ButSearchBar:hover{
  background-color: #B2B2B2;
  outline: none;

}
.ButSearchBar:active{
  background-color: #FFD621;
  outline: none;
}
.ButSearchBar:focus{
  outline: none;
}
.OptionsBox{
  width: 100%;
  height: auto;
  background-color: transparent;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-top: 1em;
  margin-bottom: 1em;
  justify-content: flex-end;
}
    .SearchBoxVar{
      width: auto;/*will realativly adjust*/
      height: 3em;
      background-color: transparent;
      position: relative;
      display: flex;
    }
    .TriangleContainer{
      width: 1.45em;
      height: 100%;
    }
    .Triangle{
      position: relative;
      width: 0;
      height: 0;
      right: 0;
      top: 20%;
      border-top: 1em solid transparent;
      border-right: 1.5em solid #4C7699;
      border-bottom: 1em solid transparent;
    }
    .TriangleContainer .Triangle p{
      position: relative;
      top: -0.9em;
      margin-left: 1em;
      transition: 0.2s ease;
    }
    .Triangle:hover > p{
      color: #ffe731;
      transform: scale(1.3);
      margin-left: 0.8em;
    }
    .Box {
      /*change width with JQuery*/
      text-align: center;
      height: auto;
      background: #4C7699;
      position: relative;
      -moz-border-radius: 1em;
      -webkit-border-radius: 1em;
      border-radius: 0.7em;
      float: right;
     }
    .Box:after {
      content: "";
      position: absolute;
      right: 0;
      top: 15%;
      width: 0;
      height: 0;
      border-top-left-radius: 3em;
      border-bottom-left-radius: 3em;
      border-left: 1.3em solid white;
      border-right: 0;
      border-top: 1.1em solid white;
      border-bottom: 1.1em solid white;
    }
    /*For Scroll up button*/
    .ButStyle3{
        line-height: 0;
        height: 3rem;
        width: 3rem;
        font-size: 1rem;
        background:#FFD621;
        border-radius: 50%;
        border-color: #343a3e;
        color: #fff;
        border-style: solid;
        border-radius: 50%;
        transition: .5s ease;
        color: #343a3e;
    }
    .ButStyle3:hover{
        background:rgb(47, 149, 47);
    }
    .ButStyle3:focus{
        outline: none;
        }
    .downloadClick{
        background:rgb(47, 125, 230);
        }
    .downloadClick:hover{
        background:rgb(47, 125, 230);
        }
    .downloadClick:focus{
        outline: none;
        }
     #To_Top_But{
       position: fixed;
       bottom: 4%;
       right: 3%;
       display: none;
     }
    /*End of scroll up button css*/
        .inlineBlockEl{
            display: inline-block;
        }
        .ButBackground{
            background-color: #FFD621;
            border-style: none;
            outline: none;
        }
        .ButBackground:active, .ButBackground:focus{
            background-color: #24c124;
            outline: none;
        }



/*temp*/
#hoverEffectTemp{
    border-style: solid;
    border-color: #FFD621;
     border-radius: 20em;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: .5em;
    padding-bottom: .5em;
    transition: 0.3s ease;
    cursor: pointer;
}

#hoverEffectTemp:hover{
    background-color: #FFD621;
}

.TempBox{
    border-style: solid;
    border-color: #FFD621;
     border-radius: 0.4em;
    padding: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
}