"detas site"
Bootstrap 3.3.0 Snippet by Azamatuz

<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; }

Related: See More


Questions / Comments: