/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

@font-face {
font-family: lato;
src: url("../font/lato/Lato-Reg.ttf");
}
@font-face {
font-family: dosis;
src: url("../font/dosis17/Dosis-Medium.ttf");
}

/* ===================== GLOBAL ===================== */
html, body { margin: 0; padding: 0; color: #555; background: #fafafa; }
* { margin: 0; background: none;border: none;padding: 0;font: normal 12pt dosis, lato, ptsans, tahoma, arial, sans-serif; } 
*, *:before, *:after {box-sizing: border-box; }
a, span {text-decoration: none;display: inline;transition: all ease 0.5s; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; text-transform: uppercase; }
h3 { font-weight: bold; }
article#main { background: none repeat scroll 0 0 #fafafa display: inline-block; }
/* ===================== END OF GLOBAL ===================== */


/* ===================== MAIN CSS ===================== */
#wrapper { width: 100%; }
.container { color: #555; margin: 0 auto; display: table; padding: 1.5em 0; position: relative; width: 80%; }
/* ===================== END OF MAIN CSS ===================== */


/* ===================== ANIMATION ===================== */
@-moz-keyframes show { 0% { top: -20%; } 100% { top: 0; } }
@-webkit-keyframes show { 0% { top: -20%; } 100% { top: 0; } }
@keyframes show { 0% { top: -20%; } 100% { top: 0; } }

@-moz-keyframes hide { 0% { top: 0; } 100% { top: -20%; } }
@-webkit-keyframes hide { 0% { top: 0; } 100% { top: -20%; } }
@keyframes hide { 0% { top: 0; } 100% { top: -20%; } }

@-moz-keyframes link-down { 0% { transform: translateY(0px); } 50% { transform: translateY(3px); } 100% { transform: translateY(0px);  } }
@-webkit-keyframes link-down { 0% { transform: translateY(0px); } 50% { transform: translateY(3px); } 100% { transform: translateY(0px);  } }
@keyframes link-down { 0% { transform: translateY(0px); } 50% { transform: translateY(3px); } 100% { transform: translateY(0px);  } }
/* ===================== END OF ANIMATION ===================== */


/* ===================== SLIDESHOW ===================== */
section#slider { display: inline-block; height: 650px; text-align: center; }
#slideshow { position: relative; }
#slideshow > div { position: absolute; }
#slideshow > div img { position: absolute; max-width: 1350px; }
.cap-wrapper { position: absolute; width: 100%; }
.caption { background: none repeat scroll 0 0 rgba(0, 136, 201, 0.5); border: 1px solid; border-radius: 5px; color: #fafafa; display: inline-block; margin-top: 6%; padding: 3em; text-align: center; }
.caption > header { display: inline-block; }
.caption header > a h1 { border: 2px solid #fafafa; border-radius: 5px; color: #fafafa; display: inline-block; font-size: 50pt; letter-spacing: 5pt; padding: 25px; text-align: center; text-transform: uppercase; transition: all 0.5s ease 0s; }
.caption header > a h1:hover { background: none repeat scroll 0 0 #eaeaea; border: 2px solid #ddd; color: #0088c9; }
.caption > p { font-size: 12pt; margin: 1.5em 0 10px; text-align: left; }
.goto { margin-top: 4%; }
/* ===================== END OF SLIDESHOW ===================== */


/* ===================== SHOW / HIDE HEADER ===================== */
#main-header.show {
  -moz-animation: show 1s;
  -webkit-animation: show 1s;
  -o-animation: show 1s;
  -ms-animation: show 1s;
  animation: show 1s;
}

#main-header.hide {
  animation: 0s running none;
  position: absolute;
  background: none;
  display: none;
}
/* ===================== END OF SHOW / HIDE HEADER ===================== */


/* ===================== MODAL WINDOW ===================== */
#mask { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 9000; display: none; }
#boxes .window { position: absolute; width:400px; height: 200px; top: 0; left: 0; display: none; z-index: 9999; padding: 20px; text-align: center;   }
#boxes #dialog { widows: 700px; height: 350px; padding: 10px;   }
/* ===================== END OF MODAL WINDOW ===================== */


/* ===================== HEADER ===================== */
#main-header {
  background: none repeat scroll 0 0 #0088c9;
  box-shadow: 0 0 5px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

#main-header .container {
  padding: 0.5em 0;
}

#main-header h1 {
  background: url("../img/logo-smk-dentah.png") no-repeat scroll 0 0 / 85px auto rgba(0, 0, 0, 0);
  cursor: pointer;
  display: block;
  float: left;
  height: 100px;
  text-indent: -9999pt;
  width: 85px;
}

#header-left {
  float: left;
  width: 51%;
}

#header-left > p {
  display: inline-block;
  color: #fafafa;
  float: right;
  padding: 10px;
}

#header-right {
  float: right;
  position: relative;
  top: 30px;
  width: 49%;
}
/* ===================== END OF HEADER ===================== */


