﻿/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*================================================ */
/* General
================================================== */

body { color: #464646; width: 100%; font-family: 'Armata', sans-serif; padding: 0; margin: 0; }

.clear { clear: both; display: block; }
.navbar-inverse { background-color: #333333; height: 66px;}
.navbar-brand { height: 66px; padding: 10px 45px 10px 15px; }
.navbar-right { margin: 8px; }
.btn-pink { color: #fff !important; background-color: #70ac00; border: 0 none; border-bottom: 4px solid #5a8c00; }
.btn-orange { color: #fff !important; background-color: #EA6E24; border: 0 none; border-bottom: 4px solid #D65E27;width: 300px;margin: 60px 0 20px 60px; height: 52px;   font-size: 22px;}
 .navbar-nav > li:last-child > a:hover, .navbar-nav > li:last-child > a:focus { color: #fff; background-color:  #70ac00; }
.btn:hover, .btn:focus, .btn.focus {
    outline: none;
}
@media only screen and (max-width: 768px) {
    #navbar {background: rgba(0,0,0,0.8)}
    .navbar-brand { height: 66px; padding: 10px 0 10px 15px; }
    .navbar-toggle { margin-top: 16px; }
    .quoteWraper, #vectorsWraper { display: none !important;}
    .upText { margin-top: 250px !important;}
    .upText p {  font-size: 26px !important;}
    .upText p {  font-size: 22px !important;}
    .btn-orange {margin: 18px 0 20px 0 !important; width: 100% !important;}
    .bottomImage { display: none !important;}
    .videoLink { width: 100%;margin: 20px 0 0 40px !important; height: 60px !important;}
    .footerRight { margin: 0 0 0 6px !important;}
    .content1 { overflow: hidden;}
    .footerWraper { height: auto !important;margin-bottom: 20px !important;}
    .footerLeft { width: 98% !important; margin-left: 6px !important;}
    .footerLeft h1 { font-size: 22px !important;padding: 27px 0 2px 0 !important;}
    .footerLeft p { font-size: 12px !important;line-height: 16px !important;padding: 0 0 26px 0 !important;}
    .footerLeft li { width: 47% !important;}
    .footer ul { float: none !important;}

}

/**/
.phonesImage { height: 532px; left: 33px; width: 520px; }
    .phonesImage img { width: 520px; height: 532px; }
.responsivePhonesImage { display: none; }

.quoteWraper {
    color: #225374;
    font-size: 14px;
    font-style: italic;
    line-height: 19px;
    margin: 0 auto;
    padding: 16px 56px 19px 63px;
    position: relative;
    top: 30px;
    letter-spacing: -0.7pt;
    margin-bottom: 40px;
}

.quotes.left {
    background-image: url("../img/left-quote.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    height: 33px;
    left: 0;
    position: absolute;
    top: 0;
    width: 42px;
}

.quotes.right {
    background-image: url("../img/right-quote.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    bottom: 0;
    height: 33px;
    position: absolute;
    right: -7px;
    width: 42px;
}
.videoLink { margin: 23px 0 0 119px; width: 312px; height: 110px;} 
.videoLink a { color: #225374; background-image: url("../img/video.png"); background-position: 0 0; background-repeat: no-repeat; color: #6b887a; font-size: 16px; height: 30px; line-height: 21px; padding: 9px 0 0 30px; width: 312px; letter-spacing: -1.0pt; }
.bottomImage {  width: 450px; margin: 0 auto; }

@media only screen and (max-width: 768px) {
    .phonesImage {
        display: none;
    }

    .responsivePhonesImage {
        display: block;
        height: 1px;
        width: 1px;
        transform: scale(0.55, 0.55);
        -ms-transform: scale(0.55, 0.55);
        -webkit-transform: scale(0.55, 0.55);
    }
}

.upText {
    width: 370px;
}

    .upText h1 {
        color: #37607b;
        font-size: 30px;
        font-weight: bold;
        letter-spacing: -1.3pt;
        line-height: 32px;
        padding: 33px 0 0 7px;
    }

    .upText p {
        color: #3c5e77;
        font-size: 28px;
        letter-spacing: -1.4pt;
        line-height: 32px;
        padding: 0 0 0 6px;
    }

.arrow {
    padding: 28px 0 0 8px;
    overflow: hidden;
}

    .arrow ul li {
        background-repeat: no-repeat;
        color: #366280;
        font-size: 15px;
        line-height: 15px;
        padding: 4px 0 16px 27px;
    }

        .arrow ul li .text {
            display: inline-block;
            font-size: 22px;
            font-weight: normal;
            line-height: 24px;
            padding: 0 0 0 15px;
            letter-spacing: -1.0pt;
        }

        .arrow ul li .textLine {
            display: block;
            padding: 0 0 0 18px;
            line-height: 15px;
            font-size: 12px;
            font-weight: normal;
        }

        .arrow ul li.one {
            background-image: url("../img/one.png");
            background-position: 2px 4px;
        }

        .arrow ul li.two {
            background-image: url("../img/two.png");
            background-position: 2px 4px;
        }

        .arrow ul li.three {
            background-image: url("../img/three.png");
            background-position: 2px 4px;
        }

#vectorsWraper {
    background-image: url("../img/border.png");
    background-position: 80px 154px;
    background-repeat: no-repeat;
    height: 160px;
    margin: 0 auto;
}

    #vectorsWraper ul {
        padding: 51px 0 0;
    }

    #vectorsWraper li {
        background-image: url("../img/sprite1.png");
        background-repeat: no-repeat;
        color: #8e8e8e;
        display: inline-block;
        font-size: 14px;
        line-height: 18px;
        padding: 0 0 0 62px;
        width: 24%;
    }

        #vectorsWraper li strong {
            display: block;
            font-size: 25px;
            font-weight: normal;
            color: #9c9e9d;
            line-height: 32px;
        }

        #vectorsWraper li.quick {
            background-position: -28px -448px;
            padding-right: 46px;
        }

        #vectorsWraper li.easy {
            background-position: -25px -532px;
            padding: 0 17px 0 55px;
        }

        #vectorsWraper li.power {
            background-position: -25px -625px;
            padding: 0 0 0 59px;
        }

        #vectorsWraper li.featue {
            background-position: -6px -711px;
            padding: 0 0 0 84px;
        }

