* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
}


*:focus {
	outline:none !important;
}

@font-face {
    font-family: rlight;
    src: url(Rubik-Light.ttf);
}

@font-face {
    font-family: rblack;
    src: url(Rubik-Black.ttf);
}
@font-face {
	font-family: rReg;
	src: url(Rubik-Medium.ttf);
}
@font-face {
    font-family: rbold;
    src: url(Rubik-Bold.ttf);
}


/*data page positioning*/



.staged{
	top:0;
	left:0;
	transition:all 0.3s ease-in-out;
	height: 100%;
	background-color: white;
}


.off-right {
	transform:translateX(100%);
}
.off-left {
	transform:translateX(-100%);
}
.off-top {
	transform:translateY(-100%);
}
.off-bottom {
	transform:translateY(100%);
}

.staged.active {
	transform:translateX(0);
	opacity:1;
}

.top-of-project {
	position: relative;
}

/*Global*/

a {
	outline: none;
	text-decoration: none;
	cursor: pointer;

}


body, html { 
	margin: 0;
	height: 100%;
	font-size: 100%;

}

img {
	max-width: 100%;
	height: auto;
	opacity: 1;
	transition: opacity .35s linear;	
}

video {
	max-width: 100%;
}

h1,h2,h3,h4, p {
	margin:0;
	
}
p, h4, h3{
	font-family: 'rlight', sans-serif;
}
p{
	
	font-weight: 200;
	font-size: 1em;
	line-height: 1.5em;
	color:#808080;
	
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

li {
	font-size: 1em;
	color:#333333;
	font-family: 'rReg', sans-serif;

	
}

ul li::before {
	content: "\2022";
	color:#FBD460 ;
	font-size: 1.2em;
	font-weight: bold;
	margin-right: 1em;
}

h1 {
	font-size: 1.8em;
	line-height: 1em;
}

h2 {
	font-size: 1.3em;
}

h3 {
	font-size:1.3em;

}

h4 {
	font-size: 1em;
	padding-bottom: 5px;
	color:#333333;

}

h2, h1 {

	font-family: 'rblack', sans-serif;
	color:#333333;

}

h3 {
	font-family: 'rReg', sans-serif;
	color:#333333;
}

header {
	height: 40px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left:20px;
	width: 100%;
	position: absolute;
	left:0;
	top: 0;
	z-index: 30;
}

footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40px;
}


/*typography*/
.header-title {
	font-size: 1em;
	font-family: 'rblack', sans-serif;
	color: white;

}
.top-title {
	margin-top: 5vh;
	margin-bottom: 20px;
}

.project-title {
	position: absolute;
	top:40%;
	transform: translateY(-60%);
	z-index: 30;
	padding-right: 20px;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top-right-radius: 30px;
	opacity: .8;
}

.project-header {
	margin-top: 100px;

}

.intro-p {
	margin-top: 20px;
}

.intro-t {
	margin-top: 20px;
}

.small-title,
.sub-small-title {
	opacity: 1;
}

.small-title {
	font-size: 1em;
	font-family: 'rReg', sans-serif;
}


.sub-small-title {
	font-family: 'rlight', sans-serif;
	font-size: .8em;
}



/*btns*/

.btn,
.btn-small,
.btn-project { 
	text-align: center;
	vertical-align: middle;
	font-family: 'rbold', sans-serif;
	font-size: 1em;
	width: auto;
	transition: .1s ease-in-out;

}



.btn,
.btn-project {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 20px;
	padding-left: 20px;
	border: 2px solid #FBD460;
	transform-origin: center; 

}


.btn-small {
	padding-top: 8px;
	padding-bottom: 8px;
	padding-right: 8px;
	padding-left: 8px;
	border-left: 2px solid white;
	margin-top: 2px;
	margin-bottom: 2px;
	border-right: 2px solid transparent;

}

.box-btn {
	padding:10px;
	border: 2px solid white;

}

.btn-project {
	float: right;

}

