@media only screen and (max-width: 1280px) {
    #home p {
        font-size: 2.4em;
        padding: 0 50px;
    }
    #home img {
        margin: 25% auto;
    }
}
@media only screen and (max-width: 1024px) and (max-height: 768px) {
    #home {
        padding-top: 80px;
    }
    #home .oscar-desc {
        width: 60%;
    }
    #home .oscar-desc p {
        font-size: 2.3em;
    }
    #grow .project-description p {
        font-size: 2.3em;
        padding: 0 40px;   
    }
       
}  
@media only screen and (max-width: 1024px) {
    .arrowDown,
    .arrowUp {
        transition: unset;
    }   
}   
@media only screen and (max-width: 768px) {
    .intro .section-header #hexagon-wrapper {
        width: 30%;
    }
    .intro.show-section .section-header #hexagon-wrapper {
        width: auto;
    }
    #home {
        padding-top: 80px;
    }
    #home p {
        font-size: 2.2em;
    }
    #home img {
            width: 35%;
    margin: 0 auto;
    }
    #home .oscar-desc {
        margin: 0;
        padding: 20px 40px;
        text-align: justify;
        text-justify: inter-word;
    }
    #dev .slider {
        margin: 0 auto;
        width: 80%;
    }
    #dev .slick-slide {
        margin: 0 10px;
    }
    #dev .arrows.prev {
        margin: 0;
        background: transparent;
        width: 110px;
        height: 100%;
        top: -15px;
        left: -10px;
        z-index: 2000;
    }

    #dev .arrows.next {
        margin: 0;
        background: transparent;
        width: 100px;
        height: 100%;
        top: -15px;
        right: -10px;
        z-index: 2000;
    }
    #grow .project-description {
        margin-top: 120px;
        margin-bottom: 20px;
    }
    #grow .grow-background {
        width: 100%;
        background: url('../img/grow/slide1.jpg') no-repeat -180px -225px;
    }
}
@media only screen and (max-width: 568px) {
    h2 {
        font-size: 5em;
        margin-bottom: 10px;
    }
    p {
        font-size: 3em;
    }
    .arrowDown ,
    .arrowUp {
        width: 20px;
        height: 20px;
    }
    .arrowUp {
        top: inherit;
        left: inherit;
        bottom: 8px;
        right: 45px;
        margin: -10px 0 0 -10px;
    }
    .arrowDown {
        left: inherit;
        bottom: 20px;
        right: 20px;
        margin: -10px 0 0 -10px;
    }
    .intro .section-header #hexagon-wrapper {
        width: 100%;
    }
    .show-section .section-header #hexagon-wrapper {
        width: initial;
    }
    .show-section .section-header .section-title h2 {
        font-size: 22px;
        font-weight: normal;
        margin-top: 20px;
    }
    .show-section .section-header .section-title p {
        font-size: 14px;
    }
    .show-section .section-body {
        text-align: left;
        top: 80px;
    }
    .show-section .section-body p {
        font-size: 14px;
        padding: 0 20px;
    }
    .project_info {
        display: inline-block;
        text-align: center;
        width: 100%;
    }
    .project_info h3 {
        text-align: center;
    }
    .project_info h3 a {
        font-size: 4vw;
    }
    
    figure {
        margin-bottom: 0;
    }
    figure.fade-project img {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
    }
    
    #home {
        padding-top: 5px;
    }
    #home p {
        padding: 0 10%;
        font-size: 15px;
    }
    #home .oscar-desc {
        padding: 0;
        width: 100%;
    }
    #home .oscar-desc p {
        font-size: 1.7em;
    }
    #home .contact-details {
        margin-top: 0;
        padding: 10px;
    }
    #home .contact-details p {
        padding: 0 12px;
    }
    #home .contact-details p.featured {
        font-size: 1.5em;
        margin-bottom: 20px;
    }
    #dev {
        top: 80px;
    }
    #dev .slider {
        margin: 0 auto;
        width: 100%;
        height: 550px;
        padding-top: 20px;
    }
    #dev .project_info h4 {
        font-size: 14px;
        text-align: center;
    }
    #dev .arrows.prev {
        margin: 0;
        background: transparent;
        width: 60px;
        height: 100%;
        top: 0;
        left: -10px;
        z-index: 2000;
    }
    #dev .arrows.next {
        margin: 0;
        background: transparent;
        width: 60px;
        height: 100%;
        top: 0;
        right: -10px;
        z-index: 2000;
    }
    #grow .project-description {
        margin-top: 20px;
        padding: 0 10px;
    }
    #grow .project-description p {
        font-size: 1.7em;
        padding: 0 20px;
    }
    #grow .grow-background {
        background: url('../img/grow/slide2.jpg') no-repeat -40px -200px;
        background-size: 400px 400px;
    }
}