gistfile1

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

.right {float:right;}
.left {float:left;}

/* bannerSliders
-------------------------------------------------- */
header {
   padding: 0;
}

.bannerSlider {
  min-width: 940px;
  height: 406px;
  padding: 0px 0 0 0; 
  background: url("/wp-content/themes/sni/images/site/bg-grid.png"), #f1f1f1; 
  border-bottom: 1px solid #d4d4d4;
  display: block;
  
  h1, p {
    margin-bottom: 9px;
    color: #333;
    text-align: left;
    text-shadow: 0 1px 1px rgba(0,0,0,.1);
  }
  
  h1 {
    font-size: 54px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
  }
  
  p {
    font-weight: 300;
  }
  
  .lead {
    font-size: 20px;
    line-height: 27px;
  }
  
  p a {
    color: #78a12e;
    font-weight: bold;
  }
  
  ul {
     li {
        font-size: 1.2em;
        font-weight: bold;
        padding: 0 0 12px 0;
     }
  }
  
  img {
     padding: 0;
     margin: 0;
  }
} 



/* Home page stuff
------------------------------------------------------ */
hgroup {
   h1 {
      margin: 16px 0 0 0;
   }
   h4 {
      font-size: 1.0em;
      margin: 0 0 16px 0;
      line-height: 1.0em;
   }
}

/*  Home page blog feed
------------------------------------------------------ */
.blogFeed {
   padding: 0 0 16px 0;
   
   .post {
      background: #ffffff;
      border-bottom: 2px solid #e7e7e7;
      float: left;
      display: inline-block;
      margin: 0 0 16px 16px;
      min-height: 350px;
      border: 1px solid #e7e7e7;  
      cusor: pointer;
      
      a, a:hover {
         text-decoration: none;
      }
      
      
      img {
         width: 230px;
         height: 230px;
         display: block;
         background: url("<?php echo $thumb_url ;?>") no-repeat scroll right bottom #FFFFFF;
      }
      
      span.type {
         padding: 6px 5px 3px 8px; 
         margin: 0;
         color: #ffffff;
         text-transform: uppercase;
         display: block; 
         font-size: 1.1em;         
         
         &.event {
            background: #1e1e1e;
            border-bottom: 7px solid @greenBlue;
         }
         &.article {
            background: #1e1e1e;
            border-bottom: 7px solid @green;
         }
         &.product {
            background: #1e1e1e;
            border-bottom: 7px solid @red;
         }
      }
     h3 a, h3 {             
        margin: 8px 0;
        color: #555555;
        font-size: 1.3em;
        line-height: 1.0em;
        font-weight: bold;
        padding: 0 8px;
     }                   
     h4 a, h4 {
        font-size: 11px;
        line-height: 1.0em;
        margin: 0;
        color: #555555;
        font-weight: normal;
        text-transform: uppercase;
     }
   }
}

.inset {     
   background: #ffffff;
   margin: 16px 0 0 0;
   padding: 16px;  
   
   border: 1px solid hsl(180, 2%, 90%); 
   
   .row {
      position: relative;
      left: 6px;
   } 
   
   img.insetRight {
      position: relative;
      left: 5.5%;
   }
   
   img.insetBottom {
      position: relative;
      top: 16px;
   }
}   

hgroup.lockup {
   img {
      float: left;
   }              
   h3 {
      float: left;
      font-size: 1.7em;
      padding: 10px 0 0 10px;
   }
}  

ul.subnav {
   float: right;
   list-style: none;
   margin: 14px 0 0 0;
   
   li {
      float: left;
      padding: 0 0 0 12px;
      font-size: 1.2em;
      
      a:not(.btn) {
         margin: 5px 0 0 0;
         display: block;
         
         &.current,&:hover {
            border-bottom: solid 2px @green;
            text-decoration: none; 
            cursor: pointer;
            display: block;
         }
      } 
      
   }
} 
   

/*  IMAGE HOVERING 
------------------------------------------------------ */

