@charset "utf-8";
/*--------------------------------------------------------------------------------------------------
CSS Styles for <CLIPPY>.
version:   1.0
--------------------------------------------------------------------------------------------------*/
@font-face {
    font-family: 'Roboto-Th';
    src: url('../fonts/Roboto-Thin.eot');
    src: url('../fonts/Roboto-Thin.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Thin.woff2') format('woff2'),
         url('../fonts/Roboto-Thin.woff') format('woff'),
         url('../fonts/Roboto-Thin.ttf') format('truetype'),
         url('../fonts/Roboto-Thin.svg#open_sansregular') format('svg'); font-weight: normal; font-style: normal;
}
/* =Branding--------------------------------------------------------------------------------------*/
*:focus { outline:0; outline:none; }
html, body { font-family:'Roboto-Th', sans-serif; font-weight:normal; font-size:100%; text-shadow:none!important;  }
#header { background:#f77462; width:100%; display:block;-webkit-transition:position 0.3s; -moz-transition:position 0.3s; -ms-transition:position 0.3s; -o-transition:position 0.3s; transition:position 0.3s; }
#header.smaller { position:fixed; background:#f77462; height:100px; z-index:999;  }
#header.smaller #logo { margin-top:20px; }
#header.smaller .top-links { margin-top:40px; }
#header.smaller .mainNavigation .navbar-nav > li > a { margin-right:40px; }
/*.offset-class #hiw, .offset-class #feat, .offset-class #secure, .offset-class #contact { padding-top:80px; }*/
#logo { margin-top:60px; -webkit-transition:margin 0.3s; -moz-transition:margin 0.3s; -ms-transition:margin 0.3s; -o-transition:margin 0.3s; transition:margin 0.3s; }
#logo a { display:block; width:300px; height:64px; text-indent:-9999px; text-decoration:none; background:url(../img/clippy-logo.png) left top no-repeat; }
.no-padd { padding:0; }
.no-lt-padd { padding-left:0; }
.no-rt-padd { padding-right:0; }
.no-tp-padd { padding-top:0; }
.no-bm-padd { padding-bottom:0; }
/* End Branding----------------------------------------------------------------------------------*/
/* =Main Nav-------------------------------------------------------------------------------------*/
.top-links { margin-top:80px; -webkit-transition:margin 0.3s; -moz-transition:margin 0.3s; -ms-transition:margin 0.3s; -o-transition:margin 0.3s; transition:margin 0.3s; }
.mainNavigation {  float:left; width:100%; }
.navbar-nav{ float:right;}
.mainNavigation .navbar-nav > li > a { font-size:18px; color:#fff; text-transform:uppercase; padding:0; margin-right:25px; font-weight:bold; }
.mainNavigation .navbar-nav > li > a:hover { background:none; color:#000; }
.mainNavigation .navbar-nav > li > a:focus { background:none; }
/* End Main Nav----------------------------------------------------------------------------------*/
/* =Main Content---------------------------------------------------------------------------------*/
#banner { background:#f77462; }
.banner { background:url(../img/banner-img1.png) no-repeat right bottom; background-size:95% 85%; float:left; width:100%; margin-top:70px; margin-bottom:-25px; }
.banner h1 { font-size:44px; color:#fff; line-height:50px; font-weight:300; padding-left:10px; }
.banner .downloads { margin-top:125px; margin-left:65px; margin-bottom:160px; }
.banner .downloads a { margin-bottom:20px; display:block; width:268px; }
.page-heading { font-size:55px; text-align:center; margin-top:50px; position:relative; line-height:90px; color:#010101; font-weight:bold; }
.page-heading:after { content:''; position:absolute; border-bottom:solid 2px #f77462; width:67px; bottom:0; left:47%; }
.how-it-works { float:left; width:100%; background:#f4f4f4; padding-bottom:100px;  }
.how-it-works .icon { float:left; width:100%; text-align:center; height:96px; margin-top:60px; }
.how-it-works h2 { float:left; width:100%; text-align:center; font-size:36px; color:#000; }
.how-it-works p { width:100%; text-align:center; font-size:18px; color:#000; padding:0 35px; }
.features { float:left; width:100%; }
.features .mobile-img { margin-top:20px; margin-bottom:50px; }
.features .mobile-img img { width:100%; }
.features .right-content { padding-left:50px; display:block; }
.features .right-content .icon-block { margin-top:70px; }
.features .right-content .feat-icon { float:left; width:84px; height:90px; border-right:solid 1px #e3e3e3; margin-right:22px; padding-top:10px; }
.features .right-content h2 { color:#000; font-size:30px; }
.features .right-content p { color:#999; font-size:18px; }
.features .right-content .other-features { padding:0; }
.features .right-content .other-features h2 { font-size:35px; margin-top:80px; position:relative; line-height:70px; color:#000; border-bottom:solid 1px #e3e3e3; }
.features .right-content .other-features h2:after { content:''; position:absolute; border-bottom:solid 1px #f77462; width:67px; bottom:-1px; left:0; }
.features .right-content .other-features .navbar-nav { margin-top:50px; }
.features .right-content .other-features .navbar-nav > li > a { padding:0; font-size:25px; color:#000; font-weight:bold; opacity:1;}
.features .right-content .other-features .navbar-nav > li > a:hover { background:none; color:#f77462; }
.features .right-content .other-features .navbar-nav > li > a img { padding-bottom:30px; }
.features .right-content .other-features .navbar-nav > li { padding:0 44px; border-left:solid 1px #e3e3e3; text-align:center; }
.features .right-content .other-features .navbar-nav > li:first-child { border-left:none; padding-left:0; }
.sec-conn { float:left; width:100%; background:#f4f4f4; margin-top:-25px; padding-bottom:50px; }
.sec-conn .conn-img { margin-top:50px; }
.contact-us { float:left; width:100%; padding-bottom:50px; }
.contact-us input[type=text], .contact-us input[type=email], .contact-us textarea { border:none; border:solid 1px #ccc; border-radius:10px; padding:15px 20px; width:100%; float:left; margin-bottom:20px; color:#000; font-weight:bold; resize:none; }
.contact-us input[type=text]:focus, .contact-us input[type=email]:focus, .contact-us textarea:focus { outline:0; }
.contact-us .contact-form { margin-top:50px; }
.contact-us .contact-form .btn { background:#f77462; border:solid 2px #f77462; color:#fff; padding:10px 30px; border-radius:10px; font-size:22px; font-weight:bold; text-shadow:none; }
.contact-us .contact-form .btn:hover { background:#fff; color:#000; }
.contact-us .contact-form .btn:focus { outline:0; }
/*.contact-us .contact-block { float:left; width:100%; padding:25px 0; border-bottom:solid 1px #e3e3e3; }*/
.contact-us .contact-block { display:inline-block; text-align:center; width:100%; padding:25px 0; border-top:solid 1px #e3e3e3; }
.contact-us .contact-block:first-child { margin-top:50px; border-top:solid 0px #e3e3e3;}

.contact-us .contact-block .icon { width:50px; /*float:left;*/ display:inline-block; margin-bottom:10px; vertical-align:middle; text-align:center; padding-right:20px; }
.contact-us .contact-block p { /*float:left;width:80%;*/; width:100%; text-shadow:none; color:#999999; margin:0; font-size:18px;  }
.contact-us .contact-block .email-add { color:#f77462; }
.contact-us .contact-block .contact_btn{ padding:17px 35px; border-radius:4px; -webkit-border-radius:4px; -o-border-radius:4px; font-size:18px; color:#fff; background:#f77462; margin-top:20px; display:inline-block}
.contact-us .contact-block .contact_btn:hover{ background:#2b2b2b; text-decoration:none;}

/* =End Main Content-----------------------------------------------------------------------------*/
/* =Footer---------------------------------------------------------------------------------------*/
#footer { float:left; width:100%; background:#383737; padding-bottom:25px; }
.footer-link { margin-top:42px; }
.footer-link li { float:left; list-style:none; padding:0px 13px; border-left:solid 1px #999; line-height:normal; }
.footer-link li:first-child { border-left:none; }
.footer-link li a { color:#999; text-shadow:none; font-weight:bold; }
.footer-link li a:hover{text-decoration:none;color:#f77462;}

.social-links { margin-top:27px; }
.social-links li { float:left; list-style:none; padding:0px 13px; line-height:normal; }
.social-links li { float:left; list-style:none; padding:0px 13px; line-height:normal; }
.social-links li a { display:block; text-indent:-9999px; width:36px; height:36px; }
.social-links li a.fb { background:url(../img/fb-icon.png) no-repeat; }
.social-links li a.twt { background:url(../img/twit-icon.png) no-repeat; }
.social-links li a.gp { background:url(../img/g-icon.png) no-repeat; }

.copyright { text-align:center; color:#999; font-size:14px; text-shadow:none; font-weight:bold; margin-top:20px; }
/* End Footer-----------------------------------------------------------------------------------*/

/****tooltip****/
.tooltip {
    display: inline;
    position: relative;
    z-index: 100; font-family:'Roboto-Th', sans-serif;
}
.tooltip:after {
    bottom: 100%;
    content: "";
    height: 20px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    width: 100%;
}
.tooltip:hover:after {
    pointer-events: auto;
}
.tooltip-content {
    background: none repeat scroll 0 0 transparent;
    bottom: 100%;
    color: #fffaf0;
    cursor: default;
    font-size: 20px;
    font-weight: 400;
    left: 50%;
    line-height: 1.4;
    margin: 0 0 20px -150px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    text-align: center;
    transition: opacity 0.3s ease 0.3s;
    width: 300px;
    z-index: 100;
}
.tooltip:hover .tooltip-content {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}
.tooltip-content span {
    display: block;
}
.tooltip-text {
    border-bottom: 10px solid #f77462;
    overflow: hidden;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s ease 0.3s;
}
.tooltip:hover .tooltip-text {
    transform: scale3d(1, 1, 1);
    transition-delay: 0s;
}
.tooltip-inner {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
    font-size: 15px;border-radius:0px;
    padding: 20px; max-width:none;
    transform: translate3d(0px, 100%, 0px);
    transition: transform 0.3s ease 0s;
}
.tooltip:hover .tooltip-inner {
    transform: translate3d(0px, 0px, 0px);
    transition-delay: 0.3s;
}
.tooltip-content:after {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #f77462 transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: 10px;
    bottom: -20px;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -14px;
    pointer-events: none;
    position: absolute;
    width: 0;
}