/* OI-Modals v0.10.2 * Copyright (c) 2016 Opportunity International */ /****************/ /**** Modals ****/ /****************/ img.block { height: auto; } [data-modal] { cursor: pointer; } body.ios-no-scroll { position: fixed; height: 100%; width: 100%; top: 0; left: 0; overflow: hidden; } body.ios-no-scroll .ios-scroll-container { position: absolute; top: 0; left: 0; height: auto; width: 100%; } body.no-scroll { overflow: hidden; } .modal { display: none; position: fixed; top: 0; left: 0; right: 0; height: 100%; padding: 20px; z-index: 3; transition: background-color .3s; -webkit-transition: background-color .3s; -moz-transition: background-color .3s; } .modal.show { background-color: rgba(0, 0, 0, 0.8); } .modal.show .ie8-overlay { position: fixed; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; filter: alpha(opacity=80); } .modal.show .modal-container { top: 50%; opacity: 1; } .modal.show button.close { opacity: 1; } .modal.animate { display: block; } .modal.animate .modal-container { display: block; } .modal.overflow { overflow: auto; -webkit-overflow-scrolling: touch; } .modal.overflow .modal-container { top: -25%; transform: translateY(0); -moz-transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); } .modal.overflow.show .modal-container { top: 0%; } .modal.overflow.show .modal-container:after { content: ''; display: block; position: absolute; height: 20px; width: 100%; } .modal.overflow.show .modal-container.fullscreen:after { display: none; } .modal.loading .loading-container { display: block; } .modal .loading-container { display: none; position: absolute; top: 50%; left: 50%; margin-top: -30px; text-align: center; margin-left: -30px; background-color: #fff; background-color: rgba(255, 255, 255, 0.8); width: 60px; height: 60px; border-radius: 5px; } .modal .loading-container .loading-indicator { display: block; top: 50%; position: relative; margin-left: auto; margin-top: -15px; margin-right: auto; } .modal .modal-container { display: none; position: relative; top: 25%; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); margin: 0 auto; width: 400px; background: #fff; opacity: 0; transition: top, opacity; -moz-transition: top, opacity; -webkit-transition: top, opacity; } .modal .modal-container.extended {height:80vh; overflow-y:scroll;} .modal .modal-container.hide-close button.close { display: none; } .modal .modal-container .modal-content { position: relative; } .modal .modal-container .modal-content .iframe { height: 0; width: 100%; margin: 0; padding-bottom: 75%; position: relative; overflow: auto; -webkit-overflow-scrolling: touch; } .modal .modal-container .modal-content .iframe iframe { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .modal .modal-container[class*="contained-"] { width: auto; } .modal .modal-container.lightbox { width: auto; background-color: transparent; } .modal .modal-container.lightbox .lightbox-image { position: relative; } .modal .modal-container.lightbox button.close { background-color: #fff; background-color: rgba(255, 255, 255, 0.5); color: #555; } .modal .modal-container.lightbox button.close:hover { color: #333; } .modal .modal-container.lightbox button.lightbox-next, .modal .modal-container.lightbox button.lightbox-prev { position: absolute; top: 50%; margin-top: -20px; opacity: .5; color: #fff; font-size: 40px; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -webkit-transition: opacity .3s, text-shadow .3s; transition: opacity .3s, text-shadow .3s; } .modal .modal-container.lightbox button.lightbox-next:hover, .modal .modal-container.lightbox button.lightbox-prev:hover { text-shadow: 0 0 10px rgba(0, 0, 0, 0.25); opacity: 1; } .modal .modal-container.lightbox button.lightbox-next { right: 0; } .modal .modal-container.lightbox button.lightbox-prev { left: 0; } .modal .modal-container.fullscreen { position: absolute; top: 0; left: 0; max-width: initial; width: 100%; min-height: 100%; } .modal .modal-container.fullscreen.show { top: 0; } .modal button.close { position: absolute; top: 0; right: 0; width: 40px; height: 40px; font-size: 24px; text-align: center; line-height: 40px; color: #8f8e8c; z-index: 1; opacity: 0; transition: opacity .3s; -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -ms-transition: opacity .3s; } .modal button.close.fixed { position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0); } .modal button.close:hover { color: #333; } .modal.size { display: block; } .modal.size .modal-container { display: block; visibility: hidden; } @media (max-width: 440px) { .modal .modal-container { width: 100%; } } /* OI-OffCanvas v0.9.1 * Copyright (c) 2015 Opportunity International */ body { position: relative; -webkit-transition: left .5s, right .5s; transition: left .5s, right .5s; } .no-scroll { overflow: hidden; } .offcanvas-overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 2; height: 100%; background-color: rgba(0, 0, 0, 0.7); opacity: 0; display: none; -webkit-transition: opacity .5s; transition: opacity .5s; } .offcanvas-overlay.show { display: block; } .fixed { -webkit-transition: left .5s, right .5s; transition: left .5s, right .5s; } .drawer { display: none; position: fixed; top: 0; z-index: 2; height: 100%; background-color: #fff; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-transition: left .5s, right .5s; transition: left .5s, right .5s; box-sizing: content-box; } .drawer.show { display: block; } /* slide-hammer v0.9.0 * Copyright (c) 2015 Joseph Weber */ .slides { margin-left: auto; margin-right: auto; } .slide-wrapper { width: 100%; overflow: hidden; position: relative; transition: height .5s; -moz-transition: height .5s; -webkit-transition: height .5s; } .slide-wrapper .slide-container { width: 100000px; clear: both; position: absolute; top: 0; left: 0; transition: transform .5s; -moz-transition: transform .5s; -webkit-transition: -webkit-transform .5s; } .slide-wrapper .slide-container .slide { width: 600px; float: left; } .slide-wrapper .slide-container .slide img { display: block; width: 100%; height: auto; pointer-events: none; } /* OI v0.1.0 * Copyright (c) 2016 */ /****************/ /**** Header ****/ /****************/ nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 3; } nav .nav-container { padding-left: 20px; padding-right: 0; background-color: #222; position: relative; z-index: 2; } nav #nav-logo { position: absolute; background-image: url("../img/oi-logo-mobile-sprite-2x.png"); background-repeat: no-repeat; background-position: left 0%; display: block; width: 225px; height: 40px; bottom: 10px; background-size: auto 500%; } nav #nav-logo.brand-purple { background-position: 0 25%; } nav #nav-logo.brand-teal { background-position: 0 50%; } nav #nav-logo.brand-orange { background-position: 0 75%; } nav #nav-logo.brand-pink { background-position: 0 100%; } nav .nav-actions, nav .nav-main { display: none; } nav button.offcanvas-trigger { display: block; float: right; height: 40px; clear: both; color: #fff; font-size: 24px; line-height: 40px; margin-top: 10px; margin-bottom: 10px; padding-right: 20px; padding-left: 20px; } /************************/ /**** Offcanvas menu ****/ /************************/ #offcanvas .offcanvas-header { height: 60px; position: relative; padding-left: 30px; padding-right: 30px; } #offcanvas .offcanvas-header h2 { line-height: 60px; float: left; } #offcanvas .offcanvas-header button { float: right; margin-top: 10px; } #offcanvas .offcanvas-container { padding: 20px 30px 30px 30px; } #offcanvas ul.level-1 > li { position: relative; padding-right: 40px; } #offcanvas ul.level-1 > li .toggle { position: absolute; right: 0; font-size: 20px; width: 40px; text-align: right; line-height: 1.225em; color: #8f8e8c; } #offcanvas ul.level-1 > li > a { color: #555; display: inline-block; text-transform: uppercase; font-size: .875em; font-weight: bold; letter-spacing: .5px; margin-bottom: 10px; } #offcanvas ul.level-1 > li[data-class="brand-purple"] ul.level-2 li.active:before, #offcanvas ul.level-1 > li[data-class="brand-purple"] ul.level-2 li.active a { color: #4a0059; } #offcanvas ul.level-1 > li[data-class="brand-pink"] ul.level-2 li.active:before, #offcanvas ul.level-1 > li[data-class="brand-pink"] ul.level-2 li.active a { color: #ed027e; } #offcanvas ul.level-1 > li[data-class="brand-orange"] ul.level-2 li.active:before, #offcanvas ul.level-1 > li[data-class="brand-orange"] ul.level-2 li.active a { color: #f15b22; } #offcanvas ul.level-1 > li[data-class="brand-teal"] ul.level-2 li.active:before, #offcanvas ul.level-1 > li[data-class="brand-teal"] ul.level-2 li.active a { color: #00abab; } #offcanvas ul.level-2 { display: none; padding-right: 20px; padding-left: 10px; padding-bottom: 10px; } #offcanvas ul.level-2.expanded { display: block; } #offcanvas ul.level-2 > li.active:before { display: block; font-family: 'OI-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '\e619'; position: absolute; left: -40px; } #offcanvas ul.level-2 > li.active > a { font-weight: bold; } #offcanvas ul.level-2 > li > a { display: block; font-size: .875em; color: #555; line-height: 1.25; padding-bottom: 10px; } #offcanvas .offcanvas-quick-links a, #offcanvas .offcanvas-account-links a { display: block; color: #8f8e8c; font-size: .875em; line-height: 1.25; padding-bottom: 10px; } #offcanvas .offcanvas-account-links a { text-transform: uppercase; letter-spacing: .5px; } #offcanvas .offcanvas-account-links i { margin-right: 5px; font-size: 16px; line-height: 1.09375em; } /*******************/ /**** Side menu ****/ /*******************/ .side-menu { position: relative; margin-bottom: 40px; max-width: 630px; margin-left: auto; margin-right: auto; border-top: solid 5px; padding-top: 40px; } .side-menu ul.level-1 > li { padding-left: 0; position: relative; } .side-menu ul.level-1 > li:before { content: ''; } .side-menu ul.level-1 > li .toggle { position: absolute; right: 0; font-size: 20px; cursor: pointer; } .side-menu ul.level-1 .active > a { font-weight: bold; } .side-menu ul.level-2 { display: none; padding-top: 10px; padding-left: 10px; font-size: .875em; } .side-menu h3 a { color: inherit; } .side-menu li { padding-bottom: 10px; line-height: 1.125; } .side-menu li:last-child { padding-bottom: 0; } .side-menu li a { display: inline-block; color: inherit; font-size: .875em; line-height: 1.75em; } /******************************/ /**** Mobile donate button ****/ /******************************/ #mobile-donate { position: fixed; bottom: 0; right: 0; width: 100%; z-index: 30; } #mobile-donate button { margin-bottom: 0; } body { padding-bottom: 45px; } /*********************/ /**** Breadcrumbs ****/ /*********************/ .no-breadcrumbs .breadcrumbs { display: none; } .breadcrumbs { display: none; } /********************/ /******* Footer *****/ /********************/ footer { color: #555; } footer a { color: #555; } footer a:hover { color: #222; } footer hr { margin-top: 20px; margin-bottom: 20px; height: 1px; } footer .brand-darkgray-bg { color: #8f8e8c; } footer .brand-darkgray-bg a { color: #8f8e8c; } footer .brand-darkgray-bg a:hover { color: #efeeea; } footer .brand-darkgray-bg .footer-heading { color: #efeeea; } footer .footer-heading { text-transform: uppercase; font-size: .875em; font-weight: bold; letter-spacing: .5px; } footer .footer-left { text-align: center; } footer .footer-right { text-align: center; } footer .footer-legal { font-size: .875em; margin-top: 20px; margin-bottom: 30px; } footer .footer-legal ul li { font-weight: bold; text-transform: uppercase; letter-spacing: .5px; } footer .social-icons { margin-bottom: 20px; } footer .social-icons .footer-heading { line-height: 40px; vertical-align: top; } footer .footer-international { text-align: center; } footer .footer-international li { font-size: .875em; } footer .footer-copyright { font-size: .875em; margin-bottom: 40px; margin-top: 20px; } footer .footer-logos .footer-logo { display: inline-block; vertical-align: middle; } .footer-nav ul.level-2 { display: none; } .footer-nav .footer-nav-heading { display: inline-block; font-weight: bold; margin-bottom: 15px; text-transform: uppercase; letter-spacing: .5px; font-size: .875em; padding-right: 40px; } .footer-nav .footer-column { width: 100%; position: relative; } .footer-nav .footer-column li { line-height: 1.25; margin-bottom: .875em; font-size: .875em; } .footer-nav .footer-column li a { -webkit-transition: color 0.3s; transition: color 0.3s; } .footer-nav .footer-column li a:hover { color: #222; } .footer-nav .toggle { position: absolute; right: 10px; top: 0; font-size: 20px; width: 40px; text-align: right; color: #8f8e8c; } /*******************************/ /**** Temporary Weavr fixes ****/ /*******************************/ .body-copy > ul > li:before { display: inline-block; position: relative; left: -0.625em; margin-left: -0.625em; } .brand-green-bg input[type='text'], .brand-green-bg input[type='number'], .brand-green-bg input[type='email'], .brand-green-bg input[type='password'], .brand-green-bg input[type='phone'], .brand-green-bg textarea, .brand-purple-bg input[type='text'], .brand-purple-bg input[type='number'], .brand-purple-bg input[type='email'], .brand-purple-bg input[type='password'], .brand-purple-bg input[type='phone'], .brand-purple-bg textarea, .brand-pink-bg input[type='text'], .brand-pink-bg input[type='number'], .brand-pink-bg input[type='email'], .brand-pink-bg input[type='password'], .brand-pink-bg input[type='phone'], .brand-pink-bg textarea, .brand-orange-bg input[type='text'], .brand-orange-bg input[type='number'], .brand-orange-bg input[type='email'], .brand-orange-bg input[type='password'], .brand-orange-bg input[type='phone'], .brand-orange-bg textarea, .brand-teal-bg input[type='text'], .brand-teal-bg input[type='number'], .brand-teal-bg input[type='email'], .brand-teal-bg input[type='password'], .brand-teal-bg input[type='phone'], .brand-teal-bg textarea, .brand-darkgray-bg input[type='text'], .brand-darkgray-bg input[type='number'], .brand-darkgray-bg input[type='email'], .brand-darkgray-bg input[type='password'], .brand-darkgray-bg input[type='phone'], .brand-darkgray-bg textarea { border-color: #fff; } /*********************/ /*** Social icons ****/ /*********************/ .social-icons { margin-left: -5px; margin-right: -5px; } .social-icon { display: inline-block; width: 40px; height: 40px; line-height: 40px; font-size: 14px; text-align: center; border-radius: 100%; margin-left: 5px; margin-right: 5px; } .social-icon.icon-facebook { background-color: #3b5998; color: #fff; } .social-icon.icon-twitter { background-color: #55acee; color: #fff; } .social-icon.icon-linkedin { background-color: #0077b5; color: #fff; } .social-icon.icon-youtube { background-color: #cd201f; color: #fff; } .social-icon.icon-pinterest { background-color: #cb2027; color: #fff; } .social-icon.icon-googleplus { background-color: #dd4b39; color: #fff; } .social-icon.icon-instagram { background-color: #c13584; color: #fff; } .slide-indicators { text-align: center; padding: 5px; } .slide-indicators .slide-indicator { display: inline-block; width: 10px; height: 10px; margin: 0 5px; border-radius: 100%; background-color: #8f8e8c; cursor: pointer; } .slide-indicators .slide-indicator:hover { background-color: #4a0059; } .slide-indicators .slide-indicator.active { background-color: #4a0059; } .body-copy.contained-9 > table { max-width: 630px; margin-left: auto; margin-right: auto; } .relative { position: relative; } time { font-family: "Times New Roman", Times, serif; font-style: italic; font-size: 1.125em; } time.small { font-size: 1em; } time + h2 { margin-top: 5px; } #feature { height: 200px; height: 50vw; } .sidebar { margin-top: 30px; } /*****************/ /**** Widgets ****/ /*****************/ .widget { display: none; } .widget .widget-head { padding: 30px; text-align: center; position: relative; } .widget .widget-head h3 { margin-bottom: 0; } .widget .widget-head .widget-nub { position: absolute; bottom: -1px; left: 0; width: 100%; text-align: center; } .widget .widget-body { padding: 30px; } .widget ul.blocklist li { display: block; margin-bottom: 40px; padding-bottom: 30px; border-bottom: solid 1px #fff; } .widget ul.blocklist li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } #widget-facts table { font-size: .875em; border-collapse: collapse; } #widget-facts td { vertical-align: top; padding: 5px 0; border-bottom: solid 1px #8f8e8c; } #widget-facts tr:last-child td { border-bottom: none; } #widget-events { text-align: center; } #widget-events .month { display: block; } #widget-events .day { display: block; font-size: 2em; } #widget-events .locations { font-size: .875em; } #widget-downloads li p { font-size: .875em; color: #8f8e8c; } /****************/ /**** Videos ****/ /****************/ .video-thumbnail { width: 100%; height: 0; padding-bottom: 56.25%; position: relative; overflow: hidden; } .video-title { margin-top: .625em; font-weight: bold; color: #555; } .inline-video-gallery .index-grid { padding: 0; } /*********************/ /**** Index pages ****/ /*********************/ .index { overflow: hidden; } .index .sidebar { padding-left: 30px; padding-right: 30px; } .index .filter-params { margin-top: 40px; } .index .pagination a { color: #8f8e8c; font-weight: bold; } .index .pagination a:hover { color: #333; } .index .pagination a.active { color: #333; } .index-content { padding: 30px 30px 0; } .index-rows .index-item:nth-child(even) { background-color: #efeeea; } .index-rows .index-item:nth-child(even) .nub { color: #efeeea; } .index-rows .index-item .nub { position: absolute; font-size: 30px; color: #fff; bottom: -2px; right: 0; width: 100%; text-align: center; font-family: 'OI-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .index-rows .index-item .nub:before { content: '\e618'; } .index-grid { padding: 30px; } .index-grid.no-gutter .index-item { padding: 0; } .index-grid.bordered { margin-left: 1px; margin-top: 1px; margin-right: -1px; border: none; } .index-grid.bordered .index-item { border: solid 1px #efeeea; margin-top: -1px; margin-left: -1px; } .index-grid .index-item { margin-bottom: 30px; } .index-heading { background-color: #efeeea; padding: 15px 30px; clear: left; } .index-item { position: relative; } .icon-overlay:before { display: none; } /*******************************/ /******* Textfield Search *****/ /*******************************/ .search { float: right; width: 30px; height: 20px; overflow: visible; position: relative; } .search form { width: 100%; height: 20px; position: absolute; right: 0; background-color: #222; -webkit-transition: width .3s; transition: width .3s; } .search input[type="text"] { position: absolute; top: 0; background-color: transparent; border: none; border-color: transparent; color: #efeeea; font-size: 16px; padding: 0 10px; right: 30px; height: 22px; width: 0; -webkit-transition: width .3s, border .3s; transition: width .3s, border .3s; } .search button.icon-search { position: absolute; right: 0; top: 0; background-color: #222; color: #8f8e8c; font-size: 20px; height: 18px; width: 30px; } .search button.icon-search:hover { color: #fff; } .search.show input[type="text"] { width: 100%; border-bottom: solid 1px #8f8e8c; background-color: #222; } .search.show button.icon-search { color: #fff; } .search.show button.icon-search:hover { color: #f15b22; } .search.show button.icon-cross { position: absolute; left: -60px; height: 18px; width: 30px; line-height: 18px; background-color: transparent; color: #8f8e8c; font-size: 20px; } .search.show button.icon-cross:hover { color: #fff; } /*****************/ /**** Content ****/ /*****************/ #content { margin-top: 60px; } /**************/ /*** Touts ****/ /**************/ .horizontal-tout { position: relative; overflow: hidden; } .horizontal-tout .tout-content, .horizontal-tout .tout-photo { position: relative; } .horizontal-tout .tout-content { padding: 40px 30px; } .horizontal-tout .tout-photo { position: relative; height: 0; padding-bottom: 66.66%; } .horizontal-tout .tout-caption { display: none; } .horizontal-tout .tout-caption.brand-purple-decoration { border-color: #4a0059; } .horizontal-tout .tout-caption.brand-pink-decoration { border-color: #ed027e; } .horizontal-tout .tout-caption.brand-teal-decoration { border-color: #00abab; } .horizontal-tout .tout-caption.brand-orange-decoration { border-color: #f15b22; } .horizontal-tout .tout-nub { font-family: 'OI-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; bottom: -2px; left: 0; right: 0; font-size: 20px; text-align: center; } .horizontal-tout .tout-nub:before { content: "\e618"; } .horizontal-tout .tout-nub.large { font-size: 30px; } .horizontal-tout .tout-nub.small { font-size: 15px; } .contained-12.horizontal-tout .tout-content, .contained-12 .horizontal-tout .tout-content, .contained-9.horizontal-tout .tout-content, .contained-9 .horizontal-tout .tout-content, .contained-6.horizontal-tout .tout-content, .contained-6 .horizontal-tout .tout-content { padding: 30px 22.5px; } .vertical-tout .tout-photo { position: relative; height: 0; padding-bottom: 66.66%; } .vertical-tout .tout-photo .tout-nub { font-family: 'OI-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; bottom: -2px; right: 0; left: 0; width: 100%; text-align: center; font-size: 20px; } .vertical-tout .tout-photo .tout-nub:before { content: "\e618"; } .vertical-tout .tout-photo .tout-nub.large { font-size: 30px; } .vertical-tout .tout-photo .tout-nub.small { font-size: 15px; } .vertical-tout .tout-content { padding: 40px; } /***************/ /**** Stats ****/ /***************/ .stat .stat-figure { font-size: 2.75em; font-weight: bold; line-height: 1.125; text-transform: uppercase; margin-bottom: 5px; } .stat .stat-descriptor { font-family: "Times New Roman", Times, serif; font-style: italic; font-size: 1.125em; line-height: 1.125; } .stat.small .stat-figure { font-size: 1.25em; } .stat.small .stat-descriptor { font-size: 1em; } @media (min-width: 480px) { /* phone */ nav .nav-container { padding-left: 40px; padding-right: 20px; } footer .social-icons { height: 40px; } footer .social-icons .footer-heading { display: inline-block; margin-right: 5px; } .sidebar { margin-top: 40px; } .widget .widget-head { padding: 40px; } .widget .widget-body { padding: 40px; } .inline-video-gallery .index-grid { margin-top: -10px; } .index .sidebar { padding-left: 40px; padding-right: 40px; } .index-content { padding: 40px 40px 0; } .index-rows .index-item .nub { font-size: 40px; } .index-grid.no-gutter { margin-left: 0; margin-right: 0; } .index-grid.bordered { margin-right: -2px; } .index-grid { margin-left: -10px; margin-right: -10px; padding: 40px; } .index-grid .index-item { float: left; padding: 10px; width: 50%; margin-bottom: auto; } .index-heading { padding: 20px 40px; } .horizontal-tout .tout-content { padding: 60px; } .contained-12.horizontal-tout .tout-content, .contained-12 .horizontal-tout .tout-content, .contained-9.horizontal-tout .tout-content, .contained-9 .horizontal-tout .tout-content, .contained-6.horizontal-tout .tout-content, .contained-6 .horizontal-tout .tout-content { padding: 40px; } } @media (min-width: 680px) { /* big phone, small tablet */ footer .footer-international .footer-heading { display: inline-block; margin-right: 20px; } .inline-video-gallery .index-grid { margin-top: -20px; } .index-rows .index-item .nub { font-size: 60px; right: -1px; top: 50%; bottom: auto; width: auto; margin-top: -30px; } .index-rows .index-item .nub:before { content: '\e61a'; } .index-grid.bordered { margin-right: -3px; } .index-grid { margin-right: -20px; margin-left: -20px; } .index-grid .index-item { padding: 20px; width: 33.33%; } .horizontal-tout .tout-content, .horizontal-tout .tout-photo { width: 50%; } .horizontal-tout .tout-photo { position: absolute; top: 0; height: 100%; padding-bottom: 0; } .horizontal-tout .tout-caption { display: block; position: absolute; bottom: 20px; padding: 10px 20px; font-size: .875em; font-family: "Times New Roman", Times, serif; font-style: italic; background-color: rgba(255, 255, 255, 0.9); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .horizontal-tout.photo-content .tout-nub, .horizontal-tout.content-photo .tout-nub { font-size: 60px; bottom: auto; top: 50%; margin-top: -30px; } .horizontal-tout.photo-content .tout-nub.large, .horizontal-tout.content-photo .tout-nub.large { font-size: 80px; margin-top: -40px; } .horizontal-tout.photo-content .tout-nub.small, .horizontal-tout.content-photo .tout-nub.small { font-size: 40px; margin-top: -20px; } .horizontal-tout.photo-content .tout-content { left: 50%; } .horizontal-tout.photo-content .tout-nub { left: auto; right: -1px; } .horizontal-tout.photo-content .tout-nub:before { content: "\e61a"; } .horizontal-tout.photo-content .tout-caption { left: 0; margin-right: 20px; border-right-style: solid; border-right-width: 5px; } .horizontal-tout.content-photo .tout-photo { left: 50%; } .horizontal-tout.content-photo .tout-nub { right: auto; left: -1px; } .horizontal-tout.content-photo .tout-nub:before { content: "\e619"; } .horizontal-tout.content-photo .tout-caption { right: 0; margin-left: 20px; border-left-style: solid; border-left-width: 5px; } } @media (min-width: 768px) { /* tablet */ } @media (min-width: 960px) { /* netbook */ nav .nav-container { padding-right: 40px; } nav #nav-logo { background-image: url("../img/oi-logo-sprite.png"); height: 75px; } nav .nav-actions, nav .nav-main { display: block; text-align: right; color: #8f8e8c; } nav .nav-actions > ul, nav .nav-main > ul { margin-bottom: 0; margin-right: 10px; } nav .nav-actions > ul > li, nav .nav-main > ul > li { font-size: 12px; line-height: 20px; letter-spacing: 1px; padding-left: 7px; padding-right: 7px; } nav .nav-actions > ul > li a, nav .nav-main > ul > li a { text-transform: uppercase; } nav .nav-actions > ul > li a:hover, nav .nav-main > ul > li a:hover { color: #fff; } nav .nav-actions { padding-top: 10px; height: 30px; } nav .nav-actions a.nav-action { color: #8f8e8c; } nav .nav-actions a.nav-action i:before { font-size: 18px; display: inline-block; margin-right: 5px; vertical-align: middle; } nav .nav-main ul.level-1 { position: relative; } nav #nav-main-items { position: relative; /* Brand & Pillar hover colors */ } nav #nav-main-items li.level-1 { z-index: 1; } nav #nav-main-items li.level-1 > a { color: #efeeea; line-height: 65px; display: inline-block; } nav #nav-main-items li.level-1.active[data-class="brand-purple"] > a { color: #611171; } nav #nav-main-items li.level-1.active[data-class="brand-teal"] > a { color: #00abab; } nav #nav-main-items li.level-1.active[data-class="brand-orange"] > a { color: #f15b22; } nav #nav-main-items li.level-1.active[data-class="brand-pink"] > a { color: #ed027e; } nav #nav-main-items .dropdown > ul { margin-right: 40px; margin-bottom: 0; padding-left: 5px; vertical-align: top; max-width: 180px; float: left; } nav #nav-main-items .dropdown > ul:last-child { margin-right: 0; } nav #nav-main-items li.level-2 { margin-bottom: 20px; padding-left: 0; display: block; } nav #nav-main-items li.level-2:last-child { margin-bottom: 0; } nav #nav-main-items li.level-2 > a { color: #efeeea; margin-bottom: 7px; letter-spacing: 1px; display: block; } nav #nav-main-items li.level-2 > a:hover { color: #fff; } nav #nav-main-items li.level-3 { display: block; padding-left: 0; } nav #nav-main-items li.level-3 > a { text-transform: none; display: block; line-height: 1.25; margin-bottom: 7px; } nav #nav-main-items li.level-2.events ul{display:none;} nav #nav-main-items [data-class='brand-teal'] li.level-3 > a { color: #b4e1e3; } nav #nav-main-items [data-class='brand-orange'] li.level-3 > a { color: #fbbea6; } nav #nav-main-items [data-class='brand-pink'] li.level-3 > a { color: #f7b3d1; } nav #nav-main-items [data-class='brand-purple'] li.level-3 > a { color: #ac99b1; } nav #nav-main-items [data-class='brand-teal'] li.level-3 > a:hover, nav #nav-main-items [data-class='brand-orange'] li.level-3 > a:hover, nav #nav-main-items [data-class='brand-pink'] li.level-3 > a:hover, nav #nav-main-items [data-class='brand-purple'] li.level-3 > a:hover { color: #efeeea; } nav #nav-main-items li[data-class='brand-teal']:hover > a { color: #00abab; } nav #nav-main-items li[data-class='brand-orange']:hover > a { color: #f15b22; } nav #nav-main-items li[data-class='brand-pink']:hover > a { color: #ed027e; } nav #nav-main-items li[data-class='brand-purple']:hover > a { color: #4a0059; } nav #nav-main-nub { position: absolute; bottom: -1px; z-index: 0; font-size: 13px; -webkit-transition: left .3s ease, color .3s; transition: left .3s ease, color .3s; } nav #nav-dropdown-bg { position: absolute; left: 0; width: 100%; z-index: 1; -webkit-transition: background-color .3s, height .3s; transition: background-color .3s, height .3s; } nav .dropdown { display: none; position: absolute; padding: 40px 0 30px; top: 65px; left: 0; z-index: 1; text-align: left; width: 300px; } nav .dropdown li, nav .dropdown li a { line-height: 1; } nav button.offcanvas-trigger { display: none; } .side-menu { border-top: none; padding: 40px 0 40px 40px; border-left: solid 5px; } .side-menu ul.level-1 > li .toggle { display: none; } .side-menu ul.level-1 .active:before { font-family: 'OI-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '\e619'; position: absolute; left: -40px; } .side-menu ul.level-2 { display: block; } .side-menu li a { display: inline; line-height: 1.125; } #mobile-donate { display: none; } body { padding-bottom: 0; } .no-breadcrumbs #content { margin-top: 95px; } .breadcrumbs { display: block; height: 40px; font-size: .875em; color: #efeeea; padding-left: 40px; padding-right: 40px; } .breadcrumbs a { line-height: 40px; font-size: 12px; color: #efeeea; text-transform: uppercase; } .breadcrumbs ul.inline { margin-left: -5px; margin-right: -5px; } .breadcrumbs ul.inline li { padding-right: 5px; padding-left: 5px; } .breadcrumbs li + li:before { content: '/'; display: inline-block; position: relative; margin-right: 10px; } footer .footer-left { text-align: left; width: 70%; float: left; } footer .footer-right { text-align: right; width: 30%; float: left; } footer .footer-legal { margin-top: 0; margin-bottom: 0; } footer .footer-legal ul li { line-height: 40px; } footer .social-icons { margin-bottom: 0; } footer .footer-copyright { margin-top: 0; margin-bottom: 0; width: 50%; } footer .footer-logos { width: 50%; } .footer-nav ul.level-2 { display: block; } .footer-nav .toggle { display: none; } .footer-nav .footer-nav-heading { padding-right: 0; } .footer-nav.footer-3-columns .footer-column { width: 33%; } .footer-nav.footer-4-columns .footer-column { width: 25%; } .footer-nav.footer-5-columns .footer-column { width: 20%; } #feature { min-height: 300px; height: 400px; height: 50vh; } .content.with-sidebar { float: left; width: calc(100% - 315px); margin-right: 40px; } .sidebar { float: left; margin-top: 0; width: 275px; } .widget { display: block; margin-bottom: 20px; } .video-title:hover { color: #333; } .index { padding: 40px; } .index .sidebar { padding-left: 0; padding-right: 0; } .index .filter-params { margin-top: 0; } .index-content { padding: 0; margin-bottom: 20px; } .index-rows .index-item:first-child { padding-top: 0; } .index-grid { padding: 0; } .icon-overlay { position: relative; } .icon-overlay:after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; height: 100%; background-color: #4a0059; opacity: 0; -webkit-transition: opacity .3s; transition: opacity .3s; } .icon-overlay:before { display: block; opacity: 0; font-size: 40px; color: #fff; position: absolute; left: 0; width: 100%; top: 50%; margin-top: -20px; text-align: center; z-index: 1; -webkit-transition: opacity .3s; transition: opacity .3s; } .icon-overlay:hover:after { opacity: .8; } .icon-overlay:hover:before { opacity: 1; } #content { margin-top: 135px; } .no-breadcrumbs #content { margin-top: 95px; } .horizontal-tout .tout-content { padding: 120px 80px; } .contained-9.horizontal-tout .tout-content, .contained-9 .horizontal-tout .tout-content { padding: 40px; } .contained-12.horizontal-tout .tout-content, .contained-12 .horizontal-tout .tout-content { padding: 60px; } } @media (min-width: 1080px) { /* small desktop */ nav #nav-main-items .level-1 > ul { padding-left: 10px; max-width: 200px; } } @media (min-width: 1260px) { /* desktop */ } @media only screen and (min-width: 960px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 960px) and (min-resolution: 192dpi) { nav #nav-logo { background-image: url("../img/oi-logo-sprite-2x.png"); } } @media (min-width: 1024px) { nav .nav-actions > ul > li, nav .nav-main > ul > li { padding-left: 10px; padding-right: 10px; } } /* OI v0.1.0 * Copyright (c) 2016 */ /*********************************************/ /**** Custom styling for Padiact overlays ****/ /*********************************************/ .padiOverlay{position:fixed;left:0px;top:0px;padding:0px;margin:0px;visibility:visible;overflow-x:hidden;overflow-y:auto;width:100%;height:100%;z-index:4}.padiFade{zoom:1;background-color:rgba(0, 0, 0, 0.8);width:100%;height:100%;z-index:4}.padiPop4Wrap{position:absolute;visibility:visible;z-index:4;padding:10px;left:50%;margin-left:-200px;top:5%;height:auto;width:auto;max-width:400px}.padiPop4Overlay{position:static;margin:0;z-index:4;overflow:auto}.padiPop4Overlay h1.padiTitle{font-size:1.5em;color:#7bc557}.padiPop4Overlay div.padiPopupContent{position:relative;background:#fff;margin-bottom:0}.padiPop4Overlay .padiContent{padding:40px}.padiPop4Overlay .padiContent p{font-size:.875em}.padiPop4Overlay .padiForm p{font-size:16px}.padiPop4Overlay .padiCriticalMessage{border:none !important;background:#efeeea;padding:10px;font-size:.875em}.padiPop4Overlay .padiFields{width:100%;display:block;vertical-align:top;padding:0}.padiPop4Overlay .padiThanks{display:block;vertical-align:top;padding:40px}.padiClearfix:after{content:" ";visibility:hidden;display:block;height:0;clear:both}.padiPop4Overlay .padiClose{margin:0;display:block;float:right;font-size:28px;line-height:40px;color:#8f8e8c;text-decoration:none !important;border:none;width:40px;height:40px;text-align:center}.padiPop4Overlay .padiClose:hover{color:#333}.padiPop4Overlay form{position:relative;margin:0;display:block}.padiPop4Overlay form .padiField{display:block;width:100%;vertical-align:middle}.padiPop4Overlay form .padiCheck{margin:0px 4px 2px 4px;vertical-align:bottom}.padiPop4Overlay p.padiErrorMessage{color:#ce1500}.padiPop4Overlay form .padiButton{display:inline-block;text-align:center;color:#fff;text-transform:uppercase;font-size:.75em;letter-spacing:1px;font-weight:bold;font-family:"proxima-nova", Arial, sans-serif;box-shadow:none;-webkit-transition:box-shadow 0.6s ease-out 0s;transition:box-shadow 0.6s ease-out 0s;line-height:1.5;cursor:pointer;padding:1.125em 1.6666666em;border:none;outline:none;background-color:#7bc557;box-shadow:inset 0 100px 0 0 #7bc557;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.padiPop4Overlay form .padiButton:hover{box-shadow:0 0 0 0 #6fbc49 inset}.padiPop4Overlay form .padiSLabel{font-size:12px;display:block;margin:5px 0}.padiPop4Overlay form label input[type="checkbox"]{position:relative;left:0}.padiPop4Overlay .privacy{font-size:.75em;font-style:italic;font-family:"Times New Roman", Times, serif;color:#8f8e8c;line-height:1.5;margin-top:0}.padiPreload{display:inline-block;position:absolute;bottom:0;right:inherit;padding:3px} /* OI-HelloBar v0.0.1 */ .hello-bar{display:none;position:fixed;top:0;left:0;width:100%;height:0;z-index:3;color:#fff;text-align:center}.hello-bar + nav.fixed{top:0}.hello-bar p{display:inline-block;margin:1em 0 1em}.hello-bar a{color:#fff}.hello-bar .btn{display:inline-block;margin:1em}.hello-bar .closer{position:absolute;top:1rem;right:0;width:2em;height:2em}.hello-bar.active{display:block;height:4rem;-webkit-transition:height 500ms ease;-moz-transition:height 500ms ease;-ms-transition:height 500ms ease;-o-transition:height 500ms ease;transition:height 500ms ease}.hello-bar.active + nav.fixed{top:4rem;-webkit-transition:top 500ms ease;-moz-transition:top 500ms ease;-ms-transition:top 500ms ease;-o-transition:top 500ms ease;transition:top 500ms ease} /*------------------------------------------------------------------------------ > Override styles - added by Qodo as I don't have the Sass files ------------------------------------------------------------------------------*/ .nav-container .nav-actions .social-icons{ display: inline-block; margin-right: 10px; vertical-align: top; } .nav-container .nav-actions .social-icons .social-icon { background: none; height: 20px; line-height: 20px; width: 20px; } /* Cookie Dialog */ #gdpr-cookie-message { background: rgba(44,11,60,0.9); position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999; } #gdpr-cookie-inner { background: #fff; border-top: 5px solid #ed027e; box-shadow: 0 6px 6px rgba(0,0,0,0.25); line-height: 1.1; max-width: 375px; padding: 20px; position: fixed; left: 50%; top: 50%; z-index: 9999; transform: translate3d(-50%, -50%, 0); } #gdpr-cookie-message h4 { color: #ed027e; font-size: 1.25em; letter-spacing: 0; margin-bottom: 25px; } #gdpr-cookie-message h5 { letter-spacing: 0; margin-bottom: 10px; } #gdpr-cookie-message p, #gdpr-cookie-message ul { line-height: 1.3; list-style: none; margin: 0; padding: 0; } #gdpr-cookie-message ul li { list-style: none; margin: 0; padding: 0; } #gdpr-cookie-message ul li:before { display: none; } #gdpr-cookie-message p:last-child { margin: 25px 0 0; display: flex; justify-content: space-between; } #gdpr-cookie-message li { width: 49%; display: inline-block; } #gdpr-cookie-message a { color: #ed027e; } #gdpr-cookie-message a:hover { } #gdpr-cookie-types { margin: 25px 0; } #gdpr-buttons { display: flex; justify-content: space-between; } #gdpr-buttons button { flex-basis: calc(50% - 12.5px); } #gdpr-cookie-accept, #gdpr-cookie-advanced { } #gdpr-cookie-accept { background: #ed027e; margin-right: auto; } /* $dark: #222; $pink: #ed077d; $purple: #2d0b3c; $teal: #36b1b1; $orange: #f15b22; */ #feature { min-height: 640px; position: relative; display: flex; justify-content: flex-end; flex-direction: column; } #feature::before { content: ""; background: #f15b22; position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0.15; } #feature .heading { background: #f15b22d6; position: relative; z-index: 1; } #feature .heading h1, #feature .heading p { color: #fff; margin-left: auto; margin-right: auto; max-width: 1024px; text-shadow: 0 1px 5px rgba(0,0,0,0.4); } #feature .heading p { line-height: 1.5; } #feature-sub-pages { background: rgba(0,0,0,0.7); box-shadow: 0 5px 15px rgba(0,0,0,0.35) inset; border-top: 1px solid #fff; position: relative; } #feature-sub-pages.scrolling { overflow: hidden; padding-left: 3em; padding-right: 3em; } #feature-sub-pages.scrolling ul { justify-content: start; overflow-x: scroll; -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ width: 100%; } #feature-sub-pages.scrolling ul::-webkit-scrollbar { display: none; /* Safari and Chrome */ } #feature-sub-pages button { border: 0; background: transparent; color: #fff; display: none; position: absolute; z-index: 1; top: 0; bottom: 0; padding: 0 1em; } #feature-sub-pages button svg { fill: #fff; } #feature-sub-pages.scrolling button { display: block; } #feature-sub-pages #btn-nav-previous { background: linear-gradient(to right, black 50%, rgba(0,0,0,0)); left: 0; } #feature-sub-pages #btn-nav-next { background: linear-gradient(to left, black 50%, rgba(0,0,0,0)); right: 0; } #feature-sub-pages ul { display: flex; justify-content: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .js #feature-sub-pages ul { flex-wrap: nowrap; margin: 0 auto; max-width: 1260px; } .js #feature-sub-pages ul li { white-space: nowrap; } #feature-sub-pages ul li { list-style: none; margin: 0; padding: 0; } #feature-sub-pages ul li:before { display: none; } #feature-sub-pages ul li a { color: #ccc; display: block; font-size: 14px; padding: 1em; position: relative; transition: all 0.2s ease; } #feature-sub-pages ul li a:hover { color: #fff; } #feature-sub-pages ul li.active a { color: #fff; font-weight: bold; } #feature-sub-pages ul li.active a:before { content: ""; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #fff; position: absolute; top: 0; left: 50%; margin-left: -8px; } @media screen and (min-width:768px) { #feature { min-height: 720px; } #feature .heading p { font-size: 1.2em; } } @media screen and (min-height: 960px) { #feature { min-height: 840px; } } #meet-the-client-content { padding: 100px 0; position: relative; } #meet-the-client-content .path { background: url(/assets/img/meet-clients/path-1.png) center / contain no-repeat; pointer-events: none; position: absolute; top: 175px; left: 0; right: 0; bottom: -125px; transition: transform 10s cubic-bezier(0,1,.5,1); z-index: 1; display: none; } #meet-the-client-content h2 { color: #f15b22; text-align: center; margin: 0 0 100px; font-size: 48px; } .meet-the-client-slide { margin-bottom: 50px; padding: 0 25px; position: relative; } .meet-the-client-slide > div { box-shadow: 0 0 40px rgba(0,0,0,0.22); flex: 0 0 50%; transition: transform 10s cubic-bezier(0,1,.5,1); } .meet-the-client-slide > div.content { background: #fff; padding: 25px; z-index: 2; } .meet-the-client-slide > div.content p { font-size: 1em; line-height: 1.3; } .meet-the-client-slide > div.content blockquote, .meet-the-client-slide > div.content blockquote p { color: #f15b22; border: 0; font-family: "proxima-nova", Arial, sans-serif; font-style: normal; padding: 0; } .meet-the-client-slide > div.content blockquote:before { color: #f15b22; display: block; position: relative; margin: -25px 0 0; } .meet-the-client-slide > div.content a, .meet-the-client-slide > div.content strong, .meet-the-client-slide > div.content b { color: #f15b22; } .meet-the-client-slide:nth-child(even) { flex-direction: row-reverse; } .meet-the-client-slide:nth-child(even) > div.content { margin-left: 0; } .meet-the-client-slide > div.image img { height: auto; vertical-align: bottom; width: 100%; } #meet-the-client-video { background-color: #FDE7DE; background: url(/assets/img/meet-clients/video-bg-top.png?2021) center top / contain no-repeat, url(/assets/img/meet-clients/video-bg-bot.png?2021) center bottom / contain no-repeat #FDE7DE; padding: 150px 0; text-align: center; } #meet-the-client-video.silver { background-color: #eee; background: url(/assets/img/meet-clients/video-bg-top-silver.png?2021) center top / contain no-repeat, url(/assets/img/meet-clients/video-bg-bot-silver.png?2021) center bottom / contain no-repeat #eee; } #meet-the-client-video .content-container { padding: 0 25px; /* check later? */ } #meet-the-client-video .flex-video { border: 3px solid #fff; box-shadow: 0 0 55px rgba(0,0,0,0.2); } #meet-the-client-video a { color: #f15b22; } #meet-the-clients-more-stories { position: relative; z-index: 1; } @media screen and (min-width:768px) { #meet-the-client-content .path { display: block; } .meet-the-client-slide { display: flex; flex-wrap: nowrap; align-items: center; } .meet-the-client-slide > div.content { padding: 40px; margin-left: -40px; flex-basis: calc(50% + 40px); } #meet-the-client-video .content-container { padding: 0 50px; } } @media screen and (min-width: 1024px) { .meet-the-client-slide > div.content { padding: 50px; } .meet-the-client-slide > div.content p { font-size: 1.25em; } } @media screen and (min-width: 1280px) { .meet-the-client-slide { display: flex; flex-wrap: nowrap; align-items: center; padding: 0 100px; } #meet-the-client-video .content-container { padding: 0 100px; } } /*------------------------------------------------------------------------------ > NEW ------------------------------------------------------------------------------*/ .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); } @media screen and (min-width: 1024px) { .body-copy.larger-text > h2, .template-88 .body-copy h2 { font-size: 2em; } .body-copy.larger-text .content-boxes, .body-copy.larger-text > p, .template-88 .body-copy > p, .body-copy.larger-text > table, .template-88 .body-copy table, .body-copy.larger-text > ol, .template-88 .body-copy ol, .body-copy.larger-text > ul, .template-88 .body-copy ul { font-size: 1.2em; } .body-copy.larger-text .larger, .template-88 .body-copy .larger { font-size: 1.4em; } .separator-bottom { margin-bottom: 50px; } } /*------------------------------------------------------------------------------ > Introduction Content with background image and boxes ------------------------------------------------------------------------------*/ .introduction-content-with-boxes .introduction-content { position: relative; } .introduction-content-with-boxes .introduction-content .body-copy { padding-bottom: 100px; } .introduction-content-with-boxes:before, .introduction-image { position: absolute; background-size: contain; left: 0; right: 0; top: 0; bottom: 0; opacity: 0.15; } .introduction-content-with-boxes:before { content: ""; background: linear-gradient(to bottom, #fff, rgba(255,255,255,0) 65%); opacity: 1; z-index: 1; } .introduction-content-with-boxes .body-copy { position: relative; z-index: 2; } .introduction-content-boxes { /* margin-bottom: 50px !important; */ margin-top: -200px !important; } @media screen and (min-width: 768px) { .introduction-content-with-boxes .introduction-content .body-copy { padding-bottom: 200px; } .introduction-content-boxes { margin-top: -300px !important; } } /*------------------------------------------------------------------------------ > Content boxes ------------------------------------------------------------------------------*/ .content-boxes { list-style: none; margin: 80px auto; padding: 0; max-width: none !important; } .content-boxes.narrow { max-width: 1080px !important; } .content-boxes.center { justify-content: center; } .content-boxes li { background: #fff; padding: 0; box-shadow: 0 5px 50px rgba(0, 0, 0, 0.15); position: relative; transform: rotate(0.02deg); transition: 0.25s ease all; margin: 0 0 25px !important; } .content-boxes li:not(.no-link):after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f15b22' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); color: #f15b22; position: absolute; right: 30px; bottom: 40px; font-size: 3em; transform: scale(2); } .content-boxes li a { display: block; height: 100%; overflow: hidden; } .content-boxes li img { vertical-align: middle; width: 100%; } .content-boxes li h3 { color: #f15b22; } .content-boxes li div { padding: 25px; } .content-boxes li div p { color: #595959; line-height: 1.4; } .content-boxes li:not(.no-link):hover { transform: rotate(0deg) scale(1.025); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25); } .content-boxes li::before { display: none !important; } .content-boxes:not(.content-boxes-rows).large-spacing li { margin: 0 0 50px !important; flex: 0 0 calc(50% - 25px); } .content-boxes-rows li { display: flex; flex-direction: column; align-items: center; text-align: left; } .content-boxes-rows.large-spacing li:not(:last-child) { margin-bottom: 50px !important; } .content-boxes-rows li div { padding: 30px; } .content-boxes-rows li .image { align-self: stretch; height: 220px; width: 100%; flex: 0 0 auto } .content-boxes + p { margin-top: -80px; } /* TABLET */ @media screen and (min-width: 768px) { .content-boxes { display: flex; flex-wrap: wrap; justify-content: space-between; } .content-boxes:not(.content-boxes-rows) li { flex: 0 0 calc(50% - 12.5px); } .content-boxes.three-column li { flex: 0 0 calc(33% - 25px); } .content-boxes-rows li { flex-direction: row; } .content-boxes-rows li .image { height: auto; max-width: 300px; } } /* DESKTOP */ @media screen and (min-width: 1024px) { .content-boxes:not(.content-boxes-rows) li { margin: 0 0 50px !important; flex: 0 0 calc(50% - 25px); } .content-boxes.three-column:not(.content-boxes-rows) li { margin: 0 0 50px !important; flex: 0 0 calc(33% - 25px); } .content-boxes.four-column:not(.content-boxes-rows) li { margin: 0 0 50px !important; flex: 0 0 calc(25% - 25px); } .content-boxes li div { padding: 35px; } .content-boxes-rows li div { padding: 60px; } .content-boxes:not(.content-boxes-rows).large-spacing li { margin: 0 0 75px !important; flex: 0 0 calc(50% - 37.5px); } .content-boxes-rows.large-spacing li:not(:last-child) { margin-bottom: 75px !important; } .content-boxes-rows li .image { max-width: 360px; min-height: 260px; } } .prevnext-content-boxes { max-width: none !important; padding: 25px; } .prevnext-content-boxes li a { height: 100%; align-items: stretch; justify-content: space-between; flex-direction: column; display: flex; text-align: left; } .prevnext-content-boxes li a div.content { min-height: 12em; } .prevnext-content-boxes li a div.image { margin: 0 !important; padding: 0 !important; min-height: 150px; min-width: 150px; width: 100%; flex: 0 1; } .prevnext-content-boxes li.next:after, .prevnext-content-boxes li.prev:after { bottom: 20px; font-size: 2em; } .prevnext-content-boxes li.next:after { right: 20px; transform: scale(2); } .prevnext-content-boxes li.next div { margin-right: 3em; } .prevnext-content-boxes li.prev:after { left: 20px; right: auto; transform: scale(2) rotate(180deg) translateY(0.15em); } .prevnext-content-boxes li.prev div { margin-left: 3em; } .prevnext-content-boxes li a > div { flex: 1 0; } @media screen and (max-width: 1023px) { .prevnext-content-boxes li.next a div.image { order: -1; } } @media screen and (min-width: 1024px) { .prevnext-content-boxes { padding: 0; } .prevnext-content-boxes li a { flex-direction: row; } .prevnext-content-boxes li.next:after, .prevnext-content-boxes li.prev:after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f15b22' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); bottom: auto; } .prevnext-content-boxes li.next:after, .prevnext-content-boxes li.prev:after { top: 50%; } .prevnext-content-boxes li.prev:after { left: 180px; transform: scale(3) rotate(180deg) translateY(0.15em); } .prevnext-content-boxes li.next:after { transform: scale(3) translateY(-0.15em); right: 180px; } } @media screen and (min-width: 1280px) { .prevnext-content-boxes li a div.image { min-width: 250px; } .prevnext-content-boxes li.prev:after { left: 280px; } .prevnext-content-boxes li.next:after { right: 280px; } } .padding-6x-2x .content-boxes + p, .padding-6x-4x .content-boxes + p { margin-top: -50px; } a.more:after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f15b22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); display: inline-block; width: 1em; height: 1em; vertical-align: text-top; } /*------------------------------------------------------------------------------ > Horizonta tout tiles 2021 ------------------------------------------------------------------------------*/ /* .horizontal-tout-tiles { position: relative; overflow: hidden; z-index: 2; } */ .horizontal-tout-tile { position: relative; overflow: hidden; } .horizontal-tout-tile::before { content: ""; background: linear-gradient(to bottom, #fff, rgba(255,255,255,0) 65%); position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; } .horizontal-tout-tile-bg { background-size: cover; position: absolute; left: -25px; right: -25px; top: -25px; bottom: -25px; opacity: 0.1; filter: blur(25px); will-change: opacity; transform: translate3d(0,0,0); transition: all 1.35s ease; } .scroll-trigger.on .horizontal-tout-tile-bg { opacity: 0.5; } .horizontal-tout-tile a { background: #fff; color: #333; display: flex; align-items: stretch; box-shadow: 0 4px 80px rgba(0,0,0,0.2); transform: rotate(0.02deg); transition: 0.25s ease all; position: relative; z-index: 2; flex-direction: column; } .horizontal-tout-tile a:hover { transform: rotate(0.0deg) scale(1.025); box-shadow: 0 8px 40px rgba(0,0,0,0.25); } .horizontal-tout-tile a::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f15b22' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); color: #f15b22; position: absolute; right: 30px; bottom: 40px; font-size: 3em; transform: scale(2); } .horizontal-tout-tile.brand-teal a::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2336b1b1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); color: #36b1b1; k} .horizontal-tout-tile .content { padding: 40px 30px; } .horizontal-tout-tile .image { background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; padding-bottom: 50%; width: 100%; } @media (min-width: 768px) { .horizontal-tout-tile p { font-size: 1.2em; line-height: 1.5; } .horizontal-tout-tile a { flex-direction: row; } .horizontal-tout-tile a > * { flex: 1 0 50%; } .horizontal-tout-tile:nth-child(even) a { flex-direction: row-reverse; } .horizontal-tout-tile:nth-child(even) a::after { right: calc(50% + 30px); } .horizontal-tout-tile .content { padding: 60px; display: flex; flex-direction: column; justify-content: center; } .horizontal-tout-tile .image { } }