FireHazard Landing Page
How do I make an firehazard landing page?
Styling an html video with webkit filters . What is a firehazard landing page? How do you make a firehazard landing page? This script and codes were developed by Calvin on 11 August 2022, Thursday.
FireHazard Landing Page Previews
FireHazard Landing Page - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FireHazard Landing Page</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<body> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" id="googlefonts-css" href="http://fonts.googleapis.com/css?family=Quicksand%3A300%2C400%7CVidaloka%7CPlayfair+Display%3A400%2C700%2C900%7COpen+Sans+Condensed%3A300%2C700%7COpen+Sans%3A400%2C800%7COswald%3A300%2C400%2C700%7CRaleway%3A200%2C300%2C400%2C500%2C600%2C700%2C800&subset=latin%2Clatin-ext%2Ccyrillic%2Ccyrillic-ext%2Cgreek-ext%2Cgreek%2Cvietnamese&ver=4.1.1" type="text/css" media="all">
<link rel="stylesheet" id="menufication-css-css" href="http://odisbey.tk/css/minib.css" type="text/css" media="all">
</head>
<div id="site"> <nav id="nav1"> <div class="container"> <ul class="navlinks"> <li><a href="index.html">blog</a></li> <li><a href="index.html">projects</a></li> <li><p style="color:#fff;font-size:25px; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #F72A24, 0 0 40px #F72A24, 0 0 70px #F72A24, 0 0 80px #F72A24, 0 0 100px #F72A24, 0 0 150px #F72A24; "><span class="glyphicon glyphicon-fire"></span><canvas id='canvas'></canvas> </p></li> <li><a href="index.html">team</a></li> <li><a href="index.html">hire us!</a></li> </ul> </div> </nav>
<div class="section st-invert st-full-height" style="
"><div class="st-video-background" style="opacity:1;height: 200px; -webkit-filter: grayscale(.94);"> <video autoplay="autoplay" loop="loop" muted="muted" height:"100%" style="width: 2000px;"> <source src="http://odisbey.tk/$/bg.mp4" type="video/mp4"> </div> <div id="body-wrapper"> <!--main-wrapper --> <div id="footer-wrapper"> <div id="footer-top"> <div id="footer-leaderboard"> <div id="footer-widget-wrapper"> <div class="footer-widget">
<h3 class="footer-widget-header">ABOUT HAZARD</h3> <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem?</p><p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniets.</p> <div id="footer-social"> <ul> <li class="fb-item"> <a href="FBOOK" alt="Facebook" class="fb-but2" target="_blank"></a> </li> <li class="twitter-item"> <a href="TITT" alt="Twitter" class="twitter-but2" target="_blank"></a> </li> <li class="pinterest-item"> <a href="PINT" alt="Pinterest" class="pinterest-but2" target="_blank"></a> </li> <li class="google-item"> <a href="GPLUS" alt="Google Plus" class="google-but2" target="_blank"></a> </li> <li class="instagram-item"> <a href="INSTAG" alt="Instagram" class="instagram-but2" target="_blank"></a> </li> <li class="youtube-item"> <a href="YOUTUB" alt="YouTube" class="youtube-but2" target="_blank"></a> </li> <li class="linkedin-item"> <a href="LINKN" alt="Linkedin" class="linkedin-but2" target="_blank"></a> </li> </ul> </div><!--footer-social--> <div id="copyright"> <p>Copyright © 2013 HAZARD. <BR> Distribution and modification of this content is prohibited unless otherwise authorized.</p> </div><!--copyright--> </div><!--footer-widget--> <div id="mvp_list_widget-3" class="footer-widget mvp_list_widget"><h3 class="footer-widget-header">THE LATEST</h3> <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem?</p><p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniets.</p><BR><p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem?</p><p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniets.</p> </div><div id="mvp_tags_widget-2" class="footer-widget mvp_tags_widget"><h3 class="footer-widget-header">TOPICS</h3> <div class="tag-cloud"> <a href="http://www.codepen.io/tag/fashion/" class="tag-link-4" title="8 topics" style="font-size: 12px;">Fashion</a>
<a href="http://www.codepen.io/tag/style/" class="tag-link-6" title="7 topics" style="font-size: 12px;">Style</a>
<a href="http://www.codepen.io/tag/beauty/" class="tag-link-2" title="7 topics" style="font-size: 12px;">Beauty</a>
<a href="http://www.codepen.io/tag/entertainment/" class="tag-link-3" title="6 topics" style="font-size: 12px;">Entertainment</a>
<a href="http://www.codepen.io/tag/gallery/" class="tag-link-21" title="5 topics" style="font-size: 12px;">Gallery</a>
<a href="http://www.codepen.io/tag/featured/" class="tag-link-19" title="5 topics" style="font-size: 12px;">Featured</a>
<a href="http://www.codepen.io/tag/fall/" class="tag-link-18" title="5 topics" style="font-size: 12px;">Fall</a>
<a href="http://www.codepen.io/tag/trends/" class="tag-link-48" title="2 topics" style="font-size: 12px;">Trends</a>
<a href="http://www.codepen.io/tag/outfits/" class="tag-link-35" title="2 topics" style="font-size: 12px;">Outfits</a>
<a href="http://www.codepen.io/tag/outfit/" class="tag-link-34" title="2 topics" style="font-size: 12px;">Outfit</a>
<a href="http://www.codepen.io/tag/hair/" class="tag-link-23" title="2 topics" style="font-size: 12px;">Hair</a>
<a href="http://www.codepen.io/tag/bangs/" class="tag-link-10" title="1 topic" style="font-size: 12px;">Bangs</a>
<a href="http://www.codepen.io/tag/black/" class="tag-link-11" title="1 topic" style="font-size: 12px;">Black</a>
<a href="http://www.codepen.io/tag/awkward/" class="tag-link-9" title="1 topic" style="font-size: 12px;">Awkward</a>
<a href="http://www.codepen.io/tag/accessories/" class="tag-link-8" title="1 topic" style="font-size: 12px;">Accessories</a>
<a href="http://www.codepen.io/tag/2-broke-girls/" class="tag-link-7" title="1 topic" style="font-size: 12px;">2 Broke Girls</a>
<a href="http://www.codepen.io/tag/breaking-bad/" class="tag-link-12" title="1 topic" style="font-size: 12px;">Breaking Bad</a>
<a href="http://www.codepen.io/tag/brunch/" class="tag-link-13" title="1 topic" style="font-size: 12px;">Brunch</a>
<a href="http://www.codepen.io/tag/leather/" class="tag-link-28" title="1 topic" style="font-size: 12px;">Leather</a>
<a href="http://www.codepen.io/tag/jacket/" class="tag-link-27" title="1 topic" style="font-size: 12px;">Jacket</a>
<a href="http://www.codepen.io/tag/lipstick/" class="tag-link-29" title="1 topic" style="font-size: 12px;">PAPER</a>
<a href="http://www.codepen.io/tag/mens/" class="tag-link-30" title="1 topic" style="font-size: 12px;">SHOES</a>
<a href="http://www.codepen.io/tag/nyfw/" class="tag-link-33" title="1 topic" style="font-size: 12px;">NSFW</a>
<a href="http://www.codepen.io/tag/nail/" class="tag-link-32" title="1 topic" style="font-size: 12px;">MAIL</a>
<a href="http://www.codepen.io/tag/modern-family/" class="tag-link-31" title="1 topic" style="font-size: 12px;">THE SIMPSONS</a>
<a href="http://www.codepen.io/tag/hispter/" class="tag-link-26" title="1 topic" style="font-size: 12px;">ANIMATION</a>
<a href="http://www.codepen.io/tag/handbags/" class="tag-link-25" title="1 topic" style="font-size: 12px;">ILLUSTRATION</a>
<a href="http://www.codepen.io/tag/closet/" class="tag-link-15" title="1 topic" style="font-size: 12px;">FONTS</a>
<a href="http://www.codepen.io/tag/denim/" class="tag-link-16" title="1 topic" style="font-size: 12px;">ART</a>
<a href="http://www.codepen.io/tag/discovery/" class="tag-link-17" title="1 topic" style="font-size: 12px;">GRAPHIC DESIGN</a>
<a href="http://www.codepen.io/tag/hairstyles/" class="tag-link-24" title="1 topic" style="font-size: 12px;">INTERIOR DESIGN</a>
<a href="http://www.codepen.io/tag/gym/" class="tag-link-22" title="1 topic" style="font-size: 12px;">GERMAN</a>
<a href="http://www.codepen.io/tag/french/" class="tag-link-20" title="1 topic" style="font-size: 12px;">PAINTING</a> </div> </div> </div><!--footer-widget-wrapper--> </div><!--footer-top--> </div><!--footer-wrapper--> </div><!--body-wrapper-->
</div><!--site-->
</body> <script src="js/index.js"></script>
</body>
</html>
FireHazard Landing Page - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Abel);
canvas { z-index:-1; margin-top:-20px; margin-left:-55px; position:absolute; background: rgba(0,0,0,1); display: block; height: 100%;
}
#nav1 { z-index:1; height:44px; background: rgba(0,0,0,1); font: 400 22px/12px 'Abel', sans-serif; text-transform:uppercase; text-align:center; position: fixed; display: inline-block; width: 100%; top: 0; left: 0; border-bottom:2px solid #90303d; }
#nav1 .navlinks { list-style: none; display:block; margin: 0 0 0 -55px;
}
#nav1 .navlinks li { display: inline-block; margin-right: 5px; }
#nav1 .navlinks li a { display: block; float: left; margin:0; padding:7px 20px; line-height: 28px; color: #ccc; border-bottom:2px solid rgba(0,0,0,0); text-shadow: 0 0 #000; }
#nav1 .navlinks li a:hover { border-top:none; background:#none; border-bottom:2px solid #e1e1e1; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; outline: none; text-decoration: none; color:#e1e1e1; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #F72A24, 0 0 40px #F72A24, 0 0 70px #F72A24, 0 0 80px #F72A24, 0 0 100px #F72A24, 0 0 150px #F72A24; }
@media screen and (max-width: 767px) { #nav1{ background: #000; z-index: 1; width: 100%; border:none; font: 300 2em 'Abel', sans-serif; text-transform:uppercase; text-align:center; position: fixed; }
}
@import url(http://fonts.googleapis.com/css?family=Vidaloka:100,200,300,400,500,600,700,800,900|Raleway:100,200,300,400,500,600,700,800,900|Playfair+Display:100,200,300,400,500,600,700,800,900|Oswald:100,200,300,400,500,600,700,800,900&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese);
#nav-wrapper { background: transparent; }
#main-nav .menu li a:hover,
#main-nav .menu li.current-menu-item a,
#search-button:hover,
.home-widget h3.widget-cat,
span.post-tags-header,
.post-tags a:hover,
.tag-cloud a:hover,
.woocommerce .widget_price_filter .ui-slider .ui-slider-range { background: #90303D; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; outline: none; }
#main-nav .menu-item-home a:hover { background: #90303D !important; }
#top-story-left h3,
#top-story-right h3 { border-bottom: 3px solid #90303D; }
a, a:visited,
ul.top-stories li:hover h2,
ul.top-stories li:hover h2,
#top-story-middle:hover h2,
#top-story-wrapper:hover #feat2-main-text h2,
#feat1-left-wrapper:hover .feat1-left-text h2,
#feat1-right-wrapper:hover .feat1-right-text h2,
ul.split-columns li:hover h2,
.home-widget ul.wide-widget li:hover h2,
.home-widget ul.home-list li:hover h2,
h3.story-cat,
h3.story-cat a,
.sidebar-widget ul.home-list li:hover h2,
.sidebar-widget ul.wide-widget li:hover h2,
.sidebar-widget ul.split-columns li:hover h2,
#footer-nav .menu li a:hover,
.footer-widget ul.home-list li:hover h2,
.footer-widget ul.wide-widget li:hover h2,
.footer-widget ul.split-columns li:hover h2,
.prev,
.next { color: #C5B188; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; outline: none; }
#wallpaper { background: url() no-repeat 50% 0; }
.featured-text h2,
.featured-text h2 a,
.feat1-main-text h2,
.feat1-main-text h2 a { font-family: 'Vidaloka', serif; }
#main-nav .menu li a,
#main-nav .menu li:hover ul li a { font-family: 'Raleway', sans-serif; }
#top-story-left h2,
#top-story-right h2,
.feat1-left-text h2,
.feat1-right-text h2,
#feat2-main-text h2,
#middle-text h2,
ul.split-columns li h2,
.home-widget .wide-text h2,
.home-widget .home-list-content h2,
h1.story-title,
.sidebar-widget .wide-text h2,
.sidebar-widget ul.split-columns li h2,
.footer-widget .wide-text h2,
.footer-widget ul.split-columns li h2,
#post-404 h1 { font-family: 'Playfair Display', serif; }
#top-story-left h3,
#top-story-right h3,
#middle-text h3,
h1.home-widget-header,
#woo-content h1.page-title,
h3.home-widget-header,
h1.archive-header,
h3.story-cat,
h3.story-cat a,
#content-area h1,
#content-area h2,
#content-area h3,
#content-area h4,
#content-area h5,
#content-area h6,
h4.post-header,
h3.sidebar-widget-header,
h3.footer-widget-header { font-family: 'Abel', sans-serif; padding-bottom:20px; outline: none; color:#ccc; text-decoration: none; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #F72A24, 0 0 40px #F72A24, 0 0 70px #F72A24, 0 0 80px #F72A24, 0 0 100px #F72A24, 0 0 150px #F72A24; }
@media screen and (max-width: 767px) and (min-width: 480px) { .sidebar-widget .home-list-content h2 { font-family: 'Playfair Display', serif; } }
#menufication-outer-wrap.menufication-transition-in #menufication-scroll-container { overflow-y: auto !important; }
html { overflow: hidden; }
body { background:#000; color: #444; font: normal 100% helvetica, arial, sans-serif; line-height: 100%; margin: 0px auto; padding: 0px; }
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { -webkit-backface-visibility: hidden; color:#ccc; }
img { max-width: 100%; height: auto; }
iframe,
embed,
object,
video { background: rgba(0,0,0,1); min-height: 100%; }
/************************************************ Hyperlinks
************************************************/
a, a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active,
a:focus { outline: none; }
/************************************************ background color, bgcolor here
************************************************/
#site { float: left; width: 100%; }
.right, .alignright { float: right; }
.left, .alignleft { float: left; }
.aligncenter { display: block; margin: 0 auto; }
.section-div { border-bottom: 1px dotted #ccc; float: left; margin: 20px 0; width: 100%; }
.lazy { display: none; }
/************************************************ Featured Section
************************************************/
#featured-wrapper { background: #000; overflow: hidden; position: relative; width: 100%; }
ul.featured-items { display: block; float: left; width: 100%; height: 400px; }
ul.featured-items li { display: inline; float: left; overflow: hidden; position: relative; max-height: 400px !important; }
ul.featured-items li img { float: left; opacity: 0.85; -moz-transition: opacity .4s linear; -ms-transition: opacity .4s linear; -0-transition: opacity .4s linear; -webkit-transition: opacity .4s linear; transition: opacity .4s linear; max-width: 660px; width: 660px; }
ul.featured-items li:hover img { opacity: 0.6; }
li.slide .video-button { top: 20px; left: 20px; width: 80px !important; height: 80px !important; }
li.slide .video-button img { max-width: 100%; width: 100%; }
li.slide:hover .video-button { opacity: 0.7; }
.featured-text { float: left; padding: 0 9.487666034155598% 30px; position: absolute; bottom: 0; left: 0; text-align: center; width: 81.0246679316888%; }
.featured-text h3,
.featured-text h3 a,
.feat1-main-text h3,
.feat1-main-text h3 a { color: #fff; display: inline-block; font: 300 22px/22px 'Open Sans Condensed', sans-serif; margin-bottom: 10px; -moz-text-shadow: 2px 2px 10px #000; -ms-text-shadow: 2px 2px 10px #000; -o-text-shadow: 2px 2px 10px #000; -webkit-text-shadow: 2px 2px 10px #000; text-shadow: 2px 2px 10px #000; text-transform: uppercase; }
.featured-text h2,
.featured-text h2 a,
.feat1-main-text h2,
.feat1-main-text h2 a { color: #fff; float: left; font-weight: 400; line-height: 86%; margin-bottom: 10px; -moz-text-shadow: 2px 2px 10px #000; -ms-text-shadow: 2px 2px 10px #000; -o-text-shadow: 2px 2px 10px #000; -webkit-text-shadow: 2px 2px 10px #000; text-shadow: 2px 2px 10px #000; text-transform: uppercase; width: 100%; }
.featured-text h2,
.featured-text h2 a { font-size: 58px; }
.featured-text h2.featured-small,
.featured-text h2.featured-small a { font: 400 42px/40px 'Vidaloka', serif; text-transform: capitalize; }
.featured-text h2 a:hover,
.featured-text h3 a:hover { text-decoration: none; }
.featured-excerpt { float: left; max-height: 0; overflow: hidden; -moz-transition: max-height .4s linear; -ms-transition: max-height .4s linear; -o-transition: max-height .4s linear; -webkit-transition: max-height .4s linear; transition: max-height .4s linear; width: 100%; }
ul.featured-items li:hover .featured-excerpt { max-height: 200px; }
.featured-excerpt p { color: #fff; float: left; font: 500 16px/26px 'Raleway', sans-serif; -moz-text-shadow: 1px 1px 2px #000; -ms-text-shadow: 1px 1px 2px #000; -o-text-shadow: 1px 1px 2px #000; -webkit-text-shadow: 1px 1px 2px #000; text-shadow: 1px 1px 2px #000; text-transform: uppercase; }
.prev,
.next { background: #fff; -moz-box-shadow: 0 0 15px -5px #000; -ms-box-shadow: 0 0 15px -5px #000; -o-box-shadow: 0 0 15px -5px #000; -webkit-box-shadow: 0 0 15px -5px #000; box-shadow: 0 0 15px -5px #000; font: 300 40px/40px 'Quicksand', sans-serif; margin-top: -35px; opacity: 0; position: absolute; top: 50%; padding: 15px 23px; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; }
#featured-wrapper:hover .prev,
#featured-wrapper:hover .next { opacity: 0.9; }
.featured-shade { margin: 0 auto; position: relative; width: 0; height: 400px; }
.left-shade,
.right-shade { opacity: 0.8; position: absolute; top: 0; width: 660px; height: 400px; }
.left-shade { background: url(images/fade-left.png) repeat-y left; left: -985px; }
.right-shade { background: url(images/fade-right.png) repeat-y right; left: 329px; }
.prev { left: -100px; }
.next { right: -100px; }
#featured-wrapper:hover .prev { left: 0; }
#featured-wrapper:hover .next { right: 0; }
#nav-wrapper { -moz-box-shadow: 0 0 20px -10px #000; -ms-box-shadow: 0 0 20px -10px #000; -o-box-shadow: 0 0 20px -10px #000; -webkit-box-shadow: 0 0 20px -10px #000; box-shadow: 0 0 20px -10px #000; float: left; position: relative; width: 100%; height: 54px; z-index: 2000; }
.fixed { opacity: 0.8; position: fixed !important; -moz-transition: 0.5s opacity; -ms-transition: 0.5s opacity; -o-transition: 0.5s opacity; -webkit-transition: 0.5s opacity; transition: 0.5s opacity; }
.fixed:hover { opacity: 1.0; }
#nav-inner { margin: 0 auto; position: relative; width: 1000px; height: 54px; }
#mobi-nav { border-right: 1px solid #ccc; display: none; float: left; margin-right: 10px; overflow: hidden; width: 74px; height: 54px; }
#mobi-nav:hover,
#mobi-nav select { cursor: pointer; }
#mobi-nav select { background: url(images/menu-but.png) no-repeat 50% 50%; border: none; color: #111; float: left; padding-right: 74px; width: 0; height: 54px; -webkit-appearance: none !important; }
#logo-small { float: left; line-height: 0; margin: 0 20px 0 10px; overflow: hidden; max-width: 210px; }
#logo-small img { float: left; }
#main-nav { float: left; position: relative; max-width: 706px; }
#main-nav .menu,
#main-nav .menu li { display: inline; float: left; position: relative; }
#main-nav .menu li a { color: #111; float: left; font-size: 13px; font-weight: 600; line-height: 100%; padding: 21px 15px 20px; text-transform: uppercase; }
#main-nav .menu-item-home a { background: none !important; color: #111 !important; }
#main-nav .menu-item-home a:hover { color: #fff !important; }
#main-nav .menu li a:hover,
#main-nav .menu li.current-menu-item a { color: #fff; text-decoration: none; }
#main-nav .menu li ul { background: #f5f5f5; -moz-box-shadow: 0 0 20px -10px #000; -ms-box-shadow: 0 0 20px -10px #000; -o-box-shadow: 0 0 20px -10px #000; -webkit-box-shadow: 0 0 20px -10px #000; box-shadow: 0 4px 20px -10px #000; display: none; position: absolute; top: 54px; left: 0; }
#main-nav .menu li:hover ul { display: block; }
#main-nav .menu li:hover ul li { display: block; border-top: 1px dotted #ccc; float: left; position: relative; }
#main-nav .menu li:hover ul li:first-child { border-top: none; }
#main-nav .menu li:hover ul li a { float: left; font-size: 11px; font-weight: 500; line-height: 100%; padding: 12px 18px; text-transform: none; width: 150px; }
#main-nav .menu li:hover ul li ul { display: none; position: absolute; top: 0; left: 186px; }
#main-nav .menu li:hover ul li:hover ul { display: block; }
#main-nav .menu li:hover ul li:hover ul li { display: inline; }
#main-nav .menu li:hover ul li:hover ul li ul { display: none; }
#search-button { background: url(images/search-bg.png); float: right; margin-left: 10px; padding: 20px; position: relative; width: 14px; }
#search-button:hover { cursor: pointer; }
#search-button img { float: left; }
#search-bar { background: #fff; -moz-border-bottom-left-radius: 10px; -ms-border-bottom-left-radius: 10px; -o-border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; border-bottom-left-radius: 10px; -moz-border-bottom-right-radius: 10px; -ms-border-bottom-right-radius: 10px; -o-border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; -moz-box-shadow: 0 0 20px -10px #000; -ms-box-shadow: 0 0 20px -10px #000; -o-box-shadow: 0 0 20px -10px #000; -webkit-box-shadow: 0 0 20px -13px #000; box-shadow: 0 4px 20px -11px #000; cursor: default; display: none; position: absolute; top: 53px; right: 0; width: 320px; }
#searchform { float: left; margin: 10px; }
#searchform input { background: #f5f5f5; border: 0; -moz-box-shadow: 0 2px 10px -2px #000 inset; -ms-box-shadow: 0 2px 10px -2px #000 inset; -o-box-shadow: 0 2px 10px -2px #000 inset; -webkit-box-shadow: 0 2px 10px -2px #000 inset; box-shadow: 2px 2px 6px 0 #ddd inset; color: #bbb; float: left; font: 400 12px/12px 'Open Sans', sans-serif; margin: 0; padding: 10px; width: 280px; height: 12px; }
#searchform #searchsubmit { border: none; float: left; }
#searchform #s:focus { outline: none; }
/************************************************ Leaderboard
************************************************/
#leaderboard-wrapper { float: left; line-height: 0; overflow: hidden; position: relative; }
.logo-header { margin-top: 20px; text-align: center; width: 100%; }
.logo-leader { margin: 20px 20px 0; width: 960px; }
#logo-medium { float: left; line-height: 0; margin-right: 20px; max-width: 212px; }
#leader-medium { float: right; line-height: 0; text-align: center; max-width: 728px; }
#logo-large { display: inline-block; line-height: 0; text-align: center; width: 100%; }
#leader-large { float: left; line-height: 0; margin-bottom: 20px; text-align: center; width: 100%; }
/************************************************ Homepage
************************************************/
#body-wrapper { float: left; position: relative; width: 100%; z-index: 1; }
#wallpaper { display: block; position: absolute; width: 100%; height: 100%; }
.wallpaper-link { margin: 0 auto; position: absolute; top: 0; width: 100%; height: 100%; }
#main-wrapper { margin: 0 auto; position: relative; width: 1000px; z-index: 10; }
#top-story-wrapper { background: #fff; -moz-box-shadow: 0 0 20px -10px #000; -ms-box-shadow: 0 0 20px -10px #000; -o-box-shadow: 0 0 20px -10px #000; -webkit-box-shadow: 0 0 20px -10px #000; box-shadow: 0 0 20px -10px #000; float: left; margin-top: 20px; position: relative; width: 100%; }
#feat1-main-wrapper { float: left; overflow: hidden; position: relative; width: 500px; height: 400px; }
.feat1-main-img { background: #000; float: left; width: 500px; height: 400px; }
.feat1-main-img img { float: left; margin-left: -80px; opacity: 0.85; max-width: 660px; -moz-transition: opacity 0.4s; -ms-transition: opacity 0.4s; -o-transition: opacity 0.4s; -webkit-transition: opacity 0.4s; transition: opacity 0.4s; width: 660px; height: 400px; }
.feat1-main-img .video-button { top: 10px; left: 10px; width: 50px; height: 50px; }
.feat1-main-img .video-button img { max-width: 100%; width: 100%; }
#feat1-main-wrapper:hover .video-button { opacity: 0.7; }
#feat1-main-wrapper:hover .feat1-main-img img { opacity: 1.0; }
.feat1-main-text { padding: 0 5% 30px; position: absolute; left: 0; bottom: 0; text-align: center; width: 90%; }
.feat1-main-text h2 { font-size: 48px; }
#feat1-left-wrapper,
#feat1-right-wrapper { float: left; overflow: hidden; position: relative; width: 250px; }
.feat1-left-img,
.feat1-right-img { background: #000; float: left; position: relative; width: 250px; height: 200px; }
.feat1-left-img img,
.feat1-right-img img { float: left; opacity: 0.85; -moz-transition: opacity 0.4s; -ms-transition: opacity 0.4s; -o-transition: opacity 0.4s; -webkit-transition: opacity 0.4s; transition: opacity 0.4s; }
.feat1-left-img .video-button,
.feat1-right-img .video-button { top: 10px; left: 10px; width: 50px; height: 50px; }
.feat1-left-img .video-button img,
.feat1-right-img .video-button img { margin-left: 0; max-width: 100%; width: 100%; height: auto; }
#feat1-left-wrapper:hover .video-button,
#feat1-right-wrapper:hover .video-button { opacity: 0.7; }
#feat1-left-wrapper:hover .feat1-left-img img,
#feat1-right-wrapper:hover .feat1-right-img img { opacity: 1.0; }
.feat1-left-tri { position: absolute; bottom: 0; left: 0; text-align: center; width: 100%; height: 20px; }
.feat1-tri-up { background: url(images/feat-tri.png) 0 0; display: inline-block; width: 40px; height: 20px; }
.feat1-right-tri { position: absolute; top: 0; left: 0; text-align: center; width: 100%; height: 20px; }
.feat1-tri-down { background: url(images/feat-tri.png) 0 -20px; display: inline-block; width: 40px; height: 20px; }
.feat1-left-text,
.feat1-right-text { float: left; padding: 20px; text-align: center; width: 210px; height: 160px; }
.feat1-left-text h2,
.feat1-right-text h2 { margin-bottom: 10px; }
.feat1-left-text p,
.feat1-right-text p { color: #444; float: left; font: 400 14px/20px 'Raleway', sans-serif; width: 100%; }
.feat1-left-img img,
.feat1-right-img img { margin-left: -40px; max-width: 330px; width: 330px; height: 200px; }
#feat2-main-img { background: #000; float: left; overflow: hidden; position: relative; width: 660px; height: 400px; }
#feat2-main-img img { float: left; opacity: 0.85; -moz-transition: opacity 0.4s; -ms-transition: opacity 0.4s; -o-transition: opacity 0.4s; -webkit-transition: opacity 0.4s; transition: opacity 0.4s; }
#top-story-wrapper:hover #feat2-main-img img { opacity: 1.0; }
.feat2-main-tri { position: absolute; top: 50%; right: 0; width: 20px; height: 400px; }
.feat2-tri-left { background: url(images/feat-tri.png) 0 0; display: inline-block; margin-top: -20px; width: 20px; height: 40px; }
#feat2-main-text { float: left; overflow: hidden; padding: 30px; width: 280px; max-height: 340px; }
#feat2-main-text h3 { color: #444; font: 300 22px/22px 'Open Sans Condensed', sans-serif; margin-bottom: 10px; text-transform: uppercase; width: 100%; }
#feat2-main-text h2 { float: left; font-size: 30px; font-weight: 700; line-height: 120%; margin-bottom: 15px; -moz-transition: color 0.2s; -ms-transition: color 0.2s; -o-transition: color 0.2s; -webkit-transition: color 0.2s; transition: color 0.2s; width: 100%; }
#feat2-main-text p { color: #444; float: left; font: 400 16px/24px 'Raleway', sans-serif; margin-top: 5px; width: 100%; }
#top-story-contain { float: left; width: 760px; }
#top-story-left { float: left; padding: 20px; width: 200px; }
ul.top-stories { float: left; width: 100%; }
ul.top-stories li { float: left; margin-top: 20px; width: 100%; }
ul.top-stories li:first-child { margin-top: 0; }
.top-story-image { float: left; line-height: 0; position: relative; margin-bottom: 10px; width: 100%; height: 121px; }
.top-story-image img,
.top-middle-image img { width: 100%; }
.video-button { line-height: 0; opacity: 0.5; position: absolute; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
.top-story-image .video-button { top: 10px; left: 10px; width: 50px; height: 50px; }
.top-story-image .video-button img { max-width: 100%; width: 100%; }
ul.top-stories li:hover .video-button { opacity: 0.7; }
.top-header-contain { float: left; margin-bottom: 15px; position: relative; text-align: center; width: 100%; }
#top-story-left h3,
#top-story-right h3 { display: inline-block; font-size: 14px; font-weight: 400; line-height: 120%; letter-spacing: 5px; padding: 0 0 3px 5px; text-transform: uppercase; }
#top-story-left h2,
#top-story-right h2,
.feat1-left-text h2,
.feat1-right-text h2 { float: left; font-size: 14px; font-weight: 700; line-height: 140%; text-align: center; -moz-transition: color 0.2s; -ms-transition: color 0.2s; -o-transition: color 0.2s; -webkit-transition: color 0.2s; transition: color 0.2s; width: 100%; }
#top-story-middle { border-left: 10px solid #111; border-right: 10px solid #111; float: right; width: 500px; }
#middle-img { float: left; line-height: 0; margin-bottom: 160px; position: relative; width: 100%; height: 303px; }
.top-middle-image { float: left; line-height: 0; position: relative; }
#middle-img .video-button { top: 20px; left: 20px; width: 80px; height: 80px; }
#middle-img .video-button img { max-width: 100%; width: 100%; }
#middle-img:hover .video-button { opacity: 0.7; }
#middle-text { background: #fff; -ms-box-shadow: 0 -22px 40px -30px #000; -moz-box-shadow: 0 -22px 40px -30px #000; -o-box-shadow: 0 -22px 40px -30px #000; -webkit-box-shadow: 0 -22px 40px -30px #000; box-shadow: 0 -40px 50px -50px #000; padding: 20px; position: absolute; bottom: -160px; left: 20px; text-align: center; width: 420px; }
#middle-text h3 { float: left; font-size: 16px; font-weight: 400; line-height: 100%; letter-spacing: 5px; margin-bottom: 5px; text-transform: uppercase; width: 100%; }
#middle-text h2 { float: left; font-size: 30px; font-weight: 700; line-height: 120%; margin-bottom: 15px; -moz-transition: color 0.2s; -ms-transition: color 0.2s; -o-transition: color 0.2s; -webkit-transition: color 0.2s; transition: color 0.2s; width: 100%; }
#middle-text p,
#middle-text p a { color: #444; float: left; font: 400 16px/24px 'Raleway', sans-serif; width: 100%; }
#top-story-right { float: right; padding: 20px; width: 200px; }
#content-wrapper { background: #fff; -moz-box-shadow: 0 0 20px -10px #000; -ms-box-shadow: 0 0 20px -10px #000; -o-box-shadow: 0 0 20px -10px #000; -webkit-box-shadow: 0 0 20px -10px #000; box-shadow: 0 0 20px -10px #000; float: left; margin-top: 20px; position: relative; width: 100%; }
#content-main { -ms-box-shadow: 30px 0 60px -60px #000; -moz-box-shadow: 30px 0 60px -60px #000; -o-box-shadow: 30px 0 60px -60px #000; -webkit-box-shadow: 30px 0 60px -60px #000; box-shadow: 20px 0 40px -40px #000; float: left; position: relative; width: 660px; }
.content-full { -ms-box-shadow: none !important; -moz-box-shadow: none !important; -o-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; width: 100% !important; }
#home-main { background: #fff; float: left; padding: 3.0303030303030303%; /* 20px / 660px */ position: relative; width: 93.93939393939393%; /* 620px / 660px */ }
.home-full { width: 960px !important; }
.home-widget,
.sidebar-widget { float: left; position: relative; width: 100%; }
.home-widget { font: 12px/18px helvetica, arial, sans-serif; margin-bottom: 30px; }
h1.home-widget-header { float: left; font-size: 40px; font-weight: 400; line-height: 120%; letter-spacng: 10px; margin: 10px 0 20px; text-align: center; text-transform: uppercase; width: 100%; }
h3.home-widget-header { float: left; font-size: 40px; font-weight: 400; line-height: 120%; letter-spacing: 10px; margin: 10px 0 20px; text-align: center; text-transform: uppercase; width: 100%; }
h1.archive-header { float: left; font-size: 20px; font-weight: 400; line-height: 140%; letter-spacing: 10px; margin: 10px 0 20px; text-align: center; text-transform: uppercase; width: 100%; }
.home-widget span.widget-cat-contain { float: left; margin-top: -14px; position: absolute; top: 0; left: 0; text-align: center; width: 100%; }
.home-widget h3.widget-cat { border: 3px solid #fff; color: #fff; display: inline-block; font: 500 12px/12px 'Raleway', sans-serif; padding: 5px 10px; text-transform: uppercase; }
.home-widget span.widget-info,
.home-widget span.widget-info a,
.sidebar-widget span.widget-info,
.sidebar-widget span.widget-info a { color: #444; float: left; font: 500 12px/12px 'Raleway', sans-serif; margin-bottom: 5px; width: 100%; }
span.widget-author { text-transform: uppercase; }
.home-widget ul.split-columns { display: inline; float: left; margin: 20px 0 -30px -20px; width: 640px; }
.home-widget ul.split-columns li { display: inline; float: left; margin: 0 0 30px 20px; width: 300px; height: 410px; }
.home-widget .split-img { float: left; line-height: 0; margin-bottom: 20px; position: relative; width: 100%; }
ul.split-columns li .video-button { top: 10px; left: 10px; width: 50px; height: 50px; }
ul.split-columns li .video-button img { max-width: 100%; width: 100%; }
ul.split-columns li:hover .video-button { opacity: 0.7; }
.home-widget .split-text { float: left; overflow: hidden; width: 100%; max-height: 208px; }
.home-widget ul.split-columns li h2 { float: left; font-size: 26px; font-weight: 700; line-height: 120%; margin-bottom: 10px; -moz-transition: color 0.2s; -ms-transition: color 0.2s; -o-transition: color 0.2s; -webkit-transition: color 0.2s; transition: color 0.2s; width: 100%; }
.home-widget ul.split-columns li p,
.home-widget ul.split-columns li p a { color: #444; float: left; font: 400 14px/22px 'Raleway', sans-serif; width: 100%; }
.home-widget ul.wide-widget { float: left; margin-top: 20px; width: 100%; }
.home-widget ul.wide-widget li { display: block; float: left; margin-bottom: 130px; position: relative; width: 100%; }
.home-widget .wide-img { float: left; line-height: 0; position: relative; width: 100%; height: 376px; }
.wide-img img { width: 100%; }
.home-widget span.wide-shade { float: left; position: relative; }
.home-widget span.wide-shade:before { content: ''; -ms-box-shadow: 0 0 40px -10px #000 inset; -moz-box-shadow: 0 0 40px -10px #000 inset; -webkit-box-shadow: 0 0 40px -10px #000 inset; -o-box-shadow: 0 0 40px -10px #000 inset; box-shadow: 0 0 40px -10px #000 inset; float: left; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
ul.wide-widget li .video-button { top: 20px; left: 20px; width: 80px; height: 80px; }
ul.wide-widget li .video-button img { max-width: 100%; width: 100%; }
ul.wide-widget li:hover .video-button { opacity: 0.7; }
.home-widget .wide-text { background: #fff; padding: 20px; position: absolute; bottom: -100px; left: 20px; -ms-box-shadow: 0 -22px 40px -30px #000; -moz-box-shadow: 0 -22px 40px -30px #000; -o-box-shadow: 0 -22px 40px -30px #000; -webkit-box-shadow: 0 -22px 40px -30px #000; box-shadow: 0 -22px 40px -30px #000; width: 540px; }
.home-widget .wide-text h2 { float: left; font-size: 30px; font-weight: 700; line-height: 120%; margin-bottom: 15px; -moz-transition: color 0.2s; -ms-transition: color 0.2s; -o-transition: color 0.2s; -webkit-transition: color 0.2s; transition: color 0.2s; width: 100%; }
.home-widget .wide-text p,
.home-widget .wide-text p a { color: #444; float: left; font: 400 16px/24px 'Raleway', sans-serif; margin-top: 5px; width: 100%; }
.home-widget ul.home-list { background: #fff; display: block; float: left; position: relative; width: 100%; }
.home-widget ul.home-list li { background: #fff; border-top: 1px dotted #ccc; display: block; float: left; padding: 20px 0; width: 100%; }
.home-widget ul.home-list li:first-child { border-top: none; }
.home-widget .home-list-img { float: left; line-height: 0; margin-right: 20px; position: relative; width: 295px; }
ul.home-list li .video-button { top: 10px; left: 10px; width: 50px; height: 50px; }
ul.home-list li .video-button img { max-width: 100%; width: 100%; }
ul.home-list li:hover .video-button { opacity: 0.7; }
.home-widget .home-list-content { float: left; width: 300px; }
.home-widget .home-list-content h2 { float: left; font-size: 24px; font-weight: 700; line-height: 120%; margin-bottom: 10px; -moz-transition: color 0.2s; -ms-transition: color 0.2s; -o-transition: color 0.2s; -webkit-transition: color 0.2s; transition: color 0.2s; width: 100%; }
.home-widget .home-list-content p,
.home-widget .home-list-content p a { color: #444; float: left; font: 400 14px/20px 'Raleway', sans-serif; width: 100%; }
/************************************************ Posts
************************************************/
#featured-image { background: url(images/striped-bg.png) repeat-x bottom; float: left; line-height: 0; overflow: hidden; padding-bottom: 12px; position: relative; width: 100%; }
#featured-image img { width: 100%; }
span.photo-credit { background: #fff; float: left; font: 500 10px/10px 'Raleway', sans-serif; letter-spacing: 3px; opacity: 0.7; padding: 5px 10px; position: absolute; bottom: 12px; right: 0; text-transform: uppercase; }
.breadcrumb { border-bottom: 1px solid #dfdfdf; color: #777; font: 400 11px/13px 'Raleway', sans-serif; margin-bottom: 20px; padding: 0 1.5% 10px; width: 97%; }
.breadcrumb a { font: 400 11px/11px 'Raleway', sans-serif; }
#post-area { float: left; font: 16px/25px georgia, 'times new roman', serif; position: relative; width: 100%; }
#post-area p { display: block; margin-bottom: 15px; }
h3.story-cat { float: left; font-size: 14px; font-weight: 400; line-height: 100%; letter-spacing: 5px; margin-bottom: 5px; text-transform: uppercase; width: 100%; }
h3.story-cat li { display: inline; }
h1.story-title { float: left; font-size: 41px; font-weight: 700; line-height: 120%; margin-bottom: 20px; width: 100%; }
#post-info { float: left; font: 300 14px/14px 'Raleway', sans-serif; margin-bottom: 20px; width: 100%; }
span.author,
time.post-date { }
span.comments-number { background: url(images/comment-bubble.png) no-repeat left; float: right; padding-left: 19px; }
span.comments-number a { color: #444 !important; }
.social-sharing-top { float: left; margin: 10px 0 20px; width: 100%; }
.share-count { float: left; margin: -10px 0 10px; overflow: hidden; padding-right: 10px; text-align: center; }
span.social-count-num,
span.social-count-text { float: left; text-transform: uppercase; width: 100%; }
span.social-count-num { color: #444; font: 700 25px/100% 'Oswald', sans-serif; width: 100%; }
span.social-count-text { color: #999; font: 400 10px/100% 'Open Sans', sans-serif; width: 100%; }
.facebook-share,
.twitter-share,
.pinterest-share,
.google-share { float: left; margin: 0 5px 5px 0; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; width: 100px; height: 25px; }
.social-comments { float: left; margin: 0 5px 5px 0; height: 25px; -moz-transition: background 0.2s; -ms-transition: background 0.2s; -o-transition: background 0.2s; -webkit-transition: background 0.2s; transition: background 0.2s; }
.facebook-share p,
.twitter-share p,
.pinterest-share p,
.google-share p { color: #fff; display: inline-block !important; font: 800 13px/100% 'Open Sans', sans-serif; margin-bottom: 0 !important; padding: 6px 0 6px 15px; text-transform: uppercase; }
.social-comments p { color: #fff; display: inline-block !important; font: 800 13px/100% 'Open Sans', sans-serif; margin-bottom: 0 !important; padding: 6px 15px; text-transform: uppercase; }
.facebook-share { background: #3e64ad; }
.twitter-share { background: #6aadd1; }
.pinterest-share { background: #de010d; }
.google-share { background: #cd3627; }
.social-comments { background: #aaa; }
.facebook-share:hover,
.twitter-share:hover,
.pinterest-share:hover,
.google-share:hover,
.social-comments:hover { opacity: 0.8; }
.fb-but1,
.twitter-but1,
.pinterest-but1,
.google-but1 { float: left; width: 25px; height: 25px; }.fb-but1 { background: url(http://i.imgur.com/lpmA2gd.png) 0 0; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; outline: none; }
.twitter-but1 { background: url(http://i.imgur.com/lpmA2gd.png) -30px 0; background: url(http://i.imgur.com/lpmA2gd.png) 0 0; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; outline: none; }
.pinterest-but1 { background: url(http://i.imgur.com/lpmA2gd.png) -60px 0; }
.google-but1 { background: url(http://i.imgur.com/lpmA2gd.png) -90px 0; }
.social-box { background: url(http://i.imgur.com/lpmA2gd.png); float: left; margin-bottom: 20px; padding: 5px 0; width: 100%; height: 36px; }
ul.post-social { background: #fff; display: inline; float: left; width: 100%; }
ul.post-social li { display: inline; float: left; padding: 8px 5px; width: 90px; height: 20px; }
li.fb-line { padding: 4px 5px 12px !important; }
.fb-like span { overflow: visible !important; width: 450px !important; margin-right: -375px; }
iframe#twitter-widget-0,
#___plusone_0 { position: relative; z-index: 300; }
#content-area { float: left; width: 100%; }
#content-area h1,
#content-area h2,
#content-area h3,
#content-area h4,
#content-area h5,
#content-area h6 { clear: right; line-height: 120%; overflow: hidden; margin: 10px 0; text-transform: uppercase; }
#content-area h1 { font-size: 28px; font-weight: 700; }
#content-area h2 { font-size: 22px; font-weight: 700; }
#content-area h3 { font-size: 18px; font-weight: 700; }
#content-area h4 { font-size: 16px; font-weight: 700; }
#content-area h5 { font-size: 14px; font-weight: 700; }
#content-area h6 { font-size: 10px; font-weight: 700; }
#content-area ul { list-style: disc outside; margin: 10px 0; }
#content-area ol { list-style: decimal outside; margin: 10px 0; }
#content-area ul li,
#content-area ol li { margin-left: 50px; padding: 5px 0px; }
#bbpress-forums ol,
#bbpress-forums ul { list-style: none; margin: 0; }
#bbpress-forums ul li,
#bbpress-forums ol li { margin-left: 0; padding: 0; }
#post-area blockquote { border-left: 1px #ccc solid; color: #777; font: italic 14px/22px verdana, arial, sans-serif;; margin: 10px; padding-left: 40px; }
#article-ad { line-height: 0; overflow: hidden; margin: 10px 0 30px; position: relative; text-align: center; width: 100%; }
.post-tags { float: left; font: 400 12px/12px 'Oswald', sans-serif; margin-bottom: 20px; width: 100%; }
.post-tags a,
span.post-tags-header { color: #fff; display: inline-block; float: left; margin: 0 1px 1px; padding: 5px 7px; text-transform: uppercase; }
.post-tags a { background: #aaa; }
.post-tags a:visited { color: #fff; }
.post-tags a:hover { color: #fff; text-decoration: none; }
#author-wrapper { background: url(images/striped-bg.png); float: left; margin-bottom: 20px; padding: 10px 0; width: 100%; }
#author-info { background: #fff; float: left; padding: 10px 0; position: relative; width: 100%; }
.author-name { float: left; font: 600 20px/20px 'Raleway', sans-serif; margin-bottom: 10px; width: 100%; }
.author-name a { color: #555 !important; }
#author-info ul { display: inline-block; margin: 0; }
#author-info ul li { display: inline; float: left; overflow: hidden; margin: 0; padding: 0 5px; }
#author-info img { -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; float: left; margin-right: 20px; overflow: hidden; width: 100px; }
#author-text { color: #777; float: left; font: 300 14px/22px 'Raleway', sans-serif; width: 500px; }
#author-text p { float: left; margin: 0 0 10px; width: 100%; }
.prev-next-wrapper { float: left; margin-bottom: 20px; width: 100%; }
.prev-post { color: #555; float: left; font: bold 14px/14px helvetica, arial, sans-serif; margin-left: 10px; text-align: center; width: 42%; }
.next-post { color: #555; float: right; font: bold 14px/14px helvetica, arial, sans-serif; margin-right: 10px; text-align: center; width: 42%; }
.prev-post a,
.next-post a { clear: both; color: #333 !important; float: left; font: 400 16px/22px 'Raleway', sans-serif; margin-top: 5px; }
h4.post-header { background: url(images/striped-bg.png); float: left; margin-bottom: 10px; padding: 5px 0; width: 100%; }
span.post-header { background: #fff; float: left; font-size: 20px; font-weight: 400; letter-spacing: 5px; line-height: 100%; padding: 10px 0; text-align: center; text-transform: uppercase; width: 100%; }
#related-posts { float: left; line-height: 0; margin-bottom: 20px; width: 100%; }
#related-posts ul { display: inline; float: left; width: 100%; }
#related-posts ul li { display: inline; float: left; margin-left: 10px; width: 200px; }
#related-posts ul li:first-child { margin-left: 0; }
.related-image { float: left; overflow: hidden; position: relative; width: 200px; height: 121px; }
.related-image img { width: 220px; height: 121px; }
.related-text { float: left; margin-top: 10px; }
.related-text a { color: #333; float: left; font: 600 12px/18px 'Raleway', serif; }
.related-text a:visited { color: #333; }
#post-404 { color: #999; margin: 100px 0; text-align: center; }
#post-404 h1 { font-size: 80px; font-weight: 700; line-height: 80px; margin-bottom: 20px; }
#post-404 p { text-align: center; font: 12px/12px georgia, 'times new roman', serif; }
.wp-caption, .gallery-caption { margin-bottom: 20px; max-width: 100%; text-align: center; }
.wp-caption-text { margin-bottom: 2px; }
.sticky { }
.bypostauthor { }
/************************************************ Comments
************************************************/
h3.comment-header { color: #fff; float: left; font: 400 12px/12px 'Oswald', sans-serif; margin: 0 0 20px 20px; padding: 5px 7px; position: relative; text-transform: uppercase; }
#comments { display: block; float: left; font: 400 12px/normal helvetica, arial, sans-serif; overflow: hidden; width: 100%; }
.comment-inner { border-bottom: 1px dotted #ddd; margin-bottom: 10px; padding: 10px 0 0; }
#comments .comment-inner:after { content: ''; display: block; clear: both; }
#comments .comment-avatar,
#tab3 .comment-avatar { float: left; width: 46px; }
#comments .avatar { display: block; background-color: #fff; }
.comment-avatar img { border-radius: 23px; overflow: hidden; }
#comments .commentmeta { display: block; float: left; margin: 0 10px 10px; }
.comment-reply a,
#cancel-comment-reply-link { clear: both; color: #fff; font: 700 12px/12px 'Open Sans Condensed', sans-serif; padding: 5px 10px; }
.comment-reply a { background: #555; float: right; }
#cancel-comment-reply-link { background: #ccc; float: left; margin: 0 0 10px 20px; }
.comment-reply a:hover,
#cancel-comment-reply-link:hover { background: #333; }
.comment-reply a:hover,
#cancel-comment-reply-link:hover { text-decoration: none; }
ol.commentlist { float: left; width: 100%; }
ol.commentlist h3.comment-header { display: none; }
ol.commentlist #respond { border-top: none; }
#comments .comment-meta-1 { display: block; float: left; font: bold 14px/normal helvetica, arial, sans-serif; margin-bottom: 5px; width: 100%; }
#comments .comment-meta-1 .fn { font-weight:bold; float:left; width:auto; }
#comments .comment-meta-1 .reply { display: inline-block; float: right; font-size: 11px; line-height: 11px; padding-top: 2px; }
#comments .comment-meta-1 .reply a { color: #555; }
#comments .comment-meta-2 { float: left; font: italic 12px/normal helvetica, arial, sans-serif; display: block; margin: 0; }
#comments .text { clear: both; display: block; float: left; margin-top: 10px; }
#comments .text .waiting_approval { font-size: 14px; font-style: italic; font-weight: bold; }
#comments .c { line-height: 20px; }
#comments .c p,
#comments .c code,
#comments .c blockquote,
#comments .c ul,
#comments .c ol { display: block; margin: 5px 0; }
#comments .c a { text-decoration: underline; }
#comments .c a:hover { text-decoration: none; }
#comments .depth-2 .comment-wrapper { padding-left: 40px; }
#comments .depth-2 .commentmeta { width: auto; }
#comments .depth-3 .comment-wrapper { padding-left: 80px; }
#comments .depth-3 .commentmeta { width: auto; }
#comments .depth-4 .comment-wrapper { padding-left: 120px; }
#comments .depth-4 .commentmeta { width: auto; }
#comments .depth-5 .comment-wrapper { padding-left: 160px; }
#comments .depth-5 .commentmeta { width: auto; }
#respond { clear: both; position: relative; }
#respond form { float: left; padding-bottom: 20px; width: 100%; }
#respond p { font: 12px/normal helvetica, arial, sans-serif; margin: 0; }
#respond .logged-in-as { margin-bottom: 10px; }
#respond .comment-notes { margin-bottom: 1em; }
.children #respond { margin: 0 48px 0 0; }
#comments-list #respond { margin: 0 0 18px 0; }
#comments-list ul #respond { margin: 0; }
#respond .required { color: #ff4b33; font-weight: bold; }
#respond label { color: #888; font-size: 12px; }
#respond input { background: #f6f6f6; border: 1px solid #ddd; -ms-box-shadow: 2px 2px 5px 0px #eee inset; -moz-box-shadow: 2px 2px 5px 0px #eee inset; -webkit-box-shadow: 2px 2px 5px 0px #eee inset; -o-box-shadow: 2px 2px 5px 0px #eee inset; box-shadow: 2px 2px 5px 0px #eee inset; display:block; margin: 0 0 9px; padding:5px; width: auto; }
#respond textarea { background: #f6f6f6; border: 1px solid #ddd; -ms-box-shadow: 2px 2px 5px 0px #eee inset; -moz-box-shadow: 2px 2px 5px 0px #eee inset; -webkit-box-shadow: 2px 2px 5px 0px #eee inset; -o-box-shadow: 2px 2px 5px 0px #eee inset; box-shadow: 2px 2px 5px 0px #eee inset; width: 95%; }
#respond #submit { background: #555; border: 0; box-shadow: none; color: #fff; cursor:pointer; font: 700 12px/12px 'Open Sans Condensed', sans-serif; margin-top:10px; padding: 5px 10px; width: 120px; }
#respond #submit:hover { background: #333; }
h3#reply-title,
h2.comments { color: #fff; font: 700 14px/14px 'Oswald', sans-serif; margin-bottom: 10px; padding: 5px 10px; text-shadow: 1px 1px 0 #000; text-transform: uppercase; }
h3#reply-title { display: none; }
span.comments { background: #fff; color: #aaa; float: left; font: 400 20px/20px 'Open Sans Condensed', sans-serif; padding-right: 15px; text-transform: uppercase; }
span.comments a { color: #666; }
span.comments a:hover { color: #f00; text-decoration: none; }
#comment-input label { margin-bottom: 10px; }
p.cancel-comment-reply { clear: both; }
p.form-allowed-tags { display: none; }
.fb-comments,
.fb-comments span { width: 100% !important; }
#disqus_thread { padding: 20px 0; }
/************************************************ Sidebar
************************************************/
#sidebar-wrapper { float: right; padding: 20px; -webkit-perspective: 1000px; position: relative; width: 300px; }
.sidebar-widget { background: #fff; font: 12px/18px helvetica, arial, sans-serif; margin-bottom: 20px; overflow: hidden; }
span.sidebar-widget-header { background: url(images/striped-bg.png); float: left; margin-bottom: 10px; padding: 5px 0; width: 100%; }
h3.sidebar-widget-header { background: #fff; float: left; font-size: 16px; font-weight: 400; letter-spacing: 5px; line-height: 100%; padding: 5px 0; text-align: center; text-transform: uppercase; width: 100%; }
.widget-ad { float: left; line-height: 0; text-align: center; width: 100%; }
h4.ad-header { clear: both; color: #ccc; float: left; font: 300 8px/8px 'Raleway', sans-serif; letter-spacing: 2px; margin-bottom: 5px; text-align: center; text-transform: uppercase; width: 100%; }
#content-social { float: left; text-align: center; width: 100%; }
#content-social ul { display: inline-block; }
#content-social ul li { display: inline; float: left; overflow: hidden; padding: 0 5px; }
.fb-but,
.twitter-but,
.pinterest-but,
.instagram-but,
.google-but,
.youtube-but,
.linkedin-but,
.rss-but { float: left; width: 25px; height: 25px; }
.fb-but { background: url(http://i.imgur.com/lpmA2gd.png) 0 0; }
.fb-but:hover { background: url(http://i.imgur.com/lpmA2gd.png) 0 -25px; }
.twitter-but { background: url(http://i.imgur.com/lpmA2gd.png) -25px 0; }
.twitter-but:hover { background: url(http://i.imgur.com/lpmA2gd.png) -25px -25px; }
.pinterest-but { background: url(http://i.imgur.com/lpmA2gd.png) -50px 0; }
.pinterest-but:hover { background: url(http://i.imgur.com/lpmA2gd.png) -50px -25px; }
.google-but { background: url(http://i.imgur.com/lpmA2gd.png) -75px 0; }
.google-but:hover { background: url(http://i.imgur.com/lpmA2gd.png) -75px -25px; }
.instagram-but { background: url(http://i.imgur.com/lpmA2gd.png) -100px 0; }
.instagram-but:hover { background: url(http://i.imgur.com/lpmA2gd.png) -100px -25px; }
.youtube-but { background: url(http://i.imgur.com/lpmA2gd.png) -125px 0; }
.youtube-but:hover { background: url(http://i.imgur.com/lpmA2gd.png) -125px -25px; }
.linkedin-but { background: url(http://i.imgur.com/lpmA2gd.png) -150px 0; }
.linkedin-but:hover { background: url(http://i.imgur.com/lpmA2gd.png) -150px -25px; }
.rss-but { background: url(http://i.imgur.com/lpmA2gd.png) -175px 0; }
.rss-but:hover { background: url(http://i.imgur.com/lpmA2gd.png) -175px -25px; }
.sidebar-widget ul.home-list li { background: #fff; border-top: 1px dotted #ccc; display: block; float: left; padding: 10px 0; width: 100%; }
.sidebar-widget ul.home-list li:first-child { border-top: none; padding-top: 0; }
.sidebar-widget .home-list-img { float: left; line-height: 0; margin-right: 10px; position: relative; width: 100px; }
.sidebar-widget .home-list-content { float: left; width: 190px; }
.sidebar-widget .home-list-content h2 { float: left; font: 600 12px/18px 'Raleway', sans-serif; margin-bottom: 10px; -moz-transition: color 0.2s; -ms-transition: color 0.2s; -o-transition: color 0.2s; -webkit-transition: color 0.2s; transition: color 0.2s; width: 100%; }
.sidebar-widget .home-list-content p,
.sidebar-widget .home-list-content p a { display: none; }
.sidebar-widget span.widget-cat-contain,
.sidebar-widget h3.widget-cat { display: none; }
.sidebar-widget span.widget-info,
.sidebar-widget span.widget-info a { display: none; }
.sidebar-widget ul.wide-widget { float: left; width: 100%; }
.sidebar-widget ul.wide-widget li { display: block; float: left; margin-bottom: 50px; position: relative; width: 100%; }
.sidebar-widget .wide-img { float: left; line-height: 0; position: relative; width: 100%; height: 182px; }
.sidebar-widget span.wide-shade { float: left; position: relative; }
.sidebar-widget span.wide-shade:before { content: ''; -ms-box-shadow: 0 0 40px -10px #000 inset; -moz-box-shadow: 0 0 40px -10px #000 inset; -webkit-box-shadow: 0 0 40px -10px #000 inset; -o-box-shadow: 0 0 40px -10px #000 inset; box-shadow: 0 0 40px -10px #000 inset; float: left; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.sidebar-widget .wide-text { background: #fff; padding: 10px; position: absolute; bottom: -50px; left: 10px; -ms-box-shadow: 0 -22px 40px -30px #000; -moz-box-shadow: 0 -22px 40px -30px #000; -o-box-shadow: 0 -22px 40px -30px #000; -webkit-box-shadow: 0 -22px 40px -30px #000; box-shadow: 0 -22px 40px -30px #000; width: 260px; }
.sidebar-widget .wide-text h2 { float: left; font-size: 18px; font-weight: 700; line-height: 120%; margin-bottom: 15px; -moz-transition: color 0.2s; -ms-transition: color 0.2s; -o-transition: color 0.2s; -webkit-transition: color 0.2s; transition: color 0.2s; width: 100%; }
.sidebar-widget .wide-text p,
.sidebar-widget .wide-text p a { display: none; }
.sidebar-widget ul.split-columns { display: inline; float: left; margin: 0; width: 300px; }
.sidebar-widget ul.split-columns li { display: inline; float: left; margin: 0 0 20px 0; width: 300px; height: auto; }
.sidebar-widget .split-img { float: left; line-height: 0; margin-bottom: 10px; position: relative; width: 100%; }
.sidebar-widget .split-text { float: left; overflow: hidden; width: 100%; max-height: 208px; }
.sidebar-widget ul.split-columns li h2 { float: left; font-size: 18px; font-weight: 700; line-height: 120%; margin-bottom: 0; -moz-transition: color 0.2s; -ms-transition: color 0.2s; -o-transition: color 0.2s; -webkit-transition: color 0.2s; transition: color 0.2s; width: 100%; }
.sidebar-widget ul.split-columns li p,
.sidebar-widget ul.split-columns li p a { display: none; }
.ad125-wrapper { float: left; line-height: 0; overflow: hidden; text-align: center; width: 100%; }
ul.ad125 { display: inline-block; position: relative; width: 300px; height: 300px; }
ul.ad125 li.ad125-1 { border: 1px solid #ddd; padding: 9px; position: absolute; top: 0; left: 0; width: 125px; height: 125px; }
ul.ad125 li.ad125-2 { border: 1px solid #ddd; padding: 9px; position: absolute; top: 0; right: 0; width: 125px; height: 125px; }
ul.ad125 li.ad125-3 { border: 1px solid #ddd; padding: 9px; position: absolute; bottom: 0; left: 0; width: 125px; height: 125px; }
ul.ad125 li.ad125-4 { border: 1px solid #ddd; padding: 9px; position: absolute; bottom: 0; right: 0; width: 125px; height: 125px; }
li.recentcomments,
li cite { float: left; margin-bottom: 10px; width: 100%; }
li cite.fn { margin-bottom: 0; }
.rss-date { float: left; width: 100%; }
table { float: left; width: 100%; }
.home-widget #searchform,
.sidebar-widget #searchform,
.footer-widget #searchform { margin: 10px 3%; width: 94%; }
.home-widget #searchform input,
.sidebar-widget #searchform input,
.footer-widget #searchform input { padding: 10px 3%; width: 94%; }
.home-widget select,
.sidebar-widget select,
.footer-widget select { width: 100%; }
/************************************************ Footer
************************************************/
#footer-wrapper { background-image: url('LOGOHERE'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; color: #ddd; float: left; font: 500 12px/18px helvetica, arial, sans-serif; position: absolute; width: 100%; }
#footer-top { margin: 0 auto; position: relative; width: 1000px; }
#footer-nav { float: left; width: 100%; }
#footer-nav .menu { float: left; position: relative; text-align: center; width: 100%; }
#footer-nav .menu li { display: inline-block; padding: 10px 30px 7px; }
#footer-nav .menu li a { color: #ccc; float: left; font: 600 10px/10px 'Raleway', sans-serif; text-transform: uppercase; }
#footer-nav .menu li a:hover { text-decoration: none; }
#footer-nav .menu li ul { display: none; }
#footer-leaderboard { float: left; border:2px solid #90303d; line-height: 0; margin: 10px 0; padding: 20px 0 10px 0; position: relative; text-align: center; width: 100%; background:rgba(0,0,0,0.5); }
#footer-widget-wrapper { float: left; padding: 20px 5px 20px; width: 990px; }
h3.footer-widget-header { float: left; font-size: 25px; font-weight: 400; line-height: 100%; margin-top:25px; margin-bottom: 5px; text-transform: uppercase; width: 100%; }
.footer-widget { float: left; font: 12px/18px helvetica, arial, sans-serif; margin: 0 0 20px 20px; padding-left: 19px; width: 290px; }
.footer-widget:first-child { border-left: none; padding-left: 0; }
.footer-widget p { float: left; margin-bottom: 15px; width: 100%; }
#logo-footer { clear: both; float: left; line-height: 0; margin-bottom: 15px; overflow: hidden; max-width: 290px; }
.tag-cloud { float: left; width: 100%; }
.tag-cloud a { background:none; color:#ddd; float: left; font: 400 12px/12px 'Oswald', sans-serif; margin: 0 5px 5px 0; padding: 5px 7px; text-transform: uppercase; }
.tag-cloud a:hover { color:#ddd; background:#90303d; text-decoration: none; }
.tag-cloud a:visited { color: #ddd; }
#footer-social { float: left; margin: 10px 0 10px -10px; width: 100%; }
#footer-social ul { display: inline-block; }
#footer-social ul li { display: inline; float: left; overflow: hidden; padding: 0 5px; }
.fb-but2,
.twitter-but2,
.pinterest-but2,
.instagram-but2,
.google-but2,
.youtube-but2,
.linkedin-but2,
.rss-but2 { float: left; width: 25px; height: 25px; background: url(http://i.imgur.com/lpmA2gd.png) 0 0; -webkit-transition: all 0s; -o-transition: all 0s; transition: all 0s; outline: none; }
.fb-but2 { background: url(http://i.imgur.com/lpmA2gd.png) 0 0px; }
.fb-but2:hover { background: url(http://i.imgur.com/lpmA2gd.png) 0 -50px; }
.twitter-but2 { background: url(http://i.imgur.com/lpmA2gd.png) -25px 0px; }
.twitter-but2:hover { background: url(http://i.imgur.com/lpmA2gd.png) -25px -50px; }
.pinterest-but2 { background: url(http://i.imgur.com/lpmA2gd.png) -50px 0px; }
.pinterest-but2:hover { background: url(http://i.imgur.com/lpmA2gd.png) -50px -50px; }
.google-but2 { background: url(http://i.imgur.com/lpmA2gd.png) -75px 0px; }
.google-but2:hover { background: url(http://i.imgur.com/lpmA2gd.png) -75px -50px; }
.instagram-but2 { background: url(http://i.imgur.com/lpmA2gd.png) -100px 0px; }
.instagram-but2:hover { background: url(http://i.imgur.com/lpmA2gd.png) -100px -50px; }
.youtube-but2 { background: url(http://i.imgur.com/lpmA2gd.png) -125px 0px; }
.youtube-but2:hover { background: url(http://i.imgur.com/lpmA2gd.png) -125px -50px; }
.linkedin-but2 { background: url(http://i.imgur.com/lpmA2gd.png) -150px 0px; }
.linkedin-but2:hover { background: url(http://i.imgur.com/lpmA2gd.png) -150px -50px; }
#copyright { float: left; font: italic 11px/17px helvetica, arial, sans-serif; margin-top: 5px; width: 100%; }
.footer-widget ul.home-list { display: block; width: 100%; }
.footer-widget ul.home-list li:first-child { border-top: none; padding-top: 0; }
.footer-widget ul.home-list li:last-child { padding-bottom: 0; }
.footer-widget .home-list-img { display: none; }
.footer-widget .home-list-content { float: left; width: 100%; }
.footer-widget .home-list-content h2 { color: #fff; float: left; font: 600 12px/18px 'Raleway', sans-serif; margin-bottom: 0; -moz-transition: color 0.2s; -ms-transition: color 0.2s; -o-transition: color 0.2s; -webkit-transition: color 0.2s; transition: color 0.2s; width: 100%; }
.footer-widget .home-list-content h2 a { list-style:none; color: #fff; float: left; font: 600 12px/18px 'Raleway', sans-serif; margin-bottom: 0; -moz-transition: color 0.2s; -ms-transition: color 0.2s; -o-transition: color 0.2s; -webkit-transition: color 0.2s; transition: color 0.2s; width: 100%; }
.footer-widget .home-list-content p,
.footer-widget .home-list-content a { display: none; list-style:none; }
.footer-widget span.widget-cat-contain,
.footer-widget h3.widget-cat { display: none; }
.footer-widget span.widget-info,
.footer-widget span.widget-info a { display: none; }
.footer-widget ul.wide-widget { float: left; width: 100%; }
.footer-widget ul.wide-widget li { display: block; float: left; margin-bottom: 50px; position: relative; width: 100%; }
.footer-widget ul.wide-widget li:last-child { margin-bottom: 30px; }
.footer-widget .wide-img { float: left; position: relative; width: 100%; height: 176px; }
.footer-widget ul.wide-widget img { float: left; width: 100%; }
.footer-widget span.wide-shade { float: left; position: relative; }
.footer-widget span.wide-shade:before { content: ''; -ms-box-shadow: 0 0 40px -10px #000 inset; -moz-box-shadow: 0 0 40px -10px #000 inset; -webkit-box-shadow: 0 0 40px -10px #000 inset; -o-box-shadow: 0 0 40px -10px #000 inset; box-shadow: 0 0 40px -10px #000 inset; float: left; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.footer-widget .wide-text { background: #222; padding: 10px; position: absolute; bottom: -50px; left: 10px; -ms-box-shadow: 0 -22px 40px -30px #000; -moz-box-shadow: 0 -22px 40px -30px #000; -o-box-shadow: 0 -22px 40px -30px #000; -webkit-box-shadow: 0 -22px 40px -30px #000; box-shadow: 0 -22px 40px -30px #000; width: 250px; }
.footer-widget .wide-text h2 { color: #fff; float: left; font-size: 18px; font-weight: 700; line-height: 120%; margin-bottom: 15px; -moz-transition: color 0.2s; -ms-transition: color 0.2s; -o-transition: color 0.2s; -webkit-transition: color 0.2s; transition: color 0.2s; width: 100%; }
.footer-widget .wide-text p,
.footer-widget .wide-text p a { display: none; }
.footer-widget ul.split-columns { display: inline; float: left; margin: 0; width: 300px; }
.footer-widget ul.split-columns li { display: inline; float: left; margin: 0 0 20px 0; width: 300px; height: auto; }
.footer-widget ul.split-columns li:last-child { margin-bottom: 0; }
.footer-widget .split-img { float: left; line-height: 0; margin-bottom: 10px; position: relative; width: 100%; }
.footer-widget .split-text { float: left; overflow: hidden; width: 100%; max-height: 208px; }
.footer-widget ul.split-columns li h2 { color: #fff; float: left; font-size: 18px; font-weight: 700; line-height: 120%; margin-bottom: 0; -moz-transition: color 0.2s; -ms-transition: color 0.2s; -o-transition: color 0.2s; -webkit-transition: color 0.2s; transition: color 0.2s; width: 100%; }
.footer-widget ul.split-columns li p,
.footer-widget ul.split-columns li p a { display: none; }
/************************************************ Pagination
************************************************/
.nav-links { float: left; padding: 20px 0; position: relative; width: 620px; }
.pagination { clear: both; position: relative; font: bold 12px/12px helvetica, arial, sans-serif; }
.pagination span, .pagination a { background: #555; border: 1px solid #333; border-radius: 3px; -ms-box-shadow: 0 3px 5px -1px #aaa; -moz-box-shadow: 0 3px 5px -1px #aaa; -o-box-shadow: 0 3px 5px -1px #aaa; -webkit-box-shadow: 0 2px 3px -1px #aaa; box-shadow: 0 3px 5px -1px #ccc; color: #fff; display:block; float:left; margin: 2px 5px 2px 0; padding: 9px 12px 8px 12px; text-decoration: none; width: auto; }
.pagination .current, .pagination a:hover { background: #999; border: 1px solid #777; color: #fff; }
.pagination a,
.pagination a:visited { color: #fff }
ul.split-columns #infscr-loading { margin-left: 20px !important; }
#infscr-loading { background: #f5f5f5; float: left; margin: 20px 0; padding: 10px 0; text-align: center; width: 620px; }
#infscr-loading img { display: none; }
#infscr-loading em { float: left; font: 400 16px/16px 'Raleway', sans-serif; width: 100%; }
.paginate-links { display: none; }
/************************************************ Media Queries
************************************************/
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) { .fb-but, .fb-but:hover, .twitter-but, .twitter-but:hover, .pinterest-but, .pinterest-but:hover, .instagram-but, .instagram-but:hover, .google-but, .google-but:hover, .youtube-but, .youtube-but:hover, .linkedin-but, .linkedin-but:hover, .rss-but, .rss-but:hover, .fb-but2, .fb-but2:hover, .twitter-but2, .twitter-but2:hover, .pinterest-but2, .pinterest-but2:hover, .instagram-but2, .instagram-but2:hover, .google-but2, .google-but2:hover, .youtube-but2, .youtube-but2:hover, .linkedin-but2, .linkedin-but2:hover, .rss-but2, .rss-but2:hover { background-image: url(http://i.imgur.com/ad71M3M.png); background-size: 200px 75px; background:#90303D; }
/* ======================== Sections ======================== */
.section { position: relative; margin: 0px 0; padding: 50px 0 50px; }
.section section { position: relative; }
.section.st-no-padding { padding: 0; }
.section.st-padding-xs { padding-top: 10px; padding-bottom: 10px; }
.section.st-padding-sm { padding-top: 30px; padding-bottom: 30px; }
.section.st-padding-lg { padding-top: 80px; padding-bottom: 80px; }
.section.st-padding-xl { padding-top: 120px; padding-bottom: 120px; }
.section.st-padding-top-lg { padding-top: 80px; }
.section.st-invert { background-color: #1a1a1a; color: #8e9095; }
.section.st-invert .section-title { color: #8e9095; }
.section.st-invert h1, .section.st-invert h2, .section.st-invert h3, .section.st-invert h4, .section.st-invert h5, .section.st-invert h6 { color: #8e9095; }
.section.st-full-height { height: 100%; }
.section.st-full-height section { height: 100%; }
.section.st-full-height section .container { height: 100%; }
.section.st-bg-grey-lighter { background-color: #edeef0; }
.section.st-black { background-color: black; }
.section .container { position: relative; z-index: 1; }
.section-title { text-align: center; margin-bottom: 40px; }
.section-title h1, .section-title h2, .section-title h3 { margin-top: 0; }
.section-descr { max-width: 800px; margin-left: auto; margin-right: auto; }
.sections-group { position: relative; }
.st-video-background { position: absolute; z-index: 0; left: 0; top: 0; width: 200%; height: 200%; background:#000;opacity: 1; overflow: hidden; }
.st-video-background video { width: auto; height: 100%; min-width: 100%; min-height: 100%; }
.text-dark p { color: #1a1a1a; }
/* ======================== Containers ======================== */
.containertop { margin-left: auto; margin-right: auto; }
.cont-960 .container { max-width: 960px; }
.container-800 { max-width: 800px; margin-left: auto; margin-right: auto; }
/* ======================== Creative minds block ======================== */
.creative-minds { margin-top: 20px; }
.creative-minds figure { position: relative; width: 100%; padding-top: 67%; overflow: hidden; cursor: pointer; }
.creative-minds img { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; }
.creative-minds figcaption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); opacity: 0; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.creative-minds .active figcaption { opacity: 1; }
.creative-minds .cm-title { color: white; }
.row-cm { margin-left: -5px; margin-right: -5px; }
.row-cm:before, .row-cm:after { content: " "; display: table; }
.row-cm:after { clear: both; }
.row-cm .col-cm { margin-bottom: 10px; text-align: center; position: relative; min-height: 1px; padding-left: 5px; padding-right: 5px; }
@media (min-width: 768px) { .row-cm .col-cm { float: left; width: 33.33333%; } }
/* ======================== Responsive Google Map ======================== */
.contact-map { height: 525px; }
.contact-map #map-canvas { height: 525px; }
.contact-map-onepage { height: 400px; }
.contact-map-onepage #map-canvas { height: 400px; }
.contact-map #map-canvas img, .contact-map-onepage #map-canvas img { max-width: none; }
/* ======================== Mental LayerSlider Layers & Styles ======================== */
.ls-mental-title { padding: 18px 28px; line-height: 37px; font-size: 31px; font-weight: bold; color: #8e9095; background: #1a1a1a; white-space: nowrap; }
@media (max-width: 767px) { .ls-mental-title { font-size: 18px; } }
.ls-mental-title-onepage { padding: 18px 28px; line-height: 37px; font-size: 31px; font-weight: bold; color: #76d898; background: #1a1a1a; white-space: nowrap; }
@media (max-width: 767px) { .ls-mental-title-onepage { font-size: 18px; } }
.ls-mental-desrc { padding: 8px 35px; line-height: 20px; font-size: 18px; font-weight: bold; color: #1a1a1a; background: white; white-space: nowrap; text-transform: none; }
@media (max-width: 767px) { .ls-mental-desrc { font-size: 14px; } }
.ls-mental-button { background-color: black; padding: 9px 24px; }
.ls-mental-scrollunder { display: block; width: 40px; height: 40px; border: 2px solid white; border-radius: 40px; font: 40px/40px FontAwesome; text-align: center; text-decoration: none; color: white; cursor: pointer; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.ls-mental-scrollunder:before { content: "\f107"; }
.ls-mental-scrollunder:hover { color: black; text-decoration: none; background-color: white; }
.ls-mental-bottombar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; height: 60px; line-height: 60px; padding: 0 10px 0 30px; background-color: rgba(0, 0, 0, 0.7); }
.ls-mental-bottombar #lsmb-title { font-size: 18px; text-transform: uppercase; }
.ls-mental-bottombar .mb-social { float: right; margin: 0; }
.ls-mental-bottombar .mb-social span { display: inline-block; margin: 0 20px 0 0; line-height: 2.3; color: #8e9095; font-size: 16px; }
.ls-mental-bottombar2 { position: absolute; bottom: 0; right: 0; z-index: 3; height: 50px; line-height: 50px; padding: 0 9px 0 20px; background-color: rgba(0, 0, 0, 0.7); }
.ls-mental-bottombar2 span { margin: 0 20px 0 0; line-height: 2.3; color: #8e9095; font-size: 16px; }
.ls-mental-back2gallery { position: absolute; top: 0; right: 0; z-index: 3; width: 40px; height: 40px; background-color: rgba(0, 0, 0, 0.7); }
.ls-mental-back2gallery a { display: block; color: #76d898; text-align: center; line-height: 40px; font-size: 18px; }
.ls-mental-back2gallery a:hover { text-decoration: none; color: white; }
.ls-mental-nav { position: absolute; top: 80%; left: 0; z-index: 3; width: 100%; }
.ls-mental-nav .ls-mental-nav-container { width: 1170px; margin: 0 auto; }
.ls-mental-nav .ls-mn-counter { display: inline-block; height: 45px; line-height: 45px; background-color: rgba(0, 0, 0, 0.9); padding: 0 30px; margin-right: 2px; color: #444649; font-size: 18px; vertical-align: middle; }
.ls-mental-nav .ls-mn-counter em { font-style: normal; color: #8e9095; }
.ls-mental-nav .ls-mn-prev, .ls-mental-nav .ls-mn-next { display: inline-block; position: relative; width: 45px; height: 45px; background-color: rgba(0, 0, 0, 0.9); margin-right: 2px; vertical-align: middle; }
.ls-mental-nav .ls-mn-prev:after, .ls-mental-nav .ls-mn-next:after { content: ''; display: block; position: absolute; top: 12px; left: 18px; width: 20px; height: 20px; border: 1px solid #8e9095; border-right: 0; border-bottom: 0; -webkit-transition: border-color 0.3s ease; -o-transition: border-color 0.3s ease; transition: border-color 0.3s ease; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.ls-mental-nav .ls-mn-next:after { left: 8px; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }
.ls-mental-nav .ls-mn-prev:hover:after, .ls-mental-nav .ls-mn-next:hover:after { border-color: #76d898; }
/* ======================== Top main menu ======================== */
@media (min-width: 992px) { .top-menu > header { width: 100%; height: 100px; } .top-menu.tm-fixed { min-height: 100px; } .top-menu.tm-fixed > header { position: fixed; z-index: 40; top: 0; left: 0; width: 100%; height: 80px; margin-top: -20px; margin-left: 15px; background-color: white; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.4); -webkit-transition: height 0.3s ease, margin-top 0.3s ease; -o-transition: height 0.3s ease, margin-top 0.3s ease; transition: height 0.3s ease, margin-top 0.3s ease; } }
.top-menu .tm-logo { padding-top: 25px; }
.top-menu .tm-logo img { max-height: 50px; }
.top-menu .tm-logo.tm-wtagline img { max-height: 28px; }
@media (max-width: 991px) { .top-menu .tm-logo { padding-top: 10px; } }
.top-menu .tm-site-descr { display: none; margin-top: 7px; margin-bottom: 0; font-size: 12px; }
.top-menu .tm-wtagline .tm-site-descr { display: block; }
.top-menu .tm-menu nav:before, .top-menu .tm-menu nav:after { content: " "; display: table; }
.top-menu .tm-menu nav:after { clear: both; }
.admin-bar .top-menu.tm-fixed > header { top: 32px; }
.menu-bar-right .top-menu.tm-fixed > header { margin-left: -15px; }
.no-menubar .top-menu.tm-fixed > header { margin-left: 0; }
.top-main-menu { float: right; margin-top: -65px; }
@media (min-width: 992px) { .top-main-menu { margin-top: 25px; } }
.top-main-menu > li > a { display: block; margin: 10px 15px; }
@media (max-width: 1199px) { .top-main-menu > li > a { margin: 10px 10px; } }
.top-main-menu li > a { color: #444649; text-transform: uppercase; }
.top-main-menu li > a:hover { color: #76d898; }
.top-main-menu li.active > a { color: #76d898; }
.megamenu .form-group { margin-bottom: 10px; }
/* ======================== Onepage ======================== */
div.ls-fullheight { padding: 0; }
div.ls-nobullets .ls-bottom-nav-wrapper { display: none; }
div.ls-nonav a.ls-nav-prev { display: none !important; }
div.ls-nonav a.ls-nav-next { display: none !important; }
.onepage-top-section { overflow: hidden; position: relative; }
/* ======================== Onepage Preloader ======================== */
#preloader { position: fixed; z-index: 99999; top: 0; left: 0; width: 100%; height: 100%; background-color: #1a1a1a; text-align: center; }
#preloader i { font-size: 45px; color: #76d898; }
/* ======================== Video Js Skin ======================== */
.container-fullwidth-video { position: relative; width: 100%; }
.container-fullwidth-video iframe, .container-fullwidth-video object, .container-fullwidth-video embed, .container-fullwidth-video video, .container-fullwidth-video .wp-video { width: 100% !important; height: 100% !important; }
.container-fullwidth-video .mejs-container, .container-fullwidth-video .mejs-overlay { width: 100% !important; height: 100% !important; }
.vjs-fullwidth { width: 100%; }
.vjs-fullheight { height: 100%; }
.vjs-mental-skin .vjs-play-progress { background: #76d898; }
.vjs-mental-skin .vjs-volume-level { background: #76d898; }
.vjs-mental-skin .vjs-big-play-button { left: 50%; top: 50%; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; border: 0; box-shadow: none; -webkit-box-shadow: none; background: transparent; }
.vjs-mental-skin .vjs-big-play-button:before { content: "\f01d"; position: static; color: white; font: 80px/100px FontAwesome; vertical-align: middle; }
.vjs-mental-skin:hover .vjs-big-play-button, .vjs-mental-skin:hover .vjs-big-play-button:focus { background: transparent; box-shadow: none; -webkit-box-shadow: none; } .glyphicon-fire { -animation: spin .2s infinite linear; -webkit-animation: spin2 .2s infinite linear;
}
@-webkit-keyframes spin2 { from { -webkit-transform: rotate(0deg);} to { -webkit-transform: rotate(12deg);}
}
@keyframes spin { from { transform: scale(1) rotate(12deg);} to { transform: scale(1) rotate(-12deg);}
}
/* ======================== Loading spinners ======================== */
.loading-spinner { display: inline-block; width: 32px; height: 32px; vertical-align: middle; background: url(assets/img/spinner_black.gif); }
.cssanimations .loading-spinner { background: none; font: 32px/32px FontAwesome; color: #76d898; -webkit-animation: fa-spin 2s infinite linear; -moz-animation: fa-spin 2s infinite linear; -o-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; }
.cssanimations .loading-spinner:before { content: "\f110"; }
/* ======================== Call To Action Panel ======================== */
.well.call-to-action { padding-top: 30px; padding-bottom: 30px; margin-bottom: 40px; }
.well.call-to-action h3 { font-size: 28px; font-weight: bold; margin-top: 15px; margin-bottom: 15px; }
.well.call-to-action h3 + a.btn { margin-top: 20px; }
@media (max-width: 1199px) { .well.call-to-action a.btn { margin-top: 20px; } }
.well.call-to-action a.btn { margin-bottom: 0; }
/* ======================== Scroll to Top button ======================== */
#azl_scroll_up { position: fixed; z-index: 1000000; right: 0; bottom: 20px; width: 40px; height: 40px; background-color: #282D31; color: #DDDFFF; text-align: center; line-height: 40px; font-size: 24px; border-radius: 4px; -webkit-transform: translateX(100%) translateZ(0); -ms-transform: translateX(100%) translateZ(0); transform: translateX(100%) translateZ(0); -webkit-transition: all ease .3s; transition: all ease .3s; }
/*!========================================================================== Helpers ========================================================================== */
/* ======================== Text helpers ======================== */
.text-transform-none { text-transform: none; }
/* ======================== Effects & Animations ======================== */
.img-eye-hover { display: inline-block; vertical-align: bottom; position: relative; overflow: hidden; text-decoration: none; }
.img-eye-hover > img { -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; transform-style: preserve-3d; }
.img-eye-hover:hover:after { content: "\f06e"; display: block; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -16px 0 0 -15px; font: 40px/40px FontAwesome; color: white; }
.img-eye-hover:hover > img { transform: scale(1.3); -ms-transform: scale(1.3); /* IE 9 */ -moz-transform: scale(1.3); /* Firefox */ -webkit-transform: scale(1.3); /* Safari and Chrome */ -o-transform: scale(1.3); /* Opera */ }
.img-zoom-hover { display: inline-block; position: relative; vertical-align: bottom; overflow: hidden; }
.img-zoom-hover > img { -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; transform-style: preserve-3d; }
.img-zoom-hover:hover > img { transform: scale(1.3); -ms-transform: scale(1.3); /* IE 9 */ -moz-transform: scale(1.3); /* Firefox */ -webkit-transform: scale(1.3); /* Safari and Chrome */ -o-transform: scale(1.3); /* Opera */ }
.img-zoom-hover:hover .hover-icon { opacity: 1; }
.img-zoom-hover .hover-icon { display: block; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -16px 0 0 -15px; opacity: 0; font-size: 40px; color: white; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
/* ======================== Other ======================== */
.display-block { display: block; }
.margin-btm-lg { margin-bottom: 40px; }
.margin-btm-md { margin-bottom: 30px; }
.margin-btm-sm { margin-bottom: 20px; }
.col-margin-lg .row > div { margin-bottom: 40px; }
.col-margin-md .row > div { margin-bottom: 20px; }
.col-margin-sm .row > div { margin-bottom: 10px; }
.no-padding { padding: 0; }
.no-margin { margin: 0; }
.middle { width: 100%; height: 100%; display: table; }
.middle .middle-inner { width: 100%; height: 100%; display: table-cell; vertical-align: middle; }
.responsive-embed { position: relative; width: 100%; padding-bottom: 56.25%; }
.responsive-embed iframe, .responsive-embed object, .responsive-embed embed, .responsive-embed video, .responsive-embed .wp-video { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
.responsive-embed .mejs-container, .responsive-embed .mejs-overlay { width: 100% !important; height: 100% !important; }
.fullsize-embed { width: 100% !important; height: 100% !important; }
.fullsize-embed iframe, .fullsize-embed object, .fullsize-embed embed, .fullsize-embed video, .fullsize-embed .wp-video, .fullsize-embed .mejs-container, .fullsize-embed .mejs-overlay { width: 100% !important; height: 100% !important; }
.wp-video-shortcode { width: 100% !important; height: 100% !important; max-width: 100%; }
@media (min-width: 768px) { [data-animate] { opacity: 0; } }
.image-fit img { width: 100%; }
.shadow-down { box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.4); }
.parallax { background-position: center; }
@media (min-width: 1200px) { .parallax { background-size: 100%; } }
.full-width-height { width: 100%; height: 100%; }
.pie-label { display: block; margin-top: -18px; margin-bottom: 10px; font-size: 15px; text-transform: uppercase; }
@media (min-width: 992px) { .col-md-5cols { width: 20%; } }
.addthis_sharing_toolbox { display: inline-block; }
#map-canvas img { max-width: none; }
.intense-zoom-img { cursor: move; } }FireHazard Landing Page - Script Codes JS Codes
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var particles = [];
var particle_count = 15;
for(var i=0; i<particle_count; i++){ particles.push(new particle());
}
function loop() { requestAnimationFrame(loop); draw();
}
function particle() { this.loc = {x:canvas.width/2,y:canvas.height/2 + 50}; this.speed = {x: Math.random()*1,y:-10+Math.random()*10}; this.radius = 2+Math.random()*20; this.life = 2+Math.random()*12; this.remaining_life = this.life; this.color = {}; this.color.r=Math.floor(Math.random()*225); this.color.g=Math.floor(Math.random()*225); this.color.b=Math.floor(Math.random()*22);
}
function draw() { ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = '#000'; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.globalCompositeOperation = 'lighter'; for(var i=0; i<particles.length; i++){ var p = particles[i]; ctx.beginPath(); p.opacity = Math.round(p.remaining_life/ p.life*34)/12; var gradient = ctx.createRadialGradient(p.loc.x, p.loc.y, 0, p.loc.x, p.loc.y, p.radius); gradient.addColorStop(0, "rgba(" + p.color.r + "," + p.color.g + "," + p.color.b + "," + p.opacity + ")" ); gradient.addColorStop(0.5, "rgba(" + p.color.r + "," + p.color.g + "," + p.color.b + "," + p.opacity + ")" ); gradient.addColorStop(1, "rgba(" + p.color.r + "," + p.color.g + "," + p.color.b + ", 0)" ); ctx.fillStyle = gradient; ctx.arc(p.loc.x, p.loc.y, p.radius, 0, Math.PI*2, false); ctx.fill(); p.remaining_life--; p.radius--; p.loc.x += p.speed.x; p.loc.y += p.speed.y; if(p.remaining_life<0 || p.radius <0){ particles[i] = new particle(); } }
}
loop();
| Developer | Calvin |
| Username | CalvinMorett |
| Uploaded | August 11, 2022 |
| Rating | 3 |
| Size | 16,725 Kb |
| Views | 20,240 |
Do you need developer help for FireHazard Landing Page?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Calvin (CalvinMorett) Script Codes
| Name | Size |
| Column | 3,178 Kb |
| CoNTENT | 25,772 Kb |
| Portfolio Base | 3,869 Kb |
| A Pen by Calvin | 30,237 Kb |
| The word good is bad. | 2,101 Kb |
| Staff Page Mockup | 3,633 Kb |
| IDEA BLOCKS | 20,705 Kb |
| Sidebar Nav | 16,349 Kb |
| Fixed-width Single Page Portfolio | 4,187 Kb |
| CLG Web Design Concept | 6,672 Kb |
Create amazing Facebook ads with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Shopping List | Markmurray | 6,015 Kb |
| Slide In Panel | Vikvarg | 2,811 Kb |
| CSSOff 2013 Submission | Codewunder | 14,766 Kb |
| Price Comparison Table | Orrinward | 3,459 Kb |
| Mobile Nav Menu | AliKlein | 4,745 Kb |
| Image Hover | Johnheiner | 3,409 Kb |
| Blog demo to use given styling | Andygirl | 2,412 Kb |
| DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
| BSP Dungeon Generation | Xgundam05 | 5,326 Kb |
| TheCalendar.js | The-teacher | 6,330 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!