/*Global*/
html{
    font-family: "helvetica neue", helvetica, arial, sans-serif;
    font-size: 10px;
}
body{
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5, h6, p{
    margin: 0;
    padding: 0;
}
h1{
    font-size: 10vw;
    line-height: .9;
    font-family: "konstytucyjamedium";
    color: #662e1c;
}
h2, h3{
    font-family: "great_vibesregular";
    color: #af4435;
}
h2{
    font-size: 2.5vw;
}
h3{
    font-size: 2vw;
}
p{
    font-size: 2.3vw;
    line-height: 6rem;
    font-family: "great_vibesregular";
}
.responsize-img{
    max-width: 100%;
    height: auto;
}
.main-grid{
    display: grid;
    grid-template-columns: repeat(16, 1fr);
}

/*Site background*/
#background{
    z-index: -1;
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("../assets/images/background.jpg");
    background-size: 100%;
}

/*Fonts*/
@font-face {
    font-family: 'konstytucyjamedium';
    src: url('../assets/fonts/konstytucyja_091-webfont.woff2') format('woff2'),
         url('../assets/fonts/konstytucyja_091-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'great_vibesregular';
    src: url('../assets/fonts/greatvibes-regular-webfont.woff2') format('woff2'),
         url('../assets/fonts/greatvibes-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*leo-intro section*/
#leo-intro{
    grid-template-columns: repeat(16, 1fr);
    grid-template-areas:    ". . in-head in-head in-head in-head in-head in-head in-head in-head in-head in-head in-head . . ."
                            ". . slogan slogan slogan slogan slogan slogan . . prof prof prof prof prof ."
                            ". . in-p1 in-p1 in-p1 in-p1 in-p1 in-p1 in-p1 . prof prof prof prof prof ."
                            ". . in-p2 in-p2 in-p2 in-p2 in-p2 in-p2 in-p2 . . . . . . .";
}
#leo-intro header{
    grid-area: in-head;
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-template-areas:    "dicon dicon . bio bio bio bio bio bio bio bio"
                            "dicon dicon . bio bio bio bio bio bio bio bio";
}
#leo-intro header div{
    grid-area: dicon;
}
#leo-intro header h2{
    grid-area: bio;
    margin-top: 4%;
}
#leo-intro h1{
    grid-area: slogan;
    margin-top: 13%;
    margin-left: 2%;
}
#leo-intro p:first-of-type{
    grid-area: in-p1;
}
#leo-intro p:last-of-type{
    grid-area: in-p2;
    margin-top: -6%;
}
#leo-intro div:last-child{
    grid-area: prof;
    margin-top: 12%;
}

/*Work Section*/
#leo-work{
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-areas:    "wk-head wk-head wk-head wk-head wk-head wk-head wk-head wk-head wk-head . . . . . . ."
                            "box1 box1 box1 box1 box2 box2 box2 box2 box3 box3 box3 box3 . . . ."
                            "box4 box4 box4 box4 box5 box5 box5 box5 box6 box6 box6 box6 . . . .";
    grid-gap: .7%;
}
#leo-work header{
    grid-area: wk-head;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-areas:    "work work work work work work work work work"
                            ". . wk-desc wk-desc wk-desc wk-desc wk-desc wk-desc wk-desc";
    grid-row-gap: 20%;
}
#leo-work header div{
    grid-area: work;
    text-align: right;
    padding: 1.7%;
    border-top: 4px solid #662e1c;
    margin-top: 6%;
}
#leo-work header p{
    grid-area: wk-desc;
    margin-bottom: 25%;
}
#leo-work > div:nth-of-type(1){
    grid-area: box1;
}
#leo-work > div:nth-of-type(2){
    grid-area: box2;
}
#leo-work > div:nth-of-type(3){
    grid-area: box3;
}
#leo-work > div:nth-of-type(4){
    grid-area: box4;
}
#leo-work > div:nth-of-type(5){
    grid-area: box5;
}
#leo-work > div:nth-of-type(6){
    grid-area: box6;
}


/*Expertise Section*/
#leo-ex{
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-areas:    ". . . . . ex-h ex-h ex-h ex-h ex-h ex-h ex-h ex-h ex-h ex-h ex-h"
                            ". . . . . ex-b ex-b ex-b ex-b ex-b ex-b ex-b . . . .";
    grid-row-gap: 4%;
    margin-top: 8%;

}

#leo-ex header{
    grid-area: ex-h;
    padding-top: 2%;
    border-top: 4px solid #662e1c;
}
#leo-ex div{
    grid-area: ex-b;
}
#leo-ex div h2{
    float: left;
    text-align: center;
    padding-right: 18%;
    margin: 3% 0 0 -43%;
    font-size: 3.5vw;
    line-height: 3.3vw;
}
#leo-ex p:last-of-type{
    margin-top: 3%;
}

/*Background section*/
#leo-back{
    display: grid;
    grid-template-columns: repeat(17, 1fr);
    grid-template-areas:    ". back-head back-head back-head back-head back-head . . . . . . . . . . ."
                            ". back1 back1 back1 back1 back1 back2 back2 back2 back2 back2 back3 back3 back3 back3 back3 .";
    background-color: rgba(201, 166, 107, .6);
    grid-column-gap: 5%;
    margin-top: 8%;
    padding: 5% 0 5% 0;
}
#leo-back header{
    grid-area: back-head;
    font-size: 2.3vw;
}
#leo-back h3{
    color: black;
    padding-bottom: 12%;
}
#leo-back img{
    padding-bottom: 2%;
    min-width: 18%;
}
#leo-back div p{
    margin-top: 4%;
    font-size: 1.7vw;
    line-height: 4rem;
}
#leo-back > div:first-of-type{
    grid-area: back1;
}
#leo-back > div:nth-of-type(2){
    grid-area: back2;
}
#leo-back > div:last-of-type{
    grid-area: back3;
}

/*Placeholder*/
#holder h2{
    text-align: center;
    font-size: 5rem;
    font-family: helvetica;
    margin: 20vh 0 20vh 0;
}