/*! Font Face Files */
@font-face {
    font-family: 'Coolvetica';
    src: url('css/fonts/Coolvetica.woff2') format('woff2'),
         url('css/fonts/Coolvetica.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'HardyBlow';
    src: url('css/fonts/HardyBlow.woff2') format('woff2'),
         url('css/fonts/HardyBlow.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* End Fonts */


body {
    background-color: #131313;
	color: white;
    font-family: 'Coolvetica', Helvetica, Arial, sans-serif;
    font-size: 1em;
	font-weight:lighter;
    line-height: 1.25em;
	background-image: url("images/sculptsBG.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: auto;
		background-position: center;
}
#pageContainer {
	max-width: 900px;
	margin: auto;
	background-color: black;
}
h1, h2, h3 {
	font-family: 'Coolvetica', helvetica, arial, sans-serif;
	color: white;
	line-height: 1.25;
	text-align: center;
}
img {
	width: 100%;
}
article{
	background-color: #313131;
	padding: 25px;
	margin: auto;
	max-width: 80%;
}
.headingBar{
    clear: both;
	font-family: 'HardyBlow', helvetica, sans-serif;
	color: white;
	background-color: #68246d;
	font-size: 4em;
	font-weight: lighter;
	line-height: 1.25;
	text-align: center;
	padding-top: 0;
	padding-bottom: 0;
}
.weeks {
	margin-top: -1em;
}
.courseImgLeft {
	max-height: 350px;
	width: auto;
	float: left;
	margin-right: 10px;
	margin-bottom: 20px;
}
.courseImgRight {
	max-height: 350px;
	width: auto;
	float: right;
	margin-right: 10px;
	margin-bottom: 20px;
}
p {
	margin: 5px;
}
ul {
	margin: auto;
}
.clear{
	clear: both;
	text-align: center;
	padding: 5px;
}
.bottom {
	margin-top: 10px;
}
.mailchimp{
	color: black;
	font-weight: lighter;
}
footer {
	text-align: center;
	font-size: .8em;
	color: #b9b8b8;
	font-weight: bold;
	clear:both;
}
.bottomNav {
		margin: auto;
	list-style: none;
}
 footer li {
  display: inline-block;
  padding: 5px;
}
.courseColumn {
  float: left;
  max-width: 415px;
	background-color: #3F3F3F;
	list-style: none;
	text-align: center;
	padding: 5px;
}
.pad {
	padding-top: 20px;
	padding-bottom: 20px;
}
.register {
	background-color: white;
	color: black;
	padding: 1.5em;
	margin-bottom: 5px;
	font-size: 1.5em;
	line-height: 1.25em;
}
.paypal {
	margin: auto;
	margin-top: 2em;
}
section {
	margin: auto;
}
@media only screen and (max-width: 600px) {
footer li {
    display: block;
	padding: 5px;
  }
}
.icon-bar {
  width: 100%; /* Full-width */
  max-width: inherit;
  background-color: #68246d; /* Purple background */
  overflow: auto; /* Overflow due to float */
}
.icon-bar a {
  float: left; /* Float links side by side */
  text-align: center; /* Center-align text */
  width: 20%;
  padding: 0; /* Some top and bottom padding */
  transition: all 0.3s ease; /* Add transition for hover effects */
  color: white; /* White text color */
  font-size: 2em; /* Increased font size */
}
.icon-bar a:hover {
  background-color: #000; /* Add a hover color */
}
/* unvisited link */
a:link {
  color: #6bbe45;
}
.button a:link {
  color: white;
}

/* visited link */
a:visited {
  color: #6bbe45;
}

/* mouse over link */
a:hover {
  color: #b9b8b8;
}

/* selected link */
a:active {
  color: #68246d;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
.topnav .cta {
	font-family: 'FoulFiend', "sans-serif";
	background-color: #68246d;
}
/* Price Tables */
* {
  box-sizing: border-box;
}

/* Create three columns of equal width */
.columns {
  float: left;
  width: 25%;
  padding: 8px;
	color: black;
	background-color: white;
}

/* Style the list */
.price {
  list-style-type: none;
  border: 2px solid #eee;
  margin: 0;
  padding: 0;
  transition: 0.3s;
}

/* Add shadows on hover */
.price:hover {
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

/* Pricing header */
.price .header {
  background-color: #111;
  color: white;
  font-size: 25px;
}

/* List items */
.price li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}

/* Grey list item */
.price .grey {
  background-color: #eee;
	color: black;
  font-size: 20px;
}

/* The "Sign Up" button */
.button {
  background-color: #68246d;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}

/* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
  .columns {
    width: 100%;
  }
}