@media only screen 
and (max-width : 320px) {
    
    .call-to-action h1 {
        font-size: 30px;
        line-height: 40px;
    }
    
    .about-text p {
        margin-top: 20px;
    }
    
    .skill-shortcode {
        margin-bottom: 30px;
    }
    
    .footer-link ul {
        float: left !important;
        margin-top: 30px;
    }
    
    .footer-social {
        margin-top: 30px;
    }    
}


@media only screen 
and (min-width : 321px) 
and (max-width : 480px) {
       
    .call-to-action h1 {
        font-size: 30px;
        line-height: 40px;
    }
    
    .call-to-action .btn-primary {
        padding: 15px;
        font-size: 13px;
    }
    
    .about-text p {
        margin-top: 20px;
    }
    
    .footer-link ul {
        float: left !important;
        margin-top: 30px;
    }
    
    .footer-social {
        margin-top: 30px;
    }    
}


@media only screen 
and (min-width : 481px) 
and (max-width : 600px) {
    
    .call-to-action h1 {
        font-size: 35px;
        line-height: 45px;
    }
    
    .call-to-action .btn-primary {
        padding: 18px;
        font-size: 15px;
    }
    
    .about-text p {
        margin-top: 20px;
    }
    
    .footer-link ul {
        float: left !important;
        margin-top: 30px;
    }
    
    .footer-social {
        margin-top: 30px;
    }    
}


@media only screen 
and (min-width : 601px) 
and (max-width : 800px) {
    
    .call-to-action h1 {
        font-size: 40px;
        line-height: 45px;
    }
    
    .call-to-action .btn-primary {
        padding: 18px;
        font-size: 15px;
    }
    
    .about-text p {
        margin-top: 20px;
    }
    
    .footer-link ul {
        float: left !important;
        margin-top: 30px;
    }
    
    .footer-social {
        margin-top: 30px;
    }    
}


@media screen and (min-width: 768px){
    .slick-dots li{
        width: 8px;
        height: 8px;
        margin: 0 8px 0 0;
    }
    
    .flexContainer{
        flex-flow: row wrap;
    }

    .feature{
        width: calc(50% - 10px);
        margin: 0 20px 20px 0;
    }
    .feature:nth-child(even), 
    .feature:last-child{
        margin: 0 0 20px;
    }
}


@media screen and (width: 1024px) and (height: 1366px){
    #page-top{
        background-size: auto 100vh;
    }
}


@media screen and (min-width: 1024px){
    
    #page-top{
        background-size: cover;
    }
    
    .topBlock{
        margin: 35vh 0 0;
    }
    .topBlock h1{
        font-size: 60px;
        margin: 0 0 40px;
    }
    .topBlock p{
        font-size: 24px;
    }
    .topBlock .btn-primary:hover {
	    box-shadow: inset 0 0 40px #fff;
    }
    
    .itemBlock button{
        color: transparent;
        background: transparent;
    }
    
    .itemBlock button:hover{
        color: #ffffff;
        background: rgba(0,0,0,.5);
    }
    
    .call-to-action{
        background-attachment: fixed;
        background-position: left 70px;
    }
    
    .call-to-action .btn-primary:hover {
        box-shadow: inset 0 0 35px #fff;
    }
    
    .feature{
        width: calc(20% - 16px);
    }
    .feature:nth-child(even){
        margin: 0 20px 20px 0;
    }
    
    
    #contactForm .btn-primary {
        transition: all .5s;
    }
    #contactForm .btn-primary:hover{
        box-shadow: inset 0 0 20px #ccc;
    }
    
    .popup {
        padding: 60px 0;
    }
}

@media screen and (min-width: 1400px){
    .call-to-action{
        -webkit-background-size: cover;
        background-size: cover;    
    }
}