/* Big tablet to 1200px (widths smaller than the 1140px row) */
@media only screen and (max-width: 1200px) { 
    .row { padding: 0 2%;  }
}

/* Small tablet to big tablet: from 768px to 1023px */
@media only screen and (max-width: 1023px) { 
    body { font-size: 18px;}
    section { padding: 60px 0;}
}

/* Small phones to small tablets: from 481px to 767px */
@media only screen and (max-width: 767px) { 
    body {font-size: 16px;}
    section {padding: 60px 0;}
    h1 { font-size: 300%;}
    h2 { font-size: 200%; }
    
    h2:after {
        width: 100px;
        margin-top: 10px;
    }
    
    .row,
    .hero-text-box {padding: 0 4%;}
    
    .col {
        width: 100%;
        margin: 0 0 4% 0;
    }
    
    .main-nav { display: none;}
    .mobile-nav-icon { display: inline-block; }
    
    .main-nav {
        float: left;
        margin-top: 30px;
        margin-left: 25px;
    }
     
    .main-nav li {
        display: block;
    }
     
    .main-nav li a:link,
    .main-nav li a:visited {
        display: block;
        border: 0;
        padding: 10px 0;
        font-size: 100%;
    }
    
    .sticky .main-nav li a:link,
    .sticky .main-nav li a:visited { padding: 10px 0; }
    .sticky .mobile-nav-icon { margin: 10px 0; }
    .sticky .mobile-nav-icon i { color: #555; }
    
    .mountain, .mountain-two, .mountain-three {
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 115px solid #6DAAC7; /*#6488AA;*/
    }
    .mountain-top {
        position: absolute;
        right: -33px;
        border-left: 33px solid transparent;
        border-right: 33px solid transparent;
        border-bottom: 38px solid #e9f6fb; /*#ceeaf6;*/
        z-index: -1;
    }
    .mountain-cap-1, .mountain-cap-2, .mountain-cap-3 {
        position: absolute;
        top: 35px;
        border-left: 13px solid transparent;
        border-right: 13px solid transparent;
        border-top: 13px solid #e9f6fb; /*#ceeaf6;*/
    }
    .mountain-cap-1 { left: -28px; }
    .mountain-cap-2 { left: -13px; }
    .mountain-cap-3 { left: 3px; }
    
    .cloud, .cloud:before, .cloud:after {
        position: absolute;
        width: 35px;
        height: 15px;
        background: #fff;
        border-radius: 100px / 50px;
        z-index: -2;
    }
    .cloud { bottom: 180px; }
    .cloud:before {
        content: '';
        left: 25px;
    }
    .cloud:after {
        content: '';
        left: 12px;
        top: -7px;
    }
    
    .profile-portrait {
        text-align: center;
    }
    
    .profile-longcopy {
        padding: 0 5% 0 5%;
    }
    
    .profile-host { width: 100%; }
    .profile-host p {font-size: 100%;}
    
    .project-box { height: auto; }
    .project-box:hover { transform: scale(1); }
    .project-box p {
        font-size: 85%;
        margin: 0 10px;
    }
    
    /* === FOOTER === */
    footer {
        padding: 30px;
        font-size: 90%;
    }
    
    .footer-nav,
    .social-links {
        text-align: center;
        float: none;
    }
    
    footer p {
        margin-top: 5px;
    }
}

/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) { 
    
    h1 { font-size: 200%;}
    
}