/**********************



Responsive.css

=============



Author:  Gino Aliaj

Template: Cloudify - Web Hosting HTML Template

Version: 1.2



Author URI: gnodesign.com

***************************/





/*------------------------------------------

  Responsive Grid Media Queries

--------------------------------------------*/





/* ---- Start of max-width 992px CSS ---- */



@media (max-width: 992px) {

    /**************** 

		MAIN MENU

	****************/
    .bbi img{width: 60%;margin: auto}
    #search .btn-blue{
        margin-left: 0px!important;
        margin-top: 10px!important;
        padding: 0px 25px!important;
    }
    .bbi{margin-bottom: 20px;}
    .navbar-default .navbar-toggle .icon-bar {

        background: #f6f6f6;

    }

    .navbar-header {

        float: right !important;

    }

    .navbar-toggle {

        display: block !important;

        float: right !important;

        border-color: #f6f6f6 !important;

    }

    .navbar-toggle:focus,

    .navbar-toggle:hover {

        background: none !important;

    }

    .navbar-collapse {

        display: none;

    }

    div#main-nav {

        max-height: 100% !important;

        height: 100% !important;

        border: 0;

        overflow-y: scroll !important;

    }

    div#main-nav ul.nav.navbar-nav {

        height: 100%;

        padding-top: 30px;

        margin: 0;

        width: 100%;

    }

    div#main-nav ul li {

        width: 100%;

        text-align: center;

    }

    div#main-nav ul li a {

        padding: 10px 30px;

        z-index: 100;

        display: block;

    }

    div#main-nav ul li a i {

        display: inline-block;

        float: right;

    }

    div#main-nav ul li a.cart {

        display: none;

    }

    /******** Dropdown down ********/

    .dropdown-menu li a {

        color: #f6f6f6 !important;

        padding: 15px !important;

        border-bottom: 1px solid rgba(238, 238, 238, 0.2) !important;

    }

    /* Simple Menu Dropdown */

    #main-nav .navbar-nav .simple-menu .dropdown-menu {

        position: relative;

        width: 100%;

        max-width: 100% !important;

        background: rgba(41, 177, 253, 0.15);

        border-radius: 0 !important;

        border: 0;

        float: none;

        padding: 0;

        margin: 0;

        box-shadow: none;

        display: none;

        left: 0;

        -webkit-transform: translateX(0) scaleY(1);

        -moz-transform: translateX(0) scaleY(1);

        -ms-transform: translateX(0) scaleY(1);

        -o-transform: translateX(0) scaleY(1);

        transform: translateX(0) scaleY(1);

    }

    #main-nav .navbar-nav .simple-menu.open .dropdown-menu {

        display: block;

        animation: mymenu-open .5s;

        -webkit-transform: translateX(0) scaleY(1);

        -moz-transform: translateX(0) scaleY(1);

        -ms-transform: translateX(0) scaleY(1);

        -o-transform: translateX(0) scaleY(1);

        transform: translateX(0) scaleY(1);

    }

    /* Mega Menu Dropdown */

    #main-nav .navbar-nav .mega-menu .dropdown-menu {

        position: relative;

        width: 100%;

        max-width: 100% !important;

        background: rgba(41, 177, 253, 0.15);

        border-radius: 0 !important;

        border: 0;

        float: none;

        padding: 0;

        margin: 0;

        box-shadow: none;

        display: none;

        left: 0;

        -webkit-transform: translateX(0) scaleY(1);

        -moz-transform: translateX(0) scaleY(1);

        -ms-transform: translateX(0) scaleY(1);

        -o-transform: translateX(0) scaleY(1);

        transform: translateX(0) scaleY(1);

    }

    #main-nav .navbar-nav .mega-menu.open .dropdown-menu {

        display: block;

        animation: mymenu-open .5s;

        -webkit-transform: translateX(0) scaleY(1);

        -moz-transform: translateX(0) scaleY(1);

        -ms-transform: translateX(0) scaleY(1);

        -o-transform: translateX(0) scaleY(1);

        transform: translateX(0) scaleY(1);

    }

    #main-nav .navbar-nav .mega-menu .dropdown-menu li {

        padding: 0;

    }

    #main-nav .navbar-nav .mega-menu.open .dropdown-menu .mega-menu-inner,

    #main-nav .navbar-nav .mega-menu.open .dropdown-menu .mega-menu-inner ul li {

        padding: 0;

    }

    #main-nav .navbar-nav .mega-menu.open .dropdown-menu .mega-menu-inner ul li.menu-title {

        background: #3d506a;

        color: #f6f6f6;

        padding: 15px;

        margin: 0;

        border: 0;

    }

    #main-nav .navbar-nav .mega-menu.open .dropdown-menu .mega-menu-inner ul li a {

        padding: 10px 0 10px 15px !important;

        font-size: 12px;

        color: #999 !important;

    }

    /**************** 

		PUSH MENU

	****************/

    .collapse {

        display: block !important;

    }

    /* General styles for all menus */

    .cbp-spmenu {

        background: #0c112a;

        position: fixed;

        padding: 0;

        margin: 0 !important;

        overflow-x: hidden;

        overflow-y: visible;

        display: block;

        visibility: visible !important;

    }

    /* Orientation-dependent styles for the content of the menu */

    .cbp-spmenu-vertical {

        width: 260px;

        height: 100%;

        top: 0;

        z-index: 1000;

    }

    .cbp-spmenu-horizontal {

        width: 100%;

        height: 150px;

        left: 0;

        z-index: 1000;

        overflow: hidden;

    }

    .cbp-spmenu-horizontal h3 {

        height: 100%;

        width: 20%;

        float: left;

    }

    .cbp-spmenu-horizontal a {

        float: left;

        width: 20%;

        padding: 0.8em;

        border-left: 1px solid #258ecd;

    }

    /* Vertical menu that slides from the left or right */

    .cbp-spmenu-left {

        left: -260px;

    }

    .cbp-spmenu-right {

        right: -260px;

    }

    .cbp-spmenu-left.cbp-spmenu-open {

        left: 0px;

    }

    .cbp-spmenu-right.cbp-spmenu-open {

        right: 0px;

    }

    /* Horizontal menu that slides from the top or bottom */

    .cbp-spmenu-top {

        top: -150px;

    }

    .cbp-spmenu-bottom {

        bottom: -150px;

    }

    .cbp-spmenu-top.cbp-spmenu-open {

        top: 0px;

    }

    .cbp-spmenu-bottom.cbp-spmenu-open {

        bottom: 0px;

    }

    /* Push classes applied to the body */

    .cbp-spmenu-push {

        overflow-x: hidden;

        position: relative;

        left: 0;

    }

    .cbp-spmenu-push-toright {

        left: 260px;

    }

    .cbp-spmenu-push-toleft {

        left: -260px;

    }

    /* Transitions */

    .cbp-spmenu,

    .cbp-spmenu-push {

        -webkit-transition: all 0.3s ease;

        -moz-transition: all 0.3s ease;

        -ms-transition: all 0.3s ease;

        -o-transition: all 0.3s ease;

        transition: all 0.3s ease;

    }

    /**************** 

		PUSH MENU

	****************/

    .demo1 {

        height: 80%;

    }

    /**************** 

		CLOUDS

	****************/

    #about .about-image {

        padding-top: 50px;

    }

    .clouds img.cloud1 {

        top: -450px;

        width: 120px;

        animation: cloud1 35s linear 1s infinite;

        opacity: 0;

    }

    .clouds img.cloud2 {

        top: -350px;

        width: 80px;

        -webkit-animation: cloud2 15s linear 7s infinite;

        animation: cloud2 15s linear 7s infinite;

        opacity: 0;

    }

    .clouds img.cloud3 {

        top: -250px;

        width: 95px;

        -webkit-animation: cloud3 30s linear 14s infinite;

        animation: cloud3 35s linear 14s infinite;

        opacity: 0;

    }

    .clouds img.cloud4 {

        top: -50px;

        width: 90px;

        -webkit-animation: cloud4 55s linear 16s infinite;

        animation: cloud4 40s linear 16s infinite;

        opacity: 0;

    }

    .clouds img.cloud5 {

        top: 0;

        width: 130px;

        -webkit-animation: cloud5 25s linear 17s infinite;

        animation: cloud5 55s linear 17s infinite;

        opacity: 0;

    }

    /**************** 

		ABOUT

	****************/

    section#about2 .info-text{

        margin-top: 40px;

    }

    /**************** 

		SERVICE

	****************/

    .info .info-text {

        margin-bottom: 70px;

        text-align: center;

    }

    #secondary.info .info-text {

        margin: 0;

    }

    .info-image:before {

        width: 50%;

        margin: 0 auto;

    }

    #secondary.info .info-image {

        padding-bottom: 70px;

    }

    /**************** 

		SUBSCRIBE

	****************/

    .subscribe-form h2 {

        text-align: center;

        padding-bottom: 30px;

    }

    .subscribe-form .form-inline .form-group .input-group .form-control {

        width: calc(100% - 100px);

    }

    section#subscribe .clouds img.cloud2 {

        top: -140px;

    }

    /**************** 

		TEAM

	****************/

    .member {

        width: 100%;

    }

    .member img {

        height: 320px;

    }

    /**************** 

		TESTIMONIALS

	****************/

    .testimonial .owl-item .item .review img {

        display: block;

        width: 70%;

        visibility: hidden;

    }

    .testimonial .owl-item .item .review .review-inner blockquote {

        position: absolute;

        top: 50%;

        padding-top: 30px;

        width: 75%;

        margin: 0 auto;

        left: 0;

        right: 0;

    }

    .testimonial .owl-item .item .review .review-inner blockquote:before {

        top: -100px;

    }

    /**************** 

		BLOG

	****************/

    .news-content .col-md-4 {

        margin-bottom: 50px;

    }

    .news-content .col-md-4:last-child {

        margin-bottom: 0;

    }

    section#latest-news2 .blog-post-featured {

        margin-top: 30px;

    }

    /**************** 

		FOOTER

	****************/

    .top-footer .footer-links li i {

        margin: 0;

    }

    /**************** 

		DOMAIN PAGE

	****************/

    aside .domain-sidebar {

        margin-top: 40px;

    }

    aside .banner img {

        margin: 0 auto;

    }

    /**************** 

		CART PAGE

	****************/

    .subtotal-content .coupon input[type="text"] {

        width: 100%;

    }

    .cart-page .col-md-4.col-xs-12 {

        margin-top: 30px;

    }

}





