/*** TYPOGRAPHY ***/

/* FONTS */

    @font-face{
        font-family:"Univers LT W05_85 Extra Black";
        src:url("../../fonts/b9c1bdc6-859c-4035-beda-649811cf072f.eot?#iefix");
        src:url("../fonts/b9c1bdc6-859c-4035-beda-649811cf072f.eot?#iefix") format("eot"),url("../fonts/20bd2aa7-5fc1-4d29-aea6-e275fb95cbec.woff2") format("woff2"),url("../fonts/8b798090-9f1b-4f08-bd6e-0a4af530ce12.woff") format("woff"),url("../fonts/685846a7-15b7-4e30-a915-f9e9e4e1623e.ttf") format("truetype"),url("../fonts/61e27602-0b0c-49c8-ae9a-c3a663090365.svg#61e27602-0b0c-49c8-ae9a-c3a663090365") format("svg");
    }
    @font-face{
        font-family:"Univers LT W01 45 Light";
        src:url("../fonts/2b61512c-069e-4111-bb23-9a918f94a74d.eot?#iefix");
        src:url("../fonts/2b61512c-069e-4111-bb23-9a918f94a74d.eot?#iefix") format("eot"),url("../fonts/4487d7ba-1656-47e3-aaf0-b3a0054fb3b8.woff2") format("woff2"),url("../fonts/ecf89914-1896-43f6-a0a0-fe733d1db6e7.woff") format("woff"),url("../fonts/7628f343-8c36-4707-9559-8feb86c0462f.ttf") format("truetype"),url("../fonts/11b816e7-d678-48dd-bc75-560de9c19049.svg#11b816e7-d678-48dd-bc75-560de9c19049") format("svg");
    }
    @font-face{
        font-family:"Univers LT W01 55 Roman";
        src:url("../fonts/b5c30ea8-0700-4fd2-aa12-cc45074693a9.eot?#iefix");
        src:url("../fonts/b5c30ea8-0700-4fd2-aa12-cc45074693a9.eot?#iefix") format("eot"),url("../fonts/091fe5d9-1aaa-4f3c-9b94-c83bb7c362ab.woff2") format("woff2"),url("../fonts/7b95cb9a-a288-4405-97a0-13095f56a903.woff") format("woff"),url("../fonts/c7481806-4ea4-40db-a623-7bc352bbbe43.ttf") format("truetype"),url("../fonts/ac8280da-3de5-456d-bd77-8f01665452a9.svg#ac8280da-3de5-456d-bd77-8f01665452a9") format("svg");
    }
    @font-face{
        font-family:"Univers LT W01 65 Bold";
        src:url("../fonts/db1c462f-8890-4a11-9de5-36872279e20a.eot?#iefix");
        src:url("../fonts/db1c462f-8890-4a11-9de5-36872279e20a.eot?#iefix") format("eot"),url("../fonts/a88f6520-d0c2-4877-b792-cb77cca8e307.woff2") format("woff2"),url("../fonts/b993da84-c1f6-474a-8f00-8aa797b3de8f.woff") format("woff"),url("../fonts/58403ef6-4c15-4280-b4b6-9acf50804f4f.ttf") format("truetype"),url("../fonts/9178e351-95c5-4913-9eeb-fd0645a18c2d.svg#9178e351-95c5-4913-9eeb-fd0645a18c2d") format("svg");
    }

/** GLOBAL **/

:focus {
	box-shadow: none !important;
	outline: none !important;
}


#help {
    height: 0; /* 100% Full-height */
    width: 100%; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 10000; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: rgba(0,0,0,0.8); /* Trans*/
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* Style the video: 100% width and height to cover the entire window */
#helpVideo {
	width: 100%;
	height: auto;
}

.help_content {
	overflow-x: hidden;
	width: 90%;
	max-width: 720px;
	margin: 0 auto;
	padding-top: 80px;
	position:relative;
}

#help_me {
	position: absolute;
	top:-20px;
	right: 60px;
	background: #000;
	color: #fff;
	padding: 10px 15px 0px 15px;
	height: 45px;
	border-radius: 7px;
	border-top-right-radius:0;
	border-top-left-radius: 0;
}

@media (min-width: 768px) {
	#help_me {
		top:-10px;
	}	
}

#help_me a {
	color: rgba(255,255,255,0.5);
	text-decoration: none;
}

#help_me a:hover {
	color: rgba(255,255,255,1);
	text-decoration: none;	
}

/* Position and style the close button (top right corner) */
#help .closebtn {
    position:absolute;
    top: 0px;
    right: 0px;
    font-size: 36px;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
}

#help .closebtn:hover {
    color: rgba(255,255,255,1);
    text-decoration: none;
}

/* Style the video: 100% width and height to cover the entire window */
#myVideo {
    position: fixed;
    left: 0%;
    top:-100px;
    min-width: 100%; 
    min-height: 110%;
    z-index: -10;
}


body {
	/*background: url('https://www.bodycote.com/fictional-metals/images/background.jpg') no-repeat;
	background-size: cover;*/
	font-family: 'Univers LT W01 55 Roman';
	/*border-top: 20px solid #ed1c24;*/
	/*background-image: url('../images/146147567.jpg');
	background-position: top center;
	background-size: auto 1800px;
	background-repeat: no-repeat;*/
	color: /*#222222*/ #ffffff;
	position:relative;
	/*font-size: 0.86rem;*/
	font-size: 13.5px;
}

