body {
    border-top: none;
    padding-top: 20px;
    font-size: 18px;
    font-family: Verdana;
}
@font-face {
    font-family: "Symbols1-M2YY";
    src: url(./Symbols1-M2YY.woff) format('woff'), url(./Symbols1-M2YY.woff2) format('woff2'), url('Symbols1-M2YY.ttf') format('truetype')
}

.block .column {
    background-color: #ecf6ff;
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 15px;
    width: calc(50% - 1px);
}
.block .smallr_column {
    background-color: #c1edfe;
}
.block .column--ux-48 {
    width: calc(48% - 10px);

}
.block .column--ux-52 {
    width: calc(52% - 1px);

}
.block .column--ux-66 {
    width: calc(66% - 10px);

}
.block .column--ux-33 {
    width: calc(33% - 1px);

}
.column--ux-52 p {
    margin-right: 6px;
}
.webapps-subheader {
    color: #fff;
    padding: 12px !important;	
}
.webapps-description {
    padding: 12px !important;
}
.column--left, .column--right {
	display: inline-block;
	white-space: break-spaces;
	width: 98%;
}
.column--right {
	float: right;
}
/* medium display - overwrite grid width */
@media screen and (max-width:479px) {
	.container_12, .grid_12,
	.container_12 .grid_3,
	.container_12 .grid_9,
	.container_12 .grid_6, 
	.container_12 .grid_5,
	.container_12 .grid_4,
	.container_12 .grid_7 {
		width: 100% !important;
	} 
}
/* medium display - overwrite grid width */
@media screen and (min-width: 680px) and (max-width:1023px) {
	.container_12 .grid_3 {
		width: 32%;	
	}
	.container_12 .grid_9 {
		width: 64%;
	}
	.grid_6+ .grid_3 {
		width: 48%;
	}
	.grid_3 + .grid_5 {
		width: 32%;
	}
	.grid_5 + .grid_4 {
		width: 30%;
	}
}
/* medium display */
@media screen and (max-width:399px) {
    h1#branding {
        padding: 10px 20px;
        text-align: right;
    }
    
    ul.main li {
        padding-left: 0.4em;
	    width: 48%;
    }
    ul.main li a {
        width: 100%;
        margin-bottom: 2px;
        margin-right: 20px;
	    padding: 0.3em;
    }
    .block .column {
        width: 100%;
    }
    .box { width: 100%; }	
}

@media screen and (max-width:479px) {
    h1#branding {
        font-size: 2em;
    }
}
@media screen and (max-width:1049px) {
    .block .column {
        width: 100%;
    }
}
@media screen and (min-width: 600px){
    .column--left, .column--right {	
	    width: 48%;
    }
}
@media only screen and (max-width: 600px) {
  .container_12 .grid_6, .container_16 .grid_8 {
    width: 100%;
  }
}

/* small display */
@media screen and (max-width:399px) {
	ul.main li { width: 100%; }
}

/* big smartphones and tablets, pcs */
@media screen and (min-width:680px) {
    h1#branding {
	  margin-bottom: 20px;	
    }
    .block .column {	
  	    padding-left: 14px;
        padding-right: 11px;
    }
    .is-shadow {
    	-webkit-box-shadow: 7px 5px 5px #2d3d38;
    	box-shadow: 7px 5px 5px #2d3d38;
    }
    .column--left, .column--right {
	  max-width: 480px;
    }
    .img-backend {
        max-width: 50%;
    }
}
/* nice border at the bottom of the heading image */
@media screen and (min-width:1280px) {
    ul.nav li a {
	  margin-top: -20px;
	}
}
/* state definitions */
.is-obsolete {
    text-decoration: line-through;
}
/* 2025 styling */
.block ul li {
    line-height: 1.88em;
}
.lp-label {
  min-width: 120px;
  display: inline-block;
}
.cloud-computing-cta,
.user-experience-cta,
.btn-contact {
  display: inline-block;  
  height: 2.5em;
  color: #005477;
  background-color: #d4a700;
  border-color: #d4a700;
  border-radius: 9px;
  font-size: 24px;
  margin: 10px auto;
}
.btn-contact {
  padding: 15px;
}
.cloud-computing-cta, .user-experience-cta {
  line-height: 2.5em;
  padding: 1px 25px;
}
@media screen and (min-width:480px) {
  .user-experience-cta {
    margin-left: 25%;
  }
}
.clear--ux {
    height: 15px !important;
}
.comment-form {
    margin: 0 20px 0 60px;
}
.aligncenter {
    text-align: center;
}

