/* Table of contents
---------------------------------------------------------------------- /
*
*  1 - Global Style
*    1.1 - Next Section
*    1.2 - Social Button
*    1.3 - Placeholder color
*    1.4 - Height Resize
*  2 - Main Menu 
*  3 - Page Top Section   
*  4 - About Me Section
*  5 - Showcase Section
*  6 - Contact Section
*  7 - Footer Section  
*  8 - Media Query 
*    8.1 - media screen and (max-width: 992px)
*    8.2 - media screen and (max-width: 768px)
*    8.3 - media screen and (max-width: 1170px) 
*  9 - Preloader
*
---------------------------------------------------------------------- */

/* 1 - Global Style
---------------------------------------------------------------------- */
body{
	font-family:'Roboto', sans-serif;
	color:#444;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
.clearBox {
	clear:both;height:1px;
}

a{
	color: rgba(210,0,0,1);
}
a:focus{
	outline:none;
	outline-offset:inherit;
}
a:hover, a:focus {
    color: rgba(240,0,0,1);
    text-decoration: underline;
}
h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6, p, a, span {
	font-family:'Roboto', sans-serif;
	color: #444;
}
h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6, p, a, span, i, b, strong {
/*	color: #444; */
}
hr {
	border: rgba(210,0,0,1) solid 2px;
	margin: 50px 0 20px 0;
}
.headPage {
	position: relative;
}

.TitleBox {
	position: relative;
	display: inherit;
	padding-bottom: 50px;
}

.headLineTest {
	position: relative;
}

h1.siteTitle, .siteTitle {
	font-family: '28days-later', "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color: rgba(210,0,0,1);
   font-size: 9em;
   line-height: 85%;
   margin: 15px 0;
   padding: 15px 0 0;
   vertical-align: baseline;
	letter-spacing: -0.02em;
	text-shadow: 0 0 4px rgba(255, 255, 255, 1);
}

.headSubTitle {
	display: inline-block;
	position: relative;
}

.headDescription {
	display: inline-block;
	position: relative;
}

.section-style{
	background-attachment:inherit;
	background-position:50% 0;
	background-repeat:repeat;
	margin:0 auto;
	width:100%;
	background-size:cover;
	padding-right: 15%;
}

.pattern{
	background:rgba(200, 130, 60, 0.2) url(../images/pattern.png);
	padding-top:3%;
}
.parallax-bg{
	background-attachment: fixed;
}
.no-parallax-bg{
	background: #7f8c8d; 
}

.container{
	overflow:hidden;
}
.aboutMe {
	position:relative;
	padding-top: 0;
}
.sectionTop {
	position:relative;
}
.section-name{
	font-weight:300;
	text-align:left;
	text-transform:uppercase;
	margin:0;
}
.section-name span{
	display:inline-block;
	position:relative;
	padding-bottom:15px;
}
hr.section-name-underline {
  margin: -7px 0 0 0;
  border: 0px;
  width: 100%;
  position: relative;
  z-index: 0;
  color: rgb(0, 0, 0);
  height: 7px;
  background-color: rgb(39, 39, 39);
}
.sectionTop h1 {
	content:"";
	width:auto;
	border-bottom: 7px solid rgba(210,0,0,1);
	left:0;
	position: relative;
	margin-bottom: 0;
	z-index: 9;
	display: inline-block;
}
.section-name span:before{
	bottom:0;
}
.section-name span:after{
	bottom:1px;
	padding: 15px;
}
.contentBox {
	position: relative;
	padding: 0;
}
.FLeft {
	position: relative;
	float: left;
	padding:7px;
}
.contentBox .FLeft {
	border: 2px solid #444;
	box-shadow: #fff 0 0 3px;
   margin: 20px 2.5% 20px 0;
   text-align: center;
   width: 30%;
	line-height:125%;
}
.contentBox .fa .FLeft i {
	font-size: 2em; line-height: 1.1em;
}
.sectionTop {
	position:relative;
	padding: 0 0 5px 0;
}
.subTitleBox {
	position:relative;
	margin: 20px 0;
}
.section-title, h2.subTitle, .subTitle {
	display:inline;
	text-align:left;
	text-transform:uppercase;
	font-weight:300;
	font-size:2.9em;
	text-shadow:#fff 1px 1px 2px;
}
.headPage div.subTitle {
	font-weight: normal;
	font-size:2.0em;
}
.boxTitle {
	display:inline;
	text-align:left;
	text-transform:uppercase;
	font-weight:400;
	font-size:1.6em;
	text-shadow:#fff 1px 1px 3px;
	color: rgba(210,0,0,1);
}
.boxTitle .FLeft {
	border: 3px solid rgba(210,0,0,1);
	box-shadow: #fff 1px 1px 3px;
   margin: 20px 2.5% 20px 0;
   text-align: center;
   width: 30%;
	line-height:125%;
}
.section-description {
	font-weight:300;
	text-align:center;
	line-height:30px;
}
.section-content {
	font-weight:400;
	text-align:left;
	line-height:140%;
	font-size:1.5em;
	text-shadow: #fff 1px 1px 3px;
}
.form-control{
	padding: 6px 30px;
}
.form-control,
.btn{
	background-color:transparent;

	-webkit-border-radius:0;
	   -moz-border-radius:0;
	    -ms-border-radius:0;
	     -o-border-radius:0;
	        border-radius:0;

	-webkit-transition:all .25s;
	   -moz-transition:all .25s;
	    -ms-transition:all .25s;
	     -o-transition:all .25s;
	        transition:all .25s;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
 	outline: none; 
 	color: rgba(210,0,0,1);
	background-color: rgba(255,255,255,0.7);
}
.form-control {
	border: 2px solid #444;
	font-size: 1.3em;
	text-shadow: #fff 1px 1px 2px;
	color:#444;
	background-color: rgba(255,255,255,0);
	-webkit-box-shadow:none;
	   -moz-box-shadow:none;
	    -ms-box-shadow:none;
	     -o-box-shadow:none;
	        box-shadow:none;
}

.form-control:hover, .form-control:focus {
	background-color: rgba(255,255,255,0.7);
	box-shadow: 0 0 3px rgba(255,255,255,0.75) inset;
	border-color: #444;
}
.contactSuccess, .contactError {
	font-size: 2.5em;
	color: rgba(210,0,0,1);
	text-shadow: #fff 1px 1px 3px;
}
.successMessage {
	font-size:1.2em;
	text-shadow: #fff 1px 1px 3px;
}
.errorMessage {
	font-size:1.2em;
	color: rgba(210,0,0,1);
	text-shadow: #fff 1px 1px 3px;
}

/* 1.1 - Next Section
------------------------------------------ */
.next-section{
	position: relative;
	text-align:center;
	margin: 5%;
}
  a.go-to-about, 
  a.go-to-showcase, 
  a.go-to-contact, 
  a.go-to-page-top {
	cursor:pointer;
	display:inline-block;
	width:120px;
	height:120px;
	position:relative;
}

  a.go-to-about:link svg.front,
  a.go-to-showcase:link svg.front, 
  a.go-to-contact:link svg.front, 
  a.go-to-page-top:link svg.front {
	position:relative;
	-webkit-transition:all .5s;
	   -moz-transition:all .5s;
	    -ms-transition:all .5s;
	     -o-transition:all .5s;
	        transition:all .5s;

		-webkit-transform: rotateX(0deg) rotateY(0deg);
			 -moz-transform: rotateX(0deg) rotateY(0deg);
				-ms-transform: rotateX(0deg) rotateY(0deg);
				 -o-transform: rotateX(0deg) rotateY(0deg);
						transform: rotateX(0deg) rotateY(0deg);

		-webkit-transform-style: preserve-3d;
			 -moz-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				 -o-transform-style: preserve-3d;
						transform-style: preserve-3d;

		-webkit-backface-visibility: visible;
				-moz-backface-visibility: visible;
				 -ms-backface-visibility: visible;
					-o-backface-visibility: visible;
						 backface-visibility: visible;

		-webkit-transition: all .4s ease-in-out;
			 -moz-transition: all .4s ease-in-out;
				-ms-transition: all .4s ease-in-out;
				 -o-transition: all .4s ease-in-out;
						transition: all .4s ease-in-out;
}


  a.go-to-about:hover svg.front,   a.go-to-about:focus svg.front,
  a.go-to-showcase:hover svg.front,   a.go-to-showcase:focus svg.front, 
  a.go-to-contact:hover svg.front,   a.go-to-contact:focus svg.front,
  a.go-to-page-top:hover svg.front,   a.go-to-page-top:focus svg.front {
		-webkit-transform: rotateY(180deg);
			 -moz-transform: rotateY(180deg);
				-ms-transform: rotateY(180deg);	
				 -o-transform: rotateY(180deg);	
						transform: rotateY(180deg);	
}


/* 1.2 - Social Button
------------------------------------------ */
.LNKbtnContainer{
	text-align:center;
	margin:50px auto 0 auto;
}
.LNKbtnContainer .projectBtnBox{
	display:inline-block;
	width:60px;
	height:60px;

	-webkit-transform:rotate(45deg);
	   -moz-transform:rotate(45deg);
	    -ms-transform:rotate(45deg);
	     -o-transform:rotate(45deg);
	        transform:rotate(45deg);

	border:2px solid rgba(210,0,0,1);

	margin:15px;
	position:relative;
	overflow:hidden;
}
.LNKbtnContainer .projectBtnBox a{
	color:rgba(210,0,0,1);
	font-size:40px;
	font-weight:400;
	line-height:80px;
	text-shadow: #fff 0 0 2px;
	display:inline-block;
	width:80px;
	height:80px;
	position:absolute;
	top:-10px;
	left:-10px;

	-webkit-transform:rotate(-45deg);
	   -moz-transform:rotate(-45deg);
	    -ms-transform:rotate(-45deg);
	     -o-transform:rotate(-45deg);
	        transform:rotate(-45deg);
}
.projectBtnBox,
.projectBtnBox a{
	
	-webkit-transition:all .25s;
	   -moz-transition:all .25s;
	    -ms-transition:all .25s;
	     -o-transition:all .25s;
	        transition:all .25s;
}
.projectBtnBox:hover{
	border-color:rgba(255,255,255,1);
}

.projectBtnBox a:link{
	background: rgba(255,255,255,0);
	color: rgba(210,0,0,1);
}
.projectBtnBox a:link i {
	color: rgba(210,0,0,1);
}
.projectBtnBox a:hover{
	background: rgba(210,0,0,1);
	color: #fff;
}
.projectBtnBox a:hover i {
	color: #fff;
}

/* 1.3 - Placeholder color
------------------------------------------ */
.form-control::-webkit-input-placeholder {
   color: #444;
}

.form-control:-moz-placeholder { 
   color: #444;  
}

.form-control::-moz-placeholder { 
   color: #444;  
}

.form-control:-ms-input-placeholder{
	color:#444;
}
/* onFocus */

.form-control:focus::-webkit-input-placeholder {
   color: rgba(210,0,0,1);
}

.form-control:focus:-moz-placeholder { 
   color: rgba(210,0,0,1);  
}

.form-control:focus::-moz-placeholder { 
   color: rgba(210,0,0,1);  
}

.form-control:focus:-ms-input-placeholder{
	color: rgba(210,0,0,1);
}

/* 1.4 - Height Resize
------------------------------------------ */

.pattern.height-resize{
	padding-top: 40px;
}
.height-resize .time-count-container{
	margin-top: 20px !important;
}
.height-resize .team-container .col-sm-4{
	padding-top:20px !important;
}


/* 2 - Main Menu
---------------------------------------------------------------------- */

#mainMenu {
	display: block;
	position: fixed;
	background: rgba(210,0,0,0.3);
	z-index: 99;
}

