font-family: 'Black Ops One';
font-family: 'Style Script', cursive;
:root{--header-height:97px;}



.glow {
  color: #fff;
    animation: glow 1.75s ease-in-out infinite alternate;
}



@-webkit-keyframes glow {
    from {
        text-shadow: 0 0 10px #99d6ff, 0 0 20px #99d6ff, 0 0 30px #99d6ff;
    }
  
    to {
        text-shadow: 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff, 0 0 50px #ffffff,  0 0 60px #ffffff;
    }
}




/*Reset css*/
*{box-sizing:border-box;margin: 0;}
.container{width: 70%;max-width:1170px;margin:0 auto;background: ;}

.tricky{
z-index: 3;
margin-top: 40vh;  
transform: translateX(0vw); 
width: 70%;
}

#rotate-words {
  font-size:5vw;
  text-transform:uppercase;
  text-align: center; 
font-family: 'Black Ops One';
        
}

  .vh p {
    font-size: 1.5em; /* Adjust the size as needed */
  }

  .vh span {

    font-size: 5vw; font-family: 'Style Script', cursive; color:#006bb3; /* Adjust the size as needed */
  }


@media screen and (max-width: 1000px) {
.vh span {font-family: 'Style Script', cursive;letter-spacing: 0.12em;  font-size: 10vw; }
.vh p {font-family: 'Style Script', cursive; font-size:2em; width: 80%; text-align: center;}
 
#rotate-words {
  font-size:13vw;
  text-transform:uppercase;
  text-align: center; 

}

#rotate-words span {
  display:block;
    font-size:9vw;
  text-transform:lowercase;
  opacity:.8;
 font-family: 'Protest Revolution', sans-serif;
 text-align: center; 
}

.tricky{
z-index: 100000;
margin-top: 40vh;  
transform: translateX(0vw); 
width: 80%;

}

}

#rotate-words span {
  display:flex;
    font-size:1vw;
  text-transform:lowercase;
  opacity:.8;
font-family: 'Protest Revolution', sans-serif;
 text-align: center; 
overflow-x: hidden;
}

#rotate-words div {
 position:absolute;
 opacity:0;
 justify-content: center;
 align-items: center; 

  
 animation: rotate-word 21s linear infinite 0s;
}

@keyframes rotate-word {
    0% { opacity: 0;  transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    3% { opacity: 1;  transform: translateX(0);filter:blur(0px);transform:scale(.9)}
    12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}
    16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    80% { opacity: 0}
    100% { opacity: 0}
}

#rotate-words div:nth-child(2) { animation-delay: 7s}
#rotate-words div:nth-child(3) { animation-delay: 14s}
#rotate-words div:nth-child(4) { animation-delay: 21s}



@keyframes author {
    0% { opacity: 0;  transform: translateY(100px);filter:blur(10px);transform: scaleY(2)}
    20% { opacity:0; transform: translateY(200px);filter:blur(10px); transform: scaleY(2)}
    30% { opacity:1; transform: translateY(0);filter:blur(0px);transform: scaleY(1)}
    90% { opacity:1; transform: translateY(0);filter:blur(0px);transform: scaleY(.9)}
    100% { opacity:0; transform: translateY(0);filter:blur(10px);transform: scale(2)}
}


/*Nav*/