.btn-landing {
	margin-top: 50px;
	right:0;
	
}

.btn-wrap {
	width: 100%;
	height: 36px;
}

.fa {
	color: white;
	width: 40px;
	font-size: 30px;
	text-decoration: none;
	transform: scale(1.5);
}

.fa-b {
	color: #68B5dc;
	width: 40px;
	font-size: 30px;
	text-decoration: none;
	transform: scale(1.5);
}

.fa:hover {
	transform: scale(1.8);
}


.filler {
	width: 100%;
	height: 100%;
}

.next-section-btn-down {
	top: -40px;
	transform-origin: bottom;
	padding-top: 5px;
	z-index: 11;
}

.next-section-btn-up {
	top:-40px;
	height: 0px;
	opacity: 0;
	padding-top: 15px;
	z-index: 10;
	
}

.next-section-btn-up,
.next-section-btn-down {
	
	transform: translateX(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	
	text-align: center;
	cursor: pointer;
	transform-origin: center; 

}

.next-page-title {
	padding-top: 5px;
	text-align: center;
	vertical-align: middle;
	z-index: 11;
	position: absolute;
	transform: translateX(-50%);
	left: 50%;

}

.color-change {
	opacity: 0;
}
.width0 {
	width: 0%;
}
.width25 {
	width: 25%;
}

.width35 {
	width: 35%;
}

.width50 {
	width: 50%;
}

.width65 {
	width:65%;
}

.width75 {
	width: 75%
}

.width100 {
	width: 100%;
}

@-webkit-keyframes width20 {
	0% {
		width: 0%;
	}
	100% {
		width: 20% ;
	}

}

@-webkit-keyframes width30 {
	0% {
		width: 0%;
	}
	100% {
		width: 30% ;
	}

}

@-webkit-keyframes width40 {
	0% {
		width: 0%;
	}
	100% {
		width: 40% ;
	}

}

@-webkit-keyframes width50 {
	0% {
		width: 0%;
	}
	100% {
		width: 50% ;
	}

}

@-webkit-keyframes width60 {
	0% {
		width: 0%;
	}
	100% {
		width: 60% ;
	}

}

@-webkit-keyframes width70 {
	0% {
		width: 0%;
	}
	100% {
		width: 70% ;
	}

}

@-webkit-keyframes width80 {
	0% {
		width: 0%;
	}
	100% {
		width: 80% ;
	}

}


@-webkit-keyframes width20Zero {
	0% {
		width: 20%;		
	}
	100% {
		width: 0%;
	}


}



@-webkit-keyframes width30Zero {
	0% {
		width: 30%;		
	}
	100% {
		width: 0%;
	}


}

@-webkit-keyframes width40Zero {
	0% {
		width: 40%;		
	}
	100% {
		width: 0%;
	}


}

@-webkit-keyframes width50Zero {
	0% {
		width: 50%;		
	}
	100% {
		width: 0%;
	}


}

@-webkit-keyframes width60Zero {
	0% {
		width: 60%;		
	}
	100% {
		width: 0%;
	}


}

@-webkit-keyframes width70Zero {
	0% {
		width: 70%;		
	}
	100% {
		width: 0%;
	}


}

@-webkit-keyframes width80Zero {
	0% {
		width: 80%;		
	}
	100% {
		width: 0%;
	}


}

@-webkit-keyframes move-down {
	
	0% {
		height: 40px;
		width: 40px;
		
	}
	100% {
		height: 10px;
		width: 10px;
		
	}
}
@-webkit-keyframes move-up {
	
	0% {
		height: 10px;
		width: 10px;
		
	}

	100% {
		height: 40px;
		width: 40px;
		
	}
}

@-webkit-keyframes fade-in {

	0% {
		opacity: 0;
		
	}

	100% {
		opacity: 1;
		
	}

}

@-webkit-keyframes fade-out {

	0% {
		opacity: 1;
		
	}

	100% {
		opacity: 0;
		
	}

}


/*shapes*/

.triangle-up, .triangle-down, .triangle-right, .triangle-left {
      width: 5px;
      height: 5px;
      opacity: 1;
      cursor: pointer;
      
      
}

.triangle-down,
.triangle-down-blue {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;  
    display: inline-block;
}
.triangle-down {
	border-top: 10px solid white; 
}
.triangle-down-blue {
	border-top: 10px solid #68B5dc; 
}

.triangle-up {
	border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid white;
    display: inline-block;  
}

.triangle-left {
   	border-top: 5px solid transparent;
    border-right: 10px solid white;
   	border-bottom: 5px solid transparent;
   	display: inline-block;
}

.triangle-right {
  	border-top: 5px solid transparent;
    border-left: 10px solid white;
    border-bottom: 5px solid transparent;
    display: inline-block;
}


/*page controllers*/

.flex-half {
	width: 50%;
	flex-direction: column;
}

.flex-row {
	width: 100%;
	flex-direction: row;
}	

.slideBox,
.slideBox-btm-cover,
.slideBox-top,
.slideBox-top-15,
.slideBox-top-5 {
	position: absolute;
	left: 0;
	width: 100%;

}

.slideBox-top {
	top: 20vh;
	z-index: 35;
}

.slideBox-top-15 {
	top: 15vh;
	z-index: 35;
}

.slideBox-top-5 {
	top: 5vh;
	z-index: 35;
}

.slideBox {
	bottom: 130px;
	height: 125px;
}


.slideBox-btm-cover {
	height: 130px;
	bottom: 0;

}

.white-grad{
background-image: -webkit-linear-gradient(rgba(255,255,255,0) 20%, rgba(255,255,255,1) 100%);
background-image: -o-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;

}



.row-wrap {
	width: 100%;
}

.p-small {
	padding-left: 20px;
	padding-right: 20px;
}

.page-cont,
.project-cont {
	
	position: relative;
	
}
.page-cont {
	width: 100%;
	height: calc(100vh - 40px);
}

.page {
	width: 100%;
	height: calc(100vh - 40px);

}

.page-max-width {
	max-width: 1350px;
	width: 100%;
	margin: 0 auto;
}

.page-cont {
	background-color: white;
}

.project-cont {
	height: 100%;
	position: relative;
}

.project-cont-absolute {
	position: absolute;
	top:0;
	left: 0;
}

.page,
.top-page-back {
	position: absolute;
	top: 0;
	left: 0; 
}

.top-page-back {
	width: 100%;
	height: 100vh;
}


.full-page-cont{
	width: 100%;
	height: 100vh;
}


.page-front{
	
}

.page-padding {
	padding-right: 20px;
	padding-left: 20px;
}

.side-pad {
	padding-left: 20px;
	padding-right: 20px;	
}

.bottom-bar,
.bottom-bar-color-change,
.top-bar {
	position: absolute;
	
}
.bottom-bar-no-ani {
	
}

.bottom-bar-menu{
	position: fixed;
	z-index: 4;

}

.next-page-btn {
	padding-top: 10px;
	height: 40px;
	font-family: 'rbold', sans-serif;
	font-size: 1em;
}
.next-right {
	text-align: right;
	padding-right: 20px;
}
.next-left {
	text-align: left;
	padding-left: 20px
}
.next-right,
.next-left {
	padding-top: 10px;
	font-family: 'rbold', sans-serif;
	font-size: 1em;
	padding-bottom: 10px;
}



.right-border-radius {
	border-top-right-radius: 25px;
}

.left-border-radius {
	border-top-left-radius: 25px;
}

.bottom-bar,
.top-bar,
.bottom-bar-menu,
.bottom-bar-color-change,
.bottom-bar-no-ani {
	width: 100%;
	height: 40px;
	min-height: 40px;
}

.top-page {
	margin-top: 40px;
}

.top-bar
 {
	top: 0;
}

.bottom-bar,
.bottom-bar-menu,
.bottom-bar-color-change {

	bottom: 0;
}



.float-right {
	float: right !important;
}

.float-left {
	float: left;
}

/*image controllers*/

.sink-bottom {
	transform: rotate(180deg);
}
.rotate-up {
	transform: rotate(180deg);
}
.img-parallax-bottom img {
	margin-top: 40px;

}

.small-hero,
.small-hero-middle{
	margin-top: -10vh;

}

.small-hero-top {
	bottom:0;
	left: 50%;
}

.small-hero {
	bottom: 0;
 	left: 50%;
 	transform: translate(-50%,0);
}

.small-hero-middle,
.small-hero-middle-shadow {
  	text-align: center;
}

.small-hero-middle img,
.small-hero-middle-shadow img {
	transform: rotate(180deg) ;
}

.small-hero-shadow,
.small-hero-middle-shadow,
.small-hero-top-shadow {
	margin-top: -13vh;
}

.small-hero img,
.small-hero-shadow img,
.small-hero-middle img,
.small-hero-middle-shadow img,
.small-hero-top img,
.small-hero-top-shadow img {
	max-height: 80vh;

}

.prof-img,
.prof-img-small {
	max-width: 65.66%;
}



.img-header-height {
	max-height: 90vh;
	max-width: 100%;

}	


.img-parallax-bottom {
	position: absolute;
 	pointer-events: none;
 	width:100%;
 	bottom: 0;
 	left: 50%;
 	transform: translate(-50%,0);
}

.img-parallax {
  position: absolute;
  top:0;
  left: 50%;
  transform: translate(-50%,0);
  pointer-events: none;
  width:100%;
}

.p-cont {
	width: 100%;
  height: 95vh;
  position: relative;
  overflow: hidden;

}

.project-hero img {
	max-height: 93vh;
	
}

.top-right,
.top-left,
.bottom-left,
.bottom-right {
	position: absolute;
}

.img-swap-tag {
	cursor: pointer;
	transform: scale(1);
	transition:all 0.2s ease-in-out;
	opacity: .7;

}
.img-swap-tag:hover {
	transform: scale(1.1);
	opacity: 1;
	 -moz-box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.3);
        box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.3);
	
}

