.SITE_CONTAINER {
	margin: auto;
	max-width:980px;
	font-family: 'Arima Madurai', cursive;
	font-weight: lighter;
	color: #646573;
	padding: 0px 20px;
	font-size: 14px;
}

a {
	color: #9697a9;
}

a:hover {
	color: lightgray;
	transition: .2s ease;
	text-decoration: none;
}

.head_nav {
	margin: 50px 0px;
	width: 100%;
	display: inline-block;
}

.logo {
	width: 250px;
	text-align: left;
	font-size: 40px;
	vertical-align: top;
	float:left;
	font-weight: 400;
}

.nav {
   padding-top: 12px;
	
}

.nav_mobile {
	display:none;
}

.menu_mobile {
	display: none;
	position: absolute;
    right: 35px;
    background-color: white;
    width: 200px;
    border-color: black;
    border-style: outset;
    padding: 3px;
    border-width: thick;
    top: 110px;
	z-index: 1000000;
}


@media all and (max-width: 1000px)
{
	.nav {
		display:none;
		
	}
	.nav_mobile {
		display:block;
		float:right;
		margin-right: 25px;
	}
}

.head_nav a {
	margin: 5px 25px;
	font-size: 18px;
	color: #646573;
	text-decoration: none;
	display: inline-block;
}

.head_nav p {
	margin: 0px 25px;
	font-size: 18px;
	color: #646573;
	text-decoration: none;
	display: inline-block;
	font-weight: bold;
}

.head_nav a:hover {
	color: lightgray;
	transition: .2s ease;
}

.showreel {
	margin:auto;
	width: 80vw;
	max-width: 980px;
	height:45vw;
	max-height:551px;
	text-align: center;
}

.content {
	width: 100%;
}


.left_column {	

	width:300px;
	vertical-align: top;
}
.right_column {
	max-width:600px;
	text-align: center;
}

.right_column_items {
	height:500px;
	overflow:hidden;
}

@media all and (min-width: 801px)
{
	.left_column {	
		display:inline-block;
		width:300px;
		float:left;
	}
	.right_column {
		
		padding-left: 50px;
		overflow: hidden;
		display: list-item;
	}
	
}

@media all and (max-width: 800px)
{
	.left_column {	
		display:inline-block;
		text-align:center;
		width:100%;
		margin:auto;
		margin-bottom:30px;
	}
	.right_column {	
		display:inline-block;
		padding-left:0px;
		width:100%;
		margin:auto;
		max-width: initial;
		
	}
}

.project_desc {
	padding: 0px 50px;
}

.project_title {
	
	margin-bottom:25px;
	
}

.project_title::first-line {
	font-size: 25px;
	font-weight: 400;
}

.project_title_back {
	text-decoration: none;
	font-size: 25px;}

.project_title_back a {
	text-decoration: none;
	font-size: 25px;
}

.project_title_back a:hover {
	font-size: 25px;
}

.project_video {
	display: inline;
	float:left;
	margin-right: 25px;
	width: 40vw;
	height: 28vw;
	margin-bottom:25px;
	
	max-width: 500px;
	max-height: 280px;
}

@media all and (max-width: 500px)
{
	.project_video {
		display: block;
		margin:auto;
		width: 100%;
		height:40vw;
		margin-bottom:25px;
	}
}

.project_text {
	display: inline;
	vertical-align: top;
}

.project_awards {
	display:inline-block;
	width: 100%;
	margin:auto;
	text-align:center;
	margin-top:25px;
}

.image_with_overlay {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
}

.middle img {
	position: absolute;
	right: 5px;
	bottom: 5px;
}

.container_portoflio_item {
    position: relative;
    width: 190px;
	display:inline-grid;
	margin: 3% 0.5%;
	text-align:left;
}

.container_portoflio_item:hover .image_with_overlay {
  opacity: 0.1;
}

.container_portoflio_item:hover .middle {
  opacity: 1;
}

.portfolio_item_text {
  
  color: #646573;
  font-size: 13px;
  padding: 16px 16px;
  padding-bottom: 0px;
}

.portfolio_item_text::first-line {
	font-size: 20px;
	font-weight: 400;
	color: black;
}

.slideshow_container {
	overflow: hidden;
	width: 300px;
	height:	300px;
	position: relative;
	margin:auto;
	margin-top: 25px;
}

.slideshow_titles {
	position: absolute;
	width: 300px;
	height: 25px;
	background-color: #00000077;
	bottom: 10px;
	text-align:center;
}

.slideshow_titles p {
	margin: 5px 0px;
    vertical-align: middle;
    color: lightgray;
	font-size: 10px;
}

.arrow {
	position:absolute;
}