/* iPads (portrait and landscape) ----------- */
@media (max-width: 768px) {
    body{ overflow-x: hidden;}
    .navbar-header {
        float: none;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-nav {
        float: none !important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in {display: block!important;}
    .collapsing {overflow: hidden!important; }
    #main-menu .navbar-form {padding: 12px 15px;}
    #main-menu .navbar-form,
    .navbar-form .input-group{ 
        width: 100%;
    }
    .navbar-nav {margin: 0 -15px;}
    .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 10px 15px 10px 25px;
    }
    .dropdown-menu > li > a, 
    #main-menu.navbar-default .navbar-nav > li > a { margin: -1px 0 0 15px !important }
    h1 {
        font-size: 50px;
        line-height: 50px;
    }
    #header-slider .lead {display: none;}
    #header-slider .carousel-caption {top: 15%;}
    .en-cta{ text-align: center;}
    a.btn{ margin-top: 30px}
    #en-portfolio .item p{ font-size: 12px}
    #en-portfolio .hover-bg .hover-text{height: 70%}
    ul.cat li a {border-color:#f1f1f1 }
    ul.list-inline.cat{border-color: transparent;}
    ul.cat li a { line-height: 50px; }
    #itemsWork .hover-bg .hover-text.off { height: 100%; }
    #itemsWork.col3 .hover-bg .hover-text.off { height: 60%}
    .en-cta .text-right {text-align: center !important;}
}

@media (max-width: 640px) {
    #top-menu,
    .text-right{ text-align: center;}
    #main-menu{ text-align: center;}
    #main-menu .navbar-form {
        margin-right: 0px;
        margin-left: 0px;
    }
    #main-menu .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    #top-menu .navbar-header{ 
        margin-top: 30px;
        margin-bottom: 30px;
    }
    #top-menu .navbar-brand{ float: none !important;}
    .logo{ margin-right: 0}
    .top-contact ol li {
        margin-left: 0;
        margin: 0 10px;
    }
    h1 {
        font-size: 30px;
        line-height: 30px;
        letter-spacing: 0;
    }
    #header-slider .carousel-indicators {bottom: 20px }
    a.btn{ margin-top: 15px}
    .widget,
    .news,
    .service { margin-bottom: 40px; }
    .hover-bg:hover .hover-text.off {
        -webkit-transform: translateY(50%);
        transform: translateY(50%);
    }
    #en-portfolio .item p{ font-size: 14px}
    #itemsWork.col3 .hover-bg .hover-text.off { height: 80%}
}
@media (max-width: 460px) {
    h2 { font-size: 24px;}
    #header-slider .carousel-caption {top: 5%;}
    .hover-bg:hover .hover-text.off {
        -webkit-transform: translateY(30%);
        transform: translateY(30%);
    }
    #testimonial2 .item {width: 100%;}
    #en-header .pull-right, 
    #en-header .pull-left{ 
        float: none !important;
        text-align: center; ;
    }
    .spacer{ padding: 10px 0}
    .smallspacer{ padding: 0}
    .media.comment .media-body{ font-size: 12px;}
    .comments img.media-object {
        width: 60px;
        height: 60px;
    }
    .author img.media-object {
        width: 80px;
        height: 80px;
    }
    #en-team .hover-bg .hover-text.off { height: 100%; }
}
@media (max-width: 360px) {
    .logo {font-size: 25px;}
    a.carousel-control span.fa{ display: none;}
    h1 {
        font-size: 26px;
        letter-spacing: -2px;
        line-height: 24px;
    }
    .section-title.text-center { 
        width: 100%;
        margin-bottom: 30px;
    }
    #header-slider .carousel-caption a.btn,
    #header-slider .carousel-indicators {display: none }
    #en-portfolio,
    #en-services,
    #en-intro{ padding: 40px 0}
    .en-cta .overlay {padding: 5% }
    .hover-bg:hover .hover-text.off {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
    .testimonial blockquote{padding: 20px 0}
    #en-content { padding: 40px 0}
    #en-header .breadcrumb li a,
    #en-header .breadcrumb li.active{
        font-size: 12px;
    }
    #itemsWork.col3 .hover-bg:hover .hover-text.off {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
    #itemsWork.col3 .hover-bg .hover-text { height: 100%}
    #en-team .hover-bg .hover-text.off small{ display: none;}
}

@media (max-width: 320px) { 
    .logo {font-size: 20px;}
    small, 
    p{ font-size: 12px}
    #en-header .breadcrumb li a,
    #en-header .breadcrumb li.active{
        font-size: 10px;
    }
}