/* ===================== PAGE ONE ===================== */
#main > section { padding: 2em 0; }
#main > section#one { background: none repeat scroll 0 0 #fafafa; }
#main h1 { font-size: 25pt; padding-bottom: 15pt; text-align: center; text-transform: uppercase; }


#one article { -moz-column-count: 2; -moz-column-gap: 150px; }
#one article { display: inline-block; padding: 2% 0; }
#one footer { background: none; clear: both; display: block; height: 100px; padding-top: 30pt; position: relative; width: 100%; }
#one a.klik { border: 1px solid #0088c9; color: #0088c9; cursor: pointer; display: inline-block; font-size: 18pt; left: 42.5%; padding: 10pt 20pt; position: absolute; text-transform: uppercase; }
#one a.klik:hover { background: none repeat scroll 0 0 #0088c9; color: #fafafa; }
#one .paragraph { display: inline-block; }
#one .container > h1 { font-size: 25pt; padding-bottom: 1em; text-align: center; text-transform: uppercase; }
#one .paragraph > h2 { font-size: 15pt; font-weight: bold; margin-bottom: 10pt; }
#one .paragraph > h3 { font-size: 12pt; font-weight: bold; }

.panel { display: none; padding-bottom: 35px; }
.left.paragraph p { padding-left: 13pt; }
.right.paragraph button { color: #0088c9; cursor: pointer; font-size: 15pt; font-weight: bold; margin-left: -2px; margin-top: 63px; text-decoration: underline; text-transform: uppercase; }
.clear { padding-bottom: 14pt; }
.browse { right: 35%; position: absolute; top: 0; }
.rounded { border-radius: 4px; padding: 8px 25px; width: -moz-fit-content; transition: all 0.3s ease-in-out; }
/* ===================== END OF PAGE ONE ===================== */


/* ===================== PAGE TWO ===================== */
#main > section#two { background: none repeat scroll 0 0 #0088c9; }
#main > section#two h1 { color: #fafafa; }
/* ===================== END OF PAGE TWO ===================== */


/* ===================== FORM ===================== */
#main-header form { float: left; position: absolute; right: 65px; width: 70%; }
#form input[type="text"], #form select, textarea { background: none repeat scroll 0 0 #fafafa; color: #555; }
#form select { padding: 8px 10px; }
#form input { padding: 10px; }
#form textarea { padding: 10px; width: 100%; }
#header-form > input { background: none repeat scroll 0 0 #fafafa; float: right; font-size: 13pt; padding: 10px 15px; width: 100%; }
#banner-form input { background: none repeat scroll 0 0 #fafafa; font-size: 13pt; padding: 10px; width: 100%; }


#modal-14 {
  width: 30%;
}

#modal-14 h3 {
  font-size: 1.7em;
}

#login > input[type="text"], #login > input[type="password"] {
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #0088c9;
  border-radius: 3px;
  margin: 10px 0;
  padding: 8px;
  width: 100%;
}

.md-effect-14 .md-close {
  background: none repeat scroll 0 0 #ddd;
  border: medium none;
  border-radius: 0;
  bottom: 0;
  color: #0088c9;
  font-weight: bold;
  padding: 10px;
  position: absolute;
  right: 0;
}

.md-content span {
  font-size: 92%;
  font-weight: bold;
}

em {
  font-style: italic;
}

.md-content a {
  color: #0088c9;
  text-decoration: underline;
}

#login > input[type='submit'] {
  background: #0088c9;
  color: #fafafa;
  cursor: pointer;
  font-size: 12pt;
  padding: 8px 20px;
  text-transform: uppercase;
  border-radius: 4px;
  margin-top: 15pt;
}

.no_pend {
  display: none;
}

option { padding-left: 13px; margin: 3px 0; -moz-appearance: inherit; text-transform: capitalize; }
option[disabled] { display: none; padding-left: 0; }

input#alamat { width: 100%; }
input#foto { width: 53%; }
input#btn { padding: 0; width: 100%; }
input#pencarian[placeholder] { font-size: 11pt; }
input[placeholder], textarea[placeholder] { font-size: 11pt; }
input[placeholder], textarea[placeholder], select { color: #555; }
input[type="file"] { cursor: pointer; font-size: 20pt; left: 0; opacity: 0; position: absolute; top: 0; width: 38%; }
input[type="submit"] { transition: all ease 0.5s; }

div input#np { background: #ddd none repeat scroll 0 0; }
input.submit { background: #0088c9; color: #fafafa; }
input.submit, div.browse { border: 1px solid #fafafa; color: #fafafa; text-transform: uppercase; cursor: pointer; }
input.submit:hover, div.browse:hover { background: #fafafa; color: #0088c9; }
/* ===================== END OF FORM ===================== */


/* ===================== DATEPICKER ===================== */
.ui-datepicker table { color: #555; }
.ui-datepicker-calendar tr { height: 0; }
.ui-datepicker-calendar td { width: 40px; }
.ui-datepicker-calendar td a { color: #555; }
.ui-datepicker-calendar td a:hover { color: #0088c9; }
/* ===================== END OF DATEPICKER ===================== */

/* ===================== LIST & TABLE ===================== */
ul { list-style: outside none none; }
ol { padding-left: 25pt; }
#table {
  display: table;
  width: 100%;
}

.row {
  clear: both;
  margin-bottom: 2em;
  position: relative;
  width: 100%;
}

.fix-width {
  width: 30%;
}

.margin-right {
  margin-right: 4.7%;
}

select#sel1 {
  width: 30%;
}

select#sel5 {
  margin-right: 5%;
  width: 47%;
}

select#sel6 {
  width: 47%;
}

#row-1 > div {
  float: right;
  text-align: right;
  width: 70%;
}

#row-1 #np {
  background: #dedede;
  text-align: center;
}

#row-1 span {
  color: #fafafa;
  margin-right: 10px;
  text-transform: capitalize;
}

