/**
 * This applies a css animation for browsers with no JS enabled.
 */

 .no-bgtfw,
 .wf-loading {
	#boldgrid-sticky-wrap,
	#colophon {
		opacity: 1;
	}
}
.bgtfw-preload-fadein {
	body:not( .customize-partial-edit-shortcuts-shown ) {
		#boldgrid-sticky-wrap,
		#colophon {
			opacity: 0;
		}
	}
	&.bgtfw-loaded.wf-active,
		&.bgtfw-loaded.wf-inactive {
			#boldgrid-sticky-wrap,
			#colophon {
				-webkit-animation: fadein 1s linear forwards;
				-moz-animation: fadein 1s linear forwards;
				-ms-animation: fadein 1s linear forwards;
				-o-animation: fadein 1s linear forwards;
				animation: fadein 1s linear forwards;
			}
		}
}

.bgtfw-preload {
	body:not( .customize-partial-edit-shortcuts-shown ) {
		#boldgrid-sticky-wrap,
		#colophon {
			opacity: 0;
		}
	}
	&.bgtfw-loaded.wf-active,
		&.bgtfw-loaded.wf-inactive {
			#boldgrid-sticky-wrap,
			#colophon {
				opacity: 1;
			}
		}
}

 @keyframes fadein {
	 0% {
		 opacity: 0;
	 }
	 50% {
		 opacity: 0.5;
	 }
	 100% {
		 opacity: 1;
	 }
 }

 /* Firefox < 16 */
 @-moz-keyframes fadein {
	 0% {
		 opacity: 0;
	 }
	 50% {
		 opacity: 0.5;
	 }
	 100% {
		 opacity: 1;
	 }
 }

 /* Safari, Chrome and Opera > 12.1 */
 @-webkit-keyframes fadein {
	 0% {
		 opacity: 0;
	 }
	 50% {
		 opacity: 0.5;
	 }
	 100% {
		 opacity: 1;
	 }
 }

 /* Internet Explorer */
 @-ms-keyframes fadein {
	 0% {
		 opacity: 0;
	 }
	 50% {
		 opacity: 0.5;
	 }
	 100% {
		 opacity: 1;
	 }
 }

 /* Opera < 12.1 */
 @-o-keyframes fadein {
	 0% {
		 opacity: 0;
	 }
	 50% {
		 opacity: 0.5;
	 }
	 100% {
		 opacity: 1;
	 }
 }