Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="ct-content">

  <div class="ct-inner">

    <div class="ct-main ct-main-archive" role="main">

      <div class="ct-archive">


        <h1>Playground</h1>


        <div class="ct-cat-desc">
          <p>In this category you will find experiments, plugins and articles related to web development and programming. Here we present some new ideas and inspiration for solving problems and tackling challenges around web development.</p>

        </div>


        <div class="ct-archive-container">


          <div class="ct-row">

            <article id="post-33246" class="ct-box post-33246 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-3d tag-animation tag-particles tag-threejs tag-webgl">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/12/12/3d-particle-explorations/" class="">
																						3D Particle Explorations																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/jackrugile/">Jack Rugile</a> on
                  <time pubdate="pubdate" class="">December 12, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/12/12/3d-particle-explorations/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/12/3dparticleexplorations-105x105.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="3dparticleexplorations">                    </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  An inspirational set of demos that explores particle animations in 3D space with three.js. This type of animations could be very suitable for page loaders. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>


            <article id="post-33272" class="ct-box post-33272 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-animation tag-gsap tag-stroke tag-svg">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/12/05/creative-svg-strokes-animation/" class="">
																						Creative SVG Strokes Animation																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/alaric/">Alaric Baraou</a> on
                  <time pubdate="pubdate" class="">December 5, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/12/05/creative-svg-strokes-animation/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/12/AnimatedStrokes-105x105.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="AnimatedStrokes"> </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  A creative strokes animation of a bike illustration powered by SVG and GSAP. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>

          </div>


          <div class="ct-row">

            <article id="post-33168" class="ct-box post-33168 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-animation tag-background tag-webgl">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/11/28/decorative-webgl-backgrounds/" class="">
																						Decorative WebGL Backgrounds																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/louis/">Louis Hoebregts</a> on
                  <time pubdate="pubdate" class="">November 28, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/11/28/decorative-webgl-backgrounds/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/11/DecorativeWebGLBackgrounds_Featured-105x105.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="DecorativeWebGLBackgrounds_Featured">                    </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  A collection of decorative shapes displayed as backgrounds using WebGL. The shapes are created with Three.js and animated with the TweenMax library. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>


            <article id="post-33037" class="ct-box post-33037 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-animation tag-frame tag-morphing tag-slideshow">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/11/15/animated-svg-frame-slideshow/" class="">
																						Animated SVG Frame Slideshow																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/crnacura/">Mary Lou</a> on
                  <time pubdate="pubdate" class="">November 15, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/11/15/animated-svg-frame-slideshow/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/11/AnimatedFrameSlideshow_Featured-105x105.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="AnimatedFrameSlideshow_Featured">                    </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  An experimental slideshow that shows an animated SVG frame when transitioning between slides. Different shapes can be used for creating a variety of styles. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>

          </div>


          <div class="ct-row">

            <article id="post-32944" class="ct-box post-32944 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-animation tag-grid tag-layout tag-thumbnail">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/11/08/expanding-grid-item-animation/" class="">
																						Expanding Grid Item Animation																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/crnacura/">Mary Lou</a> on
                  <time pubdate="pubdate" class="">November 8, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/11/08/expanding-grid-item-animation/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/11/expandinggrid_featured-105x105.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="expandinggrid_featured">                    </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  A grid item animation where the thumbnail scales up when the details view is opened. Based on the Dribbble shot "Surf Project" by Filip Slováček. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>


            <article id="post-32648" class="ct-box post-32648 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-animation tag-preloader">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/10/31/star-wars-kylo-ren-x-pure-css-animation/" class="">
																						Kylo Ren CSS Page Preloader																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/r4ms3scz/">Petr Urbánek</a> on
                  <time pubdate="pubdate" class="">October 31, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/10/31/star-wars-kylo-ren-x-pure-css-animation/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/10/KyloRenFeatured-105x105.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="KyloRenFeatured"> </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  A Star Wars Kylo Ren page preloader made with HTML and CSS only. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>

          </div>


          <div class="ct-row">

            <article id="post-32699" class="ct-box post-32699 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-menu tag-organic tag-overlay tag-svg">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/10/17/dynamic-shape-overlays-with-svg/" class="">
																						Dynamic Shape Overlays with SVG																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/yoichi/">Yoichi Kobayashi</a> on
                  <time pubdate="pubdate" class="">October 17, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/10/17/dynamic-shape-overlays-with-svg/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/10/ShapeOverlays-105x105.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="ShapeOverlays"> </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>


            <article id="post-32454" class="ct-box post-32454 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-displacement-map tag-distortion tag-image tag-slideshow tag-webgl">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/" class="">
																						Liquid Distortion Effects																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/neundex/">Yannis Yannakopoulos</a> on
                  <time pubdate="pubdate" class="">October 10, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/10/LiquidDistortion_Featured-105x105.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="LiquidDistortion_Featured">                    </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>

          </div>


          <div class="ct-row">

            <article id="post-32361" class="ct-box post-32361 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-clip-path tag-layout tag-slice tag-slideshow">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/09/28/sliced-dual-image-layout/" class="">
																						Sliced Dual Image Layout																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/crnacura/">Mary Lou</a> on
                  <time pubdate="pubdate" class="">September 28, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/09/28/sliced-dual-image-layout/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/09/DualSlicesLayout-105x105.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="DualSlicesLayout"> </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  Some layouts with sliced background images, slideshow functionality and glitch effect. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>


            <article id="post-32314" class="ct-box post-32314 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-hover tag-morph tag-organic tag-svg">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/09/19/organic-shape-morph-ideas/" class="">
																						Organic SVG Shape Morph Ideas																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/crnacura/">Mary Lou</a> on
                  <time pubdate="pubdate" class="">September 19, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/09/19/organic-shape-morph-ideas/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/09/OrganicShapeMorphIdeas-105x105.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="OrganicShapeMorphIdeas">                    </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  A small set of ideas for organic shape effects. The demos show some ways to use animated SVG morphs interactively on a website, including a menu hover and a content ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>

          </div>


          <div class="ct-row">

            <article id="post-31976" class="ct-box post-31976 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-animation tag-morph tag-page-transition tag-svg">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/08/08/morphing-page-transition/" class="">
																						Morphing Page Transition																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/crnacura/">Mary Lou</a> on
                  <time pubdate="pubdate" class="">August 8, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/08/08/morphing-page-transition/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/08/MorphingPageTransition_Featured-105x105.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="MorphingPageTransition_Featured">                    </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>


            <article id="post-31887" class="ct-box post-31887 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-animation tag-effect tag-hover tag-letter tag-link tag-menu">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/08/01/inspiration-for-menu-hover-effects/" class="">
																						Inspiration for Menu Hover Effects																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/crnacura/">Mary Lou</a> on
                  <time pubdate="pubdate" class="">August 1, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/08/01/inspiration-for-menu-hover-effects/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/08/MenuStyles_Featured-105x105.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="MenuStyles_Featured"> </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  Some menu link hover effects for your inspiration. Powered by CSS and JavaScript for individual letter animations. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>

          </div>


          <div class="ct-row">

            <article id="post-31849" class="ct-box post-31849 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-animation tag-effect tag-fragment tag-image tag-pieces">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/07/26/animated-image-pieces/" class="">
																						Animated Image Pieces																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/crnacura/">Mary Lou</a> on
                  <time pubdate="pubdate" class="">July 26, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/07/26/animated-image-pieces/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/07/AnimatedImagePieces_Featured-105x105.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="AnimatedImagePieces_Featured">                    </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  A set of experiments with an animated image pieces effect where an image gets shattered into rectangular fragments. Powered by anime.js. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>


            <article id="post-31774" class="ct-box post-31774 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-animation tag-css-grid tag-mix-blend-mode tag-parallax tag-reveal tag-slideshow">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/07/19/css-grid-layout-slideshow/" class="">
																						CSS Grid Layout Slideshow																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/crnacura/">Mary Lou</a> on
                  <time pubdate="pubdate" class="">July 19, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/07/19/css-grid-layout-slideshow/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/07/GridLayoutSlideshow_Featured-105x105.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="GridLayoutSlideshow_Featured">                    </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  A slideshow where each slide has an individual CSS grid layout and a reveal effect when navigating. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>

          </div>


          <div class="ct-row">

            <article id="post-31646" class="ct-box post-31646 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-grid tag-hover tag-letter tag-typography">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/07/05/letter-effects-and-interaction-ideas-part-2/" class="">
																						Letter Effects and Interaction Ideas (Part 2)																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/crnacura/">Mary Lou</a> on
                  <time pubdate="pubdate" class="">July 5, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/07/05/letter-effects-and-interaction-ideas-part-2/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/07/LetterInteractions2_Featured-105x105.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="LetterInteractions2_Featured">                    </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  A new set of letter effects and animations for playful typography interactions. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>


            <article id="post-31563" class="ct-box post-31563 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-animation tag-clippath tag-hover tag-morphing">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/06/28/organic-shape-animations-with-svg-clippath/" class="">
																						Organic Shape Animations with SVG clipPath																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/crnacura/">Mary Lou</a> on
                  <time pubdate="pubdate" class="">June 28, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/06/28/organic-shape-animations-with-svg-clippath/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/06/OrganicShapeAnimations_Featured-105x105.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="OrganicShapeAnimations_Featured">                    </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  Some shape morphing hover effects on images using SVG clipPath. The idea is to create an organic, fluid feel by animating several elements on hover. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>

          </div>


          <div class="ct-row">

            <article id="post-31349" class="ct-box post-31349 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-animation tag-effect tag-hover tag-typography">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/06/07/some-letter-effects-and-interaction-ideas/" class="">
																						Letter Effects and Interaction Ideas																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/crnacura/">Mary Lou</a> on
                  <time pubdate="pubdate" class="">June 7, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/06/07/some-letter-effects-and-interaction-ideas/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/06/LetterInteractions_Featured-105x105.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="LetterInteractions_Featured">                    </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  A couple of ideas for typography animations and letter (hover) effects for playful interactions. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>


            <article id="post-31283" class="ct-box post-31283 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-animation tag-morphing tag-tooltip">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/05/31/playful-little-tooltip-ideas/" class="">
																						Playful Little Tooltip Ideas																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/crnacura/">Mary Lou</a> on
                  <time pubdate="pubdate" class="">May 31, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/05/31/playful-little-tooltip-ideas/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/05/TooltipAnimations-105x105.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="TooltipAnimations"> </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  Some little ideas for bouncy and playful tooltip shapes and animations with SVG and anime.js. Among other styles, we use shape morphing and transform. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>

          </div>


          <div class="ct-row">

            <article id="post-31190" class="ct-box post-31190 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-animation tag-morphing tag-scroll">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/05/23/on-scroll-morphing-background-shapes/" class="">
																						On-Scroll Morphing Background Shapes																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/crnacura/">Mary Lou</a> on
                  <time pubdate="pubdate" class="">May 23, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/05/23/on-scroll-morphing-background-shapes/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/05/MorphingBackgroundShapes_Featured-105x105.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="MorphingBackgroundShapes_Featured">                    </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  A decorative website background effect where SVG shapes are morphing and transforming on scroll. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>


            <article id="post-31094" class="ct-box post-31094 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-animation tag-folder tag-hover tag-interaction tag-preview">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/05/17/folder-preview-ideas/" class="">
																						Folder Preview Ideas																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/crnacura/">Mary Lou</a> on
                  <time pubdate="pubdate" class="">May 17, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/05/17/folder-preview-ideas/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/05/FolderPreviewIdeas_Featured-105x105.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="FolderPreviewIdeas_Featured">                    </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  Some ideas for previewing or just playing with folders on hover. The idea is to show a little animation when hovering a folder icon and reveal some kind of preview f ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>

          </div>


          <div class="ct-row">

            <article id="post-30954" class="ct-box post-30954 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-background tag-threejs tag-tube tag-tunnel tag-webgl">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/05/09/infinite-tubes-with-three-js/" class="">
																						Infinite Tubes with Three.js																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/louis/">Louis Hoebregts</a> on
                  <time pubdate="pubdate" class="">May 9, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/05/09/infinite-tubes-with-three-js/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/05/InfiniteTubesWithThreeJS_Featured-105x105.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="InfiniteTubesWithThreeJS_Featured">                    </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  Some WebGL experiments where the viewer seemingly travels through a textured tunnel. Powered by Three.js and inspired by the effect seen on fornasetti.com. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>


            <article id="post-30761" class="ct-box post-30761 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-background tag-effect tag-scroll tag-webgl">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/04/26/webgl-scroll-spiral/" class="">
																						WebGL Scroll Spiral																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/xoihazard/">Xoihazard</a> on
                  <time pubdate="pubdate" class="">April 26, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/04/26/webgl-scroll-spiral/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/04/WebGLScrollSpiral_800x600-105x105.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="WebGLScrollSpiral_800x600">                    </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  A couple of decorative and inspirational WebGL background scroll effects for websites powered by regl. The idea is to twist some images and hexagonal grid patterns o ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>

          </div>


          <div class="ct-row">

            <article id="post-30725" class="ct-box post-30725 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-animation tag-concept tag-designer tag-developer tag-effect tag-image tag-layout tag-portfolio">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/04/18/developerdesigner-page-layout-concept/" class="">
																						Developer/Designer Page Layout Concept																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/crnacura/">Mary Lou</a> on
                  <time pubdate="pubdate" class="">April 18, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/04/18/developerdesigner-page-layout-concept/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/04/DeveloperDesignerPageLayout_800x600-105x105.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="DeveloperDesignerPageLayout_800x600">                    </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  An experimental page layout concept with a developer/designer theme and a special image reveal effect. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>


            <article id="post-30656" class="ct-box post-30656 post type-post status-publish format-standard has-post-thumbnail hentry category-playground tag-animation tag-effect tag-grid tag-loading">
              <div class="ct-box-inner">
                <h3>
										<a href="https://tympanus.net/codrops/2017/04/11/inspiration-for-grid-loading-animations/" class="">
																						Inspiration for Grid Loading Animations																					</a>
									</h3>

                <p class="ct-subline">

                  By <a href="https://tympanus.net/codrops/author/crnacura/">Mary Lou</a> on
                  <time pubdate="pubdate" class="">April 11, 2017</time>

                </p>
                <!--//ct-subline-->

                <div class="ct-latest-thumb">
                  <a href="https://tympanus.net/codrops/2017/04/11/inspiration-for-grid-loading-animations/" class="ct-trans">
                    <img width="105" height="105" src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2017/04/GridLoadingAnimations_Featured-105x105.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="GridLoadingAnimations_Featured">                    </a>
                </div>
                <!-- //ct-latest-thumb-->

                <p class="ct-feat-excerpt">
                  A set of grid loading animations for your inspiration. The idea is to show grid items with an interesting effect once they are loaded. ...
                </p>
                <!--//ct-feat-excerpt-->


                <div class="clr"></div>
              </div>
            </article>

          </div>


        </div>
        <!--//ct-archive-container-->

        
        <!--//postnav-->


        <div class="clr"></div>

      </div>
      <!--//ct-archive-->

    </div>
    <!--//ct-main-->

    


    <div class="clr"></div>

  </div>
  <!--//ct-inner-->