.view {
   width: 301px;
   height: 200px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   background: #fff url(/wp-content/thems/sni/images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: lowercase;
   color: #ffffff;
   text-align: center;
   position: relative;
   font-size: 1.8em;
   padding: 7px;
   background-color: rgba(120,161,46,0.8);
   margin: 20px 0 0 0;
}
.view p {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;   
   font-size: 1.2em;
   position: relative;
   color: #fff;
   padding: 10px 20px;
   text-align: center;
}

.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background: rgba(0, 0, 0, 0.85);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
         

/* Layout inside of bootstrap grid
----------------------------------*/
.twentyFive {
   width: 23%;
   margin: 0 1%;
   display: inline-block;
} 
.thirty {
   width: 28%;
   margin: 0 1%;
   display: inline-block;
}
.fifty {
   width: 48%;
   margin: 0 1%;         
   display: inline-block;
}         
.sixty {
   width: 58%;
   margin: 0 1%;         
   display: inline-block;
}
.seventy {
   width: 68%;
   margin: 0 1%;         
   display: inline-block;
}
.seventyFive {
   width: 73%;
   margin: 0 1%;         
   display: inline-block;
}  


/*=== Post ===*/
.post {
   min-height: 150px;
}
/*- Post Title -*/
.post-title h1 {
	color: #555555;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: -0.5px;
}
.post-title h1 span {
	color: #555555;
}
.post-title h1.author {
	color: #888888;
	font-size: 14px;
	padding-top: 2px;
}
.post-title h2, .post-title h2 a  { 
   line-height: 1.0em;
	margin: 0 0 .45em;
	color: #555555;
	text-decoration: none;
}
/*- Post Date -*/
.post-date {
	margin: 0 0 1.25em; 
}
.post-date a {
	color: #ffffff;
}
.post-date em {
	background: @grayDark;
	color: #ffffff;
	font-size: .9em;
	font-style: normal;
	padding: 5px 8px;
	line-height: 1.75em;
	border-bottom: 4px solid @green; 
}
/*- Post Excerpt -*/
.post-excerpt {
	display: table;
	font-size: 13px;
	font-style: italic;
	height: 1%;
 /* margin: 0 0 1em; */
}
/*- Post Lists -*/
.post ul, .post ol {
	margin: 0 0 1.5em;
}
.post ul li {
	background: url(images/ico-list.gif) no-repeat 0 6px;
	margin: 0 0 .4em;
	padding: 0 0 0 10px;
}
.post ol li {
	list-style: decimal;
	list-style-position: inside;
	margin: 0 0 .4em;
}
/*- Post Blockquote -*/
.post blockquote {
	border-left: 3px solid #cfcfcf;
	font-size: 13px;
	font-style: italic;
	margin: 0 0 1.5em;
	padding: 5px 0 0 10px;
}
/*- Post Author -*/
.post-author {
	margin: 0 0 1em;
}
.author-details {
	font-size: .85em;
}
.author-descr {
	display: table;
	height: 1%;
}
/*- Social Links -*/
.social-links {
	background: @grayLighter;
	padding: 8px 18px;
	display: block;
}
.social-links .fl {
	line-height: 42px;
	display: inline-block;
}
.social-links .left span {
	font-weight: bold;
	margin-right: 2px;
	display: inline-block;
	color: @grayDark;
}
.social-links .fr {
	padding: 9px 0 0;
	display: inline-block;
}
.social-links .fr span {
	line-height: 21px;
}
.social-links img {
	margin: 0 0 0 2px;
}
/*- Related Posts -*/
.post-rel {
	line-height: 1.5em;
}
.post-rel a {
	color: #33707E;
}
/*- Post Comments -*/
.post-comments .fl {
	width: 80px;
}
.post-comments .fr {
	width: 520px;
} 


/* About page - Team */

