.color-primary{background:#00b04e;}.color-secondary{background:#e26f66;}.color-section{color:white;}.color-section p{color:white;}.light-section{background:#efefef;}.flex-space{display:flex;justify-content:space-between;align-items:center;background-color:#fff;}.flex-center{display:flex;justify-content:center;align-items:center;}.center-ie{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}@media screen and (max-width: 767px) {.center-ie{width:100%;}}.flex-end{display:flex;justify-content:flex-end;align-items:center;}.full-width{width:100%;}.full-width::before{display:table;content:" ";clear:both;}.full-width::after{display:table;content:" ";clear:both;}ul{list-style-type:none;padding-left:0px;}body{overflow-x:hidden;font-family:"Lato","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;}h3{font-size:3rem;}h4{font-size:2rem;padding-top:35px;}@media screen and (max-width: 991px) {h4{padding-top:25px;}}a{transition:all 0.5s;color:#333;}a:focus{text-decoration:none;color:inherit;outline:none;}a:hover{text-decoration:none;color:#e26f66;}a:active{text-decoration:none;}.social-icons li{margin:7px;}@media screen and (max-width: 991px) {li[class|=col]{margin-top:35px;}}section,footer{text-align:center;padding-top:50px;padding-bottom:50px;}section h3{padding-bottom:25px;}p{font-size:1.7rem;line-height:2;color:#555;}.button{display:inline-block;padding:15px 20px;border-radius:15px;margin-top:25px;outline:none;text-decoration:none;color:#333;cursor:pointer;text-transform:uppercase;}.btn-white{color:white;background:none;border:2px solid white;transition:all 0.5s;}.btn-white:hover{border:2px solid #e26f66;}.color-secondary .btn-white:hover{border-color:#013c59;color:#013c59;}header{height:800px;width:97vw;background:url("../images/banner.jpg") center/cover no-repeat;}header::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;height:800px;width:100vw;opacity:0.2;}header .descr{position:relative;top:50%;transform:translate(0,-50%);color:white;text-align:left;}header h2{font-size:3rem;line-height:2;font-weight:300;}header h1{margin-top:0px;margin-bottom:0px;}header .company-logo{height:100%;max-height:75px;max-width:100%;}.navigation{position:fixed;top:0;left:0;right:0;z-index:100;transition:all 0.5s;margin-right:0;margin-left:0;}nav{padding-top:15px;padding-bottom:15px;position:relative;}nav::before{display:block;content:"";width:calc(100% - 30px);height:1px;position:absolute;bottom:0;background:#00b04e;}.scroll-nav nav::before{display:none;}nav ul{margin-bottom:0px;}nav ul li{float:left;padding:0 25px;}nav ul li:last-child{padding-right:0;}nav ul a{color:#fff;text-decoration:none;position:relative;transition:all 0.5s;}nav ul a.active-link::before{content:"";display:block;width:100%;height:5px;background:white;position:absolute;top:-15px;left:50%;transform:translate(-50%,0);}nav ul a:visited{text-decoration:none;color:#00b04e;}nav ul a:hover{color:#fff;}nav ul a:focus{color:white;text-decoration:none;outline:none;}.home-page{display:inline-block;align-items:center;}.scroll-nav{background:rgba(1,60,89,0.7);}.icon{display:none;text-align:right;text-decoration:none;cursor:pointer;background:url("../images/nav.png") center no-repeat;transition:background 0.5s;height:24px;}.icon.cancel{background:url("../images/cancel.png") center no-repeat;margin-top:25.5px;}.align-top{align-items:flex-start;}@media screen and (max-width: 991px) {nav ul li{max-width:100%;width:0px;visibility:hidden;opacity:0;padding:0;}nav ul li.visible-nav{float:none;width:100%;visibility:visible;opacity:1;text-align:right;padding:15px;}.icon{display:block;visibility:visible;opacity:1;}}.laptop-bg{height:400px;background:url("../images/laptop.jpg") top center/cover;}@media screen and (max-width: 1200px) {.laptop-bg{background:url("../images/laptop-1200.jpg") top center/cover;}}@media screen and (max-width: 767px) {.laptop-bg{background:url("../images/laptop-767.jpg") top center/cover;}}@media screen and (max-width: 400px) {.laptop-bg{background:url("../images/laptop-400.jpg") top center/cover;}}.pie-charts{list-style-type:none;padding-top:25px;}.pie-charts svg{vertical-align:middle;width:100px;height:100px;transform:rotate(-90deg);}.pie-charts .pie-ring{stroke-width:10px;stroke:#ddd;fill:transparent;}.pie-charts .pie-segment{stroke-width:10px;stroke:#e26f66;fill:transparent;stroke-dasharray:0,251.3px;transition:all 1s;}#skill1{stroke-dasharray:80px,251.3px;}#skill2{stroke-dasharray:125.7px,251.3px;}#skill3{stroke-dasharray:226px,251.3px;}#skill4{stroke-dasharray:165px,251.3px;}.color-light{background:#f3f3f3;}.team-bg{height:400px;background:url("../images/team-full.jpg") bottom center no-repeat;}.person{padding-top:25px;}.person h4{color:#013c59;text-transform:uppercase;font-weight:600;}@media screen and (min-width: 992px) {.team-right-col{padding-right:75px;}.team-bg{background:url("../images/team.jpg") top right no-repeat;}}@media screen and (max-width: 991px) {.team.flex-space{display:block}}@media screen and (max-width: 991px) {#members{padding-top:0;}}.testimonial{border:1px solid rgba(1,60,89,0.5);border-radius:5px;padding:30px;margin:15px 0;}.testimonial-person{text-align:right;background:rgba(1,60,89,0.1);margin:-30px;margin-top:0;padding:30px;}.testimonial-person h4,.testimonial-person h5{margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;}.testimonial p{padding-bottom:30px;margin-bottom:0;}.testimonial-photo{display:inline-block;float:left;width:75px;height:75px;overflow:hidden;border-radius:100%;}.testimonial-photo img{width:100%;}@media screen and (min-width: 992px) {.testimonial{margin:15px;width:calc(100%/3 - 30px);}}@media screen and (max-width: 991px) {.testimonial{max-width:500px;margin:15px auto;}}.portfolio-project img{width:100%;}.portfolio-project{padding:0;position:relative;}.project-description{position:absolute;left:0;top:0;opacity:0;height:100%;width:100%;transition:all 0.5s;flex-direction:column;}.project-description .center-ie,.project-description-grid .center-ie{width:100%;}.project-description p,.project-description-grid p{color:white;padding:0 10px;line-height:1.2;}.project-description span,.project-description-grid span{display:block;font-size:2rem;font-weight:700;padding-bottom:10px;}.project-description:hover{opacity:0.9;}.projects-grid img{width:100%;}.project-grid{position:relative;overflow:hidden;padding:0;margin:15px;width:calc(33.33333333% - 30px);}.project-description-grid{width:100%;height:100%;padding:0 15px;flex-direction:column;position:absolute;top:0;left:-100%;opacity:0;}.project-description-grid.description-visible{animation:project-description 1s cubic-bezier(0.1,0.65,0.21,0.97) forwards;}@keyframes project-description{from{left:-100%;opacity:0;}to{left:0;opacity:0.9;}}@media screen and (max-width: 991px) {.project-grid{width:calc(50% - 30px);}}@media screen and (max-width: 767px) {.project-grid{width:calc(100% - 30px);}.project-description-grid{padding:0;}}.about-me-photo{width:100%;}#about-me{text-align:left;}.about-me-info h4{margin:0;padding:0;}.about-me-info{color:white;padding:35px 15px;margin:0;}.about-additional h5::before{content:url('../images/plus.svg');height:25px;width:25px;padding-right:15px;vertical-align:-25%;}.about-additional .about-visible h5::before{content:url('../images/minus.svg');}.about-additional h5{display:inline-block;margin-left:40px;text-indent:-40px;cursor:pointer;}.about-additional p,.about-additional .tools{font-size:1.4rem;opacity:0;display:none;max-height:0;transition:all 0.5s;}.about-additional p.about-visible{opacity:1;display:block;max-height:500px;}.about-additional .tools.about-visible{display:flex;opacity:1;max-height:500px;}.social-icons{margin-bottom:0;}@media screen and (max-width: 991px) {#about-me .col-md-7{text-align:center;}}@media screen and (max-width: 769px) {#about-me .social-icons{justify-content:flex-start;}.about-me-info{display:block;}}#slider{padding-top:0;}.slider li{position:relative;}.slider .button{margin-top:0;}.btn-color{color:white;border:2px solid #e26f66;transition:all 0.5s;margin-right:15px;}.btn-color:focus{color:white;}.btn-color:hover{color:white;background:#e05040;border:2px solid #e05040;}.btn-color-border{color:#013c59;background:none;border:2px solid #013c59;transition:all 0.5s;}.btn-color-border:hover{color:white;background:#013c59;border:2px solid #013c59;}.buttons-set{position:absolute;top:50%;left:40%;width:50%;transform:translateY(-50%);}.carousel{position:relative;overflow:hidden;max-height:80%;margin-left:-15px;margin-right:-15px;}.slide{position:absolute;width:100%;height:100%;overflow:hidden;transition:all 0.5s ease-in-out;display:flex;justify-content:center;}.slide-img{width:100%;height:100%;overflow:hidden;}.slide-img img{max-width:100%;}.slide:first-of-type{left:0;}.slide:nth-of-type(2){left:100%;}.slide:nth-of-type(3){left:200%;}.indicators{margin:45px 0 5px;}.indicators li{display:inline-block;width:8px;height:8px;border:1px solid #013c59;border-radius:50%;margin:1px;cursor:pointer;}.indicators .current{background:#013c59;width:10px;height:10px;}.platform .indicators li,.opinions .indicators li{border:1px solid #2f3d4f;}.platform .indicators .current,.opinions .indicators .current{background:#2f3d4f;}.arrow{position:absolute;z-index:10;height:100%;width:50px;top:0;cursor:pointer;opacity:0.3;}.arrow:hover{opacity:0.5;}.arrow-left{left:50px;background:url("../images/left.svg") no-repeat center;}.arrow-right{right:50px;background:url("../images/right.svg") no-repeat center;}@media screen and (max-width: 767px) {.arrow-left{left:0px;}.arrow-right{right:0px;}.buttons-set{top:50%;left:50%;width:90%;transform:translate(-50%,-50%);}}@media screen and (max-width: 450px) {.buttons-set h3{font-size:2rem;padding-bottom:15px;margin-bottom:0;}.buttons-set .button{font-size:1.2rem;margin-right:5px;padding:10px;}}.cta-row{display:flex;align-items:center;justify-content:center;}.cta-row p{display:inline-block;max-width:75%;margin:0 25px;}.cta-row .button{margin:0 25px;}@media screen and (max-width: 767px) {.cta-row{display:block;}.cta-row .button{margin:25px;}.cta-row p{max-width:100%;}}.slider-box{width:100%;overflow:hidden;}.css-slider{display:flex;width:133%;position:relative;top:0;left:0;margin-top:30px;animation:15s slider infinite;}.css-slider li{box-sizing:border-box;width:33.33333%;height:75px;}.css-slider img{max-width:70%;max-height:100%;}@keyframes slider{0%{left:0%;}25%{left:0%}50%{left:-33%}75%{left:-33%}100%{left:0;}}@keyframes slider-50{0%{left:0%;}16.67% {left: 0%}
	33.33% {left: -50%}
	50% {left: -50%}
	66.67% {left: -100%}
	83.34% {left: -100%}
	100% { left: 0;}
}