</div>
              
            
!

CSS

              
                @font-face {
  font-weight: normal;
  font-style: normal;
  font-family: "codrops-social";
  src: url("../fonts/codrops-social.eot");
  src: url("../fonts/codrops-social.eot?#iefix") format("embedded-opentype"),
    url("../fonts/codrops-social.woff") format("woff"),
    url("../fonts/codrops-social.ttf") format("truetype"),
    url("../fonts/codrops-social.svg#codrops-social") format("svg");
}

@font-face {
  font-weight: normal;
  font-style: normal;
  font-family: "codrops-icons";
  src: url("../fonts/codrops-icons.eot");
  src: url("../fonts/codrops-icons.eot?#iefix") format("embedded-opentype"),
    url("../fonts/codrops-icons.woff") format("woff"),
    url("../fonts/codrops-icons.ttf") format("truetype"),
    url("../fonts/codrops-icons.svg#codrops-icons") format("svg");
}

@font-face {
  font-family: "browsericons";
  src: url("../fonts/browsericons.eot?p1p23f");
  src: url("../fonts/browsericons.eot?#iefixp1p23f") format("embedded-opentype"),
    url("../fonts/browsericons.woff?p1p23f") format("woff"),
    url("../fonts/browsericons.ttf?p1p23f") format("truetype"),
    url("../fonts/browsericons.svg?p1p23f#browsericons") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */

.ct-cf:before,
.ct-cf:after {
  content: " ";
  display: table;
}

.ct-cf:after {
  clear: both;
}

.ct-cf {
  *zoom: 1;
}
/* Normalize */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
figure {
  margin: 0;
  padding: 0;
}

.ct-post iframe {
  border: none;
}

.cp_embed_iframe {
  margin: 20px 0 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ul {
  list-style: none;
}

table {
  border-spacing: 0;
  border-collapse: separate;
}

caption,
th,
td {
  text-align: left;
  font-weight: normal;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}

blockquote,
q {
  quotes: "" "";
}

sup {
  vertical-align: super;
  font-size: smaller;
}

code {
  color: #657580;
  font-weight: inherit;
  font-family: "Consolas", "Courier New", Courier, monospace;
  line-height: 1;
  -webkit-font-smoothing: auto;
}

.ct-post-content h4 code {
  font-style: normal;
}

.ct-post-content h3 code {
  color: rgba(0, 0, 0, 0.3);
  font-weight: inherit;
  font-family: inherit;
}

a img {
  border: none;
}

strong {
  font-weight: 700;
}

/* Codrops Main Style */
body {
  overflow-x: hidden;
  overflow-y: scroll;
  background: #f1f4f9;
  color: #414a51;
  font-weight: 400;
  font-size: 16px;
  font-family: "proxima-nova", "Proxima Nova", "Helvetica Neue", Helvetica,
    Arial, sans-serif;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ct-box-pagination a,
.ct-box-pagination span,
.ct-deals article p em {
  text-transform: uppercase;
  font-weight: bold;
  font-style: normal;
  letter-spacing: 1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "brandon-grotesque", "Brandon Grotesque", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  line-height: 1.1;
}

h4 {
  font-size: 1.25em;
  padding: 0px 0px 1em 0px;
}

.ct-post-content h2,
.ct-post-content h3,
.ct-post-content h4 {
  line-height: 1.2;
  font-style: normal;
  border: none;
  text-shadow: none;
  font-size: 2em;
  margin: 1em 0 0.25em;
  padding: 0.25em 0;
}

.ct-post-content h2 + pre,
.ct-post-content h2 + .codrops-playground-embed {
  margin-top: 25px;
}

.ct-post-content h2 {
  border-bottom: 5px solid #f1f4f9;
}

.ct-post-content h3 {
  font-size: 1.5em;
}

.ct-post-content h4 {
  font-size: 1.25em;
}

.ct-post-content h5 {
  font-size: 1.05em;
  margin: 2em 0 0.25em;
  padding: 0.25em 0;
}

.ct-post h2 code,
.ct-post h3 code {
  text-transform: none;
  color: #657580;
  font-family: "Consolas", "Courier New", Courier, monospace; //change this!
  font-weight: bold;
  letter-spacing: 0px;
  white-space: nowrap;
  font-size: 0.75em; //add this
}

.ct-post p > code {
  white-space: no-wrap;
}

a {
  outline: none;
  color: #647993;
  text-decoration: none;
  font-weight: inherit;
}

.ct-post a,
a code {
  color: #237dac;
}

a:hover,
a:focus,
a:hover code,
a:focus code,
.ct-post a:hover,
.ct-post a:focus {
  color: #2d3e4a;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  outline: none;
  color: #4e5e6a;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

a:hover img {
  opacity: 0.9;
}

.bsap a:hover img {
  opacity: 1;
}

.clr {
  float: none;
  clear: both;
}

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.cf {
  *zoom: 1;
}

hr {
  border-style: solid;
  border-color: #e7eaf0;
}

dl.tab-dl {
  background: rgb(227, 242, 221);
  padding: 1.5em 1.5em 0.5em 1.5em;
  margin: 1em 0 2em;
}

dl.tab-dl dt {
  font-weight: bold;
}

dl.tab-dl dd {
  margin-bottom: 1em;
}

.box-offer {
  padding: 2em 2em 1.5em 2em;
  background: #e4e3f2;
  margin: 1em 0;
}

.box-offer h4 {
  padding: 0;
  margin: 0 0 0.5em 0;
}

.box-attention {
  margin: 0.5em 0;
  padding: 1.5em;
  background: #fbe1e8;
}

.ct-featured-img-rss {
  display: none;
}

.ct-post-featured-img {
  padding: 0.75em 0;
}

.ct-post-content ul.browser-support {
  padding-left: 1em;
  height: 1em;
  display: inline-block;
  list-style-type: none;
  box-sizing: border-box;
  margin-bottom: 30px;
  vertical-align: middle;
}

ul.browser-support li,
.ct-post-content ul.browser-support li {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin: 0 20px 0 0;
  position: relative;
  box-sizing: border-box;
}

ul.browser-support li .bs-browser {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  top: 0;
  height: 0;
}

ul.browser-support li .bs-info {
  position: absolute;
  color: #f0f0f0;
  font-weight: bold;
  font-size: 10px;
  background: #414a51;
  padding: 5px;
  line-height: 1;
  white-space: nowrap;
  top: 100%;
  margin-top: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center;
  box-sizing: border-box;
  display: none;
}

ul.browser-support li .bs-info::before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-bottom-color: #414a51;
  border-width: 5px;
  margin-left: -5px;
}

ul.browser-support li:hover .bs-info {
  display: block;
}

ul.browser-support li::before {
  font-family: "browsericons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 26px;
  position: absolute;
  left: 0;
  top: 0;
  color: #ebae9f;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul.browser-support li.bs-supported::before {
  color: #bad8b0;
}

ul.browser-support li.bs-supported-flag::before {
  color: #f4daa2;
}

.bs-chrome:before {
  content: "\eae5";
}

.bs-firefox:before {
  content: "\eae6";
}

.bs-ie:before {
  content: "\eae7";
}

.bs-opera:before {
  content: "\eae8";
}

.bs-safari:before {
  content: "\eae9";
}

ul.browser-support li::after {
  content: attr(data-version);
  position: absolute;
  font-size: 10px;
  color: #bad8b0;
  top: 0;
  font-family: inherit;
  font-weight: bold;
  left: 100%;
}

.ct-talign-right {
  text-align: right;
}

.ct-padded {
  padding: 1em;
}

.codrops-playground-embed {
  margin: 10px 0;
}

.ct-post-content figure {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 2em auto;
  padding: 2em;
  max-width: 100%;
  width: 100% !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.ct-post-content figcaption {
  padding: 1em 0;
  color: #697581;
  text-align: center;
  font-weight: bold;
  font-style: italic;
  font-size: 86%;
  line-height: 1.4;
}

.spacer {
  height: 40px;
}

.ct-last {
  margin-right: 0px !important;
}

.ct-post-content p.wp-caption-text {
  margin-bottom: 20px;
  padding: 10px;
  font-style: italic;
  font-size: 13px;
  line-height: 20px;
}

.ct-post a img.nofancy,
.ct-post img.nofancy {
  border: none;
}

.aligncenter {
  margin: 0 auto;
}

.fleft {
  float: left !important;
}

.fright {
  float: right !important;
}

.ct-amp,
.ct-coll-item a.ct-coll-thumb span i {
  font-weight: 100;
  font-style: italic;
  font-family: "Baskerville", "Goudy Old Style", Palatino, "Book Antiqua", serif;
}

.ct-post-img-box {
  padding-top: 20px;
  min-height: 250px;
}

.ct-post-img-box a img {
  margin-top: 20px;
}

.ct-post-content .ct-post-img-box h4 {
  padding-top: 0px;
}

.ct-post-thumbleft {
  clear: both;
}

.ct-post-thumbleft p {
  padding: 0;
}

.ct-post-thumbleft p.ct-post-thumb {
  margin-right: 40px;
}

.ct-post-thumbleft .ct-post-thumb img {
  margin: 0;
}

.button,
.ct-post p.ct-tags a,
.buttonbig,
input[type="submit"],
.fm-form input[type="submit"] {
  display: inline-block;
  padding: 8px 20px;
  border: none;
  color: #fff;
  text-decoration: none;
  text-shadow: none;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  font-family: "proxima-nova", "Proxima Nova", "Helvetica Neue", Helvetica,
    Arial, sans-serif;
}

.ct-post p.ct-tags a {
  background: #fff;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}

.ct-post p.ct-tags a:hover {
  background: #30abd5;
  color: #fff;
}

.ct-post p.ct-tags a:active {
  background: #056495;
}

.buttonbig.action,
input[type="submit"] {
  background: #f78297;
  color: #fff;
}

.buttonbig.action:hover,
input[type="submit"]:hover {
  background: #f56c7e;
  color: #fff;
}

.buttonbig.action:active,
input[type="submit"]:active {
  background: #f78297;
  color: #fff;
}

.ct-latest-bottom a,
.ct-latest-any-bottom a,
.ct-archive-link a,
.ct-feat-bottom a,
a.ct-commenttime,
.ct-commentreply a,
.ct-commentedit a {
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 0.7em;
  font-weight: bold;
}

.ct-latest-bottom a::after,
.ct-latest-any-bottom a::after,
.ct-archive-link a::after,
.ct-feat-bottom a::after {
  font-family: "codrops-icons";
  content: "\e604";
  padding-left: 0.5em;
}

.ct-post {
  position: relative;
}

.ct-h-border {
  background: transparent url(../images/line.png) repeat-x bottom left;
}

.ct-letterpress {
  margin-left: 10px;
  padding: 10px 0px;
  color: #b2c8db;
}

.ct-index .ct-letterpress,
.ct-main-post .ct-letterpress {
  margin: 0px;
}

.ct-container {
  position: relative;
  width: 100%;
}

.ct-inner {
  position: relative;
  margin: 0 auto;
  padding: 0px 20px;
  max-width: 1360px;
}

.ct-header {
  position: relative;
  z-index: 999;
  padding: 30px 0;
  background: #0099cc;
}

.ct-branding {
  float: left;
  width: 187px;
}

.ct-branding a.ct-logo {
  display: block;
  width: 187px;
  height: 62px;
  outline: none;
  background: transparent url(../images/cs.png) no-repeat 0px 0px;
  text-indent: -9000px;
}

.ct-branding a.ct-logo:hover {
  opacity: 0.9;
}





.ct-header-items-right {
  float: right;
  width: 320px;
}

.ct-content {
  margin: 0 auto;
}

.ct-footer {
  position: relative;
  bottom: 0px;
  padding: 40px 0;
  width: 100%;
  background: #30abd5;
}

.ct-footer .ct-inner {
  overflow: hidden;
  margin: 0 auto;
  padding: 0 20px;
}

.ct-footer nav {
  float: left;
  width: 600px;
  padding-left: 29px;
  box-sizing: border-box;
}

.ct-footer ul {
  float: left;
  width: 25%;
}

.ct-footer ul li {
  display: block;
  line-height: 25px;
}

.ct-footer ul li a {
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  font-weight: bold;
}

.ct-footer ul li a:hover {
  color: #056495;
}

.ct-items {
  float: right;
  width: 600px;
  text-align: left;
}

.ct-item {
  float: right;
  clear: none;
  margin: 30px 0 0 0;
}

.ct-item span {
  color: #237dac;
  font-size: 13px;
}

.ct-item a {
  display: block;
  outline: none;
  text-indent: -9000px;
}

.ct-copyright {
  margin-right: 0px;
  width: 155px;
  height: 72px;
}

.ct-copyright a {
  margin-top: 5px;
  width: 145px;
  height: 36px;
  background: transparent url(../images/cs.png) no-repeat 0 -456px;
}

.ct-copyright a:hover,
.ct-copyright a:active,
.ct-copyright a:focus {
  background-position: 0 -492px;
}

.ct-cdn {
  width: 193px;
}

.ct-cdn a {
  margin-top: 12px;
  width: 106px;
  height: 18px;
  background: transparent url(../images/cs.png) no-repeat 0 -588px;
}

.ct-cdn a:hover,
.ct-cdn a:active,
.ct-cdn a:focus {
  background-position: 0px -613px;
}



.ct-main {
  min-height: 2600px;
  width: auto;
}

.ct-index .ct-main {
  min-height: 2140px;
  background: #fff;
}

.ct-main-coll-archive {
  min-height: 2480px;
}

.ct-main-post {
  min-height: 2300px;
}

/* Main featured article and featured styles */

.ct-featured {
  clear: both;
  min-height: 0px;
  border-bottom: 20px solid #f1f4f9;
  box-sizing: border-box;
}

.ct-featured article {
  clear: both;
  background-color: #fff;
  box-sizing: border-box;
}

.ct-featured article > div {
  box-sizing: border-box;
}

.ct-feat-img {
  display: block;
  float: left;
  width: 100%;
}

.ct-feat-img img {
  display: block;
  float: right;
  border: none;
  width: 100%;
}

.ct-feat-img:hover img,
.ct-latest-thumb a:hover {
  border-color: #98bcdc;
}

.ct-feat-left {
  float: left;
  width: 40%;
  text-align: right;
}

.ct-feat-right {
  float: right;
  width: 60%;
}

.ct-feat-bottom {
  padding: 0.85em 0;
}

.ct-feat-inner {
  padding: 29px;
}

.ct-feat-inner header {
  padding: 1.5em 0 1em;
}

.ct-feat-left .ct-feat-inner {
  padding-right: 0px;
  padding-left: 40px;
}

.ct-featured h2 a {
  font-size: 1.55em;
}

article .ct-subline {
  padding: 0 0 0.5em 45px;
  color: #9da8b0;
  font-size: 0.925em;
  position: relative;
  font-weight: bold;
}

article .ct-subline--giveaway {
  padding-left: 0;
}

.ct-featured .ct-subline {
  padding: 1em 0;
}

.ct-subline__author {
  display: block;
  font-size: 1.05em;
  padding: 0 0 0.2em 0;
}

.ct-subline__time {
  font-size: 0.75em;
}

article .ct-subline .avatar {
  position: absolute;
  left: 0;
  border-radius: 50%;
  margin: 0;
}

article .ct-subline .ct-subline__pubtime {
  margin: 0;
}

article .ct-subline .ct-subline__pubtime::after {
  content: " \00B7";
}

article .ct-subline a {
  white-space: nowrap;
}

.ct-small-text {
  font-size: 0.825em;
  color: #888;
}

/* Latest post styles */

.ct-latest .ct-subline {
  font-size: 0.85em;
  padding: 0.5em 0 0;
}

.ct-latest-thumb {
  float: left;
  position: relative;
  z-index: 10;
  margin: 0 20px 10px 0;
}

.ct-latest-thumb a {
  display: block;
  width: 105px;
  height: 105px;
  background: #237dac url(../images/thumb_small.png) no-repeat center center;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  background-size: 100%;
}

.ct-latest-thumb a img {
  display: block;
  width: 105px;
  height: 105px;
}

.index-wrap {
  padding: 29px 0;
  box-sizing: border-box;
}

.index-wrap-left {
  width: 38%;
  padding-left: 29px;
  float: right;
  box-sizing: border-box;
}

.index-wrap-right {
  width: 62%;
  padding: 0 29px 0 29px;
  float: right;
  box-sizing: border-box;
}

.ct-latest .ct-section-heading-small {
  border-bottom: 3px solid #f1f4f9;
  display: block;
  margin: 0 0 1.5em 0;
  padding: 0 0 0.5em;
  color: rgb(160, 173, 182);
}

.ct-feat-excerpt {
  line-height: 1.5;
}

.ct-featured .ct-feat-excerpt {
  margin: 0;
  font-size: 1.05em;
}

.ct-subline time {
  margin: 0 2px;
  padding: 0px;
  white-space: nowrap;
}

.ct-subline time.ct-time-single {
  margin: 0;
  padding: 0 2px;
  border: none;
}

.ct-latest article {
  padding: 1em 0;
}

.ct-latest h3 {
  font-size: 1.55em;
}

/* Pagination Style */

#wp_page_numbers ul,
.ct-commentnav {
  padding: 20px 0px;
  color: #777;
  list-style: none;
  line-height: 25px;
}

.ct-commentnav {
  margin: 20px 38px 10px 38px;
  padding: 10px 0px;
  height: 25px;
}

#respond {
  padding: 5px 0 5px 5px;
}

.ct-commentlist {
  clear: both;
  overflow: hidden;
}

#wp_page_numbers {
  margin: 10px 10px 0px 10px;
}

#wp_page_numbers ul {
  width: 100%;
  height: 40px;
}

#wp_page_numbers li {
  display: block;
  float: left;
  margin: 2px;
}

#wp_page_numbers li.space {
  padding: 0 5px;
}

