.main-features {

margin-top: 10px;

}

body {

background: #F5F9FD;

word-wrap: break-word; /* IE */

overflow-wrap: break-word; /* CSS3 */

font-family: "Roboto Mono", monospace;

}

body .banner {

background: #236BFD;

padding: 1em;

color: #fff;

text-align: center;

font-weight: bold;

}

body .banner a {

color: #fff;

}

body .banner ul {

display: flex;

}

body .banner ul li {

align-items: auto;

}

body .alert-success {

background-color: transparent;

padding: 30px;

margin-top: 2em;

margin-bottom: 2em;

}

body .wide {

margin: 0 auto;

margin-top: 20px;

max-width: 1600px;

}

body .wide>div {

margin: 0 30px;

}

body .navbar.nav-custom {

background: #fff;

border: 0px;

border-radius: 0px;

padding: 10px;

margin-bottom: 0;

}

body .navbar .promo {

font-size: 80%;

color: #666;

}

body .navbar-brand img{

height: 50px;

margin-left: 8px;

}

body .nav-custom .navbar-nav>li>a {

color: #000;

font-size: 18px;

font-weight: bold;

line-height: 160%;

text-transform: lowercase;

}

body .nav-custom .navbar-brand {

position: relative;

padding: 0;

color: #236BFD;

text-transform: uppercase;

font-family: 'Roboto Mono', monospace;

font-weight: bold;

font-size: 24px;

z-index: 1;

}

body .hero-unit {

/*background: url('/images/geometry.png');*/

background: rgba(255,255,255,0.7);

text-align: center;

padding: 3.5em;

border-radius: 0px;

margin-bottom: 20px;

}

body h1, body h2, body h3, body h3 {

font-family: "Roboto Mono", Helvetica, Arial, sans-serif;

text-transform: uppercase;

color: #45414B;

}

body .bg-white {

background: #fff;

}

body .bg-grey {

background: #F5F9FD;

padding: 50px 0;

}

h1, h2, h3, h4, h5, h6 {

font-weight: bold;

}

body #home-hero h1 {

color: #000;

font-size: 65px;

font-weight: bold;

text-transform: uppercase;

font-family: 'Roboto Mono', sans-serif;

margin-top: 50px;

margin-bottom: 50px;

}

#home-hero img{

position:relative;

top:-7px;

float: right;

width: 400px;

box-shadow: 7px 8px 19px #3333331a;

border-radius: 5px;

margin-left: 10px;

}

.panel-collapse-body {

padding-top: 15px;

}

.maintainer a {

color: #fff;

}

.blue {

color: #236bfd !important;

}

.maintainer {

border-left: 1px solid #ccc;

padding-left: 2em;

color: #ccc;

float: right;

}

.maintainer img {

border-radius: 50px;

width: 100px;

height: 100px;

}

#home-hero p.lead {

color: #272727;

max-width: 795px;

font-size: 18px;

font-weight: 500;

line-height: 160%;

}

.hero-unit p.lead {

font-weight: bold;

font-style: italic;

}

#page h4 {

margin-top: 1em;

margin-bottom: 1em;

}

.sample-code {

font-family: monospace;

font-size: 17px;

line-height: 150%;

}

.sample-code .string {

color: #468847;

}

.sample-code .method {

color: #488BA8;

}

pre code {

font-size: 15px;

white-space: pre !important;

word-wrap: normal !important;

background: #f5f9fd;

}

body #page code {

font-size: 15px;

}

body .highlight pre {

background: #f5f9fd;

white-space: pre;

border: none;

padding: 1em;

}

body .page {

font-family: 'Lato', sans-serif;

font-size: 1.2em;

line-height: 150%;

padding: 1em;

background: #fff;

margin-bottom: 1.5em;

border-radius: 5px;

}

body pre {

background-color: #f5f9fd;

border: none;

}

body .btn-warning {

background-color: #2874fc;

border-radius: 0;

border: none;

}

.pt {

padding-top: 3em;

}

.page blockquote {

padding: 0.1em 1em;

background: #feffd1;

}