article.box {
	cursor: pointer;
	position: relative;
	display: inline-block;
	margin: 0 9px 9px 0;
	
	img {
   	display: block;

   }
   
   a {
      display: inline-block;
      text-decoration: none;
   }
   
   .info {
   	background-color: #2b2b2b;
   	z-index: 1;     
   	height: auto !important;
   	padding: 15px;
   	width: 270px;
   	color: #ffffff;
   	.transition;
   	
   	h1 {
   	   font-family: LeagueGothicRegular;
         text-transform: uppercase;
         font-weight: normal;
         font-size: 2.0em;
         line-height: 1.0em;
         color: #ffffff;
         margin: 0 0 8px 0;
         border-bottom: 2px solid @green;
         display: inline-block; 
         .transition;
   	}
   	
   	h2 {
   	   font-size: 1.0em;
   	   line-height: 1.0em;
   	   color: #ffffff;
   	   margin: 0;
   	}
   }
   
   &.box:hover .info {
      background-color: @green;
      
      
      h1 {
         border-bottom: 2px solid #2b2b2b;
         
      }
   }

} 

.modal-header h3.league {
   font-family: 'LeagueGothicRegular';
   font-size: 3.5em;
   text-transform: uppercase;
   padding: 8px 0;
}

a {                                
   &.email {
      background: url("/wp-content/themes/sni/images/site/icons/email.png") no-repeat;
      padding: 9px 0 9px 36px;
   }
   &.twitter {
      background: url("/wp-content/themes/sni/images/site/icons/twitter.png") no-repeat;
      padding: 9px 0 9px 36px;
   }   
   &.facebook {
      background: url("/wp-content/themes/sni/images/site/icons/facebook.png") no-repeat;
      padding: 9px 0 9px 36px;
   }       
   &.forrst {
      background: url("/wp-content/themes/sni/images/site/icons/forrst.png") no-repeat;
      padding: 9px 0 9px 36px;
   } 
   &.github {
      background: url("/wp-content/themes/sni/images/site/icons/github.png") no-repeat;
      padding: 9px 0 9px 36px;
   }
   &.linkedin {
      background: url("/wp-content/themes/sni/images/site/icons/linkedin.png") no-repeat;
      padding: 9px 0 9px 36px;
   }
}        

li#categories-2 { 
   ul {
      list-style: none;
      margin: 0;
   }
   a {              
      padding: 3px 8px; 
      margin: 0 0 8px 0;
      display: inline-block;
      background: #555555;
      color: #ffffff;
      .roundedCorners;
      
      &:hover {
         text-decoration: none;
         background: #333333;
      }
   }
}       

/* Twitter Reactions */

ul#twitter_reactions {
    width:auto;
    margin:0 0 0px 0;
    padding:0;
    display: block;
}
ul#twitter_reactions li {
    display: inline-block;
    position:relative;
    padding:8px;
    list-style:none;
    background:#ffffff;
    color:#555;
}
ul#twitter_reactions li#reactions_header {
    font-weight:bold;
    font-size: 1.0em;
    padding: 0 0 6px 0;    
    display: block;
}
ul#twitter_reactions li#reactions_header h4 {
    float:right;
    color:#555555;
    font-weight:bold; 
    font-size: 1.5em;
}
ul#twitter_reactions li img {
    float:left;
    width:45px;
    height:45px;
    background:#fff;
    border:none;
}
ul#twitter_reactions li a {
    text-decoration:none;
}
ul#twitter_reactions li small {
    color:#ccc;
    position:absolute;
    bottom:12px;
    right:16px;
}
ul#twitter_reactions li small a {
    color:#bbb;
}
ul#twitter_reactions li small a.reply {
    color:#aaa;
}
ul#twitter_reactions .clear {
    clear:both;
}
@media screen and (max-device-width:480px) {
    body {
        -webkit-text-size-adjust:none;
    }
}   

ul.social { 
   margin: 16px 0 0 0;
   
   li {
   padding: 0px 0 24px 0;
   list-style: none;
   font-size: 1.3em;
   }
}  

.feature img {
   border: 1px solid @grayLight;
}

/* Career listing */
.listing {
   display: block;
   margin: 0 0 16px 0;
   padding: 0 0 16px 0;
   border-bottom: 1px solid @grayLight;
   
   h2 {
      margin: 0;
      line-height: 1.2em;
   } 
   
   h5 {                   
      font-size: 1.2em;
      font-weight: normal;
      color: @gray;
      padding: 0 0 16px 0; 
   }
} 

.widthAuto {
   width: 100%;
   padding: 0;
   margin: 0;
   display: inline-block;
}

