which is 1100px wide and centered within

*/ #page { width: 100%; min-width: 1100px; text-align: center; flex: 1 0 auto; /* 2 */ padding: var(--space) var(--space) 0; } #page::after { content: '\00a0'; /* */ display: block; margin-top: var(--space); height: 0px; visibility: hidden; } @media (--break-lg) { #page { padding-top: var(--space-lg); } #page::after { margin-top: var(--space-lg); } } #main { width:1100px; padding: 15px 0; /* setting this margin is what allows us to centre this div i.e.

which is a direct child of */ margin: 0px auto; } /* mainleft is a third layer of 'main'/'outer' container, which just sits inside #main and fills it 100% width but aligns text left instead of centre */ #mainleft { width:100%; text-align:left; background: #fff; padding: 20px; box-sizing: border-box; } /* end of layout code */ /* start of classes for the header */ .headerbar { height:116px; width:1100px; z-index:100; margin: 0 auto; display: flex; justify-content: space-between; flex: none; } .headerbarjuniorprlogo { position:absolute; width:250px; max-width:100%; height:67px; left:0; top:24px; background-image:url('https://images.parkrun.com/website/juniorprlogo.png'); background-repeat:no-repeat; z-index:2; filter: brightness(0); background-size:contain; } .headerbarprlogo { position:absolute; width:310px; height:67px; left:0; top:24px; background-repeat:no-repeat; } .headerbarleft { float:left; width: 250px; height:100%; position:relative; } .headerbarright { float:right; height:100%; } .menubar { float:left; padding-top:70px; } .headerspacer { display:none; } /* end of classes for the header */ /* start of classes for menu on all pages - this is adapted from the css in style.css of twentyeleven (default) theme */ #access { clear: both; display: block; float: left; margin: 0 auto 6px; width: auto; font-family: 'Montserrat', sans-serif; font-size:14px; } #access ul { font-size: 13px; list-style: none; margin: 0 0 0 -0.8125em; padding-left: 0; display: flex; } #access li { float: left; position: relative; } /* highlight register menu item */ #access a[href*="register"], #access a[href*="rejestracja"] { color:#e21145; } #access a { color: #272727; background-color:Transparent; display: block; padding: 5px 12px; text-decoration: none; font-size: 16px; } /* this is what hiddes the sub-menu by default i.e. when its parent is not being hovered over - the rest of the sub-menu styles are in ul.sub-menu below */ #access ul ul { display: none; } .notparkrun-link:hover{ cursor: pointer; } /* this is what makes the drowpdowns appear when we hover */ @media (min-width: 1024px) { #access ul li:hover > ul { display: block; } } #access ul ul a { padding: 5px 10px; } #access li:last-child a { padding-right: 0; } #access .sub-menu .sub-menu, #access .children .children { left: 100%; margin-left: 0; top: -1px; } /* this is what styles the dropdown block i.e the ul that appears when a parent menu item is hovered over */ ul.sub-menu, ul.children { /* positioning stuff */ float: left; margin: 0; position: absolute; top: 100%; /* made this -1em i.e. menu starts a bit to the left so that the More.. dropdown (see next rule) doesn't look too out of place being -3.8 to the left, which it needs to be to not attract a horizontal scrollbar as its near the rhs of page */ left: -1em; min-width: 150px; z-index: 99999; text-align:left; /* styling stuff */ background: #FFFFFF; border:1px solid #DDDDDD; font-size: 13px; font-weight: normal; height: auto; line-height: 1.4em; } /* this styles all the individual sub-menu items, whether currently selected or not */ ul.sub-menu > li, ul.children > li { border-bottom: 1px dotted #DDDDDD; width:100%; /* these top and bottom 5px paddings combine with the 5px top and bottom padding for the link that the li contains, provided by "#access a" above - easier to put the extra here rather than change all the a: flavours to override "#access a" with 10px top and bottom */ padding-top:5px; padding-bottom:5px; } /* override the FIRST sub-menu item such that it doesn't get the top border dotted line because it doesn't need a separator as its at the top of the dropdown */ ul.sub-menu > li:last-child, ul.children > li:last-child { border: 0; } /* this styles the links within the dropdown menu (except when hovered over) note the !important is required to override "#access a" above */ #access .sub-menu > li > a:link, #access .sub-menu > li > a:visited, #access .children > li > a:link, #access .children > li > a:visited { color:#444444; } /* this is the hover over style for top-level (i.e. always visible) menu items EXCEPT where this is the currently selected top-level menu item */ #access > div > ul > li:hover > a { color:#ffa300; } /* these next 3 are the currently selected dropdown menu item (i.e. WITHIN the dropdown menu) EXCEPT where it is being hovered over currently - note that the middle one is removing the top dotted border from the next menu item below it */ #access > div > ul > li.current-menu-ancestor > ul > li.current-menu-item { color:inherit; } #access > div > ul > li.current-menu-ancestor > ul > li.current-menu-item + li { /* the + above selects the NEXT

