/*-----------------------------------------------------------------------------------*
 *                                       About                                       *
 *-----------------------------------------------------------------------------------*/


.container
{
	max-width: 960px;
}


.about
{
	margin-top: 80px;
	margin-bottom: 85px;
}


.about .logo
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	height: 115px;
}


.about .title
{
	font-weight: 200;
	line-height: 0.85em;
	margin-top: 14px;
	margin-bottom: 14px;
}


@media (min-width: 420px)
{
	.title-fix
	{
		font-size: 48px;
	}
}


@media (max-width: 420px)
{
	.title-fix
	{
		font-size: 40px;
	}
}


@media (max-width: 355px)
{
	.title-fix
	{
		font-size: 36px;
	}
}


@media (max-width: 325px)
{
	.title-fix
	{
		font-size: 32px;
	}
}


.about .subtitle
{
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.15em;
	color: #ccc;
	margin-bottom: 20px;
}


.about .subtitle span
{
	color: #f67b37;
}


.about .subtitle .break
{
	display: none;
}

@media (max-width: 420px)
{
	.about .subtitle .break
	{
		display: inline;
	}
}


.about .button a,
.about .button a:hover
{
	font-size: 12px;
	font-weight: 500;
	background-color: #f17a38;
	background: linear-gradient(to right, #f67b37, #f04a5e);
	color: #2e3037;
	padding: 7px 12px;
	border: 0px;
	border-radius: 50px;
	text-decoration: none;
	transition: all 0.2s ease;
}


.about .button a:hover
{
	padding: 7px 30px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}


.about .button .icon
{
	font-size: 14px;
}


@media (max-width: 957px)
{
	#fix 
	{
		display: none;
	}
}


/*-----------------------------------------------------------------------------------*
 *                                      Services                                     *
 *-----------------------------------------------------------------------------------*/


.services
{
	margin-bottom: 40px;
}


.services .item
{
	margin-bottom: 20px;
	/* text-align: justify; */
}


.services .item .headline
{
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: #ccc;
	margin-bottom: 5px;
}


.services .item .headline span
{
	color: #ff9d31;
}


.services .item .description
{
	font-size: 12px;
	font-weight: 400;
	color: #aaa;
}


.services .item .description a
{
	color: #bbb;
	font-weight: 500;
}


.services .item .description a:hover
{
	color: #f67b37;
	text-decoration: none;
}


/*-----------------------------------------------------------------------------------*
 *                                     Portfolio                                     *
 *-----------------------------------------------------------------------------------*/


.portfolio
{
	margin-bottom: 20px;
	margin-bottom: 60px;
}


@media (max-width: 575px)
{
	.portfolio 
	{
		margin-bottom: 10px;
	}
}


.portfolio .title
{
	font-size: 36px;
	font-weight: 200;
	margin-bottom: 40px;
}


.portfolio .project
{
	font-size: 12px;
	font-weight: 400;
	color: #aaa;
	margin-bottom: 20px;
}


@media (max-width: 575px)
{
	.portfolio .project
	{
		margin-bottom: 50px;
	}
}


.portfolio .project .title
{
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	background: linear-gradient(to right, #f67b37, #f04a5e);
	color: #2e3037;
	padding: 5px 12px;
	border-radius: 10px 10px 10px 0px;
	margin-bottom: 15px;
	max-width: 280px;
}


@media (min-width: 576px)
{
	.portfolio .project.right .title
	{
		margin-left: calc(50% + 9px);
	}
}


.portfolio .project .feature
{
	padding-left: 10px;
	margin-bottom: 15px;
	border-left: 2px solid #ff9d31;
}


.portfolio .project .feature.dotted
{
	border-left: 2px dashed #ff9d31;
}


.portfolio .project .feature .tagline
{
	font-weight: 500;
	letter-spacing: 0.05em;
	color: #bbb;
}


.portfolio .project .feature .details a
{
	color: #bbb;
	font-weight: 500;
}


.portfolio .project .feature .details a:hover
{
	color: #f67b37;
	text-decoration: none;
}


.portfolio .project .showreel
{
	border: 1px dashed #aaa;
    background: #373941;
    height: calc(100% - 15px);
}


@media (min-width: 858px)
{
	.portfolio .project#parallax .showreel
	{
		height: 228px;
	}
}


@media (min-width: 873px)
{
	.portfolio .project#parallax .showreel
	{
		height: 213px;
	}
}


@media (min-width: 876px)
{
	.portfolio .project#parallax .showreel
	{
		height: 195px;
	}
}


@media (min-width: 764px)
{
	.portfolio .project#awe .showreel
	{
		height: 231px;
	}
}


@media (min-width: 909px)
{
	.portfolio .project#awe .showreel
	{
		height: 213px;
	}
}


@media (min-width: 926px)
{
	.portfolio .project#awe .showreel
	{
		height: 195px;
	}
}


@media (min-width: 778px)
{
	.portfolio .project#wimbledon .showreel
	{
		height: 231px;
	}
}


@media (min-width: 945px)
{
	.portfolio .project#wimbledon .showreel
	{
		height: 213px;
	}
}


@media (min-width: 952px)
{
	.portfolio .project#wimbledon .showreel
	{
		height: 195px;
	}
}


@media (min-width: 764px)
{
	.portfolio .project#fanta .showreel
	{
		height: 231px;
	}
}


@media (min-width: 883px)
{
	.portfolio .project#fanta .showreel
	{
		height: 213px;
	}
}


@media (min-width: 891px)
{
	.portfolio .project#fanta .showreel
	{
		height: 195px;
	}
}


@media (min-width: 889px)
{
	.portfolio .project#retrovision .showreel
	{
		height: 228px;
	}
}


@media (min-width: 934px)
{
	.portfolio .project#retrovision .showreel
	{
		height: 210px;
	}
}


@media (min-width: 960px)
{
	.portfolio .project#retrovision .showreel
	{
		height: 192px;
	}
}


.portfolio .project .showreel .wrapper
{
    margin: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
}


.portfolio .project .showreel .wrapper video
{
	object-fit: cover;
    width: 100%;
    height: 100%;
	filter: drop-shadow(0px 3px 3px #00000033);
}


/*-----------------------------------------------------------------------------------*
 *                              Portfolio: Demo Buttons                              *
 *-----------------------------------------------------------------------------------*/


.portfolio .project .demo
{
	display: table;
	margin-top: 5px;
	margin-bottom: -15px;
	margin-left: auto;
	margin-right: auto;
}


.portfolio .project .demo a,
.portfolio .project .demo a:hover
{
	font-size: 10px;
	font-weight: 500;
	padding: 5px 15px;
	margin: 0px;
	border: 1px solid #999;
	transition: all 0.5s ease;
}


.portfolio .project .demo a,
.portfolio .project .demo a:focus,
.portfolio .project .demo a:active
{
	color: #999;
	text-decoration: none;
}


.portfolio .project .demo a:hover
{
	color: #2e3037;
	text-decoration: none;
}


.portfolio .project .demo a:first-child
{
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	
}


.portfolio .project .demo a:last-child
{
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
}


.portfolio .project .demo a:first-child:not(:last-child)
{
	border-right: none;
}


@media (min-width: 576px)
{
	.portfolio .project.right .buttons
	{
		margin-left: 50%;
	}
}


.portfolio .project#parallax .demo #launch:hover 
{
	background: linear-gradient(to right, #5ba99b, #6586bb);
}


.portfolio .project#awe .demo #play:hover 
{
	background: linear-gradient(to right, #5ba99b, #6586bb);
}


.portfolio .project#awe .demo #walkthrough:hover 
{
	background: linear-gradient(to right, #5ba99b, #6586bb);
}


.portfolio .project#wimbledon .demo #read:hover 
{
	background: linear-gradient(to right, #6586bb, #7b66a5);
}


.portfolio .project#fanta .demo #read:hover 
{
	background: linear-gradient(to right, #5ba99b, #6586bb);
}


.portfolio .project#retrovision .demo #explore:hover 
{
	background: linear-gradient(to right, #6586bb, #7b66a5);
}


/*-----------------------------------------------------------------------------------*
 *                                      Footer                                       *
 *-----------------------------------------------------------------------------------*/


.footer
{
	margin-bottom: 60px;
}


@media (min-width: 576px)
{
	.footer
	{
		margin-bottom: 80px;
	}
}


.footer .title
{
    font-size: 24px;
    font-weight: 200;
}


.footer .subtitle a
{
	font-size: 12px;
    font-weight: 400;
    color: #aaa;
	text-decoration: none;
}


.footer .subtitle #cv
{
    background: linear-gradient(to right, #f67b37, #f04a5e);
}


.footer .subtitle #li
{
    background: linear-gradient(to right, #6586bb, #896bc4);
}


.footer .subtitle #cv, .footer .subtitle #li
{
	font-weight: 500;
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	padding-bottom: 1px;
}