<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- References: https://github.com/fancyapps/fancyBox -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-8 m-auto text-center">
<h1>Our protofolio</h1>
<p>
Look out for ingenious, responsive and prolific web solutions and services - all under one roof. Web Designing, Digital Marketing, Content Creation, Multimedia Services, Graphic Designing, Startup Solutions, Animations, AV Solutions, photography, videography, etc. You think of it. We deliver it.
</p>
</div>
</div>
</div>
<section class="tabs-to-accordions">
<div class="container">
<div class="row">
<div class="col-12">
<ul class="nav nav-tabs responsive " role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#over-view" role="tab">Web</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#location" role="tab"> UI Design</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#master-plan" role="tab"> Logo</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#amenities" role="tab"> Flyers</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#location-advantage" role="tab"> Brochure</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#gallery-phase" role="tab">Branding Work</a>
</li>
</ul><!-- Tab panes -->
<div class="tab-content responsive active">
<div class="tab-pane active" id="over-view" role="tabpanel">
<div class="container-fluid">
<div class="row mt-3">
<div class="col-12">
<ul class="row">
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="location" role="tabpanel">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<ul class="row">
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="master-plan" role="tabpanel">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<ul class="row">
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="amenities" role="tabpanel">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<ul class="row">
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="e-brochure" role="tabpanel">
<div class="container-fluid">
<div class="row mt-3">
<div class="col-12">
<ul class="row">
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="location-advantage" role="tabpanel">
<div class="container-fluid">
<div class="row mt-3">
<div class="col-12">
<ul class="row">
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="gallery-phase" role="tabpanel">
<div class="container-fluid">
<div class="row mt-3">
<div class="col-12">
<ul class="row">
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-6">
<div class="isotopeSelector">
<article>
<figure>
<img src="http://placehold.it/320x320" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay list-group">
<div class="inner-overlay">
<div class="inner-overlay-content with-icons">
<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"><i class="fa fa-search"></i></a>
<a href="#" target="_blank"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</figure>
</article>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@import url(https://fonts.googleapis.com/css?family=Raleway|Roboto:400,500,700);
.{
font-family: 'Roboto', sans-serif;
font-family: 'Raleway', sans-serif;
}
body{
padding:0px;
margin:0px;
font-family: 'Roboto', sans-serif !important;
font-size:16px;
font-weight:300 !important;
color:#242424;
}
p {
line-height: 26px;
font-size:16px;
}
h1, h2, h3, h4, h5, h6{
margin:0;
padding:0;
}
h1{
font-family: 'Raleway', sans-serif !important;
font-size:46px !important;
margin-top:20px !important;
}
.btn {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
border-radius:0 !important;
}
.img-center{
margin:0 auto;
}
.tabs-to-accordions{
background:#f5f5f5;
margin:30px 0 0px 0;
padding:50px 0;
}
.nav-link {
display: block;
padding: .5rem 1rem;
color:
#000;
}
.nav-link:hover {
display: block;
padding: .5rem 1rem;
color: #e74c3c;
}
.tab-content {
background: #fdfdfd;
line-height: 25px;
border: 1px solid #ddd;
border-top-color: rgb(221, 221, 221);
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: rgb(221, 221, 221);
border-bottom-style: solid;
border-bottom-width: 1px;
border-top: 5px solid #e74c3c;
border-bottom: 5px solid #e74c3c;
padding: 30px 25px;
}
.tab-content ul{
list-style-type:none;
padding:0;
margin:0;
}
.tab-content ul li{
padding:15px;
margin:0;
}
/* transparent overlay */
.tab-content figure:hover .overlay {
opacity:1;
visibility:visible
}
.tab-content figure:hover .overlay-background {
opacity:.8;
visibility:visible
}
.tab-content figure .overlay-background {
z-index:1;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
position:absolute;
top:0;
left:0;
opacity:0;
visibility:hidden;
width:100%;
height:100%
}
.tab-content figure .overlay-background .inner {
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
margin:11px;
background-color:#c8e9c8;
background-color:rgba(194,231,194,0.9)
}
.tab-content figure .overlay {
z-index:2;
transition:all .2s ease-in-out;
position:absolute;
top:0;
left:0;
opacity:0;
visibility:hidden;
width:100%;
height:100%
}
.tab-content figure .inner-overlay {
display:table;
width:100%;
height:100%
}
.tab-content figure .inner-overlay-content {
display:table-cell;
vertical-align:middle;
width:100%;
padding:20px 40px
}
.tab-content figure .inner-overlay-content.with-icons {
text-align:center
}
/* icons inside overlay */
.tab-content figure .inner-overlay-content.with-icons a {
width:40px;
height:40px;
line-height:42px;
display:inline-block;
margin:0 10px;
text-decoration:none;
font-size:20px;
background:rgba(0,0,0,0.9);
color:#fff;
border-radius:0
}
.tab-content figure .inner-overlay-content.with-icons a:hover {
background:rgba(255,255,255,0.7);
color:#e74c3c;
}
/* skew image on hover */
.isotopeSelector img {
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
-ms-transition:all .4s ease;
-o-transition:all .4s ease;
transition:all .4s ease
}
.isotopeSelector:hover img {
-moz-transform:scale(1.5) rotate(2deg);
-webkit-transform:scale(1.5) rotate(2deg);
-o-transform:scale(1.5) rotate(2deg);
-ms-transform:scale(1.5) rotate(2deg);
transform:scale(1.5) rotate(2deg);
-webkit-transition:all .8s ease;
-moz-transition:all .8s ease;
-ms-transition:all .8s ease;
-o-transition:all .8s ease;
transition:all .8s ease
}
.isotopeSelector figure {
overflow:hidden
}
.isotopeSelector figure {
box-shadow:0 0 2px rgba(0,0,0,0.2)
}
/* category filter */
.filter-section {
padding-top:40px;
}
.filter-container {
text-align:center;
padding:20px
}
ul.filter > li > a {
color:#ff8b00;
font-size:20px;
line-height:40px;
}
ul.filter > li > a:hover,ul.filter > li > a:focus {
text-decoration:none;
color:#117ec2;
outline:none
}
ul.filter > li.active a {
color:#111
}
ul.filter > li span {
color:#ddd;
font-size:20px;
display:inline-block;
margin:0 5px
}
.filter-section .filter-container .filter > li {
padding:0;
margin:0
}
.filter-section h1 {
text-align:center
}
/* the color of the transparent overlay border */
.tab-content .port-col figure .overlay-background {
background-color:#000;
background-color:rgba(0,0,0,0.4);
}
/* portfolio images */
.tab-content figure {
float:left;
width:100%;
position:relative
}
.tab-content figure img {
width:100%;
height:auto
}
/* project title under image */
.tab-content .article-title {
text-align:center;
float:left;
width:100%;
font-size:18px;
line-height:24px;
padding:10px 0 30px 0;
}
.tab-content .article-title a {
color:#117ec2;
text-decoration:none;
}
/* transparent overlay */
.tab-content figure:hover .overlay {
opacity:1;
visibility:visible
}
.tab-content figure:hover .overlay-background {
opacity:.8;
visibility:visible
}
.tab-content figure .overlay-background {
z-index:1;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
position:absolute;
top:0;
left:0;
opacity:0;
visibility:hidden;
width:100%;
height:100%
}
.tab-content figure .overlay-background .inner {
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
margin:11px;
background-color:#c8e9c8;
background-color:rgba(194,231,194,0.9)
}
.tab-content figure .overlay {
z-index:2;
transition:all .2s ease-in-out;
position:absolute;
top:0;
left:0;
opacity:0;
visibility:hidden;
width:100%;
height:100%
}
.tab-content figure .inner-overlay {
display:table;
width:100%;
height:100%
}
.tab-content figure .inner-overlay-content {
display:table-cell;
vertical-align:middle;
width:100%;
padding:20px 40px
}
.tab-content figure .inner-overlay-content.with-icons {
text-align:center
}
/* icons inside overlay */
.tab-content figure .inner-overlay-content.with-icons a {
width:40px;
height:40px;
line-height:42px;
display:inline-block;
margin:0 10px;
text-decoration:none;
font-size:20px;
background:rgba(0,0,0,0.9);
color:#fff;
border-radius:0
}
/* skew image on hover */
.isotopeSelector img {
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
-ms-transition:all .4s ease;
-o-transition:all .4s ease;
transition:all .4s ease
}
.isotopeSelector:hover img {
-moz-transform:scale(1.5) rotate(2deg);
-webkit-transform:scale(1.5) rotate(2deg);
-o-transform:scale(1.5) rotate(2deg);
-ms-transform:scale(1.5) rotate(2deg);
transform:scale(1.5) rotate(2deg);
-webkit-transition:all .8s ease;
-moz-transition:all .8s ease;
-ms-transition:all .8s ease;
-o-transition:all .8s ease;
transition:all .8s ease
}
.isotopeSelector figure {
overflow:hidden
}
.isotopeSelector figure {
box-shadow:0 0 2px rgba(0,0,0,0.2)
}
@media (min-width: 320px) and (max-width: 767px) {
body{
padding:0px;
margin:0px;
font-family: 'Roboto', sans-serif;
font-size:14px;
font-weight:300 !important;
color:#242424;
}
p {
line-height: 20px;
font-size:14px;
}
.tabs-to-accordions .nav-link {
display: block;
padding: .0rem 0rem !important;
}
.tabs-to-accordions .card-header {
padding:10px 0 0px 10px;
margin-bottom: 0;
background-color: rgba(0,0,0,.03);
border-bottom: 1px solid rgba(0,0,0,.125);
}
}
<script>
$(document).ready(function(){
//FANCYBOX
//https://github.com/fancyapps/fancyBox
$(".fancybox").fancybox({
openEffect: "none",
closeEffect: "none"
});
});
</script>
<script>
var cbpAnimatedHeader = (function() {
var docElem = document.documentElement,
header = document.querySelector( '.navbar-default' ),
didScroll = false,
//changeHeaderOn = 10;
changeHeaderOn = 1;
function init() {
window.addEventListener( 'scroll', function( event ) {
if( !didScroll ) {
didScroll = true;
setTimeout( scrollPage, 10 );
//setTimeout( scrollPage, 550 );
}
}, false );
}
function scrollPage() {
var sy = scrollY();
if ( sy >= changeHeaderOn ) {
classie.add( header, 'navbar-shrink' );
}
else {
classie.remove( header, 'navbar-shrink' );
}
didScroll = false;
}
function scrollY() {
return window.pageYOffset || docElem.scrollTop;
}
init();
})();
</script><!--menu top-->
<script>
// heavily modified BS4 version of https://github.com/openam/bootstrap-responsive-tabs
var fakewaffle = ( function ( $, fakewaffle ) {
'use strict';
fakewaffle.responsiveTabs = function ( collapseDisplayed ) {
fakewaffle.currentPosition = 'tabs';
var tabGroups = $( '.nav-tabs.responsive' );
var hidden = '';
var visible = '';
var activeTab = '';
// if ( collapseDisplayed === undefined ) {
// collapseDisplayed = [ 'xs', 'sm' ];
// }
// $.each( collapseDisplayed, function () {
// hidden += ' banana-' + this;
// visible += ' visible-' + this;
// } );
hidden = ' d-none d-sm-flex';
visible = ' d-sm-none';
$.each( tabGroups, function ( index ) {
var collapseDiv;
var $tabGroup = $( this );
var tabs = $tabGroup.find( 'li a' );
if ( $tabGroup.attr( 'id' ) === undefined ) {
$tabGroup.attr( 'id', 'tabs-' + index );
}
collapseDiv = $( '<div></div>', {
'class' : 'card-soup responsive' + visible,
'id' : 'collapse-' + $tabGroup.attr( 'id' )
} );
$.each( tabs, function () {
var $this = $( this );
var oldLinkClass = $this.attr( 'class' ) === undefined ? '' : $this.attr( 'class' );
var newLinkClass = 'accordion-toggle';
var oldParentClass = $this.parent().attr( 'class' ) === undefined ? '' : $this.parent().attr( 'class' );
var newParentClass = 'card';
var newHash = $this.get( 0 ).hash.replace( '#', 'collapse-' );
if ( oldLinkClass.length > 0 ) {
newLinkClass += ' ' + oldLinkClass;
}
if ( oldParentClass.length > 0 ) {
oldParentClass = oldParentClass.replace( /\bactive\b/g, '' );
newParentClass += ' ' + oldParentClass;
newParentClass = newParentClass.replace( /\s{2,}/g, ' ' );
newParentClass = newParentClass.replace( /^\s+|\s+$/g, '' );
}
if ( $this.parent().hasClass( 'active' ) ) {
activeTab = '#' + newHash;
}
collapseDiv.append(
$( '<div>' ).attr( 'class', newParentClass ).html(
$( '<div>' ).attr( 'class', 'card-header' ).html(
$( '<h4>' ).attr( 'class', 'card-title' ).html(
$( '<a>', {
'class' : newLinkClass,
'data-toggle' : 'collapse',
'data-parent' : '#collapse-' + $tabGroup.attr( 'id' ),
'href' : '#' + newHash,
'html' : $this.html()
} )
)
)
).append(
$( '<div>', {
'id' : newHash,
'class' : 'collapse'
} )
)
);
} );
$tabGroup.next().after( collapseDiv );
$tabGroup.addClass( hidden );
$( '.tab-content.responsive' ).addClass( hidden );
if ( activeTab ) {
$( activeTab ).collapse( 'show' );
}
} );
fakewaffle.checkResize();
fakewaffle.bindTabToCollapse();
};
fakewaffle.checkResize = function () {
if ( $( '.card-soup.responsive' ).is( ':visible' ) === true && fakewaffle.currentPosition === 'tabs' ) {
fakewaffle.tabToPanel();
fakewaffle.currentPosition = 'panel';
} else if ( $( '.card-soup.responsive' ).is( ':visible' ) === false && fakewaffle.currentPosition === 'panel' ) {
fakewaffle.panelToTab();
fakewaffle.currentPosition = 'tabs';
}
};
fakewaffle.tabToPanel = function () {
var tabGroups = $( '.nav-tabs.responsive' );
$.each( tabGroups, function ( index, tabGroup ) {
// Find the tab
var tabContents = $( tabGroup ).next( '.tab-content' ).find( '.tab-pane' );
$.each( tabContents, function ( index, tabContent ) {
// Find the id to move the element to
var destinationId = $( tabContent ).attr( 'id' ).replace ( /^/, '#collapse-' );
// Convert tab to panel and move to destination
$( tabContent )
.removeClass( 'tab-pane' )
.addClass( 'card-body fw-previous-tab-pane' )
.appendTo( $( destinationId ) );
} );
} );
};
fakewaffle.panelToTab = function () {
var panelGroups = $( '.card-soup.responsive' );
$.each( panelGroups, function ( index, panelGroup ) {
var destinationId = $( panelGroup ).attr( 'id' ).replace( 'collapse-', '#' );
var destination = $( destinationId ).next( '.tab-content' )[ 0 ];
// Find the panel contents
var panelContents = $( panelGroup ).find( '.card-body.fw-previous-tab-pane' );
// Convert to tab and move to destination
panelContents
.removeClass( 'card-body fw-previous-tab-pane' )
.addClass( 'tab-pane' )
.appendTo( $( destination ) );
} );
};
fakewaffle.bindTabToCollapse = function () {
var tabs = $( '.nav-tabs.responsive' ).find( 'li a' );
var collapse = $( '.card-soup.responsive' ).find( '.card-collapse' );
// Toggle the panels when the associated tab is toggled
tabs.on( 'shown.bs.tab', function ( e ) {
if (fakewaffle.currentPosition === 'tabs') {
var $current = $( e.currentTarget.hash.replace( /#/, '#collapse-' ) );
$current.collapse( 'show' );
if ( e.relatedTarget ) {
var $previous = $( e.relatedTarget.hash.replace( /#/, '#collapse-' ) );
$previous.collapse( 'hide' );
}
}
} );
// Toggle the tab when the associated panel is toggled
collapse.on( 'shown.bs.collapse', function ( e ) {
if (fakewaffle.currentPosition === 'panel') {
// Activate current tabs
var current = $( e.target ).context.id.replace( /collapse-/g, '#' );
$( 'a[href="' + current + '"]' ).tab( 'show' );
// Update the content with active
var panelGroup = $( e.currentTarget ).closest( '.card-soup.responsive' );
$( panelGroup ).find( '.card-body' ).removeClass( 'active' );
$( e.currentTarget ).find( '.card-body' ).addClass( 'active' );
}
} );
};
$( window ).resize( function () {
fakewaffle.checkResize();
} );
return fakewaffle;
}( window.jQuery, fakewaffle || { } ) );
fakewaffle.responsiveTabs();
document.documentElement.setAttribute("lang", "en");
document.documentElement.removeAttribute("class");
axe.run( function(err, results) {
console.log( results.violations );
} );
// Get IE or Edge browser version
var version = detectIE();
if( version !== false ) {
alert( 'Please view in Chrome/Safari/Firefox' );
}
/**
* detect IE
* returns version of IE or false, if browser is not Internet Explorer
*/
function detectIE() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
if (msie > 0) {
// IE 10 or older => return version number
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
}
var trident = ua.indexOf('Trident/');
if (trident > 0) {
// IE 11 => return version number
var rv = ua.indexOf('rv:');
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
}
var edge = ua.indexOf('Edge/');
if (edge > 0) {
// Edge (IE 12+) => return version number
return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
}
// other browser
return false;
}
</script>
<script>
$(document).ready(function() {
/* show lightbox when clicking a thumbnail */
$('a.thumb').click(function(event){
event.preventDefault();
var content = $('.modal-body');
content.empty();
var title = $(this).attr("title");
$('.modal-title').html(title);
content.html($(this).html());
$(".modal-profile").modal({show:true});
});
});
</script>
