Rambox-CE/100/sass/style.scss

$font-primary: 'Work Sans', Arial, sans-serif;
$font-secondary: 'Playfair Display', Times, serif;

// Overrides
$grid-gutter-width: 40px !default;
$border-radius-base:  4px !default;
$padding-base-vertical: 14px !default;

$brand-primary: #3274B6 !default;
$brand-secondary: #504848 !default;
$brand-tertiary: #85919d !default;




$brand-white: #fff;
$brand-black: #000;
$brand-darker: #444;
$brand-gray: #ccc;
$brand-lighter: #e9e9e9;
$brand-body-color: #818892;
$brand-selection-color: $brand-primary;
$brand-overlay-color: #3b3d40;
$brand-bg-color: #efefef;

$input-border-focus:  $brand-primary !default;
$form-group-margin-bottom:       30px !default;



// Mixin
@mixin fh5co-translate($translatex) {
	-moz-transform: translateX($translatex);
	-webkit-transform: translateX($translatex);
	-ms-transform: translateX($translatex);
	-o-transform: translateX($translatex);
	transform: translateX($translatex);
}
@mixin transition($transition) {
    -moz-transition:    $transition ease;
    -o-transition:      $transition ease;
    -webkit-transition: $transition ease;
    -ms-transition: 		$transition ease;
    transition:         $transition ease;
}
@mixin inline-block() {
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
}
@mixin flex() {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
}
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
@mixin flex() {
	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	display: flex;
}
@mixin flexwrap() {
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
}

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon/icomoon.eot?srf3rx');
	src:url('../fonts/icomoon/icomoon.eot?srf3rx#iefix') format('embedded-opentype'),
		url('../fonts/icomoon/icomoon.ttf?srf3rx') format('truetype'),
		url('../fonts/icomoon/icomoon.woff?srf3rx') format('woff'),
		url('../fonts/icomoon/icomoon.svg?srf3rx#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

@mixin icomoon() {

	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

}

// Import
@import 'bootstrap/mixins';
@import 'bootstrap/variables';




/* =======================================================
*
* 	Template Style
*	Edit this section
*
* ======================================================= */

// Template Base
html {
	background: #222222;
}
body {
	font-family: $font-primary;
	font-size: 18px;
	line-height: 34px;
	background: #222222;
	font-weight: 300;
	opacity: 0;
	color: #222;
}


a {
	color: $brand-primary;
	@include transition(.5s);
	border-bottom: 2px solid rgba(255,255,255,.1);
	&:hover, &:active, &:focus {
		color: $brand-white;
		outline: none;
		text-decoration: none;
		border-bottom: 2px solid rgba(255,255,255,1);
	}
}
p, figure {
	margin-bottom: 1.5em;
}

h1, h2, h3, h4, h5, h6 {
	color: $brand-white;
	font-family: $font-primary;
	font-weight: 400;
	margin: 1.5em 0 1.5em 0;
}
::-webkit-selection {
  color: $brand-white;
  background: $brand-black;
}

::-moz-selection {
  color: $brand-white;
  background: $brand-black;
}

::selection {
  color: $brand-white;
  background: $brand-black;
}

#fh5co-page {
	overflow: hidden;
}

#fh5co-nav {
	text-align: center;
	position: absolute;
	width: 100%;
	z-index: 99;
	ul {
		padding: 0;
		margin: 0;
		li {
			padding: 0;
			margin: 0;
			list-style: none;
			@include inline-block;
			a {

				color: rgba(255,255,255,.5);
				padding: 20px 0 5px 0px;
				margin-left: 10px;
				margin-right: 10px;
				border-bottom: transparent 2px solid;
				@include inline-block;
				@include transition(.5s);
				&:hover, &:focus, &:active {
					color: rgba(255,255,255,1);
					border-bottom: rgba(255,255,255,1) 2px solid;
				}
			}
			&.fh5co-active {
				a {
					color: rgba(255,255,255,1);
					border-bottom: rgba(255,255,255,.1) 2px solid;
				}
			}
		}
	}
}

