/* ============================================= */ /* Custom css for Jadranka campsites by Consoft */ /* The same for ALL 5 domains */ /* */ /* Version 29-08-2018 */ /* */ /* ============================================= */ .cs-text-center { text-align: center!important;} .cs-center {margin-left: auto!important; margin-right: auto!important;} /* ----------------------------------------------------- */ /* Panorama wrapper (background image) */ .panoramaWrapper { position: relative; background-image: url('/EasyEdit/UserFiles/Panorama/panorama-3d.jpg'); background-repeat: no-repeat; height: 500px; overflow: hidden; } .panoramaWrapper object, .panoramaWrapper embed, { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ----------------------------------------------------- */ /* virtual tours - main page */ .virtual-tour-wrapper { position: relative; overflow: hidden; width: 1150px; } .virtual-tour-wrapper object, .panoramaWrapper embed, { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ----------------------------------------------------- */ /* virtual tours WEM css override to put the CLOSE button at the top */ .cbox-panorama #cboxClose {top: 0;} .cbox-panorama #cboxClose:after {content: "X"; font-size:14px; margin-left:8px;} .cbox-panorama #cboxLoadedContent {height: 100% !important;} /* ----------------------------------------------------- */ /* Tablica za cijene */ .tablicaCjenik { border-width: 0px; border-style: none; border-collapse: collapse; } .tablicaCjenik th { vertical-align: middle; border: 1px solid #ffffff; font-family: arial; font-weight: bold; color: #ffffff; padding: 8px 3px; line-height: 16px; border-bottom: none; } .tablicaCjenik th.bkColorGreen { background-color: #78BC34; } .tablicaCjenik th.bkColorRed { background-color: #c00000; } .tablicaCjenik th.bkColorBlue { background-color: #548dd4; } .tablicaCjenik th.bkColorOrange { background-color: #e36c09; } .tablicaCjenik tr { border-bottom: 1px solid #dfdfdf; } .tablicaCjenik tr.colorGreen { color: #76923c; } .tablicaCjenik tr.colorRed { color: #c00000; } .tablicaCjenik tr.colorBlue { color: #548dd4; } .tablicaCjenik tr.colorOrange { color: #e36c09; } /* .tablicaCjenik tr.oddRow { background-color: #ffffff; } */ /* .tablicaCjenik tr.evenRow { background-color: #f8f8f8; } */ .tablicaCjenik td { padding: 6px 2px; vertical-align: middle; font-family: arial; } .tablicaCjenik td.leftCol, th.leftCol { padding-left: 6px; text-align: left; line-height: 16px; } .tablicaCjenik td.middleCol, th.middleCol { text-align: center; } /* ----------------------------------------------------- */ /* Price calc buttons */ .buttonCalcOrange { float: left; overflow: hidden; padding: 1px; } .buttonCalcOrange a { display: block; width: 170px; height: 37px; overflow: hidden; line-height: 38px; font-size: 12px; color: #fff; font-weight: bold; text-decoration: none; background: url(/EasyEdit/UserFiles/Gumbi/button-calc-orange.png) no-repeat 0 0; background-size: 146px 37px; text-align: center; padding-right:10px; } .buttonCalcOrange a:hover { background: url(/EasyEdit/UserFiles/Gumbi/button-calc-orange-hover.png) no-repeat 0 0; background-size: 146px 37px; color: #ffffff; } .buttonCalcGreen { float: left; overflow: hidden; padding: 1px; } .buttonCalcGreen a { display: block; width: 170px; height: 37px; overflow: hidden; line-height: 38px; font-size: 12px; color: #fff; font-weight: bold; text-decoration: none; background: url(/EasyEdit/UserFiles/Gumbi/button-calc-green.png) no-repeat 0 0; background-size: 146px 37px; text-align: center; padding-right:10px; } .buttonCalcGreen a:hover { background: url(/EasyEdit/UserFiles/Gumbi/button-calc-green-hover.png) no-repeat 0 0; background-size: 146px 37px; color: #ffffff; } /* ----------------------------------------------------- */ /* Clearfix, float right, etc. */ div.clearBoth { clear: both; } .fltRight { float: right; } .fltLeft { float: left; } /* ----------------------------------------------------- */ /* Two columns */ .cs-one-row { margin-top: 20px; } .cs-one-row:after { content: ""; display: table; clear: both; } .cs-half-half {width: 48%; margin-right:2%; float: left; } .cs-half-half:last-child { margin-left: 2%; margin-right: 0;} .cs-half-half img { width: 100%; display: block; } .cs-half-half p { margin-top: 6px; } .cs-first-half, .cs-second-half {width: 48%; margin-right:2%; float: left; } .cs-second-half { margin-left: 2%; margin-right: 0;} .cs-first-half img, .cs-second-half img { width: 100%; display: block; } .cs-first-half p, .cs-second-half p { margin-top: 6px; } /* ----------------------------------------------------- */ /* Darken image on hover */ .cs-hover-img { display: block; margin: 0; padding: 0; border: 0; cursor: pointer; background-color: white; } .cs-hover-img img { display: block; } .cs-hover-img:hover .cs-img-wrap { background-color: black; } .cs-hover-img:hover img { opacity: 0.8; } /* ----------------------------------------------------- */ /* Special Offers grid using
instead of table */ .specOffersGridCol1 { width: 25%; float: left; text-align: center; padding: 0px 10px; } .specOffersGridCol2 { width: 39%; float: left; padding-right: 5px; } .specOffersGridCol3 { width: 36%; float: left; padding-right: 10px;} .specOffersGridRowLight:after, .specOffersGridRowDark:after { content: ""; display: table; clear: both; } .specOffersGridRowLight, .specOffersGridRowDark { padding: 20px 0px 14px 0px; border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; } .specOffersGridRowLight { background-color: #ffffff; } .specOffersGridRowDark { background-color: #F8F8F8; } .specOffersGridCol2 p.naslov { color: #7f7f7f; font-size: 16px; font-weight: bold; margin-top: 0px; } .specOffersGridCol3 p { color: #e36c09; font-size: 16px; font-weight: bold; margin-top: 0px; margin-bottom: 10px; text-align: right; } .specOffersGridCol3 p.maliFont { font-size: 11px; line-height: 12px; font-weight: normal; } /* ----------------------------------------------------- */ /* Blue and Orange buttons */ .cs-btn { background: none repeat scroll 0px 0px; border: 1px solid #CFCFCF; border-bottom: 1px solid #767676; border-radius: 4px 4px 4px 4px; cursor: pointer; display: inline-block; margin: 2px; outline: 0px none; padding: 3px 10px; text-decoration: none; transition: all 0.3s ease 0s; font-family: Arial,Helvetica,sans-serif; font-size: 14px; } a.cs-btnOrange:hover { color: #ffffff; background-color: #C66300; } a.cs-btnBlue:hover { color: #ffffff; background-color: #175BF5; } a.cs-btnBlue { color: #ffffff; background-color: #4379E6; border-top: #4379E6; margin-bottom: 10px!important; } a.cs-btnOrange { color: #ffffff; background-color: #E87E14; border-top: #E87E14; } a.cs-btnGrey { border-color: #bbbbbb; background: linear-gradient(to bottom, #ffffff 0%, #bbbbbb 100%) repeat scroll 0% 0% transparent; box-shadow: 0 1px 1px #1f242b; color: #666666; } /* ----------------------------------------------------- */ /* Colours of four campsites for headings/text etc */ .slatinaGreen { color: #76923c; } .baldarinBlue { color: #4f81bd; } .bijarRed { color: #c00000; } .cikatOrange { color: #e36c09; } hr.slatinaGreen { background: none repeat scroll 0% 0% #76923c; } hr.baldarinBlue { background: none repeat scroll 0% 0% #4f81bd; } hr.bijarRed { background: none repeat scroll 0% 0% #c00000; } hr.cikatOrange { background: none repeat scroll 0% 0% #e36c09; } .border-slatina {border: 1px solid #76923c;} .border-baldarin {border: 1px solid #1f497d;} /* was #4f81bd; */ .border-bijar {border: 1px solid #c00000;} .border-cikat {border: 1px solid #e36c09;} .border-camps-cres-losinj {border: 1px solid #3976c3;} /* ----------------------------------------------------- */ /* 3 diva jedan do drugog za HappyFerien kontakt */ div.happyFerien { float: left; text-align: center; display: inline; height: 250px; width: 220px; background-color: #f3f3f3; border: 2px solid #ffffff; padding-top: 30px; } /* ----------------------------------------------------- */ /* divovi jedan do drugog bez specificirane sirine */ div.sideBySide { float: left; display: inline; margin-right: 10px; } /* ----------------------------------------------------- */ /* Override: Makni fading background sa glavnih slika. Ovo se moze komentirat ako se hoce vratiti background na glavnim slikama */ .slider-image-mask { background: none; } /* ----------------------------------------------------- */ /* Tablica za air & sea temperatures - smanji padding */ .tablicaTemperatures td { padding: 10px 6px; text-align: center; } /* ----------------------------------------------------------- */ /* Adjustment/override za reljefni side meni selected opciju */ .sidemenu .on, .sidemenu .on:hover, .sidemenu .open, .sidemenu .open:hover { border-color: #aaaaaa !important; background: linear-gradient(to bottom, #ffffff 0%, #aaaaaa 100%) repeat scroll 0% 0% transparent !important; box-shadow: 0 1px 1px #1f242b !important; } /* ----------------------------------------------------------- */ /* Dog table for Cikat page */ .dog-table-wrapper { max-width: 540px; margin: 0 auto;} .dog-table-wrapper table { width: 540px; text-align: center;} .dog-table-wrapper table td {text-align: center; vertical-align: top; width: 33%; } .dog-table-wrapper table td p {text-align: center; vertical-align: top; margin-top: 8px; font-size: 14px;} .dog-table-wrapper table td img { width: 128px;} /* ------------- Legend icons for pitch page -----------------------------------*/ .camp-map-equipment ul.pitch-legend { list-style-type: none; } .camp-map-equipment ul.pitch-legend li {background-repeat: no-repeat; margin: 0 0 5px; padding:6px 0 0 40px; min-height: 40px; background-position-y: 6px;} .legend-accessible-parcelled-pitch { background: url(/EasyEdit/UserFiles/LegendImages/accesible-parcelled-pitch.png); } .legend-air-condition { background: url(/EasyEdit/UserFiles/LegendImages/air-condition.png); } .legend-animation-point { background: url(/EasyEdit/UserFiles/LegendImages/animation-point.png); } .legend-baby-bath-area { background: url(/EasyEdit/UserFiles/LegendImages/baby-bath-area.png); } .legend-baby-room { background: url(/EasyEdit/UserFiles/LegendImages/baby-room.png); } .legend-bakery { background: url(/EasyEdit/UserFiles/LegendImages/bakery.png); } .legend-barbecue-area { background: url(/EasyEdit/UserFiles/LegendImages/barbecue-area.png); } .legend-basketball { background: url(/EasyEdit/UserFiles/LegendImages/basketball.png); } .legend-beach-volleyball { background: url(/EasyEdit/UserFiles/LegendImages/beach-volleyball.png); } .legend-bicycles-for-rent { background: url(/EasyEdit/UserFiles/LegendImages/bicycles-for-rent.png); } .legend-blue-flag { background: url(/EasyEdit/UserFiles/LegendImages/blue-flag.png); } .legend-boat-slip { background: url(/EasyEdit/UserFiles/LegendImages/boat-slip.png); } .legend-boats-depo { background: url(/EasyEdit/UserFiles/LegendImages/boats-depo.png); } .legend-boat-mooring { background: url(/EasyEdit/UserFiles/LegendImages/moorings.png); } .legend-caffe-bar { background: url(/EasyEdit/UserFiles/LegendImages/caffe-bar.png); } .legend-camper-service { background: url(/EasyEdit/UserFiles/LegendImages/camper-service.png); } .legend-camper-winter-depo { background: url(/EasyEdit/UserFiles/LegendImages/campers-parking-lot-winter-depo.png); } .legend-car-park { background: url(/EasyEdit/UserFiles/LegendImages/parking-lot.png); } .legend-car-washing-area { background: url(/EasyEdit/UserFiles/LegendImages/car-washing-area.png); } .legend-caravans-for-rent { background: url(/EasyEdit/UserFiles/LegendImages/caravans-for-rent.png); } .legend-cash-machine { background: url(/EasyEdit/UserFiles/LegendImages/cash-machine.png); } .legend-chemical-toilet { background: url(/EasyEdit/UserFiles/LegendImages/chemical-toilette.png); } .legend-childrens-playground { background: url(/EasyEdit/UserFiles/LegendImages/childrens-playground.png); } .legend-childrens-toilet { background: url(/EasyEdit/UserFiles/LegendImages/childrens-toilette.png); } .legend-currency-exchange { background: url(/EasyEdit/UserFiles/LegendImages/currency-exchange.png); } .legend-disabled-toilet { background: url(/EasyEdit/UserFiles/LegendImages/toilette-for-wheelchair-users.png); } .legend-dryer { background: url(/EasyEdit/UserFiles/LegendImages/dryer.png); } .legend-dishwashing-area { background: url(/EasyEdit/UserFiles/LegendImages/dishwashing-area.png); } .legend-diving-centre { background: url(/EasyEdit/UserFiles/LegendImages/diving-centre.png); } .legend-dog-area { background: url(/EasyEdit/UserFiles/LegendImages/dog-running-area-dog-beach.png); } .legend-dog-beach { background: url(/EasyEdit/UserFiles/LegendImages/dog-beach.png); } .legend-dog-shower { background: url(/EasyEdit/UserFiles/LegendImages/dog-shower.png); } .legend-dog-walking-area { background: url(/EasyEdit/UserFiles/LegendImages/dog-walking-area.png); } .legend-drainage { background: url(/EasyEdit/UserFiles/LegendImages/drainage.png); } .legend-eco-zone { background: url(/EasyEdit/UserFiles/LegendImages/eco-zone.png); } .legend-electricity-connection { background: url(/EasyEdit/UserFiles/LegendImages/electricity-connection.png); } .legend-fast-food { background: url(/EasyEdit/UserFiles/LegendImages/fast-food.png); } .legend-family-bathroom { background: url(/EasyEdit/UserFiles/LegendImages/family-bathroom.png); } .legend-fire-extinguisher { background: url(/EasyEdit/UserFiles/LegendImages/fire-extinguisher.png); } .legend-firefighting-equipment { background: url(/EasyEdit/UserFiles/LegendImages/firefighting-equipment.png); } .legend-first-aid-kit { background: url(/EasyEdit/UserFiles/LegendImages/first-aid-kit.png); } .legend-football { background: url(/EasyEdit/UserFiles/LegendImages/football.png); } .legend-frigo-box { background: url(/EasyEdit/UserFiles/LegendImages/frigo-box.png); } .legend-fruit-stand { background: url(/EasyEdit/UserFiles/LegendImages/fruit-stand.png); } .legend-garbage-disposal { background: url(/EasyEdit/UserFiles/LegendImages/garbage-disposal.png); } .legend-garbage-separation { background: url(/EasyEdit/UserFiles/LegendImages/garbage-separation.png); } .legend-gas-filling-station { background: url(/EasyEdit/UserFiles/LegendImages/gas-filling-station.png); } .legend-glamping-tents-for-rent { background: url(/EasyEdit/UserFiles/LegendImages/glamping-tents-for-rent.png); } .legend-grocery-store { background: url(/EasyEdit/UserFiles/LegendImages/grocery-store.png); } .legend-hidrant { background: url(/EasyEdit/UserFiles/LegendImages/hidrant.png); } .legend-hydrant { background: url(/EasyEdit/UserFiles/LegendImages/hydrant.png); } .legend-hand-wash { background: url(/EasyEdit/UserFiles/LegendImages/hand-wash.png); } .legend-ice-maker { background: url(/EasyEdit/UserFiles/LegendImages/icemaker.png); } .legend-ice-cream { background: url(/EasyEdit/UserFiles/LegendImages/ice-cream.png); } .legend-information-point { background: url(/EasyEdit/UserFiles/LegendImages/informations.png); } .legend-internet { background: url(/EasyEdit/UserFiles/LegendImages/internet-point.png); } .legend-ironing-area { background: url(/EasyEdit/UserFiles/LegendImages/ironing-area.png); } .legend-journal { background: url(/EasyEdit/UserFiles/LegendImages/journal.png); } .legend-manual-dishwashing { background: url(/EasyEdit/UserFiles/LegendImages/dishwashing-area.png); } .legend-massage { background: url(/EasyEdit/UserFiles/LegendImages/massage.png); } .legend-mobile-homes-for-rent { background: url(/EasyEdit/UserFiles/LegendImages/mobile-homes-for-rent.png); } .legend-no-camping { background: url(/EasyEdit/UserFiles/LegendImages/no-camping.png); } .legend-non-plotted-pitch-with-electricity { background: url(/EasyEdit/UserFiles/LegendImages/non-plloted-pitch-with-electricity.png); } .legend-phone { background: url(/EasyEdit/UserFiles/LegendImages/phone.png); } .legend-reserved { background: url(/EasyEdit/UserFiles/LegendImages/reservations.png); } .legend-restaurant { background: url(/EasyEdit/UserFiles/LegendImages/restaurant.png); } .legend-toilet { background: url(/EasyEdit/UserFiles/LegendImages/sanitary-facility.png); } .legend-sanitary-facility { background: url(/EasyEdit/UserFiles/LegendImages/sanitary-facility2.png); } .legend-satellite-tv { background: url(/EasyEdit/UserFiles/LegendImages/sattelite-tv.png); } .legend-showers { background: url(/EasyEdit/UserFiles/LegendImages/showers.png); } .legend-shower { background: url(/EasyEdit/UserFiles/LegendImages/showers.png); } .legend-table-tennis { background: url(/EasyEdit/UserFiles/LegendImages/table-tennis.png); } .legend-tennis { background: url(/EasyEdit/UserFiles/LegendImages/tennis.png); } .legend-tourist-ambulance { background: url(/EasyEdit/UserFiles/LegendImages/tourist-ambulance.png); } .legend-trailers-depo { background: url(/EasyEdit/UserFiles/LegendImages/trailers-depo.png); } .legend-washing-machine { background: url(/EasyEdit/UserFiles/LegendImages/washing-machine.png); } .legend-warm-cold-water { background: url(/EasyEdit/UserFiles/LegendImages/warm-cold-water.png); } .legend-water-connection { background: url(/EasyEdit/UserFiles/LegendImages/water-connection.png); } /* icons CSS received from Petar 30.03.2018 */ .legend-access-for-the-disabled { background: url(/EasyEdit/UserFiles/LegendImages/access-for-the-disabled.png); } .legend-boats-for-rent { background: url(/EasyEdit/UserFiles/LegendImages/boats-for-rent.png); } .legend-fitness { background: url(/EasyEdit/UserFiles/LegendImages/fitness.png); } .legend-sun-loungers-and-parasols-for-rent { background: url(/EasyEdit/UserFiles/LegendImages/sun-loungers-and-parasols-for-rent.png); } .legend-forbidden-anchorage { background: url(/EasyEdit/UserFiles/LegendImages/forbidden-anchorage.png); } .legend-vital-one-zone { background: url(/EasyEdit/UserFiles/LegendImages/Vital-one-zone.png); } .legend-excursions { background: url(/EasyEdit/UserFiles/LegendImages/excursions.png); } .legend-ice-cream { background: url(/EasyEdit/UserFiles/LegendImages/ice-cream.png); } .legend-weather-station { background: url(/EasyEdit/UserFiles/LegendImages/weather-station.png); } /* icons CSS received from Petar 03.04.2018 */ .legend-scuba-diving { background: url(/EasyEdit/UserFiles/LegendImages/scuba-diving.png); } .legend-wi-fi-zone { background: url(/EasyEdit/UserFiles/LegendImages/wi-fi-zone.png); } .legend-dog-parkour-park { background: url(/EasyEdit/UserFiles/LegendImages/dog-parkour-park.png); } /*----------------------------------------------------------------------------------------------*/ /* ************************** MEDIA QUERIES ********************************* */ /* Jadranka breakpoints */ /* 0 - 479 mobile portrait */ /* 480 - 767 mobile landscape */ /* 768 - 959 tablet portrait */ /* 960 - 1230 tablet landscape and small desktop */ /* 1231 - desktop */ /* */ /* There is also some max-width 783 to stop image-right-or-top floating right */ /* */ /* ************************************************************************** */ /* ----------------------------------------------------------------- */ /* Desktop breakpoint */ @media screen and (min-width:1231px) { .cs-first-half {width: 48.3%; margin-right:1.7%; } .cs-second-half {width: 48.3%; margin-left: 1.7%; margin-right: 0;} .cs-first-half img, .cs-second-half img { width: unset; max-width: unset; } } /* ----------------------------------------------------------------- */ /* Only show on mobile */ @media screen and (min-width:768px) { .tablet-desktop-hide { display: none!important; } } /* ----------------------------------------------------------------- */ /* Show on mobile and tablet portrait, hide on desktop */ @media screen and (min-width:960px) { .desktop-hide { display: none!important; } } /* ----------------------------------------------------------------- */ /* Images right to the text - responsive, for viewport 784px or more */ @media screen and (min-width: 784px) { .image-right-or-top { float: right; margin-left: 14px; margin-bottom: 10px; } .image-left-or-top { float: left; margin-right: 14px; margin-bottom: 10px; } } /* ----------------------------------------------------------------- */ /* Image that moves centered on top - for viewport 783px or less */ @media screen and (max-width: 783px) { .image-right-or-top, .image-left-or-top { float: none; margin-top: 20px; margin-bottom: 20px; margin-left: auto; margin-right: auto; display: block; } } /* Set larger margin bottom for images on pitches page when the image is still on the right */ /* otherwise the price calculator does not wrap properly*/ @media screen and (min-width:784px) { .cs-pitches-image { margin-bottom: 30px;} } /* ----------------------------------------------------------------- */ /* Smaller h1 when on small screens */ @media screen and (max-width: 479px) { h1 { font-size: 26px; letter-spacing: -1px; } h2 { font-size: 22px; letter-spacing: -1px; } h3 { font-size: 20px; letter-spacing: -1px; } h4 { font-size: 19px; letter-spacing: -1px; } } /* ----------------------------------------------------- */ /* Two columns into one when on small mobile */ @media screen and (max-width: 767px) { .cs-half-half, .cs-half-half:last-child {width: 100%; margin-right:0; margin-left: 0; float: left; } .cs-half-half:last-child { margin-top: 10px; } .cs-first-half, .cs-second-half {width: 100%; margin-right:0; margin-left: 0; float: left; } .cs-second-half { margin-top: 10px; } } /* ----------------------------------------------------------------- */ /* Smaller h1 when on portrait of small screens */ @media screen and (min-width: 480px) and (max-width: 767px) { h1 { font-size: 28px; letter-spacing: -1px; } h2 { font-size: 24px; letter-spacing: -1px; } h3 { font-size: 22px; letter-spacing: -1px; } h4 { font-size: 20px; letter-spacing: -1px; } } /* ----------------------------------------------------------- */ /* Dog table for Cikat page - media queries */ @media screen and (min-width: 321px) and (max-width: 767px) { .dog-table-wrapper { max-width: 320px; margin: 0 auto;} .dog-table-wrapper table { width: 320px; text-align: center;} .dog-table-wrapper table td { max-width: 100px; padding: 15px 10px; } } @media screen and (max-width: 320px) { .dog-table-wrapper { max-width: 300px; margin: 0 auto;} .dog-table-wrapper table { width: 300px; text-align: center;} .dog-table-wrapper table td { max-width: 100px; padding: 15px 10px; } .dog-table-wrapper table td img { width: 78px;} } /* ----------------------------------------------------------- */ /* virtual tour wrapper */ @media screen and (min-width: 1800px) {.virtual-tour-wrapper { width: 1150px; }} @media screen and (min-width: 1700px) and (max-width: 1799px) {.virtual-tour-wrapper { width: 1100px; }} @media screen and (min-width: 1600px) and (max-width: 1699px) {.virtual-tour-wrapper { width: 1050px; }} @media screen and (min-width: 1500px) and (max-width: 1599px) {.virtual-tour-wrapper { width: 1000px; }} @media screen and (min-width: 1400px) and (max-width: 1499px) {.virtual-tour-wrapper { width: 950px; }} @media screen and (min-width: 1300px) and (max-width: 1399px) {.virtual-tour-wrapper { width: 900px; }} @media screen and (min-width: 1231px) and (max-width: 1299px) {.virtual-tour-wrapper { width: 850px; }} @media screen and (min-width: 1200px) and (max-width: 1230px) {.virtual-tour-wrapper { width: 800px; }} @media screen and (min-width: 1100px) and (max-width: 1199px) {.virtual-tour-wrapper { width: 750px; }} @media screen and (min-width: 1000px) and (max-width: 1099px) {.virtual-tour-wrapper { width: 700px; }} @media screen and (min-width: 960px) and (max-width: 999px) {.virtual-tour-wrapper { width: 670px; }} @media screen and (min-width: 768px) and (max-width: 959px) {.virtual-tour-wrapper { width: 728px; }} @media screen and (min-width: 480px) and (max-width: 767px) {.virtual-tour-wrapper { width: 460px; }} @media screen and (min-width: 320px) and (max-width: 479px) {.virtual-tour-wrapper { width: 300px; }} /* ----------------------------------------------------------- */ /* Divs side by side used in EuropaRally */ .cse-orange-bg {background-color: #FFF6ED; padding:18px;} .cse-grey-bg {background-color: #fbfbf8; padding:18px;} /* Two columns when wider than 569+ */ @media screen and (min-width: 569px) { .cse-one-row { margin-top: 20px; } .cse-one-row:after { content: ""; display: table; clear: both; } .cse-half-half {width: 49.6%; margin-right:0.4%; float: left; } .cse-half-half:last-child { margin-left: 0.4%; margin-right: 0;} .cse-half-half img { float: left; margin-right: 10px; margin-bottom: 6px; } .cse-half-half p { margin-top: 6px; } } /* Two columns into one when on smaller mobile */ @media screen and (max-width: 568px) { .cse-half-half, .cse-half-half:last-child {width: 100%; margin-right:0; margin-left: 0; float: left; } .cse-half-half { margin-top: 10px!important; } .cse-half-half img { float: left; margin-right: 10px; margin-bottom: 6px; } .cse-first-half img, .cse-second-half img { float: left; margin-right: 10px; margin-bottom: 6px; } } /* ----------------------------------------------------------- */