.entry-content {
  p {
    font-size: 1.2em;
    line-height: 1.5em;
  }
}

// Brendans pricing table

.pricing-container {
  margin: auto;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  background: #ededed;
  background: -webkit-linear-gradient(top, #ededed, #dddddd);
  background: -moz-linear-gradient(top, #ededed, #dddddd);
  background: -o-linear-gradient(top, #ededed, #dddddd);
  background: -ms-linear-gradient(top, #ededed, #dddddd);
  background: linear-gradient(top, #ededed, #dddddd);
  border: 1px solid #acacac;
  overflow: hidden;
  -webkit-border-radius: 6px 6px 0 0;
  -moz-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
  width: 753px;
}
.panel {
  border-right: 1px solid #ddd;
  width: 250px;
  -webkit-border-radius: 0 0 0 0;
  -moz-border-radius: 0 0 0 0;
  border-radius: 0 0 0 0;
  position: relative;
  float: left;
}
.panel:first-child {
  border-left: none;
}
.panel:last-child {
  border-right: none;
}
.panel .plan-title {
  background: #e6e6e6;
  background: -webkit-linear-gradient(top, #e6e6e6, #bfbfbf);
  background: -moz-linear-gradient(top, #e6e6e6, #bfbfbf);
  background: -o-linear-gradient(top, #e6e6e6, #bfbfbf);
  background: -ms-linear-gradient(top, #e6e6e6, #bfbfbf);
  background: linear-gradient(top, #e6e6e6, #bfbfbf);
  color: #404040;
  padding: 22px 0;
  font-size: 22px;
  text-align: center;
  margin: 0;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  border-bottom: 1px solid #aaa;
  position: relative;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
.coming-soon {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 12px;
  color: whitesmoke;
  background: #a2332f;
  padding: 3px 5px;
  -webkit-border-radius: 0 0px 0px 4px;
  -moz-border-radius: 0 0px 0px 4px;
  border-radius: 0 0px 0px 4px;
  border-left: 1px solid #aa5555;
  border-top: 1px solid #aa0000;
  -webkit-box-shadow: 1px 0 2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 0 2px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.4);
}
.pro .coming-soon {
  -webkit-border-radius: 0 4px 0px 4px;
  -moz-border-radius: 0 4px 0px 4px;
  border-radius: 0 4px 0px 4px;
}
.panel .price {
  font-size: 36px;
  font-weight: bold;
  color: whitesmoke;
  background: #333333;
  background: -webkit-linear-gradient(top, #333333, #2b2b2b);
  background: -moz-linear-gradient(top, #333333, #2b2b2b);
  background: -o-linear-gradient(top, #333333, #2b2b2b);
  background: -ms-linear-gradient(top, #333333, #2b2b2b);
  background: linear-gradient(top, #333333, #2b2b2b);
  padding: 20px 0;
  border-top: 1px solid #aa0000;
  border-bottom: 1px solid #aa0000;
  -webkit-box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.65);
  -moz-box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.65);
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.65);
  display: inline-block;
  width: 100%;
  text-align: center;
  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.65);
  position: relative;
}
ul.features, ul.export-formats {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  text-align: center;
}
ul.features li {
  font-size: 26px;
  font-weight: bold;
  padding: 4px;
}
ul.features li span.forms-amount, ul.features li span.pro-users-amount {
  color: #a2332f;
}
ul.features li span.pro-users-amount {
  border-bottom: 1px dotted #a2332f;
  cursor: pointer;
  padding: 3px;
}
ul.features li span.pro-users-amount:hover {
  background: #FEFEC4;
  border-bottom: 2px dotted #a2332f;
  padding-bottom: 2px;
}
ul.features li.forms-row {
  cursor: default;
}
ul.export-formats .format {
  font-size: 18px;
  color: #404040;
  background: #dbecf5;
  margin: 5px auto;
  padding: 3px 0;
  width: 70%;
  border: 1px solid #b3d7ea;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
input[type="text"] {
  border: 1px solid #ccc;
  padding: 4px 6px;
}
small.annual-cost {
  color: #a2332f;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  font-weight: bold;
  z-index: 30;
  position: relative;
}