#fh5co-header {
	height: 100vh;
	width: 100vw;
	position: relative;
	// Viewport Units Buggyfill for IE9+
	content: 'viewport-units-buggyfill; height:100vh; width: 100vw';
	display: table;

	@media screen and (max-width: $screen-sm) {
		height: auto!important;
		padding: 3em 0;
		width: 100vw;
		content: 'viewport-units-buggyfill; width: 100vw';
	}


	.fh5co-text-wrap {
		height: 100vh;
		width: 100vw;
		content: 'viewport-units-buggyfill; height:100vh; width: 100vw';

		display: table-cell;
		vertical-align: middle;
		@media screen and (max-width: $screen-sm) {
			height: auto!important;
			padding: 3em 0;
			height: 100vh;
			width: 100vw;
			content: 'viewport-units-buggyfill; height:100vh; width: 100vw';
		}
	}
	.fh5co-intro-text {
		-webkit-transform: skewY(-7deg);
		-moz-transform: skewY(-7deg);
		-ms-transform: skewY(-7deg);
		-o-transform: skewY(-7deg);
		transform: skewY(-7deg);
		text-align: center;
	}
	h1 {
		font-size: 3.5em;
		line-height: 100px;
		font-weight: 600;
		letter-spacing: 15px;
		margin: 0;
		padding: 0;
		text-transform: uppercase;
		color: #fff;
		span {
			font-family: $font-secondary;
			font-style: italic;
			text-transform: none!important;
		}

		@include transition(.5s);

		@media screen and (max-width: $screen-lg) {
			font-size: 2.9em;
			line-height: 80px;
			font-weight: 700;
			letter-spacing: 9px;
		}
		@media screen and (max-width: $screen-sm) {
			font-size: 2.2em;
			line-height: 60px;
			font-weight: 700;
			letter-spacing: 9px;
		}
		@media screen and (max-width: $screen-xs) {
			font-size: 1.5em;
			line-height: 50px;
			font-weight: 400;
			letter-spacing: 2px;
		}

	}
	span {
		margin: 0;
		padding: 0;
	}
	h2 {
		font-family: $font-secondary;
		font-weight: 400;
		font-size: 24px;
		line-height: 34px;
		font-style: italic;
		letter-spacing: .09em;

		@media screen and (max-width: $screen-xs) {
			font-weight: 400;
			font-size: 18px;
			line-height: 30px;
		}
	}
}

