/*
  Hanna Tiara Andarlia, Lailatus Syifa, Lutfi Septian Akbar, Sarah Astari, Yayang Wijaya
  Group 6
  Career Exploration #7 by Glints Academy with Progate
*/
html {box-sizing:border-box}*,*:before,*:after {box-sizing:inherit}


/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html {
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%
}

body {
  margin:0
}

.top,.bottom {
  position:fixed;
  width:100%;
  z-index:1
}

.top {
  top:0;
  background-color: white;
  font-family: "Lucida Sans Unicode" sans-serif;
  letter-spacing: 1px
}
.top .fa {
  margin-right: 0
}

.logo {
  height: 54px;
  float: left;
  margin-left: 30px
}
.logo:hover {
  filter: saturate(200%);
}

.fa {
  margin-right: 16px
}
.card img {
  width:100%;
  height:220px;
}

.submit {
  border-radius: 10px;
  box-shadow: 0 5px 1px #f7999d;
  border: none
}
.submit:active {
  position: relative;
  top: 5px;
  box-shadow: none
}
.signup {
  color: white;
  border: none;
  padding: 12px 24px;
  background-color: #f7adaf;
  box-shadow: 0 5px 1px #f7868a
}
.signup:hover {
  color: #f7adaf;
  background-color: white
}
.signup:active {
  border:none;
  position: relative;
  top: 5px;
  box-shadow: none
}

article,aside,details,
figcaption,figure,
header,main,menu,nav,section {
  display:block
}

summary {
  display:list-item
}

audio,canvas,progress,video {
  display:inline-block
}

progress {
  vertical-align:baseline
}

audio:not([controls]) {
  display:none;
  height:0
}

[hidden],template {
  display:none
}

a {
  background-color:transparent
}

a:active,a:hover {
  outline-width:0
}

abbr[title] {
  border-bottom:none;
  text-decoration:underline;
  text-decoration:underline dotted
}

b,strong {
  font-weight:bolder
}

dfn {
  font-style:italic
}

mark {
  background:#ff0;
  color:#000
}

small {
  font-size:80%
}

sub,sup {
  font-size:75%;
  line-height:0;
  position:relative;
  vertical-align:baseline
}

sub {
  bottom:-0.25em
}

sup {
  top:-0.5em
}

figure {
  margin:1em 40px
}

img {
  border-style:none;
}

.img-program {
  width: 200px;
  height: 200px;
}

code,kbd,pre,samp {
  font-family:monospace,monospace;
  font-size:1em
}

hr {
  box-sizing:content-box;
  height:0;
  overflow:visible
}

button,input,select,
textarea,optgroup {
  font:inherit;
  margin:0
}

optgroup {
  font-weight:bold
}

button,input {
  overflow:visible
}

button,select {
  text-transform:none
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance:button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style:none;
  padding:0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline:1px dotted ButtonText
}

fieldset {
  border:1px solid #c0c0c0;
  margin:0 2px;
  padding:.35em .625em .75em
}

legend {
  color:inherit;
  display:table;
  max-width:100%;
  padding:0;
  white-space:normal
}

textarea {
  overflow:auto
}

[type=checkbox],
[type=radio] {
  padding:0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height:auto
}

[type=search] {
  -webkit-appearance:textfield;
  outline-offset:-2px
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance:none
}

::-webkit-file-upload-button {
  -webkit-appearance:button;
  font:inherit
}
/* End extract */

html,body {
  font-family:Verdana,sans-serif;
  font-size:15px;
  line-height:1.5;
  height: 100%;
}

html {
  overflow-x:hidden
}

h1 {
  font-size:36px;
  color: #f7adaf!important
}

h2 {
  font-size:30px
}

h3 {
  font-size:24px
}

h4 {
  font-size:20px
}

h5 {
  font-size:18px
}

h6 {
  font-size:16px
}

h1,h2,h3,h4,h5,h6 {
  font-family:"Segoe UI",Arial,sans-serif;
  font-weight:400;
  margin:10px 0
}

span {
  font-family: 'Fredoka One', cursive;
}

.wide {
  letter-spacing:4px
}

hr {
  border:0;
  border-top:1px solid #eee;
  margin:20px 0
}

.image {
  max-width:100%;
  height:auto
}

img {
  vertical-align:middle
}

a {
  color:inherit
}

.button {
  border:none;
  display:inline-block;
  padding:8px 20px;
  font-size: 18px;
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  background-color:inherit;
  text-align:center;
  cursor:pointer;
  white-space:nowrap;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  color: #f7adaf!important;
  background-color: white!important
}
.button:hover {
  color:white!important;
  background-color:#f7adaf!important
}

.ul {
  list-style-type:none;
  padding:0;
  margin:0
}

.ul li {
  padding:8px 16px;
  border-bottom:1px solid #ddd
}

.ul li:last-child {
  border-bottom:none
}

.input {
  padding:8px;
  display:block;
  border:none;
  border-bottom:1px solid #ccc;width:100%
}

.sidebar {
  height:100%;
  width:200px;
  background-color:#fff;
  position:relative;
  z-index:1;
  overflow:auto
}

.bar-block .button,
.bar-block .button {
  width:100%;text-align:left;padding:8px 16px
}

.bar {
  width:100%;
  overflow:hidden
}

