/*------->>> TABLE OF CONTENTS <<<------- 1. CUSTOM FONTS 2. RESET STYLES 3. BASIC STYLES 4. GLOBAL STYLES 5. HEADER 6. HERO 7. PRECALLOUTS [Top Callout Bar on Index] 8. CONTENT AREA 9. SIDEBAR [Currently NO STYLES] 10. MEDIA [Top Panel of Video & Images on Index] 11. IDEA GALLERY [Hang Tag Idea Gallery on Index] 12. CALLOUTS [Callouts on Index] 13. PANEL [Testimonials & Newsletter Footer, All Pages] 14. PREFOOTER [Phone, Fax, Social] 15. FOOTER [Address & Copyright] 16. SERVICES CALLOUTS [Callouts on the Custom Tag Services Page] 17. LUGGAGE TAGS INFOGRAPHIC (luggage-label-tabs.html) 18. BARCODE INFOGRAPHIC (consecutive-numbering-barcode.html) 19. IDEA GALLERY CALLOUTS 20. CARDS [equipment-rental-tags.html] 21. FORM ELEMENT STYLES 22. RESPONSIVE IFRAMES [Maps, Videos, etc.] 23. NEWS 24. LIGHTBOX OVERRIDES 25. RESPONSIVE TABLE 26. FOUNDATION OVERRIDE STYLES 27. BX SLIDER OVERRIDE STYLES [Testimonials Slider in Panel Section] 28. FAQ 29. CTAs 30. MEDIA QUERIES 31. PRINT STYLES 32. TRADE PRINTERS LANDING PAGE trade.html Updated 3/3/20 33. MIMIC Flexbox middle align /*------->>> COLOR PALETTE <<<------- #f57251 - Orange [button color, precallout bg color] - Primary Color #85cfd4 - Light Blue [button color, callouts bg] - Secondary Color #66412f - Brown [headers Color] - Tertiary Color #f2eee9 - Tan [subNav bg, panel right bg] - Support Color #3b5d5f - Dark Teal [callouts title color] - Support Two Color #f7dfd9 - Light Orange [Precallouts Hover, Anchor Links Hover BG] - Support Three Color #5a311e - Dark Brown [main navigation] #655d5a - Light Brown [body copy] #c8bbaa - Light Brown [hotlinks color] #ebe7e2 - Light Brown [borders, index] #718485 - Gray [Callouts Content Color] #2b7791 - Dark Blue [UL/OL bullet points & numbers] #bd533b - Darkest Orange [phone bar bg in footer] #d95f43 - Dark Orange [main menu hover link color, footer bg] /*------->>> FONT STACKS & TYPOGRAPHY <<<------- Font-Family: Rubik, sans-serif [Headlines, 300,400,500,700 & 900] Font Family: PT Sans, sans-serif [Body Copy, 400 & 700] Font Family: Karma, serif [Decorative/Misc, Regular 400 ] Font Family: FontAwesome [Icon Font] SAMPLE CSS USAGE: fortawesome.github.io/Font-Awesome/cheatsheet/ .myDiv { font-family:"FontAwesome"; content:"\f111"; } SAMPLE HTML USAGE: fortawesome.github.io/Font-Awesome/examples/ Body copy: 0.875rem/1.4rem PT Sans, sans-serif; *Note: Body copy increased to 1rem/1.6rem at 768 resolution Headers: 2rem/1rem Rubik, sans-serif; *Note: Heading Increased to 2.375rem at 768 resolution */ /*------->>> 1. CUSTOM FONTS <<<-------*/ /* https://fonts.googleapis.com/css?family=Rubik:500,700,500italic,700italic */ @font-face { font-family:'Rubik'; font-weight:300; font-style:normal; src: url('../fonts/rubik/rubik-300.eot'); src: url('../fonts/rubik/rubik-300.eot?#iefix') format('embedded-opentype'), url('../fonts/rubik/rubik-300.woff2') format('woff2'), url('../fonts/rubik/rubik-300.woff') format('woff'), url('../fonts/rubik/rubik-300.ttf') format('truetype'), url('../fonts/rubik/rubik-300.svg#Rubik') format('svg'); } @font-face { font-family:'Rubik'; font-weight:400; font-style:normal; src: url('../fonts/rubik/rubik-regular.eot'); src: url('../fonts/rubik/rubik-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/rubik/rubik-regular.woff2') format('woff2'), url('../fonts/rubik/rubik-regular.woff') format('woff'), url('../fonts/rubik/rubik-regular.ttf') format('truetype'), url('../fonts/rubik/rubik-regular.svg#Rubik') format('svg'); } @font-face { font-family:'Rubik'; font-weight:500; font-style:normal; src: url('../fonts/rubik/rubik-500.eot'); src: url('../fonts/rubik/rubik-500.eot?#iefix') format('embedded-opentype'), url('../fonts/rubik/rubik-500.woff2') format('woff2'), url('../fonts/rubik/rubik-500.woff') format('woff'), url('../fonts/rubik/rubik-500.ttf') format('truetype'), url('../fonts/rubik/rubik-500.svg#Rubik') format('svg'); } @font-face { font-family:'Rubik'; font-weight:700; font-style:normal; src: url('../fonts/rubik/rubik-700.eot'); src: url('../fonts/rubik/rubik-700.eot?#iefix') format('embedded-opentype'), url('../fonts/rubik/rubik-700.woff2') format('woff2'), url('../fonts/rubik/rubik-700.woff') format('woff'), url('../fonts/rubik/rubik-700.ttf') format('truetype'), url('../fonts/rubik/rubik-700.svg#Rubik') format('svg'); } @font-face { font-family:'Rubik'; font-weight:900; font-style:normal; src: url('../fonts/rubik/rubik-900.eot'); src: url('../fonts/rubik/rubik-900.eot?#iefix') format('embedded-opentype'), url('../fonts/rubik/rubik-900.woff2') format('woff2'), url('../fonts/rubik/rubik-900.woff') format('woff'), url('../fonts/rubik/rubik-900.ttf') format('truetype'), url('../fonts/rubik/rubik-900.svg#Rubik') format('svg'); } @font-face { font-family:'PT Sans'; font-weight:400; font-style:normal; src: url('../fonts/pt-sans/PT-Sans-regular.eot'); src: url('../fonts/pt-sans/PT-Sans-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/pt-sans/PT-Sans-regular.woff2') format('woff2'), url('../fonts/pt-sans/PT-Sans-regular.woff') format('woff'), url('../fonts/pt-sans/PT-Sans-regular.ttf') format('truetype'), url('../fonts/pt-sans/PT-Sans-regular.svg#PT Sans') format('svg'); } @font-face { font-family:'PT Sans'; font-weight:400; font-style:italic; src: url('../fonts/pt-sans/PT-Sans-italic.eot'); src: url('../fonts/pt-sans/PT-Sans-italic.eot?#iefix') format('embedded-opentype'), url('../fonts/pt-sans/PT-Sans-italic.woff2') format('woff2'), url('../fonts/pt-sans/PT-Sans-italic.woff') format('woff'), url('../fonts/pt-sans/PT-Sans-italic.ttf') format('truetype'), url('../fonts/pt-sans/PT-Sans-italic.svg#PT Sans Narrow') format('svg'); } @font-face { font-family:'PT Sans'; font-weight:700; font-style:normal; src: url('../fonts/pt-sans/PT-Sans-700.eot'); src: url('../fonts/pt-sans/PT-Sans-700.eot?#iefix') format('embedded-opentype'), url('../fonts/pt-sans/PT-Sans-700.woff2') format('woff2'), url('../fonts/pt-sans/PT-Sans-700.woff') format('woff'), url('../fonts/pt-sans/PT-Sans-700.ttf') format('truetype'), url('../fonts/pt-sans/PT-Sans-700.svg#PT Sans') format('svg'); } @font-face { font-family:'PT Sans'; font-weight:700; font-style:italic; src: url('../fonts/pt-sans/PT-Sans-700italic.eot'); src: url('../fonts/pt-sans/PT-Sans-700italic.eot?#iefix') format('embedded-opentype'), url('../fonts/pt-sans/PT-Sans-700italic.woff2') format('woff2'), url('../fonts/pt-sans/PT-Sans-700italic.woff') format('woff'), url('../fonts/pt-sans/PT-Sans-700italic.ttf') format('truetype'), url('../fonts/pt-sans/PT-Sans-700italic.svg#PT Sans Narrow') format('svg'); } @font-face { font-family:'Karma'; font-weight:400; font-style:normal; src: url('../fonts/karma/Karma-regular.eot'); src: url('../fonts/karma/Karma-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/karma/Karma-regular.woff2') format('woff2'), url('../fonts/karma/Karma-regular.woff') format('woff'), url('../fonts/karma/Karma-regular.ttf') format('truetype'), url('../fonts/karma/Karma-regular.svg#Karma') format('svg'); } /*------->>> 2. RESET STYLES <<<-------*/ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; } /*- HTML5 display-role reset for older browsers -*/ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } body { line-height:1; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } table { border-collapse:collapse; border-spacing:0; } /*------->>> 3. BASIC STYLES <<<-------*/ html { font-size:16px; /*- 1rem=16px -*/ scroll-behavior: smooth; /* Smooth Scrolling for any Anchor Links */ } html, html a { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } body, html { height:auto; min-height:100%; background-color:#fff; font-family:'PT Sans', sans-serif; font-weight:400; color:#655d5a; } a, a:link, a:active, a:visited { color:#d95f43; text-decoration:none; transition:all 200ms ease-in-out; -webkit-transition:all 200ms ease-in-out; } a:hover { color:#66412F; } strong { font-weight:bold; } em { font-style:italic; } i { font-style:normal; } small { font-size:80%; } h1, h2, h3, h4, h5, h6 { margin:2rem 0 0 0; font-family:'Rubik', sans-serif; color:#66412f; line-height:1; font-weight:500; } h1 { font-size:2rem; } h2 { font-size:1.5rem; } h3 { font-size:1.25rem; line-height:2rem; } h4 { font-size:0.938rem; } h5 { font-size:.813rem; } h6 { } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{ color:inherit; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover{ } p, li, td { font-size:0.875rem; line-height:1.4em; } p { margin:1em 0; } p:last-of-type { margin-bottom:2em; } h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, h1 + ul, h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul, h1 + ol, h2 + ol, h3 + ol, h4 + ol, h5 + ol , h6 + ol { margin-top:0.5rem; } hr { border:0; height:1px; background:rgba(0,0,0, 0.20); margin:1.25rem 0; } blockquote{ display:block; padding:0.938rem 1.25rem 0.938rem 2.813rem; margin:1.25rem 0; position:relative; border-left:0.625rem solid #655D5A; border-right:0.125rem solid #655D5A; -moz-box-shadow:2px 2px 15px #ccc; -webkit-box-shadow:2px 2px 15px #ccc; box-shadow:2px 2px 15px #ccc; } blockquote::before{ content:"\201C"; font-size:4.375rem; font-weight:bold; color:#655d5a; position:absolute; left:10px; top:12px; } blockquote::after{ /*---> Reset <---*/ content: ""; } blockquote p { display:inline; } blockquote cite { display:block; position:relative; margin-top:0.313rem; text-align:right; font-weight:700; } sup, sub { vertical-align:baseline; position:relative; top:-0.4em; } sub { top:0.4em; } ::-moz-selection { background:#85cfd4; color:#fff; } ::selection { background:#85cfd4; color:#fff; } /*------->>> 4. GLOBAL STYLES <<<-------*/ .font-primary { font-family:"PT Sans", sans-serif; } .font-secondary { font-family:"Rubik", sans-serif; } .text-left { text-align:left; } .text-center, .text-left-center /*Left on Desktop, Center on Mobile*/, .text-right-center /*Right on Desktop, Center on Mobile*/ { text-align:center; } .text-right { text-align:right; } .uppercase { text-transform:uppercase; } .lowercase { text-transform:lowercase; } .titlecase { text-transform: capitalize; } .underline { text-decoration: underline; } .float-left { float:left; } .float-center { margin:0 auto; } .float-right { float:right; } .block { display:block; } .inline { display:inline; } .inline-block { display:inline-block; } .valign-middle { position:relative; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); } .position-relative { position:relative; } .btn { /*- Base Button Styling -*/ display:inline-block; position:relative; top:0; padding:9px 20px; font-family:"Rubik", sans-serif; font-size:0.875rem; font-weight:700; text-align:center; text-decoration:none; text-transform:uppercase; letter-spacing:0.125rem; color:#fff; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; box-shadow:0px 1px 1px 0px rgba(0, 0, 0, 0.2); transition:all 200ms ease-in-out; -webkit-transition:all 200ms ease-in-out; border:0 !important; text-shadow:0px 0px 1px rgba(0,0,0,0.3); line-height:1; } body#index .btn { line-height:1.7; } a.btn { color:#fff; } .btn:hover { color:#fff; top:2px; box-shadow:0px 1px 1px 0px rgba(0, 0, 0, 0.2); text-shadow:0px 0px 1px rgba(0,0,0,0.3); } .btn.orange { background:#f57251; } .btn.orange:hover { background:#85cfd4; } .btn.blue { background:#85cfd4; } .btn.blue:hover { background:#f57251; } .clearfix { zoom:1; /*- ie 6/7 -*/ } .clearfix:before, .clearfix:after { display:table; content:""; } .clearfix:after { clear:both; } .underline { text-decoration:underline; } .uppercase { text-transform:uppercase; } .colorOrange { color:#f57251; } .colorOrangeDark { color:#db5e3d; } .colorBlue { color:#85cfd4; } .color-primary { color:#f57251; } .background-primary { background:#f57251; } .color-secondary { color:#85cfd4; } .background-secondary { background:#85cfd4; } .color-tertiary { color:#66412f; } .background-tertiary { background:#66412f; } .color-support { color:#f2eee9; } .background-support { background:#f2eee9; } .color-support2 { color:#3b5d5f; } .background-support2 { background:#3b5d5f; } .color-support3 { color:#f7dfd9; } .background-support3 { background:#f7dfd9; } .width20 { width:20%; } .width25 { width:25%; } .width33 { width:33%; } .width40 { width:40%; } .width50 { width:50%; } .width66 { width:66%; } .width75 { width:75%; } .width100 { width:100%; } .flex-container { position:relative; height:0; overflow:hidden; padding-bottom:56.25%; } .flex-container-styled { box-shadow: 0px 1px 7px 0px rgba(178, 177, 178, 0.61) } .flex-container iframe, .flex-container object, .flex-container embed, .flex-container img { position:absolute; top:0; left:0; width:100%; height:100%; } .flex-container img { margin:0 !important; } .pulse { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-iteration-count:infinite; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } /*------->>> 5. HEADER STYLES <<<--------*/ header { padding-bottom:0; background:#fff; z-index:5000; } .alert, .alert a { background-color: #f57251; text-align: center; color: #ffffff; } .alert p, .alert p:last-of-type { margin: 0; padding: 6px 0; font-size: 1.3rem; } .branding { padding:15px 0; } .branding img { display:inline-block; position: relative; } .branding a { display:block; } /*--> Hotlinks only shown on 642 and bigger <--*/ .hotlinks { font-family:"Rubik", sans-serif; padding-top:7px; } .hotlinks ul { padding:0; margin:0; } .hotlinks li { display:inline-block; padding-right:7px; } .hotlinks li:last-child { /*padding-right:0px;*/ } .hotlinks li a { color:#c8bbaa; text-transform:uppercase; font-size:0.75rem; font-weight:500; } .hotlinks li a:hover { color:#85Cfd4; } .hotlinks li.phone a, .hotlinks li.phone a:hover { font-family:"PT Sans", sans-serif; color:#d95f43; font-size:0.75rem; cursor:default; font-weight:700; } .search { padding-top: 30px; z-index: 999999; } .activator{ cursor: pointer; } .search i{ position: relative; } .search i.activator{ position: relative; border: 1px solid #f57251; background: #f57251; padding: 5px; border-radius: 3px; color: #FFF; } .search i.activator:hover{ border: 1px solid #f57251; background: #FFF; padding: 5px; border-radius: 3px; color: #f57251; } .search-container { position: fixed; display: flex; top: 0; left: 0; height: 100px; width: 100%; background: #FFF; z-index: 99999; max-height: 0; overflow: hidden; justify-content: space-around; align-items: center; transition: max-height 0.3s ease-in-out; } .active .search-container { max-height: 2000px; padding: 1em; transition: max-height 0.5s ease-in-out; } .search-container img{ display: none; } .search form { margin: 0; padding: 0; display: inline-flex; background: #FFF; justify-content: center; align-items: baseline; margin-left: 0; flex: 1 0 auto; max-width: 100%; } .search label { position: relative; top: auto; font-size: 1.5em; left: 0; color: #555; font-family: 'Rubik', sans-serif; transition: color 0.3s ease-in-out; } .search input[type="text"] { width: 40%; -webkit-appearance: none; border: 0; border-bottom: 2px solid #555; font-size: 2em; color: #555; padding-left: 0.5em; } .search input[type="text"]:focus{ outline: none; } .search button { width: 10%; -webkit-appearance: none; background: transparent; border: none; color: #555; } .search button i { font-size: 2em; vertical-align: bottom; } .search input:focus + label, .search input:focus ~ button{ color: #f57251; } .search .close{ position: absolute; top: 10px; right: 20px; } .search .close i{ color: #555; } .search .close i:hover{ color: #f57251; } /*------>>> added by slb for testimonials <<<-------*/ p.authornew { font-family: "Rubik", sans-serif; color: #010101; font-weight: 500; font-size: 90%; } /*------>>> 6. HERO STYLES <<<-------*/ .hero { position:relative; } #index .hero:after { /*- Pattern Background on Bottom -*/ content:""; display:block; height:12px; width:100%; background:-webkit-linear-gradient(35deg, #f57251 30%, transparent 30%) 0 100%,-webkit-linear-gradient(-35deg, #f57251 30%, transparent 30%) 0 100%; /* For Safari 5.1 to 6.0 */ background:-o-linear-gradient(35deg, #f57251 30%, transparent 30%) 0 100%,-o-linear-gradient(-35deg, #f57251 30%, transparent 30%) 0 100%; /* For Opera 11.1 to 12.0 */ background:-moz-linear-gradient(35deg, #f57251 30%, transparent 30%) 0 100%,-moz-linear-gradient(-35deg, #f57251 30%, transparent 30%) 0 100%; /* For Firefox 3.6 to 15 */ background:linear-gradient(35deg, #f57251 30%, transparent 30%) 0 100%, linear-gradient(-35deg, #f57251 30%, transparent 30%) 0 100%; background-size:12px 12px, 12px 12px; background-repeat:repeat-x; position:absolute; left:0; right:0; bottom:0; z-index:2000; } #interior .hero:after { /*- Pattern Background on Bottom -*/ content:""; display:block; height:12px; width:100%; background:-webkit-linear-gradient(35deg, #fff 30%, transparent 30%) 0 100%,-webkit-linear-gradient(-35deg, #fff 30%, transparent 30%) 0 100%; /* For Safari 5.1 to 6.0 */ background:-o-linear-gradient(35deg, #fff 30%, transparent 30%) 0 100%,-o-linear-gradient(-35deg, #fff 30%, transparent 30%) 0 100%; /* For Opera 11.1 to 12.0 */ background:-moz-linear-gradient(35deg, #fff 30%, transparent 30%) 0 100%,-moz-linear-gradient(-35deg, #fff 30%, transparent 30%) 0 100%; /* For Firefox 3.6 to 15 */ background:linear-gradient(35deg, #fff 30%, transparent 30%) 0 100%, linear-gradient(-35deg, #fff 30%, transparent 30%) 0 100%; background-size:12px 12px, 12px 12px; background-repeat:repeat-x; position:absolute; left:0; right:0; bottom:0; z-index:100; } #interior .hero { /* height:35px; overflow:hidden;*/ } .hero img, .hero img.small { display:block; width:100%; max-width:100%; height:auto; } .hero img.medium { display:none; } .hero h2 { text-transform:none; font-size:2.7rem; font-weight:700; margin:0; } .hero h3 { font-size:2rem; font-family:"Karma", sans-serif; text-transform:none; margin-top:.313rem; } .hero p { } .hero span { display:block; margin-bottom:0.313rem; } .hero .messaging { position:absolute; top:25px; left:25px; } /*------->>> 7. PRECALLOUTS STYLES [Top Callout Bar on Index] <<<-------*/ .precallouts { background:#f57251; color:#fff; } .precallouts h5 { background:url(../images/css/h5-bg-left.png) bottom left no-repeat, url(../images/css/h5-bg-right.png) bottom right no-repeat,url(../images/css/h5-bg-center.png) bottom center no-repeat; font-family:"PT Sans", sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:0.250rem; text-align:center; color:#fff; max-width:425px; margin:0 auto; padding:10px 0 7px 0; } .precallouts h5 a { font-weight:700; } .precallouts ul { margin:15px 0; padding:0; width:100%; font-family:"Rubik", sans-serif; } .precallouts li { position:relative; display:block; width:100%; padding:10px 15px; vertical-align:top; } .precallouts img { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; } .precallouts a:hover img { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); } .precallouts span.wrap { display:block; } .precallouts span.text { position:absolute; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); left:65px; } .precallouts a { color:#fff; font-weight:400; transition:all 300ms ease-in-out; -webkit-transition:all 300ms ease-in-out; } .precallouts a:hover { color:#f7dfd9; } .precallouts .arrow-down { padding-bottom:0px; font-size:1.5rem; text-align:center; text-shadow:0px 1px 1px rgba(0,0,0,0.5); background:url(../images/css/arrow-down-bg.png) bottom center no-repeat; } .precallouts .text br { display:none; } /*------->>> 8. CONTENT AREA <<<-------*/ .content { position:relative; background:#fff; } #index .content { padding:30px 0; } #interior .content { background:url(../images/css/interior-bg.png) bottom repeat-x; border-bottom: 1px solid #E2DBD7; overflow: hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; } .content-area { padding-bottom:30px; } #index .content-area h1 { margin-bottom:20px; } .content-area ul { padding-left:15px; list-style:none; display:table; } .content-area ul li:before { position:relative; top:-2px; padding-right:7px; font-family:"FontAwesome"; font-size:.5rem; color:#85cfd4; content:"\f111"; display:table-cell; } .content-area li { display:table-row; } .content-area ul li:after { position:relative; content:""; display:table-row; height:0.5rem; } .content-area ul.tall li:after { height:1.5rem; } .content-area ul.no-style { padding-left:0; display:block; } .content-area ul.no-style li { display:block; z-index:100; margin:0.5rem 0 1rem; } .content-area ul.no-style li:before, .content-area ul.no-style li:after { display:none; } .content-area ol { padding-left:35px; } .content-area ol li { position:relative; list-style-type:none; counter-increment:list; } .content-area ol li:before { position:absolute; left:-2.5rem; width:2rem; font-weight:600; color:#2B7791; text-align:right; content:counter(list) "."; } .content-area img { margin:7px; padding:1%; background:#fff; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; box-shadow:0px 1px 7px 0px rgba(178, 177, 178, 0.61); } .content-area img.no-style { margin:0; padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; } .content-area img.float-left { margin-left:0; margin-right:7px; } .content-area img.float-center { margin:7px auto; } .content-area img.float-right { margin-right:0; margin-left:7px; } .content-container { /* quickship.html */ background: #F2EEE9; border-radius: 5px; box-shadow: inset 0 1px 5px; max-width: 840px; padding: 1px 20px; position: relative; /* overflow: hidden;*/ } .content-container .title-wide { background: #D95F43; color: #fff; font-family: 'Rubik', sans-serif; font-weight: 600; letter-spacing: 2px; display: block; padding: 1rem 1.5rem; margin: 0 -1.25rem; box-shadow: inset 0 1px 5px rgba(0,0,0,.5); border-radius: 5px 5px 0 0; } .content-container .rubik { color: #66412F; font-family: 'Rubik', sans-serif; font-weight: 500; } .content-container strong .rubik { font-weight: 600; } .content-container .rubik strong { font-weight: 600; } .content-container .btn { background: #76c6cb; } .content-container .btn[href*="tel"] { background: #ee5938; } .content-container p.phone-number { display: inline-block; padding-left: 20px; font-size: 1rem; font-family: 'Rubik'; font-weight: 600; color: #EE5938; letter-spacing: 3px; } .content-container:after { content: ''; background: url('../images/flowing-tags.png') center center; position: absolute; right: -686px; top: 0; width: 686px; height: 318px; } .content-container:before { content: ''; background: url('../images/flowing-tags.png') center center; position: absolute; left: -686px; top: 0; width: 686px; height: 318px; } .content-container .btn img { margin: 0 12px 0 0; padding: 0; background: transparent; border-radius: 0; box-shadow:none; } .content-container .btn[href*="tel"] img { margin: -2px 12px -3px 0; } /*--> Anchor Links <--*/ .content-area .wrapper a { font-weight:700; border-bottom:5px solid #f7dfd9; } .customServices .content-area .wrapper a { border-bottom:0; } .content-area .wrapper a:hover { color:#d95f43; } .anchor-link { font-size:0; padding:0 !important; width:0 !important; } .anchor-link:before, .anchor-link:after { display:none; } /*---> Arrow Links <---*/ .content-area a.arrow-link, .content-area .wrapper a.arrow-link, a.arrow-link { display:inline-block; position:relative; border-bottom:0; padding-left:42px; white-space:initial; z-index:110; overflow:visible !important; } .content-area a.arrow-link:before, .content-area .wrapper a.arrow-link:before, a.arrow-link:before { display:none !important; } .content-area a.arrow-link:after, .content-area .wrapper a.arrow-link:after, a.arrow-link::after { position:absolute; top:-2px; left:0; display:block; background:#fdd4c9; width:29px; height:29px; border-radius:100%; content:url(../images/icon-thin-arrow-right.svg); padding-right:7px; padding-top:4px; z-index:150; transition:all 300ms ease-in-out; -webkit-transition:all 300ms ease-in-out; } .content-area a.arrow-link:hover::after, .content-area .wrapper a.arrow-link:hover::after, a.arrow-link:hover::after { background:#f7724b; } /*---> Headers Links <---*/ .content-area .wrapper h1 a, .content-area .wrapper h2 a, .content-area .wrapper h3 a { position:relative; font-weight:500; color:#66412f; transition:color 0.5s ease-in-out; -webkit-transition:color 0.5s ease-in-out; padding-right:40px; padding-bottom:3px; border-bottom:none; } .content-area .wrapper h1 a:hover, .content-area .wrapper h2 a:hover, .content-area .wrapper h3 a:hover { color:#D95F43; } /*---> Button Link <---*/ .content-area .wrapper a.btn { vertical-align:middle; } .content-area .wrapper .btn { font-weight:600; } .content-area .wrapper .btn:hover { color:#fff; } /* ------ Flexy Content ------- */ .flexy-wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; width: 100%; flex-direction: column; } .flexy { width: 100%; margin: 0 auto; } .flexy img{ width: 100%; } /*------->>> 9. SIDEBAR STYLES <<<-------*/ .sidebar { } /*------->>> 10. MEDIA [Images and Video on Index] <<<-------*/ .media { padding:15px 0; border-top:1px solid #ebe7e2; border-bottom:1px solid #ebe7e2; } .media video { width:100% !important; height:auto !important; border:0; padding-bottom:2px; } .media img.pad-left, .media2 img.pad-left { padding-left:2px; } .media img.pad-right, .media2 img.pad-right { padding-right:2px; } .media img.pad-top, .media2 img.pad-top { padding-top:4px; } .media2 { padding-top:4px; } .media img, .media2 img { display:block; width:100%; max-width:100%; height:auto; } /*------->>> 11. IDEA GALLERY STYLES [Hang Tag Idea Gallery on Index] <<<-------*/ .idea-gallery { text-align:center; border-bottom:1px solid #ebe7e2; margin-bottom:15px; } .idea-gallery h2 { margin:15px 0; } .idea-gallery p.text span { display:inline-block; max-width:600px; } .idea-gallery a { font-size:0.75rem; color:#958d83; font-family:"Karma", sans-serif; } .idea-gallery a:hover { color:#d95f43; } .idea-gallery h4 a { font-size:inherit; color:inherit; font-family:inherit; } .idea-gallery .btn { margin:20px 0 25px 0; } .idea-gallery a.btn, .idea-gallery .btn:hover { font-family:"Rubik", sans-serif; color:#fff; } .idea-gallery section { border-top:1px solid rgba(0,0,0,0.2); padding-top:50px; } .idea-gallery .row.intro section { border-top:0; margin-bottom:15px; } .idea-gallery .row.data2 .columns:last-child section { border-bottom:1px solid rgba(0,0,0,0.2); } .idea-gallery .row.data img, .idea-gallery .row.data2 img { width:auto; height:110px; } .idea-gallery img { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; } .idea-gallery a:hover img { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); } /*------->>> 12. CALLOUTS STYLES [Callouts on Index] <<<-------*/ .callouts { background:#192A55; background:url(../images/css/callouts-bg.png) top center no-repeat; background-size:cover; color:#fff; text-align:center; padding-bottom:15px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; position:relative; z-index:1001; } .callouts .intro { } .callouts .intro section { padding-top:75px; } .callouts .intro h2 { margin:15px 0; color:#fff; } .callouts .intro p.text span { display:inline-block; max-width:500px; } .callouts .intro img { display:inline-block; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; } .callouts .intro a:hover img { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); } .callouts .button { } .callouts .button .btn { margin:50px 0 25px 0; width:100%; } .callouts .button a.btn, .callouts .button .btn:hover { color:#fff; } .callouts figure.callouts-box { margin:0; margin-bottom:4px; } .callouts-box { height:50px; overflow:hidden; position:relative; border-radius:3px 0 0 3px; -moz-border-radius:3px 0 0 3px; -webkit-border-radius:3px 0 0 3px; } .callouts-box img { display:none; } .callouts-box figcaption { background:#85CfD4; padding:15px; position:absolute; top:0px; transition:padding 400ms ease-in-out; -webkit-transition:padding 400ms ease-in-out; border-radius:3px 0 0 3px; -moz-border-radius:3px 0 0 3px; -webkit-border-radius:3px 0 0 3px; } .callouts-box h3 { margin:0; text-align:left; white-space:nowrap; font-size:1.063rem; } .callouts-box h3 a { color:#3b5d5f; text-decoration:none; } .callouts-box p { color:#718485; margin:15px 0; font-weight:400; } .callouts-box .fa { font-size:1.375em; position:absolute; z-index:9999; right:0; bottom:0; padding:0.719rem; cursor:pointer; color:#fff; background:#85cfd4; border-radius:3px 0 0 0; -moz-border-radius:3px 0 0 0; -webkit-border-radius:3px 0 0 0; } .callouts .columns.active .callouts-box { height:0; background:#fff; position:relative; border-radius:3px 3px 0 3px; -moz-border-radius:3px 3px 0 3px; -webkit-border-radius:3px 3px 0 3px; overflow:hidden; padding-bottom:100%; } .callouts .columns.active img { display:inline-block; transition:all 400ms ease-in-out; -webkit-transition:all 400ms ease-in-out; } .callouts .columns.active .callouts-box h3 { margin-top:15px; text-align:center; white-space:normal; } .callouts .columns.active .callouts-box figcaption { background:#fff; padding:20px 20px 45px 20px; position:absolute; top:0; left:0; width:100%; height:100%; } .callouts .callouts-box .btn { background:#60C0C7; } .callouts .callouts-box .btn:hover { background:#F57251; } /*------->>> 13. PANEL STYLES [Testimonials & Newsletter on Index] <<<-------*/ .panel { background:-webkit-linear-gradient(90deg, #fff 50%, #f2eee9 50%); /* For Safari 5.1 to 6.0 */ background:-o-linear-gradient(90deg, #fff 50%, #F2Eee9 50%); /* For Opera 11.1 to 12.0 */ background:-moz-linear-gradient(90deg, #fff 50%, #F2eee9 50%); /* For Firefox 3.6 to 15 */ background:linear-gradient(90deg, #fff 50%, #F2eee9 50%); } .testimonials, .newsletter { padding:3rem 0; } .testimonials { background:#fff; } .newsletter { background:#F2Eee9; border-top:1px solid #e2dbd7; } .newsletter h4 { margin-bottom:10px; } .newsletter ul { margin:0; padding:0; } .newsletter li { display:block; } .newsletter a { color:#a59a8c; font-weight:700; } .newsletter a:hover { color:#bd533b; } .newsletter span { font-size:0.75em; margin-left:0.313rem; } .newsletter p:last-of-type { margin-bottom:.75rem; } .ratingDiv { text-align: center; margin-top: 1.3rem; } .ratingText { font-size: 90%; font-style: italic; } /*------->>> 14. PREFOOTER STYLES [Phone, Fax, Social]<<<-------*/ .prefooter { background:#BD533B; color:#fff; } .prefooter ul { padding:0; margin:0; } .prefooter li { display:inline-block; font-size:0.75rem; } .prefooter .phone, .prefooter .social { padding-top:1.25rem; padding-bottom:1.25rem; } .prefooter .phone li { padding-bottom:0.313rem; } .prefooter .phone li:last-child { padding-bottom:0; } .prefooter .phone li.spacer { display:none; } .prefooter .phone li a, .prefooter .phone li a:hover { color:#fff; padding:0 0.438rem; cursor:default; } .prefooter .phone strong { font-family:"Rubik", sans-serif; font-size:0.75rem; font-weight:500; text-transform:uppercase; } .prefooter .social { background:#bd533b; } .prefooter .social li { padding-right:1.563rem; } .prefooter .social li:last-child { padding-right:0; } .prefooter .social li a { color:#fff; font-size:1.5rem; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; } .prefooter .social li a:hover { color:#fb8162; } /*------->>> 15. FOOTER STYLES [Address & Copyright] <<<-------*/ footer { background:#D95F43; color:#fff; } footer ul { padding:0; margin:0; } footer li { display:block; font-size:0.75rem; } footer .address, footer .copyright { padding-top:1.25rem; padding-bottom:1.25rem; } footer .address li:last-child { padding-top:0; } footer .address li.spacer { display:none; color:#bd533b; } footer .address strong { font-family:"Rubik", sans-serif; font-size:0.75rem; font-weight:500; text-transform:uppercase; } footer .logos { margin-bottom:10px; } footer .logos ul li { display:table-cell; vertical-align:middle; width:30%; } footer .logos ul li img { display:block; width:90%; height:auto; } /*------->>> 16. SERVICES CALLOUTS [Callouts on the Custom Tag Services Page] <<<-------*/ .customServices { /* Body Class */ } .customServices .content-area .wrapper h2 a::after { display:none; } .servicesCallouts { /* Section Class */ border-top:3px solid #d8d2cf; padding-top:15px; margin-top:-15px; } .servicesCallouts .medium-6 { padding-bottom:1.25rem; } .servicesCallouts .box { border:1px solid #d1c6c0; } .servicesCallouts .box img { display:block; padding:0; margin:0; background:transparent; border:0; box-shadow:none; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; width:100%; height:auto; } .servicesCallouts .box .messaging { padding:0 15px; } .servicesCallouts .box h2 + p { margin-top:0; } .servicesCallouts .box h2 a { color:#66412F; } .servicesCallouts .box h2 a:hover { color:#DB5E3D; } .servicesCallouts .scroll { display:none; } /*------->>> 17. LUGGAGE TAGS INFOGRAPHIC luggage-label-tags.html <<<-------*/ .luggage { /*- Added to Hero for Tooltips and such -*/ position:relative; } .luggage p { margin:0; display:inline-block; position:absolute; width:37px; height:37px; border-radius:100%; background:#f57251; color:#fff; text-align:center; box-shadow: -2.828px 2.828px 5.82px 0.18px rgba(89, 89, 96, 0.28); transition:all 200ms ease-in-out; -webkit-transition:all 200ms ease-in-out; } .luggage p:hover { background:#82CFD5; } .luggage p:first-of-type { top:25%; right:23%; } .luggage p:nth-of-type(2) { top:39%; right:41.5%; } .luggage p:last-of-type { bottom:3%; right:53%; margin-bottom:0; } .luggage p .has-tip { border-bottom:0; color: #fff; font-size:1.750rem; cursor: help; font-weight:normal; line-height:33px; width:100%; } .luggage p .has-tip:hover, .luggage p .has-tip:focus { border-bottom:0; color: #fff; } /*---> InfoGraphic [In Custom PHP Include] <---*/ .luggageTagInfoGraphic { position: relative; background-color:#fff; background-image: -ms-linear-gradient(top, rgba(237,234,235,1) 0%, rgba(255,255,255,1) 25%); background-image: -moz-linear-gradient(top, rgba(237,234,235,1) 0%, rgba(255,255,255,1) 25%); background-image: -o-linear-gradient(top, rgba(237,234,235,1) 0%, rgba(255,255,255,1) 25%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(237,234,235,1)), color-stop(25, rgba(255,255,255,1))); background-image: -webkit-linear-gradient(top, rgba(237,234,235,1) 0%, rgba(255,255,255,1) 25%); background-image: linear-gradient(to bottom, rgba(237,234,235,1) 0%, rgba(255,255,255,1) 25%); box-shadow: inset 0px 3px 18px 0px rgba(0, 0, 0, 0.06); border-bottom:1px solid #E9E3DF; overflow:hidden; } .luggageTagInfoGraphic .row { margin: 0 auto; max-width: 75em; width: 100%; } .luggageTagInfoGraphic section { position:relative; margin-top:1.5rem; } /*- Image of Luggage Tag -*/ .luggageTagInfoGraphic section img.front, .luggageTagInfoGraphic section img.back { display:block; width:100%; max-width:210px; transition:all 200ms ease-in-out; -webkit-transition:all 200ms ease-in-out; margin:0 auto; } .luggageTagInfoGraphic section img.back { position:absolute; top:0; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); opacity:0; } /*- "Bullet" Points -*/ .luggageTagInfoGraphic section h3 { font-size:1.313rem; color:#f57251; margin:0; position:absolute; width:350px; } .luggageTagInfoGraphic section h3:before { display:inline-block; font-family:"FontAwesome"; font-size:1.750rem; color:#f57251; content:"\f104\f104"; position:absolute; left:-1.875rem; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); } .luggageTagInfoGraphic section h3:nth-of-type(2):before { content:"\f105\f105"; left:auto; right:-1.875rem; } .luggageTagInfoGraphic section h3 img { display:block; width:25px; height:auto; position:absolute; left:0; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); } .luggageTagInfoGraphic section h3:nth-of-type(2) img { left:auto; right:0; } .luggageTagInfoGraphic section h3 span { display:none; } /*- Positioning -*/ .luggageTagInfoGraphic section h3:first-of-type { top:11%; left:calc(50% + 125px); padding-left:60px; } .luggageTagInfoGraphic section h3:nth-of-type(2) { top:32%; right:calc(50% + 120px); padding-left:0; padding-right:60px; text-align:right; } .luggageTagInfoGraphic section h3:last-of-type { bottom:28%; left:calc(50% + 125px); padding-left:60px; } /*- Toggle Button -*/ .luggageTagInfoGraphic section .toggle { margin-top:0; } .luggageTagInfoGraphic section .toggle .btn { position:relative; background:#f57251; width:250px; height:45px; font-size:0; color:transparent; } .luggageTagInfoGraphic section .toggle .btn:before { display:block; background-color:transparent; width:26px; height:26px; content:url(../images/luggage-info-graphic/icon-btn.png); position:absolute; left:15px; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); z-index:2; } .luggageTagInfoGraphic section .toggle .btn:after { display:block; content:"View Back of Tag"; font-family:"Rubik", sans-serif; font-size:1.375rem; font-weight:500; text-decoration:none; text-transform:none; letter-spacing:0; color:#fff; position:absolute; left:50px; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); z-index:3; } .luggageTagInfoGraphic section .toggle .btn:hover { background:#82CFD5; } /*- FLIP -*/ section.flip { } .luggageTagInfoGraphic section.flip img.back { /*- Back -*/ opacity:1; } .luggageTagInfoGraphic section .toggle .btn:hover:before { -webkit-transform:translateY(-50%); transform:translateY(-50%); } .luggageTagInfoGraphic section.flip .toggle .btn:after { content:"View Front of Tag"; } section.flip h3 { display:none; } /*- Reveal Modal -*/ #TieLabel h4, #PeelLabel h4, #TearLabel h4 { color:#F57251; font-size:1.750rem; text-align:center; } /*------->>> 18. BARCODE INFOGRAPHIC (consecutive-numbering-barcode.html) <<<-------*/ .barcodeInfographic { position:relative; margin-top:1.563rem !important; } .barcodeInfographic img { display:block; width:100%; margin:0; padding:0; box-shadow:none; } .barcodeInfographic .columns img:first-of-type { display:block; } .barcodeInfographic .columns img:last-of-type { display:none; } .barcodeInfographic p { margin:0; display:none; position:absolute; width:27px; height:27px; border-radius:100%; background:#f57251; text-align:center; cursor: help; box-shadow: -2.828px 2.828px 5.82px 0.18px rgba(89, 89, 96, 0.28); transition:all 200ms ease-in-out; -webkit-transition:all 200ms ease-in-out; } .barcodeInfographic p:hover { background:#82CFD5; } .barcodeInfographic p:before { content:"+"; color:#fff; font-size:2.5rem; font-weight:light; text-align:center; position:absolute; top:0; left:0; width:100%; height:100%; line-height:27px; -webkit-transition:all 250ms ease-in-out, all 0.5s ease; -moz-transition:all 250ms ease-in-out, all 0.5s ease; -o-transition:all 250ms ease-in-out, all 0.5s ease; -ms-transition:all 250ms ease-in-out, all 0.5s ease; transition:all 250ms ease-in-out, all 0.5s ease; } .barcodeInfographic p:hover:before { -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); } .barcodeInfographic p:first-of-type { top:35%; left:19%; } .barcodeInfographic p:nth-of-type(2) { top:18%; left:35%; } .barcodeInfographic p:nth-of-type(3) { top:30%; left:51%; } .barcodeInfographic p:nth-of-type(4) { bottom:18%; right:31%; } .barcodeInfographic p:nth-of-type(5) { top:46%; right:15%; } .barcodeInfographic p:last-of-type { bottom:24%; right:-0.5%; } .barcodeInfographic span.has-tip { border-bottom:0; font-size:0; cursor: help; width:100%; height:100%; position:absolute; top:0; right:0; } .barcodeInfographic span.has-tip:hover, .barcodeInfographic span.has-tip:focus { border-bottom:0; color: #fff; } /*------->>> 19. IDEA GALLERY CALLOUTS <<<-------*/ .ideaGalleryCallouts { margin-top:2rem !important; } span.funkyLink { display:block; margin:1rem 0; text-align:center; } .ideaGalleryCallouts .columns { position:relative; height:0; padding:0 0 75% 0; width:100%; } .ideaGalleryCallouts .columns:first-of-type { background:url(../images/ideaGalleryCallouts/bg-luggage-labels.jpg) top right no-repeat; background-size:auto 110%; } .ideaGalleryCallouts .columns:last-of-type { background:url(../images/ideaGalleryCallouts/bg-printing.jpg) top center no-repeat; background-size:auto 110%; } .ideaGalleryCallouts section { position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; text-align:center; } .ideaGalleryCallouts section h3, .ideaGalleryCallouts section h4 { text-transform:uppercase; margin:0; } .ideaGalleryCallouts section h3 { font-size:1.875rem; } .ideaGalleryCallouts section h4 { font-size:1.375rem; margin:0.5rem 0; } .ideaGalleryCallouts section .btn { width:100%; max-width:225px; } .ideaGalleryCallouts .columns:first-of-type section h3 { color:#f57251; } .ideaGalleryCallouts .columns:last-of-type section h3 { color:#6cbac0; } .ideaGalleryCallouts .columns:first-of-type { margin-bottom:0.313rem; } .ideaGalleryCallouts .columns:last-of-type { margin-top:0.313rem; } .ideaGalleryCallouts section .valign-middle { z-index:1; } .ideaGalleryCallouts section .one, .ideaGalleryCallouts section .two, .ideaGalleryCallouts section .three { position:absolute; display:none; z-index:2; } .ideaGalleryCallouts section .one { top:9%; left:15%; } .ideaGalleryCallouts section .two { bottom:13%; right:13%; } .ideaGalleryCallouts section .three { top:4%; right:26%; } .ideaGalleryCallouts section .one p span, .ideaGalleryCallouts section .two p span, .ideaGalleryCallouts section .three p span { position:relative; display:block; width:39px; height:39px; background:rgba(255,255,255,0.9); font-family:"Rubik", sans-serif; font-weight:500; font-size:1.5rem; color:#f57251; text-align:center; line-height:39px; border-radius:100%; box-shadow: -1px 0px 21px 0px rgba(0, 0, 0, 0.14); } .ideaGalleryCallouts section .one p span:before, .ideaGalleryCallouts section .two p span:before, .ideaGalleryCallouts section .three p span:before { display:block; content:"\003C \003C Tie to Main Luggage"; background:rgba(255,255,255,0.9); width:39px; height:39px; position:absolute; left:0; top:0; font-family:"Rubik", sans-serif; font-weight:500; font-size:0.938rem; text-align:center; color:#66412f; line-height:39px; border-radius:25px; overflow:hidden; opacity:0; box-shadow: -1px 0px 21px 0px rgba(0, 0, 0, 0.14); pointer-events:none; -webkit-transition: opacity 0.2s ease-in-out, width 0.3s ease-in-out; -moz-transition: opacity 0.2s ease-in-out, width 0.3s ease-in-out; -o-transition: opacity 0.2s ease-in-out, width 0.3s ease-in-out; -ms-transition: opacity 0.2s ease-in-out, width 0.3s ease-in-out; transition: opacity 0.2s ease-in-out, width 0.3s ease-in-out; } .ideaGalleryCallouts section .two p span:before { /* content:"\003C \003C Stick to Additional Luggage";*/ content:"Stick to Additional Luggage \003E \003E"; left:auto; right:0; } .ideaGalleryCallouts section .three p span:before { left:auto; right:0; content:"Keep to Reclaim Luggage \003E \003E"; } /*---> Hover/Click Class <---*/ .ideaGalleryCallouts section .one p:hover, .ideaGalleryCallouts section .two p:hover, .ideaGalleryCallouts section .three p:hover { cursor:help; } .ideaGalleryCallouts section .one p.open span, .ideaGalleryCallouts section .two p.open span, .ideaGalleryCallouts section .three p.open span { background:transparent; color:transparent; box-shadow:none; } .ideaGalleryCallouts section .one p.open span:before { width:200px; opacity:1; } .ideaGalleryCallouts section .two p.open span:before{ width:255px; opacity:1; } .ideaGalleryCallouts section .three p.open span:before { width:235px; opacity:1; } /*------->>> 20. CARDS [equipment-rental-tags.html]<<<-------*/ .cards.cards { } .card { height:calc(100% - 3rem); border-radius: 2px; background-color: rgb(242, 243, 247); border:4px solid #fff; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.13); margin:1rem 0 1rem 0; } .card-img.card-img { display:block; width:100%; margin:0; padding:0; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; box-shadow:none; } .card-title, .card-text { padding:0 20px; } .card--white { background-color:#fff; } /*------->>> 21. FORM ELEMENT STYLES <<<-------*/ .row form .row { margin:0; -webkit-column-break-inside:avoid; page-break-inside:avoid; break-inside:avoid; } .row form li { width:100%; position:relative; display:block; } .formElements h2 { margin:2rem 0 0.625rem 0; color:#66412f; font-size:1.563rem; } .formElements ul { list-style:none; } .formElements ul li:before { margin-right:0; content:""; } .formElements li { margin:0 0 0rem 0; } .formElements, .formElements label { color:#655d5a; font-size:0.875rem; line-height:1.4em; } .formElements input[type=text], .formElements input[type=email], .formElements textarea, .formElements select, .news-div select { width:100%; margin:3px 0 0 0; padding:5px; background-color:#fff; font-size:0.875rem; color:#a9a9a9; line-height:1.42857143; border:1px solid #ccc; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-transition: border-color 0.15s linear, background 0.15s linear; -moz-transition: border-color 0.15s linear, background 0.15s linear; -ms-transition: border-color 0.15s linear, background 0.15s linear; -o-transition: border-color 0.15s linear, background 0.15s linear; transition: border-color 0.15s linear, background 0.15s linear; } .formElements input[type=text]:focus, .formElements input[type=email]:focus, .formElements textarea:focus, .formElements select:focus, .formElements input[type=radio]:focus, .formElements input[type=checkbox]:focus { background: #fafafa; border-color: #999; } .formElements input[type=radio], .formElements input[type=checkbox] { margin-right:3px; } .formElements select, .news-div select { -webkit-appearance:none !important; -moz-appearance:none !important; background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+); background-position:100% center; background-repeat:no-repeat; } .content form input[type=submit], .reveal-modal form input[type=submit], .newsletter form input[type=submit], .body-iframe-form form input[type=submit] { background:#F57251; display:inline-block; position:relative; top:0; padding:9px 20px; font-family:"Rubik", sans-serif; font-size:0.875rem; font-weight:700; text-align:center; text-decoration:none; text-transform:uppercase; letter-spacing:0.125rem; color:#fff; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; box-shadow:0px 1px 1px 0px rgba(0, 0, 0, 0.2); transition:all 200ms ease-in-out; -webkit-transition:all 200ms ease-in-out; border:0 !important; text-shadow:0px 0px 1px rgba(0,0,0,0.3); } .content form input[type=submit]:hover, .content form input[type=submit]:focus, .reveal-modal form input[type=submit]:hover, .reveal-modal form input[type=submit]:focus, .newsletter form input[type=submit]:hover, .newsletter form input[type=submit]:focus, .body-iframe-form form input[type=submit]:hover, .body-iframe-form form input[type=submit]:focus { top:2px; background:#85cfd4; box-shadow:0px 1px 1px 0px rgba(0, 0, 0, 0.2); text-shadow:0px 0px 1px rgba(0,0,0,0.3); } .newsletter form { position:relative; } .newsletter .formElements ul li:before { content:none; } .newsletter form ul, .newsletter form ul li { margin:0; padding:0; } .newsletter form input[type=submit] { position:absolute; top:0px; right:0; } .newsletter form .row { margin-right:105px; } .newsletter form .formElements input[type=text], .newsletter form .formElements textarea, .newsletter form .formElements select { width:100%; margin:3px 0 0 0; padding:5px; background-color:#fff; font-size:0.875rem; color:#a9a9a9; line-height:1.42857143; border:1px solid #F2F2F2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -webkit-box-shadow:0px 1px 1px 0px rgba(0, 0, 0, 0.2); box-shadow:0px 1px 1px 0px rgba(0, 0, 0, 0.2); } .newsletter form input[type=submit] { padding:6.5px 20px; } .body-iframe-form .cmForm { max-width:1200px; max-width:75rem; margin-left:auto; margin-right:auto; } .body-iframe-form .cmForm .row { max-width:100%; } /*---> Mailchimp Form for Newsletter Signup added 6-1-18 <---*/ #mc_embed_signup { background:transparent; margin:1.5rem 0; } #mce-EMAIL#mce-EMAIL { width:calc(100% - 145px); float:left; margin:0; padding:7px; background-color:#fff; font-size:0.875rem; color:#a9a9a9; line-height:1.42857143; border:1px solid #ccc; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-transition: border-color 0.15s linear, background 0.15s linear; -moz-transition: border-color 0.15s linear, background 0.15s linear; -ms-transition: border-color 0.15s linear, background 0.15s linear; -o-transition: border-color 0.15s linear, background 0.15s linear; transition: border-color 0.15s linear, background 0.15s linear; } #mce-EMAIL#mce-EMAIL:focus { background: #fafafa; border-color: #999; } #mc-embedded-subscribe#mc-embedded-subscribe { background:#F57251; display:inline-block; width:140px; height:auto; line-height:1; float:left; position:relative; top:0; padding:10px 0; margin:0 0 0 0.313rem; font-family:"Rubik", sans-serif; font-size:0.875rem; font-weight:700; text-align:center; text-decoration:none; text-transform:uppercase; letter-spacing:0.125rem; color:#fff; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; box-shadow:0px 1px 1px 0px rgba(0, 0, 0, 0.2); transition:all 200ms ease-in-out; -webkit-transition:all 200ms ease-in-out; border:0 !important; text-shadow:0px 0px 1px rgba(0,0,0,0.3); } #mc-embedded-subscribe#mc-embedded-subscribe:hover, #mc-embedded-subscribe#mc-embedded-subscribe:focus { top:2px; background:#85cfd4; box-shadow:0px 1px 1px 0px rgba(0, 0, 0, 0.2); text-shadow:0px 0px 1px rgba(0,0,0,0.3); } .clearfix { zoom:1; } .clearfix:before, .clearfix:after { display:table; content:""; } .clearfix:after { clear:both; } /*------->>> 22. RESPONSIVE IFRAMES <<<-------*/ /*---> Google Maps [div class="google-maps" then IFRAME] <---*/ .google-maps { position:relative; height:175px; overflow:hidden; margin-bottom:15px; padding-bottom:25%; } .google-maps iframe { position:absolute; top:0; left:0; width:100%; height:100%; } /*---> Responsive Video [div class="video-container" then IFRAME] <---*/ .video-container { position:relative; height:0; overflow:hidden; padding-bottom:56.25%; padding-top:35px; } .video-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; } .content .video-container { margin:7px 0 35px 0; } /*------->>> 23. NEWS <<<-------*/ .news-div { } .row .news-div .row { margin:0; } #allYears { margin-right:0px; } .date, .title, .short_description, #spanNavText { font-size:0.875rem; line-height:1.4rem; } .short_description { padding-bottom:0.625rem; border-bottom:1px dotted #c8c8c8; margin-bottom:0.625rem; } /*------->>> 24. LIGHTBOX OVERRIDES <<<-------*/ /* .content .lightBoxImgs .lbThumb { float: none!important; display: inline-block; } .content .lightBoxImgs .lbThumb { background-color: #ffffff; border: 1px solid #B7B7B7; } .content .lightBoxImgs .lbThumb img { margin:0; padding:0; background:transparent; box-shadow:none; border: none; }*/ .lightBoxImgs { margin:0 -0.625rem; /* pull margins to accommodate .lbThumb margins */ display:-ms-flexbox; display:flex; -ms-flex-flow:row wrap; flex-flow:row wrap; } .pswp { /*-- Overlay --*/ z-index:11000; /* Higher than Sticky Header */ } .pswp__button { background-color:transparent !important; } .lbThumb { position:relative; -ms-flex:0 0 calc(50% - 1.25rem); flex:0 0 calc(50% - 1.25rem); max-width:calc(50% - 1.25rem); margin:0.625rem; float:none; border:4px solid #fff; border-radius:0; } .lbThumb, .lbThumb:hover, .lightBoxImgs .lbThumb:hover { box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.20); } .lbThumb:hover, .lightBoxImgs .lbThumb:hover { /* Reset from lightbox default */ top:auto !important; } .lbThumb::before { background:rgba(59,93,95,0.85); opacity:0; display:block; content:''; width:100%; height:100%; position:absolute; inset:0; margin:auto; -webkit-transform:scale(0); -ms-transform:scale(0); transform:scale(0); -webkit-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; transition:all 0.3s ease-out; z-index:120; } .lbThumb:hover::before { cursor:pointer; -ms-transform: scale(1); transform: scale(1); opacity:1; } .lbThumb::after { display:block; content:'View Larger Image'; font-size:1.125rem; text-align:center; text-shadow:rgba(59,93,95,0.85) 3px 3px 7px; color:#fff; position:absolute; left:0; right:0; top:50%; -webkit-transform:translateY(-50%) scale(0); transform:translateY(-50%) scale(0); -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity:0; z-index:120; } .lbThumb:hover::after { cursor:pointer; -ms-transform:translateY(-50%) scale(1); transform:translateY(-50%) scale(1); opacity:1; } .lbThumb a { display:block !important; } .lbThumb a::before, .lbThumb a::after { display:none; } .lbThumb img { display:block; height:auto; width:100%; margin:0; position:relative; top:0; opacity:1; box-shadow:none; padding:0; border-radius:0; } @media all and (min-width:768px) { /*---> Galleries <---*/ .lbThumb { -ms-flex:0 0 calc(33.33333% - 1.25rem); flex:0 0 calc(33.33333% - 1.25rem); max-width:calc(33.33333% - 1.25rem); } } @media all and (min-width:1024px) { /*---> Galleries <---*/ .lbThumb { -ms-flex:0 0 calc(25% - 1.25rem); flex:0 0 calc(25% - 1.25rem); max-width:calc(25% - 1.25rem); } } .photo-gallery { } .photo-gallery .lightBoxImgs { padding:0; } .photo-gallery .lbThumb:nth-child(n+21) { opacity: 0; display:none; -webkit-transition: 500ms all ease-in-out; -o-transition: 500ms all ease-in-out; transition: 500ms all ease-in-out; } .photo-gallery-reveal .lbThumb:nth-child(n+21) { opacity: 1; display:block; } /*------->>> 25. RESPONSIVE TABLE <<<--------*/ table.styled { width:100%; border-collapse:collapse; margin-top:0.5rem; } table.styled caption { text-align:center; font-weight:700; padding-bottom:0.5rem; } table.styled td, table.styled th { font-size:0.625rem; border:0; padding:0.188rem 0; } table.styled th { font-weight:700; } table.styled.colors td { width:20%; vertical-align:left; text-align:left; } table.styled.colors td img { width:13px; height:13px; float:left; margin:0px 3px 0px 0px; } table.styled.colors td img.white { border:1px solid #999; } /*------->>> 26. FOUNDATION OVERRIDE STYLES <<<-------*/ .column, .columns { padding-left:.625rem; padding-right:.625rem; } .row { max-width:1200px; max-width:75rem; } .row .row { margin:0 -.625rem; } .customServices .row .row { } .fullWidth { /*- for full width row -*/ width:100%; max-width:100%; margin:0 auto; } .reveal-modal-bg { background: #000000; background: rgba(0, 0, 0, 0.45); bottom: 0; display: none; left: 0; position: fixed; right: 0; top: 0; z-index: 1004; left: 0; } .reveal-modal { border-radius: 3px; display: none; position: absolute; top: 0; visibility: hidden; width: 100%; z-index: 1005; left: 0; background-color: #FFFFFF; padding: 1.875rem; border: solid 1px #666666; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); } @media only screen and (max-width: 40em) { .reveal-modal { min-height: none; } } .reveal-modal .column, .reveal-modal .columns { min-width: 0; } .reveal-modal > :first-child { margin-top: 0; } .reveal-modal > :last-child { margin-bottom: 0; } @media only screen and (min-width: 40em) { .reveal-modal { left: 0; margin: 0 auto; max-width: 62.5rem; right: 0; width: 60%; top: 5.75rem; } } @media only screen and (min-width: 75em) { .reveal-modal { left: 0; margin: 0 auto; max-width: 62.5rem; right: 0; width: 40%; top: 5.75rem; } } .reveal-modal.radius { border-radius: 3px; } .reveal-modal.round { border-radius: 1000px; } .reveal-modal.collapse { padding: 0; } .reveal-modal.toback { z-index: 1003; } .reveal-modal .close-reveal-modal { color: #AAAAAA; cursor: pointer; font-size: 2.5rem; font-weight: bold; line-height: 1; position: absolute; top: 0.625rem; right: 1.375rem; } /*---> Tooltips <---*/ span.has-tip { display:inline-block !important; } .has-tip { border-bottom: dotted 1px #CCCCCC; color: #333333; cursor: help; font-weight: bold; } .has-tip:hover, .has-tip:focus { border-bottom: dotted 1px #003f54; color: #008CBA; } .tooltip { background: #333333; color: #FFFFFF; display: none; font-size: 0.875rem; font-weight: normal; line-height: 1.3; max-width: 300px; padding: 0.75rem; position: absolute; width: 100%; z-index: 1006; left: 50%; } .tooltip > .nub { border: solid 5px; border-color: transparent transparent #333333 transparent; display: block; height: 0; pointer-events: none; position: absolute; top: -10px; width: 0; left: 5px; } .tooltip.radius { border-radius: 3px; } .tooltip.opened { border-bottom: dotted 1px #003f54 !important; color: #008CBA !important; } .tap-to-close { color: #777777; display: block; font-size: 0.625rem; font-weight: normal; } @media only screen { .tooltip > .nub { border-color: transparent transparent #333333 transparent; top: -10px; } } /*---> Block Grid <---*/ [class*="block-grid-"] { display: block !important; padding: 0; margin: 0 -0.625rem; } [class*="block-grid-"]:before, [class*="block-grid-"]:after { content: " "; display: table; } [class*="block-grid-"]:after { clear: both; } [class*="block-grid-"] > li { display: block; float: left; height: auto; padding: 0 0.625rem 1.25rem; } [class*="block-grid-"] > li:before { display:none !important; } @media only screen { .small-block-grid-1 > li { list-style: none; width: 100%; } .small-block-grid-1 > li:nth-of-type(1n) { clear: none; } .small-block-grid-1 > li:nth-of-type(1n+1) { clear: both; } .small-block-grid-2 > li { list-style: none; width: 50%; } .small-block-grid-2 > li:nth-of-type(1n) { clear: none; } .small-block-grid-2 > li:nth-of-type(2n+1) { clear: both; } .small-block-grid-3 > li { list-style: none; width: 33.33333%; } .small-block-grid-3 > li:nth-of-type(1n) { clear: none; } .small-block-grid-3 > li:nth-of-type(3n+1) { clear: both; } .small-block-grid-4 > li { list-style: none; width: 25%; } .small-block-grid-4 > li:nth-of-type(1n) { clear: none; } .small-block-grid-4 > li:nth-of-type(4n+1) { clear: both; } .small-block-grid-5 > li { list-style: none; width: 20%; } .small-block-grid-5 > li:nth-of-type(1n) { clear: none; } .small-block-grid-5 > li:nth-of-type(5n+1) { clear: both; } .small-block-grid-6 > li { list-style: none; width: 16.66667%; } .small-block-grid-6 > li:nth-of-type(1n) { clear: none; } .small-block-grid-6 > li:nth-of-type(6n+1) { clear: both; } .small-block-grid-7 > li { list-style: none; width: 14.28571%; } .small-block-grid-7 > li:nth-of-type(1n) { clear: none; } .small-block-grid-7 > li:nth-of-type(7n+1) { clear: both; } .small-block-grid-8 > li { list-style: none; width: 12.5%; } .small-block-grid-8 > li:nth-of-type(1n) { clear: none; } .small-block-grid-8 > li:nth-of-type(8n+1) { clear: both; } .small-block-grid-9 > li { list-style: none; width: 11.11111%; } .small-block-grid-9 > li:nth-of-type(1n) { clear: none; } .small-block-grid-9 > li:nth-of-type(9n+1) { clear: both; } .small-block-grid-10 > li { list-style: none; width: 10%; } .small-block-grid-10 > li:nth-of-type(1n) { clear: none; } .small-block-grid-10 > li:nth-of-type(10n+1) { clear: both; } .small-block-grid-11 > li { list-style: none; width: 9.09091%; } .small-block-grid-11 > li:nth-of-type(1n) { clear: none; } .small-block-grid-11 > li:nth-of-type(11n+1) { clear: both; } .small-block-grid-12 > li { list-style: none; width: 8.33333%; } .small-block-grid-12 > li:nth-of-type(1n) { clear: none; } .small-block-grid-12 > li:nth-of-type(12n+1) { clear: both; } } @media only screen and (min-width: 40.0625em) { .medium-block-grid-1 > li { list-style: none; width: 100%; } .medium-block-grid-1 > li:nth-of-type(1n) { clear: none; } .medium-block-grid-1 > li:nth-of-type(1n+1) { clear: both; } .medium-block-grid-2 > li { list-style: none; width: 50%; } .medium-block-grid-2 > li:nth-of-type(1n) { clear: none; } .medium-block-grid-2 > li:nth-of-type(2n+1) { clear: both; } .medium-block-grid-3 > li { list-style: none; width: 33.33333%; } .medium-block-grid-3 > li:nth-of-type(1n) { clear: none; } .medium-block-grid-3 > li:nth-of-type(3n+1) { clear: both; } .medium-block-grid-4 > li { list-style: none; width: 25%; } .medium-block-grid-4 > li:nth-of-type(1n) { clear: none; } .medium-block-grid-4 > li:nth-of-type(4n+1) { clear: both; } .medium-block-grid-5 > li { list-style: none; width: 20%; } .medium-block-grid-5 > li:nth-of-type(1n) { clear: none; } .medium-block-grid-5 > li:nth-of-type(5n+1) { clear: both; } .medium-block-grid-6 > li { list-style: none; width: 16.66667%; } .medium-block-grid-6 > li:nth-of-type(1n) { clear: none; } .medium-block-grid-6 > li:nth-of-type(6n+1) { clear: both; } .medium-block-grid-7 > li { list-style: none; width: 14.28571%; } .medium-block-grid-7 > li:nth-of-type(1n) { clear: none; } .medium-block-grid-7 > li:nth-of-type(7n+1) { clear: both; } .medium-block-grid-8 > li { list-style: none; width: 12.5%; } .medium-block-grid-8 > li:nth-of-type(1n) { clear: none; } .medium-block-grid-8 > li:nth-of-type(8n+1) { clear: both; } .medium-block-grid-9 > li { list-style: none; width: 11.11111%; } .medium-block-grid-9 > li:nth-of-type(1n) { clear: none; } .medium-block-grid-9 > li:nth-of-type(9n+1) { clear: both; } .medium-block-grid-10 > li { list-style: none; width: 10%; } .medium-block-grid-10 > li:nth-of-type(1n) { clear: none; } .medium-block-grid-10 > li:nth-of-type(10n+1) { clear: both; } .medium-block-grid-11 > li { list-style: none; width: 9.09091%; } .medium-block-grid-11 > li:nth-of-type(1n) { clear: none; } .medium-block-grid-11 > li:nth-of-type(11n+1) { clear: both; } .medium-block-grid-12 > li { list-style: none; width: 8.33333%; } .medium-block-grid-12 > li:nth-of-type(1n) { clear: none; } .medium-block-grid-12 > li:nth-of-type(12n+1) { clear: both; } } @media only screen and (min-width: 64.0625em) { .large-block-grid-1 > li { list-style: none; width: 100%; } .large-block-grid-1 > li:nth-of-type(1n) { clear: none; } .large-block-grid-1 > li:nth-of-type(1n+1) { clear: both; } .large-block-grid-2 > li { list-style: none; width: 50%; } .large-block-grid-2 > li:nth-of-type(1n) { clear: none; } .large-block-grid-2 > li:nth-of-type(2n+1) { clear: both; } .large-block-grid-3 > li { list-style: none; width: 33.33333%; } .large-block-grid-3 > li:nth-of-type(1n) { clear: none; } .large-block-grid-3 > li:nth-of-type(3n+1) { clear: both; } .large-block-grid-4 > li { list-style: none; width: 25%; } .large-block-grid-4 > li:nth-of-type(1n) { clear: none; } .large-block-grid-4 > li:nth-of-type(4n+1) { clear: both; } .large-block-grid-5 > li { list-style: none; width: 20%; } .large-block-grid-5 > li:nth-of-type(1n) { clear: none; } .large-block-grid-5 > li:nth-of-type(5n+1) { clear: both; } .large-block-grid-6 > li { list-style: none; width: 16.66667%; } .large-block-grid-6 > li:nth-of-type(1n) { clear: none; } .large-block-grid-6 > li:nth-of-type(6n+1) { clear: both; } .large-block-grid-7 > li { list-style: none; width: 14.28571%; } .large-block-grid-7 > li:nth-of-type(1n) { clear: none; } .large-block-grid-7 > li:nth-of-type(7n+1) { clear: both; } .large-block-grid-8 > li { list-style: none; width: 12.5%; } .large-block-grid-8 > li:nth-of-type(1n) { clear: none; } .large-block-grid-8 > li:nth-of-type(8n+1) { clear: both; } .large-block-grid-9 > li { list-style: none; width: 11.11111%; } .large-block-grid-9 > li:nth-of-type(1n) { clear: none; } .large-block-grid-9 > li:nth-of-type(9n+1) { clear: both; } .large-block-grid-10 > li { list-style: none; width: 10%; } .large-block-grid-10 > li:nth-of-type(1n) { clear: none; } .large-block-grid-10 > li:nth-of-type(10n+1) { clear: both; } .large-block-grid-11 > li { list-style: none; width: 9.09091%; } .large-block-grid-11 > li:nth-of-type(1n) { clear: none; } .large-block-grid-11 > li:nth-of-type(11n+1) { clear: both; } .large-block-grid-12 > li { list-style: none; width: 8.33333%; } .large-block-grid-12 > li:nth-of-type(1n) { clear: none; } .large-block-grid-12 > li:nth-of-type(12n+1) { clear: both; } } /*------->>> 27. BX SLIDER OVERRIDE STYLES <<<-------*/ .bx-wrapper { margin:0px; background:none; border:0px; -webkit-box-shadow:none; box-shadow:none; z-index:500; } .bx-viewport { -webkit-transform:translateZ(0); } ul.bxslider { margin:0; } .bxslider p { margin:0 0 5px 0; } .bxslider p.author { font-family:"Rubik", sans-serif; color:#010101; font-weight:500; font-size:90%; } .bxslider p.author span { text-transform:uppercase; letter-spacing:0.125rem; } /*---> Controls <---*/ .slider-controls { color:rgba(0,0,0, 0.20); margin:0; margin-top:-10px; } .slider-controls p { margin:0; font-size:90%; } .slider-controls span { color:#5e9ca0; } .slider-controls span.fa{ font-size:90%; } #slider-next { padding:0 3px 0 10px; } #slider-prev { padding:0 10px 0 3px; } #slider-next a, #slider-prev a { color:#5e9ca0; } #slider-next a:hover, #slider-prev a:hover { color:#d95f43; } /*------->>> 28. FAQ <<<-------*/ .faq-title { margin-bottom:0.5rem; } .faq-list { list-style-type: none; padding:0 !important; margin:0; } .faq-list li:before { display:none !important; } .faq-list-q { background:#F7F0E6; padding: .35rem .35rem .35rem 2.5rem; margin-bottom: .388rem; position: relative; cursor: pointer; } .faq-list-q::before { content: 'Q:'; position: absolute; left: .875rem; font-weight: bold; color: #DB5E3D; } .faq-list-a { max-height: 0; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; opacity: 0; overflow: hidden; position: relative; } .faq-list-a p:first-child { margin-top:0; } .faq-list-a p:last-child { margin-bottom:0; } .faq-list-a::before { content: 'A:'; position: absolute; left: .875rem; font-weight: bold; color:#379DA4; } .faq-list-a.faq-list-a-show { max-height: 300px; padding: .35rem .35rem .35rem 2.5rem; opacity: 1; } /*------->>> 29. CTAs <<<-------*/ .cta { position:relative; z-index:100; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; margin:0 0 1rem 0; } .cta-link, .content-area .wrapper .cta-link { display:block; width:100%; height:100%; position:absolute; top:0; left:0; z-index:110; border:0; } .cta-link::before, .cta-link::after, .content-area .wrapper .cta-link::before, .content-area .wrapper .cta-link::after { display:none; } .cta-media { padding:0.875rem 0; background:#f8f6f4; position:relative; text-align:center; z-index:105; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } .cta-image, .content-area .cta-image { margin:0; padding:0; background:transparent; border-radius:0; box-shadow:none; } .cta-footer { position:relative; height:75px; z-index:105; } .cta-footer-text { margin:0; width:100%; font-size:1.125rem; font-weight:700; color:#db5e3d; text-align:center; position:absolute; left:0; right:0; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } .cta-btn { width:100%; max-width:170px; padding-left:0; padding-right:0; background:#85cfd4; position:absolute; top:100%; left:0; right:0; margin:0 auto; -webkit-transform:scale(0.1); -ms-transform:scale(0.1); transform:scale(0.1); opacity:0; z-index:106; -webkit-transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94); -o-transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94); transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } .cta:hover .btn { top:calc(50% - 37px); -webkit-transform:translateY(-50%) scale(1); -ms-transform:translateY(-50%) scale(1); transform:translateY(-50%) scale(1); opacity:1; -webkit-transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94); -o-transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94); transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } .cta:hover { box-shadow: 0px 2px 12.74px 0.26px rgba(200, 202, 206, 0.45); } .cta:hover .cta-media { background:#aed4d5; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } .cta:hover .cta-footer { background:#69bac1; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } .cta:hover .cta-footer-text { color:#fff; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } /*------->>> TAG ANCHORS <<<-------*/ .tag-anchors { /* Wrapper */ margin-top:2rem; margin-bottom:2rem; } .tag-anchor { position:relative; z-index:200; } .tag-anchor-link { display:block !important; width:100%; height:100%; position:absolute !important; top:0; left:0; z-index:210; border:0 !important; } .tag-anchor-link:after, .tag-anchor-link:before { display:none; } .tag-anchor-icon { display:block; margin:0 auto; width:65px; height:65px; position:relative; z-index:100; } .tag-anchor-icon img { position:absolute; left:0; right:0; margin:0 auto; padding:0; background:transparent; border-radius:0; box-shadow:none; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); z-index:110; } .tag-anchor-icon:before { width:65px; height:65px; content:""; background:url(../images/bg-tag-anchor-icon-blue.png) center center no-repeat; position:absolute; top:0; left:0; z-index:105; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } .tag-anchor-icon:after { opacity:0; width:65px; height:65px; content:""; background:url(../images/bg-tag-anchor-icon-orange.png) center center no-repeat; position:absolute; top:0; left:0; z-index:107; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } .tag-anchor-title { margin:0.5rem 0 0 0; text-align:center; font-size:1rem; color:#db5e3d; line-height:1.3; } .tag-anchor:hover .tag-anchor-icon:before { opacity:0; } .tag-anchor:hover .tag-anchor-icon:after { opacity:1; } /*------->>> 30. MEDIA QUERIES <<<-------*/ @media all and (min-width:30em) { /*- 480px and up -*/ /*---> Callouts <---*/ .callouts .columns.active .callouts-box { padding-bottom:55%; } /*---> InfoGraphic [In Custom PHP Include] <---*/ .luggageTagInfoGraphic section h3 img { width:35px; } .luggageTagInfoGraphic section h3:first-of-type { left:calc(50% + 140px); } .luggageTagInfoGraphic section h3:nth-of-type(2) { right:calc(50% + 125px); } .luggageTagInfoGraphic section h3:last-of-type { left:calc(50% + 140px); } } @media all and (min-width:40em) { /*- 640px and up -*/ /* ------ Flexy Content ------- */ .flexy-wrapper { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; } .flexy-wrapper:nth-of-type(2){ -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -moz-box-orient: horizontal; -moz-box-direction: reverse; -ms-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } .flexy { width: 40%; margin: 0 1em; } .flexy img{ width: auto; } .flexy:nth-child(2) { width: 60%; } /* Custom