@media screen and (max-width: 450px) {
	.css-slider {
		width: 200%;
		animation: 20s slider-50 infinite;
	}
	.css-slider li {
		width: 50%;
	}
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 14 - ABOUT-US */
/*-------------------------------------------------------------------------------------------------------------------------------*/

.our-skills li {
	width: 100%;
	height: 40px;
	background: #efefef;
	margin: 15px 0;
	color: white;
	line-height: 40px;
	text-align: left;
	text-indent: 20px;
}

.our-skills li::before {
	content: "";
	display: block;
	background: #e26f66; /* Secondary color */
	height: 40px;
	width: 0%;
	transition: width 1s;
}
/* You can change skill name (as content) and skill percentage (as width) for charts in section About us */
#our-skill1::before {
	content: "Design";
	width: 80%;
}

#our-skill2::before {
	content: "UX/UI";
	width: 90%;
}

#our-skill3::before {
	content: "Copywriting";
	width: 75%;
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 15 - PARALLAX */
/*-------------------------------------------------------------------------------------------------------------------------------*/

#parallax {
	background: linear-gradient(rgba(1, 60, 89, 0.4), rgba(1, 60, 89, 0.4)), url("images/banner.jpg") no-repeat fixed center;
	background-size: cover;
	position: relative;
}

