@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900&display=swap');
html { scroll-behavior: smooth;}
.midd-area .main {max-width: 1170px;}

.banner-section {padding: 40px 0 140px;}
.banner-section .banner-img-wrap {float: right;}
.banner-section p {font-size: 16px;font-weight: 400;}
.banner-section .btn a {border-color: #ffda30;padding: 13px 40px;}
.banner-section .btn a:hover {border-color: #000;}
.banner-section .btn a span {background: #ffda30;}


.typesof-elements {display: block;width: 100%;padding: 100px 0 80px;text-align: center;background: #ffffff;}
ul.elements-types {display: flex;flex-wrap: wrap; justify-content: space-around;width: 100%;list-style-type: none;margin: 50px 0 0 0;padding: 0;}
ul.elements-types li {width: calc(100% / 3 - 23px); background: #ffffff;margin: 0 30px 25px 0;border: 2px solid #efefef;transition: all 0.5s;}
ul.elements-types li:nth-child(3n) {margin-right: 0;}
ul.elements-types li .element-icon {position: relative;overflow: hidden;padding-bottom: 67.15%;display: block;background: #FFDA30 ;}
ul.elements-types li .jpg-icon {position: relative;transition: all 0.5s;opacity: 1;}
ul.elements-types li .gif-icon {opacity: 0;position: relative;transition: all 0.5s; object-fit: contain !important;}
ul.elements-types li:hover .jpg-icon {opacity: 0;}
ul.elements-types li:hover .gif-icon {opacity: 1;}
ul.elements-types li .element-icon img {position: absolute;top: 0;left: 0;right: 0;bottom: 0;height: 100%;width: 100%;object-fit: cover;}
ul.elements-types .element-content {float: left; width: 100%; min-height: 150px; padding: 40px 10px; display: inline-block; position: relative;}
ul.elements-types h4 {color: #000000;font-size: 22px;line-height: 1.2;letter-spacing: -0.5px; font-family: 'Montserrat', sans-serif;font-weight: 600;margin-bottom: 0px;position: relative;top: 23px;transition: all 0.5s;}
ul.elements-types .element-content span.btn {color: #000000;font-size: 18px;line-height: 1.2;font-family: 'Montserrat', sans-serif;opacity: 0;font-weight: 500;transition: all 0.5s;position: relative;top: 18px;}
ul.elements-types .element-content span.btn img {vertical-align: middle;max-width: 18px;margin-left: 10px;}
ul.elements-types li:hover {box-shadow: 0px 0px 10px rgba(0,0,0,0.5);}
ul.elements-types li:hover {background: #f3f3f3;}
ul.elements-types li:hover h4 {position: relative;top: 0px;transition: all 0.5s;}
ul.elements-types li:hover .element-content span.btn {opacity: 1;display: block;}

.order-tagline-section .main {display: flex;justify-content: space-between;}
.order-tagline-section .tagline-title {display: inline-block;font-size: 20px;color: #000000;line-height: 1.2;font-family: 'Montserrat', sans-serif;font-weight: 400; text-align: left;}
.order-tagline-section .tagline-title span {display: block; vertical-align: middle; font-size: 20px;font-weight: bold; color: #000;line-height: 1.2;text-transform: uppercase;margin: 0;}
.order-tagline-section .btn a {padding: 15px 30px;}

.gamification {width: 100%;background: #ffffff;display: block;padding: 100px 0;text-align: center;}
.gamification h2 {color: #000000;line-height: 1.2;font-family: 'Montserrat', sans-serif; }
.gamification p {color: #000000;line-height: 1.5;font-family: 'Montserrat', sans-serif; font-size: 18px;font-weight: 400;max-width: 805px;margin: 0 auto;}
ul.gamification-types {width: 100%;list-style-type: none;margin: 0 auto;padding: 0;max-width: 650px;display: flex;justify-content: space-between;}
ul.gamification-types li {background: #ffffff;margin: 25px 30px 20px 0;border: 2px solid #efefef;transition: all 0.5s;width: 50%;}
ul.gamification-types li:last-child {margin-right: 0;}
ul.gamification-types li .element-icon {position: relative;object-fit: cover;overflow: hidden;padding-bottom: 119.48%;}
ul.gamification-types li .element-icon img {position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;}
ul.gamification-types .element-content {float: left; width: 100%; min-height: 150px; padding: 40px 10px; display: inline-block; position: relative;}

ul.gamification-types h4 {color: #000000;font-size: 22px;line-height: 1.2;font-family: 'Montserrat', sans-serif;font-weight: 600;margin-bottom: 0px;position: relative;top: 23px;transition: all 0.5s;}
ul.gamification-types .element-content span.btn {color: #000000;font-size: 18px;line-height: 1.2;font-family: 'Montserrat', sans-serif;opacity: 0;font-weight: 500;transition: all 0.5s;position: relative;top: 18px;}
ul.gamification-types .element-content span.btn img {vertical-align: middle;max-width: 18px;margin-left: 10px;}
ul.gamification-types li:hover {box-shadow: 0px 0px 10px rgba(0,0,0,0.5);}
ul.gamification-types li:hover {background: #f3f3f3;}
ul.gamification-types li:hover h4 {position: relative;top: 0px;transition: all 0.5s;}
ul.gamification-types li:hover .element-content span.btn {opacity: 1;display: block;}

@media (min-width: 1260px) 
{	
	h1 {font-size: 48px;}
}

@media (max-width: 1200px) 
{	
	.order-tagline-section .main {flex-wrap: wrap;}
	.order-tagline-section .tagline-title {width: 100%; text-align: center; padding: 0 0 30px 0;font-size: 24px;}
	.order-tagline-section .tagline-title span {font-size: 24px;}
	.order-tagline-section .btn {margin: 0 auto;}
	.order-tagline-section {padding: 50px 0;}
	.banner-section {padding: 30px 0 70px;}
	.typesof-elements {padding: 50px 0 30px;}
	ul.elements-types li .element-icon {padding-bottom: 62%;}
	ul.elements-types h4,ul.gamification-types h4 {font-size: 18px;top: 13px;}
	ul.elements-types .element-content,ul.gamification-types .element-content {min-height: 100px;padding: 30px 10px;}
	ul.elements-types li,ul.gamification-types li  { margin: 0 20px 20px 0;}
	.gamification,
	.get-in-touch-section {padding: 50px 0;}
	ul.elements-types .element-content span.btn,ul.gamification-types .element-content span.btn {font-size: 16px;}
	ul.gamification-types li .element-icon {padding-bottom: 110%;}
}

@media (max-width: 992px)  { 
	ul.elements-types h4,ul.gamification-types h4 {font-size: 15px;} 
	.order-tagline-section .tagline-title {font-size: 18px;}
}

@media (max-width: 767px)
{
	.banner-section .row-50 {flex-wrap: nowrap;margin: 0; display: table;}
	.banner-section .row-50 > div {width: 100%;padding: 0;}
	.banner-section {padding: 30px 0 15px;}
	.banner-section .banner-img-wrap {max-width: 100%;float: none;}
	.typesof-elements {padding: 30px 0 10px;}	
	ul.elements-types {margin: 30px 0 0 0;}
	ul.elements-types li {width: calc(100% / 2 - 10px);}
	ul.elements-types li:nth-child(2n) {margin-right: 0;}
	ul.gamification-types {margin: 30px auto 0;}
	ul.elements-types h4,ul.gamification-types h4 {font-size: 18px;}
	ul.elements-types .element-content span.btn,ul.gamification-types .element-content span.btn {font-size: 14px;}
	.help-section .row {justify-content: center;}
	.help-section {padding: 30px 0 20px;}
	.order-tagline-section { padding: 30px 0;}
	.order-tagline-section .tagline-title {padding: 0 0 20px 0;}
	.gamification, .get-in-touch-section { padding: 30px 0;}
	.gamification p {font-size: 16px;}
}

@media (max-width: 480px)
{
	h2 {font-size: 24px;}
	.typesof-elements h2 {margin: 10px 0;}
	.gamification p {padding: 20px 0;}
	ul.elements-types .element-content, ul.gamification-types .element-content {min-height: 0;}
	ul.elements-types h4, ul.gamification-types h4 {top: 12px;}
	ul.elements-types .element-content span.btn, ul.gamification-types .element-content span.btn {top: 5px;}
	ul.gamification-types {flex-wrap: wrap;}
	ul.elements-types li {width: calc(100% / 1 - 0px);}
	ul.elements-types li:nth-child(1n) {margin-right: 0;}
	.order-tagline-section .tagline-title,.order-tagline-section .tagline-title span {font-size: 18px;}
	.order-tagline-section .btn a { padding: 12px 30px;}
	h2 {margin: 0;}
	ul.elements-types li:hover h4,ul.gamification-types li:hover {top: -5px;}
	.typesof-elements { padding: 20px 0 0px;}
	ul.elements-types {margin: 20px 0 0 0;}
	ul.gamification-types {margin: 0 auto;flex-wrap: wrap;}
	ul.gamification-types li {width: 100%;margin: 0 0 15px 0;}
	ul.gamification-types li:last-child {margin: 0;}
	.order-tagline-section .tagline-title {font-size: 16px;}
	.gamification p {font-size: 14px;}
	ul.gamification-types li {width: 100%;margin: 0 0px 20px 0;}
}