.mainNav {
	width: 15%;
	height: 99.9%;
	top: 0;
	right: 0;
}
.mainNav .touchEnd {
	position:fixed;
	visibility: hidden;
	right:0;
	top:0;
	width: 40%;
	height: 50px;
	background-color: rgba(210,0,0,1);
	z-index:9;
	padding: 7px;
}
#mainMenu .touchEnd p {
	position: relative;
	display:block;
	text-align:center;
	font-size:2.8em;
	color: #fff;
}
.mainNavBox {
	display: block;
	position: relative;
	height: 100%;
}

.navLNKBox {
	display: block;
	position: relative;
	height: 25%;
}

.navLNKBox:hover, .navLNKBox:active, .navLNKBox:focus {
	display: block;
	position: relative;
	height: 25%;
}

.navLNKBox a:link, .navLNKBox a:visited {
	display:block;
	width: 100%;
	height: 100%;
	position: relative;
	text-align:center;
}

.activeLNKBox {
	display:block;
	position: relative;
}

.activeLNKBox a:link, .activeLNKBox a:visited {
	display:block;
	position: relative;
}

.activeLNKBox a:active, .activeLNKBox a:focus, .activeLNKBox a:hover {
	display:block;
	position: relative;
}

/* Box Animation */

.full-size, .flip-box .object, .flip-box .front, .flip-box .back {
  width: 100%;
  height: 100%;
  color: rgba(255,255,255,1);
	font-family: '28days-later', "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.slice, .flip-box .front, .flip-box .back, .flip-box .flank .flankTwo {
  display: block;
  overflow: hidden;
  position: absolute;
  backface-visibility: hidden;
}

