<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid" style="background:#fff; border-bottom:1px solid #d1d1d1;">
<div class="container">
<!-- Topper w/ logo -->
<div class="row hidden-xs topper">
<div class="col-xs-7 col-sm-7">
<a href="//convertify.io"><img am-TopLogo alt="SECUREVIEW" src="http://blog.convertify.io/assets/images/logo--hero.png" class="img-responsive"></a>
</div>
<div class="col-xs-5 col-xs-offset-1 col-sm-5 col-sm-offset-0 text-right ">
<span>Already a member?</span>
<span>Already a member?</span>
<span>Already a member?</span>
</div>
</div> <!-- End Topper -->
</div>
</div>
<div class="container-fluid">
<!-- Navigation -->
<div class="container">
<div class="row">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs-inline-block nav-logo" href="/"><img src="/images/logo-dark-inset.png" class="img-responsive" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav js-nav-add-active-class">
<li><a href="/index.html">Home</a></li>
<li class="active"><a href="/markets.html">Markets</a></li>
<li><a href="/buy.html">Buy</a></li>
<li><a href="/svstrike.html">svStrike</a></li>
<li><a href="/training.html">Training</a></li>
<li><a href="/contact.html">Contact Us</a></li>
<li class="visible-xs-block"><a href="/about.html">About Us</a></li>
<li class="visible-xs-block"><a href="/careers.html">Careers</a></li>
<li class="visible-xs-block"><a href="/press-release.html">Press Release</a></li>
<li class="visible-xs-block"><a href="https://susteen7.zendesk.com/hc/en-us">Support</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Company <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="about.html">About Us</a></li>
<li><a href="careers.html">Careers</a></li>
<li><a href="press-release.html">Press Release</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-xs">
<a type="button" class="navbar-btn btn btn-gradient-blue" am-latosans="bold" href="https://susteen7.zendesk.com/hc/en-us">Support</a>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</div>
</div>
</div>
<div class="container-fluid intro-header" style="background-image: url('http://lorempixel.com/output/people-q-c-1920-1080-4.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3">
<div class="quick-links">
<p><a href="#" class="btn btn-block btn-primary">Demo Primary Button</a></p>
<p><a href="#" class="btn btn-block btn-primary">Demo Primary Button</a></p>
<p><a href="#" class="btn btn-block btn-primary">Demo Primary Button</a></p>
<p><a href="#" class="btn btn-block btn-primary">Demo Primary Button</a></p>
</div>
</div>
<div class="col-lg-9 col-md-9">
<div class="search">
<input type="text" class="form-control input-sm" maxlength="64" placeholder="Search" />
<button type="submit" class="btn btn-primary btn-sm">Search</button>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="container">
<div class="heading">
<h2>Our <strong>Great Team</strong></h2>
<p>To try the most advanced business</p>
</div><!-- //end heading -->
<div class="row work-section">
<div class="col-xs-6 col-sm-4 col-md-3">
<div class="project">
<figure class="img-responsive">
<img src="http://dev.cybercat.ca/commonwealth/images/1000006_230x230.jpg">
<span class="actions">
<span class="project-details">Mélamine Tafisa</span>
</span>
</figure>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<div class="project">
<figure class="img-responsive">
<img src="http://dev.cybercat.ca/commonwealth/images/1000568_230x230.jpg">
<span class="actions">
<span class="project-details">Bandes de chant en ABS / PVC</span>
</span>
</figure>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<div class="project">
<figure class="img-responsive">
<img src="http://dev.cybercat.ca/commonwealth/images/1000569_230x230.jpg">
<span class="actions">
<span class="project-details">Bandes de chant en polyester</span>
</span>
</figure>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<div class="project">
<figure class="img-responsive">
<img src="http://dev.cybercat.ca/commonwealth/images/1000571_230x230.jpg">
<span class="actions">
<span class="project-details">Bandes de chant en mélamine</span>
</span>
</figure>
</div>
</div>
</div>
<div class="heading">
<h2>Our <strong>Great Team</strong></h2>
<p>To try the most advanced business</p>
</div><!-- //end heading -->
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="progress yellow">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">75%</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="progress yellow">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">75%</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="progress yellow">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">75%</div>
</div>
</div>
</div>
<div class="heading">
<h2>Our <strong>Great Team</strong></h2>
<p>To try the most advanced business</p>
</div><!-- //end heading -->
<div class="row">
<div class="col-sm-4">
<div class="team-members">
<div class="team-avatar">
<img class="img-responsive" src="http://keenthemes.com/assets/bootsnipp/member1.png" alt="">
</div>
<div class="team-desc">
<h4>John Doe</h4>
<span>Marketing</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="team-members">
<div class="team-avatar">
<img class="img-responsive" src="http://keenthemes.com/assets/bootsnipp/member2.png" alt="">
</div>
<div class="team-desc">
<h4>Melisa Doe</h4>
<span>Founder</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="team-members">
<div class="team-avatar">
<img class="img-responsive" src="http://keenthemes.com/assets/bootsnipp/member3.png" alt="">
</div>
<div class="team-desc">
<h4>Alex Atkinson</h4>
<span>Director</span>
</div>
</div>
</div>
</div><!-- //end row -->
</div>
</div>
<div class="container-fluid">
<div class="container">
<!--footer-->
<footer class="footer1">
<div class="container">
<div class="row"><!-- row -->
<div class="col-lg-3 col-md-3"><!-- widgets column left -->
<ul class="list-unstyled clear-margins"><!-- widgets -->
<li class="widget-container widget_nav_menu"><!-- widgets list -->
<h1 class="title-widget">Useful links</h1>
<ul>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
</ul>
</li>
</ul>
</div><!-- widgets column left end -->
<div class="col-lg-3 col-md-3"><!-- widgets column left -->
<ul class="list-unstyled clear-margins"><!-- widgets -->
<li class="widget-container widget_nav_menu"><!-- widgets list -->
<h1 class="title-widget">Useful links</h1>
<ul>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
</ul>
</li>
</ul>
</div><!-- widgets column left end -->
<div class="col-lg-3 col-md-3"><!-- widgets column left -->
<ul class="list-unstyled clear-margins"><!-- widgets -->
<li class="widget-container widget_nav_menu"><!-- widgets list -->
<h1 class="title-widget">Useful links</h1>
<ul>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li>
</ul>
</li>
</ul>
</div><!-- widgets column left end -->
<div class="col-lg-3 col-md-3"><!-- widgets column center -->
<ul class="list-unstyled clear-margins"><!-- widgets -->
<li class="widget-container widget_recent_news"><!-- widgets list -->
<h1 class="title-widget">Contact Detail </h1>
<div class="footerp">
<h2 class="title-median">Flintdesignz (PTY) Ltd.</h2>
<p><b>Email id:</b> <a href="mailto:info@webenlance.com">info@flintdesignz.com</a></p>
<p><b>Helpline Numbers </b>
<b style="color:#ffc106;">(8AM to 10PM):</b> +27 835547421</p>
<p><b>Lorem Address</b></p>
<p><b>Phone Numbers : </b>+27 835547421, </p>
</div>
<div class="social-icons">
<ul class="nomargin">
<a href="https://www.facebook.com/#"><i class="fa fa-facebook-square fa-3x social-fb" id="social"></i></a>
<a href="https://twitter.com/#"><i class="fa fa-twitter-square fa-3x social-tw" id="social"></i></a>
<a href="https://plus.google.com/#"><i class="fa fa-google-plus-square fa-3x social-gp" id="social"></i></a>
<a href="mailto:#"><i class="fa fa-envelope-square fa-3x social-em" id="social"></i></a>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!--header-->
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="copyright">
© 2017, Flintdesignz, All rights reserved
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="design">
<a target="_blank" href="#">Web Design & Development by Flintdesignz</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
[am-LatoSans] {
font-family: 'Lato', sans-serif;
}
[am-TopLogo] {
max-height: 70px;
max-width: 210px;
margin: 12px 11px;
}
[am-CallNow] {
font-weight: 200;
color: #333;
vertical-align: middle;
line-height: 35px;
font-size: 19px;
padding-right: 8px;
}
/*
Relevant styles below
*/
.topper {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.navbar.navbar-inverse {
}
.navbar .navbar-nav > li > a {
color: #d1d1d1;
font-weight: 700;
line-height: 18px;
}
.navbar .navbar-nav > li.active {
color: #f8f8f8;
border-left: 1px solid #2A2A2A;
border-right: 1px solid #272727;
}
.navbar-inverse {
background-color:#fff;
border:none;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
background-color: transparent;
color: #d1d1d1;
}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
color: #d1d1d1;
background-color: transparent;
}
.navbar .navbar-nav > li.active {
color: #d1d1d1;
border:none;
}
.intro-header {
background-color: #777777;
background: no-repeat center center;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
margin-bottom: 50px;
/*width:100vw;*/
height: 100vh;
padding: 50px;
}
.search {
padding: 5px 0;
height: 30px;
position: relative;
line-height: 22px;
}
/*.search input {*/
/* position: absolute;*/
/* width: 0px;*/
/* float: Left;*/
/* margin-left: 210px;*/
/* -webkit-transition: all 0.7s ease-in-out;*/
/* -moz-transition: all 0.7s ease-in-out;*/
/* -o-transition: all 0.7s ease-in-out;*/
/* transition: all 0.7s ease-in-out;*/
/* height: 30px;*/
/* line-height: 18px;*/
/* padding: 0 2px 0 2px;*/
/* border-radius:1px;*/
/*}*/
.search:hover input, .search input:focus {
/*width: 200px;*/
margin-left: 0px;
}
.project {
margin-bottom: 30px;
vertical-align: top;
margin-right: 30px;
float: left;
cursor: pointer;
width:100%;
background:blue;
}
.project figure {
position: relative;
display: inline-block;
}
.project figure img {
width: 100%;
}
.project figure:hover figcaption {
background:#d81e05;
}
.project figure:hover figcaption .project-details {
color: #fff;
}
.project figure:hover .actions {
background-color: rgba(216,30,5,.8);
top: 0%;
font-size:2.3em;
font-weight:700;
padding-top:10%;
}
.project figure .actions {
display: table-cell;
position: absolute;
bottom: 0px;
top: 50%;
left:0;
right:0;
z-index: 1;
opacity: 1;
background-color: rgba(29,29,29,.5);
-ms-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
color:#fff;
font-size:2em;
padding:2%;
font-weight:400;
text-align:center;
vertical-align: middle;
}
@media (min-width: 992px) {
.project figure .actions {
top: 60%;
left:0;
right:0;
font-size:1.5em;
padding:2%;
}
.project figure:hover .actions {
top: 0%;
font-size:2em;
padding-top:20%;
}
}
@media (min-width: 1200px) {
.project figure .actions {
top: 65%;
left:0;
right:0;
font-size:1.1em;
padding:2%;
font-weight:400;
}
.project figure:hover .actions {
top: 0%;
font-size:1.5em;
padding-top:25%;
}
}
.progress{
width: 150px;
height: 150px;
line-height: 150px;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
}
.progress:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress > span{
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left{
left: 0;
}
.progress .progress-bar{
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar{
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right{
right: 0;
}
.progress .progress-right .progress-bar{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
width: 90%;
height: 90%;
border-radius: 50%;
background: #44484b;
font-size: 24px;
color: #fff;
line-height: 135px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar{
border-color: #049dff;
}
.progress.blue .progress-left .progress-bar{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
border-color: #fdba04;
}
.progress.yellow .progress-left .progress-bar{
animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar{
border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar{
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar{
border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar{
animation: loading-5 1.2s linear forwards 1.8s;
}
@keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
@keyframes loading-2{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
@keyframes loading-3{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@keyframes loading-4{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
@keyframes loading-5{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
@media only screen and (max-width: 990px){
.progress{ margin-bottom: 20px; }
}
.content {
padding-top: 30px;
}
/* Heading */
.heading {
z-index: 1;
position: relative;
text-align: center;
margin-bottom: 100px;
}
.heading:after {
left: 50%;
height: 3px;
width: 50px;
content: " ";
bottom: -35px;
margin-left: -25px;
position: absolute;
background: #444;
}
.heading h2 {
font-size: 40px;
font-weight: 500;
margin: 0 0 20px;
color: #444;
}
.heading p {
font-size: 16px;
font-weight: 300;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #8693a7;
}
/* Team Members */
.team-members {
width: 100%;
cursor: pointer;
overflow: hidden;
position: relative;
margin-bottom: 35px;
}
.team-members .team-avatar {
position: relative;
}
.team-members .team-avatar:after {
top: 0;
left: 0;
width: 100%;
height: 100%;
content: " ";
position: absolute;
background: rgba(129, 129, 129, 0.1);
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.team-members .team-avatar img {
display: block;
margin: 0 auto;
text-align: center;
}
.team-members .team-desc {
left: auto;
bottom: 0;
width: 100%;
padding: 0 20px;
position: absolute;
opacity: 0;
color: #fff;
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.team-members .team-desc h4 {
font-size: 22px;
font-weight: 600;
margin: 0 0 10px;
color: #fff;
}
.team-members .team-desc span {
display: block;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
color: #fff;
}
.team-members:hover .team-avatar:after {
background: rgba(47, 60, 72, 0.5);
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.team-members:hover .team-desc {
-webkit-transform: translate3d(0, -5%, 0);
transform: translate3d(0, -5%, 0);
-webkit-transform: translate3d(0, -10%, 0);
transform: translate3d(0, -10%, 0);
}
.team-members:hover .team-desc {
opacity: 1;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.footer1 {
background: #fff url("../images/footer/footer-bg.png") repeat scroll left top;
padding-top: 40px;
padding-right: 0;
padding-bottom: 20px;
padding-left: 0;/* border-top-width: 4px;
border-top-style: solid;
border-top-color: #003;*/
}
.title-widget {
color: #898989;
font-size: 20px;
font-weight: 300;
line-height: 1;
position: relative;
text-transform: uppercase;
font-family: 'Fjalla One', sans-serif;
margin-top: 0;
margin-right: 0;
margin-bottom: 25px;
margin-left: 0;
padding-left: 28px;
}
.title-widget::before {
background-color: #ea5644;
content: "";
height: 22px;
left: 0px;
position: absolute;
top: -2px;
width: 5px;
}
.widget_nav_menu ul {
list-style: outside none none;
padding-left: 0;
}
.widget_archive ul li {
background-color: rgba(0, 0, 0, 0.3);
content: "";
height: 3px;
left: 0;
position: absolute;
top: 7px;
width: 3px;
}
.widget_nav_menu ul li {
font-size: 13px;
font-weight: 700;
line-height: 20px;
position: relative;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
margin-bottom: 7px;
padding-bottom: 7px;
width:95%;
}
.title-median {
color: #636363;
font-size: 20px;
line-height: 20px;
margin: 0 0 15px;
text-transform: uppercase;
font-family: 'Fjalla One', sans-serif;
}
.footerp p {font-family: 'Gudea', sans-serif; }
#social:hover {
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
}
#social {
-webkit-transform:scale(0.8);
/* Browser Variations: */
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
/*
Only Needed in Multi-Coloured Variation
*/
.social-fb:hover {
color: #3B5998;
}
.social-tw:hover {
color: #4099FF;
}
.social-gp:hover {
color: #d34836;
}
.social-em:hover {
color: #f39c12;
}
.nomargin { margin:0px; padding:0px;}
.footer-bottom {
background-color: #15224f;
min-height: 30px;
width: 100%;
}
.copyright {
color: #fff;
line-height: 30px;
min-height: 30px;
padding: 7px 0;
}
.design {
color: #fff;
line-height: 30px;
min-height: 30px;
padding: 7px 0;
text-align: right;
}
.design a {
color: #fff;
}
.quick-links {
width:262px;
transition:all .2s ease;
}
.pos-fixed {
position:fixed;
width:262px;
z-index:9999;
}
$(function(){
$(window).scroll(function(e) {
if($(this).scrollTop()>352){
$('.quick-links').addClass('pos-fixed');
$('.work-section > .col-sm-4').removeClass('col-md-3');
$('.work-section > .col-sm-4').addClass('col-md-6');
$('.work-section').addClass('col-md-offset-3');
// Fading in the button on scroll after 150px
}
else{
$('.work-section > .col-sm-4').removeClass('col-md-6');
$('.work-section > .col-sm-4').addClass('col-md-3');
$('.work-section').removeClass('col-md-offset-3');
$('.work-section').removeClass('col-md-offset-3');
// Fading out the button on scroll if less than 150px
}
});
});