header{position: absolute;top:0;width: 100%;box-shadow: 0 0 10px #000000;z-index: 1000000;background: rgba(0, 153, 204, 0.5);;}
header.fixed{position:fixed;top:0;}
nav{display:flex;align-items:center;justify-content:space-between;}
.logo{font-size:40px;font-weight: 900;color: #fff;font-family: 'Black Ops One';}
.logo a{color:#000;text-decoration:none;font-weight:5vh;}
.nav-wrap ul{padding:20;}
.nav-wrap ul.top_nav{display: block;}
.nav-wrap ul li{list-style:none;display:inline-block;position: relative;}
.nav-wrap ul li a{font-family: 'Black Ops One';color: #fff;text-decoration:none;font-size:20px;padding: 28px 55px 28px 5px;position:relative;display:inline-block;}
.nav-wrap ul.sub-nav {display: none;}
@media screen and (min-width: 919px){
  .nav-wrap ul.sub-nav {display: none;width: 220px;color: #fff;right: 0;padding: 0px 0px;margin: 0px;position: absolute;left: 0px;-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);}
  .nav-wrap ul.sub-nav ul.sub-nav{left: 100%;top: 0;z-index: 1;}
  .nav-wrap li:hover > ul.sub-nav, .nav-wrap ul.sub-nav li{display: block;}
  .nav-wrap ul.sub-nav li a{padding: 12px;color: #fff;display: block;border-bottom: 1px solid #eee;margin: 0;background: rgba(0,153,204,.75);;border-radius: 5px;}
  .nav-wrap ul.sub-nav ul.sub-nav li a{padding-right: 25px;}
  .nav-wrap ul.sub-nav li:hover > a {opacity: 0.8}
  .nav-wrap li:hover > ul{display:block;-moz-animation:fadeInUp .3s ease-in;-webkit-animation:fadeInUp .3s ease-in;animation:fadeInUp .3s ease-in;}
  .nav-wrap > ul > li:not(:last-child){margin-right: 30px;}
  .nav-wrap ul ul li:hover > ul{display:block;-moz-animation:fadeInRight .3s ease-in;-webkit-animation:fadeInRight .3s ease-in;animation:fadeInRight .3s ease-in;}
  .nav-wrap ul li.has-submenu:after{font-family:"Font Awesome 5 Free";font-weight:900;content:"\f078";font-size:16px;color:#fff;padding-right: 5px;}
  .nav-wrap ul ul li.has-submenu:after{color: #000;transform: rotate(-90deg);position: absolute;right: 8px;top: 50%;padding: 0;margin-top: -7px;}
  .nav-wrap ul li.submenu-active > ul.sub-nav{display:none!important;}
  .nav-wrap ul li.submenu-active:hover > ul.sub-nav{display:block!important;}
  /*Hover Effect*/
  .nav-wrap > ul > li:before{content:'';position:absolute;width:100%;transform:scaleX(0);height:2px;bottom:0;left:0;background-color:#fff;transform-origin:bottom right;transition:transform 0.4s cubic-bezier(0.86,0,0.07,1);}
  .nav-wrap > ul > li.active:before,
  .nav-wrap > ul > li:hover:before{  transform: scaleX(1);transform-origin: bottom left;}
  /*Hover Effect*/
}
 

/*Res Button*/
.nav-button {height: 27px;width: 36px;margin-left: 30px;display: none}
.nav-button a{height: 27px;width: 36px;display: inline-block;cursor: pointer;}
.nav-button span,
.nav-button span:before,
.nav-button span:after{cursor:pointer;border-radius: 50px;height:5px;width:35px;background: #;position:absolute;display:block;content:'';transition:all 300ms ease-in-out;}
.nav-button span{margin: 10px 0 0 0;}
.nav-button span:before{top: -10px;}
.nav-button span:after{top: 10px;}

@-webkit-keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(20%,0,0);transform:translate3d(20%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(20%,0,0);transform:translate3d(20%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,20%,0);transform:translate3d(0,20%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,20%,0);transform:translate3d(0,20%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}


/*leftnav*/
.leftnav{width:300px;margin:0;display:inline-block;top:40%;position:absolute;left:10px;}
ul.leftnav-listing{display:inline-block;padding:20px 0;width:58px;border:3px solid #fff;border-radius:40px;}
ul.leftnav-listing.leftnav-fixed{position:fixed;top:120px;max-width:300px;}
ul.leftnav-listing li{display:block;border-radius:50%;/* overflow:hidden; */text-align:center;max-width:25px;margin:0 auto 20px auto;font-size:0;position:relative;}
ul.leftnav-listing li:last-child{margin-bottom:0;}
ul.leftnav-listing li a{padding:7px;display:inline-block;font-size:16px;color:#fff;border-radius:50%;overflow:hidden;border:2px solid #fff;}
ul.leftnav-listing li.is_visiable_section a{background:#fff}
ul.leftnav-listing li:not(:last-child):after{content:'';height:100%;position:absolute;background: #fff; left:50%;z-index:0;bottom:-100%;width:2px;margin-left:-1px;}

/*Demo Extra css*/
footer {height: 50px;display: flex;justify-content: center;align-items: center;}
.vh{height: 100%;background: #0099cc;display: flex;align-items: center;font-size: 5vw;color: #fff;justify-content: center;text-transform: uppercase;}
.vh.about{background-image: linear-gradient(to top, #027ba3 0%, #024b5c 100%);}
.vh.graphics{background-image: url("https://www.freefloat.org/side/backer1.jpg"); background-repeat: no-repeat; bacground-position: center; background-size: cover;}
.vh.web{background-image: url("https://www.freefloat.org/side/backer4.jpg"); background-repeat: no-repeat; bacground-position: center; background-size: cover;}
.vh.video{background-image: url("https://www.freefloat.org/side/backer3.jpg"); background-repeat: no-repeat; bacground-position: center; background-size: cover;}
.vh.tech{background-image: url("https://www.freefloat.org/side/backer2.jpg"); background-repeat: no-repeat; bacground-position: center; background-size: cover;}
.vh.contact{background-image: url("https://www.freefloat.org/side/backer5.jpg"); background-repeat: no-repeat; bacground-position: center; background-size: cover;}
.vh.one{height: 0vh;}
.vh span {font-family: 'Style Script', cursive;letter-spacing: 0.02em; -webkit-text-stroke-color: #fff; text-transform: none;  padding-top: 1%;
  -webkit-text-stroke-width: 0.02em;
  -webkit-text-fill-color: #ffffff;
  -webkit-background-clip: text;
  background-repeat: no-repeat;
  transition: background-size .5s cubic-bezier(0.67, 0.01, 0.15, 0.98);background-image: linear-gradient(135deg, #fff 0%, #fff 50%, transparent 50.1%);
  background-size: 0% 100%;}
.vh p{ font-family: 'Style Script', cursive; font-size: 1vw; width: 80%; text-align: justify; font-weight: 900;text-shadow: 2px 2px 3px #000000;text-transform: none;}
.vh span:hover {background-size: 220% 100%;}

/*Res Button*/
@media screen and (max-width: 919px){
  .nav-button{display: block;}
  .show_menu #nav-toggle span:after {transform: translate3d(0, -10px, 0) rotate(-91deg);}
  .show_menu #nav-toggle span {transform: translate3d(0, 0px, 0) rotate(45deg);}
  .show_menu #nav-toggle span:before { transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); opacity: 0; }
}

@media screen and (max-width: 919px){
   nav{padding: 20px 0;}
   .nav-wrap ul.top_nav{display: none;position: absolute;left: 0;right: 0;top: 100%;background: #000000;height: calc(100vh - 85px);overflow-y: scroll;}
   .nav-wrap > ul li{width: 100%;border-top: 1px solid #000000;position: relative;}
   .nav-wrap > ul > li:last-child{border-bottom: 1px solid #000000;}
   .nav-wrap > ul > li a{width: 100%;margin: 0;font-size: 20px;width: 100%;display: block;padding: 20px 6% 21px 6%;color: #fff;}
   ul li span.down-arrow {position: absolute;height: 64px;width: 50px;top: 0;right: 0;z-index: 2;cursor: pointer;user-select: none;}
   .nav-wrap ul li a:not(:only-child){width: auto;display: inline-block;}
   .nav-wrap > ul li.has-submenu:before{font-family:"Font Awesome 5 Free";font-weight:900;content:"\f078";left:inherit;right: 34px;font-size:16px;margin-top:-7px;position:absolute;top: 33px;color: #fff;}
   .nav-wrap ul ul a{padding-left: 9%;}

}

/*Nav*/