@media only screen and (max-width : 620px) {

    #wrapper {
        min-width:100%;
    }

    header.navigation {
        min-width:100%;
    }

    header.navigation .logo-container {
        padding:20px 30px 0px 20px;
        line-height:50px;
    }
    header.navigation .logo-container .logo {
        position:static;
        float:left;
    }

    header.navigation .logo-container .logo img {
        width:50px;
        height:50px;
    }

    header.navigation .logo-container h1 {
        margin-left:70px;
        height:50px;
        line-height:25px;
        padding-top:0px;
    }

    header.navigation .logo-container p {
        display:none;
    }

    header.navigation .clock h1 {display: none;}

    header.navigation nav {
        margin:0px 0px 30px 20px;
        padding:0px;
    }

    header.navigation nav ul li a:link,
    header.navigation nav ul li a:visited {
        font-size:18px;
    }

    #sections-wrapper {
        padding:0px 20px 20px 20px !important;
    }

    #sections-wrapper .preloader {
        width:275px !important;
    }

    #sections-wrapper section {
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
    }

    section.tutorials .centered article .description h1,
    section.blog .centered article .description h1,
    section.tag .centered article .description h1,
    section.experiments .centered article .description h1 {
        font-size:28px;
    }

    section.tutorials .centered article,
    section.blog .centered article,
    section.tag .centered article,
    section.experiments .centered article {
        position:static !important;
        width:100% !important;
        margin-bottom:10px;
        padding:0px 0px 20px 0px;
        display:block;
        top:0px !important;
        left:0px !important;
        clear:both;
        float:none;
    }

    section.tutorials .centered article:last-child,
    section.blog .centered article:last-child,
    section.tag .centered article:last-child,
    section.experiments .centered article:last-child {
        border-bottom:none;
    }

    section.tutorials article.featured,
    section.blog article.featured,
    section.tag article.featured,
    section.experiments article.featured {
        width:100%;
    }

    section.tutorials .centered article .photo,
    section.tutorials .centered article .description {
        float:none;
        width:100%;
        padding:0px;
        margin-right:0px;
    }

    section.tutorials .centered article .photo {
        padding-bottom:0px;
        background-image:none;
    }

    section.tutorials .centered article img.thumbnail-image,
    section.blog .centered article img.thumbnail-image,
    section.tag .centered article img.thumbnail-image,
    section.experiments .centered article img.thumbnail-image {
        width: 100%;
        min-width:280px;
        height:auto !important;
        -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        -o-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    }

    section.tutorials .centered article .photo .github-ribbon,
    section.blog .centered article .photo .github-ribbon,
    section.tag .centered article .photo .github-ribbon,
    section.experiments .centered article .photo .github-ribbon {
        width:85px !important;
        height:85px !important;
        -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0);
        -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0);
        -o-box-shadow: 0px 0px 0px rgba(0,0,0,0);
        box-shadow: 0px 0px 0px rgba(0,0,0,0);
        display:none !important;

    }

    section.post-details {
        padding:0px;
    }

    section.post-details .back {
        display:none;
    }

    section.post-details .content {
        width:100%;
        float:none;
        overflow-x:hidden;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -o-box-sizing:border-box;
        box-sizing:border-box;
    }

    section.post-details aside {
        display:none;
    }

    section.post-details .sidebar {
        float:none !important;
        width: 100% !important;
    }

    section.post-details .sidebar h2 {

    }

    section.post-details .details {
        margin-left: 0px !important;
    }

    footer .menu {
        padding-left:20px !important;
        float:none;
        position:relative;
        width:85%;
        max-height:30px;
    }

    footer .menu .html5logo {
        position:absolute;
        top:0px;
        right:10px;
    }

    footer .menu .html5logo img {
        width:45px !important;
        height:45px !important;
    }

    footer .latest-tweets  {
        float:none;
        margin-top:0px;

        display:block;
        width: 85% !important;
    }

    footer .flickr-photos {
        padding-left:20px !important;
        margin-top:0px;
        max-height: 148px;
        overflow-y: hidden;
    }

    footer .spotify-play-now {
        display: none !important;
    }

    footer .copy  {
        padding-left:20px !important;
        margin-top:0px;
    }

    footer .footer-logo:after {
        clear:both;
        height:0px;
        display:block;
        content:" ";
    }
    
    header.navigation nav ul li a:hover {font-size: 14px!important;}
    header nav li span {font-size: 18px!important;}
    section article .description a,
    section article .description time,
    section article .description aside,
    section article .description p{ padding: 0 20px;}
    section article .description .readmore {margin-left: 20px;}
    section .centered article:before,
    section .centered article:after {
        box-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
    }
    section.post-details .content .details {clear:both; margin-top: 60px}
    section.post-details .comments {margin-left: 0!important;}
    section.post-details .comments-toggle {margin-left: 20px!important;}
    footer .footer-integration .menu a {width: 24%; float: left;}
    footer .footer-integration .menu span {display: none;}
    footer .footer-integration .latest-tweets {display:none;}    
    audio, canvas, video {display: none;}
}

@media only screen and (max-width : 320px) {
    header.navigation nav ul {margin-top: 22px}
    header.navigation nav ul li a,
    header.navigation nav ul li span {padding:0!important;}
    footer aside.flip-container {display: none;}
    header.navigation .clock {display: none;}
    #wrapper:before {z-index: -1;}
}

@media screen and (max-width:1442px){
    .latest-tweets{display:none;} 
    .cbp-qtrotator{display:none;} 
    .flip-container{right:50px !important}
    .cbp-qtrotator{display:none}
}

@media screen and (max-width:414px){
    .flip-container{display:none;}
    .comments-toggle{display:none;}    
    .toggle-buttons{display:none;}
}