<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Home</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" media="all" type="text/css">
<link href="css/responsive.css" rel="stylesheet" media="all" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
</head>
<body>
<header id="main-head">
<nav class=" navbar navbar-bootsnipp " role="navigation">
<div class="container">
<div class="bot-head">
<!-- Brand and toggle get grouped for better mobile display -->
<div class=" navbar-header ">
<button type="button" class=" navbar-toggle " data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class=" sr-only ">Toggle navigation</span>
<span class=" icon-bar "></span>
<span class=" icon-bar "></span>
<span class=" icon-bar "></span>
</button>
<div class="brand ">
<a class=" navbar-brand" href="#"><img src="http://via.placeholder.com/200x70" class="img-responsive"/></a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class=" collapse navbar-collapse " id="bs-example-navbar-collapse-1">
<ul class=" nav navbar-nav navbar-right ">
<li class="active"><a href="index.html">Home</a></li>
<li class=""><a href="">Find Activities</a></li>
<li class=""><a href="">Blog</a></li>
<li class=""><a href="">Activity Providers</a></li>
<li class=""><a href="">Support</a></li>
<li class=""><a href="">Contact us</a></li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<section id="home-banner">
<div class="container-fluid">
<div class="slider-wrap">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="slide-1">
<img src="http://via.placeholder.com/1598x715" class="img-responsive"/>
</div>
<div class="text-wrap ">
<h2>Discover The Best</h2>
<h1>Activities & Events</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis pretium enim, ut accumsan ligula faucibus eget...</p>
<div class="button-list">
<a href="" class="banner-button btn-blue hidden-xs">Register Now</a>
<a href="" class="banner-button btn-white">Read More</a>
</div>
</div>
</div>
<div class="item">
<div class="slide-1">
<img src="http://via.placeholder.com/1598x715" class="img-responsive"/>
</div>
<div class="text-wrap">
<h2>Discover The Best</h2>
<h1>Activities & Events</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis pretium enim, ut accumsan ligula faucibus eget...</p>
<div class="button-list">
<a href="" class="banner-button btn-blue hidden-xs">Register Now</a>
<a href="" class="banner-button btn-white">Read More</a>
</div>
</div>
</div>
<div class="item">
<div class="slide-1">
<img src="http://via.placeholder.com/1598x715" class="img-responsive"/>
</div>
<div class="text-wrap">
<h2>Discover The Best</h2>
<h1>Activities & Events</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis pretium enim, ut accumsan ligula faucibus eget...</p>
<div class="button-list">
<a href="" class="banner-button btn-blue hidden-xs">Register Now</a>
<a href="" class="banner-button btn-white">Read More</a>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="fa fa-angle-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="fa fa-angle-right"></span>
</a>
</div>
</div>
</div>
</section>
<section id="men-women">
<div class="container-fluid pl-0 pr-0">
<div class="row mr-0 ml-0" >
<div class="col-sm-4 pl-0 pr-0">
<div class="men-section small text-center">
<h2>For Men</h2>
<p>Lorem ipsum dolor et..</p>
<a class="btn-white">Read More</a>
</div>
</div>
<div class="col-sm-4 pl-0 pr-0">
<div class="men-section main text-center">
<h2>Sed ut perspiciatis unde omnis iste natus error sit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<a class="btn-blue">Read More</a>
</div>
</div>
<div class="col-sm-4 pl-0 pr-0">
<div class="men-section small text-center">
<h2>For Women</h2>
<p>Lorem ipsum dolor et..</p>
<a class="btn-white">Read More</a>
</div>
</div>
</div>
</div>
</section>
<section id="services">
<div class="container">
<div class="section-heading text-center">
<h1>Our Services</h1>
</div>
<div class="service-list">
<div class="row">
<div class="col-sm-4">
<div class="service-left text-right">
<div class="service top">
<div class="icon-wrap">
<i class="fa fa-free-code-camp" aria-hidden="true"></i>
</div>
<a href="">SPARKLING CLEAN</a>
<p>We keep your home sparkling clean and germ free. Our disinfecting process kills 99% of common bacteria and viruses</p>
</div>
<div class="service bottom mid">
<div class="icon-wrap">
<i class="fa fa-free-code-camp" aria-hidden="true"></i>
</div>
<a href="">SPARKLING CLEAN</a>
<p>We keep your home sparkling clean and germ free. Our disinfecting process kills 99% of common bacteria and viruses</p>
</div>
<div class="service bottom">
<div class="icon-wrap">
<i class="fa fa-free-code-camp" aria-hidden="true"></i>
</div>
<a href="">SPARKLING CLEAN</a>
<p>We keep your home sparkling clean and germ free. Our disinfecting process kills 99% of common bacteria and viruses</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="image-wrap">
<img src="http://www.cybersense.co.nz/images/cybersense.co.nz/for-men-coral-deep-blue-male-fleece-autumn-and-winter-long-section-embossed-sleepwear-robes-51VV.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-4">
<div class="service-right text-left">
<div class="service top">
<div class="icon-wrap">
<i class="fa fa-free-code-camp" aria-hidden="true"></i>
</div>
<a href="">SPARKLING CLEAN</a>
<p>We keep your home sparkling clean and germ free. Our disinfecting process kills 99% of common bacteria and viruses</p>
</div>
<div class="service bottom mid">
<div class="icon-wrap">
<i class="fa fa-free-code-camp" aria-hidden="true"></i>
</div>
<a href="">SPARKLING CLEAN</a>
<p>We keep your home sparkling clean and germ free. Our disinfecting process kills 99% of common bacteria and viruses</p>
</div>
<div class="service bottom">
<div class="icon-wrap">
<i class="fa fa-free-code-camp" aria-hidden="true"></i>
</div>
<a href="">SPARKLING CLEAN</a>
<p>We keep your home sparkling clean and germ free. Our disinfecting process kills 99% of common bacteria and viruses</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="product-list">
<div class="container">
<div class="section-heading text-center">
<h1>Our Products</h1>
</div>
<div class="row product-list">
<div class="col-sm-3">
<div class="productw-wrap">
<div class="product-image">
<img src="https://4.imimg.com/data4/AR/NB/MY-4289718/men-s-casual-shirt-500x500.png" class="img-responsive">
</div>
<div class="prduct-text">
<a href="" class="name">Lorem Ipsum dolor sit...</a>
<ins class="price">$123.00</ins>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="productw-wrap">
<div class="product-image">
<img src="https://4.imimg.com/data4/AR/NB/MY-4289718/men-s-casual-shirt-500x500.png" class="img-responsive">
</div>
<div class="prduct-text">
<a href="" class="name">Lorem Ipsum dolor sit...</a>
<ins class="price">$123.00</ins>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="productw-wrap">
<div class="product-image">
<img src="https://4.imimg.com/data4/AR/NB/MY-4289718/men-s-casual-shirt-500x500.png" class="img-responsive">
</div>
<div class="prduct-text">
<a href="" class="name">Lorem Ipsum dolor sit...</a>
<ins class="price">$123.00</ins>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="productw-wrap">
<div class="product-image">
<img src="https://4.imimg.com/data4/AR/NB/MY-4289718/men-s-casual-shirt-500x500.png" class="img-responsive">
</div>
<div class="prduct-text">
<a href="" class="name">Lorem Ipsum dolor sit...</a>
<ins class="price">$123.00</ins>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="team">
<div class="container">
<div class="section-heading dark text-center">
<h1>Our Team</h1>
</div>
<div class="slider-wrap">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active">
<img class="img-responsive " src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="1">
<img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/rssems/128.jpg" alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="2">
<img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg" alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="3">
<img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/rssems/128.jpg" alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="4">
<img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg" alt="">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-2">
<div class="img-wrap">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-10">
<h2>Very Nice</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. !</p>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-2">
<div class="img-wrap">
<img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/rssems/128.jpg" alt="">
</div>
</div>
<div class="col-sm-10">
<h2>Kapil Verma</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. !</p>
</div>
</div>
</div>
<!-- Quote 3 -->
<div class="item">
<div class="row">
<div class="col-sm-2">
<div class="img-wrap">
<img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg" alt="">
</div>
</div>
<div class="col-sm-10">
<h2>Kapil Creationz</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. !</p>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-2">
<div class="img-wrap">
<img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/rssems/128.jpg" alt="">
</div>
</div>
<div class="col-sm-10">
<h2>Kapil Verma</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. !</p>
</div>
</div>
</div>
<!-- Quote 3 -->
<div class="item">
<div class="row">
<div class="col-sm-2">
<div class="img-wrap">
<img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg" alt="">
</div>
</div>
<div class="col-sm-10">
<h2>Kapil Creationz</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. !</p>
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
/*****Reset css********/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; color:#101010; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
p,label{ font: 300 15px/21px open sans; color: #202020; }
a{ text-decoration:none; font-family:open sans; }
h1,h2,h3,h4,h5,h6,h7{ font-family:open sans; }
input,select,textarea,span{ font-family:open sans; }
/*********Custom Style CSS************/
#main-head {
display: block;
position: absolute;
z-index: 9;
width: 100%;
}
#main-head nav.navbar {
margin: 0;
border: none;
padding: 15px 0 0 0;
}
#main-head nav.navbar .top-head {
display: block;
padding: 10px 0 0 0;
}
#main-head nav.navbar .top-head .scl-links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#main-head nav.navbar .top-head .login-box {
margin: 0 0 0 20px;
display: inline-block;
float: right;
}
#main-head nav.navbar .top-head .scl-links {
float: right;
}
#main-head nav.navbar .top-head .scl-links ul li {
float: left;
margin: 0 0 0 5px;
}
#main-head nav.navbar .top-head .scl-links ul li a {
padding: 9px 0;
display: inline-block;
background: #fff;
border-radius: 25px;
width: 32px;
text-align: center;
text-decoration: none;
color: #2cc2f7;
font-size: 14px;
border: 1px solid #fff;
height: 32px;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
}
#main-head nav.navbar .top-head .scl-links ul li:hover a {
border: 1px solid #2cc2f7;
background: #2cc2f7;
color: #fff;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
}
#main-head nav.navbar .top-head .scl-links ul li a i {
color: inherit;
}
#main-head nav.navbar .top-head .login {
float: right;
background: #2cc2f7;
color: #fff;
padding: 6px 16px;
text-decoration: none;
font: 500 15px/21px open sans;
text-transform: uppercase;
}
#main-head nav.navbar .top-head .login::before {
content: "\f007";
font-family: fontawesome;
margin: 0 8px 0 0;
}
#main-head nav.navbar .bot-head .navbar-nav {
margin: 15px 0 15px 0;
}
#main-head nav.navbar .bot-head #bs-example-navbar-collapse-1 {
padding: 0;
}
#main-head nav.navbar .bot-head .navbar-nav li a {
color: #fff;
padding: 6px 12px !IMPORTANT;
text-decoration: none;
font: 500 15px/21px open sans;
text-transform: uppercase;
background: transparent;
}
#main-head nav.navbar .bot-head .navbar-nav li:last-of-type a {
padding: 6px 0px 6px 12px !IMPORTANT;
}
#main-head nav.navbar .bot-head .navbar-brand {
padding: 0 5px;
display: inline-block;
height: auto;
}
/********Home Banner********/
#home-banner #carousel-example-generic {
height: auto;
overflow: hidden;
}
#home-banner {
display: block;
overflow: hidden;
}
#home-banner .container-fluid {
padding: 0;
}
#home-banner .slider-wrap .item img {
width: 100%;
display: block;
}
#home-banner .slider-wrap .carousel-control {
background: transparent;
border: none;
width: 4%;
display: flex;
align-items: center;
text-align: center;
opacity: 1;
}
#home-banner .slider-wrap .carousel-control span {
font-size: 50px;
color: #fff;
opacity: 1;
position: absolute;
left: 0;
right: 0;
}
#home-banner .slider-wrap .text-wrap {
position: absolute;
left: 0;
bottom: 50%;
display: block;
z-index: 9999999999 !important;
margin: 0 auto;
text-align: center;
width: 64%;
right: 0;
}
#home-banner .slider-wrap .text-wrap h2 {
font: 700 40px/51px open sans;
color: #fff;
text-transform: uppercase;
}
#home-banner .slider-wrap .text-wrap h1 {
font: 900 60px/73px open sans;
color: #2cc2f7;
text-transform: uppercase;
}
#home-banner .slider-wrap .text-wrap p {
font: 400 20px/28px open sans;
color: #ffffff;
display: block;
margin: 0 0 1.5rem 0;
}
#home-banner .slider-wrap .button-list .btn-white, #home-banner .slider-wrap .button-list .btn-blue {
padding: 10px 23px;
text-decoration: none;
font: 600 17px/21px open sans;
text-transform: uppercase;
margin: 0 5px;
display: inline-block;
}
#home-banner .slider-wrap .button-list .btn-white {
background: #fff;
color: #101010;
}
#home-banner .slider-wrap .button-list .btn-blue {
background: #2cc2f7;
color: #fff;
}
#home-banner .slider-wrap .carousel-indicators li {
background: #fff;
border: none;
height: 12px;
width: 12px;
margin: 0;
}
#home-banner .slider-wrap .carousel-indicators li.active {
background: #2cc2f7;
border: none;
}
/***End Of Banner***/
.section-heading {
margin-bottom: 2rem;
}
.section-heading h1 {
font: 700 30px/45px open sans;
text-transform: uppercase;
margin: 0 0 10px 0;
position: relative;
}
.section-heading h1::after {
content: '';
width: 55px;
height: 3px;
background: #101010;
position: absolute;
bottom: 0px;
left: 0;
right: 0;
margin: 0 auto;
}
.section-heading p {
font: 600 16px/24px open sans;
display: block;
margin: 0 0 1.5rem 0;
}
.btn-blue {
border: 1px solid #2cc2f7 !important;
padding: 10px 23px;
text-decoration: none;
text-transform: uppercase;
margin: 0 5px;
display: inline-block;
background: #2cc2f7;
color: #fff;
font: 600 15px/17px open sans;
}
.btn-blue,.btn-white {
position: relative;
z-index: 1;
}
.btn-blue::after{
background-color: #fff;
}
.btn-blue::after,.btn-white::after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
z-index: -1;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
}
.btn-white::after {
background-color: #2cc2f7;
}
.btn-blue:hover, .btn-blue:focus, .btn-blue:active.focus, .btn-blue:active:focus, .btn-blue:active:hover{
}
.btn-blue:hover::after,.btn-white:hover::after {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#home-banner .slider-wrap .button-list .btn-white:hover,.btn-white:hover::after{
color: #FFF;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
}
#home-banner .slider-wrap .button-list .btn-blue:hover, #main-head nav.navbar .top-head .login:hover, .btn-blue:hover {
color: #101010 !important;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
}
#men-women {}
#men-women .small {
background: url("http://www.cybersense.co.nz/images/cybersense.co.nz/for-men-coral-deep-blue-male-fleece-autumn-and-winter-long-section-embossed-sleepwear-robes-51VV.jpg");
background-size: cover;
background-position: center;
}
#men-women .main,#men-women .small {
padding: 40px 20px;
}
.mr-0 {
margin-right: 0;
}
.ml-0 {
margin-left: 0;
}
.pl-0 {
padding-left: 0;
}
.pr-0 {
padding-right: 0;
}
#men-women .small h2 {
font: 700 20px/31px open sans;
color: #fff;
text-transform: uppercase;
}
#men-women .main h2 {
font: 700 20px/31px open sans;
text-transform: uppercase;
}
#men-women .small p {
font: italic 500 15px/21px open sans;
color: #ffff;
margin: 0 0 .5rem 0;
}
#men-women .main p {
font: italic 500 15px/21px open sans;
margin: 0 0 .5rem 0;
}
.btn-white {
padding: 10px 23px;
text-decoration: none;
font: 600 15px/17px open sans;
text-transform: uppercase;
margin: 0 5px;
display: inline-block;
background: #fff;
color: #101010;
}
.btn-blue, .btn-white {
text-decoration: none !important;
}
/***services***/
#services{
padding:3% 0;
}
#services .service-list .service a {
font: 700 20px/31px open sans;
text-transform: uppercase;
text-decoration: none;
color: #101010;
}
#services .service-list .service p {
font: 300 15px/21px open sans;
color: #202020;
margin: 0 0 .5rem 0;
}
#services .service-list .service.bottom {
margin-top: 2rem;
}
#services .service-list .service.top {
margin-top: 1rem;
}
#services .image-wrap {
border-radius: 50%;
overflow: hidden;
border: 1px solid #ccc;
padding: 10px;
}
#services .image-wrap img {
border-radius: 50%;
}
#men-women {
background: #f4f4f4;
}
#services .service {
position: relative;
}
#services .service .icon-wrap {
position: absolute;
border: 1px solid #ccc;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
font-size: 24px;
background: #fff;
z-index: 9;
}
#services .service-list .service-left .service.top .icon-wrap {
right: -115px;
}
#services .service-list .service-left .service.bottom.mid .icon-wrap {
right: -55px;
}
#services .service-list .service-left .service.bottom .icon-wrap {
right: -95px;
}
#services .service-list .service-right .service.top .icon-wrap {
left: -115px;
}
#services .service-list .service-right .service.bottom.mid .icon-wrap {
left: -55px;
}
#services .service-list .service-right .service.bottom .icon-wrap {
left: -95px;
}
/***products***/
#product-list {
background: #f4f4f4;
padding: 3% 0;
}
#product-list .product-list {}
#product-list .product-list .productw-wrap {
border: 2px dashed #dedede;
}
#product-list .product-list .prduct-text {
padding: 15px;
border-top: 1px solid #dedede;
}
#product-list .product-list .prduct-text .name {
font: 600 17px/21px open sans;
text-decoration: none;
color: #101010;
margin: 0 0 .1rem 0;
display: inline-block;
width: 100%;
}
#product-list .product-list .prduct-text .price {
font: 700 15px/21px open sans;
clear: both;
display: block;
color: #999999;
}
#product-list .product-list .prduct-text ins.price {
margin: 0 0 .3rem 0;
color: #2cc2f7;
text-decoration: none;
}
#product-list .product-list .prduct-text .btn-blue {
border-radius: 0;
margin: 0;
}
#team {
padding: 3% 0;
background-image: url(https://www.sealswcc.com/images/background/background-videos-desaturated.jpg);
}
#testimonial {
padding: 3% 0;
background-image: url(https://www.sealswcc.com/images/background/background-videos-desaturated.jpg);
}
.dark.text-center {}
.section-heading.dark {}
.section-heading.dark h1 {
color: #fff;
}
.section-heading.dark h1:after {
background: #fff;
}
#team .slider-wrap {
max-width: 900px;
margin: 0 auto;
}
#team .slider-wrap .carousel-inner {}
#team .slider-wrap .carousel-inner img,#testimonial .slider-wrap .carousel-inner img {
width: 100%;
border-radius: 50%;
}
#team .slider-wrap .item .img-wrap,#testimonial .slider-wrap .item .img-wrap {
border: 1px solid #ccc;
padding: 10px;
border-radius: 50%;
}
#team .slider-wrap .carousel-control {
width: 30px;
top: calc(50% - 10px);
bottom: unset;
color: #fff;
background: transparent;
opacity: 1;
}
#testimonial .slider-wrap .carousel-control {
width: 30px;
top: calc(50% - 10px);
bottom: unset;
color: #fff;
background: transparent;
opacity: 1;
}
#team .slider-wrap .carousel-control i {
color: inherit;
}
#testimonial .slider-wrap .carousel-control i {
color: inherit;
}
#team .slider-wrap .item h2{
font: 600 17px/21px open sans;
color: #fff;
margin: 0 0 .5rem;
}
#testimonial .slider-wrap .item h2 {
font: 600 17px/21px open sans;
margin: 0 0 .5rem;
color: #fff;
}
#team .slider-wrap .item p {
font: 500 15px/21px open sans;
color: #fff;
}
#testimonial .slider-wrap .item p {
font: 500 15px/21px open sans;
color: #fff;
}
#team .slider-wrap .carousel-indicators {
bottom: -30px;
}
#testimonial .slider-wrap .carousel-indicators {
bottom: -30px;
}
#team .slider-wrap .carousel-indicators li {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
margin: 0 2px;
}
#team .slider-wrap .left.carousel-control {
left: -50px;
font-size: 27px;
}
#testimonial .slider-wrap .left.carousel-control {
left: -50px;
font-size: 27px;
}
#team .slider-wrap .right.carousel-control {
right: -50px;
font-size: 27px;
}
#testimonial .slider-wrap .right.carousel-control {
right: -50px;
font-size: 27px;
}
/******Responsive starts Here******/
@media screen and (width:1280px){
}
@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (orientation : landscape){
}
@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (orientation : portrait){
}
@media screen and (width:1024px){
}
@media screen and (width:800px){
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){
#home-banner #carousel-example-generic {
height: auto;
}
#home-banner .slider-wrap .text-wrap {
bottom: 24%;
width: 80%;
}
#home-banner .slider-wrap .text-wrap p {
font: 400 17px/24px open sans;
margin: 0 0 1rem 0;
}
#home-banner .slider-wrap .text-wrap h1 {
font: 900 40px/52px open sans;
}
#home-banner .slider-wrap .text-wrap h2 {
font: 700 30px/42px open sans;
color: #fff;
}
#main-head nav.navbar .bot-head .navbar-header {
width: 27%;
}
#main-head nav.navbar .bot-head .navbar-brand {
width: 100%;
}
#main-head nav.navbar .bot-head .navbar-nav li a {
padding: 6px 10px !IMPORTANT;
font: 500 12px/21px open sans;
}
#main-head nav.navbar .bot-head .navbar-nav {
margin: 7px 0 0 0;
}
#main-foot .trm .terms {
clear: both;
display: inline-block;
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
/******Home Page********/
#home-banner #carousel-example-generic {
height: auto;
}
#home-banner .slider-wrap .text-wrap {
bottom: 11%;
width: 80%;
}
#home-banner .slider-wrap .text-wrap p {
font: 400 17px/24px open sans;
margin: 0 0 1rem 0;
}
#home-banner .slider-wrap .text-wrap h1 {
font: 900 40px/52px open sans;
}
#home-banner .slider-wrap .text-wrap h2 {
font: 700 30px/42px open sans;
color: #fff;
}
#main-head nav.navbar .bot-head .navbar-header {
width: 27%;
}
#main-head nav.navbar .bot-head .navbar-brand {
width: 100%;
}
#main-head nav.navbar .bot-head .navbar-nav li a {
padding: 6px 10px !IMPORTANT;
font: 500 12px/21px open sans;
}
#main-head nav.navbar .bot-head .navbar-nav {
margin: 7px 0 7px 0;
}
#search .search-form fieldset select {
padding: 10px 17px 10px 6px;
font: 600 12px/24px open sans;
background-position: right 3px top 54%;
}
.section-heading p {
font: 600 15px/24px open sans;
}
#main-foot .trm .terms {
clear: both;
display: inline-block;
}
}
@media screen and (width:768px){
}
@media screen and (min-width: 768px) {
}
@media screen and (width:600px){
}
@media screen and (max-width:767px){
#main-head nav.navbar {
margin: 0;
border: none;
padding: 10px 0 10px 0;
}
#services .service .icon-wrap {
display: none;
}
#team .slider-wrap .right.carousel-control {
right: 0;
}
#testimonial .slider-wrap .right.carousel-control {
right: 0;
}
#team .slider-wrap .left.carousel-control {
left: 0;
}
#testimonial .slider-wrap .left.carousel-control {
left: 0;
}
#men-women .main, #men-women .small {
padding: 20px 20px;
}
#services .service-list .service a {
font: 700 17px/31px open sans;
}
#services .service-list .service-left, #services .service-list .service-right {
text-align: center;
}
#product-list .product-list .productw-wrap {
border: 2px dashed #dedede;
margin: 0 0 1rem;
}
#services .image-wrap {
max-width: 59%;
margin: 0 auto;
}
#team .slider-wrap .carousel-indicators {
/* bottom: -30px; */
display: none;
}
#main-head {
position: unset;
box-shadow: 0 0px 6px rgba(44,194,247,.25);
}
#team .slider-wrap .item,#testimonial .slider-wrap .item{
text-align:center;
}
#team .slider-wrap .item .img-wrap,#testimonial .slider-wrap .item .img-wrap {
max-width: 200px;
display: block;
margin: 0 auto 1rem;
}
#main-head nav.navbar .top-head .login {
padding: 5px 10px;
font: 600 12px/16px open sans;
}
#main-head nav.navbar .top-head .login-box {
margin: 0 0 0 10px;
}
#main-head nav.navbar .top-head .login-box .reg {
margin: 0 0px 0 5px;
}
#main-head nav.navbar .top-head .scl-links ul li a {
padding: 5px 0;
width: 26px;
font-size: 13px;
color: #fff;
background: #2cc2f7;
height: 26px;
}
#main-head nav.navbar .top-head .login::before {
display: none;
}
#main-head nav.navbar .bot-head .navbar-brand {
width: 76%;
padding: 0px 0;
}
#main-head nav.navbar .bot-head .navbar-toggle {
border: 1px solid #2cc2f7;
margin: 3% 0 3% 0;
}
#main-head nav.navbar .bot-head .navbar-toggle .icon-bar {
background: #2cc2f7;
}
#main-head nav.navbar .bot-head .navbar-nav {
margin: 0px 0 10px 0;
}
#main-head nav.navbar .bot-head .navbar-nav li a {
color: #000;
padding: 7px 12px !IMPORTANT;
font: 500 13px/16px open sans;
display: inline-block;
}
#main-head nav.navbar .bot-head .navbar-nav li a::after {
background: #000;
}
#main-head nav.navbar .bot-head .navbar-nav li:last-of-type a {
padding: 7px 10px;
}
#home-banner .slider-wrap .text-wrap {
bottom: 15%;
width: 85%;
}
#home-banner #carousel-example-generic {
height: auto;
overflow: hidden;
}
#home-banner .slider-wrap .text-wrap h2 {
font: 700 16px/20px open sans;
}
#home-banner .slider-wrap .text-wrap h1 {
font: 900 20px/21px open sans;
margin: 0 0 0px 0;
}
#home-banner .slider-wrap .text-wrap p {
font: 400 14px/16px open sans;
margin: 0 0 .5rem 0;
}
#home-banner .slider-wrap .button-list .btn-white, #home-banner .slider-wrap .button-list .btn-blue {
padding: 8px 10px;
font: 600 12px/16px open sans;
}
#home-banner .slider-wrap .carousel-control span {
font-size: 25px;
}
.section-heading {
margin-bottom: 1rem;
}
.section-heading h1 {
font: 700 20px/30px open sans;
}
.section-heading h1::after {
width: 100px;
}
.section-heading p {
font: 500 14px/23px open sans;
}
}
/*************************Phones start here************************************/
/**********IPHONE 6 PLUS ****************/
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape){
}
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
}
/**********Nexus 5X ****************/
@media only screen and (min-device-width : 412px) and (max-device-width : 732px) and (orientation : landscape){
}
@media only screen and (min-device-width : 412px) and (max-device-width : 732px) and (orientation : portrait) {
}
/**********IPHONE 6***************/
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape){
}
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
}
/**********Galaxy 5s, Galaxy Note3, Galaxy Note2,Galaxy S3***************/
@media only screen and (min-device-width : 360px) and (max-device-width : 640px) and (orientation : landscape){
}
@media only screen and (min-device-width : 360px) and (max-device-width : 640px) and (orientation : portrait) {
}
/*******************IPHONE 5s************************/
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape){
}
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
}
@media screen and (width:320px){
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape){
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait){
}
/******Responsive ends Here******/
