body{overflow: hidden}
/* start search *
.search {display: none;background: none;margin-top: 500px;z-index:99999;position: fixed;width: 100%}
.search .float { float: right; margin-right: 25px;}
.search .float input{padding:5px 10px;font-size:12px;font-weight:600;color:#fff;background:none;border:none;margin-right:50px;opacity:0 }
.search .float .icon {margin-left: 157px;margin-top:-12px;cursor:pointer}
.search .float  i:first-of-type{font-size: 15px;color: #eee;display: block;-webkit-transform: rotate(-34deg);opacity: 0;}
.search .float i:nth-of-type(2){font-size:30px;border:2px solid #eee; border-radius:50%;color:#eee;padding:8px;margin-top:3px;margin-left:2px }
.search .float .icon,.search .float .icon:hover i:nth-of-type(2),.search .float .icon:hover i:first-of-type{-webkit-transition-duration: 1.2s}
/* end search */

/*******************************/
 /* Start slide*/
.slide{background: url("../image/10.jpg") no-repeat center center fixed;height: 662px;-webkit-bacground-size :cover;}
.slide .slideopacity {background: rgba(3,3,3,.5);height: 662px;}
.slide .slideopacity .info{margin-top: 280px;}
.slide .slideopacity .info .hello button{
    background:none;
    border-radius: 10px;
    font-size: 18px;
    border: 2px solid #441e16;
    margin-top: 5px;
    color: #fff;
    font-family:sans-serif;
    font-weight: 500;
    -webkit-transition-duration: 1s;
    margin-left: 120px}
.slide .slideopacity .info .hello button:hover{background: #441e16;}
.slide .social {float: right; display: inline;margin-top: -117px;}
.slide .social ul{list-style: none; }
.slide .social ul li{padding: 10px;font-size: 25px;}
.slide .social ul l{border: 1px solid #c64955;;border-radius: 50%}
.slide .social ul li:first-of-type  i{color: #3b5998;-webkit-transition-duration: 1s;opacit: .5 /*4570b9*/}
.slide .social ul li:nth-of-type(2) i{color: #62c8f8;-webkit-transition-duration: 1s;opaciy: .5 /*49c9f9*/}
.slide .social ul li:nth-of-type(3) i{color: #f3f3f3;-webkit-transition-duration: 1s;opacty: .5 /*f1ba02*/}
.slide .social ul li:first-of-type  i:hover{-webkit-transform: rotate(360deg);opacity: 1 }
.slide .social ul li:nth-of-type(2) i:hover{-webkit-transform: rotate(360deg);opacity: 1 }
.slide .social ul li:nth-of-type(3) i:hover{-webkit-transform: rotate(360deg);opacity: 1 }

/* End slide*/

/* start about*/
.about {background-color: #441e16;}
.about .pad{padding: 60px 0}
.about img{min-height:350px;background: none;}
.about h1{color: #fff;padding: 35px 0 25px 0;font-size: 40px;font-weight: 700;}
.about p{color: #eee;line-height:1.6;text-indent: 10px;}
.about button{background:none;font-size: 18px;margin-top: 15px;color: #fff;font-weight: 500;padding-left: 5px;-webkit-transition-duration: 1s;}
.about button:hover{color: #c64955;-webkit-transform: scale(1.1,1.1)}
.about button a{color: none;}
/* end about*/

/* Start portfolio*/
.portfolio{background: url("../image/12.jpg") no-repeat center center fixed;height: auto;background-size: cover}
.portfolio .portshadow{background:rgba(5,5,5,.5);height: auto}
.portfolio .portshadow h2{text-align: center;color: #eee;padding: 50px 0;font-size: 50px;font-weight: 600;font-family:serif, fantasy ,cursive;}
.portfolio .portshadow .mockup{padding-bottom:70px}
.portfolio .portshadow img{background:none;border: none;border-radius: 10%;padding-top: 10px;}
.portfolio .portshadow .mockup .dis{display: none}
.portfolio .portshadow .arrow {text-align: center;padding: 30px;z-index:9999999}
.portfolio .portshadow .arrow i{color: #eee;border: 1px solid #eee;border-radius: 50%;font-size: 25px;padding: 10px;}
.portfolio .portshadow .arrow i:hover{-webkit-transform: scale(1.2,1.2);cursor: pointer}
/* End portfolio*/

/* Start skills */
.skills{background-color: #441e16;height:auto}
.skills h2{text-align: center;color: #eee;font-size: 50px;padding: 50px 0;font-family: serif, fantasy ,cursive;}
.skills .progress-bar{background-color: #c64955}
.skills .skillelem{padding: 12px}
.skills .row{padding-bottom: 38px}
.skills p{display: inline-block;float: left;font-size: 25px;color: #eee;font-weight: 400;padding: 10px 0px 5px 10px;}
.skills span{float: right;font-size: 25px;color: #eee;font-weight: 400;padding: 10px 10px 5px 0px;}
/* End skills */

/* start contact*/
.contact{background: url("../image/12flip.jpg") no-repeat center center fixed;height: auto;background-size: cover;}
.contact .contactshad{background: rgba(5,5,5,.5);height: auto}
.contact .contactshad .container >i{color: #c64955;padding-top: 50px;font-size: 90px}
.contact .contactshad .container >h2{color: #eee;padding-bottom: 30px;font-size:30px;font-weight: 500;font-family: fantasy}
.contact .social {margin-top: 45px;margin-right: 35px;}
.contact .social ul {list-style: none;padding-left: 0;}
.contact .social ul li{padding:0px 60px;font-size: 40px;display:inline}
.contact .social ul li i{color: #eee;-webkit-transition-duration: 1s;opacit: .5}

.contact .social ul li i:hover{-webkit-transform: rotate(360deg);opacity: 1}
.contact .social ul li:first-of-type  i:hover{color: #4570b9}
.contact .social ul li:nth-of-type(2) i:hover{color: #49c9f9}
.contact .social ul li:nth-of-type(3) i:hover{color: #d1a101}
.contact .social ul li:last-of-type  i:hover {color: #25D366}

.contact .contactshad .container >i:last-of-type{color: #eee;padding-top: 50px;font-size: 65px;}
.contact .contactshad .container >p{color: #eee;font-size: 25px;padding: 35px;}
.contact .contactshad .footer p{color: #eee;font-size: 10px;padding: 5px 0 3px 0;}
.contact .contactshad .footer h2{color: #c64955;padding-bottom: 30px;font-size:10px;font-family: monospace}
/* end contact*/

/* start loading overlay*/
.loading{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999999;
    background: #441e16
}
.spinner {
  width: 40px;
  height: 40px;
  background-color: #c64955;
  margin:330px auto;   
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
/* end loading overlay*/

/**********START HOVER*************/
.hvr-bounce-to-bottom {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-bounce-to-bottom:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #c64955;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-bounce-to-bottom:hover, .hvr-bounce-to-bottom:focus, .hvr-bounce-to-bottom:active {color: white;}
.hvr-bounce-to-bottom:hover:before, .hvr-bounce-to-bottom:focus:before, .hvr-bounce-to-bottom:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
/**********************************/
.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; }
}