.img-swap-tag:active {
	transform: scale(.9);
	opacity: 1;
	-moz-box-shadow: 0px 1px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0px 1px rgba(0, 0, 0, 0.5);
       box-shadow: 0px 1px rgba(0, 0, 0, 0.5);
	
}

@keyframes scaleup {

	0% {transform: scale(1.1);}
	25% {transform: scale(0.8);}
	100% {transform: scale(1.1);}

}

@keyframes scaledown {

	0% {transform: scale(1.1);}
	100% {transform: scale(1);}

}
.sample-screen {
	max-height: 130px;
	padding-left: 10px;
	padding-right:10px;
}


.sample-screen + .sample-screen {
	margin-top: 20px;
}

.small-screen-landing {
	max-height: 95vh;
	max-width: 100%;
	position: absolute;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%);
}

.prof-img-small {
	margin-top: 20vh;
	position: absolute;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%);
}


.phone-left {
	padding-right: 10px;
}


.phone-left,
.single-img {
	max-height: 430px;

}

.imgCard {
	height: 500px;
}

.landing-side-img{
	margin-top: 20px;

}


.landing-img-cont {
	padding-left: 20px;
	padding-right: 20px;
}




/*Special assets*/

.graph-bar-percent {
	height: 5px;
}

.graph-bar {
	padding: 2px;
}

