/* Large header */
h1.large {
	font-size: 48px;
}
/* Video */
.article video {
	width: 896px;
	height: 100%;
	border-radius: 7px;
}
/* AI */
div.ai {
    background: #040833;
    color: #FFFFFF;
    margin: 50px -50px;
	padding: 50px;
    border-radius: 7px;
}

/* New capabilities */
div.new-capabilities {
    background: #FFFFFF;
    margin: 0px -50px;
	padding: 50px;
    border-radius: 7px;
}

/* New charts */
div.columns.new-charts {
    margin: 0 -100px;
    padding: 50px;
}
div.surface,
div.area {
    color: #FFFFFF;
    padding: 50px;
    border-radius: 7px;
}
div.surface {
    background: #083E86;
}
div.area {
    background: #040833;
}

/* Server */
div.server {
    background: #FFFFFF;
    margin: 0 -50px;
    padding: 50px;
    border-radius: 7px;
}

/* Reports.JAVA */
div.columns.reports-java {
    margin: 0 -100px;
    padding: 30px 50px 0 50px;
}
div.blockly,
div.zugferd {
    color: #FFFFFF;
    padding: 50px;
    border-radius: 7px;
}
div.blockly {
    background: #76B4FF;
}
div.blockly a {
    color: #1D74D1;
}
div.zugferd {
    background: #083E86;
}

/* More */
div.columns.more-first {
    margin: 0px -100px;
    padding: 30px 50px 0 50px;
}
div.columns.more-second {
    margin: 0px -100px;
    padding: 0 50px 0 50px;
}
div.columns.more-first > div,
div.columns.more-second > div {
    background: #EEEEEE;
    padding: 50px;
    border-radius: 7px;
}

/* Mobile */
@media (max-width: 1020px) {
	.article video {
		width: 100%;
	}
}

@media (max-width: 860px) {
    div.ai {
        margin: 40px 0;
    }
    div.new-capabilities,
    div.server,
    div.columns.new-charts,
    div.columns.reports-java,
    div.columns.more-first,
    div.columns.more-second  {
        margin: 0;
    }
    div.columns.new-charts {
        padding: 30px 0;
    }
    div.columns.reports-java,
    div.columns.more-first {
        padding: 30px 0 0 0;
    }
    div.columns.more-second {
        padding: 0;
    }
    .article .columns > div {
        width: 100%;
    }
    .article.columns:not(.reverse) > div:not(:last-child), .article .columns:not(.reverse) > div:not(:last-child), .article.columns.reverse > div:not(:first-child), .article .columns.reverse > div:not(:first-child) {
        margin: 0 0 20px 0;
    }
    br.mobile {
        display: none;
    }
}
@media (max-width: 480px) {
    h1.large {
        font-size: 36px;
    }
}
@media (max-width: 360px) {
    div.ai,
    div.new-capabilities,
    div.surface,
    div.area,
    div.server,
    div.blockly,
    div.zugferd,
    div.columns.more-first > div,
    div.columns.more-second > div {
        padding: 25px;
    }
}
@media (max-width: 330px) {
    h1.large {
        font-size: 28px;
    }
    h1 {
        font-size: 24px;
    }
}