@charset "utf-8";
#navi {
    background-color: #fc5241;
    height: 135px;
    width: 100%;
}
#banner {
     height: 600px;
    width: 100%;
	background-image: url("images/20.jpg");
	background-repeat: no-repeat;
	background-size:cover;
	margin-top: -1px;
}

#bantext{
	 height: 35px;
   width: 100%;
    padding-top: 200px;
	margin-left: 10%;
    font-size: 100px;
    font-weight: bold;
}

#bantext h1{
	 height: 35px;
   width: 100%;
	 font-size: 30px;
}

#logo {

  height: 135px;
    width: 300px;
	margin-left: 250px;
    padding: 30px;
}
#img {
	  height: 100px;
    width: 300px;
	background-image: url("images/souls.png");
		background-repeat: no-repeat;
}
#tag {
  height: 135px;
    width: 60%;
	margin-left: 45%;
	margin-top: -200px;
	padding: 60px 120px;
	
}

#port{
	text-align: center;
	font-size: 20px;
	margin-top: 80px;
}
#port hr{
	text-align: center;
	width: 7%;
}	
#portfolio {
	
}
#box1 {
    background-color: #FF00FF;
    height: 300px;
    width: 15%;
	margin-left: 17%;
	margin-top: 80px;
	background-image: url("images/1.jpg");
	background-repeat: no-repeat;
	
	background-size:cover;
	
}

#box2 {
   background-color: aqua;
      height: 300px;
    width: 15%;
	margin-left: 34%;
	margin-top: -300px;
   background-image: url("images/2.jpg");
		background-repeat: no-repeat;
	background-size:cover;
}
#box3 {
   background-color: aquamarine;
      height: 300px;
    width: 15%;
	margin-left: 51%;
	margin-top: -300px;
   background-image: url("images/3.jpg");
		background-repeat: no-repeat;
	background-size:cover;
}
#box4 {
   background-color: mediumaquamarine;
      height: 300px;
    width: 15%;
	margin-left: 68%;
	margin-top: -300px;
   background-image: url("images/11.jpg");
		background-repeat: no-repeat;
	background-size:cover;
}
#box5 {
    background-color: #FF00FF;
    height: 300px;
   width: 15%;
	margin-left: 17%;
	margin-top: 25px;
	background-image: url("images/16.jpg");
		background-repeat: no-repeat;
	background-size:cover;
}
#box6 {
   background-color: aqua;
      height: 300px;
    width: 15%;
	margin-left: 34%;
	margin-top: -300px;
   background-image: url("images/14.jpg");
		background-repeat: no-repeat;
	background-size:cover;
}
#box7 {
   background-color: aquamarine;
      height: 300px;
    width: 15%;
	margin-left: 51%;
	margin-top: -300px;
   background-image: url("images/7.jpg");
		background-repeat: no-repeat;
	background-size:cover;
}
#box8 {
   background-color: mediumaquamarine;
      height: 300px;
    width: 15%;
	margin-left: 68%;
	margin-top: -300px;
   background-image: url("images/6.jpg");
		background-repeat: no-repeat;
	background-size:cover;
}
#box9 {
    background-color: #FF00FF;
    height: 300px;
     width: 15%;
	margin-left: 17%;
	margin-top: 25px;
	background-image: url("images/9.jpg");
		background-repeat: no-repeat;
	background-size:cover;
}
#box10 {
   background-color: aqua;
      height: 300px;
    width: 15%;
	margin-left: 34%;
	margin-top: -300px;
   background-image: url("images/8.jpg");
		background-repeat: no-repeat;
	background-size:cover;
}
#box11 {
   background-color: aquamarine;
      height: 300px;
     width: 15%;
	margin-left: 51%;
	margin-top: -300px;
   background-image: url("images/x.jpg");
		background-repeat: no-repeat;
	background-size:cover;
}
#box12 {
   background-color: mediumaquamarine;
      height: 300px;
    width: 15%;
	margin-left: 68%;
	margin-top: -300px;
   background-image: url("images/12.jpg");
		background-repeat: no-repeat;
	background-size:cover;
}
#box13 {
    background-color: #FF00FF;
    height: 300px;
    width: 15%;
	margin-left: 17%;
	margin-top: 25px;
	background-image: url("images/17.jpg");
		background-repeat: no-repeat;
	background-size:cover;
}
#box14 {
   background-color: aqua;
      height: 300px;
    width: 15%;
	margin-left: 34%;
	margin-top: -300px;
   background-image: url("images/10.jpg");
		background-repeat: no-repeat;
	background-size:cover;
}
#box15 {
   background-color: aquamarine;
      height: 300px;
    width: 15%;
	margin-left: 51%;
	margin-top: -300px;
   background-image: url("images/5.jpg");
		background-repeat: no-repeat;
	background-size:cover;
}
#box16 {
   background-color: mediumaquamarine;
      height: 300px;
    width: 15%;
	margin-left: 68%;
	margin-top: -300px;
   background-image: url("images/px.jpg");
		background-repeat: no-repeat;
	background-size:cover;
}