after (physically below in the dropdown) the selected one */ border-top-style:none !important; border-top-width:0px !important; } #access > div > ul > li.current-menu-ancestor > ul > li.current-menu-item > a { /*color:#FFFFFF !important;*/ background-color:inherit; } /* this is the hover styles over the dropdown items EXCEPT where the item is currently selected */ #access > div > ul > li > ul > li > a:hover { color:#ffa300 !important; background-color:inherit; } /* this is the hover styles over the dropdown items WHERE the item IS currently selected - this color doesn't actually dynamically change (its white) but we must override the rule immediately above which changes the color on hover for all the OTHER (i.e. unselected) dropdown menu items*/ #access > div > ul > li.current-menu-ancestor > ul > li.current-menu-item > a:hover { background-color:inherit; } /* ensure submenu of last item is on screen */ #access ul li:nth-last-child(1) ul.sub-menu, #access ul li:nth-last-child(1) ul.children { right: 0; left: unset; } /* highlight first two items (not)parkrun */ #access ul[id^="menu-parkrun_country_menu"]>li:nth-child(5)>ul>li:nth-child(-n+2)>a { color: #e21145; } #access ul[id^="menu-parkrun_event_menu"]>li:nth-child(5)>ul>li:nth-child(-n+2)>a { color: #e21145; } /* end of classes for menu on all pages - this is adapted from the css in style.css of twentyeleven (default) theme */ /* start of general content classes i.e. not related particularly to e.g. header/footer/menu etc */ h1 { font-size:36px; font-weight:bold; color:#272727;; background-color:inherit; text-align:center; margin:30px 0 40px; } #main p, #main ul { margin: 1rem 0; line-height: 1.5; } #main ul { padding-left: 32px; } h2 { font-size:32px; font-weight:bold; color:#272727; background-color:inherit; margin:30px 0 10px; } h3 { font-size:24px; font-weight:bold; color:#272727; background-color:inherit; margin:30px 0 10px; } h4 { font-size:18px; font-weight:bold; color:#272727; background-color:inherit; margin:30px 0 10px; } h1:first-child, h2:first-child, h3:first-child, h4:first-child { margin-top:0; } h1[class*="pad"], h2[class*="pad"], h3[class*="pad"], h4[class*="pad"] { padding:0; } #main h1 + .clear { display: none; } /* start of homepage rules - if we don't share these with other pages, can remove these to special stylesheet per page if we want - means we'd reference 2 stylesheets i.e. whats left here (generic.css maybe) and the specific - and therefore SMALL with no redundancy of stuff specific to other pages - one for that page; we'd do this for all pages */ .hometop { padding-top:20px; } .hometoph3 { height:50px; } .hometopleft { float:left; width:48%; position:relative; } .hometopleftinner { float:right; width:250px; text-align:center; } .hometopright { float:right; text-align:left; width:48%; } .hometoprightinner { width:250px; text-align:center; } .homebarcode { width:500px; margin: 0px auto; text-align:left; } .homebarcodeimage { display:inline-block; width:99px; padding-top:30px; } .homebarcodetext { display:inline-block; width:350px; vertical-align:top; padding-left:40px; } .homebarcodelist { display:inline; vertical-align:top; line-height: 22px; } .homeupcoming { /*color:#6A8B98; background-color:inherit;*/ font-weight:bold; font-size:16px; line-height:18px; } .homeleft { float:left; width:calc(50% - 10px); background: #fff; padding: 20px; box-sizing:border-box; text-align: left; } /* homeright, ..inner and ..innerinner are all required to get the right hand side bar of the homepage working such that we can specify an image with width of between 350px and 600px and it will behave correctly regardless of where in that range it is i.e. the bigger image contracts LEFTWARDS into the gap in the middle of the page (between homeleft and homeright divs) rather than rightwards making the page lopsided AND it takes the text below the image (Thanks to this weeks vols etc) flush with it i.e. it moves the left hand edge of that text also leftwards into the gap so it stays flush with the left hand edge of the image and expands to be the same width as the image */ .homeright { float:right; width:calc(50% - 10px); background: #fff; padding: 20px; box-sizing:border-box; text-align: left; } .homeright .homeupcoming { text-align: left; } .homeright img { width: 100%; } /* end of homepage rules - may move to specific homepage stylesheet (see above) */ /* start of course page rules - same as home page i.e. may move to specific site */ /* the main left and right panels use display:table-cell to acheive the two column effect with special provision that the LHS column should expand and contract to fill the rest of the width of the main content area based on the width of the map at the top of the RHS column i.e. and that map should define the width of the entire RHS column. "table-cell" display value is supported by Opera, Safari, FF and Chrome (can't see note of when they started supporing but think they've done so for a long time); IE8 onwards supports it, but prior to 8 it will not display absolutely as intended - but its only ~1.5% of browsers (now at October 2012) and decreasing, plus it still renders quite sensibly in IE7 just not in the two-column design */ .courseleft { float:left; width:calc(50% - 10px); padding: 20px; background: #fff; box-sizing: border-box; text-align:left; } .page-template-home-page-php .courseleft, .page-template-events-page-php .courseleft { width: 100%; } .courseright { float:right; width:calc(50% - 10px); padding: 20px; background: #fff; box-sizing: border-box; text-align:left; } .courseright iframe { max-width: 100%; width:100%; height: 400px; border: none; } .coursegivewayimg, .coursebusimg, .courseleft img[src*="RunnersMedicalResource.gif"] { display: none; } .floatright { float:right; } .floatleft { float:left; } /* end of course page rules */ /* results styles */ table#results { /* this centres the table within the parent div */ margin-left:auto; margin-right:auto; margin-top: 30px; text-align:left; border-spacing:0; background: #fff; padding: 20px; } .courseleft table#results { padding-left: 0; margin: 0; } #results caption { padding-bottom: 10px; font-size: 20px; font-weight: bold; } #results th { white-space:nowrap; text-align:center; padding: 0 20px 10px 0; } #results A:link, #results A:visited { font-family: 'Montserrat', sans-serif; color:#272727; font-weight:normal; text-decoration:none; line-height:normal; outline: none; } #results A:hover, #results A:active { font-family: 'Montserrat', sans-serif; color:#ffa300; font-weight:normal; text-decoration:none; line-height:normal; } #results .normal, #results p, #results div, #results td, #results li { font-family: 'Montserrat', sans-serif; font-size:12px; color:#272727; line-height:normal; } #results th A:link, #results th A:visited, #results th A:hover, #results th A:active, #results th { font-family: 'Montserrat', sans-serif; font-size:16px; color:#272727; text-decoration:none; line-height:normal; font-weight:normal; } #results th { padding-bottom: 10px; } #results td { font-size:14px; border:1px solid #272727; vertical-align:middle; padding:5px; border-bottom: 0; } #results td td { padding:0px; background-color:transparent; border:0px; } #results td.gender { font-size:12px; background-color:#edecd3; border:1px solid #d8d7a6; vertical-align:middle; padding:5px; text-align:center; color:#929163; } #results td.empty { border:0px; background-color:transparent; } #results th.bspacer, #results td.bspacer { border-style:none; border-width:0px; background-color:transparent; } #results td.newRecord { font-weight:bold; font-style: italic; } #results img { border-style:none; border-width:0; } #results .sortarrow { filter: brightness(1) invert(1); } #results tr:last-child td{ border-bottom: 1px solid #272727; } #results tr:last-child td.bspacer { border-bottom: 0; } #results tfoot tr:first-child td { border-top: 0; } #results td:not(.bspacer) + td{ border-left: 0; } #results .odd td:not(.bspacer){ background: #f2f2f2; } #results .nowrap { white-space: nowrap; } .resultstop { display:inline-block; text-align:center; width:948px; /* (page width - padding - border) = (970 - 20 - 2) = 948px */ padding:10px 10px 10px 10px; border-radius:7px; border-color:#C7DBE3; border-width:1px; border-style:solid; color:inherit; background-color:#F5FAFC; } .resultstopleft { float:left; width:45%; } .resultstopleftinner { float:right; text-align:left; } .resultstopright { float:right; width:45%; text-align:left; } /* end of results pages styles */ .margintandb { margin-top:10px; margin-bottom:10px; } .moremargintandb { margin-top:20px; margin-bottom:20px; } .paddedl { padding-left:10px; } .paddedr { padding-right:10px; } .morepaddedl { padding-left:20px; } .morepaddedr { padding-right:20px; } .left { text-align:left; } .centred { text-align:center; } .relativepos { position:relative; display: flex; } .absolutepos { position:absolute; } .red { color:Red; background-color:inherit; } .linkedimage { border-style:none; border-width:0; } .noindentlist { margin-left:-0.95em; padding:0; } .largerfont { font-size:larger; margin-top: 20px; } .largerfont:first-child { margin-top:0; } .rosterimagetext { vertical-align:-2px; } .fb-like { display:inline-block; } .twitter-share-button { /* this class is applied to the twitter iframe that's produced for the Tweet button - this height is needed to vertically align the Tweet widget with the Facebook "Like" widget */ vertical-align:top; padding-left:10px; box-sizing: unset; } .socialmediacontainer { /* contains the FB/Twitter widgets with the news item (WP blog) posts*/ padding-top:10px; } .wp-bookmark-ul { text-align:left; } .news-nav-no-link { color:#BBBBBB; background-color:inherit; } .threecoldiv { float:left; text-align:center; width: calc((100% - 40px)/3); padding: 6px 30px 30px; background: #fff; position: relative; box-sizing: border-box; overflow: hidden; } .threecoldivmiddle { margin: 0 20px; } .threecoldiv h1{ margin:20px 0; padding:0; font-size: 32px; min-height: 2.4em; } .threecoldiv > img{ max-width: 100%; border-radius:5px; } .threecoldiv p{ text-align:left; padding: 0; margin: 10px 0; } .threecoldiv a:last-child div{ margin-top: 15px; background-color: #ffa300; width: 100%; box-sizing: border-box; position: relative; font-size: 16px; /* text-transform: capitalize; */ padding: 10px; border-radius: 10px; color: white; } .threecolbutton { position:absolute; top:630px; } .autowidth { width:auto; } .result-chart-iframe-div { width:100%; margin:0 auto; } .ajax-search-control { display:flex; position: relative; clear: left; float: left; margin-top: 20px; } .ajax-search-control label { margin-right:10px; line-height: 30px; } .ajax-search-control input { width: 275px; margin-right: 10px; box-sizing: border-box; line-height: 28px; height: 30px; padding: 0 5px; border: 1px solid #aaa; } .ajax-search-control .input span { line-height: 30px; } .ui-autocomplete { width: 275px !important; background: #fff; border: 1px solid #aaa; border-top: 0; box-sizing: border-box; padding: 5px; } .ui-autocomplete .ui-menu-item { list-style: none; } .clear { clear:both; } /* end of general content classes i.e. not related particularly to e.g. header/footer/menu etc */ /* registration pages */ .register { font-size:16px; text-align:left; } .reg-warning-img { width:100px; height:87px; } .reg-warning-img-div { width:102px; display:none; } .reg-warning-text { padding: 10px 0; width: 100%; } .reg-flag-link-div { width:400px; height:auto; border:1px solid #CCCCCC; color:inherit; padding: 15px 20px; background: #fff; border: 0; max-width:100%; box-sizing:border-box; } #main .reg-flag-link-div p:first-child { margin-top:0; } .reg-form-iframe-short { width:100%; height:460px; } .reg-form-iframe-tall { width:100%; height:550px; } /* Russia needs taller yet */ .reg-form-iframe-taller { width:100%; height:600px; } .sparkle-logo-img { width:300px; height:128px; } .sparkle-blurb { width:600px; height:auto; } .reg-ts-and-cs { width:100%; padding:20px; color:inherit; background-color:#fff; box-sizing: border-box; } /* sponsor-heading should be the same across all the sponsor stylesheets AND here, such that the heading area (h1 left-aligned and - on some pages - logo right-aligned) is the same height across them all, so that clicking between them, the banner images do not appear to move up and down; need it here as the sponsor landing page and supports page use this general stylesheet, but also have the banner images and we want that consistancy */ .sponsor-heading + div { float: left; width: 100%; margin-bottom: 20px; } /* the split images in e.g. adidas sponsor page, whilst natively 200px tall, render at 203 or 204px in the browser - don't know why (using googles rule lines in dev tools); so, adding 3px to the bottom of the single image in default sponsor page, which both IS 200px AND renders as 200px, so that flicking between that and the individual sponsors pages, the content doesn't flicker up and down below the banner images */ .base-sponsor-banner-div { margin: 0 auto; float: none; } .sponsor-intro { padding-left:200px; } .sponsor-intro-image-div img { margin-top: 5px; margin-bottom: 20px; float: left; } .country-aboutus-left { width:calc(100% - 380px); background: #fff; padding: 20px; box-sizing:border-box; } .country-aboutus-right { width:360px; background: #fff; padding: 20px; box-sizing:border-box; } .country-aboutus-sidebar { color:inherit; margin-top: 10px; } .country-aboutus-bio-img { width:250px; height:250px; margin-right:10px; margin-bottom:10px; border:1px solid #CCCCCC; } .uk-event-home-sponsor-block { width: 100%; box-sizing: border-box; color:inherit; background-color:#EFEFEF; border:2px solid #DDDDDD; padding-bottom: 10px; } .auto-width-height { width:auto !important; height:auto !important; } .uk-event-home-single-sponsor { width:100%; height:90px; text-align:center; color:inherit; background-color:#EFEFEF; line-height:90px; padding: 10px 0 0 0; } .uk-event-home-single-sponsor img { vertical-align: middle; max-height: 100%; } a.profilelink:link,a.profilelink:visited,a.profilelink:hover,a.profilelink:active { color:#FFFFFF; background-color:inherit; text-decoration:none; display: block; } p.profilelink { padding: 10px; font-size: larger; color: white; background-color: #C1C944; margin: 0px 0px 0px 0px; border-radius: 10px } #page:before { content: ''; height: 116px; background: #fff; width: 100%; position: absolute; top: 0; left: 0; } footer { margin-top: 15px; color:inherit; background-color:#FFFFFF; z-index: 1; bottom: 0; width: 100%; flex: none; } #content { overflow: auto; } #main > div[style*="parkrun_banner.png"]:first-child { display: none; } div[class*="-and-pr"] { width: calc(100% - 360px); background: #fff; padding: 20px; box-sizing: border-box; } div[class*="-and-pr"]:not(.floatleft) { margin-top: -40px; padding-top: 0; } div[class*="-sidebar-width"] { width: 340px; background: #fff; padding: 20px; box-sizing: border-box; } div[class*="-threecoldivmiddle"] { margin: 0 20px; } .sponsor-heading + .clear + div { margin-bottom: 20px; } .sponsor-heading + div, .sponsor-heading + .clear + div { display: flex; justify-content: center; } .sponsor-heading + div .floatleft, .sponsor-heading + .clear + div .floatleft { margin-right: 10px; } .sponsor-heading + div .floatright, .sponsor-heading + .clear + div .floatright { margin-left: 10px; } img.country-home-hero { margin-bottom: 20px; border-radius: 5px; } .events-map-container { float:left; clear:left; margin-top:20px !important; width:100%; box-sizing:border-box; } .events-map-container div[id*="hover_over"], .events-map-container div[id*="info_over"] { margin-top: 20px; padding: 0 !important; width: 100% !important; } .events-map-container div[id*="tree"] { height: calc(100% - 110px) !important; margin-top: 10px !important; } #main .events-map-container ul { padding-left: 24px; } #main .events-map-container ul ul { padding-left: 10px; } #main .events-map-container ul ul ul { padding-left: 35px; } iframe.regform { width: 800px; height: 1300px; } #viewroster { overflow: auto; } .hide{ display: none; } @media (max-width: 1160px) { #page { width: 100%; min-width: auto; } #main, .statscontainer, .headerbar{ width:100%; padding-left:30px; padding-right:30px; box-sizing: border-box; } #access a { padding: 5px 10px; } } @media (max-width: 1023px) { .relativepos { flex-wrap:wrap; } .threecoldiv { width:100%; margin-top: 20px; } .threecoldiv:first-child { margin-top: 0; } .threecoldiv h1{ min-height: 0px; } .threecoldivmiddle { margin-left: 0; margin-right: 0; } div[class*="-and-pr"] { width: 100% } div[class*="-sidebar-width"] { width: 100%; margin-top: 20px; } div[class*="-threecoldiv"] { margin-top: 20px; } div[class*="-threecoldiv"]:first-child { margin-top: 0; } div[class*="-threecoldivmiddle"] { margin-left: 0; margin-right: 0; } .country-aboutus-left { width: 100%; } .country-aboutus-right { width: 100%; margin-top: 20px; } .headerbar { position: fixed; top: 0; left: 0; z-index: 2000; background: #fff; } .headerspacer{ display:block; height:116px; } .menubar{ padding-top: 44px; } .menuButton { width: 40px; height: 29px; position: relative; cursor: pointer; } .menuButton .line { background: #272727; height:3px; width:100%; position:absolute; left:0; transition: 0.5s all ease; } .menuButton .line:nth-child(1) { top:0; } .menuButton .line:nth-child(2) { top:13px } .menuButton .line:nth-child(3) { top:26px } .menuOpen .menuButton .line:nth-child(1) { transform: rotateZ(-45deg) translateY(10px) translateX(-9px); } .menuOpen .menuButton .line:nth-child(2) { opacity:0; transform: translateX(100%); } .menuOpen .menuButton .line:nth-child(3) { transform: rotateZ(45deg) translateY(-9px) translateX(-9px); } #access{ position:fixed; top: 116px; left: 0; width: 300px; transform: translateX(-300px); transition: 0.5s all ease; box-sizing: border-box; background: #fff; height: calc(100% - 116px); z-index: 100; border-top: 1px solid #272727; padding: 20px 0; overflow: auto; } #access ul { width:100%; text-align: left; margin:0; display: block; } #access li { width:100%; border: 0; } #access .menu-item-has-children, #access .page_item_has_children { background-image:url('https://images.parkrun.com/website/caret-down-solid.svg'); background-position: calc(100% - 30px) 8px; background-repeat: no-repeat; background-size: 10px; } #access a { padding: 5px 30px; float: left; } #access li:last-child a { padding-right: 30px; } #access ul ul a { padding: 5px 30px; } #access ul.sub-menu, #access ul.children { position:relative; left:0; top:0; box-sizing: border-box; border: 0; border-left: 0; border-right: 0; margin: 10px 0; display: none; padding-left: 20px; } #access ul.sub-menu .menu-item-has-children, #access ul.children .page_item_has_children { background-position: calc(100% - 30px) 10px; } #access .sub-menu .sub-menu, #access .children .children { left:0; top: 0; margin-top: 5px; margin-bottom: 0; padding: 5px 0; padding-left: 20px; } .menuOpen #access { transform: translateX(0); } .menubar .menuScrim { background:rgba(0,0,0,0.3); position:fixed; top: 116px; left: 300px; width: calc(100% - 300px); height: calc(100% - 116px); z-index: 100; transform: translateX(100%); transition: 0.5s all ease; } .menuOpen .menuScrim { transform: translateX(0); } #access .menu-item-has-children.subOpen > a, #access .page_item_has_children.subOpen > a { color: #ffa300; } #access .menu-item-has-children.subOpen > ul.sub-menu, #access .page_item_has_children.subOpen > ul.children { display:block; } #page:before { display:none; } .events-map-container { height: auto !important; border: 0 !important; border-radius: 0 !important; } .events-map-container div[id*="map_canvas"] { width: 100% !important; height: 600px !important; } .events-map-container div[id*="map_canvas"] + div { width: 100% !important; float: left !important; height: 400px !important; background-color: #F5FAFC; border-style: solid; border-width: 1px; border-color: #C7DBE3; box-sizing: border-box; max-width: unset; padding: 20px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .events-map-container div[id*=tree] { height: calc(100% - 70px) !important; } .events-map-container div[id*="hover_over"], .events-map-container div[id*="info_over"] { margin-top: 0; } .ajax-search-control input { float:left; } .ajax-search-control .input span { line-height: 20px; float: left; clear: left; margin-top: 10px; } } @media (max-width: 767px) { #main { padding: 30px 0; } #main, .statscontainer, .headerbar{ padding-left: 20px; padding-right: 20px; } .sponsor-intro-image-div { width: 100%; } .sponsor-intro { padding-left: 0; } .sponsor-heading .floatright { float: left; clear: left; margin-top: -20px; margin-bottom: 20px; } .sponsor-heading + div, .sponsor-heading + .clear + div { display: block; float: left; width: 100%; } .sponsor-heading + div .floatleft, .sponsor-heading + .clear + div .floatleft { width: 100%; margin: 0; } .sponsor-heading + div .floatright, .sponsor-heading + .clear + div .floatright { width: 100%; margin: 0; } .homeleft { width: 100%; } .homeright { width: 100%; margin-top: 20px; } .courseleft { width: 100%; } .courseright { width: 100%; margin-top: 20px; } #main h1 { font-size:32px; } #main h2 { font-size:28px; } .headerbar, .headerspacer { height:90px; } .headerbarleft { width: calc(100% - 60px); } .headerbarjuniorprlogo, .headerbarflagclickable, .headerbarprlogo { top:11px; } .headerbarprlogo { width: 100%; background-size: contain; background-position: left center; background-repeat: no-repeat; } .menubar { padding-top:31px; } #access { top:90px; height:calc(100% - 90px); padding: 10px 0; } #access a, #access ul ul a { padding: 5px 20px; } .menubar .menuScrim { top:90px; height:calc(100% - 90px); } .headerbareventname{ bottom: -2px; } img.country-home-hero { display: none; } .events-map-container div[id*="map_canvas"]{ height: 400px !important; } iframe.regform { width: 100%; height: 1450px; } .ajax-search-control { display: block; } .ajax-search-control label { float: left; margin-bottom: 10px; width: 100%; } .ajax-search-control .input span { width: 275px; } } .Results * { box-sizing: border-box; } .Results { text-align: left; margin-bottom: 20px; } .Results a { color: inherit; } .Results-header { text-align: center; } .Results-header h1 { margin-bottom: 10px; padding: 0 10px; } .Results-header h3 { margin: 0 0 30px; font-weight: 400; padding: 0 10px; } .Results-header .spacer { opacity: 0.1; font-size: 30px; } .spacer { opacity: 0.4; } .Results-filters { background: #3e3e77; border-radius: 5px 5px 0 0; display: flex; justify-content: space-between; padding: 15px; align-items: center; z-index: 1; position: sticky; top: 0; } .Results-filters--fixed { border-radius: 0; } .Results-filters-input { line-height: 20px; background: #fff; border-radius: 3px; padding: 0; padding-left: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23272727' d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none' /%3E%3C/svg%3E"); background-position: 10px center; background-repeat: no-repeat; flex-grow: 1; margin-right: 15px; } .Results-filters-input input { width: 100%; background: #fff; border: 0; border-radius: 0; color: #888; padding: 0; padding-right: 10px; margin: 0; height: 40px; line-height: 40px; font-size: 14px; } .Results-filters-input .selectize-control { min-height: 40px; display: flex; } .Results-filters-input .selectize-input { padding: 5px 0 !important; border: 0 !important; box-shadow: none !important; } .Results-filters-input .selectize-input input { padding-right: 10px !important; color: #272727; } .Results-filters-input .selectize-input:not(.has-items) input { width: 100% !important; } .Results-filters-input .selectize-control.multi .selectize-input .item { background-color: #eaeaf3; padding: 5px 15px; line-height: 20px; margin-top: 5px; margin-left: 5px; border-radius: 30px; padding-right: 35px !important; color: #3e3e77; } .Results-filters-input .selectize-control.multi .selectize-input .item .remove { border: 0; font-size: 24px; font-weight: 300; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%233e3e77' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); color: transparent; background-position: center center; background-size: 20px; background-repeat: no-repeat; right: 10px; background-color: transparent; } .Results-filters-input .selectize-control.multi .selectize-input .item--name .remove { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%233e3e77' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); } .Results-filters-input .selectize-control.multi .selectize-input .item--agegroup .remove { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffa300' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); } .Results-filters-input .selectize-control.multi .selectize-input .item--club .remove { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff3c00' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); } .Results-filters-input .selectize-control.multi .selectize-input .item--gender .remove { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%232e9e7c' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); } .Results-filters-input .selectize-control.multi .selectize-input .item--achievement .remove { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%236ec24d' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); } .Results-filters-input .selectize-dropdown .option { padding: 10px; border-top: 1px solid #bebdc4; } .Results-filters-input .selectize-dropdown .option:first-child { border-top: 0; } .Results-filters-input .selectize-dropdown .option .type { padding: 5px 15px; line-height: 20px; border-radius: 30px; margin-left:10px; } .Results-filters-input .selectize-control.multi .selectize-input .item--name, .Results-filters-input .selectize-dropdown .option .type--name { background-color: #eaeaf3; color: #3e3e77; } .Results-filters-input .selectize-control.multi .selectize-input .item--agegroup, .Results-filters-input .selectize-dropdown .option .type--agegroup { background-color: #fff0d4; color: #ffa300; } .Results-filters-input .selectize-control.multi .selectize-input .item--club, .Results-filters-input .selectize-dropdown .option .type--club { background-color: #ffe4dc; color: #ff3c00; } .Results-filters-input .selectize-control.multi .selectize-input .item--gender, .Results-filters-input .selectize-dropdown .option .type--gender { background-color: #dcfff4; color: #2e9e7c; } .Results-filters-input .selectize-control.multi .selectize-input .item--achievement, .Results-filters-input .selectize-dropdown .option .type--achievement { background-color: #e7ffde; color: #6ec24d; } .Results-filters-input .selectize-control.multi .selectize-input .item--day, .Results-filters-input .selectize-dropdown .option .type--day { background-color: #e7ffde; color: #6ec24d; } .Results-filters-input .selectize-control.multi .selectize-input .item--event, .Results-filters-input .selectize-dropdown .option .type--event { background-color: #eaeaf3; color: #3e3e77; } .Results-filters-input .selectize-control.multi .selectize-input .item--country, .Results-filters-input .selectize-dropdown .option .type--country { background-color: #eaf3ea; color: #3e773e; } .Results-filters-input .selectize-dropdown .active { background: #f5f4f9; color: #272727; } .Results-filters-selects { display: flex; } .Results-filters-select { position: relative; margin-left: 15px; } .Results-filters-select select { background: #3e3e77; border: 1px solid #fff; border-radius: 3px; font-size: 14px; color: #fff; height: 50px; line-height: 24px; padding: 7px 9px; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23fff'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); background-position: calc(100% - 2px) center; background-repeat: no-repeat; appearance: none; -webkit-appearance: none; } .Results-filters-select select::-ms-expand{ display: none; } .Results-filters-select--icon { position: relative; } .Results-filters-select--icon:before { content: ''; background-repeat: no-repeat; background-position: 10px center; position: absolute; width: 40px; height: 50px; top: 0; left: 0; } .Results-filters-select--icon-compact:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%23fff' d='M3 15h18v-2H3v2zm0 4h18v-2H3v2zm0-8h18V9H3v2zm0-6v2h18V5H3z'/%3E%3C/svg%3E"); } .Results-filters-select--icon-detailed:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%23fff' d='M20 13H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h17c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zm0-10H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h17c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1z'/%3E%3C/svg%3E"); } .Results-filters-select--icon select { padding-left: 40px; } .Results-filters-modalButton { background: none; color: #fff; width: 30px; padding: 0; border: 0; border-radius: 3px; cursor: pointer; } .Results-filters-modalButton svg { width: 100%; height: auto; } .Results-modal { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 2000; display: none; color: #474747; } .Results-modal.isOpen { display: block; } .Results-modal-scrim { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.5); } .Results-modal-inner { background: #fff; width: 40rem; max-width: 90vw; max-height: 90vh; overflow: auto; padding: 1.5rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .Results-modal-header { padding-right: 10px; } .Results-modal-close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; background-color: transparent; width: 30px; height: 30px; padding: 0; border: 0; position: absolute; right: 10px; top: 10px; } .Results-table { background: #fff; border-radius: 0 0 5px 5px; width: 100%; border-spacing: 0; } .Results-table-th { text-transform: uppercase; color: #3e3e77; font-size: 12px; font-weight: 700; line-height: 20px; padding: 10px; } .Results-table-td { color: #474747; font-size: 14px; font-weight: 700; line-height: 30px; line-height: 24px; padding: 13px 10px; border-top: 1px solid #bebdc4; vertical-align: top; } .Results-table-avg-time { color: #474747; font-size: 14px; font-weight: 700; line-height: 30px; line-height: 24px; padding: 13px 10px; /* border-top: 1px solid #bebdc4; */ /* vertical-align: top; */ } .Results-table-notparkruns { color: #474747; font-size: 14px; font-weight: 700; line-height: 30px; line-height: 24px; /* border-top: 1px solid #bebdc4; */ /* vertical-align: top; */ } .Results-table-th--position, .Results-table-td--position { width: 110px; padding-left: 20px; } .Results-table-th--name, .Results-table-td--name { width: calc((100% - 440px)/2); } .Results-table-th--gender, .Results-table-td--gender { width: 100px; } .Results-table-th--ageGroup, .Results-table-td--ageGroup { width: 140px; } .Results-table-th--club, .Results-table-td--club { width: calc((100% - 440px)/2); } .Results-table-th--time, .Results-table-td--time { width: 110px; padding-right: 20px; text-align: right; } .Results-table-td--position { color: #3e3e77; font-weight: 400; font-size: 24px; } .Results-table-td--day { color: #3e3e77; font-weight: 400; font-size: 18px; } .Results-table-td--name { font-size: 16px; } .Results-table-td--gender { background-position: left 13px; background-repeat: no-repeat; background-size: auto 24px; } .Results-table-td--club { color: #888; } .Results-table-td--time { font-size: 16px; } .Results-table-td--pb { position: relative; padding-left: 30px; } .Results-table-td--pb:before { content: 'PB'; color: #e21145; position: absolute; top: 10px; left: 5px; line-height: 30px; } .Results-table-td--ft { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' data-prefix='fas' data-icon='leaf' class='svg-inline--fa fa-leaf fa-w-18' role='img' viewBox='0 0 576 512'%3E%3Cpath fill='%236ec24d' d='M546.2 9.7c-5.6-12.5-21.6-13-28.3-1.2C486.9 62.4 431.4 96 368 96h-80C182 96 96 182 96 288c0 7 .8 13.7 1.5 20.5C161.3 262.8 253.4 224 384 224c8.8 0 16 7.2 16 16s-7.2 16-16 16C132.6 256 26 410.1 2.4 468c-6.6 16.3 1.2 34.9 17.5 41.6 16.4 6.8 35-1.1 41.8-17.3 1.5-3.6 20.9-47.9 71.9-90.6 32.4 43.9 94 85.8 174.9 77.2C465.5 467.5 576 326.7 576 154.3c0-50.2-10.8-102.2-29.8-144.6z'/%3E%3C/svg%3E"); background-position: 5px 15px; background-repeat: no-repeat; background-size: auto 20px; padding-left: 30px; } .Results-table .detailed { display: none; } .Results-table--detailed .detailed { display: block; color: #888; font-weight: 400; font-size: 12px; line-height: 20px; } .Results-table--detailed .detailed.Results-tablet, .Results-table--detailed .detailed.Results-mobile { display: none; } .Results-table--detailed .compact { line-height: 24px; } .Results-table--detailed .Results-table-thead { padding: 0 10px; } .Results-table--detailed .Results-table-th--position { text-align: center; } .Results-table--detailed .Results-table-td--position { color: #3e3e77; font-size: 42px; text-align: center; line-height: 44px; } .Results-table--detailed .Results-table-td--day { color: #3e3e77; font-size: 24px; text-align: center; line-height: 44px; } .Results--eventHistory .Results-table--detailed .Results-table-td--position { text-align: left; font-size: 24px; line-height: 24px; } .Results-table-td--name .spacer { margin: 0 5px; } .Results-table-td--name .spacer--blank { margin: 0 3px; } .Results-table--detailed .Results-table-td--club .compact { color: #474747; } .Results-table--detailed .Results-table-td--pb:before { display: none; } .Results-table--detailed .Results-table-td--ft { background: none; } .Results-table--detailed .Results-table-td--time { padding-left: 10px; } .Results-table--detailed .Results-table-td--time .detailed { font-weight: 700; } .Results-table--red { color: #e21145; } .Results-table--green { color: #6ec24d; } .Results-table--disabled { font-weight: 400 !important; color: #888 !important; } .Results-table--normal { font-weight: 400 !important; } .Results-tablet, .Results-mobile { display: none; } .Results-table--clubIcon { width: 30px; height: 14px; background-size: contain; background-repeat: no-repeat; background-position: left center; vertical-align: middle; display: inline-block; font-size: 0; color: #fff; overflow: hidden; } .Results-table--10club { width: 18px; background-image: url("data:image/svg+xml,%3Csvg width='54px' height='45px' viewBox='0 0 54 45' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='10-club' fill='%23888888' fill-rule='nonzero'%3E%3Cpath d='M9.544,8.941 L5.224,10.261 C4.804,10.381 4.264,10.441 3.904,10.441 C2.164,10.441 0.664,9.001 0.664,7.321 C0.664,5.761 1.624,4.561 3.124,4.141 L9.484,2.101 C10.924,1.681 12.004,1.441 13.084,1.441 L13.204,1.441 C15.304,1.441 16.864,3.061 16.864,5.101 L16.864,40.62 C16.864,42.66 15.244,44.28 13.204,44.28 C11.224,44.28 9.544,42.66 9.544,40.62 L9.544,8.941 Z' id='Path'%3E%3C/path%3E%3Cpath d='M36.477,0.44 C46.197,0.44 53.337,7.82 53.337,16.88 L53.337,17 C53.337,24.715 48.046,31.327 40.376,33.059 C39.098,33.347 37.754,33.5 36.357,33.5 C26.697,33.5 19.557,26.12 19.557,17.12 L19.557,17 C19.557,7.94 26.757,0.44 36.477,0.44 Z M36.5,27 C41.7467051,27 46,22.5228475 46,17 C46,11.4771525 41.7467051,7 36.5,7 C31.2532949,7 27,11.4771525 27,17 C27,22.5228475 31.2532949,27 36.5,27 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .Results-table--v25club { width: 20px; background-image: url("data:image/svg+xml,%0A%3Csvg width='88px' height='73px' viewBox='0 0 88 73' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='250-club' fill='%233E3E78' fill-rule='nonzero'%3E%3Cpath d='M34.122,65.02 L47.022,54.04 C52.782,49.18 54.882,46.48 54.882,42.7 C54.882,38.56 51.942,36.16 48.102,36.16 C44.742,36.16 42.402,37.72 39.822,40.84 C39.282,41.44 38.442,41.98 37.242,41.98 C35.382,41.98 33.882,40.48 33.882,38.62 C33.882,37.84 34.182,37 34.722,36.34 C38.142,32.08 42.042,29.56 48.642,29.56 C56.862,29.56 62.502,34.6 62.502,42.1 L62.502,42.22 C62.502,48.82 59.022,52.42 51.582,58.48 L42.942,65.68 L59.982,65.68 C61.782,65.68 63.222,67.12 63.222,68.92 C63.222,70.72 61.782,72.16 59.982,72.16 L36.162,72.16 C33.882,72.16 32.202,70.84 32.202,68.68 C32.202,67.24 32.862,66.04 34.122,65.02 Z' id='Path'%3E%3C/path%3E%3Cpath d='M75.973,63.516 C72.078,63.516 68.701,62.37 65.647,60.012 C64.789,59.326 64.34,58.452 64.34,57.481 C64.34,55.787 65.771,54.356 67.465,54.356 C68.222,54.356 68.83,54.56 69.378,54.999 C71.509,56.73 73.576,57.536 75.884,57.536 C79.239,57.536 81.492,55.552 81.492,52.6 C81.492,49.647 79.133,47.797 75.481,47.797 C73.57,47.797 72.323,48.231 71.412,48.549 C70.893,48.73 70.482,48.873 70.107,48.873 C69.075,48.873 68.271,48.446 67.231,47.709 C66.316,47.048 65.899,46.123 65.953,44.877 L66.625,33.584 C66.729,31.921 68.014,30.667 69.614,30.667 L83.81,30.667 C85.407,30.667 86.755,32.016 86.755,33.612 C86.755,35.211 85.434,36.513 83.81,36.513 L72.483,36.513 L72.07,42.681 C73.363,42.262 74.688,41.996 76.511,41.996 C83.548,41.996 87.92,45.957 87.92,52.331 C87.919,58.953 83.007,63.516 75.973,63.516 Z' id='Path'%3E%3C/path%3E%3Cpath d='M39.6922274,0 C28.5028691,0 19.3948878,9.0673591 19.3948878,20.2016191 L19.4105373,20.7676799 C8.13771518,22.8709333 0.00521648409,32.6030243 0,44.0800367 C0,50.8519933 2.91601461,57.3123568 8.01251956,61.814877 C9.70266041,63.2637849 15.8737611,67.9792271 24.3192488,68 L24.7261346,67.9896136 L26.0615545,67.8286238 C27.6264997,67.5066443 28.6802295,65.7773026 28.6802295,64.359554 C28.6802295,62.3549717 27.037037,60.7139148 25.0130412,60.7035283 L23.275952,60.7035283 C14.2357851,60.4023217 7.1465832,53.0902704 7.12571727,43.9813655 C7.16744914,34.9088132 14.3453312,27.6435008 23.4689619,27.4409653 L27.8247261,27.3422942 L26.8648931,23.1098213 C26.6353678,22.0971437 26.5258216,21.1415916 26.5258216,20.1964258 C26.541471,12.9830457 32.456964,7.09912937 39.7130934,7.0783565 C46.9587898,7.09393615 52.8690662,12.9830457 52.8899322,20.2016191 L52.9055816,21.7388117 L52.962963,23.3123568 C53.0933751,25.1403696 54.7261346,25.9608981 56.2858633,25.9608981 C57.7934272,25.9608981 59.0453834,25.1611425 59.6400626,23.4629601 L59.8904538,22.3464182 C60,21.5362762 60,21.1727509 60,20.1912326 C60,14.8006721 57.8977569,9.73728425 54.0792906,5.92546204 C50.2295253,2.10844662 45.1278039,0 39.6922274,0 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); } .Results-table--50club { width: 22px; background-image: url("data:image/svg+xml,%3Csvg width='66px' height='45px' viewBox='0 0 66 45' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='50-club' fill='%23E21145 ' fill-rule='nonzero'%3E%3Cpath d='M2.266,39.6 C1.366,38.88 0.766,37.92 0.766,36.72 C0.766,34.8 2.386,33.18 4.306,33.18 C5.206,33.18 5.866,33.42 6.466,33.9 C9.346,36.24 12.286,37.44 15.586,37.44 C20.326,37.44 23.746,34.62 23.746,30.18 L23.746,30.06 C23.746,25.74 20.146,23.1 15.046,23.1 C10.966,23.1 8.986,24.54 7.846,24.54 C6.706,24.54 5.806,24.12 4.366,23.1 C3.286,22.32 2.866,21.24 2.926,19.86 L3.826,4.74 C3.946,2.82 5.386,1.44 7.186,1.44 L26.206,1.44 C28.006,1.44 29.506,2.94 29.506,4.74 C29.506,6.54 28.006,7.98 26.206,7.98 L10.426,7.98 L9.766,17.82 C11.746,17.1 13.606,16.62 16.426,16.62 C24.646,16.62 31.066,20.94 31.066,29.82 L31.066,29.94 C31.066,38.46 24.706,44.16 15.706,44.16 C10.006,44.16 5.686,42.24 2.266,39.6 Z' id='Path'%3E%3C/path%3E%3Cpath d='M48.375,0.44 C58.095,0.44 65.235,7.82 65.235,16.88 L65.235,17 C65.235,24.715 59.944,31.327 52.274,33.059 C50.996,33.347 49.652,33.5 48.255,33.5 C38.595,33.5 31.455,26.12 31.455,17.12 L31.455,17 C31.455,7.94 38.655,0.44 48.375,0.44 Z M48.5,27 C53.7467051,27 58,22.5228475 58,17 C58,11.4771525 53.7467051,7 48.5,7 C43.2532949,7 39,11.4771525 39,17 C39,22.5228475 43.2532949,27 48.5,27 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .Results-table--100club { width: 28px; background-image: url("data:image/svg+xml,%0A%3Csvg width='90px' height='45px' viewBox='0 0 90 45' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='100-club' fill='%23474747' fill-rule='nonzero'%3E%3Cpath d='M9.604,8.941 L5.284,10.261 C4.864,10.381 4.324,10.441 3.964,10.441 C2.224,10.441 0.724,9.001 0.724,7.321 C0.724,5.761 1.684,4.561 3.184,4.141 L9.544,2.101 C10.984,1.681 12.064,1.441 13.144,1.441 L13.264,1.441 C15.364,1.441 16.924,3.061 16.924,5.101 L16.924,40.62 C16.924,42.66 15.304,44.28 13.264,44.28 C11.284,44.28 9.604,42.66 9.604,40.62 L9.604,8.941 Z' id='Path'%3E%3C/path%3E%3Cpath d='M19.618,17.12 L19.618,17 C19.618,7.94 26.818,0.44 36.538,0.44 C46.258,0.44 53.398,7.82 53.398,16.88 L53.398,17 C53.398,26 46.198,33.5 36.418,33.5 C26.757,33.5 19.618,26.12 19.618,17.12 Z M46.137,17.12 L46.137,17 C46.137,11.42 42.117,6.8 36.417,6.8 C30.597,6.8 26.877,11.36 26.877,16.88 L26.877,17 C26.877,22.52 30.897,27.14 36.537,27.14 C42.417,27.14 46.137,22.58 46.137,17.12 Z' id='Shape'%3E%3C/path%3E%3Cpath d='M55.618,17.12 L55.618,17 C55.618,7.94 62.818,0.44 72.538,0.44 C82.258,0.44 89.398,7.82 89.398,16.88 L89.398,17 C89.398,26 82.198,33.5 72.418,33.5 C62.757,33.5 55.618,26.12 55.618,17.12 Z M82.137,17.12 L82.137,17 C82.137,11.42 78.117,6.8 72.417,6.8 C66.597,6.8 62.877,11.36 62.877,16.88 L62.877,17 C62.877,22.52 66.897,27.14 72.537,27.14 C78.417,27.14 82.137,22.58 82.137,17.12 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); } .Results-table--250club { background-image: url("data:image/svg+xml,%0A%3Csvg width='92px' height='44px' viewBox='0 0 92 44' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='250-club' fill='%23457e7e' fill-rule='nonzero'%3E%3Cpath d='M2.122,36.02 L15.022,25.04 C20.782,20.18 22.882,17.48 22.882,13.7 C22.882,9.56 19.942,7.16 16.102,7.16 C12.742,7.16 10.402,8.72 7.822,11.84 C7.282,12.44 6.442,12.98 5.242,12.98 C3.382,12.98 1.882,11.48 1.882,9.62 C1.882,8.84 2.182,8 2.722,7.34 C6.142,3.08 10.042,0.56 16.642,0.56 C24.862,0.56 30.502,5.6 30.502,13.1 L30.502,13.22 C30.502,19.82 27.022,23.42 19.582,29.48 L10.942,36.68 L27.982,36.68 C29.782,36.68 31.222,38.12 31.222,39.92 C31.222,41.72 29.782,43.16 27.982,43.16 L4.162,43.16 C1.882,43.16 0.202,41.84 0.202,39.68 C0.202,38.24 0.862,37.04 2.122,36.02 Z' id='Path'%3E%3C/path%3E%3Cpath d='M43.973,34.516 C40.078,34.516 36.701,33.37 33.647,31.012 C32.789,30.326 32.34,29.452 32.34,28.481 C32.34,26.787 33.771,25.356 35.465,25.356 C36.222,25.356 36.83,25.56 37.378,25.999 C39.509,27.73 41.576,28.536 43.884,28.536 C47.239,28.536 49.492,26.552 49.492,23.6 C49.492,20.647 47.133,18.797 43.481,18.797 C41.57,18.797 40.323,19.231 39.412,19.549 C38.893,19.73 38.482,19.873 38.107,19.873 C37.075,19.873 36.271,19.446 35.231,18.709 C34.316,18.048 33.899,17.123 33.953,15.877 L34.625,4.584 C34.729,2.921 36.014,1.667 37.614,1.667 L51.81,1.667 C53.407,1.667 54.755,3.016 54.755,4.612 C54.755,6.211 53.434,7.513 51.81,7.513 L40.483,7.513 L40.07,13.681 C41.363,13.262 42.688,12.996 44.511,12.996 C51.548,12.996 55.92,16.957 55.92,23.331 C55.919,29.953 51.007,34.516 43.973,34.516 Z' id='Path'%3E%3C/path%3E%3Cpath d='M74.939,0.561 C84.659,0.561 91.799,7.94 91.799,17 L91.799,17.122 C91.799,24.836 86.509,31.449 78.839,33.18 C77.561,33.468 76.217,33.621 74.82,33.621 C65.16,33.621 58.02,26.241 58.02,17.241 L58.02,17.121 C58.02,8.061 65.22,0.561 74.939,0.561 Z M75.0174665,7 C69.2630036,7 65,11.5372051 65,17.0181488 L65,17.0907441 C65,22.5353902 69.2274786,27 74.9470085,27 C75.7741496,27 76.5699103,26.907441 77.3265934,26.7332123 C81.8678765,25.6860254 85,21.6854204 85,17.0187538 L85,16.9449486 C85,11.4640048 80.7725214,7 75.0174665,7 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); } .Results-table--500club { background-image: url("data:image/svg+xml,%0A%3Csvg width='102px' height='45px' viewBox='0 0 102 45' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='500-club' fill='%231693c7' fill-rule='nonzero'%3E%3Cpath d='M2.341,39.824 C1.441,39.104 0.841,38.144 0.841,36.944 C0.841,35.024 2.461,33.404 4.381,33.404 C5.281,33.404 5.941,33.644 6.541,34.124 C9.421,36.464 12.361,37.664 15.661,37.664 C20.401,37.664 23.821,34.844 23.821,30.404 L23.821,30.284 C23.821,25.964 20.221,23.324 15.121,23.324 C11.041,23.324 9.061,24.764 7.921,24.764 C6.781,24.764 5.881,24.344 4.441,23.324 C3.361,22.544 2.941,21.464 3.001,20.084 L3.901,4.964 C4.021,3.044 5.461,1.664 7.261,1.664 L26.281,1.664 C28.081,1.664 29.581,3.164 29.581,4.964 C29.581,6.764 28.081,8.204 26.281,8.204 L10.501,8.204 L9.841,18.044 C11.821,17.324 13.681,16.844 16.501,16.844 C24.721,16.844 31.141,21.164 31.141,30.044 L31.141,30.164 C31.141,38.684 24.781,44.384 15.781,44.384 C10.081,44.384 5.761,42.464 2.341,39.824 Z' id='Path'%3E%3C/path%3E%3Cpath d='M31.5,17.24 L31.5,17.12 C31.5,8.06 38.7,0.56 48.42,0.56 C58.14,0.56 65.28,7.94 65.28,17 L65.28,17.12 C65.28,26.12 58.08,33.62 48.3,33.62 C38.64,33.62 31.5,26.24 31.5,17.24 Z M58.02,17.24 L58.02,17.12 C58.02,11.54 54,6.92 48.3,6.92 C42.48,6.92 38.76,11.48 38.76,17 L38.76,17.12 C38.76,22.64 42.78,27.26 48.42,27.26 C54.3,27.26 58.02,22.7 58.02,17.24 Z' id='Shape'%3E%3C/path%3E%3Cpath d='M67.5,17.24 L67.5,17.12 C67.5,8.06 74.7,0.56 84.42,0.56 C94.14,0.56 101.28,7.94 101.28,17 L101.28,17.12 C101.28,26.12 94.08,33.62 84.3,33.62 C74.64,33.62 67.5,26.24 67.5,17.24 Z M94.02,17.24 L94.02,17.12 C94.02,11.54 90,6.92 84.3,6.92 C78.48,6.92 74.76,11.48 74.76,17 L74.76,17.12 C74.76,22.64 78.78,27.26 84.42,27.26 C90.3,27.26 94.02,22.7 94.02,17.24 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); } .Results-scrim { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; background: rgba(0,0,0,0.3); z-index: 9999998; display: none; /*transform: translateY(100%);*/ } .Results-dialog { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; z-index: 9999999; padding: 20px; display: none; /*transition: transform 0.5s;*/ /*transform: translateY(100%);*/ } .Results-dialog-header { font-size: 18px; display: flex; justify-content: space-between; align-items: center; } .Results-dialog-close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; background-color: transparent; border: 0; padding: 0; margin: 0; width: 30px; height: 30px; } .Results-dialog-options { display: flex; margin-top: 20px; flex-wrap: wrap; } .notparkrun-button-container { display: block; width: 100%; margin: auto; position:relative; } .no-notparkruns{ border-radius: 3px; } .notparkrun-button{ margin:auto; border: 1px solid #b6b6b6; border-radius: 3px; flex-grow: 1; background-color: #ffffff; display: flex; padding: 14px 5px; font-size: 14px; /* color: #FFA300; */ display: flex; justify-content: center; align-items: center; flex-basis: 0; min-width: calc(100%/3); cursor: pointer; justify-content: center; -webkit-filter: drop-shadow( 1px 1px 1px rgba(0, 0, 0, .5)); filter: drop-shadow( 1px 1px 1px rgba(0, 0, 0, .5)); } .notparkrun-button > svg#add-spin > line.v, .notparkrun-button > svg#add-spin > line.h { -webkit-transform-origin: 12px 12px; -moz-transform-origin: 12px 12px; -o-transform-origin: 12px 12px; -ms-transform-origin: 12px 12px; transform-origin: 12px 12px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 700ms ease; -moz-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease; transition: all 700ms ease; } .add-circle { -webkit-transition: all 700ms ease; -moz-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease; transition: all 700ms ease; } .notparkrun-button:hover svg#add-spin .add-circle { fill: #3e3d77; } .notparkrun-button:hover svg#add-spin line { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); stroke: white; } .notparkrun-button:hover{ background-color: #f2f2f2; } .notparkrun-button svg { margin-right: 5px; } a > .notparkrun-button { color: #FFA300; } .Results-dialog-option { border: 1px solid #b6b6b6; border-left: 0; flex-grow: 1; background: transparent; display: flex; padding: 14px 5px; font-size: 14px; color: #888; display: flex; justify-content: center; align-items: center; flex-basis: 0; min-width: calc(100%/3); } .Results-dialog-option:nth-child(3n + 1) { border-left: 1px solid #b6b6b6; } .Results-dialog-option:nth-child(n + 4) { border-top: none; } .Results-dialog-option svg { margin-right: 5px; } .Results-dialog-option.isSelected { background-color: #ececf8; color: #3e3d77; font-weight: 700; } .Results-dialog-option--block { display: block; padding: 0; } .Results-dialog-button { padding: 14px 5px; font-size: 14px; color: #888; background: transparent; border: 0; width: calc(100% - 30px); } .Results-dialog-option.isSelected .Results-dialog-button { color: #3e3d77; font-weight: 700; } .Results-dialog-arrows { width: 30px; border-left: 1px solid #b6b6b6; float: right; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .Results-dialog-arrow { border: 0; background: #fff; padding: 5px 0; width: 100%; border-bottom: 1px solid #b6b6b6; height: 50%; } .Results-dialog-arrow.isSelected { background-color: #ececf8; color: #3e3d77; font-weight: 700; } .Results-dialog-arrow:last-child { border-bottom: 0; } .Results--eventHistory .Results-header h1 { margin-bottom: 30px; } .Results--grey { color: #888; } .Results-table-th { position: sticky; top: 80px; background: #fff; border-bottom: 1px solid #bebdc4; } .Results-table-row:nth-child(1) .Results-table-td { border-top: none; vertical-align: middle; } .Results-table--detailed .Results-table-th--position { text-align: left; } .detailed--mobile-tableCell { display: none; } @media (max-width: 1023px) { .Results-tablet { display: flex; } .Results-tablet--tableCell { display: table-cell; } .Results-tablet--inline { display: inline; } .Results-hideTablet { display: none; } .Results-table-thead { display: none; } .Results--eventHistory .Results-table-thead { display: table-row; } .Results-table { margin-top: -1px; } .Results-table-th--position, .Results-table-td--position { width: 1px; text-align: right; } .Results-table-th--day, .Results-table-td--day { width: 1px; text-align: right; } .Results-table-th--time, .Results-table-td--time { width: 110px; } .Results-table-th--name, .Results-table-td--name { width: auto; } .Results-table-td--time { background: none; } .Results-table-td--time:before { display: none; } .Results-table-td--gender, .Results-table-td--ageGroup, .Results-table-td--club { display: none; } .Results-table--detailed .detailed.Results-tablet { display: block; } .Results--eventHistory .Results-table-th { top: 196px; } .Results-filters { top: 116px; } } @media (max-width: 767px) { .Results-mobile { display: flex; } .Results-hideMobile { display: none; } .Results { margin-left: -20px; width: calc(100% + 40px); } .Results-header h1 { font-size: 24px !important; } .Results-header h3 { color: #888; font-size: 18px; margin-bottom: 20px; } .Results-filters { border-radius: 0; } .Results-table { border-radius: 0; } .Results-filters-selects { display: none; } .Results-filters-input { margin-right: 15px; } .Results-filters-button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%23fff' d='M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E"); background-position: center center; background-repeat: no-repeat; background-size: 32px; background-color: transparent; border: 0; padding: 0; margin: 0 -5px 0 0; height: 50px; width: 40px; } .Results-table-row { padding: 0 5px; } .Results-table-td { padding: 10px; } .Results-table-th--position, .Results-table-td--position { padding-left: 10px; padding-right: 0; font-size: 16px; } .Results-table-th--day, .Results-table-td--day { padding-left: 10px; padding-right: 0; font-size: 16px; } .Results--eventHistory .Results-table-th--position { font-size: 12px; } .Results-table-th--name, .Results-table-td--name { width: auto; font-size: 14px; line-height: 22px; } .Results-table--detailed .Results-table-td--position, .Results--eventHistory .Results-table--detailed .Results-table-td--position { font-size: 16px; line-height: 24px; } .Results-table-th--time, .Results-table-td--time { width: 90px; padding-right: 10px; padding-left: 0; line-height: 22px; } .Results-table--detailed .Results-table-td--time { padding-left: 0; } .Results-table--detailed .compact { line-height: 22px; } .Results-scrim.isOpen { display: block; /*transform: translateY(0);*/ } .Results-dialog.isOpen { display: block; /*transform: translateY(0);*/ } #mainheader, .headerspacer { transition: transform 0.5s ease; } #mainheader.hideTop:not(.menuOpen) { transform: translateY(-90px); } #mainheader.hideTop:not(.menuOpen) + .headerspacer { transform: translateY(-90px); } .Results-table--detailed .detailed.Results-mobile { display: block; } .Results--eventHistory .Results-table-th { top: 170px; } .Results--eventHistory .Results-table--hideNav .Results-table-th { top: 80px; } .Results-filters { top: 90px; } .Results-filters--hideNav { top: 0px; } .Results-table--detailed .detailed--mobile-tableCell { display: table-cell; } .Results-table--detailed .hideDetailed--mobile { display: none; } } @media (max-width: 340px) { .Results-table-th--name, .Results-table-td--name { overflow: hidden; max-width: 190px; } } .alertBanner { min-height: 70px; color: white; border: 10px; display: flex; flex-direction: column; justify-content: center; resize: vertical; } .alertBanner p { margin:10px; } .alertHigh { background: #e21145; } .alertHigh a { color: #00ceae; } .alertHigh a:hover { color: #a1b6b7; } /* start of inner-footer stuff */ div#footerStats { padding: 30px 30px; } div#footerStats>div { max-width: 1100px; margin: 0 auto; text-align:left; font-size:14px; font-weight:600; } div#footerStats>div h3 { text-align:left; margin: 0 0 20px; } div#footerStats>div p { margin: 20px 0; } div#footerStats>div div.lastupdated { color: #a1b6b7; margin-top: 5px; font-size:12px; } div#footerStats>div .flex{ display:flex; justify-content: space-between; width: 100%; flex-wrap: wrap; } div#footerStats>div .aStat{ padding:2px 0; } /*Three columns*/ div#footerStats>div .aStat { width:calc(33% - 10px); } /*Two columns*/ @media screen and (max-width: 1000px) { div#footerStats>div .aStat { width: 50%; } } /*One column*/ @media screen and (max-width: 600px) { div#footerStats>div .aStat { width: 100%; } } div#footerStats>div .records{ width:100%; padding: 2px 0; } div#footerStats>div .num { font-weight: 500; color: #666; } #footerLogos { background-color: #3E3E78; padding: 10px 30px; margin: 0 auto; } #footerLogos div { display: flex; flex-wrap: wrap; max-width: 1100px; margin-left: auto; margin-right: auto; justify-content: space-between; } #footerLogos a { padding: 15px 0; text-align: center; } #footerLogos img { max-height: 50px; max-width: 240px; filter: brightness(0) invert(1); } /*Four columns*/ @media screen and (max-width: 1100px) { #footerLogos a { flex: 25%; max-width: 25%; } #footerLogos img { max-width: 150px; } } /*Three columns*/ @media screen and (max-width: 800px) { #footerLogos div { justify-content: center; } #footerLogos a { flex: 33.33333%; max-width: 33.33333%; } #footerLogos img { max-width: 120px; } } /*Two columns*/ @media screen and (max-width: 550px) { #footerLogos a { flex: 50%; max-width: 50%; } } /*One column*/ @media screen and (max-width: 350px) { #footerLogos a { flex: 100%; max-width: 100%; } } #footerLegal { padding-top: 25px; padding-bottom: 40px; background-color: #2B223D; color: #ffffff; text-align: center; } /*budge bottom up on really narrow screens to accomodate Zendesk widget*/ @media screen and (max-width: 500px) { #footerLegal { padding-bottom: 65px; } } #footerLegal>div { justify-content: center; margin-left: auto; margin-right: auto; width: 100%; max-width: 1150px; display: flex; } #footerLegal>div#legalLinks { padding-bottom: 10px; } #legalLinks a { margin-right: 10px; margin-left: 10px; } #footerLegal p { font-size: 12px; /* margin-bottom: 10px; */ margin-left: 50px; margin-right: 50px; } #footerSocial { padding-top: 10px; } .footerSocialLogo { color: #ffffff; width: 42px; height: 42px; background: #ffa300; margin: 0 10px; border-radius: 50%; } .footerSocialLogo:hover { background: #e21145; } .footerSocialLogo svg { padding-top: 9px; height: 32px; } .faded { opacity: .5; } /* end of footer stuff */ /* sponsor page consolidation */ .sponsorRow { display: flex; flex-wrap: wrap; margin: 20px 0; align-items: center; } .sponsorLogo { flex: 20%; min-width: 200px; padding: 10px; } .sponsorLogo>a>img { padding: 10px; max-height: 110px; } .sponsorBlurb { flex: 80%; padding: 10px; text-align: left; } /* end sponsor page consolidation */ /* shop */ .shopOuter { display: flex; justify-content: center; } .vendorOuter { display: flex; flex-wrap: wrap; justify-content: space-between; } a.vendor { flex: 0 0 25%; max-width: calc(100%/4.3); justify-content: space-between; } a.vendor>div { height: 100%; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: space-between; } a.vendor>div>div>img { margin-bottom: 30px; object-fit:cover; border-radius:50%; } a.vendor>div>div>h2 { margin-bottom: 10px; } .vendorOuter>a:nth-of-type(1)>div { background-color: #3E3E78; } .vendorOuter>a:nth-of-type(2)>div { background-color: #E11144; } .vendorOuter>a:nth-of-type(3)>div { background-color: #06CDAE; } .vendorOuter>a:nth-of-type(4)>div { background-color: #FFA300; } .vendorOuter>a div.btn { color: #ffffff; padding: 10px 30px; min-height: 30px; display: inline-block; transition: all 0.3s ease; border-radius: 20px; font-weight: 700; position: relative; cursor: pointer; } .vendorOuter>a:nth-of-type(1) h2, .vendorOuter>a:nth-of-type(1) p, .vendorOuter>a:nth-of-type(2) h2, .vendorOuter>a:nth-of-type(2) p { color: #ffffff; } .vendorOuter>a:nth-of-type(3) h2, .vendorOuter>a:nth-of-type(3) p, .vendorOuter>a:nth-of-type(4) h2, .vendorOuter>a:nth-of-type(4) p { color: #3E3E78; } .vendorOuter>a:nth-of-type(1) div.btn { background-color: #E11144; } .vendorOuter>a:nth-of-type(2) div.btn { background-color: #FFA300; } .vendorOuter>a:nth-of-type(3) div.btn { background-color: #FFA300; } .vendorOuter>a:nth-of-type(4) div.btn { background-color: #06CDAE; } @media screen and (max-width: 1080px) { .vendorOuter { flex: 0 0 75%; max-width: calc(150%/2.2); justify-content: space-between; } a.vendor { max-width: calc(100%/2.1); flex: 0 0 50%; margin-bottom: 20px; } } @media screen and (max-width: 768px) { .vendorOuter { flex: 0 0 83.333333%; max-width: 83.333333%; } a.vendor { padding-right: 0px; padding-left: 0px; flex: 0 0 100%; max-width: 100%; } a.vendor>div { padding-top: 30px; padding-bottom: 30px; } a.vendor>div>div { margin-bottom: 30px; } } /* end shop */