@charset "UTF-8";
html {
	font-family: sans-serif;
	line-height: 1.15;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%
}

body {
	margin: 0;
	overflow: scroll;
}

body.preloader-site {
    overflow: hidden;
}

.preloader-wrapper {
	height: 100%;
	width: 100%;
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999999;
}

.preloader-wrapper .preloader {
	justify-content: center;
    align-items: center;
    display: flex;
    height: 100%;
    width: 100%;
}
.text{
	font-weight:400;
	font-size: 2rem;
	color: #2a2a2a;
	text-transform: uppercase;
	font-family: 'Gotham Rounded',sans-serif;
}
.dud{color:#757575}

header,
section {
	display: block
}

h1 {
	font-size: 2em;
	margin: .67em 0
}

main {
	display: block
}

a {
	background-color: transparent;
	-webkit-text-decoration-skip: objects
}

img {
	border-style: none
}

svg:not(:root) {
	overflow: hidden
}

input {
	font-family: sans-serif;
	font-size: 100%;
	line-height: 1.15;
	margin: 0
}

input {
	overflow: visible
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

canvas {
	display: inline-block
}

html {
	box-sizing: border-box;
	font-size: 100%
}

*,
::after,
::before {
	box-sizing: inherit
}

body {
	margin: 0;
	padding: 0;
	background: #fff;
	font-family: "Work Sans", sans-serif;
	font-weight: 300;
	line-height: 1.6;
	color: #222;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

img {
	display: inline-block;
	vertical-align: middle;
	max-width: 100%;
	height: auto;
	-ms-interpolation-mode: bicubic
}

input {
	font-family: inherit
}

.row {
	max-width: 75rem;
	margin-right: auto;
	margin-left: auto;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap
}

.columns {
	-webkit-flex: 1 1 0px;
	-ms-flex: 1 1 0px;
	flex: 1 1 0px;
	padding-right: 1rem;
	padding-left: 1rem;
	min-width: 0
}

@media print,
screen and (min-width:48em) {
	.columns {
		padding-right: 1rem;
		padding-left: 1rem
	}
}

@media print,
screen and (min-width:64em) {
	.large-5 {
		-webkit-flex: 0 0 41.66667%;
		-ms-flex: 0 0 41.66667%;
		flex: 0 0 41.66667%;
		max-width: 41.66667%
	}
	.large-offset-4 {
		margin-left: 33.33333%
	}
	.large-7 {
		-webkit-flex: 0 0 58.33333%;
		-ms-flex: 0 0 58.33333%;
		flex: 0 0 58.33333%;
		max-width: 58.33333%
	}
	.large-offset-7 {
		margin-left: 58.33333%
	}
}

@media screen and (min-width:80em) {
	.xlarge-6 {
		-webkit-flex: 0 0 50%;
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%
	}
}

@media screen and (max-width:63.9375em) {
	.show-for-large {
		display: none!important
	}
}

body {
	color: #222;
	font-family: "Work Sans", sans-serif;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always
}

a {
	text-decoration: none;
	color: inherit
}

p {
	font-weight: 300;
	font-size: 1.125rem;
	color: rgba(50, 50, 50, .75);
	margin-top: -9px;
	margin-bottom: calc(3.5rem - 11px)
}

@media screen and (min-width:64em) {
	p {
		margin-top: -10px;
		font-size: 1.25rem;
		margin-bottom: calc(5rem - 10px)
	}
}

@media screen and (min-width:90em) {
	p {
		margin-top: -11px;
		font-size: 1.5rem;
		margin-bottom: calc(5rem - 12px)
	}
}

.lead h1 {
	color: #323232;
	font-size: 1.375rem;
	font-weight: 200;
	line-height: 1.3;
	margin-top: -8px;
	margin-bottom: -8px!important;
	font-family: "Work Sans", sans-serif
}

@media screen and (max-width:47.9375em) {
	.lead h1 {
		line-height: 1.45
	}
}

@media only screen and (min-width:80em) and (-webkit-min-device-pixel-ratio:1.25),
only screen and (min-width:80em) and (min--moz-device-pixel-ratio:1.25),
only screen and (min-width:80em) and (min-device-pixel-ratio:1.25),
only screen and (min-width:80em) and (-webkit-min-device-pixel-ratio:2.0833333333333335),
only screen and (min-width:80em) and (min-resolution:200dpi),
only screen and (min-width:80em) and (min-resolution:1.25dppx) {
	.lead h1 {
		font-family: "Work Sans Thin", sans-serif;
		font-weight: 400;
		-webkit-font-smoothing: subpixel-antialiased
	}
}

@media screen and (min-width:48em) {
	.lead h1 {
		font-size: 1.75rem;
		margin-top: -10px;
		margin-bottom: -10px!important
	}
}

@media screen and (min-width:64em) {
	.lead h1 {
		font-size: 2.125rem;
		margin-top: -12px;
		margin-bottom: -11px!important
	}
}

@media screen and (min-width:80em) {
	.lead h1 {
		font-size: 2.25rem;
		margin-top: -13px;
		margin-bottom: -12px!important
	}
}

@media screen and (min-width:90em) {
	.lead h1 {
		font-size: 2.375rem;
		margin-top: -14px;
		margin-bottom: -15px!important
	}
}

@media screen and (min-width:100em) {
	.lead h1 {
		font-size: 2.625rem;
		margin-top: -15px;
		margin-bottom: -16px!important
	}
}

.lead .round-button {
	margin-top: 2rem
}

@media screen and (min-width:64em) {
	.lead .round-button {
		margin-top: 3rem
	}
}

@media screen and (min-width:100em) {
	.lead .round-button {
		margin-top: 4rem
	}
}

.h1,
h1,
h2 {
	font-family: Cir, sans-serif;
	font-weight: 700;
	color: inherit;
	margin: 0;
	padding: 0
}

.h1,
h1 {
	font-size: 2rem;
	margin-top: -12px;
	margin-bottom: calc(4rem - 9px)
}

@media screen and (min-width:48em) {
	.h1,
	h1 {
		font-size: 2.25rem;
		margin-top: -16px;
		margin-bottom: calc(4rem - 15px)
	}
}

@media screen and (min-width:80em) {
	.h1,
	h1 {
		font-size: 2.625rem;
		margin-top: -18px;
		margin-bottom: calc(5rem - 18px)
	}
}

h2 {
	margin-top: -12px;
	margin-bottom: calc(2rem - 12px);
	font-size: 1.25rem;
	line-height: 1.3
}

@media screen and (min-width:48em) {
	h2 {
		margin-bottom: calc(2.5rem - 12px)
	}
}

@media screen and (min-width:64em) {
	h2 {
		font-size: 1.625rem
	}
}

@media screen and (min-width:80em) {
	h2 {
		font-size: 1.75rem
	}
}

.section-list {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-top: -2.5rem;
	margin-bottom: -2.2rem
}

@media screen and (max-width:47.9375em) {
	.section-list li a:not(.half) {
		margin-top: 2px;
		font-size: 1.25rem
	}
}

@media screen and (min-width:48em) {
	.section-list {
		margin-top: -2.2rem
	}
}

.section-list li {
	margin: 0;
	padding: 0;
	font-size: 1.125rem;
	border-bottom: 1px solid rgba(255, 255, 255, .1)
}

@media screen and (min-width:48em) {
	.section-list li {
		font-size: 1.25rem
	}
}

@media screen and (min-width:80em) {
	.section-list li {
		font-size: 1.5rem
	}
}

.section-list li a {
	color: inherit;
	width: 100%;
	display: block;
	position: relative;
	padding: 1.5rem 0 1.55rem 0;
	border-bottom: none;
	font-size: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

@media only screen and (min-width:80em) and (-webkit-min-device-pixel-ratio:1.25),
only screen and (min-width:80em) and (min--moz-device-pixel-ratio:1.25),
only screen and (min-width:80em) and (min-device-pixel-ratio:1.25),
only screen and (min-width:80em) and (-webkit-min-device-pixel-ratio:2.0833333333333335),
only screen and (min-width:80em) and (min-resolution:200dpi),
only screen and (min-width:80em) and (min-resolution:1.25dppx) {
	.section-list li a {
		font-weight: 200
	}
}

@media screen and (min-width:48em) {
	.section-list li a {
		padding: 1.5rem 8rem 1.55rem 0
	}
}

@media screen and (min-width:80em) {
	.section-list li a {
		padding: 1.5rem 8rem 1.55rem 0
	}
}

.section-list li a:after,
.section-list li a:before {
	color: rgba(255, 255, 255, .45);
	font-family: Cir, sans-serif;
	font-weight: 700;
	font-size: .75rem;
	height: 14px;
	width: 100%;
	display: block;
	margin-top: 4px;
	margin-bottom: 1px;
	line-height: 13px
}

@media screen and (min-width:48em) {
	.section-list li a:after,
	.section-list li a:before {
		margin-top: -6px;
		margin-bottom: 0;
		font-size: .875rem;
		position: absolute;
		right: 0;
		top: 50%;
		width: auto;
		display: inline-block
	}
}

.section-list li a:before {
	content: attr(data-content)
}

.section-list li a:after {
	content: attr(data-hover);
	color: #fff;
	-webkit-transform: translate3d(0, -15px, 0);
	transform: translate3d(0, -15px, 0);
	background: url(../../dist/assets/img/glyph-arrow-white.svg) right center no-repeat;
	padding-right: 25px;
	opacity: 0;
	display: none
}

@media screen and (min-width:48em) {
	.section-list li a:after {
		position: absolute;
		right: 0;
		top: 50%;
		width: auto;
		display: inline-block
	}
}

.loop-parallax {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto
}

@media screen and (max-width:47.9375em) {
	.loop-parallax {
		-webkit-transform: none!important;
		-ms-transform: none!important;
		transform: none!important
	}
}

.loop-parallax.top {
	opacity: 0;
	visibility: hidden
}

@media screen and (min-width:80em) {
	.loop-parallax.top {
		top: -77px
	}
}

.loop-parallax:after {
	content: "";
	width: 658px;
	height: 647px;
	/*background: url(../../dist/assets/img/byte-loop.svg) 0 0 no-repeat;*/
	background-size: 50%;
	position: absolute;
	top: -470px;
	left: 15%;
	margin-left: -500px;
	z-index: 0;
	opacity: .27;
	-webkit-transform: rotate(170deg);
	-ms-transform: rotate(170deg);
	transform: rotate(170deg)
}

@media screen and (min-width:48em) {
	.loop-parallax:after {
		background-size: 658px 647px;
		margin-left: -329px;
		left: 30%;
		top: -300px
	}
}

@media screen and (min-width:80em) {
	.loop-parallax:after {
		width: 857px;
		height: 722px;
		margin-left: 0;
		top: -302px;
		left: auto;
		right: 400px;
		background-size: 857px 722px
	}
}

@media screen and (min-width:100em) {
	.row {
		max-width: 82rem
	}
}

main {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	position: relative;
	padding-top: 9rem;
	z-index: 1
}

@media screen and (min-width:48em) {
	main {
		padding-top: 14rem
	}
}

@media screen and (min-width:64em) {
	main {
		padding-top: 15rem
	}
}

@media screen and (min-width:90em) {
	main {
		padding-top: 17rem
	}
}

@media screen and (min-width:100em) {
	main {
		padding-top: 20rem
	}
}

section {
	width: 100%;
	padding: 0 1rem;
	margin: 0 0 5rem 0
}

@media screen and (min-width:48em) {
	section {
		margin: 0 0 8rem 0;
		padding: 0 2rem
	}
}

@media screen and (min-width:64em) {
	section {
		padding: 0 2rem;
		margin: 0 0 10rem 0
	}
}

section.dark-blue {
	background-color: #00213b;
	color: #fff
}

section.offset {
	position: relative;
	padding: 6rem 1rem;
	opacity: 0;
	-webkit-transform: translate3d(0, 60px, 0);
	transform: translate3d(0, 60px, 0)
}

@media screen and (min-width:48em) {
	section.offset {
		-webkit-transform: translate3d(0, 120px, 0);
		transform: translate3d(0, 120px, 0);
		padding: 8rem 2rem
	}
}

@media screen and (min-width:64em) {
	section.offset {
		padding: 8rem 2rem
	}
}

@media screen and (min-width:80em) {
	section.offset {
		max-width: 75rem;
		margin-left: auto;
		margin-right: auto;
		background-color: transparent;
		position: relative;
		z-index: 2;
		padding: 0
	}
}

@media screen and (min-width:100em) {
	section.offset {
		max-width: 82rem
	}
}

section.offset .offset-content .row {
	position: relative;
	z-index: 1
}

@media screen and (min-width:80em) {
	section.offset .offset-content {
		position: relative;
		width: calc(50vw + 50%);
		padding: 10rem 0
	}
}

section.offset.dark-blue .offset-content {
	background-color: #00213b;
	color: #fff
}

section.offset.dark-blue h2 a {
	color: #fff
}

@media screen and (min-width:80em) {
	section.offset.right .offset-content {
		margin-right: calc(-50vw + 50%);
		right: -1rem
	}
	section.offset.right .offset-content .row {
		margin-left: -1rem
	}
	section.offset .offset-left {
		-webkit-transform: translateX(10rem);
		-ms-transform: translateX(10rem);
		transform: translateX(10rem)
	}
}

section.offset .loop-parallax {
	height: 100%;
	overflow: hidden;
	z-index: 0
}

section.offset .loop-parallax:after {
	-webkit-transform: rotate(185deg);
	-ms-transform: rotate(185deg);
	transform: rotate(185deg);
	opacity: 1;
	top: auto;
	right: -4rem;
	left: auto;
	bottom: -180px;
	background-size: 70%;
	width: 658px;
	height: 647px
}

@media screen and (min-width:48em) {
	section.offset .loop-parallax:after {
		background-size: 898px 757px;
		width: 898px;
		height: 757px;
		bottom: -400px;
		right: -5rem
	}
}

@media screen and (min-width:80em) {
	section.offset .loop-parallax:after {
		bottom: -375px;
		right: 2rem
	}
}

section.no-margin-bottom {
	margin-bottom: 0!important
}

section.no-margin-top {
	margin-top: 0!important
}

.smabiter {
	position: relative
}

.smabiter #byte-particles-white {
	position: absolute;
	top: -122px;
	left: -10px;
	-webkit-transform: scale(.35);
	-ms-transform: scale(.35);
	transform: scale(.35);
	opacity: .8
}

@media screen and (min-width:48em) {
	.smabiter #byte-particles-white {
		top: -117px;
		left: 10px;
		-webkit-transform: scale(.45);
		-ms-transform: scale(.45);
		transform: scale(.45)
	}
}

@media screen and (min-width:80em) {
	.smabiter #byte-particles-white {
		top: -114px;
		left: 30px;
		-webkit-transform: scale(.5);
		-ms-transform: scale(.5);
		transform: scale(.5)
	}
}

header#header {
	z-index: 999!important
}

