/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('../fonts/BebasNeue-Regular.woff2') format('woff2'),
        url('../fonts/BebasNeue-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body { font-family: 'Source Sans Pro', sans-serif; background: url(../images/bg.jpg) right 0 no-repeat #ffffff;}
p { letter-spacing: 0.7px; color: #555555; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 20px; }

strong { font-weight: 700; }
button, .button { border: none; background: #bb772e; color: #fff; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 1px;  border-radius: 25px; padding: 15px 45px; font-size: 16px; margin-top: 30px; }
button:hover, .button:hover { background: #2e3f53; color: #ffffff; cursor: pointer; }
h1 { font-family: 'Bebas Neue'; letter-spacing: 1px; color: #2e3f53; font-size: 48px; line-height: 58px; background: url(../images/brown-bar.jpg) no-repeat bottom left; padding-bottom: 15px; margin-bottom: 60px;}
h2 { font-family: 'Bebas Neue'; letter-spacing: 1px; color: #2e3f53; font-size: 48px; line-height: 58px; background: url(../images/brown-bar.jpg) no-repeat bottom left; padding-bottom: 15px; margin-bottom: 60px;}
h3 { font-family: 'Bebas Neue'; letter-spacing: 1px; color: #2e3f53; font-size: 38px; line-height: 55px; background: url(../images/brown-bar.jpg) no-repeat bottom left; padding-bottom: 15px; margin-bottom: 47px;}
h4 { font-family: 'Bebas Neue'; letter-spacing: 1px; color: #2e3f53; font-size: 28px; line-height: 24px; border-bottom: 1px solid #bb772e; padding: 0 0 8px 50px; margin-bottom: 20px; }
h5 { font-family: 'Bebas Neue'; letter-spacing: 1px; color: #ffffff; font-size: 28px; line-height: 24px; text-align: center; margin-bottom: 25px; }
h6 { font-family: 'Bebas Neue'; letter-spacing: 1px; color: #2e3f53; font-size: 28px; line-height: 24px; margin-bottom: 20px; }

.img-mobile, .footer-logo-mobile { display: none; }

header { float: left; width: 100%; overflow: hidden; }
	.header-container { margin: 0 auto; width: 1300px; box-sizing: border-box; overflow: hidden; margin-top: 60px; } 
		.header-container img { float: left; }
		.header-container nav { float: right; padding-top: 32px; }
			.header-container nav ul { display: inline-block; }
				.header-container nav ul li { display: inline-block; font-size: 16px; letter-spacing: 1px; }
					.header-container nav ul li a { color: #bb772e;  text-decoration: none; }
				.header-container nav ul li.btn {  } 
					.header-container nav ul li.btn a { color: #fff; font-weight: bold; padding: 15px 45px; background: #bb772e; border-radius: 25px; margin-left: 30px; }
					.header-container nav ul li.btn a:hover { background: #2e3f53; cursor: pointer; }

.content { float: left; width: 100%; overflow: hidden; }
	.section-one { width: 1300px; margin: 70px auto 0; box-sizing: border-box; overflow: visible; display: flex; align-items: center; }
		.section-one .left { width: 50%; float: left; box-sizing: border-box; padding: 0 40px 0 0; }
		.section-one .right { width: 50%; float: right; box-sizing: border-box; padding: 0 0 0 40px; }
			.section-one .right img { padding-left: 37px; -webkit-animation: floating 5s ease-in-out infinite; animation: floating 5s ease-in-out infinite; }
			@-webkit-keyframes floating {
			    0% { transform: translateY(0); }
			    50% { transform: translateY(-10px) }
			    100% { transform: translateY(0); }
			}
			@keyframes floating {
			    0% { transform: translateY(0); }
			    50% { transform: translateY(-10px) }
			    100% { transform: translateY(0); }
			}
	.section-two { width: 1300px; margin: 60px auto 0; box-sizing: border-box; overflow: hidden; display: flex; align-items: center;	}
		.section-two .left { width: 50%; float: left; box-sizing: border-box; padding: 0 40px 0 0; }
			.section-two .left img { width: 100%; }
		.section-two .right { width: 50%; float: right; box-sizing: border-box; padding: 0 0 0 40px; }

	.section-three { width: 1300px; margin: 140px auto 0; box-sizing: border-box; overflow: hidden; display: flex; align-items: center;	}
		.section-three .left { width: 50%; float: left; box-sizing: border-box; padding: 0 40px 0 0; }
		.section-three .right { width: 50%; float: right; box-sizing: border-box; padding: 0 0 0 40px; }
			.section-three .right img { display: block; margin: 0 auto; }

	.section-four { width: 100%; margin: 110px auto 0; box-sizing: border-box; overflow: hidden; background: #f9f9f9; display: flex; align-items: center;}
		.section-four .left { width: 50%; height: 710px; float: left; box-sizing: border-box; background: url(../images/copper.jpg) no-repeat; background-size: cover; }
			.section-four .left img { width: 100%; }
		.section-four .right { width: 50%; float: right; box-sizing: border-box; padding: 0 60px; }
			.mb-70 { margin-bottom: 70px; }

	.section-five { width: 1300px; margin: 120px auto 130px; box-sizing: border-box; overflow: hidden; display: flex; align-items: center;	}
		.section-five .left { width: 50%; float: left; box-sizing: border-box; padding: 0 40px 0 0; }
			.mb-30 { margin-bottom: 28px; }
			.buy { background: url(../images/buy-icon.png) 10px 1px no-repeat; }
			.sell { background: url(../images/sell-icon.png) 10px 1px no-repeat; }
			.deliver { background: url(../images/deliver-icon.png) 10px 1px no-repeat; }
			.alternate { background: url(../images/alternate-icon.png) 13px 0 no-repeat; }
			.secure { background: url(../images/secure-icon.png) 12px 0 no-repeat; }
			.pricing { background: url(../images/pricing-icon.png) 12px 0 no-repeat; }
		.section-five .right { width: 50%; float: right; box-sizing: border-box; padding: 0 0 0 40px; }
			.section-five .right img { width: 100%; }

	.section-map { width: 100%; height: 575px; position: relative; }
		#map { width: 100%; height: 100%; background: url(../images/coppr-map-gray.png) no-repeat; background-size: cover;}
		.contact { width: 355px; padding: 50px 25px; box-sizing: border-box; position: absolute; top: 125px; right: 20%; z-index: 100; overflow: hidden; background: #2e3f53; }
			.contact p { color: #fff; }
				.contact p a { color: #bb772e; text-decoration: none; }
				.contact p a:hover { color: #fff; }

	.terms-section { max-width: 1300px; margin: 80px auto; box-sizing: border-box; padding: 0 20px; }
		.terms-section h3 { background: none; margin-bottom: 10px; padding: 0; line-height: 30px; font-size: 24px; margin-top: 40px; }
		.terms-section p { margin-bottom: 20px; }
			.terms-section p a { text-decoration: none; color: #bb772e; }
		.terms-section ul { list-style: circle; padding-left: 20px; }
			.terms-section ul ul { margin-top: 20px; }
			.terms-section li { letter-spacing: 0.7px; color: #555555; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 20px; margin-bottom: 20px; }
				.terms-section li a { text-decoration: none; color: #bb772e; }
	table { width: 100%; margin: 20px 0 5px; background: transparent; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; font-size: 12px; color: #555555; border: 1px solid #bababa; }
	table tr { border-bottom: 1px solid #bababa;}
	table tr th { font-weight: 700; }
	table tr th, table tr td { text-align: left; padding: 20px 10px; border-right: 1px solid #bababa; }

footer { float: left; width: 100%; overflow: hidden; padding: 80px 0; }
	.footer-container { width: 1300px; margin: 0 auto; overflow: hidden; box-sizing: border-box;}
		.footer-container div { float: left; }
		.footer-logo { margin-right: 100px; }
			.footer-logo img { margin-bottom: 20px; width: 170px;}
			.footer-logo p { font-size: 14px; }
		.terms { margin-right: 100px; }
			.terms p { font-size: 14px; }
				.terms p a { text-decoration: none; color: #555555; }
				.terms p a:hover { color: #bb772e; }
		.footer-contact {}
			.footer-contact p { font-size: 14px; }
				.footer-contact p a { text-decoration: none; color: #555555; }
				.footer-contact p a:hover { color: #bb772e; }

			
@media screen and (max-width: 1350px) { 

	p { font-size: 14px; line-height: 18px;}
	.header-container, .section-one, .section-two, .section-three, .section-five, .footer-container { width: 1000px; }
	.section-one .right img { padding-left: 0; }
	.section-four .left { height: 650px; }
	.mb-70 { margin-bottom: 30px; }
	.contact { right: 7%; }

}

@media screen and (max-width: 1200px) {

	#map { background-position: -200px 0; } 

}

@media screen and (max-width: 1000px) {

	h1 { font-size: 28px; line-height: 32px; margin-bottom: 30px; }
	h2 { font-size: 28px; line-height: 32px; margin-bottom: 30px; }
	h3 { font-size: 28px; line-height: 32px; margin-bottom: 30px; }
	h4 { font-size: 18px;  }
	p { font-size: 12px; line-height: 16px; } 
	.header-container, .section-one, .section-two, .section-three, .section-five, .footer-container { width: 768px; }
	.section-one .left, .section-two .left, .section-three .left, .section-five .left { padding: 0 20px 0 0; }
	.section-one .right, .section-two .right, .section-three .right, .section-five .right { padding: 0 0 0 20px; }
	.section-three { margin: 80px auto 0; }
	.section-three .right img { width: 100%; }
	.section-four { margin: 80px auto 0; }
	.section-four .left { height: 550px; }
	.section-five { margin: 80px auto 80px; }
	.contact { right: 8%; }
	.footer-contact { margin-top: 30px; }
	.terms-section p { font-size: 16px; line-height: 20px; } 
	#map { background-position: -300px 0; } 

}

@media screen and (max-width: 768px) {

	p { text-align: center; }
	.terms-section p { text-align: left; }
	.terms-section h3 { text-align: left; }
	.header-container { margin-top: 30px; }
	.header-container img { width: 180px; }
	.header-container nav { padding-top: 26px; }
	.header-container, .section-one, .section-two, .section-three, .section-five, .footer-container { width: 100%; padding: 0 30px; }
	.section-one, .section-two, .section-three, .section-four, .section-five { display: block; float: left; }
	.section-one .left, .section-two .left, .section-three .left, .section-five .left { width: 100%; padding: 0; }
	.section-one .right, .section-two .right, .section-three .right, .section-five .right { width: 100%; padding: 0; }
	.section-one .right { margin-top: 40px; }
	.section-one .right img { padding-left: 0; margin: 0 auto; display: block; width: 450px; }
	.img-desk { display: none; }
	.img-mobile { display: block; width: 450px; margin: 40px auto 0; }
	.section-three .right img { width: 450px; margin: 40px auto 0; }
	.section-four .left { width: 100%; height: 350px; background: url(../images/copper-mobile.jpg) no-repeat; background-size: cover; }
	.section-four .right { width: 100%; padding: 30px; }
	.section-four { margin: 40px auto 0;}
	.section-five { margin: 0 auto 40px; }
	.img-2 { margin-bottom: 40px; }
	.section-map { float: left; height: auto; position: static; }
	#map { float: left; height: 250px; }
	.contact { float: left; position: static; width: 100%; }
	button { margin: 30px auto 0; display: block; }
	h1, h2, h3 { background: url(../images/brown-bar.jpg) no-repeat bottom center; text-align: center; }
	h5, h6 { text-align: center; }
	footer { padding: 50px 0; }
	.footer-logo { display: none; }
	.terms { width: 100%; margin: 0 0 40px; }
	.footer-contact { width: 100%; margin: 0 0 40px; display: none; }
	.footer-logo-mobile { display: block; width: 100%; }
	.footer-logo-mobile img { display: block; margin: 0 auto 20px; }
	.inner .footer-contact { display: block; }
	#map { background-position: 0 0; } 
}

@media screen and (max-width: 500px) { 
	.header-container { padding: 20px; }
	.header-container nav { padding-top: 10px; } 
	.header-container img { width: 100px; }
	.header-container nav ul li { font-size: 14px; }
	.header-container nav ul li.btn a { margin-left: 10px; padding: 15px 20px; }
	.section-one, .section-two, .section-three { margin: 40px auto 0; }
	.section-one, .section-two, .section-three, .section-five, .footer-container { padding: 0 20px; }
	.section-one .right img, .img-mobile, .section-three .right img { width: 100%; }
	.section-four .left { height: 250px; }
	.footer-logo-mobile img { width: 140px; }
}