@media only screen and (max-width: 599px) {

	/*  main container  */
	.main { width: 98%; }
	
	#headerContr .mobBtn { padding:6px 15px; width: 85%; border-radius:3px 3px 0 0; font-size:20px; position: absolute; top: 130px; color:#fff; z-index:999; left: 5px; border:none; display: block; text-decoration:none; background:#000 url('../images/mob-nav.png') right 10px top 7px no-repeat; }
#headerContr .mobBtn:hover { background:#646360 url('../images/mob-nav.png') right 10px top 7px no-repeat; }

	/* header top */	
	.headerTop { position: relative; height:167px; border:none; }
	.headerTop .left { width: 20%; float: left; }
	.headerTop .left h1 a { width:180px; background: url('../images/logo2.png') no-repeat;}
	
	.headerTop .right { padding-top:10px; width: 35%; float:right; }
	.headerTop .right p{ position: absolute; margin:0px; left:5px; top:50px;}
	.headerTop .right a {  text-align:center; width:85%; padding:6px 0;  float:right; }
	.headerTop .right a.login {font-size: 14px; margin-bottom:10px;}
	.headerTop .right a.works {  margin: 0; margin-bottom:10px; font-size: 14px;  }
	.headerTop .right a.pricing {  margin:0 0 10px 0; }
	.headerTop .right .freeTrail { margin-right:10px;}
	
	/* menu bottom */	
	.menuBottom { padding:6px 30px 6px 0; width: 85%; position:absolute; top:-9px; left:5px; position:relative; display: none; border-radius:0 0 3px 3px; margin-bottom:20px;}
	.menuBottom li { padding:8px 15px; float: none; width:100%;  }
	.menuBottom li:hover { color: #000; background: #CCC; }
	.menuBottom li:hover a {  color:#000; display:block;}
	
	/* content area */
	.contantArea { padding: 10px 0;}
	.contantArea img { width:100%;}
	.contantArea .supportText { padding:0 0 20px 0; width:100%; float:left; }
	.contantArea .feature {width:100%; }
	.contantArea .feature p { min-height:0px;}
	.contantArea h3.text2 { font-size: 22px; }
	.contantArea h3.text3 {  font-size: 22px; }
	
	.contantArea .contact span { width:100%;  }
	.contantArea .contact span input.text {  width:90%;  }
	.contantArea .contact select {  width:98%;  }
	.contantArea .contact textarea.text  { width:100%;  }
	.contantArea .contact span .image { width:100px; height:30px; padding-right:10px; float:left;}
	
	.contantArea .leftChat { padding-top:0px; width:98%; }
	.contantArea .leftChat2 {padding-top:0; width:100%; float: left; }
	.howitworks img { width:100%;}
		
	.f-nav{ z-index: 9999; position: absolute; top: 0; width: 100%;}
	
	.howitworks { background:#e77d6b url('../images/how-it-works1.png') center no-repeat; height:135px; }
	
	/* our services */
	.ourService {  width: 100%; float: left;height: auto; }
	.ourService h3 { margin:20px 0; font-size: 22px; color:#000; text-align: center;}
	.ourService h2 {font-size: 28px;}
	.ourService p { margin:0px; font-size: 14px; padding-bottom:20px; line-height:18px;}
	
	.whyus_item { margin:20px 25px; padding:0 0 20px 0; width:85%; }
	.whyus_item i { margin: -20px auto 0 auto;}
	.whyus_item em {  margin: -20px auto 0 auto;}
	.whyus_item strong {  margin: -20px auto 0 auto;}
	
		/* our client */
	.ourClient h2 { margin:0px; font-size:25px;  }
	.ourClient p { font-size:18px;  }
	
	/* footer contr */
	#footerContr { padding-bottom:0; width: 100%; float: left; }
	
	/* footer area */
	.footerArea { padding-bottom:10px;background: none; height:100%; background-color:#31302b; }
	.footerArea h3  { font-size:22px;  }
	.footerArea .overlayText {width: 80%; margin: 0 5%; padding-top:10px; }
	.footerArea .overlayText li {  font-size:14px; }
	.footerArea .followus { padding-top:10px; width: 50%; float: left;margin: 0 5%; }
	.footerArea .followus li { padding:0px;}
	.copyrightArea { padding: 10px 0; width:100%; background:#31302b; }
	.copyrightArea p { font-size: 13px; }
	
}

@media only screen and (min-width: 600px) and (max-width: 1023px) {

	/*  main container  */
	.main { width: 98%; }
	
	.headerTop .left { padding: 0 0; width:30%; float: left; }

	.headerTop .right { padding-top:10px; width: 65%; float:right; }
	.headerTop .right p{ margin: 0px; font-size:15px;  padding-left:0; padding-top:8px; margin:0 0 0 20px; background:none; }
	.headerTop .right a { text-decoration: none; padding: 5px 12px; }
	.headerTop .right a.login {margin: ; font-size: 13px; float:right;  }
	.headerTop .right a.works {  margin:0 5px; font-size: 13px; float:right; }
	.headerTop .right a.pricing {  margin: 0; font-size: 13px; float:right; }
	.headerTop .right .freeTrail { margin-right:10px; margin-top:10px;}
	
	/* menu bottom */	
	.menuBottom li { padding:6px 3px;  font-size: 13px;  }
	.menuBottom .freeTrail { margin-bottom:5px; margin-left:5px; }
	
	.contantArea .supportText { padding:0 0 20px 0; width:50%; float:left; }
	.contantArea img { width:100%;}
	.contantArea .feature { margin-right: 20px; width:100%; float: left;  border-radius:5px; }
	.contantArea .feature p { min-height:0px;}
	
	.contantArea .contact span { width:50%; }
	.contantArea .contact textarea.text  { width:100%;  }
	.contantArea .contact select { width:89%;}
	.contantArea .contact span .image { width:100px; height:30px; padding-right:10px;}
	
	.contantArea .leftChat { padding-top:0; width:100%; float:left; }
	.contantArea .leftChat2 {padding-top:0; width:100%; float: left; }
	
	.howitworks { background:#e77d6b url('../images/how-it-works2.png') center no-repeat; height:270px; }
		
	/* our services */
	.ourService { padding-bottom:20px; height:auto;}
	.ourService h2 { margin:0px; padding:10px 0; }
	.whyus_item {  margin:50px 15px 0 0;  padding:0 10px 20px 10px; width:42%; min-height:215px;}
	.whyus_item i { margin:-20px auto 0 auto;}
	.whyus_item em { margin:-20px auto 0 auto;}
	.whyus_item strong { margin:-20px auto 0 auto;}
	
	/* footer area */
	.footerArea { padding:10px 0;}
	.footerArea h3 {  padding-bottom:10px; font-size:22px;}
	.footerArea .overlayText { padding-top:6px; width: 25%; float: left; }
	.footerArea .overlayText li { padding:0 0 10px 0;font-size:13px; }
	.footerArea .followus {padding-top:6px; margin-left:30px; width: 18%; float: left; }
	.footerArea .followus li { float:none; padding-bottom:5px;}
	.copyrightArea { padding: 0 0 10px 0; width:100%; background:#31302b; }
	.copyrightArea p { padding:5px 0;}
}
