/* Animation on the circle svg */

#circle-all-elements-raw {
     margin-top:-50px;
	 display:block;
	 z-index:2;
	 position:relative;
}

#circle-all-elements-raw-squares {
	display:block;
	z-index:3;
}




#circle-all-elements-raw-lightbulb-2,
#circle-all-elements-raw-printer-2,
#circle-all-elements-raw-stamp-2,
#circle-all-elements-raw-blowhorn-2,
#circle-all-elements-raw-pc-2,
#circle-all-elements-raw-shirt-2,
#circle-all-elements-raw-g1,
#circle-all-elements-raw-one-logo-g,
#svg-circle-bottom-blurb {
	transition: opacity .75s ease-in-out;
   -moz-transition: opacity .75s ease-in-out;
   -webkit-transition: opacity .75s ease-in-out;
}

#circle-all-elements-raw-designsquare:hover,
#circle-all-elements-raw-printsquare:hover,
#circle-all-elements-raw-mailsquare:hover,
#circle-all-elements-raw-promosquare:hover,
#circle-all-elements-raw-websquare:hover,
#circle-all-elements-raw-apparelsquare:hover {
	 cursor: pointer;
}

.add-opacity {
   opacity: 1.0!important;
}

.add-no-opacity {
   opacity: 0.0!important;
}

#shop-button-wrapper {
   position: absolute;
   width: 40%;
   top: 51%;
   left: 50%;
   transform: translate(-50%, -50%);
	 z-index: 7;
   opacity: 0;
		transition: opacity .75s ease-in-out;
   -moz-transition: opacity .75s ease-in-out;
   -webkit-transition: opacity .75s ease-in-out;
		
}

.add-no-opacity-forever {
	visibility: hidden!important;
}

#circle-all-elements-raw-designbox,
#circle-all-elements-raw-printbox,
#circle-all-elements-raw-mailbox,
#circle-all-elements-raw-promobox,
#circle-all-elements-raw-webbox,
#circle-all-elements-raw-apparelbox {
	transition: fill .5s ease-in-out;
   -moz-transition: fill .5s ease-in-out;
   -webkit-transition: fill .5s ease-in-out;
}

.fill-box-design {
   fill: rgb(224, 111, 0); 
}

.fill-box-print {
   fill: rgb(102, 51, 153); 
}

.fill-box-mail {
   fill: rgb(0, 102, 153); 
}

.fill-box-promo {
   fill: rgb(153, 0, 102); 
}

.fill-box-web {
   fill: rgb(102, 153, 0); 
}

.fill-box-apparel {
   fill: rgb(17, 100, 101); 
}

/* END Animation on the circle svg */


/* CSS for video overlay pop-ups */

.overlay-video-circle {
    height: 45%;
    width: 45%;
	left:27.5%;
	right:27.5%;
	top:27.5%;
    position: absolute;
	border-radius: 50%;
	overflow:hidden;
	opacity: 0;
	transition: opacity .75s ease-in-out;
   -moz-transition: opacity .75s ease-in-out;
   -webkit-transition: opacity .75s ease-in-out;
    z-index:1;
}

.overlay-video-circle video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

#svg-circle-bottom-blurb {
	opacity:0.0;
}