#wp_page_numbers a,
.ct-commentnav .page-numbers {
  display: block;
  float: left;
  width: 22px;
  height: 22px;
  outline: none;
  text-align: center;
  text-decoration: none;
  line-height: 22px;
}

.ct-commentnav .page-numbers {
  margin: 0 2px;
}

.ct-commentnav a.prev,
.ct-commentnav a.prev:hover,
.ct-commentnav a.next,
.ct-commentnav a.next:hover {
  margin: 0 5px;
  width: auto;
  background: transparent;
  box-shadow: none;
  color: #777;
  text-align: left;
  font-size: 12px;
}

.ct-commentnav a.prev:hover,
.ct-commentnav a.next:hover {
  color: #000;
}

#wp_page_numbers li.page_info {
  float: left;
  padding: 0px 15px 0px 25px;
  color: #777;
  font-size: 0.8em;
}

.ct-post article {
  padding: 50px 70px;
  background: #fff;
}

.ct-post article.type-page {
  margin-bottom: 20px;
}

.ct-post h1 {
  margin: 0 0 15px 0;
  padding: 15px 0;
  border-bottom: 1px solid whiteSmoke;
  font-size: 2.75em;
}

.ct-post article.page h1 {
  border: none;
}

.ct-post img {
  position: relative;
  display: block;
  margin: 10px auto;
  text-align: center;
}

.ct-post object {
  display: block;
  margin: 10px auto;
}

.ct-post img.alignleft {
  float: left;
  margin: 5px 20px 5px 0px;
  border: none;
}

.ct-post img.alignright {
  float: right;
  margin: 5px 0px 5px 20px;
  border: none;
}

.ct-post img.aligninline {
  display: inline;
  margin: 0 10px;
}

.ct-post .ct-ss {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  max-width: 580px;
}

.ct-post .ct-ss img {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0;
  margin: 0;
  padding: 0;
}

.ct-post .ct-ss img:first-child {
  position: relative;
}

.ct-post .ct-ss-3 img {
  -webkit-animation: ssfader 18s linear infinite 0s backwards;
  animation: ssfader 18s linear infinite 0s backwards;
}

.ct-post .ct-ss-3 img:nth-child(2) {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

.ct-post .ct-ss-3 img:nth-child(3) {
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
}

@-webkit-keyframes ssfader {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  17% {
    opacity: 1;
  }

  25% {
    opacity: 1;
    -webkit-transform: scale(1);
  }

  44% {
    opacity: 0;
    -webkit-transform: scale(1.3);
  }

  100% {
    opacity: 0;
  }
}

@keyframes ssfader {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  17% {
    opacity: 1;
  }

  25% {
    opacity: 1;
    transform: scale(1);
  }

  44% {
    opacity: 0;
    transform: scale(1.3);
  }

  100% {
    opacity: 0;
  }
}

.ct-demo-links {
  text-align: center;
  padding: 0.75em 0;
}

.ct-post a.demo,
.ct-post a.download,
a.ct-demo-link {
  position: relative;
  display: inline-block;
  margin: 0 0 25px 0px;
  padding: 15px 10px;
  width: 180px;
  background: #0099cc;
  color: #fff;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  font-weight: bold;
  line-height: 20px;
  cursor: pointer;
}

a.ct-demo-link {
  margin: 0 5px 25px;
}

.ct-post a.demo:hover,
.ct-post a.download:hover,
a.ct-demo-link:hover {
  color: #fff;
  background: #3da1d1;
}

.ct-post a.demo {
  left: 50%;
  margin-left: -207px;
}

.ct-post a.download {
  left: 50%;
  margin-left: 5px;
}

.ct-post-excerpt {
  clear: both;
  margin-bottom: 10px;
  padding-bottom: 20px;
  color: #a7aeb3;
  font-weight: bold;
}

.ct-cat-desc {
  clear: both;
  margin-bottom: 20px;
  padding: 0 12px;
  color: #a0a7ad;
  font-weight: bold;
  line-height: 1.4;
}

.ct-post-content ul,
.ct-post-content ol {
  clear: both;
  padding: 1em 0;
}

.ct-post-content,
.ct-page-content {
  font-size: 1.15em;
  line-height: 1.6;
}

.ct-post-content p {
  padding: 0.75em 0;
}

.ct-row-wrapper .ct-row {
  display: table-row;
  margin: 0;
}

.ct-row-wrapper .ct-row .ct-box {
  display: table-cell;
  margin: 0;
  width: 50%;
}

.ct-page-content {
  background: #fff;
}

.ct-page-content p {
  padding: 10px 0;
  text-align: justify;
}

.ct-page-content h2 {
  padding: 1.5em 0 0.5em 0;
}

.ct-page-content.ct-columns-2 h2 {
  overflow: hidden;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
  padding: 0.5em 0 0.5em 0;
}

.ct-page-content h4 {
  padding: 15px 0px 0px;
}

.ct-columns-2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
  -webkit-column-rule: none;
  -moz-column-rule: none;
  column-rule: none;
}

.ct-columns-inner .ct-columns-2 {
  padding-top: 30px;
}

.ct-columns-3 {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 10px;
  -moz-column-gap: 10px;
  column-gap: 10px;
  -webkit-column-rule: none;
  -moz-column-rule: none;
  column-rule: none;
}

.ct-columns-2 p,
.ct-columns-3 p {
  display: inline-block;
  padding: 10px 0px;
  width: 100%;
  -moz-column-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -o-column-break-inside: avoid;
  -ms-column-break-inside: avoid;
  column-break-inside: avoid;
}

.ct-post-content ul,
.ct-page-content ul {
  list-style: square;
  list-style-position: outside;
}

.ct-post-content ol,
.ct-page-content ol {
  padding: 10px 10px 10px 20px;
}

.ct-post-content ul li,
.ct-post-content ol li {
  margin-left: 2em;
  padding: 5px 0 5px 5px;
}

.ct-post-content li p {
  padding: 0px;
}

.googlead {
  clear: both;
  clear: both;
  overflow: hidden;
  margin: 20px 0px;
  text-align: center;
}

.ct-tags {
  margin: 15px 0 40px 0;
}

.ct-tags a {
  margin: 3px 2px;
}

.ct-row {
  clear: both;
  margin: 15px 0px;
}

.ct-row-bottom {
  margin-bottom: 0;
  padding-bottom: 20px;
}

.ct-box {
  margin: 10px;
  padding: 28px;
  background-color: #fff;
}

.ct-box h3 {
  line-height: 1.2;
  font-size: 1.25em;
  padding-bottom: 0.5em;
}

.ct-box p {
  line-height: 1.5;
}

.ct-yearly-archives .ct-box {
  margin: 10px;
  padding: 30px;
}

.ct-box-dark {
  border: 5px solid #fff;
  background: #e2f0f5;
}

.ct-box h4 {
  text-transform: none;
}

.ct-box .ct-small-text {
  display: block;
  clear: both;
  padding-bottom: 12px;
}

.ct-post .ct-box a img,
.ct-post .ct-box img {
  float: left;
  margin: 0px 15px 5px 0px;
}

.ct-author-info {
  float: none;
  height: auto;
}

.ct-author-info.ct-box {
  margin: 0px;
}

.ct-50 {
  float: left;
  width: 50%;
}

.ct-25 {
  float: left;
  width: 25%;
  height: 100%;
}

.ct-25-last {
  margin-right: 0;
}

.ct-30 {
  float: left;
  width: 33.33%;
}

.ct-30:nth-child(3) {
  margin-right: 0;
}

.ct-box-full {
  float: none;
  margin-bottom: 10px;
  height: 100%;
}

.ct-sharing-item {
  float: left;
  margin: 5px 8px 8px 0;
  padding: 5px;
  height: 70px;
  background: #f7f7f7;
}

.ct-link-list {
  clear: both;
  padding-top: 8px;
}

.ct-link-list a {
  padding: 0px 5px 0 0;
  text-decoration: none;
  font-size: 0.85em;
}