.LinkLable {
	position:relative;
    display: block;
    margin: 7px;
    padding: 10%;
    position: relative;
	 border:solid 3px rgba(255,255,255,0.7);
	 height: 92%;
    font-size: 66px;
}
.front .LinkLable h2 {
	font-size:3.2em;
	color: #fff;
	margin-top:0;
}
.back .LinkLable h2 {
	font-size:3.2em;
	color: rgba(255,255,255,0.8);
	margin-top:0;
}

.mainLNK .flip-box {
  float: left;
  display: block;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  -webkit-perspective: 400px;
  	 -moz-perspective: 400px;
  		-ms-perspective: 400px;
  		 -o-perspective: 400px;
  				perspective: 400px;
}
.mainLNK .flip-box .object {
  position: absolute;
  -webkit-transition-property: -webkit-transform;
  	 -moz-transition-property: -moz-transform;
  		 -o-transition-property: -o-transform;
  				transition-property: transform;
  -webkit-transition-duration: 1s;
  	 -moz-transition-duration: 1s;
  		 -o-transition-duration: 1s;
  				transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  	 -moz-transition-timing-function: ease-in-out;
  		 -o-transition-timing-function: ease-in-out;
  				transition-timing-function: ease-in-out;
  -webkit-transform-style: preserve-3d;
  	 -moz-transform-style: preserve-3d;
  		-ms-transform-style: preserve-3d;
  		 -o-transform-style: preserve-3d;
  				transform-style: preserve-3d;
  -webkit-transform: translateZ(-75px);
  	 -moz-transform: translateZ(-75px);
  		-ms-transform: translateZ(-75px);
  		 -o-transform: translateZ(-75px);
  				transform: translateZ(-75px);
}
.mainLNK:hover .flip-box .object, .mainLNK:focus .flip-box .object {
  -webkit-transition-property: -webkit-transform;
  	 -moz-transition-property: -moz-transform;
  		 -o-transition-property: -o-transform;
  				transition-property: transform;
  -webkit-transition-duration: 0.5s;
  	 -moz-transition-duration: 0.5s;
  		 -o-transition-duration: 0.5s;
  				transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  	 -moz-transition-timing-function: ease-in-out;
  		 -o-transition-timing-function: ease-in-out;
  				transition-timing-function: ease-in-out;
  -webkit-transform: translateZ(-75px) rotateY(180deg);
  	 -moz-transform: translateZ(-75px) rotateY(180deg);
  		-ms-transform: translateZ(-75px) rotateY(180deg);
  		 -o-transform: translateZ(-75px) rotateY(180deg);
  				transform: translateZ(-75px) rotateY(180deg);
}
.mainLNK .flip-box .front {
  z-index: 1;
  background-color: rgba(210,0,0,1);
  -webkit-transform: rotateY(0deg) translateZ(75px);
  	 -moz-transform: rotateY(0deg) translateZ(75px);
  		-ms-transform: rotateY(0deg) translateZ(75px);
  		 -o-transform: rotateY(0deg) translateZ(75px);
  				transform: rotateY(0deg) translateZ(75px);
}
.mainLNK .flip-box .back {
  z-index: 0;
  background-color: rgba(235,0,0,1);
    color: rgba(255,255,255,0.8);
  -webkit-transform: rotateY(180deg) translateZ(75px);
  	 -moz-transform: rotateY(180deg) translateZ(75px);
  		-ms-transform: rotateY(180deg) translateZ(75px);
  		 -o-transform: rotateY(180deg) translateZ(75px);
  				transform: rotateY(180deg) translateZ(75px);
}
.mainLNK .flip-box .flank {
  width: 150px;
  height: 200px;
  left: 75px;
  background-color: rgba(190,0,0,1);
	backface-visibility: hidden;
  -webkit-transform: rotateY(-90deg) translateZ(150px);
  	 -moz-transform: rotateY(-90deg) translateZ(150px);
  		-ms-transform: rotateY(-90deg) translateZ(150px);
  		 -o-transform: rotateY(-90deg) translateZ(150px);
  				transform: rotateY(-90deg) translateZ(150px);
}
.mainLNK:hover .flip-box.flip-up .object, .mainLNK:focus .flip-box.flip-up .object {
  -webkit-transform: translateZ(-75px) rotateX(180deg);
  	 -moz-transform: translateZ(-75px) rotateX(180deg);
  		-ms-transform: translateZ(-75px) rotateX(180deg);
  		 -o-transform: translateZ(-75px) rotateX(180deg);
  				transform: translateZ(-75px) rotateX(180deg);
}
.mainLNK .flip-box.flip-up .back {
  -webkit-transform: rotateX(180deg) translateZ(75px);
  	 -moz-transform: rotateX(180deg) translateZ(75px);
  		-ms-transform: rotateX(180deg) translateZ(75px);
  		 -o-transform: rotateX(180deg) translateZ(75px);
  				transform: rotateX(180deg) translateZ(75px);
}
.mainLNK .flip-box.flip-up .flank {
  width: 100%;
  height: 71%;
  left: 0;
  top: 20%;
	backface-visibility: hidden;
  -webkit-transform: rotateX(-90deg) translateZ(120px);
  	 -moz-transform: rotateX(-90deg) translateZ(120px);
  		-ms-transform: rotateX(-90deg) translateZ(120px);
  		 -o-transform: rotateX(-90deg) translateZ(120px);
  				transform: rotateX(-90deg) translateZ(120px);
}
.mainLNK .flip-box.flip-up .flankTwo {
	width: 100%;
	height: 71%;
	left: 0;
	bottom: 21%;
	background-color: rgba(190,0,0,1);
	backface-visibility: hidden;
	visibility: hidden;
	-webkit-transform: rotateX(-90deg) translateZ(-80px);
		 -moz-transform: rotateX(-90deg) translateZ(-80px);
			-ms-transform: rotateX(-90deg) translateZ(-80px);
			 -o-transform: rotateX(-90deg) translateZ(-80px);
					transform: rotateX(-90deg) translateZ(-80px);
	position: absolute;
}

@media (min-width: 360px) {
	.LinkLable {
		font-size:1.8em;
		padding: 1%;
	}
}
@media (min-width: 550px) {
	.LinkLable {
		font-size:28px;
		padding: 1%;
	}
}
@media (min-width: 768px) {
	.LinkLable {
		font-size:28px;
		padding: 1%;
	}
}
@media (min-width: 840px) {
	.LinkLable {
		font-size:32px;
		padding: 1%;
	}
}
@media (min-width: 900px) {
	.LinkLable {
		font-size:32px;
		padding: 3%;
	}
}
@media (min-width: 1025px) {
	.LinkLable {
		font-size: 28px;
	}
}
@media (min-width: 1239px) {
	.LinkLable {
		font-size:36px;
		line-height: normal;
	}
}

