/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

	
/* Structure and Typography
----------------------------------------------------------------------------------------------------*/

	html { 
		overflow-y: 			scroll; /* Makes sure the scroll bar doesn't go away*/
		}
		
	body {
		font-family: 			Roboto, sans-serif;
		}
		
	.p_title {
		}

    h2 {

		text-transform: 		uppercase;
		}
		
	h3 {
		text-transform: 		uppercase;
		}
		
	p {
		font-size: 				13px;
		}
		
	ol, ul {
		list-style: 			none outside none;
	}
	
	.copyright p {
        font-size: 				12px;
        font-weight:            400;
        text-transform: 		uppercase;
    }

    a {

    }

    .navbar a {

    }

    li {
    }


/* Links
----------------------------------------------------------------------------------------------------*/

	a:link    {
		color:					#FCDC00;
        font-weight:            bold;
	}
	
	a:visited {
		color:					#EA1977;
		text-decoration:		none;
	}

	a:hover   {
	}
	
	.pagelogo a:hover {
		background-color:		transparent;
	}	
	
	a:active  {
	} 

	
/* Containers
----------------------------------------------------------------------------------------------------*/

	
    html {
        height: 100%;
    }

    body {
		background:				url('../images/bg splat.png') 0 0px;
        background-size:        100% 400px ;
        max-height:             100px;
        background-repeat:      no-repeat;
		background-color:		#222;
        min-height:             100%;
        display:                flex;
        flex-direction:         column;
 	}

	.container {
		text-align: 			center;
		}

    .content {
        flex:                   1 0 auto;
    }
	#header-container {
		padding-bottom:			80px;
	}

    #footer-container .footer {
        height:                 120px;
        margin-top:				10px;
		margin-bottom:			0px;
        flex-shrink:            0;
}

/*HEADER
----------------------------------------------------------------------------------------------------*/
	
/* Navigation Bar
----------------------------------------------------------------------------------------------------*/

	.pagelogo {
        margin:                 50px auto 30px auto;
        max-width:              140px;
        max-height:             140px;
        width:                  auto;
        height:                 auto;
        display: 				block;
        position:               relative;
        text-align:             center;
	}
    
    .tagline {
        margin-bottom:          40px; 
    }

    .tagline p {
        text-transform:         uppercase;
		color: 					#189AD6;
        font-weight:            bolder;
        font-size:              24px;
        letter-spacing:         2px;
    }
    
    .tagline .subtext {
        text-transform:         uppercase;
		color: 					#0063A7;
        font-weight:            bolder;
        font-size:              14px;
        letter-spacing:         4px;
    }

	.navbar {
	}

	.navbar li {
		list-style-type: 		none;
		display: 				inline-block;
        position:               relative;
        margin-right:           20px;
        
	}

	.navbar a {
		display:				block;
		margin: 				10px 30px 0px 0px;
		color: 					#FCDC00;
		text-decoration: 		none;
		font-weight:			bold;
		font-size: 				16px;
        font-weight:            700;
        font-style:             normal;
		line-height: 			20px;
		text-transform:			uppercase;
        text-align:             left;
	}

	.navbar li a:hover {
		color: 					#EA1977;
		
		-webkit-transition: 	background 0.75s ease;
		-moz-transition: 		background 0.75s ease;
        -ms-transition: 		background 0.75s ease;
        -o-transition: 			background 0.75s ease;
		transition: 			background 0.75s ease;
	}


    .navbar li:before
    {
        content:                '';
        position:               absolute;

        width:                  100%;
        left:                   0;
        height:                 0px;
        border-top:             1px solid #FFE066;
        transform-origin:       left center;
        -webkit-transform:      scaleX(1);
        -ms-transform:          scaleX(1);
        transform:              scaleX(1);
        -webkit-transition: -webkit-transform 0.2s ease-in;
        transition:             transform: 0.2s ease-in;
    }

     .navbar li:hover:before
    {
        -webkit-transform:      scaleX(0);
        -ms-transform:          scaleX(0);
        transform:              scaleX(0);
        border-top:             1px solid #EA1977;
    }   

	