.ct-link-list a {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0px 20px 0px 40px;
  width: 150px;
  background: transparent url(../images/cs.png) no-repeat top left;
  white-space: nowrap;
  line-height: 35px;
  opacity: 0.8;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

.ct-link-list a:hover {
  opacity: 1;
}

.ct-link-list a.ct-link-list-mail {
  background-position: -241px -457px;
}

.ct-link-list a.ct-link-list-rss {
  background-position: -241px -492px;
}

.ct-link-list a.ct-link-list-twitter {
  background-position: -241px -527px;
}

.ct-link-list a.ct-link-list-fb {
  background-position: -241px -562px;
}

.ct-link-list a.ct-link-list-gplus {
  background-position: -241px -597px;
}

.ct-link-list a:hover {
  text-decoration: none;
}

/* Comments Style */

.ct-comments {
  clear: both;
  padding-top: 30px;
}

.ct-closed-right {
  float: right;
  padding-right: 10px;
  color: #bccede;
  text-transform: none;
  font-size: 14px;
  line-height: 60px;
}

.ct-commenttitle {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgb(222, 228, 239);
}

.ct-commenttitle h2 {
  float: left;
  font-size: 36px;
}

.ct-commenttitle h2 sup {
  font-size: 22px;
}

.ct-comment {
  position: relative;
}

.ct-comments ol li,
.comment-meta .ct-commentthumb {
  margin: 10px 0px 10px 40px;
  padding: 4px;
  border: 1px solid #f4f4f4;
  background-color: #fff;
  list-style: none;
}

.ct-comments ol li.depth-2 {
  margin: 0px 13px 15px 50px;
  border: 1px solid #f4f4f4;
}

.ct-commentreply a {
  position: absolute;
  right: 12px;
  bottom: 3px;
  display: block;
}

.ct-commentedit a {
  position: absolute;
  bottom: 3px;
}

.comment-meta {
  position: relative;
  padding-left: 45px;
  min-height: 37px;
  height: auto;
  background: #f1f5f8;
  line-height: 37px;
}

a.ct-commenttime {
  display: inline;
  float: right;
  margin-right: 10px;
  color: rgb(165, 175, 192);
}

.comment-meta .ct-commentthumb {
  position: absolute;
  top: 10px;
  left: -40px;
  display: block;
  margin: 0;
}

.comment-meta .ct-commentthumb img {
  display: block;
}

.ct-commentnumber {
  position: absolute;
  right: 10px;
  bottom: 23px;
  color: #f4f5f7;
  font-size: 36px;
  line-height: 36px;
}

.ct-commentauthorname {
  color: #a5afc0;
  font-weight: bold;
}

.ct-commentcontent {
  position: relative;
  padding: 20px 55px 30px 45px;
}

.ct-commentcontent,
.ct-author-page-desc {
  line-height: 1.5;
}

.ct-commentcontent p {
  padding: 5px 0;
}

.ct-commentmessage {
  color: #ccc;
}

h3#reply-title {
  margin-top: 30px;
  padding: 10px 0px;
  padding: 25px 0px 10px 0;
  background: transparent url(../images/line.png) repeat-x top left;
  color: #d1dfec;
  font-size: 30px;
}

.ct-comment-form {
  clear: both;
  min-height: 40px;
}

.ct-commentlist #respond {
  margin: 0px 40px;
}

.ct-comment-form #respond {
  margin: 0 5px;
}

#respond form {
  position: relative;
  clear: both;
  padding-bottom: 65px;
  width: 100%;
}

#respond form label {
  float: left;
  padding-right: 10px;
  width: 65px;
  color: #bccede;
  text-align: right;
}

#respond form p {
  clear: both;
  margin: 5px 0px;
  line-height: 40px;
}

#respond form p .required {
  position: absolute;
  left: 0;
  color: #bccede;
}

#respond form p.comment-notes {
  font-size: 12px;
  line-height: 16px;
}

input[type="text"],
textarea {
  padding: 8px 7px;
  outline-color: #e2eaed;
  border: 1px solid #d2dadd;
  background: #f8f8f8;
  color: #3a3a3a;
  font-size: 13px;
}

#respond form input[type="text"],
#respond form textarea {
  display: inline-block;
}

.ct-comment-form #respond form input[type="text"],
.ct-comment-form #respond form textarea {
  background: #fff;
}

#respond form textarea {
  display: block;
  float: none;
  clear: both;
  width: 97%;
}

h3#reply-title a {
  margin-right: 10px;
  text-transform: uppercase;
  text-shadow: none;
  font-size: 12px;
}

#respond form p.form-allowed-tags {
  font-size: 12px;
  line-height: 20px;
}

#respond form p.form-allowed-tags code {
  font-size: 13px;
}

#respond form p.form-submit {
  float: right;
  margin-right: 10px;
}

#respond h3#reply-title a {
  float: right;
}

/* Partner Section */

.partner_section_post {
  position: relative;
  display: none;
  clear: both;
  padding: 10px;
  border-top: 1px solid #f7f7f7;
  border-left: 1px solid #f7f7f7;
  background-color: #fff;
  color: #fff;
  font-size: 11px;
  line-height: 20px;
}

.partner_section_post span {
  padding-right: 5px;
}

/* Collective Style */

.ct-content-coll .ct-inner {
  padding: 0;
  max-width: none;
}

.ct-main-coll {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 15px;
  min-height: 0;
  max-width: 1320px;
}

.ct-coll-featured-thumb img {
  display: block;
  margin: 0 auto;
  box-shadow: 2px 2px 0px #e5eaed;
}