#parallax .container {
	margin: 75px auto;
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 16 - COUNTERS */
/*-------------------------------------------------------------------------------------------------------------------------------*/

#counters {
	height: 500px;
	max-height: 75%;
	background: linear-gradient(rgba(1, 60, 89, 0.4), rgba(1, 60, 89, 0.4)), url("../images/parallax-2.jpg") no-repeat fixed center;
	background-size: cover;
	position: relative;
}

.number {
	font-size: 4rem;
	font-weight: 700;
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 17 - CONTACT */
/*-------------------------------------------------------------------------------------------------------------------------------*/

#contact h4 {
	padding-top: 0;
}

#contact ul li {
	padding: 10px 0;
	font-size: 1.7rem;
}
#contact ul li > * {
	
}

#contact form .form-field {
	padding: 10px 20px;
	border: 1px solid #013c59; /* Primary color */
	box-sizing: border-box;
	width: 100%;
	outline: none;
	border-bottom: none;
}

#contact form > *:first-child {
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}

#contact form .form-field.last {
	border-bottom: 1px solid #013c59; /* Primary color */
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

#contact form .button {
	float: right;
	margin-right: 0;
}

#contact form .button:hover {
	background: #e05040;
}

.map {
	margin-top: 50px;
	height: 300px;
	max-height: 50%;
	width: 100%;
	filter: contrast(130%) grayscale(90%);
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 18 - APP */
/*-------------------------------------------------------------------------------------------------------------------------------*/

#app {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding-left: 0;
	padding-right: 0;
	position: relative;
	margin-top: 50px;
}

