/* Global Settings */

html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	font-size: 62.5%; 
}
html img {
	max-width:100%;
}
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
body {
  font-size: 1.9em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 300;
  font-family: 'Abel', sans-serif;
  color: #414141;
  background: #000 url(../images/bg_dark.jpg) center top fixed;
  background-size:cover;
  text-shadow: 1px 1px 1px rgba(0,1,2,0.8);
}
@media screen and (max-width: 600px) {
	body {
	  background: #000 url(../images/bg_dark.jpg) center top fixed no-repeat;
	  background-size:contain;
	}
}

/* Features */
.features {
	width: 70%;
	margin: 0 auto;
	text-align: center;
}
.feature {
	width: 31%;
	margin: 1%;
	float: left;
}
@media screen and (max-width: 600px) {
	.feature {
		width: 47%;
	}
}

/* Header and Footer */
.header {
	position:absolute;
	width:100%;
	height:auto;
	z-index:999999;
}
.header-bar {
	background:url(../images/bg_header.png) bottom repeat-x;
	clear:both;
	height:auto;
	overflow:hidden;
	padding:10px;
	color:#fff;
	font-size:1.7rem;
	font-weight:700;
	text-align:right;
	text-transform:capitalize;
}
.header-bar a {	
	color:#000;
	font-size:3.0rem;
	font-weight:700;
	text-align:right;
	text-transform:capitalize;
}
.top-bar {
	margin:0 auto;
	width:100%;
	color:#fff;
	padding:10px 45px 10px 0px;
	font-weight: bold;
	text-align:right;
	height:auto;
	background:#000;
	box-shadow: 1px 3px 3px rgba(0,0,0,0.3);
	-webkit-font-smoothing: antialiased;
	text-transform:uppercase;
	z-index:8;
	line-height:100%;
}
.top-bar img {
	height:150px;
}
.top-bar a {
	font-weight: 700;
	text-decoration:none;
	color:#000;
	font-size:1.8rem;
	padding-right:30px;
	font-family: 'Abel', sans-serif;
}
.logo {
	margin: 0 auto;
    width: 100%;
    text-align: center;
}
.logo img {
	height:180px;
}
.call-to-action {
	clear:both;
	margin:0 auto;
	background: rgba(255,208,0,1.00);
	height:auto;
	width:70%;
	border-radius:12px;
	font-size:5.0rem;
	color:#000;
	text-align:center;
}
.call-to-action a {
	color:#000;
}
.subpage-icons {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	line-height: 1.2;  letter-spacing: -.1rem; color:rgba(255,208,0,1.00); font-family: 'Neucha', cursive;
	font-weight:700;
	-webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,1,2,0.8);
	font-size: 5.0rem;
}
.subpage-icons a {
	text-align: center;
}
.sub-box {
	color:#fff;
	width:80%;
	text-align:justify;
	margin:0 auto;
	padding-top:250px;
}
.sub-box h1 {
	text-align:center;
}
.sub-box a {
	color: rgba(255,208,0,1.00);
}
.tag-line {
	text-align:center;
	position:relative;
	top:140px;
}
.tag-line h1 {
	font-size:8.0rem;
	color:rgba(255,208,0,1.00);
}
#slides {
	position:relative;
	top:150px;
	margin:0 auto;
	border:rgba(255,208,0,1.0) 8px solid;
	height:400px;
	max-height:400px;
	width:70%;
	box-shadow: 0px 1px 0px 0px;
}
#footer {
	clear:both;
}

@media screen and (max-width: 600px) {
	.top-bar {
		font-size:0.7rem;
	}
	.header-bar {
		height:auto;
		padding:10px;
		color:#fff;
		font-size:1.0rem;
		font-weight:700;
		text-align:right;
	}
	.info-overlay {
		position:relative;
		top:200px;
		background:rgba(148,0,2,1.00);
		width:90%;
		margin:0 auto;
		padding:20px;
		font-family: 'Abel', sans-serif;
		font-size:1.7rem;
		font-weight:200;
		line-height:normal;
		clear:both;
		color:#fff;
		text-align:justify;
	}
	.info-overlay h1 {
		font-family: 'Abel', sans-serif;
		font-weight:700;
		color:#fff;
		font-size:2.4rem;
		text-shadow: 1px 3px 3px rgba(0,0,0,0.3);
	}
	.info-overlay h2 {
		font-family: 'Abel', sans-serif;
		font-weight:400;
		color:#fff;
		font-size:2.0rem;
		text-shadow: 1px 3px 3px rgba(0,0,0,0.3);
	}
	.left-grey {
		clear:both;
		width:100%;
	}
	.right-grey {
		clear:both;
		width:100%;
	}
	.middle-box {
		clear:both;
		width:90%;
		height:250px;
		background-size:cover;
		overflow:hidden;
		margin:1%;	
		text-align:left;
		padding:20px;
		vertical-align:baseline;
	}
	.middle-box h1 {
		font-size:2.0rem;
		text-shadow: 1px 3px 3px rgba(0,0,0,0.5);
	}
	.subpage-welcome {
		background-size:contain;
	}
	.tag-line {
		text-align:center;
		position:relative;
		top:160px;
	}
	.tag-line h1 {
		font-size:5.0rem;
		color:rgba(255,208,0,1.00);
	}
	#slides {
		position:relative;
		top:200px;
		margin:0 auto;
		border:none;
		height:200px;
		max-height:200px;
		width:500px;
	}
	.logo {
		position:absolute;
		z-index:3;
		left:0;
		top:0;
		padding:10px;
	}
	.logo img {
		height:90px;
	}
}