#row-3 > div {
  float: right;
  width: 30%;
}

#sel1, #sel5, #sel6 {
  font-size: 11pt;
}

#row-3 #datepicker {
  margin-right: 4%;
}

#row-8 .submit {
  width: 12%;
}


footer .right li { float: left; }
footer .right li:first-child { margin-right: 20pt; }
#ui-id-1 { z-index: 1111; position: fixed; }
#ui-id-2 { z-index: 1111; }
#myTable td:nth-child(2) { width: 33%; position: relative; }
.pika-table tr { height: 0; }
.right.paragraph li { margin-bottom: 2%; }
/* ===================== END OF LIST & TABLE ===================== */


/* ===================== FOOTER ===================== */
footer { background: #fafafa; clear: both; display: flex; padding: 15px 0; }
footer .container { padding: 0; }
.footer { display: table-cell; }
.left.footer { width: 44%; }
.center.footer { text-align: center; width: 10%; }
.right.footer { width: 45%; }
.right.footer > ul { float: right; position: absolute; right: 0; top: 13%; }
.left.footer > p { position: absolute; top: 35%;  }
.center.footer > a { border: 1px solid #0088c9; border-radius: 50%; display: inline-flex; padding: 15px; }
.center.footer a:hover { box-shadow: 0 0 2px #0088c9; }
p.left, .link {
  color: #0088c9;
}
/* ===================== END OF FOOTER ===================== */


/* =====================  ===================== */
p, li { line-height: 25px; }
#header-right a { border-left: 1px solid #fafafa; float: right; padding: 0 0 0 10px; position: absolute; right: 0; top: 0; }
#header-right i.home { background: url("../img/icon2.png") no-repeat scroll 1px -45px / 35px auto; display: inline-block; height: 42px; transition: all 0.5s ease 0s; width: 35px; }
i.calendar { background: url("../img/icon2.png") no-repeat scroll 0 0 / 25px auto; cursor: pointer; display: block; height: 30px; position: absolute; right: 35%; top: 18%; width: 30px; }
footer ul li i { display: block; width: 48px; height: 48px; transition: 0.5s ease; }
strong { font-weight: bold; color: #0088c9; }
footer i:hover { opacity: 0.8; }
a.download { display: inline-block; margin: 30px 0 0; position: relative; width: 330px; }
a.no-dec { text-decoration: none; }
a.download:hover i, i.download:hover { background: url('../img/icon.png') no-repeat 0 0; }
a.download span { font-size: 16pt; font-weight: bold; left: 13%; position: absolute; text-transform: uppercase; top: 10%; }
.link { color: #0088c9; text-decoration: underline; }
a.info { border: 2px solid #fafafa; border-radius: 50%; display: inline-flex; font-size: 58px; padding: 15px; position: relative; }
a.info:hover i.arrow-down { animation: link-down 1s infinite; }
a.info:hover { box-shadow: 0 0 5px #DDDDDD; }
i.icon { display: inline-block; width: 45px; height: 35px; }
i.download { background: url('../img/icon.png') no-repeat 0 -36px; transition: 0.5s ease; }
i.arrow-down { background: url("../img/arrow.png") no-repeat; display: inline-block; height: 48px; width: 50px; }
i.arrow-up { background: url("../img/arrow.png") no-repeat scroll 0 100% / 30px auto rgba(0, 0, 0, 0); display: inline-block; height: 30px; transform: rotate(180deg); width: 30px; }
i.blog { background: url(../img/wordpress.png) no-repeat; }
i.youtube { background: url(../img/youtube.png) no-repeat; }
/* ===================== END OF ===================== */




#label-menu {
  display: none;
}

input[type='radio'] {display: none;}
input[type='radio']:checked ~ label { background: #0088c9; color: #fafafa; }

.menu {
  float: left;
  width: 50%;
}

.menu label {
  background: #555;
  color: #fafafa;
  cursor: pointer;
  display: inline-block;
  padding: 10px 41.5px;
  text-align: center;
  text-transform:uppercase;
  transition: all 0.2s;
}