﻿/*Responsive CSS*/

@media (max-width: 479px) {
    h2 {
        font-size: 30px;
		text-align:center;
    }
    .marked-list {
        padding-left: 0px;
    }
    #map {
        height: 640px !important;
    }
    .choose_us_txt {
        padding-left: 0px;
    }
    .mb50 {
        margin-bottom: 30px;
    }
    #packages .mb50 {
        margin-bottom: 50px;
    }
    #subscribe p {
        padding: 15px 15px 0;
    }
    .screenshot .owl-theme .owl-controls {
        margin-top: 0px;
    }
    #testimonials h3{
        padding-top: 30px;
    }
    #key-feature .box {
        margin-bottom: 10px;
    }
    #quetions .btn {
        margin-bottom: 15px;
    }
    .video-play-icon a {
        border-radius: 100px;
        font-size: 18px;
        height: 50px;
        margin-top: -30px;
        padding: 12px 20px;
        width: 50px;
    }
    .mb40 {
        margin-bottom: 30px;
    }
    .video-img-block {
        margin-bottom: 0px;
    }
    #screenshots .owl-carousel .owl-stage-outer {
        margin-bottom: 20px;
    }
    #subscribe h2 {
        margin-bottom: 10px;
    }
    .index-banner2 .home-btn .common-btn {
        padding: 15px 10px;
    }
    .home-btn a:first-child {
        margin-right: 5px;
    }
    .border-btn{
        padding: 15px 11px;
    }
}
@media (max-width: 650px) {
    .mob_connection {
        display: block !important;
    }
     .navbar-nav {
        float: none !important;
    }
    ul.nav.navbar-nav.pull-right.navbar-link {
        text-align: center;
    }
}
@media (max-width: 768px) {
	.mob-menu{
		margin:7px 0;
	}
    .sidebar-btn {
        display: none;
    }
    .marked-list {
        padding-left: 0px;
    }
    .brand-logo img {
        width:120px;
		margin-left: 30px;
    }
    #header,
    #magical_feature,
    #work,
    #feature-desc,
    #key-feature,
    .video-jarallax,
    #why_us,
    #screenshots,
    .testimonial-jarallax,
    #team,
    #packages,
    #tweet,
    #quetions,
    #subscribe,
    #footer,
    #some_facts {
        padding: 50px 0;
    }
    #screenshots .owl-carousel .owl-stage-outer {
        margin-bottom: 20px;
    }
    .navbar-nav.navbar-link {
        float: none !important;
        text-align: center;
    }
    .index-banner2 #header h1 {
        font-size: 55px;
        font-weight: 600;
        letter-spacing: 0;
    }
    .index-banner2 #header p {
        font-size: 12px;
    }
    .home-app-icon i {
        width: 50px;
        height: 50px;
        font-size: 26px;
        padding: 12px;
    }
    .icon-block {
        margin-bottom: 40px;
    }
    .icon-block.mbt50 {
        margin-bottom: 30px;
        margin-top: 30px;
    }
    #about-us{
        padding-top: 0;
    }
    .home-app-icon a:last-child i {
        padding: 12px 9px;
    }
    .home-info{
       padding: 110px 0;
    }
}
@media (min-width: 320px) and (max-width: 479px) {
    .video-play-icon a{
		left:50%;
		margin-left:-27px;
	}
	.mob-logo {
        text-align: center;
    }
    .navbar-nav {
        float: none !important;
    }
    #header h1 {
        font-size: 52px;
    }
    #header p {
        font-size: 30px;
    }
    #feature-desc {
        padding-top: 50px;
    }
    #key-feature {
        padding-bottom: 50px;
    }
    .mb_margin0 {
        margin-bottom: 0px;
    }
    .mb_margin30 {
        margin-bottom: 30px;
    }
    #some_facts {
        padding-bottom: 50px;
    }
    .team-block {
        margin-bottom: 30px;
    }
    .team-block:last-child {
        margin-bottom: 0px;
    }
    .tweet_slider {
        padding-right: 20px;
        padding-left: 20px;
    }
    .btn-wrap {
        left: 0;
        width: auto;
        margin-bottom: 20px;
        top: 2em;
    }
    .icon-block {
        text-align: center;
    }
    .pkgs li {
        display: block;
        width: 90%;
    }
    .pricing-table .price {
        font-size: 52px;
    }
    .set-submit-box {
        display: block;
        margin: 0 auto 20px;
        text-align: center;
        width: 90%;
    }
    .contact-form {
        padding: 90px 30px;      
        width: 290px;
    }
    .contact img {
        height: 550px;
    }
    .mob-circle,
    .mob-pkg {
        margin: 30px 0;
    }
    .modal-center {
        width: 335px;
        margin-left: -12em;
        margin-top: -11em;
    }
    .modal-center h2 {
        font-size: 25px;
    }
    .cd-stretchy-nav.add-content {
        transform: translateY(3em) translateX(0em);
    }
    .sidebar.right {
        width: 310px;
    }
    .sidebar-login-top::before {
        border-width: 25px 169px 0;
        top: 50px;
    }
    .sidebar-login {
        padding-left: 20px;
    }
    .side-app {
        margin-bottom: 20px;
    }
    .mobile-sidebar {
        display: inline-block;
        left: 0;
        position: absolute;
    }
    .mobile-sidebar-none {
        display: none;
    }
    .mob-login-modal-btn {
        margin-bottom: 20px;
    }
     .set-wrapper{
        display: flex !important;
    }
    .testimonials blockquote{
        font-size: 17px;
    }
    .newsletter-bg {
        background: rgba(0, 0, 0, 0) url("../images/contact-us-bg.png") no-repeat scroll center center / cover ;
        height: auto;
        width: 100%;
    }
    .newsletter-form {
        margin: 10px;
    }
    #aboutcontent .owl-dots{
        right: 40%;
    }
    #header.home-heading p {
        font-size: 30px;
    }
}
@media (min-width: 360px) and (max-width: 479px) {
    .mob-logo {
        text-align: center;
    }
    .cd-stretchy-nav.add-content {
        transform: translateY(0em) translateX(0em);
    }
    .modal-center {
        margin-top: -14em;
    }
    .sidebar-login {
        padding-left: 20px;
    }
    .set-wrapper{
        display: flex !important;
    }
    .side-app {
        margin-bottom: 20px;
    }
    .mobile-sidebar {
        display: inline-block;
        left: 0;
        position: absolute;
    }
    .mobile-sidebar-none {
        display: none;
    }
    .testimonials blockquote{
        font-size: 18px;
    }
    .contact-form{
        width: 330px;
        padding: 87px 30px;
    }
}
@media (min-width: 490px) and (max-width: 639px) {
    #header .btn-wrap{
        margin-bottom: 50px;
    }
    .mb_margin0{
        margin-bottom: 0px;
    }
    .pricing-table .price{
        font-size: 72px;
    }
    #screenshots .owl-carousel .owl-stage-outer {
        margin-bottom: 25px;
    }
    .screenshot .owl-theme .owl-controls{
        margin-top: 0px;
    }
    #quetions .btn{
        margin-bottom: 10px;
    }
    #subscribe h2{
        margin-bottom: 10px;
    }
    .mb50{
        margin-bottom: 35px;
    }
    .mob-logo {
        text-align: center;
    }
    .mob-login-modal-btn {
        margin-bottom: 20px;
    }
    .side-app {
        margin-bottom: 20px;
    }
    #header h1 {
        font-size: 52px;
    }
    #header p {
        font-size: 30px;
    }
    .navbar-nav {
        float: none !important;
    }
    #feature-desc {
        padding-top: 50px;
    }
    .mb50 {
        margin-bottom: 30px;
    }
    .mb_margin30 {
        margin-bottom: 30px;
    }
    .btn-wrap {
        left: 0;
        width: auto;
    }
    .icon-block {
        text-align: center;
    }
    .mob-circle {
        display: inline-block;
        margin: 30px 0;
        text-align: center;
        width: 230px;
    }
    .mob-pkg {
        margin: 30px 0;
    }
    .pkgs li {
        display: block;
        width: 90%;
    }
    #packages .mb50,
    #screenshots .mb50 {
        margin-bottom: 50px;
    }
    .tweet_slider {
        padding-left: 20px;
        padding-right: 20px;
    }
    #subscribe p {
        padding: 15px 15px 0;
    }
    .contact-form {        
        width: 95%;
        padding: 120px 30px;
    }
    .contact img {
        height: 550px;
    }
    .modal-center {
        width: 420px;
        margin-left: -15em;
        margin-top: -5em;
    }
    .sidebar-login-top::before {
        border-width: 25px 212px 0;
    }
    .mobile-sidebar {
        display: inline-block;
        left: 0;
        position: absolute;
    }
    .mobile-sidebar-none {
        display: none;
    }
    #map {
        height: 650px !important;
    }
    .modal-center {
        margin-top: -14em;
    }
}
@media (min-width: 640px) and (max-width: 760px) {
    .btn-wrap {
        left: 6em;
        top: 2em;
        margin-bottom: 30px;
    }
    .mob-logo {
        text-align: center;
    }
    .mob-login-modal-btn {
        margin-bottom: 20px;
    }
    .mobile-sidebar {
        display: inline-block;
        left: 0;
        position: absolute;
    }
    .mobile-sidebar-none {
        display: none;
    }
    .side-app {
        margin-bottom: 20px;
    }
    .sidebar-body {
        height: 100px !important;
    }
    .navbar-nav {
        float: none !important;
    }
    #feature-desc {
        padding-top: 50px;
    }
    .mob-circle {
        display: inline-block;
        margin: 30px 0;
        text-align: center;
        width: 250px;
    }
    .btn-wrap {
        left: 0;
        width: auto;
    }
    
    .mob-pkg {
        margin: 30px 0;
    }
    .icon-block {
        text-align: center;
    }
    .pkgs ul {
        margin-left: -22px;
    }
    .marked-list {
        margin-left: 8px !important;
    }
    
    .contact img {
        height: 550px;
    }
    .modal-center {
        width: 420px;
        margin-left: -15em;
        margin-top: -5em;
    }
    .sidebar-login-top::before {
        border-width: 25px 212px 0;
    }
}
@media (min-width: 761px) and (max-width: 962px) {
    .marked-list {
        padding-left: 0px;
    }
    .navbar-nav li a {
        font-size: 13px;
    }
    .brand-logo img{
        width: 105px;
    }
	.sidebar-btn{
		padding:6px;
	}   
    .mb_margin30 {
        margin-bottom: 30px;
    }
    .mob-login-modal-btn {
        margin-bottom: 20px;
    }
    .btn-wrap {
        left: 6em;
        top: 2em;
    }
    .brand-logo img {
        display: inline-block;
        float: left;
        width:124px;
    }
    .nav li a {
        padding: 8px;
    }
    .navbar-nav.navbar-link li a {
        padding: 8px;
        font-size: 13px;
    }
    .pricing-table .price {
        font-size: 52px;
    }
    .contact-form {
        width: 60%;
    }
    .icon-block {
        text-align: center;
    }
    .appestia-cards ul li img {
        height: 240px;
    }
    .card-3 img {
        height: 310px !important;
    }
    .sidebar-close-btn {
        top: 0;
    }
    .sidebar-logo {
        margin-top: -10px;
        float: none !important;
    }
}
@media (min-width: 963px) and (max-width: 1023px) {
	.magical-img{
		height:10px;
	}
    .marked-list {
        padding-left: 0px;
    }
    .mb_margin30 {
        margin-bottom: 30px;
    }
    .btn-wrap {
        left: 0;
        width: auto;
    }
    .brand-logo img {
        display: inline-block;
        float: left;
        width:110px;
    }
	.sidebar-btn {
		padding:6px;
	}
    .nav li a {
        padding: 9px 6px;
        font-size: 14px;
    }
    .navbar-nav.navbar-link li a {
        padding: 9px 6px;
        font-size: 14px;
    }
	.iphone-hand{
		top:-5.3em;
	}
	.choose_phone .phone2{
		right:3.3em;
	}
    .pricing-table .price {
        font-size: 52px;
    }
    .appestia-cards ul li img {
        height: 240px;
    }
    .card-3 img {
        height: 310px !important;
    }
    .contact-form {
        width: 55%;
    }
    .sidebar-close-btn {
        top: 0;
    }
    .sidebar-logo {
        margin-top: -10px;
        float: none !important;
    }
    .pencil {
        top: 25%;
        left: -30%;
        transform:rotate(1deg);
        width: 29% !important;
    }
}
/* @media (min-width: 1000px) and (max-width: 1180px){
    #screenshots .owl-carousel .owl-stage-outer{
        height: 280px;
    }
    .screenshot .owl-theme .owl-controls{
        margin-top: 50px;
    }
} */