#app img {
	width: 100%;
	max-width: 650px; 
}

.app {
	position: absolute;
	right: 0;
	bottom: 0;
}

@media screen and (max-width: 991px) {
	#app {
		padding-bottom: 0;
		margin-top: 0px;
	}

	.app {
		position: relative;
	}
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 19 - PRICING */
/*-------------------------------------------------------------------------------------------------------------------------------*/

#pricing {
	background: url("../images/parallax-3.jpg") no-repeat fixed center;
	background-size: cover;
	position: relative;
}

.pricing {
	border: 1px solid #013c59; /* Primary color */
	background: white;
	border-radius: 15px;
	padding: 0;
	font-size: 1.7rem;
	margin: 0 15px;
	width: calc((100% - 120px) / 4);
	float: left;
	transition: all 0.5s;
}

.pricing h4 {
	padding-top: 0;
}

.pricing li {
	padding: 15px;
}

.pricing li:not(:last-child) {
	border-bottom: 1px solid #013c59; /* Primary color */
}

.pricing-price {
	background: #f8f8f8;
}

.pricing-price .price {
	color: #e26f66; /* Secondary color */
	font-size: 4rem;
	font-weight: 700;
}

.pricing .button {
	margin: 0;
	text-transform: none;
	font-size: 1.4rem;
}

.pricing.best-option {
	border: 1px solid #e26f66; /* Secondary color */
}

.pricing.best-option li:not(:last-child) {
	border-bottom: 1px solid #e26f66; /* Secondary color */
}

.pricing.best-option .pricing-name {
	color: white;
	border-color: #e26f66; /* Secondary color */
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}

.price sup {
	font-size: 2.5rem;
	top: -2rem;
}

.time {
	position: relative;
    left: -1.5rem;
}

.currency {
	position: relative;
	top: -1.2rem;
    font-size: 2.2rem;
}

@media screen and (max-width: 991px) {
	.pricing {
		width: 100%;
		max-width: 500px;
		margin: 20px auto;
		float: none;
	}
}

/*pricing2 */

.pricing-row {
	background: white;
	border: 1px solid #013c59; /* Primary color */
	padding: 0;
	font-size: 1.7rem;
	transition: all 0.5s;
}

.pricing-row:not(:last-child) {
	border-right: none;
}

.pricing-row h4 {
	padding-top: 0;
}

.pricing-row li {
	padding: 15px;
}

.pricing-row.best-option {
	border-right: 1px solid #013c59; /* Primary color */
	position: relative;
    margin: -15px -10px;
    padding: 14px 0; /* padding top/bottom = - margin-top - border-top */
    box-shadow: 0 0 10px 8px rgba(0, 0, 0, 0.08);
	z-index: 10;
}

