// @import "compass/reset";

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
dl,
dd,
ol,
ul,
form,
fieldset,
legend,
table,
th,
td,
caption
  margin: 0
  padding: 0
  text-shadow: none
  box-shadow: none

a, button
  outline: 0
  &:hover, &:focus
    outline: 0


@mixin border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  -ms-border-radius: $radius
  border-radius: $radius

@mixin box-shadow($top, $left, $blur, $color, $inset: "")
  -webkit-box-shadow: $top $left $blur $color #{$inset}
  -moz-box-shadow: $top $left $blur $color #{$inset}
  box-shadow: $top $left $blur $color #{$inset}

@mixin text-shadow($horizOffset, $vertOffset, $blur, $color)
  -webkit-text-shadow: $horizOffset $vertOffset $blur $color
  -moz-text-shadow: $horizOffset $vertOffset $blur $color
  -ms-text-shadow: $horizOffset $vertOffset $blur $color
  -o-text-shadow: $horizOffset $vertOffset $blur $color
  text-shadow: $horizOffset $vertOffset $blur $color

@mixin linearGradient($top, $bottom)
  background: $top
  background: -moz-linear-gradient(top,  $top 0%, $bottom 100%)
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom))
  background: -webkit-linear-gradient(top,  $top 0%,$bottom 100%)
  background: -o-linear-gradient(top,  $top 0%,$bottom 100%)
  background: -ms-linear-gradient(top,  $top 0%,$bottom 100%)
  background: linear-gradient(to bottom,  $top 0%,$bottom 100%)
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 )

$HelveticaNeueCyrLight: "HelveticaNeueCyrLight", sans-serif
$HelveticaNeueCyrMedium: "HelveticaNeueCyrMedium", sans-serif
$HelveticaNeueCyrRegular: "HelveticaNeueCyrRegular", sans-serif
$HelveticaNeueCyrBold: "HelveticaNeueCyrBold", sans-serif

body
  margin: 0
  padding: 0
  font-family: $HelveticaNeueCyrRegular
.navbar
  margin-bottom: 0
.navbar-default
  z-index: 100
  background-color: #fff
  border: 0
.navbar-brand
  height: auto
  margin-right: 25px
.navbar-nav
  margin-top: 15px
.navbar-nav > li > a
  font-family: $HelveticaNeueCyrRegular
  text-transform: uppercase
  color: #616262
  font-size: 12px
  padding-top: 10px
  padding-bottom: 10px

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover
  color: #1081c9


#left-menu
  position: relative
  li
    a
      position: relative
      display: block
      padding-left: 40px
      background-repeat: no-repeat
      background-position: 12px center
      &#consulting
        background-image: url('../img/m-icon-1.png')
        &:hover, &:focus
          background-image: url('../img/m-icon-hover-1.png')
      &#marketing
        background-image: url('../img/m-icon-2.png')
        &:hover, &:focus
          background-image: url('../img/m-icon-hover-2.png')
      &#development
        background-image: url('../img/m-icon-3.png')
        &:hover, &:focus
          background-image: url('../img/m-icon-hover-3.png')
      &#analytics
        background-image: url('../img/m-icon-4.png')
        &:hover, &:focus
          background-image: url('../img/m-icon-hover-4.png')
      &:before
        content: ""
        position: absolute
        height: 100%
        width: 1px
        background-color: #e1e1e1
        top: 0
        left: 0
    &:last-of-type
      a
        &:after
          content: ""
          position: absolute
          height: 100%
          width: 1px
          background-color: #e1e1e1
          top: 0
          right: 0


.video
  position: relative
  min-height: 100%
  video
    width: 100%
    height: 100%
  span
    position: absolute
    top: 0
    width: 100%
    right: 0
    left: 0
    bottom: 5px
    background-color: rgba(0,0,0, .65)

.header-title
  position: absolute
  top: 0
  margin-top: 20%
  //margin-top: -71px
  right: 0
  left: 0
  font-size: 18px
  font-family: $HelveticaNeueCyrRegular
  text-align: center
  color: #ffffff
  .main-title
    font-size: 36px