.btn-next {
	position: absolute;
	bottom: 2em;
	left: 50%;
	@media screen and (max-width: $screen-xs) {
		bottom: 4px;
	}
	a {
		display: block;
		text-align: center;
		@include transition(.5s);
		border-bottom: none;
		span {
			display: block;
			color: rgba(255,255,255,.3);
			font-size: 18px;
			letter-spacing: 1px;
			font-weight: 300;
			@include transition(.5s);
		}
		i {
			@include transition(.5s);
			font-size: 20px;
			color: rgba(255,255,255,.3);
			color: $brand-primary;
			@media screen and (max-width: $screen-xs) {
				font-size: 20px;
			}
		}
		&:hover {
			color: rgba(255,255,255,.7);
			span {
				color: rgba(255,255,255,.7);
			}
			i {
				color: $brand-primary;
			}
		}
	}
}
.fh5co-bio-photo {
	img {
		max-width: 100%;
		-webkit-box-shadow: 6px 24px 61px -12px rgba(0,0,0,0.49);
		-moz-box-shadow: 6px 24px 61px -12px rgba(0,0,0,0.49);
		-ms-box-shadow: 6px 24px 61px -12px rgba(0,0,0,0.49);
		-o-box-shadow: 6px 24px 61px -12px rgba(0,0,0,0.49);
		box-shadow: 6px 24px 61px -12px rgba(0,0,0,0.49);
		@include transition(.5s);
		@include border-radius(7px);
	}

}
.fh5co-project {

	height: 100vh;
	width: 100vw;
	content: 'viewport-units-buggyfill; height:100vh; width:100vw';
	display: table;
	position: relative;
	// overflow: hidden;

	&:before {

		content : "";
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 2px;
		background: rgba(255,255,255,.03);
		width: 101%;
		-webkit-transform: skewY(-7deg);
		-moz-transform: skewY(-7deg);
		-ms-transform: skewY(-7deg);
		-o-transform: skewY(-7deg);
		transform: skewY(-7deg);
	}
	&.no-border {
		border-bottom: none;
		&:before {
			display: none;
		}
	}
	@media screen and (max-width: $screen-sm) {
		// height: 700px;
		height: inherit!important;
		padding: 3em 0;
	}
	&.fh5co-reverse {

	}
	.fh5co-project-inner	{
		display: table-cell;
		vertical-align: middle;
		height: 100vh;
		width: 100vw;
		content: 'viewport-units-buggyfill; height:100vh; width:100vw';
		position: relative;

		@media screen and (max-width: $screen-sm) {
			// height: 700px;
			float: left;
			width: 100%;
			height: inherit!important;
			padding: 3em 0;
			// height: 100vh;
			width: 100vw;
			content: 'viewport-units-buggyfill; width:100vw';
		}
	}
	.fh5co-imgs {
		height: calc(100% - 50%);
		position: relative;
		@media screen and (max-width: $screen-sm) {
			margin-bottom: 30px;
		}
		.img-holder-1,
		.img-holder-2 {

			position: absolute;
			@include border-radius(7px);
			@media screen and (max-width: $screen-sm) {
				position: relative;
			}
			img {
				max-width: 100%;
				-webkit-box-shadow: 6px 24px 61px -12px rgba(0,0,0,0.49);
				-moz-box-shadow: 6px 24px 61px -12px rgba(0,0,0,0.49);
				-ms-box-shadow: 6px 24px 61px -12px rgba(0,0,0,0.49);
				-o-box-shadow: 6px 24px 61px -12px rgba(0,0,0,0.49);
				box-shadow: 6px 24px 61px -12px rgba(0,0,0,0.49);
				@include transition(.5s);
				@include border-radius(7px);
			}
		}
		.img-holder-1 {
			left: 0;
			bottom: 0;

			@media screen and (max-width: $screen-sm) {
				right: 0;
			}
		}
		.img-holder-2 {
			bottom: -2em;
			right: 50px;
			@media screen and (max-width: $screen-sm) {
				position: absolute;
			}
			@media screen and (max-width: $screen-xs) {
				right: 30px;
				bottom: -1em;
				img {
					@include transition(.5s);
					max-width: 100%;
					height: 194px;

				}
			}
		}
	}
	&.fh5co-reverse  {
		.img-holder-1 {
			left: auto;
			right: 0;
			img {
				text-align: right;
			}
		}
		.img-holder-2 {
			bottom: -2em;
			right: auto;
			left: 50px;

			@media screen and (max-width: $screen-sm) {
				position: absolute;
				left: auto;
				right: 50px;
			}

			@media screen and (max-width: $screen-xs) {
				right: 30px;
				bottom: -1em;
				img {
					@include transition(.5s);
					max-width: 100%;
					height: 194px;

				}
			}

		}
	}
	.fh5co-text {
		padding-top: 3em;
		h2 {
			color: rgba(255,255,255,1);
			margin-bottom: 20px;
		}
		p {
			color: rgba(255,255,255,.5);
		}
	}
};

#fh5co-main,
.fh5co-section {
	padding: 7em 0;
	position: relative;
	color: rgba(255,255,255,.5);
	small {
		font-size: 13px;
	}
	.fh5co-lead {
		font-size: 26px;
		line-height: 38px;
		color: rgba(255,255,255,.6);
		@media screen and (max-width: $screen-sm) {
			font-size: 22px;
		line-height: 34px;
		}
	}
}



#fh5co-footer {
	padding: 7em 0em;
	color: rgba(255,255,255,.2);
	position: relative;
	&:before {

		content : "";
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 1px;
		background: rgba(255,255,255,.1);
		width: 101%;
		-webkit-transform: skewY(-7deg);
		-moz-transform: skewY(-7deg);
		-ms-transform: skewY(-7deg);
		-o-transform: skewY(-7deg);
		transform: skewY(-7deg);
	}
}

