@import "bourbon";
@Import "neat";
@import "base/base";
@import "hero";
@import "button";

body {
	$base-border-radius: 3px !default;
	$action-color: #477DCA !default;
	$large-screen: em(860) !default;
	$device-padding-vertical: 5em;
	$device-offset-vertical: 10em;
	$device-padding-horizontal: 0.4em;
	$device-screen-width: 14em;
	$device-screen-height: 25em;
	$device-background: darken(gray, 40%);
	$device-backside-background: darken($device-background, 10%);
	$device-text-color: #010101;
	$device-text-background: transparentize(white, .5);
	$device-background-top: #162C4C; 
	$device-background-bottom: #0A120D;
	$gradient-angle: 10deg;
	$device-image: '../img/ps_neutral.png';
	$device-screen-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/cosmin_capitanu_screen.jpg';

	@include background(url($device-image), linear-gradient($gradient-angle, $device-background-bottom, $device-background-top), no-repeat $device-background-top scroll);
	background-repeat: repeat;
	//background-size: cover;
	width: 100%;

	.device-text {
		color: $device-text-color;
		background-color: $device-text-background;
		padding: 2em;
		margin: 2em;
		border-radius: 5px;

		@include media($large-screen) {
			float: left;
			max-width: 50%;
		}

		h4 {
			border-bottom: 1px solid transparentize($device-text-color, 0.7);
			font-size: 1.5em;
			margin: 0 0 0.5em 0;
			padding-bottom: 0.5em;
		}

		p {
			line-height: 1.5em;
			margin-bottom: 1.5em;
		}

		.button {
			font-size: 1.5em;
			padding: .75em 2em;
		}
	}

	.device {
		display: none;
		position: relative;

		@include media($large-screen) {
			@include transform(
				perspective(800px) 
				translateX(0px) 
				translateY(-100px) 
				translateZ(50px) 
				rotateX(0deg) 
				rotateY(-20deg) 
				rotateZ(-0deg));
			background: $device-background;
			margin-top: $device-offset-vertical;
			border-radius: 2em;
			box-shadow: 
				1px 0px lighten($device-backside-background, 20%), 
				4px 0px lighten($device-backside-background, 2%),
				7px 0px $device-backside-background,
				10px 0px $device-backside-background,
				13px 0px $device-backside-background;
			display: block;
			float: right;
			margin-bottom: -12em;
			margin-right: 5em;
			padding: $device-padding-vertical 0;
			width: $device-screen-width + (2 * $device-padding-horizontal);
			z-index: 99999;

			.screen {
				@include size($device-screen-width $device-screen-height);
				background-image: url($device-screen-image);
				background-size: cover;
				border-radius: 0.2em;
				box-shadow: inset 0 1px 8px transparentize(black, 0.5);
				margin: auto;
			}
		}
	}


	@mixin grid-item-columns($columns) {
		width: (100% / 12) * $columns;
	}

	.grid-items-lines {
		$base-background-color: transparent;
		$dark-gray: #333 !default;
		$light-gray: #DDD !default;
		$medium-screen: em(640) !default;
		$large-screen: em(860) !default;
		$base-font-color: $dark-gray !default;
		$grid-items-background: $base-background-color;
		$grid-item-background: $base-background-color;
		$grid-item-border: 1px solid transparentize($base-font-color, 0.8); 
		$grid-item-columns: 6;
		$grid-item-big-columns: 8;
		$grid-item-color: $base-font-color;
		$grid-item-height: 14em;

		@include clearfix;
		position: relative;
		width: 100%;
			
		.grid-item {
			@include transition (all 0.2s ease-in-out);
			background: $grid-item-background;
			float: left;
			overflow: hidden;
			outline: none;
			text-decoration: none;
			width: 100%;

			@include media($large-screen) {
				@include grid-item-columns($grid-item-columns);
				padding: 2em;
				height: $grid-item-height;
				&.left {
					border-right: $grid-item-border;
				}
				&.right {
					border-left: $grid-item-border;
				}
			}
		}

		.grid-item img {
				display: block;
				height: 2.5em;
				margin-bottom: 1.2em;
				opacity: 0.2;
		}

		.grid-item h1 {
				color: $grid-item-color;
				font-size: 1.3em;
				margin-bottom: 0.4em;
		}

		.grid-item p {
				color: transparentize($grid-item-color, 0.4);
				line-height: 1.5em;
				
				@include media($medium-screen) {
					max-width: 70%;
				}
		}
	}
}