/* ---- End of max-width 992px CSS ---- */





/* ---- Start of min-width 480px and max-width 768px CSS ---- */



@media all and (min-width: 480px) and (max-width: 768px) {

    .section-title p {

        width: 80%;

    }

    /**************** 

		TOP HEADER

	****************/

    .social {

        margin: 0 auto !important;

        padding: 0;

        text-align: center;

    }

    .social li {

        padding: 10px;

    }

    .top-button {

        float: none;

        text-align: center;

        padding-top: 0;

    }

    /**************** 

		DOMAIN

	****************/

    .domain .form-group .form-control {

        width: calc(100% - 130px) !important;

        padding-left: 20px;

    }

    .domain-check ul li {

        margin-right: 5px;

    }

    /**************** 

		SERVICES

	****************/

    #services .service p {

        padding: 20px 30px 0;

    }

    #services .row:last-child {

        padding: 0;

    }

    /**************** 

		PRICING TABLES

	****************/

    /* Pricing Table 1 */

    .pricing-table1 {

        border: none;

    }

    .pricing-table1 .pricing-plan {

        width: 90%;

        margin: 0 auto !important;

        border-radius: 30px !important;

        float: none;

    }

    .pricing-table1 .pricing-plan .price {

        border-radius: 30px 30px 0 0 !important;

    }

    .pricing-table1 #basic.pricing-plan,

    .pricing-table1 #agency.pricing-plan,

    .pricing-table1 #enterprise.pricing-plan {

        margin-top: 50px !important;

    }

    /* Pricing Table 2 */

    .pricing-table2 .pricing-plan {

        width: 90%;

        margin: 0 auto !important;

        float: none;

        margin-top: 50px !important;

    }

    .pricing-table2 .pricing-plan:first-child {

        margin-top: 0 !important;

    }

    /**************** 

		TESTIMONIAL

	****************/

    .testimonial2 figure {

        margin: 0 auto;

    }

    /**************** 

		FOOTER

	****************/

    .top-footer .footer-info {

        text-align: center;

    }

    .top-footer .footer-info > div {

        margin-top: 30px;

    }

    .top-footer h4 {

        padding-bottom: 10px;

    }

    .top-footer .footer-links {

        text-align: center;

    }

    /**************** 

		SERVICE PAGE

	****************/

    .tabpanel-col {

        padding: 20px 0;

    }

}





