new.css

@charset "UTF-8";
/* CSS Document */
/* Body */
body {
/*background:#F5F3EE;*/
margin:0 auto;
padding:0px;
font-family: 'Lato', sans-serif;
font-weight:200;
}
/*Navigation Bar*/
.navigationbar {
max-width:1100px;
height:auto;
margin-bottom:10px;
}

.menucontainer {
position:relative;
max-width:700px;
right:10px;	
}


nav .button {
	float:left;
      border: 0;
      background:rgba(200,234,255,1.00);
      -webkit-box-shadow: 0;
      -moz-box-shadow: 0;
      box-shadow: 0;
      font-size: 0.75em;
      color:rgba(54,133,199,1.00);
      text-transform: uppercase;
      padding: 25px;
      padding-bottom: 25px;
      -webkit-box-shadow: 0px 4px 0px #1abc9c;
      -moz-box-shadow: 0px 4px 0px #1abc9c;
      box-shadow: 0px 4px 0px #1abc9c;
	  text-decoration:none;
	  list-style-type:none;
	  display:inline-block;
    }
    nav .button:hover {
      background:rgba(54,133,199,1.00);
      color: white;
    }
    nav .button:active {
      -webkit-box-shadow: 0px 4px 0px #1abc9c;
      -moz-box-shadow: 0px 4px 0px #1abc9c;
      box-shadow: 0px 4px 0px #1abc9c;
      background: rgba(53,120,228,1.00);
    }              
            
			

.page {
max-width:1300px;
height:1000px;
margin-bottom:20px;
display:inline;
}

.head {
	display:block;
	width:100%;
	height:100%;
	background:#1abc9c;
}

.headline p{
font-family: 'Lato', sans-serif;
font-size:2em;
color:#FFF;	
line-height:100%;
margin-left:10%;
margin-top: 20px;
margin-right:10%;
display:inline-block;
font-weight:200;
}

.intropage {
    margin-top:50px;
}


.selfintro {
display:inline-block;
max-width:650px;
margin-top:10px;
margin-bottom:40px;
margin-right:10px;
margin-left:10px;
}
.selfintro p {
text-align:justify;	
color:#000;
font-size:18px;
font-weight:200;
}
.selfintro h3 {
	font-size:28px;
	color:#1abc9c;
	font-weight:200;
}

.selfcontainer {
max-width:1100px;
height:400px;
}

.contact {
float:right;
margin:10px;
max-width:300px;
height:auto;
}

h1 {
font-weight: bold;
position: center;
margin:10px;
padding:10px;
text-align: justify;
font-size: 18pt;

}	

p {
font-size: 18px;
line-height:28px;
}
	
.projectname p {
margin:0px;
padding:0px;
font-size: 14pt;
}
	
	
#projectname {
margin:2px;
font-size: 14pt;
}

.portfolioblock {
float:left;
max-width:300px;
height:auto;
margin:10px;
display:inline;
}
.portfolioblock p {
	margin:auto;

	}
	
.portfolioblock img{
/*filter: url(filters.svg#colorMatrix);  Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(0.5); /* Google Chrome, Safari 6+ & Opera 15+ */
}



h2 {
text-align: center;
font-size: 18pt;
}

.title h2{
	text-align:center;
}

.portfoliocontainer {
margin:0 auto;	
max-width:1020px;
width:100%;
height:600px;
}



.footer p{
margin:10px;
display:block;
color:#FFFFFF;
vertical-align:middle;

}



#content-detail
{
	margin:0 auto;
	padding:10px;
	max-width: 700px;
    height:auto;
	}

#content-detail p
{
    text-align:justify;
}

.home p {
text-decoration:none;	
}

.sidemenu {
width:100px;
}

.sideportfolio {
float:left;
max-width:300px;
margin:0 auto;	
padding: 10px;
}

/*projectsummary*/
#summary {
width:700px;	
}

.grid {
width:140px;
margin-left:10px;
margin-right:10px;
float:left;	
}

/*Text Color*/
p, ul, h1, h2, h3, a {
color:#28292d;	
text-decoration:none;
}


