@charset "utf-8";
      /* CSS Document */
      @font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.4.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}
      @font-face {
      font-family:'rounded';
      src:url('../fonts/Rounded_Elegance.ttf');
      font-style:normal;
      }
      @font-face {
      font-family:'art';
      src:url('../fonts/Art%20Brewery.ttf');
      font-style:normal;
      }
      html, body { height:100%; }
      body { font-size:13px; }
      #header { color:#fff; position:relative; }
      #wrapper { min-height:100%;
      position:relative; }
      #content {  }
      #footer { 
      background-color:#333;
      position:absolute;
      width:100%;
      bottom:0; }
      .myfont { font-family:'art'; }
      .font-style { font-family:'rounded'; }
      a { outline:none !important; }
      h1, h2, h3, h4, h5 { font-family:'rounded'; }
      ul { padding:0px; margin:0px; }
      .no-pad { padding:0px; }
      .no-rad { border-radius:0px; }
      .no-mar { margin:0px; }
      .full:before, .full:after {
      display: table;
      content: " ";
      }
      .full:after {
      clear: both;
      }
      .navbar-brand {
      float: left;
      height: auto; 
      padding: 15px 15px;
      font-size: 18px;
      line-height: 20px;
      position: absolute;
      border-radius: 50%;
      background-color: rgb(255, 255, 255);
      border: 2px solid rgba(0, 0, 0, 0.2);
      opacity:0;
      }
      .sayhey{
      position: absolute;
      width: 50px;
      height: 0px;
      background: rgb(255, 255, 255);
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%);
      -webkit-transform: translate(-50%);
      -o-transform: translate(-50%);
      margin-top: 10px;
      border-radius: 0 0 25px 25px;
      border: 0px solid #d5d5d5;
      transition:height .2s ease-in;
      }
      .sayhey span { opacity:0; font-family:'rounded'; transition:all .1s ease-in;-webkit-transition:all .1s ease-in;-moz-transition:all .1s ease-in;-o-transition:all .1s ease-in; }
      .navbar-default .navbar-brand:hover .sayhey {
      height: 100px;
      border: 2px solid #d5d5d5;
      border-top: 0px;
      transition:height .3s ease-in; -webkit-transition:height .3s ease-in;-moz-transition:height .3s ease-in; -o-transition:height .3s ease-in;
      }
      .navbar-default .navbar-brand:hover .sayhey  span { opacity:1; transition:all 1s ease-in; -moz-transition:all 1s ease-in; -o-transition:all 1s ease-in; -webkit-transition:all 1s ease-in; }
      .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
      color: #5e5e5e;
      background-color: rgb(255, 255, 255);
      }
      .nav-mif { margin-top:10px; }
      #home {
      position:relative;
      width: inherit;
      height: inherit;
      min-height:465px;
      overflow: hidden;
      white-space: nowrap;
      z-index: 0;
      color:#fff;
      }
      #home strong { font-size:16px; }
      .hello {
      background-image:url(../img/wall-home.jpg);
      position: relative;
      min-height: 400px;
      height: 100%;
      width: 100%;
      background-size: cover;
      background-position: center;
      }
      .navbar-default {
      background-color: transparent;
      border-color:transparent;
      }
      .navbar-default .navbar-nav>li>a {
      color: #fff;
      }
      .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
      color: #fff;
      }
      .navbar-nav>li>a {
      font-family:'rounded';
      font-size:16px;
      font-weight:bolder;
      }
      .tengah { 
      position:absolute;
      left:50%;
      top:50%;
      margin-right:-50%;
      transform:translate(-50%,-50%);
      -webkit-transform:translate(-50%,-50%);
      -moz-transform:translate(-50%,-50%);
      -o-transform:translate(-50%,-50%);
      }
      .bg {
      width: 150px;
      height: 150px;
      background-color: rgba(255, 255, 255, .7);
      margin-left: auto;
      margin-right: auto;
      border-radius: 50%;
      padding: 10px;
      position: relative;
      border: 3px solid #fff; 
      }
      .half-bg {
      position: absolute;
      width: 50%;
      right: 0;
      height: 100%;
      background-color: rgba(0,0,0,.3);
      }
      .socialNetworks { margin-top:30px; }
      .nav-soc { margin-top:0px !important; }
      .nav-soc span { width: 30px !important;
      height: 30px !important;
      margin-bottom:10px !important;
      }
      .socialNetworks span {
      position: relative;
      width: 45px;
      height: 45px;
      margin-right:10px;
      margin-left:10px;
      cursor: pointer;
      display: inline-block;
      }
      .socialNetworks span.fb:before {
      background-image:url(../img/social-net/fb2.png);
      }
      .socialNetworks span.fb:after {
      background-image:url(../img/social-net/fb.png);
      }
      .socialNetworks span.tw:before {
      background-image:url(../img/social-net/tw2.png);
      }
      .socialNetworks span.tw:after {
      background-image:url(../img/social-net/tw.png);
      }
      .socialNetworks span.fb2:before {
      background-image:url(../img/social-net/fb.png);
      }
      .socialNetworks span.fb2:after {
      background-image:url(../img/social-net/fb2.png);
      }
      .socialNetworks span.tw2:before {
      background-image:url(../img/social-net/tw.png);
      }
      .socialNetworks span.tw2:after {
      background-image:url(../img/social-net/tw2.png);
      }
      .socialNetworks span:hover:before {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
      -o-transform: scale(0);
      }
      .socialNetworks span:hover:after {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
      -o-transform: scale(1);
      }
      .socialNetworks span:after {
      content: " ";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-repeat: no-repeat;
      background-size: contain;
      opacity: 0;
      -webkit-transform: scale(1.7);
      transform: scale(1.7); -o-transform: scale(1.7);
      transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
      -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
      pointer-events: none;
      }
      .socialNetworks span:before {
      content: " ";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-repeat: no-repeat;
      background-size: contain;
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1); -o-transform: scale(1);
      transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
      -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
      pointer-events: none;
      }
      .cp-right {position: absolute;
      bottom: 0;
      font-family: 'rounded'; text-align:center; width:100%;}
      .cp-right a { color:#C60; }.cp-right a:hover { color:#C60; }
      .bg-1 { width:100%;
      background-color:#EFEFEF;
      padding:50px 0px 50px 0px; }
      #what-i-can { width:100%;
      background-color:#fff;
      padding:30px 0px 50px 0px; }
      .img-abt { width:100%; text-align:center; margin-bottom:20px; }
      .img-abt .li-abt {
      height: 200px;
      width: 200px;
      list-style: none; 
      display: inline-block;
      position:relative;
      margin-left: 10px;
      margin-right: 10px;}
      .img-abt .li-abt:nth-child(1), .img-abt .li-abt:nth-child(3) {
      vertical-align: top;
      padding-top: 20px;
      }
      .img-abt .li-abt:nth-child(2) { 
      background: rgba(255, 255, 255, 1);
      border-radius: 50%;
      border: 3px solid rgb(199, 199, 199);
      overflow:hidden;
      }
      .child-li-r, .child-li-l { width:100%; font-family: 'rounded'}	
      .child-li-r { 
      text-align:left; }
      .child-li-r li, .child-li-l li {
      list-style: none;
      font-size: 13px;
      color: #9C9C9C;
      line-height:30px;
      }
      .child-li-r li:before { 
      font-family:'FontAwesome';
      content:"\f111";
      color:#D4D4D4;
      margin-right:5px;
      }
      .child-li-l li:after { 
      font-family:'FontAwesome';
      content:"\f111";
      color:#D4D4D4;
      margin-left:5px;
      }
      .child-li-l li:first-child { margin-right:-20px; }
      .child-li-l li:nth-child(7) { margin-right:-20px; }
      .child-li-r li:first-child { margin-left:-20px; }
      .child-li-r li:nth-child(7){ margin-left:-20px; }
      .child-li-r span, .child-li-l span {
      font-size: 16px;
      padding: 0 20px;
      font-weight: bolder;
      position: relative;
      top: -5px; }
      .child-li-l {
      text-align:right; }
      #portfolio { 
      width: 100%;
      background-color: #EFEFEF;
      padding: 50px 0px 10px 0px;
      }
      .nav-tabs {
      border-bottom: 0px solid transparent;
      width: 100%;
      text-align: center;
      margin-bottom: 40px;
      }
      .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
      color: #555;
      cursor: default;
      background-color: transparent;
      border: 0px solid transparent;
      border-bottom-color: transparent;
      font-family: 'rounded';
      }
      .nav-tabs .active {
      border: 2px solid #333333;
      }
      .nav-tabs>li>a:hover {
      border-color: transparent;
      }
      .nav>li>a:focus, .nav>li>a:hover {
      text-decoration: none;
      background-color: transparent;
      }
      .nav-tabs>li>a {
      margin-right: 0px;
      line-height: 1.42857143;
      border: 0px solid transparent;
      border-radius: 0px;
      font-family: 'rounded';
      font-weight: bolder;
      color: #000;
      }
      .nav>li>a {
      padding: 5px 15px;
      }
      .nav-tabs>li {
      border:2px solid transparent;
      float: none;
      display: inline-block;
      margin-bottom: 0px;
      }
      .tab-content>.active {
      position:relative;
      }
      #Contact { width:100%;
      background-image:url('../img/wall-contact.jpg');
      background-repeat:no-repeat;
      background-position:center;
      background-size:cover;
      padding:50px 0px 50px 0px;
      color:#fff; position:relative;
      }
      .cont {width:100%; text-align:center; margin-top:20px; }
      .cont li { list-style:none;
      display:inline-block;
      max-width:250px;
      min-height:145px;
      text-align:center;
      padding:0px 15px;
      }
      .dots { background-color:rgba(0,0,0,.2);
      width:100%;
      height:100%;
      position:absolute; top:0; }
      .form-control:focus {
      border-color: #FDEEBF;
      outline: 0;
      -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,.075),0 0 0px rgb(251, 237, 190);
      box-shadow: inset 0 0px 0px rgba(0,0,0,.075),0 0 0px rgb(251, 237, 190);
      }
      .inp {
      background-color: transparent;
      border: 2px solid #fff;
      font-family:'rounded';
      color:#fff;
      }
      .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
      color: #fff;
      background-color: transparent;
      }
      .satu .o { background-color: rgb(241, 143, 97); } .dua .o { background-color: rgb(41, 226, 29); } .tiga .o { background-color: rgb(255, 19, 19); } .empat .o {background-color: rgb(255, 255, 255); }
      .o{
      position: absolute;
      width: 100%;
      height: 2px;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%);
      -webkit-transform: translate(-50%);
      -o-transform: translate(-50%);
      bottom: -10px;
      opacity:0;
      }
      .active .o { opacity:1; transition:.5s ease; }
      .navbar-default .navbar-nav>li:hover .o {
      opacity:1; transition:.5s ease;
      }
      .tabs { position:relative; }
      .my-port { width:100%; text-align:center;}
      .my-port li { float:left; list-style:none; width:25%; }
      .my-port li img { min-width:100%; }
      .my-port:before, .my-port:after {
      display: table;
      content: " ";
      }
      .my-port:after {
      clear: both;
      }
      .desc-about {
      line-height: 20px;
      padding-right: 14%;
      padding-left: 14%;
      }
      @media screen and (max-width: 1199px){
      }
      @media screen and (max-width: 991px){
      .desc-about {
      padding-right: 4%;
      padding-left: 4%;
      }
      }
      @media screen and (max-width: 767px){
      .abtimg {
      background: rgba(255, 255, 255, 1);
      border-radius: 50%;
      border: 3px solid rgb(199, 199, 199);
      overflow: hidden;
      height: 130px;
      width: 130px;
      margin-left: auto;
      margin-right: auto;
      }
      .img-abt .li-abt {
      height: 200px;
      width: 150px;
      }
      .child-li-r li, .child-li-l li {
      font-size: 12px;
      line-height: 25px;
      }
      .child-li-l li:first-child, .child-li-l li:nth-child(7) {
      margin-right: 0px;
      }
      .child-li-r li:first-child, .child-li-r li:nth-child(7) {
      margin-left: 0px;
      }
      .child-li-r span, .child-li-l span {
      font-size: 14px;
      padding: 0 1px;
      }
      .desc-about {
      padding-right: 0px;
      padding-left: 0px;
      }
      #home {
      min-height: 400px;
      }
      .socialNetworks {
      padding-bottom: 10px;
      }
      .navbar-brand {
      padding: 3px 3px;
      }
      }
      @media screen and (max-width: 626px){
      .bg {
      width: 120px;
      height: 120px;
      }
      #home {
      white-space: normal;
      }
      #home h1 {
      font-size: 26px;
      }
      #home strong { font-size:13px; }
      }
      @media screen and (max-width: 488px){
      #home {
      min-height: 350px;
      }
      }