:root{
  --red:#fd513b;
}

body{
  position: relative;
}

/*NAVBAR*/

.navbar{
  background-color: rgb(21, 21, 21)!important;
}

.navbar-title{
  -webkit-font-smoothing: antialiased;
font-family: Rajdhani, sans-serif;
font-size: 34px;
font-style: normal;
font-weight: 500;
}

.navbar-description{
  clear: both;
color: #fff;
font-family: "Rajdhani", sans-serif;
font-size: 11px;
font-weight: 100!important;
letter-spacing: 0.1em;
line-height: 1.727;
margin: 0;
margin-top: .2rem;
text-transform: uppercase;
}

#navbartoggle{
  padding-right: .5rem;
}

 .nav-item{
    border-top:solid rgba(63, 63, 63, 0.658) 1px;
 
    padding: .3rem;
    transition: .2s;
    font-family: Rajdhani, sans-serif;
 }

 

 .nav-item:hover .nav-link{
    color: var(--red)!important;
    transition: .4s;
 }




.navbar-toggler
{
    background-color: transparent;
    border: none;
    outline: none;
    margin-right: 3.5%;
}

.navbar-toggler:focus{

    border: 2px dotted rgb(128, 128, 128);
    box-shadow: none;
}


#nav-icon1{
    width: 30px;
    height: 22px;
    margin: 5px auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    outline: none;
    border: none;
  }
  
  #nav-icon1 span{
        display: block;
        position: absolute;
        height: 2px; 
    width: 100%;


    background: #ffffff;
    border-radius: 9px;
    opacity: 1;
    left: 0;


    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }
  
  #nav-icon1 span:nth-child(1) {
    top: 0px;
  }
  
  #nav-icon1 span:nth-child(2) {
    top: 8px;
  }
  
  #nav-icon1 span:nth-child(3) {
    top: 16px;
  }
  
  #nav-icon1.open span:nth-child(1) {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  
  #nav-icon1.open span:nth-child(2) {
    opacity: 0;
  }
  
  #nav-icon1.open span:nth-child(3) {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  

 /* OFFCANVAS */

 .offcanvas{
  max-width: 100vw!important;
  width: 350px;
 }
  
.offcanvas-button{
    position: absolute;
    top: 42px;
    transform: translateY(-50%);
    right: 5%;
    background-color: transparent;
    border: solid white .08rem;
    padding: .1rem .35rem;

} 

.offcanvas-button:focus{
  outline: none;

}

#nav-icon2{
    width: 20px;
    height: 15px;
    background-color: transparent;

    display: flex;
    justify-content: center;

    margin: 5px auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    outline: none;
    border: none;
    transform-origin: left;
    overflow: hidden;
}

#nav-icon2 span{
    display: block;
    position: absolute;
    height: 1px; 
    width: 90%;
    

background: #ffffff;
border-radius: 9px;

transition: .25s ease-in-out;
}

#nav-icon2 span:nth-child(1) {
    align-self: flex-start;
 
  }
  
  #nav-icon2 span:nth-child(2) {
    align-self: center;

  }
  
  #nav-icon2 span:nth-child(3) {
    align-self: self-end;

  }

  .offcanvas-button:hover #nav-icon2 span:nth-child(1) {
    transform: translateX(8px);
    
  }

  .offcanvas-button:hover #nav-icon2 span:nth-child(2) {
    width: 100%;
  }

  .offcanvas-button:hover #nav-icon2 span:nth-child(3) {
    transform: translateX(14px);
  }

  .offcanvas-body{
    margin: 0;
  }

.canvas-shape{
    clip-path: polygon(100% 0, 0 0, 0 70%);
    background-color: var(--red);
    height: 6rem;
}

#close-canvas{
    color: rgba(255, 255, 255, 0.979);
    background-color: transparent;
    border: none;
    margin-left: .8rem;
    font-size: 2.5rem;
    transform: rotate(45deg);
    z-index: 999999;
    
}
.offcanvas-title{
  font-family: "Rajdhani", sans-serif;
  font-weight: 500;
  line-height: 1rem;
  margin-top: -2.5rem;
}

