/* Minification failed. Returning unminified contents. (117,1): run-time error CSS1019: Unexpected token, found '@import' (117,9): run-time error CSS1019: Unexpected token, found 'url(https://fonts.googleapis.com/css?family=Open+Sans:400,700)' (1891,1): run-time error CSS1019: Unexpected token, found '@keyframes' (1892,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '50%' (1901,1): run-time error CSS1019: Unexpected token, found '@keyframes' (1902,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '50%' */ /* -------------------------------------------------------------------------- * Helpers /* -------------------------------------------------------------------------- */ /* * A collection of helper classes from h5bp.com. */ /* * Hide visually and from screen readers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* * Hide only visually, but have it available for screen readers: h5bp.com/v */ .visuallyhidden, .screen-reader-response { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* * Extends the .visuallyhidden class to allow the element to be focusable * when navigated to via the keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* * Hide visually and from screen readers, but maintain layout */ .invisible { visibility: hidden; } /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /* ------------------------------------------------------ * Helper - Text alignments /* ------------------------------------------------------ */ .text-center { text-align: center; } /* ------------------------------------------------------ * Helper - Responsive utilities /* ------------------------------------------------------ */ .hidden-xs { display: none !important; } img { max-width: 100%; height: auto; } @media screen and (min-width: 768px) { .hidden-xs { display: block !important; } .hidden-sm { display: none !important; } } @media screen and (min-width: 992px) { .hidden-md { display: none !important; } } /* -------------------------------------------------------------------------- * Base: Fonts /* -------------------------------------------------------------------------- */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700); @font-face { font-family: "the_sans_bold-regular"; src: url("../../../resources/fonts/TheSans_B2_700_Bold/TheSans_B2_700_.eot"); src: url("../../../resources/fonts/TheSans_B2_700_Bold/TheSans_B2_700_.eot?#iefix") format("embedded-opentype"), url("../../../resources/fonts/TheSans_B2_700_Bold/TheSans_B2_700_.woff") format("woff"), url("../../../resources/fonts/TheSans_B2_700_Bold/TheSans_B2_700_.svg#TheSans_B2_700_") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "the_sans-light"; src: url("../../../resources/fonts/TheSansLight/thesans_light_plain-webfont.eot"); src: url("../../../resources/fonts/TheSansLight/thesans_light_plain-webfont.eot?#iefix") format("embedded-opentype"), url("../../../resources/fonts/TheSansLight/thesans_light_plain-webfont.woff") format("woff"), url("../../../resources/fonts/TheSansLight/thesans_light_plain-webfont.svg#thesans_light_plain-webfont") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "the_sans-regular"; src: url("../../../resources/fonts/TheSans_B2_500_Plain/TheSans_B2_500_.eot"); src: url("../../../resources/fonts/TheSans_B2_500_Plain/TheSans_B2_500_.eot?#iefix") format("embedded-opentype"), url("../../../resources/fonts/TheSans_B2_500_Plain/TheSans_B2_500_.woff") format("woff"), url("../../../resources/fonts/TheSans_B2_500_Plain/TheSans_B2_500_.svg#TheSans_B2_500_") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "balticeye"; src: url("../../../resources/fonts/Balticeye/Balticeye.eot"); src: url("../../../resources/fonts/Balticeye/Balticeye.eot?#iefix") format("embedded-opentype"), url("../../../resources/fonts/Balticeye/Balticeye.woff") format("woff"), url('../font/fontello.ttf?79532953') format('truetype'), url("../../../resources/fonts/Balticeye/Balticeye.svg#Balticeye") format("svg"); font-weight: normal; font-style: normal; } /* -------------------------------------------------------------------------- * Base: Typography /* -------------------------------------------------------------------------- */ /* * Provides default styling for various HTML elements such as headings, * paragraphs, links, etc. */ body { font: 400 18px/28px 'Times New Roman', serif; background: #fff; color: #000; margin: 0; } body.startpage { background: #000; color: #fff; } /* ------------------------------------------------------ * Typography - Headings /* ------------------------------------------------------ */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'the_sans_bold-regular', sans-serif; margin: 0; font-weight: normal; font-style: normal; } h1, .h1 { margin-top: 31px; margin-bottom: 16px; font-size: 27px; line-height: 30px; margin-top: 0; } h2, .h2 { margin-top: 40px; margin-bottom: 20px; font-size: 25px; line-height: 27px; } h3, .h3 { margin-bottom: 10px; font-size: 22px; line-height: 25px; } h4, .h4 { margin-bottom: 10px; font-size: 20px; line-height: 22px; } h5, .h5 { font-size: 18px; } h6, .h6 { font-size: 17px; } /* ------------------------------------------------------ * Typography - Paragraphs, lists, etc. /* ------------------------------------------------------ */ /* * Sets up global margin between various block elements. */ p, ul, ol, pre, table, blockquote { margin-top: 0; margin-bottom: 26px; } b, strong, em, small, code { line-height: 1; } sup, sub { position: relative; top: -0.4em; vertical-align: baseline; } sub { top: 0.4em; } /* ------------------------------------------------------ * Typography - Lists /* ------------------------------------------------------ */ /* * Reset margins for nested lists. */ ul ul, ol ol, ul ol, ol ul { margin-top: 0; margin-bottom: 0; } /* Description lists */ dt { font-weight: bold; } dd { margin-left: 0; } /* ------------------------------------------------------ * Typography - Horizontal rules /* ------------------------------------------------------ */ hr { border: 0; border-top: 1px solid #ddd; margin: 13px 0; } /* ------------------------------------------------------ * Typography - Links /* ------------------------------------------------------ */ a { text-decoration: none; color: #f26666; transition: color .2s ease-out; } a:hover, a:focus { color: #000; text-decoration: none; } a:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } /* ------------------------------------------------------ * Typography - Tables /* ------------------------------------------------------ */ table { overflgow: hidden; max-width: 100%; table-layout: fixed; border-collapse: collapse; } table td, table th { border-top: 1px solid #ddd; vertical-align: top; padding: 7px 15px; font-size: 14px; line-height: 18px; } table thead th { padding-top: 10px; padding-bottom: 10px; } table tbody tr:nth-child(odd) td { background: rgba(0,0,0,.050); } /* -------------------------------------------------------------------------- * Balticeye-icon /* -------------------------------------------------------------------------- */ .card-widget .categories li.areatype1:before, .card-widget .categories li.areatype2:before, .card-widget .categories li.areatype3:before, .card-widget .categories li.areatype4:before { font-family: 'balticeye'; font-size: 25px; color: #fff; transition: color .5s ease-out; position: absolute; left: 0; top: 0; } .areatype1 .balticeye-icon:before, .areatype2 .balticeye-icon:before, .areatype3 .balticeye-icon:before, .areatype4 .balticeye-icon:before { display: block; font-family: 'balticeye'; font-size: 25px; height: 25px; width: 25px; } .article-jumbotron .areatype1:before, .article-jumbotron .areatype2:before, .article-jumbotron .areatype3:before, .article-jumbotron .areatype4:before, .simple-widget.areatype4 h3:before, .simple-widget.areatype2 h3:before, .simple-widget.areatype1 h3:before, .simple-widget.areatype3 h3:before { font-family: 'balticeye'; font-size: 40px; position: absolute; left: 0; right: 0; top: -24px; margin-left: auto; margin-right: auto; } .startpage .block-jumbotron h1:before, .startpage .block-jumbotron .read-more-links [data-category="areatype-4"]:before, .block-jumbotron .read-more-links [data-category="areatype-3"]:before, .block-jumbotron .read-more-links [data-category="areatype-2"]:before, .block-jumbotron .read-more-links [data-category="areatype-1"]:before, .pagetype-overview .areatype1 h1:before, .pagetype-overview .areatype2 h1:before, .pagetype-overview .areatype3 h1:before, .pagetype-overview .areatype4 h1:before, .simple-widget.areatype4 h3:before, .simple-widget.areatype2 h3:before, .simple-widget.areatype1 h3:before, .simple-widget.areatype3 h3:before { font-family: 'balticeye'; font-size: 60px; position: absolute; left: 0; right: 0; top: -37px; margin-left: auto; margin-right: auto; } .pagetype-overview .areatype1 h1:before, .simple-widget.areatype4 h3:before, .simple-widget.areatype2 h3:before, .simple-widget.areatype1 h3:before, .simple-widget.areatype3 h3:before { top: -55px; } .block-jumbotron .read-more-links a, .block-jumbotron .read-more-links [data-category="areatype-4"]:before, .block-jumbotron .read-more-links [data-category="areatype-3"]:before, .block-jumbotron .read-more-links [data-category="areatype-2"]:before, .block-jumbotron .read-more-links [data-category="areatype-1"]:before { text-decoration: none; -webkit-transition: all 200ms ease-in; -webkit-transform: scale(1); -ms-transition: all 200ms ease-in; -ms-transform: scale(1); -moz-transition: all 200ms ease-in; -moz-transform: scale(1); transition: all 200ms ease-in; transform: scale(1); } .block-jumbotron .read-more-links [data-category="areatype-4"], .block-jumbotron .read-more-links [data-category="areatype-4"]:before { color: #b768db; } .block-jumbotron .read-more-links [data-category="areatype-3"], .block-jumbotron .read-more-links [data-category="areatype-3"]:before { color: #f78b31; } .block-jumbotron .read-more-links [data-category="areatype-2"], .block-jumbotron .read-more-links [data-category="areatype-2"]:before { color: #40d38c; } .block-jumbotron .read-more-links [data-category="areatype-1"], .block-jumbotron .read-more-links [data-category="areatype-1"]:before { color: #39a6ce; } .block-jumbotron .read-more-links [data-category="areatype-1"]:hover:before, .block-jumbotron .read-more-links [data-category="areatype-2"]:hover:before, .block-jumbotron .read-more-links [data-category="areatype-3"]:hover:before, .block-jumbotron .read-more-links [data-category="areatype-4"]:hover:before { -webkit-transition: all 200ms ease-in; -webkit-transform: scale(1.09); -ms-transition: all 200ms ease-in; -ms-transform: scale(1.09); -moz-transition: all 200ms ease-in; -moz-transform: scale(1.09); transition: all 200ms ease-in; transform: scale(1.09); } /* Show logo in jumbotron on startpage */ .startpage .block-jumbotron h1:before { content: "\e80a"; top: -57px; font-size: 55px; } .block-researcher .block-jumbotron h1:before, .content .block-jumbotron h1:before { content: ""; top: 0; } .card-widget .categories li.areatype1:before, .article-jumbotron .areatype1:before, .block-jumbotron .read-more-links [data-category="areatype-1"]:before, .areatype1 .balticeye-icon:before, .pagetype-overview .block-pageheader .areatype1 h1:before, .simple-widget.areatype1 h3:before { content: "\e807"; } .card-widget .categories li.areatype2:before, .article-jumbotron .areatype2:before, .block-jumbotron .read-more-links [data-category="areatype-2"]:before, .areatype2 .balticeye-icon:before, .pagetype-overview .block-pageheader .areatype2 h1:before, .simple-widget.areatype2 h3:before { content: "\e80c"; } .card-widget .categories li.areatype3:before, .article-jumbotron .areatype3:before, .block-jumbotron .read-more-links [data-category="areatype-3"]:before, .areatype3 .balticeye-icon:before, .pagetype-overview .block-pageheader .areatype3 h1:before, .simple-widget.areatype3 h3:before { content: "\e80b"; } .card-widget .categories li.areatype4:before, .article-jumbotron .areatype4:before, .block-jumbotron .read-more-links [data-category="areatype-4"]:before, .areatype4 .balticeye-icon:before, .pagetype-overview .block-pageheader .areatype4 h1:before, .simple-widget.areatype4 h3:before { content: "\e800"; } /* -------------------------------------------------------------------------- * Typography - Media queries /* -------------------------------------------------------------------------- */ @media screen and (min-width: 768px) { h1, .h1 { font-size: 65px; line-height: 67px; letter-spacing: -3px; margin-bottom: 20px; } /* Show logo in jumbotron on startpage */ .startpage .block-jumbotron h1:before { top: -80px; } } /* ----------------------------------------------------------------------------- * Buttons * ----------------------------------------------------------------------------- * * Commonly used buttons throughout the project. * The base class `btn` is mostly applied to * * /* -------------------------------------------------------------------------- */ /* ------------------------------------------------------ * Base: Button * ------------------------------------------------------ * * This is the base button that is required to add for all kinds of buttons to * work properly. * * 1. Remove the tap highlight color for Webkit/Chrome. * 2. Disable text selection on buttons users will touch. * Remember: You should be cautious not to disable user selection if the * information on the element may be useful to the user (phone number, e-mail * address, and so on). * /* ------------------------------------------------------ */ .btn { font-family: "the_sans-light", sans-serif; display: inline-block; padding: 10px 20px; margin: 0; border: 0; border-radius: 0; background: none; font-size: 18px; line-height: 26px; text-decoration: none; vertical-align: middle; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; /* 1 */ -webkit-user-select: none; /* 2 */ -moz-user-select: none; /* 2 */ -ms-user-select: none; /* 2 */ transition: all 0.25s ease; } .btn:hover, .btn:focus { text-decoration: none; } .btn:active { outline: 0; background-image: none; -webkit-box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.15); box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.15); } .disabled, .btn[disabled] { opacity: .65; pointer-events: none; } /* ------------------------------------------------------ * Modifier: Default button * ------------------------------------------------------ * * Main turquoise theme button. * * Example usage: * * * Default button * /* ------------------------------------------------------ */ .btn--default { background: #41c9ac; color: #000; } .btn--default:hover, .btn--default:focus { background: #38b096; } /* ------------------------------------------------------ * Modifier: Secondary button * ------------------------------------------------------ * * A transparent button that sets a turquoise colored text with an underline. * * Example usage: * * * Secondary button * /* ------------------------------------------------------ */ .btn--secondary { text-decoration: underline; background-color: transparent; color: #41c9ac; } .btn--secondary:hover, .btn--secondary:focus { text-decoration: none; } .btn--secondary:active { -webkit-box-shadow: none; box-shadow: none; } /* ------------------------------------------------------ * Modifier: Secondary button * ------------------------------------------------------ * * A transparent button that sets a turquoise colored text with an underline. * * Example usage: * *
* Button with lines on the side *
* /* ------------------------------------------------------ */ .line-on-sides { display: block; overflow: hidden; } .line-on-sides .btn { position: relative; display: inline-block; } .line-on-sides .btn:before, .line-on-sides .btn:after { content: ''; position: absolute; top: 50%; width: 600px; height: 1px; margin-top: -1px; background-color: #985dfb; } .line-on-sides .btn:before { right: 100%; margin-right: 10px; } .line-on-sides .btn:after { left: 100%; margin-left: 10px; } /* ------------------------------------------------------ * Modifier: Small button * ------------------------------------------------------ * * Example usage: * * * Small button * /* ------------------------------------------------------ */ .btn--small { padding: 10px 15px; } /* ------------------------------------------------------ * Modifier: Block button * ------------------------------------------------------ * * Makes the button behaves like a block, spans the full * width of the parent element. * * Example usage: * * * Block button * /* ------------------------------------------------------ */ .btn--block { display: block; width: 100%; } .btn--xs-block { display: block; width: 100%; } /* -------------------------------------------------------------------------- * Media queries: Buttons /* -------------------------------------------------------------------------- */ @media screen and (min-width: 768px) { .btn--xs-block { display: inline-block; width: auto; } } /* ----------------------------------------------------------------------------- * Toggle search button * ----------------------------------------------------------------------------- */ .main-nav-menu a.button-toggle-search { position: relative; padding-right: 22px; } .button-toggle-search::after { content: "\e801"; font-family: "balticeye"; font-size: 21px; padding-left: 2px; position: absolute; right: 1px; top: -12px; } .button-toggle-search.close-search:after { content: "\e90f"; font-size: 27px; top: -2px; right: 1px; } /* ----------------------------------------------------------------------------- * Searchform * ----------------------------------------------------------------------------- */ .searchform-wrapper { background: #FFF; padding-top: 190px; height: 100vh; position: absolute; width: 100%; top: 86px; left: 0; z-index: 1000; display: none; } .searchform-holder { width: 500px; max-width: 100%; margin: 0 auto; padding: 0 20px; } .searchform { position: relative; border-bottom: 1px solid #454545; } .searchform .search-field { background: none; color: #b9b8b8; font-family: "the_sans-light"; font-size: 30px; border: 0; display: block; width: 100%; padding-right: 40px; } .searchform .search-field:focus { outline: none; } .searchform .search-submit { position: absolute; bottom: 10px; right: 0; padding: 0; font-size: 30px; } .searchform .search-submit:focus { outline: none; } .searchform .search-submit:before { font-family: 'balticeye'; content: "\e801"; } @media screen and (max-width: 767px) { .searchform .search-field { font-size: 20px; } .searchform .search-submit { font-size: 25px; bottom: 8px; } } /* ----------------------------------------------------------------------------- * Search result page * ----------------------------------------------------------------------------- */ .pagetype-search .searchform-holder { margin-bottom: 80px; } .search-query { font-family: "the_sans-light"; font-size: 25px; text-align: center; margin-bottom: 20px; } .search-query-text { font-family: "the_sans-regular"; font-size: 40px; line-height: 1; font-style: italic; } /* ----------------------------------------------------------------------------- * Nav search * ----------------------------------------------------------------------------- */ .menu-search-form { display: none; z-index: 2500; position: fixed; left: 0; width: 100%; top: 75px; } .menu-search-form .searchform { padding: 20px 25px 20px 15px; border-top: 1px solid #454545; } .menu-search-form .search-field { color: #FFF; } .menu-search-form .searchform .search-submit { right: 27px; bottom: 24px; } .menu-search-form .searchform .search-submit:before { color: #FFF; } @media screen and (max-width: 767px){ .menu-item-search { display: none; } } @media screen and (min-width: 767px) { .button-toggle-search:after { font-size: 25px; } .button-toggle-search:after { top: -5px; right:3px; } html:lang(en) .button-toggle-search:after { right: 17px; } } .teaser-widget { background-color: transparent; background-position: center top; background-size: cover; height: 100%; overflow: hidden; position: relative; } .teaser-widget-content { color: #fff; text-align: center; position: absolute; bottom: 0; left: 0; right: 0; } .generic-second .teaser-widget-content { color: #000; } .teaser-widget-content .container { max-width: 610px; } .teaser-widget p { font-family: "the_sans-regular", sans-serif; } /* Full size teaser */ /* Admin - Set px height in admin instead of vh */ .epi-editContainer .teaser-widget--full, .epi-cardContainer .teaser-widget--full, .epi-injected-minSize .teaser-widget--full{ height: 768px !important; min-height: 768px !important; background-position: center center; } .teaser-widget--full { font-family: 'the_sans_bold-regular', sans-serif; height: auto; width: 100%; min-height: 450px; min-height: calc(100vh - 75px); height: calc(100vh - 75px); /* Lade till denna pga Firefox */ display: table; } .teaser-widget--full .center-teaser-wrapper { background-color: rgba(0,0,0,0.3); padding: 100px 0; display: table-cell; vertical-align: middle; height: 100%; } .teaser-widget--full .center-teaser-wrapper .teaser-widget-content{ position: static; top: auto; bottom: auto; left: auto; right: auto; } .teaser-widget--full .teaser-widget-title { margin-bottom: 14px; } .teaser-widget--full .teaser-widget-text { font: 700 18px/1.4 "Open Sans Condensed","Helvetica Neue",Helvetica,Arial,sans-serif; margin-bottom: 21px; } /* Top header full size teaser */ .site-content > .block > .teaser-widget--full .center-teaser-wrapper { padding: 30px 0 0px; position: relative; z-index: 100; } .site-content > .block > .teaser-widget--full:after { content: ''; position: absolute; left: 0; bottom: 0; height: 500px; width: 100%; background-image: -webkit-linear-gradient(top,transparent 50%,rgba(0,0,0,1)100%); background-image: linear-gradient(to bottom,transparent 50%,rgba(0,0,0,1)100%); } /* Small teaser */ .teaser-widget--small { height: 250px; display: table; } .teaser-widget--small .teaser-widget-content { padding-bottom: 25px; } .teaser-widget--small .teaser-widget-title { margin-bottom: 10px; } .teaser-widget--small .teaser-widget-text { margin-bottom: 18px; } /* Small relative teaser (fixed height) */ .teaser-widget--small.teaser-widget-fixed { height: 130px; } /* Read more arrow */ .teaser-widget--arrow:before { -webkit-animation: 2s ease 0s normal none infinite running animateArrow; -moz-animation: 2s ease 0s normal none infinite running animateArrow; -o-animation: 2s ease 0s normal none infinite running animateArrow; animation: 2s ease 0s normal none infinite running animateArrow; border: 0 none; color: #fff; content: "\e80d"; font-family: "balticeye" !important; font-size: 10px; font-style: normal !important; font-variant: normal !important; font-weight: normal !important; left: 49.7%; line-height: 16px; margin: -32px 0 0 -8px; pointer-events: none; position: absolute; text-transform: none !important; top: 100%; z-index: 1; width: 22px; display:none; } .scroll-down-link { left: 49.7%; margin: -45px 0 0 -10px; position: absolute; top: 100%; z-index: 1000; width: 27px; height: 28px; cursor: pointer; opacity: 0; } .startpage .teaser-widget h1 { text-transform: uppercase; margin-top: 80px; } .content .block-jumbotron { margin-bottom: 100px; margin-top: 100px; } .content .teaser-widget h1 { text-transform: inherit; } .content .teaser-widget .body p { font-size: 20px; } .content .teaser-widget--arrow:before { display: none; } .content .teaser-widget h1 { text-transform: inherit; } .teaser-widget .btn { color: #fff; text-transform: uppercase; } /* Jumbotron block - startpage + article page + block in article content*/ .block-jumbotron { background-color: #aaa; } .block-jumbotron h1 { position: relative; } .block-jumbotron .read-more-links ul { list-style: none; padding-left: 0; text-transform: uppercase; } .block-jumbotron .read-more-links li { display: inline-block; padding: 10px; position: relative; white-space: nowrap; margin-top: 65px; min-width: 105px; margin-bottom: 15px; } .block-jumbotron .teaser-widget-content .container { /* max-width: 700px;*/ max-width: 710px; } .block-jumbotron .lowertext { font-family: "the_sans-light", sans-serif; position: absolute; bottom: 40px; color: #fff; text-transform: uppercase; left: 0; right: 0; z-index: 1; display:none; } .block-jumbotron .teaser-widget p { font-family: "the_sans-light", sans-serif; } p.date-created { font-family: "Open Sans",sans-serif !important; font-size: 20px; font-weight: 400; line-height: 30px; padding: 0 15px -12px 15px; position: relative; } .article-header p.date-created { position: absolute; top: -40px; left: 0; right: 0; } .article-jumbotron h2.teaser-widget-title { position: relative; margin-bottom: 42px; font-size: 27px; line-height: 30px; text-transform: uppercase; } .article-jumbotron h2:after, .article-jumbotron .date-created:after, .content .date-created:after { background-color: #bdbdbd; bottom: -3px; content: ""; height: 1px; left: 0; margin-left: auto; margin-right: auto; position: absolute; right: 0; width: 125px; } .article-jumbotron h2:after { bottom: -27px; width: 100%; } .content .date-created { font-size: 18px; text-align: center; margin-bottom: -15px; } .content .date-created:after { background-color: #000; } .article-jumbotron .read-more-links ul { margin-top: 88px; } .article-jumbotron .read-more-links a { position: relative; } .teaser-widget--full .read-more-links { font-size: 13px; line-height: 15px; } .bottom-arrow { position: relative; } .bottom-arrow:before { border-bottom: 12px solid #fff; border-left: 12px solid transparent; border-right: 12px solid transparent; content: ""; display: block; height: 0; margin: -10px auto 0; position: absolute; width: 0; z-index: 110; left: 49.2%; bottom: 0; } /* Card + Statistic block */ .article-contentarea .block-statisticteaser, .preview .block-statisticteaser { /* epiadmin */ margin-top: 60px; margin-bottom: 50px; height:auto; } .article-contentarea .block-statisticteaser .widget, .preview .block-statisticteasegr .widget { /* epiadmin */ padding-top: 150px; padding-bottom: 150px; cursor: pointer; } .block-articlefilterlist h3 { font-size: 25px; margin-bottom: 15px; } .block-teaser-container h2, .block-articlefilterlist h2, .block-articlefilterlist h3 { text-align: center; text-transform: uppercase; } .block-teaser-container .block h2, .block-articlefilterlist .block h2, .block-articlefilterlist .block h3 { text-align: left; } .block-scalable, .cards-wrapper .block { height: 415px; padding: 3px 0; overflow: hidden; } .block-scalable.col-lg-12 { height:600px !important; } /* Full width teaser on overview page */ .cards-wrapper .block.displaymode-full { height: 500px; } /* Small teaser block */ .small-container.cards-wrapper .block { height: 320px; } /* Widgets */ .cards-wrapper .widget { font-family: "the_sans-regular", sans-serif; background-color: #000; height: 100%; width: 100%; } .widget > a, .widget { color: #fff; text-decoration: none; display: block; width: 100%; height: 100%; } .widget p { font-size: 14px; line-height: 20px; } .widget p:last-child { margin-bottom: 0; } .cards-wrapper .widget-content, .article-contentarea .widget-content, .preview .statisticteaser-widget .widget-content { /* epiadmin */ position: relative; height: 100%; width: 100%; } .article-contentarea .flip-wrapper .flip-item:last-child, .container.medium-container .flip-wrapper .flip-item:last-child { display:none; } /* Simple hover */ .widget.simple-hover a { transition: color .2s ease-out; } .widget.simple-hover a:hover { color: #525252; color: rgba(0,0,0,0.6); } /* Simple widget */ .simple-widget { text-align: center; } /* Center simple widget content vertically */ .simple-widget .widget-content { display: table; padding: 0 30px; } .simple-widget .widget-content-inner { display: table-cell; vertical-align: middle; } /* Simple widget for focus areas */ .simple-widget.areatype4 { background: #B768DB; } .simple-widget.areatype2 { background: #40D38C; } .simple-widget.areatype1 { background: #39A6CF; } .simple-widget.areatype3 { background: #F58B3D; } .simple-widget.areatype4 h3, .simple-widget.areatype2 h3, .simple-widget.areatype1 h3, .simple-widget.areatype3 h3 { font-family: 'the_sans-regular'; text-transform: uppercase; font-size: 25px; position: relative; margin-top: 75px; } .cards-wrapper .twitter-widget a:hover { color: #883535; } /* Widget width background animation on hover */ .bg-anim-widget { position: relative; width: 100%; height: 100%; overflow: hidden; } .bg-anim-widget .background-holder { width: 100%; height: 100%; background-size: cover; background-position: center center; position: absolute; top: 0; left: 0; -moz-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); } .bg-anim-widget .background-holder:after { content: ''; display: block; width: 100%; height: 100%; background-image: -webkit-linear-gradient(top,transparent 40%,rgba(0,0,0,1)100%); background-image: linear-gradient(to bottom,transparent 40%,rgba(0,0,0,1)100%); } .bg-anim-widget:hover .background-holder { -moz-transform: scale(1.02,1.02); -webkit-transform: scale(1.02,1.02); transform: scale(1.02,1.02); } /* Card widget */ .block .card-widget { position: relative; } .preview .block .card-widget { width: 413px; height: 413px; } .card-widget .widget-content-inner { font-family: "the_sans-light", sans-serif; text-transform: uppercase; padding: 0 30px 25px; max-width: 450px; position: absolute; left: 0; bottom: 0; } .card-widget .article-type, .card-widget .time-to-read { margin-bottom: 0px; font-size: 13px; line-height: 17px; text-transform: uppercase; } .card-widget .time-to-read .minutes { font-family: "Open Sans", sans-serif; } .card-widget h2, .card-widget h3 { font-family: "the_sans-regular"; font-size: 20px; line-height: 23px; margin-bottom: 0; margin-top: 0; } .card-widget .categories { margin-bottom: 8px; margin-top: 8px; list-style-type: none; padding-left: 0; } .card-widget .categories li { font-size: 15px; margin-right: 6px; display:inline; /* for teasers icon floating side by side */ position: relative; padding-left: 26px; padding-top: 1px; height: 30px; } .card-widget .categories li span { display: none; padding-left: 8px; } .card-widget .categories.single-category li span { display: inline; font-family: "the_sans-regular"; } .card-widget.areatype1 a .balticeye-icon:before, .card-widget.areatype2 a .balticeye-icon:before, .card-widget.areatype3 a .balticeye-icon:before, .card-widget.areatype4 a .balticeye-icon:before { padding-bottom: 32px; } .card-widget .categories li.areatype1, .card-widget .categories li.areatype1:before { color: #39A6CF; } .card-widget .categories li.areatype2, .card-widget .categories li.areatype2:before { color: #40D38C; } .card-widget .categories li.areatype3, .card-widget .categories li.areatype3:before { color: #F58B3D; } .card-widget .categories li.areatype4, .card-widget .categories li.areatype4:before { color: #B768DB; } /* Statistic teaser widget */ .article-contentarea .statisticteaser-widget .widget-content { max-width: 688px; margin: auto; } .statisticteaser-widget h2 { font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 700; font-size: 70px; line-height: 60px; margin-bottom: 20px; margin-top: 0px; } .statisticteaser-widget p { font-family: "the_sans-regular",sans-serif; font-size: 16px; line-height: 22px; } .statisticteaser-widget .link { font-size: 20px; } .statisticteaser-widget .link:before { font-size: 60px; height: 60px; margin: 20px auto -3px auto; width: 60px; } .block .statisticteaser-widget.two .doughnutChart { width: 50%; float: left; position: relative; margin-bottom: 30px; } .block .statisticteaser-widget .doughnutChart span { bottom: -20px; display: block; position: absolute; text-align: center; width: 100%; } .block .statisticteaser-widget.two h3, .block .statisticteaser-widget.two p { clear: both; max-width: 400px; } .statisticteaser-widget .canvas-wrapper { margin-left: auto; margin-right: auto; } /* Twitter widget */ .cards-wrapper .twitter-widget { background-color: #f26666; overflow: hidden; } .twitter-widget .social-media-title { display: none; } .twitter-widget .social-media-content { max-width:600px; margin:0 auto; } .twitter-widget .social-media-content:before { font-family: 'balticeye'; content: "\e803"; font-size: 43px; margin-bottom: 30px; display: block; } .twitter-widget p { font-family: "the_sans-regular",sans-serif; font-size: 16px; line-height: 22px; } .twitter-widget p:last-child { color: #883535; } /* Link list block */ .linklist-widget .row { border: solid 1px #ddd; padding: 40px; margin-top: 35px; margin-bottom: 25px; } .linklist-widget h2 { margin-top: 8px; } .linklist-widget h2:before { content: "\e805"; font-family: 'balticeye'; padding-right: 5px; } .linklist-widget ul { font-family: 'the_sans-regular', sans-serif; list-style: none; font-size: 14px; line-height: 20px; margin-bottom: 0; padding-left: 0; } .linklist-widget li { margin-bottom: 12px; } /* Researcher and feature coworker block */ .researcher-jumbotron .teaser-widget-content .container { max-width: 650px; } .researcher-jumbotron img, .feature-jumbotron img { border-radius: 50%; height: 200px; } .researcher-jumbotron h1.teaser-widget-title, .feature-jumbotron h2 { font-family: "the_sans-regular"; font-size: 40px; line-height: 1; letter-spacing: 0; margin: 9px 0 0; text-transform: uppercase; } .feature-jumbotron h2 { font-size: 23px; margin-top: 4px; } .researcher-jumbotron P { font-size: 20px; line-height: 26px; } .researcher-jumbotron .byline, .feature-jumbotron .byline { margin-bottom: 10px; text-transform: uppercase; } .feature-jumbotron .byline { font-size: 11px; position: relative; margin-bottom: 27px; line-height: 23px; } .researcher-jumbotron .coworker-contact-info { font-family: "the_sans-light"; margin-bottom: 40px; position: relative; font-size: 14px; } .researcher-jumbotron .coworker-contact-info:after, .feature-jumbotron .byline:after { background-color: #fff; bottom: -20px; content: ""; height: 1px; left: 0; margin-left: auto; margin-right: auto; position: absolute; right: 0; } .researcher-jumbotron .personal-info { font-family: "the_sans-light"; max-width: 500px; margin: 0 auto; } .feature-jumbotron .feature-metadata { font-family: "the_sans-light"; font-size: 19px; text-transform: uppercase; } .feature-jumbotron .feature-metadata ul { list-style: none; display: inline-block; margin-bottom: 15px; } .feature-jumbotron .feature-metadata li { position: relative; display: inline-block; padding-right: 10px; margin-right: 5px; } .feature-jumbotron .feature-metadata li:after { content: ''; position: absolute; width: 1px; background: #FFF; height: 16px; right: 0; top: 50%; margin-top: -8px; } .feature-jumbotron blockquote { font-size: 40px; line-height: 46px; font-style: italic; margin: 0; } .feature-jumbotron blockquote:before { display: none; } .statisticteaser-widget.areatype1 { background-color: #39A6CF; } .statisticteaser-widget.areatype2 { background-color: #40D38C; } .statisticteaser-widget.areatype3 { background-color: #F58B3D; } .statisticteaser-widget.areatype4 { background-color: #B768DB; } .statisticteaser-widget .doughnutChart:after { border-bottom: 7px solid black; border-left: 7px solid transparent; border-right: 7px solid transparent; content: ""; display: block; height: 0; margin: -11px auto 0 auto; position: relative; width: 0; z-index: 10; } .container.medium-container .cards-wrapper .block-statisticteaser { margin:0 0 40px 0; } .container.medium-container .cards-wrapper .statisticteaser-widget { float: none; height: 421px; margin: 0 auto 40px; max-width: 650px; } /* Teaser card background colors */ .card-widget { background-color: #ccc; } .card-widget.generic-first { background-color: #ccc; } .card-widget.generic-second { background-color: #fff; } .card-widget.areatype1 { background-color: #61b8d8; } .card-widget.areatype2 { background-color: #c587e2; } .card-widget.areatype3 { background-color: #68dca4; } .card-widget.areatype4 { background-color: #f7a673; } .statisticteaser-widget.areatype1 .doughnutChart:after { border-bottom: 8px solid #39A6CF; } .statisticteaser-widget.areatype2 .doughnutChart:after { border-bottom: 8px solid #40D38C; } .statisticteaser-widget.areatype3 .doughnutChart:after { border-bottom: 8px solid #F58B3D; } .statisticteaser-widget.areatype4 .doughnutChart:after { border-bottom: 8px solid #B768DB; } @keyframes animateArrow { 50% { opacity: 0; transform: translateY(-75%); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes animateArrow { 50% { opacity: 0; transform: translateY(-75%); } 100% { opacity: 1; transform: translateY(0px); } } @media screen and (min-width: 568px) { .cards-wrapper .block { padding: 3px; } } @media screen and (min-width: 768px) { .block-jumbotron { overflow:hidden; } .block-jumbotron .read-more-links li { margin-bottom: 0; } /* Top header full size teaser */ .site-content > .block-jumbotron > .teaser-widget--full .center-teaser-wrapper { padding-bottom: 60px; } .teaser-widget--full .teaser-widget-title { font-size: 60px; letter-spacing: -3px; line-height: 67px; margin-bottom: 10px; } .teaser-widget--small { height: 550px; } .teaser-widget--small .teaser-widget-title { font-size: 45px; } .article-contentarea .block-statisticteaser, .preview .block-statisticteaser { /* epiadmin */ margin-top: 120px; margin-bottom: 110px; height:auto; } .article-contentarea .block-statisticteaser .widget, .preview .block-statisticteaser .widget { /* epiadmin */ padding-top: 300px; padding-bottom: 300px; } .statisticteaser-widget h2 { font-size: 100px; line-height: 60px; } .content .teaser-widget .body p { font-size: 32px; } .block-jumbotron .lowertext, .teaser-widget--arrow:before { display:block; } /* Small relative teaser (fixed height) */ .teaser-widget--small.teaser-widget-fixed { height: 250px; } } .article-content-block { padding-bottom: 20px; } .article-content-image { display: block; margin-left: auto; margin-right: auto; } .block-teaserlist { margin-bottom: 40px; } /* * Teaser card background colors */ .overview-jumbotron, .article-jumbotron { background-color: #ccc; } .generic-first { background-color: #ccc; } .generic-second { background-color: #fff; } .overview-jumbotron.areatype1, .article-jumbotron.areatype1 { background-color: #61b8d8; } .overview-jumbotron.areatype2, .article-jumbotron.areatype2 { background-color: #c587e2; } .overview-jumbotron.areatype3, .article-jumbotron.areatype3 { background-color: #68dca4; } .overview-jumbotron.areatype4, .article-jumbotron.areatype4 { background-color: #f7a673; } .generic-first .center-teaser-wrapper, .generic-second .center-teaser-wrapper { background: none; } /* * Overview page, Blogpostcategory page */ .pagetype-overview .block-pageheader { padding-top: 240px; } .pagetype-blogpostcategory .block-pageheader { padding-top: 0; } .pagetype-overview .block-pageheader .generic-first .read-more-links, .pagetype-blogpostcategory .block-pageheader .generic-first .read-more-links { display: none; } .pagetype-overview .block-pageheader .teaser-widget, .pagetype-blogpostcategory .block-pageheader .teaser-widget { overflow:auto; width: 100% } .pagetype-overview .block-pageheader .teaser-widget-content, .pagetype-blogpostcategory .block-pageheader .teaser-widget-content { font-family: "the_sans-regular", sans-serif; color: #000; font-size: 16px; } .pagetype-overview .block-pageheader p, .pagetype-blogpostcategory .block-pageheader p { margin-bottom: 35px; } .pagetype-overview .block-pageheader .areatype1 h1, .pagetype-blogpostcategory .block-pageheader .areatype1 h1, .pagetype-overview .block-pageheader .areatype2 h1, .pagetype-blogpostcategory .block-pageheader .areatype2 h1, .pagetype-overview .block-pageheader .areatype3 h1, .pagetype-blogpostcategory .block-pageheader .areatype3 h1, .pagetype-overview .block-pageheader .areatype4 h1, .pagetype-blogpostcategory .block-pageheader .areatype4 h1 { position: relative; padding-top: 65px; } .pagetype-overview .block-pageheader h1:before, .pagetype-blogpostcategory .block-pageheader h1:before { top: 0; } .pagetype-overview .block-pageheader .areatype1 h1:before, .pagetype-blogpostcategory .block-pageheader .areatype1 h1:before { color: #39a6ce; } .pagetype-overview .block-pageheader .areatype2 h1:before, .pagetype-blogpostcategory .block-pageheader .areatype2 h1:before { color: #40d38c; } .pagetype-overview .block-pageheader .areatype3 h1:before, .pagetype-blogpostcategory .block-pageheader .areatype3 h1:before { color: #f58b3d; } .pagetype-overview .block-pageheader .areatype4 h1:before, .pagetype-blogpostcategory .block-pageheader .areatype4 h1:before { color: #b768db; } .pagetype-overview .block-pageheader .read-more a, .pagetype-blogpostcategory .block-pageheader .read-more a { color: #FFF; background: #000; display: inline-block; padding: 10px 15px; cursor: pointer; } .pagetype-overview .block-pageheader .areatype1 .read-more a, .pagetype-blogpostcategory .block-pageheader .areatype1 .read-more a { background: #39a6ce; } .pagetype-overview .block-pageheader .areatype2 .read-more a, .pagetype-blogpostcategory .block-pageheader .areatype2 .read-more a { background: #40d38c; } .pagetype-overview .block-pageheader .areatype3 .read-more a, .pagetype-blogpostcategory .block-pageheader .areatype3 .read-more a { background: #f58b3d; } .pagetype-overview .block-pageheader .areatype4 .read-more a, .pagetype-blogpostcategory .block-pageheader .areatype4 .read-more a { background: #b768db; } .overview-jumbotron .teaser-widget-content .body span { line-height:25px; } .pagetype-blogpostcategory .teaser-widget-content { position:relative; margin-top:50px; } @media screen and (min-width: 380px) { .pagetype-overview .block-pageheader { padding-top: 200px; } } @media screen and (min-width: 480px) { .pagetype-overview .block-pageheader { padding-top: 150px; } } @media screen and (min-width: 768px) { .pagetype-overview .block-pageheader, .pagetype-blogpostcategory .block-pageheader { margin-bottom: 20px; padding-top: 0; } .pagetype-overview .block-pageheader .teaser-widget-content, .pagetype-blogpostcategory .block-pageheader .teaser-widget-content { font-size: 20px; } .pagetype-overview .block-pageheader .areatype1 h1, .pagetype-blogpostcategory .block-pageheader .areatype1 h1, .pagetype-overview .block-pageheader .areatype2 h1, .pagetype-blogpostcategory .block-pageheader .areatype2 h1, .pagetype-overview .block-pageheader .areatype3 h1, .pagetype-blogpostcategory .block-pageheader .areatype3 h1, .pagetype-overview .block-pageheader .areatype4 h1, .pagetype-blogpostcategory .block-pageheader .areatype4 h1 { font-size: 65px; padding-top: 80px; padding-bottom: 15px; } .pagetype-overview .block-pageheader .read-more a, .pagetype-blogpostcategory .block-pageheader .read-more a { padding: 25px 30px; transition: opacity .2s ease-out; } .pagetype-overview .block-pageheader .areatype1 .read-more a:hover, .pagetype-blogpostcategory .block-pageheader .areatype1 .read-more a:hover, .pagetype-overview .block-pageheader .areatype2 .read-more a:hover, .pagetype-blogpostcategory .block-pageheader .areatype2 .read-more a:hover, .pagetype-overview .block-pageheader .areatype3 .read-more a:hover, .pagetype-blogpostcategory .block-pageheader .areatype3 .read-more a:hover, .pagetype-overview .block-pageheader .areatype4 .read-more a:hover, .pagetype-blogpostcategory .block-pageheader .areatype4 .read-more a:hover { opacity: 0.8; } .teaser-widget-content { top:105px; } } .blogpost-jumbotron { height: auto; min-height: auto; background: rgba(0, 0, 0, 0) url("/resources/images/gradient-bg.jpg") repeat-x scroll 0 0 / contain; } .blog-jumbotron { height: auto; min-height: auto; background: rgba(0, 0, 0, 0) url("/resources/images/gradient-large-bg.jpg") repeat-x scroll 0 0 / contain; } .blogpost-jumbotron .container img { width:70px; border-radius:70%; } .blogpost-jumbotron .center-teaser-wrapper { padding:35px 0 10px; } .blogpost-jumbotron .blog-name { margin-bottom:15px; } .blogpost-jumbotron .blog-name a { font-size:20px; color:#fff; text-transform:uppercase; } .blog-jumbotron .article-social-share .share a:before { color:#fff; } .pagetype-blog .teaser-widget--full .center-teaser-wrapper { padding-bottom:30px; padding-top:40px; } .pagetype-blog .container img { width:90px; border-radius:70%; } .pagetype-blog .teaser-widget-title { color: #fff; font-size: 22px; letter-spacing: -1px; line-height: 1.1; margin-bottom: 0; margin-top: 8px; text-transform: uppercase; } .pagetype-blog .byline { text-transform: uppercase; margin-top:0px; font-size:15px; margin-bottom: 10px; } .pagetype-blog .coworker-contact-info { font-size:14px; font-family: "the_sans-regular"; border-bottom:solid 1px #fff; padding-bottom:20px; margin-bottom:20px; line-height:1.3; padding-top:5px; } .pagetype-blog .blogger-bio { font-size:16px; line-height:1.3; } .pagetype-blog .blogger-bio a { color:#fff; text-decoration:underline; } .pagetype-blog .article-social-share { margin-top:30px; } /* -------------------------------------------------------------------------- * Blog jumbotron - Media queries /* -------------------------------------------------------------------------- */ @media screen and (min-width: 768px) { .blogpost-jumbotron .center-teaser-wrapper { padding: 65px 0 10px; } } @media screen and (min-width: 900px) { .pagetype-blog .container img { width:260px; border-radius:70%; } .pagetype-blog .teaser-widget--full .center-teaser-wrapper { padding-top: 100px; } .pagetype-blog .byline { margin-top:-12px; font-size:20px; } .pagetype-blog .teaser-widget-title { font-size: 40px; margin-bottom:10px; margin-top:28px; } .pagetype-blog .blogger-bio { font-size:20px; } .blogpost-jumbotron .blog-name a { font-size:25px; } } .selected-category-tab { color: #000; text-decoration: none; } .block-blogpostlist { max-width:650px; margin:0 auto; float:none !important; } .blog-list-post { border-bottom:solid 1px #e1e1e1; padding-bottom:26px; margin-bottom:30px; } .blog-list-post .date { font-family: "the_sans_bold-regular"; font-size:15px; border-bottom:solid 1px #000; padding-bottom:4px; margin-right:20px; } .blog-list-post .article-type { /*color: #f15c5c;*/ color:#999; display: inline-block; font-family: "the_sans_bold-regular"; font-size: 13px; margin: 15px 10px 0 0; text-transform: uppercase; } .blog-list-post h3 { font-family: "the_sans_bold-regular"; text-transform:uppercase; margin-top:18px; font-size:25px; letter-spacing:0px; margin-bottom:20px; color:#000; line-height:1; } .blog-list-post img { border-radius:0 !important; width:auto !important; } .blog-list-post .post-preamble { color: #999999; font-family: "the_sans-light"; font-size: 15px; line-height: 1.5; margin-top: 10px; } .blog-list-post ul { display:inline-block; margin:0; padding:0; } .block-blogpostlist .load-more { font-family: "the_sans-light"; cursor:pointer; text-transform:uppercase; display:block; } .block-blogpostlist .load-more:after { content: "\e80d"; display: block; font-size: 9px; margin: -10px 0 0 -3px; font-family:'balticeye'; position: relative; top: 0; transition: top ease 0.4s; } .block-blogpostlist .load-more-loader { font-family: "the_sans-light"; text-transform:uppercase; } .block-blogpostlist .load-more:hover:after { top: 3px; } .block-blogpostlist .latest-posts h2 { display:none; } .block-blogpostlist .latest-posts .tabs { text-align:center; border-bottom:solid 1px #e1e1e1; margin-bottom:20px; padding-bottom:20px; } .block-blogpostlist .latest-posts .tabs ul { list-style:none; padding:0; margin:15px 0 0 0; } .block-blogpostlist .latest-posts .tabs li { color: #f15c5c; display: inline-block; font-family: "the_sans_bold-regular"; font-size: 13px; margin: 0 0 0 10px; text-transform: uppercase; } .block-blogpostlist .block-scalable { height:auto !important; } .pagetype-blog .content { padding-top: 20px; } .block-blogpostlist .pagefilter-list .view-item { margin:0; } .pagetype-blog .site-footer img { border-radius:0; } @media screen and (min-width: 900px) { .block-blogpostlist .pagefilter-list .view-item { margin:50px; } .blog-list-post h3 { font-size:35px; letter-spacing:-1px; margin-bottom:30px; margin-top:28px; } .blog-list-post .post-preamble { font-size: 21px; } } .pagetype-blogpost .date-created { font-family: "the_sans-regular" !important; font-size:18px; } .pagetype-blogpost .content { padding-top: 60px; } .pagetype-blogpost .article-header .blog-category { font-size:13px; /*color:#f15c5c;*/ color:#999; font-family: "the_sans_bold-regular"; text-transform:uppercase; margin:5px 0 0 10px; display:inline-block; } .pagetype-blogpost .article-header .blog-category:first-child { margin-left:0px; } .pagetype-blogpost .article-header h1 { margin-top:25px; } .pagetype-blogpost .article-researchers .container { border-top:solid 1px #dbdada; padding-top:65px; } .pagetype-blogpost .article-social-share { margin-top: 20px !important; /*border-bottom:solid 1px #000; padding-bottom:60px; margin-bottom:55px;*/ } .pagetype-blogpost .blog-nav { margin-top:50px; border-bottom:solid 1px #000; padding-bottom:30px; } .pagetype-blogpost .paging-prev { float:left; } .pagetype-blogpost .paging-next { float:right; } .pagetype-blogpost .next, .pagetype-blogpost .prev{ font-family: "the_sans_bold-regular"; color:#000; text-transform:uppercase; float: left; font-size:16px; } .pagetype-blogpost .next{ float:right; } .pagetype-blogpost .prev-arrow, .pagetype-blogpost .next-arrow { color: #000; float: left; font-family: "balticeye"; font-size: 12px; margin: 2px 7px 0 0; } .pagetype-blogpost .next-arrow { float: right; margin: 2px 0 0 7px; } .pagetype-blogpost .prev-arrow:before { content: "\e900"; } .pagetype-blogpost .next-arrow:before { content: "\e905"; } .pagetype-blogpost .next-text, .pagetype-blogpost .prev-text { clear:both; display:block; font-size:14px; color:#7a7a7a; font-family: "the_sans-regular"; margin-left:14px; float:left; margin-top:-3px; display:none; } .pagetype-blogpost .next-text { margin-right:14px; } .pagetype-blogpost .article-social-share .share .twitter, .pagetype-blogpost .article-social-share .share .facebook, .pagetype-blogpost .article-social-share .share .print, .pagetype-blogpost .article-social-share .share .mail, .pagetype-blog .article-social-share .share .twitter, .pagetype-blog .article-social-share .share .facebook, .pagetype-blog .article-social-share .share .print, .pagetype-blog .article-social-share .share .mail, .pagetype-blog .article-social-share .share .blogg { width:42px !important; height:42px !important; } .pagetype-blogpost .article-social-share .share .twitter::before, .pagetype-blogpost .article-social-share .share .facebook::before, .pagetype-blogpost .article-social-share .share .print::before, .pagetype-blogpost .article-social-share .share .mail::before, .pagetype-blog .article-social-share .share .twitter::before, .pagetype-blog .article-social-share .share .facebook::before, .pagetype-blog .article-social-share .share .print::before, .pagetype-blog .article-social-share .share .mail::before, .pagetype-blog .article-social-share .share .blogg::before { font-size: 38px; } .pagetype-blogpost .article-content { line-height:1.3; } .pagetype-blogpost .article-content p { margin-top:15px; } .pagetype-blogpost .article-header { padding: 0 10px 20px; } /* -------------------------------------------------------------------------- * Blog post - Media queries /* -------------------------------------------------------------------------- */ @media screen and (min-width: 480px) { .pagetype-blogpost .next-text, .pagetype-blogpost .prev-text { display:block; } .pagetype-blogpost .blog-nav { margin-top: 120px; } } @media screen and (min-width: 900px) { .pagetype-blogpost .content { padding-top: 90px; } .pagetype-blogpost .date-created { font-size: 22px; } .pagetype-blogpost .article-social-share .share .twitter, .pagetype-blogpost .article-social-share .share .facebook, .pagetype-blogpost .article-social-share .share .print, .pagetype-blogpost .article-social-share .share .mail, .pagetype-blogpost .article-social-share .share .blogg, .pagetype-blog .article-social-share .share .twitter, .pagetype-blog .article-social-share .share .facebook, .pagetype-blog .article-social-share .share .print, .pagetype-blog .article-social-share .share .mail, .pagetype-blog .article-social-share .share .blogg { width:52px !important; height:52px !important; } .pagetype-blogpost .article-social-share .share .twitter::before, .pagetype-blogpost .article-social-share .share .facebook::before, .pagetype-blogpost .article-social-share .share .print::before, .pagetype-blogpost .article-social-share .share .mail::before, .pagetype-blogpost .article-social-share .share .blogg::before, .pagetype-blog .article-social-share .share .twitter::before, .pagetype-blog .article-social-share .share .facebook::before, .pagetype-blog .article-social-share .share .print::before, .pagetype-blog .article-social-share .share .mail::before, .pagetype-blog .article-social-share .share .blogg::before { font-size: 48px !important; } .pagetype-blogpost .article-header { padding: 0 10px 54px; } .pagetype-blogpost .article-content { line-height:inherit; } .pagetype-blogpost .article-header .blog-category { margin:15px 0 0 10px; } .pagetype-blogpost .prev-arrow { margin: 0px 7px 0 0; } .pagetype-blogpost .next-arrow { margin:0 0 0 7px; } } /* ------------------------------------------------------------------------- * EPiServer UI fixes for content area wrappers /* -------------------------------------------------------------------------- */ .row > .epi-editContainer > [class*='col-'] { position: relative; min-height: 1px; float: left; } /* * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .epi-editContainer:before, .epi-editContainer:after { content: " "; /* 1 */ display: table; /* 2 */ } .epi-editContainer:after { clear: both; } /* -------------------------------------------------------------------------- * Layout: Grid /* -------------------------------------------------------------------------- */ /* * 1. Changes the default box model so the width and height properties include * the padding and border, but not the margin. */ *, *:before, *:after { -webkit-box-sizing: border-box; /* 1 */ -moz-box-sizing: border-box; /* 1 */ box-sizing: border-box; /* 1 */ } /* * Add the `.container` class to center your block element. */ .container { width: 100%; max-width: 980px; margin-right: auto; margin-left: auto; padding-right: 10px; padding-left: 10px; } .container.fullwidth-container { max-width: 100%; } .container.large-container { max-width: 1264px; padding-left: 3px; padding-right: 3px; } .container.medium-container { max-width: 834px; } .container.small-container { max-width: 688px; } /* * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .container:before, .container:after { content: " "; /* 1 */ display: table; /* 2 */ } .container:after { clear: both; } /* ------------------------------------------------------ * Grid row /* ------------------------------------------------------ */ /*.row { margin-right: -10px; margin-left: -10px; }*/ .row > [class*="col-"] { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .container.fullwidth-container .row { padding: 0; margin: 0; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; } .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; } .col-xs-10 { width: 83.33333333%; } .col-xs-9 { width: 75%; } .col-xs-8 { width: 66.66666667%; } .col-xs-7 { width: 58.33333333%; } .col-xs-6 { width: 50%; } .col-xs-5 { width: 41.66666667%; } .col-xs-4 { width: 33.33333333%; } .col-xs-3 { width: 25%; } .col-xs-2 { width: 16.66666667%; } .col-xs-1 { width: 8.33333333%; } /*.displaymode-one-third { width: 33.33333333% !important; } .displaymode-two-thirds { width: 66.66666667% !important; }*/ /* -------------------------------------------------------------------------- * Grid - Media queries /* -------------------------------------------------------------------------- */ @media (min-width: 568px) { .col-sm-12 { width: 100%; } .col-sm-11 { width: 91.66666667%; } .col-sm-10 { width: 83.33333333%; } .col-sm-9 { width: 75%; } .col-sm-8 { width: 66.66666667%; } .col-sm-7 { width: 58.33333333%; } .col-sm-6 { width: 50%; } .col-sm-5 { width: 41.66666667%; } .col-sm-4 { width: 33.33333333%; } .col-sm-3 { width: 25%; } .col-sm-2 { width: 16.66666667%; } .col-sm-1 { width: 8.33333333%; } } @media (min-width: 768px) { .container { padding-right: 20px; padding-left: 20px; } .col-md-12, .col-lg-12 { width: 100%; } .col-md-11, .col-lg-11 { width: 91.66666667%; } .col-md-10, .col-lg-10 { width: 83.33333333%; } .col-md-9, .col-lg-9 { width: 75%; } .col-md-8, .col-lg-8 { width: 66.66666667%; } .col-md-7, .col-lg-7 { width: 58.33333333%; } .col-md-6, .col-lg-6 { width: 50%; } .col-md-5, .col-lg-5 { width: 41.66666667%; } .col-md-4, .col-lg-4 { width: 33.33333333%; } .col-md-3, .col-lg-3 { width: 25%; } .col-md-2, .col-lg-2 { width: 16.66666667%; } .col-md-1, .col-lg-1 { width: 8.33333333%; } } /* -------------------------------------------------------------------------- * Override grid on start page block teasers /* -------------------------------------------------------------------------- */ @media (min-width: 568px) and (max-width: 950px) { .cards-wrapper .block.col-sm-12 { width: 50%; } } /* -------------------------------------------------------------------------- * Utilities * -------------------------------------------------------------------------- * * Contains various layout utility helper classes. * /* -------------------------------------------------------------------------- */ /* ------------------------------------------------------ * Box layout model * ------------------------------------------------------ * * This applies a natural box layout model to all elements, but allows * components, plugins etc. to change box-sizing easier. * * "Credit on the inheritence idea to Jon Neal here, who says: * This will give you the same result, and make it easier to change the * box-sizing in plugins or other components that leverage other behavior." * /* ------------------------------------------------------ */ html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } /* ------------------------------------------------------ * Container * ------------------------------------------------------ * * The .container class is applied to center your block element and to set a * restricted maximum width of the element. * Example usage: * *
*

Your content goes here...

*
* /* ------------------------------------------------------ */ .container { width: 100%; max-width: 1206px; margin-right: auto; margin-left: auto; padding-right: 20px; padding-left: 20px; } /* * Clearfix for the .container class. * * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .container:before, .container:after { content: " "; /* 1 */ display: table; /* 2 */ } .container:after { clear: both; } /* ------------------------------------------------------ * Divider * ------------------------------------------------------ */ .divider { padding-bottom: 55px; margin-bottom: 55px; } .dark .divider { border-bottom: 1px solid #723377; } @media print { .main-nav, .block-jumbotron, .main-nav-button, .block-statisticteaser, .article-contentarea-bottom, .block-linklist, .article-researchers, .article-social-share, #skewed-background, .site-footer .col-lg-4 { display:none !important; } .site-footer { margin-top:10px !important; } .site-footer .col-lg-4:first-child { display:block !important; width:100%; border-top:solid 1px #ccc; } .article-text h2 { font-size: 27px !important; letter-spacing: -2px; line-height: 33px !important; margin-top:10px !important; } body { color: #000; font: 400 15px/21px "Times New Roman",serif; } .article-content img, article-content p img, .block-articlecontent .row p img, .block-articlecontent .row img { width:40%; } .content { padding: 0px !important; } .article-header { padding: 0 10px 20px !important; } .site-footer .container { margin-top: 10px !important; } } /* -------------------------------------------------------------------------- * Module: Embedded media * -------------------------------------------------------------------------- * * Makes sure that the different media objects that are embedded to the site * (through content by WordPress etc.) are responsive. * * Example usage to make WordPress embedded objects responsive: * *
* *
* /* -------------------------------------------------------------------------- */ embed, object, video { max-width: 100%; } .content-embedded { position: relative; overflow: hidden; display: block; height: 0; padding: 0; margin: 0; padding-top: 30px; margin-bottom: 20px; } .content-embedded iframe, .content-embedded object, .content-embedded embed { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } .overview-jumbotron video { position: absolute; top: 49%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 0; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); /*background: url(polina.jpg) no-repeat;*/ background-size: cover; object-fit:cover; display:none; } /* * Layout modifier: Content embedded * * 1. Sets different aspect ratios, where 16:9 is mostly used. */ .content-embedded--16by9 { padding-bottom: 56.25%; /* 1 */ } .content-embedded--4by3 { padding-bottom: 75%; /* 1 */ } /* ------------------------------------------------------ * Embedded media - Responsive images /* ------------------------------------------------------ */ /* * WordPress content wrapper, can be changed depending on html structure. */ .entry-content img { max-width: 100%; } /* * WordPress related image classes. * * 1. make sure images with width/height attributes from WordPress are resized * correctly. */ img[class*='align'], img[class*='wp-image-'], img[class*='attachment-'] { height: auto; /* 1 */ } /* * 1. prevent stretching of full- & large-sized images with width and height * attributes in IE8. * 2. make sure images with width/height attributes from WordPress are resized * correctly. */ img.size-full, img.size-large, img.header-image, img.wp-post-image { max-width: 100%; width: auto; /* 1 */ height: auto; /* 2 */ } @media screen and (min-width: 768px) { .overview-jumbotron video { display:block; } } @media screen and (min-width: 1500px) { .overview-jumbotron video { top: 45%; } } /* ------------------------------------------------------ * Content /* ------------------------------------------------------ */ .pagetype-overview .content, .pagetype-blogpostcategory .content { padding-top: 0; } .content, .startpage .content { clear: left; padding-top: 107px; padding-bottom: 28px; } /* Episerver edit block preview */ .content.preview { padding-top: 0; } .content.preview .block { padding-top: 107px; padding-bottom: 28px; background-color: #fff; color: #000; } /* ------------------------------------------------------ * Sub nav section /* ------------------------------------------------------ */ .sub-nav-section { background-color: #4f0055; padding: 35px 0; } .sub-nav-section .container { text-align: center; } /* ------------------------------------------------------ * Content - Read more /* ------------------------------------------------------ */ .read-more-link { color: #000; font-weight: 700; text-decoration: none; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, #41c9ac 50%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #41c9ac 50%); background-repeat: repeat-x; background-position: 0 16px; -webkit-background-size: 3px 3px; background-size: 3px 3px; } .read-more-link:hover, .read-more-link:focus { text-decoration: none; background-image: none; } /* ------------------------------------------------------ * Content - Google maps canvas /* ------------------------------------------------------ */ #map-canvas { width: 100%; height: 250px; } /* -------------------------------------------------------------------------- * Content - Article head /* -------------------------------------------------------------------------- */ .article-header { text-align: center; position: relative; padding:0 10px 54px; } .preamble { font-family: "the_sans-light", sans-serif; color: #999999; letter-spacing: -1px; } .preamble strong { font-weight: normal; } /* -------------------------------------------------------------------------- * Content - Image align and Image description /* -------------------------------------------------------------------------- */ .img-float-left { float: left; margin-right: 15px; } .img-float-right { float: right; margin-left: 15px; } .img-description { color: #999; font-size: 14px; font-family: "the_sans-regular"; margin-top: -5px; display: block; } p.img-float-left, p.img-float-right { margin-bottom: 0; } /* -------------------------------------------------------------------------- * Content - Anfang /* -------------------------------------------------------------------------- */ .article-content.with-anfang p:first-of-type:first-letter { font-family: 'the_sans_bold-regular'; float: left; font-size: 115px; line-height: 94px; padding-top: 2px; padding-right: 20px; } .article-content.with-anfang p.fancy-anfang:first-letter { font-family: inherit; float: none; font-size: inherit; line-height: inherit; padding: 0; } .anfang-wrapper { float: left; overflow: hidden; display: none; margin-right: 10px; } .anfang-wrapper #anfang-first-letter { display: none; } #anfang-svg { float: left; width: 120px; height: 195px; padding-top: 4px; margin-top: -57px; } .medium-letter #anfang-svg { margin-top: -48px; } #anfang-text { font-family: 'the_sans_bold-regular'; font-size: 175px; line-height: 94px; } .medium-letter #anfang-text { font-size: 160px; } .small-letter #anfang-text { font-size: 107px; } .small-letter #anfang-svg { margin-top: -64px; } .x-small-letter #anfang-text { font-size: 99px; } .x-small-letter #anfang-svg { margin-top: -65px; } /* -------------------------------------------------------------------------- * Content - Misc /* -------------------------------------------------------------------------- */ .article-researchers { margin-top: 30px; } .article-researchers .row { margin-top: 10px; } .article-researchers .researcher { margin-top: 10px; } .article-researchers img { border-radius: 50%; float: left; margin-right: 10px; width: 70px; } .article-researchers .info { float: left; padding-top: 5px; } .article-researchers * { font-family: "the_sans-regular", sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 0; } .article-researchers a { color: #000; } .article-researchers a:hover { color: #999; } .article-researchers h3 { font-weight: bold; font-size: 17px; } .article-text h2 { font-size: 40px; letter-spacing: -2px; line-height: 42px; } .block-articlelist h2 { border-top: solid 1px ; padding-top: 65px; text-transform: uppercase; margin-top:60px; } /* Page filter list */ .pagefilter-list .view-item { margin-bottom: 80px; } .pagefilter-list .view-item h2 { font-size: 25px; } .pagefilter-list .load-clips { text-align: center; } .pagefilter-list .btn { background-color: #000; color: #fff; font-size: 15px; margin: 25px 0; display: inline-block; } /* .pagefilter-list .btn.is-visible { }*/ /* .pagefilter-list .load-more-loader { display: none; } */ .researcher-widget { background-size: cover; background-position: center center; } .researcher-widget img { width: 155px; max-width: 50%; height: auto; border-radius: 50%; overflow: hidden; display: inline-block; } .researcher-widget h2 { text-transform: uppercase; margin-top: 5px; margin-bottom: 3px; } .researcher-widget .byline { text-transform: uppercase; margin-top: 0; font-size: 12px; line-height: 1; margin-bottom: 0; } .researcher-widget .personal-info { font-size: 14px; line-height: 20px; max-width: 330px; margin: 0 auto; margin-top: 15px; } /* Researchers list */ .researchers h2 { text-align: center; text-transform: uppercase; } /* Blockquote */ blockquote { quotes: "\201C""\201D""\2018""\2019"; font-family: times new roman; font-size: 50px; font-weight: bold; line-height: 57px; text-align:center; margin:0; letter-spacing:-1.7px; margin:80px 0 60px; } blockquote::before { content: "\201D"; display: block; font-size: 150px; margin: 0 auto; text-align: center; top: 0; } blockquote p { display: inline; } .content-highlight-info { background: #f9f9f9; margin: 20px auto; padding: 20px; border: solid 1px #e0e0e0; border-top: solid 10px #3facd7; max-width:770px; } .content-highlight-info h2 { font-size:25px; line-height:25px; margin-bottom:35px; } .content-highlight-info p { line-height: 24px; font-family:Arial; font-size:16px; } /* -------------------------------------------------------------------------- * Media queries: Content /* -------------------------------------------------------------------------- */ @media screen and (min-width: 568px) { .article-content.with-anfang p:first-of-type:first-letter { font-size: 267px; line-height: 184px; padding-top: 4px; padding-right: 37px; } .article-content.with-anfang p.fancy-anfang:first-letter { font-size: inherit; line-height: inherit; padding: 0; } .anfang-wrapper { margin-right: 30px; } #anfang-svg { width: 300px; margin-top: 0; } #anfang-text { font-size: 260px; line-height: 184px; } .medium-letter #anfang-text { font-size: 232px; } .medium-letter #anfang-svg { margin-top: 2px; } .small-letter #anfang-text { font-size: 174px; } .x-small-letter #anfang-text { font-size: 157px; } .x-small-letter #anfang-svg, .small-letter #anfang-svg { margin-top: -9px; } .print-title { text-align: right; } .print-title .icon-printer { display: block; margin: 10px auto 0; } .article-header { padding: 0 10px 54px; } .preamble { font-size: 30px; line-height: 35px; } .has-divider-bottom { position: relative; padding-bottom: 29px; margin-bottom: 51px; } } @media screen and (min-width: 568px) and (max-width: 660px), screen and (max-width: 350px) { .researcher-widget .personal-info { display: none; } } @media screen and (min-width: 768px) { .article-jumbotron h2.teaser-widget-title { font-size: 65px; line-height: 67px; letter-spacing: -3px; } .content { clear: left; padding-top: 115px; padding-bottom: 28px; } .content-highlight-info { margin: 40px -40px; padding: 50px 40px; } .content-highlight-info h3 { font-size: 40px; line-height: 40px; } } @media screen and (min-width: 992px) { .sidebar-menu-title { font-family: "TheMixCLSTT5", Arial, sans-serif; font-size: 24px; line-height: 30px; margin-bottom: 15px; } /* Entry contact */ .contact-info { text-align: left; } .contact-info-item { /*float: left; width: 33.33%; padding: 0 10px 0 40px;*/ } .content-highlight-info { padding: 10px 65px 40px; margin:0 auto; } .content-highlight-info h2 { font-size: 40px; line-height: 40px; } } @media screen and (max-width: 767px) { .content { padding-top: 87px; } } /* -------------------------------------------------------------------------- * Module: Site footer /* -------------------------------------------------------------------------- */ .site-footer { background: #002F5F; color: #FFF; padding-bottom: 40px; font-size: 16px; line-height: 24px; overflow: hidden; margin-top: 60px; } .site-footer #skewed-background { background: #FFF; padding: 130px 0; -ms-transform: skew(0deg, -3deg); -webkit-transform: skew(0deg, -3deg); transform: skew(0deg, -3deg); margin-top: -200px; -webkit-box-shadow: 0px -2px 5px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px -2px 5px 0px rgba(50, 50, 50, 0.75); box-shadow: 0px -2px 5px 0px rgba(50, 50, 50, 0.75); } body.startpage #skewed-background { background: #000; border-bottom: solid 1px #002F5F; } .site-footer .container { margin-top: 150px; padding-bottom: 30px; } .site-footer .block { border-left: solid 1px #fff; border-right: solid 1px #fff; padding: 20px 40px 0; text-align: center; } .site-footer .block:first-child, .site-footer .block:last-child { border-left: none; border-right: none; padding: 20px 0 0 0; } .site-footer .widget-content { padding: 20px; } .site-footer h3 { font-family: "the_sans_bold-regular",sans-serif; font-size: 20px; line-height: 22px; color: #fff; margin-bottom: 16px; margin-top: 10px; text-transform: uppercase; } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: 6px; } .site-footer-content { display: table-cell; vertical-align: middle; width: 100%; max-width: none; padding: 0; margin: 0; } .site-footer-logo { margin-bottom: 23px; } .site-footer p { max-width: 100%; } .site-footer a { color: #fff; } .site-footer a:hover { color: #999; } .site-footer .divider { margin-bottom: 56px; padding-bottom: 48px; } .site-footer a[class*='-logo'] { display: block; height: 56px; line-height: 56px; float: left; margin-top: 20px; } .site-footer a[class*='-logo']:before { display: block; height: 56px; width: 57px; float: left; content: ''; background: url('') no-repeat 0 0 #fff; margin-right: 20px; } .site-footer .facebook-logo { margin-right: 40px; } /* -------------------------------------------------------------------------- * Footer - Media queries /* -------------------------------------------------------------------------- */ @media screen and (min-width: 768px) { .site-footer { } } @media screen and (max-width: 767px) { .site-footer { } .site-footer .block { border-left: none; border-right: none; } } .site-header { height: 75px; } .mobile-menu-is-active .site-header .inner-header-container { position: fixed; } .mobile-menu-is-active .site-header .site-logo, .mobile-menu-is-active .site-header .main-nav-button { z-index: 2500; outline:none; } .site-header .inner-header-container { background: none repeat scroll 0 0 #002F5F; color: #fff; height: 75px; padding: 0; position: relative; text-align: center; width: 100%; } .site-header--fixed-top .inner-header-container { background: #002F5F; position: absolute; top: 0; z-index: 1010; } .site-logo { font-family: "the_sans-regular",sans-serif; font-style: normal; font-weight: normal; font-size: 28px; letter-spacing: -0.05em; margin: 25px 0 0 13px; right: 20px; line-height: 1; text-transform: uppercase; top: 20px; z-index: 1015; text-align:left; } .site-logo a { color: #fff; text-decoration: none; } .site-logo img { display: block; height: 44px; vertical-align: top; width: 154px; } .main-nav { display: block; margin-top: 14px; } .main-nav-button { -moz-user-select: none; background: #002F5F; border: 0 none; bottom: 0; color: inherit; cursor: pointer; display: inline-block; margin: 0; padding: 10px; position: absolute; right: 55px; top: -17px; vertical-align: top; width: 60px; z-index: 1015; outline: none; } .main-nav-button:focus, .main-nav-button:active { outline:none; border: transparent; } .main-nav-button .navicon { background: none repeat scroll 0 0 #fff; display: block; height: 4px; position: relative; transform: translate3d(0px, 0px, 0px); transition: all 0.25s ease 0s; width: 30px; } .main-nav-button .navicon:before, .main-nav-button .navicon:after { background: none repeat scroll 0 0 #fff; content: ""; display: block; height: 4px; position: absolute; transform: translate3d(0px, 0px, 0px); transition: all 0.25s ease 0s; width: 30px; } .main-nav-button .navicon:before { top: 10px; } .main-nav-button .navicon:after { top: -10px; } .main-nav-button:hover .navicon:before { top: 12px; } .main-nav-button:hover .navicon:after { top: -12px; } .main-nav-button .menutext { float: left; font-family: "the_sans-regular"; font-size: 12px; margin-top: 15px; position: absolute; right: 19px; text-transform: uppercase; top: 46px; } .main-nav .search { position: absolute; right: 65px; top: 26px; z-index:20; display:none !important; } .main-nav .search a{ color:#fff; } .main-nav .search a span{ float: left; font-size: 12px; margin-top: 12px; font-family: "the_sans-regular"; text-transform: uppercase; } .top-nav, .main-nav-menu { backface-visibility: hidden; display: none; left: 0; list-style: outside none none; margin: 0; overflow-x: hidden; overflow-y: auto; position: relative; right: 0; z-index: 2015; } .main-nav-menu { padding-top: 65px; } .main-nav-menu a, .top-nav a { border: 1px solid transparent; color: #fff; display: block; font: 400 20px/20px "the_sans-light","Helvetica Neue",Helvetica,Arial,sans-serif; padding: 8px 25px; text-align: right; text-decoration: none; transition: all 0.25s ease 0s; text-transform: uppercase; } .main-nav-menu a.button-toggle-search, .top-nav a { text-transform: initial; margin-right:11px; } .main-nav-menu a:hover, .main-nav-menu a:focus, .top-nav a:hover, .top-nav a:focus { color: #f26666; text-decoration: none; } .main-nav-menu .menu-item-search { position: relative; padding-left: 11px; margin-left: 11px; } .main-nav-menu .menu-item-search:before { content: ""; background: #666; position: absolute; height: 20px; width: 1px; top: 16px; left: 0; margin-top: auto; margin-top: auto; } .main-nav-backdrop { display: none; background: #002F5F; position: fixed; top: 60px; bottom: 0; left: 0; right: 0; z-index: 2000; height: 110vh; } .main-nav-button.is-active { top:-7px; } .main-nav-button.is-active .menutext { top: 36px; } .main-nav-button.is-active { bottom: auto; height: 74px; position: fixed; } .main-nav-button.is-active .navicon { background: none repeat scroll 0 0 transparent; } .main-nav-button.is-active:not(.steps) .navicon:before, .main-nav-button.is-active:not(.steps) .navicon:after { top: 0 !important; } .main-nav-button.is-active .navicon:before { transform: rotate(-45deg); } .main-nav-button.is-active .navicon:after { transform: rotate(45deg); } .main-nav-container.is-active .menu-search-form { display: block; } .main-nav-container.is-active .main-nav-menu { display: block; float:right; margin-right:10px; } .main-nav-container.is-active .top-nav { display: block; } .main-nav-container.is-active .main-nav-backdrop { display: block; } .top-nav ul { list-style: none; } .top-nav a { color: #999999; } .OC-logo { display: none; } .top-nav.language { display: block; left: auto; position: absolute; right: 9px; top: 2px; } .top-nav.language ul { padding:0; margin:0; } .top-nav.language li a:before { content: "\e90a"; display: block; font-family: "balticeye"; font-size:21px; margin: 13px 0 0; text-align: center; } .top-nav.language li a { font-family: "the_sans-regular",sans-serif; text-transform:uppercase; color:#fff; font-size:12px; padding:0; margin-right:0; line-height:24px; } #main-nav-menu-container { position: absolute; right: 11px; top: 2px; } #main-nav-menu-container.is-active { position: fixed; top: 85px; bottom: 0; min-width: 260px; background: #002F5F; right: 0; padding-top: 20px; } .main-nav-menu .sub-menu { display: none; } @media screen and (min-width:400px) { .site-logo { font-size:33px; margin-top:22px; } } @media screen and (min-width: 768px) { .main-nav-container.is-active .main-nav-backdrop, .main-nav-container.is-active .menu-search-form { display: none; } .site-header--fixed-top .inner-header-container { position: fixed; } site-header { height: 85px; } .site-header .inner-header-container { padding-top: 17px; height: 85px; } .site-logo { top: 25px; margin:10px 0 0 0; } .site-logo img { height: 52px; width: 184px; } .main-nav { display: inline-block; height: 100%; margin-top: 0; vertical-align: top; position:absolute; right:0; top:0; } .main-nav .search { display:block !important; } .main-nav-button { /*display: none;*/ } .main-nav-container { float: left; z-index: 955; } .main-nav-menu, .top-nav { /*display: block;*/ margin-top: 0; padding-top: 0; position: static; float: left; } .main-nav-menu .menu-item { /* float: left;*/ border-bottom:solid 1px #fff; } .main-nav-menu .sub-menu { display: none; } .main-nav-menu a, .top-nav a { border: none; font-size: 15px; padding: 13px 11px 12px 11px; } .main-nav-menu a { min-width:180px; } .top-nav { line-height: 32px; border: 0 none; display: block; letter-spacing: -0.1px; float: left; } .top-nav .menu-item span { background-color: #333; width: 1px; background-image: none; border-top: 10px solid #e2e2e2; border-bottom: 9px solid #e2e2e2; left: 0; right: auto; } .top-nav .menu-item :first-child span { display: none; } .top-menu { position:absolute; padding: 0; margin-bottom: 0; } .OC-logo { /* background: url(/resources/images/SU-OC-logo.svg) top center no-repeat;*/ background-repeat: no-repeat !important; background-size: auto; width: 189px; height: 62px; position: absolute; left: -30px; display: block; top: 28px; /*text-indent: -999px; overflow: hidden;*/ } .focusarea .OC-logo { top:-3px; } .OC-logo:before { font-family: 'balticeye'; font-size:60px; margin-left:40px; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html:lang(sv) .OC-logo:before { content: "\e90c"; } html:lang(en) .OC-logo:before { content: "\e90d"; } .top-nav.language { display: block; left: auto; position: absolute; right: 0px; top: 2px; width:110px; height:70px; overflow:hidden; } .top-nav.language li a:before { font-size: 26px; margin: 13px 0 4px; } .top-nav.language li a { font-size:16px; padding:10px 25px; } .main-nav .search { right: 115px; } html:lang(en) .main-nav .search { right: 102px; } .main-nav .search a span{ font-size: 16px; margin-top: 25px; } .main-nav-button .menutext { font-size: 16px; line-height: 28px; margin-left: -4px; right: 17px; top: 49px; } .main-nav-button .navicon:before, .main-nav-button .navicon:after { width: 34px; } .main-nav-button .navicon { width: 34px; } .main-nav-button { padding: 25px; right: 160px; width: 80px; top:-13px; outline:none; } .site-logo { font-size: 36px; text-align:center; } .main-nav-button.is-active { top:1px; } .main-nav-button.is-active .menutext { top: 35px; } } /* -------------------------------------------------------------------------- * Thumbnails * -------------------------------------------------------------------------- * * Thumbnails are ususally found within a grid system (see /styles/layout/grid.css) * or similar context that acts as a content preview, usually with a caption and * media image or icon. * * Example usage: * * *

Thumbnail title text

*
*
OR *

Example text for the thumbnail

*
* * /* -------------------------------------------------------------------------- */ /* ------------------------------------------------------ * Base: thumbnail /* ------------------------------------------------------ */ .thumbnail { position: relative; display: block; margin-top: 5px; text-align: center; background: #37ab92; color: #fff; } /* When `thumbnail` is applied to a link */ a.thumbnail { text-decoration: none; color: #fff; } a.thumbail:hover, a.thumbail:focus { text-decoration: none; color: inherit; } .thumbnail-content { padding: 20px; } .thumbnail-text { position: absolute; left: -99999em; } /* Set the webfont icon size */ .thumbnail-content .thumbnail-icon { font-size: 70px; height: 70px; line-height: 70px; color: #fff; } .thumbnail-caption { position: relative; display: block; padding: 0; margin: 0; text-transform: uppercase; line-height: 1; font-family: 'Open Sans Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #41c9ac; color: #000; } /* * Centers the caption text vertically which, fixes an issue where too long * titles would break the caption box. */ .thumbnail-caption-text { position: relative; top: 50%; display: block; overflow: hidden; line-height: 1; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .thumbnail-caption-more { position: relative; display: block; line-height: 1; } .thumbnail-caption:before { content: ''; position: absolute; bottom: 100%; left: 50%; width: 0; height: 0; border: solid transparent; border-color: transparent; border-bottom-color: #41c9ac; border-width: 10px; margin-left: -10px; pointer-events: none; transition: all 0.25s; } a.thumbnail:hover .thumbnail-caption:before, a.thumbnail:focus .thumbnail-caption:before { bottom: 100%; margin-bottom: -20px; border-bottom-color: transparent; border-top-color: #37ab92; border-top-width: 10px; } /* ------------------------------------------------------ * Thumbnail icons * ------------------------------------------------------ * * Adjust some of the thumbnail icons position to * look better and feel more balanced while being centered. * /* ------------------------------------------------------ */ .thumbnail-icon.icon-fouredge-service-consulting { margin-left: 10px; } .thumbnail-icon.icon-fouredge-service-co-location { margin-left: 2px; } .thumbnail-icon.icon-fouredge-service-db-operation { margin-left: 19px; } .thumbnail-icon.icon-fouredge-service-server-operation { margin-left: 20px; } .thumbnail-icon.icon-fouredge-service-app-operation { margin-left: 2px; } /* ------------------------------------------------------ * Modifier: Thumbnail animate hover effect /* ------------------------------------------------------ */ .no-touch .thumbnail--animate .thumbnail-content { position: relative; overflow: hidden; height: 150px; padding: 0 !important; } .no-touch .thumbnail--animate .thumbnail-icon { opacity: 0.999; -webkit-transform: translate(0,50%); -moz-transform: translate(0,50%); -ms-transform: translate(0,50%); transform: translate(0,50%); transition: opacity 0.3s, transform 0.3s; } .no-touch .thumbnail--animate .thumbnail-text { position: absolute; z-index: 1; top: 50%; left: auto; padding: 20px; opacity: 0; -webkit-transform: translate(0,-100%); -moz-transform: translate(0,-100%); -ms-transform: translate(0,-100%); transform: translate(0,-100%); transition: opacity 0.3s, transform 0.3s; } .no-touch .thumbnail--animate:hover .thumbnail-icon, .no-touch .thumbnail--animate:focus .thumbnail-icon { opacity: 0; -webkit-transform: translate(0,-100%); -moz-transform: translate(0,-100%); -ms-transform: translate(0,-100%); transform: translate(0,-100%); } .no-touch .thumbnail--animate:hover .thumbnail-text, .no-touch .thumbnail--animate:focus .thumbnail-text { opacity: 0.999; -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%); } .no-touch .thumbnail--animate .thumbnail-caption { position: relative; overflow: hidden; } .no-touch .thumbnail--animate .thumbnail-caption-text.title, .no-touch .thumbnail--animate .thumbnail-caption-text.more { transition: opacity 0.3s, transform 0.3s; } .no-touch .thumbnail--animate .thumbnail-caption-text.title { opacity: 0.999; -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%); } .no-touch .thumbnail--animate .thumbnail-caption-text.more { position: absolute; left: 50%; opacity: 0; -webkit-transform: translate(-100%,-50%); -moz-transform: translate(-100%,-50%); -ms-transform: translate(-100%,-50%); transform: translate(-100%,-50%); } .no-touch .thumbnail--animate:hover .thumbnail-caption-text.title, .no-touch .thumbnail--animate:focus .thumbnail-caption-text.title { opacity: 0; -webkit-transform: translate(-100%,-50%); -moz-transform: translate(-100%,-50%); -ms-transform: translate(-100%,-50%); transform: translate(-100%,-50%); } .no-touch .thumbnail--animate:hover .thumbnail-caption-text.more, .no-touch .thumbnail--animate:focus .thumbnail-caption-text.more { opacity: 0.999; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } /* ------------------------------------------------------ * Modifier: Small thumbnail * ------------------------------------------------------ * * Example usage: * * ... * * See above for full example code. * /* ------------------------------------------------------ */ .thumbnail--small .thumbnail-caption { height: 62px; line-height: 62px; font-size: 16px; } /* ------------------------------------------------------ * Modifier: Medium thumbnail * ------------------------------------------------------ * * Example usage: * * ... * * See above for full example code. * /* ------------------------------------------------------ */ .thumbnail--medium .thumbnail-content { padding: 40px 20px; } .thumbnail--medium .thumbnail-icon { height: 70px; line-height: 70px; font-size: 70px; } .thumbnail--medium .thumbnail-caption { height: 62px; line-height: 62px; font-size: 18px; } /* ------------------------------------------------------ * Modifier: Featured thumbnail * ------------------------------------------------------ * * The featured thumbnail have different markup than the other thumbnails. * * Example usage: * *
*
*

The title

*

Some text goes here.

*

Read more

*
*
* /* ------------------------------------------------------ */ .thumbnail--featured { position: relative; overflow: hidden; background-color: #4a2e7b; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; margin-top: 0; } .thumbnail--featured:before { content: ''; display: block; padding-bottom: 0; } .thumbnail--featured .thumbnail-content { position: static; width: 100%; max-width: 610px; margin: 0 auto; } .thumbnail--featured .thumbnail-title { margin-top: 50px; margin-bottom: 25px; text-transform: uppercase; font-size: 25px; line-height: 1; } /* -------------------------------------------------------------------------- * Media queries: Thumbnail /* -------------------------------------------------------------------------- */ @media screen and (min-width: 768px) { /* * 1. the correct ratio for our image, 940x440 has a ratio of 47:22, which * we can calculate to 22/47 = 0,4680851063829787. */ .thumbnail--featured:before { padding-bottom: 46.80851063829787%; /* 1 */ } .thumbnail--featured .thumbnail-content { position: absolute; right: 0; bottom: 0; left: 0; } } /* -------------------------------------------------------------------------- * Flip animation * -------------------------------------------------------------------------- * * Usage: * *
*
<-- vertically-centered is optional *
* Your content goes here *
*
* *
<-- vertically-centered is optional *
* Your content goes here *
*
*
* /* -------------------------------------------------------------------------- */ .flip-wrapper { overflow: hidden; cursor: pointer; } .flip-wrapper .flip-item { display: block; position: relative; top: 10px; transition: ease-out 0s, opacity .3s ease-in-out; height: 100%; } .widget:hover .flip-wrapper .flip-item:first-child, .flip-wrapper .flip-item:last-child { opacity:0; } .article-contentarea .widget:hover .flip-wrapper .flip-item:first-child, .container.medium-container .widget:hover .flip-wrapper .flip-item:first-child { opacity:1; } .widget:hover .flip-wrapper .flip-item:last-child { opacity:0.6; color:#000 } .widget-content-inner .flip-item .flip-item-content { padding:20px 0; } .widget-content-inner .flip-item:last-child .flip-item-content { display: table; margin: 0 !important; text-align: center; vertical-align: middle; width: 100% !important; } .widget-content-inner .flip-item .flip-item-content p{ display: table-cell; /*display:block;*/ height: 100%; overflow: hidden; padding: 0; vertical-align: middle; width: 100%; padding:10px 0; } .flip-wrapper .flip-item.vertically-centered { max-width:600px; margin:0 auto; } /* .no-js .pagetype-article .widget:hover .flip-wrapper .flip-item:first-child, .no-js .pagetype-article .flip-wrapper .flip-item:last-child { }*/ /* .no-js .widget:hover .flip-wrapper .flip-item:first-child, .no-js .flip-wrapper .flip-item:last-child { opacity:1; } .flip-wrapper .flip-item.vertically-centered { display: table; width: 100%; } .flip-wrapper .flip-item.vertically-centered .flip-item-content { display: table-cell; vertical-align: middle; }*/ /* -------------------------------------------------------------------------- * Module: Social share /* -------------------------------------------------------------------------- */ .social-share { margin-top:15px; float:right; font-family: 'Roboto Condensed', sans-serif; color:#524e4e; } .social-share a { cursor: pointer; float: left; height: 38px; margin-bottom: 12px; width: 39px; } .social span:hover { cursor:pointer; } .social-share:before { content:"Följ oss på"; float:left; margin:7px 18px 0 0; } .social-share a { opacity: 1; transition: opacity .25s ease-in-out; } .social-share .facebook { background:url(../../images/sprite.png) -899px -300px; } .social-share .twitter { background:url(../../images/sprite.png) -899px -414px; } .social-share .instagram { background:url(../../images/sprite.png) -899px -376px; } .social-share a:hover { opacity: 0.75; } .share div .facebook, .share div .twitter, .share div .instagram { float:left; margin:5px 15px 0 0; } .share a { float: left; height: 37px; margin-top: -2px; width: 35px; } .share span { background: none repeat scroll 0 0 #ecf4f6; font-family: "Roboto Condensed",sans-serif; font-size: 16px; height: 33px; margin-top: -2px; padding: 8px 10px 0; font-weight:bold; min-width:35px; text-align:center; } .share .share-data { display: none; } .share span { float:left; } .share .facebook { background: url("../../images/sprite.png") no-repeat scroll -899px -300px rgba(0, 0, 0, 0) } .share .twitter { background: url("../../images/sprite.png") no-repeat scroll -899px -414px rgba(0, 0, 0, 0); } .share .mail { background: url("../../images/sprite.png") no-repeat scroll -899px -448px rgba(0, 0, 0, 0); margin: 1px 15px 0 0; } .share .print { background: url("../../images/sprite.png") no-repeat scroll -899px -488px rgba(0, 0, 0, 0); margin: 3px 31px 0 0; padding: 0 20px 0 0; } .share .print::after { border-right: 1px solid #e0e0e0; content: ""; float: left; margin: 0 0 0 11px; padding: 19px; } .share a { transition: opacity .1s ease-in; } .share a:hover { opacity:0.6; } .social-media-holder .social-media-content .message-preview .read-more { cursor: pointer; } .social-media-holder .social-media-content .message-full { display: none; } .content-footer .social-media-holder .read-more a { width:100%; } .content-footer .social-media-holder h3 { background: url("../../images/sprite.png") no-repeat scroll -899px -371px rgba(0, 0, 0, 0); color: #000; margin-left: 10px; padding: 2px 0 0 44px; } .content-footer .social-media-holder.facebook .post-content { -webkit-box-shadow: 0px 0px 5px 1px rgba(233,234,237,1); -moz-box-shadow: 0px 0px 5px 1px rgba(233,234,237,1); box-shadow: 0px 0px 5px 1px rgba(233,234,237,1); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border:1px solid #e9eaed; margin-bottom: 13px; } .content-footer .social-media-holder.facebook .post-content .post-body { padding: 13px; } .content-footer .social-media-holder.facebook .post-content .post-body h4 { font-family: Georgia; font-size: 18px; line-height: 20px } .content-footer .social-media-holder.facebook .post-content .post-body p { font-family: arial; font-size: 13px; line-height: 18px; margin-bottom:0; } .content-footer .social-media-holder.facebook img { width:100%; } .content-footer .social-media-holder.facebook h3 { background: url("../../images/sprite.png") no-repeat scroll -899px -295px rgba(0, 0, 0, 0); } .content-footer .social-media-holder.facebook .post-meta { color:#6c6969; margin-bottom:8px; } .content-footer .social-media-holder { color:#282828; margin-top:-20px; margin-bottom:-10px; } .content-footer .social-media-holder.twitter .post-meta { color:#6c6969; margin-bottom:8px; } .content-footer .social-media-holder.twitter .post-header { margin-top: -6px; } .content-footer .social-media-holder.twitter .post-body p { font-size:14px; margin-bottom:14px; } .content-footer .social-media-holder.twitter .post-content:last-child { border-top:solid 1px #e3e8ea; padding-top:14px; } .content-footer .social-media-holder.twitter .twittername { font-family: 'Roboto Condensed', sans-serif; font-size:16px; font-weight:bold; } .content-footer .social-media-holder.twitter .post-header a { color: #6c6969 !important; float: none; text-decoration: none; } .content-footer .social-media-holder.twitter .post-header a:hover { text-decoration: underline; cursor:pointer; } .content-footer .social-media-holder.twitter .social-media-content a { float: none; width: auto; color:#e9004b; text-decoration:none; } .content-footer .social-media-holder.twitter h3{ background: url("../../images/sprite.png") no-repeat scroll -899px -409px rgba(0, 0, 0, 0); } .content-footer .social-media-holder .arrow { border-bottom: 8px solid #fff; border-left: 8px solid transparent; border-right: 8px solid transparent; height: 0; position: absolute; top: -8px; width: 0; left:19px; } .content-footer .social-media-holder .hashtag { background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; color: #e9004b !important; padding-left: 0 !important; } .sidebar .social-media-holder h3 { background: #e9004b; color: #fff; display: block; font-family: origo; font-size: 35px; font-weight: normal; margin: 20px 0 0 !important; padding: 5px 24px; } .article-social-share { text-align: center; margin-top: 50px; } .article-social-share .share { display: inline-block; } .article-social-share .share div { display: inline-block; line-height: 1; } .article-social-share .share .share-data { display: none; } .article-social-share .share .twitter, .article-social-share .share .facebook, .article-social-share .share .print, .article-social-share .share .mail, .article-social-share .share .blogg { background: none; float: none; margin: 0; padding: 1px 0 0 1px; position: relative; width: 52px; height: 54px; display: inline-block; overflow: hidden; text-indent: -9999px; } .article-social-share .share .twitter:before, .article-social-share .share .facebook:before, .article-social-share .share .print:before, .article-social-share .share .mail:before, .article-social-share .share .blogg:before { font-family: 'balticeye'; color: #000; float: left; font-size: 48px; line-height: 1; margin: 0; text-indent: 0; } .article-social-share .share .print:after { display: none; } .article-social-share .twitter:before { content: "\e802"; } .article-social-share .facebook:before { content: "\e806"; } .article-social-share .print:before { content: "\e903"; } .article-social-share .mail:before { content: "\e902"; } .article-social-share .blogg:before { content: "\e90b"; } .pagetype-article .article-social-share, .pagetype-blogpost .article-social-share { text-align: left; margin-top: 20px; } .pagetype-article .article-social-share.text-center, .pagetype-blogpost .article-social-share.text-center { text-align: center; } .blogg-subscribe { display:none !important; } .blogg-subscribe .blogg:before { padding-top:2px; } .pagetype-blog .blogg-subscribe { display:inline-block !important; } #blog-signup-container { display:none; } #blog-signup-container.show { display: block; position: absolute; width: 100%; z-index: 10; } #blog-signup { background: #fff none repeat scroll 0 0; margin: -15px auto 0; width: 400px; -webkit-box-shadow: 0px 0px 8px -3px rgba(176,176,176,1); -moz-box-shadow: 0px 0px 8px -3px rgba(176,176,176,1); box-shadow: 0px 0px 8px -3px rgba(176,176,176,1); padding:30px 20px 20px; position:relative; } #blog-signup h2 { margin:0 0 20px !important; font-weight:normal !important; } #blog-signup .close { display:block; position:absolute; top:10px; right:12px; cursor:pointer; } #blog-signup .close:before { content: "\e904"; font-family: 'balticeye'; } #blog-signup .arrow { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; display:block; position:absolute; right:79px; top:-10px; } #mc_embed_signup .mc-field-group { padding-bottom:5% !important; } @media screen and (min-width: 767px) { .social-share { margin-bottom: 18px; } } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { .social-share .facebook, .social-share .twitter, .social-share .instagram, .share .facebook, .share .mail, .share .twitter, .share .print, .content-footer .social-media-holder h3, .content-footer .social-media-holder.facebook h3, .content-footer .social-media-holder.twitter h3 { background-image: url("../../images/sprite-retina.png"); background-size: 1000px auto; } .social-share .facebook { background-position: -897px -299px; } .social-share .twitter { background-position: -897px -412px } .social-share .instagram { background-position:-897px -375px } .content-footer .social-media-holder.instagram h3 { background-position: -897px -371px; } .content-footer .social-media-holder.twitter h3 { background-position: -897px -409px } .content-footer .social-media-holder.facebook h3 { background-position: -897px -295px; } }