/* Medium Layout: 1280px. */
@media only screen and (min-width: 1200px) and (max-width: 1300px) { 
    #hero-section .hero-left img {
	    width: 680px;
	}
}



/* Medium Layout: 1280px. */
@media only screen and (min-width: 992px) and (max-width: 1199px) { 
    header .logo {
    	width: 250px;
    }

    header .menu {
	    margin-right: 20px;
	}

	header .menu ul a {
		padding: 5px 8px;
		font-size: 16px;
	}

	#hero-section .hero-left img {
		width: 540px;
	}

	#hero-section .hero-right h1 {
		font-size: 50px;
	}

	#about-section .middle-col .star-wrpr img {
		width: 40px;
	}

	#devops-section .devops-item:hover a {
		font-size: 18px;
		padding: 23px 10px;
	}
}





/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) { 
	header .logo {
		width: 150px;
	}

	header .menu {
	    margin-right: 15px;
	}

	header .menu ul a {
		padding: 5px 8px;
		font-size: 14px;
	}

	header .button-primary {
		padding: 12px 20px;
	}

	#hero-section .hero-left img {
		width: 430px;
	}

	#hero-section .hero-right h1 {
		font-size: 35px;
	    margin-bottom: 35px;
	}

	#hero-section .hero-right .button-secondary {
		font-size: 20px;
		padding: 15px 40px;
	}

	#hero-section .button-secondary:after {
		right: 25px;
	}

	#about-section .middle-col .star-wrpr img {
		width: 30px;
	}

	#products-section .product-item {
		margin-bottom: 30px;
		height: calc(100% - 30px);
	}

	#steps-section .step-item small {
		margin-bottom: 25px;
	}

	#test-section .test-item .image-box {
	    width: 45px;
	}

	#test-section .test-item .text-box {
	    padding-left: 15px;
	    width: 140px;
	    font-size: 16px;
	}

	#test-section .test-item .text-box a {
		font-size: 16px;
	}

	#devops-section .devops-item:hover a {
		font-size: 18px;
		padding: 23px 10px;
	}
}





