style.less

// --- colors styles --------------------- 
// main dark color
@dark : #21242e;

// light color 
@light : #fff;

@lightGray : #f5f6f8;

@darkGray : #393f4f;

// main accent color 
// color 1 = Blue 
@blue : #3498db;

//  color 2 = Pink 
@pink : #ff6b6b;

// color 3 = Green
@green : #16a085;

// color 4 = Red
@red : #cd2f2e;

// color 5 = Purple
@purple : #904eab;

// color 6 = Purple
@brown : #a57b4a;

// color 7 = Purple
@cyan : #2997ab;

// color 8 = Purple
@lightgreen : #38cbcb;

// color 9 = Purple
@yellow : #f8ba01;



// text colors
// content color of slider
@sliderText : #c5c5c5; 

// content color of all body texts
@contentText : #7a7c82;

@borderColor : #cccccc;


// main font family
@font : 'Open Sans', 'Helvetica', 'Tahoma', 'Arial', sans-serif;


// ---------- PARAMETRIC MIXINS ----------
// generally applied border raduis
.round (@radius: 2px 2px 2px 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -o-border-radius: @radius;
  -ms-border-radius: @radius;
  -khtml-border-radius: @radius;
  border-radius: @radius;
}


// generally applied transition
// transition ease in out

.transitionEaseInOut (@duration: 0.4s, @ease: ease-in-out) {
  -webkit-transition: all @duration @ease;
  -moz-transition: all @duration @ease;
  -o-transition: all @duration @ease; 
  -ms-transition: all @duration @ease; 
  -khtml-transition: all @duration @ease; 
  transition: all @duration @ease;
}
// transition linear
.transitionLinear (@duration: 0.3s, @linear: linear) {
  -webkit-transition: all @duration @linear;
  -moz-transition: all @duration @linear;
  -o-transition: all @duration @linear; 
  -ms-transition: all @duration @linear; 
  -khtml-transition: all @duration @linear; 
  transition: all @duration @linear;
}

// generally applied box shadow 

.box-shadow (@x: 0, @y: 0, @blur: 0.2px, @color: rgba(0,0,0,0.5)) {
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -o-box-shadow: @arguments;
  -ms-box-shadow: @arguments;
  -khtml-box-shadow: @arguments;
  box-shadow: @arguments;
}
// generally applied text shadow

.text-shadow (@x: 0, @y: 0, @blur: 0.2px, @color: rgba(0,0,0,0.5)) {
  -webkit-text-shadow: @arguments;
  -moz-text-shadow: @arguments;
  -o-text-shadow: @arguments;
  -ms-text-shadow: @arguments;
  -khtml-text-shadow: @arguments;
  text-shadow: @arguments;
}

// generally applied gradient
.gradient (@from, @to) {
  background-color: @from;
  background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to));
  background-image: -webkit-linear-gradient(top, @from, @to);
  background-image:    -moz-linear-gradient(top, @from, @to);
  background-image:      -o-linear-gradient(top, @from, @to);
  background-image:         linear-gradient(to bottom, @from, @to);
}

// generally applied inner-shadow
.inner-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  -webkit-box-shadow: inset @arguments;
  box-shadow: inset  @arguments;
}


@import url('css/bootstrap.css');
@import url('css/css3-animations.css');
@import url('css/font-awesome.css');
@import url('http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,latin-ext');





/*=============================================================================
  
  Stylesheet Documentation


  Imported Css
  -------------
    1. bootstrap.css
    2. css3-animations.css
    3. font-awesome.css
    4. open sans ( Google Fonts )


  Stylesheet Components
  ---------------------
    1. General resets
    2. Globally pages Applied Styles
    3. Default Styles
      - Top Menu
      - Slider 
      - Header
        . Logo
        . Main Nav
        . Responsive Main Nav
      - Services
      - Pricing
      - Features
      - Departments
      - Domain Serach
      - About
        . Introduction
        . Team
      - Facts
      - Blog
      - Single Post Page
      - Testmonials
      - Purchase
      - Clients
      - FAQS
      - Protfolio
      - Proud
      - Footer
        . Top Footer
        . Bottom Footer
    4. Style 2
      - Header
      - Slider
    5. Style 3
      - Slider
      - Domain Search
      - About
    6. Style 4
      - Top Menu
      - Header
      - Slider
      - Pricing
    7. Style 5
      - Header
      - Slider
      - Domain Search
      - Services
      - Purchase
    8. Style 6
      - Top Menu
      - Main Slider
      - Header
      - Pricing Table
      - Services
      - Testmonials
    9. Style 7
      - Banner
      - Header
      - Slider
    10. Inner Pages Styles
      - Page Header
        . Page info
        . Page Title
        . Bread Crumb
      - Pricing
      - Contact
        . Google Map
        . Follow
      - Shortcodes
        . Newsletter
        . Social List
        . Tabs
        . Alert
        . Message Panel
      - Typography
        . Headings
        . Columns
        . Blockquotes
        . Dropcaps
      - Coming Soon
      - Erorr 404
      - Login & Register
      - Boxed Style
        . Body Boxed 
        . Body Boxed-2 
    11.Switcher Style
      - skinsColor
      - tempLayout
      - patterens
    12. Scroll To Top

  =============================================================================*/

/*=============================================================================

	1. General resets

	=============================================================================*/
/* --- general resets --------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video,
embed,
object {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  vertical-align: baseline;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  outline: 0px;
  padding: 0px;
  margin: 0px;
  border: 0px;
  font-variant: normal;
  text-transform: none;
  speak: none;
}
/* --- HTML5 display-role reset for older browsers --------------------- */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  font-size: 12px;
  font-family: @font;
  height: auto !important;
  overflow: hidden;
}
/* --- typography --------------------- */
/*headings*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: @font;
  margin-bottom: 15px;
  font-weight: 700;
  color: @pink;
}
h1 {
  font-size: 32px;
}
h2 {
  font-size: 28px;
}
h3 {
  font-size: 25px;
}
h4 {
  font-size: 22px;
}
h5 {
  font-size: 18px;
}
h6 {
  font-size: 14px;
}
/* paragraphs */
p {
  font-size: 13px;
  line-height: 22px;
  font-family: @font;
  color: @contentText;
  font-weight: 500;
  margin-bottom: 15px;
}
p:last-child {
  margin-bottom: 0px;
}
p:before {
  width: 30px;
  display: inline-block;
}
span {
  font-size: 14px;
  line-height: 1.428;
  font-family: @font;
}
/* small */
code,
pre {
  display: block;
  white-space: pre;
}
del {
  text-decoration: line-through;
  color: #666666;
}
ins,
dfn {
  border-bottom: 1px solid #cccccc;
}
small,
sup,
sub {
  font-size: 85%;
}
abbr,
acronym {
  text-transform: capitalize;
}
a abbr,
a acronym {
  border: none;
}
abbr[title],
acronym[title],
dfn[title] {
  cursor: help;
  border-bottom: 1px dotted #cccccc;
}
sup {
  vertical-align: super;
}
sub {
  vertical-align: sub;
}
cite,
em,
dfn {
  font-style: italic;
}
i {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-size: 16px;
  display: inline-block;
}


