/*-----------------------------------------------------
             BASIC SETUP 
-----------------------------------------------------*/
*,
*::after,
*::before {
   margin: 0;
   padding: 0;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
}

html {font-size: 62.5%;}
 
body {
   max-width: 1140rem;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 300;
   line-height: 1.7;
   color: rgb(15, 15, 15);
   text-rendering: optimizeLegibility;
}

.clearfix {zoom: 1}
.clearfix:after {
   content: '.';
   clear: both;
   display: block;
   height: 0;
   visibility: hidden;
}

.text {
   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.7)), to(rgba(255,255,255,0.7)));
   background-image: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7));
}

.text-white {color: white;}

/*-----------------------------------------------------
             REUSABLE
-----------------------------------------------------*/
h1,
h2,
h3 {padding: 0 0 3rem 0;}

h1 { 
   font-size: 4rem;
   font-weight: 400;
}

.center,
blockquote,
h1 {text-align: center;}

h2 {font-size: 3rem;}

h3 {font-size: 2.5rem;}

.icon-big,
.icon-huge {
   color: rgb(15, 15, 15);
   display: inline-block;
   margin-left: 2rem;
   margin-right: .5rem;
}

.icon-big {font-size: 3.5rem;}

.icon-huge {font-size: 5rem;}

blockquote {font-size: 3rem; 
   line-height: 4.5rem; 
   margin-top: 3rem;
}

blockquote span {
   padding: .5rem; 
   font-size: 5rem;
}

cite {
   font-size: 2rem; 
   margin-top: 3rem;
   text-align: center;
}

.btn:link,
.btn:visited {
    display: inline-block;
    padding: 1rem 3rem;
    font-size: 4rem;
    font-weight: 200;
    text-decoration: none;
    border-radius: 20rem;
    -webkit-transition: background-color 0.3s, border 0.3s, color 0.3s;
    transition: background-color 0.3s, border 0.3s, color 0.3s;
}

.btn-white:link,
.btn-white:visited {
    border: .1rem solid  #ffffff;
    color: #ffffff;
}

.social {padding: 10rem 0;}

.bg-black {background-color: black;}

/*-----------------------------------------------------
             HEADER 
-----------------------------------------------------*/
.header {
   position: relative;
   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.8))), url("./img/profile_blacknwhite.png");
   background-image: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url("./img/profile_blacknwhite.png");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   height: 100vh; 
   background-attachment: fixed;
}

.header__image {
   max-height: 25rem;
   width: auto;
   display: inline-block;
   padding: 3rem 0 0 3rem;
}

.header__content {
   position: absolute;
   top: 3rem;
   display: inline-block;
   padding: 0 3rem;
   text-align: center;   
}

.header__profile {font-size: 2rem;}

.header__profile a:link,
.header__profile a:visited {
   color: rgb(15, 15, 15);
   text-decoration: none;
   -webkit-transition: all .5s;
   transition: all .5s;
}

.header__profile a:hover,
.header__profile a:active {
   padding: 0.3rem;
   border-bottom: .15rem solid rgb(15, 15, 15);
}

/*-----------------------------------------------------
             MAIN 
-----------------------------------------------------*/
#human,
#entrepreneur,
#optimist,
#champion,
#problem-solver,
#thinker,
#digital-marketer {
   height: 50rem;
   padding: 3rem;
}

.statement {
   font-size: 1.8rem;
   text-align: justify;
}

.composition {position: relative;}

.composition__photo {
   width: 55%;
   -webkit-box-shadow: 0 1.5em 4rem rgba(255, 255, 255, 0.4);
           box-shadow: 0 1.5em 4rem rgba(255, 255, 255, 0.4);
   border-radius: .2rem;
   position: absolute;
   z-index: 10;
   -webkit-transition: all .3s;
   transition: all .3s;
   outline-offset: 2rem; 
}

.composition__photo--p1 {
   left: 0;
   top: -2rem; 
}

.composition__photo--p2 {
   right: 0;
   top: 2rem; 
}

.composition__photo--p3 {
   left: 20%;
   top: 10rem; 
}

#coder { padding: 3rem 3rem 3rem 3rem;}

.portfolio-items {margin-bottom: 4rem;}

.portfolio-items li {list-style: none;}