header#header {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: 100%
}

header#header #logo {
	overflow: visible;
	position: fixed;
	top: 2rem;
	left: 2rem;
	color: #222
}

@media screen and (min-width:48em) {
	header#header #logo {
		top: 3rem;
		left: 3rem
	}
}

@media screen and (min-width:90em) {
	header#header #logo {
		top: 5rem;
		left: 5rem
	}
}

header#header #logo canvas {
	-webkit-transform: scale(.26);
	-ms-transform: scale(.26);
	transform: scale(.26);
	position: absolute;
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
	top: -139px;
	left: -142px;
	opacity: 0
}

@media screen and (min-width:48em) {
	header#header #logo canvas {
		-webkit-transform: scale(.28);
		-ms-transform: scale(.28);
		transform: scale(.28);
		top: -136px;
		left: -140px
	}
}

header#header #logo .logo-circle {
	fill: #ff5242;
	position: absolute;
	top: 3px;
	left: 0;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	height: 16px;
	width: 16px
}

@media screen and (min-width:48em) {
	header#header #logo .logo-circle {
		width: 19px;
		height: 19px;
		top: 4px
	}
}

header#header #logo .logo-letters {
	margin-left: 21px;
	width: 61px;
	height: 28px
}

@media screen and (min-width:48em) {
	header#header #logo .logo-letters {
		margin-left: 25px;
		width: 72px;
		height: 33px
	}
}

