@import url('../others/fonts.googleapis.com/css9036.css?family=Ubuntu&display=swap');


/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.fade-in.two {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay:1.2s;
  animation-delay: 1.2s;
}

.fade-in.three {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

/*---make a basic box ---*/
.box{
  width: 200px;
  height: 200px;
  position: relative;
  margin: 10px;
  float: left;
  border: 1px solid #333;
  background: #999;

}
      /*preloader*/
      body {
  background-color: #fff;
  height: 100%;
  font-family: 'tradegothiclt-bold', sans-serif;
  overflow: hidden;
}

h1 {
  font-size: 5em;
  color: white;
  text-transform: uppercase;
}

span {
  border-right: .05em solid;
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% {
    border-color: transparent;
  }
}
.type1{
      
      font-size: 2em;
    line-height: 17.2em;
    text-align: center;
    font-family: 'Ubuntu', sans-serif !important;
}
.pre-load{
  width: 100%;
  height: 100vh;

  background-color: #000;
}
.type1{
      
      font-size: 2em;
    line-height: 17.2em;
    text-align: center;
    font-family: 'Ubuntu', sans-serif !important;
}
.pre-load{
  width: 100%;
  height: 100vh;

  background-color: #000;
  overflow: hidden;
}



.internal {
    margin-top: -52%;
    margin-left: 43%;
    width: 16%;
}
/* The magic here that makes animations wait */ 
.js-loading *,
.js-loading *:before,
.js-loading *:after {
  animation-play-state: paused !important;
}

.animated-header {
  background: #000;
  position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  overflow: hidden;
}

.animated-header:before {
  animation: show-background 60s .5s cubic-bezier(0,1,.5,1) forwards;
  background: url(../others/cssanimation.rocks/images/random/space2.jpg) repeat center;
  background-size: cover;
  content: "";
  opacity: 0;
  height: 125vh;
  position: absolute;
  left: -10%;
  top: -10%;
  width: 125vw;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #aaa;
  font-size: 48px;
  display: none;
}

.js-loading .loading {
  display: block;
}

.earth {
  width: 200px;
  height: 200px;
  position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
}

.moon {
  animation: spin 30s linear infinite;
  width: 160px;
  height: 50px;
  position: absolute;
    top: calc(50% - 200px);
    left: calc(50% - 200px);
  transform-origin: 200px 200px;-->
}

.earth img, .moon img {
  animation: show-on-load 1s .5s cubic-bezier(0,1.6,.6,1) forwards;
  border-radius: 50%;
  opacity: 0;
  width: 100%;
/*  box-shadow: 0 0 12em 1em rgba(110, 140, 200, .6);*/
}

.moon img {
  animation: fade-in 2s 1s cubic-bezier(0,1.5,1,1) forwards, spin 30s linear reverse infinite;
}

@keyframes spin {
  to {
    transform: rotateZ(360deg);
  }
}

@keyframes show-background {
  0% {
    opacity: 0;
    transform: none;
  }
  30% {
    opacity: .5;
  }
  100% {
    opacity: .5;
    transform: scale(.8)
  }
}

@keyframes show-on-load {
  0% {
    opacity: 0;
    transform: scale(.5);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}
.rajph1 {
    margin-top: -24%;
    margin-left: 21%;
}

.blur {
/*  background: url('https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=') no-repeat center center fixed;
  background-size: cover;
  overflow: hidden;
  filter: blur(13px);
  position: absolute;
  height: 300px;
  top: -50px;
  left: -50px;
  right: -50px;
  bottom: -50px;*/
  background: url(../img/photo-1486723312829-f32b4a25211b.png) fixed;
    background-size: 100% 100%;
    overflow: hidden;
    filter: blur(13px);
    position: absolute;
    /* height: 300px; */
    top: -50px;
    left: -50px;
    right: -50px;
    bottom: -50px;
}

/*button*/
.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
        margin-top: -41%;

    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 20px 64px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.rt2 {
    margin-left: -52%;
}
.r1{
         margin-left: -52%;
}
.r3 {
    margin-left: 10%;
}
button {color:#454545;background:transparent;border-width:2px;border-style: solid;border-color: #454545;position:relative;margin:1em;display:inline-block;padding:0.5em 1em;transition:all 0.3s ease-in-out;text-align:center;
font-family:comfortaa;font-weight:bold}
button:before, button:after {content:'';display:block;position:absolute;border-color:#454545;box-sizing:border-box;border-style:solid;width:1em;height:1em;transition:all 0.3s ease-in-out}
button:before {top:-6px;left:-6px;border-width:2px 0 0 2px;z-index:5;}
button:after {bottom:-6px;right:-6px;border-width:0 2px 2px 0;}
button:hover:before, button:hover:after {width:calc(100% + 12px);
  height:calc(100% + 12px);border-color:#fff}
button:hover {color:#353535;background-color:#fff;border-color:#fff}
.panel {max-width:960px;text-align:center;position:relative;margin:auto;}


.pink button {color:#eb1777;border-color:#eb1777}
.pink button:before, .pink button:after  {border-color:#eb1777}
.pink button:hover:before, .pink button:hover:after {border-color:#eb1777;}
.pink button:hover {color:#fff;background-color:#eb1777;border-color:#eb1777;}
.pink .panel {max-width:960px;text-align:center;position:relative;margin:auto;}


.blue button {
        color: #ffffff;
    border-color: #000;
        font-size: 20px;
    background-color: #2E3638;
    font-weight: 600;
    text-transform: uppercase;
     font-family: 'Ubuntu', sans-serif;
}
.blue button:before, .blue button:after  {    border-color: #fff0;}
.blue button:hover:before, .blue button:hover:after {width:calc(100% + 12px);
  height:calc(100% + 12px);border-color: #000000;transform:rotateY(180deg)}
.blue button:hover {    color: #fff;
    border-color: #000;
    -webkit-transition: 0.5s all ease;
    transition: 0.5s all ease;
    content: '';
    background-color: #a30204;
   


}
.blue .panel {max-width:960px;text-align:center;position:relative;margin:auto;}

.borderless button {border-color:rgba(0,0,0,0);color:#999}
.borderless button:hover {border-color:#353535;background-color:transparent;color:#353535}
.borderless button:before, .borderless button:after {border-color:transparent;}
.borderless button:hover:before, .borderless button:hover:after {width:calc(100% + 12px); height:calc(100% + 12px);border-color:#353535}

.bw button {color:#fff;border-color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.1);
box-shadow:0 1px 3px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.1) inset
}
.bw button:before, .bw button:after  {border-color:#fff}
.bw button:hover:before, .bw button:hover:after {width:calc(100% + 12px);
  height:calc(100% + 12px);border-color:#353535;}
.bw button:hover {color:#fff;background-color:#353535;border-color:#353535}
.blue .panel {max-width:960px;text-align:center;position:relative;margin:auto;}





/*Navigation*/

/* Important styles */
#toggle {
       display: block;
    width: 28px;
    height: 30px;
    /* margin: 30px 897px 10px; */
    position: fixed;
    z-index: 211;
    right: 3%;
}

#toggle span:after,
#toggle span:before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
}
#toggle span:after{
  top: 9px;
}
#toggle span {
  position: relative;
  display: block;
}

#toggle span,
#toggle span:after,
#toggle span:before {
  width: 100%;
  height: 5px;
  background-color: #888;
  transition: all 0.3s;
  backface-visibility: hidden;
  border-radius: 2px;
}

/* on activation */
#toggle.on span {
  background-color: transparent;
}
#toggle.on span:before {
  transform: rotate(45deg) translate(5px, 5px);
}
#toggle.on span:after {
  transform: rotate(-45deg) translate(7px, -8px);
}
#toggle.on + #menu {
  opacity: 1;
  visibility: visible;
}

/* menu appearance*/
#menu {
 position: relative;
    color: #999;
    width: 200px;
    padding: 10px;
    /* margin: 41px 741px auto; */
    font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
    text-align: right;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s;
    z-index: 211;
    right: -83%;
    margin-top: 1%;
}
#menu:after {
  position: absolute;
  top: -15px;
  left: 95px;
  content: "";
  display: block; 
}
ul, li, li a {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
}
li a {
  padding: 5px;
  color: #888;
  text-decoration: none;
  transition: all .2s;
}
li a:hover,
li a:focus {

  color: #000;
  text-decoration: none;
}


/* demo styles */
body { margin-top: 3em;  }
p, p a { font-size: 12px;text-align: center; color: #888; }


/*Navigation*/
.raj:hover:before, .raj:hover:after{

}
.raj:before{
  border:none;
}
.raj:after{
  border:none;
}

@keyframes FadeIn { 
  0% {
    opacity: 0;
    transform: scale(.1);
  }

  85% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.myClass img {
  float: left;
  margin: 20px;
  animation: FadeIn 1s linear;
  animation-fill-mode: both;
}
.myraj0{
    animation: FadeIn 0.2s linear;
  animation-fill-mode: both;
  animation-delay: 5s;
}
.myraj1{
    animation: FadeIn 1s linear;
  animation-fill-mode: both;
  animation-delay: 4s;
}
.myraj2{
    animation: FadeIn 1s linear;
  animation-fill-mode: both;
  animation-delay: 5s;
}
.myraj3{
    animation: FadeIn 1s linear;
  animation-fill-mode: both;
  animation-delay: 7s;
}
.myraj4{
    animation: FadeIn 1s linear;
  animation-fill-mode: both;
  animation-delay: 7s;
}
.myraj5{
    animation: FadeIn 1s linear;
  animation-fill-mode: both;
  animation-delay: 8s;
}


.myraj6{
    animation: FadeIn 1s linear;
  animation-fill-mode: both;
  animation-delay: 1s;
}

div#particles-js {
    width: 100%;
    height: 100%;
    position: fixed;
    margin-top: -27%;
}



.sidenav {
  height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    box-shadow: 7px -1px 1px #ddd;
    transition: 0.5s;
    padding-top: 60px;
    z-index: 205;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.navcols{
      box-shadow: 7px 1px 1px #ddd;
    height: 99vh;
}
.navcols1{
      margin-top: -4%;
}
.navcols2{
      width: 80%;
    margin-top: 65%;
    margin-left: 29%;
}
.imghk{
      margin-left: -31%;
}
.abtfon{
  font-size: 39px;
    color: #000;
    margin-top: 26%;
    margin-left: -7%;
    font-weight: 500;
    text-transform: uppercase;
}


.abtfon1{
  font-size: 23px;
    color: #000;
    text-align: center;
    margin-left: -36%;
    text-transform: none;
}

a.a123:hover {
    border-radius: 0% !important;
    height: 700px !important; 
}
.hgf{
      background-image: url(../img/photo.jpg);
    background-size: 100%;
    background-position: center;
    filter: blur(1px);
}

button.btn.r1.rt1.myraj1:hover {
    background-color: rgb(255, 192, 0);
}

button.btn.r2.rt2.myraj1:hover {
    background-color: #a30204;
}
button.btn.r3.myraj1:hover {
    background-color: rgb(141, 196, 223);
}
.lk12{
  overflow: hidden;margin-top: -18%;
}


.lk13{
  z-index: 205;border: none;
}
.lk14{
  text-align: center;z-index: 0;    margin-top: -12%;
}
.lk15{
  z-index: 1;
}
.lk16{
  z-index: 202;
}
.lk17{
  z-index: 202;
}
.lk18{
  z-index: 202;
}