@media (min-height: 320px) {
	.flip-box.flip-up .flank {
	  width: 80%;
	  height: 140%;
	  left: 0;
	  top: 20%;
	  -webkit-transform: rotateX(-90deg) translateZ(30px);
	  	 -moz-transform: rotateX(-90deg) translateZ(30px);
	  		-ms-transform: rotateX(-90deg) translateZ(30px);
	  		 -o-transform: rotateX(-90deg) translateZ(30px);
	  				transform: rotateX(-90deg) translateZ(30px);
	}
	.flip-box.flip-up .flankTwo {
		width: 80%;
		height: 140%;
		left: 0;
		bottom: 21%;
		background-color: rgba(190,0,0,1);
		-webkit-transform: rotateX(-90deg) translateZ(5px);
			 -moz-transform: rotateX(-90deg) translateZ(5px);
				-ms-transform: rotateX(-90deg) translateZ(5px);
				 -o-transform: rotateX(-90deg) translateZ(5px);
						transform: rotateX(-90deg) translateZ(5px);
		position: absolute;
	}
	.front .LinkLable,
	.back .LinkLable {
		padding: 3%;
		font-size: 1.9em;
	}
	.front .LinkLable h2,
	.back .LinkLable h2 {
		margin: 0;
		font-size:1.9em;
	}
}

@media (min-height: 450px) {
	.flip-box.flip-up .flank {
	  width: 100%;
	  height: 100%;
	  left: 0;
	  top: 20%;
	  -webkit-transform: rotateX(-90deg) translateZ(3.8em);
	  	 -moz-transform: rotateX(-90deg) translateZ(3.8em);
	  		-ms-transform: rotateX(-90deg) translateZ(3.8em);
	  		 -o-transform: rotateX(-90deg) translateZ(3.8em);
	  				transform: rotateX(-90deg) translateZ(3.8em);
	}
	.flip-box.flip-up .flankTwo {
		width: 100%;
		height: 100%;
		left: 0;
		bottom: 21%;
		background-color: rgba(190,0,0,1);
		-webkit-transform: rotateX(-90deg) translateZ(-2.8em);
			 -moz-transform: rotateX(-90deg) translateZ(-2.8em);
				-ms-transform: rotateX(-90deg) translateZ(-2.8em);
				 -o-transform: rotateX(-90deg) translateZ(-2.8em);
						transform: rotateX(-90deg) translateZ(-2.8em);
		position: absolute;
	}
	.front .LinkLable,
	.back .LinkLable {
		padding: 3%;
		font-size: 2.1em;
	}
	.front .LinkLable h2,
	.back .LinkLable h2 {
		margin: 0;
		font-size:2em;
	}
}

@media (min-height: 600px) {
	.flip-box.flip-up .flank {
	  width: 100%;
	  height: 90%;
	  left: 0;
	  top: 20%;
	  -webkit-transform: rotateX(-90deg) translateZ(5.4em);
	  	 -moz-transform: rotateX(-90deg) translateZ(5.4em);
	  		-ms-transform: rotateX(-90deg) translateZ(5.4em);
	  		 -o-transform: rotateX(-90deg) translateZ(5.4em);
	  				transform: rotateX(-90deg) translateZ(5.4em);
	}
	.flip-box.flip-up .flankTwo {
		width: 100%;
		height: 90%;
		left: 0;
		bottom: 21%;
		background-color: rgba(190,0,0,1);
		-webkit-transform: rotateX(-90deg) translateZ(3.1em);
			 -moz-transform: rotateX(-90deg) translateZ(3.1em);
				-ms-transform: rotateX(-90deg) translateZ(3.1em);
				 -o-transform: rotateX(-90deg) translateZ(3.1em);
						transform: rotateX(-90deg) translateZ(3.1em);
		position: absolute;
	}
	.front .LinkLable,
	.back .LinkLable {
		padding: 6%;
		font-size: 1.8em;
	}
	.front .LinkLable h2,
	.back .LinkLable h2 {
		margin: 0;
		font-size:1.8em;
	}
}

@media (min-height: 700px) {
	.flip-box.flip-up .flank {
	  width: 100%;
	  height: 80%;
	  left: 0;
	  top: 20%;
	  -webkit-transform: rotateX(-90deg) translateZ(7.1em);
	  	 -moz-transform: rotateX(-90deg) translateZ(7.1em);
	  		-ms-transform: rotateX(-90deg) translateZ(7.1em);
	  		 -o-transform: rotateX(-90deg) translateZ(7.1em);
	  				transform: rotateX(-90deg) translateZ(7.1em);
	}
	.flip-box.flip-up .flankTwo {
		width: 100%;
		height: 80%;
		left: 0;
		bottom: 21%;
		background-color: rgba(190,0,0,1);
		-webkit-transform: rotateX(-90deg) translateZ(-4.9em);
			 -moz-transform: rotateX(-90deg) translateZ(-4.9em);
				-ms-transform: rotateX(-90deg) translateZ(-4.9em);
				 -o-transform: rotateX(-90deg) translateZ(-4.9em);
						transform: rotateX(-90deg) translateZ(-4.9em);
		position: absolute;
	}
	.front .LinkLable,
	.back .LinkLable {
		padding: 6%;
	}
	.front .LinkLable h2,
	.back .LinkLable h2 {
		margin: 0;
		font-size:3em;
	}
}


@media (min-height: 750px) {
	.front .LinkLable,
	.back .LinkLable {
		padding: 6%;
	}
	.front .LinkLable h2,
	.back .LinkLable h2 {
		margin: 0;
		font-size:3.2em;
	}
}

.flip-box.alternative .front {
  background-color: #931e83;
}
.flip-box.alternative .back {
  background-color: #bd27a9;
}
.flip-box.alternative .flank {
  background-color: #69155d;
}

.no-csstransforms3d .flip-box .object {
  position: relative;
  overflow: hidden;
  -webkit-transform-style: none;
 	   -moz-transform-style: none;
 		  -ms-transform-style: none;
  		 -o-transform-style: none;
  				transform-style: none;
}
.no-csstransforms3d .flip-box .object .back {
  top: 300px;
  z-index: 0;
  -webkit-transition-property: top;
  	 -moz-transition-property: top;
  		 -o-transition-property: top;
  				transition-property: top;
  -webkit-transition-duration: 0.3s;
  	 -moz-transition-duration: 0.3s;
  		 -o-transition-duration: 0.3s;
  				transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-in-out;
	   -moz-transition-timing-function: ease-in-out;
  		 -o-transition-timing-function: ease-in-out;
  				transition-timing-function: ease-in-out;
}
.no-csstransforms3d .flip-box .object:hover .back {
  top: 0;
  z-index: 1;
}
.no-csstransforms3d .flip-box .flank {
  display: none;
}

