/**
 * index.scss
 * - Add any styles you want here!
 */

/*
    font-family: 'Archivo Black', sans-serif;
	font-family: 'Archivo', sans-serif;
    font-family: 'Source Sans Pro', sans-serif;
*/

* {
	border:0px;
	margin:0px;
	font-size:9px; /* fix space between inline block elements */
}

html {
	position: fixed;
	overflow: hidden;
}
body {
	background: #0C0F0A;
	overflow:hidden;
	position: relative
}
#main {
	overflow-y: scroll;
	overflow-x:hidden;
    scroll-snap-points-y: repeat(320px);
    scroll-snap-destination: 0 0;
    scroll-snap-type: y mandatory;
    /*scroll-snap-type: mandatory;*/
	height:100vh;
}


.progress {
  position: fixed;
  top: 0;
  left: 0;
  -webkit-appearance: none;
  appearance: none;
  width: 0%;
  height: 8px;
  border: none;
  background: transparent;
	z-index: 500;
	background-color:#F27913;
}

::selection {
  /*background: #F27913;  WebKit/Blink Browsers */
	color:#F27913;
}
::-moz-selection {
  /*background: #F27913;  Gecko Browsers */
	color:#F27913;
}
.grey {color:#203236 !important;}
.light {color:#aaaaaa}
.black {color:#333333;}
.pink {color:#F27913;}
.white {color:#ffffff;}

.blue {color:#0076ff;}
.red {color:#b0002a;}
.orange2 {color:#d36000;}
.orange3 {color:#a93e00;}
.orange4 {color:#811900;}
.orange5 {color:#5d0000;}

.shadow {box-shadow: 0 10px 10px 0 rgba(0,0,0,0.15);}

.opacity_10 {opacity:0.1;}
.content {	z-index: 1;width:540px;margin-top: 0px;}

.align_right {text-align:right;}
.align_left {text-align:left;}
.align_center {text-align:center;}

.align_right_imp {text-align:right !important;}


.full_width {width:100%;}
.quote {width:66%}
.quote h3{
	font-family: 'Archivo', sans-serif;
	color: #ff2e69;
	font-size: 13px;
	letter-spacing: 2.5px;
	line-height: 20px;
	font-weight: 400;
	padding: 2px 0;
	text-transform: uppercase;
	}
.inline {display:inline-block;}
.block {display:block;}

.top {top: 0%;}
.top_20 {top: 20% !important;}
.middle {top: 50% !important;}
.top_80 {top: 80% !important;}
.bottom {bottom:0;}

.absolute_center {
	position:absolute; 
	width: 70%;
	height:70%;
	left: 50%;
	top:50%;
	transform: translate(-50%,-50%);
}
.absolute_center img {
	position:absolute;
	width: 70%;
	height:70%;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}


.bg_img_fill {
	height: 100%;
	width: 100%;
}
.bg_img_fill img {
	object-fit: cover;
	min-width: 100%;
	max-height: 100%;
	margin:0;
	padding: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}



a {
	font-family: 'jost', serif;
	font-size: 15px;
	text-align: left;
	font-weight: 400;
	letter-spacing: 1.5px;
	color: #ffffff;
	text-decoration: none;
	text-transform: uppercase;
	line-height: 32px;
	cursor: pointer;
    padding: 0 0;
}
.bold {
	font-weight:bold;
}
.sub_menu {
	font-size:13px;
	line-height: 42px !important;
	height: 42px !important;
	position: relative;
	display: block;
	padding-left:70px;
	opacity:0.75;
}
span{
	font-size:18px;
}
.menu_arrow {
	transform: translate(170%, 33%) !important;
}
.copy_link {
	font-family: 'jost', serif;
	color: #eeeeee;
	font-size: 17px;
	text-align: left;
	padding: 7px 0 14px 0;
	line-height: 26px;
	font-weight: 400;
	letter-spacing: 0px;
	text-decoration:underline;
	text-transform:inherit;
	cursor: pointer;
}
.copy_link:hover {
	color: #f27913;
}

.btn1 {
	text-decoration:none;
	color:#ffffff;
	padding: 20px 22px;
	display: inline-block;
	line-height: 16px;
     /*background-image: linear-gradient(to top, #f27913, #f18a2a, #ef993e, #efa853, #eeb568);*/
	background-attachment: fixed;
	border-radius: 30px;
	background-color:#f18a2a;
	margin: 4px 25px 6px 0;
}
.btn2 {
	border-bottom:2px solid #F27913;
	display: inline-block;
	margin-bottom:5px;
	margin-right:8px;
}
.hey {
	background-color:#ffffff;
}

.client_img {
	width:100%;
	height:auto;
}
.left_copy_d {
	margin-right: 40%;
	width:600px;
}



#next {
	position: fixed;
	bottom: 35px;
	left: 0;
	cursor: pointer;
	z-index: 100;
	height:45px;
	width: 45px;
	background-color: rgb(239, 239, 239);
	opacity:0.75;
	overflow: hidden;
	display:block;
}
#prev {
	position: fixed;
	bottom: 80px;
	left: 0px;
	cursor: pointer;
	z-index: 100;
	height:45px;
	width: 45px;
	background-color: rgb(239, 239, 239);
	opacity:0.75;
	overflow: hidden;
	display:block;
}


h1 {
	font-family: 'jost', sans-serif;
	font-size: 72px;
	letter-spacing: 0px;
	color: #F4F6F3;
	line-height: 72px;
	font-weight: 800;
	padding: 20px 0px 0 0;
	margin-left: -3px;
	text-transform: uppercase;
}
h2 {
	font-family: 'Archivo', sans-serif;
	font-size: 24px;
	letter-spacing: 0px;
	color: #dddddd;
	line-height: 36px;
	font-weight: 700;	
}
h3 {
	font-family: 'jost', sans-serif;
	color: #B7894B;
	font-size: 14px;
	line-height: 28px;
	letter-spacing: 2px;
	font-weight: 400;
	padding: 0;
	text-transform: uppercase;

}
.scroll_hint {
	position:absolute;
	left:50%;
	bottom:30px;
	transform: translate(-50%, -50%);
	width:50px;
	height:50px;
	z-index: 100;
}
.scroll_hint_text {
	position: absolute;
	left: 50%;
	bottom: 35px;
	transform: translate(-50%, -50%);
	width: auto;
	height: auto;
	z-index: 100;
	padding: 0px 0 0 3px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 10px;
	opacity:0.7;
}
.scroll_hint_project {
	bottom:30px;
	width:50px;
	height:50px;
	z-index: 100;
	margin-left: -13px;
	margin-top: -6px;
}
.home_project {
	width:100%;
	height:auto;
}
.home_project_cont {
	width:100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}
.home_project_cont a {
	line-height:revert !important;
	background-color:rgba(255, 255, 255, 1);
	display: inline-block;
	opacity:1;
    width: 100%;
    height: auto;
	overflow:hidden;
}
.home_project_cont div {
	width: 32%;
	margin: 1% 0;
	cursor: pointer;
}
.home_project_cont img {
    width: 100%;
    height: auto;
}

.tag {
	font-family: 'jost', sans-serif;
	color: rgba(255,255,255,0.6);
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	line-height: 12px;
	font-weight: 400;
	padding: 4px;
	width: auto;
	height: 10px;
	border-radius: 50px;
}
h4 {
	font-family: 'jost', sans-serif;
	font-size: 48px;
	letter-spacing: 0.5px;
	color: #ffffff;
	line-height: 62px;
	font-weight: 800;
	padding: 0px 0px 15px 0;
}
h5 {
	font-family: 'Archivo', sans-serif;
	color: #ffffff;
	font-size: 9px;
	letter-spacing:1.5px;
	font-weight:400;
	text-transform:uppercase;
	margin:5px 0;
}
p {
    font-family: 'Jost', sans-serif;
	color: #eeeeee;
	font-size: 17px;
	text-align: left;
	padding: 0px 0 15px 0;
	line-height: 26px;
	font-weight: 400;
	letter-spacing: 0px;
}
strong {
	font-size:17px;
}

.nav_hint {
	height: 20px;
	padding-bottom: 8px;
	padding-top: 6px;
	background-color: #f0f0f0;
}
.nav_hint p {
	color: #A9A9A9;
	text-align:center;
	text-transform:uppercase;
	font-size: 12px;
	line-height: 20px;
}
.nav_item {
	opacity:0.75;
}
.nav_animate {
	position:absolute;
	background-color:#F27913;
	width:50%;
	height:50%;
	display: block;
}
ol,ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.menu_icon_container {
	margin: 60px 0 0 0px;
	z-index: 100;
	height:45px;
	width: 45px;
	/*box-shadow:0px 0px 25px 5px rgba(0,0,0,0.2);*/
	position: fixed;
	cursor: pointer;
	background-color: #ffffff;
	opacity:0.85;
	overflow: hidden;
}
.menu_icon_container img {
	position:absolute;
}


#minimise {
	opacity:0;
}
#close {
	opacity:0;
}
#scroll	{
	height: auto;
	width: 16px;
	margin: 0 auto;
	display: block;
	padding-bottom: 2px;
}
.main_logo {
	position:fixed;
	margin:33px;
	top:0;
	right:0;
	z-index:101;
	width: 90px;
	height: 90px;
}
.logo, .logo_black {
	padding: 20px;
	position: absolute;
}
.logo_black {
	opacity:0;
}

nav{
	background: #ffffff;
	margin-left: -400px;
	position: fixed;
	height: 100%;
	width:330px;
	z-index: 101;
	box-shadow:0px 0px 25px 5px rgba(0,0,0,0.2);
	overflow: hidden;
}
nav li {
	height: auto;
	display: block;
	text-align: left;
	position: relative;
	line-height: 52px;
}

nav a {
	color:#131313;	
	text-decoration:none;
	width: 400px;
	height: 50px;
	line-height: 54px;
	display: table-cell;
	vertical-align: middle;
	border-right:0px solid #F27913;
	cursor: pointer;
	padding-left: 50px;
}
.nav_list {
	position: absolute;
	top: 50%;
	transform: translate(0,-50%);
	margin-top: 35px;
}
.nav_list img{
	width: 25px;
	height: 25px;
	position: absolute;
	transform: translate(53%, 58%);
	left: 0px;
}
.first {
	 background-image:url('images/reef_header.jpg');
}
#logo a{
	border-left:0px solid #000000;
}
.nav-transition{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
}

.logosvg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}


/* All the snapping stuff */
.scroll_main {
	scroll-snap-type: none !important;
	-webkit-scroll-snap-type: none !important;
}
.scroll_snap {
	scroll-snap-align: none !important;
	-webkit-scroll-snap-align: none !important;
}

/* Other styles */
section {
    height: 100vh;
  	width: 100vw;
 	scroll-snap-align: center !important;
	-webkit-scroll-snap-align: center !important;
	scroll-snap-coordinate: 0% 0%; /* older (Firefox/IE) */  
  	-webkit-scroll-snap-coordinate: 0% 0%; /* older (Safari) */
	flex-direction: row;
	display: flex;
	align-items: center;
	justify-content: center;
	/*background-image:url("../images/BG.png");*/
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; 
	background-color: #0e1415;
	position: relative;
	z-index: 0;
	will-change:top; /*fixes flicker on fixed background images*/
	overflow: visible !important;
	flex-wrap:wrap;
	align-content: center;
}


.slides-inner {
  position: relative;
  height: 100%;
  width: 100%;
}
.client_list {
	height: 105px !important;
	padding: 15px 0;
	display: flex;
	width: 100% !important;
	position: relative;
	overflow: hidden;  
	
}
.slide {
  position: absolute;
  font-size: 90px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 105px;
width: calc(100% / 7) !important;
}
.controls {
	display:flex;
	width:300px;
	height:50px;
	z-index: 100;
	position:absolute;
	transform:translate(-50%, -50%);
	left:50%;
	top:50%;
	justify-content: space-between;
}
.controls img {
	width:50px;
	height:50px;
	cursor:pointer;
}
.half {
	height: 100vh;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	width: calc(50% - 200px);
}
.half img {
	width:100%;
	height:auto;}
.skill_item {
	margin: 20px 3em 0 3em;
	flex-grow: 1;
	width: 50%;
}
.skill_row * {
	display: inline-block;
	white-space: normal;
	vertical-align: middle;
}
.skill {

}
#prevButton {
 
}
#nextButton {
	
}
.info_hint {
	min-width: 170px;
	min-height: 75px;
	max-width: 600px;
	position: absolute;
	left: 0;
	z-index: 2;
	overflow: visible;
	cursor: pointer;
	box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.2);
	bottom: 35px;
	background-color: rgba(0,0,0,0.9);
	height: auto;
	width: 170px;
	border-radius:22px;
	display: block;
	margin-left:80px;
}

.info_hint p, .info_hint h1, .info_hint h2, .info_hint h3  {opacity:1;display:block;}
.info_hint p {
	line-height:0px;
}

.info_hint img {
	position: absolute;
	padding:0px;
}

	.open {bottom:40px; width:calc(50% - 80px);}
	.closed{bottom:20px;}

.plus {opacity:0; position:absolute;width:150px; height:auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) !important;}
.minus {position: absolute;padding: 14px;border-radius: 24px;background-color: #F27913;width:14px; height:auto;
	left: 50%;
	top: 100%;
	transform: translate(-50%, -50%);
}

