body{
 background-position: center; height:  background-size:cover; overflow-x: hidden;} 
#name{ position: fixed; top: 56px;
    right: 237px;}


.superman{position: fixed; left:40%;top:2%; animation-name: super; display: block;
    animation-duration: 3s; overflow-x: hidden ;
overflow-y: hidden; z-index: 1;}
 @keyframes super {
        
        
        0%{left:-10%;
        top:80%; width: 2a0%;}
  
     100%{left:40%; top:2%; width: 30%; position:fixed;}}
        



#content {
  
   }
  

.moon-div{width:1200px; margin: 0px auto;  padding: 30px 15px; height:100%;     min-height: 600px;}


.dark-sky1 {
    position: relative;
    width: 100%; margin: 0 auto;
    height: 100%;    background:#2E2C3E url("../img/space-stars.png") !important ;
	background-size:30% auto;
    
   
    animation: star 90s linear infinite;
    -moz-animation: star 90s linear infinite;
    -webkit-animation: star 90s linear infinite;
    -ms-animation: star 90s linear infinite;
    -o-animation: star 90s linear infinite;
 
    
}
@keyframes star {
    0% { background-position: 0 0; }
    100% { background-position:  0 10000px; }
}
@-moz-keyframes star {
    0% { background-position: 0 0; }
    100% { background-position:  0  10000px; }
}
@-webkit-keyframes star {
    0% { background-position: 0 0; }
     100% { background-position:  0  10000px; }
}
@-ms-keyframes star {
    0% { background-position: 0 0; }
     100% { background-position:  0  10000px }
}
@-o-keyframes star {
    0% { background-position: 0 0; }
      100% { background-position:  0  10000px }
}