header#header #logo .logo-slogan-wrapper {
	width: 130px;
	height: 30px;
	position: absolute;
	top: 0;
	left: calc(100%);
	overflow: hidden;
	visibility: hidden
}

@media screen and (min-width:90em) {
	header#header #logo .logo-slogan-wrapper {
		visibility: visible
	}
}

header#header #logo .logo-slogan {
	width: 122px;
	height: 30px;
	position: absolute;
	top: 0;
	left: 8px;
	overflow: hidden
}

header#header #logo .logo-slogan:before {
	content: "";
	position: absolute;
	left: 0;
	background-color: #d9d9d9;
	width: 1px;
	z-index: 2;
	top: 50%;
	height: 0
}

@media screen and (min-width:90em) {
	header#header #logo .logo-slogan:before {
		top: 0;
		height: 100%
	}
}

header#header #logo .logo-slogan svg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 1px;
	-webkit-transform: translate3d(-115px, 0, 0);
	transform: translate3d(-115px, 0, 0);
	z-index: 1;
	fill: rgba(34, 34, 34, 0)
}

@media screen and (min-width:90em) {
	header#header #logo .logo-slogan svg {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		fill: #222
	}
}

header#header .header-contact {
	position: fixed;
	margin-right: 28px;
	margin-top: 5px;
	width: auto;
	display: block
}

