.serviceblocks { position: relative; padding: 40px 0px; text-align: center; } .serviceblocks h1 { color: var(--pageForegroundAccent); font-family: monospace; font-size: 1.8em; } .serviceblock img { opacity: 1.0; filter: var(--illustrationFilter); -webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out; } .serviceblock img:hover { opacity: 0.5; } .servicetitle { font-family: monospace; font-size : 1.4em; color : var(--pageForeground); } .serviceblock p { font-family: open-sans,sans-serif; font-size: 1.0em; line-height: 1.2em; color: var(--pageForeground); } .serviceblock a:link, .serviceblock a:visited { color: var(--pageForeground); text-decoration: none; } .serviceblock a:hover { color: var(--pageForegroundInactive); text-decoration: none; } .contactblock { position: relative; background-color: var(--pageForegroundSubtile); text-align: center; } .contactinfo { margin-top: 40px; text-align: center; } .contactinfo a:link, .contactinfo a:visited { color: var(--pageForeground); text-decoration: none; } .contactinfo a:hover { color: var(--pageForegroundInactive); text-decoration: none; } .secline { margin: 0px 10px; height: 1.3em; overflow: hidden; } .seclineend { border-style: hidden hidden dashed hidden; border-color: var(--pageForegroundLow); border-width: 1px; margin-bottom: 3px; text-align: right; line-height: 1em; font-size: 0.8em; } @media (max-width: 500px) { .serviceblock { margin: 40px 40px; text-align: center; } .quoteblock { position: relative; width: 100%; background: url("quote_image_blur.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color: rgba(119, 186, 155, 0.5); padding: 60px 0px; text-align: center; filter: var(--headerFilter); } .quotetext { padding: 0px 50px; color: white; font-size: 2em; line-height: 1em; font-family: serif; text-shadow: 0px 0px 5px black; } .quotesource { padding: 20px 50px 0px 50px; color: white; font-size: 1em; line-height: 1em; font-family: serif; text-shadow: 0px 0px 5px black; } .contactblock { padding: 40px 14px; } .contactblock h1 { color: var(--pageForegroundAccent); font-family: monospace; font-size: 1.8em; margin-bottom: 40px; } .contactitem { display: block; text-align: center; padding: 0px 10px 10px 10px; } } /* end max-width 500px */ @media (min-width: 961px) { .serviceblock { position: relative; display: inline-block; vertical-align: text-top; width: 28%; width: calc(33% - 50px); max-width: 400px; padding: 40px 20px; text-align: center; } .quoteblock { position: relative; width: 100%; background: url("quote_image_blur_large.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color: rgba(119, 186, 155, 0.5); padding: 60px 0px; text-align: center; filter: var(--headerFilter); } .quotetext { padding: 0px 50px; color: white; font-size: 3em; line-height: 1em; font-family: serif; text-shadow: 0px 0px 5px black; } .quotesource { padding: 20px 50px 0px 50px; color: white; font-size: 1.3em; line-height: 1em; font-family: serif; text-shadow: 0px 0px 5px black; } .contactblock h1 { color: var(--pageForegroundAccent); font-family: monospace; font-size: 1.8em; margin-bottom: 40px; } .contactblock { padding: 40px 25px; } .contactitem { display: inline-block; width: 200px; text-align: center; padding: 0px 10px 10px 10px; } }   /* end 961px  */ @media (min-width: 501px) and (max-width: 960px) { .serviceblock { position: relative; vertical-align: text-top; margin: 40px 25px; text-align: left; } .serviceblock_image { display: inline-block; width: 120px; text-align: left; vertical-align: text-top; } .serviceblock_image img { margin: 0px; } .serviceblock_text { display: inline-block; vertical-align: text-top; width: calc(100% - 140px); padding: 0px 0px 0px 0px; } .quoteblock { position: relative; width: 100%; background: url("quote_image_blur_medium.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color: rgba(119, 186, 155, 0.5); padding: 60px 0px; text-align: center; filter: var(--headerFilter); } .quotetext { padding: 0px 50px; color: white; font-size: 2.5em; line-height: 1em; font-family: serif; text-shadow: 0px 0px 5px black; } .quotesource { padding: 20px 50px 0px 50px; color: white; font-size: 1.1em; line-height: 1em; font-family: serif; text-shadow: 0px 0px 5px black; } .contactblock h1 { color: var(--pageForegroundAccent); font-family: monospace; font-size: 1.8em; margin-bottom: 40px; } .contactblock { padding: 40px 25px; } .contactitem { display: inline-block; width: 200px; text-align: center; padding: 0px 10px 10px 10px; } }  /* en between 501 and 960  */ .servicelink a:link, .servicelink a:visited { font-family: open-sans,sans-serif; font-size: 0.8em; line-height: 1.2em; color: var(--pageForegroundSupport); text-decoration: none; } .servicelink a:hover { font-family: open-sans,sans-serif; font-size: 0.8em; line-height: 1.2em; color: var(--pageForegroundSupport); text-decoration: underline; } .quotetext::before { content: "\275D"; } .quotetext::after { content: "\275E"; } .socialmedia { color: white; background-color: var(--pageForeground); text-align: center; padding: 10px 0px; } .socialmedia img { margin: 0px 20px 0px 20px; opacity: 1.0; filter: alpha(opacity=100); -webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out; } .socialmedia img:hover { opacity: 0.5; filter: alpha(opacity=50); } @media print { .quotetext { color: var(--pageForeground); font-size: 1.5em; text-shadow: none; } .quotesource { color: var(--pageForeground); font-size: 1.1em; text-shadow: none; } .socialmedia { display: none; } }   /* print */