/* latin-ext */ 
@font-face {
	font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(http://fonts.gstatic.com/s/robotoslab/v5/y7lebkjgREBJK96VQi37Zqg5eI2G47JWe0-AuFtD150.woff2) format('woff2');
}

@font-face {
	font-family: 'Metone';
	src: url('fonts/Metone.eot');
	src: local('Metone'), url('/fonts/Metone.woff') format('woff'), url('/fonts/Metone.ttf') format('truetype'), url('/fonts/Metone.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}



::selection {
    background: #5742C1; /* Safari */
}
::-moz-selection {
    background: #5742C1; /* Firefox */
}

::-webkit-scrollbar {
	width: 0px;
	height: 0px;
}

::-webkit-scrollbar-button {
	width: 10px;
	height: 5px;
} 

::-webkit-scrollbar-track {
}

::-webkit-scrollbar-thumb {
	background-color: #545454;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #545454;
}

html {height: 100%; font-size: 10pt; }
body { min-height: 100%;       position: relative;   font-family: 'AvenirR', 'Open Sans', sans-serif;  margin: auto; 	background-color: #F5F5F5;}
.a{-webkit-transition-property: all;	-webkit-transition-duration: 200ms;	-moz-transition-property: all;	-moz-transition-duration: 200ms;	transition: all 200ms ease-in-out;}
div,span.body,input,li,ul,body,a {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
.clear{width:100%; clear: both;}
h1, h2, h3, h4, h5, p {margin: 0; padding: 0;}
h1, h2, h3 {font-family: "Metone"; text-transform: uppercase;     text-shadow: -1px 0 #5742C1, 0 1px #5742C1, 1px 0 #5742C1, 0 -1px #5742C1;}
form{margin: 0;}

*:focus { outline: 0; }

.line {width: 100%; color:#5742C1; }
.line.dark{background: #5742C1; color:white; }
.line.dark h1, h2, h3 {    text-shadow: none}
.line.dark a {   color:white;}


.line.blackText{ color:black; }
.line.blackText a {   color:black;}

.line .in.fullPhoto{padding: 0;}
.line .in.fullPhoto img {max-width: 100%;}
.line .in.fullPhoto h2{font-size: 24pt; text-align: center; font-weight: bold; margin: 20px 0 0 0;}

.line.dark.gradient{background: linear-gradient(to bottom, #6C57D5 0%,#5742C1 100%);}
.line .in{max-width: 1200px; margin: 0 auto; padding: 10px;}

.head .logo{height: 50px; }

.main .in {padding: 10px;}
.main h1{font-size: 32pt; float: left; width: 40%; margin: 120px 0 0 0;}
.main img {float:right; width: 60%; max-width: 700px;}

.line .in.footer{text-align: right; opacity: .5; font-size: 8pt; padding: 20px; }

@media screen and (max-width: 915px) {
    .main .in {text-align: center;}
    .main h1{font-size: 28pt; float: none; width: 100%; margin: 10px 0 10px 0; text-align: center;}
    .main img {float:none; width: 100%; margin: 0 auto;}
}

.line .triple.in {padding: 40px 0;} 
.line .triple .info {width: 33%; padding: 10px; float:left; text-align: center;}
.line .triple .info h2 {text-align: center;margin: 20px 0;}
.line .triple .info p {text-align: center; padding: 0 0 20px 0;}
.line .triple .info img {width: 100%; max-width: 380px;}
@media screen and (max-width: 615px) {
    .line .triple .info {width: 100%; }
}
.line.photos {height: 80%; background-size: cover; background-position: center;}

.line.smallphotos {background: #5742C1;}
.line.smallphotos img {display:block; float:left; width: 12.5%;}
.line.smallphotos img:hover {opacity: 0.6;}
@media screen and (max-width: 615px) {
    .line.photos {height: 60%; }
    .line.smallphotos img { width: 25%;}
}


pre {
      background-color: #eee;
    overflow: auto;
    margin: 0 auto 20px;
    max-width: 680px;
    padding: .5em 1em;
    border-radius: 3px;
    box-shadow: 0 0 30px 0 rgba(87, 66, 193, 0.25);}


pre code,
pre .line-number {
  /* Ukuran line-height antara teks di dalam tag <code> dan <span class="line-number"> harus sama! */
  font:normal normal 12px/14px "Courier New",Courier,Monospace;
  color:black;
  display:block;
}

pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  border-right:1px solid;
  text-align:right;
}

pre .line-number span {
  display:block;
  padding:0 .5em 0 1em;
}

pre .cl {
  display:block;
  clear:both;
}