/*FOOTER
----------------------------------------------------------------------------------------------------*/

	.copyright {
		display:				inline-block;
        color:                  #189AD6;
	}

	.copyright p {
        margin-top:             10px;  

    }

	.linkbar {
		display:				inline-block;
		float: 					center;
	}

	.linkbar a {
	background:					url('../images/social-icons.png') 0 0 no-repeat;
	height: 					90px;
	width:						90px;
    margin:                     -20px;
    }
	
	.linkbar a:hover {
	background-color:			#fff;

	-webkit-transition: 		background 0.75s ease;
	-moz-transition: 			background 0.75s ease;
	-ms-transition: 			background 0.75s ease;
	-o-transition: 				background 0.75s ease;
	transition: 				background 0.75s ease;
	}

	.linkbar li {
		list-style-type: 		none;
		display: 				inline-block;
        transform:              scale(0.5);
	}

	.linkbar li a {
		display:				block;
		text-align:				left;
		text-indent:			-9999px;
	}


/*Social Media Link Bar
----------------------------------------------------------------------------------------------------*/

	.youtube a {
		background-position:	0px 0px;
	}

	.youtube a:hover {
		background-position:	0px -90px;
	}

	.linkedin a{
		background-position:	-90px 0px;
	}

	.linkedin a:hover {
		background-position:	-90px -90px;
	}

	.instagram a {
		background-position:	-180px 0px;
	}

	.instagram a:hover {
		background-position:	-180px -90px;
	}
	.behance a {
		background-position:	-270px 0px;
	}

	.behance a:hover {
		background-position:	-270px -90px;
	}


/* Demo Reel
----------------------------------------------------------------------------------------------------*/
	.video-container {
		position: 				relative; /* keeps the aspect ratio */ 
		padding-bottom: 		56.25%; /* fine tunes the video positioning */ 
        margin-bottom:          20px;
	}

	.video-container iframe, .video-container object, .video-container embed { 
		position: 				absolute; 
		top: 					0; 
		left: 					0; 
		width: 					100%; 
		height: 				100%;
        border-radius:          10px;
	}
	
	
/* Embedded Games
----------------------------------------------------------------------------------------------------*/
	.game-container {
		position: 				relative; /* keeps the aspect ratio */ 
		padding-bottom: 		71%; /* fine tunes the video positioning */ 
		padding-top: 			32px; 
		
		/*
		box-shadow: 			0px 5px 5px rgba(0, 0, 0, 0.35);
		-webkit-box-shadow: 	0px 5px 5px rgba(0, 0, 0, 0.35);
		-moz-box-shadow: 		0px 5px 5px rgba(0, 0, 0, 0.35);
		*/
	}

    #unityPlayer {
		position: 				relative; /* keeps the aspect ratio */ 
		padding-bottom: 		0px; /* fine tunes the video positioning */ 
		padding-top: 			0px; 
		
		/*
		box-shadow: 			0px 5px 5px rgba(0, 0, 0, 0.35);
		-webkit-box-shadow: 	0px 5px 5px rgba(0, 0, 0, 0.35);
		-moz-box-shadow: 		0px 5px 5px rgba(0, 0, 0, 0.35);
		*/
	}

	.game-container iframe, .game-container object, .game-container embed { 
		position: 				absolute; 
		top: 					0; 
		left: 					0; 
		width: 					100%; 
		height: 				100%;
	}
	
	no-script {
	
	}

	
