@charset "UTF-8";
/* CSS Document */

body {
	margin: 0;
	font-size:100%;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
}

::selection {
	color: rgba(0,0,255,1);
}

.fade {
	opacity: 0;
	transition: opacity 1s ease;
}


/*Menu*/

#header {
  	width: 100%;
  	height: auto;
	position: absolute;
	z-index: 1000;
	margin-left:auto;
  	margin-right:auto;
	color: #FFFFFF;
	background-color: none;
	padding-bottom: 1%;
}

.logo {
	width: auto;
	height: auto;
	margin-left: 3.5%;
	margin-top: 2%;
	text-align: left;
	float: left;
}

.logo a {
	color: #FFFFFF;
	text-decoration: none;
}
	
.logo a:hover {
	border-bottom: 1px solid #FFFFFF;
}

#menu {
  	width: 25%;
  	height: auto;
	float: right;
	margin-right: 3.5%;
	margin-top: 2%;
}

.button {
	width: 50%;
	height: auto;
	float: left;
	text-align: right;
	color: #FFFFFF;
}

.button a {
	color: #FFFFFF;
	text-decoration: none;
}
	
.button a:hover {
	border-bottom: 1px solid #FFFFFF;
}


/*Welcome Image*/
	
#bg {
    background-size: 60%;
    background-repeat: no-repeat;
	background-image: url("../images/welcome/welcome-E.gif");
    min-height: 100vh;
    overflow:hidden;
	width: 100%;
	position: fixed;
	right: 0;
    background-position: 50% 50%;
   -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

.center-block { display: table;
    height: 100vh;
    width: 50%;
}

.content {
    display: table-cell;
    position: relative;
    text-align: center;
    vertical-align: middle !important;
	-webkit-vertical-align: middle !important;
    -moz-vertical-align: middle !important;
    -ms-vertical-align: middle !important;
    -o-vertical-align: middle !important;
}

.content a {
	color: #000000;
}

.content a:hover {
	color: #000000;
	border-bottom: 4px solid #000000;
}


/*Thumbnails*/

.container {
	position: absolute;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1%;
	padding-right: 1%;
	float: left;
}

.image {
	display: block;
	width: 100%;
	height: auto;
}

.overlay_A {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	background-color: rgba(0,0,0,1.00);
	cursor: pointer;
}

.overlay_B {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	background-color: rgba(255,0,0,1.00);
	cursor: pointer;
}

.text {
	color: #FFFFFF;
	position: absolute;
	width: 100%;
	top: 50%;
	bottom: 50%;
	text-align: center;
}

#intro_text {
	width: 100%;
	float: left;
   	margin-left: auto;
   	margin-right: auto;
	color: #000000;
	padding-top: 4%;
}


#work_thumbnails {
	width: 100%;
	float: left;
	margin-top: 0%;
   	margin-left: auto;
   	margin-right: auto;
	margin-bottom: 2.5%;
	color: #000000;
}

#work_thumbnails a {
	color: #000000;
	text-decoration: none;
}

#work_thumbnails a:hover {
	border-bottom: 3px solid #000000;
}

#thumbnail_A {
	position: relative;
	width: 100%;
	float: left;
	margin-bottom: 0.5%;
}

#thumbnail_A:hover .overlay_A {
  opacity: 1;
}

#thumbnail_B {
	position: relative;
	width: 49.75%;
	float: right;
	margin-bottom: 0.5%;
}

#thumbnail_B:hover .overlay_B {
  opacity: 1;
}

#thumbnail_C {
	position: relative;
	width: 49.75%;
	float: left;
	margin-bottom:0.5%;
}

#thumbnail_D {
	position: relative;
	width: 49.75%;
	float: right;
	margin-bottom: 0.5%;
}

#thumbnail_E {
	position: relative;
	width: 49.75%;
	float: left;
	margin-bottom: 0.5%;
}

#thumbnail_F {
	position: relative;
	width: 49.75%;
	float: right;
	margin-bottom: 0.5%;
}

#title {
	width: 100%;
 	text-align: left;
	float: left;
	padding-top: 1%;
}

#title a {
	color: #000000;
	text-decoration: none;
}

#title a:hover {
	border-bottom: 1px solid #000000;
}

.thumbnail_image {
	width: 100%;
}

#category {
	width: 49.5%;
 	text-align: left;
	float: right;
	padding-top: 1%;
	color: #000000;
}


/*Footer*/

footer {
   	width: 100%;
	float: left;
	position: absolute;
	padding-left: 3.5%;
	padding-right: 3.5%;
	padding-top: 3%;
	bottom: 0;
	color: #FFFFFF;
}

.footer_left {
	float: left;
	width: 50%;
	height: auto;
	padding-bottom: 5%;
}

.footer_right {
	float: right;
	width: 50%;
	height: auto;
	padding-bottom: 5%;
}

.footer_section {
	width: 100%;
	height: auto;
	text-align: left;
	float: left;
}

.footer_section a {
	color: #000000;
	text-decoration: none;
}

.footer_section a:hover {
	border-bottom: 1px solid #000000;
}


/*Backgrounds*/

.black {
	background-color: #000000;
}

.white {
	background-color: #FFFFFF;
}

.gray {
	background-color: #DADADA;
}

.blue {
	background-color: #1C3FFD;
}

.red {
	background-color: #E74C3C;
}


/*Media Queries*/

@media screen and (max-width: 1200px) {
	


@media screen and (max-width: 600px) {
	
/*Menu*/
	
#menu {
  	width: 50%;
  	height: auto;
	float: right;
	margin-right: 3.5%;
	margin-top: 2%;
}

}