#side {
font-size:12px	
}

.text {
width:700px;
float:left;	
}
/*Home Button*/
nav .homebutton {
	  float:left;
      border: 0;
      -webkit-box-shadow: 0;
      -moz-box-shadow: 0;
      box-shadow: 0;
      font-size: 0.75em;
      color:rgba(54,133,199,1.00);
      text-transform: uppercase;
      padding: 5px;
      padding-bottom: 5px;
	  margin:5px;
      -webkit-box-shadow: 0px 4px 0px #1abc9c;
      -moz-box-shadow: 0px 4px 0px #1abc9c;
      box-shadow: 0px 4px 0px #1abc9c;
	  text-decoration:none;
	  list-style-type:none;
	  transition: all 0.5s;
    }
    nav .homebutton:hover {
      background:rgba(54,133,199,1.00);
      color: white;
    }
    nav .homebutton:active {
      -webkit-box-shadow: 0px 4px 0px #1abc9c;
      -moz-box-shadow: 0px 4px 0px #1abc9c;
      box-shadow: 0px 4px 0px #1abc9c;
      background: rgba(53,120,228,1.00);
    }       
	
	/*Link*/
.link:hover {
      background:rgba(53,120,228,1.00);
      color: white;
}

/*HoverEffect*/
.da-thumbs {
  list-style: none;
  max-width: 1020px;
  height: auto;
  position: relative;
  margin: 20px auto;
  padding: 0;
}
.da-thumbs li {
  float: left;
  margin: 5px;
  background: #fff;
  padding: 8px;
  position: relative;
  box-shadow: 0 1px 3px rgba(148,78,70,0.1);
}

.da-thumbs li a,
.da-thumbs li a img {
  display: block;
  position: relative;
}
.da-thumbs li a {
  overflow: hidden;
}
.da-thumbs li a div {
  position: absolute;
  background: #1abc9c;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}
.da-thumbs li a div span {
  display: block;
  padding: 10px 0;
  margin: 40px 20px 20px 20px;
  color: rgba(255,255,255,0.9);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 -10px 0 rgba(255,255,255,0.3);
}

/*Button*/
.button
{
  letter-spacing: 1px;
  text-align: center;
  font-size: 15px;
  font-weight: 200;
  margin: 10px 20px 10px;
  position: relative; 
  padding: 10px 10px;
  background: #FFF;
  border: 1px solid #1abc9c;
  color: #1abc9c;
  overflow: hidden;
  transition: all 0.5s;
  display: inline-block;
}

.button:hover, .button:active 
{
  text-decoration: none;
  color: #FFF;
  border-color: #FFF;
  background: #1abc9c;
}

.button span 
{
  display: inline-block;
  position: relative;
  padding-right: 0;
  transition: padding-right 0.5s;
}


.emphasis
{

	text-align:center;
	color:#1abc9c;
	font-size:30px;
}

/*Section Title*/
.sectiontitle {
      border: 0;
      -webkit-box-shadow: 0;
      -moz-box-shadow: 0;
      box-shadow: 0;
      font-size: 28px;
      text-transform: uppercase;
      padding: 5px;
      padding-bottom: 5px;
	  margin:5px;
      -webkit-box-shadow: -4px 0px 0px #1abc9c;
      -moz-box-shadow: -4px 0px 0px #1abc9c;
      box-shadow: -4px 0px 0px #1abc9c;
	  text-decoration:none;
	  list-style-type:none;
    }
	
.photo {
	float:left;
	margin-left:10%;
	max-width:200px;
	border-radius:50%;
	display:inline-block;
}
	
#footer {
width: 980px;
margin: 0 auto;
padding: 20px 0;
background: #1abc9c;
}

#footer p {
color: #FFFFFF; /* white */
}


#footer a {
color: #FFFFFF; /* white */
}

#footer a:hover {
color: #C79900; /* gold */
}
	
	
/* Desktop Screen Set to 1024px or Below */
@media screen and (max-width: 1024px) {

}