.casestudy .block-holder.half-width.a {
	padding:20px 10px 0px 0px;
}

.casestudy .block-holder.half-width.b {
	padding:20px 0px 0px 10px;
}

button.left {
	margin:10px auto 0px;
}

button.right {
	margin:10px 20px 0px;
}


button.center-aligned.first {
	float:left;width:calc(50% - 10px);margin-right:20px;
}

button.center-aligned.second {
	float:left;width:calc(50% - 10px);
}

.smartoffice-appstore-button-holder .ios-button {
	float:left;
	width:calc(25% - 10px);
	margin-left:25%;
	margin-right:20px;
}

.smartoffice-appstore-button-holder .android-button {
	float:left;
	width:calc(25% - 10px);
}

#sdk-info-graphic {
	width:40%;
	margin:0 30%;
}

#artifex-quote {
	margin:0 20px;
	text-align: center;
}

#artifex-quote h2 {
	font-weight:300;
    font-size:28px;
}

#artifex-quote h3 {
	font-weight:600;
    font-size:20px;
}

#security-form {
	width:60%;
	margin:0 40% 0 0%;
}

.panelQuarterHolder, .panelThirdHolder, .panelHalfHolder  {
	display:flex;
	justify-content:space-between;
}

.panelHalfHolder .child {
	width:50%;
}

.panelThirdHolder .child {
	width:30%;
}

.panelQuarterHolder .child {
	width:25%;
}

.blogLike .panelThirdHolder, .blogLike .panelQuarterHolder  {
	justify-content:flex-start;
	flex-wrap:wrap;
}

.blogLike .panelThirdHolder .child {
	width:31.333%;
	margin:10px 1%;
	background: white;
	padding:20px;
}

.blogLike .panelQuarterHolder .child {
	width:23%;
	margin:10px 1%;
	background: white;
	padding:20px;
}

.blogLike .panelQuarterHolder .child .left {
	width:100%;
	height:160px;
}

.blogLike .panelThirdHolder .child.hoverAnimate:hover, .blogLike .panelQuarterHolder .child.hoverAnimate:hover {
    /* see: https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome */
    backface-visibility: hidden;
    transform: translateZ(0);
    /*-webkit-font-smoothing: subpixel-antialiased;*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation-delay: 0.25s;
    -webkit-animation: scaleBlockUp 0.5s;
    -moz-animation: scaleBlockUp 0.5s;
    animation: scaleBlockUp 0.5s;
    animation-fill-mode: forwards;  
}

/* prevent horizontal scrolling on blog posts with long lines */
#blog .singleEntry {
	word-wrap: break-word;
}

#blog .singleEntry, .blogLike .singleEntry {
	max-width:100%;
	overflow-x:none;
}

#blog .singleEntry pre, .blogLike .singleEntry pre {
	max-width:100%;
	overflow-x: auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}


.hero-double-button {
	width:300px;
}

.hero-double-button button.a {
	margin-right:20px;
	width:140px;
	float:left;
}

.hero-double-button button.b {
	width:140px;
	float:left;
}

.newsPressHolder {
	height:50px;
	border-bottom: 1px solid #333;
}

.newsPressHolder .child {
	text-align: center;
}

.smartoffice-third-party table {
	width:100%;
	border-collapse:collapse;
}

.smartoffice-third-party table th {
	width:25%;
	text-align: left;
	padding:10px;
	font-weight: 600;
	font-size:22px;
	background-color:#454545;
}

.smartoffice-third-party table tbody td {
	margin:0;
	padding:10px;
	border-bottom: 1px solid #c0c0c0;
}

/* embedded 3rd party forms */
#ffSection0 .ff-label-col {
	width:50%;
}

#ffSection0 .ff-field-col {
	width:50%;
}

#ffSection1 .ff-label-col {
	width:50%;
}

#ffSection1 .ff-field-col {
	width:20%;
}



