/*------------------------[General]-------------------------------*/
h1{
	 font-family: 'Roboto', sans-serif;
	  font-size: 50px; 
    font-size: 2.2vw;   
}

h2{
	 font-family: 'Roboto', sans-serif;
	  font-size: 40px; 
    font-size: 2vw;
}

h3{
	 font-family: 'Roboto', sans-serif;
	 font-size: 30px; 
    font-size: 1.8vw;
}


html, body {
    overflow-x: hidden;
    margin: 0;
}

p, li{
	 font-family: 'Roboto', sans-serif;
	 font-size: 10px; 
    font-size: 1.1vw;
}
@media screen and (min-width: 1200px) {
  p {
     font-size: 17px;
  }
}

/*------------------------[Header]-------------------------------*/
 nav ul{
 	margin-top: -10px;
 	margin-left: -10px;
 	padding-left: 0px;
 	padding-top: 8px;
 	list-style-type: none;
 	text-align: center;
 	height: 50px;
 	background-color: #0d0d0d;

 }

nav{
	position: fixed;
	width: 100%;
	 	z-index: 100;
}

 nav li{
 	margin-top: 20px;
 	display: inline;
 	padding-left: 20px;
 	padding-right: 20px;
 	font-size: 20px;
 	color: #fff;

 }

nav a{
	color: #FFF;
	text-decoration: none;
}

nav a:hover{
	color: #58d339;
}

#fix{
	height: 10px;
}

#fix3{
	height: 12px;
}

/*------------------------[Index]-------------------------------*/

#box2{
	margin-left: -0px;
	margin-right: -10px;
	padding-bottom: 400px;
	text-align: center;
}

#text{
	text-align: center;
	width: 30%;
	float: left;
	margin-left: 2%;
	padding-top: 15px;

}

#text2{
	text-align: center;
	width: 30%;
	float: left;
	margin-left: 3.3%;
	padding-top: 15px;
}

#text3{
	text-align: center;
	width: 30%;
	float: left;
	margin-left: 3.3%;
	padding-top: 15px;
}


/*------------------------[Portfolio]-------------------------------*/

#portfolio{
	text-align: center;
}
/*fix this*/
a{
    color: black;
}

a:hover{
	color: #19ad0c;
}

#line{
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 25%;
	background-color: black;
	width: 50%;
	height: 3px;
}

#project{
	margin-left: 25%;

	max-height: 100px;
	max-height: 300px;
	height: auto;
	width: 50%;
}

#projImage{
	margin-left: -3%;
	width: 50%;
	float: left;
}

#projText{
	text-align: justify;
	float: none;
	margin-left: 50%;
	width: 50%;
}

#projTextH1{
	text-align: center;
}

/*------------------------[Project]-------------------------------*/

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 20%;
    text-align: center;
    	margin-bottom: 50px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery2 {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 20%;
    text-align: center;
    	margin-bottom: 50px;
}

div.gallery2:hover {
    border: 1px solid #777;
}

div.desc {
    padding: 15px;
    text-align: center;
     font-family: 'Roboto', sans-serif;
}

#center{
	text-align: center;
	width: 100%;
	margin-left: 10%;
}

#projTextH1-1{
	text-align: center;
}

#project2{
	margin-left: 25%;

	max-height: 100px;
	max-height: 150px;
	height: auto;
	width: 50%;
}

.gallery > img {
    transition:transform 0.25s ease;
}

.gallery > img:hover {
    -webkit-transform:scale(1.5); /* or some other value */
    transform:scale(1.5);
}

.gallery2 > img {
    transition:transform 0.25s ease;
}

.gallery2 > img:hover {
    -webkit-transform:scale(2); /* or some other value */
    transform:scale(2);
}
/*------------------------[About]-------------------------------*/
#project3{
	margin-left: 25%;
	background-color: #f9b3b3; 
	margin-bottom: 20px; 
	height: 70px;
	width: 50%;
}

#project4{
	margin-left: 25%;
	height: 550px;
	width: 50%;
}


/*------------------------[Footer]-------------------------------*/
footer{
	position: fixed;
    bottom: 0;
    height: 45px;
    width: 100%;
    color: #fff;
    background-color: #000;
    margin: 0 auto;
    text-align: center;
    margin-left: -10px;
    padding-left: 12px;
}

#fix2{
	height: 50px;
}

.colour{
	color: #FF9100;
}