@media screen and (min-width: 1441px) {
	.intro-section header .pagewrapper .logo {width: 380px; margin-top: 20px;}
	.intro-section header .pagewrapper nav.main-menu {width: calc(100% - 390px);}
	.intro-section header .pagewrapper {padding-top: 0;}
}

@media screen and (max-width: 1440px) {
 	.intro-section .hero-section .pagewrapper, header .pagewrapper {width: 94%}
 	.intro-section header .pagewrapper .logo {margin-top: 15px;}
 	header .pagewrapper {padding-top: 0!important;}
 	.intro-section header {height: 80px;}
}

@media screen and (max-width: 1366px) {
	.resources .resources-list li aside {height:180px;}
	.intro-section header .pagewrapper .logo {width: 300px; margin-top: 15px;}
	.intro-section header {padding-top: 0}
	.intro-section .hero-section .pagewrapper, header .pagewrapper {width: 96%}
	.intro-section header .pagewrapper nav.main-menu {width: calc(100% - 300px)!important;}
	.intro-section header .pagewrapper nav.main-menu ul li a.btn-blue, .intro-section header .pagewrapper nav.main-menu ul li a {font-size: 14px; }
	.intro-section .hero-section .hero-main article p.btn a {padding: 10px 15px}
	.intro-section .hero-section .hero-main article h1 {font-size: 40px; line-height: 46px;}
	h2 {font-size: 40px; line-height: 46px;}
	.cta ul li:first-child {padding-left: 30px;}
	.cta ul li span {width: 60px; top: -25px; margin-left: -30px }
}



@media screen and (max-width: 1250px) {
	.intro-section header .pagewrapper nav.main-menu .mobnav {display: block;}
	.intro-section header .pagewrapper nav.main-menu ul {display: none; }
	.intro-section header .pagewrapper nav.main-menu {width: 30px; justify-content: flex-end; -webkit-justify-content: flex-end;}
}



@media screen and (max-width: 1194px){
	.intro-section header .pagewrapper nav.main-menu .mobnav {display: block;}
	.intro-section header .pagewrapper nav.main-menu ul {display: none; }
	.intro-section header .pagewrapper nav.main-menu {width: 30px;}
	.intro-section .hero-section .hero-main article {width: 50%;}
	.intro-section .hero-section .hero-main aside {width: 47%;}
	.intro-section .hero-section {padding-top: 100px;}
	.intro-section .hero-section .hero-main article p.subtitle {font-size: 18px; line-height: 24px;}
	.impact-section aside ul, .contact-section aside ul {padding: 15px;}
	.impact-section aside ul li .icon, .contact-section aside ul li .icon {width: 50px;}
	.impact-section aside ul li .number-counter {font-size: 40px; line-height: 40px;}
	.impact-section aside ul li, .contact-section aside ul li {font-size: 16px; line-height: 20px;}
	.works .latest-works li article {width: 40%; max-width: 100%;}
	.works .latest-works li aside {width: 55%; max-width: 100%;}
	.works .latest-works li article h3 {font-size: 30px; line-height: 36px;}
	
	.tabcontent .tcontent article h3 {font-size: 24px; line-height: 30px}
	.process ul li article h4 {font-size: 24px; line-height: 30px}
	.subtitle {font-size: 18px; line-height: 24px;}
	details>summary {font-size: 20px; line-height: 26px;}
	p, .why-choose .pagewrapper2 article ul, .works .pagination, .works .filter, .intro-section .hero-section .hero-main article p, details p, footer .footer-section .col-3 li p, footer .footer-section .col-3 li:last-child p.col-2, .contact-form article .form-list li label {font-size: 16px; line-height: 24px;}
	.cta ul li {width: 100%; padding: 30px 20px 20px; text-align: center;}
	.cta ul li:last-child {padding: 0; padding-top: 30px; width: 100%;}
	.cta ul li:last-child img {border-radius: 0 0 30px 30px}
	.cta ul li span {width: 40px; margin-left: 0!important; top: -10px; margin-left: -20px!important}
	.cta ul {height: auto;}
	.contact-form article {padding: 50px;}
	.intro-section .padbot {padding-bottom: 65px!important;}
	.web-design-packages .packages-list li {width: 100%; margin-bottom: 30px; justify-content: space-between; -webkit-justify-content: space-between; align-content: stretch; -webkit-align-content: stretch;}
	.web-design-packages .packages-list li aside {width: 35%; height: 100%; border-radius: 10px 0 0 10px; align-content:center; -webkit-align-content:center; }
	.web-design-packages .packages-list li article {width: 65%}
	.intro-section .padbot2 {padding-bottom: 40px;}
	.works .all-projects li {width: 46%}
	.works .all-projects li article h5 {font-size: 14px; line-height: 20px;}
}
@media only screen and (max-width: 940px){
	.values article ul li {width: 47%; margin-bottom: 30px}
	
}	

