/* General CSS */
* {
	box-sizing: border-box;
}
html, body {
	height: 100%;
	margin: 0;
}
html {
	font-size: 100%;
}
.wrapper {
	min-height: 100%;
	margin-bottom: -50px;
}
.footer,
.push {
	height: 50px;
	text-align: center;
	background-color: #000;
}
.push {
	background-color: transparent;
}
.footer img {
	height: 49px;
	width:49px;
}
.row:before,
.row:after {
	content: " ";
	clear: both;
	display: block;
}
[class*="col-"] {
	float: left;
	/* Gutter(i.e. space between columns*/
	padding: 15px;
	min-height: 1px;
}
/**********for mobile phones*************/
[class*="col-"] {
	width: 100%;
	/*border: 1px solid blue;
	display:none;*/
}

body{
	background-color: black;
}

body .col-3{
	/*background-color: white;*/
}

h2 {
	font-size: 5em;
	margin: 0;
}

.cubes {
	background-color: red;
}

.cubes img {
	display: flex;
	justify-content: center;
	height: auto;
	width: 100%;
	margin: auto;
}

.cubeIconCSS {
	display: flex;
	width: 100%;
}

.cubeIconCSS svg{
	padding: 2px;
	flex: 1;
	width: auto;
	height: auto;
}

#revs {
  color: white;
  font-weight: bolder;
  font-style: italic;
	font-size: 2.5em;
}

#ButtonRand {
  display: flex;
  justify-content: center;
	width: 100%;
	height: 100%;
}

button {
	font-size: 4em;
	color: black;
}

footer {
	color: white;
	font-size: 2em;
	display: flex;
	justify-content: center;
}


/***********Desktop******************/
@media only screen and (min-width: 1068px) { /*768px*/
/*for desktop*/
.col-1 {width: 8.33%;}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

body {
	font-size: 1.5em;
  background-color: black;
	margin: 0;
	height: 100%;
}

h2 {
	font-size: 1.5em;
}

[class*="col-"] {
	display:block !important;
	/*border: 1px solid red;*/
}

footer {
	color: white;
	font-size: 0.75em;
	display: flex;
	justify-content: center;
}


/* Cube specific*/
.cubes {
  background-color: red;
}
.cubes p {
  background-color: red;
  font-weight: bold;
}
.cubes img {
  display: flex;
  justify-content: center;
  width: auto;
  height: 274px;
  margin: auto;
}
.checked {
  color: orange;
}
.starOutline {
  color: orange;
}
#revs {
  color: white;
  font-weight: bolder;
  font-style: italic;
	font-size: 1em;
}
#ButtonRand {
  display: flex;
  justify-content: center;
	width: 100%;
	height: 100%;
}

button {
	font-size: 1em;
}

.cubeIconCSS {
	display: flex;
	/*border: solid;
	border-color: blue;*/
	width: 100%;
}
.cubeIconCSS svg{
	/*border: solid;
	border-color: green;*/
	padding: 2px;
	flex: 1;
	width: auto;
	height: auto;
}