/* ---- End of min-width 480px and max-width 768px CSS ---- */





/* ---- Start of max-width 767px CSS ---- */



@media all and (max-width: 767px) {

    /**************** 

		TEAM

	****************/

    .member {

        width: 70% !important;

        margin-bottom: 50px !important;

    }

    /**************** 

		COUNTUP

	****************/

    #countup > div > div {

        margin-bottom: 50px;

    }

    /**************** 

		TESTIMONIAL

	****************/

    .testimonial2 figure {

        margin: 0 auto;

    }

    /**************** 

		SERVICE PAGE

	****************/

    .tabpanel-col {

        padding: 20px 0;

    }

}





/* ---- End of max-width 767px CSS ---- */





/* ---- Start of max-width 580px CSS ---- */



@media all and (max-width: 580px) {

    #about .clouds img.cloud1 {

        display: none;

    }

}



@media all and (max-width: 580px) {

   .half{width: 100%;}

   .mar2{margin-right: 0px;}

   #myModalLabel{font-size: 18px;}

}



/* ---- End of max-width 580px CSS ---- */





/* ---- Start of max-width 480px CSS ---- */



@media all and (max-width: 480px) {

    .section-title p {

        width: 80%;

    }

    /**************** 

		TOP HEADER

	****************/

    .social {

        margin: 0 auto;

        padding: 0;

        text-align: center;

    }

    .social li {

        padding: 10px;

    }

    .top-button {

        float: none;

        text-align: center;

        padding-top: 0;

    }

    /**************** 

		LOGIN POP UP

	****************/

    .cd-user-modal.is-visible .cd-user-modal-container {

        -webkit-transform: translateY(40%);

        -moz-transform: translateY(40%);

        -ms-transform: translateY(40%);

        -o-transform: translateY(40%);

        transform: translateY(40%);

    }

    /**************** 

		SLIDER - HOME SECTION

	****************/

    .demo1 .slider-content {

        top: 20%;

    }

    .demo2 .demo-content {

        top: 20%;

    }

    .demo1 .slider-content h2 {

        font-size: 36px;

    }

    .demo2 .demo-content h2 {

        font-size: 36px;

    }

    /**************** 

		DOMAIN

	****************/

    .domain h2 {

        font-size: 24px;

    }

    .domain .form-group .form-control {

        width: 100% !important;

    }

    .domain .form-group button {

        margin: 20px 0 10px 0;

        width: 100%;

    }

    .domain-check span {

        margin-right: 5px;

    }

    .domain-check ul li {

        margin: 0 0 10px 0;

        width: 49%;

    }

    /**************** 

		SERVICES

	****************/

    #services .service p {

        padding: 20px 30px 0;

    }

    #services .row {

        margin: 0;

    }

    #services .row:last-child {

        padding: 0;

    }

    .info-image img {

        width: 25%;

    }

    /**************** 

		SUBSCRIBE

	****************/

    .subscribe-form .form-inline .form-group .input-group {

        width: 100%;

    }

    .subscribe-form .form-inline .form-group .input-group .form-control {

        width: 100%;

    }

    .subscribe-form .form-inline .form-group .input-group button {

        width: 100%;

        margin: 20px 0 0 0;

    }

    /**************** 

		TEAM

	****************/

    .member {

        width: 70% !important;

        margin-bottom: 50px !important;

    }

    /**************** 

		PRICING TABLE

	****************/

    /* Pricing Table 1 */

    .pricing-table1 {

        border: none;

    }

    .pricing-table1 .pricing-plan {

        width: 90%;

        margin: 0 auto !important;

        border-radius: 30px !important;

        float: none;

    }

    .pricing-table1 .pricing-plan .price {

        border-radius: 30px 30px 0 0 !important;

    }

    .pricing-table1 #basic.pricing-plan,

    .pricing-table1 #agency.pricing-plan,

    .pricing-table1 #enterprise.pricing-plan {

        margin-top: 50px !important;

    }

    /* Pricing Table 2 */

    .pricing-table2 .pricing-plan {

        width: 90%;

        margin: 0 auto !important;

        float: none;

        margin-top: 50px !important;

    }

    .pricing-table2 .pricing-plan:first-child {

        margin-top: 0 !important;

    }

    /**************** 

		COUNTUP

	****************/

    #countup > div > div {

        margin-bottom: 50px;

    }

    /**************** 

		TESTIMONIAL

	****************/

    .testimonial .owl-item .item .review .review-inner blockquote {

        top: 40%;

    }

    .testimonial .owl-item .item .review .review-inner blockquote:before {

        top: -50px;

    }

    /**************** 

		FOOTER

	****************/

    .top-footer .footer-info {

        text-align: center;

    }

    .top-footer .footer-info > div {

        margin-top: 30px;

    }

    .top-footer h4 {

        padding-bottom: 10px;

    }

    .top-footer .footer-links {

        text-align: center;

    }

    /**************** 

		404 PAGE

	****************/

    .page-not-found {

        min-height: 100%;

        height: 100%;

    }

    .page-not-found .item-title {

        position: relative;

        top: 30%;

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -ms-transform: translateY(0);

        -o-transform: translateY(0);

        transform: translateY(0);

    }

    .page-not-found .item-title #message {

        min-height: 240px;

    }

    .page-not-found .item-title #message p:first-child {

        font-size: 50px;

        font-weight: 700;

    }

    /**************** 

		LIVE CHAT

	****************/

    .live-chat {

        left: 0;

        right: 0;

        margin: 0 auto;

        width: 80%;

    }

    .live-chat.collapsed {

        -webkit-transform: translateY(350px);

        -moz-transform: translateY(350px);

        -ms-transform: translateY(350px);

        -o-transform: translateY(350px);

        transform: translateY(350px);

    }

    .live-chat input[type="text"] {

        width: 100%;

    }

    .chat-message-content {

        margin-left: 45px;

    }

    .chat-feedback {

        text-align: center;

        margin: 0;

    }

    /**************** 

		COMING SOON

	****************/

    .coming-main .logo img {

        width: 250px;

    }

    .countdown {

        margin-top: 30px;

    }

    /**************** 

		DOMAIN PAGE

	****************/

    .domain-results ul li > div {

        display: block;

    }

    .domain-results ul li .domain-type {

        text-align: center;

    }

    .domain-results ul li .price-action {

        float: none;

        text-align: center;

        padding-top: 20px;

    }

    .domain-results ul li .price-action > * {

        float: none;

    }

    /**************** 

		CART PAGE

	****************/

    .subtotal-content .coupon .col-md-6.col-xs-8 {

        width: 100%;

    }

    .subtotal-content .coupon .col-md-6.col-xs-4 {

        width: 100%;

        padding-top: 20px;

        text-align: center;

    }

    .subtotal-content .support {

        text-align: center;

    }

}





