/* ======= Base ======= */ body { font-family: 'Lato', arial, sans-serif; color: #444; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #042a36; } a { color: #042a36; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } a:hover { text-decoration: underline; color: #0e98c5; } .btn, a.btn { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; font-family: 'Montserrat', arial, sans-serif; padding: 8px 16px; font-weight: bold; } .btn .fa, a.btn .fa { margin-right: 5px; } .btn:focus, a.btn:focus { color: #fff; } a.btn-cta-primary, .btn-cta-primary { background: #074f66; border: 1px solid #074f66; color: #fff; font-weight: 600; text-transform: uppercase; } a.btn-cta-primary:hover, .btn-cta-primary:hover { background: #053c4e; border: 1px solid #053c4e; color: #fff; } a.btn-cta-secondary, .btn-cta-secondary { background: #Fa6900; border: 1px solid #000; color: #fff; font-weight: 600; text-transform: uppercase; } a.btn-cta-secondary:hover, .btn-cta-secondary:hover { background: #Fa6900; border: 1px solid #ecb728; color: #fff; } .text-highlight { color: #074f66; } .offset-header { padding-top: 90px; } pre code { font-size: 16px; } /* ======= Header ======= */ .header { padding: 10px 0; background: #042a36; color: #fff; position: fixed; width: 100%; } .header.navbar-fixed-top { background: #fff; z-index: 9999; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4); box-shadow: 0 0 4px rgba(0, 0, 0, 0.4); } .header.navbar-fixed-top .logo a { color: #042a36; } .header.navbar-fixed-top .main-nav .nav .nav-item a { color: #666; } .header .logo { margin: 0; font-size: 26px; padding-top: 10px; } .header .logo a { color: #fff; } .header .logo a:hover { text-decoration: none; } .header .main-nav button { background: #074f66; color: #fff !important; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .header .main-nav button:focus { outline: none; } .header .main-nav button .icon-bar { background-color: #fff; } .header .main-nav .navbar-collapse { padding: 0; } .header .main-nav .nav .nav-item { font-weight: normal; margin-right: 30px; font-family: 'Montserrat', sans-serif; } .header .main-nav .nav .nav-item.active a { color: #042a36; background: none; } .header .main-nav .nav .nav-item a { color: #0a7396; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; font-size: 14px; padding: 15px 10px; } .header .main-nav .nav .nav-item a:hover { color: #074f66; background: none; } .header .main-nav .nav .nav-item a:focus { outline: none; background: none; } .header .main-nav .nav .nav-item a:active { outline: none; background: none; } .header .main-nav .nav .nav-item.active { color: #042a36; } .header .main-nav .nav .nav-item.last { margin-right: 0; } /* ======= Promo Section ======= */ .promo { background: #042a36; color: #fff; padding-top: 150px; } .promo .title { font-size: 98px; color: #fff; margin-top: 0; } .promo .title .highlight { color: #eebf3f; } .promo .intro { font-size: 28px; max-width: 680px; margin: 0 auto; margin-bottom: 30px; } .promo .btns .btn { margin-right: 15px; font-size: 18px; padding: 8px 30px; } .promo .meta { margin-top: 120px; margin-bottom: 30px; color: #fff; } .promo .meta li { margin-right: 15px; } .promo .meta a { color: #fff; } .promo .meta a:hover { color: #Fa6900; } .promo .social-media { background: #0c86ae; padding: 10px 0; margin: 0 auto; } .promo .social-media li { margin-top: 15px; } .promo .social-media li.facebook-like { margin-top: 0; position: relative; top: -5px; } /* ======= About Section ======= */ .about { padding: 80px 0; background: #f5f5f5; } .about .title { color: #074f66; margin-top: 0; margin-bottom: 60px; } .about .intro { max-width: 800px; margin: 0 auto; margin-bottom: 60px; } .about .item { position: relative; margin-bottom: 30px; } .about .item .icon-holder { position: absolute; left: 30px; top: 0; } .about .item .icon-holder .fa { font-size: 24px; color: #074f66; } .about .item .content { padding-left: 60px; } .about .item .content .sub-title { margin-top: 0; color: #074f66; font-size: 18px; } /* ======= Features Section ======= */ .features { padding: 80px 0; background: #042a36; color: #fff; } .features .title { color: #fff; margin-top: 0; margin-bottom: 30px; } .features a { color: #074f66; } .features a:hover { color: #042a36; } .features .feature-list li { margin-bottom: 10px; color: #fff; } .features .feature-list li .fa { margin-right: 5px; color: #fff; } /* ======= Docs Section ======= */ .docs { padding: 80px 0; background: #f5f5f5; } .docs .title { color: #074f66; margin-top: 0; margin-bottom: 30px; } .docs .docs-inner { max-width: 800px; background: #fff; padding: 30px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; margin: 0 auto; } .docs .block { margin-bottom: 60px; } .docs .code-block { margin: 30px inherit; } .docs .code-block pre[class*="language-"] { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } /* ======= License Section ======= */ .license { padding: 80px 0; background: #f5f5f5; } .license .title { margin-top: 0; margin-bottom: 60px; color: #074f66; } .license .license-inner { max-width: 800px; background: #fff; padding: 30px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; margin: 0 auto; } .license .info { max-width: 760px; margin: 0 auto; } .license .cta-container { max-width: 540px; margin: 0 auto; margin-top: 60px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .license .cta-container .speech-bubble { background: #d6f3fc; color: #074f66; padding: 30px; margin-bottom: 30px; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .license .cta-container .speech-bubble:after { position: absolute; left: 50%; bottom: -10px; margin-left: -10px; content: ""; display: inline-block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #d6f3fc; } .license .cta-container .icon-holder { margin-bottom: 15px; } .license .cta-container .icon-holder .fa { font-size: 56px; } .license .cta-container .intro { margin-bottom: 30px; } /* ======= Contact Section ======= */ .contact { padding: 80px 0; background: #042a36; color: #fff; } .contact .contact-inner { max-width: 760px; margin: 0 auto; } .contact .title { color: #fff; margin-top: 0; margin-bottom: 30px; } .contact .intro { margin-bottom: 60px; } .contact a { color: #074f66; } .contact a:hover { color: #042a36; } .contact .author-message { position: relative; margin-bottom: 60px; } .contact .author-message .profile { position: absolute; left: 30px; top: 15px; width: 100px; height: 100px; } .contact .author-message .profile img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .contact .author-message .speech-bubble { margin-left: 155px; background: #10b2e7; color: #074f66; padding: 30px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; position: relative; } .contact .author-message .speech-bubble .sub-title { color: #074f66; font-size: 16px; margin-top: 0; margin-bottom: 30px; } .contact .author-message .speech-bubble a { color: #fff; } .contact .author-message .speech-bubble:after { position: absolute; left: -10px; top: 60px; content: ""; display: inline-block; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #10b2e7; } .contact .author-message .speech-bubble .source { margin-top: 30px; } .contact .author-message .speech-bubble .source a { color: #074f66; } .contact .author-message .speech-bubble .source .title { color: #0c86ae; } .contact .info .sub-title { color: #0e98c5; margin-bottom: 30px; margin-top: 0; } .contact .social-icons { list-style: none; padding: 10px 0; margin-bottom: 0; display: inline-block; margin: 0 auto; } .contact .social-icons li { float: left; } .contact .social-icons li.last { margin-right: 0; } .contact .social-icons a { display: inline-block; background: #fff; width: 48px; height: 48px; text-align: center; padding-top: 12px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; margin-right: 8px; float: left; } .contact .social-icons a:hover { background: #Fa6900; } .contact .social-icons a .fa { color: #000000; } .contact .social-icons a .fa:before { font-size: 26px; text-align: center; padding: 0; } /* ======= Footer ======= */ .footer { padding: 15px 0; background: #042a36; color: #fff; } .footer .copyright { -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; } .footer .fa-heart { color: #fb866a; } /* Extra small devices (phones, less than 768px) */ @media (max-width: 767px) { .header .main-nav button { margin-right: 0; } .header .main-nav .navbar-collapse { padding-left: 15px; padding-right: 15px; } .promo .btns .btn { margin-right: 0; clear: both; display: block; margin-bottom: 30px; } .promo .title { font-size: 66px; } .promo .meta { margin-top: 60px; } .promo .meta li { float: none; display: block; margin-bottom: 5px; } .contact .author-message { text-align: center; } .contact .author-message .profile { position: static; margin: 0 auto; margin-bottom: 30px; } .contact .author-message .speech-bubble { margin-left: 0; } .contact .author-message .speech-bubble:after { display: none; } .contact .social-icons a { width: 36px; height: 36px; padding-top: 7px; margin-right: 2px; } .contact .social-icons a .fa:before { font-size: 18px; } } /* Small devices (tablets, 768px and up) */ /* Medium devices (desktops, 992px and up) */ /* Large devices (large desktops, 1200px and up) */