/** Media Queries for adjustments and all tablet styles **/ /* HEADER FONT COLORS */ .blue-font { color: #496fb5; } .green-font { color: #44A472; } .purple-font { color: #6F489C; } .yellow-font { color: #F59120; } .grey-font { color: #58595B; } .red-font { color: #D23A45; } .teal-font { color: #57BF9E; } @media (min-width: 300px) and (max-width: 600px) { .travelers-wrapper { .tablet-img { width: 70%; margin: 0 auto; } .col-sm-12 { float: none; } } .image-wrapper { width: 92%; .top-image { width: 100%; padding: 0; margin-left: 0; margin-top: -.2em; } .bottom-images { width: 100%; .bottom-right { width: 49.15%; float: left; margin-left: .05em; padding: 0; } } } .inline-images { display: none; } } @media (min-width: 601px) and (max-width: 991px) { .travelers-wrapper { .col-sm-12 { width: 30%; float: left; padding: 0; margin-left: 1em; } .inline-images { display: block; } } } @media (min-width: 601px) and (max-width: 734px){ .mobile-images { display: none; } /* Full width images below slideshow */ .inline-images { display: block; width: 100%; margin: 0.5em 0 2em 1.45em; padding: 0; .image-side-wrapper { padding: 0; margin: 0 auto; float: left; width: 21.51%; > img { width: 100%; } } .image-mid-wrapper { padding: 0; margin: 0 .7em; float: left; width: 44.9%; > img { margin: 0 auto; width: 100%; } } } } @media (min-width: 735px) and (max-width: 767px) { .mobile-images { display: none; } /* Full width images below slideshow */ .inline-images { display: block; width: 100%; margin: .5em auto 0 1.5em; padding: 0; .image-side-wrapper { padding: 0; margin: 0 auto; float: left; width: 21.25%; > img { width: 100%; } } .image-mid-wrapper { padding: 0; margin: 0 .8em; float: left; width: 44.5%; > img { margin: 0 auto; width: 100%; } } } } @media (min-width: 736px) { .large-text { font-size: 1.25em; margin-bottom: .75em; } .middle { padding: 0; } } @media (min-width: 768px) and (max-width: 991px) { body { width: 100%; margin: 0 auto; padding: 0; } header { width: 100%; height: 4.1em; margin: 0 auto; padding: 0; position: relative; @include gradient ($from-color, $to-color); .mobile-logo-wrapper { padding: 0; margin: 0 auto; width: 100%; } .mobile-logo { width: 8em; position: absolute; left: 2em; top: .5em; } } /* Full width images below slideshow */ .mobile-images { display: none; } .inline-images { display: block; width: 100%; margin: 1em auto 0 1.25em; padding: 0; .image-side-wrapper { padding: 0; margin: 0 auto; float: left; width: 22.25%; > img { width: 100%; } } .image-mid-wrapper { padding: 0; margin: 0 1.05em; float: left; width: 46.5%; > img { margin: 0 auto; width: 100%; } } } } /* 992 - 1199 */ @media (min-width: 992px) and (max-width: 1199px) { .travelers-wrapper { .col-sm-12 { width: 30%; float: left; padding: .25em; margin-left: 1em; } } .mobile-images { display: none; } /* Full width images below slideshow */ .inline-images { display: block; width: 100%; margin: 1em auto 0 1.5em; padding: 0; .image-side-wrapper { padding: 0; margin: 0 auto; float: left; width: 22.5%; > img { width: 100%; } } .image-mid-wrapper { padding: 0; margin: 0 1.05em; float: left; width: 47%; > img { margin: 0 auto; width: 100%; } } } .borders { width: 95.5%; margin-left: 2em; margin-top: 1em; margin-bottom: 2.5em; } .message-wrapper { width: 100%; margin: 0 auto; padding: 1em 0; display: block; h3 { font-size: 1.25em; position: relative; } } .circle { margin: 0 auto; padding: 0; display: inline; img { border: 0; width: 2em; margin-bottom: -.75em; margin-right: .5em; } } /* HEADER FONT COLORS */ .blue-font { color: #496fb5; } .green-font { color: #44A472; } .purple-font { color: #6F489C; } .yellow-font { color: #F59120; } .grey-font { color: #58595B; } .red-font { color: #D23A45; } .teal-font { color: #57BF9E; } .message-wrapper-mobile { display: none; } } @media (min-width: 992px) { .large-text { font-size: 1.250em; padding: .5em 1em; width: 78%; margin: 0 auto; } .nav-full { display: block; } #mobile-nav-wrap { display: none; } } /* 1200px */ @media (min-width: 1200px) { .borders { width: 95.5%; margin-left: 2em; margin-top: 1em; margin-bottom: 2.5em; } .message-wrapper { width: 100%; margin: 0 auto; padding: 0 0 .5em 0; display: block; h3 { font-size: 1.65em; position: relative; } } .circle { margin: 0 auto; padding: 0; display: inline; img { border: 0; width: 2em; margin-bottom: -.75em; margin-right: .5em; } } .message-wrapper-mobile { display: none; } .mobile-images { display: none; } /* Full width images below slideshow */ .inline-images { display: block; width: 100%; margin: 1em auto 0 2em; padding: 0; .image-side-wrapper { padding: 0; margin: 0 auto; float: left; width: 22.65%; > img { width: 100%; } } .image-mid-wrapper { padding: 0; margin: 0 1.05em; float: left; width: 47.4%; > img { margin: 0 auto; width: 100%; } } } }