/* -------------------------------------------------------
                     phone & tablet 
-------------------------------------------------------- */
@media (max-width: 1024px) {
	.main-container {
		padding-left: 0;
	}
	.navigation {
		position: fixed;
	    top: 0;
	    left: 0;
	    height: auto;
	    background-color: #f6f6f6;
	    z-index: 9999999;
	    width: 100%;
	}
	.navigation .humberger-menu {
	    display: block;
	    float: left;
	}
	.navigation .humberger-menu span {
	    left: 45px;
	    right: auto;
	}
	.navigation .social-ic {
	    text-align: center;
	    position: absolute;
	    top: 4px;
	    left: auto;
	    right: 45px;
	    margin: 0 auto;
	}
	.navigation .social-ic li {
		display: inline-block;
		margin-left: 15px;
	}
	.slide-nav-active {
	    padding-top: 80px;
	}
	.header-s .middle-c {
	    top: 50.5%;
	}
	.header-s .middle-c .capt {
		padding-left: 0; 
		padding-right: 0; 
	}
	.sections {
		margin-left: 0;
	}
}

@media (max-width: 991px) {
	.container {
    width: auto;
    padding: 0 45px;
}
	.header-s .header-bg {
		display: none;
	}
	.header-s .middle-c {
	    top: 48.5%;
	    left: 35px;
	    width: auto;
	}
	.header-s .about-btn {
		right: 15px;
	}
	.about-skills {
	    padding-left: 15px;
	    margin-top: 80px;
	}
	.resume .column-left {
		float: right;
	}
	.resume .column-left .icon {
    	right: calc(0% - 4px);
	}
	.resume .column-right {
		float: left;
		margin-left: 0;
	}
	.resume .working {
		float: left;
		margin-top: 100px;
		margin-bottom: 30px;
	    margin-right: 10px;
	}
	.resume .education {
	    margin-left: 10px;
	}
	.resume .column-right {
		float: left;
	}
	.resume .column-right .icon {
    	left: calc(0% - 4px);
	}
	.serv-content .serv-item {
	    margin-bottom: 80px;
	}
	.facts {
		padding: 120px 0 40px 0;
	}
	.facts .fact-item {
	    margin-bottom: 80px;
	}
	.price .price-table {
		margin-bottom: 80px;
	}
	.price .price-table:last-child {
		margin-bottom: 0;
	}
	.blog .blog-item {
		margin-bottom: 0;
	}
	.blog .blog-box {
		margin-bottom: 60px;
	}
	.blog .blog-box:last-child {
		margin-bottom: 0;
	}
	.contact .pinfo  {
		margin-bottom: 50px;
	}
	.contact .con-info {
		margin-bottom: 80px;
	}
	.contact .pconform {
	    padding-left: 15px;
	}
	.contact-item {
	    margin-bottom: 30px;
	    display: inline-block;
	    width: 100%;
		padding-left: 0;
	}
}

@media (max-width: 770px) {
	.work .work-item {
        width: 48.8%;
	}
}

@media (max-width: 575px) {
	.header-s .middle-c h4 {
	    font-size: 50px;
	    line-height: 55px;
	}
	.header-s .middle-c h1 {
	    font-size: 65px;
	    line-height: 70px;
	}
	.header-s .middle-c p {
  		font-size: 20px;
  	}
  	.header-s .middle-c a {
	    font-size: 11.5px;
	    padding: 9px 30px;
	}
	.work .filter-work a:first-child {
	    padding-left: 16px;
	    border-radius: 4px;
	}
	.work .filter-work a:last-child {
	    padding-right: 16px;
	    border-radius: 4px;
	}
	.work .work-item {
    	width: 96%;
    	padding: 0 5px 12px 13px;
	}
	.work .filter-work a {
	    margin-bottom: 15px;
	    display: inline-block;
	}
}

@media (max-width: 425px) {
	.container {
		padding: 0 15px;
	}
	.navigation .humberger-menu span {
	    left: 15px;
	}
	.navigation .social-ic {
		right: 15px;
	}
	.slide-nav-active {
 	   padding-top: 100px !important;
	}
	.sidebar {
    	width: 325px;
    	padding: 60px 20px 20px 45px;
	}
	.sidebar .menu-info {
	    left: 30px;
	}
	.sidebar a {
	    font-size: 20px;
	    line-height: 30px;
	    margin-bottom: 25px;
	}
	.header-s .about-btn {
		display: none;
	}
	.header-s .middle-c .cta-btn {
	    margin-bottom: 10px;
	}
	.header-s .middle-c .capt {
   		padding-right: 30px;
	}
	.header-s .middle-c {
	    left: 15px;
	}
	.quote .small-p h3 {
	    font-size: 20px;
	    line-height: 30px;
	}
	.work-us h4 {
	    font-size: 13px;
	}
	.work-us h3 {
	    font-size: 30px;
	    line-height: 35px;
	}
	footer .sc-icon span {
		margin-bottom: 7px;
	}
}

@media (max-height: 495px) {
	.header-s .middle-c h4 {
	    font-size: 40px;
	    line-height: 45px;
	}
	.header-s .middle-c h1 {
	    font-size: 55px;
	    line-height: 60px;
	}
	.header-s .middle-c p {
	    font-size: 16px;
	}
	.header-s .middle-c a {
	    font-size: 11px;
	    padding: 6px 27px;
	}
}