@charset "utf-8";
/* CSS Document */

/******************************

COLOR PALETTE




[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Header
	3.1 Logo
	3.2 Main Navigation
	3.3 Hamburger Menu
	3.4 Full Screen Menu
4. Homepage Particle Animation
6. Features
7. Quote
	7.1 About Progress Bars
8. Contacts
	8.1 Testimonials Navigation
9. Client
10. Footer
11. Background Video
12. Milestones
13. Case Study Cards
14. About



******************************/

/***********
1. Fonts
***********/

@import url('https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:300,400,600,700,800');
@font-face
{
	font-family: 'Lust';
	src: url('../fonts/Lust Regular.otf')  format('opentype');
}

/*********************************
2. Body and some general stuff
*********************************/

*
{
	margin: 0;
	padding: 0;
}
body
{
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 2;
	font-weight: 400;
	background: #FFFFFF;
	color: #6d6e6f;
}
div
{
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}
ul
{
	list-style: none;
	margin-bottom: 0px;
}
p
{
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 400;
	color: #6d6e6f;
	-webkit-font-smoothing: antialiased;
}
p a
{
	display: inline;
	position: relative;
	color: #272829;
	border-bottom: solid 1px #272829;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
a, a:hover, a:visited, a:active, a:link
{
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a:active
{
	position: relative;
	color: #FF6347;
}
p a:hover
{
	color: #481efc;
	background: #d1dfff;
}
p a:hover::after
{
	opacity: 0.2;
}
::selection
{
	background: #d1dfff;
	color: #481efc;
}
p::selection
{
	background: #d1dfff;
}
h1{font-size: 72px;}
h2{font-size: 30px;}
h3{font-size: 24px;}
h4
{
        font-size: 16px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.2em;
}
h5{font-size: 12px;}
h1, h2, h3, h4, h5, h6
{
	color: #272829;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
	font-family: 'Lust';
}
h1::selection, 
h2::selection, 
h3::selection, 
h4::selection, 
h5::selection, 
h6::selection
{
	
}
mark{
        color:#000000;
        background-color: transparent;
        font-weight: 600;
}
::-webkit-input-placeholder
{
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}
:-moz-placeholder /* older Firefox*/
{
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}
::-moz-placeholder /* Firefox 19+ */ 
{
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
} 
:-ms-input-placeholder
{ 
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}
::input-placeholder
{
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}
.form-control
{
	color: #db5246;
}
section
{
	display: block;
	position: relative;
	box-sizing: border-box;
}
.clear
{
	clear: both;
}
.clearfix::before, .clearfix::after
{
	content: "";
	display: table;
}
.clearfix::after
{
	clear: both;
}
.clearfix
{
	zoom: 1;
}
.float_left
{
	float: left;
}
.float_right
{
	float: right;
}
.trans_200
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.trans_300
{
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.trans_400
{
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.trans_500
{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.fill_height
{
	height: 100%;
}
.super_container
{
	width: 100%;
	overflow: hidden;
	padding-left: 45px;
	padding-right: 45px;
}
.button
{
	width: 300px;
	height: 66px;
	background: #481efc;
	overflow: hidden;
}
.button a
{
	display: block;
	width: 100%;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	line-height: 66px;
	text-transform: uppercase;
	letter-spacing: 6px;
        margin-top: 1px;
}

.button a::after
{
	display: block;
	position: absolute;
	top: -50%;
	left: -300px;
	width: 300px;
	height: 200%;
	background: rgba(255,255,255,0.1);
	content: '';
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
	z-index: 0;
}
.button a:hover::after
{
	left: 0;
}
.button a svg
{
	fill: #ffffff;
        margin-left: 16px;
}
.border_button
{
	background: transparent;
	border: solid 2px #481efc;
}
.border_button a
{
	color: #481efc;
        margin-top: -1px;
}
.border_button a svg
{
	fill: #481efc;
        margin-top: -1px;
        margin-left: 16px;
}
.border_button a::after
{
	display: block;
	position: absolute;
	top: -50%;
	left: -300px;
	width: 300px;
	height: 200%;
	background: rgba(72,30,252,0.1);
	content: '';
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
	z-index: 0;
}
.border_button a:hover::after
{
	left: 0;
}
.link_button
{
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: #481efc;
	text-transform: uppercase;
	margin-top: 11px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.link_button svg
{
	margin-left: 3px;
}
.arrow_poly
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.link_button:hover
{
	color: #d1dfff;
}
.link_button:hover .arrow_poly
{
	fill: #d1dfff;
}
.prlx_parent
{
	overflow: hidden;
}
.prlx
{
	height: 130% !important;
}
.section
{
        padding-top: 120px;
        padding-bottom: 120px;
}
.figure_responsive
{
        margin-top: 60px;
        margin-bottom: 60px;
}
.figure_responsive img
{
        width: 100%;
}
.figure_responsive figcaption
{
        font-family: 'Open Sans', sans-serif;
        -webkit-font-smoothing: antialiased;
        color: #6d6e6f;
}
.divider .container
{
        height: 1px;
        background: #dddedf;
}
.section_title h2
{
	display: inline-block;
	position: relative;
	font-weight: 600;
	/*letter-spacing: 0.2em;*/
	/*text-transform: uppercase;*/
	color: #FFFFFF;
	line-height: 1.35;
	margin-bottom: 48px;
}
.section_title_dark h2
{
	color: #1c1c1c;
}
.section_title_dark h2::before
{
	background: #481efc;
}

/* no-gutters Class Rules */
.row.no-gutters 
{
        margin-right: 0;
        margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] 
{
        padding-right: 0;
        padding-left: 0;
}
/*********************************
3. Header
*********************************/

.header
{
        position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 110px;
	padding-left: 48px;
	padding-right: 48px;
        background-color: #ffffff;
	z-index: 20;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease; 
}

.hidden-header
{
        visibility: hidden;
        opacity: 0;
}

/*********************************
3.1 Logo
*********************************/

.logo_container
{
	flex-basis: 50%;
}
.logo
{
	margin-left: 7px;
}

/*********************************
3.2 Main Navigation
*********************************/

.main_nav
{
	margin-right: -3px;
	height: 100%;
	flex-basis: 200%;
	text-align: right;
}
.nav_items
{
	height: 100%;
}
.nav_items li
{
	display: inline-block;
	margin-left: 35px;
	height: 100%;
}
.nav_items li a
{
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: #000000;
	letter-spacing: 3.5px;
	height: 100%;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-left: 14px;
	padding-right: 10px;
}
.nav_items li.active
{
	background: #481efc;
}
.nav_items li.active a
{
	color: #FFFFFF;
}
.nav_items li:hover
{
	background: #481efc;
}
.nav_items li:hover a
{
	color: #FFFFFF;
}

/*********************************
3.3 Hamburger Menu
*********************************/

.hamburger_container
{
	display: none;
	cursor: pointer;
	padding: 10px;
	margin-right: -10px;
	flex-basis: 50%;
	text-align: right;
}
.hamburger_text
{
	display: inline-block;
	margin-right: 7px;
	font-weight: 400;
	color: #000000;
}
.hamburger_icon
{
	position: relative;
	display: inline-block;
	width: 22px;
	height: 3px;
	background: #000000;
	margin-bottom: 4px;
}
.hamburger_icon::before,
.hamburger_icon::after
{
	display: block;
	position: absolute;
	left: 0;
	width: 22px;
	height: 3px;
	background: #000000;
	content: '';
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.hamburger_icon.active
{
	background: transparent;
}
.hamburger_icon.active::before
{
	top: -9px;
	transform: translateY(9px) rotate(45deg);
}
.hamburger_icon.active::after
{
	top: 9px;
	transform: translateY(-9px) rotate(-45deg);
}
.hamburger_icon::before
{
	top: -6px;
}
.hamburger_icon::after
{
	top: 6px;
}
/*
.hamburger_container:hover .hamburger_icon::before
{
	top: -8px;
}
.hamburger_container:hover .hamburger_icon::after
{
	top: 8px;
}

.hamburger_container:hover .hamburger_icon.active::before
{
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
	top: 0;
}
.hamburger_container:hover .hamburger_icon.active::after
{
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
	top: 0;
}*/

/*********************************
3.4 Full Screen Menu
*********************************/

.fs_menu_container
{
	position: fixed;
	top: -100vh;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #FFFFFF;
	z-index: 19;
	-webkit-transition: all 1s 0s cubic-bezier(1,0,0,1);
	-moz-transition: all 1s 0s cubic-bezier(1,0,0,1);
	-ms-transition: all 1s 0s cubic-bezier(1,0,0,1);
	-o-transition: all 1s 0s cubic-bezier(1,0,0,1);
	transition: all 1s 0s cubic-bezier(1,0,0,1);
	padding-left: 48px;
	padding-right: 63px;
	padding-top: 150px;
	text-align: right;
}
.fs_menu_shapes
{
	position: absolute;
	bottom: 32px;
	left: -70px;
	width: 25%;
}
.fs_menu_shapes img
{
	width: 100%;
}
.fs_menu_container.active
{
	top: 0;
}
.fs_menu_list
{
	display: inline-block;
}
.fs_menu_list li
{
	overflow: hidden;
        line-height: 48px;
}
.fs_menu_list li a
{
	display: inline-block;
	font-size: 62px;
	font-weight: 700;
	color: #171717;
	line-height: 1.4;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
	-webkit-transition: all 600ms 600ms cubic-bezier(.19,1,.22,1);
	-moz-transition: all 600ms 600ms cubic-bezier(.19,1,.22,1);
	-ms-transition: all 600ms 600ms cubic-bezier(.19,1,.22,1);
	-o-transition: all 600ms 600ms cubic-bezier(.19,1,.22,1);
	transition: all 1600ms cubic-bezier(.19,1,.22,1);
}
.fs_menu_list li:first-child a {transition-delay: 600ms;}
.fs_menu_list li:nth-child(2) a {transition-delay: 670ms;}
.fs_menu_list li:nth-child(3) a {transition-delay: 740ms;}
.fs_menu_list li:nth-child(4) a {transition-delay: 810ms;}
.fs_menu_list li:nth-child(5) a {transition-delay: 880ms;}
.fs_menu_list li:nth-child(6) a {transition-delay: 950ms;}
.fs_menu_list li:nth-child(7) a {transition-delay: 900ms;}
.fs_menu_list li:nth-child(8) a {transition-delay: 950ms;}
.fs_menu_list li:nth-child(9) a {transition-delay: 1000ms;}
.fs_menu_list li:nth-child(10) a {transition-delay: 1050ms;}
.fs_menu_container.active .fs_menu_list li a
{
	transform: none;
}
.fs_menu_list li a span
{
	position: relative;
}
.fs_menu_list li a span span
{
	position: absolute;
	top: -1px;
	left: -5px;
	color: #481efc;
	z-index: -1;
}
.fs_menu_list li a > span::after
{
	display: block;
	position: absolute;
	bottom: 4px;
	left: 0;
	width: 0%;
	height: 3px;
	background: #171717;
	content: '';
	-webkit-transition: all 600ms cubic-bezier(.19,1,.22,1);
	-moz-transition: all 600ms cubic-bezier(.19,1,.22,1);
	-ms-transition: all 600ms cubic-bezier(.19,1,.22,1);
	-o-transition: all 600ms cubic-bezier(.19,1,.22,1);
	transition: all 600ms cubic-bezier(.19,1,.22,1);
}
.fs_menu_list li a:hover span::after
{
	width: 100%;
}
.fs_social_container
{
	position: absolute;
	bottom: 0px;
	right: 63px;
	width: auto;
	height: 74px;
	z-index: 11;
}
.fs_social li
{
	display: inline-block;
	margin-left: 10px;
}
.fs_social li a
{
	width: 100%;
	height: 100%;
	padding: 10px;
}
.fs_social li i
{
	font-size: 13px;
	color: rgba(255,66,0,0.6);
}
.fs_social li:hover i
{
	color: rgba(255,66,0,1);
}

/*********************************
4. Particle Animation
*********************************/

.home
{
	overflow: hidden;
        width: 100%;
	height: 100vh;
        background-color: #000000;
}

.home .opening
{
        width: 70%;
        text-align: center;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}

.home h1
{
        color: #ffffff;
}


.home p
{
	font-size: 16px;
	color: #b4b5b6;
}

/*****************
6. Scroll Down
*****************/
p.scroll-down #svg-arrow-down{
        width: 24px;
        height: 24px;
        display: block;
        margin: 10px auto;
}

p.scroll-down #svg-arrow-down .arrow {
        animation: scroll .35s ease-in alternate infinite;
}
  
@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}

/*********************************
4. Case Study
*********************************/

.landing h1
{
        color: #ffffff;
}

.case-study p.label
{
        letter-spacing: 0.2em;
	text-transform: uppercase;
        font-size: 13px;
}

.case-study
{
	z-index: 1;
}

.case-study-background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.case-study-blurb
{
	padding: 40px 32px;
        background-color: #ffffff;
        box-shadow: 0px 12px 24px rgba(40, 40, 40, .3);
}

.case-study-blurb h3
{
	margin-bottom: 31px;
}
.case-study-blurb p
{
	max-width: 100%;
}

.case-study-button
{
	margin-top: 24px;
}

/*********************************
6. Features
*********************************/
.features_block
{
        margin-top: -60px;
}
.features_col
{
        margin-top: 60px;
}
.features_item h3
{
	font-weight: 600;
}
.features_item img
{
	/*margin-bottom: 35px;*/
}
.features_item p
{
	font-weight: 400;
	margin-bottom: 0px;
	margin-top: 12px;
	max-width: 100%;
}
.icon_container {
height: 40px;
width: auto;
margin-bottom: 36px;
}
/*********************************
7. quote
*********************************/

.quotation_mark
{
        font-size: 48px;
        font-family: Lust;
        color: #272829;
	margin-bottom: -18px;
}

/*********************************
7.1 About Progress Bars
*********************************/

.skills_container
{
	padding-top: 10px;
}
.pb_item
{
	margin-bottom: 18px;
}
.pb_item h5
{
	text-transform: uppercase;
	color: #FFFFFF;
	letter-spacing: 0.3em;
	margin-top: 18px;
}
.skill_bars
{
	height: 3px;
}
.progressbar-text
{
	width: 48px;
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	text-align: right;
}

/*********************************
8. Clients
*********************************/

.clients
{
	padding-top: 120px;
	padding-bottom: 120px;
}

.clients .clients-row
{
        margin-top: 24px;
        margin-bottom: 40px;
}

.clients .clients-row > div
{
        margin-top: 64px;
}

.client-logo
{
        opacity: 0.6;
        -webkit-transition: opacity 0.6s ease-out;
        -moz-transition: opacity 0.6s ease-out;
        -o-transition: opacity 0.6s ease-out;
        transition: opacity 0.6s ease-out;
}

.client-logo:hover
{
        opacity: 1;
}

.button-group
{margin-top: 68px;
}

.button-group .button
{
        margin: 12px;
}

/*********************************
9. Contact
*********************************/

.contact_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.contact_shapes
{
	position: absolute;
	bottom: 0;
	left: 50%;
}
.contact_title h2
{
	margin-bottom: 54px;
}
.contact_text p
{
	color: #FFFFFF;
}
.contact_button
{
	margin-left: auto;
	margin-right: auto;
	margin-top: 60px;
}

/*********************************
10. Footer
*********************************/

.footer
{
	background: #111111;
}
.footer_content
{
	height: 96px;
}
.footer_social_container
{
	display: inline-block;
}
.footer_social li
{
	display: inline-block;
	margin-left: 6px;
        opacity: 0.4;
        -webkit-transition: opacity 0.6s ease-out;
        -moz-transition: opacity 0.6s ease-out;
        -o-transition: opacity 0.6s ease-out;
        transition: opacity 0.6s ease-out;
}
.footer_social li:hover
{
        opacity: 1;
}
.footer_social li:first-child
{
	margin-left: 0px;
}
.footer_social li a
{
	width: 100%;
	height: 100%;
	padding: 10px;
}
.cr p
{
	margin-bottom: 0px;
}

/*********************************
11. Background Setion
*********************************/
.landing 
{
        overflow: hidden;
        width: 100%;
}
.landing video {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -2;
        object-fit: cover;
}
.landing .overlay {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #000000;
        opacity: 0.4;
}
.landing .texture {
        background-color: transparent;
        background-image: url("../images/video_overlay.png");
        opacity: 0.4;
}

/*********************************
12 Milestones
*********************************/

.milestones_container
{
	margin-top: 60px;
}
/*.milestone
{
	width: 20%;
}*/
.milestone_counter
{
	font-weight: 500;
        font-size: 44px;
	color: #333435;
	line-height: 48px;
	padding-top: 18px;
}
.milestone_counter::before
{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 39px;
	height: 2px;
	background: #481efc;
	content: '';
}
.milestone_text
{
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #6d6e6f;
	margin-top: 18px;
        line-height: 14px;
}

/*********************************
13 Case Study Cards
*********************************/
.card_text_container
{
        padding-left: 48px;
        padding-right: 48px;
}
.card_purple
{
        background: #481efc;
}
.card_dark
{
        background: #272829;
}
.card_text_container p, .card_text_container h2
{
        color: #ffffff;
}
.card_image_container
{
        padding: 0px;
        min-height: 400px;
}
.image_group .card_image_container
{
        padding-bottom: 50%;
}
.image_group
{
        margin-top: 60px;
        margin-bottom: 60px;
}
.card_image
{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
}

/*********************************
14 About & Work
*********************************/
.opening h1
{
        padding-top: 32px;
        padding-bottom: 24px;     
}