.pricing-row.best-option h4 {
	color: #e26f66; /* Secondary color */
}

.pricing-row .button {
	margin: 0;
	text-transform: none;
	font-size: 1.4rem;
}

.pricing-row:hover, .pricing:hover {
	background: #f8f8f8;
}

@media screen and (max-width: 991px) {
	.pricing-row {
		width: 100%;
		max-width: 500px;
		margin: 0px auto;
		margin-bottom: 0;
	}
	
	.pricing-row.best-option {
		max-width: 520px;
		margin: -15px auto;
	}
	
	ul.pricing-row:not(:last-child) {
		border-right: 1px solid #013c59; /* Primary color */
	}
	
	ul:first-of-type.pricing-row {
		border-bottom: none;
	}
	
	.pricing-row.before-best-option {
		padding-bottom: 15px;
	}
	
	.pricing-row.best-option ~ .pricing-row {
		padding-top: 15px;
	}
}

@media screen and (max-width: 580px) {
	.pricing-row.best-option {
		max-width: none;
		width: auto;
		margin: -15px -10px;
	}
}

/*short-pricing */
#short-pricing .pricing-row {
	border-bottom: 1px solid #013c59; /* Primary color */
}

#short-pricing .pricing-row li:nth-child(2n) {
	background: #f8f8f8;
}

#short-pricing div.col-md-8 {
	float: right;
}

#short-pricing .pricing-row.best-option {
	margin: 0;
	padding: 0;
}

@media screen and (max-width: 991px) {
	#short-pricing div.col-md-8 {
		float: none;
		padding-bottom: 25px;
	}
	
	#short-pricing .pricing-row.best-option {
		margin: 0 auto;
	}
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 20 - OFFER */
/*-------------------------------------------------------------------------------------------------------------------------------*/

.offer {
	background: #efefef;
	padding:15px;
	font-size: 1.7rem;
	margin: 0 15px;
	width: calc((100% - 120px) / 4);
	float: left;
	transition: all 0.5s;
}

.offer:hover {
	background: #f8f8f8;
}

.offer h4 {
	padding-top: 15px;
}

.offer img {
	background: white;
	border-radius: 50px;
	width: 50px;;
}

@media screen and (max-width: 991px) {
	.offer {
		width: 100%;
		max-width: 500px;
		margin: 20px auto;
		float: none;
	}
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 21 - OFFER-TABS */
/*-------------------------------------------------------------------------------------------------------------------------------*/

.offer-tabs {
	position: relative;
}

.offer-tabs li {
	position: absolute;
}

.offer-tab {
	position: absolute;
	width:25%;
	height: 40px;
	line-height: 40px;
	background: #efefef;
	padding-top: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	z-index: 10;
	transition: all 0.5s;
}

.offer-tab:hover {
	background: #f8f8f8;
}

.offer-tab:not(:last-child) {
	border-right: 2px solid white;
}

.offer-tabs li:nth-child(1) .offer-tab {
	left: 0;
}

.offer-tabs li:nth-child(2) .offer-tab {
	left: 25%;
}

.offer-tabs li:nth-child(3) .offer-tab {
	left: 50%;
}

.offer-tabs li:nth-child(4) .offer-tab {
	left: 75%;
}

.offer-tabs p {
	padding-top: 60px; /*height of .offer-tab plus additional space */
	opacity: 0;
	height: 0;
}

.offer-tabs li.active p {
	opacity: 1;
	height: auto;
	transition: all 0.5s;
}

.offer-tabs li.active .offer-tab {
	background: #013c59; /* Primary color */
	color: white;
}

@media screen and (max-width: 991px) {
	.offer-tabs {
		margin-top: 50px;
	}
}

@media screen and (max-width: 767px) {
	.offer-tabs li {
		position: relative;
	}
	
	.offer-tab {
		position: relative;
		width: 100%;
	}
	
	.offer-tab:not(:last-child) {
		border-right: none;
	}
	
	.offer-tabs li:nth-child(n) .offer-tab {
		left: 0;
	}
	
	.offer-tabs p {
		padding-top: 0px; /*height of .offer-tab plus additional space */
	}
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 22 - FOOTER */
/*-------------------------------------------------------------------------------------------------------------------------------*/

footer .container > * {
	margin-bottom: 0;
}