.graph-bar-cont {
	padding: 5px;
}

.dropbox {
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	padding-top: 20px;
	padding-bottom: 20px;
	width: 50%;
	border-top-right-radius: 25px;
}

.foxBox {

	position: absolute;
	text-align: center;
	left: 50%;
    margin-right: -50%;
    transform: translate(-50%);
    margin-top: 2vh;
	border-top-right-radius: 50px;
	width: 58.3333%;
	z-index:15;    
	font-family: 'rbold', sans-serif;
}

.projectBox {
	position: absolute;
	text-align: center;
	left: 35%;
	margin-right: -75%;
	transform: translate(-50%);
	margin-top: 5vh;
	border-top-right-radius: 50px;
	width: 20%;
	z-index:15;    
	font-family: 'rbold', sans-serif;
}




.foxBox p,
.projectBox p{
	padding-right:10px ;
	padding-left:10px ;
	
}
.quote {
	font-family: 'rblack', sans-serif;
	font-size: 1.3em
}

.quote-top-left,
.quote-bottom-right {
	width: 100%;
	
}

.quote-top-left h1,
.quote-bottom-right h1 {
	margin: 0;
	padding:0;
	font-size: 3em;
	
}


.fB-reveal-bottom{

transform: scale(0,0);

}

.fB-reveal,
.fB-reveal-1,
.fB-reveal-2 {
	opacity: 1;

}