/* Internet Explorer 10 only */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .object {
    position: relative;
    overflow: hidden;
    transform: none !important;
  }
  .object .back {
    top: 300px;
    z-index: 0;
    -webkit-transition-property: all;
    	 -moz-transition-property: all;
    		 -o-transition-property: all;
    				transition-property: all;
    -webkit-transition-duration: 0.3s;
    	 -moz-transition-duration: 0.3s;
    		 -o-transition-duration: 0.3s;
    				transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-in-out;
    	 -moz-transition-timing-function: ease-in-out;
    		 -o-transition-timing-function: ease-in-out;
    				transition-timing-function: ease-in-out;
  }
  .object:hover .back {
    top: 0;
    z-index: 1;
    transform: rotateY(0deg) translateZ(0);
  }
}



/* 2 - Main Menu End 
---------------------------------------------------------------------- */


/* 3 - Page Top Section 
---------------------------------------------------------------------- */
.site-title{
	text-align:center;
	font-size:66px;
	font-family:'Pacifico';
	margin:0 0 50px 0;
	padding-bottom:50px;
	position:relative;
}
.site-title:before,
.site-title:after{
	content:"";
	width:100px;
	height:10px;
	left:50%;
	margin-left:-50px;
	border-bottom:1px double #fff;
	position:absolute;
}
.site-title:before{
	bottom:0;
}
.site-title:after{
	bottom:2px;
}
#page-top .section-name span:before,
#page-top .section-name span:after{
	content:none;
}
.contentBox .subTitle h3 {
	color:#fff	
}

/* 3 - Page Top Section End 
---------------------------------------------------------------------- */


/* 4 - About Me Section
---------------------------------------------------------------------- */
.projectContainer .col-sm-4{
	position: relative;
	padding:20px 15px 0 0;
	width: auto;
}
.projectContainer .row{
	position: relative;
	margin: 0;
	padding: 0;
}
.projectContainer .singleProject{
	max-width:200px;
	margin:auto;
	position:relative;
	overflow:hidden;
}


.projectContainer figcaption{
	text-align:center;
	text-transform:uppercase;
	width:100%;
	height:120px;
	border:1px solid #fff;
	border-top-color:transparent;
	margin:0;
}
.projectContainer figcaption h4{
	font-size:22px;
	font-weight:700;
	padding-top:10px;
}
.projectContainer .ProjectName {
	font-size: 1.3em;
	font-weight: 700;
	margin: 0;
	padding: 10px 10px 5px 10px;
}
.projectContainer figcaption p{
	font-size: 1em;
	text-shadow: #fff 1px 1px 3px;
}
.projectContainer .projectButtons {
	display:inline-block;
	margin:auto;
	text-align:center;
	width:100%;
}

.singleProject .LNKbtnContainer,
.singleProject .LNKbtnContainer .projectBtnBox{
	-webkit-transition:all .25s;
	   -moz-transition:all .25s;
	    -ms-transition:all .25s;
	     -o-transition:all .25s;
	        transition:all .25s;
}

.singleProject .LNKbtnContainer {
	position: absolute;
	top: 0px;
	margin: 0 auto;
	left: 0;
}
.singleProject:hover .LNKbtnContainer{
	background: rgba(255,255,255,.6);
}
.singleProject .LNKbtnContainer .projectBtn{
    height: 150px;
    overflow: hidden;
    position: relative;
    width: 200px;
}
.singleProject .LNKbtnContainer .projectBtnBox{
	position: absolute;

}
.singleProject .LNKbtnContainer .linkBtn{
	top: 160px;
	left: 200px;
}

.singleProject:hover .LNKbtnContainer .linkBtn{
	top: 40px;
	left: 60px;
}
.projectContainer .projectButtons a{
	color:#fff;
	width:24px;
	height:24px;
	display:inline-block;
	font-size:24px;
	text-align:center;
}
.projectContainer .singleProject figure,
.projectContainer .singleProject figcaption,
.projectContainer .singleProject img,
.projectContainer .singleProject .projectButtons{
	
	-webkit-transition:all .25s;
	   -moz-transition:all .25s;
	    -ms-transition:all .25s;
	     -o-transition:all .25s;
	        transition:all .25s;
}
.projectContainer .singleProject:hover figure{
	background-color:rgba(210,0,0,1);
	color:#fff;
}
.projectContainer .singleProject:hover figcaption {
	border-color:#fff;
	color:#fff;
}
.projectContainer .singleProject:hover figcaption p {
	color:#fff;
}

.projectContainer .singleProject:hover .projectButtons{
	top:90px;
}
/* 4 - About Me Section End 
---------------------------------------------------------------------- */


/* 5 - Showcase Section
---------------------------------------------------------------------- */

form.news-letter{
	max-width:550px;
	margin:auto;
	height:60px;
	margin-top:70px;
	position:relative;
}
form.news-letter .form-control{
	height:60px;
	padding-right:75px;
}
form.news-letter .btn{
	width:60px;
	height:60px;
	border:1px solid #fff;
	position:absolute;
	top:0;
	right:0;
	font-size:25px;
}

form.news-letter .btn:hover{
	color:#3498db;
}
#subscribe-loading {
	display: none;
	line-height: 45px;
	cursor: inherit;
}
#subscribe-loading:hover{
	color: inherit;
}
.subscribe-message{
	text-align: center;
	font-size: 1.125em;
}

.subscribe-error{
	color: #ffffff;
	position: absolute;
	background: rgba(52, 152, 219,1);
	display: none;
	left: 25px;
	bottom:60px;
	padding: 5px 10px;
	border-radius: 3px;
}
.subscribe-error:after{
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px;
	border-color: rgba(52, 152, 219,1) transparent  transparent transparent;
	left: 25px;
	bottom: -24px;
}
/* 5 - Showcase Section End 
---------------------------------------------------------------------- */