a:hover > i , button:hover > i , input[type="submit"]:hover > i ,  .singleFeature:hover .featureIcon i {
  -webkit-animation: toTopFromBottom 0.5s forwards;
  -moz-animation: toTopFromBottom 0.5s forwards;
  -khtml-animation: toTopFromBottom 0.5s forwards;
  -o-animation: toTopFromBottom 0.5s forwards;
}
@-webkit-keyframes toTopFromBottom {
  49% {
    -webkit-transform: translateY(-100%);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
  51% {
    opacity: 1;
  }
}
@-moz-keyframes toTopFromBottom {
  49% {
    -moz-transform: translateY(-100%);
  }
  50% {
    opacity: 0;
    -moz-transform: translateY(100%);
  }
  51% {
    opacity: 1;
  }
}
@keyframes toTopFromBottom {
  49% {
    transform: translateY(-100%);
  }
  50% {
    opacity: 0;
    transform: translateY(100%);
  }
  51% {
    opacity: 1;
  }
}


/* Fontello */
[class^="icon-"]:before,
[class*=" icon-"]:before {
  width: auto;
  margin-right: 0px;
  margin-left: 0px;
  line-height: 1;
}
/*strong*/
strong {
  font-size: 16px;
  font-weight: bold;
}
/* Blockquote */
blockquote {
  background: rgba(0, 0, 0, 0.04);
  position: relative;
  padding: 20px 30px;
  border: none;
  margin: 0 auto;
  margin-bottom: 15px;
  color: #999b9e;
  font-size: 14px;
  line-height: 20px;
  font-style: italic;
}
blockquote:before {
  font-family: 'FontAwesome';
  content: '';
  position: absolute;
  right: 32px;
  text-align: center;
  line-height: 32px;
  color: rgba(0, 0, 0, 0.3);
  bottom: 32px;
  width: 32px;
  height: 32px;
  font-size: 22px;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}
blockquote p {
  padding: 0;
  color: #999b9e;
  font-size: 14px;
  line-height: 20px;
  font-style: italic;
}
/* Lists */
ol,
ul {
  list-style: none;
}
/* Code */
kbd {
  padding: 2px 4px;
  font-size: 90%;
  color: ;
  background-color: transparent;
  border-radius: 3px;
  box-shadow: none;
}
/* --- Forms --------------------- */
form {
  outline: none;
}
input,
textarea,
button,
input[type="button"],
.generalBtn {
  outline: none !important;
  box-shadow: none;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
input,
textarea {
  font-size: 12px;
  color: #5d5d5d;
  font-family: @font;
}
input:focus,
textarea:focus {
  color: #333;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
  border: 1px solid #e0e0e0;
  padding: 8px 9px;
  outline: none;
  color: @dark;
  margin: 0;
  max-width: 100%;
  background: @light;
  .transitionEaseInOut();
  .round();
  font-size: 15px;
  font-weight: 700;
}
textarea {
  overflow: auto;
  vertical-align: top;
  width: 100%;
  max-width: 100%;
  min-height: 132px;
  position: relative;

  &::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background: @light;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 100;
  }
}
button ,
input[type="button"] ,
input[type="submit"] {
  border: 0px;
  color: @light;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 20px;
  background-color: @dark;
  .transitionEaseInOut();
  .round();
}
/* buttons */
button,
input[type="button"],
.generalBtn {
  padding: 7px 15px;
  display: inline-block;
  text-align: center;
  font-size: 1em;
  border: none;
  font-family: @font;
  font-size: 12px;
}
label {
  color: #919191;
  font-family: tahoma, sans-serif;
  font-size: 0.8em;
  cursor: pointer;
}

input[type="checkbox"] , 
.check ,
input[type="radio"] , 
.radio {
  display: none;
}

input[type="checkbox"]  + label ,
.check + label ,
input[type="radio"] + label , 
.radio + label {
  display: inline-block;
  line-height: 22px;
  margin-bottom: 10px;

  &:after {
    .transitionEaseInOut;
    content: '';
    font-family: 'FontAwesome';
    color: @dark;
    font-size: 100%;
    display: inline-block;
    float: left;
    width: 22px;
    height: 22px;
    line-height: 22px;
    .round;
    border: 1px solid @borderColor;
    background-color: @lightGray;
    text-align: center;
    font-size: 100%;
    z-index: 100;
    margin-right: 10px;
  }
}
input[type="checkbox"]:checked  + label ,
.check:checked + label ,
input[type="radio"]:checked + label , 
.radio:checked + label {
  &:after {
    content: '\f00c';
  }
}
input[type="radio"] + label , 
.radio + label {
  &:after {
    .round(100px);
  }
}

input[type="radio"]:checked + label , 
.radio:checked + label {
  .round(50%);

  &:after {
    content: '\f111';
  }
}


/* placeholder */

*::-webkit-input-placeholder { /* WebKit browsers */
  color:    @dark;
}
*:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:    @dark;
  opacity:  1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:    @dark;
  opacity:  1;
}
*:-ms-input-placeholder { /* Internet Explorer 10+ */
  color:    @dark;
}
/* --- tables --------------------- */
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption,
th,
td {
  text-align: left;
  font-weight: 400;
}
/* --- images --------------------- */
img {
  /*max-width: 100%;*/
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
/* --- links --------------------- */
a,
a:link,
a:visited,
a:active,
a:focus {
  text-decoration: none !important;
  font-family: @font;
  .transitionEaseInOut ();
}
a,
a:visited {
  outline: 0px;
}
a:hover {
  color: inherit;
}


/*general link*/
.generalLink {
  padding: 7px 15px;
  display: inline-block;
  text-align: center;
  font-family: @font;
  font-size: 13px;
  font-weight: 700;
  background-color: @dark;
  color: @light;
  .round();

  &:hover {
    background-color: @pink;
    color: @light;
  }
}
.bordered {
  background-color: transparent;
  border: 1px solid @pink;
  color: @pink;
}
.bordered:hover {
  border: 1px solid @pink;
  background-color: @pink;
  color: @light;
}
.miniLink {
  padding: 5px 10px;
  font-size: 0.75em;
}
.smallLink {
  padding: 7px 12px;
  font-size: 0.85em;
}
.largeLink {
  padding: 15px 25px;
  font-size: 1.5em;
}
/* break */
.br {
  display: block;
  height: 30px;
}
/* hr */
hr,
.container hr {
  margin: 0px;
  height: 1px;
  background: @borderColor;
  border: 0px;
}
/* --- clearing --------------------- */
.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}
.clearfix:after {
  clear: both;
}
/* --- Svg --------------------- */
.svg {
  width: 100%;
  height: 100%;
}
/* --- general clasess --------------------- */
.none {
  display: none;
}
.block {
  display: block !important;
}
.fixed_pos {
  position: fixed;
}
.alignright {
  float: right;
  margin-left: 20px;
}
.alignleft {
  float: left;
  margin-right: 20px;
}
.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.centerdText {
  text-align: center;
}
.noMarginLeft {
  margin-left: 0px !important;
}
.noMarginRight {
  margin-right: 0px !important;
}
.noMarginTop {
  margin-right: 0px !important;
}
.noMarginBottom {
  margin-bottom: 0px !important;
}
.firstChild {
  margin: 0px;
}
.lastChild {
  margin: 0px;
}
.offset {
  display: none;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

/* col */

[class*="col"] {
  .transitionEaseInOut(0.4s);
}

/* --- selection --------------------- */
::-moz-selection {
  background-color: @pink;
  color: @light;
}
::-webkit-selection {
  background-color: @pink;
  color: @light;
}
::-o-selection {
  background-color: @pink;
  color: @light;
}
::-khtml-selection {
  background-color: @pink;
  color: @light;
}
::-ms-selection {
  background-color: @pink;
  color: @light;
}
::selection {
  background-color: @pink;
  color: @light;
}
/* --- tooltip --------------------- */
/* tooltip bottom */
.tooltipBottom + .tooltip {
  animation-name: tooltipBottom;
  -webkit-animation-name: tooltipBottom;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}
@keyframes tooltipBottom {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(30%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes tooltipBottom {
  0% {
    -webkit-transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(30%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}
/* tooltip top */
.tooltipTop + .tooltip,
.tooltip {
  animation-name: tooltipTop;
  -webkit-animation-name: tooltipTop;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}
@keyframes tooltipTop {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-30%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes tooltipTop {
  0% {
    -webkit-transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(-30%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}
/* tooltip left */
.tooltipLeft + .tooltip {
  animation-name: tooltipLeft;
  -webkit-animation-name: tooltipLeft;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}
@keyframes tooltipLeft {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-30%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes tooltipLeft {
  0% {
    -webkit-transform: translateX(0%);
  }
  50% {
    -webkit-transform: translateX(-30%);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}
/* tooltip Right */
.tooltipRight + .tooltip {
  animation-name: tooltipRight;
  -webkit-animation-name: tooltipRight;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}
@keyframes tooltipRight {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(30%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes tooltipRight {
  0% {
    -webkit-transform: translateX(0%);
  }
  50% {
    -webkit-transform: translateX(30%);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}
/*tool tip customize*/
.tooltip.top .tooltip-arrow {
  border-top-color: @dark;
}
.tooltip.top-left .tooltip-arrow {
  border-top-color: @dark;
}
.tooltip.top-right .tooltip-arrow {
  border-top-color: @dark;
}
.tooltip.right .tooltip-arrow {
  border-right-color: @dark;
}
.tooltip.left .tooltip-arrow {
  border-left-color: @dark;
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: @dark;
}
.tooltip.bottom-left .tooltip-arrow {
  border-bottom-color: @dark;
}
.tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: @dark;
}
/*dark section  tooltip*/
.darkSection .tooltip.top .tooltip-arrow {
  border-top-color: @light;
}
.darkSection .tooltip.top-left .tooltip-arrow {
  border-top-color: @light;
}
.darkSection .tooltip.top-right .tooltip-arrow {
  border-top-color: @light;
}
.darkSection .tooltip.right .tooltip-arrow {
  border-right-color: @light;
}
.darkSection .tooltip.left .tooltip-arrow {
  border-left-color: @light;
}
.darkSection .tooltip.bottom .tooltip-arrow {
  border-bottom-color: @light;
}
.darkSection .tooltip.bottom-left .tooltip-arrow {
  border-bottom-color: @light;
}
.darkSection .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: @light;
}

/* --- Basic --------------------- */
.menu {
  padding-top: 0px !important;
}
.loadSmooth {
  .transitionEaseInOut (0.7s, ease-in-out)
}
#container {
  overflow: hidden;
}

.title {
  font-size: 16px;
  font-weight: 700;
}
/*=============================================================================

	2. Globally pages Applied Styles

	=============================================================================*/
/* --- all wrapper --------------------- */
.allWrapper {
  margin: auto;
  opacity: 0;
  visibility: hidden;
  height: auto;
  position: relative;
  overflow: hidden;
  .transitionEaseInOut(1s);
}
.innerWrapper {
  margin: auto;
}
.container {
  padding: 0px !important;
}
/* --- loading --------------------- */
.loadingContainer {
  text-align: center;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  z-index: 1000;

  .loading {
    display: inline-block;
    text-align: center;

    > div {
      background-color: @dark;
      height: 80px;
      width: 6px;
      display: inline-block;
      
      -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
      animation: stretchdelay 1.2s infinite ease-in-out;
    }
    .rect2 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }
    .rect3 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }
    .rect4 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }
    .rect5 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }
  }
}


@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.loading i {
  display: inline-block;
  width: 52px;
  height: 60px;
  position: absolute;
  left: 50%;
  margin-left: -21px;
  top: 50%;
  margin-top: -30px;
  font-size: 60px;
  display: inline-block;
}
/* --- contents --------------------- */
.section {
  position: relative;

  .sectionWrapper {
    padding: 80px 0px 80px 0px;
    position: relative;
  }
}
/* darkSection */
.darkSection {
  background-color: @dark;

  .sectionTitle .sectionHeader {
    color: @light;
  }
  .sectionTitle p {
    color: @light;
  }

  .generalLink {
    background-color: @pink;

    &:hover {
      background-color: @light;
      color: @pink;
    }
  }
}
.lightSection{
  background-color: @light;
  border-top: 1px solid #dedfe1;
}
.graySection {
  background: @lightGray;
  border-bottom: 1px solid #f2f2f3;
}


.lightDarkSection {
  background: @darkGray;

  .sectionTitle .sectionHeader {
    color: @light;
  }
  .sectionTitle p {
    color: #edeeee;
  }
}

.accentSection {
  background-color: @pink;

  .sectionTitle .sectionHeader {
    color: @dark;
  }
  .sectionTitle p {
    color: @light;
  }
}

/*section header*/
.sectionTitle{
  text-align: center;
  margin-bottom: 53px;

  .sectionHeader {
    position: relative;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    color: @pink;
    margin-bottom: 20px;

    span {
      font-size: 20px;
      color: @dark;
      font-weight: 700;
    }
    .generalBorder {
      display: block;
      margin: 20px auto 0px auto;
      height: 2px;
      opacity: 1;
      background-color: #cbcbcb;
      width: 60px;

      .transitionEaseInOut();
    }

    &:hover {
      .generalBorder {
        width: 100px;
      }
    }
  }

  p {
    width: 81%;
    margin: 15px auto 0px;
  }
}
/* content header*/
.contentHeader {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 3px double #e4e4e4;
  opacity: 0;
}
.contentHeader.animated {
  opacity: 1;
}
/* Social Nav */
.socialNav {
  text-align: left;
}
.socialNav > li {
  float: left;
  font-size: 12px;
  margin: 0px 2.5px;
  white-space: nowrap;
  text-align: center;
  position: relative;
}
.socialNav > li:first-child {
  margin-left: 0px;
}
.socialNav > li:last-child {
  margin-right: 0px;
}
.socialNav > li a {
  display: block;
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 17px;
  position: relative;
  color: #fff;
  background-color: fade(@light, 20%);
  .round();
  overflow: hidden;
}
.socialNav > li a:hover {
  background-color: @pink;
}


/* Accordian */
/*toggle - accordain*/
.accordianShortCode {
  .triggerRow {
    margin-bottom: 10px;
    border: 1px solid @borderColor;
    background-color: @lightGray;
    .round();
  }
  .triggerRow:last-child {
    margin-bottom: 0px;
  }

  .triggerRow:first-child .triggerMenu {
    display: block;
  }

  .triggerRow {
    > a {
      display: block;
      padding: 0px 10px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      font-weight: 700;
      position: relative;
      background: transparent;
      color: @contentText;


      &:hover {
        color: @pink;
      }
    }

    > a:before , > a.activeLine:before , > span.activeLine:before  {
      content: '+';
      font-family: 'Tahoma', sans-serif;
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 18px;
      position: absolute;
      right: 10px;
      top: 10px;
      color: @light;
      font-weight: bold;
      background-color: @contentText;
      .transitionEaseInOut();
      .round();
    }

    > a.activeLine , > span.activeLine {
      color: @pink;
    }

    > a.activeLine:before , > span.activeLine:before {
      content: '-';
      font-family: 'Tahoma', sans-serif;
      background-color: @pink;
    }
  }

  .triggerMenu  {
    display: none;
    padding: 4px 10px 8px 10px;

    p {
      margin-bottom: 25px;
      color: @darkGray;
      font-weight: 300;
      .text-shadow();
    }
    
    p:last-child {
      margin-bottom: 0px;
    }
  }
}

/* --- progress bars --------------------- */

.progress {
  height: 42px;
  font-size: 14px;
  font-weight: 700;
  .round();
  background-color: #edeeee;  
  .box-shadow(0,0,0,0);
  margin-bottom: 22px;

  .progress-bar {
    text-align: left;
    padding-left: 10px;
    line-height: 42px;
    font-size: 14px;
    font-weight: 700;
    background-color: @pink;
    opacity: 0;
  }

  .progress-bar.animated {
    opacity: 1;
  }


  &:last-child {
    margin-bottom: 0px;
  }
}

.progress2 {
  height: 30px;
  margin-bottom: 10px;
  background-color: @dark;  

  .progress-bar {
    font-size: 13px;
    line-height: 30px;
  }
}

/* --- OWL carousel Slider Styles --------------------- */
.slider {
  overflow: hidden;
  position: relative;

}
.slider .item {
  width: 100%;
  position: relative;
  text-align: center;
  .transitionEaseInOut;
}
.slider .item img {
  width: 100%;
  display: block;
}


/* slider controls */
.owl-controls .owl-dots {
  margin-top: 30px;
  width: 100%;
  text-align: center;
  opacity: 1;
  line-height: 16px;
  height: 16px;
}
.slider:hover .owl-controls .owl-dots {
	opacity: 1;
	bottom: 20px;
}
.slider:hover .captionsSlider .owl-controls .owl-dots {
  bottom: 20px;
  opacity: 0;
}
.slider:hover .captionsSlider:hover .owl-controls .owl-dots {
  bottom: 0px;
  opacity: 1;
}
.owl-dot {
  display: inline-block;
  margin: 0px 5px 0px 5px;
  height: 16px;
  line-height: 16px;
  width: 16px;
  padding-top: 2px;
  text-align: center;
  .transitionLinear(0.1s);
}
.owl-dot:first-child {
  margin: 0px 5px 0px 0px;
}
.owl-dot:last-child {
  margin: 0px 0px 0px 5px;
}
.owl-dot span {
  width: 12px;
  display: block;
  text-align: center;
  height: 12px;
  margin: 0px auto;
  text-indent: -99999px;
  border: 2px solid @contentText;
  .round(50%);
  .transitionLinear(0.1s);
}
.owl-dot.active , .owl-dot:hover{
  padding-top: 0px;
  width: 16px;
}
.owl-dot:hover span,
.owl-dot.active span {
  width: 16px;
  height: 16px;
  background-color: @pink;
  border: 0px solid @pink;
}
.owl-controls {
  width: 100%;
}
.owl-controls .owl-nav {
  height: 100%;
  width: 100%;
}
.slider .owl-controls .owl-nav {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  right: 0px;
  height: auto;
  opacity: 1;
  z-index: 1000;
}
.slider:hover .owl-controls .owl-nav {
  opacity: 1;
}
.owl-controls .owl-nav div {
  width: 70px;
  height: 100%;
  line-height: 104px;
  text-align: center;
  display: block;
  color: @light;
  position: absolute;
  z-index: 1000;
  font-size: 16px;
}
.owl-controls .owl-prev {
  left: -20px;
}
.owl-controls .owl-prev:before {
  content: '\ea0f';
  font-family: 'FontAwesome';
}
.owl-controls .owl-next {
  right: -20px;
}
.owl-controls .owl-next:before {
  content: '\ea10';
  font-family: 'FontAwesome';
}
.slider:hover .owl-controls .owl-nav .owl-prev {
  left: 0px;
}
.slider:hover .owl-controls .owl-nav .owl-next {
  right: 0px;
}
#bar {
  width: 0%;
  max-width: 100%;
  height: 4px;
}
#progressBar {
  position: absolute;
  bottom: 0px;
  width: 100%;
  z-index: 10;
  display: none;
}
/*owl carousel*/
.owl-carousel .owl-wrapper:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0px;
  height: 0px;
}

/* 
 *  Core Owl Carousel CSS File
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  -ms-touch-action: pan-y;
  direction: ltr;
}
.owl-carousel .owl-stage {
  -ms-touch-action: pan-Y;
}
.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  /* fix for flashing background */
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
  cursor: pointer;
  cursor: hand;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel.owl-loaded {
  display: block;
}
.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}
.owl-carousel.owl-hidden {
  opacity: 0;
}
.owl-carousel .owl-refresh .owl-item {
  display: none;
}
.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel.owl-text-select-on .owl-item {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}
.owl-carousel .owl-grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}
.owl-carousel.owl-rtl {
  direction: rtl;
}
.owl-carousel.owl-rtl .owl-item {
  float: right;
}

/* No Js */
.no-js .owl-carousel {
  display: block;
}

/* 
 *  Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  -webkit-transition: opacity 400ms ease;
  -moz-transition: opacity 400ms ease;
  -ms-transition: opacity 400ms ease;
  -o-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}
.owl-carousel .owl-item img {
  transform-style: preserve-3d;
}

/* 
 *  Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000;
}
.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  -webkit-transition: scale 100ms ease;
  -moz-transition: scale 100ms ease;
  -ms-transition: scale 100ms ease;
  -o-transition: scale 100ms ease;
  transition: scale 100ms ease;
}
.owl-carousel .owl-video-play-icon:hover {
  -webkit-transition: scale(1.3, 1.3);
  -moz-transition: scale(1.3, 1.3);
  -ms-transition: scale(1.3, 1.3);
  -o-transition: scale(1.3, 1.3);
  transition: scale(1.3, 1.3);
}
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none;
}
.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  -webkit-transition: opacity 400ms ease;
  -moz-transition: opacity 400ms ease;
  -ms-transition: opacity 400ms ease;
  -o-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}
.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
}

.owl-carousel .owl-wrapper {
  display: none;
  position: relative;
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer {
  overflow: hidden;
  position: relative;
  width: 100%;
  transform: translateZ(0);
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -khtml-transform: translateZ(0);
  -o-transform: translateZ(0);
}
.owl-carousel .owl-wrapper-outer.autoHeight {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item {
  float: left;
}
.owl-controls .owl-dot,
.owl-controls .owl-nav div {
  cursor: pointer;
}
.owl-controls {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* mouse grab icon */
.grabbing {
  cursor: url('images/grabbing.png') 8 8, move;
}
/* fix */
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
}
/* 
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.owl-carousel .owl-animated-in {
  z-index: 0;
}
.owl-carousel .owl-animated-out {
  z-index: 1;
}
.owl-carousel .fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}


/* CSS3 Transitions */
.owl-origin {
  -webkit-perspective: 1200px;
  -webkit-perspective-origin-x: 50%;
  -webkit-perspective-origin-y: 50%;
  -moz-perspective: 1200px;
  -moz-perspective-origin-x: 50%;
  -moz-perspective-origin-y: 50%;
  perspective: 1200px;
}
/* fade */
.owl-fade-out {
  z-index: 10;
  -webkit-animation: fadeOut 1.5s both ease-in-out;
  -moz-animation: fadeOut 1.5s both ease-in-out;
  animation: fadeOut 1.5s both ease-in-out;
}
.owl-fade-in {
  -webkit-animation: fadeIn .7s both ease;
  -moz-animation: fadeIn .7s both ease;
  animation: fadeIn .7s both ease;
}
/* backSlide */
.owl-backSlide-out {
  -webkit-animation: backSlideOut 1s both ease;
  -moz-animation: backSlideOut 1s both ease;
  animation: backSlideOut 1s both ease;
}
.owl-backSlide-in {
  -webkit-animation: backSlideIn 1s both ease;
  -moz-animation: backSlideIn 1s both ease;
  animation: backSlideIn 1s both ease;
}
/* goDown */
.owl-goDown-out {
  -webkit-animation: scaleToFade .7s ease both;
  -moz-animation: scaleToFade .7s ease both;
  animation: scaleToFade .7s ease both;
}
.owl-goDown-in {
  -webkit-animation: goDown .6s ease both;
  -moz-animation: goDown .6s ease both;
  animation: goDown .6s ease both;
}
/* scaleUp */
.owl-fadeUp-in {
  -webkit-animation: scaleUpFrom 1.5s ease both;
  -moz-animation: scaleUpFrom 1.5s ease both;
  animation: scaleUpFrom 1.5s ease both;
}
.owl-fadeUp-out {
  -webkit-animation: scaleUpTo 1.5s ease both;
  -moz-animation: scaleUpTo 1.5s ease both;
  animation: scaleUpTo 1.5s ease both;
}
/* Keyframes */
/*empty*/
@-webkit-keyframes empty {
  0% {
    opacity: 1;
  }
}
@-moz-keyframes empty {
  0% {
    opacity: 1;
  }
}
@keyframes empty {
  0% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes backSlideOut {
  25% {
    opacity: .5;
    -webkit-transform: translateZ(-500px);
  }
  75% {
    opacity: .5;
    -webkit-transform: translateZ(-500px) translateX(-200%);
  }
  100% {
    opacity: .5;
    -webkit-transform: translateZ(-500px) translateX(-200%);
  }
}
@-moz-keyframes backSlideOut {
  25% {
    opacity: .5;
    -moz-transform: translateZ(-500px);
  }
  75% {
    opacity: .5;
    -moz-transform: translateZ(-500px) translateX(-200%);
  }
  100% {
    opacity: .5;
    -moz-transform: translateZ(-500px) translateX(-200%);
  }
}
@keyframes backSlideOut {
  25% {
    opacity: .5;
    transform: translateZ(-500px);
  }
  75% {
    opacity: .5;
    transform: translateZ(-500px) translateX(-200%);
  }
  100% {
    opacity: .5;
    transform: translateZ(-500px) translateX(-200%);
  }
}
@-webkit-keyframes backSlideIn {
  0%,
  25% {
    opacity: .5;
    -webkit-transform: translateZ(-500px) translateX(200%);
  }
  75% {
    opacity: .5;
    -webkit-transform: translateZ(-500px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0) translateX(0);
  }
}
@-moz-keyframes backSlideIn {
  0%,
  25% {
    opacity: .5;
    -moz-transform: translateZ(-500px) translateX(200%);
  }
  75% {
    opacity: .5;
    -moz-transform: translateZ(-500px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateZ(0) translateX(0);
  }
}
@keyframes backSlideIn {
  0%,
  25% {
    opacity: .5;
    transform: translateZ(-500px) translateX(200%);
  }
  75% {
    opacity: .5;
    transform: translateZ(-500px);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) translateX(0);
  }
}
@-webkit-keyframes scaleToFade {
  to {
    opacity: 0;
    -webkit-transform: scale(0.8);
  }
}
@-moz-keyframes scaleToFade {
  to {
    opacity: 0;
    -moz-transform: scale(0.8);
  }
}
@keyframes scaleToFade {
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}
@-webkit-keyframes goDown {
  from {
    -webkit-transform: translateY(-100%);
  }
}
@-moz-keyframes goDown {
  from {
    -moz-transform: translateY(-100%);
  }
}
@keyframes goDown {
  from {
    transform: translateY(-100%);
  }
}
@-webkit-keyframes scaleUpFrom {
  from {
    opacity: 0;
    -webkit-transform: scale(1.5);
  }
}
@-moz-keyframes scaleUpFrom {
  from {
    opacity: 0;
    -moz-transform: scale(1.5);
  }
}
@keyframes scaleUpFrom {
  from {
    opacity: 0;
    transform: scale(1.5);
  }
}
@-webkit-keyframes scaleUpTo {
  to {
    opacity: 0;
    -webkit-transform: scale(1.5);
  }
}
@-moz-keyframes scaleUpTo {
  to {
    opacity: 0;
    -moz-transform: scale(1.5);
  }
}
@keyframes scaleUpTo {
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}
/*=============================================================================

	3. Default Styles

	=============================================================================*/
/* --- Top Menu --------------------- */
.topMenu {
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 1000;
  padding: 10px 0px;
}

/* topContact */
.topContact ul{
  float: right;
  margin-top: 5px;
}
.topContact ul li {
  float: left;
  color: @sliderText;
  font-size: 13px;
  border-right: 1px solid @pink;
  padding: 0px 14px;
  height: 14px;
  line-height: 14px;
}
.topContact ul li:first-child {
  padding: 0px 14px 0px 0px;
} 
.topContact ul li:last-child {
  padding: 0px 0px 0px 14px;
  border-right: none;
} 
.topContact ul li a{
  color: @sliderText;
}
.topContact ul li a:hover{
  color: @pink;
}



/* fancy select */
/*select*/
.fancy-select {
  position: relative;
  margin-left: 5px;
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  height: 25px;
  line-height: 25px;
  text-align: right;
  .transitionLinear();
}
.fancy-select.disabled {
  opacity: 0.5;
}

.fancy-select select:focus + .trigger {
  background-color: fade(@light, 20%);
}

.fancy-select select:focus + .trigger.open ,
.fancy-select select + .trigger:hover {
  background-color: @pink; 
}

.fancy-select .trigger {
  height: 25px;
  line-height: 25px;
  border-radius: 2px;
  cursor: pointer;
  padding: 0px 30px 0px 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  color: #fff;
  background-color: fade(@light, 20%);
  .transitionLinear();
}

.fancy-select .trigger:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #fff;
  top: 12px;
  right: 7px;
}

.fancy-select .trigger.open {
  color: #fff;
  background-color: @pink; 
  border-radius: 2px 2px 0px 0px;
}


.fancy-select ul.options {
  list-style: none;
  position: absolute;
  left: 0px;
  visibility: hidden;
  opacity: 0;
  z-index: 50;
  max-height: 200px;
  overflow: hidden;
  min-width: 150px;
  border-radius: 0px 2px 2px 2px;
  .transitionLinear();
}

