
/*media query for 992*/
@media (max-width: 992px) {
    /*banner*/
    .iphoneImg{ right: 0; width: 300px;}
    .thankYou h2{font-size: 40px;}

    .teamList img{height: 220px;}
}

/*media query for 767*/
@media (max-width: 767px) {
    .mainHeader{
        padding: 15px 0;
    }
    /*navigation*/
    .navigation {
        float: none;
        padding: 40px 0 0!important;
    }
    .navbar-header {
        padding: 0 0 10px
    }
    .navbar-toggle {
        margin: 0 0;
        padding: 0;
        float: left
    }
    .navbar-default .navbar-toggle {
        float: right;
        border: none;
    }

    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
        background-color: transparent
    }

    .navbar-toggle {
        height: 27px;
        width: 35px;
        cursor: pointer;
        z-index: 100;
        -webkit-transition: opacity .25s ease;
        transition: opacity .25s ease;
    }
    .navbar-toggle:hover {
        opacity: .9;
    }
    .navbar-toggle.active .top {
        -webkit-transform: translateY(10px) translateX(0) rotate(45deg);
        -ms-transform: translateY(10px) translateX(0) rotate(45deg);
        transform: translateY(10px) translateX(0) rotate(45deg);
        background: #000;
    }
    .navbar-toggle.active .middle {
        opacity: 0;
        background: #481535;
    }
    .navbar-toggle.active .bottom {
        -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
        -ms-transform: translateY(-10px) translateX(0) rotate(-45deg);
        transform: translateY(-10px) translateX(0) rotate(-45deg);
        background: #000;
    }
    .navbar-toggle span {
        background: #000;
        border: none;
        height: 4px;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transition: all .35s ease;
        transition: all .35s ease;
        cursor: pointer;
    }
    .navbar-toggle span:nth-of-type(2) {
        top: 10px;
    }
    .navbar-toggle span:nth-of-type(3) {
        top: 20px;
    }

    .navbar-collapse {
        border: none;
        padding: 0;
        box-shadow: none;
        -webkit-box-shadow: none;
        background-color: #000;
        margin: 0 -15px;
    }

    .navigation ul {
        padding: 0;
        margin: 0;
        text-align: left
    }
    .navigation ul li {
        float: none;
        position: relative;
        margin: 0;
        font-size: 15px!important;
        display: block;
        padding: 0;
        border-bottom: 1px solid #444;
    }
    .navigation ul li a {
        padding: 15px;
        border: none;
        height: auto;
        color: #fff;
    }
    .navigation li:hover>a:after, .navigation li.active>a:after {
        display: none;
    }
    .navigation li.active>a{border-bottom: none}

    /*sub menu*/
    .navigation ul ul {
        text-align: left;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        display: block!important;
        visibility: visible!important;
        padding: 0;
        opacity: 1;
        background-color: transparent;
        z-index: 99;
    }
    .navigation ul ul li a{color: #fff}
    .navigation ul ul li{border-top: 1px solid #591940; padding: 0 30px; font-size: 14px!important;}

    /*banner*/
    .iphoneImg{top: -40px;}
    .banner .leftCol{padding-top: 30px; max-width: 350px;}
    .banner h2{font-size: 30px;}
    .banner p{color: #b0b0b0; line-height: 25px;}

    /* gray bar */
    .grayBar{padding: 50px 0; margin-top: 60px;}
    .grayBar h3{font-size: 24px;}

    /* mid block */
    .midBlock{padding: 50px 0;}
    .midBlock li{margin: 0 15px 20px;}
    .midBlock li i{margin: 0 auto 20px}
    .macImg{margin-top: 20px;}

    /* thank you block */
    .thankYou{padding: 190px 0 25px; margin-top: -200px; text-align: center}
    .thankYou .col-sm-4, .thankYou .col-sm-8{max-width: 600px; margin: 0 auto}
    .thankYou h2{color: #fff; font-size: 42px; margin-bottom: 10px}
    .thankYou .button{margin: 0 auto 15px; float: none}
    .thankYou p{padding: 0}

    ul.socialList{margin: 0}

    .aboutText{padding: 0}
    .contentIn{padding-top: 10px;}
    .aboutBanner{margin-bottom: 25px;}
    .aboutPage p{font-size: 16px; line-height: 26px;}
    .aboutPage h1{font-size: 28px; margin-bottom: 25px;}

    /* featured block */
    .featuredBlock{padding: 25px 0}
    .featuredBlock h2{font-size: 22px; margin-bottom: 30px;}

    .teamList{padding-top: 20px;}
    .teamList img{height: 300px;}

    .midPart{text-align: center; padding: 30px 0}
    .midPart .text-center{padding-top: 20px;}
    .teamDetails p{font-size: 16px; line-height: 26px;}
    .midPart h1{font-size: 30px;}
    .midPart h2{font-size: 16px;}
}

@media (max-width: 650px) {
    body{font-size: 15px;}
    p{line-height: 22px;}
    /*banner*/
    .iphoneImg{top: -40px; width: 180px;}
    .banner .leftCol{padding-top: 30px; max-width: 350px;}
    .banner .leftCol:after{height: 3px;}
    .banner h2{font-size: 24px; margin-bottom: 15px;}
    .banner p{color: #b0b0b0; line-height: 22px;}

    .grayBar{padding: 25px  0}
    .grayBar .leftCol{margin: 0 auto; text-align: center;}

    .midBlock{padding: 25px 0}

    .teamList .row{margin: 0 -15px;}
    .teamList .col-sm-4{margin-bottom: 30px; padding: 0 15px;}
    .teamList h2{font-size: 22px;}
    .teamList h3{font-size: 16px;}

    .grayBar h4{margin: 0 auto 20px; font-size: 22px; line-height: normal}
    .imgList{margin: 0 3px 5px;}
}
@media (max-width: 550px) {
    .iphoneImg{display: none}
    .banner .leftCol{max-width: 100%;}
    .banner .leftCol{padding-top: 20px;}
    .grayBar{margin-top: 30px;}
    .mainFooter{text-align: center}
    .mainFooter li{display: inline-block; float: none!important; margin: 0 5px 10px;}
    .mainFooter ul{float: none!important;}
    .mainFooter .col-sm-4{padding-bottom: 20px;}
    .teamList img{height: 210px;}
}

@media (max-width: 500px) {
    .equalHeight{height: auto!important;}
    .featuredBlock li{width: 100%; margin: 0 0 20px!important;}
    .midBlock li{margin: 0 10px 30px;}

    .thankYou p{font-size:17px; line-height: 23px;}

    .grayBar form{padding-right: 75px;}
    .grayBar input.submitButton{width: 80px; padding: 10px 0}

    .teamList .col-xs-6{width: 100%; float: none; height: auto!important; margin-bottom: 20px;}
    .teamList img{height: auto;}

    .aboutPage p, .teamDetails p{font-size: 15px; line-height: 24px;}
    .aboutPage h1{font-size: 26px;}
    .teamList h2{font-size: 20px;}
    .teamList h3{font-size: 15px;}
    .grayBar h3{font-size: 20px;}
    .grayBar h4{font-size: 20px}
}