/* 6 - Contact Section
---------------------------------------------------------------------- */
#contact .next-section a{

	-webkit-transform:rotate(180deg);
	   -moz-transform:rotate(180deg);
	    -ms-transform:rotate(180deg);
	     -o-transform:rotate(180deg);
	        transform:rotate(180deg);
}
#contact-form .col-sm-6, 
#contact-form .col-sm-10,
#contact-form .col-sm-2{
	padding:0;
}
#contact-form{
	margin-top:30px;
	margin-bottom:10px;
}
#contact-form  input{
	height:60px;
}
#contact-form #first_name{
	border-right:0px solid transparent;
	border-bottom:0px solid transparent;
}
#contact-form #last_name{
	border-bottom:0px solid transparent;
}
#contact-form #contact_email{
	border-bottom:0px solid transparent;
	border-right:0px solid #444;
}
#contact-form #phone{
	border-bottom:0px solid transparent;
}
#contact-form textarea.form-control{
	height:130px;
	border-top:0px solid transparent;
	padding-top: 20px;
}
#contact-form  .btn{
	font-size:50px;
	height:130px;
	border:2px solid #444;
	border-left:0px solid transparent;
	border-top:0px solid transparent;
}
#contact-form .btn:hover {
	color:rgba(210,0,0,1);
	background-color: rgba(255,255,255,0.5);
}
#contact-form  .col-sm-6,
#contact-form  .col-sm-10{
	position: relative;
}
.first-name-error,
.last-name-error,
.contact-email-error,
.contact-subject-error,
.contact-message-error{
	color: #ffffff;
	position: absolute;
	background: rgba(210,0,0,0.8);
	display: none;
	left: 25px;
	top: -30px;
	padding: 5px 10px;
	border-radius: 3px;
}

.first-name-error:after,
.last-name-error:after,
.contact-email-error:after,
.contact-subject-error:after,
.contact-message-error:after{
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px;
	border-color: rgba(210,0,0,0.8) transparent  transparent transparent;
	left: 25px;
	bottom: -24px;
}
#contact-loading{
	display: none;
	cursor: inherit;
	line-height: 110px;
}
#contact-loading:hover{
	color: inherit;
}
.contact-message{
	text-align: center;
	font-size: 1.125em;
}

/* 6 - Contact Section End 
---------------------------------------------------------------------- */

/* 6.1 - Copyright 
---------------------------------------------------------------------- */
#footer-section {
	position: relative;
	padding: 0 15% 0 0;
	width: 100%;
}

.copyright {
	position: relative;
	outline: none;
}



/* 7 - Footer Section  
---------------------------------------------------------------------- */
#footer-section{
	width: 100%;
	min-height: 80px;
}
#footer-section p{
	margin: 0;
	padding: 25px 15px; 
	text-align: center;
	line-height: 30px;
	color: #1a1a1a;
}
#footer-section p a{
	color: rgba(210,0,0,1);
}
/* 7 - Footer Section End 
---------------------------------------------------------------------- */





/* 8 - Media Query 
---------------------------------------------------------------------- */

/* 8.1 - media screen and (max-width: 768px) 
------------------------------------------------ */

@media screen and (min-width: 320px){
	.section-style {
		padding: 0;
		width: 100%;
	}
}
@media (min-width: 450px) {
	.projectContainer .col-sm-4{
		position: relative;
		padding:20px 15px 0 0;
		width: auto;
		float: left;
	}
}
@media (min-width: 551px) and (max-width: 768px){
	.mainNav {
		width: 30%;
		height: 93%;
		top: -93%;		
	}
	.mainNav .touchEnd {
    width: 30%;
	}	
	.container {
		width: 100%;
		min-width: 85%;
		padding: 15px;
	}
	.section-style {
		padding: 0;
		width: 100%;
		min-width: 550px;
	}
}
@media screen and (max-width: 768px){
	.pattern {
		width: 100%;
		padding: 0;
	}
	.mainNav {
	  -webkit-transition:all .25s;
	   	 -moz-transition:all .25s;
	    	-ms-transition:all .25s;
	     	 -o-transition:all .25s;
	       		transition:all .25s;

		background-color:rgba(210,0,0,1);
		color: #fff;
		cursor: pointer;
	}
	.mainNav:focus, .mainNav:active, .mainNav:hover {
		top: 50px;
	}
	.mainNav .touchEnd {
		visibility:visible;
		background-color:rgba(210,0,0,1);
		color: #fff;
	}
	div.subTitle {
		font-size: 1.6em;
	}
	h1.siteTitle, .siteTitle {
		font-family: '28days-later', "Lucida Sans Unicode", "Lucida Grande", sans-serif;
		font-size: 5em;
	}
	h2.section-title, h2.subTitle, .subTitle {
		font-size: 2.5em;
	}
	.subTitle .FLeft span {
		font-size:0.75em;
	}
	.flip-box.flip-up .flank {
	  width: 100%;
	  height: 83%;
	  left: 0;
	  top: 20%;
	  -webkit-transform: rotateX(-90deg) translateZ(5.3em);
	     -moz-transform: rotateX(-90deg) translateZ(5.3em);
	  		-ms-transform: rotateX(-90deg) translateZ(5.3em);
	  		 -o-transform: rotateX(-90deg) translateZ(5.3em);
	  				transform: rotateX(-90deg) translateZ(5.3em);
	}
	.flip-box.flip-up .flankTwo {
		width: 100%;
		height: 85%;
		left: 0;
		bottom: 21%;
		background-color: rgba(190,0,0,1);
		-webkit-transform: rotateX(-90deg) translateZ(-4.7em);
	     -moz-transform: rotateX(-90deg) translateZ(-4.7em);
				-ms-transform: rotateX(-90deg) translateZ(-4.7em);
				 -o-transform: rotateX(-90deg) translateZ(-4.7em);
						transform: rotateX(-90deg) translateZ(-4.7em);
		position: absolute;
	}
	.subTitle{
		font-size:2em;
	}
	#contact-form #first_name{
		border-right:2px solid #444;
	}
	#contact-form #subject{
		border-top: 2px solid #444;
	}
	#contact-form #contact_email{
		border-bottom:0px solid transparent;
		border-right:2px solid #444;
	}
	#contact-form #phone{
		border-bottom:0px solid transparent;
	}
	#contact-form .btn{
	border-left:2px solid #444;
	}
}
@media (min-width: 320px) and (max-width: 550px){
	.container {
		width: 100%;
		min-width: 96%;
		padding: 11px;
	}
	.mainNav {
		width: 40%;
		height: 92%;
		top: -93%;		
	}
	.LinkLable {
		font-size:1.8em;
		padding: 1%
	}
	.mainNav .touchEnd {
    width: 40%;
	}
	.section-style {
		padding: 0;
		width: 100%;
		min-width: 360px;
	}
	.pattern {
		padding-top: 40px;
	}
	.section-title, h2.subTitle, .subTitle {
		font-size: 1.9em;
	}
	.boxTitle .FLeft {
		margin: 20px 2.5% 20px 0;
		text-align: center;
		width: 47%;
		line-height: 125%;
	}
	.boxTitle {
		font-size: 1.3em;
	}
	h1.siteTitle, .siteTitle {
		font-size: 4.7em;
	}
	h2.section-title, h2.subTitle, .subTitle {
		font-size: 2.2em;
	}
	.section-content {
		font-size: 1.2em;
	}
	#contact-form input {
		height: 50px;
	}
	.form-control {
		padding: 6px 10px;
	}
	#contact-form textarea.form-control {
		height: 160px;
		padding-top: 10px;
	}
	#contact-form .btn {
		height: 100px;
	}
}

