/* quadranta ID css */

@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
@import url(http://fonts.googleapis.com/css?family=lato);

body#corporateID {
	
	background: rgba(59,89,152,1) url(../../images/noize.png) repeat 100% 0;

}

body#Quadranta div#wrapper {
	margin: 0 auto 10px auto;

}

div.cubeURL {
	position: absolute;
	left: 13%;
	top: 12%;
	border-radius: 100%;
	background: transparent;*red; 
	height: 20%;
	width: 20%;
	z-index: 1;
}
	
	

#quadPositionLARGE {
	float: left;
	width: 100%; /* centers the Quad to the screen */
	height: 100%;
	
	position: fixed;
	.right: 300px;
	.right: 33vw;
	.top: 1%;
	.top: 2vh;
	margin: auto auto;
	background: transparent;
	z-index: 10;
}


body#quadranta #quadPositionLARGE,
body#services #quadPositionLARGE{

	width: 75%; /* centers the Quad to the screen */
	width: 75Vw; /* centers the Quad to the screen */
	height: 100%;
	height: 100Vh;
	top: 11%;
	top: 11vh;
}

body#quadranta 
{background: red;}


/* Source:: http://www.dynamicsights.com/csscolorcycle.html  // */

body#quadranta,
body#services,
body#who
{ 
	animation-name: backgroundCycle; 
	animation-duration:30s; 
	animation-direction:alternate; 
	animation-iteration-count:infinite; 

	-webkit-animation-name: backgroundCycle; 
	-webkit-animation-duration:30s; 
	-webkit-animation-direction:alternate; 
	-webkit-animation-iteration-count:infinite; 
}	

body#quadranta h2,
body#quadranta i,
body#quadranta span.ma,
body#quadranta #clientTel.quadranta,

body#services h2,
body#services i,
body#services span.ma,
body#services #clientTel.quadranta
{ 
	animation-name: textcolorCycle; 
	animation-duration:30s; 
	animation-direction:alternate; 
	animation-iteration-count:infinite; 

	-webkit-animation-name: textcolorCycle; 
	-webkit-animation-duration:30s; 
	-webkit-animation-direction:alternate; 
	-webkit-animation-iteration-count:infinite; 
}	

@keyframes backgroundCycle 
{
	0% {background-color: red} 
	25% {background-color:orange} 
	50% {background-color:green} 
	75% {background-color:#007bb6} /* Linkedin Blue */
} 

@-webkit-keyframes backgroundCycle 
{ 
	0% {background-color:red} 
	25% {background-color:orange} 
	50% {background-color:green} 
	75% {background-color:#007bb6} /* Linkedin Blue */
}

@keyframes textcolorCycle 
{
	0% {color: red} 
	25% {color: orange} 
	50% {color: green} 
	75% {color: #007bb6;} /* Linkedin Blue */
} 

@-webkit-keyframes textcolorCycle 
{ 
	0% {color: red} 
	25% {color: orange} 
	50% {color: green} 
	75% {color: #007bb6;} /* Linkedin Blue */
}



/* Sizing of the Quads */
#quadPositionLARGE #quadrantaID {
	margin: 50px auto;
	font-family: 'Lato', sans-serif;
	font-size: 14pt;
	width: 400px;
	height: 400px;
	width: 58vh;
	height: 58vh;
}


#quadPositionLARGE div.cubeURL {
	left: 22%;
	top: 22%;
	height: 1%;
	width: 1%;
}

#quadPosition {
	position: fixed;
	bottom: 45px;
	left: 45px;
	background: transparent;
	z-index: 100;
}

body#corporateID #quadPosition {
	opacity: 0.4;
}



#quadrantaID {
	
	font-family: 'Lato', sans-serif;
	font-size: 7pt;
	
	width: 125px;
	height: 125px;
	
	background: transparent;
	transform:rotate(-45deg);
	-ms-transform:rotate(-45deg); /* IE 9 */
	-webkit-transform:rotate(-45deg); /* Opera, Chrome, and Safari */
}

#quadrantaID .quad {
	width: 45%;
	height: 45%;
	border: 0.2em solid orange;

/* lets make sure that the border is inside the element */
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

#quadrantaID .quad.sq01 {
	float: left;
	margin-bottom: 10%;
	border: none;
	z-index: 10;
}
#quadrantaID .quad.sq02 {
	float: right;
	margin-bottom: 10%;
	z-index: 5;
	padding: 3%;
	text-shadow: 2px 2px 4px (0,0,0,0.8);
}
#quadrantaID .quad.sq03 {
	float: left;
	padding: 3%;
}
#quadrantaID .quad.sq04 {
	float: right;
	padding: 3%;
}

.sq01 {
	width: 50%;
	height: 50%;
	z-index: 100;
	color: transparent;
}


.sq01 .LinkedIn {
	float: left;
	background: #007bb6 url('http://ma-design.com/assets/images/METRO_Linkedin_50px.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.sq01 .twitter {
	float: right;
	background: #00a0d1 url('http://ma-design.com/assets/images/METRO_twitter_50px.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.sq01.Pinterest {
	float: left;
	background: #910101 url('http://ma-design.com/assets/images/METRO_Pinterest_50px.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.sq01.Facebook {
	float: right;
	background: #3b5998 url('http://ma-design.com/assets/images/METRO_Facebook_50px.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

div.quad  {
	transition: all 1.5s ease;
	color: transparent;
	box-shadow: -10px 10px 18px rgba(0,0,0,0.2);
	}
div.quad:hover  {
	color: white;
	transform:rotate(405deg);
	-ms-transform:rotate(405deg); /* IE 9 */
	-webkit-transform:rotate(405deg); /* Opera, Chrome, and Safari */
	box-shadow: 10px 10px 18px rgba(0,0,0,0.2);
}


div .quad.sq02 {
  transition: all 1.5s ease;
  background-color: white;
}
div .quad.sq02:hover {
  background-color: red;
}


div .quad.sq03 {
  transition: all 1.5s ease;
  background-color: white;
}
div .quad.sq03:hover {
  background-color: green;
}


div .sq04 {
  transition: all 1.5s ease;
  background-color: white;
}
div .quad.sq04:hover {
  background-color: orange;
}