.fh5co-project-detail {
	padding: 7em 0;
	position: relative;
	color: rgba(255,255,255,.3);

	&:before {

		content : "";
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 1px;
		background: rgba(255,255,255,.1);
		width: 101%;
		-webkit-transform: skewY(-7deg);
		-moz-transform: skewY(-7deg);
		-ms-transform: skewY(-7deg);
		-o-transform: skewY(-7deg);
		transform: skewY(-7deg);
	}
}

.fh5co-section-heading {
	margin-top: 0px;
	line-height: 38px;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	.fh5co-number {
		color: rgba(255,255,255,.2);
		padding-bottom: 2px;
		margin-right: 10px;
		@include inline-block;
		sup {
			top: -.25em;
			position: relative;

		}
	}
}


.fh5co-testimony {
	padding: 0;
	margin: 0;
	border-left: none;
	p {
		font-family: $font-primary;
		font-size: 20px;
		line-height: 38px;
		font-style: italic;
		color: rgba(255,255,255,.7);
	}
	.fh5co-quote {
		margin-bottom: 10px;
	}
	p {
		cite {
			color: rgba(255,255,255,.5);

		}
	}
}


.fh5co-social {
	padding: 0;
	margin: 0;
	li {
		padding: 0;
		margin: 0;
		list-style: none;
		@include inline-block;
		a {
			padding: 10px;

			font-size: 20px;
			color: rgba(255,255,255,.3);
			border-bottom: none;
			@include inline-block;
			@include transition(.5s);
			&:hover {
				color: rgba(255,255,255,.7);
			}
		}
	}
	&.fh5co-stack {
		li {
			display: block;
			a {
				display: block;
				padding: 5px 10px;
				border-bottom: none;
			}
			i {
				// float: left;
				width: 24px;
				top: 2px;
				position: relative;
				@include inline-block;
				margin-right: 10px;
			}
		}
	}
}

#fh5co-map {
	height: 500px;
	width: 100%;
	@media screen and (max-width: $screen-xs ) {
		height: 250px;
	}
}

.fh5co-list-style-1 {
	padding: 0;
	margin: 0 0 1.5em 0;
	&.fh5co-inline {
		float: left;
		margin-right: 3em;
		@media screen and (max-width: $screen-xs) {
			margin-right: 0px;
			float: none;
		}
	}
	li {
		list-style: none;
		padding-left: 2em;
		position: relative;
		&:before {
			content: "";
			left: 0;
			top: .75em;
			position: absolute;
			width:7px;
			height: 7px;
			@include border-radius(50%);
			background: rgba(255,255,255,.5);
			background: $brand-primary;
		}
	}
}


.flexslider {
	background: none;
	border: none;
	img {
		@include transition(.5s);
		@include border-radius(7px);
	}

	.flex-control-paging li a {
		background: rgba(255,255,255,1);
		box-shadow: none!important;
	}
	.flex-control-nav {
		bottom: -60px;
	}
}


.style-toggle {
	position: absolute;
	z-index: 999;
	top: 25px;
	right: 15px;
	background: lighten($brand-black, 0%);
	width: 40px;
	height: 20px;
	border-bottom: none!important;
	@include transition(.5s);
	@include border-radius(100px);
	@include inline-block;
	.fh5co-circle {
		height: 20px;
		width: 20px;
		@include transition(.5s);

		background: rgba(255,255,255,1);
		-webkit-box-shadow: 0px 0 2px 0px rgba(0,0,0,0.49);
		-moz-box-shadow: 0px 0 2px 0px rgba(0,0,0,0.49);
		-ms-box-shadow: 0px 0 2px 0px rgba(0,0,0,0.49);
		-o-box-shadow: 0px 0 2px 0px rgba(0,0,0,0.49);
		box-shadow: 0px 0 2px 0px rgba(0,0,0,0.49);
		@include border-radius(100px);
		display: block;
	}
	&.active {
		.fh5co-circle {
			height: 20px;
			width: 20px;
			position: relative;
			margin-left: 20px;
			@include transition(.5s);

			background: rgba(255,255,255,1);
			-webkit-box-shadow: 0px 0 2px 0px rgba(0,0,0,0.49);
			-moz-box-shadow: 0px 0 2px 0px rgba(0,0,0,0.49);
			-ms-box-shadow: 0px 0 2px 0px rgba(0,0,0,0.49);
			-o-box-shadow: 0px 0 2px 0px rgba(0,0,0,0.49);
			box-shadow: 0px 0 2px 0px rgba(0,0,0,0.49);
			@include border-radius(100px);
			display: block;
		}
	}

}