.offcanvas-description{
  clear: both;
font-family: "Rajdhani", sans-serif;
font-size: 11px!important;
font-weight: 100!important;
letter-spacing: 0.1em;
line-height: 1.727;
margin: 0;
margin-top: .5rem!important;
text-transform: uppercase;
}

#close-canvas:hover{
    color: #dbdbdb;
}
#close-canvas:focus{
  border: none;
  outline: none;
}

.offcanvas{
    z-index: 999999;
    transition: .8s;
    
}

#offcanvas-effect{
    background-color: var(--red);
    opacity: 0.288;
    position: absolute;
    z-index: 10000;
    top: 0;
    bottom: 0;
    width: 0%;
    right: 0%;
  

    display: block;

}
#offcanvas-effect.d-block{

    z-index: 10000;
    transition-duration:.8s ;
    transition-timing-function: ease-in-out;


width: 100%;
}

#offcanvas-effect:hover{
    cursor: crosshair;
}

.offcanvas-list{
    list-style-type: none;
    text-align: right;
}

.offcanvas-list li{
    padding-bottom: 1rem;
    padding-top: .5rem;
    border-bottom: .1rem solid rgba(128, 128, 128, 0.211);
    font-weight: 400;
    font-size: .8rem;

}


.ul-link{
    text-decoration: none;
    color:black ;
    font-weight: bolder;
    display: block;
    transition: .2s;
}
.ul-link:hover{
    color: red;
}





 /* HERO */

.hero{
  background:linear-gradient(0deg, rgba(61, 61, 61, 0.35), rgba(61, 61, 61, 0.35)), url(imgs/10001.jpg);
  background-position: center;
  background-size: cover;
  height: 100vh;
}

 .hero-container{
    
  padding: 300px 5% 300px 5%;
  max-width: 1280px;

 }
 
 .hero-title{
  font-family: "Rajdhani", sans-serif;
    text-align: left;
    margin-bottom: 3rem;
    line-height: 3.5rem;
    font-size: 3.3rem;
    font-weight: 400;
    letter-spacing: 0rem;
    color: white;
 }

.find-out{
    color: white;
    text-decoration: none;
    border: solid 2px white;
    outline: none;
    padding: .9rem 2rem;
    font-size: 1.2rem;
    transition: .5s;

}

.find-out:hover{
    background-color: white;
    color: var(--red);

}

.menu .card {
    height: 300px;
}
.menu .card img {
    height: 100%;
    object-fit: cover;
    background-color: rgba(99, 97, 97, 0.361);
    mix-blend-mode: screen;
}

.card-title{
  font-size: 28px;
  font-weight:400;
}

.copyright{
  font-size: .7rem;
  padding-top: 5rem;
  padding-bottom: 1rem;
}

  .copyright a{
    color: black;
  }














 /* BIOGRAPHY */

 .info{
  font-size: .8rem;
 }

 .biography-hero{
  background-color: rgb(223, 223, 223);
  margin-top: 0rem;
  padding-top: 0;
 }

  /* Contact Me */

  textarea{
    min-height: 15rem;
  }

  .contactme-title{
    color: var(--red);
    font-size: 1rem;
  }

.contactme-list{
    font-weight:100;
  }

  .contactme-list > *{
    padding: .1rem;
  }

.contactme-btn{
    background-color: transparent;
    padding: .8rem 1.5rem;
    border: .1rem solid black;
  }


    /* Events */

.events-col{
  border-left: solid rgba(128, 128, 128, 0.562) .1rem;
  padding: 0;
}

    .events-list{
      font-weight:100;
        }

    .events-list > *{
      padding: 0rem;

    }

.events-title{
  border-left: solid red .1rem;
  width: 100%;
  margin-left: -.1rem;

}


@media (min-width: 1200px) {
  
  .nav-item{
    border: none;
  }

}

@media (max-width: 770px) {
  .navbar-title{
    font-size: 1.8rem;
  }
  .offcanvas-button{
    top: 40px;

} 

  
}

@media (max-width: 480px) {
  .navbar-title{
    font-size: 1.4rem;
  }

  .navbar-toggler{
    padding-top: 1rem;
  }

  .hero-title{
    font-size: 10vw;
    line-height: 3rem;
  }
  
  
}

@media (max-width: 350px) {

  .container-fluid{
    padding-left: 0.2rem!important;
    padding-right: 2.2rem!important;
  }

}