@media screen and (max-width:47.9375em) {
	header#header .header-contact {
		top: auto;
		bottom: 2rem;
		right: 2rem;
		margin-right: 0;
		opacity: 0;
		visibility: hidden
	}
}

@media screen and (min-width:48em) {
	header#header .header-contact {
		top: 3rem;
		right: 3rem
	}
}

@media screen and (min-width:90em) {
	header#header .header-contact {
		top: 5rem;
		right: 5rem
	}
}

header#header .header-contact.hidden {
	opacity: 0!important;
	visibility: hidden!important
}

header#header .header-contact ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	color: #323232
}

header#header .header-contact ul li {
	float: left;
	margin: 0 1.9rem 0 0;
	padding: 0
}

@media screen and (max-width:47.9375em) {
	header#header .header-contact ul li {
		margin: 0 0 0 1.3rem
	}
}

header#header .header-contact ul li a {
	font-weight: 400;
	font-size: 1.125rem;
	display: block;
	height: 16px;
	line-height: 16px;
	color: inherit;
	position: relative
}

@media screen and (max-width:47.9375em) {
	header#header .header-contact ul li a {
		font-size: 1rem
	}
}

header#header .header-contact ul li a.phone {
	padding-left: 15px
}

header#header .header-contact ul li a.phone svg {
	position: absolute;
	top: 0;
	left: 0
}

