/*
Theme Name: Alpine
Theme URI: http://www.creative-ispiration.com/themes/alpine/
Description: Responsive One Page HTML5/CSS3 Parallax Site Template
Version: 1.0
Author: Creative-Ispiration
Author URI: http://themeforest.net/user/creativeispiration
*/


@media (max-width: 767px) {
    .flexslider{ text-align:center;}

    .intro-video .slideshow-logo{
        height:70px; margin-bottom:30px;
    }

    #home .section-title h1 {
        font-size: 40px;
        line-height: 44px;
        margin:0 0 10px 0;
        padding:0 0 10px 0;
        border-color: #666;
        letter-spacing:0;
        font-weight: 600;
    }
    #home p.lead {
        font-size: 16px;
        line-height: 21px;
        margin: 0 0 25px;
        text-align:center;
    }
    .fullscreen-slider-arrow {
        bottom: 10px;
        margin-top: 0;
        top: auto;
        width: 23px;
        overflow: hidden;
    }
    #slider_left {
        left: 18px;
    }
    #slider_right {
        right: 18px;
    }

    .navbar .show-menu {
        display: block;
    }
    .navbar-default .navbar-collapse, .navbar-default .navbar-form {
        border-color: #000;
    }
    .navbar-collapse {
        max-height: none;
        padding: 0;
    }
    .navbar-nav {
        margin: 0;
    }
    .navbar .nav > li {
        float: none;
    }
    .navbar .nav > li > a {
        padding: 0 20px;
        line-height: 40px;
        border-bottom: 1px solid #333;
        font-size: 12px;
        padding: 0 13px;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus{
        color:#fff;
    }

    .section-content {
        padding: 60px 0;
    }
    .section-title .line {
        /*display: none;*/
    }
    .section-title h1, section-title h2 {
        font-size: 48px;
        /*border-bottom: 1px solid #DEDEDE;*/
        line-height: 50px;
        margin: 0;
        padding: 4px 0 5px 0;
    }
    .section-title .line.big, .section-title .line {
        width:30px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .section-title .lead {
        margin: 30px 0 0 0;
        font-weight:300;
        line-height:26px;
        text-align:justify;
    }
    .section-title div span {
        font-weight:400;
    }
    .media-body p{
        text-align:justify;
        font-size:16px;
        line-height:24px;
    }
    .element-line {
        margin-top: 40px;
    }

    #ajaxpage .section-title h1 {
        font-size: 40px;
    }
    h2.white.light {
        font-size:18px;
        line-height:26px;
    }
    #service p.lead, #service, li.styled{
        font-size:16px;
        line-height:24px;
        font-weight:300;
		text-align:justify;
    }
    .cart {
        min-height:110px;
    }
    .mybutton.ultra a,
    .mybutton.ultra button,
    .mybutton2.ultra a,
    .mybutton2.ultra button{
        font-size: 13px;
        line-height: 40px;
    }
    .mybutton.ultra a span,
    .mybutton.ultra button span,
    .mybutton2.ultra a span,
    .mybutton2.ultra button span {
        padding: 0 25px;
    }

    .flexslider {
        text-align: center;
    }

    .pricing-5-col .pricing-box {
        width: 100%;
        margin: 0;
    }
    .pricing-5-col .pricing-box .pricing-featured {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        position: relative;
        margin: 0;
    }
    .pricing-5-col .pricing-box ul {
        border-right: solid 1px #eee;
    }
    .call-number {
        font-size: 40px;
        line-height: 65px;
        font-weight: 600;
    }

    .timeline-content #timeline .timeline-item, .timeline-content #timeline .timeline-item:nth-child(2n) {
        clear: both;
        float: none;
        margin-bottom: 0;
        width: 100%;
    }
    .timeline-content #timeline .timeline-item .post, .timeline-content #timeline .timeline-item:nth-child(2n) .post {
        margin: 140px 0 25px 0;
    }
    .timeline-content #timeline .timeline-item .post-info, .timeline-content #timeline .timeline-item:nth-child(2n) .post-info {
        left: 0;
        right: 0;
        margin: 0;
        top: -105px;
        width: 100%;
        background: none;
    }
    .timeline-content #timeline .timeline-item .post-info h5 {
        position: absolute;
        right: 0;
        top: 50px;
        font-size: 13px;
        text-align: right;
        margin: 0;
    }
    .timeline-content #timeline .timeline-item .post-info h5.info-date {
        left: 0;
        right: auto;
        text-align: left;
    }
    .timeline-content #timeline .timeline-item .post-info h5.info-date small{
        font-size: 100%;
    }
    .timeline-content #timeline .timeline-item .post-arrow, .timeline-content #timeline .timeline-item:nth-child(2n) .post-arrow {
        display: none;
    }

    #filters a {
        clear: both;
        display: block;
        margin: 12px auto;
        width: 80%;
    }
    #filters a span {
        width: 100%;
    }
    #portfolio-wrap .portfolio-item {
        width: 100%;
    }
    .project-media, .project-description {
        margin: 40px 0 0 0;
        text-align:center;
    }

    #map_canvas {
        height: 350px;
    }


    #navigation-sticky-wrapper{
        max-height:50px;
    }

    #brand img{
        max-height:50px;
    }

    .navbar-default .navbar-toggle {
        margin-top:20px;
    }

    .circular-pie i {
        font-size: 26px;
        width:58px; height:58px;
        border-radius:100%;
        border:5px solid white;
        line-height:50px;
    }

    .easyPieChart{
        margin-top:-25px;
        max-height:90px;
    }

    .easyPieChart canvas {
        display:none;
    }

    .circular{
        padding:0;
    }

    .circ_counter_desc .lead {
        margin-top:5px;
        font-size:16px;
    }

    .solution-title{
        text-align:center;
        width:100%;
    }

    p.lead {
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 24px;
    }

    #five-parallax p.lead{
        padding:0 15px;
        font-weight: 400;
        margin-bottom: 40px;
    }

    .service-items a{
        position:relative;
        top:-30px;
    }

    .service-items a img{
        max-width:250px;
    }

    .service-items h3 {
        margin:0;
        margin-top:-40px;
        margin-bottom:-20px;
    }
    
    .bg-grey {
        margin:40px 0;
        padding: 40px 0;
    }

}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .flexslider{ text-align:center;}
    #portfolio-wrap .portfolio-item {
        width: 50%;
    }
    .project-description{ text-align:center;}
    .navbar .nav > li > a{ padding:0 12px;}

    #home .section-title h1 {
        font-size: 80px;
        line-height:80px;
        font-weight: 600;
    }


}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

    .flexslider{ text-align:left;}

    #home .section-title h1 {
        font-size: 95px;
        line-height: 100px;
        letter-spacing:-3px;
        font-weight: 500;
    }

    .project-description{ text-align:inherit;}
    .navbar .nav > li > a{ padding:0 22.5px;}
    .mybutton a, .mybutton button {
        -webkit-perspective: 1000px;
        -moz-perspective: 1000px;
        perspective: 1000px;
        letter-spacing: 0;
    }
    .mybutton a span, .mybutton button span {
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .mybutton a:hover span, .mybutton button:hover span {
        -webkit-transform: rotateX(90deg) translateY(-22px);
        -moz-transform: rotateX(90deg) translateY(-22px);
        transform: rotateX(90deg) translateY(-22px);
    }
    .csstransforms3d .mybutton a span::before, .csstransforms3d .mybutton button span::before {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        content: attr(data-hover);
        -webkit-transition: background 0.3s;
        -moz-transition: background 0.3s;
        transition: background 0.3s;
        -webkit-transform: rotateX(-90deg);
        -moz-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
    }

    .mybutton2 a, .mybutton2 button {
        overflow: hidden;
        margin: 0 15px;
    }
    .mybutton2 a span, .mybutton2 button span {
        display: block;
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
    }
    .mybutton2 a:hover span, .mybutton2 button:hover span {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        transform: translateX(100%);
    }
    .mybutton2 a::before{
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        color: #fff;
        content: attr(data-hover);
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
        -webkit-transform: translateX(-25%);
    }
    .mybutton2 a:hover::before{
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        transform: translateX(0%);
    }

}