// // Helper Class

.col-xxs-12 {
	@media screen and (max-width: 480px) {
		float: none;
		width: 100%;
	}
}
.btn-cta {
	padding: 20px 30px!important;
	width: 200px;
	font-size: 18px;
	@media screen and (max-width: $screen-xs) {
		padding: 10px 30px!important;
		width: 100%;
	}
}
.row-bottom-padded-lg {
	padding-bottom: 7em;
	@media screen and (max-width: $screen-sm ) {
		padding-bottom: 2em;
	}
}
.row-top-padded-lg {
	padding-top: 7em;
	@media screen and (max-width: $screen-sm ) {
		padding-top: 2em;
	}
}
.row-bottom-padded-md {
	padding-bottom: 4em;
	@media screen and (max-width: $screen-sm ) {
		padding-bottom: 2em;
	}
}
.row-top-padded-md {
	padding-top: 4em;
	@media screen and (max-width: $screen-sm ) {
		padding-top: 2em;
	}
}
.row-bottom-padded-sm {
	padding-bottom: 2em;
	@media screen and (max-width: $screen-sm ) {
		padding-bottom: 2em;
	}
}
.row-top-padded-sm {
	padding-top: 2em;
	@media screen and (max-width: $screen-sm ) {
		padding-top: 2em;
	}
}


.no-js #loader {
	display: none;
}
.js #loader {
	display: block; position: absolute; left: 100px; top: 0;
}
.fh5co-loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../images/hourglass.svg) center no-repeat #222222;
}

.animate-box {
	.js & {
		opacity: 0;
	}
}

@import url(http://fonts.googleapis.com/css?family=Oswald);

.btn{
    margin: 4px;
    box-shadow: 1px 1px 5px #888888;
}

.btn-xs{
    font-weight: 300;
}

.btn-hot {
	color: #fff;
	background-color: #db5566;
	border-bottom:2px solid #af4451;
}

.btn-hot:hover, .btn-hot:focus, .open>.dropdown-toggle.btn-hot {
	color: #fff;
	background-color: #df6a78;
	border-bottom:2px solid #b25560;
	outline: none;
}

.btn-hot:active, .btn-hot.active {
	color: #fff;
	background-color: #c04b59;
	border-top:2px solid #9a3c47;
	margin-top: 2px;
}

.btn-twitter {
	color: #fff;
	background-color: #51A5E4;
	border-bottom:2px solid #0095E0;
}

.btn-twitter:hover, .btn-twitter:focus, .open>.dropdown-toggle.btn-twitter {
	color: #fff;
	background-color: #51A5E4;
	border-bottom:2px solid #0095E0;
	outline: none;
}

.btn-twitter:active, .btn-twitter.active {
	color: #fff;
	background-color: #51A5E4;
	border-top:2px solid #0095E0;
	margin-top: 2px;
}

.btn-facebook {
	color: #fff;
	background-color: #2274B9;
	border-bottom:2px solid #0095E0;
}

.btn-facebook:hover, .btn-facebook:focus, .open>.dropdown-toggle.btn-facebook {
	color: #fff;
	background-color: #2274B9;
	border-bottom:2px solid #0095E0;
	outline: none;
}

.btn-facebook:active, .btn-facebook.active {
	color: #fff;
	background-color: #2274B9;
	border-top:2px solid #0095E0;
	margin-top: 2px;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
    outline: none;
    outline-offset: 0px;
}

.progress-bar-default {
	background-color: transparent !important;
	color: black;
	@include box-shadow(none !important);
}

/* Style the Image Used to Trigger the Modal */
.screenshot {
    cursor: pointer;
    transition: 0.3s;
	width: 300px;
	margin: 10px;
}

.screenshot:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding: 2%; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
	overflow: hidden;
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}