.portfolio-items li a:link,
.portfolio-items li a:visited {
   text-decoration: none;
   font-size: 1.8rem;
   color: rgb(15, 15, 15);
   -webkit-transition: all .3s;
   transition: all .3s;
}

.portfolio-items li a:hover,
.portfolio-items li a:active{
   font-size: 2rem;
}

#entrepreneur img {
   width: 35rem;
   -ms-flex-line-pack: center;
       align-content: center;
   -webkit-transition: all .3s;
   transition: all .3s;
}

#entrepreneur img:hover,
#entrepreneur img:active {
   margin-top: -1rem;
   -webkit-transform: scale(1.1);
           transform: scale(1.1);
}

#farmer {
   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.8))), url("./img/farming.png");
   background-image: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url("./img/farming.png");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   height: 100vh; 
   background-attachment: fixed;
   padding: 3rem 3rem 0 3rem;
}

.farmer-content {font-size: 2rem;}

.farmer-content p {
   font-size: 2.3rem;
   margin-bottom: 6rem;
 }

.farmer-content a:link,
.farmer-content a:visited {
   color: rgb(15, 15, 15);
   text-decoration: none;
   -webkit-transition: all .3s;
   transition: all .3s;
}

.farmer-content a:hover,
.farmer-content a:active {font-size: 2.3rem;}

#disc-jockey {
   padding: 3rem;
   font-size: 4rem;
}

#disc-jockey img {max-height: 40rem;}

#disc-jockey p {margin-top: 10rem;}

 #disc-jockey a:link,
 #disc-jockey a:visited {
   text-decoration: none;
   color: white;
   -webkit-transition: all .3s;
   transition: all .3s;
 }

#disc-jockey a:hover,
#disc-jockey a:active {font-size: 4.3rem;}

#leader {
   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.8))), url("./img/park-road.png");
   background-image: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url("./img/park-road.png");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   height: 100vh; 
   background-attachment: fixed;
   padding: 3rem 3rem 0 3rem;
}

#photographer {
   padding: 3rem 0;
   height: 60rem;
}

#photographer h2 {
   padding-left: 3rem;
}

.photographer-showcase {
   list-style: none;
   width: 100%; 
}

.photographer-showcase li {
    display: block;
    float: left;
    width: 25%;
}

.photographer-photo {
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.photographer-photo img {
    width: 100%;
    height: auto;
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s;
}

#foodie {
   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.8)), to(rgba(0,0,0,0.8))), url("./img/food.png");
   background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url("./img/food.png");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   height: 100vh; 
   background-attachment: fixed;
   padding: 3rem 3rem 0 3rem;
}

#foodie p {margin-top: 10rem;}

#digital-marketer h2 {margin-bottom: -8rem;}

#digital-marketer i {
   color: #ffffff;
   margin-left: 8rem;
   -webkit-transition: all .3s;
   transition: all .3s;
}

#digital-marketer i:hover,
#digital-marketer i:active {-webkit-transform: scale(1.3);transform: scale(1.3);}

/*-----------------------------------------------------
             FOOTER 
-----------------------------------------------------*/
footer {
   margin-top: 2rem;
   height: 5rem;
   font-size: 1.4rem;
   text-align: center;
}

footer a:link,
footer a:visited {
   color: rgb(15, 15, 15);
   text-decoration: none;
}

/*-----------------------------------------------------
             GRID LAYOUT 
-----------------------------------------------------*/
.row {
   max-width: 1140rem;
   margin: 0 auto;
}

.row::after {
   content: "";
   display: table;
   clear: both; 
}

.row [class^="col-"] {float: left;}

.row [class^="col-"]:not(:last-child) {margin-right: 6rem;}

.row .col-1-of-2 {width: calc((100% - 6rem) /2);}

.row .col-1-of-3 {width: calc((100% - 2 * 6rem) /3);}

.row .col-2-of-3 {width: calc(((100% - 2 * 6rem) /3) * 2 + 6rem);}

.row .col-1-of-4 {width: calc((100% - 3 * 6rem) /4);}

.row .col-2-of-4 {width: calc(((100% - 3 * 6rem) /4) * 2 + 6rem);}
   
.row .col-3-of-4 {width: calc(((100% - 3 * 6rem) /4) * 3 + (2 *6rem));}