header#header #nav-button {
	position: fixed;
	z-index: 3;
	margin-right: -15px;
	margin-top: -4px;
	top: 2rem;
	right: 2rem
}




.section-list li a {
    font-weight: 400;}
.icons{
    font-size: 80px;
    display: inline-block;
    padding-bottom: 32px;
    color: #ea7e31;
}
.pattern{
	position:absolute;
	z-index: -999 !important;
	overflow: hidden;
}

.patternpreload{
	position:absolute;
	overflow: hidden;
}

@media (min-width: 481px) and (max-width: 767px) {
.line_1{
	display: block;
}
  .pattern{
	display: none;
	}
  }

@media (min-width: 320px) and (max-width: 480px){
.line_1{
	display: block;
}
.pattern{
	display: none;
	}
}
  article.clients {
	float: left;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	width: 203px;
	margin-right: 15px;
	margin-bottom: 15px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	 border-radius: 3px;
}

article.clients * {
	vertical-align: middle;
}

article.clients span {
	display: inline-block;
	height: 100%;
	width: 1px;
}
ul[role="tablist"] {
    display: none;
}
.wizard .content{
   background: none;
    display: block;
    margin: 0em;
    min-height: 12em;
    overflow: hidden;
    position: relative;
    width: auto;
    border-radius: 0px;}
	
.wizard > .content > .body {
    float: left;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 37px 0px;
}
.wizard > .content > .body input {
border: none !important;
width: 99%}
.wizard > .content > .body input:focus, textarea {
outline: none !important;}

.wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active {
    background: none;
    color: #303030;
    display: block;
    padding: 0.5em 1em;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-family: 'circular_stdblack', sans-serif;
}

.wizard > .actions .disabled a, .wizard > .actions .disabled a:hover, .wizard > .actions .disabled a:active {
    background: none;
    color: #d4d4d4;
}

@media screen and (min-width:48em) {
	header#header #nav-button {
		margin-top: -1px;
		top: 3rem;
		right: 3rem
	}
}

@media screen and (min-width:90em) {
	header#header #nav-button {
		top: 5rem;
		right: 5rem
	}
}

header#header #nav-button .nav-icon svg {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}

header#header #nav-button .nav-icon svg path {
	fill: none;
	stroke-width: 1px;
	stroke: #323232;
	stroke-dashoffset: 0
}

header#header #nav-button .nav-icon svg path.bottom,
header#header #nav-button .nav-icon svg path.top {
	stroke-dasharray: 28px 82px
}

header#header #nav-button .nav-icon .middle {
	width: 28px;
	height: 1px;
	background-color: #323232;
	position: absolute;
	top: 14px;
	left: 0
}

header#header #nav-button .nav-icon::after,
header#header #nav-button .nav-icon::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%
}

.intro {
	width: 100%;
	position: relative;
	margin-bottom: 3rem
}