.ct-coll-container .ct-coll-item {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.ct-coll-container .ct-coll-cover {
  padding: 0;
  background: #0099cc;
}

.ct-main-coll .ct-post .ct-coll-item.ct-coll-cover article {
  padding: 0;
  box-shadow: none;
}

.coll-cover-bg {
  margin: 0;
  padding: 30px 0 10px;
  color: #fff;
}

.ct-post .ct-coll-cover h1 {
  clear: both;
  margin: 0;
  padding: 0;
  border: none;
  color: #fff;
  font-size: 1.75em;
}

.ct-coll-cover,
.ct-coll-item.ct-coll-cover p {
  text-align: center;
}

.ct-coll-cover img {
  width: 105px;
  transform: translate3d(0, 0, 0);
}

.ct-coll-designer {
  position: absolute;
  top: 100%;
  margin-top: 20px;
  width: 100%;
  color: rgba(0, 0, 0, 0.3);
  text-align: center;
  font-size: 0.75em;
}

.ct-coll-cover a {
  color: rgba(0, 0, 0, 0.4);
}

.ct-coll-cover a:hover {
  color: #fff;
}

.ct-main-coll .ct-row-wrapper:last-child {
  padding-bottom: 30px;
}

.ct-main-coll .ct-post article {
  padding: 0px;
  background-color: transparent;
  box-shadow: none;
}

.ct-coll-nav {
  position: relative;
  margin: 0 auto 60px auto;
  width: 80%;
}

.ct-coll-nav span {
  position: absolute;
  top: 50%;
  margin-top: -35px;
}

.ct-coll-nav span:first-child {
  left: 0;
}

.ct-coll-nav span:last-child {
  right: 0;
}

.ct-coll-nav span.ct-coll-nav-empty {
  position: absolute;
  top: 50%;
  margin-top: -35px;
  width: 50px;
  height: 70px;
  box-sizing: border-box;
  border: 1px dotted rgba(0, 0, 0, 0.3);
}

.ct-coll-nav span.ct-coll-nav-empty:after {
  content: "Future Issue";
  position: absolute;
  left: 0;
  padding-top: 26px;
  width: 100%;
  color: rgba(0, 0, 0, 0.3);
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 9px;
  line-height: 9px;
}

.ct-coll-nav a {
  position: relative;
  display: block;
  float: left;
  width: 50px;
  height: 70px;
}

.ct-coll-nav a img {
  margin: 0px;
  width: 50px;
  border: none;
  opacity: 0.3;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ct-coll-nav a:hover img {
  opacity: 1;
}

.ct-coll-nav a:after {
  content: "\e600";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  margin: -15px 0 0 -15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: #237dac;
  text-align: center;
  font-weight: 400;
  font-size: 24px;
  font-family: "codrops-icons";
  line-height: 30px;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  speak: none;
}

.ct-coll-nav .ct-coll-nav-next a:after {
  content: "\e604";
}

.ct-coll-nav a:hover::after,
.ct-coll-nav a:hover::before {
  opacity: 0;
}

.ct-coll-nav-bottom {
  text-align: center;
}

.ct-coll-nav-bottom a,
.ct-coll-nav-bottom span {
  position: relative;
  display: inline-block;
  padding: 10px 0px;
}

.ct-coll-nav-bottom-next a::after,
.ct-coll-nav-bottom-prev a::before {
  font-size: 0.85em;
  font-family: "codrops-icons";
}

.ct-coll-nav-bottom-prev a::before {
  content: "\e600";
  margin-right: 5px;
}

.ct-coll-nav-bottom-next a::after {
  content: "\e604";
  margin-left: 5px;
}

.ct-coll-nav-bottom a {
  font-weight: bold;
}

.ct-coll-nav-bottom span {
  color: #ddd;
}

.ct-coll-nav-bottom a:hover {
  color: #056495;
}

.ct-vert-lines:before,
.ct-vert-lines:after {
  content: "\2022";
  padding: 0 10px;
  color: #ddd;
  font-size: 26px;
}

.ct-main-coll .ct-post p.ct-coll-excerpt,
.ct-coll-subline {
  font-size: 0.75em;
}

.ct-main-coll .ct-post p.ct-coll-excerpt {
  padding: 10px 20px;
  color: #036281;
}

.ct-coll-subline {
  display: block;
  font-weight: bold;
  padding: 5px 0 10px;
  text-transform: uppercase;
}

.ct-coll-subline time::after {
  content: " \00B7";
  margin: 0 4px;
}

.ct-coll-container-wrap {
  padding: 30px 0px 10px 0;
  min-height: 1060px;
}

.ct-coll-loading {
  background: transparent url(../images/preload.gif) no-repeat 50% 100px;
}

.ct-coll-container {
  visibility: hidden;
  clear: both;
  margin: 0 auto;
}

.ct-coll-item {
  float: left;
  margin: 0px 0px 30px 0px;
  padding: 0px;
  width: 300px;
  background-color: #fff;
}

.ct-coll-emailsep {
  display: none;
}

.ct-coll-item-multi nav {
  position: relative;
}

.ct-coll-item-multi nav a {
  position: absolute;
  top: 15px;
  z-index: 10000;
  width: 20px;
  height: 20px;
  background: #79bbdd url(../images/cs.png) no-repeat -194px -463px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  text-indent: -9000px;
}

.ct-main-coll .ct-post .ct-coll-item article {
  position: relative;
  padding: 15px 0 40px 0;
  box-shadow: inset 0 3px 0 #30abd5;
}

.ct-coll-item-multi nav a:hover {
  background-color: #46a4da;
}

.ct-coll-item-multi nav a.ct-coll-nav-prev {
  right: 40px;
}

.ct-coll-item-multi nav a.ct-coll-nav-next {
  right: 15px;
  background-position: -192px -489px;
}

.ct-coll-item-multi.ct-coll-item a.ct-coll-thumb {
  display: block;
  float: none;
  margin: 5px 30px 0px 30px;
}

.ct-coll-item-multi.ct-coll-item p {
  padding: 10px 30px;
}

.ct-main-coll .ct-post .ct-coll-item.ct-coll-item-nobg {
  background-color: transparent;
}

.ct-coll-item h2 {
  margin-bottom: 10px;
  padding: 5px 15px 10px;
  color: #666;
  text-align: left;
  text-transform: none;
  font-size: 1.5em;
  line-height: 1.2;
}

.ct-coll-item-multi.ct-coll-item h2 {
  padding-right: 55px;
}

.ct-coll-item.ct-coll-item-nobg h2 {
  background: transparent;
}

.ct-coll-item p {
  padding: 35px;
  text-align: left;
  line-height: 1.5;
}

.ct-coll-item p:before,
.ct-coll-item p:after {
  content: "";
  display: table;
}

.ct-coll-item p:after {
  clear: both;
}

.ct-coll-item p {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

.ct-coll-item-dribbble.ct-coll-item p {
  min-height: 48px;
}

.ct-coll-item a.ct-coll-thumb {
  position: relative;
  display: block;
  overflow: hidden;
}

.ct-coll-item .ct-coll-sponsorship {
  margin: -20px 0 20px;
  background: #c6cad1;
  padding: 9px 15px;
  font-size: 0.75em;
  font-weight: bold;
}

.ct-coll-item a.ct-coll-thumb:first-child {
  margin-top: -15px;
  margin-bottom: 20px;
}

.ct-coll-item .ct-coll-thumb ~ h2 {
  display: block;
  margin-bottom: -10px;
  padding: 15px 35px 0;
}

.ct-coll-item h2 a {
  display: block;
}

.ct-coll-item h2 a:visited,
.ct-coll-item h2 a:hover,
.ct-coll-item a.ct-coll-link:visited,
.ct-coll-item a.ct-coll-link:hover {
  color: #2d3e4a;
}

.ct-coll-item a.ct-coll-thumb img {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  border: none;
}

.ct-coll-item a.ct-coll-thumb:hover img {
  opacity: 1;
}

.ct-coll-item a.ct-coll-thumb span {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -35px 0 0 -35px;
  width: 70px;
  height: 70px;
  border: 3px solid rgba(152, 188, 220, 0.8);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
  color: rgba(91, 148, 178, 0.8);
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  font-size: 16px;
  line-height: 70px;
}

.ct-coll-item a.ct-coll-thumb span i {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.ct-coll-item a.ct-nofloat {
  float: none;
  margin: 0px;
}

.ct-coll-item a.ct-coll-link {
  padding: 0 35px;
  font-weight: bold;
  font-size: 0.95em;
}

.ct-coll-item a.ct-coll-link:after {
  content: "\e604";
  margin-left: 5px;
  font-size: 0.85em;
  font-family: "codrops-icons";
}

/* Normal Archive Style */
.ct-archive-container {
  padding-bottom: 2em;
}

.ct-archive-container,
.ct-row-wrapper {
  width: 100%;
  border-spacing: 10px;
  border-collapse: separate;
}

.ct-row-wrapper {
  margin-left: -20px;
  width: calc(100% + 40px);
  border-spacing: 20px;
}

.ct-archive-container .ct-row {
  display: table-row;
  margin: 0;
}

.ct-archive-container .ct-row-bottom.ct-row {
  display: block;
}

.ct-archive-container .ct-row-bottom.ct-row .ct-box {
  display: block;
  width: auto;
}

.ct-archive-container .ct-row .ct-box {
  display: table-cell;
  margin: 0;
  width: 50%;
}

.ct-archive .ct-box {
  font-style: normal;
}

.ct-archive h1 {
  padding: 1em 0px 0.25em 10px;
  line-height: 1;
  font-size: 2.25em;
}

.ct-archive-subline-centered {
  padding: 1em;
  color: #a0a7ad;
  text-align: center;
  font-weight: bold;
}

.ct-archive article .ct-subline {
  padding: 0 0 1.5em;
}

.ct-archive .ct-feat-excerpt p {
  display: inline;
  line-height: 20px;
}

.ct-archive .ct-feat-excerpt span a {
  white-space: nowrap;
}

.ct-archive #wp_page_numbers ul {
  float: right;
  width: auto;
}

/* Collective Archive Style */

.ct-coll-archive article .ct-subline {
  margin: 0 0 1em;
  padding: 0;
}

.ct-coll-archive .ct-latest-thumb {
  float: none;
  margin: 1.5em 0;
}

.ct-widget-coll .ct-latest-thumb a,
.ct-search-results article.type-collective .ct-latest-thumb a {
  width: 75px;
  height: auto;
}

.ct-search-results article.type-collective .ct-latest-thumb a img {
  width: 75px;
  height: auto;
}

.ct-coll-archive .ct-box {
  text-align: center;
}

.ct-coll-archive .ct-box h3 {
  padding-bottom: 0.5em;
  font-size: 1.85em;
}

.ct-coll-archive h3 time {
  color: #999;
  font-weight: normal;
  font-size: 11px;
}

.ct-coll-archive h3 time:before,
.ct-coll-archive h3 time:after {
  content: " \2022 ";
  color: #ddd;
  font-style: normal;
}

.ct-coll-archive .ct-latest-thumb a,
.ct-coll-archive .ct-latest-thumb a img {
  width: auto;
  height: auto;
  margin: 0 auto;
  background: none;
}

/* Collective Archive Style Main Page */

.ct-latest-any {
  border: 3px solid #f1f4f9;
  background: #fff;
  margin: 0 0 29px 0;
  box-sizing: border-box;
}

.ct-latest-any h3 {
  margin-bottom: 5px;
}

.ct-latest-any h3 a {
  text-shadow: none;
}

.ct-latest-any .ct-subline,
.ct-widget .ct-subline {
  font-size: 0.75em;
  margin: 0.5em 0;
  padding: 0;
}

.ct-widget .ct-subline {
  margin: 0 0 0.5em;
}

.ct-latest-any article {
  padding: 0.5em 0 2em;
}

.ct-latest-nothumb article {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #f0f0f0;
}

.ct-latest-any.ct-latest-giveaway article {
  border-color: rgba(70, 131, 168, 0.1);
}

.ct-latest-any.ct-latest-giveaway article:last-of-type {
  margin: 0px;
  padding-bottom: 10px;
}

.ct-latest-any article:last-of-type {
  padding-bottom: 4px;
  border-bottom: none;
}

.ct-latest-any.ct-coll-archive .ct-latest-thumb {
  float: left;
  margin: 0 15px 25px 0;
}

.ct-latest-any.ct-coll-archive .ct-latest-thumb a,
.ct-latest-any.ct-coll-archive .ct-latest-thumb img {
  width: 97px;
  height: auto;
  transform: translate3d(0, 0, 0);
}

.ct-latest-any .ct-latest-thumb a,
.ct-latest-any .ct-latest-thumb img {
  width: 50px;
  height: 50px;
}

.ct-widget-deals .ct-latest-thumb a {
  background: none;
}

.ct-latest-any.ct-coll-archive .ct-feat-excerpt,
.ct-widget-coll .ct-feat-excerpt {
  clear: right;
  font-size: 0.9em;
  line-height: 1.5;
}

.ct-latest-any.ct-coll-archive .ct-feat-excerpt span {
  display: block;
  float: right;
  clear: both;
}

.ct-latest-any h3 a {
  position: relative;
  display: table-cell;
  margin-bottom: 0;
  height: 50px;
  vertical-align: middle;
  font-size: 1em;
}

.ct-latest-nothumb h3 a {
  display: block;
  padding: 7px 2px;
  height: auto;
  line-height: 22px;
}

.ct-latest-any.ct-coll-archive h3 a {
  height: auto;
}

.ct-latest-any.ct-hot h3 a {
  color: #3a7ea2;
}

.ct-latest-any h2,
.ct-section-heading-small {
  padding: 0 0 2em 0;
  color: #8493a3;
  font-size: 0.7em;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ct-latest-any-wrap {
  position: relative;
  padding: 1.5em 1.5em 0.25em;
}

.ct-latest-any-bottom {
  clear: both;
  padding: 1em 0;
  text-align: right;
}

.ct-latest-any-left-link {
  float: left;
  margin-top: 5px;
}

/* Yearly Archives */

.ct-yearly-archives {
  padding-bottom: 20px;
}

.ct-yearly-archives .ct-box h3 {
  margin: 0 6px 15px 6px;
  padding: 0px 0 10px 0;
  border-bottom: 1px solid #f4f4f4;
  color: #c2d2e1;
  font-size: 1.6em;
}

.ct-yearly-archives .ct-box p {
  padding: 5px 0px;
}

.ct-yearly-archives .ct-box p a {
  display: block;
  padding: 2px 7px 10px;
  font-weight: bold;
}

.ct-yearly-archives .ct-box p time {
  display: block;
  color: #c2cbd4;
  text-transform: uppercase;
  font-size: 11px;
}

.ct-floating-header h1 {
  float: left;
}

/* Box Pagination Filter */

.ct-box-pagination {
  float: right;
  margin: 45px 7px 0 0;
}

.ct-box-pagination span {
  float: left;
  margin-right: 5px;
  color: #d1dfec;
  font-size: 20px;
  line-height: 36px;
}

.ct-box-pagination a {
  float: left;
  margin: 3px;
  padding: 3px 13px;
  font-size: 17px;
  line-height: 19px;
}

#wp_page_numbers a,
.ct-commentnav .page-numbers,
.ct-box-pagination a {
  background: #fff;
  color: #777;
  font-weight: bold;
  font-size: 0.8em;
}

.ct-box-pagination a:hover,
#wp_page_numbers li a:hover,
.ct-commentnav .page-numbers:hover {
  background: #79bbdd;
  color: #fff;
}

.ct-box-pagination a.selected,
.ct-box-pagination a.selected:hover,
.ct-box-pagination a.selected:active,
#wp_page_numbers li.active_page a,
.ct-commentnav .current,
.ct-commentnav .page-numbers.current:hover {
  background: #46a4da;
  color: #fff;
  cursor: default;
}

.ct-box-pagination a:active {
  margin-top: 4px;
  background: #79bbdd;
  color: #fff;
}

/* Author Page */

.ct-author-page {
  margin: 0 10px 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 50px;
}

.ct-author-page-url {
  padding: 10px 0;
}

.ct-author-page-url strong {
  margin-right: 5px;
}

.ct-author-avatar {
  float: left;
}

.ct-author-avatar img {
  display: block;
  margin: 0 0 8px 0;
  background: #e5eaf0;
}

.ct-author-page h1 {
  padding: 7px 0 10px 10px;
  font-size: 36px;
}

.ct-author-page-desc {
  margin-left: 175px;
}

.ct-author-info .ct-author-page-desc {
  margin-left: 110px;
}

.ct-box .ct-author-page-desc h4 {
  margin: 0 0 10px 0;
  padding: 5px 5px 0px 0px;
}

.ct-page .ct-box .ct-author-page-desc h4 {
  margin: 0px 5px 10px 0px;
}

.ct-box .ct-author-page-desc h4 a {
  display: inline;
  font-weight: normal;
  font-size: 26px;
}

.ct-author-page p {
  padding: 10px;
  line-height: 26px;
}

ul.ct-social-profiles {
  float: none;
  clear: none;
  padding: 5px 0px 20px 0px;
  height: 33px;
  list-style: none;
  line-height: 30px;
}

.ct-author-page ul.ct-social-profiles {
  padding-left: 10px;
}

.ct-social-profiles li {
  float: left;
}

.ct-connect {
  float: right;
  margin: 15px 22px 0 0;
  padding: 0px;
  width: 252px;
  height: 34px;
}

.ct-connect li {
  float: left;
}

.ct-connect li a {
  position: relative;
  display: block;
  margin: 0 2px;
  width: 34px;
  height: 34px;
  outline: none;
  color: #fff;
  text-align: center;
  line-height: 40px;
}

.ct-connect li a span {
  display: none;
}

.ct-connect li a:before,
.ct-icon-search:before,
.ct-icon-info:before {
  text-transform: none;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-size: 18px;
  font-family: "codrops-social";
  line-height: 40px;
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
}

.ct-connect li a:hover:before {
  color: #056495;
}

.ct-icon-search:hover:before {
  color: #fff;
}

.ct-icon-google-plus:before {
  content: "\e001";
}

.ct-icon-facebook:before {
  content: "\e002";
}

.ct-icon-github:before {
  content: "\e003";
}

.ct-icon-twitter:before {
  content: "\e000";
}

.ct-icon-feed:before {
  content: "\e004";
}

.ct-icon-mail:before {
  content: "\e005";
}

.ct-icon-search:before {
  content: "\e006";
  font-size: 20px;
}

/* Search */

.ct-search {
  position: relative;
  z-index: 100000;
  float: right;
  margin: 16px 0 0 0;
  width: 34px;
  height: 34px;
}

.ct-search * {
  box-sizing: border-box;
}

.ct-search-input-wrap {
  position: absolute;
  right: 34px;
  width: 265px;
  height: 34px;
  opacity: 0;
  pointer-events: none;
}

.ct-search.ct-search-open .ct-search-input-wrap {
  pointer-events: auto;
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.ct-container .twitter-typeahead {
  width: 100% !important;
  background: #fff;
}

.ct-container .tt-dropdown-menu {
  border: none;
  border-radius: 0px;
}

.ct-icon-search,
input[type="submit"].ct-search-submit {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 34px !important;
  height: 34px;
  text-align: center;
  line-height: 42px;
  cursor: pointer;
}

.ct-icon-search {
  z-index: 90;
  background: #0099cc;
  color: #237dac;
}

.ct-search.ct-search-open .ct-icon-search {
  z-index: 1;
  background: #237dac;
  color: #fff;
  pointer-events: none;
}

input[type="submit"].ct-search-submit {
  z-index: -1;
  padding: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
}

.ct-search.ct-search-open input[type="submit"].ct-search-submit {
  z-index: 100;
}

input[type="text"].ct-search-input,
input[type="text"].tt-hint {
  margin: 0;
  padding: 2px 7px;
  width: 262px;
  height: 34px;
  outline: none;
  border: none;
  background: #fff;
  font-family: inherit;
  opacity: 0;
  font-weight: bold;
}

.ct-search.ct-search-open input[type="text"].ct-search-input {
  opacity: 1;
}

::-webkit-input-placeholder {
  color: #ddd;
}

:-moz-placeholder {
  color: #ddd;
}

::-moz-placeholder {
  color: #ddd;
}

:-ms-input-placeholder {
  color: #ddd;
}

.ct-social-profiles li a {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0 2px;
  width: 33px;
  height: 33px;
  outline: none;
  background: transparent url(../images/profile_icons.gif) no-repeat top left;
  text-indent: -9000px;
}

.ct-social-profiles li a:hover {
  overflow: visible;
}

.ct-social-profiles li a span {
  position: absolute;
  bottom: 60px;
  left: 50%;
  margin-left: -70px;
  padding: 10px;
  width: 120px;
  height: auto;
  border-radius: 5px;
  background: #056495;
  color: #fff;
  text-align: center;
  text-indent: 0px;
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
}

.ct-social-profiles li a span:after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid #056495;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

.ct-social-profiles li a:hover span {
  bottom: 50px;
  opacity: 0.9;
}

.ct-social-profiles li .ct-social-twitter {
  background-position: 0px 0px;
}

.ct-social-profiles li .ct-social-twitter:hover {
  background-position: 0px -36px;
}

.ct-social-profiles li .ct-social-dribbble {
  background-position: -36px 0px;
}

.ct-social-profiles li .ct-social-dribbble:hover {
  background-position: -36px -36px;
}

.ct-social-profiles li .ct-social-codepen {
  background-position: -72px 0px;
}

.ct-social-profiles li .ct-social-codepen:hover {
  background-position: -72px -36px;
}

.ct-social-profiles li .ct-social-linkedin {
  background-position: -108px 0px;
}

.ct-social-profiles li .ct-social-linkedin:hover {
  background-position: -108px -36px;
}

.ct-social-profiles li .ct-social-gplus {
  background-position: -144px 0px;
}

.ct-social-profiles li .ct-social-gplus:hover {
  background-position: -144px -36px;
}

.ct-social-profiles li .ct-social-flickr {
  background-position: -180px 0px;
}

.ct-social-profiles li .ct-social-flickr:hover {
  background-position: -180px -36px;
}

.ct-social-profiles li .ct-social-github {
  background-position: -216px 0px;
}

.ct-social-profiles li .ct-social-github:hover {
  background-position: -216px -36px;
}

.ct-social-profiles li .ct-social-facebook {
  background-position: -252px 0px;
}

.ct-social-profiles li .ct-social-facebook:hover {
  background-position: -252px -36px;
}

.ct-social-profiles li .ct-social-zerply {
  background-position: -288px 0px;
}

.ct-social-profiles li .ct-social-zerply:hover {
  background-position: -288px -36px;
}

.ct-social-profiles li .ct-social-tumblr {
  background-position: -324px 0px;
}

.ct-social-profiles li .ct-social-tumblr:hover {
  background-position: -324px -36px;
}

.ct-social-profiles li .ct-social-behance {
  background-position: -360px 0px;
}

.ct-social-profiles li .ct-social-behance:hover {
  background-position: -360px -36px;
}

.ct-social-profiles li .ct-social-deviantart {
  background-position: -396px 0px;
}

.ct-social-profiles li .ct-social-deviantart:hover {
  background-position: -396px -36px;
}

.ct-social-profiles li .ct-social-instagram {
  background-position: -432px 0px;
}

.ct-social-profiles li .ct-social-instagram:hover {
  background-position: -432px -36px;
}

/* Ad Style */

.ct-ads {
  margin: 0;
  padding-bottom: 0px;
  width: auto;
  background: none;
}

.ct-ads-info {
  padding: 5px 0;
}

.ct-ads-info h4 {
  display: inline;
  margin: 0;
  padding: 0;
  color: #bbb;
  font-style: normal;
  font-size: 11px;
}

.ct-ads-info span {
  display: none;
}

.ct-advertise-here {
  position: relative;
  padding: 0 10px;
}

.ct-icon-info:before {
  content: "\e007";
  position: absolute;
  top: 4px;
  left: 2px;
  color: #ccc;
  font-size: 14px;
}

.ad-1 {
  float: left;
}

.ct-ad-content a img {
  border: none;
}

/* 125 Ads */

div.bsap_1243201 {
  clear: both;
}

div.bsap_1243201 a {
  display: block;
  float: left;
  overflow: hidden;
  margin: 0 !important;
  padding: 11px !important;
  color: #888;
  text-align: center;
  text-decoration: none;
  font-size: 11px;
}

div.bsap_1243201 a:nth-child(odd) {
  margin-right: 5px !important;
}

/* Top sidebar and middle sidebar ad */

div.bsap_1275127,
div.bsap_1298539 {
  margin: 0 auto;
  max-width: 300px;
}

div.bsap_1275127 a,
div.bsap_1275127 a img,
div.bsap_1298539 a,
div.bsap_1298539 a img {
  display: block;
  margin: 0 auto;
  border: none;
}

.ct-sidebar div.bsap_1275127 a img,
.ct-sidebar div.bsap_1298539 a img {
  margin: 0;
}

div.bsap_1275127 .bsap_adhere a,
div.bsap_1298539 .bsap_adhere a {
  display: block;
  overflow: hidden;
  margin: 0px 0 10px 0;
  width: 300px;
  height: 20px;
  outline-color: #888;
  background-color: rgba(255, 255, 255, 0.5);
  color: #888;
  text-align: center;
  text-decoration: none;
  text-transform: capitalize;
  font-weight: normal;
  font-size: 10px;
  line-height: 20px;
  cursor: auto;
}

div.bsap_1275127 .bsap_adhere a:hover,
div.bsap_1298539 .bsap_adhere a:hover {
  color: #7e95aa;
}

.bsap_1275127 .bsap_backfillframe,
.bsap_1275127 .bsap_backfillframe a,
.bsap_1275127 .bsap_backfillframe img,
.bsap_1298539 .bsap_backfillframe,
.bsap_1298539 .bsap_backfillframe a,
.bsap_1298539 .bsap_backfillframe img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.ct-sidebar .bsap_1275127 .bsap_backfillframe,
.ct-sidebar .bsap_1275127 .bsap_backfillframe a,
.ct-sidebar .bsap_1275127 .bsap_backfillframe img,
.ct-sidebar .bsap_1298539 .bsap_backfillframe,
.ct-sidebar .bsap_1298539 .bsap_backfillframe a,
.ct-sidebar .bsap_1298539 .bsap_backfillframe img {
  margin: 0;
}

/* Bottom ads */

div.bsap_1248599 a {
  margin: 0 5px 9px 0 !important;
}

html > body div.bsap_1243201 a.adhere {
  width: 125px !important;
  height: 125px !important;
}

/* Top Article Ad */

.ct-ad-article-wrapper {
  overflow: hidden;
  margin: 0 -70px 15px -70px;
  padding: 3px 71px 3px 70px;
  width: 100%;
}

.ct-ad-article-wrapper-in {
  margin: 20px -70px;
}

.ct-ad-article {
  position: relative;
  display: block;
  clear: both;
  margin: 0 -70px;
  padding: 10px 70px;
  max-width: 100%;
  width: 100%;
  height: auto;
  background: #e7e9ec url(../images/advertisement.png) no-repeat;
  background-size: auto 100%;
}

.ct-ad-article img.ct-ad-img {
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 0px;
  max-height: 100%;
}

.ct-ad-article .ct-small-text {
  display: block;
  clear: both;
  margin: 0 auto;
  padding: 0;
  max-width: 100%;
  width: 728px;
  font-size: 8px;
  line-height: 0px;
}

.ct-ad-article #bsap_1259389 {
  display: none;
}

.ct-ad-article #bsap_1277316 {
  display: block;
}

.ct-ad-article div.bsap a {
  float: none;
  margin: 0 auto;
  max-width: 100%;
}

.ct-ad-article div.bsap a img {
  margin: 0 auto;
  max-width: 100%;
  border: none;
}

.bsap_adhere {
  display: none !important;
}

/* End of Post Navigation */

.ct-post-nav {
  clear: both;
  margin-top: 20px;
  padding-top: 30px;
  border-top: 1px solid whiteSmoke;
}

.ct-post-nav a img,
.ct-post-nav a:hover img {
  margin: 0px 10px 0px 0px;
  width: 50px;
}

.ct-post-nav .ct-post-prev a img {
  float: left;
  margin: 0px 10px 0px 0px;
}

.ct-post-nav .ct-post-next a img {
  float: right;
  margin: 0px 0px 0px 10px;
}

.ct-post-nav div {
  position: relative;
  display: block;
  width: 245px;
  color: #999;
  font-size: 14px;
}

.ct-post-nav div strong {
  color: #bbb;
  text-transform: uppercase;
  font-size: 11px;
}

.ct-post-nav div a {
  display: block;
  font-weight: bold;
}

.ct-post-nav div.ct-post-prev {
  float: left;
  padding-left: 40px;
}

.ct-post-nav div.ct-post-next {
  float: right;
  padding-right: 40px;
  text-align: right;
}

.ct-post-nav div a:after {
  position: absolute;
  top: 50%;
  margin-top: -30px;
  height: 100%;
  color: #f4f5f7;
  font-weight: normal;
  font-size: 56px;
  font-family: Arial, sans-serif;
  line-height: 1;
}

.ct-post-nav .ct-post-prev a:after {
  content: "\00AB";
  left: 0px;
}

.ct-post-nav .ct-post-next a:after {
  content: "\00BB";
  right: 0px;
}

.ct-post-nav div:hover a:after {
  color: #202d3a;
}

.ct-post-nav div:hover a {
  color: #202d3a;
}

.ct-feat-subline {
  padding: 7px 0px 4px;
  border-top: 1px solid #f3f3f3;
  font-size: 13px;
  line-height: 20px;
}

.ct-border-box {
  float: left;
  padding: 7px;
  background-color: #fff;
  font-weight: normal;
}

.ct-border-box img {
  margin: 0 auto;
  border: none;
}

.ct-border-box p {
  padding: 5px 10px;
  line-height: 20px;
}

.ct-border-box h2 {
  padding: 4px;
  background: #f2f6f7;
  color: #b5cadd;
}

.ct-latest-bottom {
  padding: 10px 0 30px 0;
  text-align: right;
}

/* Search results page */

.ct-search-results h1 span {
  color: #46a4da;
}

.ct-search-results ul li,
.related_post li {
  padding: 5px 0;
}

.ct-search-results ul li a,
.related_post li a {
  font-weight: bold;
}

/* Not found template */

.ct-notfound {
  padding: 20px 5% 60px 5%;
  background: #fff;
  background-color: white;
}

.ct-notfound p {
  margin: 1em 0;
}

.ct-notfound h1 {
  margin: 20px 0 15px 0;
  padding: 0 0 15px 0;
  border-bottom: 1px solid whiteSmoke;
  font-size: 34px;
}

.ct-notfound h2 {
  margin: 20px 0 15px 0;
}

.ct-notfound h3 {
  margin: 0px;
  padding: 20px 0px 10px;
}

.ct-page-content .fm-form li {
  display: inline-block;
  width: 100%;
  -moz-column-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  column-break-inside: avoid;
}

.ct-page-content .fm-form input[type="text"],
.ct-page-content .fm-form textarea,
.ct-page-content .fm-form select {
  padding: 15px;
  width: 100% !important;
  box-sizing: border-box;
  color: #3c4c54;
}

.ct-page-content .fm-form input[type="text"]:focus,
.ct-page-content .fm-form textarea:focus {
  outline: none;
  background: #f5f8fd;
}

.ct-page-content .fm-form select,
#oiopub-container select {
  display: inline-block;
  padding: 5px 20px 5px 5px;
  border: 1px solid #d2dadd;
  background: white;
  background: #f8f8f8 url(../images/select.png) no-repeat 98% 50%;
  color: #444;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 18px;
  cursor: pointer;
  -webkit-appearance: none;
}

.ct-page-content .fm-form select:focus {
  outline: none;
}

.ct-page-content .fm-form input.submit {
  margin-right: 2%;
}

.ct-page-content .fm-form em {
  color: #c14e5c !important;
  font-weight: normal;
}

/* Deals */
.ct-deals article {
  width: 50%;
  border: 2px dashed #b0b0b0;
  text-align: center;
}

.ct-deals article h2 a {
  display: block;
  margin: 0 auto 10px auto;
  width: 230px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  text-indent: -9000px;
}

.ct-deals article p {
  line-height: 1.5;
}

.ct-deals article h3 {
  margin: 0.5em 0 0;
}

.ct-deals article h3 a {
  padding: 10px 20px;
  background-color: #ebedf0;
  display: block;
}

.ct-deals article h3 a span {
  color: #f18baa;
}

.ct-deals article h3 a:hover {
  background-color: #414a51;
  color: #fff;
}

.ct-deals article h3 a:hover span {
  color: #f9a6b4;
}

.ct-deals article p em {
  display: inline-block;
  margin: 10px 0 0 0;
  padding: 0px 10px;
  border: 2px dotted rgba(241, 139, 170, 1);
  background: rgba(241, 139, 170, 0.12);
  color: #f18baa;
  text-transform: none;
  font-weight: bold;
  font-style: normal;
  font-size: 1.4em;
  font-family: "Courier New", Courier, monospace;
}

#ct-deal-squarespace h2 a {
  background-image: url(../deals/squarespace.jpg);
}

#ct-deal-depositphotos h2 a {
  background-image: url(../deals/depositphotos.jpg);
}