@media (min-width: 1024px) and (max-width: 1279px) {
    .marked-list {
        padding-left: 0px;
    }
    .mb_margin30 {
        margin-bottom: 30px;
    }
    .iphone-hand {
        top: -5.5em;
    }
    .iphone-hand::after {
        height: 500px;
        width: 500px;
        left: 40%;
    }
    .choose_phone .phone2 {
        right: 1.3em;
    }
    .pricing-table .price {
        font-size: 80px;
    }
    .contact-form {
        width: 40%;
    }
    .appestia-cards ul li img {
        height: 300px;
    }
    .pencil {
        top: 42%;
        left: -11%;
        position: relative;
        transform: rotate(8deg);
        width: 25% !important;
        z-index: 99;
    }
}
@media only screen and (min-width: 1900px) {
    .main-item-list {
        padding-top: 0px;
    }
    .bg-image1:before {
        right: 543px;
    }
}
@media only screen and (min-width: 1800px) and (max-width: 1899px) {
    .main-item-list {
        padding-top: 0px;
    }
    .bg-image1:before {
        right: 500px;
    }
}
@media only screen and (min-width: 1700px) and (max-width: 1799px) {
    .main-item-list {
        padding-top: 0px;
    }
    .bg-image1:before {
        right: 450px;
    }
    .pencil{
        top: -30px;
        left: -20%;
        width: 20% !important;
    }
}
@media only screen and (min-width: 1600px) and (max-width: 1699px) {
    .main-item-list {
        padding-top: 0px;
    }
    .bg-image1:before {
        right: 400px;
    }
    .index-banner2 .staggered-animation-container .phone2 {
        right: 45%;
    }
    .index-banner2 .staggered-animation-container .phone1 {
        right: 24%;
    }
    .index-banner2 .staggered-animation-container .phone3 {
        right: 3%;
    }
}
@media only screen and (min-width: 1500px) and (max-width: 1599px) {
    .main-item-list {
        padding-top: 0px;
    }
    .screenshot-demo .owl-controls .owl-prev {
        left: 37%;
    }
    .screenshot-demo .owl-controls .owl-next {
        right: 37%;
    }
    .screenshot-demo .owl-controls .owl-nav div{
        height: 40px;
        width: 40px;
    }
    .screenshot-demo .owl-controls .owl-nav div.owl-next::before, .screenshot-demo .owl-controls .owl-nav div.owl-prev::before {
        font-size: 28px;
    }
    .screenshot-item .screenshot-iphone1 {
        top: 6px;
        width: 16%;
    }
}
@media only screen and (min-width: 1400px) and (max-width: 1499px) {
    .main-item-list {
        padding-top: 0px;
    }
    .pencil {
        top: 0;
        left: -23%;
        width: 23% !important;
    }
    .screenshot-item .screenshot-iphone1 {
        top: 2px;
        width: 16%;
    }
    .screenshot-demo .owl-controls .owl-prev {
        left: 37%;
    }
    .screenshot-demo .owl-controls .owl-next {
        right: 37%;
    }
    .screenshot-demo .owl-controls .owl-nav div{
        height: 40px;
        width: 40px;
    }
    .screenshot-demo .owl-controls .owl-nav div.owl-next::before, .screenshot-demo .owl-controls .owl-nav div.owl-prev::before {
        font-size: 28px;
    }
    .index-banner2 .staggered-animation-container .phone2 {
        top: 70px;
        right: 55%;
        width: 300px;
    }
    .index-banner2 .staggered-animation-container .phone1 {
        top: 70px;
        right: 36%;
        width: 300px;
    }
    .index-banner2 .staggered-animation-container .phone3 {
        top: 83px;
        right: 16%;
        width: 300px;
    }
}
@media only screen and (max-width: 1307px) {
    .btn-wrap .btn {
        margin-bottom: 15px;
    }
    .bg-image1::before {
        right: 150px;
        width: 643px;
    }
}
@media only screen and (min-width: 1300px) and (max-width: 1399px) {
    .main-item-list {
        padding-top: 0px;
    }
    .btn-wrap .btn {
        margin-bottom: 15px;
    }
    .pencil {
        top: 15%;
        left: -24%;
        width: 23% !important;
    }
    .screenshot-item .screenshot-iphone1 {
        top: 15px;
        width: 15%;
    }
    .screenshot-item .owl-theme .owl-controls {
        top: 20%;
    }
    .screenshot-demo .owl-controls .owl-prev {
        left: 37%;
    }
    .screenshot-demo .owl-controls .owl-next {
        right: 37%;
    }
    .screenshot-demo .owl-controls .owl-nav div{
        height: 40px;
        width: 40px;
    }
    .screenshot-demo .owl-controls .owl-nav div.owl-next::before, .screenshot-demo .owl-controls .owl-nav div.owl-prev::before {
        font-size: 28px;
    }
    .index-banner2 #header h1 {
        font-size: 80px;
    }
    .index-banner2 #header h2{
        margin: 15px 0;
        font-size: 30px;
    }
    .mtb50 {
        margin: 30px 0;
    }
    .index-banner2 .staggered-animation-container .phone2 {
        top: 70px;
        right: 45%;
        width: 300px;
    }
    .index-banner2 .staggered-animation-container .phone1 {
        top: 70px;
        right: 27%;
        width: 300px;
    }
    .index-banner2 .staggered-animation-container .phone3 {
        top: 83px;
        right: 7%;
        width: 300px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1299px) {
    .main-item-list {
        padding-top: 0px;
    }

    #header h2 {
        font-size: 20px;
    }
     .round-animate .round-1 {
        width: 500px;
        height: 500px;
    }
    .round-border {
        padding-top: 60px;
        left: 53%;
    }
    .round-animate .round-2 {
        width: 400px;
        height: 400px;
    }
    .round-animate .round-3 {
        width: 300px;
        height: 300px;
    }
    .round-1 .r-1, .round-2 .r-1, .round-3 .r-1 {
        top: -5px;
        margin-left: -5px;
    }
    .round-1 .r-2 {
        margin-left: 236px;
        top: 309px;
    }
    .round-1 .r-3 {
        margin-left: -105px;
        top: 473px;
    }
    .round-1 .r-4 {
        margin-left: -254px;
        top: 225px;
    }
    .round-2 .r-2 {
        margin-left: -193px;
        top: 125px;
    }
    .round-2 .r-3 {
        margin-left: 195px;
        top: 215px;
    }
    .round-2 .r-4 {
        margin-left: 99px;
        top: 365px;
    }
    .round-3 .r-2 {
        margin-left: -154px;
        top: 129px;
    }
    .round-3 .r-3 {
        margin-left: -91px;
        top: 265px;
    }
    .round-3 .r-4 {
        margin-left: 145px;
        top: 160px;
    }
    .index-banner2 .staggered-animation-container .phone2 {
        top: 90px;
        right: 32%;
        width: 350px
    }
    .index-banner2 .staggered-animation-container .phone1 {
        top: 89px;
        right: 12%;
        width: 350px;
    }
    .index-banner2 .staggered-animation-container .phone3 {
        top: 95px;
        right: -6%;
        width: 350px;
    }
    .pencil {
        top: 0;
        left: -13%;
        transform: rotate(1deg);
        width: 26% !important;
    }
    .screenshot-item .screenshot-iphone1 {
        top: -24px;
        width: 31%;
    }
    .screenshot-demo .owl-controls .owl-prev {
        left: 28%;
    }
    .screenshot-demo .owl-controls .owl-next {
        right: 28%;
    }
    #header.home-heading h1 {
        font-size: 30px;
    }
}
@media only screen and (min-width: 1100px) and (max-width: 1199px) {
    .main-item-list {
        padding-top: 0px;
    }
    .pencil {
        top: 12%;
        left: -13%;
        transform:rotate(1deg);
        width: 27% !important;
    }
    .screenshot-item .screenshot-iphone1 {
        top: -25px;
        width: 31%;
    }
    .screenshot-demo .owl-controls .owl-prev {
        left: 28%;
    }
    .screenshot-demo .owl-controls .owl-next {
        right: 28%;
    }
}
@media only screen and (min-width: 1000px) and (max-width: 1099px) {
    .main-item-list {
        padding-top: 0px;
    }
    .ss-phone > img {
        top: -20px;
    }
    .screenshot-demo .owl-controls .owl-prev {
        left: 28%;
    }
    .screenshot-demo .owl-controls .owl-next {
        right: 28%;
    }
    .screenshot-item .screenshot-iphone1{
        top: -14px;
        width: 30%;
    }
    .screenshot-item .owl-theme .owl-controls{
        top: 25%;
    }
}
@media only screen and (min-width: 1500px) and (max-width: 1599px) {

   /* .ss-phone >img {
        top: 2px !important;
    }*/
    .pencil {
        bottom: -50px;
        left: 31.8%;
    }
    .pencil {
        top: 0;
        left: -21%;
        width: 21% !important;
    }
    .round-animate{
        width: 500px;
        height: 500px;
    }
    .round-animate .round-1{
        width: 500px;
        height: 500px;
    }
    .round-animate .round-2 {
        width: 400px;
        height: 400px;
    }
    .round-animate .round-3 {
        width: 300px;
        height: 300px;
    }
    .round-1 .r-1,.round-2 .r-1,.round-3 .r-1{
        top: -5px;
        margin-left: -5px;
    }
    .round-1 .r-2{
        margin-left: 244px;
        top: 259px;
    }
    .round-1 .r-3{
        margin-left: -115px;
        top: 468px;
    }
    .round-1 .r-4{
        margin-left: -253px;
        top: 273px;
    }

    .round-2 .r-2{
        margin-left: -192px;
        top: 123px;
    }
    .round-2 .r-3{
        margin-left: -46px;
        top: 390px;
    }
    .round-2 .r-4{
        margin-left: 195px;
        top: 217px;
    }
    .round-3 .r-2{
        margin-left: -152px;
        top: 120px;
    }
    .round-3 .r-3{
        margin-left: 0px;
        top: 293px;
    }
    .round-3 .r-4{
        margin-left: 145px;
        top: 140px;
    }
    #header.home-heading h1 {
        font-size: 35px;
    }
    .index-banner2 .staggered-animation-container .phone2 {
        top: 70px;
        right: 55%;
        width: 300px;
    }
    .index-banner2 .staggered-animation-container .phone1 {
        top: 70px;
        right: 36%;
        width: 300px;
    }
    .index-banner2 .staggered-animation-container .phone3 {
        top: 83px;
        right: 16%;
        width: 300px;
    }
}
@media only screen and (min-width: 1600px) and (max-width: 1699px) {
    
    .ss-phone >img {
        top: -8px !important;
    }
    .screenshot-item .screenshot-iphone1 {
        top: -10px !important;
        width: 17%;
    }

    #header.home-heading h1 {
        font-size: 35px;
    }
    .round-animate .round-1{
        width: 600px;
        height: 600px;
    }
    .round-animate .round-2 {
        width: 500px;
        height: 500px;
    }
    .round-animate .round-3 {
        width: 400px;
        height: 400px;
    }
    .round-1 .r-1,.round-2 .r-1,.round-3 .r-1{
        top: -5px;
        margin-left: -5px;
    }
    .round-1 .r-2{
        margin-left: 275px;
        top: 280px;
    }
    .round-1 .r-3{
        margin-left: -115px;
        top: 530px;
    }
    .round-1 .r-4{
        margin-left: -284px;
        top: 273px;
    }

    .round-2 .r-2{
        margin-left: -210px;
        top: 125px;
    }
    .round-2 .r-3{
        margin-left: -35px;
        top: 446px;
    }
    .round-2 .r-4{
        margin-left: 195px;
        top: 328px;
    }
    .round-3 .r-2{
        margin-left: -156px;
        top: 254px;
    }
    .round-3 .r-3{
        margin-left: 149px;
        top: 250px;
    }
    .round-3 .r-4{
        margin-left: 138px;
        top: 68px;
    }
    #header.home-heading h1 {
        font-size: 35px;
    }
    .index-banner2 .staggered-animation-container .phone2 {
        top: 70px;
        right: 50%;
        width: 350px;
    }
    .index-banner2 .staggered-animation-container .phone1 {
        top: 70px;
        right: 30%;
        width: 350px;
    }
    .index-banner2 .staggered-animation-container .phone3 {
        top: 83px;
        right: 10%;
        width: 350px;
    }
}
@media only screen and (min-width: 1700px) and (max-width: 1799px) {
    
    .ss-phone >img {
        top: -6px !important;
    }
    .screenshot-item .screenshot-iphone1 {
        top: -10px !important;
        width: 17%;
    }

    #header.home-heading h1 {
        font-size: 35px;
    }
    .round-animate .round-1{
        width: 600px;
        height: 600px;
    }
    .round-animate .round-2 {
        width: 500px;
        height: 500px;
    }
    .round-animate .round-3 {
        width: 400px;
        height: 400px;
    }
    .round-1 .r-1,.round-2 .r-1,.round-3 .r-1{
        top: -5px;
        margin-left: -5px;
    }
    .round-1 .r-2{
        margin-left: 275px;
        top: 280px;
    }
    .round-1 .r-3{
        margin-left: -115px;
        top: 530px;
    }
    .round-1 .r-4{
        margin-left: -284px;
        top: 273px;
    }

    .round-2 .r-2{
        margin-left: -210px;
        top: 125px;
    }
    .round-2 .r-3{
        margin-left: -35px;
        top: 446px;
    }
    .round-2 .r-4{
        margin-left: 195px;
        top: 328px;
    }
    .round-3 .r-2{
        margin-left: -156px;
        top: 254px;
    }
    .round-3 .r-3{
        margin-left: 149px;
        top: 250px;
    }
    .round-3 .r-4{
        margin-left: 138px;
        top: 68px;
    }
    #header.home-heading h1 {
        font-size: 35px;
    }
    .index-banner2 .staggered-animation-container .phone2 {
        top: 70px;
        right: 50%;
        width: 350px;
    }
    .index-banner2 .staggered-animation-container .phone1 {
        top: 70px;
        right: 30%;
        width: 350px;
    }
    .index-banner2 .staggered-animation-container .phone3 {
        top: 83px;
        right: 10%;
        width: 350px;
    }
}
@media only screen and (min-width: 1800px) and (max-width: 1899px) {
    
    .ss-phone >img {
        top: -4px !important;
    }
    .screenshot-item .screenshot-iphone1 {
        top: -5px !important;
        width: 17%;
    }
}
@media only screen and (max-width: 999px) {
    .ss-phone > img {
        display: none;
    }
    .pricing-table{
        margin-bottom: 30px;
    }
    .set-wrapper{
        display: block;
    }
    .icon-block{
        margin-bottom: 60px;
    }
    .owl-controls{
        display: none;
    }
    #aboutcontent .owl-controls,.testimonial-slider .owl-controls{
        display: block;
    }
    .mob-icon-block{
        margin-bottom: 0px;
    }
    #header.home-heading i {
        width: 50px;
        height: 50px;
        font-size: 26px;
        padding: 12px;
    }
    #header.home-heading h1{
        font-size: 26px;
        margin-top: 60px;
    }
    .screenshot-demo .item{
        padding: 0;
    }
}
@media screen and (min-width: 1400px) {
    #header h1 {
        font-size: 112px;
    }
    #header p {
        font-size: 56px;
    }
    .screenshot .owl-theme .owl-controls {
        margin-top: 85px;
    }
    .ss-phone > img {
        width: 25.9%;
        top: 0px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .feature-phone1{
        width: 71%;
    }
    .feature-phone2{
        width: 60%;
    }
    #header h2 {
        font-size: 18px;
    }
    .round-border {
        padding-top: 60px;
        left: 52%;
    }
    .round-animate {
        width: 650px;
        height: 650px;
    }
    .round-animate .round-1 {
        width: 450px;
        height: 450px;
    }
    .round-animate .round-2 {
        width: 350px;
        height: 350px;
    }
    .round-animate .round-3 {
        width: 250px;
        height: 250px;
    }
    .round-1 .r-1, .round-2 .r-1, .round-3 .r-1 {
        top: -5px;
        margin-left: -5px;
    }
    .round-1 .r-2 {
        margin-left: 215px;
        top: 265px
    }
    .round-1 .r-3 {
        margin-left: -115px;
        top: 414px;
    }
    .round-1 .r-4 {
        margin-left: -230px;
        top: 210px;
    }
    .round-2 .r-2 {
        margin-left: -177px;
        top: 139px;
    }
    .round-2 .r-3 {
        margin-left: 170px;
        top: 165px;
    }
    .round-2 .r-4 {
        margin-left: 62px;
        top: 329px;
    }
    .round-3 .r-2 {
        margin-left: -128px;
        top: 101px;
    }
    .round-3 .r-3 {
        margin-left: -21px;
        top: 242px;
    }
    .round-3 .r-4 {
        margin-left: 115px;
        top: 151px;
    }
    .index-banner2 #header h2{
        font-size: 30px;
    }
    #aboutcontent p {
        font-size: 14px;
    }
    .avatar-img {
        top: -70px;
    }
    #aboutform .owl-stage-outer {
        top: 195px;
    }
    .about-carousel {
        margin: 0;
    }
    #header.home-heading h1 {
        font-size: 30px;
    }
    #header.home-heading i {
        width: 50px;
        height: 50px;
        font-size: 26px;
        padding: 12px;
    }
    .index-banner2 .staggered-animation-container .phone2 {
        top: 109px;
        right: 35%;
        width: 280px;
    }
    .index-banner2 .staggered-animation-container .phone1 {
        top: 109px;
        right: 14%;
        width: 280px;
    }
    .index-banner2 .staggered-animation-container .phone3 {
        top: 122px;
        right: -10%;
        width: 280px;
    }
}
@media only screen and (min-width: 1300px) and (max-width: 1570px){
    #header.home-heading h1 {
        font-size: 35px;
    }
    .round-animate{
        width: 500px;
        height: 500px;
    }
    .round-animate .round-1{
        width: 500px;
        height: 500px;
    }
    .round-animate .round-2 {
        width: 400px;
        height: 400px;
    }
    .round-animate .round-3 {
        width: 300px;
        height: 300px;
    }
    .round-1 .r-1,.round-2 .r-1,.round-3 .r-1{
        top: -5px;
        margin-left: -5px;
    }
    .round-1 .r-2{
        margin-left: 244px;
        top: 259px;
    }
    .round-1 .r-3{
        margin-left: -115px;
        top: 468px;
    }
    .round-1 .r-4{
        margin-left: -253px;
        top: 273px;
    }

    .round-2 .r-2{
        margin-left: -192px;
        top: 123px;
    }
    .round-2 .r-3{
        margin-left: -46px;
        top: 390px;
    }
    .round-2 .r-4{
        margin-left: 195px;
        top: 217px;
    }
    .round-3 .r-2{
        margin-left: -152px;
        top: 120px;
    }
    .round-3 .r-3{
        margin-left: 0px;
        top: 293px;
    }
    .round-3 .r-4{
        margin-left: 145px;
        top: 140px;
    }
}
@media screen and (max-width: 991px){
    .index-banner2 {
        background: #ff3366;
    }
    .home-info{
        text-align: center;
    }
    .avatar-img{
        display: none;
    }
    #feature-desc i,#feature-desc1 i {
        margin-bottom: 0;
    }
    #feature-desc .icon-block.mbt50 h3{
        margin-bottom: 10px;
    }
    .icon-block.mt30 {
        margin-bottom: 0;
    }
    #aboutform .owl-stage-outer {
        top: 25px;
    }
    .slider-content {
        padding: 50px 0;
    }
    #aboutcontent{
        text-align: center;
    }
    #aboutcontent p {
       font-size: 13px;
    }
    .index-banner2 #header h2 {
        font-size: 18px;
    }
    #aboutcontent .owl-dots {
        right: 45%;
        top: 90%;
    }
    .feature-list{
        margin-bottom: 30px;
    }
    .about-carousel {
        margin: 0;
    }
}
@media (min-width: 2000px) and (max-width: 2880px){
    .home-info {
        padding: 0;
    }
    #header{
        padding: 150px 0;
    }
    .index-banner2 .staggered-animation-container .phone2{
        right: 53%;
    }
    .index-banner2 .staggered-animation-container .phone1 {
        right: 43%;
    }
    .index-banner2 .staggered-animation-container .phone3{
        right: 33%;
    }
    .screenshot-demo .owl-controls .owl-prev{
        left: 38%;
    }
    .screenshot-demo .owl-controls .owl-next{
        right: 38%;
    }
    .screenshot-item .screenshot-iphone1 {
        top: -26px;
        width: 19%;
    }
    .screenshot-demo .item {
        padding: 70px 0;
    }
    .screenshot-item .owl-theme .owl-controls {
        top: 35%;
    }
}
@media screen and (max-width: 760px) {
    .pencil, .pencil-block{
        display: none;
    }
    .tablet-img-block img {
        box-shadow: 0 32px 21px 0 rgba(0, 0, 0, 0.15);
        position: relative;
        top: 0px;
        width: 750px;
        padding-top: 20px;
    }
    .tablet-play-icon a {
        top: 50%;
        left: 50%;
    }
}
@media only screen and (min-width: 900px) and (max-width: 999px) {
    .pencil {
        top: -25%;
        left: -28%;
        transform:rotate(1deg);
        width: 28% !important;
    }
    .tablet-img-block img {
        width: 550px;
    }
    .tablet-play-icon a {
        top: 10%;
    }
}