.fancy-select ul.options.open {
  visibility: visible;
  opacity: 1;
}


.fancy-select ul.options.overflowing {
  top: auto;
  bottom: 40px;
}

.fancy-select ul.options.overflowing.open {
  top: auto;
  bottom: 50px;
}

.fancy-select ul.options li {
  padding: 8px 12px;
  color: #5d5d5d;
  background-color: #fff;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  .transitionLinear();
}

.fancy-select ul.options li.selected {
  color: #fff;
  background-color: @pink; 
}
.fancy-select ul.options li.hover {
  color: #fff;
  background-color: @pink; 
}

/* --- Slider --------------------- */
.slider {
  border-top: 1px solid #242832;
}
.slider .cover {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: fade(@dark, 85%);
  z-index: 10;
}

/* slider captions */
.slider .sliderStyle1 .captions {
  position: absolute;
  width: 100%;
  height: 50%;
  top: 50%;
  left: 0%;
  margin: -8% 0px 0px 0px;
  z-index: 100;
}
.captions h2 {
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
  text-align: center;
  opacity: 0;
  margin-bottom: 30px;
}
.captions p {
  font-size: 16px;
  color: @sliderText;
  line-height: 22px;
  font-weight: 400;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px; 
  opacity: 0;
}
.captions .links {
  opacity: 0;
}
.captions .links a {
  height: 50px;
  line-height: 50px;
  padding: 0px 30px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  opacity: 0;
  margin: 0px 15px; 
  display: inline-block;
  .round();
}
.captions .links a.details {
  background-color: @light;
  color: @dark;
  margin-left: 0;


  &:hover {
    background-color: @pink;
    color: @light;
  }
}
.captions .links a.join {
  color: @light;
  background-color: @pink;
  margin-right: 0;

    &:hover {
    background-color: @light;
    color: @dark;
  }
}

.captions .slideContents {
  
  
  text-align: left;
  h2 {
    font-size: 30px;
  }
  h2  , p {
    text-align: left;
  }

  p {
    margin-left: 0;
  }

  .factsImg {
    .imacWrapper {
      margin-top: -80px;
      text-align: right;
      img {
        width: 80%;
        display: inline-block;
      }
    }
  }
}
.captions .slideContents.slideContents.animated.col-md-6 {
  opacity: 0;
}

/* slider style 1 animation */

.owl-item.active .captions h2 ,
.owl-item.active .captions p , 
.owl-item.active .captions .links ,
.owl-item.active .captions .links a ,
.owl-item.active .captions .slideContents.slideContents.animated.col-md-6 {
  opacity: 1;
}
.owl-item.active .captions h2 {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp;

  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}

.owl-item.active .captions p {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;

  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}

.slider .owl-item.active .captions .links a.details {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;

  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  animation-delay: 3s;
} 
.slider .owl-item.active .captions .links a.join {
  -webkit-animation-name: fadeInRight;
  -moz-animation-name: fadeInRight;
  -o-animation-name: fadeInRight;
  animation-name: fadeInRight;

  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  animation-delay: 3s;
} 

.owl-item.active .captions .slideContents.slideContents.animated.col-md-6  {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp;

  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}

.homeSlider_2 .owl-item.active .captions .links a.details {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp;

  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  animation-delay: 3s; 
}


/* slider style 1 controls */
.sliderStyle1 .owl-controls .owl-dots {
  position: absolute;
  bottom: -20px;
  left: 0px;
  width: 100%;
  text-align: center;
  opacity: 1;
  .transitionEaseInOut();
}
.sliderStyle1:hover .owl-controls .owl-dots {
  opacity: 1;
  bottom: 20px;
}


.owl-controls .owl-nav {
  height: 100%;
  width: 100%;
}
.slider .owl-controls .owl-nav {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  right: 0px;
  height: auto;
  opacity: 1;
  z-index: 1000;
}
.slider:hover .owl-controls .owl-nav {
  opacity: 1;
}
.homeSlider_1 .owl-controls .owl-nav div {
  width: 32px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: block;
  color: @light;
  position: absolute;
  z-index: 1000;
  font-size: 13px;
  background-color: fade(@light, 20%);
  .transitionEaseInOut();
}
.owl-controls .owl-nav div:hover {
  background-color: @pink; 
}
.owl-controls .owl-prev {
  left: 0px;
  border-radius: 0px 2px 2px 0px;
}
.owl-controls .owl-prev:before {
  content: '\f104';
  font-family: 'FontAwesome';
}
.owl-controls .owl-next {
  right: 0px;
  border-radius: 2px 0px 0px 2px;
}
.owl-controls .owl-next:before {
  content: '\f105';
  font-family: 'FontAwesome';
}

.slider .owl-dot {
  display: inline-block;
  margin: 0px 5px 0px 5px;
  height: 5px;
  line-height: 5px;
  width: 32px;
  padding-top: 0px;
  text-align: center;
  background-color: fade(@light, 20%);
  .transitionLinear();
}

.slider .owl-dot span {
  width: 32px;
  text-align: center;
  height: 5px;
  margin: 0px auto;
  text-indent: -99999px;
  border: none;
  .round(0px);
  .transitionLinear();
}

.slider .owl-dot.active , .slider.owl-dot:hover {
  background-color: @pink;
}

/* --- Header --------------------- */
.header {
  background: transparent;
  position: relative;
  height: 94px;
  border-bottom: 1px solid #d9d9d9;
  background-color: @light;

  .scrollHeaderWrapper {
    border-bottom: 1px solid #ccc;
    height: 93px;
  }
  + .offset {
    display: none;
  }
}

.header.fixedHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100000;

  + .offset {
    display: block;    
  }
}



/* --- logo --------------------- */

.logoWrapper {
  padding-left: 15px;
  float: left;
}

.logo {
  margin-top: 30px;
  margin-bottom: 0px;

  a {
    float: left;
    height: 33px;
    display: block;
    overflow: hidden;

    // square
    .square {
      width: 33px;
      height: 33px;
      position: relative;
      float: left;
      overflow: hidden;
      margin-right: 8px;
      background-color: @pink;
      color: @dark;
      .round();
      display: block;

      span {
        position: absolute;
        bottom: 2px;
        font-size: 22px;
        left: 50%;
        margin-left: -6.5px;
        text-align: center;
        font-weight: 700;
        line-height: 1;
        display: block;
        height: 18px;
        width: 13px;
      }
    }
    // text 
    .text {
      float: left;
      font-size: 30px;
      line-height: 140%;
      font-weight: 700;
      color: @pink;
    }
    img {
      display: block;
    }
  }
 
} 

/* --- Main Nav --------------------- */
.mainNav {
  padding-top: 30px;
  padding-right: 15px;
  float: right;

  .navTabs {
    float: right;

    > li {
      float: left;
      margin-left: 10px;
      position: relative;

      > a , > button {
        display: block;
        height: 33px;
        line-height: 33px;
        text-align: center;
        padding: 0px 12px;
        color: @dark;
        font-size: 14px;
        font-weight: 700;
        .round();
      }

      .active {
        background-color: @pink;
        color: @light !important;
      }

      .menuArrow {
        display: inline-block;
        line-height: 33px;
        margin-left: 5px;
        padding-top: 1px;
        float: right;
      }

      .dropDown {
        position: absolute;
        z-index: 1000000000;
        left: 0px;
        top: 31px;
        min-width: 156px;
        .round(0px 2px 2px 2px);
        background-color: @light;
        border: 1px solid @borderColor;
        border-top: 2px solid @pink;
        display: none;

        li {
          position: relative;
          a , > button {
            display: block;
            white-space: nowrap;
            color: @dark;
            text-align: left;
            .round(0px);
            width: 100%;
            overflow: hidden;
            font-size: 13px;
            font-weight: 700;
            padding: 0px 12px;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid @borderColor;
          }
          .active {
            color: @light !important;
            background-color: @pink;
          }

          .dropDown {
            position: absolute;
            z-index: 1000000000;
            left: 100%;
            top: -2px;
            min-width: 156px;
            .round(0px 2px 2px 2px);
            overflow: hidden;
          }

          &:hover {
            > a , > button {
              color: @light;
              background-color: @pink;
            }
          }
        }
        :first-child > a , :first-child >  button {
          .round(0px 2px 0px 0px);
        }
        :last-child > a , :last-child > button {
          border-bottom: none;
          .round(0px 0px 2px 2px);
        }
      }

      &:hover .dropDown {
        display: block;

        animation-name: slideUpSlow;
        -webkit-animation-name: slideUpSlow;  

        animation-duration: 0.5s; 
        -webkit-animation-duration: 0.5s;

        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;

        visibility: visible !important; 
        
        .dropDown {
          display: none;
        }

        li:hover .dropDown {
          display: block;
          animation-name: slideLeftSlow;
          -webkit-animation-name: slideLeftSlow;  
        }

      }

      &:hover > a , &:hover > button {
        background-color: @pink;
        color: @light;
      }

      .formWrapper {
        padding: 20px;
        overflow: hidden;

        form {
          input {
            width: 100%;
            padding: 13px 20px;
            margin-bottom: 20px; 

            &:focus {
              border-color: @pink;
            }
          }
          button {
            width: 100%;
            color: @light;
            font-size: 15px;
            font-weight: 700;
            padding: 13px 20px;
            margin-top: 10px;
          }
        }
      }
    }

    .login {
      .loginModal .container {
        width: 50%;
      }
      > a {
        display: none;
      }
      a  , > button , .opened {
        background-color: @pink;
        color: @light;

        &:hover {
          background-color: @dark;
        }
      }
      .formWrapper {
        background-color: @light !important;
        z-index: 1000000000;
        .round(2px 2px 2px 2px);
        li {
          border-bottom: 1px solid @borderColor;
          margin-bottom: 20px;
        }
        li:last-child {
          border-bottom: none;
        }
        li h5 {
          margin-bottom: 20px;
          height: 35px;
          line-height: 35px;

          i {
            float: left;
            display: block;
            width: 35px;
            height: 35px;
            background-color: @pink;
            color: @light;
            text-align: center;
            line-height: 35px;
            .round();
            margin-right: 20px;
          }
        }
        form {
          display: block;
          margin-bottom: 20px;
          button , input[type="submit"] {
            background-color: @dark;

            &:hover {
              background-color: @pink;
              color: @light;
            }
          }
        }

        .register {
          margin-bottom: 0;
          text-align: center;

          a {
            background-color: transparent;
            font-size: 16px;
            font-weight: 700;
            color: @dark;

            &:hover {
              color: @pink;
            }
          }
        }
      }
    }

    .menuSocial {
      margin-left: 4px;
      a {
        width: 33px;
        text-align: center;
        background-color: #f1f1f1;
        font-weight: bold;

        i {
          font-weight: bold;
        }

        &:hover {
          background-color: @pink;
          color: @light;
        }
      }
    }
    
    li:first-child {
      margin-left: 0px;
    }
  }
}


/* --- responsiveMainNav --------------------- */
#responsiveMainNavToggler {
  padding: 0;
  height: 33px;
  width: 33px;
  text-align: center;
  line-height: 33px;
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 18px;
  overflow: hidden;
  margin-right: 15px;
  float: right;
}

#responsiveMainNavToggler.opened {
  background-color: @pink;
  color: @light;
}
.style-5 #responsiveMainNavToggler {
  background-color: @pink;
  color: @light;

  &:hover {
    background-color: @dark;
  }
}

.responsiveMainNav {
  padding: 0 15px;
  margin-bottom: 30px;
  position: relative;
  display: none;


  > ul.navTabs {
    > li {
      a , > button {
        display: block;
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 0 15px;
        background-color: @lightGray;
        color: @dark;
        border-bottom: 1px solid @borderColor;
        text-align: left;
        font-weight: 700;

        &:hover {
          background-color: @pink;
          color: @light;
      
          &:after {
            color: @light !important;
          }
        }
      }


      a.toggleResponsive  , > button.toggleResponsive {
        &:after {
          content: '+';
          font-family: 'tahoma';
          float: right;
          color: @dark;
          font-size: 17px;
          font-weight: 700;
          .transitionEaseInOut;
        }
      }
  
      .toggleResponsive.activeLine {
        background-color: @pink;
        color: @light;

        &:after {
          content: '-';
          font-family: 'tahoma';
          float: right;
          color: @light;
          font-size: 17px;
          font-weight: 700;
        }
      }
      .active {
        background-color: @pink;
        color: @light;
      }
      .active:after {
        color: @light !important;
      }


      .dropDown {
        display: none;

        li {
          a {
            padding: 0 30px;

            &:before {
              content: '-';
              font-family: 'tahoma';
              font-weight: 700;
              margin-right: 5px;
            }
          }
          .dropDown {
            li {
              a {
                padding: 0 45px;
              }
            }
          }
        }
      }
    }

    .register .formSwitcher , .login .formSwitcher  {
      display: none;
    }
  }
}

/* --- services --------------------- */
/* services */
.singleService {
  text-align: center;
  background: @lightGray;
  padding: 20px;
  border: 1px solid @borderColor;
  .round();

  &:hover .serviceIcon .servicesIconBase {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }

  h3 {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 18px;
  }

  .serviceIcon {
    padding: 6px;
    width: 116px;
    height: 116px;
    .round(50%);
    margin: 0px auto;
    border: 2px solid @pink;
    margin-bottom: 20px;
    .transitionLinear;

    .servicesIconBase {
      background-color: @pink;
      width: 100%;
      height: 100%;
      .round(50%);
      position: relative;
      padding-top: 15px;
      .transitionLinear;

      background-position: center center; 
      background-repeat: no-repeat;


      img {
        display: inline-block;
      }

    }
  }
  .servicesBg-1 {
    background-image: url('images/service-1.png');
  }
  .servicesBg-2 {
    background-image: url('images/service-2.png');
  }
  .servicesBg-3 {
    background-image: url('images/service-3.png');
  }
  .servicesBg-4 {
    background-image: url('images/service-4.png');
  }
  .servicesBg-5 {
    background-image: url('images/service-5.png');
  }
  .servicesBg-6 {
    background-image: url('images/service-6.png');
  }

  a {
    background-color: @dark;
    color: @light;
    .round();

    &:hover {
      background-color: @pink;
    }
  }
}


/* services 2 */
.welcome2 .sectionWrapper {
  padding-bottom: 50px;
}

.singleService2 {
  text-align: left;
  background: @light;
  margin-bottom: 30px;

  .serviceIcon , .servicesContents{
    float: left;
  }

  .serviceIcon {
    margin-right: 20px;
    margin-bottom: 0px;
  }

  .servicesContents {
    width: 73.6%;
  }

  a {
    float: right;
  }
}


/* singleService 3 */
.singleService3 {
  .serviceName {
    color: @pink;
  }

  .servicesDescription {
    color: @dark;
  }

  .readMore {
    background-color: @pink;

    &:hover {
      background-color: @dark;
    }
  }
}

/* --- pricing --------------------- */
.pricing {
  .sectionWrapper {
    padding-bottom: 50px;
  }
}
/* Pricing Table */
.pricingTable {
  .round(0px 0px 2px 2px);
  margin-bottom: 30px;


  &:hover .pricingIcon {
    border-color: @dark;
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }

  .pricingIcon {
    width: 95px;
    height: 95px;
    line-height: 95px;
    border: 5px solid darken(@pink, 10%);
    margin: auto;
    margin-bottom: 20px;
    .round(50%);
    .transitionEaseInOut;
    background: #fff url('images/plan-icon-pink.png') center center no-repeat;
  }
  
  .pricingHeader {
    border: 1px solid @pink;
    border-bottom: none;
    background-color: @pink;
    padding: 20px;
    .round(2px 2px 0px 0px);
    position: relative;

    .pricingTitle {
      float: left;
      color: @light;
      margin-bottom: 0px;
      font-size: 20px;

      span {
        margin-top: 5px;
        font-weight: normal;
        display: block;
        font-size: 13px;
      }
    }

    .ribbon {
      position: absolute;
      left: -6px;
      top: -5px;
    }
  }

  .pricingPerMonth {
    float: right;
    display: block;
    background-color: @dark;
    color: @light !important;
    font-size: 16px;
    font-weight: 700;
    width: 110px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    .round();
  }

  > img {
    display: block;
    width: 100%;
  }
  .pricingBody {
    .inner-shadow(0px , -2px , 0px , @borderColor );
    overflow: hidden;
    background-color: @light;
    padding: 20px;
    border: 1px solid @borderColor;
    border-top: none;
    border-bottom: 1px solid #acadae;
    .round(0px 0px 2px 2px);

    li {
      padding: 20px 0px;
      color: @dark;
      border-bottom: 1px solid @borderColor;
      font-size: 15px;
      font-weight: 400;

      span {
        float: right;
        color: @pink;
        font-size: 14px;
      }
      .generalLink {
        padding: 16px 10px;
        font-size: 17px;
        color: @light;
        font-weight: 700;
        width: 100%;

      }
      .orderNow {
        background-color: @pink;

        &:hover {
          background-color: @dark;
        }
      }
    }
    li:first-child {
      padding-top: 0px;
    }
    li:last-child {
      border-bottom: 3px;
      padding-bottom: 0px;
      padding-top: 20px;

      p {
        float: left;
        width: 50%;
        margin-bottom: 0;
      }

      p:first-child {
        padding-right: 10px;
      }
      p:last-child {
        padding-left: 10px;
      }
    }
  }
}

/* Pricing Table 2 */
.pricing2 {
  background: @light;
  border-bottom: none;

}