@media (max-width: 1200px) {
    .item_top {
        top: 0;
        opacity: 1;
    }
    .item_left {
        left: 0px;
        opacity: 1;
    }
    .item_right {
        right: 0px;
        opacity: 1;
    }
    .item_bottom {
        bottom: 0;
        opacity: 1;
    }
    .item_fade_in {
        opacity: 1;
        right: 0px;
    }
    .parallax {
        background-attachment: scroll !important;
        background-position: center top !important;
        height: auto;
        margin: 0 auto;
        width: 100%;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #portfolio-wrap .portfolio-item {
        width: 25%;
    }
    .pricing-box li h1 {
        font-size: 60px;
    }
}

@media (max-width: 1199px) {
    .navbar .nav > li > a {
        padding: 0 17.5px;
    }
    .easylive .col-left .item{
        text-align:right;
        margin-right:-20px;
    }

    .easylive .col-right .item{
        text-align:left;
        margin-left:-20px;
    }

    .easylive .col-left .item .icon{
        right:-20px;
    }

    .easylive .col-right .item .icon{
        left:-20px;
    }

    .easylive .col-left{
        margin-top:80px;
        padding:0;
    }

    .easylive .col-right{
        margin-top:55px;
        padding:0;
    }
    
    #six-parallax .parallax-box h4 {
        font-size:17px;
    }
    
    #six-parallax .parallax-box a {
        height:320px;
        padding: 25px 10px;
    }
    

}

