@charset "UTF-8";
@font-face { font-family: avenir; src: url(fonts/355D11_3_0.eot); src: url(fonts/355D11_3_0.eot?#iefix) format("embedded-opentype"), url(fonts/355D11_3_0.woff2) format("woff2"), url(fonts/355D11_3_0.woff) format("woff"), url(fonts/355D11_3_0.ttf) format("truetype"); font-weight: 400; font-style: normal }
@font-face { font-family: avenir; src: url(fonts/355D11_1_0.eot); src: url(fonts/355D11_1_0.eot?#iefix) format("embedded-opentype"), url(fonts/355D11_1_0.woff2) format("woff2"), url(fonts/355D11_1_0.woff) format("woff"), url(fonts/355D11_1_0.ttf) format("truetype"); font-weight: 500; font-style: normal }
@font-face { font-family: avenir; src: url(fonts/355D11_0_0.eot); src: url(fonts/355D11_0_0.eot?#iefix) format("embedded-opentype"), url(fonts/355D11_0_0.woff2) format("woff2"), url(fonts/355D11_0_0.woff) format("woff"), url(fonts/355D11_0_0.ttf) format("truetype"); font-weight: 700; font-style: normal }

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
object{ outline: 0; }
strong, b, strong *, b * { font-weight: bold; }
em, i, em *, i * { font-style: normal !important; }
a:focus, input:focus{ outline-style: none; }
textarea{ outline: none; }
*{ box-sizing: border-box; hyphens: none; }
a{ color: inherit; text-decoration: none; }

body{ font-family: 'avenir', sans-serif; color: #fff; }
body.home{ background: #47187E; }
	.home .body-bg{ 
		background: 
		linear-gradient(114deg, transparent 70%,  #3F1574 70%),	  
		   linear-gradient(114deg, transparent 36%,  #47187E 36%),	 
		   linear-gradient(114deg, transparent 11.3%,  #3F1574 11.3%)
	}

.serif{ font-family: questa, georgia, serif; }

.container{ margin-left: auto; margin-right: auto; }
.container.big{ width: 1240px; }
.container.medium{ width: 1030px; }
.container.small{ width: 820px; }
.container.xsmall{ width: 610px; }

.caps-heading{ color: #F97044; font-size: 14px; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 2px; }
.main-title{ font-size: 48px; line-height: 1; font-weight: 700; line-height: 1; }
.big-title{ font-size: 67px; line-height: 1; font-weight: 700; }

.grid-line-v{ width: 3px; height: 18px; position: absolute; }
.grid-line-h{ height: 3px; width: 18px; position: absolute; }

header .container{ position: relative; padding: 70px 0 0 0; }
header .grid-line-v{ top: 0; right: calc(100% - 595px); background: #fff; }
header .inner{ display: flex; align-items: flex-end; position: relative; }
header nav{ margin-left: auto; }
	header nav a{ font-size: 18px; line-height: 1; font-weight: 700; margin-left: 60px; position: relative; z-index: 1; }
		header nav a:before{ content: ''; width: 0; height: 10px; background: #FF8F64; position: absolute; top: 10px; left: 6px; z-index: -1; transition: .3s; }
		header nav a:hover:before{ width: 100%; }

.field{ border: #DDD9E2 1px solid; font-family: 'avenir', sans-serif; font-size: 18px; padding: 15px; width: 100%; display: block; }
.label{ display: block; width: 100%; margin-bottom: 10px; }

.btn{ display: inline-block; font-size: 14px; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-family: 'avenir', sans-serif; padding: 20px 30px; border: 0; }
	.btn.orange{ background: #F97044; }

.hero{ padding: 140px 0 230px 0;  position: relative; }
	.hero .grid-line-h{ top: 221px; background: #fff; }
		.hero .grid-line-h.left{ left: 0; }
		.hero .grid-line-h.right{ right: 0; }
	.hero .inner{ display: grid; grid-template-columns: 700px 1fr; }
	.hero .primary{ font-size: 100px; line-height: 112px; font-weight: 700; }
		.hero .primary strong{ position: relative; z-index: 1; }
			.hero .primary strong:before{ content: ''; width: 85%; height: 38px; background: #FF8F64; position: absolute; bottom: -3px; left: 67px; z-index: -1; transition: .3s; }
	.hero .secondary{ font-size: 37px; line-height: 55px; font-weight: 100; padding-top: 42px; }

.service{ color: #1F1F1F; position: relative; }
	.service .main-title{ padding-top: 35px; }
	.service p{ padding-top: 20px; font-size: 23px; line-height: 36px; }
	.service .grid-line-h{ background: #F97044; z-index: 2; }

.form-left{ display: flex; }
	.from-left .inner{ background: #fff; width: calc(620px + 50%); }
	.from-left .container{ margin-left: auto; margin-right: 0px; }
	.from-left .grid{ display: grid; grid-template-columns: 495px 1fr; grid-gap: 120px; align-items: end; }

.full-width{ background: #F4F1F9; }
	.full-width .grid{ display: grid; grid-template-columns: 495px 1fr; grid-gap: 120px; align-items: end; }
	.full-width .text{ grid-column: 2; grid-row: 1; }
	.full-width img{ grid-column: 1; grid-row: 1; }

.from-right{ display: flex; }
	.from-right .inner{ background: #fff; width: calc(620px + 50%); margin-left: auto; padding: 80px 0 80px 105px; }
	.from-right .container{ margin: 0; }
	.from-right .grid{ display: grid; grid-template-columns: 495px 1fr; grid-gap: 120px; align-items: end; }

.service.branding .inner{ padding: 50px 105px 80px 0; position: relative; z-index: 1; }
	.service.branding .text{ position: relative; top: -10px; }
	.service.branding .grid-line-h{ left: 0; top: 83px; }

.service.development{ position: relative; top: -80px; padding: 160px 0 380px 0; }
	.service.development .grid-line-h{ right: 0; top: 168px; }

.service.copywriting{ position: relative; top: -385px; z-index: 1; margin-bottom: -250px; }
	.service.copywriting .grid-line-h{ left: 0; top: 83px; }

.we-do-more{ position: relative; }
	.we-do-more .grid-line-h{ background: #fff; top: 15px; }
	.we-do-more .grid-line-h.left{ left: 0; }
	.we-do-more .grid-line-h.right{ right: 0; }
	.we-do-more ul{ text-transform: uppercase; font-weight: 100; letter-spacing: 4px; font-size: 20px; margin-top: 60px; }
		.we-do-more li{ margin-top: 14px; position: relative; }
		.we-do-more li:before{ content: "\2013"; left: -30px; position: absolute; }


.contact{ display: flex; margin-top: 120px; color: #1F1F1F; position: relative; z-index: 1; }
	.contact .inner{ width: calc(410px + 50%); margin-left: auto; background: #fff; padding: 80px 105px; }
	.contact .container{ margin: 0; width: 770px; }
	.contact .main-title{ padding-top: 55px; }
	.contact form{ margin-top: 50px; }
	.contact .grid-halfs{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px 50px; margin-bottom: 30px; }
	.contact .submit{ margin-top: 40px; }

footer{ padding: 80px 0; background: #fff; padding-top: 480px; margin-top: -440px; }
footer .container{ display: flex; color: #999; border-top: #eee 1px solid; padding-top: 40px; }
	footer nav{ margin-left: auto; }
	footer nav a{ margin-left: 30px; color: #9158D8; }
	footer nav a:hover{ text-decoration: underline; }

@media(max-width: 1380px){
	.container.big{ width: 1080px; }
	.container.medium{ width: 880px; }
	.container.small{ width: 680px; }
	.container.xsmall{ width: 480px; }
	

	.hero .grid-line-h{ top: 213px; }
	.hero .inner{ grid-template-columns: 650px 1fr; }
	.hero .primary{ font-size: 90px; line-height: 100px; }
	.hero .secondary{ font-size: 30px; line-height: 48px; }

	.from-left .inner{ width: calc(540px + 50%); }
		.from-left .grid{ grid-template-columns: 435px 1fr; }
	.from-right .inner{ width: calc(540px + 50%); }
		.from-right .grid{ grid-template-columns: 425px 1fr; }
	.full-width .grid{ grid-template-columns: 335px 1fr; }

	.contact .inner{ width: calc(540px + 50%); }
		.contact .container{ width: 880px; }
}

@media(max-width: 1240px){
	header .grid-line-v{ display: none; }
	.hero .grid-line-h{ display: none; }
}

@media(max-width: 1180px){
	header .grid-line-v{ display: none; }
	.hero .grid-line-h{ display: none; }
	
	.container.big{ width: 960px; }
	.container.medium{ width: 840px; }
	.container.small{ width: 710px; }
	.container.xsmall{ width: 590px; }

	.hero{ padding: 120px 0 200px 0; }
		.hero .inner{ grid-template-columns: 570px 1fr; }

	.hero .primary{ font-size: 80px; }

	.from-left .inner, .from-right .inner{ width: calc(480px + 50%); }
	.from-right .inner{ padding: 60px 0 60px 60px; }
	.from-right .grid{ grid-template-columns: 390px 1fr; }
	.service img{ width: 330px; }

	.service.development{ top: -113px; }

	.service p{ font-size: 20px; line-height: 32px; }

	.contact .inner{ width: calc(480px + 50%); padding-left: 180px; padding-top: 90px; }
	.contact .container{  }

}

@media(max-width: 1180px){
	.container.big{ width: 880px; }
	.container.medium{ width: 740px; }
	.container.small{ width: 620px; }
	.container.xsmall{ width: 500px; }

	header nav a{ margin-left: 30px; }

	.hero{ padding: 100px 0 160px 0; }
	.hero .inner{ grid-template-columns: 500px 1fr; }
	.hero .primary{ font-size: 70px; line-height: 90px; }
	.hero .secondary{ font-size: 27px; line-height: 43px; padding-top: 30px; }

	.service .main-title{ padding-top: 25px; }
	.service p{ font-size: 18px; line-height: 30px; }

	.service.development{ padding-top: 200px; }

	.contact .inner{ padding-left: 60px; padding-top: 50px; }
		.contact .container{ width: 840px; }
		.contact .main-title{ padding-top: 30px; }

	.from-left .grid{ grid-template-columns: 315px 1fr; }

}

@media(max-width: 960px){
	.desk{ display: none; }
	.container.big{ width: 740px; }
	.container.medium{ width: 740px; }
	.container.small{ width: 740px; }
	.contact .container{ width: 740px; }
	.from-left .inner, .from-right .inner, .contact .inner{ width: 100%; }
	.from-left .inner .container, .from-right .inner .container, .contact .inner .container{ margin: auto; }
	.grid-line-h{ display: none; }
	.contact .inner{ padding: 60px; }
	.contact .container{ width: 740px; margin: auto; }

	header h1 img{ width: 160px; }
	header nav a{ font-size: 16px; margin-left: 36px; }

	.hero .inner{ grid-template-columns: 435px 1fr; }
	.hero .primary{ font-size: 60px; line-height: 76px; }
	.hero .secondary{ font-size: 22px; line-height: 36px; padding-top: 28px; }

	.main-title{ font-size: 37px; }
	.caps-heading{ font-size: 12px; }
	.big-title{ font-size: 60px; }

	.service.copywriting{ top: -380px; }

	.full-width .text{ grid-column: 1; grid-row: 1; }
	.full-width img{ grid-column: 2; grid-row: 1; }

	.we-do-more ul{ font-size: 16px; margin-top: 30px; }

	.service.development{ top: 0; padding: 30px 0; margin: 0; }

	.service.copywriting{ margin: 0; top: 0; }

	.we-do-more{ padding: 30px 0; }
		.we-do-more .big-title{ font-size: 37px; }
		.we-do-more ul{ margin-top: 20px; }
		.we-do-more li{ font-size: 12px; padding-left: 20px; letter-spacing: 2px; }
		.we-do-more li:before{ left: 0; }

	.contact{ margin-top: 0; }
	.contact .inner{ padding: 30px 0; }

}

@media(min-width: 830px){
	.mob{ display: none; }
}

@media(max-width: 830px){

	header nav{ display: none; }
	header .inner{ padding: 30px 40px; }
	header .container{ padding: 0; }
	.hero .inner{ grid-template-columns: 1fr; }
	.container{ width: auto !important; padding: 30px 40px; }

	.hero{ padding: 0 0 70px 0; }

	.hero .primary strong:before{ left: 47px; height: 30px; }

	.service .inner{ padding: 30px 0 !important; }
	.service .grid{ display: block; }

	.caps-heading{ font-size: 10px; }
	.main-title{ font-size: 30px; padding-top: 0; }

	.service .main-title{ padding-top: 15px; }
	.service p{ font-size: 15px; line-height: 22px; overflow: hidden; }
	.service p img{ float: right; width: 30% !important; margin-left: 25px; margin-bottom: 5px; position: relative; }
	
	.branding p img{ top: -13px; }
	.development p img{ top: -10px; }
	.copywriting p img{ top: -5px; }

	.label{ font-size: 14px; }
	.field{ font-size: 14px; padding: 10px; }

	.btn{ font-size: 12px; padding: 15px 20px; }

	.contact .grid-halfs{ grid-template-columns: 1fr; }

	footer{ font-size: 11px; }
		footer nav a{ margin-left: 10px; }
}