Skip to content

Instantly share code, notes, and snippets.

@calvinmorett

calvinmorett/FireHazard Landing Page.markdown

Last active September 23, 2018 23:38
Show Gist options
  • Save calvinmorett/6013bbf6030229e975e6 to your computer and use it in GitHub Desktop.
Save calvinmorett/6013bbf6030229e975e6 to your computer and use it in GitHub Desktop.
Download ZIP
FireHazard Landing Page /codepen/bg.mp4
Raw
FireHazard Landing Page.markdown
Raw
firehazard-landing-page-codepen-bg-mp4.markdown

FireHazard Landing Page /codepen/bg.mp4

Styling an html video with webkit filters

A Pen by Calvin on CodePen.

License.

Raw
index.html
<body>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" id="googlefonts-css" href="" 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: 100%">
<source src="https://storage.googleapis.com/coverr-main/mp4/Fire-Snow.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="https://www.codepen.io/tag/fashion/" class="tag-link-4" title="8 topics" style="font-size: 12px;">Fashion</a>
<a href="https://www.codepen.io/tag/style/" class="tag-link-6" title="7 topics" style="font-size: 12px;">Style</a>
<a href="https://www.codepen.io/tag/beauty/" class="tag-link-2" title="7 topics" style="font-size: 12px;">Beauty</a>
<a href="https://www.codepen.io/tag/entertainment/" class="tag-link-3" title="6 topics" style="font-size: 12px;">Entertainment</a>
<a href="https://www.codepen.io/tag/gallery/" class="tag-link-21" title="5 topics" style="font-size: 12px;">Gallery</a>
<a href="https://www.codepen.io/tag/featured/" class="tag-link-19" title="5 topics" style="font-size: 12px;">Featured</a>
<a href="https://www.codepen.io/tag/fall/" class="tag-link-18" title="5 topics" style="font-size: 12px;">Fall</a>
<a href="https://www.codepen.io/tag/trends/" class="tag-link-48" title="2 topics" style="font-size: 12px;">Trends</a>
<a href="https://www.codepen.io/tag/outfits/" class="tag-link-35" title="2 topics" style="font-size: 12px;">Outfits</a>
<a href="https://www.codepen.io/tag/outfit/" class="tag-link-34" title="2 topics" style="font-size: 12px;">Outfit</a>
<a href="https://www.codepen.io/tag/hair/" class="tag-link-23" title="2 topics" style="font-size: 12px;">Hair</a>
<a href="https://www.codepen.io/tag/bangs/" class="tag-link-10" title="1 topic" style="font-size: 12px;">Bangs</a>
<a href="https://www.codepen.io/tag/black/" class="tag-link-11" title="1 topic" style="font-size: 12px;">Black</a>
<a href="https://www.codepen.io/tag/awkward/" class="tag-link-9" title="1 topic" style="font-size: 12px;">Awkward</a>
<a href="https://www.codepen.io/tag/accessories/" class="tag-link-8" title="1 topic" style="font-size: 12px;">Accessories</a>
<a href="https://www.codepen.io/tag/2-broke-girls/" class="tag-link-7" title="1 topic" style="font-size: 12px;">Babe City</a>
<a href="https://www.codepen.io/tag/breaking-bad/" class="tag-link-12" title="1 topic" style="font-size: 12px;">Breaking Bad</a>
<a href="https://www.codepen.io/tag/brunch/" class="tag-link-13" title="1 topic" style="font-size: 12px;">Brunch</a>
<a href="https://www.codepen.io/tag/leather/" class="tag-link-28" title="1 topic" style="font-size: 12px;">Leather</a>
<a href="https://www.codepen.io/tag/jacket/" class="tag-link-27" title="1 topic" style="font-size: 12px;">Jacket</a>
<a href="https://www.codepen.io/tag/lipstick/" class="tag-link-29" title="1 topic" style="font-size: 12px;">PAPER</a>
<a href="https://www.codepen.io/tag/mens/" class="tag-link-30" title="1 topic" style="font-size: 12px;">SHOES</a>
<a href="https://www.codepen.io/tag/nyfw/" class="tag-link-33" title="1 topic" style="font-size: 12px;">NSFW</a>
<a href="https://www.codepen.io/tag/nail/" class="tag-link-32" title="1 topic" style="font-size: 12px;">MAIL</a>
<a href="https://www.codepen.io/tag/modern-family/" class="tag-link-31" title="1 topic" style="font-size: 12px;">THE SIMPSONS</a>
<a href="https://www.codepen.io/tag/hispter/" class="tag-link-26" title="1 topic" style="font-size: 12px;">ANIMATION</a>
<a href="https://www.codepen.io/tag/handbags/" class="tag-link-25" title="1 topic" style="font-size: 12px;">ILLUSTRATION</a>
<a href="https://www.codepen.io/tag/closet/" class="tag-link-15" title="1 topic" style="font-size: 12px;">FONTS</a>
<a href="https://www.codepen.io/tag/denim/" class="tag-link-16" title="1 topic" style="font-size: 12px;">ART</a>
<a href="https://www.codepen.io/tag/discovery/" class="tag-link-17" title="1 topic" style="font-size: 12px;">GRAPHIC DESIGN</a>
<a href="https://www.codepen.io/tag/hairstyles/" class="tag-link-24" title="1 topic" style="font-size: 12px;">INTERIOR DESIGN</a>
<a href="https://www.codepen.io/tag/gym/" class="tag-link-22" title="1 topic" style="font-size: 12px;">GERMAN</a>
<a href="https://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>
Raw
script.js
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();
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=Abel);
html{background:#000;}
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:1px solid rgba(0,0,0,0);
text-shadow: 0 0 #000;
-webkit-transition: all 0.2s, box-shadow .4s ease;
-o-transition: all 0.2s, box-shadow .4s ease;
transition: all 0.2s, box-shadow .4s ease;
}
#nav1 .navlinks li a:hover {
border-top:none;
background:#none;
box-shadow:0 2px 0 0 #e1e1e1;
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(https://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;
}
<!--https://i.imgur.com/lpmA2gd.png-->
.fb-but1 {
background: url(https://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(https://i.imgur.com/lpmA2gd.png) -30px 0;
background: url(https://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(https://i.imgur.com/lpmA2gd.png) -60px 0;
}
.google-but1 {
background: url(https://i.imgur.com/lpmA2gd.png) -90px 0;
}
.social-box {
background: url(https://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(https://i.imgur.com/lpmA2gd.png) 0 0;
}
.fb-but:hover {
background: url(https://i.imgur.com/lpmA2gd.png) 0 -25px;
}
.twitter-but {
background: url(https://i.imgur.com/lpmA2gd.png) -25px 0;
}
.twitter-but:hover {
background: url(https://i.imgur.com/lpmA2gd.png) -25px -25px;
}
.pinterest-but {
background: url(https://i.imgur.com/lpmA2gd.png) -50px 0;
}
.pinterest-but:hover {
background: url(https://i.imgur.com/lpmA2gd.png) -50px -25px;
}
.google-but {
background: url(https://i.imgur.com/lpmA2gd.png) -75px 0;
}
.google-but:hover {
background: url(https://i.imgur.com/lpmA2gd.png) -75px -25px;
}
.instagram-but {
background: url(https://i.imgur.com/lpmA2gd.png) -100px 0;
}
.instagram-but:hover {
background: url(https://i.imgur.com/lpmA2gd.png) -100px -25px;
}
.youtube-but {
background: url(https://i.imgur.com/lpmA2gd.png) -125px 0;
}
.youtube-but:hover {
background: url(https://i.imgur.com/lpmA2gd.png) -125px -25px;
}
.linkedin-but {
background: url(https://i.imgur.com/lpmA2gd.png) -150px 0;
}
.linkedin-but:hover {
background: url(https://i.imgur.com/lpmA2gd.png) -150px -25px;
}
.rss-but {
background: url(https://i.imgur.com/lpmA2gd.png) -175px 0;
}
.rss-but:hover {
background: url(https://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(https://i.imgur.com/lpmA2gd.png) 0 0;
-webkit-transition: all 0s;
-o-transition: all 0s;
transition: all 0s;
outline: none;
}
.fb-but2 {
background: url(https://i.imgur.com/lpmA2gd.png) 0 0px;
}
.fb-but2:hover {
background: url(https://i.imgur.com/lpmA2gd.png) 0 -50px;
}
.twitter-but2 {
background: url(https://i.imgur.com/lpmA2gd.png) -25px 0px;
}
.twitter-but2:hover {
background: url(https://i.imgur.com/lpmA2gd.png) -25px -50px;
}
.pinterest-but2 {
background: url(https://i.imgur.com/lpmA2gd.png) -50px 0px;
}
.pinterest-but2:hover {
background: url(https://i.imgur.com/lpmA2gd.png) -50px -50px;
}
.google-but2 {
background: url(https://i.imgur.com/lpmA2gd.png) -75px 0px;
}
.google-but2:hover {
background: url(https://i.imgur.com/lpmA2gd.png) -75px -50px;
}
.instagram-but2 {
background: url(https://i.imgur.com/lpmA2gd.png) -100px 0px;
}
.instagram-but2:hover {
background: url(https://i.imgur.com/lpmA2gd.png) -100px -50px;
}
.youtube-but2 {
background: url(https://i.imgur.com/lpmA2gd.png) -125px 0px;
}
.youtube-but2:hover {
background: url(https://i.imgur.com/lpmA2gd.png) -125px -50px;
}
.linkedin-but2 {
background: url(https://i.imgur.com/lpmA2gd.png) -150px 0px;
}
.linkedin-but2:hover {
background: url(https://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(https://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; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment