@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,400italic,700);

/*css reset*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
.cf { clear:both;}


.logo { padding: 20px;}
.logo img { width: 300px;}
.medsos a img {width: 23px; padding: 13px; opacity: 0.6;}
.medsos a:hover img { background: #ececec; opacity: 1; border-radius: 50%;}

.header{ background-color:yellow; width:100%;}
.cangkang { width:100%; margin-top: 50px;}
.cangkang-rubrik { width:1000px; margin-top: 50px;}

.header-left { float:left; width:30%; background-color:#FFFBA5;height:50px; }
.header-right { float:right; width:60%; background-color:#E1E004;height:50px; }

body {
  /*background: #212121;*/
  font-size: 22px;
  line-height: 32px;
 
  margin: 0;
  padding: 0;
  word-wrap: break-word !important;
  font-family: noto Sans;transition: all 0.5s ease;
}

h1 {
  font-size: 60px;
  text-align: center;
  color: #FFF;
}

h3 {
  font-size: 30px;
  line-height: 34px;
  text-align: center;
  color: #FFF;
}

h3 a { color: #FFF; }

a { color: #FFF; }

h1 {
  margin-top: 100px;
  text-align: center;
  font-size: 60px;
  line-height: 70px;
  font-family: 'roboto', sans-serif;
}

#container {
  margin: 0 auto;
  max-width: 890px;
}

p { text-align: center; }
 .toggle, [id^=drop] {
 display: none;
}

/*menu*/
nav {
  margin: 0;
  padding: 0;
  
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  background-color: rgba(0,0,0,0.85);
}

#logo {
  display: block;
  padding-left: 10px;
  padding-top: 0;
  float: left;
  font-size: 15px;
  line-height: 10px;
  
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  
}

nav a {
  display: block;
  padding: 0 20px;
  color: #FFF;
  font-size: 15px;
  line-height: 40px;
  text-decoration: none;
  
}
nav ul li ul li {background-color: rgba(0,0,0,0.85);}
nav ul li ul li:hover { background: #000000; }
nav a:hover { background-color: #000000; }
nav a.selected { background-color: #ff0068; }
nav ul ul {
  display: none;
  position: absolute;
  top: 40px;
}

nav ul li:hover > ul { display: inherit; }

nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top: -40px;
  left: 170px;
}

li > a:after { content: ' ☰'; }

li > a:only-child:after { content: ''; }
/*end-nav*/


.lity {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  background: #0b0b0b;
  background: rgba(0, 0, 0, 0.9);
  outline: none !important;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
       -o-transition: opacity 0.3s ease;
          transition: opacity 0.3s ease;
}
.lity.lity-opened {
  opacity: 1;
}
.lity.lity-closed {
  opacity: 0;
}

.lity * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.lity-wrap {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  outline: none !important;
}
.lity-wrap:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}
.lity-loader {
  z-index: 9991;
  color: #fff;
  position: absolute;
  top: 50%;
  margin-top: -0.8em;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
       -o-transition: opacity 0.3s ease;
          transition: opacity 0.3s ease;
}
.lity-loading .lity-loader {
  opacity: 1;
}
.lity-container {
  z-index: 9992;
  position: relative;
  text-align: left;
  vertical-align: middle;
  display: inline-block;
  white-space: normal;
  max-width: 100%;
  max-height: 100%;
  outline: none !important;
}
.lity-content {
  z-index: 9993;
  width: 100%;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s ease;
       -o-transition: -o-transform 0.3s ease;
          transition: transform 0.3s ease;
}
.lity-loading .lity-content,
.lity-closed .lity-content {
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
       -o-transform: scale(0.8);
          transform: scale(0.8);
}
.lity-content:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.lity-close {
  z-index: 9994;
  width: 35px;
  height: 35px;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-appearance: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  padding: 0;
  color: #fff;
  font-style: normal;
  font-size: 35px;
  font-family: Arial, noto Sans, monospace;
  line-height: 35px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  border: 0;
  background: none;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.lity-close::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.lity-close:hover,
.lity-close:focus,
.lity-close:active,
.lity-close:visited {
  text-decoration: none;
  text-align: center;
  padding: 0;
  color: #fff;
  font-style: normal;
  font-size: 35px;
  font-family: Arial, noto Sans, monospace;
  line-height: 35px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  border: 0;
  background: none;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.lity-close:active {
  top: 1px;
}
/* Image */
.lity-image img {
  max-width: 100%;
  display: block;
  line-height: 0;
  border: 0;
}
/* iFrame */
.lity-iframe .lity-container {
  width: 100%;
  max-width: 964px;
}
.lity-iframe-container {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}
.lity-iframe-container iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}
.lity-hide {
  display: none;
}


/* Zoom In #2 */
.hover12 figure {
    background: #333;
}
.hover12 figure img {
    -webkit-filter: grayscale(60%);
    filter: grayscale(60%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;


}
.hover12 figure:hover img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

figure {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
}
figure:hover+span {
    bottom: -36px;
    opacity: 1;
}
.bg {width: 100%;}
.content {}
.content-two { float:left; width:50%; }
input,textarea{width:95%; padding: 10px;border-radius: 3px; margin: 5px 0 10px 0; border:none; background-color: #333; color: #fff; font-size: 13px;}
button{padding: 8px 20px;font-size: 20px;margin-top: 10px;border-radius: 3px;}
.content-two p{ padding: 0 20px; margin-bottom: 10px; width: 75%; font-size: 14px; line-height: 22px; text-align: left;}

.partners { margin: 30px 0 30px 0;}
.partners h3 {font-size: 13px; font-weight: normal; text-align: left; padding: 5px 0 0 15px;}
.partners table,tr,td{ vertical-align: middle; border: none;}
.partners table{ width: 100%;}
.partners img { opacity: 0.6; padding: 20px 20px 0 0; max-width: 120px;}

.footer {width:1000px; margin:30px 0;}
.content-tri { float:left; width:33%; padding-top: 20px; text-align: left; }
.content-tri h3 {font-weight: bold;padding: 5px 0 0 15px;font-size: 13px;}
.content-tri a {display: block; text-decoration: none; color: #666; font-size: 13px; padding: 5px 0 0 15px;}
.content-tri a:hover {color: #333; }

.content-four { float:left; width:25%; background-color:#FDB5B6; height:300px;}
.content-four a span {position: absolute; z-index: 9; color: white; text-decoration: none; background: rgba(0,0,0,0.6); padding:5px 10px; font-size: 21px; display: none;}
.content-four a:hover span {display: block;}
.content-four a span p {font-size: 14px;}
.mobile-dropdown { display: none; }



@media only screen and (max-width: 800px) {
	.cangkang { width:100%;}
    .footer {width:100%}
    .content-four {float:left; width:48%; padding: 1%; background: white;}
    .content-tri { float:left; width:50%; }
    .hover12 figure img {
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
    } 
    .content-four a span {display: block; font-size: 18px;}

    #logo {
      display: block;
      padding-top: 5px;
      width: 100%;
      text-align: center;
      float: none;
      border-bottom: solid 1px #666;
    }

    nav { margin: 0;}

    .toggle + a,
     .menu { display: none; }

    .toggle {
      display: block;
      padding: 0 20px;
      color: #FFF;
      font-size: 15px;
      line-height: 40px;
      text-decoration: none;
      border: none;
    }

    .toggle:hover { background-color: #fc0866; }

    [id^=drop]:checked + ul { display: block; }
    nav ul { float: left; width:100%; }
    nav ul li {
      display: block;
      width: 100%;
    }

    nav ul ul .toggle,
     nav ul ul a { padding: 0; }

    nav ul ul ul a { padding: 0; }

    nav a:hover,
     nav ul ul ul a { background-color: #cc155b; }

    nav ul li ul li .toggle,
     nav ul ul a { background-color: #e01262; padding-left: 20px; }

    nav ul ul {
      float: none;
      position: static;
      color: #ffffff;
    }

    nav ul ul li:hover > ul,
    nav ul li:hover > ul { display: none; }

    nav ul ul li {
      display: block;
      width: 100%;
    }

    nav ul ul ul li { position: static;}
}

@media only screen and (max-width: 480px) {
	.cangkang { width:100%; padding-top: 40px;}
	.medsos a { margin-right: 20px; }
    .footer {width:100%}
    .partners { display: none;}
    .content-two { float:none; width:100%;}
    .content-tri { float:none; width:100%;}
    .content-four { float:none; width:100%; border-bottom: solid 20px #fff;}
    .hover12 figure img {
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
    } 
    .content-four a span {display: block; font-size: 14px;}
    .content-two p { width: 90%; }
    .content-two form {width: 90%; margin-left: 5%; margin-top: 5%;}
    .content-four a span p { border-top: solid 1px #cecece; text-align: left; font-style: italic; }
    nav ul li {
      display: block;
      width: 100%;
    }

}