.ok.icon-font,
.ok.icon {
    list-style: none;
}
.cd-link:after,
.ok.icon-font:before {
    color: #d4a700;
    font-family: "Symbols1-M2YY";
    font-size: 32px;
    padding-right: 12px;
}
.cd-link:after {
    padding-left: 5px;
}
.icon-font__b:before {
    content: "B";
}
.icon-font__d:before {
    content: "D"; /* spiral notebook */
}

.icon-font__l:before {
    content: "L";
}
.cd-link.icon-font__y:after,
.ok.icon-font__y:before {
    content: "Y"; /* pc window */
}

.icon-font__i:before {
    content: "I";
}
.icon-font__k:before {
    content: "K";
}
.icon-font__q:before {
    content: "Q"; /* sand clock */
}
.cd-link.icon-font__w:after,
.ok.icon-font__w:before {
    content: "W"; /* mobile phone */
}

.icon-font__z:before {
    content: "Z"; /* printer */
}
.icon--pinsel:before {
    background-image: url("icon-brush.svg");
    background-repeat: no-repeat;
    padding-right: 30px;
    height: 24px;
    width: 24px;
    content: "";
}
.icon-font__w:before {
    padding-right: 17px !important;
}

.beratung {
    background-color: transparent;
    background-size: contain;
    background-position: center;
    background-image: url(https://img.ceteras.de/beratung_diagramm.jpg);
    height: 344px;
    width: 100%;
}
.class-diagram {
    height: 253px;
    width: 380px;
    max-width: 100vw;
    background-color: transparent;
    background-image: url(https://img.ceteras.de/istockphoto_2173923-software-architecture-class-diagram.jpg);
    margin: 15px;
}
.java-2021-badge {
    height: 233px;
    width: 235px;

    background: url(../references/java_badge_square.png) transparent no-repeat;
    background-size: contain;
    background-position: center;
    margin: 15px;
}
.java-migration-course {
    height: 303px;
    width: 391px;
    max-width: 100vw;
    background: url(../references/bild-certificate-photo-java-migration.png) transparent no-repeat;
    background-size: contain;
    background-position: center;
}
@media screen and (min-width:480px) {
  .java-migration-course {
    margin: 20px;
	max-width: 95vw;
  }
}
.triangle {
    background-color: transparent;
    background-image: url(https://img.ceteras.de/triangle.jpg);
    height: 297px;
    width: 71%;
}
.ux-img {
    background-color: transparent;
    background-image: url(https://img.ceteras.de/frontend-ui-rawpixel-2023.png);
    height: 250px;
    max-width: 480px;
    width: 90%;
}

.block__teaser {
    padding: 15px;
}
.has-box-shadow {
    background-color: #fefefe;
    box-shadow: 10px 5px 5px #a76b;
}
.img-teaser {
    background-color: #cdcdcd;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
    border: none;
    margin: 20px 15px;
}
.img-teaser--s {
    height: 144px;
}
.img-backend {
    background-color: transparent;
	max-width: 93%;
}
.block__footer {
    padding-bottom: 40px;
    padding-right: 25px;
}
.footer--ux {
    padding-bottom: 19px;
}

/* medium and large display */
@media screen and (min-width:400px) {
  .margin-l-20 {
    margin-left: 20px;
  }
  .margin-l-30 {
    margin-left: 30px;
  }
  .margin-r-20 {
    margin-right: 20px;
  }
}

.padding-top-20 {
    padding-top: 20px !important;
}
.padding-top-40 {
    padding-top: 40px !important;
}
.submit {
    background-color: #d4a700;
    border-color: #d4a700;
    font-size: 24px;
    padding: 15px;
  }