/**
*
*
*
* ..',;::ccclllooooooolllccc:;;,'..
* 'xKNNWMMMMMMWNXK000000KXWMMMMMWWNX0c
* .xWMMMMMMMMKc'... ....,dNMMMMMMMK;
* .,c'.xWMMMMMMM0, cNMMMMMWO'
* .cxKWWo .dNMMMMMMMO. .lXMMMMMXo.
* .ckXWMW0c. :KMMMMMMK, 'kNMMMMNk,
* '0WMMMMNc .dXMMMXc ,dXMMMMNx;
* ;xKWMMMXx:'. 'oOx, .,lONMMMNOl'
* .;oOXWMWN0xoc:;;;;;:ldkKWMMWKxl'
* .;ldk0XNWWWWWWWWNXKOxoc,.
* .';:loooolc:,..
*
*
*
*
* ................... ... ................. ...............
* ,x0KKOdodooooooooooo, cKK0o. ;0KKKKkdooooddk0KKOl. ;x0KKOdooooodkKK0k:
* ,KMMMO,. dMMMX; cWMMMO' .oNMMWo ,KMMWk' .dWMMN:
* cWMMWl . dMMMX; cWMMMo .cXMMWd.cWMMN: ,KMMMo
* lWMMWl .x0o. dMMMX; cWMMMo ;dxk0Kklc;. lWMMN: ,KMMMd
* cWMMWl oWMWKx: dMMMX; cWMMMo lNMMMX: lWMMN: ,KMMMd
* :NMMWd ,KMMMMNo. dMMMX; cWMMMo .oNMMMK; :NMMWl cNMMWl
* .dNMMNklcccccoKMMMMMNc lWMMX; cNMMNc ;0WMMXl. .dNMMXxlccccccdXMMWk.
* .:xkkkkkkkkkkkkkkkkk; .lxkd. 'xkxc. 'dkkkd. .:xkkkkkkkkkkkkkxc.
*
*
*/
/** ____________________________________________________________________________
* ______________ __ __
* _____________ / / / /___ ____ ___ ___ ____ ____ _____ ____
* ____________ / /_/ / __ \/ __ `__ \/ _ \/ __ \/ __ `/ __ `/ _ \
* ___________ / __ / /_/ / / / / / / __/ /_/ / /_/ / /_/ / __/
* __________ /_/ /_/\____/_/ /_/ /_/\___/ .___/\__,_/\__, /\___/
* ____________________________________ /_/_________ /____/_____________________
*/
/* Fix aspect ratio of tablet images made in homePages.css */
/*
@media (min-width: 601px) {
.giro-cls .homepage .slot-1 picture img {
aspect-ratio: 16/9 !important;
}
.giro-cls .homepage .slot-3 picture img{
aspect-ratio: 16/9 !important;
}
}
*/
/* Remove transition animations from vw styled elements */
.sites-giro-site .home-page .msg-block.block-right,
.sites-giro-site .home-page .msg-block.block-left,
.sites-giro-site .home-page .msg-block a.btn {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
/* CTA button fill white */
.sites-giro-site .home-page .btn-fill-white {
color: #000 !important;
background: #fff !important;
}
/* Make things full width past 1400px */
.sites-giro-site .home-page .half-width {
max-width: 100%;
}
@media (max-width: 990px) {
/* CTA button */
.sites-giro-site .home-page .msg-block a.btn {
padding: 0 4.375vw; /* 28px@640 */
min-width: auto;
margin-top: 0; /* 5px@640 */
height: 6.875vw; /* 44px@640 */
border: 1px solid #fff; /* 2px@640 */
color: #fff;
font-size: 16px;
line-height: 6.25vw; /* 40px@640 */
}
/* Main title text on all block items */
.sites-giro-site .home-page .msg-block .h1 {
font-size: 7.8125vw; /* 50px@640 */
line-height: 122%;
}
}
@media (max-width: 1024px) {
/* Main text on video */
.sites-giro-site .home-page .top-section-one .msg-block .h1 {
font-size: 32px;
line-height: 120%;
}
/* Subtitle text on video */
.sites-giro-site .home-page .top-section-one .msg-block .h2 {
font-size: 18px;
line-height: 1.25;
}
/* CTA button on video */
.sites-giro-site .home-page .top-section-one .msg-block a.btn {
padding: 12px 16px;
min-width: auto;
margin-top: 0.78125vw; /* 5px@640 */
height: auto;
border: 2px solid #777; /* 2px@640 */
color: #777;
font-size: 16px;
line-height: 1;
}
/* Padding between subtext and CTA Buttons */
.sites-giro-site .home-page .mb-2 {
margin-bottom: 24px;
}
/* Padding between title and subtext */
.sites-giro-site .home-page .mt-1 {
margin-top: 2.1875vw !important; /* 14px@640 */
}
/* Spacing between hero text and video */
.sites-giro-site .home-page .msg-block.mt-2 {
margin-top: 24px !important; /* 50px@640 */
padding: 0 24px;
}
/* Position of CTA Text on Sub-images */
.sites-giro-site .home-page .square-block .msg-block {
bottom: 7.03125vw; /* 45px@640 */
}
/* Sub-image Side-margin */
.sites-giro-site .home-page .top-section-2,
/* Homepage Blog container Side-margin */
.sites-giro-site .home-page .home-blog-section{
padding: 0 7.8125vw; /* 50px@640 */
}
/* Sub-image top/bottom margin */
.sites-giro-site .home-page .square-block {
margin: 0 0 7.8125vw 0; /* 50px@640 */
}
/* Sub-image Sub-text */
.sites-giro-site .home-page .square-block .h2 {
font-size: 5.15625vw;
line-height: 121%;
margin-top: 1.5625vw;
}
/* Spacing under hero */
.sites-giro-site .home-page.slot-1{
margin-bottom: 24px;
}
/* Margin below "Section 2" */
.sites-giro-site .home-page.slot-2 {
margin-bottom: 0;
}
/* Margin below "Secton 3" */
.sites-giro-site .home-page.slot-3 {
margin-bottom: 24px;
}
/* Margin below "Secton 4" */
.home-page.slot-4 {
margin-bottom: 24px;
}
/* News Title section */
.sites-giro-site .home-page .page-title.h2 {
color: #777;
margin-bottom: 24px;
font-family: RobotoCondensed-Bold,sans-serif;
font-size: 28px;
}
/* News Entry Title */
.sites-giro-site .home-page .content-tile-title-link {
color: #777;
display: inline-block;
font-size: 3.125vw; /* 20px@640 */
line-height: 120%;
}
/* News Entry Title Padding */
.sites-giro-site .home-page .content-tile-title {
margin-top: 4.375vw; /* 28px@640 */
margin-bottom: 2.8125vw; /* 18px@640 */
}
/* Padding between description text and CTA link */
.sites-giro-site .home-page .content-tile-read-more {
margin-top: 2.8125vw; /* 18px@640 */
margin-bottom: 2.8125vw; /* 18px@640 */
}
/* Adding padding to bottom of page */
.sites-giro-site .homepage-wrapper {
margin-bottom: 4.375vw; /* 28px@640 */
}
}
@media (min-width: 992px) {
/* content boxes - Fixes bad CG breakpoint*/
.sites-giro-site .home-page .square-block {
display: inline-block;
margin-bottom: 0;
}
/* Sub-image Title-text */
/*
.sites-giro-site .home-page .square-block .h1 {
font-size: 4.071428571428572vw;
line-height: 122%;
margin-bottom: 0.7142857142857143vw;
}
*/
/* CTA button */
.sites-giro-site .home-page .msg-block a.btn {
padding: 0 2vw; /* 28px@1400 */
min-width: auto;
margin-top: 0.357vw; /* 5px@1400 */
height: 3.57vw; /* 50px@1400 */
border: 0.142857vw solid #fff; /* 2px@1400 */
color: #f1f1f1 !important;
font-size: 1.2857142857vw; /* 18px@1400 */
line-height: 3.2142857vw; /* 45px@1400 */
}
/* 2-column box element tween spacing */
.sites-giro-site .home-page .square-block:first-of-type {
margin-right:4.285714285714286vw; /* 60px@1400 */
}
/* 2-column box row container */
.sites-giro-site .home-page .half-width {
padding: 0 4.285714285714286vw; /* 60px@1400 */
}
.sites-giro-site .home-page .home-blog-section {
overflow: hidden;
width: 100%;
}
/* content boxes - Fixes bad CG breakpoint*/
.sites-giro-site .home-page .square-block {
flex: 34.642857vw;
}
/* Subtitle text */
.sites-giro-site .home-page .msg-block .h2 {
font-size: 2.7142857vw; /* 38px@1400 */
line-height: 105%;
margin: 0;
}
/* Subtitle global */
.sites-giro-site .home-page .mb-2 {
margin-bottom: 24px !important;
}
/* Padding beneath first 2-col layout */
.sites-giro-site .home-page.slot-2 {
margin-bottom: 4.642857142857143vw; /* 65px@1400 */
}
/* CTA button on video */
.sites-giro-site .home-page .msg-block a.btn {
padding: 0 2vw; /* 28px@1400 */
min-width: auto;
margin-top: 0.357vw; /* 5px@1400 */
height: 3.57vw; /* 50px@1400 */
border: 0.142857vw solid #fff; /* 2px@1400 */
color: #fff;
font-size: 1.2857142857vw; /* 18px@1400 */
line-height: 3.2142857vw; /* 45px@1400 */
}
/* Margin below the text block on each box */
.sites-giro-site .home-page .square-block .msg-block {
bottom: 4.285714285714286vw; /* 60px@1400 */
}
/* Spacing under hero */
.sites-giro-site .home-page.slot-1 {
margin-bottom: 5.5vw; /* 77px@1440 */
}
/* Spacing between sections */
.sites-giro-site .home-page.slot-1,
.sites-giro-site .home-page.slot-2,
.sites-giro-site .home-page.slot-3,
.sites-giro-site .home-page.slot-4 {
overflow: hidden;
margin-bottom: 24px;
}
}
@media (max-width: 767px) {
/* News Entry Title */
.sites-giro-site .home-page .content-tile-title-link {
max-width: 80%;
}
}
@media (min-width: 1025px) {
/* Container for the homepage video text block */
.sites-giro-site .home-page .full-width .msg-block.block-right,
.sites-giro-site .home-page .full-width .msg-block.block-left {
width: 43vw /* 602px@1400 */;
bottom: 4.2857142857vw; /*60px@1400 */
}
.sites-giro-site .home-page .full-width .msg-block.block-right {
right: 4.2857142857vw; /*60px@1400 */
}
.sites-giro-site .home-page .full-width .msg-block.block-left {
left: 4.2857142857vw; /*60px@1400 */
}
/* Hero card */
.sites-giro-site .home-page .top-section-one .msg-block .h1 {
font-size: 48px;
}
/* News Title section */
.sites-giro-site .home-page .page-title.h2 {
color: #777;
margin-bottom: 24px;
font-family: RobotoCondensed-Bold,sans-serif;
}
/* News Entry Title */
.sites-giro-site .home-page .content-tile-title-link {
color: #777;
display: inline-block;
max-width: 80%;
font-size: 1.4285714285714286vw; /* 20px@1400 */
line-height: 120%;
}
/* News Entry Title Padding */
.sites-giro-site .home-page .content-tile-title {
margin-top: 2vw; /* 28px@1400 */
margin-bottom: 1.2857142857vw; /* 18px@1400 */
}
/* Padding between description text and CTA link */
.sites-giro-site .home-page .content-tile-read-more {
margin-top: 1.2857142857vw; /* 18px@1400 */
margin-bottom: 1.2857142857vw; /* 18px@1400 */
}
/* Adding padding to bottom of page */
.sites-giro-site .homepage-wrapper {
padding-bottom: 28px;
}
}
/** ____________________________________________________________________________
* ______________ _ __ ___ __ _ __
* _____________ / | / /__ _ _______ / | _____/ /_(_)____/ /__ _____
* ____________ / |/ / _ \ | /| / / ___/ / /| | / ___/ __/ / ___/ / _ \/ ___/
* ___________ / /| / __/ |/ |/ (__ ) / ___ |/ / / /_/ / /__/ / __(__ )
* __________ /_/ |_/\___/|__/|__/____/ /_/ |_/_/ \__/_/\___/_/\___/____/
* _____________________________________________________________________________
*/
/**
* container-news-blog (contains all html)
*
* Mirroring the .center rules from Bootstrap v4.3.1 used in the SFCC main site.
* -Soleil Golden (2020-02-26)
*/
.blog-post-header-bottom.col-12,
/* ^^ Title ^^ */
/* .blog-article .blog-related-products .product-tile-caro, */
/* ^^ Featured Products ^^ , commented out for cap-gemini to do in the main template ¯\_(ツ)_/¯ */
/* .blog-article .blog-related-content, */
/* ^^ Related Articles ^^ , commented out for cap-gemini to do in the main template ¯\_(ツ)_/¯ */
.blog-article .container-news-blog h2,
.blog-article .container-news-blog h3,
.blog-article .container-news-blog p,
.blog-article .container-news-blog ul,
.blog-article .container-news-blog ol,
.container-news-blog .news-img-center,
.container-news-blog .news-quote,
.container-news-blog .news-credits {
width: 100%;
padding-left: 12px;
padding-right: 12px;
margin-right: auto;
margin-left: auto;
}
/* Overriding video play button icon */
.blog-post-slider .youtube-picture:before {
content: "";
background-image: url('data:image/svg+xml;utf8,');
background-size: 90px 90px;
opacity: .8;
display: block;
height: 90px;
width: 90px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 1024px) {
.blog-post-slider .youtube-picture:before {
background-image: url('data:image/svg+xml;utf8,');
background-size: 160px 160px;
height: 160px;
width: 160px;
}
}
/* Video play button hover-effect */
.blog-post-slider .youtube-picture:hover:before {
zoom: 0.8;
}
.blog-post-header-bottom.col-12,
/* ^^ Title ^^ */
.blog-article .blog-related-products .product-tile-caro,
/* ^^ Featured Products ^^ , commented out for cap-gemini to do in the main template ¯\_(ツ)_/¯ */
/*.blog-article .blog-related-content, */
/* ^^ Related Articles ^^ , commented out for cap-gemini to do in the main template ¯\_(ツ)_/¯ */
.blog-article .container-news-blog h2,
.blog-article .container-news-blog h3,
.blog-article .container-news-blog p,
.blog-article .container-news-blog ul,
.blog-article .container-news-blog ol,
.container-news-blog .news-img-center,
.container-news-blog .news-credits {
max-width: 100% !important;
}
@media (min-width: 1025px) {
.blog-post-header-bottom.col-12{
padding: 0px;
}
}
@media (min-width: 1025px) {
.blog-post-header-bottom.col-12,
/* ^^ Title ^^ */
/* .blog-related-products-title, */
/* ^^ Featured Products Title ^^ , commented out for cap-gemini to do in the main template ¯\_(ツ)_/¯ */
/* .blog-article .blog-related-products .product-tile-caro, */
/* ^^ Featured Products ^^ , commented out for cap-gemini to do in the main template ¯\_(ツ)_/¯ */
/* .blog-article .blog-related-content, */
/* ^^ Related Articles ^^ , commented out for cap-gemini to do in the main template ¯\_(ツ)_/¯ */
.blog-article .container-news-blog h2,
.blog-article .container-news-blog h3,
.blog-article .container-news-blog p,
.blog-article .container-news-blog ul,
.blog-article .container-news-blog ol,
.container-news-blog .news-img-center,
.container-news-blog .news-quote,
.container-news-blog .news-credits {
padding-left: 20%;
padding-right: 20%;
}
}
/* Cancel container padding CG added around blog title twice - regression bug */
.content-header-bar.container,
.header.page-title.container {
margin: 0;
padding: 0;
max-width: 100%;
}
/* To pad out these elements a bit more for presentaton */
.blog-article .container-news-blog p ul,
.blog-article .container-news-blog p ol {
padding-left: 32px;
}
/* To prevent massive padding inside of p tags (even though that's invalid HTML) */
.blog-article .container-news-blog p ul,
.blog-article .container-news-blog p ol {
padding-left: 20px;
padding-right: 0px;
}
@media (min-width: 1025px) {
.blog-article .container-news-blog p ul,
.blog-article .container-news-blog p ol {
padding-left: 25%;
padding-left: calc(20% + 20px);
padding-right: 0px;
}
}
/**
* h3, h2, h1, p (text)
*
* -Soleil Golden (2020-02-26)
*/
/* The blog entry title omg */
.blog-post-header-bottom.col-12 {
margin-top: 100px;
}
@media (min-width: 1024px) {
.blog-post-header-bottom.col-12 {
margin-top: 63px;
}
}
/* The blog entry sub-title */
.container-news-blog h2.sub-title,
.container-news-blog h3.sub-title {
font-family: NewsGothicBT-RomanCondensed, sans-serif;
font-size: 1.125rem;
/* 18px (where 1rem = 16px) */
line-height: 100%;
margin-top: 25px;
margin-bottom: 20px;
color: #403f3a;
}
/* All p tags */
.blog-article .container-news-blog p {
margin-block-start: 1em;
margin-block-end: 2em;
line-height: 26px;
}
/* THE FIRST P TAG
Two elements of CSS styling with comments
by Soleil Golden. 2020-02-27
*/
.blog-article .container-news-blog p:first-of-type,
/***
The announcer moves to announce the arrival
of yet another string of classes supporting
a simple paragraph element, with a special
accompanying instructional class in tow.
She clears her throat, preparing her very
best neutral expression. The last thing
she wanted was to attract the attention of
such unruly elements.
BLOG ARTICLE CONTAINER NEWS BLOG P,
She pauses for just long enough to scan the
accompanying class, to determine if they
warranted further introduction,
*/
.blog-article .container-news-blog p.after-title {
/*
before determining that such would be
neither necessary nor appropriate.
FIRST OF HIS NAME, AND GUEST.
It was the right call.
*/
margin-top: 30px;
}
/* Blog body text color correction */
.blog-article .blog-post-html p {
color: #403F3A;
}
/* Remove height-padding from title on blog posts */
.blog-article .header {
height: auto;
}
/* Main headings */
.container-news-blog h2 {
font-size: 38px;
color: #777;
}
/**
* news-img-center (images centered)
*
* -Soleil Golden (2020-02-26)
*/
.blog-article .container-news-blog .news-img-center {
text-align: center;
margin: 85px auto;
width: 100%;
height: auto;
padding: 0px;
}
@media (min-width: 1024px) {
.blog-article .container-news-blog .news-img-center {
width: auto;
margin: 115px auto;
padding: 0 20%;
}
}
.blog-article .container-news-blog .news-img-center img {
max-width: 100%;
}
/**
* news-quote (when there is a quote in center)
*
* -Soleil Golden (2020-02-26)
*/
.blog-article .container-news-blog .news-quote {
color: #777777;
font-family: 'NewsGothicBT-RomanCondensed', sans-serif;
font-size: 1.875rem;
/* 30px (where 1rem = 16px) */
line-height: 125%;
text-transform: uppercase;
text-align: center;
margin: 110px auto;
padding: 0;
font-weight: 400;
max-width: 60% !important;
}
@media (min-width: 1024px) {
.blog-article .container-news-blog .news-quote {
max-width: 560px !important;
}
}
/**
* news-img-w100 (when the image needed to be 100% edge to edge)
*
* -Soleil Golden (2020-02-26)
*/
.blog-article .container-news-blog .news-img-w100 {
max-width: 100%;
width: 100%;
margin: 110px auto;
padding: 0;
display: block;
}
@media (min-width: 1024px) {
.blog-article .container-news-blog .news-img-w100 {
margin: 110px auto;
}
}
.blog-article .container-news-blog .news-img-w100 img {
width: 100%;
height: auto;
}
/**
* news-credits (when the photos have a list of credits at bottom)
*
* -Soleil Golden (2020-02-26)
*/
.container-news-blog .news-credits {
display: block;
}
.container-news-blog .news-credits li {
display: block;
font-weight: normal;
font-family: NewsGothicBT-Roman, sans-serif;
margin: 0;
}
.container-news-blog .news-credits li a {
text-transform: uppercase;
}
/**
* Featured Products
* - Soleil Golden (2020-02-26)
*/
/* Adding the appropriate amount of padding below the article content
* (prior to the featured products section) */
@media (min-width: 1024px) {
.blog-article .blog-post-body {
margin-bottom: 115px;
}
}
/* Related Products and Featured Content Section Margin */
.blog-article .blog-related-content,
.blog-article .blog-related-products {
margin-top: 75px;
}
/* Featured Products section title */
.blog-related-products-title.h1 {
font-size: 38px;
line-height: 120%;
margin-bottom: 23px;
}
/* Featured products Price */
.blog-article .product-tile-caro .price .sales .value {
font-family: NewsGothicBT-RomanCondensed,sans-serif;
color: #403F3A;
}
/* Hiding "New" Badges on Featured Products section
.blog-article .product-tile-caro .text-badge {
display: none !important;
}
*/
/** ____________________________________________________________________________
* ____________________ ______ __ __ ____
* ___________________ / ____/___ ____ / /____ ____ / /_ / __ \____ ______
* __________________ / / / __ \/ __ \/ __/ _ \/ __ \/ __/ / /_/ / __ `/ ___/
* _________________ / /___/ /_/ / / / / /_/ __/ / / / /_ / ____/ /_/ (__ )
* _________________ \____/\____/_/ /_/\__/\___/_/ /_/\__/ /_/ \__, /____/
* ______________________________________________________________ /____/
* _____________________________________________________________________________
*/
/* Applying the same content spacing as with news articles */
.content-page .content-container-generic {
width: 100%;
padding-left: 12px;
padding-right: 12px;
margin-right: auto;
margin-left: auto;
max-width: 100% !important;
}
@media (min-width: 1025px) {
.content-page .blog-post-header-bottom.col-12{
padding: 0px;
}
}
@media (min-width: 1025px) {
.content-page .content-container-generic {
padding-left: 20%;
padding-right: 20%;
}
}
/* To make the header image full width */
.content-page img.header-img {
width: 100%;
}
/* Breadcrumb active item */
.content-page .active-breadcrumb-item a {
color: #403f3a;
}
/* Main headings */
.content-page h1{
margin-top: 80px;
font-size: 38px;
color: #777;
}
/* Sub-headings (and First sub-heading) */
.content-page h2{
font-family: NewsGothicBT-RomanCondensed, sans-serif;
font-size: 1.125rem;
/* 18px (where 1rem = 16px) */
line-height: 100%;
margin-top: 60px;
margin-bottom: 15px;
color: #777;
}
/* Shortening the padding on the first sub-heading to match design */
.content-page h2:first-of-type {
margin-top: 35px;
}
/* All p tags */
.content-container-generic p {
margin-block-start: 1em;
margin-block-end: 2em;
line-height: 26px;
}
/* Overriding global CSS to keep all list entries from being bold */
.content-container-generic ol>li,
.content-container-generic ul>li {
font-family: NewsGothicBT-Roman,sans-serif;
}
/* Embiggening the H2s a little to match design */
.content-container-generic h2 {
font-size: 22px;
}
/** ____________________________________________________________________________
* ____________________________ _____ _ ________ __
* ___________________________ / ___/(_)___ ___ / ____/ /_ ____ ______/ /_
* ___________________________ \__ \/ /_ / / _ \ / / / __ \/ __ `/ ___/ __/
* __________________________ ___/ / / / /_/ __/ / /___/ / / / /_/ / / / /_
* _________________________ /____/_/ /___/\___/ \____/_/ /_/\__,_/_/ \__/
* _____________________________________________________________________________
*/
/* Main container for the size-chart pop-up - fixing desktop size */
@media (min-width: 768px) {
.size-chart #sizechartModal {
width: auto;
height: auto;
left: 50%;
transform: translate(-50%, 0);
}
}
/* Setting the bottom of the modal so it can be scrolled */
.size-chart #sizechartModal.modal {
bottom: 0;
}
/* Removing the padding from the header of the popup */
.size-chart #sizechartModal .modal-header,
/* And the tabs below it */
.size-chart #sizechartModal ol>li+li,
.size-chart #sizechartModal ul>li+li {
padding: 0;
margin: 0;
}
/* Making sure the modal header is on top so the popup can be closed */
.size-chart #sizechartModal .modal-header {
z-index: 1200;
}
/* Removing the header text from the top of the window to match spec */
.size-chart #sizechartModal .modal-header div:first-child {
display: none;
}
/* Getting rid of the iconography next to the Tabs */
.size-chart #sizechartModal a:before {
display: none;
}
/* Setting the top tabs to the correct font and styling */
.size-chart #sizechartModal .nav-tabs.justify-content-center li,
.size-chart #sizechartModal .nav-tabs.justify-content-center a {
display: inline-block;
font-family: NewsGothicBT-RomanCondensed,sans-serif;
font-size: 20px;
width: 50%;
text-align: center;
}
/* Adding our signature underline to the tabs, fitting them to the style */
.size-chart #sizechartModal .nav-tabs.justify-content-center a {
width: 100%;
color: #bbb;
padding-bottom: 10px;
border-bottom: 1px solid #bbb;
text-decoration: none;
letter-spacing: 0.5px;
}
/* Darkening border on active and hover */
.size-chart #sizechartModal .nav-tabs.justify-content-center a.active,
.size-chart #sizechartModal .nav-tabs.justify-content-center a:hover,
.size-chart #sizechartModal .nav-tabs.justify-content-center a:active {
color: #403F3D;
text-decoration: none;
border-bottom: 1px solid #403F3D;
}
/* Removing top padding from the image in the how to measure window */
.size-chart #sizechartModal .tab-pane img {
padding-top: 15px !important;
}
/* How to Measure: Title */
.size-chart #sizechartModal h2 {
font-size: 2rem;
letter-spacing: 0px;
}
@media (min-width: 768px) {
.size-chart #sizechartModal h2 {
font-size: 18px;
margin-top: 15px;
margin-bottom: 10px
}
}
/* Text body of how to measure section */
.size-chart #sizechartModal .modal-body p {
line-height: 2.2;
font-size: 100%;
}
/* Measurement Table */
.size-chart #sizechartModal table {
width: 100%;
}
/* Every other row has a background color */
.size-chart #sizechartModal table tr:nth-of-type(even) {
background-color: #eee;
}
/* and hover gets a darker background color */
.size-chart #sizechartModal table tr:hover {
background-color: #ccc;
}
/* and everything is centered */
.size-chart #sizechartModal table tr th,
.size-chart #sizechartModal table tr td {
text-align: center;
}
/* Fixing padding on the second tab-set to match style */
.size-chart #sizechartModal .tab-content ul {
padding: 0px;
}
/* Fixing padding on #pane2 */
.size-chart #sizechartModal #pane2 {
padding-top: 20px !important;
}
/* Setting defalt font for the sub-tabs */
.size-chart #sizechartModal .tab-content .nav-tabs li,
.size-chart #sizechartModal .tab-content .nav-tabs a {
font-family: NewsGothicBT-Roman,sans-serif !important;
padding: 0 2px
}
/* Darkening on active and hover */
.size-chart #sizechartModal .tab-content .nav-tabs a.active,
.size-chart #sizechartModal .tab-content .nav-tabs a:hover,
.size-chart #sizechartModal .tab-content .nav-tabs a:active {
font-family: NewsGothicBT-Bold,sans-serif !important;
text-decoration: none;
}
/*************************************************************\
* Additions possibly from other sections, hastily made,
* but each commented nicely and to be correctly moved later:
*************************************************************/
/* Temporary Bug Fix, pending Vista correction 2020-11-17 */
/* This should be removed after VWD-90 has been verified: */
/* https://servicedesk.vistaoutdoor.com/browse/VWD-90 */
/* These selectors are painfully specific to ensure a very narrow scope */
@media(min-width: 1025px) and (max-width:1200px) {
/* Product Detail Page product title (desktop) */
div.product-detail.product-wrapper div.container div.product-info-container h1.product-name.hidden-th-down,
/* Product Detail Page product price container (desktop) */
div.product-detail.product-wrapper div.container div.product-info-container div.row.hidden-th-down {
display: block !important;
}
}
/* end Temporary Bug Fix, pending Vista correction 2020-11-17 */
/* Temporary fix footer signup modal height, pending Vista correction 2022-11-16 */
@media screen and ( max-height: 832px ){
.modal-email-signup .modal-dialog {
height: 95vh;
width:95vw;
}
.modal-email-signup .modal-dialog .close {
z-index: 10;
}
.modal-email-signup .modal-body{
max-height:85vh;
}
}
.sites-giro-site .home-page .h1,
.sites-giro-site .home-page .h2,
.sites-giro-site .home-page .h3,
.sites-giro-site .home-page .h4,
.sites-giro-site .home-page .h5,
.sites-giro-site .home-page .content-tile-title-link,
.sites-giro-site .home-page .content-tile-read-more,
.footer-item li a,
.link-primary, .link-primary span, a,
.header-banner .content, .header-banner .content a
{
color: #1C1E1F !important;
font-weight: normal !important;
}
.sites-giro-site .home-page .font-white .h1,
.sites-giro-site .home-page .font-white .h2,
.sites-giro-site .home-page .font-white .h3,
.sites-giro-site .home-page .font-white .h4,
.sites-giro-site .home-page .font-white .h5,
.home-page .msg-block a.btn.block-btw-xl
{
color: #f1f1f1 !important;
}
@media screen and ( max-width: 1023px ){
.sites-giro-site .home-page.giro-hero .font-white .h1,
.sites-giro-site .home-page.giro-hero .font-white .h2,
.sites-giro-site .home-page.giro-hero .font-white .h3,
.sites-giro-site .home-page.giro-hero .font-white .h4,
.sites-giro-site .home-page.giro-hero .font-white .h5,
.home-page.giro-hero .msg-block a.btn.block-btw-xl
{
color: #1C1E1F !important;
}
}
.header-banner .content, .header-banner .content a {
font-size: 16px;
}
footer {
margin-top: 24px !important;
}
.sites-giro-site .home-page .msg-block a.btn {
padding: 12px 16px;
min-width: auto;
height: auto;
border-width: 2px;
color: #777;
font-size: 16px !important;
line-height: 1;
}
.sites-giro-site .home-page.slot-3 .btn-block a.btn:nth-of-type(1) {
margin-right: 0 !important;
}
.sites-giro-site .home-page.slot-1 .msg-block .h2,
.sites-giro-site .home-page.slot-3 .msg-block .h2 {
margin: 12px 0 !important;
}
@media screen and ( min-width: 1024px ){
.sites-giro-site .home-page.slot-3 .msg-block h1.h1,
.sites-giro-site .home-page.slot-1 .msg-block h1.h1,
.sites-giro-site .home-page.slot-1 .msg-block .h2,
.sites-giro-site .home-page.slot-3 .msg-block .h2 {
color: #f1f1f1 !important;
}
.sites-giro-site .home-page.slot-1 .msg-block h1.h1,
.sites-giro-site .home-page.slot-3 .msg-block h1.h1,
.home-page .square-block .h1 {
margin-bottom:0 !important;
font-size: 48px !important;
}
.sites-giro-site .home-page.slot-1 .msg-block .h2,
.sites-giro-site .home-page.slot-3 .msg-block .h2 {
font-size: 32px !important;
}
}
.h2.headline-copy,
.product-name,
.product-detail .description-and-detail h2,
.product-detail .description-and-detail h3,
.recommendation-carousel .carousel-title h2,
.product-detail .promotedProducts-Carousel h2,
.product-detail .yotpo-reviews-section h6,
.product-tile .tile-body .pdp-link,
.h5, .h6, h5, h6
{
font-family: RobotoCondensed-Bold,sans-serif !important;
color: #1C1E1F !important;
text-transform: none !important;
}
body .blog-post-header-bottom .blog-post-title,
body .blog-search-count {
font-family: RobotoCondensed-Regular,sans-serif !important;
color: #1C1E1F !important;
text-transform: none !important;
}
.product-detail .short-description,
.h2,
h2,
.product-detail .specs .spec-value{
color: #1C1E1F !important;
text-transform: none !important;
}
.description-and-detail>div {
margin-bottom:0px !important;
}
footer .back-to-top {
display: none !important;
}
/*Search Show Banner Hide for Gift Guide Shop By Price Need. Dont want to show bike banner on snow results*/
.page.search-show .adaptbanner {
display:none;
visibility: hidden;
}