.head-bg { background: none !important; border: none !important; }
.bs-docs-footer { bottom: 0; position: fixed; width: 100%; }
.bs-demo-dropdowns { margin-top: -113px; position: fixed; top: 50%; width: 100%; z-index: 1000; }
.dropdown-inline { display: inline-block; position: relative; }
@media (max-width: 991px) {
.bs-docs-footer { position: static; }
.bs-demo-dropdowns { margin-top: 0; padding-bottom: 15px; padding-top: 80px; position: static; }
}
@keyframes fadeInDownNew { 0% {
 opacity: 0;
 transform: translate3d(0px, -20px, 0px);
}
100% {
 opacity: 1;
 transform: none;
}
}
.fadeInDownNew { animation-name: fadeInDownNew; }
@keyframes fadeInLeftNew { 0% {
 opacity: 0;
 transform: translate3d(-20px, 0px, 0px);
}
100% {
 opacity: 1;
 transform: none;
}
}
.fadeInLeftNew { animation-name: fadeInLeftNew; }
@keyframes fadeInRightNew { 0% {
 opacity: 0;
 transform: translate3d(20px, 0px, 0px);
}
100% {
 opacity: 1;
 transform: none;
}
}
.fadeInRightNew { animation-name: fadeInRightNew; }
@keyframes fadeInUpNew { 0% {
 opacity: 0;
 transform: translate3d(0px, 20px, 0px);
}
100% {
 opacity: 1;
 transform: none;
}
}
.fadeInUpNew { animation-name: fadeInUpNew; }
/*Animation*/

a { color: #95a5a6; text-decoration: none; outline: none; }
a:hover, a:focus { color: #f90; text-decoration:none }
.codrops-header { margin: 0 auto; padding: 2em; text-align: center; }
.codrops-header h1 { margin: 0; font-weight: 300; font-size: 2.5em; }
.codrops-header h1 span { display: block; padding: 0 0 0.6em 0.1em; font-size: 0.6em; opacity: 0.7; }
/* To Navigation Style */
.codrops-top { width: 100%; text-transform: uppercase; font-weight: 700; font-size: 0.69em; line-height: 2.2; }
.codrops-top a { display: inline-block; padding: 0 1em; text-decoration: none; letter-spacing: 1px; }
.codrops-top span.right { float: right; }
.codrops-top span.right a { display: block; float: left; }
.codrops-icon:before { margin: 0 4px; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; font-family: 'codropsicons'; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; }
.codrops-icon-drop:before { content: "\e001"; }
.codrops-icon-prev:before { content: "\e004"; }
section { padding: 0px 0px;}
section h2 { font-weight: 300; font-size: 2em; padding: 10px 0; }
.codrops-header + section { padding-top: 1.5em; }
.related p { font-size: 1.5em; }
.related > a { background: rgba(0,0,0,0.05); display: inline-block; text-align: center; margin: 20px 10px; padding: 25px; -webkit-transition: color 0.3s, background-color 0.3s; transition: color 0.3s, background-color 0.3s; }
.related a:hover { background-color: rgba(0,0,0,0.4); }
.related a img { max-width: 100%; opacity: 0.8; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
.related a:hover img, .related a:active img { opacity: 1; }
.related a h3 { margin: 0; padding: 0.5em 0 0.3em; max-width: 300px; text-align: left; }
 @media screen and (max-width: 25em) {
.codrops-icon span { display: none; }
}