body .page h1, body .page h2 {

/*font-family: 'Lato', sans-serif;*/

text-decoration: uppercase;

margin-top: 0.75em;

margin-bottom: 0.75em;

}

body .page h1:after, body .page h2:after {

content: '_';

color: #236BFD;

}

body .page h3 {

border-bottom: 1px solid #999;

margin-bottom: 0.5em;

}

body .fixed {

margin: auto;

max-width: 1000px;

}

body .post {

margin-top: 1.5em;

margin-bottom: 1.5em;

font-size: 1.1em;

line-height: 1.4;

color: #444;

}

body .page .post p {

margin-top: 0;

margin-bottom: 1em;

}

body .page .post h2 {

border-bottom: 2px solid #45414B;

}

body .page p {

margin-top: 1em;

margin-bottom: 1em;

line-height: 1.75;

}

body .page img {

max-width: 100%;

}

body b {

color: #666;

}

#contributors a {

margin-right: 5px;

margin-bottom: 5px;

float: left;

}

#contributors a img {

border-radius: 25px;

}

#toc ul {

margin: 0;

list-style: none;

background: #fff;

padding: 1.5em;

}

#toc ul li {

margin-bottom: 3px;

}

#toc ul li:before {

content: '#';

color: #236BFD;

}

#toc .toc {

}

.toc-h3 {

margin-left: 1.5em;

}

.toc-h4 {

margin-left: 2.5em;

font-size: 90%;

}

#toc a {

padding: 5px;

width: 100%;

font-size: 1.2em;

}

#footer {

margin-top: 0;

padding-top: 10px;

background: #236BFD;

color: #fff;

}

#footer .social {

display: inline-block;

width: 32px;

height: 32px;

margin: 0 5px;

opacity: 0.8;

text-decoration: none;

transition: opacity .2s ease;

}

#footer .social:hover {

opacity: 1;

}

#footer .social img,

#footer .social svg {

width: 100%;

}

#footer .social svg {

fill: #ffffff;

height: 100%;

}

#footer .sponsors {

zoom: 0.8;

filter: grayscale(0.3);

opacity: 0.5;

transition: opacity .2s ease;

}

#footer .sponsors:hover {

opacity: 1;

text-decoration: none;

}

.sponsors--phpstorm {

width: 60px;

}

.sponsors--rebilly,

.sponsors--themeisle,

.sponsors--vpnwelt {

width:100px;

background: #fff;

border-radius: 20px;

}

#footer .sponsors-item .sponsors {

height: 80px;

border-radius: 20px;

opacity: 0.8;

transition: opacity .2s ease;

}

#footer .sponsors-item .sponsors:hover {

opacity: 1;

}

#footer .sponsors-item .sponsors.sponsors--themeisle {

width: 150px;

height: auto;

}

.sponsors-item:hover {

text-decoration: none;

}

#footer .sponsors-item .sponsors.sponsors--somewherewarm {

height: 150px;

opacity: 0.9;

width: auto;

}

#footer .sponsors-item .sponsors.sponsors--somewherewarm:hover {

opacity: 1;

}

#footer a {

color: #fff;

}

#footer .links {

display: flex;

align-items: center;

justify-content: space-around;

padding: 24px 0 0 0;

}

#footer .links li {

list-style: none;

font-size: 16px;

}

#copyright {

color: #fff;

text-align: center;

padding: 20px 0;

border-top: 1px solid rgba(255,255,255,0.3);

padding: 20px;

margin-top: 20px;

}

body .dropdown-modules {

min-width: 300px;

}

body .dropdown-modules li a {

float: left;

clear: none;

width: 50%;

}

#gs_tti0 {

padding: 0px !important;

}

.gsc-control-cse {

background: transparent !important;

border: none !important;

}

.links a {

color: #666;

}

p img {

max-width: 100%;

}

ul.navbar-collapse {

max-height: none;

}

ul.navbar-nav {

}

@media (max-width: 767px) {

.navbar-nav .open .dropdown-menu .row{

max-height: 40vh;

}

.sponsors-item {

display: inline-block;

margin: 5px;

}

}

.row.home{

padding-top:225px;

}