@media only screen and (max-width: 834px){
	.intro-section header {padding: 0 10px; top: 10px; height: 70px}
	.intro-section header .pagewrapper nav.main-menu .mobnav {top: 17px; position: absolute; right: 0}
	.intro-section .hero-section {padding: 85px 0 180px}
	.intro-section .hero-section .hero-main article h1 {font-size: 36px; line-height: 42px;}
	.resources .resources-list li aside {height: 180px;}
	.impact-section, .contact-section {margin-top: -120px}
	.impact-section aside, .contact-section aside {height: auto;}
	.impact-section aside ul, .contact-section aside ul {padding: 20px 20px 0; justify-content: center; -webkit-justify-content: center; }
	.impact-section aside ul li, .contact-section aside ul li {width: 48%; margin-bottom: 20px}
	.impact-section aside ul li .icon {width: 60px;}
	h2 {font-size: 32px; line-height: 38px;}
	
	.works .latest-works li article h3 {font-size: 30px; line-height: 36px;}
	.intro-section .hero-section .hero-main article {width: 100%; margin-bottom: 30px}
	.intro-section .hero-section .hero-main aside {width: 100%}
	.intro-section .hero-section .hero-main article p.subtitle {font-size: 16px; line-height: 22px;}
	
	.intro-section {padding: 10px;}
	.intro-section .padbot2 {padding-bottom: 0px!important;}
	.works .latest-works li article .page-counter {margin-bottom: 15px;}
	.works .latest-works li article .page-counter span {width: 30%; margin: 0 auto; text-align: center; padding-bottom: 15px; font-size: 12px; line-height: 18px;}
	.tab button {font-size: 18px; line-height: 24px; padding: 10px;}
	.works .latest-works li article {width: 100%; text-align: center; max-width: 100%;}
	
	.works .latest-works li aside {width: 100%;}
	.works .latest-works li article p {margin-bottom: 25px}

	.tab {margin-bottom: 15px;}
	
	.tabcontent {padding: 15px;}
	.tabcontent .tcontent aside {width: 100%; order: 2}
	.tabcontent .tcontent article {width: 100%; order: 1}
	
	.services .col2-heading h2, .services .col2-heading p {width: 100%;}
	.services .col2-heading h2 {margin-bottom: 20px;}
	
	.process ul li article {width: 100%; padding-right: 0; background-size: 80px auto;}
	.process ul li article h4 {padding: 5px 0 0 20px!important; font-size: 18px; line-height: 24px; height: 80px;}
	details p {padding-left: 65px;}
	.process ul li article p {padding-left: 47px;}
	.process ul li article h4 span {margin-right: 15px; font-size: 24px;}
	details>summary {font-size: 18px; line-height: 20px!important; min-height: 50px!important;}
	.why-choose .pagewrapper2 article details summary .icon {width: 50px;}
	.why-choose .pagewrapper2 article details summary {padding-left: 65px;}
	 .why-choose .pagewrapper2 aside{order: 2; width: 100%;}
	  .why-choose .pagewrapper2 article {order: 1; width: 100%; margin-bottom: 30px;}
	.why-choose {padding-top: 30px; padding-bottom: 170px}
	
	
	.subtitle {font-size: 16px; line-height: 22px;}
	.resources, .process, .works, .contact-form, .web-design-packages, .values {padding: 30px 0;}
	.cta ul {height: auto;}
	
	.resources .resources-list {margin-bottom: 0;}
	.resources .resources-list li article h4, .works .all-projects li article h4 {font-size: 18px; line-height: 24px; margin-bottom: 15px;}
	.resources .resources-list li {width: 48%; margin-bottom: 30px; padding: 15px;}
	
	.resources .resources-list li article {padding-top: 15px;}
	
	footer {padding: 20px 10px;}
	footer .footer-section .col-3 li {width: 50%;}
	footer .footer-section .footer-bottom li, footer .footer-section .col-3 li:last-child {width: 100%;}

	footer .footer-section aside img {width: 60%;}
	
	footer .footer-section .footer-bottom li:first-child {justify-content: center; -webkit-justify-content: center; margin-bottom: 20px;} 
	footer .footer-section .footer-bottom li:last-child {text-align: center; font-size: 12px;	
	footer .footer-section .col-3 li span.address {background-size: 15px auto!important; width: 20px;}

}
@media only screen and (max-width: 767px) {
	.intro-section .hero-section {padding-top: 70px; padding-bottom: 200px}
	.tab button {width: 50%; font-size: 14px; line-height: 20px; padding: 10px 0; height: 65px; margin-bottom: 10px;}
	.impact-section, .contact-section {margin-top: -180px;}
	.impact-section aside, .contact-section aside {height: auto; }
	.impact-section aside ul li .icon, .contact-section aside ul li .icon {width: 100%;}
	h2 {font-size: 30px; line-height: 36px;}
	.tabcontent .tcontent article h3, .works .latest-works li article h3 {font-size: 24px; line-height: 30px;}
	.impact-section aside ul li .icon img, .contact-section aside ul li .icon img {width: 50px; margin: 0 auto 10px;}
	.impact-section aside ul li, .contact-section aside ul li {width: 100%; padding: 20px; font-size: 16px; line-height: 22px;}
	p, .why-choose .pagewrapper2 article ul, .works .pagination, .works .filter, .intro-section .hero-section .hero-main article p, details p, footer .footer-section .col-3 li p, footer .footer-section .col-3 li:last-child p.col-2 {font-size: 14px; line-height: 20px;}
	.works .latest-works li article h4 {font-size: 14px; line-height: 20px; margin-bottom: 15px;}
	.btn-blue, .btn-white {font-size: 14px!important; line-height: 20px!important; padding: 10px 15px!important;}
	.contact-form article .form-list li {width: 100%;}
	.web-design-packages .packages-list li {width: 100%; margin-bottom: 30px; justify-content: space-between; -webkit-justify-content: space-between; align-content: stretch; -webkit-align-content: stretch;}
	.web-design-packages .packages-list li aside {width: 100%; padding: 15px;height: auto; border-radius: 10px 10px 0 0; align-content:center; -webkit-align-content:center; }
	.web-design-packages .packages-list li article {width: 100%}
	.works .filter li a {margin: 0 5px}

	
}
@media only screen and (max-width: 640px) {
	.values article ul li {width: 100%}
}
@media only screen and (max-width: 480px) {
	.intro-section header .pagewrapper .logo {width: 85%;}
	.intro-section header .pagewrapper nav.main-menu .mobnav {top: 0; position: absolute; right: 0}
	.intro-section .hero-section .hero-main article p.btn a {display: block; text-align: center; margin-bottom: 20px;}
	footer .footer-section .col-3 li, footer .footer-section .footer-bottom li {width: 100%;}	
	footer .footer-section aside {width: 100%;	}
	footer .footer-section aside img {width: 100%;}	
	.resources .resources-list li {width: 100%; margin-bottom: 30px; padding: 15px;}
	.contact-form article {padding: 30px;}
	.intro-section .hero-section .pagewrapper, header .pagewrapper {width: 92%}
	.works .all-projects li {width: 100%;}
	.intro-section header .pagewrapper .logo {width: 80%;}
	.intro-section header .pagewrapper nav.main-menu {position: absolute; right: 0; top: 18px;}
}

@media only screen and (max-width: 1366px) and (min-width: 320px){
}
@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (orientation:portrait) {

}