#ct-deal-wegraphics h2 a {
  background-image: url(../deals/wegraphics.jpg);
}

#ct-deal-pixeno h2 a {
  background-image: url(../deals/pixeno.jpg);
}

#ct-deal-tn3 h2 a {
  background-image: url(../deals/tn3gallery.jpg);
}

#ct-deal-themefuse h2 a {
  background-image: url(../deals/themefuse.png);
}

#ct-deal-conceptboard h2 a {
  background-image: url(../deals/conceptboard.jpg);
}

#ct-deal-mightydeals h2 a {
  background-image: url(../deals/mightydeals.jpg);
}

#ct-deal-webiconset h2 a {
  background-image: url(../deals/webiconset.jpg);
}

#ct-deal-solo h2 a {
  background-image: url(../deals/solo.jpg);
}

#ct-deal-themify h2 a {
  background-image: url(../deals/themify.jpg);
}

#ct-deal-theadstock h2 a {
  background-image: url(../deals/theadstock.jpg);
}

#ct-deal-markupservice h2 a {
  background-image: url(../deals/markupservice.png);
}

#ct-deal-paydirt h2 a {
  background-image: url(../deals/paydirt.jpg);
}

#ct-deal-foobox h2 a {
  background-image: url(../deals/foobox.jpg);
}

#ct-deal-designmodo h2 a {
  background-image: url(../deals/designmodo.png);
}

#ct-deal-webhostingbuzz h2 a {
  background-image: url(../deals/webhostingbuzz.jpg);
}

#ct-deal-awwwards h2 a {
  background-image: url(../deals/awwwards.jpg);
}

#ct-deal-mythemeshop h2 a {
  background-image: url(../deals/mythemeshop.jpg);
}

#ct-deal-mediatemple h2 a {
  background-image: url(../deals/mediatemple.jpg);
}

#ct-deal-typeandgrids h2 a {
  background-image: url(../deals/typeandgrids.jpg);
}

#ct-deal-anariel h2 a {
  background-image: url(../deals/anariel.png);
}

#ct-deal-maxcdn h2 a {
  background-image: url(../deals/maxcdn.jpg);
}

#ct-deal-tokokoo h2 a {
  background-image: url(../deals/tokokoo.jpg);
}

#ct-deal-imcreator h2 a {
  background-image: url(../deals/imcreator.png);
}

#ct-deal-psacademy h2 a {
  background-image: url(../deals/psacademy.png);
}

#ct-deal-designpanoply h2 a {
  background-image: url(../deals/designpanoply.png);
}

#ct-deal-mydesigndeals h2 a {
  background-image: url(../deals/mydesigndeals.png);
}

#ct-deal-vecteezy h2 a {
  background-image: url(../deals/vecteezy.png);
}

#ct-deal-nextend h2 a {
  background-image: url(../deals/nextend.png);
}

#ct-deal-templatemonster h2 a {
  background-image: url(../deals/templatemonster.png);
}

#ct-deal-minicons h2 a {
  background-image: url(../deals/minicons.png);
}

#ct-deal-roundicons h2 a {
  background-image: url(../deals/roundicons.png);
}

#ct-deal-pixelbuddha h2 a {
  background-image: url(../deals/pixelbuddha.png);
}

#ct-deal-creativemarket h2 a {
  background-image: url(../deals/creativemarket.png);
}

#ct-deal-webydo h2 a {
  background-image: url(../deals/webydo.png);
}

#ct-deal-vectorizenow h2 a {
  background-image: url(../deals/vectorizenow.png);
}

#ct-deal-notism h2 a {
  background-image: url(../deals/notism.jpg);
}

#ct-deal-trackduck h2 a {
  background-image: url(../deals/trackduck.png);
}

#ct-deal-hoarrd h2 a {
  background-image: url(../deals/hoarrd.png);
}

#ct-deal-csschopper h2 a {
  background-image: url(../deals/csschopper.png);
}

#ct-deal-cronsync h2 a {
  background-image: url(../deals/cronsync.png);
}