/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {
	h1 {
		font-size: 40px;
	}
	
	h2, #steps-section h1 {
		font-size: 25px;
	}

	header .menu, header .button-primary {
		display: none;
	}

	.section-header {
		margin-bottom: 25px;
	}

	.button-secondary {
		padding: 15px 50px;
		font-size: 20px;
	}

	.button-secondary::after {
		right: 30px;
	}

	#products-section .button-wrpr {
		padding: 10px 40px 0;
	}

	.mobile-menu {
		display: block;
		position: absolute;
		left: 15px;
		right: 15px;
		top: 15px;
		width: calc(100% - 30px);
		z-index: 1;
	}

	.slicknav_menu {
		background: transparent;
		padding: 0;
	}

	.slicknav_nav {
		background: #1DAEDD;
		position: absolute;
		top: 100%;
		width: 100%;
		left: 0;
		margin-top: 8px;
		border-top: 2px solid #F9DF41;
	}

	.slicknav_btn {
		background: transparent;
		padding: 0;
		margin: 0;
	}

	.slicknav_menu .slicknav_icon-bar {
		box-shadow: none;
	}

	.slicknav_icon-bar:nth-child(1) {
		background-color: #1DAEDD;
		width: 30px;
		height: 8px;
	}

	.slicknav_icon-bar:nth-child(2) {
		background-color: #1DAEDD;
		width: 20px;
		height: 8px;
	}

	.slicknav_icon-bar:nth-child(3) {
		background-color: #F9DF41;
		width: 8px;
		height: 8px;
	}

	.slicknav_menu .slicknav_icon-bar {
		border-radius: 5px;
		margin-left: auto;
	}

	.slicknav_menu .slicknav_icon {
		width: inherit;
		height: inherit;
	}

	.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
		margin-top: 5px;
	}

	header .logo {
		width: 150px;
		padding: 15px 10px 15px 0;
	}

	#hero-section .hero-left {
		display: none;
	}

	#hero-section .hero-right {
		width: calc(100% - 30px);
		border-left: 2px solid #1DAEDD;
		padding: 20px 0 0 30px;
		margin: 50px auto;
	}

	#hero-section .hero-right h1 {
		font-size: 35px;
	    margin-bottom: 50px;
	}

	#hero-section .hero-right .button-secondary {
		position: absolute;
		bottom: -24px;
		left: 0;
		right: 0;
		margin: 0 auto;
		max-width: 200px;
		font-size: 20px;
		padding: 10px;
	}

	#hero-section .hero-right .button-secondary:after {
		right: 20px;
	}

	#about-section .left-col {
		margin-bottom: 50px;
	}

	#about-section .middle-col .star-wrpr {
		margin-top: 0;
	}

	#about-section .middle-col {
		max-width: 250px;
		width: 100%;
		margin: 0 auto 50px;
	}

	#about-section .right-col {
		padding-top: 0;
	}

	#about-section .middle-col:before, #about-section .middle-col:after {
		display: none;
	}

	#about-section {
	    padding: 50px 0;
	}

	#about-section .middle-col h2 {
	    margin-bottom: 15px;
	}

	#about-section .middle-col .star-wrpr img {
		width: 30px;
	}

	#skills-section {
		padding: 0px 0 50px;
	}

	#skills-section .search {
		display: none;
	}

	#skills-section .categories-list {
		width: 100%;
		float: inherit;
		height: inherit;
		display: flex;
		overflow-x: scroll;
		border: 3px solid #76D4F9;
		background: #F3F3F3;
		font-size: 14px;
		margin-bottom: 25px;
	}

	#skills-section .categories-list li {
		height: inherit;
		padding: 10px 5px;
		border-right: 1px solid #ddd;
	}

	#skills-section .categories-list li.active {
		border-left: 3px solid #76D4F9;
		border-right: 3px solid #76D4F9;
		background: #ffffff;
	}

	#skills-section .categories-list li:first-child.active {
		border-left: none;
		border-right: 3px solid #76D4F9;
	}

	#skills-section .categories-list li:last-child.active {
		border-left: 3px solid #76D4F9;
		border-right: none;
	}

	#skills-section .categories-list li:nth-child(1) {
		min-width: 90px;
	}

	#skills-section .categories-list li:nth-child(2) {
		min-width: 132px;
	}

	#skills-section .categories-list li:nth-child(3) {
		min-width: 190px;
	}

	#skills-section .categories-list li:nth-child(4) {
		min-width: 150px;
	}

	#skills-section .categories-list li:nth-child(5) {
		min-width: 200px;
	}

    #skills-section .border-button {
		font-size: 14px;
		text-transform: uppercase;
		color: #1797C0;
		border: 1px solid #1797C0;
		border-radius: 0;
		padding: 10px 35px;
		font-weight: bold;
	}
	.pill {
		display: none;
	}

	.pill-1 {
		display: inline-block;
	}

	#products-section .product-item {
		margin-bottom: 30px;
		height: calc(100% - 30px);
	}

	#products-section {
		padding: 50px 0 75px;
	}

	#steps-section {
		padding: 50px 0;
	}

	#steps-section:after {
	    width: 100%;
	    height: 32%;
	}

	#steps-section h1 {
		font-size: 30px;
	}
	
	#steps-section img {
		margin-bottom: 25px;
		padding: 0 20px;
	}

	#steps-section .step-item small {
		margin-bottom: 15px;
	}

	#steps-section .hero-counter {
		display: none;
	}

	#steps-section .owl-nav {
		margin-top: 0;
		position: absolute;
		top: 15%;
		left: 0;
		width: 100%;
		text-align: inherit;
	}

	#steps-section .owl-next {
		float: right;
	}

	#clients-section {
		padding: 25px 0;
	}

	#testimonials-section {
		padding: 50px 0;
	}

	footer ul {
		margin-bottom: 25px;
	}

	footer ul li {
		margin-right: 0;
		width: 33.3333%;
		margin-bottom: 15px;
	}

	footer .btn {
		margin: 0 auto;
	}

	#faq-section .search-box {
		margin-bottom: 25px;
	}

	#faq-section .search-box form {
		float: inherit;
		margin: 0 auto;
	}

	#contact-section .speak .speak-item {
		margin: 0 auto 25px;
		width: 210px;
	}

	#contact-section {
		padding: 60px 0;
	}

	#clients-section .desktop-clients {
		display: none;
	}

	#clients-section .mobile-clients {
		display: block;
	}

	#clients-section .mobile-clients img {
		width: 100%;
		padding: 20px 10px;
	}

	#test-section .test-item .image-box {
	    width: 45px;
	}

	#test-section .test-item .text-box {
	    padding-left: 15px;
	    width: 140px;
	    font-size: 16px;
	}

	#test-section .test-item .text-box a {
		font-size: 16px;
	}

	#our-partners-section .our-partner {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	#our-partners-section .our-partner .image-box {
		width: 100%;
		margin-right: 0;
		margin-bottom: 25px;
	}

	#our-partners-section .our-partner .text-box {
		width: 100%;
	}

	.section-header-2 {
		margin-bottom: 100px;
	}

	#devops-section .devops-item a {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: #1797C0;
		font-weight: 700;
		font-size: 20px;
		line-height: 23px;
		text-transform: uppercase;
		color: #FFFFFF;
		padding: 23px 5px;
		text-align: center;
	}

	#devops-section .devops-item {
		padding: 24px 33px 89px 22px;
	}
}





/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 576px) and (max-width: 767px) { 
	#hero-section .hero-right {
		padding: 30px 0 0 50px;
	}

	#hero-section .hero-right h1 {
		font-size: 50px;
	}

	#steps-section .owl-nav {
		top: 22%;
	}

	#steps-section:after {
	    height: 40%;
	}

	#test-section .test-item .image-box {
	    width: 45px;
	}

	#test-section .test-item .text-box {
	    padding-left: 15px;
	    width: 140px;
	    font-size: 16px;
	}

	#test-section .test-item .text-box a {
		font-size: 16px;
	}
}