body {
    font-family: 'Raleway', sans-serif; 
    color: #747704;
    background-color: #00BFA5;
    margin:0;
    
    
  padding:0;
	perspective: 1px;
	transform-style: preserve-3d;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}



html {
  height: 100%;
  overflow: hidden;
}



/*---------------------preloder--------------------*/
/* The Loader */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: hidden;
}
.no-js #loader-wrapper {
  display: none;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #16a085;
  -webkit-animation: spin 1.7s linear infinite;
          animation: spin 1.7s linear infinite;
  z-index: 11;
}
#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #e74c3c;
  -webkit-animation: spin-reverse .6s linear infinite;
          animation: spin-reverse .6s linear infinite;
}
#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f9c922;
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin-reverse {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}
@keyframes spin-reverse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #222;
  z-index: 10;
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

/* Loaded styles */
.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}



/*-----------------------------------------------------*/


.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
  /* This background is dark, so we set text to white. Use 87% black instead if
     your background is light. */
  color: white;
}
.divider{
    height: 6;
    display:inline-block;
}
.demo-list-item {
  width: 300px;
}


.text-thin {
    font-weight:100;
    
}

.center {
    text-align: center;
}

.text-big {
    font-size: 300%;
}

.bold {
    font-weight: bold;
}

.img-medium {
    height: 200px;
}

/* ---------------------------font writing --------------------------*/
.css-selector {
  font-family: 'Tillana', cursive;
  color:#90CAF9;
  font-size: 150%;
  
}
.css-selector2 {
  font-family: 'Rubik', sans-serif;
  color: #e6f700;
  font-size: 180%;
}

.nameliststyle {
    font-family: 'Tillana', cursive;
  font-size: 120%;
   color: #e0efff;
}


/*-------------------x-------------------------------------------*/
.container {
    font-family:'Raleway', sans-serif;
    max-width : 900px;
    margin: 0 auto;
    color: grey;
padding-left:20px ;
padding-right:20px;
}



.site__title {
    color: #2484f2;
    background-image: -webkit-linear-gradient(92deg,#4045d1,#7f9bff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 60s infinite linear;
    animation: .5s .25s fade backwards ease-out;
    animation-name: fade;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-delay: 0.25s;
    animation-iteration-count: initial;
    animation-direction: initial;
    animation-fill-mode: backwards;
    animation-play-state: initial;
  }
  
  .comment{
  border:3px solid grey;
  color:white;
  width:90%;
  padding-top:20px;
  overflow-y: scroll;
    height: 220px;
}
.commentbox{
    border:1px dotted white;
    color:white;
    width:70%;
    height:auto;
    border-radius:10px;
    padding-left:10px;
    padding-top:10px;
    padding-bottom:10px;
}

  .type_color {
    color: #00b3f0;
    background-image: -webkit-linear-gradient(92deg,#e6f700,#7ff700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 60s infinite linear;
  }
  
/*------------------------------typed.js----------------------------------------*/  
  .typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

#particles-js{ position: absolute; top: 0; width: 100%; height: 300%; background-color: #455A64 ; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } 


/*--------------------------css parallax-------------------------------*/


.slide {
  position: relative;
  padding: 25vh 10%;
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
	transform-style: inherit;
}




.slide:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
}

.title {
  width: 50%;
  padding: 5%;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

.slide:nth-child(2n) .title {
  margin-left: 0;
  margin-right: auto;
}

.slide:nth-child(2n+1) .title {
  margin-left: auto;
  margin-right: 0;
}

.slide, .slide:before {
  background: 50% 50% / cover;  
}

.header {
  text-align: center;
  font-size: 175%;
  color: #fff;
  text-shadow: 0 2px 2px #000;
}

#title {
 /* background-image: url("http://lorempixel.com/640/480/abstract/6/");*/
   background-attachment: fixed;  
}

#slide1:before {
    
 background-image: url("http://embed.gettyimages.com/embed/156313447?et=LG3RxsbTT4doDNe8z-Ya7g&viewMoreLink=on&sig=zKU4-J3snxwF5LPGCHbZ6HDzt1t9GASy0rZ_mHfPwnE=&caption=true");

  transform: translateZ(-1px) scale(2);
  z-index:-1;
}

#slide2 {
  background-image: url("http://embed.gettyimages.com/embed/156313447?et=LG3RxsbTT4doDNe8z-Ya7g&viewMoreLink=on&sig=zKU4-J3snxwF5LPGCHbZ6HDzt1t9GASy0rZ_mHfPwnE=&caption=true");
  background-attachment: fixed;
}

#slide3:before {
    
/*  background-image: url("http://lorempixel.com/640/480/abstract/5/");*/
  transform: translateZ(-1px) scale(2);
  z-index:-1;
}

#slide4 {
  background: #222;
}