#ct-deal-swiftly h2 a {
  background-image: url(../deals/swiftly.png);
}

#ct-deal-psd2html h2 a {
  background-image: url(../deals/psd2html.png);
}

#ct-deal-array h2 a {
  background-image: url(../deals/array.png);
}

#ct-deal-smarticons h2 a {
  background-image: url(../deals/smarticons.png);
}

#ct-deal-creativefabrica h2 a {
  background-image: url(../deals/creativefabrica.png);
}

#ct-deal-oxygenapp h2 a {
  background-image: url(../deals/oxygenapp.png);
}

#ct-deal-cssda h2 a {
  background-image: url(../deals/cssda.png);
}

#ct-deal-getsitecontrol h2 a {
  background-image: url(../deals/getsitecontrol.png);
}

#ct-deal-filestage h2 a {
  background-image: url(../deals/filestage.png);
}

#ct-deal-duet h2 a {
  background-image: url(../deals/duet.png);
}

#ct-deal-creativetim h2 a {
  background-image: url(../deals/creative_tim.png);
}

#ct-deal-iconresponsive h2 a {
  background-image: url(../deals/iconresponsive.png);
}

#ct-deal-placeit h2 a {
  background-image: url(../deals/placeit.png);
}

#ct-deal-iconscout h2 a {
  background-image: url(../deals/iconscout.png);
}

#ct-deal-haunted h2 a {
  background-image: url(../deals/haunted-themes.png);
}

#ct-deal-futuramo h2 a {
  background-image: url(../deals/futuramo.png);
}

#ct-deal-zyma h2 a {
  background-image: url(../deals/zyma.jpg);
}

#ct-deal-appatrol h2 a {
  background-image: url(../deals/appatrol.gif);
}

#ct-deal-projecthuddle h2 a {
  background-image: url(../deals/projecthuddle.png);
}

.ct-widget {
  float: none;
  margin: 10px 0;
  padding: 15px 20px;
  width: auto;
  border-top: 1px solid #f1f4f9;
}

.ct-widget h3 {
  font-size: 1.35em;
  margin-bottom: 0.5em;
}

.ct-widget-coll h3 {
  margin-bottom: 0.25em;
}

.ct-widget p {
  font-size: 0.9em;
  line-height: 1.5;
}

.ct-sidebar .ct-widget {
  background: rgba(255, 255, 255, 0.5);
}

#md-widget {
  padding: 10px 5px 5px 5px;
}

.ct-widget.ct-widget-lineboth {
  padding-bottom: 15px;
  border-top: 1px solid #f1f4f9;
  border-bottom: 1px solid #f1f4f9;
}

.ct-widget-wrapper .ct-widget:last-child {
  border-bottom: 1px solid #f1f4f9;
}

.ct-recent-post.ct-widget {
  margin: 0px 10px;
  padding: 0;
  border-top: none;
  box-shadow: none;
}

.ct-recent-post article {
  margin: 0;
  padding: 10px 0px 10px 0px;
}

.ct-recent-post.ct-widget-default article:last-child {
  padding: 10px 0px 10px 0px;
  border-bottom: 1px solid #f1f4f9;
}

.ct-widget-default article:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.ct-widget-default h3 {
  display: table-cell;
  vertical-align: middle;
  height: 50px;
  font-size: 1.05em;
}

.ct-recent-post.ct-widget-default h3 {
  display: block;
  height: auto;
  margin: 0.15em 0;
  font-size: 1.25em;
}

.ct-recent-post.ct-widget-default .ct-feat-excerpt {
  font-size: 0.9em;
}

.ct-widget-default .ct-latest-thumb a,
.ct-widget-default .ct-latest-thumb a img {
  width: 50px;
  height: 50px;
}

.ct-widget-default .ct-latest-thumb a {
  border-color: #b3d2ed;
}

.ct-widget-default .ct-latest-thumb a:hover {
  border-color: #98bcdc;
}

.ct-widget-default .ct-latest-thumb a img {
  border: none;
}

.ct-widget-blank article {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.ct-widget h5 {
  padding: 4px 0px 1.5em 0px;
  color: #acc0d7;
  font-size: 0.95em;
}

.ct-widget .ct-box {
  margin: 0px;
  padding: 0px;
  background: transparent;
  box-shadow: none;
}

.ct-widget-coll .ct-latest-thumb a {
  border-top: none;
  border-left: none;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
}

.ct-widget-coll .ct-latest-thumb a img {
  border: none;
  height: auto;
}

.ct-widget-coll article:first-of-type {
  margin-bottom: 1.5em;
}

.ct-archive-link {
  padding: 20px 0px 0px 0px;
}

/* About Author box */

.ct-box.ct-author-about-page {
  box-shadow: none;
  padding: 2em;
  border: 3px solid #f1f4f9;
  margin: 1em 0;
}

.ct-coll-ads div.bsap_1243201 {
  overflow: hidden;
  height: 125px;
  text-align: center;
}

.ct-coll-ads div.bsap_1243201 a {
  display: none;
  float: none;
  margin: 0 0px 0px 0px !important;
  padding: 12px;
}

.ct-coll-ads div.bsap_1243201 a {
  display: inline;
}

.ct-coll-ads .ct-small-text {
  display: block;
  margin-top: -6px;
  padding-bottom: 5px;
}

/* Special styles */

.ct-special-box {
  margin: 25px 0;
  padding: 15px 20px 15px 210px;
  background: #ffe0a5 url(../images/browser_compatability.png) no-repeat 20px
    50%;
  color: #a25b1c;
}

.ct-announcement {
  margin: 25px 0;
  padding: 15px 20px 15px;
  background: #d2ebfd;
  color: #4078a0;
}

.ct-github-link {
  margin: 20px 0px;
  padding: 30px 20px 30px 100px;
  background: #f8f8f8 url(../images/Github_Icon.png) no-repeat 20px 50%;
  font-weight: bold;
}

/* Ad styles */

.ct-bsa-sidelast {
  margin: 0 0 20px 0;
}

.ct-bsa-sidelast > div {
  margin: 0 auto;
  max-width: 300px;
}

#bsap_1243201 {
  margin-top: 16px;
}

#bsap_1266918 a img {
  border: none;
}

html > body div.bsap_1275127 a.adhere {
  width: 300px !important;
  height: 250px !important;
}

#bsap_1266918 a.adhere {
  display: block;
  margin: 30px auto 0px auto;
  width: 580px;
  height: 80px;
  border: 1px solid #c8d0e1;
  background: #d9e3ec;
  color: #9db0c1;
  text-align: center;
  text-transform: uppercase;
  font-size: 10px;
  line-height: 80px;
}

.ct-advertise-bsa ul {
  padding: 10px;
  list-style-image: none;
}

.ct-advertise-bsa ul .bawi_title {
  font-weight: bold;
  font-size: 14px;
}

/* Collective Ad Style */

.ct-main-coll .ct-post .ct-coll-item.ct-coll-item-ad article {
  padding-top: 0;
  box-shadow: none;
}

.ct-coll-item.ct-coll-item-ad div.bsap {
  margin-top: 0;
  min-height: 250px;
}

.ct-coll-item.ct-coll-item-ad .ct-small-text {
  top: auto;
  bottom: 0;
}

.ct-coll-item div.bsap {
  display: block;
  margin: 25px auto 0 auto;
  width: 100%;
}

.ct-coll-item div.bsap a {
  display: block;
  float: none;
  margin: 0 auto 0px auto;
  width: auto !important;
}

.ct-coll-item div.bsap .bsap_adhere {
  width: 100%;
  background: transparent !important;
}

.ct-coll-item div.bsap .bsap_adhere a {
  margin: 0 auto;
  width: 100%;
  border: none;
  background: transparent;
}

.ct-coll-item div.bsap a img {
  margin: 0 auto;
  max-width: 100%;
}

.ct-coll-item .ct-small-text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 20px;
  width: 100%;
  color: #aaa;
  text-align: center;
  line-height: 25px;
}

.ct-coll-item-dark {
  background: #f8f8f8;
}

.ct-post-content blockquote {
  display: block;
  margin: 0.5em 0;
  padding: 1.5em;
  border-left: 10px solid #ddd;
  background: #f8f8f8;
  color: #555;
  font-style: italic;
}

.ct-post-content blockquote p {
  margin: 0;
  padding: 3px;
}

div.bsap_1277316 .bsap_adhere2,
div.bsap_1279993 .bsap_adhere2,
div.bsap_1277316 iframe,
div.bsap_1279993 iframe {
  display: block;
  float: none !important;
  margin: 0 auto;
  max-width: 100%;
}

/* Blueprints */

.ct-info-note {
  position: relative;
  float: right;
  margin: 0 0 20px 10px;
  padding: 35px 30px 20px;
  width: 25%;
  background: #fef8b8;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2), 0 8px 13px -7px rgba(0, 0, 0, 0.3),
    inset 0 22px 1px rgba(0, 0, 0, 0.03);
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  transform: rotate(4deg);
}

.ct-info-note p {
  color: #46589c;
  font-weight: bold;
  font-style: italic;
}

/* Related posts */

.ct-latest-thumb-related {
  margin-bottom: 10px;
  position: relative;
  margin-bottom: 10px;
  padding-bottom: 54%;
  overflow: hidden;
}