.row.home.no-padding-top{

padding-top:0px;

}

.home-btns{

margin-top:40px;

margin-bottom:40px;

}

.well.dark{

background:#042943;

background: rgba(0, 0, 0, 0.2);

border:0px;

}

.well.dark p{

color:#ccc;

}

.well.dark p b{

color:#eee;

}

ol.guides {

line-height: 2;

}

body .navbar-inverse .navbar-nav>li>a:focus,

body .navbar-inverse .navbar-nav>li>a:hover {

color: #666;

}

body .navbar-inverse .navbar-brand:focus,

body .navbar-inverse .navbar-brand:hover {

color: #236BFD;

background-color: transparent;

}

.hero {

background: #236BFD;

background-size: cover;

width: 100%;

font-family: 'Lato', sans-serif;

padding-top: 40px;

padding-bottom: 40px;

color: #fff;

}

body .hero h1 {

margin-top: 0;

margin-bottom: 0;

font-family: 'Lato', sans-serif;

text-transform: none;

}

#home-hero{

width: 100%;

height: 100vh;

min-height: 800px;

background: #F5F9FD;

display: table;

}

#home-hero .bubble {

max-width: 1000px;

margin: 150px auto 0 auto;

font-size: 18px;

line-height: 160%;

}

.btn-install {

background: #236BFD;

color: #fff;

}

.home-btns a {

width: 40%;

}

body .btn {

border-radius: 0;

text-transform: uppercase;

}

body .btn:active {

box-shadow: none;

-webkit-box-shadow: none;

}

body .btn-default {

background: transparent;

color: #236BFD;

border: 2px solid #236BFD;

}

body .btn-lg {

padding: 20px;

}

#home-hero .logo {

width: 200px;

border-radius: 100px;

}

@media screen and (max-width : 1260px) {

.follow {

display: none;

}

}

@media screen and (max-width : 992px) {

body .no-small {

display: none;

}

body .navbar-header ul.nav>li {

float: left;

}

#home-hero{

height:320px;

}

.well.dark{

background:#fff;

}

.well.dark p{

color:#888;

}

.well.dark p b{

color:#333;

}

.home-btns{

margin-bottom:20px;

}

ul {

padding-left: 20px;

}

.about-framework {

font-size: 16px;

text-align: center;

margin-bottom: 20px;

}

}

@media screen and (max-width : 767px) {

body .dropdown-modules li a {

float: none;

clear: none;

width: 100%;

}

.menu li {

clear: both;

}

body #home-hero h1{

padding-top:0px;

font-size: 50px;

}

body #home-hero {

min-height: 0px;

}

.navbar-nav .dropdown-menu, .navbar-nav .dropdown-menu a {

color: #333;

}

.navbar-nav .dropdown-menu a:hover {

background-color: inherit;

color: #333;

}

body .navbar-collapse {

border-top: none;

}

body .home-btns a {

width: 100%;

}

body #home-hero .bubble {

margin-top: 50px;

}

}

body .navbar-inverse .navbar-toggle .icon-bar {

background-color: #000;

}

@media screen and (min-width: 1030px) {

.navbar-collapse.collapse {

position: relative;

display: block!important;

height: auto!important;

padding-bottom: 0;

overflow: visible!important;

}

}

#searchable > .search {

width: 100%;

height: 45px;

color: #333;

text-indent: 16px;

border-radius: 24px;

border: 1px solid #ddd;

box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075);

transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;

outline: none;

}

.feature {

padding: 3em;

}

.feature .check {

float: left;

font-size: 70px;

color: #666;

border-radius: 50px;

background: #eee;

width: 100px;

height: 100px;

display: table-cell;

vertical-align: middle;

text-align: center;

font-weight: bold;

margin-right: 10px;

border-top: 7px solid #fff;

border-left: 7px solid #fff;

}

.feature>p {

display: table;

font-size: 1.2em;

color: #999;

}

.feature code {

padding: 0;

color: #666;

display: inline-block;

margin-top: 1em;

margin-bottom: 1em;

font-size: 0.8em;

}