/* Gallery Page Layout
----------------------------------------------------------------------------------------------------*/

	.galleryitem {
		position:				relative;
		width: 					240px;
		height: 				200px;
		display: 				inline-block;
        margin:                 0px 5px 70px;
    }
	
	.galleryimage {
		width: 					240px;
		height: 				200px;
        overflow:               hidden;
        border-radius:          10px;
	}

    
	.galleryiteminfo h3 {
        width:					240px;
        text-transform:			uppercase;
        display:				inline-block;
        text-align:             justify;
        font-size:              14px;
        color:                  #a8a8aa;
        margin-top:             10px;
	}

    .galleryiteminfo p {
        width:                  240px;
        text-align:             left;
        display:				inline-block;
        font-size:              12px;
        font-weight:            400;
        color:                  #707271;
    }
	
		.projectbody {
		text-align:				center;
		padding-bottom:			35px;
        color:                  #999;
	}
	
	.projectbody h2 {
		color:					#fff;
		text-align:				left;
		font-size:				16px;
        font-weight:            bold;
		padding:				4px 10px;
		margin-bottom:			15px;
		margin-top:				20px;
    }
	
	.projectbody h2:first-child{
		margin-top:				0px;
	}

	.projectbodytext img {
		margin-top:				0px;
		text-align:				center;
	}

	.subprojectheader {
		color:					#FF3333;
		text-align:				left;
		font-size:				18px;
        font-style:             oblique;
		padding:				3px 0px;
		margin-bottom:			0px;
		border-bottom:			3px solid #FF3333;
/*		background-color:		#1b1b1b;*/
	}
	
	.projectbody h3 {
        font-weight:            bold;            
		margin-left:			5%;
		margin-right:			5%;
		margin-top:			    8px;
        margin-bottom:          0px;
        font-size: 				13px;
		color:					#333;
	}
	
	.projectbody p {
		margin-left:			10%;
		margin-right:			10%;
		/*margin-bottom:			14px; */
	}

    .caption {
        text-align:             left;
        font-size:              13px;
        font-style:             italic;
        margin-top:             -12px;
        margin-bottom:          15px;
        color:                  #999;
    }

    .appstore_badges {
        text-align:             center;
    }
	
	.projectbody img {
		margin-bottom:			10px;
		max-height:				100%;
		max-width:				95%;
	}
	
	.projectbodytext {
		margin-top: 			30px;
		text-align:				left;
	}
	
	.flashobject {
		position:				relative;
		width:					100%;
		margin-left:			105px;
		margin-top:				-30px;
		padding:				30px;
	}
	
	.projectbodytext li {
		font-size:				12px;
		margin-left:			10%;
		margin-right:			10%;
	}
	
	.projectbodytext ul {
		margin-bottom:			20px;
	}
	
	.projectdownload {
		text-align:				center;
		margin-bottom:			20px;
	}
	
	.projectinfo {
		color:					#fff;
		text-align:				left;
		padding:				12px 12px 12px 12px;
	}
	
	.p_title{
		text-transform: 		uppercase;
		font-size:				20px;
		font-weight:			bold;
		margin-bottom:			3px;
	}
	
	.p_category{
		color:					#999;
		font-size:				12px;
		font-style:				italic;
        font-weight:			normal;
		margin-bottom:			14px;
	}
	
	.p_description{
        color:					#999;
		font-weight:			normal;
		margin-bottom:			20px;
	}
	
	.p_description p {
        font-size:              13px;
		margin-bottom:			12px;
	}
	
	.p_description li {
		font-size:				12px;
		margin-bottom:			2px;
	}
	
	.projectinfo h3{
		color:					#fff;
		font-size:				11px;
        text-transform:         uppercase;
        font-weight:            900;
        margin-bottom:          2px;
	}

	.p_details p {
        margin-left:            10px;
		margin-bottom:			8px;
		color:					#999;
        font-size:              12px;
		font-weight:			normal;
        font-style:             italic;
	}
	
	.p_details li {
		color:					#666;
        font-size:              12px;
		font-weight:			normal;
        font-style:             italic;
		text-indent:			10px;
	}
	

/* Contact Form
----------------------------------------------------------------------------------------------------*/

	.contactform h2 {
		margin-bottom:			10px;
        color:                  #fff;
	}
	
	.contactform h3 {
        font-size:              12px;
		text-align:				left;
		width:					320px;
		margin-left:			auto;
		margin-right:			auto;
        color:                  #999;
	}

	input:focus, textarea:focus{
		background-color:		#FFDDD6;
	}

	textarea {
/* 		background:				url(../images/textarea_bg.png) 10px center no-repeat; */	
		height:					80px;
	}

	input, textarea{
		background-color: 		#ffffff;
		border: 				1px solid #e91d76;
		width:					320px;
		min-width: 				250px;
		max-width: 				350px;
		overflow:				auto;
		font-size:				16px;
		margin-bottom:			10px;
	}

	#send_message {
		height:					40px;
		width:					200px !important; /* the width of the submit button  */
		margin-top: 			10px;
		border: 				0; /* remove the default border and put a normal black one */
		/* border-radius: 			4px; */
		cursor:					pointer;
		/* background:				url(../images/bg.png) 0 0 repeat; */
		color: 					#015cb9;
		background-color:		#fddc01;
		font-size: 				16px;
		font-variant:           small-caps;
		font-weight: 			bold;	
	}
	
	#send_message:hover {
		/*
        background-image: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0.28, #F46545),
			color-stop(1, #FFAB3D)
		);
        
		background-image: -o-linear-gradient(bottom, #F46545 28%, #FFAB3D 100%);
		background-image: -moz-linear-gradient(bottom, #F46545 28%, #FFAB3D 100%);
		background-image: -webkit-linear-gradient(bottom, #F46545 28%, #FFAB3D 100%);
		background-image: -ms-linear-gradient(bottom, #F46545 28%, #FFAB3D 100%);
		background-image: linear-gradient(to bottom, #F46545 28%, #FFAB3D 100%);
        */
        background-color:		#a2d55e;
	}

