/*----------------*/
/*-----GLOBAL-----*/
/*----------------*/

* {
	box-sizing: border-box;	
}

body {
	width: 100%;
 	color: #343433;
	font-family: "Lato", sans-serif;
	background: #fff; 
}

.left {
	float: left;
	margin-right: 40px;
}

.right {
	float: right;
	margin-left: 40px;
}

.hide {
	display: none;
}

.clear {
    clear: both;
}

.center {
	text-align: center;
}

/*--------------------*/
/*-----TYPOGRAPHY-----*/
/*--------------------*/

h1, h2, h3 {
	font-weight: 900;
	letter-spacing: 1px;
}

h2 {
	margin-bottom: 40px;
	font-size: 72px;
	line-height: 72px;
}

h3 {
	margin-bottom: 20px;
	font-size: 32px;
	line-height: 32px;
}

h4 {
	margin-bottom: 20px;
	font-size: 24px;
	line-height: 24px;
}

p {
	margin-bottom: 40px;
	font-size: 18px;
	line-height: 28px;
}

p.lead {
	font-size: 24px;
	line-height: 34px;
}

strong {
	font-weight: 700;
}

a {
	font-size: 18px;
	text-decoration: none;
}

a.button {
	display: inline-block;
	margin-bottom: 40px;
	padding: 15px 40px;
	color: #fff;
	text-align: center;
	background: #343433;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	opacity: 1.0;
	-o-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-webkit-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}

a.button:hover {
	opacity: 0.8;	
}

.blue a.button {
	background: #3d9395;
}

.green a.button {
	background: #628f61;
}

.yellow a.button {
	background: #be752b;
}

.red a.button {
	background: #b33030;
}

.purple a.button {
	background: #85153d;
}


/*----------------*/
/*-----LAYOUT-----*/
/*----------------*/

.container {
	position: relative;
	width: 1200px;
	margin: 0 auto;
}

.row {
	float: left;
	width: 100%;
	margin-bottom: 40px;
}

.column {
	float: left;
	margin-right: 40px;
}

.column.last {
	margin-right: 0;
}

.column.two {
	width: 580px;
}

/*----------------*/
/*-----HEADER-----*/
/*----------------*/

header {
	background-repeat: repeat-x;
	background-position: bottom center; 
}

.blue header {
	background-image: url(../img/bg/bg-header-blue.png);
}

.green header {
	background-image: url(../img/bg/bg-header-green.png);
}

.yellow header {
	background-image: url(../img/bg/bg-header-yellow.png);
}

.red header {
	background-image: url(../img/bg/bg-header-red.png);
}

.purple header {
	background-image: url(../img/bg/bg-header-purple.png);
}

header .container {
	padding-top: 80px;
	padding-bottom: 160px;
}

header .container .row {
	position: relative;
	z-index: 2;
}

header h1.logo {
	position: relative;
	float: left;
	margin-left: 50%;
	margin-bottom: 40px;
	z-index: 2;
}

header h1.logo a {
	float: left;
	width: 200px;
	height: 247px;
	margin-left: -100px;
	background-repeat: no-repeat;
	text-indent: -9999px;
	opacity: 1.0;
	-o-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-webkit-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}

header h1.logo a:hover {
	opacity: 0.8;
}

.blue header h1.logo a {
	background-image: url(../img/grc/grc-logo-blue.png);
}

.green header h1.logo a {
	background-image: url(../img/grc/grc-logo-green.png);
}

.yellow header h1.logo a {
	background-image: url(../img/grc/grc-logo-yellow.png);
}

.red header h1.logo a {
	background-image: url(../img/grc/grc-logo-red.png);
}

.purple header h1.logo a {
	background-image: url(../img/grc/grc-logo-purple.png);
}

header .arrow {
	width: 100%;
	height: 25px;
	background: url(../img/icn/icn-arrow.png) no-repeat top center;
}

header .planets,
header .constellation-left,
header .constellation-right {
	position: absolute;
	background-repeat: no-repeat;
}

header .planets {
	top: 20px;
	left: 0;
	width: 600px;
	height: 609px;
	background-image: url(../img/grc/grc-planets.png);	
}

header .constellation-left {
	bottom: 340px;
	left: 60px;
	width: 411px;
	height: 253px;
	background-image: url(../img/grc/grc-constellation-left.png);		
}

header .constellation-right {
	top: 60px;
	right: 20px;
	width: 321px;
	height: 222px;
	background-image: url(../img/grc/grc-constellation-right.png);		
}

/*------------------*/
/*-----ABOUT US-----*/
/*------------------*/

#about-us {
	color: #fff;
	background-color: #343433;
	background-repeat: repeat-x;
	background-position: bottom center;
}

.blue #about-us {
	background-color: #50c1cb;
	background-image: url(../img/bg/bg-about-us-blue.png);
}