/* ---- End of max-width 480px CSS ---- */





/* ---- Start of max-width 420px CSS ---- */



@media all and (max-width: 420px) {

    /**************** 

		SLIDER - HOME SECTION

	****************/

    .demo1 .slider-content a {

        margin-top: 10px;

    }

    .demo2 .demo-content a {

        margin-top: 10px;

    }

    /**************** 

		ABOUT SECTION

	****************/

    #about .clouds img.cloud2 {

        display: none;

    }

    #about .clouds img.cloud3 {

        -webkit-animation: cloud3 15s linear 14s infinite;

        animation: cloud3 15s linear 14s infinite;

    }

    .info .info-image img:hover {

        top: 10px;

        -webkit-transform: scale(0.7);

        -moz-transform: scale(0.7);

        -ms-transform: scale(0.7);

        -o-transform: scale(0.7);

        transform: scale(0.7);

    }

    /**************** 

		PORTFOLIO PAGES

	****************/

    .portfolio ul#portfolio-sorting li a {

        padding-bottom: 10px;

    }

    .portfolio-grid .element {

        width: 100%;

    }

    /**************** 

		BLOG POST PAGE

	****************/

    .blog-post .post-img {

        height: auto;

    }

    /**************** 

		SERVICE PAGE

	****************/

    .skillbar {

        width: 100%;

    }

    .chart {

        width: 100%;

    }

    ul.custom-tabs > li:before {

        opacity: 0;

        border-radius: 0;

        border: none;

    }

}