.footerWraper { height: 680px; margin: 0 auto;}

.footerLeft { float: left; width: 66.5%; } 
.footerLeft h1 { color: #616161; font-size: 26px; font-weight: normal; line-height: 30px; margin: 0; padding: 27px 220px 2px 0; }
.footerLeft p { color: #616161; font-size: 13px; line-height: 20px; margin: 0; padding: 0 155px 26px 0; }

.footerLeft li { background-image: url("../img/bottom_images.png"); background-position: 0 0; background-repeat: no-repeat; color: #545454; display: inline-block; float: left; font-size: 13px; height: 162px; line-height: 19px; padding: 14px 15px 3px; text-indent: -9999px;width: 182px; }
.footerLeft li strong{ display:inline-block;width:182px;font-size:15px;line-height:22px } 

.footerLeft li.icon1{ background-position: 0 0;margin-right: 5px;}
.footerLeft li.icon2{ background-position: -191px 0;margin-right: 5px;}
.footerLeft li.icon3{background-position:-382px 0;margin-right: 5px;} 
.footerLeft li.icon4{background-position:-573px 0}
.footerLeft li.icon5{background-position:0 -166px;margin-right: 5px;}
.footerLeft li.icon6{background-position:-191px -166px;margin-right: 5px;} 
.footerLeft li.icon7{background-position:-382px -166px;margin-right: 5px;}
.footerLeft li.icon8{background-position:-573px -166px}
.footerLeft li.icon9{background-position:0 -333px;margin-right: 5px;} 
.footerLeft li.icon10{background-position:-191px -333px;margin-right: 5px;} 
.footerLeft li.icon11{background-position:-382px -333px;margin-right: 5px;}
.footerLeft li.icon12{background-position:-573px -333px}

.footerRight { background-image: url("../img/footer_right_bg.png"); background-position: 0 0; background-repeat: no-repeat; display: inline-block; height: 492px; margin: 124px 0 0 18px; padding: 0 13px; position: relative; width: 340px; }
.headWraper { color: #606060; font-size: 27px; line-height: 29px; margin: 20px 0 0; }
.videoWraper { height: 180px; margin: 15px 0 0; width: 316px; }
.videoWraper a { background-image: url("../img/bottom_images.png"); background-position: 0 -507px; background-repeat: no-repeat; display: inline-block; height: 180px; width: 316px; }
.bottomText { color: #6e6d6d; font-size: 16px; letter-spacing: -.2pt; line-height: 20px; margin: 21px 0 0; width: 262px; }
.social { bottom: 18px; color: #6e6d6d; height: 32px; position: absolute; right: 20px; width: 300px; }
.social ul { float: right; position: absolute; right: 0; top: -6px; }
.social li { background-repeat: no-repeat; display: inline-block; height: 33px; padding: 0 0 0 4px; width: 33px; } 
.social li a { display: block; background-image: url("../img/bottom_images.png"); background-position: -361px -580px; background-repeat: no-repeat; height: 33px; width: 33px; display: inline-block; }
.social li.twitter a:hover{background-position:-403px -627px}
.social li.facebook a{background-position:-444px -580px}
.social li.facebook a:hover{background-position:-444px -627px}
.social li.youtube a{background-position:-487px -580px}
.social li.youtube a:hover{background-position:-487px -627px}















/* */
.footer { background-color: #2b2b2b; border-top: 1px solid #d6d6d6; clear: both; height: 43px; line-height: 40px; margin-bottom: -19px; text-align: center; width: 100%; position: relative; } 
.footer ul { display: inline; float: left; margin: 0; padding: 0; }
.footer ul li { color: #fff; display: inline-block; font-size: 13px; list-style: none outside none; padding-right: 25px; }
.footer ul li a { color: #fff; text-decoration: none; }
.footer p { color: #fff; display: inline; float: right; font-size: 13px; font-weight: normal; margin: 2px 0 0 0; }

@media only screen and (max-width: 768px) {
    .footer p {
        color: #2b2b2b;
        line-height: 18px;
    }
}
