/* ----- RESET ----- */
html{color:#000;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin :0;padding :0;}
table{border-collapse :collapse;border-spacing :0;}
fieldset,img{border :0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style :inherit;font-weight :inherit;}
del,ins{text-decoration :none;}
li{list-style :none;}
caption,th{text-align :left;}
h1,h2,h3,h4,h5,h6{font-size :100%;font-weight :normal;}
q:before,q:after{content :'';}
abbr,acronym{border :0;font-variant :normal;}
sup{vertical-align :baseline;}
sub{vertical-align :baseline;}
legend{color :inherit;}
input,button,textarea,select,optgroup,option{font-family :inherit;font-size :inherit;font-style :inherit;font-weight :inherit;}
input,button,textarea,select{*font-size :100%;}
input{background :-webkit-gradient(linear,left top,left bottom,from(#FFF),to(#FFF));}
img{display:block}
a{outline: 0;}
/* ----- END RESET ----- */

/* ----- Global Styles ----- */
body{
	width: 100%;
	min-width: 320px;
	background: #cde1e0;
	font: normal normal normal 1em Helvetica, Arial, sans-serif;
	color: #000;
}

.perspective{
	-webkit-perspective	: 1000px;
  -moz-perspective	 	: 1000px;
  -o-perspective		 	: 1000px;
	perspective 				: 1000px;
}

.transition-halfsecond-all{
	-webkit-transition: transform 0.5s ease, opacity 0.5s ease;
    -moz-transition: 	transform 0.5s ease, opacity 0.5s ease;
    -o-transition: 		transform 0.5s ease, opacity 0.5s ease;
    transition: 			transform 0.5s ease, opacity 0.5s ease;
}

.preserve-3d{
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: 	 preserve-3d;
	-o-transform-style: 	 preserve-3d;
	transform-style: 		 preserve-3d;
}

.Safari .preserve-3d{
	-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ----- End Global Styles ----- */

/* ----- Header ----- */

header {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: 	border-box; /* Firefox, other Gecko */
	box-sizing: 		border-box; /* Opera/IE 8+ */

	padding:16px 16px 0 16px;

	width:100%;

	background: url('../img/bkg-header.jpg') no-repeat scroll top left;

	-webkit-background-size:	100% 163px;
  -moz-background-size: 		100% 163px;
  -o-background-size:			100% 163px;
  background-size:			100% 163px;
}

	header .logo {
		position:relative;
		display:inline-block;
		width:312px;
		height:68px;
	}
	header .logo:hover { opacity:0.75; }

	header .header-links {
		float:right;
		margin-top:20px;
	}

		header .header-links .header-link { float:left; }

			header .header-links .header-link a {
        font-family: 'Ruda', sans-serif;
        font-weight: 400;
				color: black;
        text-decoration: none;
        opacity: 0.75;
			}

			header .header-links .header-link a:hover { opacity:1.0; }

			header .header-links .header-link a.linkedin {
        margin-left: 10px;
        padding-left: 10px;
        border-left: 1px solid black
      }

	header .hero {
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: 	border-box; /* Firefox, other Gecko */
		box-sizing: 		border-box; /* Opera/IE 8+ */

		margin:5px 4px;
		border-top:2px solid #000;
		border-bottom:2px solid #000;
	}

		header .hero-inner {
			background: #e9e5e0 url('../img/bkg-hero.jpg') no-repeat scroll top center;
			-webkit-background-size:	cover;
		    -moz-background-size: 		cover;
		    -o-background-size:			cover;
		    background-size:			cover;
			display:table;
			width:100%;
		}

			header .hero-inner .content{
				display:table-cell;
				vertical-align: middle;
				height:160px;
				padding:0 0 0 95px;
			}

				header .hero-inner .content h1 {
					font-family: 'Ruda', sans-serif;
					line-height:1.2em;
					font-weight:700;
					font-size:28px;
					text-shadow: 0 0 5px rgba(0,0,0,0.5);
					margin-bottom:5px;
				}

				header .hero-inner .content p {
					font-family: Arial, sans-serif;
					line-height:1em;
					font-size:16px;
					margin: 0;
				}

        @media only screen and (min-width: 700px) {
          header .hero-inner .content h1,
          header .hero-inner .content p{
            max-width:400px;
          }
        }

/* ----- End Header ----- */

/* ----- Main ----- */

.main {
	min-height:1080px;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cde1e0', endColorstr='#a4b4b4'); /* for IE */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#cde1e0), to(#a4b4b4)); /* Chrome, Safari 4+ */
	background-image: -webkit-linear-gradient(top, #cde1e0, #a4b4b4); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
	background-image:    -moz-linear-gradient(top, #cde1e0, #a4b4b4); /* Firefox 3.6-15 */
	background-image:      -o-linear-gradient(top, #cde1e0, #a4b4b4); /* Opera 11.10-12.00 */
	background-image:         linear-gradient(to bottom, #cde1e0, #a4b4b4); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
	background-repeat: no-repeat;
}

	.main .main-inner {
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: 	border-box; /* Firefox, other Gecko */
		box-sizing: 		border-box; /* Opera/IE 8+ */

		width:100%;
		padding:10px 30px 50px 30px;
		text-align:center;
	}

	a.main-item {
		display:block;
		cursor:pointer;
		position:relative;
		width:100%;
		height:auto;
		margin-bottom:5px;
		z-index:98;
	}

	a.main-item:hover{
		z-index:100;
	}

	a.main-item.perspective{
		display:inline-block;
		width:380px;
		height:380px;
		margin-left:-4px;
		margin-bottom:-4px;
	}

		a.main-item .front{
			width:50%;
			height:50%;
		}

		a.main-item .front.transition {
			position:relative;
			z-index:0;
			width:100%;
			height:100%;
		}

		a.main-item:hover .front.transition{
		    -moz-transform: rotateY(180deg);
		    -webkit-transform: rotateY(180deg);
		    -o-transform: rotateY(180deg);
			transform: rotateY(180deg);
		}

			a.main-item .front img{
				width:100%;
				height:auto;
			}

		a.main-item .back{
			position:absolute;
			display:block;
			top:0;
			right:0;
			width:50%;
			height:100%;
			background:rgba(0,0,0,0.8);
			opacity:0;
		}

		a.main-item .back.transition{
			opacity:0;
			width:100%;
			height:100%;
			top:0;
			left:0;
			right:auto;
		    -moz-transform: rotateY(-180deg);
		    -webkit-transform: rotateY(-180deg);
		    -o-transform: rotateY(-180deg);
			transform: rotateY(-180deg);
			z-index:1;
			background:rgba(0,0,0,0.8);
		}

		.Safari a.main-item .back.transition { background:rgba(0,0,0,1); }

		a.main-item:hover .back.transition{
		    -moz-transform: rotateY(0.0deg);
		    -webkit-transform: rotateY(0deg);
		    -o-transform: rotateY(0.0deg);
			transform: rotateY(0.0deg);
			opacity:1;
		}

		a.main-item .back .content{
			position:relative;
			width:100%;
			height:50%;
			display:table;
		}

		.iPhone-iPod a.main-item .back,
		.iPad a.main-item .back,
		.Android a.main-item .back{
			opacity:1;
		}

		.iPhone-iPod a.main-item .back .content,
		.Android a.main-item .back .content{
			width:100%;
			height:100%;
		}

		a.main-item .back.transition .content{
			position:absolute;
			top:0;
			left:0;
		}

			a.main-item .back .content .content-inner{
				display:table-cell;
				vertical-align: middle;
				color:#fff;
				font-family: Helvetica, Arial, sans-serif;
				line-height:1.5em;
			}

			a.main-item .back .content .content-inner h3{
				font-size:26px;
				margin-bottom:5px;
				font-family: 'Ruda', sans-serif;
				font-weight:700;
				margin:0 20px 5px 20px;
				line-height:30px;
			}

			.iPhone-iPod a.main-item .back .content .content-inner h3,
			.Android a.main-item .back .content .content-inner h3{
				font-size:14px;
				line-height:18px;
				text-align:left;
			}

			a.main-item .back .content .content-inner p{
				margin:0 20px 5px 20px;
			}

			.iPhone-iPod a.main-item .back .content .content-inner p,
			.Android a.main-item .back .content .content-inner p{
				line-height:14px;
				text-align:left;
			}

		a.main-item .back .companies{
			position:absolute;
			bottom:0;
			left:0;
			width:50%;
			height:50%;
		}

		.iPhone-iPod a.main-item .back .companies,
		.Android a.main-item .back .companies{
			display:none;
		}

		a.main-item .back .tech-holder{
			position:absolute;
			bottom:0;
			right:0;
			width:50%;
			height:50%;
			display:table;
		}

		a.main-item .back .tech{
			display:table-cell;
			vertical-align: middle;
		}

		.iPhone-iPod a.main-item .back .tech,
		.Android a.main-item .back .tech{
			display:none;
		}

		a.main-item .back .tech .tech-item{
			width:100%;
		}

		a.main-item .back .tech .tech-item img{
			margin:0 auto 8px auto;
		}

/* ----- End Main ----- */

/* --- MODALS --- */
		.hidden {
			display:none;
		}
/* --- END MODALS --- */

/* ----- Media Queries for small devices ----- */
@media only screen and (min-width: 0px) and (max-width: 700px) {

	/* ----- Header ----- */
	header .logo {
		width:95px;
	}

		header .logo img{
			position:absolute;
			clip:rect(0px,95px,68px,0px);
		}

		header .hero {
			margin:5px 0;
		}

		header .hero-inner .content{
			padding:0 16px;
		}

		header .hero-inner .content h1 {
			font-size: 18px;
		}
	/* ----- End Header ----- */

	.main .main-inner {
		padding:10px 0;
	}

		a.main-item.perspective{
			width:290px;
			height:290px;
		}

		a.main-item .back .content .content-inner h3{
			font-size:16px;
		}

		a.main-item .back .content .content-inner p{
			font-size:12px;
		}

}