.header_index {background-image:url("../images/background_index.jpg"); background-attachment:scroll;}
.header_index2 {background-image:url("../images/index_bg2.jpg"); background-attachment:scroll;}



.header_h1 {background-color:#203236;background-image:url("../images/index_bg3.jpg"); background-attachment:scroll;}
.header_h2 {background-color:#203236;background-image:url("../images/index_bg4.jpg"); background-attachment:scroll;}
.header_h3 {background-color:#203236;background-image:url("../images/index_bg5.jpg"); background-attachment:scroll;}

.header_r1 {background-image:url("../images/reef_header.jpg"); background-attachment:scroll;}
.header_r2 {background-image:url("../images/reef_guidelines_2.jpg"); background-attachment:scroll;}
.header_r3 {background-image:url("../images/reef_logo_bg.jpg"); background-attachment:scroll;}
.header_r4 {background-image:url("../images/reef_website.jpg"); background-attachment:scroll;}

.header_a1 {background-image:url("../images/alvie_appscreens.jpg"); background-attachment:scroll;}
.header_a2 {background-image:url("../images/alvie_website.jpg"); background-attachment:scroll;}
.header_a3 {background-image:url("../images/alvie_appscreens_2.jpg"); background-attachment:scroll;}


.header_t1 {background-image:url("../images/ts_icons.jpg"); background-attachment:scroll;}
.header_t2 {background-image:url("../images/ts_iphones.jpg"); background-attachment:scroll;}
.header_t2 {background-image:url("../images/ts_iphones.jpg"); background-attachment:scroll;}
.header_t3 {background-image:url("../images/ts_laptop2.jpg"); background-attachment:scroll;}
.header_t4 {background-image:url("../images/ts_site.jpg"); background-attachment:scroll;}


.header_tms0 {background-image:url("../images/tms_bg_header.jpg"); background-attachment:scroll;}
.header_tms1 {background-image:url("../images/TMS_BG_1.jpg"); background-attachment:scroll;}
.header_tms2 {background-image:url("../images/TMS_iphones_AW1.jpg"); background-attachment:scroll;}
.header_tms3 {background-image:url("../images/TMS_mockups_AW1.jpg"); background-attachment:scroll;}
.header_tms4 {background-image:url("../images/TMS_invite_1.jpg"); background-attachment:scroll;}
.header_tms5 {background-image:url("../images/TMS_frames_1.jpg"); background-attachment:scroll;}


.header_wp1 {background-image:url("../images/wp_box_1.jpg"); background-attachment:scroll;}
.header_wp2 {background-image:url("../images/wp_iphones_1.jpg"); background-attachment:scroll;}
.header_wp3 {background-image:url("../images/WP_frames_1.jpg"); background-attachment:scroll;}
.header_wp4 {background-image:url("../images/wp_web_1.jpg"); background-attachment:scroll;}
.header_wp5 {background-image:url("../images/WP_hats_1.jpg"); background-attachment:scroll;}


.header_sh1 {background-image:url("../images/SH_website_1.jpg"); background-attachment:scroll;}
.header_sh2 {background-image:url("../images/sh_brochure_1.jpg"); background-attachment:scroll;}
.header_sh3 {background-image:url("../images/sh_social.jpg"); background-attachment:scroll;}
.header_sh4 {background-image:url("../images/sh_packaging_1.jpg"); background-attachment:scroll;}

.bg_color_0 {background-color: #0F0F0F; background-image:url("../images/background_index.jpg"); background-attachment:scroll;}
.bg_color_1 {background-color: #333333;}
.bg_color_2 {background-color:#EEEEEE;}
.bg_color_3 {background-color:#efefef;}
.bg_color_4 {background-color: #ffffff;}
.bg_color_5 {background-color: #0C0F0A;}
.bg_color_6 {background-color: #dfb703;}

.icon_row { width: 100%; overflow:hidden;white-space: nowrap;}
.icon_row_width {text-align: center;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
width: 120%;
top: 50%;}
.icon_col {display: inline-block;vertical-align: middle;width: 12%;}
.icon_col img {padding:0 10px;max-width:150px;min-width:50px;}
.icon_mid {display: inline-block;vertical-align: middle;width: 30%;white-space: normal;}

.size_60 {height:60vh; min-height:600px;}

.bg_color_grad1 { background-image: radial-gradient(circle, #b9b0fa, #ada3fc, #a195fd, #9488fe, #867aff);}
.bg_color_grad2 { background-image: radial-gradient(circle, #4bade0, #48a7db, #46a0d5, #439ad0, #4194ca, #3f8fc5, #3d8ac1, #3b85bc, #3980b7, #367ab2, #3475ad, #3270a8);}
.bg_color_grad4 {   background-image: radial-gradient(circle, #ffef0c, #eee71b, #dede24, #cfd52b, #c0cc31, #b5c632, #aabf33, #a0b934, #96b432, #8baf30, #81a92e, #77a42c);}
.bg_color_grad5 {    background-image: radial-gradient(circle, #e35070, #d84967, #cc425f, #c13c56, #b6354e, #ac3048, #a22b42, #98263c, #8d2236, #831d30, #78192a, #6e1524);}
.bg_color_grad6 {   background-image: radial-gradient(circle, #efefef, #e9e9e9, #e3e3e4, #dddede, #d7d8d8, #d4d5d5, #d0d1d2, #cdcecf, #cccccd, #cacacb, #c9c9c9, #c7c7c7);}



.footer {background-color: #040707;	height:auto;}
.next_project {background-color:#dddddd; height:200px;box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.2);}
.next_text {vertical-align: middle !important; display: inline-block; padding-right: 10px;padding-bottom: 5px;}


.wp_blue {
	position: absolute;
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
	z-index: -10;
	opacity: 0.5;
}
/***************************************************
 * Generated by SVG Artista on 9/30/2020, 6:58:16 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-elem-1{stroke-dashoffset:615.7290649414062px;stroke-dasharray:615.7290649414062px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 0.8s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 0.8s}svg.active .svg-elem-1{stroke-dashoffset:0;fill:rgb(255,255,255)}svg .svg-elem-2{stroke-dashoffset:885.6543579101562px;stroke-dasharray:885.6543579101562px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.12s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 0.9s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.12s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 0.9s}svg.active .svg-elem-2{stroke-dashoffset:0;fill:rgb(255,255,255)}svg .svg-elem-3{stroke-dashoffset:455.97076416015625px;stroke-dasharray:455.97076416015625px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.24s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.24s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1s}svg.active .svg-elem-3{stroke-dashoffset:0;fill:rgb(255,255,255)}svg .svg-elem-4{stroke-dashoffset:100.66230773925781px;stroke-dasharray:100.66230773925781px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.36s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.1s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.36s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.1s}svg.active .svg-elem-4{stroke-dashoffset:0;fill:rgb(255,255,255)}svg .svg-elem-5{stroke-dashoffset:116.60002136230469px;stroke-dasharray:116.60002136230469px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.48s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.2000000000000002s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.48s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.2000000000000002s}svg.active .svg-elem-5{stroke-dashoffset:0;fill:rgb(255,255,255)}svg .svg-elem-6{stroke-dashoffset:118.40775299072266px;stroke-dasharray:118.40775299072266px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.6s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.3s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.6s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.3s}svg.active .svg-elem-6{stroke-dashoffset:0;fill:rgb(255,255,255)}svg .svg-elem-7{stroke-dashoffset:109.36788177490234px;stroke-dasharray:109.36788177490234px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.72s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.4000000000000001s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.72s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.4000000000000001s}svg.active .svg-elem-7{stroke-dashoffset:0;fill:rgb(255,255,255)}svg .svg-elem-8{stroke-dashoffset:104.45938110351562px;stroke-dasharray:104.45938110351562px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.84s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.5s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.84s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.5s}svg.active .svg-elem-8{stroke-dashoffset:0;fill:rgb(255,255,255)}svg .svg-elem-9{stroke-dashoffset:53.000030517578125px;stroke-dasharray:53.000030517578125px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.96s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.6s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.96s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.6s}svg.active .svg-elem-9{stroke-dashoffset:0;fill:rgb(255,255,255)}svg .svg-elem-10{stroke-dashoffset:118.37115478515625px;stroke-dasharray:118.37115478515625px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 1.08s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.7000000000000002s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 1.08s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.7000000000000002s}svg.active .svg-elem-10{stroke-dashoffset:0;fill:rgb(255,255,255)}svg .svg-elem-11{stroke-dashoffset:107.0430908203125px;stroke-dasharray:107.0430908203125px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 1.2s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.8s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 1.2s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.8s}svg.active .svg-elem-11{stroke-dashoffset:0;fill:rgb(255,255,255)}

.logo_center img{
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: -1;
}

.contain_flex {
	width: calc(80% - 200px);
	height: auto;
	flex-direction: row;
	display: flex;
	align-items: normal;
	justify-content: center;
	align-content: center;
}
.flex_wrap {
	flex-wrap: wrap;
}
.half_flex {
	width: 50% !important;
	margin:0 auto;
	min-width:500px;
}
.div_50 {
    width: 50%;
    min-width: 500px;
    position: relative;
	margin: 0 20px;
}
.div_50_left {
    width: 50%;
    min-width: 500px;
    position: relative;
	margin: 0 20px;
}
.div_auto {
    width: auto;
	position: relative;
	margin:20px 20px 0;
	display:flex;
	
}

.skill_row p {
	max-width:340px;
}
.div_fixed {
	position: fixed;
	left: 25%;
	z-index: 1000;
	top: 200px;
	transform: translate(-50%, 0%);
}
#div_projects {
	overflow: scroll;
	height:100% !important;
}
.column_projects {
    margin-left: 45%;
	margin-top: 158px;
	margin-bottom:100px;
}
.panel {
	padding: 15px 0 25px 0;
	
}
.project_title {
	padding:40px 0 20px;
	font-size:22px;
}
.alvie_fix {
    width: 35%;
	min-width: 310px;
}
.alvie_fix img {
    width: 125% !important;
}


.eyebrow {
	padding-top:15px;
}
.eyebrow img{
	height:auto !important;
	width:15px !important;
	position: relative !important;
	left:0% !important;
	top: 0% !important;
	transform: translate(0%, 0%) !important;
}
.eyebrow span{
	color:#ffffff;
	font-weight:100;
	
}
.eyebrow a {
	color:rgb(240, 120, 26);
}
.tms_fix img {
    width: 105% !important;
}
.div_50 img {
	width: 145%;
	height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.solo_fix {
	margin-left: -50%;
	width: 40%;
}
.div_overview {
	position: absolute;
	left: 50%;
	top:50%;
	transform: translate(-50%,-50%);
	text-align:center;
	width: 90%;
}
.div_center h2, .div_center h3, .div_center p {
	display:inline-block;
	white-space: normal;
	vertical-align: middle;
	padding: 0px 30px 20px;
}

.div_footer {
	position: relative;
	text-align: center;
	width: calc(90% - 50px);
	display: block;
	margin: 50px 0;
}
.div_center h3 {
	text-align:right;
}

.inline {
	display: inline-block !important;
	vertical-align: top;

}
.inline h2, .inline h3, .inline p {
	display: block;
	white-space: normal;
	text-align: left;
	padding-bottom:10px;
}
.inline p {	
	color:#131313;
}
.overview_img {	
	margin-right:0px;
	margin-bottom:25px;
}

/*centered info badge*/
.badge {
	background-color: #ffffff;
	height: 320px;
	width: 320px;
	border-radius: 240px;
	overflow: hidden;
	white-space: normal;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
}
.badge_text {
	position: relative;
	left: 50%;
	top:50%;
	transform: translate(-50%,-50%);
	width:70%;
}
.badge_text h2, .badge_text h3, .badge_text p {
	text-align:center;
}
.badge_text h2 {
	padding:0 0 20px 0;
}

/*divider lines*/
.divider {margin:5px 0}
.divider_10 {margin:10px 0}
.divider_20 {margin:20px 0}
.divider_35{margin-bottom: 5px;}
.divider_40 {margin:20px 0}

.tms_mob img {
	width: 515px;
	height: auto;
	margin-left: 115px;
}

.tags {
	margin-right: 8px;
	padding: 4px 9px;
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 50px;
	text-align: center;
	width:auto;
	display: inline-block;
	height: 20px;
	position: relative;
	margin-bottom: 10px;
	margin-left: -2px;
}
.tags_2 {
	margin-right: 8px;
	padding: 4px 9px;
	border: 1px solid rgba(0,0,0,0.3);
	background-color:rgba(177,0,91,0);
	border-radius: 50px;
	text-align: center;
	width:auto;
	display: inline-block;
	height: 20px;
	position: relative;
	margin-top: 10px;
	margin-left: -2px;
}


.column_overview {
    display: block;
    width: 35%;
    vertical-align: top;
    text-align: left;
    padding: 10px 0;
    margin: 0px auto;
    position: relative;
    min-width: 500px;
}


/*footer styles*/
.footer_column {
	display: inline-block;
	vertical-align: top;
	width: 25%;
	text-align:left;
}
.footer_column a {
	display: block;
	font-size:16px;
	font-family: 'Source Sans Pro', sans-serif;
	color: #ffffff;
	text-decoration: none;
	line-height: 45px;
	letter-spacing: 0.3px;
	text-transform:none;
}
.footer_column a:hover {
	color: #F27913;
}
.footer_column img {
	text-align: right;
	display: inline-block;
}
.social_img {
	padding-left:10px;
	padding-top:20px;
}
.footer_hint {
	color: #A9A9A9;
	margin: 0 0 10px 0;
	font-size: 12px;
}

.footer_note {
	color:#666666;
	margin:100px 0 0 0;
	font-size:12px;
}

.grey_border {
	margin:0px;
	padding:40px 0;
}
.even_margin {
	margin:35px;
}

.thin_width {
	width:calc(65% - 200px);
}

.display_off_mob {
	display:block;
}

/*used for jquery media query.  block = desktop. none = mobile*/

.media_switch {
	display:block;
}
@media screen and (max-width:  1300px) {
	nav {
	opacity: 0;
	visibility:hidden;
	}
	
	h1 {
		font-size:58px;
			line-height:58px;
	}
	.contain_flex {
		width:calc(80% - 0px);
	}
	.half_flex {
	width: 100% !important;
	margin:0 auto;
	min-width:100px;

}
	.slide {
		width: calc(100% / 5) !important;
	}
	.skill_item{
		margin: 20px 2em 0 2em;
	}
}
@media screen and (max-width:  660px) {
	#main {
    scroll-snap-type:none;
	}
	.scroll_hint {
	bottom:40px;
}
.scroll_hint_text {
	bottom: 45px;
	}
	
	p {
	font-size: 15px;
	line-height: 22px;
	padding: 0px 0 16px 0;
	}
	
	strong {
	font-size:15px;
}
.display_off_mob {
	display:none;
}
	h3 {
	font-size: 12px;
	line-height: 18px;
	}
	
.media_switch {
	display:none;
}
	.info_hint {
		padding:20px; 
		width:auto;
		display:none;
	}
	.info_hint h3 {
	font-size: 16px;
	line-height: 22px;
}
	.column_overview h3 {
	font-size: 14px;
line-height: 30px;
		
}
	.closed {min-width:160px;bottom:20px;}
	.open {min-width:calc(90% - 28px); bottom:40px;}
section {
	flex-direction: column;
}
.center_mob {
	text-align: center;
}
.tags_2 {
	margin-bottom: 5px;
	margin-left: 3px;
	margin-right: 3px;
	margin-top: 5px;
	}
.tags {
	margin-bottom: 5px;
	margin-left: 3px;
	margin-right: 3px;
	margin-top: 5px;
	}
.contain_flex {
	width:calc(100% - 40px);

}
	.table {
		width:auto;
	}
	.flex_row {
		flex-direction:row !important;
	}
	.div_50 p, .div_50 h1 {
		text-align: center !important;
	}
.div_50 {
	margin: 0 20px !important;
	width: calc(100% - 40px);
	position: relative;
	min-width: 300px;
}
.div_50_left {
	width: 100%;
	position: relative;	
	min-width: 320px;
	}
.skill {
margin: -3px 6px 25px -2px !important;
	display: none;
}
	
.skill_row {
	text-align: left !important;
}

.div_auto {
	width: 100%;
	position: relative;	
	min-width: 320px;
	margin:0;
}
.solo_fix {
	margin-left:0;
	width: 40%;
}
.btn1 {
	padding: 16px 16px;
	line-height: 14px;
	margin: 4px 10px 6px 0;
	}
.mob_section {
    max-height: 100vh;
	height: auto;
	display: block;
	position: relative;
	min-height: 400px;
}
.mob_section_quote {
    max-height: 100vh;
	height: auto;
	display: block;
	position: relative;
}
.mob_info_section {
	height:auto;
	min-height:400px;
}
	
	.top {top: 0%;}
	.top_20 {top: 0% !important;}
	.middle {top: 50% !important;}
	.top_80 {top: 50% !important;}
	.bottom {bottom:0;}
	.mob_align_center {text-align:center;}
	.content {
		width:calc(90% - 10px);
		margin-top: -20px;
	}
	a {
		font-size:13px;
	}
	h1 {
	font-size: 36px;
	letter-spacing: 1px;
	color: #ffffff;
	line-height: 44px;
	font-weight: 800;
	padding: 0px 0 10px 0;
	}
	h2 {
	font-size: 20px;
	line-height:20px;
	}
	.badge {
		min-height: 320px;
		min-width: 320px;
	}
	.nav_list {
	transform: translate(0, 0);
	left: 0%;
	width: 100%;
	top: 0%;
	padding:80px 0;
	position: relative;
	margin-top: 0px;
	overflow: hidden;
	}

	nav {
	margin-left: 0px;
	opacity: 0;
	visibility: hidden;
	overflow: scroll;
	width: 100%;
	}
	.nav_item {
		padding-left:60px;
	}
	nav li {
		text-align: center;
	}
	
	nav a {
		width: 100%;
		display: block;
		padding-left: 0;
		padding-right: 0;
		line-height: 54px;
		height: 54px;
	}
	.nav_hint p {
		text-align:center;
		padding:0px;
		line-height: 20px;
	}
	.sub_menu {
		padding-left:75px;
	}
	
	.alvie_mob {	
		bottom:250px;
	}
	.alvie_mob img {
		width: 100%;
		height: auto;
	}
	
	.tms_mob {
		bottom:330px;
	}
	
	.tms_mob img{
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
	.div_center {
		position: absolute;
		width: 100%;
	}
	.div_information {
		position: relative;
		width: 100%;

	}
	.div_center h2, .div_center h3, .div_center p {
		display:block;
		text-align:left;
		padding:0 0 20px 0;
		margin: 0 auto;
		}
	.div_center img{
		height:auto;
		width:170px;
	}
	.div_footer {
		width:100%;
		margin:30px 0;
	}
	.divider_35 {
		margin-bottom:15px;
	}
	.divider_line_v {
		/*border-right: #b0002a solid 0px;
		border-bottom: #b0002a solid 2px;	*/
		margin: 0px 0 20px 0;
	}
	.column_overview {
		width: calc(100% - 40px);
		min-width: calc(100% - 40px);
	}
	.mob_column_flex {
	flex-direction: column;
}
	.overview_img {
		height: auto;
		width: 15%;
		margin-right: 5%;
	}
	.overview_copy {
		width: 65%;
	}
	.column {
		display:block;
		padding: 20px 0;
	}
	.mobile_block {
	display:block;
	}
.absolute_center {
	width: 120%;
	height: 120%;
	}
	.footer_column {
		width: calc(100% - 40px);
	}
	.footer_column a {
	line-height: 40px;
	padding:0px;
	}
	.footer_hint {
    margin: 20px 0 0px 0;
	}
	
	.logo, .logo_black {
    margin: 0px;
	}
	.footer_note {
   		margin: 5px 0;
		text-align: center;
	}
	.wp_blue {
		transform:translate(-50%,-60%);
	}
	.wp_svg {
		width: 170px;
		height: auto;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -60%);
	}
	.header_r1 {
	background-position:83% -275px;
    background-color: #0A0A0A;
    background-size: cover;
}
	.header_wp1 {background-size: 255%;
background-color: #a2192b;
background-position: 80% -140px;}
	.header_tms3 {
		background-image: url("../images/TMS_mockups_AW1.jpg");
background-attachment: scroll;
background-size: 135%;
background-color: #f6a71a;
	}
	.mobile_block {display:block;}
	.mobile_inline {display:inline-block;}
	.mobile_none {display:none;}
	
	.mobile_left {text-align:left;}
	.mobile_right {text-align:right;}
	.mobile_center {text-align:center;}
	.mobile_center_imp {text-align:center !important;}
	
	.mobile_full_width {width: 100%;}
	
	
	.mob_pos_fix_r1 {height: 130%; object-position: 100% 0px;}
	
	.mob_half_img {
		height:50%;
		width: 100%;
	}
	.mob_half_copy {
		height:50%;
		width: 100%;
		padding-top:35px;
	}
	.mob_full_img {
		height:100%;
	}
	.mob_full_copy {
		width:100%;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	
	.menu_icon_container {
		margin: 20px 0px 0 20px;
		left: 0px;
		z-index:102;
	}
	.left_copy_d {
		margin: 0 auto;
		width:calc(100% - 40px);
	}
	.icon_row_width {
			text-align: center;
			position: absolute;
			left: 50%;
			transform: translate(-50%,-50%);
			width: calc(90% - 10px);
			top: 45%;
			white-space: normal;
}
	.icon_col {display: inline-block;width: calc(33% - 5px);min-width: 100px;}

	.main_logo {
		margin: 0;
		right: 0px;
	}
	.mob_none {
		display:none;
	}
	.screen_overlay_left {
		transform: translate(-10%,-50%);
		
	}
	.mob_bg_pos_15 {
		background-position:15%;
		
	}
#next {
	display:none;
}
#prev {
	display:none;
}
	
	.eyebrow {
		text-align: center;
		padding-bottom:10px;
		
	}
	.quote {
	width: 85%;
	padding: 55px 20px;
	height: auto;
	}
	.quote h4 {
		font-size: 26px;
		line-height: 32px;}
	.quote h3{font-size:11px;}
	.logo, .logo_black {
	height:45px;
	width:45px;
}
	.half {
	width: calc(100% - 40px);
	height: auto;
	}
	
	.div_fixed {
		position:relative;
		text-align:center;
		left: revert;
		z-index: 1000;
		top: 100px;
		transform: revert;
	}
	.project_title {
		padding:20px 0 20px;
	}
	.project_img {
		width: 100%;
	}
	.panel {
		width:100%;
		text-align:center;
		padding:15px 0 5px 0;
	}
	.slide {
		width: calc(100% / 3) !important;

	}
	.skill_item {
		margin: 0px 0px 10px 0;
		width:100%;
	}
	.flex_column {
		flex-direction: column;
	}
	.copy_link {
font-size: 15px;
line-height: 22px;
}
	.column_projects {
		margin-left: 0;
margin-top: 110px;
margin-bottom: 50px;
	}
	.padding_mob{
		padding-right: 60px;
	}
	.header_index2 {background-position-x: 48%;}

	
	.home_project_cont div {
	width: 49%;
	margin: 1% 0;
}
}