/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */ /* * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */ /* * MIXINS * ================================================== */ /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ html { color: #222; font-size: 1em; line-height: 1.4; overflow-x: hidden; } body { font-family: Montserrat,Open Sans,Helvetica,Arial,sans-serif; } /* * Remove text-shadow in selection highlight: * https://twitter.com/miketaylr/status/12228805301 * * Vendor-prefixed and regular ::selection selectors cannot be combined: * https://stackoverflow.com/a/16982510/7133471 * * Customize the background color to match your design. */ ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } /* * A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* * Remove the gap between audio, canvas, iframes, * images, videos and the bottom of their containers: * https://github.com/h5bp/html5-boilerplate/issues/440 */ audio, canvas, iframe, img, svg, video { vertical-align: middle; background-color: transparent !important; } /* * Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* * Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* ========================================================================== Browser Upgrade Prompt ========================================================================== */ .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== TOTAL SPORTS. custom css styles for one page template ========================================================================== */ /* * VARIABLES * */ @media screen and (max-width: 1100px) { .mejs__container, .mejs__player, .mejs__layer { height: 180px !important; } } /* * BUTTONS * */ .shop-btn, .homepage-start .products-view .overlay-text .start-shop-btn { display: inline-block; color: #000; font-size: 15px; font-weight: 600; border: 2px solid #baa8ff; padding: 10px 25px; text-transform: uppercase; } @media screen and (max-width: 1100px) { .shop-btn, .homepage-start .products-view .overlay-text .start-shop-btn { font-size: 12px; padding: 10px; } } @media (max-width: 420px) { .shop-btn, .homepage-start .products-view .overlay-text .start-shop-btn { padding: 10px !important; } } h2 { font-weight: 700; display: block; font-size: 1.7rem; letter-spacing: 2px; margin-bottom: 0; } h2.heading { display: inline-block; text-align: center; text-transform: uppercase; letter-spacing: 6px; padding: 45px 0; font-size: 44px; width: 100%; font-weight: normal; } @media screen and (max-width: 1100px) { h2.heading { font-size: 30px; } } .content-container { margin: 0 auto; width: 90%; } @media screen and (max-width: 1100px) { .content-container { width: 100%; } } .catalog-links { margin: 0; padding: 30px 0px; list-style-type: none; text-align: center; } .catalog-links li { display: inline-block; margin-bottom: 0; vertical-align: middle; } .catalog-links li a { display: block; color: #a0a0a0; margin-right: 20px; text-align: center; text-decoration: none; } .catalog-links li a.active { color: #f29f94; border-bottom: 4px solid #f29f94; } @media screen and (max-width: 1100px) { .catalog-links li a { font-size: 12px; padding: 0; } } .overlay-text-banner { position: relative; vertical-align: middle; text-align: center; margin: 50px 0px; } .overlay-text-banner .nation-text { position: absolute; z-index: 999; left: 10%; bottom: -48px; width: 85%; margin-top: 40px; } .overlay-text-banner .nation-text .urban-text { text-align: center; position: absolute; left: 0; bottom: 60px; left: 50%; transform: translate(-50%, 0); max-width: 100%; } @media screen and (max-width: 1100px) { .overlay-text-banner .nation-text .urban-text { bottom: 17px; } } .homepage-start .brand-logos { margin-top: 30px !important; margin-bottom: 30px !important; width: 625px !important; } @media (min-width: 1700px) and (max-width: 1920px) { .homepage-start .brand-logos { margin-left: 0 !important; width: 835px !important; } } @media screen and (max-width: 1100px) { .homepage-start .brand-logos { width: auto !important; } } .homepage-start .brand-logos ul { margin: 0; padding: 0; list-style-type: none; text-align: left; } @media screen and (max-width: 1100px) { .homepage-start .brand-logos ul { text-align: center; } } .homepage-start .brand-logos ul li { display: inline; } .homepage-start .brand-logos ul li:before { padding: 0; content: ''; } .homepage-start .brand-logos ul li a { display: inline-block; padding: 10px 0px; width: 69px; vertical-align: middle; } @media (min-width: 1700px) and (max-width: 1920px) { .homepage-start .brand-logos ul li a { width: 85px; } } .homepage-start .brand-logos ul li a img { max-width: 80%; vertical-align: middle; } .homepage-start .products-view { box-shadow: none; background-color: transparent; text-align: left; position: relative; } @media (min-width: 1700px) and (max-width: 1920px) { .homepage-start .products-view { margin: 0; } } @media (min-width: 1200px) and (max-width: 1500px) { .homepage-start .products-view { margin: 0; } } @media (max-width: 420px) { .homepage-start .products-view { width: 100%; } } @media (min-width: 1700px) and (max-width: 1920px) { .homepage-start .products-view .main-video-container { width: 75%; } } .homepage-start .products-view img { max-width: 100%; } .homepage-start .products-view .overlay-text { color: #FFF; position: absolute; top: 65px; right: 12px; text-align: center; } @media (min-width: 330px) and (max-width: 420px) { .homepage-start .products-view .overlay-text { top: 20% !important; } } .homepage-start .products-view .overlay-text h2 { font-weight: normal; font-size: 75px; letter-spacing: 6px; } @media screen and (max-width: 1100px) { .homepage-start .products-view .overlay-text h2 { font-size: 20px; } } .homepage-start .products-view .overlay-text h3 { font-size: 38px; font-weight: lighter; letter-spacing: 6px; } @media screen and (max-width: 1100px) { .homepage-start .products-view .overlay-text h3 { font-size: 12px; margin-bottom: 10px; } } .homepage-start .products-view .overlay-text .start-shop-btn { text-decoration: none; color: #FFF !important; font-size: 18px !important; border: 3px solid #baa8ff !important; padding: 20px 50px; letter-spacing: 1.5px; font-weight: 600; } .homepage-start .products-view .overlay-text .start-shop-btn:hover { background-color: #baa8ff; color: #000 !important; transition: 0.5s; -webkit-transition: 0.5s; } @media screen and (max-width: 1100px) { .homepage-start .products-view .overlay-text .start-shop-btn { font-size: 15px !important; padding: 10px 20px; } } @media screen and (max-width: 1100px) { .homepage-start .products-view .overlay-text { top: 20px; right: 0px; left: 0px; } } @media (max-width: 420px) { .homepage-start .blue-img-background { padding-bottom: 0px; background: none !important; } } .blue-img-background { background: transparent url(../images/blue-white-strip.png) repeat-y; background-size: contain; padding-bottom: 50px; } @media (max-width: 420px) { .blue-img-background { background-position: 105px; } } @media (max-width: 375px) { .blue-img-background { background-position: 96px; } } @media (max-width: 360px) { .blue-img-background { background-position: 90px; } } @media (max-width: 320px) { .blue-img-background { background-position: 80px; } } .blue-img-background.right { background: transparent url(../images/blue-white-strip-right.png) repeat-y; background-size: contain !important; } @media (max-width: 420px) { .blue-img-background.right { background-position: -103px; } } @media (max-width: 375px) { .blue-img-background.right { background-position: -90px; } } @media (max-width: 360px) { .blue-img-background.right { background-position: -88px; } } @media (max-width: 320px) { .blue-img-background.right { background-position: -80px; } } @media (max-width: 420px) { .blue-img-background.right .six:first-of-type { background-color: white; padding-bottom: 40px; } } @media screen and (max-width: 1100px) { .blue-img-background { background-size: contain !important; } } .owl-carousel ul { list-style-image: url(../images/ticked.png); } .owl-carousel ul li { font-size: 15px; vertical-align: middle; } .owl-dots { margin: 40px auto; text-align: center; } .owl-dots .owl-dot { background-color: #fff; border: 4px solid #fff; width: 18px; height: 18px; border-radius: 30px; margin: 5px; display: inline-block; } .owl-dots .owl-dot.active { background-color: #06a6e0; } /* * PRODUCT * */ .products-view { margin: 0 auto; background-color: #fff; box-shadow: 0 5px 45px rgba(135, 135, 135, 0.5); min-height: 500px; width: 90%; text-align: center; } .products-view .products-container .products-content { margin: 0 3.5%; width: 100%; } @media screen and (max-width: 1100px) { .products-view .products-container .products-content { margin: 0 2.5%; } } @media screen and (max-width: 1100px) { .products-view { min-height: auto; } } .product-item { margin: 30px 0px; padding: 30px; text-align: center; } .product-item:hover { box-shadow: 0 5px 45px rgba(135, 135, 135, 0.5); -webkit-transition: .8s; transition: 0.8s; } .product-item .product-image img { max-width: 100%; } .product-item .product-text { display: block; text-transform: uppercase; font-weight: 700; font-size: 18px; } @media screen and (max-width: 1100px) { .product-item .product-text { font-size: 13px; } } @media (max-width: 420px) { .product-item .product-text { margin: 5px auto !important; } } @media (min-width: 375px) and (max-width: 420px) { .product-item .product-text { font-size: 17px; } } .product-item .discovery-text { display: block; font-size: 12px; text-transform: uppercase; } .product-item .price-text { color: #f29f94; font-size: 30px; font-weight: bold; } @media screen and (max-width: 1100px) { .product-item .price-text { font-size: 19px; } } .product-item .shop-btn, .product-item .homepage-start .products-view .overlay-text .start-shop-btn, .homepage-start .products-view .overlay-text .product-item .start-shop-btn { display: block; margin: 20px auto; text-decoration: none; width: 130px; } .product-item .shop-btn:hover, .product-item .homepage-start .products-view .overlay-text .start-shop-btn:hover, .homepage-start .products-view .overlay-text .product-item .start-shop-btn:hover { background-color: #baa8ff; color: #000; -webkit-transition: .5s; transition: 0.5s; } /* * CLOTHING * */ .clothing .product-item .product-image img { height: 230px; } @media (max-width: 420px) { .banner-split .eight { width: 70%; } } @media (max-width: 420px) { .banner-split .four { width: 30%; } } /* * IMAGE * */ .img-responsive { max-width: 100%; min-height: 100%; } /* * BACKGROUND COLORS * */ .grey-background { background: #ededed; } /* * COLUMNS * */ /* * MICELLENOUS * */ .tomtom-logo { max-width: 80%; } @media screen and (max-width: 1100px) { .tomtom-logo { margin-left: 0px; max-width: 100%; } } .run-logo { background: transparent url(../images/women/run.png) no-repeat; background-size: contain; background-size: 100%; min-height: 300px; } @media (max-width: 420px) { .run-logo { background-size: 54%; background-position: 100px 0; } } @media (max-width: 375px) { .run-logo { background-position: 92px 0; } } @media (max-width: 360px) { .run-logo { background-position: 86px 0; } } @media (max-width: 320px) { .run-logo { background-position: 76px 0; } } @media screen and (max-width: 1100px) { .run-logo { min-height: inherit; } } @media (max-width: 420px) { .six.columns.long { background-color: white; padding-bottom: 40px; } } .absolute-horizontal { position: absolute; left: 50%; transform: translateX(-50%); } .column, .columns { margin-left: 0; } @media screen and (max-width: 1100px) { .float-right { float: right; } } .display-float-right { float: right !important; } @media (max-width: 420px) { .display-float-right { background-color: white; padding: 40px 0; } } .float-none { float: none !important; } .float-left { float: left !important; } .mejs__controls { display: none; } .main-video-container { position: relative; width: 70%; } @media screen and (max-width: 1100px) { .main-video-container { width: 100%; } } /* * TABLES * */ table tbody tr td { border: 0; } .td-container { float: right; margin-top: 50px; width: 72%; position: relative !important; } @media (min-width: 1200px) and (max-width: 1500px) { .td-container { width: 63%; } } .td-container .display-contents { display: contents; } .td-container .product-text { font-weight: 700; display: block; font-size: 2.7rem; letter-spacing: 2px; text-transform: uppercase; } @media (min-width: 1200px) and (max-width: 1500px) { .td-container .product-text { font-size: 1.7rem; } } @media only screen and (max-width: 1200px), only screen and (max-device-width: 1200px) { .td-container .product-text { font-size: 19px; } } @media only screen and (max-width: 1200px), only screen and (max-device-width: 1200px) { .td-container .product-text.right { text-align: center; } } @media only screen and (max-width: 1200px), only screen and (max-device-width: 1200px) { .td-container .left-text, .td-container .six.columns { text-align: center; } } @media (max-width: 420px) { .td-container .left-text, .td-container .six.columns { width: 100%; } } .td-container .discovery-text { font-size: 15px; text-transform: uppercase; vertical-align: top; } @media (min-width: 1200px) and (max-width: 1500px) { .td-container .discovery-text { font-size: 12px; } } @media only screen and (max-width: 1200px), only screen and (max-device-width: 1200px) { .td-container .discovery-text { float: none !important; text-align: center; } } .td-container .price-text { color: #f29f94; display: inline- block; font-weight: 700; font-size: 2.7rem; letter-spacing: 2px; text-transform: uppercase; margin-left: 10px; margin-top: -14px; } @media (min-width: 1200px) and (max-width: 1500px) { .td-container .price-text { font-size: 1.7rem; } } @media only screen and (max-width: 1200px), only screen and (max-device-width: 1200px) { .td-container .price-text { font-size: 19px; } } @media (max-width: 420px) { .td-container .price-text { color: #f29f94 !important; } } .td-container .display-contents { float: right; width: 50%; } .td-container .shop-btn, .td-container .homepage-start .products-view .overlay-text .start-shop-btn, .homepage-start .products-view .overlay-text .td-container .start-shop-btn { float: right; display: block; text-decoration: none; margin-top: 7px; font-size: 20px; } .td-container .shop-btn:hover, .td-container .homepage-start .products-view .overlay-text .start-shop-btn:hover, .homepage-start .products-view .overlay-text .td-container .start-shop-btn:hover { background-color: #baa8ff; color: #000; -webkit-transition: .5s; transition: 0.5s; } @media (min-width: 1200px) and (max-width: 1500px) { .td-container .shop-btn, .td-container .homepage-start .products-view .overlay-text .start-shop-btn, .homepage-start .products-view .overlay-text .td-container .start-shop-btn { font-size: 15px; } } @media only screen and (max-width: 1200px), only screen and (max-device-width: 1200px) { .td-container .shop-btn, .td-container .homepage-start .products-view .overlay-text .start-shop-btn, .homepage-start .products-view .overlay-text .td-container .start-shop-btn { margin: 0 auto; float: none; width: 62%; } } @media only screen and (max-width: 1200px), only screen and (max-device-width: 1200px) { .td-container .display-contents { display: block !important; } } @media only screen and (max-width: 1200px), only screen and (max-device-width: 1200px) { .td-container .display-float-right, .td-container.float-left { float: none !important; } } .td-container.left { float: left; margin-left: 67px; } @media (min-width: 1200px) and (max-width: 1500px) { .td-container.left { margin-left: 0; } } .td-container.left .shop-btn, .td-container.left .homepage-start .products-view .overlay-text .start-shop-btn, .homepage-start .products-view .overlay-text .td-container.left .start-shop-btn { float: left; } .td-container.left .price-text { float: left; margin-right: 20px; margin-left: 0; } @media (max-width: 420px) { .td-container.left .price-text { color: #f29f94 !important; } } @media screen and (max-width: 1100px) { .td-container.left { float: none; margin-top: 30px; margin-left: auto; } } @media screen and (max-width: 1100px) { .td-container { float: none; margin: 0 auto; width: 300px; } } .left-text { text-align: left; } .right { text-align: right; } .center { text-align: center; } .brand-logo { margin-top: 60px; position: absolute; left: 50%; transform: translateX(-50%); width: 200px; } @media screen and (max-width: 1100px) { .brand-logo { margin: 40px auto; width: 100px; position: relative; left: auto; transform: none; } } .brand-logo img { max-width: 100%; } .banner-shoe { margin: 0px auto; max-width: 1500px; text-align: center; } @media screen and (max-width: 1100px) { .banner-shoe { margin: 40px auto 20px auto; width: auto; } } .banner-shoe img { max-width: 100%; } @media only screen and (max-width: 1200px), only screen and (max-device-width: 1200px) { .blue-img-background.right .product-text { margin-top: 30px; } } @media only screen and (max-width: 1200px), only screen and (max-device-width: 1200px) { .blue-img-background.right .price-text { color: #FFF; } } @media screen and (max-width: 1100px) { .td-container .discovery-text { float: left; display: inline-block; margin-top: 6px; } } @media (max-width: 420px) { .td-container .discovery-text { position: relative !important; } } /* * GREY BLOCK * */ .grey-block { min-height: 500px; background: transparent url(../images/women/slider_bg.jpg) no-repeat; background-size: cover; width: 100%; } .grey-block .copy { padding: 40px; } .grey-block h2 { color: #1ea7de; text-transform: uppercase; font-weight: 600; padding-bottom: 15px; } .grey-block p { font-size: 15px; color: #000; line-height: 1.5; font-weight: 200; } .grey-block p { margin-bottom: 0; padding-bottom: 0; } @media screen and (max-width: 1100px) { .grey-block strong { font-size: 15px; } } .banner-block { margin: 30px auto; width: 1300px; text-align: center; } @media screen and (max-width: 1100px) { .banner-block { margin-top: 0; margin-bottom: 0; width: auto; } } .banner-block img { max-width: 100%; } .banner-block .six.columns:nth-child(2n) { margin-left: 4%; } @media screen and (max-width: 1100px) { .banner-block .six.columns:nth-child(2n) { margin-top: 0px; margin-left: 0; } } footer { margin-top: 30px; } @media screen and (max-width: 1100px) { footer { margin-top: 0; } } footer .footer-icons { background-color: #f29f94; padding: 20px; } footer .footer-icons a, footer .footer-icons .ts_logo { display: inline-block; padding: 10px; } footer .footer-icons .ts_logo { padding-left: 50px; } @media screen and (max-width: 1100px) { footer .footer-icons .ts_logo { padding-left: 10px; } } footer .footer-icons .ts_logo img { max-width: 100%; } @media (min-width: 1200px) and (max-width: 1500px) { footer .footer-icons .six:nth-of-type(1) { width: 40%; } } @media screen and (max-width: 1100px) { footer .footer-icons .right { text-align: center !important; } } @media (min-width: 1200px) and (max-width: 1500px) { footer .footer-icons .right { width: 58%; } } @media screen and (max-width: 1100px) { footer .footer-icons { text-align: center !important; } } footer .footer-copyright { background-color: #e5897d; padding: 10px; padding-left: 50px; } footer .footer-copyright span { color: #FFF; font-size: 12px; } .nike-section .td-container .discovery-text { position: absolute; } @media (min-width: 1783px) and (max-width: 1920px) { .nike-section .td-container .discovery-text { right: 350px; } } @media (min-width: 1200px) and (max-width: 1500px) { .nike-section .td-container .discovery-text { top: 40px; right: 205px; } } @media (min-width: 1200px) and (max-width: 1500px) { .nike-section .product-item .row:first-of-type { height: 540px; } } @media (min-width: 1825px) and (max-width: 1920px) { .asics-section .td-container { width: 69%; } } .adidas-section .td-container { width: 79% !important; } @media (min-width: 1200px) and (max-width: 1500px) { .adidas-section .td-container { width: 70% !important; } } @media (max-width: 420px) { .adidas-section .td-container { background-color: white; padding-top: 40px; } } .adidas-section .td-container .discovery-text { position: absolute; } @media (min-width: 1783px) and (max-width: 1920px) { .adidas-section .td-container .discovery-text { top: 60px; right: 418px; } } @media (min-width: 1200px) and (max-width: 1500px) { .adidas-section .td-container .discovery-text { top: 40px; right: 245px; } } @media (min-width: 1200px) and (max-width: 1500px) { .nb-section .td-container .price-text { margin-left: 0px; } } .nb-section .td-container .shop-btn, .nb-section .td-container .homepage-start .products-view .overlay-text .start-shop-btn, .homepage-start .products-view .overlay-text .nb-section .td-container .start-shop-btn { float: left; } @media (max-width: 420px) { .nb-section .td-container .shop-btn, .nb-section .td-container .homepage-start .products-view .overlay-text .start-shop-btn, .homepage-start .products-view .overlay-text .nb-section .td-container .start-shop-btn { margin-top: 30px; float: none; } } .nb-section .td-container .discovery-text { position: absolute; } @media (min-width: 1783px) and (max-width: 1920px) { .nb-section .td-container .discovery-text { top: 60px; right: 40px; } } @media (min-width: 1200px) and (max-width: 1500px) { .nb-section .td-container .discovery-text { top: 40px; right: 28px; } } .puma-section .td-container { width: 82% !important; } @media (min-width: 1200px) and (max-width: 1500px) { .puma-section .td-container { width: 73% !important; } } @media (min-width: 1200px) and (max-width: 1920px) { .puma-section .td-container .price-text { margin-left: 0px; } } @media (min-width: 1783px) and (max-width: 1920px) { .puma-section .td-container .shop-btn, .puma-section .td-container .homepage-start .products-view .overlay-text .start-shop-btn, .homepage-start .products-view .overlay-text .puma-section .td-container .start-shop-btn { top: 60px; position: absolute; right: 25px; } } @media (min-width: 1200px) and (max-width: 1500px) { .puma-section .td-container .shop-btn, .puma-section .td-container .homepage-start .products-view .overlay-text .start-shop-btn, .homepage-start .products-view .overlay-text .puma-section .td-container .start-shop-btn { position: relative; bottom: 30px; } } @media (max-width: 420px) { .puma-section .banner-shoe br { display: none !important; } } .ts-section .td-container .display-float-right, .adidas-section .td-container .display-float-right { float: right !important; } .ts-section .discovery-text { position: absolute; } @media (min-width: 1783px) and (max-width: 1920px) { .ts-section .discovery-text { top: 110px; right: 280px; } } @media (min-width: 1200px) and (max-width: 1500px) { .ts-section .discovery-text { top: 70px; right: 155px; } } @media (max-width: 420px) { .ts-section { background-color: white; padding-top: 40px; } } .underarmour-section .td-container .discovery-text { position: absolute; } @media (min-width: 1783px) and (max-width: 1920px) { .underarmour-section .td-container .discovery-text { top: 60px; right: 300px; } } @media (min-width: 1200px) and (max-width: 1500px) { .underarmour-section .td-container .discovery-text { top: 40px; right: 168px; } } .tomtom-section .td-container .discovery-text { position: absolute; } @media (min-width: 1783px) and (max-width: 1920px) { .tomtom-section .td-container .discovery-text { top: 60px; right: 305px; } } @media (min-width: 1200px) and (max-width: 1500px) { .tomtom-section .td-container .discovery-text { top: 40px; right: 170px; } } @media (max-width: 420px) { .tomtom-section .six:nth-of-type(2) { background-color: white; padding: 40px 0 20px; } } @media (min-width: 1200px) and (max-width: 1500px) { .garmin-section .td-container { width: 69%; } } @media (max-width: 420px) { .garmin-section .banner-shoe br { display: none !important; } } @media only screen and (max-width: 1200px), only screen and (max-device-width: 1200px) { .td-container { width: 100% !important; } } /* ========================================================================== Helper classes ========================================================================== */ /* * Hide visually and from screen readers */ .hidden { display: none !important; } /* * Hide only visually, but have it available for screen readers: * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility * * 1. For long content, line feeds are not interpreted as spaces and small width * causes content to wrap 1 word per line: * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; /* 1 */ } /* * Extends the .visuallyhidden class to allow the element * to be focusable when navigated to via the keyboard: * https://www.drupal.org/node/897638 */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; -webkit-clip-path: none; clip-path: none; height: auto; margin: 0; overflow: visible; position: static; width: auto; white-space: inherit; } /* * 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; } /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ @media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ } @media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: http://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */ @media print { *, *:before, *:after { background: transparent !important; color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links that are fragment identifiers, * or use the `javascript:` pseudo protocol */ a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre { white-space: pre-wrap !important; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } /* * Printing Tables: * http://css-discuss.incutio.com/wiki/Printing_Tables */ thead { display: table-header-group; } tr, img { page-break-inside: avoid; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /*# sourceMappingURL=site.css.map */