/* Styles for channels displayed on RIT Homepage and Channels subsite */
body#channel{
    background-color: #fff;
}

#channel .jumbotron { background-color: #fff;padding-top: 10px;padding-bottom: 0px;margin-bottom: 0px;}

.channel-group h2, .channel-group .dropdown-channels .dropdown-toggle {font-family:"Helvetica Neue", Helvetica, Arial, san-serif; color:#777;font-size:14px;text-transform:uppercase;font-weight:normal;}

.channel-group .feedmasher-item-element a:link,
.channel-group .feedmasher-item-element a:visited { color: #F36E21; text-decoration:none;}
.channel-group .feedmasher-item-element a:hover,
.channel-group .feedmasher-item-element a:active,
.channel-group .feedmasher-item-element a:focus { color: #F36E21; text-decoration:underline;}

.channel-group .media-heading, .channel-group .feedmasher-item-element .media-heading a {color: #666; text-decoration: none;font-family: "Source Sans Pro",san-serif;font-weight:400;}

.channel-group .media-description{ margin-top:8px }
.channel-group .media-description.tweet{ margin-top:9px }

.channel-group .media-left img.media-object, .channel-group .media-right img.media-object{ width:80px } /*for items with left or right aligned media set max width of 80 for image */


/*hide the readmore for center aligned media objects (looks funny with CIAS so temp fix here)*/
.channel-group .center .media-description a {   display: none;}
.channel-group .media-center img.media-object{ width:100% }
.channel-group blockquote.story p.media-author{ font-size:14px }

/* Styles for CIAS Gallery cells*/
.channel-group .media-left.cias-img-container{ display: inline;padding: 0px; }
.media-left.cias-img-container img.img-responsive.pull-left { margin-right: 10px; border: none; border-radius: 0; padding: 0 }

/* Styles University news style channels, or full media width with bottom text title*/
.channel-group { padding-bottom:70px; }
.channel-group .story-header {font-family: 'Source Sans Pro', sans-serif;font-weight: 400;font-size:15px;color:#FFF; background:#F36E21;margin-bottom:2px;padding-top:3px;padding-bottom:2px;padding-left:12px;}
.channel-group .story-header .glyphicon {font-size: 11px; position:relative; top: 0;}
.channel-group .story-header a:link,
.channel-group .story-header a:visited { color:#FFF; text-transform:uppercase;text-decoration:none;}
.channel-group .story-header a:hover,
.channel-group .story-header a:active,
.channel-group .story-header a:focus { color:#FFF; text-transform:uppercase;text-decoration:underline;}
.channel-group .story-image {
    text-align: center;
    position: relative;
    margin-bottom:5px;
    overflow: hidden;
    background-image: url("//www.rit.edu/_assets/images/bg-grey-diagonals.gif");
}
.channel-group .story-image iframe,
.channel-group .story-image video,
.channel-group .story-image img {
    /* The "magic" image sizing method, please use whenever possible */
    width: 100%; /* 1. Blow up the image size (height & width) if necessary */
    height: 101%; /* Set to 101% so when pixels get rounded down, background image doesn't show through - asgcmp
    max-width: none; /* 2. Override max width set by homepage's CSS */
    position: absolute; /* 3. These four lines center the image */
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    object-fit: cover; /* 4. Supports 60-70% browsers; keep aspect ratio */
}
.channel-group .story-image iframe, video { border: none; }
.channel-group .story-image iframe { width: 102%; }

.channel-group .story-title {color:#666;font-family: 'Source Sans Pro', sans-serif;font-weight: 300;font-size:18.5px;line-height:1.1em;margin-bottom:25px;}
.channel-group .story-title a:link,
.channel-group .story-title a:visited { color:#666; text-decoration:none;}
.channel-group .story-title a:hover,
.channel-group .story-title a:active,
.channel-group .story-title a:focus { color:#666; text-decoration:underline;}
.channel-group p.story-title.tweettitle{ margin-bottom:5px; }
.channel-group iframe {margin-top:0 !important; margin-right:0 !important;}


/* Styles for specific pages (homepage vs channel page) */
.channel-group.channelpage {background-color: #eeeeee;}
.channel-group .rit-homepage blockquote.story {background: #f5f5f5;}
.rit-homepage blockquote.story, .channel-group .rit-channelpage blockquote.story {background: #FFFFFF;}
.channel-group .rit-channelpage .story{background-color:#FFFFFF;}
.channel-group .rit-channelpage .story-title{padding-bottom: 10px;padding-left: 10px;padding-right: 10px;font-size: 17.5px; color: #666}
.channel-group .rit-channelpage .story:not(.instagram-media):not(.twitter-tweet) .story-title  a { font-weight: 400;} /* change non-social-media news titles to bolder/easy-to-see font weight */
.channel-group .rit-channelgrouppage .story:not(.instagram-media):not(.twitter-tweet) .story-title a {font-weight: 300 !important;} /* keep title font weight normal on channels.php */
.channel-group .rit-channelpage .story-image{margin-bottom: 8px}
.channel-group .rit-channelpage #readmore h2 { display: none; } /* hide the ajax readmore on channel index page since not working */


/* Styles for Instagram */
.channel-group .masonry-container .instagram-media .story-title a { text-decoration: none !important; }
.channel-group .instagram-media .story-title a { color: #F36E21; }
.channel-group .instagram-media .story-title a:hover { color: #f58b4d; }

/* Styles for Facebook */
/* styles for channel & wall */
blockquote.facebook-media .facebook-grey{color:#90949c;font-size:10pt;position:relative;top: -6px;}
blockquote.facebook-media{cursor:pointer;background-color:#FFFFFF;}
blockquote.facebook-media p {font-size:11pt;}
blockquote.facebook-media p:hover {cursor:text;}
blockquote.facebook-media {border: 1px solid #e1e8ed; border-radius: 5px;}
blockquote.facebook-media a.facebook-blue {color:#365899 !important; font-size:12pt;}
blockquote.facebook-media a.facebook-blue:hover {color:#F36E21 !important;}
blockquote.facebook-media:hover{border-color: #ccd6dd;}
blockquote.facebook-media {padding-top:20px;padding-left:20px;padding-right:20px;padding-bottom: 10px;}
/* wall styles */
.rit-homepage blockquote.facebook-media {
    border-radius:0;
    border:none;
    background-color: white !important;
}
.rit-homepage blockquote.facebook-media img:not(.facebook-icon) {
    display: none;
}

/* Classes for the opengraph embed*/
.channel-group .embededlink .embedimage{ padding-right:5px}
.channel-group .embededlink .embedimage img {height: 5em;vertical-align: middle;}
.channel-group .embededlink .embedtext {margin-top: 3px;padding-right:0px;padding-left: 5px;}
.channel-group .embededlink .embedtext a {  color: #666; }
.channel-group .embededlink .panel {overflow: hidden;margin-bottom:0px;background: #fff;}
.channel-group .embedtext.col-xs-11.col-md-11.pad-embed { margin-left: 15px;padding-right: 5px; margin-bottom: 3px;} /*adds some space for items without an image*/
.channel-group .media-description.embedtweet {margin-top: 0px;font-size:12px; }
.channel-group .embedtweetimage{margin:4px;}

.channel-group blockquote.story { font-family: "Source Sans Pro",san-serif; font-size: 14px;padding: 16px 16px 16px 16px;border-left: none;}
.channel-group blockquote.story p { font-size: 16px; font-weight: normal; line-height: 20px; }
.channel-group blockquote.story a { font-weight: normal; text-decoration: none; outline: 0 none; }
.channel-group blockquote.story a:hover,
.channel-group blockquote.story a:focus { text-decoration: underline; }



/* Styles for Twitter */
/*take out blockquote padding on homepage for tweets, keep the gray background*/
.channel-group .channelpage blockquote.story.twitter-tweet { padding: 0px;background: #fff; }
.channel-group .rit-homepage blockquote.story.twitter-tweet { padding: 0px;background: #fff; }
.channel-group .twitter-tweet { margin: 0 0 25px 0 !important; width: auto !important; }
.channel-group .twitter-tweet img.media-object{ width:auto } /* don't set a width for twitter thumbs*/
.channel-group .twitter-tweet .media-center .media-object, .channel-group blockquote.center .media-center{ overflow: hidden;  margin-bottom:5px;} /*assign a predefined height to image-center items in both twitter plugin and generic blockquote.center plugin for now TO DO, float image in center*/
.channel-group .rit-channelpage .story-title img { margin: 0 !important; } /* override */
.channel-group .twitter-tweet .no-media { padding: 10px 16px 0; position: absolute; height: 100%; background: #f5f5f5; }
.channel-group .twitter-tweet .story-title a { color: #F36E21; font-weight: 300; }
.channel-group .twitter-tweet .story-title a:hover { color: #f58b4d; }
.channel-group .twitter-tweet a.media-author { font-weight: 600; }
/* Styles for Tweets */
iframe[id^='twitter-widget-']{ width:100% !important;}
.channel-group .tweetvideo {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
/*	overflow: hidden; */
}
.channel-group .tweetvideo iframe,
.channel-group .tweetvideo object,
.channel-group .tweetvideo embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.channel-group .twitter-overlay:hover { cursor: pointer; }

/* Copied from channel page are these still in use? */
.channel-group.channelpage ul.channel-nav {list-style: none; padding:0;margin:0;margin-bottom:2.25em;background:#f36e21;}
.channel-group.channelpage ul.channel-nav li {float:left;padding:8px 10px;background:#f36e21;}
.channel-group.channelpage ul.channel-nav a:link, ul.channel-nav a:visited {color:#FFF; text-decoration:none;}
.channel-group.channelpage ul.channel-nav a:hover, ul.channel-nav a:active {color:#ffea00; text-decoration:underline;}
.channel-group .rit-channelpage {padding-top:2.25em;}

.channel-group a.popup-video-youtube {display:block;}
.channel-group .story-youtube-overlay {
    transition-duration: 0.25s;
	position:absolute;
	background: url(/channels/images/youtube-overlay.png) no-repeat center center;
	background-size:100%;
	width:100%;
	height:100%;
	/*height:80%;*/
	z-index:99;
}
.channel-group .story-youtube-overlay:hover {
	background: url(/channels/images/youtube-overlay-hover.png) no-repeat center center;
	background-size:100%;
}

/*admin page styles*/
.channel-group .item-admin-area .glyphicon-info-sign{ float:right;color: #777; }
.channel-group .item-admin-area .btn-group{ margin-bottom:5px; }
.channel-group .item-admin-area span.glyphicon.glyphicon-info-sign { margin-top: 18px;cursor: pointer; }
#channel .page-header.admindashboard   {margin-bottom: 0px; margin-top: 0px; }
.rit-channelpage .page-header.admindashboard { padding:0px}

/*pagination bootstrap overrides*/
.channel-group .pagination>.active>a, .channel-group .pagination>.active>a:focus, .channel-group .pagination>.active>a:hover, .channel-group .pagination>.active>span, .channel-group .pagination>.active>span:focus, .channel-group .pagination>.active>span:hover {
    background-color: #F36E21;
    border-color: #F36E21;
	color:#FFF;
}
.channel-group .pagination>li>a {
    color: #F36E21;
}
.channel-group .pagination{
	margin-left: 15px;
}

.channel-group #readmore{
	cursor: pointer;
    text-align: center;
    margin-top: 5px;
}


/*Loading Area Styles*/
.channel-group-loading{
	position: absolute;
	background: #555;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.channel-group-loading .uil-spin-css{
-webkit-transform:scale(1);
margin: auto;
}



/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* NOTE: we need to add a style here for less than 768 because of masonry*/
@media (max-width: 767px) {
	.channel-group .rit-channelpage .masonry-container .col-md-4{
	width:100%
	}
    .channel-group .story-image { height: 60vw }
    .channel-group .twitter-tweet .no-media { position: relative; }
    .story.instagram-media .story-image { height: 60vw }
}


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.channel-group .rit-channelpage .story-image{ min-height:210px; }
	.channel-group .story-image{ height:220px; overflow:hidden; }
	/*.channel-group .story-youtube .story-image img { margin-top: -19px; }*/
	.channel-group .story-youtube-overlay { 	width:345px; height:220px; }
	.rit-homepage blockquote.story{ min-height:220px; 	}
	.channel-group .twitter-tweet .media-center , .channel-group blockquote.center .media-center { height: 135px;overflow:hidden}
}


/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .channel-group .story-title,
    .channel-group .rit-channelpage .story-title { font-size: 16px; line-height:1.2em }
	.channel-group .rit-channelpage .story-image{ 	min-height:180px;	 }
	.channel-group .story-image{ height:187px; overflow:hidden; }
	/*.channel-group .story-youtube .story-image img { margin-top: -16px; }*/
	.channel-group .story-youtube-overlay { width:294px; height:187px; 	}
	.rit-homepage blockquote.story{ min-height:187px;	}
	/* make description text a tad smaller as this causes issue TEMP fix?*/
	 .channel-group .media-description, .channel-group .tweet{  font-size: 12px; }
	 .channel-group .twitter-tweet .media-center, .channel-group blockquote.center .media-center { height: 95px;overflow:hidden}
	 /* .channel-group .twitter-tweet .tweet :last-child { display: none; } */
    .channel-group .instagram-media .story-title img { top: -2px; }
}


/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .channel-group .story-title { font-size: 18.5px; line-height: 1.1em }
    .channel-group .rit-channelpage .story-title  { font-size: 17.5px; line-height: 1.1em }
	.channel-group .rit-channelpage .story-image { min-height:223px; }
	.channel-group .story-image{ 	height:229px; overflow:hidden; }
	/*.channel-group .story-youtube .story-image img { margin-top: -21px; }*/
	.channel-group .story-youtube-overlay { width:360px; height:229px; }
	.rit-homepage blockquote.story{ min-height:229px; }
	.channel-group .media-description, .channel-group .tweet{  font-size: 14px; }
	.channel-group .twitter-tweet .media-center , .channel-group blockquote.center .media-center { height: 135px;overflow:hidden}
    .channel-group .instagram-media .story-title img { top: -2px;}
}


/*---------------------------------------------------*/
/*END NORMAL STYLES HERE - SPINNER BELOW SINCE THEY ARE SO LONG*/
/*TO DO - consolidate or optimize these into one? */








/* SPINNER STYLE 2 OVERRIDES (readmore) http://loading.io/  */
.channel-group-loading .uil-spin-css {
  -webkit-transform:scale(0.94);
  background: none;
  position: relative;
  width: 200px;
  height: 200px;
}

/* SPINNER STYLE 1 OVERRIDES (channel / archive page) */
#readmore .loading{
	display: inline-block;
}
#readmore .uil-spin-css {
	-webkit-transform: scale(0.17);
	background: none;
	position: relative;
	width: 40px;
	height: 40px;
	-o-transform: scale(0.17);
	transform: scale(0.17);
}
#readmore h2{
	display:inline-block
}

/*CORE SPINNER */
@-webkit-keyframes uil-spin-css {
  0% {
    opacity: 1;
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    opacity: 0.1;
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes uil-spin-css {
  0% {
    opacity: 1;
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    opacity: 0.1;
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes uil-spin-css {
  0% {
    opacity: 1;
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    opacity: 0.1;
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-ms-keyframes uil-spin-css {
  0% {
    opacity: 1;
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    opacity: 0.1;
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes uil-spin-css {
  0% {
    opacity: 1;
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    opacity: 0.1;
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes uil-spin-css {
  0% {
    opacity: 1;
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    opacity: 0.1;
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes uil-spin-css {
  0% {
    opacity: 1;
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    opacity: 0.1;
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes uil-spin-css {
  0% {
    opacity: 1;
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    opacity: 0.1;
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.uil-spin-css > div {
  width: 24px;
  height: 24px;
  margin-left: 4px;
  margin-top: 4px;
  position: absolute;
}
.uil-spin-css > div > div {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: #777777;
}
.uil-spin-css > div:nth-of-type(1) > div {
  -ms-animation: uil-spin-css 1s linear infinite;
  -moz-animation: uil-spin-css 1s linear infinite;
  -webkit-animation: uil-spin-css 1s linear infinite;
  -o-animation: uil-spin-css 1s linear infinite;
  animation: uil-spin-css 1s linear infinite;
  -ms-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}
.uil-spin-css > div:nth-of-type(1) {
  -ms-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
  -moz-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
  -webkit-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
  -o-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
}
.uil-spin-css > div:nth-of-type(2) > div {
  -ms-animation: uil-spin-css 1s linear infinite;
  -moz-animation: uil-spin-css 1s linear infinite;
  -webkit-animation: uil-spin-css 1s linear infinite;
  -o-animation: uil-spin-css 1s linear infinite;
  animation: uil-spin-css 1s linear infinite;
  -ms-animation-delay: 0.12s;
  -moz-animation-delay: 0.12s;
  -webkit-animation-delay: 0.12s;
  -o-animation-delay: 0.12s;
  animation-delay: 0.12s;
}
.uil-spin-css > div:nth-of-type(2) {
  -ms-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
  -moz-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
  -webkit-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
  -o-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
}
.uil-spin-css > div:nth-of-type(3) > div {
  -ms-animation: uil-spin-css 1s linear infinite;
  -moz-animation: uil-spin-css 1s linear infinite;
  -webkit-animation: uil-spin-css 1s linear infinite;
  -o-animation: uil-spin-css 1s linear infinite;
  animation: uil-spin-css 1s linear infinite;
  -ms-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s;
  -webkit-animation-delay: 0.25s;
  -o-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
.uil-spin-css > div:nth-of-type(3) {
  -ms-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
  -moz-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
  -webkit-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
  -o-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
}
.uil-spin-css > div:nth-of-type(4) > div {
  -ms-animation: uil-spin-css 1s linear infinite;
  -moz-animation: uil-spin-css 1s linear infinite;
  -webkit-animation: uil-spin-css 1s linear infinite;
  -o-animation: uil-spin-css 1s linear infinite;
  animation: uil-spin-css 1s linear infinite;
  -ms-animation-delay: 0.37s;
  -moz-animation-delay: 0.37s;
  -webkit-animation-delay: 0.37s;
  -o-animation-delay: 0.37s;
  animation-delay: 0.37s;
}
.uil-spin-css > div:nth-of-type(4) {
  -ms-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
  -moz-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
  -webkit-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
  -o-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
}
.uil-spin-css > div:nth-of-type(5) > div {
  -ms-animation: uil-spin-css 1s linear infinite;
  -moz-animation: uil-spin-css 1s linear infinite;
  -webkit-animation: uil-spin-css 1s linear infinite;
  -o-animation: uil-spin-css 1s linear infinite;
  animation: uil-spin-css 1s linear infinite;
  -ms-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.uil-spin-css > div:nth-of-type(5) {
  -ms-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
  -moz-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
  -webkit-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
  -o-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
}
.uil-spin-css > div:nth-of-type(6) > div {
  -ms-animation: uil-spin-css 1s linear infinite;
  -moz-animation: uil-spin-css 1s linear infinite;
  -webkit-animation: uil-spin-css 1s linear infinite;
  -o-animation: uil-spin-css 1s linear infinite;
  animation: uil-spin-css 1s linear infinite;
  -ms-animation-delay: 0.62s;
  -moz-animation-delay: 0.62s;
  -webkit-animation-delay: 0.62s;
  -o-animation-delay: 0.62s;
  animation-delay: 0.62s;
}
.uil-spin-css > div:nth-of-type(6) {
  -ms-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
  -moz-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
  -webkit-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
  -o-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
}
.uil-spin-css > div:nth-of-type(7) > div {
  -ms-animation: uil-spin-css 1s linear infinite;
  -moz-animation: uil-spin-css 1s linear infinite;
  -webkit-animation: uil-spin-css 1s linear infinite;
  -o-animation: uil-spin-css 1s linear infinite;
  animation: uil-spin-css 1s linear infinite;
  -ms-animation-delay: 0.75s;
  -moz-animation-delay: 0.75s;
  -webkit-animation-delay: 0.75s;
  -o-animation-delay: 0.75s;
  animation-delay: 0.75s;
}
.uil-spin-css > div:nth-of-type(7) {
  -ms-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
  -moz-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
  -webkit-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
  -o-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
}
.uil-spin-css > div:nth-of-type(8) > div {
  -ms-animation: uil-spin-css 1s linear infinite;
  -moz-animation: uil-spin-css 1s linear infinite;
  -webkit-animation: uil-spin-css 1s linear infinite;
  -o-animation: uil-spin-css 1s linear infinite;
  animation: uil-spin-css 1s linear infinite;
  -ms-animation-delay: 0.87s;
  -moz-animation-delay: 0.87s;
  -webkit-animation-delay: 0.87s;
  -o-animation-delay: 0.87s;
  animation-delay: 0.87s;
}
.uil-spin-css > div:nth-of-type(8) {
  -ms-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
  -moz-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
  -webkit-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
  -o-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
}