.center .bar {
  display:inline-block;
  width:auto
}

.bar .bar-item {
  padding:8px 16px;
  float:left;
  width:auto;
  border:none;
  display:block;
  outline:0
}

.bar .button {
  white-space:normal;
  padding: 16px
}

.bar-block .bar-item {
  width:100%;
  display:block;
  padding:8px 16px;
  text-align:left;
  border:none;
  white-space:normal;
  float:none;
  outline:0
}

.bar-block.center .bar-item {
  text-align:center
}

.block {
  display:block;
  width:100%
}

.container:after,
.container:before,
.row:after,
.row:before,
.row-padding:after,
.row-padding:before,
.bar:before,
.bar:after {
  content:"";
  display:table;
  clear:both
}

.col,.half,.third,.quarter {
  float:left;width:100%
}

.display-bottomleft {
  position:absolute;
  left:0;
  bottom:0
}
.display-left {
  position:absolute;
  top:50%;
  left:0%;
  transform:translate(0%,-50%);
  -ms-transform:translate(-0%,-50%)
}
.display-container:hover .display-hover {
  display:block
}
.display-container:hover span.display-hover {
  display:inline-block
}

.round-large {
  border-radius:8px
}

.row-padding,
.row-padding>.half,
.row-padding>.third,
.row-padding>.twothird,
.row-padding>.threequarter,
.row-padding>.quarter,
.row-padding>.col {
  padding:0 8px
}

.container {
  padding:0.01em 16px
}

.card {
  box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 4px 20px 0 rgba(0,0,0,0.20);
  filter:grayscale(30%);
}
.card:hover {
  filter: saturate(150%);
}

.hover-shadow:hover {
  box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)
}

.animate-right {
  position:relative;
  animation:animateright 0.4s
}
@keyframes animateright {
  from{
    right:-300px;
    opacity:0
  }
  to{
    right:0;
    opacity:1
  }
}

.opacity,
.hover-opacity:hover {
  opacity:0.60
}
.opacity-off,
.hover-opacity-off:hover {
  opacity:1
}
.opacity-max {
  opacity:0.25
}
.opacity-min {
  opacity:0.75
}

.small {
  font-size:12px!important
}
.medium {
  font-size:15px!important
}
.large {
  font-size:18px!important
}
.xlarge {
  font-size:24px!important
}
.xxlarge {
  font-size:36px!important
}
.jumbo {
  font-size:64px!important
}

.center {
  text-align:center!important
}

.border {
  border:1px solid #ccc!important
}

.section {
  margin-top:16px!important;margin-bottom:16px!important
}

.margin-top {
  margin-top:16px!important
}
.margin-bottom {
  margin-bottom:16px!important
}

.padding-small {
  padding:4px 8px!important
}
.padding {
  padding:8px 16px!important
}
.padding-16 {
  padding-top:16px!important;
  padding-bottom:16px!important
}
.padding-24 {
  padding-top:24px!important;
  padding-bottom:24px!important
}
.padding-32 {
  padding-top:32px!important;
  padding-bottom:32px!important
}
.padding-48 {
  padding-top:48px!important;
  padding-bottom:48px!important
}
.padding-64 {
  padding-top:64px!important;
  padding-bottom:64px!important
}

.left {
  float:left!important;
  margin-left: 30px
}
.right {
  float:right!important;
  margin-right: 30px
}

/* Responsive */
@media (max-width:670px) {
  .hide-small {
    display:none!important
  }
  .sidebar {
    display: none
  }
  .sidebar:active {
    display: block
  }
  .center ol {
    text-align: left;
  }
  .card img {
    height:300px
  }
  .quarter {
    padding-bottom: 20px
  }
}

@media (min-width:671px){
  .col.m5{
    width:41.66666%
  }
  .col.m6,.half{
    width:49.99999%
  }
  .quarter{
    width:24.99999%
  }
  .third{
    width:33.33333%
  }
  .twothird{
      width:66.66666%
  }
  .threequarter{
      width:74.99999%
  }
}

@media (max-width:1000px) and (min-width:671px) {
  .hide-medium {
    display:none!important
  }
}

@media (min-width:1001px) {
  .hide-large {
    display:none!important
  }
  .col.l2{
    width:19.99999%
  }
  .col.l3{
    width:24.99999%
  }
  .center ol {
    text-align: left;
    margin-left: 250px
  }
  .alamat {
    margin-left: 250px
  }
  .alamat p {
    display: inline;
    float: left;
    margin-right: 50px
  }
  .sidebar {
    display: none
  }
}

/* Colors */
.link:hover {color: #f7adaf!important; filter: saturate(105%)}
.warna {color: #f7adaf!important;background-color: white!important}
.warna:hover {color: white!important; background-color: #f7adaf!important}
.warnabalik {color: white!important; background-color: #f7adaf!important}
.pink {color: #f7adaf!important;background-color: white!important}
.white,.hover-white:hover {color:#000!important;background-color:#fff!important}
.black {color:#fff!important;background-color:#000!important}
.black:hover {color:#f7adaf!important;background-color:#fff}
.light-grey,.hover-light-grey:hover {color:#000!important;background-color:#f1f1f1!important}
.pale-red,.hover-pale-red:hover {color:#000!important;background-color:#ffdddd!important}