.foxBox-tail{
    transform: translate(-50%);
}

.dropBox-tail{
	transform: translate(-50%);
	margin-top: 20px;
	background-color: rgba(255,255,255,.9);
}

.foxBox-tail,
.dropBox-tail {
	left: 65%;
    margin-right: -45%;
	position: absolute;
	z-index: 10;
	width: 16.666%;
	height: 25px;
	border-bottom-right-radius: 75px;
}

.tiny-logo {
	max-height: 40px;
	max-width: 100%;
}





.maintitle {
	text-align: center;
	margin-top: 5vh;

}



.FRlogopara{
	width: 100%;
}



/*hide-show*/

.hidden {
	display: none;
}

.show {
	display: block;
}


/*.smallscreen-img {
	display: block;
	max-width: 100%;
}

.largescreen-img {
	display: none;
}*/



@media (min-width:0){

.FRlogo {
	max-width: 45%;
	max-height: 35vh;
	margin-top: 30px;
   
}	

.b-top-img {
	max-height: 90vh;
	padding-right: 10px;
}

.b-top-img-cont {
	text-align: left;
}

.f-top-img-cont {
	text-align: center;
}

.f-top-img {
	max-height: 85vh;
}

.centerText {
	text-align: center;
}

.fr-posters,
.landing-side-img {
	padding-left:10px;
	padding-right:0px;
	padding-bottom: 0px;
}

.fr-posters {
	margin-top: 40px;

}

.phone-side {
	padding-left: 10px;
	padding-right: 0px;
	margin-top: 0;
}

.single-img {
	padding-right: 0;
}

.flex-wrap {
	width: 100%;
	flex-direction: row;
}

.flex-wrap,
.list-cont,
.flex-img-cont {
	display: flex;
	
}
.flex-img-cont {
	width: 100%;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	height: 100%;
}

.flex-img-cont img {
	flex: 1 1 100%;
	padding: 10px;
}

.list-cont {
	width: 100%;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	height: 100%;
}

.list-cont li{
	margin-top: 20px;
	

}

}



@media (min-width:415px){



h1 {
	font-size: 2em;
	padding-bottom: 5px;
}

h2 {
	font-size: 1.7em;
}

h3 {
	font-size:1.4em;

}

h4 {
	font-size: 1.2em;
}
/*
.smallscreen-img {
	display: none;
}
.largescreen-img {
	display: block;
	max-width: 100%;
}	*/
.zero-top-img {
	max-height: 90vh;
}

.small-hero img,
.small-hero-shadow img,
.small-hero-middle img,
.small-hero-middle-shadow img,
.small-hero-top-shadow img,
.small-hero-top img,
.small-hero-top-shadow img {
	max-height: 65vh;
}

.small-hero-middle,
.small-hero-middle-shadow {
	text-align: right;
}

.small-hero-middle img {
	margin-right: 10px;
}

.small-hero-top img,
.small-hero-top-shadow img {
	display: none;

}

.centerText {

}



.prof-img {
	max-width: 100%;
}

.page-padding,
.p-small,
.side-pad {
	padding-right: 16.666%;
	padding-left: 16.666%;
}


.flex-wrap {
	width: 100%;
	flex-direction: column;
}	




.flex-wrap {
	width: 50%;
}



.FRlogo {
	text-align: center;
	max-width: 33.3333%;  
}

.foxBox {
	width:33.3333% ;
	margin-top: 5vh;
}

.foxBox p {
	padding-right:20px ;
	padding-left:20px ;
	
}

.sample-slide {
	padding-right: 0px;
}

.fr-posters {
	padding-left:5px;
	padding-right:5px;
	padding-top: 20px;
	padding-bottom: 10px;
	margin-top: 0;
}

.phone-side {
	padding-left: 10px;
	margin-top: 30px;
}

.single-img {
	padding-right: 0;
}

.border-left-yellow,
.border-right-ywllow {
	border-left: 0px solid;
}

.top100-lg {
	margin-top: 100px;
}

}