/* styling */

	.error {
		text-align:				left;
		display: 				none; /* hide the errors */
		/* add some styling */
		padding:				5px;
		color: 					#e2211c;
		font-size:				12px;
		background-color: 		#FFBABA;
		width: 					312px;
		margin-left:			auto;
		margin-right:			auto;
	}
	
	.success {
		text-align:				center;
		display: 				none; /* hide the sucess div */
		/* add some styling */
		padding:				5px;
		color: 					#fff;
		font-size:				12px;
		background-color: 		#a2d55e;
		width: 					330px;
		margin-top: 			10px;
		margin-left:			auto;
		margin-right:			auto;
	}

	.error img { 
		vertical-align:			top; 
		margin-right: 			2px;
	}
	
	.success img { 
		vertical-align:			top; 
		margin-right: 			2px;
	}

	.contact_logo { 
		vertical-align: 		middle;
		margin-bottom:			8px;
		margin-right:			5px;
	}
	
	.contactinfo {
		text-align:				right;
		margin-top:				10px;
        color:                  #999;
	}

    .contactinfo h2 {
        font-size:              18px;
		text-align:				right;
		margin-bottom:			6px;
        color:                  #fff;
	}
	
	.contactinfo p{
		margin-bottom:			20px;
	}

    .aboutinfo {
		color:					#fff;
        text-align:             left;
        padding-left:           0px;
        padding-right:          100px;
        line-height: 300%;
    }

    mark{
        background-color:       #0063A7;
        padding:                2px 10px;
        margin-left:            0px;
    }

    mark:hover {
        background-color: #0063A7;
        
        animation: bgColor 1s infinite linear, marginslide 1s linear;
        }
        @keyframes bgColor {
        0% {
        background-color: #0063A7;
        }
        25% {
        background-color: #E91976;
        }
        50% {
        background-color: #FCDC00;
        }
        100% {
        background-color: #0063A7;
        }
    }

    .clientslist {
        margin-top:             75px;
        color:					#fff;
    }

    .clientslist .DC {
        height:                 40px;
        margin-bottom:          5px;
        object-fit:             scale-down;
    }

    .clientslist .Lionsgate {
        width:                  160px;
    }

    .clientslist .WB {
        width:                  160px;
    }

    .clientslist img {
        width:                  150px;
        height:                 25px;
        object-fit:             scale-down;
        margin:                 10px;
        opacity: 50%;
    }
    




/* Portfolio Layout - Individual Pages - Setting up the divs for the Javascript animations on each gallery item
----------------------------------------------------------------------------------------------------*/




/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */


@media handheld, only screen and (max-width: 800px) {

	body {
		
	}
	
    .row {
        min-width:              100%;
    }
    
	.header {
		position:				relative;
		height:					100px;
	}
	
	.byline {
		margin-top:				8px;
        margin-left:            30px;
		text-align:				center;
		float:					none;
	}

	.byline a {
		margin-left:			0px;
	}

	.linkbar {
		margin-right:			0px;
		float: 					none;
	}


/* 	.pagelogo {
        display:                none;
	} */
	
    .navbar {
        margin-bottom:          10px;
    }
    
	.navbar li {
		width:					150px;
		margin-bottom:			10px;
        vertical-align:         top;
	}
    
    .navbar li:first-child{
		margin-top:             0px;
	}
	
    #header-container {
		padding-bottom:			20px;
	}
	
	.copyright {
		float:					none;
	}
    
	.followbuttons {
		margin-right:			0px;
		text-align:				center;
	}
	
	.projectinfo {
		margin-top:				30px;
	}

	
	.contactinfo {
		text-align:				center;
		margin-top:				30px;
		margin-bottom:			60px;
	}
    
    .contactinfo h2{
		text-align:				left;
		margin-top:				30px;
/*		margin-bottom:			20px;*/
	}

/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/
}