/*==========  Desktop First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {


	.header .top .info a, .header2 .top .info a{
		margin: 0 15px;
	}


	.service .items .item.top .more ul{
		margin-top: 10px;
		margin-bottom: 0;
	}


	.process .plan .item{
		padding: 13px 0;
		margin: 0 10px;
	}
	.service .items .item.middle img{
		height: 185px;
	}
	.service .items .item.bottom img{
		height: 195px;
	}
	.service .items .item.middle h3, .service .items .item.bottom h3{
		font-size: 14px;
	}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	nav ul {
			display: none;
			width: 100%;
		}
		nav ul li {
			display: block;
			width: 100%;

		}

		nav ul li ul {
			display: none !important;
		}
		nav ul li a, nav ul li span {
			width: 100%;
		}

	.main_mnu_button{
		border: 0;
		background: #66ccff;
		float: right;
		font-size: 20px;
		padding: 0 8px 1px;
		color: #fff;
		transition: background .3s;
	}
	.main_mnu_button:hover{
		background: #0099cc;
	}


	.header .top .info,.header2 .top .info{
/*		padding-top: 15px; */
		padding-bottom: 15px;
	}
	.header .top nav ul li, .header2 .top nav ul li{
		padding: 3px 10px;
	}
	.header .bottom .form input, .header2 .bottom .form input{
		display: inline-block;
		width: 200px;
	}



	.service .items .item.top h3{
		margin: 5px 0;
	}
	.service .items .item.top img{
		width: 60%;
		height: 195px;
	}
	.service .items .item.top .more{
		width: 39%;
		padding: 5px 5px 5px 30px;
	}

	.service .items .item.middle img{
		height: 143px;
	}
	.service .items .item.bottom img{
		height: 145px;
	}
	.service .items .item.middle h3, .service .items .item.bottom h3{
		right: 35px;
	}


	.about p.right, .about p.left{
		padding: 10px;
	}

	.process img{
		display: none;
	}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	
	/*Disable Animation on Mobile Devices*/
	.animated {
		/*CSS transitions*/
		-o-transition-property: none !important;
		-moz-transition-property: none !important;
		-ms-transition-property: none !important;
		-webkit-transition-property: none !important;
		transition-property: none !important;
		/*CSS transforms*/
		-o-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-webkit-transform: none !important;
		transform: none !important;
		/*CSS animations*/
		-webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
	}



	.info a{
		display: block;
		margin: 0 !important;
		padding: 5px 0;
	}


	.header .bottom .form input, .header .bottom .form button{
		display: block;
		margin: 5px auto;
		width: 80%;
	}

	.service .items .item.top img{
		width: 100%;
		height: auto;
	}
	.service .items .item.bottom img{
		width: 100%;
		height: auto !important;
	}
	.service .items .item.top .more{
		width: 100%;
		padding: 5px 5px 15px 30px;
	}

	.service .items .item.middle h3, .service .items .item.bottom h3{
		right: 25px;
		bottom: 5px;
	}


	.other{
		padding-bottom: 160px;
	}
	.other .paragraph .important{
		width: 100%;
		bottom: -120px;
	}


	#callback{
		width: calc(100% - 80px);
        padding: 0 20px 55px;
	}
    #callback input[type="text"]{
        width: 100%;
        margin: 3px 0;
    }
    #callback textarea{
        width: 100%;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

    h3{
        font-size: 14px;
    }

	.service .items .item.middle img{
		width: 100%;
		height: auto !important;
	}



    #callback{
        padding: 0 20px 20px;
    }
    #callback .btn-feed{
        display: block;
        float: none;
    }
    #callback .fileUpload{
        display: block;
        float: none;
    }
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
nav > ul {
		display: block !important;
	}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}