.intro .lead {
	opacity: 0;
	-webkit-transform: translate3d(0, 60px, 0);
	transform: translate3d(0, 60px, 0);
	margin-bottom: 2rem
}

@media screen and (min-width:48em) {
	.intro .lead {
		margin-bottom: 5rem
	}
}

@media screen and (min-width:90em) {
	.intro .lead {
		margin-bottom: 6rem
	}
}

@media screen and (min-width:100em) {
	.intro .lead {
		margin-bottom: 7rem
	}
}

@media screen and (max-width:47.9375em) {
	.intro .lead h1 {
		font-size: 1.625rem;
		line-height: 1.3
	}
}

@media screen and (min-width:48em) {
	.intro .lead h1 span.line {
		display: block
	}
}

.text-collage .lead h1 {
	line-height: 1.35
}

@media screen and (min-width:64em) {
	.text-collage .lead {
		position: absolute;
		z-index: 5
	}
}

@media screen and (min-width:90em) {
	.text-collage .lead {
		padding-top: 3rem
	}
}

@media screen and (max-width:47.9375em) {
	.text-collage .lead h1 {
		font-size: 1.375rem
	}
}

.image-collage {
	width: 100%
}

@media screen and (max-width:63.9375em) {
	.image-collage {
		width: auto;
		margin-left: -1rem;
		margin-right: -1rem;
		position: relative;
		margin-bottom: -10%;
		margin-top: 1rem;
		padding-bottom: 6rem
	}
}

@media screen and (max-width:47.9375em) {
	.image-collage {
		padding-bottom: 4rem
	}
}

.image-collage .image-collage-item {
	width: 100%;
	left: 0
}

@media screen and (max-width:63.9375em) {
	.image-collage .image-collage-item {
		display: none
	}
	.image-collage .image-collage-item .columns,
	.image-collage .image-collage-item .row {
		margin: 0;
		padding: 0
	}
}

.image-collage .image-collage-item .image-frame {
	-webkit-transform: translate3d(0, 120px, 0) scale(1.3);
	transform: translate3d(0, 120px, 0) scale(1.3);
	opacity: 0;
	border-radius: 30px;
	background-color: transparent
}

.image-collage .image-collage-item .image-frame img {
	opacity: 0
}

.image-collage .image-collage-item .image-frame:before {
	opacity: 0
}

.image-collage .image-collage-item .image-frame:after {
	content: "";
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0, -700px, 0) rotate(90deg);
	transform: translate3d(0, -700px, 0) rotate(90deg);
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: rgba(255, 82, 66, 0);
	z-index: 4;
	border-radius: 1000px
}

.image-collage .image-collage-item.front {
	position: absolute;
	z-index: 4
}

@media screen and (max-width:47.9375em) {
	.image-collage .image-collage-item.front {
		-webkit-transform: none!important;
		-ms-transform: none!important;
		transform: none!important
	}
}

@media screen and (max-width:63.9375em) {
	.image-collage .image-collage-item.front {
		left: auto;
		width: 100%;
		margin-left: calc(70% - 2rem);
		margin-top: 0;
		margin-bottom: -20%;
		position: relative
	}
}

@media screen and (min-width:64em) {
	.image-collage .image-collage-item.front .columns {
		padding-right: 5rem
	}
}

.image-collage .image-collage-item.front .image-frame {
	z-index: 4;
	overflow: hidden;
	bottom: auto
}

@media screen and (min-width:64em) {
	.image-collage .image-collage-item.front .image-frame {
		margin-top: -8rem;
		top: auto;
		bottom: 0
	}
}

.image-collage .image-collage-item.center {
	z-index: 3
}

@media screen and (max-width:63.9375em) {
	.image-collage .image-collage-item.center {
		margin-left: 2rem;
		width: 70%
	}
}

.image-collage .image-collage-item.center .columns {
	position: relative
}

@media screen and (min-width:64em) {
	.image-collage .image-collage-item.center {
		position: absolute
	}
}

.image-collage .image-collage-item.center .image-frame {
	z-index: 0;
	position: absolute
}

.image-collage .image-collage-item.center .image-frame:after {
	background-color: rgba(1, 99, 180, 0)
}

@media screen and (min-width:64em) {
	.image-collage .image-collage-item.center .image-frame {
		bottom: 100%;
		margin-bottom: -5rem;
		z-index: 3
	}
}

.image-collage .image-collage-item.back {
	margin-bottom: -6px;
	top: -50%
}

