/* * Custom CSS file * Note: * When adding any styling, please check the responsive version, basic breakpoints are included below, so when you customize something, * add the corresponding values to breakpoints, *** * Unit representation *** * 1rem = 10px * 1em = 16px *** * 1em is equal to the font size of the first parent with a defined font size, by default this is inherited from so it's 16px */ /* YOU CAN START HERE */ /* side bar side trip specific text vibe, price, vibe, provided */ dl dd { padding-left: 90px;/* Default: 110 */ } /* side bar side trip specific text margin right of booking info */ dl dt { width: 85px; /* Default: 110 */ } /* side bar side trip specific text smaller */ dl { font-size: 16px; /* Default: 18 */ } .country-header h1 { text-transform: uppercase; } /* see more cta */ .more-pictures-loader a, .more-posts-loader a { background: #FCFCFC; } /* side trip specific sidebar buttons */ .sidetrip-actions .save-trip a, .sidetrip-actions .complete-trip a, .sidetrip-author .author-info a.profile-btn { border-radius: 5px; /* Default: 20 */ text-transform: none; /* Default: upper */ width: 125px; /* Default: 150 */ font-size: 14px; /* Default: 16 */ } /* emoji */ .em { height: 1em!important; width: 1em!important; top: -2px; position: relative; } /* Country flag on side trip specifc page */ .side-trip-header .country-wrapper i { font-size: 12px; /* Default: 26 */ top: 7px; /* Default: none */ } /* top headline on 404 page not found */ header.homepage-title-404 h1 { font-size:70px; font-weight:500; color: #699d8b; margin: 0; line-height: 74px; } /* top paragraph on 404 page not found */ header.homepage-title-404 p { font-size: 20px; } .homepage-title-404 { padding: 30px 0; margin-bottom: 30px; } /* Filter */ .searchandfilter h4 { padding: 8px 12px; /* Default: 15px 12px */ font-size: 16px; /* Default: 19 */ } /* Filter hover */ .searchandfilter h4:hover { color:black; } /* Filter hover has value*/ .searchandfilter .hasValue h4:hover { color:#F3F3F3; } /* Side Trip Cards */ .trip-card .card-inner .card-image img { /* Homepage */ border-radius: 3px 3px 0 0; /* Default: 8px 8px 0 0 */ } /* Side Trip Cards */ .gallery-grid .gallery-item img { /* side trip specific gallery */ border-radius: 3px; /* Default: 8px 8px 0 0 */ } .country-list .trip-card .card-inner .card-image img { border-radius: 3px 3px 0 0; } .country-list .trip-card .card-inner { border-radius: 3px 3px 0 0; } .gallery-grid .gallery-item .video-sizer, .gallery-grid .gallery-item iframe { border-radius: 0; } .gallery-grid .gallery-item img { border-radius: 0;} /* Country page hero image */ .country-header .image-holder, .country-header .image-holder img { border-radius: 3px; /* Default: 10px */ } /* Country page headline */ .country-header .header-content p { max-width: 650px; /* Default: none */ } /* Side trip card actions hover */ .card-rollover .rollover-actions a:hover { opacity: 1; } /* Side trip card actions */ .card-rollover .rollover-actions a { opacity:.9; } /* side trip specific fixed header side trip name color */ .itinerary-nav span.trip-name { color: #699d8b; /* Default: 686ba2; */ } /* Home carousel menu, Add A Side Trip cta in header */ nav.home-nav a, .btn-add-trip, .preview-bar .btn /* edit side trip bar */ { text-transform: none; /* Default: uppercase */ } /* Header search box radius */ .searchform input[type="search"], .searchform input[type="text"] { border-radius: 25px; /* Default: 5 */ padding: 0 14px 0 44px; /* Default: padding: 0 14px 0 40px; */ } /* Header search box icon position */ .searchform input[type="submit"], .searchform button { left:5px; /* Default: 0 */ } /* Side Trip specific flag margin on fixed header */ .itinerary-nav.headroom--unpinned span.trip-country { margin-right:5px; } /* Side Trip specific extra flag .side-trip-header img, .country-header img { display:none; }*/ /* side trip specific map size */ #side-map, .side-map { height: 200px; /* default: 240 */ } /* side trip specific city, country text above map */ .map-holder h2 { font-size:18px; /* default: 24 */ font-weight: 400; /* default: 200 */ margin: 0 0 8px 0; /* default: 5 */ color: rgba(53, 55, 61, 0.75); /* default: .5 */} /* Dollar sign for price slightly more bold */ main.side-trip header .overview .price span, .trip-meta .price span, .trip-card .card-inner .card-meta span.price span { font-weight: 500; } /* global - footer cta section */ .footer-callout { margin-bottom: 50px; border-bottom: 1px solid rgb(218, 218, 218); padding-bottom: 50px; max-width: 750px; } .footer-callout h2 span { font-size:24px; line-height: 24px;} .footer-callout h2 { font-size: 44px; } /* global - footer text links */ ul.footer-menu li a { color:#A1A3AA; } /* global - footer text links */ ul.footer-menu li a:hover { color:#23527c; } /* SMALLER TABLET */ @media only screen and (max-width: 768px) { /* country page header content */ .country-header .header-content { padding-left: 0px!important; /* default: 525 */ } .country-header p { white-space: normal; /* default: nowrap */ height:auto; /* default: 1.1em */ } } /* TABLET */ @media only screen and (max-width: 1024px) { /* country page country name headline */ .country-header h1 { font-size: 70px; /* default: 140 */ } /* country page country image */ .country-header .image-holder { width:420px; /* default: 480 */ } /* country page country header, entire section */ .country-header { padding: 30px 0 0 0; /* default: 70 */ } /* country page country padding of headline and description */ .country-header .header-content { padding-left: 478px; /* default: 525 */ } /* country page country description size */ .country-header .header-content p { font-size:20px; /* default: 25 */ } } /* CUSTOM MOBILE */ @media only screen and (max-width: 541px) { .footer-callout h2 { top: 12px!important; position: relative!important; margin: 0 0 40px 0; } } /* MOBILE */ @media only screen and (max-width: 480px) { /* secondary footer links */ .country-header { margin-bottom: 30px; } /* secondary footer links */ ul.footer-menu li { margin-right:0px!important; } /* secondary footer links */ .main-footer { padding: 60px 0 0!important; } .footer-callout h2 { font-size:34px; } /* country page country name headline */ .country-header h1 { font-size: 50px; /* default: 24px */ } /* country page header image size */ .country-header .image-holder { width: 100%; /* default: 480 */ } .itinerary-nav span, .itinerary-nav a { text-align:left; } .slick-home .slick-dots { margin: 15px auto; position: relative; text-align: center; right:0; top:0; } .no-mobile { display:inline-block!important;} .header-search { width: 140px; } .main-header .btn-add-trip { border-radius: 5px;} nav.home-nav a:first-of-type { padding-left: 0px;} nav.home-nav a, nav.profile-nav a { padding: 6px 0px!important; font-size: 15px; text-align: left; } /* MOBILE - remove add a side trip button */ .btn-add-trip { display:none;} } /* global add a side trip btn hover */ .btn-add-trip:hover { box-shadow: 0px 0px 25px rgba(0, 0, 0, .25); -webkit-transition: .5s ease; -moz-transition: .5s ease; transition: .5s ease; opacity:.9; } /* global add a side trip btn hover transition */ .btn-add-trip:hover { -webkit-transition: .5s ease; -moz-transition: .5s ease; transition: .5s ease; } /* sign in join modal social hovers */ .modal-body .facebook:hover, .modal-body .instagram:hover, .modal-body .email:hover { box-shadow: 0px 0px 25px rgba(0, 0, 0, .25); -webkit-transition: .5s ease; -moz-transition: .5s ease; transition: .5s ease; opacity:.9; } /* sign in join modal social hover transition */ .modal-body .facebook, .modal-body .instagram, .modal-body .email { -webkit-transition: .5s ease; -moz-transition: .5s ease; transition: .5s ease; } /* sign in join modal close button */ .modal-content a.close-modal { line-height: .4em; /* default: 1*/ font-size: 29px; /* default: 24 */ } /* add a side trip - country selector completed */ .select2-container--bootstrap .select2-selection--single .select2-selection__rendered { color: #2d3342; /* default: #9fa1a8 */ } /* global - turn off footer links with W .footer-logo, .footer-nav-holder { display:none;} /* global - footer W smaller */ .footer-logo img { width: 40px; /* default 120 */ } /* global - footer menu text */ ul.footer-menu li { font-size: 14px; /* default 18 */ margin-right: 18px; /* default 36 */ } /* side trip card sub head */ .trip-card .card-inner .card-info p { font-size: 14px; /* default: 15*/ } /* side trip card meta - country, vibe, length */ .trip-card .card-inner .card-meta { font-size: 13px; /* default: 15*/ } /* homepage max width */ .container-home { max-width: 1400px; /* default: 1600 */ } /* add highlight hover */ .form-submit .btn:hover { background: #78b39f; -webkit-transition: .2s ease; -moz-transition: .2s ease; transition: .2s ease; } /* add a side trip, preview side trip - reduce white space under preview side trip cta and mountains */ .page-template-add-side-trip .main-footer, .page-template-edit-side-trip .main-footer { margin-top: -480px; /* default: -250 */ } /* add a side trip page - increase margin from homepage reduction */ .add-side-trip { margin-top:40px;} /* country page: sub copy underneath name */ .side-trip-header p, .country-header p { font-size: 20px; /* default: 22 */ font-weight: 300; /* default: 500 */ line-height: 1.2em; /* default: 1 */ } /* footer space */ .main-footer { min-height: 750px; /* default: 1030px 10px; */ padding: 150px 0 0; /* default: 100 */ } /* home anchor menu padding */ nav.home-nav a, nav.profile-nav a { padding: 7px 15px; /* default: 18px 10px; */ font-weight:400; } /* home anchor menu bottom border */ nav.home-nav, nav.profile-nav { border-bottom: 1px solid #dcdcdc; /* default: #fdfbf6; */ } /* global search in header - active */ .searchform input[type="search"]:focus, .searchform input[type="text"]:focus{ border: 1px solid #699d8b; box-shadow: 0 0px 7px rgba(105, 157, 139, 0.2); transition: .5s ease; } /* global search in header */ .searchform input[type="search"], .searchform input[type="text"] { background: #f3f3f3; /* default: #ebebeb */ border: 1px solid #f3f3f3; font-weight: 400; transition: .5s ease; } /* home shadow country card */ .country-card img { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0); /* default: .1 */ -webkit-transition: .5s ease; -moz-transition: .5s ease; transition: .5s ease; } /* home shadow country card */ .country-card img:hover { opacity:.9; -webkit-transition: .5s ease; -moz-transition: .5s ease; transition: .5s ease; } /* home Side trip card image hover */ .trip-card a > img:hover { opacity:.9; -webkit-transition: .1s ease; -moz-transition: .1s ease; transition: .1s ease; } /* home and add side trip live card Side trip name smaller */ .trip-card .card-inner .card-info h2 { font-size: 19px; /* default: 25 */ font-weight: 400; /* default: 500 */ margin: 0 0 7px 0; /* default: 15 */ } /* Home headline padding reduced - default: 100px */ main.main { padding-top: 40px; } /* home shadow side trip card */ .trip-card { box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05); /* default: .1 */ -webkit-transition: .5s ease; -moz-transition: .5s ease; transition: .5s ease; } .trip-card:hover { box-shadow: 0px 0px 15px rgba(0, 0, 0, .25); -webkit-transition: .5s ease; -moz-transition: .5s ease; transition: .5s ease; } /* YOU CAN START HERE WITH RESPONSIVE*/ @media only screen and (max-width: 1024px) { /* 1024px breakpoint */ } @media only screen and (max-width: 768px) { /* 768px breakpoint */ /* country page country name headline */ .country-header h1 { margin: 0 0 10px 0; /* default: margin: 0 0 40px -120px; */ } /* country page header image size */ .country-header .image-holder { position:relative; /* default: absolute */ } /* country page */ .country-header .header-content { padding-top: 0; padding-bottom: 40px; } } @media only screen and (max-width: 480px) { /* 480px breakpoint */ }