/******************************************************
	$GENERAL
******************************************************/
body {	
	color:#fff;
	font-family:Helvetica, sans-serif;
	font-size:14px;
	line-height:1.3;
	letter-spacing:1.2;
}

a {color:#fff; cursor:pointer;}
a:hover {text-decoration:none;}
a:focus {text-decoration:none;}


/*== SPACERS ==*/
.clear {clear:both;}
[class^="spacer"] {display:block; clear:both;}
.spacer-xsmall {height:5px;}
.spacer-small {height:10px;}
.spacer {height:20px;}
.spacer-large {height:40px;}
.spacer-xlarge {height:60px;}
.spacer-xxlarge {height:100px;}
.h-pad {padding-left:15px; padding-right:15px;}
.v-pad {padding-top:15px; padding-bottom:15px;}
.h-pad-small {padding-left:10px; padding-right:10px;}
.v-pad-small {padding-top:10px; padding-bottom:10px;}
.h-pad-large {padding-left:30px; padding-right:30px;}
.v-pad-large {padding-top:30px; padding-bottom:30px;}

.relative {position:relative;}


/* == FONT STYLES == */
.normal {font-weight:normal;}
.bold {font-weight:bold;}
.italic {font-style:italic;}
.underline {text-decoration:underline;}
.uppercase {text-transform:uppercase;}
.capitalize {text-transform:capitalize;}
.lowercase {text-transform:lowercase;}
.text-center, td.text-center, th.text-center {text-align:center;}
.text-right, td.text-right, th.text-right {text-align:right;}
.text-left, td.text-left, th.text-left {text-align:left;}


/* == FONT SIZES ==*/
.size10 {font-size:10px;}
.size12 {font-size:12px;}
.size14 {font-size:14px;}
.size16 {font-size:16px;}
.size18 {font-size:18px;}
.size20 {font-size:20px;}
.size22 {font-size:22px;}
.size24 {font-size:24px;}
.size26 {font-size:26px;}
.size28 {font-size:28px;}
.size30 {font-size:30px;}
.size35 {font-size:35px;}
.size40 {font-size:40px;}
.size45 {font-size:45px;}
.size50 {font-size:50px;}
.size55 {font-size:55px;}
.size60 {font-size:60px;}
.size70 {font-size:70px;}
.size80 {font-size:80px;}
[class*=size] {line-height:1.3;}


/* === COLORS === */
.white {color:#fff;}
.black {color:#000;}
.red {color:#b40101;}
.blue {color:#428bca;}
.darkblue {color:#190FAB;}
.green {color:#398600;}
.yellow {color:#BBC714;}
.light-gray {color:#ccc;}
.gray {color:#999;}
.dark-gray {color:#666;}

.bg-light-grey {background-color:#eee;}
.bg-grey {background-color:#ccc;}
.bg-dark-grey {background-color:#777;}
.bg-green {background-color:#398600;}
.bg-red {background-color:#f00;}
.bg-yellow {background-color:#ebd412;}
.bg-darkblue {background-color: #190FAB;}




/* == DESIGN ELEMENTS == */
.cursor {cursor:pointer;}
hr {
	border-top:1px solid #e5e5e5;
	height:1px;
	margin:20px auto;
	width:100%;
	clear:both;
}
hr.half {width:50%;}
hr.third {width:33.333%;}
hr.quarter {width:25%;}
hr.no-margin {margin:0 auto;}
hr.margin-small {margin:10px auto;}
img.limit {max-width:180px;}
.row.no-margin {margin-left:0; margin-right:0;}
.pointer {cursor:pointer;}
.word-wrap-break {white-space: normal;}
.inline {display:inline;}
.inline-block {display:inline-block;}

.rounded {border-radius:5px;}
.rounded-top {border-top-right-radius: 5px; border-top-left-radius: 5px;}
.rounded-bottom {border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;}
.rounded-left {border-top-left-radius:5px; border-bottom-left-radius:5px;}
.rounded-right {border-top-right-radius:5px; border-bottom-right-radius:5px;}

.box-shadow {box-shadow:0 0 5px 0 rgba(0,0,0,0.3); -webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.3);}

.loading {max-width:30px; max-height:30px;}

.v-align-middle {vertical-align: middle;}

.modal-body {max-height:430px; overflow: auto;}
.modal-xlg { width:1200px; }

.grey-bottom-border {border-bottom:1px solid #ccc;}
.grey-top-border {border-top:1px solid #ccc;}
.grey-right-border {border-right:1px solid #ccc;}
.grey-left-border {border-left:1px solid #ccc;}







/******************************************************
	$WAVES
******************************************************/
@-webkit-keyframes waveone {
	from {background-position:0 0;}
	to {background-position:-3500px 0;}
}
@keyframes waveone {
	from {background-position:0 0;}
	to {background-position:-3500px 0;}
}

body {
	background-color:#947b96;
	padding:0;
	margin:0;
	line-height:1.2;
	overflow:hidden;
}
.wave01 {
	animation: waveone 15s linear infinite;
	-webkit-animation: waveone 15s linear infinite;
	background-image:url('../img/wave01.png');
	background-repeat: repeat-x;
	background-position:0px 0px;
	display:block;
	height:476px;
	position:absolute;
	top:15%;
	width:100%;
}
.wave02 {
	animation: waveone 40s linear infinite;
	-webkit-animation: waveone 40s linear infinite;
	background-image:url('../img/wave02.png');
	background-repeat: repeat-x;
	background-position:0px 0px;
	display:block;
	height:823px;
	position:absolute;
	top:-3%;
	width:100%;
}
.wave03 {
	animation: waveone 50s linear infinite;
	-webkit-animation: waveone 50s linear infinite;
	background-image:url('../img/wave03.png');
	background-repeat: repeat-x;
	background-position:0px 0px;
	display:block;
	height:786px;
	position:absolute;
	top:8%;
	width:100%;
}




/******************************************************
	$HEADER
******************************************************/
.header {
	background-color:rgba(255,255,255,0.15);
	border-radius:5px;
	-webkit-border-radius:5px;
	box-shadow:0 0 5px 0 rgba(0,0,0,0.1);
	margin-right:auto;
	margin-left:auto;
	padding:15px 0 25px 0;
	position:absolute;
	left:5%;
	right:5%;
	top:10%;
	bottom:45%;
}
.header .info {
	position:absolute;
	top:5%;
	left:5%;
	right:5%;
	bottom:5%;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
	from {right: 0;}
	to {right:100%;}
}

/* Standard syntax */
@keyframes mymove {
	from {right: 0;}
	to {right:100%;}
}
.info-circle {
	-webkit-animation: mymove 30s linear infinite; /* Chrome, Safari, Opera */
	animation: mymove 30s linear infinite;
	background-color: rgba(255,255,255,0.1);
	border-radius:50%;
	-webkit-border-radius:50%;
	cursor:pointer;
	height: 50px;
	position: absolute;
	right: 0;
	top:5%;
	transition:all 300ms;
	-webkit-transition:all 300ms;
	width: 50px;
}
.info-circle:hover {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
}
.info-circle:active {
	transform:scale(0.95);
	-webkit-transform:scale(0.95);
}