/* Nav Bar jQuery CSS */
.navBox {
  overflow: hidden;
  background: none;
  float:right;
  max-width:85%;
}

.navBox a {
  display: block;
  padding: 16px 10px;
  color: #000;
  text-transform:uppercase;
  text-align: right;
  text-decoration: none;
}

.navBox .active { background: none; }

.navBox ul {
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  text-align:right;
}

.navBox ul li {
  float: left;
  text-align:right;
  list-style: none;
}
ul {
	float: right;
}
.navBox ul li .fa { padding-left: 4px; text-align:right; }

.navBox .dropNav {
  display: none;
  width: 100%;
  padding: 0;
  position: absolute;
  left:0;
  right: 0;
  top: inherit;
  background: #323232;
  z-index: 7;
  overflow: hidden;
  text-align:right;
  color:#fff;
}
.navBox .dropNav a {
	color:#fff;
}

.navBox>ul>li.active { background-color: none; text-decoration:underline; }

 @media only screen and (min-width: 701px) {

#openPageslide { display: none; }

#pageslide { display: block !important; }

.pageslideBg { display: none !important; }
}
@media screen and (max-width: 700px) {

.navBox ul li { float: none; }

.navBox>ul>li { border-bottom: none; }

.navBox>ul>li>a { padding: 10px; }

.navBox .dropNav {
  position: static;
  background: none;
  text-align:right;
  float:right;
  font-size:1.4rem;
}

#openPageslide {
  display: block;
  padding: 14px 10px;
  width: 28px;
  border-radius: 6px;
  float:right;
}

#openPageslide span {
  height: 7px;
  display: block;
  border: 1px solid #000;
  border-width: 5px 0;
  text-align:center;
}

#pageslide {
  display: none;
  width: 100%;
  position: fixed;
  top: 0;
  height: 100%;
  z-index: 9999;
  overflow-y: auto;
  text-align:center;
  background:rgba(0,0,0,0.8);
  padding:10px;
}
#pageslide a {
	color:#fff;
	font-size:2.0rem;
	font-weight:800;
	position: relative;
	z-index: 9999;
	text-align:center;
	width:100%;
}

}



/* Bios */
.bio-div {
	display:inline-block;
	width:50%;
	text-align:center;
	vertical-align:text-top;
}
@media screen and (max-width: 70em) {
.bio-div {
		clear:both;
		width:100%;
		text-align:center;
	}	
}
.bio {
	text-align:left;
}
.bio-name {
	font-weight:700;
	color:#3B8BE5;
	text-align:left;
	-webkit-font-smoothing: antialiased;
	font-size:2.7rem;
}

.bio-position {
	font-style:italic;
	color:#000;
	font-size:2.0rem;
	text-align:left;
	-webkit-font-smoothing: antialiased;
}
/* Read More Toggle */
.morecontent span {
    display: none;
}
.morelink {
    display: block;
}