#footer {
    background-color: #24201f;
    height: 300px;
    width: 100%;
	margin-top: 50px;

}
#footertext {

    height: 300px;
    width: 100%;
	margin-top: 120px;
	padding: 30px 180px;
}
#h1 {
    color: #FFFFFF;
    height: 50px;
    width: 584px;
   font-size: 30px;
	margin-top: 30px;
    font-weight: bold;
}
#h2 {
    color: #c7c6c6;
    height: 50px;
    width: 640px;
    font-size: 20px;
    line-height: 25px;

    
}
#link {
    color: #FFFFFF;
    height: 50px;
    width: 584px;
    font-size: 18px;
    margin-left: 900px;
    line-height: 33px;
    margin-top: -100px;
    font-weight: bold;
    
}
#h3 {
    color: #c7c6c6;
    height: 50px;
    width: 584px;
    font-size: 18px;
    margin-left: 900px;
    line-height: 33px;
    margin-top: -16px;
    font-weight: bold;
 }
#h3 a:hover{
	color: white;
}
#h4 {
    color: #FFFFFF;
    font-size: 18px;
    margin-left: 182px;
    line-height: 33px;
    font-weight: bold;
    
}
#h5 {
    color: #FFFFFF;
    font-size: 18px;
    margin-left: 1011px;
    line-height: 33px;
    font-weight: bold;
    margin-top: -27px;
    
}
#footer1 {
    background-color: #fc5241;
    height: 113px;
    width: 100%;


}
#footertext1 {
	margin-top: -80px;
	
}
#icons {
    margin-right: 42px;
    margin-left: 843px;
    margin-top: -37px;
    float: left;

	
}
#fb {
	
}
#ig {
    margin-left: 50px;
    margin-top: -45px;
	
}
#tw {
    margin-left: 103px;
    margin-top: -47px;
	
}

#box1:hover{
      filter: grayscale(50%);	
	transform: scale(1.1);
}
#box2:hover {
      filter: grayscale(50%);
	transform: scale(1.1);
}

#box3:hover{
      filter: grayscale(50%);
	transform: scale(1.1);
}
#box4:hover{
      filter: grayscale(50%);
	transform: scale(1.1);
}

#box5:hover {
      filter: grayscale(50%);
	transform: scale(1.1);
}
#box6:hover {
      filter: grayscale(50%);
	transform: scale(1.1);
	
}
#box7:hover{
      filter: grayscale(50%);
	transform: scale(1.1);
	
}
#box8:hover {
      filter: grayscale(50%);
	transform: scale(1.1);
	
}
#box9:hover{
      filter: grayscale(50%);
	transform: scale(1.1);
	
}
#box10:hover {
      filter: grayscale(50%);
	transform: scale(1.1);
	
}

#box11:hover{
      filter: grayscale(50%);
	transform: scale(1.1);
	
}
#box12:hover {
      filter: grayscale(50%);
	transform: scale(1.1);
	
}
#box13:hover {
      filter: grayscale(50%);
	transform: scale(1.1);
	
}
#box14:hover {
      filter: grayscale(50%);
	transform: scale(1.1);
	
}

#box15:hover{
      filter: grayscale(50%);
	transform: scale(1.1);
	
}
#box16:hover{
      filter: grayscale(50%);
	transform: scale(1.1);
	
}