<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 ---------->
<!doctype html>
<!--[if lt IE 7]><html lang="ru" class="no-js ie6"><![endif]-->
<!--[if IE 7]><html lang="ru" class="no-js ie7"><![endif]-->
<!--[if IE 8]><html lang="ru" class="no-js ie8"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="ru" class="no-js">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>Detas</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="shortcut icon" href="favicon.png">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="js/rs-plugin/css/settings.css">
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/modernizr.custom.32033.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="pre-loader">
<div class="load-con">
<img src="img/freeze/logo.png" class="animated fadeInDown" alt="">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
</div>
<header>
<nav class="navbar navbar-default navbar-fixed-top" 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="#bs-example-navbar-collapse-1">
<span class="fa fa-bars fa-lg"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="img/freeze/logo.png" alt="" class="logo">
</a>
</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><a href="#about">О предприятии</a>
</li>
<li><a href="#products">Продукция</a>
</li>
<!-- <li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Продукция <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#products">Чистящие и моющие средства </a></li>
<li><a href="#products">Средства Гигиены</a></li>
<li><a href="#products">Бумажно-Гигиенические средства</a></li>
<li><a href="#products">Продукция ХоРеКа</a></li>
<li><a href="#products">Пластиковые Изделия</a></li>
</ul>
</li> -->
<li><a href="#career">Карьера</a>
</li>
<li><a href="#findus">Контакты</a>
</li>
<li><a href="#contactus">Отрпавить запрос</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-->
</nav>
<!--RevSlider-->
<div class="tp-banner-container">
<div class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="img/transparent.png" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption lfl fadeout hidden-xs"
data-x="160"
data-y="center"
data-hoffset="30"
data-voffset="0"
data-speed="500"
data-start="700"
data-easing="Power4.easeOut">
<img src="img/freeze/Slides/feya.png" alt="">
</div>
<div class="tp-caption lfl fadeout visible-xs"
data-x="left"
data-y="center"
data-hoffset="700"
data-voffset="0"
data-speed="500"
data-start="700"
data-easing="Power4.easeOut">
<img src="img/freeze/iphone-freeze.png" alt="Фея">
</div>
<div class="tp-caption large_white_bold sft" data-x="600" data-y="center" data-hoffset="0" data-voffset="-80" data-speed="500" data-start="1200" data-easing="Power4.easeOut">
ЧИСТОТА
</div>
<div class="tp-caption large_white_light sfr" data-x="930" data-y="center" data-hoffset="0" data-voffset="-80" data-speed="500" data-start="1400" data-easing="Power4.easeOut">
- ЭТО
</div>
<div class="tp-caption large_white_light sfb" data-x="600" data-y="center" data-hoffset="0" data-voffset="0" data-speed="1000" data-start="1500" data-easing="Power4.easeOut">
ТАК ПРОСТО
</div>
<div class="tp-caption sfb hidden-xs" data-x="600" data-y="center" data-hoffset="0" data-voffset="85" data-speed="1000" data-start="1700" data-easing="Power4.easeOut">
<a href="#about" class="btn btn-primary inverse btn-lg">О компании</a>
</div>
<div class="tp-caption sfr hidden-xs" data-x="790" data-y="center" data-hoffset="0" data-voffset="85" data-speed="1500" data-start="1900" data-easing="Power4.easeOut">
<a href="#products" class="btn btn-default btn-lg">Продукция</a>
</div>
</li>
<!-- SLIDE 2 -->
<li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" >
<!-- MAIN IMAGE -->
<img src="img/transparent.png" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption lfl fadeout hidden-xs"
data-x="160"
data-y="center"
data-hoffset="30"
data-voffset="0"
data-speed="500"
data-start="700"
data-easing="Power4.easeOut">
<img src="img/freeze/Slides/feya.png" alt="Новинки">
</div>
<div class="tp-caption large_white_bold sft" data-x="600" data-y="center" data-hoffset="0" data-voffset="-80" data-speed="500" data-start="1200" data-easing="Power4.easeOut">
НОВИНКИ
</div>
<div class="tp-caption small_light_white sfb hidden-xs" data-x="600" data-y="center" data-hoffset="0" data-voffset="0" data-speed="800" data-start="1600" data-easing="Power4.easeOut">
<p>Мы всегда стремимся выпускать что-то новое и лучшее для вас!</div>
<div class="tp-caption sfr hidden-xs" data-x="600" data-y="center" data-hoffset="0" data-voffset="80" data-speed="1000" data-start="1500" data-easing="Power4.easeOut">
<a href="#demo" class="btn btn-default btn-lg">Подробнее</a>
</div>
</li>
</ul>
</div>
</div>
</header>
<div class="wrapper">
<section id="about">
<div class="container">
<div class="section-heading scrollpoint sp-effect3">
<h1>О предприятии</h1>
<div class="divider"></div>
<p> ЧИСТОТА - ЭТО ТАК ПРОСТО</p>
<br>
</div><! --/section-heading -->
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6">
<div class="about-item scrollpoint sp-effect2">
<h3 href="#aboutModal1" data-toggle="modal">История</h3>
<p>Фабрика «Деташ» была основана в 2002 году и является лидером по производству
мыло–моющей, бумажно-гигиенической и пластиковой продукции в Кыргызстане.</p>
</div><! --/about-item -->
</div><! --/col-md-3 -->
<div class="col-md-3 col-sm-3 col-xs-6" >
<div class="about-item scrollpoint sp-effect5">
<h3>Бренды</h3>
<p>Покупатели узнают нашу продукцию по таким торговым маркам как:
«МИЛА», «ФЕЯ», «Шёлк», «Hobby», «Silva», «Fiesta».</p>
</div><! --/about-item -->
</div><! --/col-md-3 -->
<div class="col-md-3 col-sm-3 col-xs-6" >
<div class="about-item scrollpoint sp-effect5">
<h3>Наша миссия</h3>
<p>Производство высококачественного продукта, востребованного во всех категориях покупателей.</p>
</div><! --/about-item -->
</div><! --/col-md-3 -->
<div class="col-md-3 col-sm-3 col-xs-6" >
<div class="about-item scrollpoint sp-effect1">
<h3>Наша цель</h3>
<p>Долговременное и плодотворное сотрудничество, основанное на гибкой ценовой политике и индивидуальном подходе к запросам клиентов.</p>
</div><! --/about-item -->
</div><! --/col-md-3 -->
</div><! --/row -->
</div><! --/container -->
</section>
<section id="products">
<div class="container">
<div class="section-heading scrollpoint sp-effect3">
<h1>Продукция</h1>
<div class="divider"></div>
<p>Каталог продукции</p>
</div>
<div class="filter scrollpoint sp-effect3">
<a href="javascript:void(0)" class="button js-filter-one active">Чистящие и моющие средства</a>
<a href="javascript:void(0)" class="button js-filter-two">Средства Гигиены</a>
<a href="javascript:void(0)" class="button js-filter-three">Бумажно-Гигиенические средства</a>
<a href="javascript:void(0)" class="button js-filter-four">Продукция ХоРеКа</a>
<a href="javascript:void(0)" class="button js-filter-five">Пластиковые Изделия</a>
</div>
<div class="slider filtering scrollpoint sp-effect5" >
<div class="one" >
<a href="#productModal1" data-toggle="modal">
<img src="img/Detas web/72 px/Feya_balsam_dishwasher_camomile_500gr.gif" class="img-responsive" alt="">
<h4>Жидкость для мытья посуды<br>Фея Бальзам 500гр<br>Орхидея</h4>
</a>
</div>
<div class="one">
<a href="#productModal1" data-toggle="modal">
<img src="img/Detas web/72 px/Feya_balsam_dishwasher_jasmine_500gr.gif" alt="">
<h4>Жидкость для мытья посуды<br>Фея Бальзам 500гр<br>Жасмин</h4>
</a>
</div>
<div class="one">
<img src="img/freeze/screens/calendar.jpg" alt="">
<h4>Event Calendar</h4>
</div>
<div class="two">
<img src="img/freeze/screens/options.jpg" alt="">
<h4>Some Options</h4>
</div>
<div class="three">
<img src="img/freeze/screens/sales.jpg" alt="">
<h4>Sales Analysis</h4>
</div>
<div class="four">
<img src="img/freeze/screens/sales.jpg" alt="">
<h4>Sales Analysis</h4>
</div>
</div>
</div>
</section>
<section id="career" class="doublediagonal">
<div class="container">
<div class="section-heading scrollpoint sp-effect3">
<h1>Карьера</h1>
<div class="divider"></div>
<p>Мы ждем вас!</p>
</div>
<div class="row">
<div class="col-md-12">
<div class="tabbable-panel">
<div class="tabbable-line">
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a href="#tab_default_1" data-toggle="tab">Вакансии </a>
</li>
<li>
<a href="#tab_default_2" data-toggle="tab">Анкета </a>
</li>
</ul>
</div><! --/tabbable-line -->
<br>
<div class="tab-content">
<div class="tab-pane " id="tab_default_1">
<p><strong>Торговый агент</strong></p>
<p> Требования:
<br>- Опыт работы в сфере сбыта не менее 1 года
<br>- Образование высшее или ср специальное
<br>- Знание психологии и принципа продаж - Владение техникой мотивации клиентов к покупкам;
<br>- Владение этикой делового общения
<br>- Знание порядка заключения договоров купли-продажи и оформления необходимых документов;
<br>- Опыт работы с первичной бухгалтерской документацией
<br>- Знание ПК на уровне опытного пользователя
<br>- Знание языков: высокий уровень государственных языков и разговорный английский (турецкий)
<br>- Коммуникабельность, ответственность, вежливость.</p>
<p><a class="btn btn-primary btn-lg" href="#tab_default_2" data-toggle="tab">Заполнить анкету</a>
</p>
</div>
<div class="tab-pane active" id="tab_default_2">
<div class="row">
<div class="col-md-4">
<form role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Фамилия">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Имя">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Отчество">
</div>
</form>
</div> <! --/col-md-4 -->
<div class="col-md-8">
<form role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Место рождения">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Место проживания в данное время">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Место последней работы">
</div>
</form>
</div> <! --/col-md-8 -->
<div class="col-md-4">
<form role="form">
<div class="form-group">
<input type="date" class="form-control" id="date" name="date" placeholder="Дата рождения">
</div>
<div class="form-group">
<select class="form-control" id="status" name="status" placeholder="Статус">
<option>Женат/Замужем</option>
<option>Холост/Не замужем</option>
</select>
</div>
</form>
</div> <! --/col-md-4 -->
<div class="col-md-8">
<form role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Телефон (сот., дом.)">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Эл. адрес">
</div>
</form>
</div> <! --/col-md-4 -->
<div class="col-md-12">
<form role="form">
<div class="form-group">
<textarea cols="30" rows="5" class="form-control" placeholder="Оставьте совой комментарий"></textarea>
</div>
<button type="submit" class="btn btn-primary btn-lg">Отправить</button>
</form>
</div>
</div>
</div><! --/tab-pane -->
</div><! --/tabbable-content -->
</div><! --/tabbable-panel -->
</div><! --/col-md-12 -->
</div><! --/row -->
</div><! --/container -->
</section>
<section id="findus">
<div class="container-fluid">
<div class="section-heading inverse scrollpoint sp-effect3">
<h1>Контакты</h1>
<div class="divider"></div>
<p>Мы рады видеть вас!</p>
</div><! --/section-heading -->
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8 col-sm-8 scrollpoint sp-effect1" >
<img src="img/freeze/freeze-angled2.png" data-bgposition="right top" alt="">
</div>
<div class="col-md-4 col-sm-4 contact-details scrollpoint sp-effect2">
<div class="media">
<div class="media-body">
<h4 class="media-heading">ДЕТАШ МАРКЕТИНГ:</h4>
</div>
</div><! --/media -->
<div class="media">
<a class="pull-left" href="#" >
<i class="fa fa-map-marker fa-2x"></i>
</a>
<div class="media-body">
<h4 class="media-heading">КЫРГЫЗСТАН, ГОРОД БИШКЕК, УЛИЦА КУЛАТОВА №3</h4>
</div>
</div><! --/media -->
<div class="media">
<a class="pull-left" href="#" >
<i class="fa fa-envelope fa-2x"></i>
</a>
<div class="media-body">
<h4 class="media-heading">
<a href="mailto:demarltd@mail.ru">demarltd@mail.ru</a>
</h4>
</div>
</div><! --/media -->
<div class="media">
<a class="pull-left" href="#" >
<i class="fa fa-phone fa-2x"></i>
</a>
<div class="media-body">
<h4 class="media-heading">ТЕЛ: +996 (312) 90 66 54, ФАКС: +996 (312) 90 66 56</h4>
</div>
</div><! --/media -->
</div><! --/col-md-4 -->
</div><! --/row -->
</div><! --/col-md-12 -->
</div><! --/row -->
</div><! --/container-fluid -->
</section>
<section id="contactus">
<div class="container">
<div class="section-heading scrollpoint sp-effect3">
<h1>Запрос</h1>
<div class="divider"></div>
<p>Ждем ваши пожелания и вопросы</p>
</div><!-- /section-heading -->
<div class="row">
<div class="col-lg-12">
<div class="hline"></div>
<form role="form">
<div class="form-group">
<input type="name" class="form-control" placeholder="Укажите ваше имя" id="name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Укажите адрес вашей электроной почты" id="email">
</div>
<div class="form-group">
<input type="phone" class="form-control" placeholder="Оставьте ваш контактный номер" id="phone">
</div>
<div class="form-group">
<label for="message1">Сообщение</label>
<textarea class="form-control" placeholder="Оставьте ваше сообщение здесь" id="message" rows="6"></textarea>
</div>
<button type="submit" class="btn btn-primary btn-lg">Отправить</button>
</form>
<br>
</div><!-- /.col-lg-12 -->
</div><!-- /row -->
</div><!-- /container -->
</section>
<footer>
<div class="container">
<a href="#" class="scrollpoint sp-effect3">
<img src="img/freeze/logo.png" alt="" class="logo">
</a>
<div class="social">
<a href="#" class="scrollpoint sp-effect3"><i class="fa fa-twitter fa-lg"></i></a>
<a href="#" class="scrollpoint sp-effect3"><i class="fa fa-google-plus fa-lg"></i></a>
<a href="#" class="scrollpoint sp-effect3"><i class="fa fa-facebook fa-lg"></i></a>
</div>
<div class="rights">
<p>Copyright Detas© 2014</p>
</div>
</div><!-- /container -->
</footer>
</div><!-- wrapper -->
<!-- About Modals -->
<div class="product-modal modal fade" id="aboutModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div><! --/lr -->
</div><! --/rl -->
</div><! --/close-modal -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>История</h2>
<hr>
<h2 class="media-heading" >вавав</h2>
<p>текст</p>
<br>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Закрыть</button>
</div><! --/modal-body -->
</div><! --/col-lg-8 -->
</div><! --/row -->
</div><! --/container -->
</div><! --/modal-content -->
</div><! --/product-modal -->
<!-- About Modals -->
<!-- product Modals -->
<div class="product-modal modal fade" id="productModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div><! --/lr -->
</div><! --/rl -->
</div><! --/close-modal -->
<div class="container">
<div class="row">
<div class="row">
<div class="col-md-9">
<h3>
Carousel Product Cart Slider</h3>
</div>
<div class="col-md-3">
<!-- Controls -->
<div class="controls pull-right hidden-xs">
<a class="left fa fa-chevron-left btn btn-success" href="#carousel-example"
data-slide="prev"></a><a class="right fa fa-chevron-right btn btn-success" href="#carousel-example"
data-slide="next"></a>
</div>
</div>
</div><! --/row -->
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img src="http://placehold.it/350x500" class="img-responsive" alt="a" />
</a>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
1</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
</div>
</div>
</div><! --/col-sm-3 -->
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x500" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
2</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
</div>
</div>
</div><! --/col-sm-3 -->
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x500" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
3</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
</div>
</div>
</div><! --/col-sm-3 -->
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x500" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
4</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
</div>
</div>
</div><! --/col-sm-3 -->
</div>
</div><! --/item active -->
<div class="item">
<div class="row">
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x500" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
5</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
</div>
</div>
</div><! --/col-sm-3 -->
</div><! --/row -->
</div> <! --/item -->
</div><! --/carousel-inner -->
</div><! --/carousel-example -->
</div><! --/row -->
</div><! --/container -->
</div><! --/modal-content -->
</div><! --/product-modal -->
<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-content">
<div class="modal-body">
<img src="" alt="" />
</div>
</div>
</div>
</div><!-- lightbox -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/placeholdem.min.js"></script>
<script src="js/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script src="js/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/lightbox.js"></script>
<script src="js/jquery.lightbox-0.5.js"></script>
<script>
$(document).ready(function() {
appMaster.preLoader();
});
</script>
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
</body>
</html>
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
body {
font-family: 'Lato', Arial;
color: #666666;
-webkit-font-smoothing: antialiased;
}
a {
font-family: 'Lato', Arial;
-webkit-font-smoothing: antialiased;
}
div.content {
overflow: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: #666666;
}
header .navbar-default {
background: none;
border: none;
padding-top: 40px;
padding-bottom: 20px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
header .navbar-default ul.navbar-nav {
padding-top: 55px;
}
header .navbar-default ul.navbar-nav li a {
text-transform: capitalize;
font-weight: 400;
font-size: 16px;
padding: 7px 20px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
header .navbar-default ul.navbar-nav li a:after {
content: '';
width: 32px;
background: none;
height: 4px;
position: absolute;
bottom: 2px;
z-index: 99999;
left: 20px;
-webkit-border-radius: 5em;
-moz-border-radius: 5em;
-ms-border-radius: 5em;
-o-border-radius: 5em;
border-radius: 5em;
color: #ffffff;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
header .navbar-default ul.navbar-nav li a:hover {
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
header .navbar-default ul.navbar-nav li a:hover:after {
background: #ffffff;
}
header .navbar-default ul.navbar-nav li a.getApp {
-webkit-border-radius: 5em;
-moz-border-radius: 5em;
-ms-border-radius: 5em;
-o-border-radius: 5em;
border-radius: 5em;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
header .navbar-default ul.navbar-nav li a.getApp:after {
display: none;
}
header .navbar-default .navbar-brand {
height: auto;
padding: 0;
}
header .navbar-default.scrolled {
background: rgba(255, 255, 255, 0.8);
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
padding: 0;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
header .navbar-default.scrolled .navbar-brand {
padding: 15px 20px;
}
header .navbar-default.scrolled .navbar-brand img {
width: auto;
max-height: 33px;
}
header .navbar-default.scrolled ul.navbar-nav {
padding-top: 15px;
}
.scrollpoint {
opacity: 0;
}
.scrollpoint.active {
opacity: 1 \0;
}
.hanging-phone {
position: absolute;
right: 0;
z-index: 0;
bottom: -70px;
}
.section-heading {
margin: 60px 0 30px;
text-align: center;
}
.section-heading h1 {
display: inline-block;
font-size: 55px;
font-weight: 300;
margin-bottom: 0;
}
.section-heading p {
font-size: 25px;
color: #999999;
font-weight: 300;
}
.section-heading .divider:after {
content: "";
position: relative;
height: 4px;
width: 60px;
display: block;
text-align: center;
margin: 13px auto;
-webkit-border-radius: 5em;
-moz-border-radius: 5em;
-ms-border-radius: 5em;
-o-border-radius: 5em;
border-radius: 5em;
}
.section-heading.inverse h1,
.section-heading.inverse p {
color: #ffffff;
}
.section-heading.inverse .divider:after {
background: #ffffff;
}
section#about {
position: relative;
}
section#about .about-item {
text-align: center;
font-size: 17px;
line-height: 25px;
color: #999999;
}
section#about .about-item i.fa {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
padding: 35px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
width: 104px;
}
section#products .slider {
margin: 50px 0;
}
section#products .slider div img {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
padding: 10px;
display: inline;
}
section#products .slider div h4 {
text-align: center;
margin-top: 40px;
font-size: 16px;
}
section#products .slider .slick-dots li button {
-webkit-border-radius: 5em;
-moz-border-radius: 5em;
-ms-border-radius: 5em;
-o-border-radius: 5em;
border-radius: 5em;
}
section#products .slick-prev,
section#products .slick-next {
width: 50px;
height: 50px;
top: 44%;
}
section#products .slick-slide {
text-align: center;
}
section#products .slick-prev:before {
content: "\f104";
}
section#products .slick-next:before {
content: "\f105";
}
section#products .slick-prev:before,
section#products .slick-next:before {
font-size: 34px;
-webkit-border-radius: 5em;
-moz-border-radius: 5em;
-ms-border-radius: 5em;
-o-border-radius: 5em;
border-radius: 5em;
line-height: 45px;
color: #CCC;
border: 2px solid #CCC;
width: 50px;
display: inline-block;
height: 50px;
text-align: center;
}
section#products .filter {
text-align: center;
}
section#products .filter a {
display: inline-block;
padding: 7px 20px;
text-decoration: none;
-webkit-border-radius: 5em;
-moz-border-radius: 5em;
-ms-border-radius: 5em;
-o-border-radius: 5em;
border-radius: 5em;
margin: 10px 5px;
text-transform: uppercase;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
section#findus {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
section#findus .review-filtering {
margin: 20px 0 100px 0;
}
section#findus .review-filtering .review .review-person {
width: 100%;
}
section#findus .review-filtering .review .review-person img {
width: 110px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
margin: 10px auto;
}
section#findus .review-filtering .review .review-comment {
width: 100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
padding: 5px 40px 20px;
position: relative;
}
section#findus .review-filtering .review .review-comment h3 {
margin-bottom: 15px;
}
section#findus .review-filtering .review .review-comment p {
font-size: 16px;
color: #999999;
}
section#findus .review-filtering .review .review-comment p span {
margin-left: 10px;
}
section#findus .review-filtering .review .review-comment:after {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-width: 15px;
margin-top: -10px;
}
section#findus .review-filtering .review .review-person,
section#findus .review-filtering .review .review-comment {
float: left;
}
section#findus .review-filtering .slick-dots {
bottom: -80px;
}
section#findus .review-filtering .slick-dots li button {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
section#findus .review-filtering .slick-dots li button:before {
display: none;
}
section#career iframe {
width: 100%;
height: 100%;
border: none;
}
/* footer section */
footer {
padding: 80px 0;
text-align: center;
}
footer a > img {
width: 200px;
}
footer .social {
display: block;
margin-top: 30px;
}
footer .social a {
margin: 0 8px;
padding: 15px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
display: inline-block;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
footer .social a i {
width: 1em;
}
footer .rights {
margin-top: 30px;
}
footer .rights a {
text-decoration: underline;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
font-weight: bold;
}
footer .rights a:hover {
text-decoration: none;
}
section {
position: relative;
padding-bottom: 90px;
}
/* Common style for pseudo-elements */
section::before,
section::after {
position: absolute;
content: '';
pointer-events: none;
overflow: hidden;
}
.carousel-fade .carousel-inner .item {
opacity: 0;
transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
.tp-caption {
font-family: 'Lato', Arial !important;
-webkit-font-smoothing: antialiased;
}
.tp-caption.large_white_bold {
color: #ffffff;
font-size: 65px;
font-weight: 400;
}
.tp-caption.large_white_light {
color: #ffffff;
font-size: 65px;
font-weight: 400;
font-weight: 300;
}
.btn {
-webkit-border-radius: 3em;
-moz-border-radius: 3em;
-ms-border-radius: 3em;
-o-border-radius: 3em;
border-radius: 3em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding: 5px 25px;
}
.btn.btn-primary {
border: 2px solid #ffffff;
background: none;
color: #ffffff;
}
.btn.btn-primary:hover {
color: #ffffff;
}
.btn.btn-default {
border: none;
background: #ffffff;
/* Old browsers */
background: -moz-linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #cccccc));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
/* IE10+ */
background: linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#cccccc, GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
.btn.btn-lg {
padding: 10px 25px;
}
.btn:hover {
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
form .form-control {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 5em;
-moz-border-radius: 5em;
-ms-border-radius: 5em;
-o-border-radius: 5em;
border-radius: 5em;
height: 40px;
line-height: 40px;
padding: 20px;
color: #ffffff;
border: 2px solid #cccccc;
font-weight: 300;
}
form textarea.form-control {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
height: auto;
line-height: normal;
}
@media screen and (max-width: 640px) {
.logo {
width: 100px;
height: auto;
}
.slick-next {
right: 0;
}
.slick-prev {
left: 0;
}
.contact-details {
margin-top: 20px;
}
header .navbar-default {
padding: 20px;
}
header .navbar-default .navbar-toggle {
margin-top: 0px;
margin-right: 0px;
background: none;
border: 2px solid #ffffff;
color: #ffffff;
-webkit-border-radius: 5em;
-moz-border-radius: 5em;
-ms-border-radius: 5em;
-o-border-radius: 5em;
border-radius: 5em;
}
header .navbar-default .navbar-toggle:hover,
header .navbar-default .navbar-toggle:focus {
background: none;
}
header .navbar-default ul.navbar-nav {
padding-top: 0;
margin: 0;
}
header .navbar-default ul.navbar-nav li a {
padding: 10px;
text-align: center;
}
header .navbar-default ul.navbar-nav li a.getApp {
background: none !important;
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
-ms-border-radius: 0em;
-o-border-radius: 0em;
border-radius: 0em;
}
header .navbar-default .navbar-collapse {
border-color: transparent;
}
header .navbar-default.scrolled .navbar-collapse {
border-color: transparent;
}
header .navbar-default.scrolled ul.navbar-nav {
padding-top: 0;
margin: 0;
}
header .navbar-default.scrolled .navbar-toggle {
margin-top: 11px;
margin-right: 20px;
background: none;
border: 2px solid #ffffff;
color: #ffffff;
-webkit-border-radius: 5em;
-moz-border-radius: 5em;
-ms-border-radius: 5em;
-o-border-radius: 5em;
border-radius: 5em;
}
}
.pre-loader {
position: fixed;
width: 100%;
height: 100%;
z-index: 9999999;
display: block;
}
.pre-loader .load-con {
margin: 20% auto;
position: relative;
text-align: center;
}
.spinner {
margin: 50px auto 0;
width: 70px;
text-align: center;
}
.spinner > div {
width: 18px;
height: 18px;
background-color: #ffffff;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
}
40% {
-webkit-transform: scale(1);
}
}
@keyframes bouncedelay {
0%,
80%,
100% {
transform: scale(0);
-webkit-transform: scale(0);
}
40% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
header {
background: #66cdcc;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #66cdcc 0%, #336799 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #66cdcc), color-stop(100%, #336799));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #66cdcc 0%, #336799 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #66cdcc 0%, #336799 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #66cdcc 0%, #336799 100%);
/* IE10+ */
background: linear-gradient(-45deg, #66cdcc 0%, #336799 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66cdcc, endColorstr=#336799, GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
header .navbar-default ul.navbar-nav li a {
color: #ffffff;
background: none;
}
header .navbar-default ul.navbar-nav li a.getApp {
color: #3c79b4;
background: #ffffff;
/* Old browsers */
background: -moz-linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #e0e0e0));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);
/* IE10+ */
background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#e0e0e0, GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
header .navbar-default ul.navbar-nav li a.getApp:hover {
color: #4081bf;
background: #ffffff;
/* Old browsers */
background: -moz-linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #cccccc));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
/* IE10+ */
background: linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#cccccc, GradientType=1);
/* IE6-9 fallback on horizontal gradient */
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
header .navbar-default ul.navbar-nav li a:hover {
color: #ffffff;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
header .navbar-default.scrolled {
border-bottom: 3px solid #336799;
}
header .navbar-default.scrolled ul.navbar-nav li a {
color: #336799;
}
header .navbar-default.scrolled ul.navbar-nav li a:hover {
color: #336799;
}
header .navbar-default.scrolled ul.navbar-nav li a:hover:after {
background: #336799;
}
header .navbar-default.scrolled .navbar-brand {
background: #336799;
}
section .section-heading .divider:after {
background: #66cdcc;
}
section#about .about-item i.fa {
border: 2px solid #66cdcc;
color: #66cdcc;
}
section#about .about-item:hover i.fa {
color: #ffffff;
background: #66cdcc;
}
section#about .about-item:hover h3 {
color: #66cdcc;
}
section#features {
background: #f6f6f6;
}
section#features header h1:after {
background: #66cdcc;
}
section#features .media i.fa {
border: 2px solid #66cdcc;
color: #66cdcc;
}
section#features .media:hover i.fa {
color: #ffffff;
background: #66cdcc;
}
section#features .media:hover h3 {
color: #66cdcc;
}
section#features .media.active i.fa {
color: #ffffff;
background: #66cdcc;
}
section#features .media.active .media-heading {
color: #66cdcc;
}
section#findus {
background: url("../img/freeze/bk-freeze.jpg");
}
section#findus header {
color: #ffffff;
}
section#findus header h1:after {
background: #ffffff;
}
section#findus .review-filtering .review .review-person img {
border: 3px solid #ffffff;
}
section#findus .review-filtering .review .review-comment {
background: #ffffff;
}
section#findus .review-filtering .review .review-comment h3 {
color: #66cdcc;
}
section#findus .review-filtering .review .review-comment p span i {
color: #66cdcc;
}
section#findus .review-filtering .review .review-comment:after {
border-right-color: #ffffff;
}
section#findus .review-filtering .slick-dots li button {
background: #ffffff;
border: 2px solid #ffffff;
}
section#findus .review-filtering .slick-dots li.slick-active button {
background: #66cdcc;
}
section#products{
background: #f6f6f6;
}
section#products header h1:after {
background: #f6f6f6;
}
section#products .slider div img {
border: 2px solid #e5e5e5;
}
section#products .slider div h4 {
color: #999999;
}
section#products .slider .slick-dots li button {
background: #999999;
}
section#products .slider .slick-dots li.slick-active button {
background: #66cdcc;
}
section#products .filter a {
border: 2px solid #cccccc;
color: #999999;
}
section#products .filter a:hover {
color: #ffffff;
background: #66cdcc;
border-color: #66cdcc;
}
section#products .filter a.active {
color: #ffffff;
background: #66cdcc;
border-color: #66cdcc;
}
/* career */
section#career header h1:after {
background: #66cdcc;
}
}
/* support section */
section#support header h1:after {
background: #66cdcc;
}
section#support .media i.fa {
border: 2px solid #66cdcc;
color: #66cdcc;
}
section#support .media a {
color: #66cdcc;
}
section#support .media:hover i.fa {
color: #ffffff;
background: #66cdcc;
}
section#support .media:hover h3 {
color: #66cdcc;
}
/* footer section */
footer {
background: #66cdcc;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #66cdcc 0%, #336799 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #66cdcc), color-stop(100%, #336799));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #66cdcc 0%, #336799 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #66cdcc 0%, #336799 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #66cdcc 0%, #336799 100%);
/* IE10+ */
background: linear-gradient(-45deg, #66cdcc 0%, #336799 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66cdcc, endColorstr=#336799, GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
footer .social a {
border: 2px solid #ffffff;
}
footer .social a i {
color: #ffffff;
}
footer .social a:hover {
background: #ffffff;
}
footer .social a:hover i {
color: #66cdcc;
}
footer .rights {
color: #ffffff;
}
footer .rights a {
color: #ffffff;
font-weight: 300;
text-decoration: none;
}
.navbar-toggle {
background-color: #CCC;
border: 1px solid rgba(0, 0, 0, 0);
}
.btn.btn-primary {
color: #66cdcc;
border-color: #66cdcc;
}
.btn.btn-primary:hover {
color: #ffffff;
background: #66cdcc;
border-color: #66cdcc;
}
.btn.btn-primary.inverse {
color: #ffffff;
border-color: #ffffff;
}
.btn.btn-primary.inverse:hover {
color: #ffffff;
background: #66cdcc;
border-color: #66cdcc;
}
.btn.btn-default {
background: #ffffff;
/* Old browsers */
background: -moz-linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #cccccc));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
/* IE10+ */
background: linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#cccccc, GradientType=1);
/* IE6-9 fallback on horizontal gradient */
color: #336799;
}
.btn.btn-default:hover {
color: #336799;
}
form .form-control:focus {
border-color: #66cdcc;
color: #ffffff;
}
.control-label {
color: #ffffff;
}
.table thead {
color: #ffffff;
}
@media screen and (max-width: 640px) {
header .navbar-default .navbar-toggle:hover,
header .navbar-default .navbar-toggle:focus {
background: none;
}
header .navbar-default ul.navbar-nav li a {
color: #ffffff;
border-bottom: 1px solid #376fa4;
}
header .navbar-default ul.navbar-nav li a.getApp {
color: #ffffff;
}
header .navbar-default ul.navbar-nav li a:after {
display: none;
}
header .navbar-default ul.navbar-nav li a:hover {
color: #66cdcc;
}
header .navbar-default .navbar-collapse {
background: #336799;
}
header .navbar-default.scrolled {
background: #336799;
}
header .navbar-default.scrolled ul.navbar-nav li a {
color: #ffffff;
}
header .navbar-default.scrolled ul.navbar-nav li a:hover {
color: #66cdcc;
}
}
.pre-loader {
background: #336799;
}
#about .about-item {
right: 0;
margin: 0 0 15px;
}
#about .about-item .about -link {
display: block;
position: relative;
margin: 0 auto;
max-width: 400px;
}
#about .about-item .about-link .caption {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
background: rgba(24,188,156,.9);
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
transition: all ease .5s;
}
#about .about-item .about-link .caption:hover {
opacity: 1;
}
#about .about-item .about-link .caption .caption-content {
position: absolute;
top: 50%;
width: 100%;
height: 20px;
margin-top: -12px;
text-align: center;
font-size: 20px;
color: #fff;
}
#about .about-item .about-link .caption .caption-content i {
margin-top: -12px;
}
#about .about-item .about-link .caption .caption-content h3,
#about .about-item .about-link .caption .caption-content h4 {
margin: 0;
}
#about * {
z-index: 2;
}
#about .about-item {
right: 0;
margin: 0 0 15px;
}
@media(min-width:767px) {
#about .about-item {
margin: 0 0 30px;
}
}
.about-modal .modal-content {
padding: 100px 0;
min-height: 100%;
border: 0;
border-radius: 0;
text-align: center;
background-clip: border-box;
-webkit-box-shadow: none;
box-shadow: none;
}
.about-modal .modal-content .item-details {
margin: 30px 0;
}
.about-modal .close-modal {
position: absolute;
top: 25px;
right: 25px;
width: 75px;
height: 75px;
background-color: transparent;
cursor: pointer;
}
.about-modal .close-modal:hover {
opacity: .3;
}
.about-modal .close-modal .lr {
z-index: 1051;
width: 2px;
height: 35px;
margin-left: 35px;
background-color: #2c3e50;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
}
.about-modal .close-modal .lr .rl {
z-index: 1052;
width: 2px;
height: 35px;
background-color: #2c3e50;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
/* Tabs panel */
.tabbable-panel {
border:1px solid #eee;
padding: 10px;
}
/* Default mode */
.tabbable-line > .nav-tabs {
border: none;
margin: 0px;
}
.tabbable-line > .nav-tabs > li {
margin-right: 2px;
}
.tabbable-line > .nav-tabs > li > a {
border: 0;
margin-right: 0;
color: #737373;
}
.tabbable-line > .nav-tabs > li > a > i {
color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
border-bottom: 4px solid #fbcdcf;
}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
border: 0;
background: none !important;
color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
margin-top: 0px;
}
.tabbable-line > .nav-tabs > li.active {
border-bottom: 4px solid #f3565d;
position: relative;
}
.tabbable-line > .nav-tabs > li.active > a {
border: 0;
color: #333333;
}
.tabbable-line > .nav-tabs > li.active > a > i {
color: #404040;
}
.tabbable-line > .tab-content {
margin-top: -3px;
background-color: #fff;
border: 0;
border-top: 1px solid #eee;
padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
padding-bottom: 0;
}
/* carousel product */
.col-item
{
border: 1px solid #E1E1E1;
border-radius: 5px;
background: #FFF;
}
.col-item .photo img
{
margin: 0 auto;
width: 100%;
}
.col-item .info
{
padding: 10px;
border-radius: 0 0 5px 5px;
margin-top: 1px;
}
.col-item:hover .info {
background-color: #F5F5DC;
}
.col-item .price
{
/*width: 50%;*/
float: left;
margin-top: 5px;
}
.col-item .price h5
{
line-height: 20px;
margin: 0;
}
.price-text-color
{
color: #219FD1;
}
.col-item .info .rating
{
color: #777;
}
.col-item .rating
{
/*width: 50%;*/
float: left;
font-size: 17px;
text-align: right;
line-height: 52px;
margin-bottom: 10px;
height: 52px;
}
.col-item .separator
{
border-top: 1px solid #E1E1E1;
}
.clear-left
{
clear: left;
}
.col-item .separator p
{
line-height: 20px;
margin-bottom: 0;
margin-top: 10px;
text-align: center;
}
.col-item .separator p i
{
margin-right: 5px;
}
.col-item .btn-add
{
width: 50%;
float: left;
}
.col-item .btn-add
{
border-right: 1px solid #E1E1E1;
}
.col-item .btn-details
{
width: 50%;
float: left;
padding-left: 10px;
}
.controls
{
margin-top: 20px;
}
[data-slide="prev"]
{
margin-right: 10px;
}
#lightbox .modal-content {
display: inline-block;
text-align: center;
}
#lightbox .close {
opacity: 1;
color: rgb(255, 255, 255);
background-color: rgb(25, 25, 25);
padding: 5px 8px;
border-radius: 30px;
border: 2px solid rgb(255, 255, 255);
position: absolute;
top: -15px;
right: -55px;
z-index:1032;
}