.btn-wrap
  margin-top: 30px
  display: inline-block
  a, button
    background-color: #ff0042
    border: 1px solid #ff0042
    padding: 8px 50px
    display: block
    font-size: 12px
    color: #fffefe
    text-transform: uppercase
    font-family: $HelveticaNeueCyrMedium
    -webkit-transition: all .3s
    -moz-transition: all .3s
    -ms-transition: all .3s
    -o-transition: all .3s
    transition: all .3s
    &:hover, &:focus
      text-decoration: none
      background-color: transparent
      border-color: #fffefe
  &.see-more
    text-align: center
    display: block
    a
      color: #2f3436
      background-color: transparent
      border-color: #2f3436
      font-family: $HelveticaNeueCyrBold
      display: inline-block
      &:hover, &:focus
        text-decoration: none
        background-color: #ff0042
        border-color: #ff0042
        color: #ffffff
  &.contact-form
    margin-top: 0
    text-align: right
    display: block
    button
      display: inline-block

.to-bottom
  position: absolute
  text-align: center
  bottom: 15px
  right: 0
  left: 0
  text-transform: uppercase
  font-family: $HelveticaNeueCyrMedium
  font-size: 18px
  a
    color: #fefefe
    display: block
    &:hover, &:focus
      text-decoration: none
      color: #fefefe
    img
      margin-right: 12px
      margin-top: -8px

.services
  padding: 40px 0
  .item
    margin-bottom: 10px
  .item-right
    text-align: right
  .item-left
    text-align: left
  img
    width: 397px
    height: 280px
    -webkit-transition: all .3s
    -moz-transition: all .3s
    -ms-transition: all .3s
    -o-transition: all .3s
    transition: all .3s
    &:hover, &:focus
      -webkit-transform: scale(1.05)
      -moz-transform: scale(1.05)
      -ms-transform: scale(1.05)
      -o-transform: scale(1.05)
      transform: scale(1.05)

.how
  min-height: 399px
  .we-are
    width: 30%
    float: left
    background-color: #f7f7f7
    padding: 100px 30px
    text-align: right
    font-size: 30px
    font-family: $HelveticaNeueCyrMedium
    p
      color: #2b2b2f
      text-transform: uppercase
  .descr
    width: 70%
    float: right
    padding: 100px 0
    background-color: #fafafa
    p
      padding-left: 45px
      width: 945px
      margin-bottom: 12px
      color: #767676

.faq
  padding: 45px 0 0
  .item
    margin-bottom: 45px
  h3
    color: #2b2b2f
    font-family: $HelveticaNeueCyrMedium
    font-size: 16px
    text-transform: uppercase
    margin-bottom: 20px

.divider-line
  width: 100%
  height: 1px
  background-color: #e1e1e1

.blog
  min-height: 515px
  background-image: url('../img/blog-bg.jpg')
  background-repeat: no-repeat
  background-size: cover
  padding: 40px 0
  img
    width: 100%
    height: auto
  h4
    margin: 12px 0
    font-family: $HelveticaNeueCyrBold
    font-size: 14px
    color: #171a1b
  p
    font-size: 14px
    color: #858585
    font-family: $HelveticaNeueCyrLight
  .item-1
    float: right

.contact-form
  width: 40%
  float: left
  padding: 40px 7%
  background-color: #e9e9e9
  h2
    font-size: 36px
    color: #2f3236
    font-family: $HelveticaNeueCyrMedium
    text-transform: uppercase
    margin-bottom: 30px
  .form-control
    border: 0
    border-bottom: 1px solid #000
    border-radius: 0
    background-color: transparent
    box-shadow: none
    color:    #2f3436
    font-family: $HelveticaNeueCyrMedium
    font-size: 14px

textarea
  &.form-control
    height: 30px

.testimonials
  padding: 40px 0
  width: 60%
  float: right
  background-image: url('../img/testim-bg.jpg')
  background-repeat: no-repeat
  background-size: cover
  .item
    width: 80%
    margin: 100px auto 0
    text-align: center
    color: #ffffff
    position: relative
    h5
      font-family: $HelveticaNeueCyrMedium
      margin-bottom: 20px
    p
      position: relative
      font-style: italic
      font-size: 16px
      color: #d9d9d9

.btn-cf-wrap
  margin-top: 30px
  button
    float: right
    background-color: #ff0042
    border: 1px solid #ff0042
    padding: 8px 50px
    display: block
    font-size: 12px
    color: #fffefe
    text-transform: uppercase
    font-family: $HelveticaNeueCyrMedium
    -webkit-transition: all .3s
    -moz-transition: all .3s
    -ms-transition: all .3s
    -o-transition: all .3s
    transition: all .3s
    &:hover, &:focus
      text-decoration: none
      background-color: transparent
      border-color: #000
      color: #000000

.footer-line
  background-color: #202020
  text-align: center
  padding: 12px 0
  h6
    text-transform: uppercase
    font-size: 12px
    font-family: $HelveticaNeueCyrLight
    color: #ffffff