/* Sections */
#services {
	text-align:left;
}
.welcome-box {
	position:relative;
	clear:both;
	z-index:-1;
	background:url(../images/slides/1.jpg) center bottom no-repeat;
	background-size:cover;
	height:70vh;
	overflow:hidden;
	padding-top:80px;
	border-bottom: 3px #323232 solid;
}
.welcome-box h1 {
	font-size:5.5rem;
	text-align:center;
	padding-top:300px;
	font-family: 'Neucha', cursive;

	font-weight:700;
	text-shadow: 1px 1px 1px rgba(0,0,1,1.004);
}
.subpage-welcome {
	position:relative;
	background-size:cover;
	clear:both;
	z-index:-1;
	height:400px;
	overflow:hidden;
	padding-top:80px;
	text-align:center;
}
.subpage-welcome h1 {
	padding-top:140px;
	font-size:5.0rem;
	text-transform:uppercase;
	text-shadow: 1px 3px 3px rgba(0,0,0,0.8);
}
.subpage-temp {
	margin:0 auto;
	width:80%;
	clear:both;
	text-align:center;
	height:auto;
	overflow:hidden;
	padding-top:80px;
}
.middle-features {
	width:100%;
	margin:0 auto;
	height:auto;
	overflow:hidden;
	text-align:center;
}
.middle-box {
	float:left;
	width:20%;
	height:250px;
	background-size:cover;
	overflow:hidden;
	margin:1%;	
	text-align:left;
	padding:20px;
	vertical-align:baseline;
}
.middle-box h1 {
	font-size:2.5rem;
	text-shadow: 1px 3px 3px rgba(0,0,0,0.5);
}
.subpage-content {
	margin:0 auto;
	width:80%;
	padding:0px 20px 0px 20px;
	text-align:justify;
}
.grey-section {
	background-color:rgba(55,54,54,1.00);
	padding:30px 10px 30px 20px;
	text-align:left;
	color:#fff;
	font-family: 'Abel', sans-serif;
	font-size:1.4rem;
	font-weight:200;
	overflow:hidden;
}
.left-grey {
	float:left;
	width:50%;
}
.right-grey {
	float:left;
	width:50%;
}
.info-overlay {
	position:relative;
	background:rgba(112,0,130,0.9);
	width:40%;
	margin:80px 40px 20px 20px;
	padding:20px;
	float:right;
	font-family: 'Abel', sans-serif;
	font-size:1.4rem;
	font-weight:200;
	line-height:normal;
	clear:both;
	color:#fff;
}
.info-overlay h1 {
	font-family: 'Abel', sans-serif;
	font-weight:700;
	color:#fff;
	text-shadow: 1px 3px 3px rgba(0,0,0,0.3);
}
.info-overlay h2 {
	font-family: 'Abel', sans-serif;
	font-weight:400;
	color:#fff;
	font-size:3.0rem;
	text-shadow: 1px 3px 3px rgba(0,0,0,0.3);
}
.contact-bar {
	background:rgba(112,0,130,1.00);
	color:#fff;
	font-size:4.0rem;
	text-align:center;
	padding:15px 0px 15px 0px;
	width:100%;
}
.flash {
    -webkit-animation: color-change 1s infinite;
    -moz-animation: color-change 1s infinite;
    -o-animation: color-change 1s infinite;
    -ms-animation: color-change 1s infinite;
    animation: color-change 1s infinite;
}

@-webkit-keyframes color-change {
    0% { color: #fff; }
    50% { color: #36BFFF; }
    100% { color: #fff; }
}
@-moz-keyframes color-change {
    0% { color: #fff; }
    50% { color: #36BFFF; }
    100% { color: #fff; }
}
@-ms-keyframes color-change {
    0% { color: #fff; }
    50% { color: #36BFFF; }
    100% { color: #fff; }
}
@-o-keyframes color-change {
    0% { color: #fff; }
    50% { color: #36BFFF; }
    100% { color: #fff; }
}
@keyframes color-change {
    0% { color: #fff; }
    50% { color: #36BFFF; }
    100% { color: #fff; }
}




/* Mobile NAV */
.cd-primary-nav {
  /* by default it's hidden - on top of the viewport */
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  transform: translateY(-100%);
  transition-property: transform;
  transition-duration: 0.4s;
}
 
.cd-primary-nav.is-visible {
  transform: translateY(0);
}
.cd-header {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  height: 80px;
  width: 100%;
  transition: background-color 0.3s;
}
 
.cd-header.is-fixed {
  /* when the user scrolls down, we hide the header right above the viewport */
  position: fixed;
  top: -80px;
  background-color: rgba(2, 23, 37, 0.96);
  transition: transform 0.3s;
}
 
.cd-header.is-visible {
  /* if the user changes the scrolling direction, we show the header */
  transform: translate3d(0, 100%, 0);
}
#menu li {
	list-style-type: none;
}
.slicknav_menu {
	display:none;
}

@media screen and (max-width: 70em) {
	/* #menu is the original menu */
	.js #menu {
		display:none;
	}
	
	.js .slicknav_menu {
		display:block;
	}
}


/* Columns */
.right_infos {
	text-align:right;
	padding-right:10px;
	text-transform:uppercase;
	-webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
.side-container {
	clear:both;
	background:#A20002;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding:15px;
	vertical-align:text-top;
	text-align:left;
	float:right;
	width:70%;
	margin:30px 10px 30px 10px;
}
@media screen and (max-width: 70em) {
	.side-container {
		clear:both;
		background:#A20002;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		padding:15px;
		vertical-align:text-top;
		text-align:left;
		width:90%;
		margin:30px 10px 30px 10px;
	}

}



/* Elements */
.circular {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.home_txt {
	font-size: 1.8em; line-height: 1.6;  letter-spacing: 0; color:#fff; font-weight:800; font-style:italic; text-align:center;
}
#buttons {
  text-align: center;
}

/* start da css for da buttons */
.btn {
  border-radius: 5px;
  padding: 15px 25px;
  font-size: 22px;
  text-decoration: none;
  margin: 20px;
  color: #fff;
  position: relative;
  display: inline-block;
}

.btn:active {
  transform: translate(0px, 5px);
  -webkit-transform: translate(0px, 5px);
  box-shadow: 0px 1px 0px 0px;
}
.red {
  background-color: #e74c3c;
  box-shadow: 0px 5px 0px 0px #CE3323;
}

.red:hover {
  background-color: #FF6656;
}


.search input[type=text]{
	margin:0 auto;
	font-size:4.0rem;
	color:#3A3939;
	text-transform:uppercase;
	height:auto;
	width:75%;
	background-color: rgba(255, 255, 255, 0.7);
	text-align:center;
}


/* Product Styles */
.category-column {
	width:33%;
	float:left;
	height:100vh;
}
@media screen and (max-width: 70em) {
	.category-column {
		clear:both;
		width:100%;
		height:auto;
	}	
}
.category-description {
	color:#fa531e;
	padding-bottom:3px;
	font-weight:700;
}
.product-li {
	display:inline-block;
	vertical-align:text-top;
	padding: 0 40px 0 40px;
}
.product {
	-webkit-font-smoothing: antialiased;
	line-height:normal;
}
.product_category {
	font-weight:blod;
	color:#3B8BE5;
	-webkit-font-smoothing: antialiased;
	font-size:2.0em;
}
.product_title {
	font-weight:800;
	color:#3B8BE5;
	-webkit-font-smoothing: antialiased;
	font-size:1.4em;
}
.product_price {
	font-style:italic;
	color:#FFF;
	font-size:14px;
	-webkit-font-smoothing: antialiased;
}
.product_description {
	font-size:0.8em;
	padding:10px;
	-webkit-font-smoothing: antialiased;
}


/* Slide Show */
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  text-align:center;
  width: 80%;
  height:300px;
  padding: 0;
  margin: 0 auto;
  -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
   -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
  }



/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.trans {
	background:url(../images/bg_transparent.png) repeat;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding:15px;
}
.left-half {
  width:30%;
  padding:20px; 
  float:left; 
  margin-left:90px;
	text-align:center;
	height:auto;
	
}

@media screen and (max-width: 60em) 
 {

	.left-half {
		clear:both;
		width:100%;
		text-align:center;
		margin-left:0px;
		padding:12px;
		border-radius:0px;
	}  
}
.right-half {
  width:40%;
  padding:20px; 
  float:right; 
  margin-right:90px;
	text-align:center;
	height:auto;
}


@media screen and (max-width: 60em) 
 {

	.right-half {
		clear:both;
		width:100%;
		text-align:center;
		margin-right:0px;
		padding:12px;  
		border-radius:0px;
	}  
}
  
  
.container {
  position: relative;
  width: 40%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 40%;
  float: right;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 65%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 65%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}




/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { line-height: 1.2;  letter-spacing: -.1rem; color:rgba(255,208,0,1.00); font-family: 'Neucha', cursive;

	font-weight:700;
	-webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,1,2,0.8);}
h2 { font-size: 4.5rem; line-height: 1.25; letter-spacing: -.1rem; -webkit-font-smoothing: antialiased;
   font-weight:700;
   font-family: 'Abel', sans-serif;
   color:#FECF2F;
    }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; -webkit-font-smoothing: antialiased;}
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; font-weight:500;}
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 3.5rem; }
  h3 { font-size: 3.0rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color:rgba(255,208,0,1.00);
  text-decoration:none;
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);}
a:hover {
  color:#6A6A6A;
   }




/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  width:80%;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #323232;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
  color:#000;
  }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #323232;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }
  
 


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 0; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Smaller than tablet */
@media (max-width: 70em) {
	.hide-on-phones {
		display:none;
	}
}
/* Larger than mobile */
@media (min-width: 70em) {
	.only-phones {
		display:none;
		text-align:center;
		margin:0 auto;
		width:150px;
	}
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}