.about-div{ width:1200px; margin: 50px auto; background: #fff; padding: 30px 15px;}
.about-div img{  border: 10px solid #311414; cursor: pointer;}
.about-div .col-md-6{margin-bottom: 15px;}

.superman1{ width: 550px; background: url("../img/gif/super-man1.png")repeat; position: absolute;
height: 150px; background-size:; content: ' ';
 animation: animatedBackground 80s linear infinite;
    -moz-animation: animatedBackground 80s linear infinite;
    -webkit-animation: animatedBackground 80s linear infinite;
    -ms-animation: animatedBackground 80s linear infinite;
    -o-animation: animatedBackground 80s linear infinite;
  
    top:-38px; right: 0;
    
}

.pipe {
    position: absolute;
    top: -63px;
    z-index: 1000;
    left: -71px;
}

.parts{ width: 550px; background: url("../img/gif/super-man.png")repeat; position: absolute;
height: 75px; background-size:; content: ' ';
 animation: animatedBackground 80s linear infinite;
    -moz-animation: animatedBackground 80s linear infinite;
    -webkit-animation: animatedBackground 80s linear infinite;
    -ms-animation: animatedBackground 80s linear infinite;
    -o-animation: animatedBackground 80s linear infinite;
  
    top:-66px; right: 0;
    
}


@keyframes animatedBackground {
    0% { background-position: -5000px 0; }
    100% { background-position: 0 0; }
    
}
@-moz-keyframes animatedBackground {
    0% { background-position: -5000px 0; }
    100% { background-position: 0 0; }
}
@-webkit-keyframes animatedBackground {
    0% { background-position: -5000px 0; }
    100% { background-position: 0 0; }
}
@-ms-keyframes animatedBackground {
  0% { background-position: -5000px 0; }
    100% { background-position: 0 0; }
}
@-o-keyframes animatedBackground {
     0% { background-position: -5000px 0; }
    100% { background-position: 0 0; }
}

.wheel1{ position: absolute; -webkit-animation: rotating 1s linear infinite;
  -moz-animation: rotating 1s linear infinite;
  -ms-animation: rotating 1s linear infinite;
  -o-animation: rotating 1s linear infinite;
  animation: rotating 1s linear infinite;   left: 52px;
    top: 18px;}
.wheel2{ position: absolute; -webkit-animation: rotating1s linear infinite;
  -moz-animation: rotating 1s linear infinite;
  -ms-animation: rotating 1s linear infinite;
  -o-animation: rotating 1s linear infinite;
  animation: rotating 1s linear infinite; right: 20px;
    top: 18px;}


@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating{from{transform: rotate(0deg);} to{transform: rotate(360deg);}}
.chain{ width: 100%; position: absolute;}
.chain1{ width: 100%; position: absolute;}

.animation-div{ position: absolute; width: 100%;
bottom: 20px; height: 150px;  left:0;}
.animation-div-in{ width: 1200px; margin: 0 auto; }
.next{position: absolute; right:80px; width: 60px; height:60px; top:-150px; cursor: pointer;}








@keyframes "planet-bounce" {
    0% {
        margin-top: 10px
    }
    50% {
        margin-top: -15px
    }
    100% {
        margin-top: 6px
    }
}
@-moz-keyframes planet-bounce {
    0% {
        margin-top: 10px
    }
    50% {
        margin-top: -15px
    }
    100% {
        margin-top: 6px
    }
}
@-webkit-keyframes "planet-bounce" {
    0% {
        margin-top: 10px
    }
    50% {
        margin-top: -15px
    }
    100% {
        margin-top: 6px
    }
}
@-ms-keyframes "planet-bounce" {
    0% {
        margin-top: 10px
    }
    50% {
        margin-top: -15px
    }
    100% {
        margin-top: 6px
    }
}
@-o-keyframes "planet-bounce" {
    0% {
        margin-top: 10px
    }
    50% {
        margin-top: -15px
    }
    100% {
        margin-top: 6px
    }
}
.planet-bounce {
    -webkit-animation-name: planet-bounce;
    -moz-animation-name: planet-bounce;
    -ms-animation-name: planet-bounce;
    -o-animation-name: planet-bounce;
    animation-name: planet-bounce;
    -webkit-animation-duration: 2.5s;
    -moz-animation-duration: 2.5s;
    -ms-animation-duration: 2.5s;
    -o-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    -o-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate
}

.planet-delay-1 {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -ms-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s
}
.planet-delay-2 {
    -webkit-animation-delay: 1.4s;
    -moz-animation-delay: 1.4s;
    -ms-animation-delay: 1.4s;
    -o-animation-delay: 1.4s;
    animation-delay: 1.4s;
}

.my-menu{ margin-top: 40%;}
ul.my-menu li{
    padding: 10px;
    margin: 20px; color: #fff; list-style: none;}
ul.my-menu li a{ color: #fff;}
img.iam{ position: absolute; left:20%; top:30%;}
img.works{ position: absolute; right:50%; top:60%;}
img.contact{ position: absolute; right:30%; top:20%;} 
img.fb{ position: absolute; right: 34%;
    top: 60%;
} 
img.li{ position: absolute; right:20%; top:50%;}
img.tw{ position: absolute; right:30%; top:80%;}

.gallery{ width: 33.33%; height: 280px; overflow: hidden; float: left; position: relative;}
.gallery img{ width:100%; cursor: pointer;}
.white{ background: rgba(255, 255, 255, 0.06);}



.menu-ico {
    width: 45px;
    height: 45px;
    position: fixed;
    overflow: hidden;
    display: inline block;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    right: 20px;
    top: 20px;
	    z-index: 100;
}
.menu-ico span{   
  width: 45px;
  height: 6px;
  margin-top: 20px;
  background-color: #FFE158;
  position: absolute;
  display:block;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.menu-ico span::before{
  height: 6px;
  width: 45px; 
  margin-top:15px;
  background-color: #FFE158;
  position: absolute;
  content: '';
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.menu-ico span::after{   
  height: 6px;
  width: 45px;  
  margin-top: -15px;  
  background-color: #FFE158;
  position: absolute;
  content: '';
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.menu-ico:hover{
  cursor: pointer;
  height: 80%;
  width: 120px;
}
.menu-ico:hover > span{  
  background-color: rgba(0, 0, 0, 0)
}
.menu-ico:hover > span::before{
  background-color: #FFE158;  
  margin: 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-ico:hover > span::after{
  background-color: #FFE158;
  margin: 0;  
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

.menu{
  top: 30px;
  position: relative;
  display: inline;   
 }
.menu li{
  list-style:none; 
  margin-bottom: 5px;  
  width: 100px;
  padding: 10px;  
  background-color: #EA534D;
  border-bottom: 4px solid #EA534D;
 font-family: 'droid_sans_monoregular';
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  color: white;   
  opacity: 0;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.menu-ico:hover > .menu li{
  opacity: 1;
}

.menu li:hover{  
  cursor: pointer;
  background-color: #EA534D;
  border-bottom: 3px solid #EA534D;  
 
  -webkit-transform: translate(0, 2px);
  -moz-transform: translate(0, 2px);
  transform: translate(0, 2px);
}

@font-face {
    font-family: 'droid_sans_monoregular';
    src: url('../fonts/DroidSansMono-webfont.eot');
    src: url('../fonts/DroidSansMono-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/DroidSansMono-webfont.woff') format('woff'),
         url('../fonts/DroidSansMono-webfont.ttf') format('truetype'),
         url('../fonts/DroidSansMono-webfont.svg#droid_sans_monoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@media (min-width: 576px) { 
	#mn-none{display: none;} 
	
   
}

@media (max-width: 576px) { 
	#menu-large{display: none;} 
    #canvas{width:150px; height: 150px;}.portfolio-wrapper{height:121.4px !important;}
   .fil {
    width: 100% !important;
    margin: 0 auto 3%;
}
}