/*=======================
Theme: Awesome Photography/Portfolio Template
This is the Style for Responsiveness
Author: JLP Media
Email: jennpereira13@gmail.com / lianplameras@gmail.com
Version: 1.00 
Date Created: August 10, 2014
Updated: Feb. 13, 2015
=======================*/
/* MAX 1080px */
@media (max-width: 1080px) { 
    h1 { font-size: 5em }
    .carousel-control.right img,
    .carousel-control.left img { width: 50px }
    .pull-right {
        float: none !important;
        text-align: center;
    }
    #subscribe { text-align: center }
    p.atext { padding-top: 20px }
    .vision-border {
        width: 60%;
    }
}
/* MAX 768px */
@media (max-width: 768px) { 
    .about-content {
        padding-top: 140px;
        text-align: center;
    }
    h1 { font-size: 4em }
    p.atext { width: 100% }
    #about h2 { margin: 0 auto }
    #about {
        background-image: url('../img/04_about_mobile.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        margin-top: -1px;
    }
    #subscribe span.right { float: none }
    #video .content { padding: 20px !important }
    #video .header-text-overlay { top: 10% !important }
}
/* MIN 768px */
@media (min-width: 768px) { 
    #comments { margin-right: 35px }
    .comment-avatar {
        width: 100px;
        padding-right: 30px;
    }
    .commentlist ul { margin-left: 100px }
}
/* MAX 720px */
@media (max-width: 720px) { 
    .portfolio-modal .modal-content img {
        margin-bottom: 30px;
        max-width: 100%;
        height: auto;
        margin-left: 0px;
    }
    .navbar-default .navbar-brand img { height: 42px }
    .vision-border {
        width: 70%;
    }
}

/* MAX 620px */
@media (max-width: 620px) { 
    #banner .img-responsive, .thumbnail > img, 
    #banner .thumbnail a > img, 
    #banner .carousel-inner > .item > img, 
    #banner .carousel-inner > .item > a > img {
        width: -webkit-calc(100% + 80px);
        width: calc(100% + 80px);
        max-width: 140%;
        height: 400px;
    }
}
/* MAX 560px */
@media (max-width: 560px) { 
    .vision-border {
        width: 90%;
    }
    header {
        overflow: hidden;
    }
    h1 {
        font-size: 3em;
    }
}

/* MAX 460px */
@media (max-width: 460px) { 
    #banner .img-responsive, .thumbnail > img, 
    #banner .thumbnail a > img, 
    #banner .carousel-inner > .item > img, 
    #banner .carousel-inner > .item > a > img {
        width: -webkit-calc(100% + 240px);
        width: calc(100% + 240px);
        max-width: 240%;
        height: 400px;
        transform: translateX(-100px) translateY(0px);
        -webkit-transform: translateX(-100px) translateY(0px);
        -moz-transform: translateX(-100px) translateY(0px);
        -ms-transform: translateX(-100px) translateY(0px);
        -o-transform: translateX(-100px) translateY(0px);
    }

    #vision {
        background-image: url('../img/02_mobile_services.jpg');
        height: 500px;
    }
    .dark-overlay {
        height: 350px;
        padding-top: 100px;
    }
    #blog {
        background-image: url('../img/02_mobile_services.jpg');
        height: 350px;
    }
    h1 {
        font-size: 2.2em;
        letter-spacing: 1px;
    }
    h6 {
        font-size: 9px;
        font-weight: 300;
    }
    #vision h2 { font-size: 16px }
    #vision h4 {
        font-size: 18px;
        letter-spacing: 3px;
    }
    #vision h5 {
        letter-spacing: 0px;
        word-spacing: 0px;
    }
    #subscribe p { margin: 20px 30px 0 30px }
    #about h2 {
        margin: 0 auto;
        font-size: 3em;
        padding: 5px;
        width: 300px;
    }
    #socials p, #bsocials p {
        font-size: 12px;
        letter-spacing: 0px;
    }
    #footer {
        padding-top: 20%;
        padding-bottom: 10%;
    }
    #footer h2 {
        font-size: 2em;
        width: 310px;
        padding: 10px;
    }
    #footer p { padding-top: 10px }
    #footer-nav {
        padding-top: 40px;
        font-size: 10px;
        letter-spacing: 0px;
    }
    .vision-border {
        width: 80%;
    }
    
}
/* MAX 320px */
@media (max-width: 340px) { 
    #banner .img-responsive, .thumbnail > img, 
    #banner .thumbnail a > img, 
    #banner .carousel-inner > .item > img, 
    #banner .carousel-inner > .item > a > img {
        width: -webkit-calc(100% + 240px);
        width: calc(100% + 240px);
        max-width: 280%;
        height: 350px;
        transform: translateX(-100px) translateY(0px);
        -webkit-transform: translateX(-100px) translateY(0px);
        -moz-transform: translateX(-100px) translateY(0px);
        -ms-transform: translateX(-100px) translateY(0px);
        -o-transform: translateX(-100px) translateY(0px);
    }
    h1 { font-size: 1.5em }
    figure.effect-layla h2 { font-size: 1.5em }
    .service-border h4 {
        font-size: 13px;
        letter-spacing: 1px;
    }
    h6 {
        font-size: 10px;
        font-weight: 400;
    }
    #vision h2 { font-size: 15px }
    #vision h5 {
        letter-spacing: 2px;
        word-spacing: 0px;
    }
    .grid figure h2 { font-size: 16px }
    #about h2 {
        font-size: 2em;
        width: 250px;
    }
    #socials span.follow,  {
        font-size: 20px;
        width: 200px;
        letter-spacing: 1px;
    }
    ol.social li { padding: 0 6px }
    #socials p {
        font-size: 12px;
        letter-spacing: 0px;
    }
    #socials span.follow {
        font-size: 20px;
        letter-spacing: 5px;
        width: 220px;
    }
    #footer h2 {
        font-size: 1.5em;
        width: 250px;
    }
    #footer p {
        letter-spacing: 0px;
        font-size: 12px;
    }
}