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



header{
	margin:0;
	padding:0;
}

#showcase{
	background-image:url('../img/showcase2.jpeg');
	background-size:cover;
	background-position:center;
	height:100vh;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	padding:0 20px;
	
}



#showcase h1{
	font-size:50px;
	color:#FFF;
	margin-bottom:-15px;
	text-align:center;
	line-height:1.2;
}

#showcase p{
	font-size:20px;
	color:#fff;
	text-align:center;
	margin-top:40px;
}

#showcase .button{
	font-size:18px;
	text-decoration:none;
	color:#fff;
	border:#fff 5px solid;
	padding:10px 20px;
	margin-top:20px;
	
}

#showcase .button:hover{
	background-color:#131416;
}





#section-a{
	padding:50px;
	padding-left:250px;
	padding-right:250px;
	background: rgba(35,37,40,1);
	background: -moz-linear-gradient(top, rgba(35,37,40,1) 0%, rgba(53,54,56,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(35,37,40,1)), color-stop(100%, rgba(53,54,56,1)));
	background: -webkit-linear-gradient(top, rgba(35,37,40,1) 0%, rgba(53,54,56,1) 100%);
	background: -o-linear-gradient(top, rgba(35,37,40,1) 0%, rgba(53,54,56,1) 100%);
	background: -ms-linear-gradient(top, rgba(35,37,40,1) 0%, rgba(53,54,56,1) 100%);
	background: linear-gradient(to bottom, rgba(35,37,40,1) 0%, rgba(53,54,56,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#232528', endColorstr='#353638', GradientType=0 );
	color:#eee;
	font-family:"Times New Roman", Times, serif;
	font-style:italic;
	font-size:26px;
}

@media(max-width:768px){
	#section-a{padding-left:50px;padding-right:50px;}
}

#section-a div{
	padding:20px;
}

.section-name-a{
	font-family:Arial, Helvetica, sans-serif;
	font-size:25px;
	font-style:normal;
	text-align:center;
	letter-spacing:3px;
	color:#87999d;

}



#section-a a{
	color:#87999d;
	font-size:22px;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
	font-style:normal;
}
#section-a a:hover{
	color:#FFF;
	transition:0.3s;
}


#section-b{
	padding:50px;
	background: rgba(204,204,204,1);
	background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(216,213,213,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(204,204,204,1)), color-stop(100%, rgba(216,213,213,1)));
	background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(216,213,213,1) 100%);
	background: -o-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(216,213,213,1) 100%);
	background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(216,213,213,1) 100%);
	background: linear-gradient(to bottom, rgba(204,204,204,1) 0%, rgba(216,213,213,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#d8d5d5', GradientType=0 );
	color:#000;
	font-size:17px;
}

/*
#section-b div{
	padding:0px;
    justify-content:center;
	align-items:center;
	text-align:center;

}


#section-b p{
	font-family:"Arial", "Helvetica", sans-serif;
	text-align:center;
	margin-left:20px;
	margin-top:6px;
	
}
*/
.section-name-b{
	font-family:Arial, Helvetica, sans-serif;
	font-size:25px;
	text-align:center;	
	letter-spacing:3px;
	color:#131416;
}



#section-c{
	padding:50px;
	background-color:#87999d;
	color:#fff;	
	font-size:20px;
	background-image:url('../img/showcase1.jpeg');
	background-attachment:fixed;	
	background-size:cover;
	background-position:center;
}



.section-name-c{
	font-family:Arial, Helvetica, sans-serif;
	font-size:25px;
	text-align:center;
	letter-spacing:3px;
	color:#f8f8f8;

}

#section-c p{
	font-family:Arial, Helvetica, sans-serif;
	text-align:left;
	margin-left:20px;
	margin-top:6px;
	
}
#section-c a{
	opacity:1.0;
	transition:0.3s;
}

#section-c a:hover{
	opacity:0.7;
}

