@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
html {
background: #2B2B2B;
font-family: sans-serif;
}
body {
color: #333;
font-family: 'Roboto', Arial, Tahoma, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
background: #F0F0F0;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a {
color: #777;
text-decoration: none;
}
a:hover {
color: #333;
}
code, pre {background: #eaf1ff;color: #5780ab;word-break: break-word;padding: 1px 4px;border-radius: 3px;font-size: 87.5%;font-weight: bold;}
option {
font-weight: bold;
}
option:hover {
cursor: pointer;
}
table {
border-collapse: collapse;
}
input[type="text"], input[type="password"] {
font-size: 16px;
background: #FFF;
padding: 7px;
border-radius: 3px;
border: 3px solid #DDD;
outline: 0;
color: #666;
}
input[type="text"]:hover, input[type="password"]:hover, input[type="text"]:focus, input[type="password"]:focus {
border: 3px solid #BBB;
} 
button {background: #FFF;padding: 9px;border-radius: 3px;border: 1px solid #5780ab;color: #5780ab;cursor: pointer;outline: 0;}
button:hover {background: #5780ab;color: #FFF;}
img { border: 0 }
li {
padding: 0 0 5px 0;
}
/* Selectie */
::selection {
background:#000;
color:#fff;
}
::-moz-selection {
background:#000;
color:#fff;
}
::-webkit-selection {
background:#000;
color:#fff;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
.row {
width: 100%;
margin: 0 auto;
max-width: 1020px;
box-sizing: border-box;
padding: 0 10px;
overflow: auto;
}
.one, .row .one { width: 8.33333%; }
.two, .row .two { width: 16.66667%; }
.three, .row .three { width: 25%; }
.four, .row .four { width: 33.33333%; }
.five, .row .five { width: 41.66667%; }
.six, .row .six { width: 50%; }
.seven, .row .seven { width: 58.33333%; }
.eight, .row .eight { width: 66.66667%; }
.nine, .row .nine { width: 75%; }
.ten, .row .ten { width: 83.33333%; }
.eleven, .row .eleven { width: 91.66667%; }
.twelve, .row .twelve { width: 100%; }

.column, .columns {
float: left;
min-height: 1px;
position: relative;
}
[class*="column"] + [class*="column"]:last-child { float: right; }

[class*="column"] + [class*="column"].end { float: left; }

.header {
margin: 0 auto;
max-width: 1020px;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
height: 60px;
}
.topbar {position: fixed;top: 0;right: 0;left: 0;z-index: 1000;width: 100%;height: 60px;background: #5780ab;box-sizing: border-box;}
.logo {
height: 60px;
width: 175px;
float: left;
background: url('/images/logo.png') no-repeat;
background-size: 100%;
    margin-top: 6px;
}
.menu {
display: inline-block;
line-height: 60px;
padding-left: 20px;
}
.menu a, .footer a {
margin-right: 20px;
color: #C6C6C6;
text-decoration: none;
transition: 0.5s;
display: block;
float: left;
}
.menu a:hover, .footer a:hover {
color: #FFF;
}
.menu-element {
float: left;
}
.menu-list {position: absolute;margin: 60px 0 0 -20px;background: #5780ab;max-width: 165px;display: none;}
.menu-element:hover .menu-list {
display: block;
}
.menu-list a {
float: left;
width: 100%;
padding: 0 20px;
margin: 0;
box-sizing: border-box;
}
.menu-button {
display: none;
}
.down-arrow {
width: 0; 
height: 0; 
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #FFF;
display: inline-block;
vertical-align: middle;
margin-left: 7px;
}
.icon-bar+.icon-bar {
margin-top: 4px;
}
.icon-bar {
display: block;
background: #C6C6C6;
width: 20px;
height: 2px;
}
a.menu-active {
color: #FFF;
}
.footer {background: #5780ab;padding: 30px 0;color: #FFF;}
.footer-content {
max-width: 1020px;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
margin: 0 auto;
}
.footer-menu {
width: 100%;
line-height: 30px;
display: inline-block;
}
.footer-menu a {
margin-right: 15px;
float: left;
}
.footer-scroll {
float: right;
}
.footer-scroll a {
margin: 0;
}
#content {
margin-top: 60px;
}
.content-welcome, .content-features, .content-demos, .content-themes, .content-plugins, .content-languages, .content-customize {
width: 100%;
margin: 0 auto;
overflow: auto;
background: url('/images/background.jpg');
color: #FFF;
text-align: center;
padding-top: 50px;
}
.content-features {
background-position-x: -112px;
}
.content-demos {
background-position-x: -224px;
}
.content-customize {
background-position-x: -336px;
}
.content-themes {
background-position-x: -448px;
}
.content-plugins {
background-position-x: -560px;
}
.content-languages {
background-position-x: -672px;
}
.content-half {
padding-top: 30px;
text-align: left;
}
.content-half img {
border: 10px solid #F6F6F6;
width: 100%;
box-sizing: border-box;
display: block;
}
.welcome-learn {
margin: 50px auto 3px auto;
}
.welcome-arrow {
padding: 0 0 40px 0;
background: url('/images/icons/downarrow_large.png') center bottom no-repeat;
background-size: 25px;
width: 25px;
margin: 0 auto;
cursor: pointer;
}
.page-menu {
min-height: 60px;
line-height: 60px;
}
.page-menu a {
margin: 0 10px;
transition: 0.5s;
}
.page-menu-left a {
margin: 0 20px 0 0;
float: left;
}
.page-menu a.menu-active {
color: #000;
}
.footer a.menu-active {
color: #FFF;
}
.content-title {font-size: 25px;font-weight: lighter;}
.content-description {
font-size: 20px;
font-weight: lighter;
padding-top: 10px;
}
.content-half a, .doc-section a {color: #5780ab;}
.content-half a:hover, .doc-section a:hover {color: #5780ab;}
.content-half a:hover img {
border-color: #EEE;
}
.content-white {
background: #FFF;
color: #333;
padding: 50px 0;
}
.content-white .content-title {
font-size: 28px;
}
.content-white .content-description, .content-gray .content-description {
padding: 10px 10px 20px 10px;
font-size: 18px;
color: #777;
}
.content-half .content-description {
padding: 10px 10px 0 0;
}
.content-gray {
background: #F6F6F6;
color: #666;
padding: 50px 0;
}
.content-gray .content-title {
font-size: 28px;
}
.content {
text-align: left;
}
.content-inner {
padding: 0 10px;
}
.content-menu {
padding: 0;
}
.page-header {
background: #F6F6F6;
color: #666;
padding: 20px 0;
}
.page-title {
font-size: 20px;
}
.page-description {
font-size: 16px;
font-weight: lighter;
padding-top: 10px;
}
.page-content {
background: #FFF;
padding: 20px 0;
}
.feature-title, .language-title {
font-size: 16px;
margin-bottom: 10px;
}
.feature-description {
padding: 0 20px;
color: #777;
margin-bottom: 30px;
}
.feature-image {
width: 32px;
height: 32px;
margin: 20px auto 10px auto;
border-radius: 5px;
padding: 10px;
}
.feature-image img {
width: 100%;
}
.text-box-title {
font-size: 16px;
padding: 20px 0 0 0;
}
.text-box-description {
color: #777;
padding: 10px 20px 0 0;
}
.text-box-description a {
color: #555;
}
.text-box-description a:hover {
color: #111;
}
.text-box-content {
padding: 10px 0 0 0;
}
.setup-image {
background: #EEE url('/images/icons/setup.png') center center  no-repeat;
background-size: 32px;
}
.performance-image {
background: #EEE url('/images/icons/performance.png') center center  no-repeat;
background-size: 32px;
}
.design-image {
background: #EEE url('/images/icons/design.png') center center no-repeat;
background-size: 32px;
}
.monetization-image {
background: #EEE url('/images/icons/monetization.png') center center no-repeat;
background-size: 32px;
}
.plugin-image {
background: #EEE url('/images/icons/plugin.png') center center no-repeat;
background-size: 32px;
}
.features-image {
background: #EEE url('/images/icons/features.png') center center no-repeat;
background-size: 32px;
}
.testimonials-container, .content-text {
max-width: 1020px;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
margin: 0 auto;
}
.testimonial-content {
max-width: 700px;
margin: 0 auto;
padding: 0 50px;
}
.slide {
display: none;
}
.slide-bullet {
height: 12px;
width: 12px;
background: #CCC;
border-radius: 50%;
display: inline-block;
margin: 15px 15px 0 0;
cursor: pointer;
}
.slide-bullet:hover {
background: #999;
}
.slide-bullet-active, .slide-bullet-active:hover {
background: #333;
}
.testimonial-image {
width: 50px;
height: 50px;
float: left;
border-radius: 50%;
background-size: 50px;
}
.testimonial-description, .testimonial-author {
font-size: 16px;
margin-left: 50px;
padding-left: 20px;
text-align: left;
color: #333;
}
.testimonial-author {
font-size: 14px;
color: #666;
padding-top: 5px;
}
.testimonial-author a {
font-style: normal;
color: #3C5C9E;
}
.testimonial-author a:hover {
color: #000;
}
.arrows-container {
padding: 20px 0 0 0;
position: relative;
}
.left-arrow {
background: url('/images/icons/left_arrow.png') no-repeat center center;
background-size: 32px;
width: 32px;
height: 32px;
position: absolute;
top: 30px;
left: 0;
cursor: pointer;
}
.left-arrow:hover {
background: url('/images/icons/left_arrow_h.png') no-repeat center center;
background-size: 32px;
}
.right-arrow {
background: url('/images/icons/right_arrow.png') no-repeat center center;
background-size: 32px;
width: 32px;
height: 32px;
position: absolute;
top: 30px;
right: 0;
cursor: pointer;
}
.right-arrow:hover {
background: url('/images/icons/right_arrow_h.png') no-repeat center center;
background-size: 32px;
}
.content-button {color: #5780ab;border-radius: 3px;border: 1px solid #5780ab;padding: 10px 20px;display: inline-block;margin: 20px 0 0 0;min-width: 90px;text-align: center;cursor: pointer;}
.content-button+.content-button {
margin-left: 10px;
}
.content-button:hover {color: #FFF;border: 1px solid #5780ab;background: #5780ab;}
.content-button-white {
color: #FFF;
border: 1px solid #FFF;
margin: 50px 0 0 0;
}
.content-button-white:hover {color: #5780ab;border: 1px solid #FFF;background: #FFF;}
.content-button-small {
font-size: 16px;
margin-top: 10px;
}
a.content-button-small:hover {
color: #FFF;
}
a.list-button {
padding: 7px 10px;
margin: 0;
min-width: 50px;
}
.list-container {
width: 100%;
overflow: auto;
padding: 0 0 10px 0;
}
.list-image {
width: 35px;
float: left;
}
.list-image img {
width: 35px;
}
.list-description {
padding: 0 45px;
}
.list-button {
float: right;
}
.language-image {
width: 100px;
height: 60px;
margin: 20px auto 10px auto;
}
.notification-box {
padding: 15px 15px 15px 50px;
position: relative;
color: #fff;
border-radius: 3px;
margin-bottom: 10px;
}
.notification-box-modal {
margin: 10px 10px 0 10px;
}
.notification-box-alert {
background-color: #FF5757;
background-image: url('/images/icons/alert.png');
background-repeat: no-repeat;
background-size: 32px;
background-position: 10px center;
}
.notification-box-success {
background-color: #27ae60;
background-image: url('/images/icons/success.png');
background-repeat: no-repeat;
background-size: 32px;
background-position: 10px center;
}
.notification-box-info {
background-color: #3498db;
background-image: url('/images/icons/info.png');
background-repeat: no-repeat;
background-size: 32px;
background-position: 10px center;
}
.notification-box > p {
padding-right: 20px;
margin: 0;
}
.notification-close {
padding: 5px 4px;
position: absolute;
right: 0;
top: 5px;
background: url('/images/icons/close_h.png') no-repeat center left;
background-size: 17px;
width: 17px;
height: 17px;
cursor: pointer;
opacity: 0.75;
}
.notification-close:hover {
opacity: 1;
}
.notification-container {
max-width: 1120px;
width: 100%;
margin: 0 auto;
display: none;
top: 55px;
color: #AAA;
padding: 0 10px;
box-sizing: border-box;
}
.center-text {
text-align: center;
}
.changelog {
font-size: 16px;
padding: 10px 0 0 0;
}
.content-welcome {
text-align: left;
background: url('/images/background_welcome.jpg');
color: #777;
}
.welcome-half {
float: left;
width: 50%;
overflow: hidden;
}
.welcome-half img {
width: 100%;
border: 10px solid #F6F6F6;
box-sizing: border-box;
}
.welcome-left {
padding-right: 20px;
box-sizing: border-box;
}
.content-welcome .content-title {color: #5780ab;}
.content-welcome .content-description {font-size: 16px;padding: 30px 0;font-weight: normal;line-height: 26px;}
.content-button strong {
font-weight: 500;
}
.content-welcome .content-button {
font-size: 16px;
}
.content-welcome .welcome-learn {
text-align: center;
}
.content-welcome .welcome-arrow {
filter: invert(53%);
}
.content-description a.button {
font-size: 16px;
display: inline-block;
margin: 5px 0 0 0;
padding: 5px 10px;
background: #EEE;
border-radius: 5px;
}
.content-description a.button:hover {
background: #DDD;
}
.documentation-container {
display: grid;
grid-gap: 10px;
box-sizing: border-box;
grid-template-columns: 210px minmax(auto, auto) ;
grid-template-areas: 'sidebar results';	
}
.documentation-sidebar {
grid-area: sidebar;
font-size: 14px;
padding-right: 10px;
}
.documentation-content {
grid-area: results;
width: 100%;
overflow: hidden;
box-sizing: border-box;
display: grid;
}
.documentation-sidebar ul {
list-style-type: none;
padding: 0;
}
.documentation-sidebar ul li {
margin: 0 0 15px 0;
padding: 0 0 0 20px;
font-size: 16px;
border-left: 2px solid #EEE;
}
.documentation-sidebar li.active {border-left: 2px solid #5780ab;}
.documentation-sidebar ul li ul {
padding: 15px 0 0 20px;
}
.documentation-sidebar ul li ul li {
font-size: 14px;
}
.documentation-sidebar ul li ul li:last-child {
margin: 0;
}
.documentation-content ol li ol {
margin-top: 5px;
}
.doc-nav {
width: 200px;
}
.doc-nav-fixed {
position: fixed;
top: 80px;
}
.doc-pag {
color: #666;
font-weight: normal;
}
.doc-sub-section {
overflow: auto;
}
.doc-section a {
font-weight: 500;
}
.documentation-content h2 {
border-bottom: 1px solid #EEE;
padding-bottom: 10px;
}
.scroll-fix {
position: absolute;
height: 80px;
margin: -80px 0 0;
}
.documentation-content table {
width: 100%;
border: 1px solid #EEE;
margin: 10px 0 20px 0;
box-sizing: border-box;
}
.documentation-content table td, .documentation-content table th {
padding: 10px;
}
.documentation-content table th:nth-child(1), .documentation-content table td:nth-child(1) {
width: 200px;
}
.documentation-content table tr:nth-child(even) {
background-color: #F6F6F6;
}
.documentation-content table th {
text-align: left;
}
.question {
margin: 0 0 5px 0;
font-weight: bold;
}
.answer {
margin: 0 0 15px 0;
}
.documentation-content li:last-child .answer {
margin: 0;
}
.hidden {
display: none;
}
.free {
margin-top: 5px;
font-size: 15px;
color: #3c5c9e;
font-weight: 500;
}
@media only screen and (max-device-width: 768px), only screen and (device-width: 768px) and (device-height: 768px), only screen and (width: 768px) and (orientation: landscape), only screen and (device-width: 768px), only screen and (max-width: 768px) {
	body {
	background: #CCC;
	}
	.row .four, .row .six {
	width: 100%;
	}
	.menu {
	left: 0;
	top: 60px;
	width: 100%;
	position: absolute;
	padding: 0;
	display: none;
	}
	.menu-collapsed {
	display: block;
	}
	.menu-button {
	display: inline-block;
	line-height: 60px;
	width: 22px;
	float: right;
	padding: 23px 0;
	cursor: pointer;
	}
	.menu-button-collapsed .icon-bar {
	background: #FFF;
	}
	.menu a {
	width: 100%;
	padding: 0 10px;
	display: block;
	box-sizing: border-box;
	background: #2b2b2b;
	border-top: 1px solid #3F3F3F;
	}
	.menu a:hover {
	background: #222;
	}
	.menu-element {
	float: none;
	}
	.menu-element:hover .menu-list, .footer-scroll, .down-arrow {
	display: none;
	}
	.feature-description {
	padding: 0 10px;
	}
	.text-box-title {
	padding-top: 20px;
	}
	.text-box-description {
	padding-top: 10px;
	}
	.welcome-half {
	width: 100%;
	text-align: center;
	}
	.welcome-left {
	padding: 0 0 50px 0;
	}
	.content-half img {
	margin-top: 10px;
	}
	.content-button {
	padding: 10px 15px;
	}
	input[type="text"], input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	}
	.documentation-container {
	display: grid;
	grid-gap: 10px 0;
	box-sizing: border-box;
	grid-template-columns: auto auto;
	grid-template-areas: 'sidebar' 'results';
	}
	.doc-nav {
	width: auto;
	}
	.doc-nav-fixed {
	position: inherit;
	top: 0;
	}
	.documentation-sidebar {
	padding-right: unset;
	}
	.documentation-sidebar ul li ul {
	display: none;
	}
	.documentation-content table th:nth-child(1), .documentation-content table td:nth-child(1) {
	width: 120px;
	}
}
/* @animations */
@keyframes small-bounce {
0%{transform:translateY(0px)}
25%{transform:translateY(3px)}
50%{transform:translateY(0px)}
75%{transform:translateY(-1px)}
100%{transform:translateY(0px)}
}
.animation-small-bounce {
animation: small-bounce 850ms linear infinite
}