@font-face {
	font-family: "Costa";
	src: url(fonnts.com-Costa_Std.otf) format("opentype");
}
@font-face {
	font-family: "Gotham Book";
	src: url(GothamBook.ttf) format("truetype");
}
@font-face {
	font-family: "Gotham Medium";
	src: url(GothamMedium.ttf) format("truetype");
}


html, body, applet, object,
iframe, h1, h2, h4, h5, h6, blockquote,
pre, abbr, acronym, address, big, cite,
code, del, dfn, em, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol,
form, footer, label, legend, caption, tbody,
tfoot, thead, tr, th, 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-family: Costa;
	font-weight: 300;
	color: #48494a;
vertical-align: baseline;
}

h3 {
 margin: 0;
 padding: 0;
 border: 0;
 font-family: Gotham Medium;
 font-weight: 300;
 color: #48494a;
vertical-align: baseline;
}

 p, li, div, span, ul, a, td, table {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: Gotham Book;
	font-weight: 300;
	color: #48494a;
vertical-align: baseline;
}

li {
  margin: 0 1em 0 0;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

html {
	line-height: 1.3;
  -webkit-text-size-adjust: none;
  font-size: 18px;
	padding-top: 2em;
	padding-left: 1em;
	padding-right: 1em;
}


h1, h2, h3, h4, h5, h6 {
  color: #003c7f;
  font-weight: normal;
  letter-spacing: 0.025em;
  line-height: 1.4em;
  margin: 0 0 0 0;
}

h1 {
		font-size: 52px;
		text-align: center;
		margin: 0 0 0 0;
	}

  h2 {
    font-size: 24px;
  }

  h3 {
    font-size: 20px;
    color: #003c7f;
    font-weight: bold;
  }

  h4 {
    font-size: 28px;
    font-weight: bold;
  }

	h5 {
		font-size: 18px;
		font-weight: bold;
	}

  header, body, footer {
    margin-right: auto;
    margin-left: auto;
    max-width: 850px;
    padding-right: 10px;
    padding-left: 1px;
  }

	a {
		-moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
		-webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
		-ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
		transition: color 0.2s ease, border-bottom-color 0.2s ease;
		border-bottom: dotted 1px;
		color: inherit;
		text-decoration: none;
	}

	a:hover {
		border-bottom-color: transparent;
	}

	@media screen and (max-width: 736px) {
			html {font-size: 18px}
			h1 {font-size: 50px}
			h2 {font-size: 18px}
			h3 {font-size: 17px}
			h4 {font-size: 22px}
			h5 {font-size: 16px}
	}

	@media screen and (max-width: 600px) {
			html {font-size: 14px}
			h1 {font-size: 44px}
			h2 {font-size: 16px}
			h3 {font-size: 15px}
			h4 {font-size: 20px}
			h5 {font-size: 13px}
	}


/*used to center footer.*/
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

	.caution {
		position: absolute;
		margin-left: 50%;
		margin-top: -50px;
		width:80px;
  	height: auto;
	}


/*section that controls all the dots area.*/
.article {
   display: flex;
 }

 .article .item,
 .article .price {
   flex: 1 0 auto;
 }

 .item, a {
 	flex: 1 0 auto;
 }

 .article .dots {
   flex: 0 1 auto;
   /*Allows too long content to be hidden.*/
   overflow: hidden;
 }

 .dots::before {
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: clip;
   content:
     ". . . . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . . . "
 }

 table {
	 width: 100%;
	 border-collapse: collapse;
 }
 th, td {
	 text-align: left;
	 border-bottom: 1px solid #ddd;
 }
 th {
	 background-color: #f2f2f2;
 }

 .internet {
	 text-align: center;
 }

 .carbon{
	 margin-left: 30px;
 }

 section {
    margin-bottom: 2rem;
}

footer {
    text-align: center;
    padding: 2rem 0;
    margin-top: 2rem;
}