.image-collage .image-collage-item.back .image-frame {
	padding-bottom: 115%;
	z-index: 1
}

.round-button {
	height: 50px;
	position: relative;
	display: inline-block;
	margin: -2px 0 -2px 0;
	z-index: 5
}

@media screen and (min-width:48em) {
	.round-button {
		height: 68px
	}
}

.round-button .container {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap
}

.round-button span.title {
	color: #222;
	font-family: Cir, sans-serif;
	font-size: 1rem;
	height: 50px;
	line-height: 50px;
	position: relative;
	display: inline-block;
	z-index: 2
}

@media screen and (min-width:48em) {
	.round-button span.title {
		height: 68px;
		line-height: 68px
	}
}

@media screen and (min-width:64em) {
	.round-button span.title {
		font-size: 1.125rem
	}
}

.round-button svg {
	width: 62px;
	height: 50px;
	display: inline-block;
	position: relative;
	fill: transparent;
	z-index: 1;
	overflow: hidden;
	margin-left: -18px
}

@media screen and (min-width:48em) {
	.round-button svg {
		height: 68px;
		width: 80px
	}
}

.round-button svg g.dashed {
	stroke: rgba(0, 0, 0, .15);
	stroke-dasharray: 1px;
	stroke-width: 3px
}

.round-button svg g.arrow {
	fill: #0163b4;
	-webkit-transform: translateX(23px) translateY(27px);
	-ms-transform: translateX(23px) translateY(27px);
	transform: translateX(23px) translateY(27px)
}

form .response {
	font-size: .8125rem;
	margin-top: 14px;
	font-weight: 700;
	color: #ff5242;
	position: absolute
}

@media screen and (max-width:47.9375em) {
	form .response {
		font-size: .6875rem;
		margin-top: 7px
	}
}

.image-frame {
	width: 100%;
	padding-bottom: 66%;
	position: relative;
	z-index: 0;
	box-shadow: 0 2px 85px 0 rgba(0, 0, 0, .15);
	background-color: transparent;
	overflow: hidden
}

.image-frame:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	border: 3px solid #fff
}

@media screen and (min-width:48em) {
	.image-frame:before {
		border-width: 5px
	}
}

.image-frame.red {
	background-color: #ff5242
}

.image-frame.red:before {
	border-color: #ff5242
}

.image-frame.light-blue {
	background-color: #0163b4
}

.image-frame.light-blue:before {
	border-color: #0163b4
}

.image-frame img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.image-frame img {
	object-fit: cover
}

.lazyload {
	opacity: 0
}

/* Preloader Starts */
#preloader {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #fff;
			z-index: 99;/* makes sure it stays on top */
		}

		#status {
  			width: 200px;
    		height: 200px;
  			position: absolute;
  			left: 50%;
  			top: 50%;
  			background-image: url(../images/synclovis-loader.gif);
  			background-repeat: no-repeat;
  			background-position: center;
  			margin: -100px 0 0 -100px;
		}


blockquote p {
	margin-bottom: 0.5em;
    font-size: 1.75rem;
}

    
span.author {
    line-height: 0;
    font-size: 20px;
    padding-top: 4em !important;
}
span.author:before {
    background-color: #7cff26;
    content: "";
    display: inline-block;
    height: 2px;
    margin-right: 1em;
    position: relative;
    vertical-align: middle;
    width: 10%;
}

.clutch-widget{
	margin-top: 2em;
}

#footer{z-index: 0;}


form .input-container select{
    margin: 2rem 1rem;
    font-weight: 300;
    color: #323232;
    padding: 0rem 1rem;
    height: 50px;
    border: none;
    border-radius: 2px;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .08);
    background-color: #fff;
    outline: 0;
}

  .modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: rgba(0,0,0, .9);
  transition: opacity .25s ease;
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}

.modal-state {
  display: none;
}

.modal-state:checked + .modal {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.modal-state:checked + .modal .modal__inner {
  top: 0;
}

.modal__inner {
  transition: top .25s ease;
  position: absolute;
  top: -20%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 70%;
  margin: auto;
  overflow: auto;
  background: #fff;
  border-radius: 5px;
  padding: 1em 2em;
  height: 90%;
}

.modal__close {
  position: absolute;
  right: 1em;
  top: 1em;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
}

.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #ccc;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0;
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #aaa;
}

.modal__close:before {
  transform: rotate(-45deg);
}

.modal__header { 
    margin: 1em 0em;
    margin-top: 1em;
    margin-bottom: 2em;
    border-bottom: 1px solid #eb7e31;
}

