/* Layout fixes for the 2013 template. Loaded after the template's own CSS. They keep the look and only fix alignment: uneven floats, logo boxes, the footer at tablet width, and the newsletter field (the template only sized input[type=text]). */ /* Service cards: equal height, clean rows at every width. With floats, one taller card pushed the next row sideways and hid the eighth card. */ .service-cards{display:flex;flex-wrap:wrap;width:100%} .service-cards>a{display:flex;text-decoration:none} .service-cards>a>.grid_3{display:flex;float:none} .service-cards .member{display:flex;flex-direction:column;float:none;width:100%} .service-cards .memberdescription{flex:1 1 auto;display:block} /* Partner logos: the same box height, logo centred (logos have different heights). */ .imgclient{display:flex;align-items:center;justify-content:center;height:126px} .imgclient picture{display:block;width:80%} .imgclient img{margin:0 auto;width:100%;height:auto;max-height:70px;object-fit:contain} /* Footer images never wider than their column (the TURSAB badge covered the next column). */ footer picture{display:block;max-width:100%} footer img{max-width:100%;height:auto} .gridfooter>a{display:inline-block;max-width:100%;vertical-align:top} .socialfooter{display:flex;flex-wrap:wrap;clear:both} .socialfooter picture{display:inline} /* Newsletter: the e-mail field and the button stay on one line at every width. */ .newsletterfooter{display:flex;flex-wrap:wrap;align-items:stretch} .newsletterfooter input[type=email]{float:none;flex:1 1 auto;width:auto;min-width:0} .newsletterfooter input[type=submit]{float:none;flex:0 0 40px} .newsletterfooter p{flex-basis:100%} /* ==== 1.1.0: header without jQuery (menus and side panels are popovers; pattern from gatealpha 1.1.1) ==== */ :where(#navigationmenu,.leftmenuopen,.rightsearchopen) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;line-height:0} .titlecloseleftmenu{display:block;width:100%;text-align:left;line-height:normal!important;font-size:inherit} [popover]::backdrop{background:rgba(0,0,0,.25)} /* Side panels: services (left) and languages (right). Esc or a click outside closes them. */ .leftmenuopen[popover],.rightsearchopen[popover]{position:fixed;margin:0;border:0;padding:0;width:300px;height:100%;max-height:none;overflow:auto;transform:none;top:0;transition:transform .5s ease,overlay .5s allow-discrete,display .5s allow-discrete} .leftmenuopen[popover]{inset:0 auto 0 0;left:0;transform:translateX(-305px)} .rightsearchopen[popover]{inset:0 0 0 auto;right:0;display:none;transform:translateX(305px);background-image:none} .leftmenuopen[popover]:popover-open,.rightsearchopen[popover]:popover-open{transform:none;display:block} @starting-style{.leftmenuopen[popover]:popover-open{transform:translateX(-305px)}.rightsearchopen[popover]:popover-open{transform:translateX(305px)}} .rightsearchopen .languagetitle{margin:20px 60px 10px 20px;font-size:17px;color:#fff} .languagelist{list-style:none;margin:0 0 20px;padding:0 20px;columns:2;column-gap:16px} .languagelist li{break-inside:avoid} .languagelist a{display:block;padding:7px 0;color:#fff;font-size:15px;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.12)} .languagelist a:hover,.languagelist a:focus{text-decoration:underline} .rightsearchopen .rightsearchopenclose{position:absolute;top:0;right:0;float:none;margin:0;width:60px;height:60px;background:url(/img/header/rightsearchopen.png) right center no-repeat} /* Top menu: drop-downs open on hover and on keyboard focus */ .sf-menu li:focus-within>ul{display:block} .navtoggle{display:none} @media (min-width:960px){ #sitenav{display:contents} /* No gap between the menu bar and its drop-down, so the hover does not end on the way down; close after a short delay, as the old menu script did, so a diagonal move still reaches the items */ .sf-menu>li>ul{margin-top:0;padding-top:20px;background-position:25px 10px} .sf-menu>li>ul{display:block;visibility:hidden;opacity:0;transition:opacity .15s .2s,visibility 0s .35s} .sf-menu>li:hover>ul,.sf-menu>li:focus-within>ul{visibility:visible;opacity:1;z-index:100;transition-delay:0s} } @media (max-width:959px){ #navigationmenu .leftmenuclose{display:none} #navigationmenu .rightsearchclose{display:block;position:absolute;right:0;top:0} #navigationmenu .navtoggle{display:block;position:absolute;right:68px;top:0} #sitenav[popover]{position:fixed;inset:0 auto 0 0;margin:0;border:0;padding:0 0 20px;width:min(320px,86vw);height:100%;max-height:none;overflow:auto;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.25)} #sitenav #nav{display:block;float:none;margin:0;width:100%} #sitenav .sf-menu li{float:none;display:block;width:100%;background:#fff} #sitenav .sf-menu ul{display:block;position:static;min-width:0;margin:0;padding:0;background:none} #sitenav .sf-menu a{padding:14px 20px;border-left:0;border-right:0} #sitenav .sf-menu ul a{padding-left:36px} } /* ==== 1.1.0: no script for accordions, entrance effects, parallax or "back to top" ==== */ html{scroll-behavior:smooth} /* clip, not hidden: a hidden overflow makes body a scroll container and scroll-driven effects never start */ body{overflow-x:clip} /* Accordions are
; one panel open at a time through a shared name */ .accordion details>summary{list-style:none;display:block} .accordion details>summary::-webkit-details-marker{display:none} .accordion details>summary h4{margin:10px 0} .accordion details:first-child>summary h4{margin-top:0} .accordion details[open]>summary h4{cursor:default} /* Entrance effects (were animate.css + jquery.inview). Content is never hidden unless the effect can run: motion allowed, wider than a phone, and a browser with scroll-driven animations. */ @keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:none}} @keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:none}} @keyframes fadeInLeft{0%{opacity:0;transform:translateX(-20px)}100%{opacity:1;transform:none}} @keyframes fadeInRight{0%{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:none}} @keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}100%{transform:scale(1)}} @keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}100%{transform-origin:left bottom;transform:none;opacity:1}} @keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}100%{transform-origin:right bottom;transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} @media (prefers-reduced-motion:no-preference){ /* top of the page: on load, with the old delays */ #navigationmenu.fade-down{animation:fadeInDown 1s both} .header-page.fade-up{animation:fadeInUp 1s both} .header-page .bounce-in{animation:bounceIn 1s both} .logo.fade-up{animation:fadeInUp 1s both} :is(#navigationmenu,.header-page,.logo).animate1,.header-page .animate1{animation-delay:.4s} :is(#navigationmenu,.header-page,.logo).animate2,.header-page .animate2{animation-delay:.8s} :is(#navigationmenu,.header-page,.logo).animate3,.header-page .animate3{animation-delay:1.2s} :is(#navigationmenu,.header-page,.logo).animate4,.header-page .animate4{animation-delay:1.6s} /* further down: play while the element scrolls into view */ @media (min-width:768px){@supports (animation-timeline:view()){ main .fade-up:not(.header-page),main .fade-down,main .fade-left,main .fade-right,main .bounce-in:not(.header-page *),main .rotate-In-Down-Left,main .rotate-In-Down-Right{animation-duration:auto;animation-fill-mode:both;animation-timing-function:ease-out;animation-timeline:view();animation-range:entry 0% entry 90%} main .fade-up:not(.header-page){animation-name:fadeInUp} main .fade-down{animation-name:fadeInDown} main .fade-left{animation-name:fadeInLeft} main .fade-right{animation-name:fadeInRight} main .bounce-in:not(.header-page *){animation-name:bounceIn} main .rotate-In-Down-Left{animation-name:rotateInDownLeft} main .rotate-In-Down-Right{animation-name:rotateInDownRight} }} } @media print{main *{animation:none!important;opacity:1!important}} /* ==== 1.1.0: home banner and charts without script ==== */ /* Banner: three slides cross-fade, 9 s each (27 s cycle). Same size as the old slider: 1170 x 650 scaled. */ .heroslider{position:relative;overflow:hidden;width:100%;height:min(650px,calc(100vw * 650 / 1170));background:#b2c4cc} .heroslides{list-style:none;margin:0;padding:0} .heroslides,.heroslide{position:absolute;inset:0;margin:0} .heroslide picture,.heroslide img{display:block;width:100%;height:100%} .heroslide img{max-width:none;object-fit:cover;object-position:center top} .heroslide{opacity:0;animation:heroslide 27s linear infinite} .heroslide:nth-child(1){animation-delay:-.81s} .heroslide:nth-child(2){animation-delay:8.19s} .heroslide:nth-child(3){animation-delay:17.19s} @keyframes heroslide{0%{opacity:0}3%{opacity:1}33%{opacity:1}36%{opacity:0}100%{opacity:0}} /* Pause: the switch, or the mouse or keyboard focus on the banner */ .heroslider:hover .heroslide,.heroslider:focus-within .heroslide,.heroslider:has(.heropause:checked) .heroslide{animation-play-state:paused} .heropause{position:absolute;opacity:0;width:1px;height:1px;margin:0} .heropauselabel{position:absolute;z-index:5;right:16px;bottom:16px;width:40px;height:40px;border-radius:50%;background:rgba(67,74,84,.75);cursor:pointer} .heropauselabel::before,.heropauselabel::after{content:"";position:absolute;top:12px;width:5px;height:16px;background:#fff} .heropauselabel::before{left:13px}.heropauselabel::after{right:13px} .heropause:checked+.heropauselabel::before{left:15px;width:0;height:0;background:none;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff} .heropause:checked+.heropauselabel::after{display:none} .heropause:focus-visible+.heropauselabel{outline:2px solid #fff;outline-offset:2px} /* phones and reduced motion: the first photo only, no movement, no switch */ @media (max-width:767px){.heroslide:nth-child(n+2){display:none}} @media (max-width:767px),(prefers-reduced-motion:reduce){.heroslide{animation:none!important}.heroslide:first-child{opacity:1}.heropauselabel{display:none}} @media print{.heroslide{animation:none!important}.heroslide:first-child{opacity:1}.heroslide:nth-child(n+2),.heropauselabel{display:none}} /* Round charts on the home page (were easy-pie-chart): a ring of data-percent around the photo */ .percentagehome{position:relative;width:140px;height:140px} .percentagehome img{display:block;width:140px;height:140px} .percentagehome::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(#55738F calc(var(--p,0)*1%),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 10px));mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 10px))} .percentagehome[data-percent="90"]{--p:90}.percentagehome[data-percent="80"]{--p:80}.percentagehome[data-percent="70"]{--p:70} /* ==== 1.1.0: former inline style attributes (the content security policy allows none). !important keeps the precedence an inline style had over the theme's rules. ==== */ .err-button{background: #1abc9c !important;color: #fff !important;padding: 12px 30px !important;border-radius: 3px !important;text-decoration: none !important;display: inline-block !important} .err-code{font-size: 72px !important;color: #e74c3c !important;margin-bottom: 20px !important} .err-section{background: #f5f5f5 !important;padding: 80px 0 !important} .err-text{font-size: 16px !important;color: #666 !important;margin-bottom: 30px !important} .err-title{font-size: 28px !important;color: #333 !important;margin-bottom: 15px !important} .formerror{color: #F44336 !important} .honeypot{position: absolute !important;left: -9999px !important;opacity: 0 !important;height: 0 !important;overflow: hidden !important} .u-badge-red{background:#f5696c !important;color:#fff !important;padding:12px 20px !important;border-radius:3px !important;font-size:14px !important} .u-blue{color:#017ED2 !important} .u-btn-blue{background:#017ED2 !important;color:#fff !important;border:0 !important;padding:10px 22px !important;cursor:pointer !important;border-radius:4px !important;font-size:14px !important} .u-cell{padding:8px !important;border:1px solid #ddd !important} .u-center{text-align: center !important} .u-center-pad{text-align: center !important;padding: 20px 0 !important} .u-left{text-align: left !important} .u-legal{line-height:1.7 !important;color:#333 !important} .u-mb15{margin-bottom:15px !important} .u-mt14-end{margin-top:14px !important;justify-content:flex-end !important} .u-mt24{margin-top:24px !important} .u-note{color:#666 !important;font-size:13px !important;margin-top:30px !important} .u-subtitle{font-size:17px !important;font-weight:normal !important;color:#636b77 !important;margin-top:10px !important} .u-subtitle-light{font-size:17px !important;font-weight:lighter !important;color:#636b77 !important;margin-top:10px !important} .u-table{border-collapse:collapse !important;width:100% !important;font-size:13px !important;margin-top:10px !important} .u-th{background:#f5f5f5 !important;text-align:left !important} .u-w100{width: 100% !important} .u-w16{width: 16% !important;align-content: right !important} .u-w70{width: 70% !important} .u-w84{width: 84% !important;align-content: left !important} /* ==== Cookie consent banner (was an inline