* {
  box-sizing: border-box;
}

body {
  background-color: #000000;
  color: #666666;
  font-family: Arial, Helvetica, sans-serif;
}

#wrapper {
  background-color: #90c7e3;
  background-image: linear-gradient(to bottom, #ffffff, #000000);
  background-repeat: no-repeat;
}

header {
  background-color: #3266a8;
  color: #ffffff;
  text-align: center;
}

header a {
  text-decoration: none;
}

header a:link {
  color: #ffffff;
}

header a:visited {
  color: #ffffff;
}

header a:hover {
  color: #000000;
}

h1 {
  margin-bottom: 0;
  margin-top: 0;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .25em;
  padding-top: .5em;
  padding-bottom: .5em;
}

nav {
  text-align: center;
  font-size: 120%;
  font-weight: bold;
  padding: 0;
}

nav a {
  text-decoration: none;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
  font-size: 1.2em;
}

nav a:link {
  color: #FF0000;
}

nav a:visited {
  color: #3266a8;
}

nav a:hover {
  color: #000000;
}


nav li {
  border-bottom: 1px solid #000033;
}

main {
  Background-color: #ffffff;
  overflow: auto;
  padding: 1px 20px 20px 30px;
  display: block;
}

#mainlogohero {
  height: 200px;
  background-image: url(logoblacktran.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#homehero {
  height: 320px;
  background-image: url(colorfilament.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

#hometwohero {
  height: 400px;
  background-image: url(print3d.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#filhero1 {
  height: 400px;
  background-image: url(plavabs.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#filhero2 {
  height: 400px;
  background-image: url(tpuex.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

h2 {
  color: #1976d2;
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 2px 2px 2px #cccccc;
}

h3 {
  color: #000033;
  font-family: Georgia, "Times New Roman", serif;
}

footer {
  font-size: 75%;
  font-style: italic;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  padding: 2em;
  background-color: #ffffff;
}

.company {
  color: #1976d2;
  font-weight: bold;
}

.typing {
  font-weight: bold;
}

#contact {
  font-size: 90%;
}

.container2 {
    width: 50%;
    margin: 50px auto;
    background-color: #b4c0d4;
    padding: 20px;
    border-radius: 10px;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

fieldset {
    border: 2px solid #000000;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 20px;
    width: 100%; 
    box-sizing: border-box;
}

legend {
    font-size: 1.5em;
    color: #000000;
    margin-bottom: 10px;
}

label {
    margin-top: 10px;
}

input, textarea, button {
    margin-bottom: 15px;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid;
    width: 100%; 
    box-sizing: border-box;
}

button {
    background-color: #3266a8;
    color: #ffffff;
}

button:hover {
    background-color: #000000;
}


table {border: 2px solid #3399cc;
		border-collapse: collapse;
		}
td, th {padding: .5em;
		border: 2px solid #3399cc;
		}
td {text-align: center;}
.text {text-align: left;}

tr:nth-of-type(odd) {Background-color: #f5fafc;}

iframe {float: right;
		padding: left 20px;}
		
.custom-list {
  font-family: 'Arial', sans-serif;
  text-align: left;
  color: #000000;
  
}

.custom-list ul {
  padding-left: 20px;
}

.ccontainer {
  display: flex;
  justify-content: center;
  align-items: center;
}





@media(min-width: 600px) {
	
	nav ul{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;
		
	}
	
	nav li{
		border-bottom: none;
	}
	
	section {
		padding-left: 2em;
		padding-right: 2em;
	}
	
	.content main{ display: grid;
					grid-template-rows: auto;
					grid-template-columns: 1fr 1fr 1fr;}
					
	h2{grid-row: 1/2; grid-column: 1/5;}
	section{grid-row: 2/3; grid-column: auto;}
	#special {grid-row: auto; grid-column: 1/5;}
	footer{grid-row: auto; grid-column: 1/5;}
	
	#filplavabs {
	  height: 400px;
	  background-image: url(plavabs.png);
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
}
	
}








@media(min-width: 1024px) {
	
	nav ul{
		display: flex;
		flex-flow: column;
		padding-top: 1em;
		
	}
	
	nav {text-align: left;
		padding-left: 1.5em;
		}
		
	#wrapper{
		margin:auto;
		width: 80%;
		border: 1px solid #000033;
		box-shadow: 3px 3px 3px #333333;
		display: grid;
		grid-template-rows: auto;
		grid-template-columns: 190px auto;
	}
	
	header {grid-row: 1/2; grid-column: 1/3;}
	
	nav{grid-row: 2/5; grid-column: 1/2;}
	
	div{grid-row: 2/3; grid-column: 2/3;}
	
	main{grid-row: 3/4; grid-column: 2/3;}
	
	footer{grid-row: 4/5; grid-column: 2/3;}
	
	
	
}