@media (max-width: 991px) {
    .col-2_4{
        width:33%;
    }

    .col-2_4.four{
        margin-left:17%;
    }

    #brand img{
        max-height:45px;
    }

    .navbar .nav > li > a {
        padding: 0 12.5px;
        font-size:14px;
        line-height:70px;
    }

    .img-scanlist{
        margin: -10px auto 45px;
        box-shadow: 0px 0px 45px -17.5px rgba(0,0,0,0.75);    
        max-width:100%;
    }

    .easylive .item .icon span{
        display:inline-block;
        width:42px; height:42px;
        background:#AEC840;
        border-radius:100%;
        text-align:center;
        line-height:47px;
    }

    .iphone{
        transform: scale(0.82);
    }

    .easylive .item {
        font-size:16px;
        line-height:22px;
        margin: 15px 0;
    }

    .easylive .col-left{
        margin-top:105px;
        padding:0;
    }

    .easylive .col-right{
        margin-top:105px;
        padding:0;
    }

    .easylive .item .icon span i{
        font-size:22px;
    }

    .easylive .col-left .item {
        margin-right:0;
    }

    .easylive .col-right .item {
        margin-left:0; 
    }

    .call-number {
        font-size:24px;
    }
    
    #six-parallax .parallax-box h4 {
        font-size:18px;
    }
    
    #six-parallax .parallax-box a {
        height:280px;
        padding: 25px 10px;
    }

}


/* ExtraSmall devices (tablets, 767px and down) */
@media (max-width: 767px) {
    
    .col-2_4{
        width:50%;
    }

    .col-2_4:last-child{
        margin-left:25%;
    }

    .col-2_4.four{
        margin-left:0;
    }
    
    .section-title h1, .section-title h2 {
        font-size:42px;
        line-height: 46px;
        margin: 8px 0;
        letter-spacing: 1px;
    }
    
    .easylive .col-left td:first-child{
        display:inline-block;
    }

    .easylive .col-left td:last-child{
        display:none;
    }

    .easylive .col-left, .easylive .col-right{
        margin-top:0;
    }

    .easylive .icon{
        left:0 !important; right:0 !important;
        padding-right:20px;
    }

    .easylive .col-left, .easylive .col-right{
        padding:0 30px;
    }

    .easylive .col-left .item, .easylive .col-right .item {
        text-align:left;
        margin:15px 0;
        font-size:16px;
        line-hgith:24px;
    }

    .easylive .item .icon span{
        display:inline-block;
        width:56px; height:56px;
        background:#AEC840;
        border-radius:100%;
        text-align:center;
        line-height:63px;
    }

    .easylive .item .icon span i{
        font-size:26px;
    }

    .call-number {
        font-size:24px;
        line-height:32px !important
    }

    .iphone{
        transform:scale(1);
        position:relative;
        left:-10px;
        margin-bottom:40px;
    }

    .section-title div {
        font-size: 14px;
        letter-spacing: 1px;
    }

    .parallax-box a:hover, .parallax-box a:hover p{
        background:white !important;
        color:#8d8d8d !important;
    }

    .parallax-box a:hover i{
        color:#a4a4a4 !important;
    }
    .parallax-box a:hover h4{
        color:#222 !important;
    }
    
    .img-scanlist{
        max-width:100%;
        box-shadow: 0px 0px 45px -25px rgba(0,0,0,0.75);    
    }
}  
    
@media (max-width:490px) {
    #home .section-title h1 {
        font-size:34px;
        line-height:38px;
    }

    .section-title h1, .section-title h2 {
        font-size:35px;
        line-height: 37px;
        margin: 8px 0;
        letter-spacing: 0.5px;
    }

    #six-parallax  .parallax-box h4 {
        font-size:16px
    }

    #six-parallax  .parallax-box a {
        padding:25px 10px;

    }

    #six-parallax .parallax-box a {
        height:320px;
    }


}