@media screen and (min-width: 769px){
	.container{
		width:100%;
		min-width:600px;
	}	
	.section-style {
		padding-right: 20%;
	}
	.mainNav {
    width: 20%;
	}
}

/* 8.3 - media screen and (max-width: 992px)
------------------------------------------------ */
@media screen and (max-width: 992px){
	.container{
		width:100%;
	}
}
@media (min-width: 993px){
	.container{
		width:85%;
	}
	.section-style {
		padding-right: 20%;
	}
	.mainNav {
    width: 20%;
	}
}

/* 8.4 - media screen and (max-width: 1024px)
------------------------------------------------ */

@media (min-width: 769px) and (max-width: 1024px){
	.container{
		width:85%;
		min-width:600px;
	}
	.section-style {
		padding-right: 20%;
	}
	.mainNav {
    width: 20%;
	}
}

@media (min-width: 1025px){
	.container{
		width:92%;
		min-width:600px;
	}
	.section-style {
		padding-right: 15%;
	}
	.mainNav {
    width: 15%;
	}
}


/* 8.4 - media screen and (min-width: 1170px)
------------------------------------------------ */
@media (min-width: 1170px){
	.container{
		width:92%;
	}
}

/* 8.5 - media screen and (min-width: 1170px)
------------------------------------------------ */
@media (min-width: 1290px){
	.container{
		width:85%;
		max-width: 1290px;
	}
}


/* 8 - Media Query End
---------------------------------------------------------------------- */

/* 9 - Preloader
---------------------------------------------------------------------- */
#preloader{
	position: fixed;
	width: 100%;
	background: rgba(255,255,255,.97);
	height: 100%;
	z-index: 99999999999;

}

#loader {
 	position: absolute;
 	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 175px;
	height: 175px;
	margin: auto;
}
#loader .dot {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 87.5px;
	height: 100%;
	margin: auto;
}
#loader .dot:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 87.5px;
	height: 87.5px;
	border-radius: 100%;
	-webkit-transform: scale(0);
	   -moz-transform: scale(0);
	    -ms-transform: scale(0);
	     -o-transform: scale(0);
	        transform: scale(0);
}
#loader .dot:nth-child(7n+1) {
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}
#loader .dot:nth-child(7n+1):before {
	background: rgb(210,0,0);
	-webkit-animation: load 0.8s linear 0.1s infinite;
	   -moz-animation: load 0.8s linear 0.1s infinite;
	    -ms-animation: load 0.8s linear 0.1s infinite;
	     -o-animation: load 0.8s linear 0.1s infinite;
	        animation: load 0.8s linear 0.1s infinite;
}
#loader .dot:nth-child(7n+2) {
	-webkit-transform: rotate(90deg);
	   -moz-transform: rotate(90deg);
	    -ms-transform: rotate(90deg);
	     -o-transform: rotate(90deg);
	        transform: rotate(90deg);
}
#loader .dot:nth-child(7n+2):before {
background: rgb(215,0,0);
	-webkit-animation: load 0.8s linear 0.2s infinite;
	   -moz-animation: load 0.8s linear 0.2s infinite;
	    -ms-animation: load 0.8s linear 0.2s infinite;
	     -o-animation: load 0.8s linear 0.2s infinite;
	        animation: load 0.8s linear 0.2s infinite;
}
#loader .dot:nth-child(7n+3) {
	-webkit-transform: rotate(135deg);
	   -moz-transform: rotate(135deg);
	    -ms-transform: rotate(135deg);
	     -o-transform: rotate(135deg);
	        transform: rotate(135deg);
}
#loader .dot:nth-child(7n+3):before {
background: rgb(220,0,0);
	-webkit-animation: load 0.8s linear 0.3s infinite;
	   -moz-animation: load 0.8s linear 0.3s infinite;
	    -ms-animation: load 0.8s linear 0.3s infinite;
	     -o-animation: load 0.8s linear 0.3s infinite;
	        animation: load 0.8s linear 0.3s infinite;
}
#loader .dot:nth-child(7n+4) {
	-webkit-transform: rotate(180deg);
	   -moz-transform: rotate(180deg);
	    -ms-transform: rotate(180deg);
	     -o-transform: rotate(180deg);
	        transform: rotate(180deg);
}
#loader .dot:nth-child(7n+4):before {
	background: rgb(225,0,0);
	-webkit-animation: load 0.8s linear 0.4s infinite;
	   -moz-animation: load 0.8s linear 0.4s infinite;
	    -ms-animation: load 0.8s linear 0.4s infinite;
	     -o-animation: load 0.8s linear 0.4s infinite;
	        animation: load 0.8s linear 0.4s infinite;
}
#loader .dot:nth-child(7n+5) {
	-webkit-transform: rotate(225deg);
	   -moz-transform: rotate(225deg);
	    -ms-transform: rotate(225deg);
	     -o-transform: rotate(225deg);
	        transform: rotate(225deg);
}
#loader .dot:nth-child(7n+5):before {
	background: rgb(230,0,0);
	-webkit-animation: load 0.8s linear 0.5s infinite;
	   -moz-animation: load 0.8s linear 0.5s infinite;
	    -ms-animation: load 0.8s linear 0.5s infinite;
	     -o-animation: load 0.8s linear 0.5s infinite;
	        animation: load 0.8s linear 0.5s infinite;
}
#loader .dot:nth-child(7n+6) {
	-webkit-transform: rotate(270deg);
	   -moz-transform: rotate(270deg);
	    -ms-transform: rotate(270deg);
	     -o-transform: rotate(270deg);
	        transform: rotate(270deg);
}
#loader .dot:nth-child(7n+6):before {
	background: rgb(235,0,0);
	-webkit-animation: load 0.8s linear 0.6s infinite;
	   -moz-animation: load 0.8s linear 0.6s infinite;
	    -ms-animation: load 0.8s linear 0.6s infinite;
	     -o-animation: load 0.8s linear 0.6s infinite;
	        animation: load 0.8s linear 0.6s infinite;
}
#loader .dot:nth-child(7n+7) {
	-webkit-transform: rotate(315deg);
	   -moz-transform: rotate(315deg);
	    -ms-transform: rotate(315deg);
	     -o-transform: rotate(315deg);
	        transform: rotate(315deg);
}
#loader .dot:nth-child(7n+7):before {
	background: rgb(240,0,0);
	-webkit-animation: load 0.8s linear 0.7s infinite;
	   -moz-animation: load 0.8s linear 0.7s infinite;
	    -ms-animation: load 0.8s linear 0.7s infinite;
	     -o-animation: load 0.8s linear 0.7s infinite;
	        animation: load 0.8s linear 0.7s infinite;
}
#loader .dot:nth-child(7n+8) {
	-webkit-transform: rotate(360deg);
	   -moz-transform: rotate(360deg);
	    -ms-transform: rotate(360deg);
	     -o-transform: rotate(360deg);
	        transform: rotate(360deg);
}
#loader .dot:nth-child(7n+8):before {
	background: rgb(245,0,0);
	-webkit-animation: load 0.8s linear 0.8s infinite;
	   -moz-animation: load 0.8s linear 0.8s infinite;
	    -ms-animation: load 0.8s linear 0.8s infinite;
	     -o-animation: load 0.8s linear 0.8s infinite;
	        animation: load 0.8s linear 0.8s infinite;
}
#loader .lading{
	background-image: url(../images/loading.gif);
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -40px;
	height: 20px;
	width: 180px;
	background-position: 50% 50%;
}

