* {
    outline: 0 none;
}
body {
background-color: #FFF;

font-family: "Open Sans",sans-serif;
font-size: 16px;
margin: 0px;
padding: 0px;

letter-spacing: 2px;
}


footer {
	//*background-color: none;
	background-image: url('images/Logo/DownLogoEGDeisgn.png');
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 1170px 130px;
	*//
	display: block;
	height: 130px;
	width:100%;
	margin: 20% 0px 0px;
	padding: 0px;
	z-index: 1;
	width: 93.99%;
	border-right: 50px solid transparent;
	height: 0px;
	border-left: 50px solid transparent;
	border-bottom: 64px solid #369;
	text-align:center;
	color:#fff;
	padding-top:1%;
	display:inline-block;
}


div#footer{
margin-top: 1.5%;
}

header {
	display: block;
	position: fixed;
	width: 93.99%;
	border-right: 50px solid transparent;
	height: 0px;
	border-left: 50px solid transparent;
	border-top: 64px solid #369;
	z-index: 11;
}

header > nav {
	z-index: 3;
	margin-top: -64px;
	display: block;
	height: 44px;
}

header > nav > a {
	color: #FFF;
	text-decoration: none;
	text-transform: uppercase;
	float: left;
	width: auto;
	text-align: center;
	margin: 0px 1% 0px 4%;
	height: 100%;
	padding-top: 20px;
	padding-left: 10px;
	padding-right: 10px;
}

header > nav > a:hover {
	background-color:#ffffff;
	color:#7a7a7a;
}

header > nav > a:active{
    color: #989898;
    font-weight: bold;
}

header > nav > a:first-child{
	margin-left:29%;
}



/*=================================================*/
border{
background: rgb(48, 133, 163) none repeat scroll 0% 0%;
border-right: 120px solid #F5F5F5;
border-top: 100px solid rgb(83, 83, 83);
float: left;
position: relative;
top: -79px;
display: inline-block;
max-width: 507px;
}

border2{
	
	    background: rgb(48, 133, 163) none repeat scroll 0% 0%;
    position: relative;
    top: 199px;
    display: inline-block;
    max-width: 507px;
    float: right;
    border-bottom: 100px solid rgb(156, 156, 156);
    border-left: 120px solid rgb(245, 245, 245);
}

 div#moto
 {
position: relative;
float: left;
overflow: hidden;
margin: 10px 10px;
min-width: 320px;
max-width: 507px;
max-height: 360px;
width: 48%;
height: 361px;
text-align: center;
cursor: pointer;
background-color: #F5F5F5;
	 
 }

 pf{
color: rgb(17, 16, 16);
z-index: 200;
font-style: italic;
display: inline-block;

padding-left: -3%;
top: 147px;
position: relative;
width: 454px;
} 
	 
 
 

div.Project {
position: relative;
top: 90px;
margin: 0px auto;
max-width: 1581px;
}

/* Common style */
figure.HoverEffect {
position: relative;
float: left;
overflow: hidden;
margin: 10px 10px;
min-width: 320px;
max-width: 507px;
max-height: 360px;
width: 48%;
height: auto;
background: #3085a3;
text-align: center;
cursor: pointer;

}

img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

figcaption {
color: #fff;
text-transform: uppercase;
font-size: 17px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
margin-top: 17%;
}

figcaption::before,
figcaption::after {
	pointer-events: none;
}

figcaption, a .ViewМore  {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
 a.ViewМore  {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	width: 507px;
	height: 360px;
	display: block;
	margin-top: -307px;
}

h2 {
margin-left: 8%;
margin-right: 6%;
}

/*.Project figure h2 span {
	font-weight: 800;*/
}

 h2, p, a.ViewProject {
	margin: 0;
}

p , a.ViewProject{
	font-size: 15px;
}




/***** Julia *****/
/*---------------*/

figure.HoverEffect {
	background: #000;
}

 img {
	max-width: none;
	height: 400px;
	-webkit-transition: opacity 1s, -webkit-transform 1s;
	transition: opacity 1s, transform 1s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}



 h2 {
	position: relative;
	padding: 0.5em 0;
}

 p {
	display: block;
	margin: 0 0 0;
	padding: 6px 0px;
	background: rgba(255,255,255,0.9);
	color:#fff;
	text-transform: none;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-360px,0,0);
	transform: translate3d(-523px,0,0);
}



figure.HoverEffect p:first-child {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

figure.HoverEffect p:nth-of-type(2) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.HoverEffect p:nth-of-type(3) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}



figure.HoverEffect:hover p:first-child {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

figure.HoverEffect:hover p:nth-of-type(2) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.HoverEffect:hover p:nth-of-type(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}



figure.HoverEffect:hover img {
	opacity: 0.2;
	-webkit-transform: scale3d(1.1,1.1,1);
	transform: scale3d(1.1,1.1,1);
}

figure.HoverEffect:hover p, figure.HoverEffect:hover {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}





div#first :first-child, div#second :first-child, div#third :first-child, div#third2 :first-child, div#third3 :first-child, div#third4 :first-child, div#fourth :first-child, div#fifth :first-child, div#sixth :first-child,div#seventh :first-child, div#eighth :first-child
{
	padding-top:20px;
		font-weight: bold;
		font-weight: bold;
		font-size: 16px;
		text-transform: uppercase;
}

div#first :last-child, div#second  :last-child, div#third :last-child,div#third2 :last-child,div#third3 :last-child, div#third4 :last-child, div#fourth  :last-child, div#fifth :last-child, div#sixth :last-child,div#seventh :last-child, div#eighth:last-child
{
	padding-bottom:25px;
}

div#first p
{
	background: #3399cc;	
	
}


div#second p
{
	background: #6d9ecd;	

}


div#third p
{
	background: #097269;	
}

div#third2 p
{
	background: #3fa9f5;	
}

div#third3 p
{
	background: #8e8e8e;	
}

div#third4 p
{
	background: #6e0d15;	
}


div#fourth  p
{
	background: #336666;
}

div#fifth  p
{
	background: #616161;
}

div#sixth p
{      
	background: #3bacde;
}

div#seventh p
{
	background: #757575;	
}

div#eighth p
{
	background: #265013;	
}