.feature .btn {

float: right;

border: 1px solid;

}

.btn-learn {

background: #fff;

color: #666;

text-align: right;

display: block;

}

.feature .btn:active {

box-shadow: none;

}

.mission {

background: #B2EBF2;

padding-top: 2em;

padding-bottom: 2em;

font-family: 'Roboto Mono', sans-serif;

border-bottom: 10px solid #fff;

margin: 1em auto;

}

.sub-footer {

font-family: 'Roboto Mono', sans-serif;

margin: 1em auto;

background: #CFD8DC;

margin-bottom: -1em;

padding-top: 4em;

padding-bottom: 6em;

border-top: 3px dashed #fff;

}

.mission-text {

font-style: italic;

text-align: center;

padding: 1em;

width: 60%;

max-width: 1200px;

margin: 0 auto;

font-size: 2em;

color: #666;

}

#carousel-companies .item img {

height: 150px;

margin: 0 auto;

}

.sublogo {

clear: both;

float: left;

display: table;

}

.sublogo img {

margin-right: 20px;

width: 80px;

margin-bottom: 10px;

filter: grayscale(100);

}

.sidebar {

color: #000;

background: #fff;

border-bottom: 5px solid #666;

}

.sidebar ul {

font-size: 1.1em;

list-style: none;

padding-left: 0;

line-height: 2;

}

.sidebar ul li:before {

content: "\2713";

margin: 0 0.5em;

}

.sidebar ul li {}

.dropdown-menu {

min-width: 200px;

}

.dropdown-menu.columns-2 {

min-width: 400px;

}

.multi-column-dropdown li a {

padding: 5px;

font-weight: 300;

}

.multi-column-dropdown {

list-style: none;

padding-left: 10px;

}

.multi-column-dropdown li a {

display: block;

clear: both;

line-height: 1.428571429;

color: #333;

white-space: normal;

}

.multi-column-dropdown li a:hover {

text-decoration: none;

color: #262626;

background-color: #f5f5f5;

}

@media (max-width: 767px) {

.dropdown-menu {

background: #fff;

}

.dropdown-menu.multi-column {

min-width: 240px !important;

overflow-x: hidden;

}

.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {

color: #333;

}

}

.panel-body {

font-size: 1.2em;

}

.casestudy .item {

text-align: center;

margin: 10px 0;

padding: 10px;

width: 100%;

height: 250px;

display: flex;

filter: grayscale(100);

transition: 0.5s;

transition-property: filter;

}

.casestudy .item:hover {

filter: none;

}

.casestudy .item>* {

margin: auto;

align-self: center;

}

.casestudy img {

width: 150px;

height: 150px;

}

.casestudy .img {

width: 150px;

height: 150px;

filter: grayscale(100);

}

.casestudy .btn {

border-left: 5px solid #D32F2F;

}

.carousel-control.right {

background: none !important;

}

.navbar-collapse {

max-height: none;

}

.card {

display: block;

box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

background: #fff;

}

.card {

padding: 3em;

margin-top: 10px;

box-sizing: border-box;

border-radius: 2px;

background-clip: padding-box;

}

.card span.card-title {

color: #555;

font-size: 24px;

font-weight: 300;

font-weight: bold;

text-transform: uppercase;

padding-right: 0.2em;

}

.card .card-image {

display: block;

margin: -3em;

margin-bottom: 0;

padding: 1em;

min-height: 200px;

background-clip: padding-box;

background-repeat: no-repeat;

background-position: center;

background-size: cover;

}

.card .card-image>.card-title {

background: rgba(255,255,255,0.9);

}

.card .card-content {

padding: 16px;

border-radius: 0 0 2px 2px;

background-clip: padding-box;

box-sizing: border-box;

}

.card .card-content p {

margin: 0;

color: inherit;

}

.card .card-content span.card-title {

line-height: 48px;

}

.card a {

color: #333;

text-decoration: none;

}

.card a:hover {

text-decoration: none;

box-shadow: none;

}

@media screen and (min-width: 1px) and (max-width: 767px){

.grid[data-columns]::before {

content: '1 .col-xs-12';

}