/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  @import url('../others/fonts.googleapis.com/css9036.css?family=Ubuntu&display=swap');

   img.myraj2 {
    position: fixed;
    margin-top: 2%;
}
/* 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: -69%;
    margin-left: 33%;
    position: fixed;
    width: 36%;
}
/* 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: -6%;
    margin-left: 23%;
}

.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);
    width: 83vh;
    height: 142vh;
    position: absolute;
    /* height: 300px; */
    top: 0px;
    left: -2px;
    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: -13%;
    margin-top: -137%;
}
.r1 {
       margin-left: 8%;
    margin-top: -179%;
}
.r3 {
        margin-left: 5%;
    margin-top: -97%;
}
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;
    padding: 6px 12px;
    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: 30%;
    top: 6%;
    margin: 0;
}

#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: fixed;
    color: #999;
    width: 134px;
    padding: 10px;
    margin: 0;
    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: 29%;
    top: 7%;
}
#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;
    top: 0;
    z-index: -1;
}


.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: -12%;
    width: 100%;
}

.lk13{
  z-index: 205;border: none;
}
.lk14 {
    text-align: center;
    z-index: 0;
    margin-top: -25%;
    margin-left: -16%;
    /* position: fixed; */
}
.lk15{
  z-index: 1;
}
.lk16{
  z-index: 202;
}
.lk17{
  z-index: 202;
}
.lk18{
  z-index: 202;
}

embed.maindes {
    /*width: 75%;
    margin-top: 24%;
    margin-left: -9%;*/
    width: 85%;
    margin-top: 40%;
    margin-left: 15%;
}


}




/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
   @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: -107%;
    margin-left: 42%;
    width: 36%;
}
/* 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: 5%;
    margin-top: -81%;
}
.r1 {
    margin-left: 20%;
    margin-top: -130%;
}
.r3 {
    margin-left: 19%;
}
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: -40%;
    width: 114%;
}
embed.maindes {
    margin-top: 15%;
}


.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;
}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
   @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: -94%;
    margin-left: 42%;
    width: 30%;
}
/* 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: 9%;
    margin-top: -68%;
}
.r1 {
    margin-left: 23%;
    margin-top: -95%;
}
.r3 {
    margin-left: 21%;
}
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: -35%;
    width: 110%;
}


.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;
}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
   @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: -71%;
    margin-left: 44%;
    width: 23%;
}
/* 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: -35%;
    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: -80%;
}
.r3 {
    margin-left: 55%;
}
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: 7%;
}

#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: -24%;
}


.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;
}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {


  embed.maindes {
    margin-top: 18%;
    width: 33%;
}
   @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: -43%;
    margin-left: 49%;
    width: 14%;
}
/* The magic here that makes animations wait */ 
.js-loading *,
.js-loading *:before,
.js-loading *:after {
  animation-play-state: paused !important;
}
body{
  overflow: hidden !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: -19%;
    margin-left: 27%;
}



.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: -62%;
}
.r3 {
    margin-left: 29%;
}
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: 12%;
}

#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: -21%;
}


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


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1349px) {
   @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: -45%;
    margin-left: 42%;
    width: 15%;
}
/* The magic here that makes animations wait */ 
.js-loading *,
.js-loading *:before,
.js-loading *:after {
  animation-play-state: paused !important;
}
body{
  overflow: hidden !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: -20%;
    margin-left: 27%;
}



.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: -62%;
}
.r3 {
    margin-left: 18%;
}
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%;
}
embed.maindes {
    margin-top: 17%;
    width: 36%;
    margin-left: -12%;
}
#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: -20%;
}


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

@media only screen and (min-width: 1280px) {

.lk12 {
    overflow: hidden;
    margin-top: -7%;
}
.internal {
    margin-top: -29%;
    margin-left: 45%;
    width: 14%;
    position: fixed;
}

.lk14 {
    text-align: center;
    z-index: 0;
    margin-top: -18%;
    margin-left: -8%;
}

#menu {
    position: fixed;
    color: #999;
    width: 200px;
    padding: 10px;
    margin: 0;
    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: 3%;
    top: 10%;
}
    div#particles-js {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: -1;
}
#toggle {
    display: block;
    width: 28px;
    height: 30px;
    margin: 0;
    position: fixed;
    z-index: 211;
    right: 4%;
    top: 8%;
}
img.myraj2 {
    position: fixed;
    top: 5%;
}






}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1349px) {
   @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: -29%;
    margin-left: 43%;
    width: 15%;
    position: fixed;
}
/* The magic here that makes animations wait */ 
.js-loading *,
.js-loading *:before,
.js-loading *:after {
  animation-play-state: paused !important;
}
body{
  overflow: hidden !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: -20%;
    margin-left: 27%;
}



.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: -62%;
}
.r3 {
    margin-left: 18%;
}
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%;
}
embed.maindes {
    margin-top: 17%;
    width: 36%;
    margin-left: -12%;
}
#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: fixed;
    color: #999;
    width: 200px;
    padding: 10px;
    margin: 0;
    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: 2%;
    top: 10%;
}
#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: #040404;
  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: -17%;
}


.lk13{
  z-index: 205;border: none;
}
.lk14 {
    text-align: center;
    z-index: 0;
    margin-top: -4%;
    margin-left: 2%;
}
.lk15{
  z-index: 1;
}
.lk16{
  z-index: 202;
}
.lk17{
  z-index: 202;
}
.lk18{
  z-index: 202;
}
}
@media only screen and (min-width: 1600px) {
  
#toggle {
    display: block;
    width: 28px;
    height: 30px;
    /* margin: 30px 897px 10px; */
    position: fixed;
    z-index: 211;
    right: 3%;
    top: 13%;
}
#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: -85%;
    margin-top: 9%;
}
.lk12 {
    overflow: hidden;
    margin-top: -17%;
}

}

@media only screen and (min-width: 1600px) {

    .asd {
    font-size: 36px;
    margin-top: 0;
    /* float: right; */
    /* right: 14px; */
    margin-left: 1177%;
}
.header:after {
    content: "";
    position: absolute;
    top: 11%;
    left: -13%;
    width: 38%;
    height: 247%;
    background: #ffb608;
    box-shadow: 240px 1px 1px #9e9e9e;
    -webkit-transform: rotate(-40deg);
    -moz-transform: rotate(-40deg);
    -o-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    transform: rotate(-45deg);
    /* opacity: 0.85; */
    filter: alpha(opacity=85);
}
.btn.book-now {
    background: #ffb608;
    border-radius: 0;
    color: #fff;
    font-weight: 400;
    display: inline-block;
    font-size: 15px;
    height: 37px;
    line-height: 24px;
    position: fixed;
    right: 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform-origin: bottom right;
    width: 216px;
    letter-spacing: 1px;
    font-family: 'Ubuntu', sans-serif !important;
    z-index: 215;
    top: 43%;
}

}





@media only screen and (min-width: 2160px) {
.lk12 {
    overflow: hidden;
    margin-top: -12%;
}
#menu {
    position: relative;
    color: #999;
    width: 200px;
    padding: 10px;
    margin: 0;
    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: -88%;
    margin-top: 9%;
}

}