@charset "utf-8";

/* CSS Document */



@media screen and (max-width:1200px){

.main header .headerSec nav{ margin-left:100px}



.main .banner{ background:url(../images/banner.jpg) -250px top;}

.main .banner .banHolder .banContHolder .banCont{ width:55%;  margin-left:250px;}

.main .banner .banHolder .banContHolder .banCont h1, .main .ctast .banHolder .banContHolder .banCont h1{ font-size:25px; line-height:25px;}

.main .ctast .banHolder .banContHolder .banCont{ width:55%}



.main .happy{ background-image:none}

.main .happy .banHolder .banContHolder .banCont{ width:70%; margin:0 auto; float:none;}

.main .happy .banHolder .banContHolder .banCont h1{ text-align:center}

.main .happy .banHolder .banContHolder .banCont p{ text-align:center}

.main .happy .banHolder .banContHolder .banCont input[type="button"]{ float:none}



.main footer .foo .eachFoo{ width:26%}

.main footer .foo .socialSec{ width:32%}

#container{width:980px; margin:0px auto;}

}

@media screen and (max-width:980px){

.main .banner{ margin:90px 0 0; padding:100px 0; background:url(../images/banner.jpg) -250px top;}

.main .banner .banHolder .banContHolder .banCont{ margin-left:200px; width:60%}

#clientsDiv .container .cl-list li{ width:24%;}
#clientsDiv .container .cl-list li img{ width: 100%;}

.main .handle{ margin:50px auto 40px}

.main .handle h2{ font-size:28px; text-align:center}

.main .handle fieldset legend{ padding:0 20px}

.main .handle .softwareHolder .eachHandle{ width:200px}



.main header .headerSec .call{ margin:17px 0 0}

.main header .headerSec .mobMenu{ display:block; margin-left:40px}

.main header .headerSec nav{ display:none; width:200px; background-color:#e6e6e6; padding:10px 0; position:absolute; right:13px; top:50px;}

.main header .headerSec nav a{ width:100%; color:#333}

.main header .headerSec figure{ width:150px}

.main header .headerSec figure img{ width:100%}

.ctand.privacy {
    background: #fff !important;
    background-image: none;
    padding: 18px 0 0 !important;
	
}
.main .inner-handle {
    max-width: 90%;
    width: 96%;
    margin: 0 auto;
}
.container-nav {
    width: 90%;
    margin: auto;
}

.main .ctast h2{ font-size:28px; text-align:center}

.main .ctast fieldset legend{ padding:0 20px}



.main .whyExp{margin:50px auto 0; padding:40px 0 10px}

.main .why h2{ font-size:28px; text-align:center}



.main .price h2{ text-align:center; font-size:28px}

.main .price .priceHolder .eachPrice .heading h2{ font-size:24px}

.main .price .priceHolder .eachPrice .heading .optionVal{ right:10px}

.main .price .priceHolder .eachPrice .shared{ margin:30px 20px}



.main .price .faqHolder{ margin:30px auto 0}



.main .banner .banHolder .banContHolder .banCont h1, .main .ctast .banHolder .banContHolder .banCont h1{ font-size:23px}

.main .happy .banHolder .banContHolder .banCont{ width:80%; margin:0 auto; float:none;}



.main footer .foo .eachFoo{ width:41.5%}

.main footer .foo .socialSec{ width:90%; border-top:1px solid #dedede; padding:20px 0 0}

.main footer .foo .eachFoo ul li{ width:25%}
.main .banner .banHolder .banContHolder .banCont p{font-size:13px;}

#container{width:768px; margin:0px auto;}

}
@media screen and (max-width:991px){.ck-bg {    bottom: 40px;	padding:0 10px;	width:calc(100% - 20px);}	div.ck-bg p span {    display: contents;}}
@media screen and (max-width:768px){
	#overlay{
		overflow-y:scroll;
	}
.main header{ padding:10px 0}

#clientsDiv .container .cl-list li{ width:24%;}
#clientsDiv .container .cl-list li img{ width: 100%;}

.main .banner{ background-image:none; background-color:#019acc; padding:40px 0; margin:70px 0 0}

.main .banner .banHolder .banContHolder .banCont{ width:90%; padding:5%; margin:0 auto}

.main .handle .handleHolder .eachHandle{-webkit-column-count:2; -moz-column-count:2; column-count:2;}



.main .ctast{ background-image:none; background-color:#019acc; padding:40px 0; margin:50px 0 0}

.main .ctast .banHolder .banContHolder .banCont{ width:90%; padding:5%;}



.main .why .whyHolder .eachWhy{ width:40%}



.main .price{margin:40px auto 10px}



.main .price .priceHolder .eachPrice{ width:80%}

.main .price .faqHolder .faqEach{ margin:0px 2%; width:96%}



.main .ctand{ background-image:none; background-color:#019acc; padding:40px 0; margin:50px 0 0}

.main .ctand .banHolder .banContHolder .banCont{ width:90%; margin:0 auto; float:none; padding-bottom:5px}



.main .happy .banHolder .banContHolder .banCont{ width:90%; margin:0 auto; float:none;}



.main footer .foo .eachFoo ul li{ width:33%}

#container{width:600px; margin:0px auto;}

}

@media screen and (max-width:600px){

.main .banner{ padding:0}

.main .banner .banHolder .banContHolder{ width:100%}

.main .banner .banHolder .banContHolder .banCont{ background-color:transparent;}

.main .banner .banHolder .banContHolder .banCont h1{ color:#fff; font-size:22px; line-height:30px; text-align:center;}

.main .banner .banHolder .banContHolder .banCont p{ display:none}

.main .banner .banHolder .banContHolder .banCont input[type="button"]{ background-color:#d11313; width:49% }



.main header .headerSec .call{ display:none}

.main .banner .banHolder .banContHolder .banCont input[type="button"].phone{ display:block}



.main .handle .handleHolder .eachHandle{-webkit-column-count:2; -moz-column-count:2; column-count:2;}

.main .handle .handleHolder{ width:100%; padding:0; margin:10px auto 0}

.main .banner .banHolder .banContHolder .banCont h1 small{color:#fff;}



.main .ctast{ padding:0}

.main .ctast .banHolder .banContHolder{ width:100%}

.main .ctast .banHolder .banContHolder .banCont{ background-color:transparent;}

.main .ctast .banHolder .banContHolder .banCont h1{ color:#fff; font-size:22px; line-height:30px; text-align:center;}

.main .ctast .banHolder .banContHolder .banCont p{ display:none}

.main .ctast .banHolder .banContHolder .banCont input[type="button"]{ background-color:#d11313; margin:20px auto 0; width:200px; float:none }



.main .price .faqHolder{ margin:0px auto}



.main .ctand .banHolder .banContHolder .banCont h1{ font-size:20px}



.main .happy{ padding:50px 0}



.main footer .foo .eachFoo ul{ margin-bottom:20px}

.main footer .foo .eachFoo ul li{ width:auto; margin:0 5px 15px; float:left; display:block}

.main footer .foo .eachFoo ul li p{ display:none}

}

@media screen and (max-width:480px){
#clientsDiv .container .cl-list li{ width:45%;}
#clientsDiv .container .cl-list li img{ width: 100%;}


.main .why .whyHolder .eachWhy{ width:80%}

.main .handle .softwareHolder .eachHandle{ width:45%; padding:20px 0;}

.main .handle .softwareHolder .eachHandle img{ width:80%}

.main .handle .softwareHolder{ margin:30px auto 0}

.main .handle h2{ font-size:20px; text-align:left}

.main .handle .handleHolder .eachHandle{-webkit-column-count:1; -moz-column-count:1; column-count:1;}



.main .banner .banHolder .banContHolder .banCont input[type="button"]{ float:none; width:70%}

.main .banner .banHolder .banContHolder .banCont input[type="button"].phone{ float:none; margin:7px auto 0}



.main .price .priceHolder .eachPrice{ width:96%}

.main .price .priceHolder .eachPrice .heading{ padding:15px 20px 20px}

.main .price .priceHolder .eachPrice .heading .optionVal{ display:none}

.main .price .priceHolder{ margin:20px auto 0}



.main .ctand .banHolder .banContHolder{ width:100%}



.main .why h2{ font-size:20px; text-align:left}



.main .price h2{ font-size:20px; text-align:left}

.main .price fieldset{ border:none}

.main .price fieldset legend{ width:96%; padding:0}



.main footer .foo .eachFoo{ width:80%}

.main footer .foo .socialSec{ width:88%}



.privacyCont{ width:70%;}

.privacyCont .policy{ height:250px}
.main .banner .banHolder .banContHolder .banCont h1{color: #fff;font-size: 17px;line-height: 23px;text-align: center; margin-bottom:10px;} 
.main .banner .banHolder .banContHolder .banCont h1 small{display:block;}

#container{width:300px; margin:0px auto;}

}