#ElementDetail {
	color: #000;
}

.container {
	max-width: 1800px !important;
	margin: 0 auto;
	padding-top: 20px;
	}

.brand {
	padding-bottom: 10px;
}

.brand img {
	width: 200px;
	height: auto;
}

.right_brand {
	width: 100%;
	padding-right: 1em;
	text-align:right;
	padding-top: 40px;
}

.right_brand img {
	width: 140px;
	height: auto;
	margin-left: -8px;
	padding-bottom: 10px;
}

hr.top {
	margin: 0.5em 0 1em 0;
}


h1 {
	font-size: 30px;
	padding-top: 13px;
	padding-bottom: 0.5em;
	color: #000;
}

@media (min-width: 1200px) {
	h1 {
		padding-left: 30px;
	}
}

h2 {
	padding-top: 1em;
	padding-bottom: 0.5em;
	border-bottom: 1px dotted #fff;	
	margin-bottom: 1em;
}

a {
	color: rgba(40,34,60,1);
}

a:hover {
	color: rgba(40,34,60,1);
}

p {
	font-size: 1rem;
}

p a {
	color: rgba(237,28,36,1);
}

p a:hover {
	color: rgba(237,28,36,0.5);
}

dt {
        font-family:"Univers LT W01 65 Bold";	
}

hr {
	margin: 2.5em 0 1em 0;
}

.content {
	position: relative;
	padding:25px;
	background-color: rgba(255,255,255,0);
}
	
.signup {
	background: rgba(255,255,255,0.7);
	background:linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.9));
}

.section-content {
	padding: 35px 15px;
}

.btn {
  padding: 0 28px;
  height: 55px;
  line-height: 53px;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 400;
}

.btn-color {
  color: #fff;
  border-color: #ed1c24;
  background-color: #ed1c24;
}
.btn-color:hover,
.btn-color:active,
.btn-color:focus {
  background-color: #222222;
  border-color: #222222;
  color: #fff;
}
.btn-color-out {
  color: #ed1c24;
  border-color: #ed1c24;
  background-color: transparent;
}
.btn-color-out:hover,
.btn-color-out:active,
.btn-color-out:focus {
  background-color: #222222;
  border-color: #222222;
  color: #fff;
}



.footer {
	padding: 30px;
	background: rgba(255,255,255,0.9);
	border-top: 2px solid #000;
}

.footer a {
	margin-right: 10px;
}

.footer p {
	color: #000000;
}

.footer_logo img {
	width: 140px;
	height: auto;
	margin-left: -8px;
	padding-bottom: 10px;
}

.social {
	font-size: 20px;
}

.social a {
	margin-right: 10px;
}	

.top_content p {
	padding-right: 15px;
	padding-bottom: 15px;
}

p.intro {
	padding-top: 30px;
}

.hide_on_desktop {
	display:block;
	padding-bottom: 10px;
}

.hide_on_mobile {
	display:none;
}

.outer {
	/*background-color: rgba(255,255,255,0.5);*/
	background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.2));
	max-width: 100% !important;
}


/* Medium devices (desktops, 768px and up) */
@media (min-width: 768px) {
	
	.hide_on_desktop {
		display:none;
	}
	
	.hide_on_mobile {
		display:block;
	}

	.container {
	max-width: 1400px !important;
		padding: 10px 30px 30px 30px;
	}
		
	.content {
		padding:30px 50px 50px 50px;	
	}
	
	.submit_button {
		text-align: right;
	}
	
}

@media (min-width: 769px) {
	
	#colour-key ol {
		margin-top: 4em;
		padding-left: 0;
	}
	
}

/* Semi-Large devices (large desktops, 992px and up) */
@media (min-width: 992px) {
	
	.container {
		padding: 10px 50px 50px 50px;
	}
	
	.social {
		text-align:right;
	}
	
	#colour-key ol {
		margin-top: 0.3em;
		padding-left: 0;
	}	
	
	li#Key {
		padding-top: 1em !important;
	}
		
}

#colour-key {
	font-size: 0.6rem;
	padding-bottom: 20px;
}

#colour-key-mobile ol {
	padding-left: 0;
}

#Key {
	list-style: none;
}

form label.order {
	width: 100%;
	border-bottom: 1px dotted #fff;
	font-size: 13.2px;
	padding-top: 12px;
	padding-bottom: 6px;
	margin-bottom: 12px;	
}

/*#Elements li div:nth-child(4) {
	color:transparent;
}*/


[role="dialog"] {
  position: fixed;
  z-index: 200;
  top: 10vh;
  bottom: 10vh;
  height: 600px;
  left: 10vw;
  right: 10vw;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  box-shadow: 0 0 2em rgba(0,0,0,.5);
  background: #fefefe;
  padding: 0.1em;
  visibility: visible;
  transition: transform .1s ease-in, opacity .2s ease-in;
}

#ElementDetail {
	height: 520px;
	overflow: auto;
}

@media (min-width: 769px) {
	
	#ElementDetail {
		height: 720px;
		overflow: hidden;
	}
	
	[role="dialog"] {
		height: 750px;
	}
	
}

dl+p {
	display:none;
}

.header_image {
	width: 100%;
	height:auto;
}

.tint {
	background: rgba(0,0,0,0.3);
	background:linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
	border-radius: 5px;
}

.lead {
	/*min-height: 200px;*/
	padding-top: 30px;
	padding-bottom: 20px;
	font-size: 16px;
}