#section-d{
	padding:50px;
	background: rgba(35,37,40,1);
	background: -moz-linear-gradient(top, rgba(35,37,40,1) 0%, rgba(53,54,56,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(35,37,40,1)), color-stop(100%, rgba(53,54,56,1)));
	background: -webkit-linear-gradient(top, rgba(35,37,40,1) 0%, rgba(53,54,56,1) 100%);
	background: -o-linear-gradient(top, rgba(35,37,40,1) 0%, rgba(53,54,56,1) 100%);
	background: -ms-linear-gradient(top, rgba(35,37,40,1) 0%, rgba(53,54,56,1) 100%);
	background: linear-gradient(to bottom, rgba(35,37,40,1) 0%, rgba(53,54,56,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#232528', endColorstr='#353638', GradientType=0 );
	
}


.section-name-d{
	font-family:Arial, Helvetica, sans-serif;
	font-size:25px;
	text-align:center;
	letter-spacing:3px;
	color:#87999d;

}


#section-e{
	padding:50px;
	background: rgba(19,20,22,1);
	background: -moz-linear-gradient(top, rgba(19,20,22,1) 0%, rgba(28,29,31,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,20,22,1)), color-stop(100%, rgba(28,29,31,1)));
	background: -webkit-linear-gradient(top, rgba(19,20,22,1) 0%, rgba(28,29,31,1) 100%);
	background: -o-linear-gradient(top, rgba(19,20,22,1) 0%, rgba(28,29,31,1) 100%);
	background: -ms-linear-gradient(top, rgba(19,20,22,1) 0%, rgba(28,29,31,1) 100%);
	background: linear-gradient(to bottom, rgba(19,20,22,1) 0%, rgba(28,29,31,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131416', endColorstr='#1c1d1f', GradientType=0 );
	color:#fff;	
	font-size:20px;
}


.section-name-e{
	font-family:Arial, Helvetica, sans-serif;
	font-size:25px;
	text-align:center;
	letter-spacing:3px;
	color:#87999d;

}

#section-e p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:17px;
	color:#FFF;
	margin-left:20px;
	margin-top:6px;
	
}

#section-f{
	padding:50px;
	padding-top:80px;
	background-color:#272829;	
	color:#fff;	
	font-size:20px;
}


.section-name-f{
	font-family:Arial, Helvetica, sans-serif;
	font-size:25px;
	text-align:center;
	letter-spacing:3px;
	color:#87999d;

}

#section-f p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:17px;
	color:#FFF;
	margin-left:20px;
	margin-top:6px;
	
}

#section-g{
	padding:50px;
	background: rgba(19,20,22,1);
	background: -moz-linear-gradient(top, rgba(19,20,22,1) 0%, rgba(28,29,31,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,20,22,1)), color-stop(100%, rgba(28,29,31,1)));
	background: -webkit-linear-gradient(top, rgba(19,20,22,1) 0%, rgba(28,29,31,1) 100%);
	background: -o-linear-gradient(top, rgba(19,20,22,1) 0%, rgba(28,29,31,1) 100%);
	background: -ms-linear-gradient(top, rgba(19,20,22,1) 0%, rgba(28,29,31,1) 100%);
	background: linear-gradient(to bottom, rgba(19,20,22,1) 0%, rgba(28,29,31,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131416', endColorstr='#1c1d1f', GradientType=0 );
	color:#fff;	
	font-size:20px;
	height:40vh;
}

.social-a{
	width:36px;
	height:36px;
	background-image:url('../img/social1.png');
}

.social-a:hover{
	background-image:url('../img/social1-hover.png');
	transition:0.3s;
}
.social-b{
	width:36px;
	height:36px;
	background-image:url('../img/social2.png');
}

.social-b:hover{
	background-image:url('../img/social2-hover.png');
	transition:0.3s;
}
.social-c{
	width:36px;
	height:36px;
	background-image:url('../img/social3.png');
}

.social-c:hover{
	background-image:url('../img/social3-hover.png');
	transition:0.3s;
}
.social-d{
	width:36px;
	height:36px;
	background-image:url('../img/social4.png');
}

.social-d:hover{
	background-image:url('../img/social4-hover.png');
	transition:0.3s;
}

.wrapper-social{
	display:grid;
	grid-template-columns:36px 36px 36px 36px;
	/*grid-column-gap:1em;
	grid-row-gap:1em;*/
	grid-gap:1px;
}

.social-element{
	height:36px;
	width:36px;
}

#topBtn {
  display: none;
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  color: #fff;
  cursor: pointer;
  padding:10px;/*
  padding-left:15px;
  padding-right:15px;*/
  background-color:#212223;
  /*border-radius: 50%;*/
  -webkit-box-shadow: 0px 0px 100px 0px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 0px 100px 0px rgba(0,0,0,0.8);
box-shadow: 0px 0px 100px 0px rgba(0,0,0,0.8);

}

#topBtn:hover {
	background-color:#fff;
	color:#212223;
}




/*flex stuff*/

.flex-container {
  display: flex;
  flex-flow: wrap;
  align-content: flex-start;
  }
.space-between {
  justify-content: space-between;
  }
.space-around {
  justify-content: space-around;
  }

/* Decorations
-------------------- */
.flex-container {
  counter-reset: flex-item-counter;
  padding: 20px;
  margin-top:20px;
  }
.flex-item {
  padding: 5px;