@-webkit-keyframes load {
	100% {
		opacity: 0;
		-webkit-transform: scale(1);
	}
}
@-moz-keyframes load  {
	100% {
		opacity: 0;
		-moz-transform: scale(1);
	}
}
@-ms-keyframes load {
	100% {
		opacity: 0;
		-ms-transform: scale(1);
	}
}
@-o-keyframes load {
	100% {
		opacity: 0;
		-o-transform: scale(1);
	}
}
@keyframes load {
	100% {
		opacity: 0;
		transform: scale(1);
	}
}

/* 9 - Preloader End
---------------------------------------------------------------------- */

/* 10 - next Button 
---------------------------------------------------------------------- */

svg:not(:root) {
    overflow: hidden;
}

/* 11 - 3D Cube 
---------------------------------------------------------------------- */

.cubeDemo {
	position:relative;
	top:-70px;
	width: 240px;
	text-align: center;
	display: block;
	height: 200px;
	margin: 0 auto;
}
.cubeDemo .wrap {
  margin-top: 150px;
  perspective: 1000px;
  perspective-origin: 50% 50%;
}
.cube {
  margin: auto;
  position: relative;
  height: 200px;
  width: 200px;
  transform-style: preserve-3d;
}
.cube > div {
  position: absolute;
  box-sizing: border-box;
  padding: 10px;
  height: 100%;
  width: 100%;
  opacity: 0.9;
  background-color: rgba(210,0,0,0.3);
  box-shadow: 0 0 30px rgba(210, 0, 0, 1) inset;
  color: #ffffff;
  padding: 20px 0 0;
}
.cube > div span {
	color: #fff;
  font-size: 2.7em;
}
.cube > div i {
	color: #fff;
  font-size: 6em;
}
.cube > div i.fa-dot-circle-o {
	color: #fff;
  font-size: 2em;
}
.cube div.front {
  
	-webkit-transform:translateZ(100px);
	   -moz-transform:translateZ(100px);
	    -ms-transform:translateZ(100px);
	     -o-transform:translateZ(100px);
		      transform:translateZ(100px);
}

.cube div.back {
  -webkit-transform: translateZ(-100px) rotateY(180deg);
	   -moz-transform: translateZ(-100px) rotateY(180deg);
  		-ms-transform: translateZ(-100px) rotateY(180deg);
  		 -o-transform: translateZ(-100px) rotateY(180deg);
  				transform: translateZ(-100px) rotateY(180deg);
}

.cube div.right {
  -webkit-transform: rotateY(-270deg) translateX(100px);
	   -moz-transform: rotateY(-270deg) translateX(100px);
  		-ms-transform: rotateY(-270deg) translateX(100px);
  		 -o-transform: rotateY(-270deg) translateX(100px);
  				transform: rotateY(-270deg) translateX(100px);
  -webkit-transform-origin: top right;
  	 -moz-transform-origin: top right;
  		-ms-transform-origin: top right;
  		 -o-transform-origin: top right;
  				transform-origin: top right;
}

.cube div.left {
  -webkit-transform: rotateY(270deg) translateX(-100px);
 		 -moz-transform: rotateY(270deg) translateX(-100px);
 		  -ms-transform: rotateY(270deg) translateX(-100px);
 			 -o-transform: rotateY(270deg) translateX(-100px);
 				  transform: rotateY(270deg) translateX(-100px);
  -webkit-transform-origin: center left;
 		 -moz-transform-origin: center left;
  		-ms-transform-origin: center left;
  		 -o-transform-origin: center left;
				  transform-origin: center left;
}

.cube div.top {
  -webkit-transform: rotateX(-270deg) translateY(-100px);
	   -moz-transform: rotateX(-270deg) translateY(-100px);
		  -ms-transform: rotateX(-270deg) translateY(-100px);
		   -o-transform: rotateX(-270deg) translateY(-100px);
				  transform: rotateX(-270deg) translateY(-100px);
  -webkit-transform-origin: top center;
	   -moz-transform-origin: top center;
		  -ms-transform-origin: top center;
		   -o-transform-origin: top center;
				  transform-origin: top center;
}

.cube div.bottom {
  -webkit-transform: rotateX(270deg) translateY(100px);
	   -moz-transform: rotateX(270deg) translateY(100px);
		  -ms-transform: rotateX(270deg) translateY(100px);
		   -o-transform: rotateX(270deg) translateY(100px);
				  transform: rotateX(270deg) translateY(100px);
  -webkit-transform-origin: bottom center;
	   -moz-transform-origin: bottom center;
		  -ms-transform-origin: bottom center;
		   -o-transform-origin: bottom center;
				  transform-origin: bottom center;
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
  }
  
  to {
    -webkit-transform: rotateX(360deg) rotateY(360deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotateX(0deg) rotateY(0deg);
  }
  
  to {
    -moz-transform: rotateX(360deg) rotateY(360deg);
  }
}

@-ms-keyframes spin {
  from {
    -ms-transform: rotateX(0deg) rotateY(0deg);
  }
  
  to {
    -ms-transform: rotateX(360deg) rotateY(360deg);
  }
}

@-o-keyframes spin {
  from {
    -o-transform: rotateX(0deg) rotateY(0deg);
  }
  
  to {
    -o-transform: rotateX(360deg) rotateY(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.cube {
	-webkit-animation: spin 18s infinite linear;
		 -moz-animation: spin 18s infinite linear;
			-ms-animation: spin 18s infinite linear;
		   -o-animation: spin 18s infinite linear;
					animation: spin 18s infinite linear; 
}
/* END Cube */