.ct-latest-thumb-related a {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.ct-row-float {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 10px;
  width: 100%;
  background: #fff;
}

.ct-row-float .ct-box {
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 20px 10px;
  width: 33.3%;
}

/* CSS Reference Search */

.ct-cssref-searchinput {
  position: relative;
}

.ct-cssref-searchinput .ct-icon-search {
  right: auto;
  left: 0;
  width: 50px !important;
  height: 100%;
  background: transparent;
  cursor: default;
}

.ct-cssref-searchinput .ct-icon-search:before {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -10px;
}

.ct-cssref-searchinput .ct-icon-search:hover:before,
.ct-cssref-searchinput .ct-icon-search:before {
  color: rgb(136, 153, 171);
}

.ct-cssref-searchinput input[type="text"],
.ct-cssref-searchinput input[type="text"].tt-hint {
  padding: 5px 15px 5px 45px;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 1px;
  background: rgb(75, 94, 115);
  box-shadow: none;
  color: #fff;
  font-weight: 700;
  font-size: 0.9em;
  font-family: inherit;
}

.ct-cssref-searchinput--inverted input[type="text"],
.ct-cssref-searchinput--inverted input[type="text"].tt-hint {
  background: #fff;
  color: rgb(75, 94, 115);
}

.ct-cssref-searchinput--border input[type="text"],
.ct-cssref-searchinput--border input[type="text"].tt-hint {
  border: 1px solid #dee3ec;
}

/* placeholder */

.ct-cssref-searchinput input[type="text"]::-webkit-input-placeholder {
  color: rgb(136, 153, 171);
  font-weight: bold;
}

.ct-cssref-searchinput input[type="text"]:-moz-placeholder {
  color: rgb(136, 153, 171);
  font-weight: bold;
}

.ct-cssref-searchinput input[type="text"]::-moz-placeholder {
  color: rgb(136, 153, 171);
  font-weight: bold;
}

.ct-cssref-searchinput input[type="text"]:-ms-input-placeholder {
  color: rgb(136, 153, 171);
  font-weight: bold;
}

/* hide placeholder when active in Chrome */

.ct-cssref-searchinput input[type="text"]:focus::-webkit-input-placeholder {
  color: transparent;
}

.ct-container .ct-cssref-searchinput .twitter-typeahead {
  background: rgb(75, 94, 115);
}

.ct-container .ct-cssref-searchinput--inverted .twitter-typeahead {
  background: #fff;
}

.ct-cssref-searchinput input[type="text"]:focus {
  outline: none;
  background: rgb(87, 107, 129);
}

.ct-cssref-searchinput--inverted input[type="text"]:focus {
  background: #fff;
}

.ct-cssref-searchinput input[type="submit"] {
  display: none;
}

.ct-container .ct-cssref-searchinput .tt-dropdown-menu {
  margin-top: 0;
  padding: 0;
  background: #37495d;
}

.ct-container .ct-cssref-searchinput--inverted .tt-dropdown-menu {
  background: #dce0e5;
}

.ct-container .ct-cssref-searchinput .tt-dropdown-menu .tt-suggestion {
  padding: 8px 10px;
}

.ct-container .ct-cssref-searchinput .tt-dropdown-menu .tt-suggestion a {
  color: #fff !important;
  font-weight: bold;
}

.ct-container
  .ct-cssref-searchinput--inverted
  .tt-dropdown-menu
  .tt-suggestion
  a {
  color: #273647 !important;
}

.ct-container
  .ct-cssref-searchinput
  .tt-dropdown-menu
  .tt-suggestion.tt-is-under-cursor {
  background-color: #273647;
}

.ct-container
  .ct-cssref-searchinput--inverted
  .tt-dropdown-menu
  .tt-suggestion.tt-is-under-cursor
  a {
  color: #fff !important;
}

/* Index CSS Reference Widget */
.ct-cssref-widget * {
  box-sizing: border-box;
}

.ct-cssref-widget {
  margin: 0 0 29px;
  background: #c6ced8;
}

.ct-cssref-widget__inner {
  padding: 1.5em;
}

.ct-cssref-widget h2 {
  min-height: 30px;
  font-size: 1.375em;
  margin: 0 0 0.3em;
  padding: 0.15em 0 0 0px;
  background: url(../images/CSSRefBus_tiny.png) no-repeat 100% 0%;
}

.ct-cssref-widget__footer {
  text-align: right;
  margin-top: 1.05em;
  padding: 0.25em 0 0;
}

.ct-cssref-widget__footer a {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.7em;
  display: inline-block;
}

.ct-cssref-widget__footer a::after {
  font-family: "codrops-icons";
  content: "\e604";
  padding-left: 0.5em;
}

/* Syntax Highlighter */
pre {
  overflow: auto;
  margin: 8px 0px;
  padding: 20px;
  tab-size: 2;
  position: relative;
  background: #edf0f3;
  font-weight: normal;
  font-style: normal;
  font-size: 0.85em;
  line-height: 1.6;
  box-sizing: border-box;
  -webkit-font-smoothing: auto;
  font-family: "Consolas", "Courier New", Courier, monospace;
}

pre code {
  background: transparent !important;
  -webkit-font-smoothing: auto;
}

.hljs {
  display: block;
  overflow-x: auto;
  color: #262b2f;
  line-height: 1.5;
  padding: 1em;
  height: 100%;
}
/*
pre.hljs::before {
    content: "";
    padding: 0 10px;
    box-sizing: border-box;
    font-weight: bold;
    color: rgb(206, 215, 224);
    position: absolute;
    width: 100%;
    left: 0px;
    font-size: 13px;
    line-height: 27px;
    top: 0px;
    border-bottom: 1px solid #fff;
}

pre.css::before { content: 'CSS'; }
pre.html::before { content: 'HTML'; }
pre.xml::before { content: 'HTML'; }
pre.php::before { content: 'PHP'; }
pre.scss::before { content: 'SCSS'; }
pre.bash::before { content: 'Bash'; }
pre.mysql::before { content: 'MySql'; }
pre.js::before { content: 'JS'; }
*/
.hljs-comment,
.hljs-title {
  color: #95a5b3;
}

.hljs-comment {
  font-style: italic;
}

.hljs-variable,
.hljs-tag,
.hljs-regexp,
.ruby .hljs-constant,
.xml .hljs-tag .hljs-title,
.xml .hljs-pi,
.xml .hljs-doctype,
.html .hljs-doctype,
.css .hljs-id,
.css .hljs-class,
.css .hljs-pseudo {
  color: #5d6c7b;
}

.hljs-attribute {
  color: rgb(34, 85, 136);
}

/* Atelier Dune Light Orange */
.hljs-number,
.hljs-preprocessor,
.hljs-pragma,
.hljs-built_in,
.hljs-literal,
.hljs-params,
.hljs-constant {
  color: #40464a;
}

.hljs-ruby .hljs-class .hljs-title,
.css .hljs-rules .hljs-attribute {
  color: #2980b9;
}

.hljs-string,
.hljs-value,
.hljs-inheritance,
.hljs-header,
.ruby .hljs-symbol,
.xml .hljs-cdata {
  color: #be516e;
}

.css .hljs-hexcolor {
  color: #1fad83;
}

.hljs-function,
.python .hljs-decorator,
.python .hljs-title,
.ruby .hljs-function .hljs-title,
.ruby .hljs-title .hljs-keyword,
.perl .hljs-sub,
.javascript .hljs-title,
.coffeescript .hljs-title {
  color: #944770;
}

.hljs-keyword,
.javascript .hljs-function {
  color: #239371;
}

.css .hljs-value span {
  color: #be516e !important;
}

/* Contact Form */
.ct-page-content .fm-form label {
  margin-top: 1em;
  font-weight: bold;
}

/* Ads Widgets */
body .bsa-cart-zone {
  border: none !important;
  border-radius: 0px !important;
}

.ct-tags-archive > a {
  display: inline-block;
  text-transform: uppercase;
  font-size: 15px !important;
  padding: 0 10px;
  margin: 0.25em;
  letter-spacing: 1px;
  font-weight: bold;
  background: #237dac;
  color: #fff;
}

.ct-tags-archive > a:hover,
.ct-tags-archive > a:focus {
  background: #333;
  color: #fff;
}

/* Collective Ad */
.ct-coll-item-ad img {
  margin: 0;
}

.ct-coll-item-ad a img {
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ct-coll-item-ad .ct-small-text {
  color: #fff;
  pointer-events: none;
}

.ct-coll-item-ad .ct-small-text::after {
  position: absolute;
  content: "Advertisement";
  color: #888;
  font-weight: bold;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 40px;
}

/* Syndicate Widget */
.syndicate-widget {
  margin: 1em 0 0;
  width: 100%;
  font-size: 0.95em;
}

.syndicate-widget tr {
  background: #fafafa;
}

.syndicate-widget td {
  padding: 1em;
  border-bottom: 5px solid #fff;
  font-weight: bold;
}
.syndicate-widget td:last-child {
  text-align: right;
}

/* Can I use embed */
.ct-content .caniuse {
  padding: 0px;
}

.ct-content .caniuse h1,
.ct-content .caniuse h2,
.ct-content .caniuse h3,
.ct-content .caniuse h4,
.ct-content .caniuse p {
  font-size: inherit;
  line-height: inherit;
  margin: inherit;
  text-align: inherit;
}

.ct-content .caniuse h3 {
  font-size: 1.5em;
}

.ct-content .caniuse .agents,
.ct-content .caniuse .legend {
  margin: 20px 0 10px;
}

/* Media queries */

@media screen and (max-width: 1250px) {
  body {
    font-size: 1em;
  }

  #bsap_1248599 a:nth-child(3) {
    display: none;
  }
}

@media screen and (max-width: 1240px) {
  .ct-footer nav {
    float: none;
    width: 100%;
    padding: 0;
  }

  .ct-footer ul {
    display: block;
    float: none;
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
  }

  .ct-footer ul li {
    display: inline;
    float: none;
    color: #237dac;
  }

  .ct-footer ul li a {
    margin: 0 6px 0 2px;
  }

  .ct-footer ul li:after {
    content: "\2022";
    font-size: 14px;
  }

  .ct-footer ul li:last-child:after {
    content: "";
  }

  .ct-footer .ct-items {
    float: none;
    margin: 0 auto;
  }

  .ct-footer .ct-item {
    width: 50%;
    text-align: center;
  }

  .ct-footer .ct-items a {
    margin-right: auto;
    margin-left: auto;
  }
}

@media screen and (max-width: 1190px) {
  .ct-branding,
  .ct-nav-wrapper,
  .ct-nav-main,
  .ct-nav-main ul,
  .ct-header-items-right {
    float: none;
    clear: both;
    margin: 0 auto;
  }

  .ct-nav-wrapper {
    padding: 23px 10px 7px;
    min-width: 0px;
    text-align: center;
  }

  .ct-feat-left,
  .ct-feat-right {
    width: 100%;
    text-align: left;
  }

  .ct-feat-left .ct-feat-inner {
    padding: 29px 29px 0px 29px;
  }

  .ct-feat-img img {
    float: none;
  }
}

@media screen and (max-width: 1120px) {
  .ct-cssref-widget,
  .ct-latest-any,
  .ct-latest-any.ct-latest-blueprint,
  .ct-latest-any.ct-coll-archive {
    margin: 0;
    width: 100%;
    border: none;
    border-bottom: 3px solid #f1f4f9;
  }

  .ct-cssref-widget {
    border: none;
  }

  .ct-latest-any:last-of-type {
    border-bottom: none;
  }

  .index-wrap-right,
  .index-wrap-left {
    float: none;
    margin: 0;
    padding: 0 20px;
    width: auto;
  }

  .ct-widget-deals .ct-latest-thumb {
    display: none;
  }
}

@media screen and (max-width: 960px) {
  .ct-sidebar {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    clear: both;
    width: auto;
    background: none;
  }

  .ct-50 {
    float: left;
    margin-right: 0;
    margin-bottom: 15px;
    width: 100%;
    height: 100%;
  }

  .ct-main {
    margin-right: 0;
    min-height: 0px;
    width: 100%;
  }

  .ct-inner {
    padding: 0 15px;
  }

  a.ct-commenttime {
    display: block;
    float: none;
    padding-bottom: 10px;
  }

  .comment-meta {
    line-height: 20px;
    padding: 10px 0 0 42px;
  }

  /* Controlling the ads */

  /* Don't show big md ad */

  .ct-sidebar .ct-small-text {
    text-align: center;
  }

  .ct-ads {
    margin: 0;
    padding-bottom: 20px;
    width: auto;
    background: white;
  }

  .ct-ads-info {
    text-align: center;
  }

  div.bsap_1243201 {
    overflow: hidden;
    height: 125px;
    text-align: center;
  }

  div.bsap_1243201 a {
    display: inline !important;
    float: none !important;
    margin: 0px 4px !important;
    padding: 0px !important;
  }

  .ct-sidebar .ct-widget-wrapper {
    margin: 10px 0;
  }

  .ct-sidebar .ct-widget {
    margin: 10px auto 0 auto;
    padding: 10px 20px;
    border: none;
    background: #fff;
    box-shadow: none;
  }

  .ct-sidebar .ct-widget.ct-widget-lineboth {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
}

@media screen and (max-width: 768px) {
  #bsap_1275127,
  #nr_campaign {
    display: block;
    margin: 0 auto;
  }

  #nr_campaign {
    padding-top: 15px;
    border-top: none;
  }

  #nr_campaign h5 {
    display: none;
  }

  .ct-post article {
    padding: 40px 30px;
  }

  .ct-ad-article-wrapper {
    margin: 0 -30px 15px -30px;
    padding: 3px 31px 3px 30px;
  }

  .ct-ad-article {
    margin: 0 -30px;
    padding: 10px 30px;
  }

  .ct-post-nav div {
    clear: both;
    width: auto;
  }

  .ct-post-nav div.ct-post-next,
  .ct-post-nav div.ct-post-prev {
    float: none;
    padding: 10px 0 10px 40px;
    text-align: left;
  }

  .ct-post-nav .ct-post-next a:after {
    right: auto;
    left: 0px;
  }

  .ct-post-nav .ct-post-next a img {
    float: left;
    margin: 0px 10px 0px 0px;
  }

  .ct-post-nav div span {
    display: none;
  }

  .ct-archive-container {
    display: block;
    width: auto;
    border-spacing: 0px;
    border-collapse: inherit;
  }

  .ct-archive-container .ct-row {
    display: block;
  }

  .ct-archive-container .ct-row .ct-box {
    display: block;
    margin-bottom: 10px;
    width: auto;
  }

  .ct-deals article {
    width: auto;
  }

  .ct-columns-2,
  .ct-columns-3 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-gap: 0px;
    -moz-column-gap: 0px;
    column-gap: 0px;
    -webkit-column-rule: none;
    -moz-column-rule: none;
    column-rule: none;
  }
}

@media screen and (max-width: 640px) {
  div.bsap_1259389 a,
  div.bsap_1259389 a img {
    width: 100% !important;
  }

  ul.ct-social-profiles {
    height: 66px;
  }

  .ct-footer .ct-items {
    float: none;
    margin: 0 auto;
    width: auto;
    text-align: center;
  }

  .ct-footer .ct-items a {
    margin-right: auto;
    margin-left: auto;
  }

  .ct-footer .ct-items img {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
  }

  .ct-footer .ct-item {
    float: none;
    margin: 0 auto;
    height: 90px;
  }
}

@media screen and (max-width: 600px) {
  .ct-25 {
    float: left;
    margin-bottom: 15px;
    width: 50%;
    height: 100%;
  }

  .ct-25:nth-child(even) .ct-related-item:after {
    width: 0px;
  }

  .ct-post a.demo,
  .ct-post a.download {
    padding: 7px 10px;
    width: 110px;
    font-size: 12px;
  }

  .ct-post a.demo {
    margin-left: -135px;
  }

  .ct-30 {
    width: 100%;
  }

  .ct-comment-form #respond {
    margin-left: 0px;
  }

  .ct-latest-any {
    margin-top: 10px;
    width: 100%;
  }

  #wp_page_numbers li.page_info {
    float: none;
    padding: 0;
  }
}

@media screen and (max-width: 470px) {
  .ct-row-wrapper {
    display: block;
    padding: 20px;
    width: 100%;
  }

  .ct-row-wrapper .ct-row {
    display: block;
  }

  .ct-row-wrapper .ct-row .ct-box,
  .ct-row-float .ct-box {
    display: block;
    float: none;
    margin: 0 0 10px 0 !important;
    padding: 20px !important;
    width: auto;
    box-shadow: none !important;
  }

  .ct-bottom-ads.ct-box {
    display: none !important;
  }

  .ct-author-avatar {
    float: none;
    width: 100%;
  }

  .ct-box .ct-author-avatar img {
    float: none;
    margin: 0 auto;
  }

  .ct-author-page-desc,
  .ct-author-info .ct-author-page-desc {
    margin: 15px 0px 0px 0px;
  }

  .ct-author-page-desc h4,
  .ct-author-page-desc h1 {
    text-align: center;
  }

  .ct-special-box {
    padding: 60px 20px 15px 20px;
    background-position: 50% 15px;
  }
}

@media screen and (max-width: 420px) {
  .ct-coll-item a.ct-coll-thumb {
    float: none;
  }

  .ct-post h1 {
    font-size: 32px;
    line-height: 32px;
  }

  .ct-author-bio {
    margin-left: 0px;
  }

  .ct-related-item h5 {
    padding: 0px;
  }

  div.bsap_1243201 {
    height: 260px;
  }

  .ct-footer .ct-item {
    float: none;
    margin: 10px auto;
    text-align: center;
  }

  .ct-footer .ct-item a {
    margin: 5px auto;
  }
}

@media screen and (max-width: 400px) {
  .ct-connect {
    float: none;
    margin: 0 auto;
    width: 230px;
  }

  .ct-search {
    float: none;
    margin: 15px auto;
    width: 262px;
    height: 34px;
  }

  .ct-search .ct-search-input-wrap,
  .ct-search.ct-search-open .ct-search-input-wrap {
    opacity: 1;
    pointer-events: auto;
    width: 228px;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
  }

  .ct-search .ct-icon-search {
    z-index: 1;
    background: #237dac;
    color: #fff;
    pointer-events: none;
  }

  .ct-search input[type="text"].ct-search-input {
    opacity: 1;
  }

  .ct-search input[type="submit"].ct-search-submit {
    z-index: 100;
  }
}

@media screen and (max-width: 320px) {
  .ct-inner {
    padding: 0 5px;
  }

  .ct-commentcontent {
    padding: 20px 10px 30px 10px;
  }

  .ct-post .ct-ss {
    height: 150px;
  }

  .ct-latest-thumb {
    display: none;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console