@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
html,body {height: 100%;font-family: 'Open Sans', sans-serif;font-weight:300;font-size:12px;}
h1,h2,h3,h4,h5,h6{font-family:'Lato'; text-decoration:none;}


.navbar-inverse .navbar-nav > li > a {
	transition:0.2s;
}
.innfo{padding:5px 0 5px 0; font-family: Open Sans; text-align:left; font-size:11px; text-align:center;  color:#a8a8a8;}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    color: #544087;
	border-bottom:2px solid #544087;
	
	transition:0.2s;
    background-color: transparent;
}
#info{background:#2d3e50; color:#fff; padding:20px 0px 20px 0px;}
.mmbl{transition:0.3s; padding-bottom:10px;}
.mmbl:hover{background:#e37f0d; transition:0.3s;-webkit-box-shadow: 0px -1px 13px 5px rgba(189,189,189,1);
-moz-box-shadow: 0px -1px 13px 5px rgba(189,189,189,1);
box-shadow: 0px -1px 13px 5px rgba(189,189,189,1); cursor:pointer;}
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: #f27e17;
	font-size:14px;
	border-radius:5px;
}
.deemo{text-align:center; margin-top:10px;}
.btn-deemo{background:#544087; color:#fff;}
.btn-deeemo{background:#f27e17; color:#fff;}
.gt img{height:200px; margin:auto; width:60%;}
.navbar-brand {
    width: 100px;
    padding: 0px 20px;
}
.bor td {
  padding: 100px;
}
.foot{padding-top:50px; padding-bottom:50px;}
.foot a{font-size:13px; line-height:20px; color:#797979;}
.navbar-inverse .navbar-nav > .active > a{font-size:16px; font-weight:; color:#544087;}
.navbar-inverse {
	transition:0.2s;
    background: #fff;
   border-bottom: 5px solid #e37f0d;

	padding:10px 0 15px 0;
	border-top:0px solid;
	border-right:0px solid;
	border-left:0px solid;
    border-radius: 0px;
	z-index:3;
}
/*
.element {
  height: 150px;
  width: 450px;
  margin: 0 auto;
  background-color: ;
  animation-name: stretch;
  animation-duration: 2.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 2;
  animation-direction: alternate;
  animation-iteration-count: 2.9;
  animation-fill-mode: none;
  animation-play-state: running;
}

svg{font-weight:bold;max-width:600px;height:auto;}

@keyframes stretch {
  0% {
    transform: scale(.2);
    color:yellow ;
    border-radius: 100%;
  }
  50% {
    color:#fff;
  }
  80% {
    transform: scale(1.5);
    color:green ;
  }
}*/
#layanan{margin-top:85px; overflow:hidden;}
.agpro{border-bottom:1px solid #eee; margin-bottom:30px;}
.gpro img{width:100%;}
.navbar-header .navbar-toggle{background:#544087; margin-top:20px; color:#eee; border:1px solid #fff;}
.navbar-header .navbar-toggle span{background:#eee;}
.navbar-header .navbar-toggle .collapsed{background:#fcdf0a; }
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
    background-color: #f27e17;
}
#os{padding:60px 0 20px 0; border-bottom:1px solid #eee;}
#pj{padding:60px 0 50px 0; background:#f27e17; color:#fff;  border-bottom:1px solid #eee;}
.mb{margin-bottom:20px;}
.text {
  position: absolute;
  width: 450px;
  left: 50%;
  margin-left: -225px;
  height: 40px;
  top: 50%;
  margin-top: -20px;
}

p {
  display: inline-block;
  vertical-align: top;

}

.word {
 font-size:20px;
  opacity: 0;
  padding-left:10px;
  font-weight:bold;
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}

.letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
  transform: rotateX(-90deg);
}

.letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wisteria {
  color: #f69ff7;
}

.belize {
  color: #2980b9;
}

.pomegranate {
  color: #c0392b;
}

.green {
  color: #16a085;
}

.midnight {
  color: #9ff7cc;
}
.lh{line-height:30px;}
.googl{text-align:center; background: url(google-adwords-logo.jpg)-100px -180px  ; height:210px; background-position:fixed;}
.ggg{margin-bottom:40px; font-size:12pt;}
.gg{margin-bottom:0px; font-size:12pt;}
#judul{color:#fff; padding:20px 0 0px 0; position: relative; overflow: hidden; background-size: cover; background:url(kodeing.png) -180px 0px;}
.btn-circle {width: 40px;height: 40px;margin-top: 30px;padding: 5px 0px 0 3px;border: 2px solid #fff;border-radius: 20px;font-size: 20px;color: #ccc;background: 0 0; -webkit-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; transition: background .3s ease-in-out;}
.btn-circle:hover,.btn-circle:focus {outline: 0; color: #ccc; background: rgba(0,0,0,.1);}
.btn-circle i.animated { -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s;}
.btn-circle:hover i.animated { -webkit-animation-name: pulse; -moz-animation-name: pulse; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite;  -webkit-animation-timing-function: linear;-moz-animation-timing-function: linear;}
header {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 290px;
	background: url(DSC_0032_s75.jpg) 0px -180px;
	background-size: cover;
}
.hello {
	position: absolute;
	background-color: rgba(45, 62, 80, 0.5); text-align:center; 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	z-index: 1;
}
.g2{
	display: inline-block;
	text-align: center;
	position: absolute;
	width: 100%;
	top: 400px;
	right: 0;
	background:red;
	bottom: 0;
	left: 0;
	height: 226px;
	margin: auto;
	color: #fff;
	z-index: 2;
}
hgroup {
	display: inline-block;
	text-align: center;
	position: absolute;
	width: 60%;
	top: -15px;
	right: 0;

	bottom: 0;
	left: 0;
	height: 111px;
	margin: auto;
	color: #fff;
	z-index: 2;
}
#pilarian{background:#2d3e50; color:#fff; padding:5px 0px 5px 0px;}
#pilarian input[type='text']{width:100%; margin-top:15px; text-indent:10px; color:#212121; height:35px;}
#pilarian input[type='search']{width:100%; margin-top:15px; text-indent:10px; color:#212121; height:35px;}
#pilarian input[type='button']{width:100%; background:#cd6609;  margin-top:15px; color:#fff; height:35px;}
#pilarian input[type='submit']{width:100%; background:#cd6609;  margin-top:15px; color:#fff; height:35px;}
#barang{padding-bottom:80px; margin-top:20px; border-bottom:1px solid #eee;}
.overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url(DSC_0032_s75.jpg)  0px -160px;
	background-size: cover;
	z-index: 0;
	opacity: 0;
}
.gambar{padding:20px 0px 0px 0;}
.gambar img{height:230px;}
.judul{padding:10px 0px 20px 0px; margin-bottom:20px; background:#eee;}
.sub{padding-left:20px; color:#808080; font-size:14pt;}
.subb{padding-left:20px; color:#c4c2c2; font-size:10pt;}
.about {
	width: 100%;
	height: 100vh;
	padding: 80px;
	text-align: center;
}

.navbar-header{border-right:1px solid #eee;}
 .affix {
	 transition:5s;
      top: 0;
      width: 100%;
  }

  .affix + .container-fluid {
      padding-top: 70px;
  }
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus{background:transparent; color:#783077;}
.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 70px 15px 20px;
}

.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: "\e151";
}

a.desc:after {
    content: "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view td {
    white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
    min-width: 50px;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}
@import url('//use.fontawesome.com/releases/v4.7.0/css/font-awesome-css.min.css');
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.eot');
  src: url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
       url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.woff2') format('woff2'),
       url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.woff') format('woff'),
       url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.ttf') format('truetype'),
       url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.pc{font-size:40pt; text-align:center; line-height:80px;}
.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding: 15px;
    border: none;
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }
	.hide-xs{display:none;}
	h1{font-size:15px;}
	.element p{font-size:10px;}
	header{height:300px; background: url(DSC_0032_s75.jpg) -261px -351px;}
	
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
}

.nav > li > form > button.logout:focus {
    outline: none;
}