/************************
*** CUSTOM RESPONSIVE ***
*************************/

html, body { color: #555555; }

/* ==================== SLIDER ==================== */
@media screen and (max-width:1366px) { #slideshow > div img { max-width: 1366px; } }
@media screen and (max-width:1024px) { #slideshow > div img { max-width: 1024px; } section#slider { height: 500px; } }
@media screen and (max-width:800px) { #slideshow > div img { max-width: 800px; } section#slider { height: 300px; } }
@media screen and (max-width:768px) { #slideshow > div img { max-width: 768px; } section#slider { height: 270px; } }
@media screen and (max-width:640px) { #slideshow > div img { max-width: 640px; } }
@media screen and (max-width:600px) { #slideshow > div img { max-width: 600px; } }
@media screen and (max-width:480px) { #slideshow > div img { max-width: 480px; } }
@media screen and (max-width:320px) and (max-width:479px) { #slideshow > div img { max-width: 479px; } }



/* ==================== 1280px ==================== */
@media screen and (max-width:1366px) {

.container { width: 85%; }

#header-left { width: 51%; }
#header-right { width: 45%; }

}



/* ==================== 1024px ==================== */
@media screen and (min-width:801px) and (max-width:1024px) {

.container { width: 90%; padding: 1em 0; }

/* ------- HEADER ------- */
#header-left { width: 59%; }
#header-right { width: 40%; }
#header-left > p { font-size: 11pt; }
#one a.klik { left: 39.5%; }
#main > section {
  padding: 0;
}
#main h1 { padding-bottom: 8pt; }
#row-8 .submit {
  width: 15%;
}
input#foto {
  width: 50%;
}
select#sel5, select#sel6 { width: 46.8%; }

/* ------- CONTENT ------- */
.margin-right {
  margin-right: 4.6%;
}
.right.paragraph button { margin-top: 40px; }
.caption header > a h1 { font-size: 35pt; }
.caption > p { font-size: 10.5pt; }
.goto { margin-top: 1%; }


i.arrow-down { background-size: 35px; height: 35px; width: 35px; }
}


/* ================= 768px to 800px ================ */
@media screen and (min-width:768px) and (max-width:800px) {

.container { width: 95%; }
.caption { padding: 2em; }
.caption header > a h1 { font-size: 41pt; padding: 20px; }
.caption > p { font-size: 11pt; }
.margin-right {
  margin-right: 4.55%;
}
#main-header h1 { background-size: 65px; height: 80px; width: 65px; }
#main-header form { top: 3px; }
#main-header form > input { font-size: 10pt; }
#header-left { width: 61%; }
#header-right { width: 35%; top: 20px; }
#header-left > p { font-size: 10pt; padding: 0; }
#one article { -moz-column-count: 1; -webkit-column-count: 1; -o-column-count: 1; column-count: 1; }
#one a.klik { left: 39.5%; }
#row-3 select {
  font-size: 11pt;
}
#row-8 .submit {
  width: 18%;
}

input#pencarian[placeholder] { font-size: 10pt; }
input#foto {
  width: 48%;
}
select#sel6 {
  width: 46.5%;
}
a.info { font-size: 58px; padding: 10px; }
i.arrow-down { background-size: 43px; height: 41px; width: 42px; }
i.calendar { right: 50px; }
td.button input.submit { width: 55%; }
article#main {
  height: 850px;
}

}


/* ==================== 640px ==================== */
@media screen and (max-width:640px) {

.container { width: 95%; }
.caption { padding: 2em; }
.caption header > a h1 { font-size: 35pt; padding: 15px; }
.caption > p { font-size: 10pt; }

#main-header form { top: 3px; width: 100%; }
#main-header form > input { font-size: 10pt; }
#header-left > p { display: none; }
#one article { -moz-column-count: 1; -webkit-column-count: 1; -o-column-count: 1; column-count: 1; }
#one a.click { left: 34%; }
#slideshow > div img { width: 700px; }

input#pencarian[placeholder] { font-size: 10pt; }

}


/* ==================== 320px to 480px ==================== */
@media screen and (min-width:320px) and (max-width:480px) {

article#main {
  height: auto;
}

section#slider {
  height: 110px;
}
#main-header.hide { display: block; background: #0088c9; position: relative; }
#main-header.show { animation: none; display: none; }
#main-header h1 { background-size: 70px; height: 85px; }
#header-left { width: 21%; }
#header-right { top: 23px; width: 53%; }
#one article { padding: 2% 3%; }
#one footer { height: 80px; padding-top: 10pt; }
#one a.klik { left: 25%; font-size: 15pt; padding: 8pt 15pt; }
#nisn, #kec, #rmh {
  margin-bottom: 0;
}
select#sel1 {
  width: 100%;
}
#row-3 > div {
  margin-bottom: 15px;
}

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

input#foto {
  width: 62%;
}

.browse {
  position: absolute;
  right: 0;
  top: 3%;
}

#row-3 > div {
  width: 100%;
}

#row-8 .submit {
  margin-top: 8%;
  width: 40%;
}


article p, article li { font-size: 10pt; }
article ol, article p { width: 90%; }
ol { padding-left: 20pt; }
footer { height: 70px; }
footer .right li:first-child { margin-right: 10pt; }
a.download span, .right.paragraph button { font-size: 13pt; }
i.calendar { top: 6%; right: 0; }

.container > header { display: none; }
.left.paragraph p { font-size: 10pt; }
.right.paragraph button { margin-top: 20px; }
.center.footer { display: none; }
.menu { width: 100%; }
.caption { margin: 0; }
.goto { display: none; }
.row { margin-bottom: 1em; }
.fix-width {
  margin-bottom: 15px;
  width: 100%;
}
.cap-wrapper {
  top: 121px;
}
.caption > p {
  display: none;
}
.caption {
  padding: 2em;
}
.caption > header {
  margin-bottom: 10px;
}
.caption header > a h1 {
  font-size: 25pt;
  padding: 12px;
}

}


/* ==================== 320px to 800px ==================== */
@media screen and (min-width:320px) and (max-width:800px) {

#main-header.hide { display: block; background: #0088c9; position: relative; }
#label-menu { display: block; padding-top: 120px; }
#main section { padding: 0; }

section#one footer { display: none; }
i.arrow-up { height: 25px; width: 25px; background-size: 25px; }
i.blog, i.youtube { background-size: 40px; }
p.left, .link { font-size: 85%; }

.goto { display: none; }
.container header { display: none; }
.menu label { width: 100%; padding: 10px 30px; }
.center.footer { display: none; }
.left.footer p { top: 7px; }
.right.paragraph { padding-top: 2em; }
footer .right li:first-child {
  margin-right: 2px;
}

}