.modal__header h4{
	color: #eb7e31;
    font-size: 1rem;
} 

.modal form label {
    font-weight: 300;
    font-size: 0.8rem;
    color: #eb7e31;
    width: 100%;
    display: block;
    margin: 0px 0 0.4rem 0;
}

p .alert{
	margin-top: 38px;
	margin-bottom: 0;
    font-size: 1rem;
}

.alert-success{color:green;}
.alert-success{color:red;}

@media screen and (max-width: 768px) {
	
  .modal__inner {
    width: 90%;
    height: 90%;
    box-sizing: border-box;
  }
}

@media screen and (min-width:48em) {
	.vertical-center{
		min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
		min-height: 100vh;
		display: flex;
		align-items: center
	}
}


/* Developer Center Starts */

section .sec-title{
	text-align: center;
	margin-bottom: 2em;
	text-transform: uppercase;
}
#logo .img{
	background: #ffffff;
	border-radius: 50px;
	padding-right: 17px;
}
.primary-btn{
	background: #F49E3B;
	color: white;
	padding: 1em 2em;
	border-radius: 8px;
}

.repo-box{
	position: relative;
	background: white;
	border: 1px solid lightgray;
	padding: 1em 1em;
	border-radius: 8px;
	margin-bottom: 2em;
}

.repo-box .tech-icon {
	width: 60px;
	margin: 0;
}

.repo-box .status{
	position: absolute;
	background: #865858;
	color: white;
	padding: .5em 3em;
	right: 0;
	top: 0;
	border-bottom-left-radius: 8px;
	border-top-right-radius: 8px;
}
span.status::before {
	content: "";
	width: 17px;
	height: 17px;
	border-radius: 1000px;
	overflow: hidden;
	position: absolute;
	top: 0.8rem;
	left: 1.4rem;
	background-color: #ffffff;
	border: 4px solid #48484894;
}
.repo-box p{
	font-size: 16px;
	margin-bottom: 1em;
}
.repo-box span.h1{
	font-size: 20px;
	display: block;
	margin: 0;
	padding: 1em 0em;
	font-family: "Work Sans", sans-serif;
	font-weight: 500;
}
.dev-intro{
	background: linear-gradient(125deg, #D68324, #F8D97A);
}

.text-center{
	height: 100vh;
	transform: translateY(40%);
	text-align: center;
}
.text-center h1,p{color: white;}
.dev-intro .lead{margin-bottom:2rem !important}
.text-center .lead>p{
	font-size: 1.5rem;
	color: white;
}
@media screen and (max-width: 47.9375em){
	.text-center .lead>p {
		font-size: 1rem !important;
		line-height: 1.3;
	}
}
.cli-btn{
	/*background: #ff5545;*/
	background: #000000a3;
	color: white;
	padding: 1em 2em;
	font-family: monospace;
	border-radius: 8px;
}
.partner{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.design-studio-wrapper h1{
	color:white;
	text-transform: uppercase;
	margin: 24px 0px;
	font-size: 3em;
	width: 80%;
	font-weight: 300;
}
.design-studio-wrapper p{color:white; margin: unset;}
.design-studio-wrapper .primary-btn{
	margin: 3em 0em;
	background: #d87708;
}
.blinking-cursor {
		font-weight: bolder;
		color: #ffffff;
		-webkit-animation: 1s blink step-end infinite;
		-moz-animation: 1s blink step-end infinite;
		-ms-animation: 1s blink step-end infinite;
	-o-animation: 1s blink step-end infinite;
	animation: 1s blink step-end infinite;
}

@keyframes "blink" {
		from, to {color: transparent;}
	50% {color: white;}
}

@-moz-keyframes blink {
  from, to {
	color: transparent;
  }
  50% {
	color: white;
  }
}

@-webkit-keyframes "blink" {
  from, to {
	color: transparent;
  }
  50% {
	color: white;
  }
}

@-ms-keyframes "blink" {
  from, to {
	color: transparent;
  }
  50% {
	color: white;
  }
}

@-o-keyframes "blink" {
  from, to {
	color: transparent;
  }
  50% {
	color: white;
  }
}
@media screen and (min-width: 48em){
	.case-sample-container{
		top:7em;
	}
}

.terminal-wrapper{
		z-index: 999;
    	position: fixed;
    	left: 0;
    	right: 0;
    	height: 100%;
    	width:100%;
    	background: black;
	}