@media only screen and (min-width: 1200px) {
    .about-photo {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 1200px) {
    .about {
        padding: 50px 30px;
    }
    
    .about-photo {
        margin-left: 20px;
    }
    
    .about .btn-about {
        float: right;
    }
}

@media only screen and (max-width: 1023px) {
    .about {
        padding: 50px 30px;
    }
    
    .about-photo {
        margin-left: 20px;
    }
    
    .about .btn-about {
        float: right;
    }
}

@media only screen and (max-width: 767px) {
    .header {
        padding: 0 50px;
    }
    
    .header h1,
    .callout h1{
        font-size: 50px;
    }
    
    .header h3 {
        margin-top: 10px;
        font-size: 25px;
    }
    
    .callout {
        padding: 0 20px;
    }
    
    .about {
        padding: 50px 30px;
    }
    
    .about-text h2 {
        margin-top: 20px;
    }
    
    .about-photo {
        text-align: center;
    }
    
    .about .btn-about {
        float: right;
    }
    
    .header {
        position: relative;
        display: table;
        width: 100%;
        height: 100%;
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url(../img/bg.jpg) no-repeat center center scroll;
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url(../img/bg.jpg) no-repeat center center scroll;
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bg.jpg) no-repeat center center scroll;
        background-size: cover;
        -o-background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size:cover;
        color: #fff;
    }
}

@media only screen and (max-width: 480px) {
    .about .btn-about {
        float: right;
    }

    .skills {
        padding: 50px 20px 50px 20px;
    }
}