/* Table */
.table-responsive > .table {
  border-color: 1px solid #ccc !important;
}
.table-responsive > .table-bordered > thead > tr > th:last-child, .table-responsive > .table-bordered > tbody > tr > th:last-child, .table-responsive > .table-bordered > tfoot > tr > th:last-child, .table-responsive > .table-bordered > thead > tr > td:last-child, .table-responsive > .table-bordered > tbody > tr > td:last-child, .table-responsive > .table-bordered > tfoot > tr > td:last-child {
  border-right: 1px solid #ccc;
}
.tableWrapper {
  padding: 20px;
  border: 1px solid #ccc;
  position: relative;
  .round();
  overflow: auto;
}
.table-bordered {
  border-color: #ccc;
  color: @dark;
  font-size: 13px;
  margin-bottom: 0;
  background-color: @light;
  border-right: 0;
  .round();
  overflow: hidden;

  thead {
    background: #e1e1e1; /* Old browsers */
    background: -moz-linear-gradient(top,  #e1e1e1 0%, #e7e7e7 3%, #e7e7e7 7%, #eeeeee 12%, #eeeeee 15%, #f0f0f0 17%, #f0f0f0 43%, #f0f0f0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1e1e1), color-stop(3%,#e7e7e7), color-stop(7%,#e7e7e7), color-stop(12%,#eeeeee), color-stop(15%,#eeeeee), color-stop(17%,#f0f0f0), color-stop(43%,#f0f0f0), color-stop(100%,#f0f0f0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e1e1e1 0%,#e7e7e7 3%,#e7e7e7 7%,#eeeeee 12%,#eeeeee 15%,#f0f0f0 17%,#f0f0f0 43%,#f0f0f0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e1e1e1 0%,#e7e7e7 3%,#e7e7e7 7%,#eeeeee 12%,#eeeeee 15%,#f0f0f0 17%,#f0f0f0 43%,#f0f0f0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e1e1e1 0%,#e7e7e7 3%,#e7e7e7 7%,#eeeeee 12%,#eeeeee 15%,#f0f0f0 17%,#f0f0f0 43%,#f0f0f0 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #e1e1e1 0%,#e7e7e7 3%,#e7e7e7 7%,#eeeeee 12%,#eeeeee 15%,#f0f0f0 17%,#f0f0f0 43%,#f0f0f0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1e1e1', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */

    color: @dark;

    tr {
      th {
        font-weight: 700;
        font-size: 14px;
        padding: 13px 20px;
      }
    }
  }

  td {
    padding: 13px 20px !important;
  }
  td:nth-child(1) {
    color: @dark;
    font-size: 13px;
    font-weight: 700;
  }
  td:nth-child(2) {
    color: #999;
    font-size: 13px;
  }
  td:nth-child(3) {
    font-size: 13px;
    font-weight: 700;
    color: @pink;
  }
  td:nth-child(4) {
    font-size: 13px;
    font-weight: 700;
    color: @pink;
  }
  td:nth-child(5) {
    font-size: 13px;
    font-weight: 700;
    color: @pink;
  }
}
.table-bordered > thead > tr > th , 
.table-bordered > tbody > tr > th , 
.table-bordered > tfoot > tr > th , 
.table-bordered > thead > tr > td , 
.table-bordered > tbody > tr > td , 
.table-bordered > tfoot > tr > td {
  border-bottom: 0;
  border-left: 0;
}

.table-bordered:last-child {
  margin-bottom: 0;
}

/* --- Features --------------------- */

/* singleFeature */
.singleFeature {
  text-align: center;
  .featureIcon {
    margin-bottom: 24px;
    display: inline-block;
    width: 70px;
    height: 70px;
    line-height: 60px;
    text-align: center;
    .round(50%);
    border: 5px solid @borderColor;
    font-size: 20px;
    color: @pink;
    overflow: hidden;

    .transitionEaseInOut();

    i {
      font-size: 20px;
    }
  }

  .featureName {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 16px;

    a {
      color: @pink;

      &:hover {
        color: @dark;
      }
    }
  }

  &:hover .featureIcon  {
    border: 5px solid @pink;
    color: @light;
    background-color: @pink;
  }
}

.singleFeature2 {
  .featureIcon {
    float: left;
    margin-right: 20px;
  }
  .featureContents {
    float: left;
    width: 75%;
    text-align: left;
  }
}

.singleFeature3 {
  .featureIcon {
    background-color: @pink;
    color: @light;
  }
  .featureName {

    a {
      color: @dark;

      &:hover {
        color: @pink;
      }
    }
  }
}

.features2 {
  border-top: none;
}


/* --- Departments --------------------- */
.department {
  .departHeader {
    height: 30px;
    border-bottom: 2px solid @pink;
    margin-bottom: 20px;
    color: @darkGray;
    font-size: 15px;
    font-weight: 700;
  }

  .departBody {
    border: 1px solid #ccc;
    .round;
    padding: 20px;

    p {
      margin-bottom: 25px;
      font-weight: 400;
      color: @dark;

      a {
        color: @pink;

        &:hover {
          text-decoration: underline !important;
        }
      }
    }
    p:last-child {
      margin-bottom: 0;
    }

    .title {
      display: block;
      font-size: 13px;
      color: @pink;
      margin-bottom: 5px;
    }
  }
}


/* --- Domain Serach --------------------- */
.domainSearchForm {
  .formSearchUl {
    > li {
      height: 58px;
      float: left;
    }
    
    > li:first-child {
      padding: 10px;
      background-color: @light;
      .round();
      margin-right: 10px;
      width: 1102px;

      input {
        background-color: @lightGray;
        border: none;
        color: @pink;
        width: 887px;
        height: 100%;
        line-height: 100%;
        float: left;
      }
    }

    > li:last-child {
      button {
        width: 58px;
        height: 58px;
        background-color: @pink;
        font-size: 16px;
      }
    }
  }
}

.borderRadius{-moz-border-radius:2px; border-radius:2px; 
}
.borderRadiusTp{-moz-border-radius:2px 2px 0 0; border-radius:2px 2px 0 0;}
.borderRadiusBtm{-moz-border-radius:0 0 2px 2px ; border-radius:0 0 2px 2px;}

.ddcommon {position:relative;display:-moz-inline-stack; zoom:1; display:inline-block; *display:inline; cursor:default;}
.ddcommon ul{padding:0;margin:0;}
.ddcommon ul li{list-style-type:none;}
.borderRadiusTp ul li:last-child{-moz-border-radius:0 0 2px 2px ; border-radius:0 0 2px 2px;border-bottom:0 none #c3c3c3; 
}
.borderRadiusBtm ul li:first-child{-moz-border-radius:2px 2px 0 0; border-radius:2px 2px 0 0 ;border-bottom:1 solid #c3c3c3; 
}

.ddcommon .disabled img, .ddcommon .disabled span, .ddcommon.disabledAll{
opacity: .5; /* standard: ff gt 1.5, opera, safari */
-ms-filter:"alpha(opacity=50)"; /* ie 8 */
filter:alpha(opacity=50); /* ie lt 7 */
-khtml-opacity:.5; /* safari 1.x */
-moz-opacity:.5; /* ff lt 1.5, netscape */
color:#999999;
}
.ddcommon .clear{clear:both}
.ddcommon .shadow{-moz-box-shadow:5px 5px 5px -5px #888888;-webkit-box-shadow:5px 5px 5px -5px #888888;box-shadow: 5px 5px 5px -5px #888888;}
.ddcommon input.text{color:#7e7e7e;padding:0 0 0 0; position:absolute; background:#fff; display:block; width:98%; height:98%; left:2px; top:0; border:none;}
.ddOutOfVision{position:relative; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline;}
.borderRadius .shadow{-moz-box-shadow:5px 5px 5px -5px #888888;-webkit-box-shadow:5px 5px 5px -5px #888888;box-shadow: 5px 5px 5px -5px #888888;}
.borderRadiusBtm .shadow{-moz-box-shadow:-5px -5px 5px -5px #888888;-webkit-box-shadow:-5px -5px 5px -5px #888888;box-shadow: -5px -5px 5px -5px #888888}
.borderRadiusTp .border, .borderRadius .border{-moz-border-radius:0 0 2px 2px ; border-radius:0 0 2px 2px;}
.borderRadiusBtm .border{-moz-border-radius:2px 2px 0 0; border-radius:2px 2px 0 0;}
img.fnone{float:none !important}
.ddcommon .divider{width:0; height:100%; position:absolute;}
.ddcommon .ddArrow{display:inline-block; position:absolute; top:50%; right:4px;}
.ddcommon .ddArrow:hover{background-position:0 100%;}
.ddcommon .ddTitle{padding:0; position:relative; display:inline-block; width:100%}
.ddcommon .ddTitle .ddTitleText{display:block;}
.ddcommon .ddTitle .ddTitleText .ddTitleText{padding:0;}
.ddcommon .ddTitle .description{display:block;}
.ddcommon .ddTitle .ddTitleText img{position:relative; vertical-align:middle; float:left}
.ddcommon .ddChild{position:absolute;display:none;width:100%;height: auto !important; zoom:1; z-index:9999}
.ddcommon .ddChild li{clear:both;}
.ddcommon .ddChild li .description{display:block;}
.ddcommon .ddChild li img{border:0 none; position:relative;vertical-align:middle;float:left}
.ddcommon .ddChild li.optgroup{padding:0;}
.ddcommon .ddChild li.optgroup .optgroupTitle{padding:0 5px; font-weight:bold; font-style:italic}
.ddcommon .ddChild li.optgroup ul li{padding:5px 5px 5px 15px}
.ddcommon .noBorderTop{border-top:none 0  !important; padding:0; margin:0;}



/*************** default theme **********************/
.dd{
  width: 185px !important;
  margin-left: 10px;
  float: left;
  color: @dark;
  height: 100%;
  line-height: 100%;
  cursor: pointer;
}
.dd .divider{
  display: none;
}
.dd .ddArrow{
  width:18px;
  height:18px; 
  line-height: 18px;
  text-align: center;
  margin-top:-9px; 
  right: 9px;
  background-color: @pink;

  &:before {
    content: '\f107';
    font-family: 'FontAwesome';
    color: @light;
    position: relative;
  }
}
.dd .ddArrow:hover{background-position:0 100%;}
.dd .ddTitle{
  background:#edeeee;
}
.dd .ddTitle .ddTitleText{
  padding: 10px 20px 0px 10px;
  height: 38px;
  line-height: 38px;
  .round();
}
.dd .ddTitle .ddTitleText .ddlabel {
  float: left;
  margin-right: 8px;
  color: @pink;
  font-weight: 700;
}
.dd .ddTitle .ddTitleText .ddTitleText{padding:0;}
.dd .ddTitle .description{
  font-size: 12px; 
  color: @dark;
  float: left;
}
.dd .ddTitle .ddTitleText img{padding-right:5px;}
.dd .ddChild{border:1px solid #c3c3c3; background-color:#fff; left:-1px;}
.dd .ddChild li{padding:5px; background-color:#fff; border-bottom:1px solid #c3c3c3;text-align: left;}
.dd .ddChild li .description{color:#666;}
.dd .ddChild li .ddlabel{color:#333;}
.dd .ddChild li.hover{background-color:#f2f2f2}
.dd .ddChild li img{padding:0 6px 0 0;}
.dd .ddChild li.optgroup{padding:0;}
.dd .ddChild li.optgroup .optgroupTitle{padding:0 5px; font-weight:bold; font-style:italic}
.dd .ddChild li.optgroup ul li{padding:5px 5px 5px 15px}
.dd .ddChild li.selected{background-color:#d5d5d5; color:#000;}




/* --- About --------------------- */

/* introduction */

.introduction {
  .post {
    margin-bottom: 0 !important;
  }
  .postSlider .owl-controls .owl-nav .owl-next {
    right: 50px;
  }
  .postContents {
    padding-top: 25px !important;
  }

  .postSlider.col-md-6 {
    width: 50%;
  }
}

.introduction2 {
  .postContents {
    padding-top: 0 !important;
    text-align: left !important;
  }
}


/* Team */
.teamMemberWrapper {
  padding: 20px 10px;
  background-color: @light;
  text-align: center;
  .round;

  &:hover {
    .memberAvatar {
      background-color: @pink;
      img {
        -webkit-transform: rotate(360deg);
           -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
      }
    }
  }

  .memberAvatar {
    border: 2px solid @pink;
    padding: 5px;
    display: inline-block;
    width: 116px;
    height: 116px;
    .round(50%);
    margin-bottom: 10px;
    .transitionEaseInOut;

    img {
      display: block;
      width: 100%;
      height: 100%;
      border: 2px solid @pink;
      .round(50%);
      .transitionEaseInOut;
    }
  }

  .memberName {
    font-size: 18px;
    margin-bottom: 10px;

    a {
      color: @pink;

      &:hover {
        color: @dark;
      }
    }
  }

  .memberJob {
    color: #acacac;
    display: block;
    margin-bottom: 20px;
  }

  .details {
    color: @dark;
  }


  .memberSocial {
    text-align: center;
    li {
      float: none;
      display: inline-block;
    }
    a {
      background-color: @pink;

      &:hover {
        background-color: @dark;
      }
    }
  }
}

.teamMemberWrapper2 {
  border: 1px solid #ccc;
}

/* --- Facts --------------------- */
.facts {
  border-bottom: 1px solid #dcdddf;
}
.facts + .mainSection .sectionWrapper {
  padding-top: 100px;
  border-top: 1px solid #f8f8f8;
}
.facts .sectionWrapper {
  padding-bottom: 50px;
}
.fact {
  text-align: center;
  margin-bottom: 40px;


  &:hover .factIcon {
     -webkit-transform: rotateY(360deg);
        -moz-transform: rotateY(360deg);
         -ms-transform: rotateY(360deg);
          -o-transform: rotateY(360deg);
             transform: rotateY(360deg);
  }

  .factIcon {      
    height: 74px;
    line-height: 66px;
    width: 74px;
    display: inline-block;
    text-align: center;      
    .round(50%);
    border: 4px solid #dfe0e0;
    background-color: @dark;
    overflow: hidden;
    margin-bottom: 5px;
    .transitionEaseInOut(0.6s);


    img {
      vertical-align: middle;
    }
  }

  .factIcon1 {
    background: @dark url('images/fact-1-pink.png') no-repeat center center;
  }
  .factIcon2 {
    background: @dark url('images/fact-2-pink.png') no-repeat center center;
  }.factIcon3 {
    background: @dark url('images/fact-3-pink.png') no-repeat center center;
  }.factIcon4 {
    background: @dark url('images/fact-4-pink.png') no-repeat center bottom;
  }
  
  .factTitle {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 5px;

    a {
      color: @pink;

      &:hover {
        color: @dark;
      }
    }

  }

  .factDescription {
    color: @dark;
  }
}

.fact:last-child {
  margin-bottom: 0px; 
}

.factsImg {
  position: relative;
  text-align: center;

  .imacWrapper{
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 100;
    left: 0;
  }
}




/* --- Blog --------------------- */
.blog .sectionWrapper {
  padding-bottom: 50px;
}


.post {
  margin-bottom: 30px;
  .postWrapper {
    border: 1px solid #ccc;
    padding: 10px 10px 20px 10px;
    position: relative;
    .round();
  }

  .postMedia{
    position: relative;

    > a {
      display: block;
    }
    img {
      display: block;
      .round();
      width: 100%;
      height: 178px;

      opacity: 1;

      &:hover {
        opacity: 0.6;
      }
    }

    .postMeta {
      position: absolute;
      width: 100%;
      z-index: 1;

      li {
        width: 50%;
        padding: 10px;
        margin: 0;

        .metaContent{
          padding: 0px 5px;

        }
      }
      li:first-child{
        padding-right: 5px;
      }

      li:last-child{
        padding-left: 5px;
      }
    }
  }
  .postMeta {
    float: left;
    li {
      float: left;
      margin-right: 10px;

      .metaContent{
        color: @light;
        background-color: fade(@pink,85%); 
        height: 30px;
        line-height: 30px;
        padding: 0 10px !important;
        .round();
        text-align: center;

      }

      .metaContent:before {
        height: 100%;
        vertical-align: middle;
        display: inline-block;
      }

      i {
        display: inline-block;
        margin-right: 5px;
        font-size: 19px;  
        color: @dark;
        vertical-align: middle;
      }

      a {
        color: #f0f0f0;
        white-space: nowrap;

        &:hover {
          color: @dark;
        }
      }
    }

    li:last-child {
      margin-right: 0;
    }
  }

  .postContents {
    position: relative;
    padding-top: 50px;
    text-align: center;

    .postIcon{
      width: 70px;
      height: 70px;
      line-height: 60px;
      text-align: center;
      position: absolute;
      background-color: @pink;
      border: 5px solid @light;
      color: @light;
      .round(50%);
      z-index: 10;
      font-size: 19px;
      top: -35px;
      left: 50%;
      margin-left: -35px;

      &:hover {
        background-color: @dark;
      }
    }

    a.postIcon {
      color: @light !important;

      &:hover {
        color: @light  !important;
      }
    }

    .postTitle {
      font-weight: 700;
      font-size: 16px;
      a{
        color: @pink;  

        &:hover {
          color: @dark;
        }
      }
      
    }

    .postDetails {
      color: @dark;
      margin-bottom: 24px;
    }
    .postDetails:last-child {
      margin-bottom: 0;
    }


  }

  .readMore {
    height: 30px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* postWide */
.postWide {
  .postWrapper {
    padding-bottom: 10px;
  }
  .postMedia{
    img {
      height: 350px;
    }
  }

  .postContents {
    .readMore {
      float: right;
    }
  }
}

/* postSlider */
.postSlider {
  .owl-controls {
    position: absolute;
    top: 50%;
    z-index: 100;
    margin-top: -19px;
    .owl-nav {
      div {
        height: 38px;
        width: 38px;
        line-height: 38px;
        .transitionEaseInOut;
        font-size: 16px;
        background-color: fade(@light, 50%);
        .round() !important;

        &:hover {
          background-color: @pink;
        }
      }
      .owl-prev {
        left: 20px;
      }
      .owl-next {
        right: 20px;
      }
    }
  }
}

/* postColumn */
.postColumn {
  .postWrapper {
    .postMedia {
      width: 350px;
      margin-right: 10px;
      float: left;

      >a {
        margin-bottom: 10px;
      }
      img {
        height: 178px;
      }
    }

    .postMeta {
      li {
        padding: 0 !important;
        margin-right: 0;
      }

      li:first-child{
        padding-right: 5px !important;
      }

      li:last-child{
        padding-left: 5px !important;
      }
    }

    .postContents {
      float: left;
      width: 67%;
      padding-top: 0;
      text-align: left;
      margin-bottom: 10px;

      .postIcon {
        position: relative;
        width: 30px;
        height: 30px;
        line-height: 30px;
        display: inline-block;
        left: auto;
        top: auto;
        margin: 0 10px 0 0;
        border: none;
        z-index: 10;
      }
    }

    .readMore {
      float: right;
    }
  }
}

/* blogColmn2 */
.blogColmn2 {
  .post {
    .postWrapper {
      .postMeta {
        li {
          width: 33.3333%;
        }
      }
    }
    
  }

}


/* blogColmn4 */
.blogColmn4 {
  .post {
    .postWrapper {
      .postMeta {
        li {
          width: 100%;
          padding: 10px;
        }
      }
    }
    
  }

}


.pagination {
  width: 100%;
  text-align: center;
  margin-top: 0;

  > li {
      margin-left: 5px;
      display: inline-block;

      > a , > span {
        padding: 0;
        height: 28px;
        width: 28px;
        text-align: center;
        line-height: 28px;
        font-size: 15px;
        background-color: #ccc;
        color: @light;
        border: none;
        .round !important;

        &:hover {
          background-color: @pink;

        }
      }
  }
  > li:last-child  {
    margin-left: 10px;
  }
  > li:first-child  {
    margin-right: 5px;
  }

  > li:last-child , > li:first-child {
    a {
      background-color: @dark;
      &:hover {
        background-color: @pink;

      }
    }
  }
}

.blogColmn {
  .pagination {
    float: right;
    width: auto !important;
  }
}

/* sidebar */
.widget {
  padding: 20px;
  margin-bottom: 30px;
  border: 1px solid #ccc;
  .round;

  .widgetHeader {
    color: @dark;
    font-size: 17px;
    height: 35px;
    border-bottom: 2px solid @pink;
  }
}


.sidebar .department {
  margin-bottom: 30px;
}
.sidebar .department:last-child {
  margin-bottom: 0;
}


.tweets {
  background: @pink;
  position: relative;
  border-color: @pink;

  .tweet {
    overflow: visible;
    .carousel2 {
      overflow: visible;
    }
    p {
      color: @light;
      margin-bottom: 28px;
    }

    span {
      color: @dark;
    }

  }
  img {
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 100;
  }

  .owl-controls {
    position: relative;
    top: 50%;
    z-index: 100;
    margin-top: 40px;
    .owl-nav {
      div {
        height: 28px;
        width: 28px;
        line-height: 28px;
        .transitionEaseInOut;
        background-color: @dark;
        position: relative;
        float: left;
        margin-right: 10px;
        .round;

        &:hover {
          background-color: @darkGray;
        }
      }
    }
  }
}

/* sideSearch */
.sideSearch {
  ul {
    li {
      float: left;
    }

    li:last-child {
      padding-left: 10px;
      width: 27%;
    }
    li:first-child {
      padding-right: 10px;
      width: 73%;
    }
  }

  input {
    display: block;
    width: 100%;
    background: fade(@pink, 20%);
    color: @pink;
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    font-weight: normal;
    border: 0;
  }

  button , input[type="submit"] {
    display: block;
    background-color: @pink;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-top: 0;
    padding-bottom: 0;

    &:hover {
      background-color: @dark;
    }
  }
}

/* list */
.list {
  li {
    margin-bottom: 11.5px;

    a , span {
      color: @contentText;
      font-weight: 700;
      font-size: 13px;
    }
    a:hover {
      color: @pink;
    }
  }

  li:last-child {
    margin-bottom: 0;
  }
}


/* ticker */

.tickerControl {
  float: right;

  li {
    float: left;
    margin-left: 10px;
  }

  i {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    margin-left: 7px;
    cursor: pointer;
    color: @light;
    background-color: @darkGray;
    .transitionEaseInOut;
    .round;
    text-align: center;
    font-size: 15px;

    &:hover {
      background: @contentText;
    }
  }
}


#ticker {

  > li {
    overflow: hidden;
    height: 80px;
    padding: 15px 0;
    list-style: none;
    border-bottom: 1px solid #ccc;    
  }


  .post {
    margin-bottom: 0;
  }

  .postContents {
    padding-top: 0;
    text-align: left;
  }

  .postTitle {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 14px;

    a {
      color: @pink;  

      &:hover {
        color: @dark;
      }
    }
  }

  .postMeta {
    li {
      color: @dark;

      a , span {
        color: @dark;
      }
    }
  }
}


/* --- Single Post Page --------------------- */
/* singlePostPage */
.singlePostPage {

  .singlePost{

    .postWrapper .postMedia img {
      height: 350px;
    }
    .postMeta {
      text-align: center;
      width: 100%;

      li {
        float: none !important;
        display: inline-block;
        margin: 0 3px !important;
      }
    }  
  }

  .col-md-8 , .col-md-12 {
    .col-md-12 {
      margin-bottom: 30px;
    }

    .col-md-12:last-child {
      margin-bottom: 0;
    }
  }
}


/* Sharing Buttons */
.shareBtns {
  background: fade(@pink, 20%);
  padding: 10px;
  .round();

  .shareHeader{
    float: left;
    margin-bottom: 0;
    line-height: 36px;
    color: @dark;
    font-weight: 700;
  }
  .shareBtnsWrapper {
    float: right;
    padding-top: 3px;
  }
}


/* Share Buttons */
.rrssb-buttons {
  width: 100%;
}
.rrssb-buttons li {
  float: left;
  margin-left: 10px;
  width: 32px !important;

  a {
    display: block;
    height: 32px;
    line-height: 32px;
    overflow: hidden;
    text-align: center;
    font-size: 25px;
    color: @light;
    background-color: @dark;
    .round;

    i {
      font-size: 20px;
      display: block;
      height: 32px; 
      line-height: 32px;
      text-align: center;
    }
  }
}

.rrssb-buttons li.facebook a:hover {background-color: #3b5998;}
.rrssb-buttons li.twitter a:hover {background-color: #55acee;}
.rrssb-buttons li.googleplus a:hover {background-color: #dd4b39;}
.rrssb-buttons li.email a:hover {background-color: #22a471;}
.rrssb-buttons li.youtube a:hover {background-color: #e52d27;}
.rrssb-buttons li.linkedIn a:hover {background-color: #0976b4;}
.rrssb-buttons li.pinterest a:hover {background-color: #cc2127;}

/* colorful */
.colorful li.facebook a {background-color: #3b5998;}
.colorful li.twitter a {background-color: #55acee;}
.colorful li.googleplus a {background-color: #dd4b39;}
.colorful li.email a {background-color: #22a471;}
.colorful li.linkedIn a {background-color: #0976b4;}
.colorful li.youtube a {background-color: #e52d27;}
.colorful li.pinterest a {background-color: #cc2127;}


.colorful li a:hover {
  background-color: @dark !important;
}


.rrssb-buttons.left {
  li {
    margin-left: 0;
    margin-right: 10px;
  }
}





/* Commnets */
.singleComment {
  background: @pink;
  padding: 20px;
  .round;
  margin-bottom: 30px;
}
.singleComment:last-child {
  margin-bottom: 0;
}

.commentLevel {

  margin-bottom: 35px;

  .thumb {
    display: block;
    float: left;
    margin-right: 20px;

    img {
      width: 67px;
      height: 67px;
      border: 3px solid @light;
      .round(50%);
    }
    
  }

  .commentContents {
    float: left;
    width: 88%;
  }

  .reply {
    float: right;
    color: @light;
    background-color: @dark;

    &:hover {
      background-color: @light;
      color: @dark;
    }
  }

  .commenttitle {
    color: @light;
    font-weight: 700;
    margin-bottom: 5px;

    a {
      color: @light;
    }
  }

  .commentMeta {
    li {
      float: left;
      margin-bottom: 10px;

      color: @dark;

      a , span {
        color: @dark;
      }
    }
  }

  .commentDetails {
    color: @light;
  }

}

.commentLevel:last-child {
  margin-bottom: 0;
}

.commentLevel2 {
  width: 88%;
  float: right;
  position: relative;

  &:before {
    content: '';
    display: block;
    width: 45px;
    height: 98px;
    border-left: 2px solid @light;
    border-bottom: 2px solid @light;
    z-index: 100;
    float: left;
    position: absolute;
    left: -55px;
    top: -60px;
  }

  .commentContents  {
    width: 86%;
  }
}


/* add-send */
.add-send {
  .widgetHeader {
    margin-bottom: 20px;
  }
  form {
    position: relative;
    input , textarea {
      width: 100%;
      border: 1px solid @pink;
      margin-bottom: 30px;
      color: @pink;
      font-weight: 400;
    }
    input:focus , textarea:focus {
      border: 1px solid @dark;
      color: @dark;
    }
    textarea {
      margin-bottom: 0;
      padding-bottom: 50px;
        &:before {
          content: '';
          display: block;
          width: 10px;
          height: 10px;
          background: @light;
          position: absolute;
          right: 0;
          bottom: 0;
          z-index: 100;
        }
    }

    button , input[type="submit"] {
      position: absolute;
      right: 10px;
      bottom: 10px;
      background-color: @pink;

      &:hover {
        background-color: @dark;
      }
    }
  }

  .sendMessageForm {
    input , textarea {
      border: 1px solid @borderColor;
    }
    input:focus , textarea:focus {
      border: 1px solid @pink;
      color: @pink;
    }
  }
}


/* wideBlog */
.wideBlog {

  .postWrapper {
    background-color: @light;
  }
  .commentLevel .commentContents , .commentLevel2 {
    width: 92.3%;
  }
  .commentLevel2 .commentContents {
    width: 91.6%;
  }
}

/* modal */

.modal {
  z-index: 10000000000;
  padding-bottom: 100px;
  padding-top: 100px;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  .transitionLinear(0.5s);

  .close {
    background-color: @pink;
    color: @light;
    font-size: 18px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    opacity: 1;
    margin-right: 15px;
    margin-bottom: 15px;

    span {
      font-size: 26px;
      line-height: 30px;
      font-weight: 100;
      font-family: tahoma;
    }
  }

  .postWrapper {
    background-color: @light;
    border-bottom-width: 2px;
  }
  .shareBtns {
    background-color: @pink;
  }
}


/* --- Testmonials --------------------- */
/* Testmonials */
.singleTestmonial {
  .testmonialsTopContents {
    background-color: @light;
    padding: 10px;
    .round();
    border: 1px solid #d6d6d6;
    position: relative;
    margin-bottom: 30px;

    .tip {
      position: absolute;
      top: 100%;
      left: 30px;
    }
    .testmonialthumb {
      float: left;
      display: block;
      width: 60px;
      height: 60px;
      .round(50%);
    } 

    blockquote {
      background: transparent;
      float: right;
      width: 77%;
      padding: 0px;

      p {
        font-style: normal;
        font-size: 13px;
        color: @dark;

        &:before , &:after {
          content: '"';
          color: @dark;
          font-size: 14px;
          width: 10px;
          display: inline-block;
          font-style: italic;
        }
        &:after {
          text-align: right;
        }
      }

    }
  }
  .testmonialsBottomContents {
    p {
      margin-bottom: 5px;
    }
    .userName{
      color: @pink;

      &:hover {
        color: @dark;
      }
    }
    .userWebsite{
      color: @contentText;

      &:hover {
        color: @dark;
      }
    }
  }
} 

.darkSection .singleTestmonial .userName:hover , .darkSection .singleTestmonial .userWebsite:hover {
  color: @light !important;
}

.testmonialsCarousel3 .owl-controls .owl-nav {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  right: 0px;
  height: auto;
  opacity: 1;
  z-index: 1000;
}
.testmonialsCarousel3:hover .owl-controls .owl-nav {
  opacity: 1;
}
.testmonialsCarousel3 .owl-controls .owl-nav div {
  width: 28px;
  height: 28px;
  line-height: 28px;
  background-color: @dark;
  font-size: 16px;
  .round();
}
.testmonialsCarousel3 .owl-controls .owl-nav div:hover {
  background-color: @pink;
}
.testmonialsCarousel3 .owl-controls .owl-prev {
  right: 101% !important;
  left: auto;
}
.testmonialsCarousel3 .owl-controls .owl-prev:before {
  content: '\f104';
  font-family: 'FontAwesome';
}
.testmonialsCarousel3 .owl-controls .owl-next {
  left: 101% !important;
  right: auto;
}
.testmonialsCarousel3 .owl-controls .owl-next:before {
  content: '\f105';
  font-family: 'FontAwesome';
}
.testmonialsCarousel3:hover .owl-controls .owl-nav .owl-prev {
  right: 100%;
}
.testmonialsCarousel3:hover .owl-controls .owl-nav .owl-next {
  left: 100%;
}



/* Testmonials2 */
.testmonials2 {
  .owl-controls {
    width: 5.5% !important;
    margin: auto;
    position: relative;
    clear: both;
    height: 28px;
    .owl-nav {
      div {
        width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: 16px;
        .round();
        .transitionEaseInOut();
        background-color: @darkGray;

        &:hover {
          background-color: @pink;
        }

      }
    }

  }
}
.owl-carousel.testmonialsCarousel2 .singleTestmonialWrapper {
  margin: auto;
  float: none;
}

.testmonials2 {
  text-align: center;
  .testmonialsTopContents {
    padding: 10px;
    .round();
    position: relative;
    margin-bottom: 10px;

    .testmonialthumb {
      display: inline-block;
      width: 60px;
      height: 60px;
      .round(50%);
      border: 3px solid @light;
      margin-bottom: 10px;
    } 

    blockquote {
      background: transparent;
      width: 96%;
      margin: auto;
      padding: 0px;

      p {
        font-style: italic;
        font-size: 16px;
        color: @pink;
        line-height: 24px;

        &:before , &:after {
          content: '"';
          color: @pink;
          font-size: 16px;
          width: 10px;
          display: inline-block;
          font-style: italic;
        }
        &:after {
          text-align: right;
        }
      }

    }
  }
  .testmonialsBottomContents {
    margin-bottom: 30px;
    p {
      margin-bottom: 5px;
    }
    .userName{
      color: @light;

      &:hover {
        color: @pink;
      }
    }
    .userWebsite{
      color: #cbcbcb;
      &:hover {
        color: @light;
      }
    }
  }
} 



/* Testmonials3 */
.testmonials3 {
  .owl-controls {
    .owl-nav {
      div {
        background-color: @darkGray
      }
    }
  }

  .testmonialsBottomContents {
    .userName{
      color: @darkGray;
    }
    .userWebsite{
      color: @dark;


      &:hover {
        color: @pink;
      }
    }
  }
}


/* Testmonials4 */
.testmonials4 {

  .testmonialthumb  {
    border: 3px solid @borderColor;
  }
  .singleTestmonial .testmonialsTopContents blockquote {
    width: 98% !important;


    p {
      font-size: 13px !important;
      font-style: italic !important;
      line-height: 22px !important;
      color: @pink;


      &:before , &:after {
        display: none !important;
      }
    }
  }

  .testmonialsBottomContents {
    p {
      display: block !important;

      &:after {
        display: none !important;
      }
    }
  }
  .owl-controls .owl-dots {
    margin-top: 20px;
  }

  .owl-dot.active, .owl-dot:hover {
    padding-top: 2px;

    span {
      background-color: @pink;
      width: 10px;
      height: 10px;      
    }
  }


  .owl-dot span {
    width: 10px;
    height: 10px;
    border: 0;
    background-color: @dark;

    &:hover {
      background-color: @pink;
      width: 10px;
      height: 10px;
    }
  }
}

/* --- Purchase --------------------- */
.purchase{
  .sectionTitle {
    margin-bottom: 20px;
  }
  .links {
    text-align: center;

    a {
      margin: 0 10px;

      &:hover {
        background-color: @light;
        color: @dark;
      }
    }

    a:last-child {
      margin-right: 0;
    }

    .lg {
      font-size: 16px;
      height: 37px;
      line-height: 37px;
      font-weight: 700;
      padding: 0 20px;
    }
  }
}

.purchase2 {
  
  .sectionWrapper {
    padding: 48px 0;
  }


  .sectionTitle {
    text-align: left;
    margin-bottom: 0;

    .sectionHeader {
      text-align: left;
      margin-bottom: 0;
    }
  }
  .links {
    text-align: right;

    a {
      font-size: 16px;
      height: 37px;
      line-height: 37px;
      padding: 0 20px;
    }
  }
}

 
/* --- Clients --------------------- */
.clients {
  .sectionTitle .sectionHeader {
    color: @dark;
  }
}


.clientsCarousel {
  position: relative;
}
.singleClient {
  display: block;
  border: 1px solid @borderColor;
  padding: 20px;
  height: 68px;
  text-align: center;

  &:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

  img {
    width: 100%;
    display: block;
    vertical-align: middle;
    opacity: 0.6;
    .transitionEaseInOut(0);


    &:hover {
      opacity: 1;
    }
  }
}


.clientsCarousel .owl-controls .owl-nav {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  right: 0px;
  height: auto;
  opacity: 1;
  z-index: 1000;
}
.clientsCarousel:hover .owl-controls .owl-nav {
  opacity: 1;
}
.clientsCarousel .owl-controls .owl-nav div {
  width: 28px;
  height: 28px;
  line-height: 28px;
  background-color: @dark;
  font-size: 16px;
  .round();
}
.clientsCarousel .owl-controls .owl-nav div:hover {
  background-color: @pink;
}
.clientsCarousel .owl-controls .owl-prev {
  right: 101% !important;
  left: auto;
}
.clientsCarousel .owl-controls .owl-prev:before {
  content: '\f104';
  font-family: 'FontAwesome';
}
.clientsCarousel .owl-controls .owl-next {
  left: 101% !important;
  right: auto;
}
.clientsCarousel .owl-controls .owl-next:before {
  content: '\f105';
  font-family: 'FontAwesome';
}
.clientsCarousel:hover .owl-controls .owl-nav .owl-prev {
  right: 100%;
}
.clientsCarousel:hover .owl-controls .owl-nav .owl-next {
  left: 100%;
}




/* --- FAQS --------------------- */

.faqs {
  .departBody {
    padding: 20px;
  }
  .triggerRow {
    background-color: @light;
    margin-bottom: 20px;
    > a {
      height: 56px;
      line-height: 56px;
      padding: 0 20px;
    }
    .activeLine , .opened {
      background-color: #f5f5f5;
    }
  }

  .triggerRow:last-child {
    margin-bottom: 0;
  }



  .accordianShortCode .triggerRow > a:before , 
  .accordianShortCode .triggerRow > a.activeLine:before , 
  .accordianShortCode .triggerRow > span.activeLine:before {
    top: 19px;
    right: 20px;
  }
}


/* --- Protfolio --------------------- */

/*filter options*/
.filterOptionsWrapper {
  margin-bottom: 30px;
}
.portfolioFilters {
  text-align: center;

  li {


    span {
      cursor: pointer;
      .transitionLinear;
      font-size: 15px;
      font-weight: 700;
      display: block;
      margin-bottom: 30px;
      height: 39px;
      line-height: 39px;
      text-align: center;
      background-color: @pink;
      color: @light;
      padding: 0 5px;

      .round;

      &:hover {
        background-color: @dark;
      }
    }


  }
  li.last , li.active {
    span {
      background-color: @dark;
    }
  } 
}


.filterOptions {
  float: none;
  text-align: center;

  li {
    float: none;
    display: inline-block;
  }
}
.sortOptions {
  display: none;
  float: right;
}


#grid {
  text-align: center;

  &:after { 
    content: '';
    display: block;
    width: 100%;
  }

  .gap {
    display: block;
    width: 100%;
    height: 0px;
  }
}


.project {
  text-align: center;
  display: none;
  margin-bottom: 30px;

  .projectWrapper {
    overflow: hidden;
  }
  .projectMedia {
    position: relative;
    overflow: hidden;

    > a {
      display: block;

      img {
        display: block;
        width: 100%;
        .round(2px 2px 0px 0px);
      }
    }
  }

  .caption {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: fade(@pink, 50%);
    z-index: 100;
    .round(2px 2px 0px 0px);
    opacity: 0;
    visibility: hidden;
    filter: alpha(opacity=0);
    .transitionLinear;
  }

  &:hover {
    .caption {
      opacity: 1;
      visibility: visible;
      filter: alpha(opacity=100);
    } 
  }

  .projectMeta {
    position: absolute;
    top: 100%;
    z-index: 1000;
    width: 100%;
    text-align: center;
    .transitionLinear;


    li {
      display: inline-block;
      margin: 0 10px;

      a {
        display: block;
        width: 38px;
        height: 38px;
        text-align: center;
        line-height: 38px;
        padding: 0;
        font-size: 16px;

        &:hover {
          color: @light;
        }
      }
    }

    li:last-child {
      margin-right: -100px
    }

    li:first-child {
      margin-left: -100px
    }
  }
  &:hover {
    .projectMeta {
      top: 50%;
      margin-top: -19px;
    }
  }


  .projectContents {
    padding: 20px;
    text-align: center;
    border: 1px solid #ccc;
    .round(0px 0px 2px 2px);
  }

  .projectName {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 5px;

    a {
      color: @pink;

      &:hover {
        color: @dark;
      }
    }
  }

  .projectCategory {
    li {
      display: inline-block;
      margin: 0 5px;
      position: relative;

      &:after {
        content: '-';
        font-family: tahoma;
        float: right;
        margin-right: -2px;
        margin-left: 10px;

      }
    }
    li:last-child {
      &:after {
        display: none;
      }
    }

    a {
      color: #5a5e6a;

      &:hover {
        text-decoration: underline !important;
      }
    }
  }
}

/* portfolio 2 Colmn */
.portfolio2Column {
  .projectMedia {
    > a {
      img {
        height: 348px;
      }
    }
  }
}

/* portfolio 3 Colmn & 4 Colmn */
.portfolio3Column , .portfolio4Column {
  .projectMedia {
    > a {
      img {
        height: 198px;
      }
    }
  }
}




/* --- Proud --------------------- */
.proud {
  .responsiveTools {
    position: relative;

    .mac {
      display: block;
    }

    .ipad {
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 100;
    }
  }

  .description {
    h3 {
      font-weight: 700;
      color: @pink;
    }

    p {
      color: @dark;
    }
  }
}




/* --- Footer --------------------- */

/* Top Footer */
.topFooter {
  padding: 80px 0px;
  background-color: @dark;

  .footerWidget {
    .footerWidgetHeader {
      color: @pink;
      font-weight: 700;
      padding-bottom: 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid @darkGray;
      position: relative;
      
      &:after {
        content: '';
        display: block;
        width: 30px;
        height: 4px;
        left: 0;
        bottom: -1px;
        position: absolute;
        background-color: @darkGray;
      }
    }

    .footerAboutContent {
      margin-bottom: 30px;
    }

    .footerLinksList {
      li {
        margin-bottom: 8px;
        a {
          color: @light;
          font-style: 13px;

          &:hover {
            color: @pink;
            margin-left: 10px;
          }
        }

        &:before {
          content: "-";
          width: 10px;
          color: @light;
          display: inline-block;
        }
      }
    }

    .aboutLinks .footerLinksList li {
      float: left;
      width: 50%;
    }

    .getInTouchList {
      li {
        margin-bottom: 20px;
        span {
          margin-bottom: 5px;
          font-size: 13px;
          line-height: 19.5px;
          font-family: @font;
          color: @contentText;
          font-weight: 500;
          display: block;

          a {
            color: @pink;
          }
        }

        .text {
          color: @light;
        }
      }
    }
  }
}


/* Bottom Footer */
.bottomFooter {
  background-color: #2b2f3b;
  
  .copyrights {
    p {
      color: @light;
      font-weight: 700;
      margin-bottom: 0px;
      line-height: 50px;

      a {
        color: @light;
        &:hover {
          color: @pink;
        }
      }
    }
  }

  .terms {
    margin-bottom: 15px;
    li{
      
      float: left;
      margin-right: 5px;
      a {
        color: @contentText;

        &:hover {
          color: @light;
        }
      }
      &:after {
        content: "-";
        width: 5px;
        color: @contentText;
        display: inline-block;
        margin-left: 5px;
      }
    }

    li:last-child {
      margin-right: 0px;
      &:after {
        
        display: none;
      }

    }
  }

  .footerSocial {
    .footerSocialWrapper {
      float: right;
      padding-top: 32px;
    }
    ul {
      float: left;
      margin-left: 10px;
      li {
        float: left;
      }
    }

    ul:first-child {
      margin-left: 0px;
    }

    .socialNav {
      li {
        a {
          background-color: @contentText;
          width: 22px;
          color: @dark;
          height: 22px;
          line-height: 22px;
          text-align: center;
          margin: 0px;

          &:hover {
            color: @light;
            background-color: @pink;
          }
        }
      }
      .facebook a:hover {
        background-color: #3b5998;
      }
      .twitter a:hover {
        background-color: #55acee;
      }
      .rss a:hover {
        background-color: #f26522;
      }
      .youtube a:hover {
        background-color: #e52d27;
      }
      .gplus a:hover {
        background-color: #dd4b39;
      }
    }

    .paymentsNav {
      li{
        margin: 0px 2.5px;

        a {
          img {
            display: block;
          }
        }
      }
      
      li:first-child {
        margin-left: 0px;
      }

      li:last-child {
        margin-right: 0px;
      }
    }
  }
}



/*=============================================================================

  Style 2

  =============================================================================*/


/* --- Header --------------------- */
.style-2 .header {
  position: absolute;
  width: 100%;
  top: 45px;
}

.style-2 .header.fixer {
  position: absolute;
  width: 100%;
  top: 45px;
}

.style-2 .header.fixedHeader {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 100000;

  + .offset {
    display: block;    
  }
}


/* --- Slider --------------------- */
.slider .homeSlider_2 .captions {
  top: 58%;
}
.homeSlider_2 .captions .links a {
  background-color: @pink;
  color: @light;

  &:hover {
    background-color: @light !important;
    color: @dark;
  }
}
.homeSlider_2 .owl-controls .owl-nav {
  top: 58%;
}
.homeSlider_2 .owl-controls .owl-nav div {
  background-color: transparent;
  font-size: 60px;
  font-weight: normal;
  .transitionEaseInOut;
  font-weight: 100;
}
.homeSlider_2 .owl-controls .owl-nav div:hover {
  color: @pink;
}
  

.homeSlider_2 .owl-controls .owl-prev {
  left: 30px !important;
}
.homeSlider_2 .owl-controls .owl-prev:before {
  content: '\f104';
  font-family: 'FontAwesome';
}
.homeSlider_2 .owl-controls .owl-next {
  right: 30px !important;
}
.homeSlider_2 .owl-controls .owl-next:before {
  content: '\f105';
  font-family: 'FontAwesome';
}

.homeSlider_2 .owl-controls .owl-prev:before {}
.owl-controls .owl-next:before {}

.homeSlider_2 .owl-item.active .captions .links a.details {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp;

  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  animation-delay: 3s; 
}

/*=============================================================================

  Style 3

  =============================================================================*/

/* --- Slider --------------------- */
.style-3 #slider {
  overflow: visible;
}
.style-3 #slider .owl-controls .owl-dots {
   display: none !important;
}
.style-3 .slider .owl-controls .owl-nav {
  width: 96px;
  right: 50%;
  margin-right: -48px;
  top: 70%;

  div {
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    .round();
    font-size: 16px;
  }
}


/* --- Domain Search --------------------- */
.style-3 .domainSearch {
  position: absolute;
  bottom: 30px;
  z-index: 10000;
  background-color: transparent;
  width: 100%;
  text-align: center;

  .domainSearchForm {
    display: inline-block;
    text-align: center;

    .formSearchUl {
      display: inline-block;
    }
  }
}


/* --- About --------------------- */

.aboutBox {
  padding: 20px;
  background-color: @lightGray;
  border: 1px solid @borderColor;

  .aboutBoxHeader {
    height: 30px;
    padding-right: 50px;
    border-bottom: 2px solid @pink;
    margin-bottom: 20px;
    color: @dark;
    font-size: 15px;
  }

  .aboutBoxBody {
    .triggerRow  {
      margin-bottom: 12px !important;
    }

    .triggerRow:last-child {
      margin-bottom: 0 !important;
    }

    .triggerRow > a {
      background-color: @light !important;
      color: @pink;
      height: 36px !important;
      line-height: 36px !important;
    }

    .triggerRow > a.activeLine {
      background-color: @lightGray !important;
    }

    .progress {
      background-color: @dark;
      height: 38px;
      line-height: 38px;
      margin-bottom: 12px;
    }

    .progress:last-child {
      margin-bottom: 0;
    }

    .singleOffer {
      padding: 20px;
      background: url('images/offer.jpg') center center no-repeat;
      background-size: 100% 100%;
      position: relative;

      .cover {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        background-color: fade(@dark, 95%);
        z-index: 0;
      }

      .offerTitle {
        position: relative;
        z-index: 1;
        font-weight: 700;
        margin-bottom: 10px;
        a {
          color: @pink;    
        }
      }

      ul {
        position: relative;
        z-index: 1;
        margin-bottom: 12px;

        li {
          color: @light;
          font-size: 13px;
          margin-bottom: 2px;
        }
      }

      p {
        float: left;
        width: 50%;
        margin-bottom: 0;
      }

      p:first-child {
        padding-right: 10px;
      }
      p:last-child {
        padding-left: 10px;
      }

      .offerlinks {
        position: relative;
        z-index: 1;
        width: 100%;
      }

      .offerlinks:last-child {
        margin-right: 0;
      }

      .details {
        color: @light;
        border: 1px solid @light;

        &:hover {
          background-color: @light;
          color: @dark !important;
        }
      }
      .purchase {
        // color: @pink;
        // border: 1px solid @pink;
      }
    }


    .owl-controls {
      top: -50px;
      right: 0;
      z-index: 1000;
      position: absolute;
      width: 50px;
      .owl-nav {
        right: 0;
        

        div {
          width: 20px;
          height: 20px;
          line-height: 20px;
          font-size: 10px;
          font-size: 16px;
          text-align: center;
          color: @light;

          .transitionEaseInOut();
          .round();
          background-color: @contentText;


          &:hover {
            background-color: @dark;
          }
        }
      }
    }
    
  }
}



/*=============================================================================

  Style 4

  =============================================================================*/


/* --- Top Menu --------------------- */
.style-4 {
  .slider {
    .topMenu {
      top: 93px;

      .topContact {
        ul {
          float: left;
        }
      }
      .socialNav {
        float: right;
        text-align: right;
        width: auto;

        > li {
        }

        .fancy-select ul.options {
          left: auto;
          right: -1px;

          .round(2px 0px 2px 2px);
        }
      }
    }
  }
}


/* --- Header --------------------- */
.style-4 .header {
  position: absolute;
  width: 100%;
  top: 0px;
  border-bottom: 0;
  background-color: transparent;

  .scrollHeaderWrapper  {
    border-bottom: 0;

    .container {
      padding-bottom: 30px !important;
      border-bottom: 1px solid fade(@light, 15%);
    }

    .mainNav .navTabs > li > a, .mainNav .navTabs > li > button {
      color: @light;

    }


    .login .formSwitcher.bordered {
      background: transparent;
      color: @pink;
      border: 1px solid @pink;

      &:hover {
        background-color: @pink;
        color: @light;
      }
    }

    .login .formSwitcher.bordered.opened {
      color: @light;
      background-color: @pink;
    }

    .register .formSwitcher.bordered {
      background: transparent;
      color: #a0a2a6;
      border: 1px solid #a0a2a6;

      &:hover {
        background-color: #dcdcdc;
        border: 1px solid #dcdcdc;
        color: @light;
      }
    }
    .register .formSwitcher.bordered.opened {
      border: 1px solid #dcdcdc;
      color: @light !important;
    } 
  }
}

.style-4 .header.fixedHeader {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 100000;

  background-color: @light;
  border-bottom: 1px solid #d9d9d9;


  .scrollHeaderWrapper  {
    border-bottom: 1px solid #ccc
  }
  .mainNav .navTabs > li > a {
    color: @dark;
    &:hover {
      color: @light;
    }
  }

  .mainNav .navTabs > li ul li a:hover {
    color: @light;
  }

}


/* --- Slider --------------------- */

.style-4 .slider {
  .owl-controls {
    .owl-nav {
      display: none;
    }

    .owl-dots {
      bottom: 35%;
      .owl-dot {
        display: inline-block;
        margin: 0px 5px 0px 5px;
        height: 16px;
        line-height: 16px;
        width: 16px;
        padding-top: 2px;
        text-align: center;
        .transitionLinear();
        background: transparent;
      }
      .owl-dot:first-child {
        margin: 0px 5px 0px 0px;
      }
      .owl-dot:last-child {
        margin: 0px 0px 0px 5px;
      }
      .owl-dot span {
        width: 12px;
        display: block;
        text-align: center;
        height: 12px;
        margin: 0px auto;
        text-indent: -99999px;
        border: 2px solid @contentText;
        .round(50%);
        .transitionLinear();
      }
      .owl-dot.active , .owl-dot:hover{
        padding-top: 0px;
        width: 16px;
      }
      .owl-dot:hover span,
      .owl-dot.active span {
        width: 16px;
        height: 16px;
        background-color: @pink;
        border: 0px solid @pink;
      }
    }
  }
}


/* --- Pricing --------------------- */
.style-4 .pricing {
  border-top: none;
  border-bottom: none;
}
.style-4 .pricing + .mainSection {
  border-top: none;

  .sectionWrapper {
    padding-top: 0;
  }
}
.style-4 .pricingTable {
  margin-top: -264px;

  .pricingHeader {
    text-align: center;

    .pricingTitle  {
      float: none;
    }
  }

  .pricingBody {
    background: @lightGray;
    li{
      padding: 10px 0;
      border-bottom: none;
      text-align: center;
    }

    li:last-child {
      padding-bottom: 0;
    }
    li:first-child {
      padding-top: 0;
    }
  }

  .pricingPerMonth {
    width: 100%;
    height: 51px;
    padding: 10px;
    text-align: left;
    line-height: 31px;

    .generalLink {
      float: right;
      padding: 0 10px;
      height: 31px;
      line-height: 31px;
      font-size: 14px;
      background-color: @pink;
      font-weight: 700;
      width: auto;


      &:hover {
        color: @pink;
        background-color: @light;
      }
    }
  }
}




/*=============================================================================

  Style 5

  =============================================================================*/
/* --- Header --------------------- */
.style-5 .header {
  position: absolute;
  width: 100%;
  top: 0px;
  border-bottom: 0;
  background-color: transparent;

  .scrollHeaderWrapper  {
    border-bottom: 0;

    .mainNav .navTabs > li > a, .mainNav .navTabs > li > button {
      color: @light;
    }

    .register .formSwitcher {
      color: @light;
      background: #a0a2a6;
    }
    .register .formSwitcher.opened {
      background-color: @pink;
      color: @dark;
    } 
  }
}

.style-5 .header.fixedHeader {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 100000;
  background-color: @light;
  border-bottom: 1px solid #d9d9d9;


  .scrollHeaderWrapper  {
    border-bottom: 1px solid #ccc
  }

  .mainNav .navTabs > li > a, .mainNav .navTabs > li > button {
    color: @dark;

    &:hover {
      color: @light;
    }
  }
  .mainNav .navTabs > li.login .formSwitcher {
    color: @light;
    background: @pink;
  }
  .mainNav .navTabs > li.login .formSwitcher.opened {
    background-color: @pink;
    color: @light;
  } 
   .mainNav .navTabs > li.register .formSwitcher {
    color: @light;
   }


}
/* --- Slider --------------------- */
.style-5 .owl-controls {
  .owl-nav {
    div {
      width: 38px;
      height: 38px;
      line-height: 38px;
      .round();
    }
    .owl-prev {
      left: 20px;
    }
    .owl-next {
      right: 20px;
    }
  }
}

.style-5 .slider:hover .owl-controls .owl-nav .owl-prev {
  left: 20px;
}

.style-5 .slider:hover .owl-controls .owl-nav .owl-next {
  right: 20px;
}

.style-5 .slider .owl-dots {
  display: none;
}



/* --- Domain Search --------------------- */
.style-5 .domainSearch {
  position: absolute;
  bottom: 0;
  z-index: 10000;
  background-color: transparent;
  background-color: fade(#000, 60%);
  width: 100%;
  text-align: center;
  padding: 20px 0 10px 0;

  .sectionWrapper {
    padding: 0;
  }
  .domainSearchForm {
    text-align: center;

    .formSearchUl {
      display: inline-block;
    }
  }
}


/* --- Services --------------------- */
.style-5 {
  .singleService {
    background-color: transparent;
    border: none;
  }

  .pricingHeader {
    padding: 70px 20px 50px 20px;
    background-color: @dark !important;
    border: 1px solid @dark !important;
    border-bottom: none;
    text-align: center;

    .pricingTitle  {
      float: none;
    }

    .pricingPerMonth {
      float: none;
      text-align: center;
      font-weight: normal;
      width: 100%;
    }
  }

  .pricingBody {
    li{
      padding: 10px 0;
      border-bottom: none;
      text-align: center;
    }

    li:last-child {
      padding-bottom: 0;
    }
    li:first-child {
      padding-top: 0;
    }
  }

}

/* --- Purchase --------------------- */
.style-5 .purchase  {
  .sectionTitle {
    margin-bottom: 0;

    .sectionHeader {
      text-align: left;
      margin-bottom: 0;
    }
  }

  .links {
    text-align: right;

    a {
      margin: 0;
      font-size: 16px;
    }
  }

}



/*=============================================================================

  Style 6

  =============================================================================*/

/* --- Top Menu --------------------- */
.style-6 .topMenu {
  background-color: @lightGray;
  border-bottom: 1px solid #e4e5e6;

  .socialNav > li a , .fancy-select .trigger {
    background-color: #d8d9d9;
  }
  .socialNav > li a:hover , .fancy-select .trigger:hover {
    background-color: @pink;
  }

  .topContact ul li {
    border-right-color: @dark; 
  }
}

/* --- Main Slider --------------------- */
.style-6 .mainSlider  {
  .captions .links a.join {
    color: @pink;
    background-color: transparent;
  }

  .captions .links a.join:hover {
    color: @light;
    background-color: @pink;
  }
  
  .captions .links a.details {
    background-color: transparent;
    color: @light;
    border-color: @light;
  }

  .captions .links a.details:hover {
    color: @dark;
    background-color: @light;
  }


  .owl-dots {
    display: none;
  }
}
/* --- Header --------------------- */
.style-6 .header {
  position: absolute;
  width: 100%;
  top: 45px;
}

.style-6 .header.fixer {
  position: absolute;
  width: 100%;
  top: 45px;
}

.style-6 .header.fixedHeader {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 100000;

  + .offset {
    display: block;    
  }
}


/* --- Pricing Table  --------------------- */
.style-6 .pricingTable {
  margin-top: -177px;
}



/* --- Services  --------------------- */
.style-6 .singleService{
  padding: 0;
  border: none;
  background-color: transparent;
}
.style-6 .singleService2 .serviceIcon , .style-6  .singleService2 .servicesContents {
  float: left;
}
.style-6  .singleService2 .servicesContents {
  width: 63%;
}

/* --- Testmonials  --------------------- */
.style-6 {
  .singleTestmonial {
    .testmonialsTopContents {
      margin-bottom: 50px;
      padding-bottom: 45px;

      .testmonialthumb {
        position: absolute;
        right: 50%;
        margin-right: -30px;
        bottom: -30px;

      }
      blockquote {
        float: none;
        text-align: center;
        width: 94%;
        margin: auto;

      }
    }

    .testmonialsBottomContents {
      text-align: center;
      p {
        display: inline-block;

        margin-right: 5px;

        &:after {
          content: '-';
          margin-left: 5px;
        }
      }

      p:last-child {
        margin-right: 0;

        &:after {
          display: none;
        }
      }
    }
  }
}

/*=============================================================================

  Style 7

  =============================================================================*/

/* --- Banner  --------------------- */
.banner {
  #slide1 {
    .captions {
      top: 40%;
      h2 , p , .links a  {
        opacity: 1;
      }
    }
  }
}

/* --- Header  --------------------- */
.style-7 {
  .header {
    position: absolute;
    width: 100%;
    top: 45px;
  }

  .header.fixedHeader {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 100000;

    + .offset {
      display: block;    
    }
  }
}


/* --- Slider  --------------------- */
.style-7 {
  .welcome {
    position: absolute;
    bottom: 30px;
    background-color: transparent !important;
    width: 100%;
    
    .singleService {
      background-color: @darkGray;
      border: none;


      .serviceName  {
        color: @light;
      }

      p {
        color: #e4e4e4;
      }
    }

    
  }
}


.style-7.welcome {
  
  .singleService {
    background-color: @darkGray;
    border: none;


    .serviceName  {
      color: @light;
    }

    p {
      color: #e4e4e4;
    }
  }
}



/*=============================================================================

  10. Inner Pages Styles

  =============================================================================*/


/* --- Page Header  --------------------- */
.pageHeader {
  .topMenu {
    position: relative;
    background-color: @dark;
  }

  .generalLink:hover {
    background-color: @dark;
    color: @light;
  }
}

/* --- Page info  --------------------- */
.pageInfo {
  padding: 45px 0;
  background: url('images/page-info-bg.png') no-repeat;
  background-attachment: fixed;
  position: relative;
  border-bottom: 1px solid #30333c;
  background-size: 100% 100%;

  .cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: fade(@dark, 85%);
  } 
}

/* --- Page Title  --------------------- */
.pageTitle {
  margin-bottom: 0;
  font-size: 35px;
  font-weight: 700;
  color: @light;
  line-height: 1;
  float: left;
}


/* --- Bread Crumb  --------------------- */
.breadcrumb {
  margin-bottom: 0;
  .round(0);
  background-color: transparent;
  float: right;

  li{
    color: @sliderText;
    font-size: 13px;
    
    + li:before {
      color: @sliderText;
    }

    a {
      color: @pink;
    }
  }
  li.active {
    color: @sliderText;
  }

}

/* --- Pricing  --------------------- */
.page .lightSection {
  border-top: none;
}
.page .lightSection + .lightSection .sectionWrapper {
  padding-top: 0;
}
.page .style-4 .pricingTable {
  margin-top: 0;
}

.page .style-4 .pricingTable .pricingBody {
  background-color: @light;
}







/* --- Contact --------------------- */

/* google map */

#GoogleMap {
  width: 100% !important;
  height: 480px;
  position: relative;
}

.contact #GoogleMap {
  height: 350px;
  .round;
  overflow: hidden;
  margin-bottom: 75px;
}


.map #GoogleMap div {
  color: @dark !important;
}

/* follow */
.colorFulSocial {
  li.facebook a {
    background: url('images/share-btns.png') 0 0 no-repeat;
  }
  li.twitter a {
    background: url('images/share-btns.png') 0 -32px no-repeat;
  }
  li.googleplus a {
    background: url('images/share-btns.png') 0 -64px no-repeat;
  }
  li.email a {
    background: url('images/share-btns.png') 0 -96px no-repeat;
  }
  li.youtube a {
    background: url('images/share-btns.png') 0 -128px no-repeat;
  }
  li.pinterest a {
    background: url('images/share-btns.png') 0 -160px no-repeat;
  }
}



/* --- ShortCodes --------------------- */
/* --- newsletter --------------------- */

.newsletter {
  >p {
    color: @dark;
    margin-top: -5px;
  }

  form {
    position: relative;

    input {
      display: block;
      width: 100%;
      height: 43px;
      color: @pink;
      padding-left: 26px;
      font-size: 12px;
      font-weight: 400;
      margin-bottom: 10px;
    }

    input + i {
      position: absolute;
      left: 10px;
      top: 15px;
      z-index: 100;
    }

    button , input[type="submit"] {
      width: 100%;
      display: block;
      height: 43px;
      line-height: 43px;
      padding-top: 0;
      padding-bottom: 0;
      font-weight: 400;
      background-color: @pink;
      font-size: 14px;

      &:hover {
        background-color: @dark;
      }
    }
  }
}



/* --- social List --------------------- */
.socialList {
  margin-top: -10px;
  li {
    float: left;
    margin-right: 10px;
    margin-top: 10px;

    a {
      height: 32px;
      width: 32px;
      display: block;
      text-align: center;
      line-height: 32px;
      background-image: url('images/social-list.png');
      background-repeat: no-repeat;
      color: @light;
    }
    a.facebook {
      background-position: 0px 0px;
    }
    a.pinterest {
      background-position: -32px 0px;
    }
    a.twitter {
      background-position: -64px 0px;
    }
    a.gplus {
      background-position: -96px 0px;
    }
    a.rss {
      background-position: -128px 0px;
    }
    a.vimeo {
      background-position: -160px 0px;
    }
    a.evernote {
      background-position: -192px 0px;
    }
    a.dribbble {
      background-position: -224px 0px;
    }
    a.tumblr {
      background-position: -256px 0px;
    }
    a.behance {
      background-position: -288px 0px;
    }
    a.stumbleUpon {
      background-position: -320px 0px;
    }
    a.dropbox {
      background-position: -352px 0px;
    }
    a.soundCloud {
      background-position: -384px 0px;
    }
    a.picasa {
      background-position: -416px 0px;
    }
    a.lastfm {
      background-position: -448px 0px;
    }
    a.forrst {
      background-position: -480px 0px;
    }
    a.flickr {
      background-position: -512px 0px;
    }
    a.deviantArt {
      background-position: -544px 0px;
    }
    a.linkedIn {
      background-position: -576px 0px;
    }
    a.blogger {
      background-position: -608px 0px;
    }
    a.grooveshark {
      background-position: -640px 0px;
    }
    a.digg {
      background-position: -672px 0px;
    }
    a.skype {
      background-position: -704px 0px;
    }
    a.shareThis {
      background-position: -736px 0px;
    }
    a.wordPress {
      background-position: -768px 0px;
    }
    a.kickstarter {
      background-position: -800px 0px;
    }
    a.bebo {
      background-position: -832px 0px;
    }
    a.zerply {
      background-position: -864px 0px;
    }
    a.amazon {
      background-position: -896px 0px;
    }
    a.myspace {
      background-position: -928px 0px;
    }
    a.wikipedia {
      background-position: -960px 0px;
    }
    a.technorati {
      background-position: -992px 0px;
    }
    a.addThis {
      background-position: -1024px 0px;
    }
    a.delicious {
      background-position: -1056px 0px;
    }
    a.xing {
      background-position: -1088px 0px;
    }
    a.quora {
      background-position: -1120px 0px;
    }
    a.gitHub {
      background-position: -1152px 0px;
    }
    a.instagram {
      background-position: -1184px 0px;
    }
    a.yahoo {
      background-position: -1216px 0px;
    }
    a.youTube {
      background-position: -1248px 0px;
    }
  }

  li:nth-child(28n) {
    margin-right: 0;
  }
}

.socialList.solid li a {
  background-color: @pink;

  &:hover {
    background-color: @dark;
  }
} 

.socialList.colorful {

  li {
    a.facebook {
      background-color: #5d82d1;
    }
    a.pinterest {
      background-color: #e13138;
    }
    a.twitter {
      background-color: #40bff5;
    }
    a.gplus {
      background-color: #eb5e4c;
    }
    a.rss {
      background-color: #faa33d;
    }
    a.vimeo {
      background-color: #35c6ea;
    }
    a.evernote {
      background-color: #9acf4f;
    }
    a.dribbble {
      background-color: #f7659c;
    }
    a.tumblr {
      background-color: #426d9b;
    }
    a.behance {
      background-color: #1879fd;
    }
    a.stumbleUpon {
      background-color: #ff5c30;
    }
    a.dropbox {
      background-color: #17a3eb;
    }
    a.soundCloud {
      background-color: #ff7e30;
    }
    a.picasa {
      background-color: #9eb5b6;
    }
    a.lastfm {
      background-color: #f34320;
    }
    a.forrst {
      background-color: #45ad76;
    }
    a.flickr {
      background-color: #ff48a3;
    }
    a.deviantArt {
      background-color: #6a8a7b;
    }
    a.linkedIn {
      background-color: #238cc8;
    }
    a.blogger {
      background-color: #ff9233;
    }
    a.grooveshark {
      background-color: #ffb21d;
    }
    a.digg {
      background-color: #75788d;
    }
    a.skype {
      background-color: #13c1f3;
    }
    a.shareThis {
      background-color: #25a774;
    }
    a.wordPress {
      background-color: #2592c3;
    }
    a.kickstarter {
      background-color: #8cd049;
    }
    a.bebo {
      background-color: #ee3849;
    }
    a.zerply {
      background-color: #9dbc7a;
    }
    a.amazon {
      background-color: #ff8e2e;
    }
    a.myspace {
      background-color: #008dde;
    }
    a.wikipedia {
      background-color: #b3b5b8;
    }
    a.technorati {
      background-color: #71d14b;
    }
    a.addThis {
      background-color: #ff7850;
    }
    a.delicious {
      background-color: #377bda;
    }
    a.xing {
      background-color: #1a8e8c;
    }
    a.quora {
      background-color: #ea3d23;
    }
    a.gitHub {
      background-color: #3f91cb;
    }
    a.instagram {
      background-color: #548bb6;
    }
    a.yahoo {
      background-color: #ab47ac;
    }
    a.youTube {
      background-color: #ef4e41;
    }
  }
}

.socialList.largeSocialList {
  margin-top: -30px;

  [class*="col-"] {
    width: 100px;
  }

  li {
    margin-top: 30px;
    margin-right: 0;
    a {
      width: 100%;
      .round();
      height: 38px;
      line-height: 38px;
      background-image: url('images/social-list-large.png');
    }
    a.facebook {
      background-position: 0px 0px;
    }
    a.pinterest {
      background-position: -70px 0px;
    }
    a.twitter {
      background-position: -140px 0px;
    }
    a.gplus {
      background-position: -210px 0px;
    }
    a.rss {
      background-position: -280px 0px;
    }
    a.vimeo {
      background-position: -350px 0px;
    }
    a.evernote {
      background-position: -420px 0px;
    }
    a.dribbble {
      background-position: -490px 0px;
    }
    a.tumblr {
      background-position: -560px 0px;
    }
    a.behance {
      background-position: -630px 0px;
    }
    a.stumbleUpon {
      background-position: -700px 0px;
    }
    a.dropbox {
      background-position: -770px 0px;
    }
    a.soundCloud {
      background-position: -840px 0px;
    }
    a.picasa {
      background-position: -910px 0px;
    }
    a.lastfm {
      background-position: -980px 0px;
    }
    a.forrst {
      background-position: -1050px 0px;
    }
    a.flickr {
      background-position: -1120px 0px;
    }
    a.deviantArt {
      background-position: -1190px 0px;
    }
    a.linkedIn {
      background-position: -1260px 0px;
    }
    a.blogger {
      background-position: -1330px 0px;
    }
    a.grooveshark {
      background-position: -1400px 0px;
    }
    a.digg {
      background-position: -1470px 0px;
    }
    a.skype {
      background-position: -1540px 0px;
    }
    a.shareThis {
      background-position: -1610px 0px;
    }
    a.wordPress {
      background-position: -1680px 0px;
    }
    a.kickstarter {
      background-position: -1750px 0px;
    }
    a.bebo {
      background-position: -1820px 0px;
    }
    a.zerply {
      background-position: -1890px 0px;
    }
    a.amazon {
      background-position: -1960px 0px;
    }
    a.myspace {
      background-position: -2030px 0px;
    }
    a.wikipedia {
      background-position: -2100px 0px;
    }
    a.technorati {
      background-position: -2170px 0px;
    }
    a.addThis {
      background-position: -2240px 0px;
    }
    a.delicious {
      background-position: -2310px 0px;
    }
    a.xing {
      background-position: -2380px 0px;
    }
    a.quora {
      background-position: -2450px 0px;
    }
    a.gitHub {
      background-position: -2520px 0px;
    }
    a.instagram {
      background-position: -2590px 0px;
    }
    a.yahoo {
      background-position: -2660px 0px;
    }
    a.youTube {
      background-position: -2730px 0px;
    }
  }
}

/* --- tabs --------------------- */
.tabsContainer {
  background-color: @pink;
}
.etabs {
  background-color: @light;
  a {
    display: block;
    height: 36px;
    line-height: 36px;
    font-weight: 700;
    color: @light;
    padding: 0 15px;
    background-color: @dark;

    &:hover {
      background-color: @pink;
    }
  }

  .active a {
    background-color: @pink;
  }
}



.singleTab {
  background-color: @pink;
  .transitionEaseInOut;

  p {
    color: @light;
    padding: 20px;
  }
}
.tabsHr {
  .etabs {
    li {
      float: left;
      margin-right: 5px;
    }
  }
}

.tabsVr {
  .etabs {
    width: 30%;
    float: left;
    li {
      margin-bottom: 5px;
    }
  }

  .singleTab {
    float: left;
    width: 70%;
  }
}


/* --- alert --------------------- */

.alert {
  padding: 10px 20px 10px 10px;
  margin-bottom: 30px;
  color: @light;
  background-color: #34495e;
  .round();

  .close {
    width: 20px;
    height: 21px;
    line-height: 21px;
    margin-top: 8.5px;
    text-align: center;
    opacity: 1;
    color: @light;
    font-size: 14px;
    .text-shadow(0);
    background-color: @dark;

    span {
      line-height: 21px;
    }
  }

}
.alert-success {
  background-color: #27ae60;
}
.alert-warning {
  background-color: #f1c40f;
}

.alert-info {
  background-color: @pink;
}

.alert-error {
  background-color: #c0392b;
}

.alert-attention {
  background-color: #7f8c8d;
}


.alertContents {
  .alertIcon {
    float: left;
    display: block;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background-color: fade(#000, 40%);
    .round();
    margin-right: 10px;
    font-size: 16px;
  }

  .alertDetails {
    font-size: 17px;
    font-weight: 700;
    display: inline-block;
    line-height: 38px;
  }
}





/* --- Message Panel --------------------- */


.messagePanel {
  padding: 15px 20px 20px 20px;
  background-color: @pink;
  .round;

  h3 {
    color: @light;
    font-size: 17px;
  }

  p {
    color: #202028;
  }
}
.messageLinks {
  p {
    float: left;
    display: block;
    width: 50%;
    margin-bottom: 0;
  }

  a {
    display: block;
    width: 100%;
    background-color: @dark !important;
    color: @light !important;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    padding-top: 0;
    padding-bottom: 0;

    &:hover {
      background-color: @light !important;
      color: @dark !important;
    }
  }

  p:last-child {
    padding-left: 10px;
  }
  p:first-child {
    padding-right: 10px;
  }
}


/* messagePanel3 */
.messagePanel3 .messageLinks a {
  float: right;
  width: auto;
}

/* messagePanel4 */
.messagePanel4 {
  height: 195px;
}
.messagePanel4 .close {

  width: 20px;
  height: 21px;
  line-height: 21px;
  text-align: center;
  opacity: 1;
  color: @light;
  font-size: 14px;
  .text-shadow(0);
  background-color: @dark;

  span {
    line-height: 21px;
  }

}

/* --- Typography--------------------- */

/* --- headings --------------------- */
.headingsContents {
  p {
    color: @dark;
  }
}

.headingH {
  margin-bottom: 40px;
}
.headingH:last-child {
  margin-bottom: 0;
}


/* --- columns--------------------- */
.columnsContents {
  margin-top: -40px;
}
.columns {
  margin-top: 40px;
  h4 {
    font-size: 20px;
  }

  p {
    color: @dark;
  }
}


/* --- Blockquotes--------------------- */
.blockquoteP {
  margin-bottom: 40px;

  p {
    color: @dark;
  }

  blockquote {
    display: block;
    margin-bottom: 15px;
    background-color: transparent;
    padding: 0;
    .round(0);
    color: @dark;
    font-size: 13px;
    font-style: normal;
    line-height: 22px;
    width: 42%;

    padding-left: 50px;

    a {
      color: @pink;
      &:hover {
        text-decoration: underline !important;
      }
    }


    position: relative;

    &:before {
      content: '\f10d';
      font-family: 'FontAwesome';
      display: block;
      position: absolute;
      left: 0;
      top: 4px;
      color: @pink;
      width: 38px;
      font-size: 40px;

    }
  }
}
.blockquoteP:last-child {
  margin-bottom: 0;
}

.blockquotePLeft blockquote {
  float: left;
  margin-right: 30px;
}

.blockquotePRight blockquote {
  float: right;
  margin-left: 30px;
}



/* --- Dropcaps--------------------- */
.dropcapWrapper {
  margin-bottom: 40px;

  p {
    color: @dark;
  }
}
.dropcapWrapper:last-child {
  margin-bottom: 0;
}
.dropcap {
  display: inline-block;
  float: left;
  margin-right: 20px;
  margin-bottom: 0;
  line-height: 54px;
  font-size: 36px;
  font-weight: 800;
  margin-top: -10px;

}
.dropcapDark .dropcap {
  color: @dark;
}
.dropcapGray .dropcap {
  color: #5a5e6a;
}
.dropcapAccent .dropcap {
  color: @pink;
}





/* --- coming soon --------------------- */
.soonContents {
  text-align: center;
}

/* flip clock */

/* Get the bourbon mixin from http://bourbon.io */
/* Reset */
.flip-clock-wrapper * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-clock-wrapper a {
  cursor: pointer;
  text-decoration: none;
  color: #ccc; 
}

.flip-clock-wrapper a:hover {
  color: #fff; 
}

.flip-clock-wrapper ul {
  list-style: none; 
}

.flip-clock-wrapper.clearfix:before,
.flip-clock-wrapper.clearfix:after {
  content: " ";
  display: table; 
}

.flip-clock-wrapper.clearfix:after {
  clear: both; 
}

.flip-clock-wrapper.clearfix {
  *zoom: 1; 
}

/* Main */
.flip-clock-wrapper {
  -webkit-user-select: none; 
}

.flip-clock-meridium {
  background: none !important;
  box-shadow: 0 0 0 !important;
  font-size: 36px !important; 
}

.flip-clock-meridium a { color: #313333; 
}

.flip-clock-wrapper {
  text-align: center;
  position: relative;
  display: inline-block;
  padding-bottom: 60px;
}

.flip-clock-wrapper:before,
.flip-clock-wrapper:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.flip-clock-wrapper:after {
    clear: both;
}

/* Skeleton */
.flip-clock-wrapper ul {
  position: relative;
  float: left;
  margin: 5px;
  width: 70px;
  height: 90px;
  font-size: 80px;
  font-weight: bold;
  line-height: 87px;
  border-radius: 6px;
  background-color: transparent;
}

.flip-clock-wrapper ul li {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 87px;
  text-decoration: none !important;
}

.flip-clock-wrapper ul li:first-child {
  z-index: 2; 
}

.flip-clock-wrapper ul li a {
  display: block;
  height: 100%;
  -webkit-perspective: 200px;
  -moz-perspective: 200px;
  perspective: 200px;
  margin: 0 !important;
  overflow: visible !important;
  cursor: default !important; 
}

.flip-clock-wrapper ul li a div {
  z-index: 1;
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  font-size: 80px;
  overflow: hidden; 
  outline: 1px solid transparent; 
}

.flip-clock-wrapper ul li a div .shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2; 
}

.flip-clock-wrapper ul li a div.up {
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  top: 0; 
  .round(6px);
}

.flip-clock-wrapper ul li a div.up:after {
  content: "";
  position: absolute;
  top: 44px;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 3px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.4); 
}

.flip-clock-wrapper ul li a div.down {
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  bottom: 0;
  .round(6px);
}

.flip-clock-wrapper ul li a div div.inn {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 200%;
  color: @light;
  text-shadow: 0 1px 2px #000;
  text-align: center;
  background-color: @dark;
  border-radius: 6px;
  font-size: 56px; 
}

.flip-clock-wrapper ul li a div.up div.inn {
  top: 0; 
}

.flip-clock-wrapper ul li a div.down div.inn {
  bottom: 0; 
}

/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
  z-index: 3; 
}


.flip-clock-wrapper ul.play li.flip-clock-active {
  -webkit-animation: asd 0.5s 0.5s linear both;
  -moz-animation: asd 0.5s 0.5s linear both;
  animation: asd 0.5s 0.5s linear both;
  z-index: 5; 
}

.flip-clock-divider {
  float: left;
  display: inline-block;
  position: relative;
  width: 20px;
  height: 100px; 
}

.flip-clock-divider:first-child {
  width: 0; 
}

.flip-clock-dot {
  display: block;
  background: #323434;
  width: 10px;
  height: 10px;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  left: 5px; 
  display: none;
}

.flip-clock-divider .flip-clock-label {
  position: absolute;
  top: 120%;
  right: -86px;
  text-shadow: none; 
  font-size: 14px;
  font-weight: 700;
  color: @pink;
  text-transform: uppercase;
}

.flip-clock-divider.days .flip-clock-label {
  right: -139px; 
}

.flip-clock-divider.hours .flip-clock-label {
  right: -106px; 
}
.flip-clock-divider.minutes .flip-clock-label {
  right: -112px; 
}

.flip-clock-divider.seconds .flip-clock-label {
  right: -112px; 
}

.flip-clock-dot.top {
  top: 30px; 
}

.flip-clock-dot.bottom {
  bottom: 30px; 
}

@-webkit-keyframes asd {
  0% {
    z-index: 2; 
  }

  20% {
    z-index: 4; 
  }

  100% {
    z-index: 4; 
  } 
}

@-moz-keyframes asd {
  0% {
    z-index: 2; 
  }

  20% {
    z-index: 4; 
  }

  100% {
    z-index: 4; 
  } 
}

@-o-keyframes asd {
  0% {
    z-index: 2; 
  }

  20% {
    z-index: 4; 
  }

  100% {
    z-index: 4; 
  } 
}

@keyframes asd {
  0% {
    z-index: 2; 
  }

  20% {
    z-index: 4; 
  }

  100% {
    z-index: 4; 
  } 
}

.flip-clock-wrapper ul.play li.flip-clock-active .down {
  z-index: 2;
  -webkit-animation: turn 0.5s 0.5s linear both;
  -moz-animation: turn 0.5s 0.5s linear both;
  animation: turn 0.5s 0.5s linear both; 
}

@-webkit-keyframes turn {
  0% {
    -webkit-transform: rotateX(90deg); 
  }

  100% {
    -webkit-transform: rotateX(0deg); 
  } 
}

@-moz-keyframes turn {
  0% {
    -moz-transform: rotateX(90deg); 
  }

  100% {
    -moz-transform: rotateX(0deg); 
  } 
}

@-o-keyframes turn {
  0% {
    -o-transform: rotateX(90deg); 
  }

  100% {
    -o-transform: rotateX(0deg); 
  } 
}

@keyframes turn {
  0% {
    transform: rotateX(90deg); 
  }

  100% {
    transform: rotateX(0deg); 
  } 
}

.flip-clock-wrapper ul.play li.flip-clock-before .up {
  z-index: 2;
  -webkit-animation: turn2 0.5s linear both;
  -moz-animation: turn2 0.5s linear both;
  animation: turn2 0.5s linear both; 
}

@-webkit-keyframes turn2 {
  0% {
    -webkit-transform: rotateX(0deg); 
  }

  100% {
    -webkit-transform: rotateX(-90deg); 
  } 
}

@-moz-keyframes turn2 {
  0% {
    -moz-transform: rotateX(0deg); 
  }

  100% {
    -moz-transform: rotateX(-90deg); 
  } 
}

@-o-keyframes turn2 {
  0% {
    -o-transform: rotateX(0deg); 
  }

  100% {
    -o-transform: rotateX(-90deg); 
  } 
}

@keyframes turn2 {
  0% {
    transform: rotateX(0deg); 
  }

  100% {
    transform: rotateX(-90deg); 
  } 
}

.flip-clock-wrapper ul li.flip-clock-active {
  z-index: 3; 
}

/* SHADOW */
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
  background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
  background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
  -webkit-animation: show 0.5s linear both;
  -moz-animation: show 0.5s linear both;
  animation: show 0.5s linear both; 
}

.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
  background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
  background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
  -webkit-animation: hide 0.5s 0.3s linear both;
  -moz-animation: hide 0.5s 0.3s linear both;
  animation: hide 0.5s 0.3s linear both; 
}

/*DOWN*/
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
  background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
  background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
  background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
  background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
  background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
  -webkit-animation: show 0.5s linear both;
  -moz-animation: show 0.5s linear both;
  animation: show 0.5s linear both; 
}

.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
  background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
  background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
  background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
  background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
  background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
  -webkit-animation: hide 0.5s 0.3s linear both;
  -moz-animation: hide 0.5s 0.3s linear both;
  animation: hide 0.5s 0.2s linear both; 
}

@-webkit-keyframes show {
  0% {
    opacity: 0; 
  }

  100% {
    opacity: 1; 
  } 
}

@-moz-keyframes show {
  0% {
    opacity: 0; 
  }

  100% {
    opacity: 1; 
  } 
}

@-o-keyframes show {
  0% {
    opacity: 0; 
  }

  100% {
    opacity: 1; 
  } 
}

@keyframes show {
  0% {
    opacity: 0; 
  }

  100% {
    opacity: 1; 
  } 
}

@-webkit-keyframes hide {
  0% {
    opacity: 1; 
  }

  100% {
    opacity: 0; 
  } 
}

@-moz-keyframes hide {
  0% {
    opacity: 1; 
  }

  100% {
    opacity: 0; 
  } 
}

@-o-keyframes hide {
  0% {
    opacity: 1; 
  }

  100% {
    opacity: 0; 
  } 
}

@keyframes hide {
  0% {
    opacity: 1; 
  }

  100% {
    opacity: 0; 
  } 
}


/* --- Erorr 404 --------------------- */
.erorr404Contents {
  text-align: center;

  span {
    display: block;
    text-align: center;
    color: @dark;
    font-weight: 700;
  }
}
.erorrBig {
  font-size: 200px;
  line-height: 1;
}

.erorrBottom {
  font-size: 20px;
}



/* --- Login & Register --------------------- */
.formArea {
  background-color: @dark;
  padding: 30px 30px 30px 30px;

  input[type="text"] ,
  input[type="password"] ,
  input[type="email"] ,
  input[type="url"] {
    display: block;
    width: 100%;
    margin-bottom: 30px;
    height: 48px;
    padding: 13px 20px;
  }

  .generalBtn , input[type="submit"] {
    display: block;
    width: 100%;
    background-color: @pink;
    height: 48px;
    font-size: 15px;
    font-weight: 700;

    &:hover {
      background-color: @light;
      color: @dark;
    }
  }

  .generalLink {
    width: 100%;
    margin-top: 30px;
    background-color: transparent !important;
    color: @light;
    display: block;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 700;

    &:hover {
      color: @pink;
    }
  }
}





/* --- boxed style --------------------- */
/* body boxed */
.body-boxed .allWrapper , .body-boxed-2 .allWrapper {
  .box-shadow(0,0,3px, rgba(0,0,0,0.5));

  .header.fixedHeader {
    left: 50%;
  }
}

.body-boxed {
  background: transparent url('images/patterns/bg8.png') repeat left top;
}
/* body boxed 2 */
.body-boxed-2 {
  background: transparent url('images/bg-body.jpg') no-repeat center center fixed;
  background-size: 100% 100%;

  .allWrapper {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}


/*=============================================================================

  11. Switcher Styles

  =============================================================================*/
/* --- switcher style --------------------- */

/* switcher */

.switcher {
  position: fixed;
  top: 15%;
  z-index: 1000000000;
  .transitionEaseInOut;

  .switcherWrappper {
    position: relative;
  }

  .switcherShowHide {
    background-color: @pink;
    color: @light;
    padding: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 21px;
    overflow: hidden;
    position: absolute;
    left: 100%;
    .round(0 2px 2px 0);
    top: 20px;

    /*-webkit-box-shadow: 1px 0px 0px 0 rgba(0, 0, 0, 0.2),0px 1px 0px 0 rgba(0, 0, 0, 0.2),0px -1px 0px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow:    1px 0px 0px 0 rgba(0, 0, 0, 0.2),0px 1px 0px 0 rgba(0, 0, 0, 0.2),0px -1px 0px 0 rgba(0, 0, 0, 0.2);
    box-shadow:         1px 0px 0px 0 rgba(0, 0, 0, 0.2),0px 1px 0px 0 rgba(0, 0, 0, 0.2),0px -1px 0px 0 rgba(0, 0, 0, 0.2);
    */

    i {
      font-size: 24px;
    }


  }

  .switcherContents {
    background-color: @light;
    padding: 20px;
    width: 231px;
    .box-shadow (0 , 0 , 1px , rgba(0, 0, 0, 0.5));
    .round(0 2px 2px 0);

    header {
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
      padding: 0 10px;
      background-color: @pink;
      text-align: center;


      h5 {
        color: @light;
        margin-bottom: 0;
      }
    }
  }
}

.switcherContent  {
  padding: 20px 0;
  border-bottom: 1px solid @borderColor;

  .title {
    display: block;
    margin-bottom: 20px;
  }
}
.switcherContent:last-child  {
  border-bottom: none;
  padding-bottom: 0;
}

.switcher.opened {
  left: 0 !important;
}

.switcherContent {
  ul {
    text-align: center;
    margin-top: -5px;
    li {
      display: inline-block;
      cursor: pointer;
      margin-right: 5px;
      margin-top: 5px;
      .round;
      .transitionEaseInOut;
    }
    li:last-child {
      margin-right: 0;
    }
  }
}




/* skinsColor */
.skinsColor {
  ul {
    li {
      width: 16px;
      height: 16px;
    }
  }
}

/* tempLayout */
.tempLayout {
  ul {
    li {
      border: 1px solid @contentText; 
      width: 30%;
      height: 40px;
      text-align: center;
      line-height: 40px;
      color: @contentText;

      &:hover {
        background-color: @contentText;
        color: @light;
      }
    }

    .active-layout {
      background-color: @contentText;
      color: @light;
    }
  }
}

/* patterens */
.patterens {
  ul {
    li {
      width: 17px;
      height: 17px;
      border: 1px solid @borderColor;

      img {
        width: 100%;
        height: 100%;
      }
    }

    li:nth-child(8n+8) {
      margin-right: 0;
    }
  }
}


/*=============================================================================

  12. Scroll To Top

  =============================================================================*/
/* scroll to top */
.back-to-top {
  position: fixed;
  z-index: 100;
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 10px 5px;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  background: @pink;
  color: @light;
  .round();
  bottom: -40px;
  right: 20px;
  opacity: 0;
  visibility: hidden;

  &:hover {
    margin-bottom: 0px;
    color: @light;
    background-color: @dark;
  }
}
.back-to-top.fadeInup {
  opacity: 1;
  bottom: 20px;

}

/* slide down */
.slideDown{
  
  animation-name: slideDown;
  -webkit-animation-name: slideDown  ;

  animation-duration: 0.5s ;
  -webkit-animation-duration: 0.5s;

  animation-timing-function: ease  ;
  -webkit-animation-timing-function: ease  ;

  visibility: visible           ;
}


@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-20px);
  }
  
  100% {
    -webkit-transform: translateY(0%);
  } 
}

@keyframes slideDown {
  0% {
    transform: translateY(-20px);
  }
  
  100% {
    transform: translateY(0%);
  }   
}