@charset "UTF-8";
/* ----------------------------
simple reset
---------------------------- */

html, body, ul, ol, li, form, fieldset, legend {
	margin: 0;
	padding: 0;
}
html {
    min-height: 100%;
}
h1, h2, h3, h4, h5, h6, p {
	margin: 0;
}
fieldset, img {
	border: 0;
}
legend {
	color: #000;
}
li {
	list-style: none;
}
sup {
	vertical-align: text-top;
}
sub {
	vertical-align: text-bottom;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	vertical-align: top;
}
input, textarea, select {
	font-size: 110%;
	line-height: 1.1;
}
abbr, acronym {
	border-bottom: .1em dotted;
	cursor: help;
}
/* ----------------------------
Styles
---------------------------- */


* {
	margin: 0;
	padding: 0;
}
body {
	height:100%;
	font-size:100%;
	color: #333;	/*line-height: 1em;*/
	font-weight: 600;
	font-family: 'Assistant', sans-serif;

	/*background: -webkit-radial-gradient(#ed164f 50%, #9a0918); /* Safari 5.1 to 6.0 */
  /*background: -o-radial-gradient(#ed164f 50%, #9a0918); /* For Opera 11.6 to 12.0 */
 /* background: -moz-radial-gradient(#ed164f 50%, #9a0918); /* For Firefox 3.6 to 15 */
  /*background: radial-gradient(#ed164f 50%, #9a0918); /* Standard syntax */



	/*background-color: #9a0918;
	background-image: url(../img/bg-new.png);
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; */
}

#wrapper {
    width: 100%;
    margin: 50px auto;
    position: relative;
}

img {
	border:none;
}

.clearFloat {
	clear: both;
	height: 1px;
}

p, ul, ol {
	font-size: 20px;
	letter-spacing: normal;
	text-align: center;
}
b, strong {
	font-weight:normal;
}
.spacer {
	clear: both;
	height: 10px;
	overflow: hidden;
}

h1 {
	font-size: 37px;
	line-height: normal;
	padding-bottom: 10px;
	padding-top: 20px;
	padding-left: 20px;
	font-weight: 700;
	color: #333!important;
}

h2 {
	font-size: 30px;
	padding-bottom: 15px;
	padding-top: 10px;
	font-weight: 700;
	color: #333!important;
}

h3 {
	font-size: 16px;
	color: #333!important;
	font-weight: 700;

}

a {
	color: #333!important;
	text-decoration: underline;
}

.centered {
  text-align: center;
/*	position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);*/
}
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}

.fade-in.two {
-webkit-animation-delay: 1s;
-moz-animation-delay:1s;
animation-delay: 1s;
}

.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}

/*---make a basic box ---*/
.box{
width: 200px;
height: 200px;
position: relative;
margin: 10px;
float: left;
border: 1px solid #333;
background: #999;
}

@media only screen and (max-width: 600px) {
  .centered img {
    width: 100%;
  }
	#wrapper {
    width: 90%;
}
}