@font-face {
    font-family: 'Duke Fill';
    src: url('Duke-Fill.woff2') format('woff2'),
        url('Duke-Fill.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


* {
    font-size: 100%;
    font:inherit;
    font-family: 'Duke Fill';
	text-shadow: 4px 4px 3.5px black;
}

@media (min-width: 1500px) {
	body {
	  color: #000;
	}

}
body {
	background-image: url("DefianceBG.jpg");
	background-size: 100%;
}

h1{
	color: white;
}

nav {
	position: static;
	border: none;
	border-bottom: .55vh solid #f8f533;
	padding: 0em;
	height: 4.4em;
	width: 100vw;
	/*box-shadow: 0px -14px 20px white;*/
	z-index: 100px;
	padding: 0 0 4em 0;
}

.navlogo {
	position: static;
	display: inline-block;
	margin: .2em 0 1em 1em;
	height:3.4em;
}

.nava {
	text-decoration: none;
}

.navtitle {
	position: relative;
	display: inline-block;
	top: -.7em;
	font-size: 2.5em;
	color: white;
}

.rojo {
	display: inline;
	position: static;
	font-size: 1.65em;
	color: white;
	margin: 1vh;
}

.bimg {
	display: inline-block;
	position: relative;
	left: -.8vh;
	top: 5em;
	height: 9em;
}

.dimg {
	display: inline-block;
	position: relative;
	left: 0vh;
	top: 1em;
	height: 9em;
}

.gbimg {
	display: inline-block;
	position: relative;
	left:-.4em;
	top: 7em;
	height: 5em;
	
}

.gdimg {
	position: relative;
	top: 2.4em;
	z-index: 100;
	height: 5em;
}

.dtext {
	display: block;
	position: absolute;
	left: 0;
	top: 7%;
	z-index: -1;
	opacity: 0;
	transition: all .4s;
}

.link {
	position: absolute;
	color: white;
	padding: 0px 4px 3px 4px;
	border: 1px solid #fff;
	border-radius: .5vh;
	background-color: rgba(0, 0, 0, 0.400);
	bottom: 20%;
	right: 5%;
	z-index: -1;
	text-decoration: none;
	font-size: 1.7em;
	opacity: 0;
	transition: all .5s;
}


.container{
	display: inline-block;
	position: static;
	margin: 1.5em 1.5em;

}

.texto {
	font-size: 3.4em;
	margin: .6em 0 -1.3vh 0;
}

.div {
	position: relative;
	display: inline-block;
	transition: 0s 5s all;
	border-radius: 1.2em;
	margin: 2vh;
	height: 18em;
	width: 18em;
	box-shadow: 2px 4px 15px #000;
	color: #000;
	left: 0;
	right: 0;
	text-decoration: none;
	vertical-align: top;
	padding: 1em;
	text-align: center;
}


.gdesc {
	position: relative;
	display: block;
	left: 0;
	width: 90vw;
	height: 63em;
	margin: 1vh 3vw;
	border-radius: 2vh;
	box-shadow: 2px 4px 15px #000;
	color: #000;
	text-decoration: none;
	box-sizing: content-box;
	text-align: center;
	box-shadow: .9vh .9vh 2vh black;
}

.pattern {
	display: block;
	position: relative;
	top: 18em;
	height: 35em;
	width: 30em;
}

.patterndesc {
	position: relative;
	display: block;
	text-align: left;
	left: 11vh;
	font-size: 2.4em;
}

.patternimg {
	display: inline-block;
	position: absolute;
	left: 1.5em;
	width:15em;
	margin: 1em;
	border: 2px solid white;
	border-radius: 2.5vh;
	box-shadow: .9vh .9vh 2vh black;
	margin: 0 0 10em 0;
	transition: all 1s;

}

#pic:focus{
	transform: rotateX(180deg) rotateY(180deg);
	box-shadow: -.9vh -.9vh 2vh black;
 }

.patternimg:hover {
}

.gdesctitle {
	font-size: 5em;
	margin: 3vh 0 -3.3vh 0;
}

.gdescsubtitle {
	font-size: 2.5em;
	margin: 3vh 0 -1.3vh 0;
	color: white;
}


.gdescimg {
	margin: 0 0 4em 0;
	width: 40em;
}

.attachmentbox {
	display: flexbox;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
    height: 4em;
    width: 20em;
}

.attachment {
	height: 3em;
	border: .2vh solid white;
	border-radius: .8em;
	margin: 0 1vh 1vh 0vh;
	padding: .5vh;
	box-shadow: .5vh 0vh 2vh black;
}

.opticbox {
	position: relative;
	display: inline-block;
	
}

.opattachment {
	display: block;
	height: 3em;
	border: .2vh solid white;
	border-radius: .8em;
	margin: 1vh 6.5vh 1vh 1.5vh;
	padding: .5vh;
	box-shadow: .5vh .6vh 2vh black;
}


.opticboxoptions {
	background-image: radial-gradient(#04261c,#021e15);
	opacity: 0;
	outline: 1px solid white;
	border-radius: .4em;
	top: 5em;
	left: -.7vw;
	padding: 0em;
	display: block;
	position:absolute;
	z-index: 1000px;
}

#pic2:focus + #opticboxoptions 	{
	display: block;
	transition: opacity 1s ;
	opacity: 1;
}

.gun {
	margin: 6vh 0;
	display: block;
	position: absolute;
	height: 11.5em;
	width: 19.8em;
	left: 50%;
    transform: translate(-50%, 0);
	padding: 4vh 6vh 10vh 6vh;
	border: .25vh solid white;
	border-radius: 1em;
	box-shadow: .9vh .9vh 2vh black;
}

.pesadas {
	background-image: radial-gradient(#043224,#010d09);
}


.pesadasdesc {
	background-image: radial-gradient(#043224,#010d09);
}

.livianas {
	background-image: radial-gradient(#492403, #210f01);
}


.energia {
	background-image: radial-gradient(#2a3502,#171d02);
}


.escopetas {
	background-image: radial-gradient(rgb(69, 3, 3),rgb(25, 1, 1));
}

.snipers {
	background-image: radial-gradient(rgb(25, 25, 70),rgb(8, 8, 21));
}

.arcos {
	background-image: radial-gradient(#2e2509,#171305);
}

.principal {
	position: absolute;
	transition: all 5s;
	background-color: #338;
	top: -.9vh;
	left: -.8vh;
	right: 0;
	z-index: 10000px;
	opacity: 1;
	border-radius: 1.2em;
	padding: .7em 1.2em 1.2em 1.2em;
	height: 100%;
	width: 100%;
	z-index: 1000px;
	box-shadow: 2px 4px 15px #000;
}

.descripcion {
	position: absolute;
	color: #fff;
	left: 0;
	top: 0;
	display: inline-block;
	transition: 0s 5s all;
	border-radius: 2vh;
	padding: 1.5em 1.2em 1.2em 1.2em;
	height: 18em;
	width: 18em;

}

.pesadas:hover > .principal, .livianas:hover > .principal , .energia:hover > .principal , .escopetas:hover > .principal , .snipers:hover > .principal , .arcos:hover > .principal {
    opacity: 0;
}

.pesadas:hover > .texto {}

.pesadas > .principal, .livianas > .principal , .energia > .principal , .escopetas > .principal , .snipers > .principal , .arcos > .principal {
	transition: all .5s;
}

.pesadas > .principal {
	background-image: radial-gradient(#033d2c,#01120d);
}

.livianas > .principal {
	background-image: radial-gradient(#5b2c03, #301702);
}

.energia > .principal {
	background-image: radial-gradient(#475904,#151b01);
}

.escopetas > .principal {
	background-image: radial-gradient(rgb(93, 1, 1),rgb(44, 2, 2));
}

.snipers > .principal {
		background-image: radial-gradient(rgb(34, 34, 95),rgb(15, 15, 43));
}

.arcos > .principal {
	background-image: radial-gradient(#3f330c,#241d07);
}

.pesadas:hover > .bimg , .livianas:hover > .bimg , .energia:hover > .bimg , .escopetas:hover > .bimg , .snipers:hover > .bimg , .arcos:hover > .bimg {
    display: inline;
	opacity: .3;

}

.pesadas:hover > .gbimg , .livianas:hover > .gbimg , .energia:hover > .gbimg , .escopetas:hover > .gbimg , .snipers:hover > .gbimg , .arcos:hover > .gbimg {
    display: inline;
	opacity: .3;

}

.pesadas:hover > .dtext, .pesadas:hover > .link , .livianas:hover > .dtext, .livianas:hover > .link , .energia:hover > .dtext, .energia:hover > .link , .escopetas:hover > .dtext, .escopetas:hover > .link
, .snipers:hover > .dtext, .snipers:hover > .link , .arcos:hover > .dtext, .arcos:hover > .link {
	opacity: 1;
	z-index: 1;

}