.green #about-us {
	background-color: #84c586;
	background-image: url(../img/bg/bg-about-us-green.png);
}

.yellow #about-us {
	background-color: #f49a35;
	background-image: url(../img/bg/bg-about-us-yellow.png);
}

.red #about-us {
	background-color: #e8403c;
	background-image: url(../img/bg/bg-about-us-red.png);
}

.purple #about-us {
	background-color: #b32265;
	background-image: url(../img/bg/bg-about-us-purple.png);
}

#about-us .container {
	padding-top: 40px;
	padding-bottom: 480px;
}

#about-us .container .row {
	position: relative;
	z-index: 2;
}

.blue #about-us h4 {
	color: #3d9395;
}

.green #about-us h4 {
	color: #628f61;
}

.yellow #about-us h4 {
	color: #be752b;
}

.red #about-us h4 {
	color: #b33030;
}

.purple #about-us h4 {
	color: #85153d;
}

#about-us .sun,
#about-us .balloons,
#about-us .birds {
	position: absolute;
	background-repeat: no-repeat;
}

#about-us .sun {
	bottom: 120px;
	left: 0;
	width: 542px;
	height: 542px;
}

.blue #about-us .sun {
	background-image: url(../img/grc/grc-sun-blue.png);		
}

.green #about-us .sun {
	background-image: url(../img/grc/grc-sun-green.png);		
}

.yellow #about-us .sun {
	background-image: url(../img/grc/grc-sun-yellow.png);		
}

.red #about-us .sun {
	background-image: url(../img/grc/grc-sun-red.png);		
}

.purple #about-us .sun {
	background-image: url(../img/grc/grc-sun-purple.png);		
}

#about-us .balloons {
	bottom: 300px;
	right: 400px;
	width: 220px;
	height: 280px;
}

.blue #about-us .balloons {
	background-image: url(../img/grc/grc-balloons-blue.png);	
}

.green #about-us .balloons {
	background-image: url(../img/grc/grc-balloons-green.png);	
}

.yellow #about-us .balloons {
	background-image: url(../img/grc/grc-balloons-yellow.png);	
}

.red #about-us .balloons {
	background-image: url(../img/grc/grc-balloons-red.png);	
}

.purple #about-us .balloons {
	background-image: url(../img/grc/grc-balloons-purple.png);	
}

#about-us .birds {
	top: 0px;
	right: 120px;
	width: 120px;
	height: 67px;	
}

.blue #about-us .birds {
	background-image: url(../img/grc/grc-birds-blue.png);	
}

.green #about-us .birds {
	background-image: url(../img/grc/grc-birds-green.png);	
}

.yellow #about-us .birds {
	background-image: url(../img/grc/grc-birds-yellow.png);	
}

.red #about-us .birds {
	background-image: url(../img/grc/grc-birds-red.png);	
}

.purple #about-us .birds {
	background-image: url(../img/grc/grc-birds-purple.png);	
}

/*-------------------*/
/*-----OUR GAMES-----*/
/*-------------------*/

#our-games {
	color: #fff;
	background-color: #343433;
}

.blue #our-games {
	background-color: #3d9395;
}

.green #our-games {
	background-color: #628f61;
}

.yellow #our-games {
	background-color: #be752b;
}

.red #our-games {
	background-color: #b33030;
}

.purple #our-games {
	background-color: #85153d;
}

#our-games .container {
	padding-top: 40px;
	padding-bottom: 80px;
}

#our-games a.image{
	opacity: 1.0;
	-o-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-webkit-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}

#our-games a.image:hover {
	opacity: 0.8;
}

.blue #our-games h4 {
	color: #50c1cb;
}

.green #our-games h4 {
	color: #84c586;
}

.yellow #our-games h4 {
	color: #f49a35;
}

.red #our-games h4 {
	color: #e8403c;
}

.purple #our-games h4 {
	color: #b32265;
}

.blue #our-games a.button {
	background-color: #50c1cb;
}

.green #our-games a.button {
	background-color: #84c586;
}

.yellow #our-games a.button {
	background-color: #f49a35;
}

.red #our-games a.button {
	background-color: #e8403c;
}

.purple #our-games a.button {
	background-color: #b32265;
}


/*----------------*/
/*-----FOOTER-----*/
/*----------------*/

footer {
	color: #fff;
	background: #343433 url(../img/bg/bg-color-bars.png) repeat-x top center;
}

footer .container {
	padding-top: 40px;
	padding-bottom: 80px;
}

footer h4 {
	margin-bottom: 10px;
}

.blue footer p {
	color: #50c1cb;
}

.green footer p {
	color: #84c586;
}

.yellow footer p {
	color: #f49a35;
}

.red footer p {
	color: #e8403c;
}

.purple footer p {
	color: #b32265;
}