@media (min-width:801px){


h1 {
	font-size: 3em;
}

h2 {
	font-size: 2em;
}

.largescreen-img {
	display: block;
	max-width: 100%;
}

.small-hero img,
.small-hero-shadow img,
.small-hero-middle img,
.small-hero-middle-shadow img,
.small-hero-top img,
.small-hero-top-shadow img {
	max-height: 68vh;
	max-width: 100%;
}

.small-hero-top,
.small-hero-top-shadow {
	margin-left:20%;
}

.small-hero-top img,
.small-hero-top-shadow img {
	display: block;
	max-width: 100%;

}
.small-hero-top{
	margin-top:45vh;
}

.small-hero-top-shadow {
	margin-top:43.5vh;
}

.small-hero-middle,
.small-hero-middle-shadow {
	margin-left: 40%;
	text-align: left;

}

.small-hero-middle img {
	margin-right: 0px;
}


.list-cont {
	width: 100%;
	align-items: center;
	justify-content: space-between;
	height: 60px;
	flex-direction: row;
}

.page-padding {
	padding-right: 16.666%;
	padding-left: 16.666%;
}

.p-small {
	padding-right: 0px;
	padding-left: 0px;
}


.border-left-yellow{
	border-left: 2px solid;
	height: 150px;
}

.border-right-yellow
{
	border-right: 2px solid;
	height: 150px;
}


.fr-posters {
	padding-left:10px;
	padding-right:10px;
	padding-top: 20px;
	padding-bottom: 0;
	margin-top: 0;
}



.btn-landing {
	margin-right: 16.666%;
	bottom: 80px;
}

.sample-slide {
	padding-right: 20px;
}

.phone-left,
.phone-side,
.single-img {
	padding-right: 10px;
}

.phone-side {
	padding-left: 10px;
	margin-top: 30px;
}

.push-left {
	padding-left: 16.666%;
}

.push-right {
	padding-right: 16.666%;
}

.top-title {
	margin-top: 40px;
	margin-bottom: 40px;
}	




.landing-intro {

	padding-left: 10px;

}


.foxBox {
	
    margin-top: 5vh;
	width:25%;

    
}

.foxBox-tail{
	position: absolute;
	left: 65%;
    margin-right: -45%;
    transform: translate(-50%);
    z-index: 10;
	width: 12%;
	height: 25px;
	border-bottom-right-radius: 75px; 

}

.FRlogo {
	text-align: center;
	max-width: 25%;
	   
}




.intro-t {
	margin-top: 0;
}



}

@media (min-width: 950px) {


	.foxBox {
		width: 20%;
	margin-top: 5vh;
	}
	   


}

@media (min-width: 1400px) {

	.top-title {
	margin-top: 13vh;
	margin-bottom: 40px;
}


	.foxBox {
	width: 13%;
	}
	   


}



@media screen and (min-height: 900px) {

.top-title {
	margin-top: 10vh;
	margin-bottom: 40px;
}

.foxBox {
	margin-top: 15vh;
}	

}