@import url("normalize.css");
@import url("animate.css");
@import url('https://fonts.googleapis.com/css?family=Anonymous+Pro:400,700&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,900');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {
    background-color:hsl(0, 0%, 95%);
}

::selection {
    background: #ffd900;
}

header {
    border-left:10px solid tomato;
}

.folio {
    border-right:10px solid hsl(51, 100%, 50%);
}

.header-content, .footer-content {
    height:15vh;
    align-content:center;
}

.jumberton {
    border-left:10px solid tomato;
}

.header-content, .jumberton-content, .work-content, .education-content, .footer-content {
    width:85%;
    margin:0 auto;
}

.folio-content, .illustration-content {
    width:95%;
    margin:0 auto;
}

.illustration-content {
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(300px, 1fr));
    grid-column-gap:0.25rem;
}

html {font-size: 1em;}

body {
  font-weight: 400;
  line-height: 1.45;
  color: #333;
}

p {margin-bottom: 1.3em;}

h1, h2, h3, h4, h5 {
  margin: 0;
  line-height: 1.2;
  text-transform:uppercase;
  font-family:"Montserrat", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1 {
  font-size: calc(2rem + 3vw);
  
}

h2 {
    font-size: calc(1rem + 2vw);
}

.education-block h2, .work-block h2 {
    margin:2rem 1rem;
    font-weight: 700;
}

.folio-block h2 {
    color:hsl(0, 0%, 95%);
    text-shadow: hsl(0, 0%, 5%) 1px 0 10px;
}

h3 {font-size: calc(1rem + 2vw)}

h4 {font-size: 1.414rem;}

small, .font_small {font-size: 0.707rem;}

.jumberton p {
    font-size:calc(1rem + 0.5vw);
}

.jumberton-block .btn {
    background-color:hsla(0, 0%, 0%, 0.8);
    font-family:"Montserrat", sans-serif;
    margin:1rem 0;
    user-select: none;
}

.jumberton-block .btn:hover {
    background-color:hsla(0, 0%, 0%, 0.75);
}

p, li {
    font-family:"Open-Sans", 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.folio-block p {
    background-color:rgba(0,0,0,0.8);
    color:rgba(255,255,255,0.8);
    padding:1rem 0.5rem;
    border-radius:0.5rem;
}

a {
    text-decoration:none;
    color:rgba(0,0,0,0.8);
}

.copyright a, .btn a {
    color:rgba(255,255,255,0.8);
}

.menu a {
    font-family:"Anonymous Pro", 'Courier New', Courier, monospace;
    margin-right:1rem;
    user-select: none;
    color:hsla(0, 0%, 0%, 0.95);
}

.menu a:hover {
    border-bottom:10px tomato solid;    
}

ul {
    padding:0;
}

ul li {
    list-style: none;
    display:inline-block;
    padding:0.25rem 0.5rem;
    margin:0.25rem;
    background-color: hsl(85, 59%, 56%);
    border-radius:1rem;
    text-transform: uppercase;

}

.content {
    display:grid;
    grid-template-columns: repeat(12,1fr);
}

.jumberton-content {
    height:85vh;
}

.menu {
    grid-column:span 12;
}

.jumberton-block {
    grid-column:span 6;
}

img {
    width:100%;
}

figure {
    width:75%;
    margin:0.25rem auto;
}

.work-block-item figure, .education-block-content figure {
    width:50%;
}

.folio-content figure{
    width:100%;
    border-radius:1rem;
}

figcaption {
    background-color:rgba(0,0,0,0.8);
    color:rgba(255,255,255,0.8);
    padding:0.5rem 0.25rem;
    border-radius:0.25rem;
    margin:0.5rem 0;
    display:inline-block;
    text-align:center;
}

.intro {
    margin-top:4rem;
}

.section {
    min-height:100vh;
    margin:5vh 0;
}

.work-block, .education-block, .jumberton-block {
    grid-column:span 6;
    align-self:end;
}

.work-block-item, .education-block-content {
    margin-bottom:1rem;
}

.work-block-item-info, .education-block-content-info {
    grid-column:span 9;
}

.work-block-item figure, .education-block-content figure {
    grid-column:span 3
}

.work {
    border-right:10px gold solid;
    /*background:linear-gradient(75deg,gold 47%,transparent 47%) no-repeat;*/
}

.education {
    border-left:10px solid hsl(85, 59%, 56%);
}

footer {
    min-height:15vh;
    background-color:rgba(0,0,0,0.8);
    color:rgba(255,255,255,0.8);
    margin:2.5vh 0 0 0;
}

.social-bar, .copyright {
    grid-column:span 6;
    align-self: center;
}

i {
    color:rgba(255,255,255,0.8);
    font-size:1.414rem;
    margin-right:0.707rem;
}

.folio-block {
    grid-column:span 6;
    align-self:end;
    min-height:50vh;
    overflow: hidden;
    background-color:hsl(85, 59%, 56%);
    box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2);
    background-size:cover;
}

.wheel-and-wheelbar, .unity, .transworld, .gratia {
    grid-column:span 3;
}

.folio-block-content {
    display:grid;
    align-items:center;
    justify-items:center;
    min-height:50vh;
}

.mnklt {
    background-image:linear-gradient(to bottom, rgba(6, 32, 51, 0.8), rgba(6, 32, 51, 0.8)),
                    url("../img/portofolio/MNKLT.jpg");
}

.marvel {
    background-image:linear-gradient(to bottom, rgba(6, 32, 51, 0.8), rgba(6, 32, 51, 0.8)),
                    url("../img/portofolio/marvel.jpg");
}

.zet {
    background-image:linear-gradient(to bottom, rgba(6, 32, 51, 0.8), rgba(6, 32, 51, 0.8)),
                    url("../img/portofolio/Two-Bytes.jpg");
}

.meet-brandi {
    background-image:linear-gradient(to bottom, rgba(6, 32, 51, 0.8), rgba(6, 32, 51, 0.8)),
                    url("../img/portofolio/meet-brandi.jpg");
}

.designer-and-maker {
    background-image:linear-gradient(to bottom, rgba(6, 32, 51, 0.8), rgba(6, 32, 51, 0.8)),
                    url("../img/portofolio/designer-and-maker.jpg");
}

.vivek {
    background-image:linear-gradient(to bottom, rgba(6, 32, 51, 0.8), rgba(6, 32, 51, 0.8)),
                    url("../img/portofolio/vivek.jpg");
}

.diff {
    background-image:linear-gradient(to bottom, rgba(6, 32, 51, 0.8), rgba(6, 32, 51, 0.8)),
                    url("../img/portofolio/A-not-so-diff.jpg");
}

.ryby {
    background-image:linear-gradient(to bottom, rgba(6, 32, 51, 0.8), rgba(6, 32, 51, 0.8)),
                    url("../img/portofolio/freshyo-preview.jpg");
}

.yes-english {
    background-image:linear-gradient(to bottom, rgba(6, 32, 51, 0.8), rgba(6, 32, 51, 0.8)),
                    url("../img/portofolio/yesenglish-preview.jpg");
}

.meet-up {
    background-image:linear-gradient(to bottom, rgba(6, 32, 51, 0.8), rgba(6, 32, 51, 0.8)),
                    url("../img/portofolio/meet-up-preview.jpg");
}

.radio-silence {
    background-image:linear-gradient(to bottom, rgba(6, 32, 51, 0.8), rgba(6, 32, 51, 0.8)),
                    url("../img/portofolio/radio-silence-preview.jpg");
}

.gratia {
    background-image:linear-gradient(to bottom, rgba(6, 32, 51, 0.8), rgba(6, 32, 51, 0.8)),
                    url("../img/portofolio/gratia-preview.jpg");
}

.veggie {
    background-image:linear-gradient(to bottom, rgba(6, 32, 51, 0.8), rgba(6, 32, 51, 0.8)),
                    url("../img/portofolio/veggie-preview.jpg");
}

.unity {
    background-image:linear-gradient(to bottom, rgba(6, 32, 51, 0.8), rgba(6, 32, 51, 0.8)),
                    url("../img/portofolio/unity-preview.jpg");
}

.transworld {
    background-image:linear-gradient(to bottom, rgba(6, 32, 51, 0.8), rgba(6, 32, 51, 0.8)),
                    url("../img/portofolio/transworld-preview.jpg");
}

.wheel-and-wheelbar {
    background-image:linear-gradient(to bottom, rgba(6, 32, 51, 0.8), rgba(6, 32, 51, 0.8)),
                    url("../img/portofolio/wheel-and-wheelbar-preview.jpg");
}

.pixture {
    background-image:linear-gradient(to bottom, rgba(6, 32, 51, 0.8), rgba(6, 32, 51, 0.8)),
                    url("../img/portofolio/pixture-preview.jpg");
}

.surfing {
    background-image:linear-gradient(to bottom, rgba(6, 32, 51, 0.8), rgba(6, 32, 51, 0.8)),
                    url("../img/portofolio/Surfin.jpg");
}

.folio-content {
    grid-gap:1rem;
}



/*SLIDER*/

.slider {
    width:95%;
    margin: 1rem auto;
    height:auto;
    }

.slick-slide {
  margin: 0 1rem;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}


.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
    }

.slick-active {
  opacity: .5;
    }

.slick-current {
  opacity: 1;
    }


    footer, .footer-content {
        height:auto;
    }