@media all and (max-width : 1200px)  {

	.hero.bg2 {
		background-size:auto 30vw !important;
	}

	.blogLike .panelQuarterHolder .child {
		width:31.333%;
		margin:10px 1%;
	}

}


/*** At this breakpoint we show the burger menu ***/
/* < Tablet landscape */
@media all and (max-width : 1023px)  {

	.casestudy .block-holder.half-width.a {
		padding:20px 0px 0px 0px;
	}

	.casestudy .block-holder.half-width.b {
		padding:20px 0px 0px 0px;
	}

	#sdk-info-graphic {
		width:90%;
		margin:0 5%;
	}

	#security-form {
		width:100%;
		margin:0%;
	}

	.blogLike .panelThirdHolder .child {
		width:48%;
		margin:20px 1%;
		background: white;
		padding:50px;
	}

	.blogLike .panelQuarterHolder .child {
		width:48%;
		margin:20px 1%;
		background: white;
		padding:20px;
	}

	#artifex-quote h2 {
	    font-size:26px;
	}

	#artifex-quote h3 {
	    font-size:18px;
	}




}


/* < Tablet portrait */
/* NOTE: At this size we don't show hero images */
@media all and (max-width : 767px)  {

	.hero.bg2 {
		background-size:0px 0px !important;
	}

	button.left {
		margin:10px auto 0px;
	}

	button.right {
		margin:20px auto 0px;
	}

	button.center-aligned.first {
		float:none;
		width:100%;
		margin:20px auto;
	}

	button.center-aligned.second {
		float:none;
		width:100%;
		margin:20px auto;
	}

	.smartoffice-appstore-button-holder .ios-button {
		float:none;
		width:60%;
		margin:20px 20%;
	}

	.smartoffice-appstore-button-holder .android-button {
		float:none;
		width:60%;
		margin:20px 20%;
	}


	#blog .singleEntry .hero, .blogLike .singleEntry .hero{
	    width:100%;
	    float:none;
	}

	#blog .singleEntry .hero img, .blogLike .singleEntry .hero img{
	    width:90%;
	    margin:0 auto;
	    object-fit:contain;
	}

	#blog .singleEntry .body, .blogLike .singleEntry .body {
	    display:block;
	    width:100%;
	    float:none;
	    padding:0px;
	}

	.panelThirdHolder, .panelHalfHolder {
		display:block;
		width:100%;
	}

	.panelThirdHolder .child, .panelHalfHolder .child  {
		width:100%;
	}

	.blogLike .panelThirdHolder {
		display:flex;
		width:auto;
		justify-content:flex-start;
		flex-wrap:wrap;
	}

	#blog .singleEntry .hero, .blogLike .singleEntry .hero {
	    width:50%;
	    margin:0 25% 10px;
	    float:none;
	}


	/*** License Table ***/
	.licenseTable .col {
	    padding:5px;
	    font-size:9px;
	}

	#artifex-quote {
		text-align: left;
	}

	#artifex-quote h2 {
	    font-size:22px;
	}

	#artifex-quote h3 {
	    font-size:18px;
	}

	.smartoffice-third-party table th {
		font-size:13px;
	}

}

@media all and (max-width : 550px)  {


    .hero-double-button button.a {
		margin:0 auto;
		width:90%;
		float:none;
	}

	.hero-double-button button.b {
		width:90%;
		margin:20px auto;
		float:none;
	}

	.blogLike .panelThirdHolder .child {
		width:100%;
		margin:20px 0;
	}

	.blogLike .panelQuarterHolder .child {
		width:100%;
		margin:20px 0;
	}

	#artifex-quote h2 {
	    font-size:18px;
	}

	#artifex-quote h3 {
	    font-size:16px;
	}

	.smartoffice-third-party table {
		font-size:11px;
	}

	.smartoffice-third-party table tbody td {
		padding:5px;
	}
}

@media all and (max-width : 400px)  {

	.nutshell-statement {
		font-size: 30px;
	}

}