/*
Theme Name: e-containers
Author: PLAWINET
Author URI: http://plawi.net/
Version: 1.0
*/

/* =Global styles
----------------------------------------------- */
html, body { height: 100% }
body { font-weight: 400; overflow-x: hidden; line-height: 30px }

h1 { font-weight: 700; letter-spacing: 4.2px }

.navbar { border: 0; padding-top: 38px }
.navbar-header { padding-left: 15px !important }
.navbar-brand { padding: 0; margin-top: 1px }
.navbar-nav li.current a { color: #a9abb0 }
    .navbar-nav li a { font-size: 18px; line-height: normal }
    .navbar-nav > li > a { padding: 0; margin-left: 22px; margin-top: 14px }
    .nav > li > a.sign-in-btn { padding: 11px 22px;  margin-left: 63px; margin-top: 0 }
    .navbar-nav > li:last-child > a { margin-right: 15px }
.navbar-right { padding-right: 60px }
.dropdown-menu { min-width: auto; border: 0; box-shadow: none; padding: 0 }
.navbar-toggle { border: 0 }
    .navbar-toggle .icon-bar { background-color: #47aa42 !important; width: 30px; height: 4px }
    .navbar-toggle:hover, .navbar-toggle:focus { background: transparent !important }
.nav-sticky { background: #fff; padding: 10px 0 }

/* =Theme
----------------------------------------------- */
/** Lang */
.lang { margin-left: 10px; padding-left: 16px }
    .lang a { font-weight: 300 !important; margin-left: 0 !important }
    .lang ul { width: 92px; background: #e2e9e5 !important; margin-top: 14px !important; left: 0 !important; right: auto !important }
            .lang ul li a { height: 50px; padding: 13px 50px 13px 14px !important; position: relative }
                .lang ul li a img { position: absolute; right: 11px; top: 9px }

            body.login .lang ul li { padding: 0 }
                body.login .lang ul li a { height: 50px; padding: 13px 50px 13px 14px !important; position: relative !important }
                    body.login .lang ul li a img { position: absolute; right: 11px !important; left: auto !important; top: 9px }

/** Buttons */
.btn { border-width: 3px; background: transparent; font-size: 22px; padding-top: 16px; padding-bottom: 17px /*75px*/; min-width: 300px }
    .btn:hover, .btn:focus, .sign-in-btn, .login-btn { color: #fff !important }
    .btn:focus { box-shadow: none }
     .sign-in-btn { min-width: auto !important; width: 160px }
     .login-btn { min-width: 200px }
.btn-default:hover, .btn:focus, .sign-in-btn { background: #47aa42 !important; border-color: #47aa42 !important }
.login-btn { background: #13a2bf; border-color: #13a2bf }
.login-btn:hover, .login-btn:focus { background: #1d96af !important; border-color: #1d96af !important }
.sign-in-btn:hover, .sign-in-btn:focus { background: #fff !important; color: #47aa42 !important }
.btn-blue { color: #1d96af; border-color: #13a2bf }
.btn-blue:hover, .btn-blue:focus { background: #13a2bf !important; border-color: #13a2bf !important }
.btn-white { color: #fff; border-color: #fff }
.btn-gray { color: #666; border-color: #666 }
.btn-small { min-width: 172px !important }

/** Forms */
.form-control { height: 50px; border-width: 2px; box-shadow: none }
.form-control:focus { box-shadow: none }
   
form.registration { max-width: 450px; margin-top: 21px }
    form.registration .form-group { margin-bottom: 50px }
        form.registration .form-group.last-child { margin-bottom: 26px }
    form.registration .form-control { margin-bottom: 15px }
    form.registration textarea { height: 290px }

form.contact { max-width: 350px }
form.contact .form-control { margin-bottom: 10px }
form.contact textarea { height: 300px }


form.login-form { max-width: 350px; margin: 28px auto 0 auto }
    form.login-form .form-control { margin-bottom: 15px }
    form.login-form .form-group { margin-bottom: 5px }
        form.login-form .form-group input:last-child { margin-bottom: 0 }
    form.login-form .btn { margin-top: 35px }

/** Tooltip */
.tooltip.in { opacity: 1 }
.tooltip.right .tooltip-arrow { display: none; }
.tooltip.right .tooltip-inner { background: #e8f4e8; font-size: 22px; color: #47aa42; padding: 10px 20px; max-width: none; min-width: 300px; }
    .tooltip-group { position: relative; }
    .tooltip-group span { background-color: #e8f4e8; color: #47aa42; font-size: 22px; width: 30px; height: 30px; padding: 0 12px; position: absolute; top: 10px; right: -45px; cursor: pointer }

/** Select */
.styled-select select { background: transparent; -webkit-appearance: none; -moz-appearance: none; text-overflow: '' }
.styled-select { background: url("images/select.png") no-repeat right #fff }
select::-ms-expand { display: none }

/** Checkbox */
.checkbox input[type="checkbox"] { display: none }
.checkbox input[type="checkbox"] + label { background: url("images/checkbox.png") no-repeat; height: 25px; padding-left: 37px }
.checkbox input[type="checkbox"]:checked + label { background-position: left bottom; height: 25px; padding-left: 37px }

/** Affix */
.affix { top: 17px }
    .affix-bottom { position: absolute }

/** Carousel */
.carousel { height: 464px }
    .bxslider .item { height: 370px }

/** Padding reset */
.col-padding-0 [class|="col"], .padding-no { padding: 0 !important }

/** Color */
.color-white { color: #fff }
.color-blue { color: #1d96af }
.color-green, #references .author span { color: #47aa42 }
.color-red { color: #d04e51 }
.color-gray { color: #585a59 }

/** Background */
.bg-light-green { background: #e8f4e8 }
.bg-light-blue { background: #d3ebef }

/** Text */
.font-lato, h1, .navbar, #numbers .items .item .content .number, #references, #social .header { font-family: "Lato", sans-serif }
.text-light { font-weight: 300 }
.text-bold { font-weight: 700 }
.small { line-height: 21px }
.large { font-size: 20px }
.uppercase, h1, .header, .navbar, #footer .navi, .price, #content .content-header, #top-container .content .info { text-transform: uppercase }

/** Info boxes */
#content .box { min-height: 251px; padding: 54px 42px }
    #content .box .header { font-size: 40px; font-weight: 700; color: #242d3f; padding-bottom: 19px }
    #content .box .text { line-height: 20px; margin-top: 10px }

/** Lines */
#content .line { position: relative; margin-bottom: 9px; padding-bottom: 14px }
    #content .line-green:after, #content .line-blue:after { content: ""; width: 80px; height: 2px; margin: auto; position: absolute; left: 0; bottom: 0 }
    #content .line-green:after { background: #47aa42 }
    #content .line-blue:after { background: #1d97af }
    #content .box .line-green:after, #content .box .line-blue:after { width: 100px }
    #content #pricing .pricing .line-green:after, #content #pricing .pricing .line-blue:after { right: 0 }
            
/** Downloads */
#content .downloads { margin-top: 43px }
    #content .downloads li { background: 0; padding: 0; display: inline-block; }
        #content .downloads li + li:before { content: "|"; margin: 0 12px 0 16px }

/** Sidebar */
#content .sidebar-nav { margin-top: 56px }
    #content .sidebar-nav li { background: none; padding: 0; margin-bottom: 8px }
        #content .sidebar-nav li a { font-size: 20px; color: #575c58 }
            #content .sidebar-nav li.active a { font-weight: 700 }

/** Video */
    #video video { width: 60%; margin-top: 2% }

/* =Login
----------------------------------------------- */
body.login #header { background-image: url('images/header.jpg'); height: 100% }
body.login .login-box { background: rgba(71, 170, 66, .67); max-width: 600px; margin: auto }
body.login .login-box { font-size: 20px; line-height: 24px; padding: 60px 15px 65px 15px }
    body.login .login-box a { font-size: 16px; color: #fff; display: block }
body.login .navbar-right { padding-right: 0; float: right }

/* =Home
----------------------------------------------- */
body.home #header { background-image: url('images/header.jpg'); height: 940px; padding-top: 189px; padding-bottom: 0 }
    body.home #header .btn { margin-top: 30px }
        body.home h1 { color: #373e4c; letter-spacing: 5px }
        body.home .header, #social .header { font-weight: 700 }
    #header .items { width: 100%; max-width: 1065px; margin: auto; position: absolute; bottom: 0; left: 0; right: 0 }
        #header .items .screen-lg { background: url('images/screen-lg.png') no-repeat center bottom; max-width: 963px; padding-bottom: 48.2%; margin: auto; position: absolute; left: 0; right: 102px; bottom: 0; background-size: 100% auto }
            #header .items .screen-lg .play-btn { background: #b24b4f; width: 92px; height: 92px; margin: auto; position: absolute; left: 50px; right: 0; top: 85px; bottom: 0; border-radius: 50%; background-size: inherit }
                #header .items .screen-lg .play-btn img { margin: auto; position: absolute; left: 10px; right: 0; top: 0; bottom: 0 }
        #header .items .screen-lg .play-btn:hover { background: #f88686 }
        #header .items .screen-xs { background: url('images/screen-xs.png') no-repeat right 0; width: 207px; padding-bottom: 40.3%; position: absolute; right: 0; bottom: -82px; z-index: 1; background-size: contain }

#offer { background: #373e4c; padding-top: 121px; padding-bottom: 88px }
    #offer .items { color: #fff; margin-top: 77px; margin-bottom: 56px; overflow: hidden }
    #offer .items [class|="col"] { padding: 0 }
        #offer .items .item { height: 360px; font-size: 20px }
            #offer .items .item:hover .content { top: 25px }
            #offer .items .item .content .text-hover { line-height: 20px; margin-top: 2px; display: none !important; font-size: 16px }
                #offer .items .item:hover .content .text-hover { display: block !important }
            #offer .items .item .content { width: 100%; padding: 0 22px; position: absolute; top: 100px }
                #offer .items .item .content .text { width: 100%; font-weight: 700; line-height: 24px; margin-top: 31px; display: table }
                    #offer .items .item .content .text .v-align { height: 80px; display: table-cell; vertical-align: middle }
        #offer .items img { margin: auto }
        #offer .items .box-white { background: #e2e3e5 }
            #offer .items .box-white:hover { background: #fff }
        #offer .items .box-blue { background: #19a3bd }
            #offer .items .box-blue:hover { background: #12bbd8 }
        #offer .items .box-green { background: #438a44 }
            #offer .items .box-green:hover { background: #48aa43 }
        #offer .items .box-red { background: #b24b4f }
            #offer .items .box-red:hover { background: #d04d52 }
    
#numbers { background: #1d96af; color: #fff; padding-top: 92px; padding-bottom: 89px; }
    #numbers .items { width: 1390px; margin: auto; overflow: hidden }
        #numbers .items .item .content { width: 357px; height: 357px; margin: auto; border: 2px solid #fff; border-radius: 50%; position: relative; overflow: hidden }
            #numbers .items .item .content .text-top, #numbers .items .item .content .number, #numbers .items .item .content .text-bottom { width: 100%; padding: 0 40px; margin: auto; position: absolute }
            #numbers .items .item .content .text-top { top: 82px }
            #numbers .items .item .content .number { font-size: 80px; font-weight: 300; top: 159px; padding: 0 !important }
            #numbers .items .item .content .text-bottom { top: 229px }
            #numbers .items .item .content .text-top, #numbers .items .item .content .text-bottom { font-size: 20px; font-weight: 700; line-height: 24px }

#mobile { background: url('images/bg-mobile.jpg') no-repeat center top fixed; background-size: cover }
    #mobile .header { margin-top: 393px }
    #mobile .stores { line-height: 0; margin-top: 176px; margin-bottom: 185px }
        #mobile .stores a { display: inline-block }
        #mobile  .stores a:first-child { margin-right: 5px }

#references { font-style: italic }
    #references .text, #references .author { width: 100%; position: absolute }
    #references .text { font-size: 40px; line-height: 48px; padding: 0 150px; bottom: 141px }
    #references .author { font-size: 20px; font-weight: 700; bottom: 60px }

#customers { background: #f5f5f3; padding-top: 97px; padding-bottom: 46px }
    #customers .items { max-width: 1150px; margin: 102px auto 0; }
        #customers .items [class|="col"] { padding-bottom: 30px }
        #customers .items img { background: #fff; margin: auto }

#social { background: url('images/bg-social.jpg') no-repeat center top fixed; background-size: cover; padding-top: 280px; padding-bottom: 210px }
    #social img { margin: auto; margin-bottom: 44px }
    #social .btn { margin-top: 72px }

#top-container { background: url('images/bg-tcc.jpg') no-repeat center top; height: 850px; padding-top: 371px; position: relative; overflow: hidden }
    #top-container .items .tcc { background: url('images/tcc.png') no-repeat right 0; background-size: contain; width: 422px; height: 649px; right: 74px; top: -237px; float: right; position: relative }
    #top-container .items .pen { background: url('images/pen.png') no-repeat; background-size: contain; width: 35px; height: 352px; position: absolute; left: -45px; bottom: 1px }
        #top-container .content .text { font-size: 20px; line-height: 26px; margin: 20px 0 30px }
        #top-container .content .info { font-size: 20px; line-height: 26px }
        #top-container .content form.contact .form-group { margin-top: 24px }
        #top-container .content form.contact .checkbox { margin-top: 16px; margin-bottom: 15px }
        #top-container .content .tcc-img { display: none }

#footer { background: #49aa43; font-size: 12px;  padding-top: 64px; padding-bottom: 26px; position: relative; overflow: hidden }
    #footer, #footer a { color: #fff }
    #footer .container { max-width: 1160px }
    #footer .logo-ec { margin-top: 18px }
    #footer hr { margin-top: 44px; margin-bottom: 3px }
    #footer .navi a { margin-right: 12px }
        #footer .navi a:last-child { margin: 0 }

    #footer .logo-rc { margin-right: 41px }

#widgets { font-size: 22px; line-height: 50px; color: #fff; position: fixed; top: 37%; right: -120px; z-index: 1; cursor: pointer }
    #widgets #fb, #widgets #in, #widgets #gp { background-repeat: no-repeat !important; background-size: contain !important; width: 170px; height: 50px; padding-left: 80px; margin-bottom: 1px; position: relative; right: 0 }
        #widgets #fb:hover, #widgets #in:hover, #widgets #gp:hover { right: 120px }
    #widgets #fb { background: rgba(59, 88, 151, 0.9) url('images/ico-fb.png') }
    #widgets #in { background: rgba(81, 127, 164, 0.9) url('images/ico-in.png') }
    #widgets #gp { background: rgba(222, 78, 59, 0.9) url('images/ico-gp.png') }

/* =Page
----------------------------------------------- */
#header { background: url('images/header-min.jpg') no-repeat center top; height: 320px; padding-top: 199px; padding-bottom: 44px; position: relative }

#content { background: #fff; padding: 32px 0 }
#content .content-header { font-size: 20px; font-weight: 700; line-height: 30px; margin-top: 67px; margin-bottom: 0 }
    #content ul { list-style: none; text-align: left; padding: 0; margin: 20px 0 0 }
        #content ul li { background: url('images/list-style-green.png') no-repeat left 10px; padding: 0 24px 30px 24px }
            #content ul li:last-child { padding-bottom: 0 }
    #content .btn { border-width: 2px }
    #content .header { color: #373e4c }
        #content .header.header-large { font-size: 30px; line-height: 34px; margin: 62px 0 74px }

#pricing { padding-top: 21px; padding-bottom: 153px }
    #pricing .pricing { background: #f5f5f5; text-align: center; height: 563px; padding: 23px 28px 28px 28px }
        #pricing .pricing .header { font-size: 20px; font-weight: 700; line-height: 24px; padding-bottom: 20px; margin-bottom: 37px }
        #pricing .pricing .price { font-size: 40px; margin-bottom: 28px }
     #pricing .pricing.green { border-top: 13px solid #428943 }
     #pricing .pricing.blue { border-top: 13px solid #1d97af }
         #pricing .pricing .list { text-align: left; margin-top: 45px }
             #pricing .pricing .list li { background: url('images/list-style.png') no-repeat 2px 18px; line-height: 20px; padding: 10px 24px 8px 24px; border-bottom: 1px solid #dbdbdb }
             #pricing .pricing .list li:last-child { border: 0 }
     #pricing .pricing .btn { max-width: 180px; min-width: 180px; margin: auto; position: absolute; left: 0; right: 0; bottom: 28px }

#registration { padding-bottom: 85px }
    #registration .box { margin-top: 7px }
    #registration .downloads { margin-top: 12px }
    #registration form.registration .btn { margin-top: 21px }

#contact form.contact { margin-top: 27px }
    #contact form.contact .btn { margin-top: 17px }
#contact .contact-info { line-height: 25px; margin-top: 26px }
#contact .contact-with { margin-top: 150px; margin-bottom: 48px }
    #contact .contact-info .contact-with img { border: 2px solid #d7d7d7; border-radius: 50% }
    #contact .contact-info .contact-with .name { font-size: 20px; font-weight: 300; margin-bottom: 0; margin-top: 26px }
#contact-map { background: #fff; height: 593px }

#help .help-content { color: #575c58; padding-bottom: 100px; margin-top: -12px }
    #help .help-content img { margin-top: 55px; margin-bottom: 30px }

#about .section-1 { background: #7dc37a; color: #fff }
    #about .section-1 .section-img { background: url('images/bg-about-1.jpg') no-repeat }
    #about .section-2 .section-img { background: url('images/bg-about-2.jpg') no-repeat }
    #about .section-3 .section-img { background: url('images/bg-about-3.jpg') no-repeat }
    #about .section-4 .section-img { background: url('images/bg-about-4.jpg') no-repeat }
#about .content, #about .section-img { height: 427px }
#about .content .content-inner .text { max-height: 360px; overflow: hidden }
#about .content.left { padding-right: 76px; float: right }
#about .content.right { padding-left: 76px }

#certificate .section-1 { background: #646466; color: #fff }
    #certificate .section-1 .section-img { background: url('images/certyfikat-top-container.jpg') no-repeat }
    #certificate .section-2 .section-img { background: url('images/spedycja.jpg') no-repeat }
    #certificate .section-3 .section-img { background: url('images/przewoznik.jpg') no-repeat }
#certificate .content, #certificate .section-img { height: 655px }
#certificate .content .content-inner .text { max-height: 480px; overflow: hidden }
#certificate .content.left { padding-right: 126px; float: right }
#certificate .content.right { padding-left: 126px }
#certificate .content .content-inner .text .title { font-weight: 700; text-transform: uppercase }

#about, #certificate { color: #575c58 }
#about .section-img.left, #certificate .section-img.left { background-position: right 0 }
#about .section-img, #certificate .section-img { background-size: cover !important }
#about .content, #certificate .content { width: 566px; font-size: 20px; display: table }
    #about .content .content-inner, #certificate .content .content-inner { display: table-cell; vertical-align: middle }

/* =Animations
----------------------------------------------- */
/** Transition */
#offer .items .item, #offer .items .item .content, #widgets div, #header .items .screen-lg .play-btn { transition: all 0.3s }
a { transition: color 0.3s }
.btn { transition: color 0.3s, background 0.3s, border-color 0.3s }

/** Required */
.hidden { opacity: 0; display: block !important }
.visible { opacity: 1 }
.animated { -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: .1s; animation-delay: .1s }

/** Fade in */
@-webkit-keyframes fadeIn {
  from { opacity: 0 }
  100% { opacity: 1 }
}
@keyframes fadeIn {
  from { opacity: 0 }
  100% { opacity: 1 }
}
.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn }

/** Fade in left */
@-webkit-keyframes fadeInLeft {
  from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) }
  100% { opacity: 1; -webkit-transform: none; transform: none }
}
@keyframes fadeInLeft {
  from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) }
  100% { opacity: 1; -webkit-transform: none; transform: none }
}
.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft }

/** Fade in right */
@-webkit-keyframes fadeInRight {
  from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) }
  100% { opacity: 1; -webkit-transform: none; transform: none }
}
@keyframes fadeInRight {
  from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) }
  100% { opacity: 1; -webkit-transform: none; transform: none }
}
.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight }

/** Fade in up */
@-webkit-keyframes fadeInUp {
  from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) }
  100% { opacity: 1; -webkit-transform: none; transform: none }
}
@keyframes fadeInUp {
  from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) }
  100% { opacity: 1; -webkit-transform: none; transform: none }
}
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp }

/** Zoom in */
@-webkit-keyframes zoomIn {
  from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) }
  50% { opacity: 1 }
}
@keyframes zoomIn {
  from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) }
  50% { opacity: 1 }
}
.zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn }

/* =Animation settings
----------------------------------------------- */
#header .button { -webkit-animation-delay: .8s; animation-delay: .8s }
#header .items .screen-lg { -webkit-animation-delay: 1.5s; animation-delay: 1.5s }
#header .items .screen-xs { -webkit-animation-delay: 1.8s; animation-delay: 1.8s }
#header .items .screen-lg .play-btn { -webkit-animation-delay: 2.6s; animation-delay: 2.6s }

#offer .items .item { -webkit-animation-duration: 1s; animation-duration: 1s }
#offer .items .item.item-2, #customers .items .item-2 { -webkit-animation-delay: .3s; animation-delay: .3s; }
#offer .items .item.item-3, #customers .items .item-3 { -webkit-animation-delay: .5s; animation-delay: .5s; }
#offer .items .item.item-4, #customers .items .item-4 { -webkit-animation-delay: .7s; animation-delay: .7s; }
    #offer .items .item .content .text-hover { -webkit-animation-delay: 0s; animation-delay: 0s }

#top-container .pen { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; }
#top-container .content { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; }

#footer hr { -webkit-animation-delay: .3s; animation-delay: .3s }
#footer .navi, #footer .contact { -webkit-animation-delay: 1s; animation-delay: 1s }

/* =Media queries
----------------------------------------------- */
@media (max-width: 1499px) {
    .navbar-right { padding-right: 0 }
    .nav > li > a, .nav > li > a.sign-in-btn { margin-left: 14px }
    body.home #header { height: 836px }
    body.home .header, #social .header { font-size: 35px; line-height: 43px }
    h1 { font-size: 34px }
    #header { background-size: cover }
        #header .items { max-width: 900px }
            #header .items .screen-lg { right: 87px }
                #header .items .screen-lg .play-btn { width: 80px; height: 80px; top: 55px }
                    #header .items .screen-lg .play-btn:hover { background-position: center -80px }
                    #header .items .screen-lg .play-btn img { width: 28px }
            #header .items .screen-xs { bottom: -69px }
    #offer { padding-top: 110px }
    #numbers { padding: 85px 0 }
        #numbers .items { width: auto }
        #numbers .items .item .content { width: 300px; height: 300px }
            #numbers .items .item .content .number { font-size: 63px; top: 130px }
            #numbers .items .item .content .text-top, #numbers .items .item .content .text-bottom { font-size: 18px; line-height: 21px }
            #numbers .items .item .content .text-top { top: 71px }
            #numbers .items .item .content .text-bottom { top: 200px }
    #mobile .header { margin-top: 300px }
    #references .text { font-size: 34px; line-height: 42px; padding: 0 }
    #social { padding: 200px 0 }
    #top-container .items .tcc { width: 390px; height: 600px; left: 0 }
    #top-container .items .pen { width: 35px; height: 326px }
    #customers { padding-top: 50px }
        #customers .items { margin-top: 50px }
    .btn { font-size: 20px; padding-top: 12px; padding-bottom: 12px; min-width: 250px }
    #about .content, #about .section-img { height: 350px }
    #about .content, #certificate .content { font-size: 18px; line-height: 28px }
    #about .content .content-inner .text { max-height: 285px }
    #certificate .content, #certificate .section-img { height: 505px }
    #certificate .content .content-inner .text { max-height: 395px }
    #content ul li { padding-bottom: 20px; background-position: left 8px }
}

@media (max-width: 1199px) {
    #numbers .items { width: auto }
        #numbers .items .item .content { width: 233px; height: 233px }
            #numbers .items .item .content .number { font-size: 52px; top: 99px }
            #numbers .items .item .content .text-top, #numbers .items .item .content .text-bottom { font-size: 15px; line-height: 18px }
            #numbers .items .item .content .text-top { top: 53px }
            #numbers .items .item .content .text-bottom { top: 153px }
            #numbers .items .item .content .text-top, #numbers .items .item .content .number, #numbers .items .item .content .text-bottom { padding: 0 20px }
    form.contact { max-width: 100% }
    form.registration { max-width: 80% }
    #pricing .pricing { margin-bottom: 30px }
        #pricing .pricing .btn { bottom: 58px }
        #pricing .pricing .price { margin-bottom: 14px }
    #about .content, #about .section-img { height: 290px }
    #about .content .content-inner .text { max-height: 235px }
    #about .content, #certificate .content { width: 100%; font-size: 16px; line-height: 26px }
    #about .content.left, #certificate .content.left { float: none }
    #about .content.left, #about .content.right, #certificate .content.left, #certificate .content.right { padding: 0 50px }
    #certificate .content, #certificate .section-img { height: 400px }
    #certificate .content .content-inner .text { max-height: 310px }
    #certificate .content .content-inner .text { max-height: 282px }
    #content ul li { padding-bottom: 4px }
}

@media (max-width: 991px) {
    body.login .navbar-nav { margin-top: 11px }
    body.login .navbar-nav .open .dropdown-menu { position: absolute }
    .navbar { padding-top: 10px }
    .navbar-brand { padding: 0; float: none }
    .navbar-brand img { width: 287px; margin: 7px 0; display: inline }
    .navbar-nav { margin-top: 25px; margin-bottom: 14px }
    .navbar-nav > li > a { padding-top: 7px; padding-bottom: 7px; margin-top: 0 }
    .nav > li > a, .nav > li > a.sign-in-btn { margin-right: 14px }
    .navbar-collapse { background: #fff; margin-top: 14px }
    .nav > li > a.sign-in-btn { margin-top: 7px; margin-bottom: 7px }
    .lang { margin-left: 0; margin-right: 14px }
        .lang ul li { padding: 0 14px }
            .lang ul li a { padding-left: 50px !important }
                .lang ul li a img { left: 0 }
    body.home #header { height: auto; padding-top: 80px }
        body.home #header h1 { margin-top: 60px }
        body.home .header, #content .header.header-large, #social .header { font-size: 26px; line-height: 34px }
    #header { height: auto; padding-top: 130px }
        #header .items, #header .items .screen-lg { position: relative; }
        #header .screen-xs { display: none !important }
        #header .items .screen-lg { background-position: center top; padding-bottom: 53.1% }
            #header .items .screen-lg .play-btn { left: 0 }
        #header .items { max-width: 680px; margin-top: 51px }
            #header .items .screen-lg { right: 67px }
                #header .items .screen-lg .play-btn { top: 30px }
            #header .items .screen-xs { bottom: -52px }
    #offer { padding-top: 85px }
        #offer .items .item { margin: 0 1.5px 3px 1.5px; padding-top: 50px; }
            #offer .items .item .content { position: static; }
                #offer .items .item .content .text-hover { display: block !important }
    #numbers { padding: 60px 0 }
    #mobile { padding: 150px 0 }
        #mobile .header { margin-top: 0 }
        #mobile .stores { margin-top: 70px; margin-bottom: 0 }
    #references .text { font-size: 26px; line-height: 34px }
    #references .author { font-size: 18px }
    #social { padding: 100px 0 }
    #mobile, #social { background-attachment: scroll; background-position: center top !important; background-size: auto 100% }
    .tooltip { left: 0!important; top: -1px!important; }
        .tooltip-inner { max-width: 80%!important; min-width: 75%!important; }
    #top-container { height: auto; padding-top: 83px; padding-bottom: 83px }
        #top-container .items { display: none }
        #top-container .content { text-align: center }
            #top-container .content .text { font-size: 18px; margin-bottom: 0 }
            #top-container .content .tcc-img { margin: 30px auto 38px; display: block; max-height: 290px }
    #footer { padding-top: 44px }
        #footer .logo-ec { width: 287px }
        #footer .logo-tcc { width: 70px }
    #widgets { font-size: 14px; line-height: 35px; right: -84px }
        #widgets #fb, #widgets #in, #widgets #gp { width: 119px; height: 35px; padding-left: 50px }
            #widgets #fb:hover, #widgets #in:hover, #widgets #gp:hover { right: 84px }
    #content .downloads { text-align: center; margin-top: 0 }
    #content .box { margin-bottom: 30px; min-height: auto }
        #content .box .header { text-align: center }
    #content .line-green::after, #content .line-blue::after { right: 0 }
    #registration .box { margin-top: 45px }
    #pricing .pricing .price, #content .box .header { font-size: 38px }
    #pricing, #registration { padding-bottom: 30px }
    #contact .contact-info { text-align: center; margin-top: 60px }
    #contact .contact-with { margin-top: 0 }
        #contact .contact-info .contact-with img { margin: auto }
        #contact .contact-info .contact-with .person { margin-top: 60px }
    #about .content, #about .section-img { height: 230px }
    #about .content .content-inner .text { max-height: 182px }
    #about .content.left, #about .content.right { padding: 0 28px }
    #about .content, #certificate .content { font-size: 14px; line-height: 20px }
    #certificate .content, #certificate .section-img { height: 330px }
    #certificate .content .content-inner .text { max-height: 282px }
    #content ul li { background-position: left 5px }
    #content .sidebar-nav { margin-top: 55px }
        #content .sidebar-nav li { margin-bottom: 0 }
            #content .sidebar-nav li a { font-size: 16px }
    h1 { font-size: 30px }
    h1, .header { letter-spacing: 2px !important }
    .btn { font-size: 18px; padding-top: 10px; padding-bottom: 10px; min-width: 200px }
    .sign-in-btn { width: auto }
    
    /** Disable animations */
   .fadeIn, .fadeInLeft, .fadeInRight, .fadeInUp, .zoomIn { -webkit-animation: none; animation: none }
   .hidden { opacity: 1 }
}

@media (max-width: 767px) {
    body { line-height: 28px }
    body.login .navbar-nav { margin-top: 4px }
    .navbar-brand img { margin: 0; width: 280px }
    .navbar-toggle { margin-top: 0; margin-bottom: 0 }
    body.home .header, #content .header.header-large, #social .header { font-size: 22px; line-height: 30px }
    #customers .items { max-width: 577px }
        #header .items .screen-lg .play-btn { width: 60px; height: 60px }
            #header .items .screen-lg .play-btn:hover { background-position: center -60px }
            #header .items .screen-lg .play-btn img { width: 21px; left: 8px }
    #offer { padding: 60px 0 }
    #offer .items { margin-top: 54px }
        #offer .items .item { height: auto; padding: 35px; margin: 0; margin-bottom: 3px }
            #offer .items .item .content { position: static }
                #offer .items .item .content img { position: absolute; top: 0; bottom: 0 }
                #offer .items .item .content .text { padding-left: 190px; margin-top: 0 }
                    #offer .items .item .content .text .v-align { height: auto; display: block }
                #offer .items .item .content .text-hover { padding-left: 190px; margin-top: 20px; display: block }
    #numbers { padding: 40px 0 20px 0 }
        #numbers .items .item { margin-bottom: 20px }
            #numbers .items .item .content { width: 218px; height: 218px }
                #numbers .items .item .content .text-top, #numbers .items .item .content .text-bottom { font-size: 14px; line-height: 18px }
                #numbers .items .item .content .number { font-size: 44px; top: 89px}           
                #numbers .items .item .content .text-top { top: 46px }
                #numbers .items .item .content .text-bottom { top: 138px }
    #mobile { padding: 100px 0 }
    #references .text { font-size: 20px; line-height: 28px }
    #references .carousel-indicators li, .carousel-indicators .active { width: 10px; height: 10px }
    #top-container .content .text { font-size: 17px }
    #pricing .pricing .price, #content .box .header { font-size: 34px }
    #content .box { padding: 42px 30px }
    #content .sidebar-nav { margin-top: 0 }
    #footer { padding-top: 32px }
        #footer hr { margin-top: 32px }
    #about .section-img, #certificate .section-img { display: none }
    #about .section-3, #certificate .section-2 { background: #f5f5f3 }
    #about .content, #certificate .content { height: auto; padding: 30px 15px !important; text-align: center }
    #about .content .content-inner .text, #certificate .content .content-inner .text { max-height: none; overflow: visible }
    #content .downloads li { display: block }
        #content .downloads li + li::before { display: none }
    h1 { font-size: 26px }
    .btn { border-width: 2px }
    .affix { position: static }
}

@media (max-width: 639px) {
    body.login .navbar-nav { margin-top: 1px }
    body.login .navbar-brand { padding-left: 0 }
    body.login .navbar-brand img { margin-left: 0 }
    body.login .lang { margin-right: 0 }
    body.login .lang ul { left: auto !important; right: 5px !important }
    h1 { font-size: 22px }
    body.home #header h1 { margin-top: 30px }
    body.home .header, #content .header.header-large, #social .header { font-size: 20px; line-height: 26px }
    #header { padding-top: 100px }
    #offer { padding: 40px 0 }
        #offer .items { margin: 39px 0 }
            #offer .items .item { padding-left: 0; padding-right: 0 }
            #offer .items .item .content img { position: static; max-width: 90px }
            #offer .items .item .content .text { font-size: 20px; padding-left: 0; margin-top: 20px }
            #offer .items .item .content .text-hover { font-size: 16px; padding-left: 0 }
    #mobile, #social { padding: 80px 0 }
        #mobile .stores { margin-top: 50px }
    #customers { padding: 30px 0 10px }
        #customers .items { margin-top: 29px }
    #social .btn { margin-top: 50px }
    #top-container .content .text { font-size: 16px }
    #footer { padding-bottom: 8px }
    #footer .navi, #footer .contact { float: none !important; text-align: center }
    #footer .navi { margin-bottom: -2px }
    #footer .contact { line-height: 23px }
    #footer  .logo-left, #footer .logo-right { float: none !important; clear: both }
    #footer .logo-ec, #footer .logo-tcc, #footer .logo-rc { float: none !important; margin: auto }
    #footer img { margin-bottom: 20px !important }
    #footer hr { margin-top: 12px }
    #pricing .row > [class|="col"] { width: 100% !important }
        #pricing .pricing { height: auto }
            #pricing .pricing .items { width: 100% }
                #pricing .pricing .items .btn { margin: auto; position: static }
            #pricing .pricing .list { margin-top: 20px; margin-bottom: 30px }
    #pricing .pricing .price, #content .box .header { font-size: 28px }
}

@media (max-width: 479px) {
    body.login .navbar-nav li a { font-size: 14px }
    .navbar-brand img { width: 180px; margin-top: 4px }
        .navbar-toggle .icon-bar { height: 3px; width: 27px }
    body.home .header, #social .header { font-size: 20px; line-height: 26px }
    #header .items .screen-lg .play-btn { width: 46px; height: 46px }
        #header .items .screen-lg .play-btn:hover { background-position: center -46px }
        #header .items .screen-lg .play-btn img { width: 16px; left: 6px }
    #offer .items .item .content .text { font-size: 18px; line-height: 25px }
    #offer .items .item .content .text-hover { font-size: 14px }
    #mobile, #social { padding: 50px 0 }
        #mobile .stores { margin-top: 40px }
    #references .text { font-size: 17px; line-height: 25px }
    #references .author { font-size: 15px }
    #references .carousel-indicators li, .carousel-indicators .active { width: 8px; height: 8px; margin: 0 5px }
    #social .btn { margin-top: 30px }
    #social img { margin-bottom: 30px }
    #footer .logo-ec { width: 180px }
    #footer .logo-tcc { width: 60px }
    #footer .logo-rc { width: 120px }
    #pricing .pricing .price, #content .box .header { font-size: 24px }
    #content .box { padding: 22px }
    #top-container { background-size: auto 100% }
        #content .box .text { font-size: 14px }
        #content .box .header { padding-bottom: 14px }
    h1 { font-size: 22px }
    .btn { white-space: normal }
}

@media (max-width: 379px) {
    #mobile .stores a { margin-bottom: 5px }
    #mobile  .stores a:first-child { margin-right: 0 }
}

@media (max-width: 1199px) and (min-width: 768px) {
    #pricing .pricing { height: auto }
    #pricing .pricing.green { border-top: 0; border-left: 13px solid #428943 }
    #pricing .pricing.blue { border-top: 0; border-left: 13px solid #1d97af }
    #pricing .pricing .items { width: 100%; display: table; position: relative }
        #pricing .pricing .items .item { width: 33%; margin: auto; display: table-cell; vertical-align: middle }
        #pricing .pricing .items .btn { min-width: 180px; height: 59px; margin: auto; position: absolute; left: auto; right: 28px; top: 0; bottom: 0 }
}

@media (max-width: 991px) and (min-width: 768px) {
    #pricing .pricing .items .btn { height: 52px; right: 0 }
    .affix { top: 22px }
    #content .sidebar-nav { width: 180px }
}

@media (max-width: 479px), (max-width: 639px) and (orientation: landscape)  {
    .navbar { min-height: 45px }
        .navbar-nav { margin-top: 14px; margin-bottom: 0 }
            .navbar-nav > li > a { font-size: 14px }
}

@media (min-width: 992px) and (max-width: 1499px) {
    #offer .items .item .content .text-hover { font-size: 14px }
        #offer .items .item .content .text { margin-top: 10px; font-size: 18px }
}

@media (min-width: 1200px) and (max-width: 1499px) {
    body.home h1 { font-size: 40px }
    #offer .items .item { height: 285px }
    #offer .items img { max-width: 110px }
    #offer .items .item .content { top: 70px }
        #offer .items .item:hover .content { top: 30px }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #offer .items .item { height: 235px }
    #offer .items img { max-width: 80px }
    #offer .items .item .content { top: 65px }
        #offer .items .item:hover .content { top: 15px }
        #offer .items .item .content .text { margin-top: 0 }
            #offer .items .item .content .text .v-align { height: 60px }
}

@media (min-width: 992px) {
    #contact form.contact .btn, #registration form.registration .btn { min-width: 180px; padding-top: 15px; padding-bottom: 20px }
}

@media (min-width: 1200px) {
    #contact form.contact { margin-left: 112px }
    #contact .contact-info { margin-left: -17px }
    #help .help-content { font-size: 20px }
}

@media (min-width: 1500px) {
    body.home .container, .navbar .container, #numbers .container, #social .container { width: 1470px }
    body.home .header, #social .header { font-size: 40px; line-height: 48px; letter-spacing: 4px }
    .navbar-header { margin-left: 78px !important }
    #header .container { width: 1470px }
    #offer .header { font-size: 35px }
    #social .header { line-height: 63px }
    #top-container .content .header { line-height: 50px }
    #pricing .pricing .btn { height: 70px }
    #registration { margin-left: 22px }
    body.home h1 { font-size: 50px }
}

@media (min-width: 640px) {
    body.login .navbar .container { max-width: 417px !important; padding-left: 30px }
}

@media (max-width: 1499px) and (max-height: 767px) {
    #contact-map { height: 480px }
}

@media (max-width: 1199px) and (max-height: 640px) {
    #contact-map { height: 380px }
}

@media (max-width: 991px) and (max-height: 570px) {
    #contact-map { height: 320px }
}

@media (max-width: 767px) and (max-height: 500px) {
    #contact-map { height: 200px }
}