/* ---- End of max-width 420px CSS ---- */





/* ---- Start of max-width 380px CSS ---- */



@media all and (max-width: 380px) {

    /**************** 

		TESTIMONIAL

	****************/

    .testimonial .owl-item .item .review .review-inner blockquote {

        top: 30%;

    }

    .testimonial .owl-item .item .review .review-inner blockquote:before {

        top: -20px;

    }

    /**************** 

		COMING SOON

	****************/

    .coming-main .cta .btn-blue:last-child {

        margin-top: 20px;

    }

}





/* ---- End of max-width 380px CSS ---- */





/* ---- Start of max-width 320px CSS ---- */



@media all and (max-width: 320px) {

    .demo1 {

        height: 550px;

    }

    .live-chat {

        display: none;

    }

    .top-button {

        display: none;

    }

    .clouds {

        opacity: .5;

    }

}





/* ---- End of max-width 320px CSS ---- */





/* ---- Start of max-height 420px CSS ---- */



@media screen and (max-height: 420px) {

    .demo1 {

        height: 500px;

    }

    .demo-content {

        top: 25%;

    }

    .demo-content h2 {

        font-size: 36px;

    }

    .slider-content h2 {

        font-size: 36px;

    }

    .live-chat {

        display: none;

    }

    .top-button {

        display: none;

    }

    .member img {

        max-height: 320px;

    }

    /**************** 

		SERVICE PAGE

	****************/

    ul.custom-tabs > li:before {

        opacity: 0;

        border-radius: 0;

        border: none;

    }

    .tabpanel-col {

        padding: 20px 0;

    }

    /**************** 

		LOGIN & REGISTER PAGE

	****************/

    .login-page {

        height: 650px;

    }

}