/**
 * Theme Name:      Travel Zmart
 * Theme URI:       https://www.elegantthemes.com/gallery/divi/
 * Description:     Ett barntema från Zmart
 * Author:          Zmart Webb & Reklam
 * Author URI:      https://zmartwebbreklam.se/
 * Template:         Divi
 * Version:         1.0.0
 * Text Domain:     travel-zmart
 * License:         GPL2
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 */
  
 
/* ---------------------- Theme customization starts here ---------------------- */


@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=League+Gothic&family=Nabla&family=Oswald:wght@200..700&family=Stardos+Stencil:wght@400;700&display=swap');

body {

}

h1, 
h2, 
h3 {
    font-family: 'Josefin Sans', sans-serif !Important;
}

p {
    font-family: 'Roboto', sans-serif !Important;
 font-size: 1.2em !Important;
	line-height:1.5em !Important;

}

#snabbfakta {
    font-family: 'Roboto', sans-serif !Important;
 font-size: 1.1em !Important;
	line-height:2em !Important;
}

.rese-info {
  list-style: none !Important;
  padding: 0;
  margin: 0 !Important;
}

.rese-info li {
  line-height: 2;
  margin-bottom: 10px;
}

.homepage h1 {
    font-size: 1.5em !Important;
    text-align: center  !Important;
	line-height:1.3em !Important;
}

#land h1 {
        color: #ffffff !Important;
	    font-size: 5em !Important;
}

#upplevelse h1 {
        color: #ffffff !Important;
	    font-size: 3em !Important;
}

.homepage h2 {
    font-size: 3em !Important;
    text-align: center !Important;
	line-height:1.3em !Important;
}

.kontakt h3 {

        font-weight: 400;
        font-style: normal;
        text-transform: inherit;
        font-variant: normal;
        text-decoration-line: none;
        text-decoration-color: inherit;
        text-decoration-style: solid;
        color: #ffffff !Important;
        font-size: 2em !Important;
        letter-spacing: 0px;
        line-height: 1.5em !Important;
}


.ingress {
    font-size: 1.4em !Important;
    text-align: center  !Important;
	line-height:1.3em !Important;
	        font-weight: 400;
}


#country_grid {background-color:#F8F5F1 !Important;}
.popular_grid, .blog_grid {background-color:#F8F5F1 !Important;}

#country_top h1 {text-align:center !Important;}




/*** Beskurna bilder så att alla bilder blir lika stora ***/
.popular_grid img, #country_grid img {height: 300px!Important; width: 100%!Important; object-fit: cover!Important; object-position: center; }
/***Slut beskurna bilder***/

/*
#country_top img {height: 50vh!Important; width: 100%!Important; object-fit: cover!Important; object-position: center; }
*/
#country_info ul {line-height:2em; margin-top:15px;}













/*make the Divi mobile dropdown menu scrollable*/

.et_mobile_menu {
overflow: scroll !important;
max-height: 80vh;
}


/*change hamburger icon to x when mobile menu is open*/

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
	content: '\4d';
}


/*adjust the new toggle element which is added via jQuery*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}


/*some code to keep everyting positioned properly*/

ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}


/*remove default background color from menu items that have children*/

.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}


/*hide the submenu by default*/

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}


/*show the submenu when toggled open*/

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}


/*adjust the toggle icon position and transparency*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
	text-align: center;
	opacity: 1;
}


/*submenu toggle icon when closed*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	top: 10px;
	position: relative;
	font-family: "ETModules";
	content: '\33';
	color: #00d263;
	background: #f0f3f6;
	border-radius: 50%;
	padding: 3px;
}


/*submenu toggle icon when open*/

ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
	content: '\32';
}


/*add point on top of the menu submenu dropdown*/

.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
	position: absolute;
	right: 5%;
	margin-left: -20px;
	top: -14px;
	width: 0;
	height: 0;
	content: '';
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #ffffff;
}


/*adjust the position of the hamburger menu*/

.mobile_menu_bar {
	position: relative;
	display: block;
	bottom: 10px;
	line-height: 0;
}


/*force the background color and add a rounded border*/

.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
	background-color: #ffffff!important;
	border-radius: 10px;
}








/***Switch column order on mobile***/
@media only screen and ( max-width: 1200px ) 
{.flip {display: -webkit-flex; -webkit-flex-direction: column-reverse; display: flex; flex-direction: column-reverse !important;}

.homepage h2 {font-size: 2em !Important;}

.country .et_pb_main_blurb_image {
  height: 250px;             /* Samma höjd för alla */
  width: 100%;               /* Eller en fast bredd */
  overflow: hidden;
}
	
	
}

@media only screen and ( max-width: 767px ) {
#land h1 {
        color: #ffffff !Important;
	    font-size: 3em !Important;
}

#upplevelse h1 {
        color: #ffffff !Important;
	    font-size: 2em !Important;
}
}


/*set the Divi menu dropdown auto width*/
@media only screen and (min-width: 981px) {
	.nav li ul {
		width: fit-content;
		display: flex;
		flex-direction: column;
	}

	.nav li li {
		white-space: nowrap;
	}

	.nav li li a {
		width: auto !important;
	}
}

/**
 * Zmart Carousel styles.
 */
div[tin-slide-cloak] {
  display: none;
}

.tin-slide-prev:hover:before, .tin-slide-next:hover:before {
	opacity: 0.3;
}


.zmart-carousel > div {
	min-height: 100px;
}

.zmart-carousel img {
  display: block;
  width: 100%;
  height: auto;
}

.zmart-carousel[data-theme=pages] > div {
	border-radius: 20px;
	overflow: hidden;
}

.zmart-carousel[data-theme=pages] a {
  display: block;
}

.zmart-carousel[data-theme=images] img {
  height: 100%;
  object-fit: cover;
}

.zmart-carousel[data-theme=pages] img {
  aspect-ratio: 16/9;
  object-fit: cover;
}

.zmart-carousel[tin-slide-break-point="600"][data-theme=pages] img,
.zmart-carousel[tin-slide-break-point="900"][data-theme=pages] img {
  aspect-ratio: 3/4;
}

.zmart-carousel[tin-slide-break-point="900"][data-theme=pages][data-num-visible="1"],
.zmart-carousel[tin-slide-break-point="900"][data-theme=pages][data-num-visible="3"] {
	max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.zmart-carousel[tin-slide-break-point="600"][data-theme=pages][data-num-visible="1"] img,
.zmart-carousel[tin-slide-break-point="900"][data-theme=pages][data-num-visible="1"] img {
  aspect-ratio: 16/9;
}

.zmart-carousel[data-theme=pages] .content {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	padding: 40px 20px 25px 20px;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	background: linear-gradient(0deg,rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
}

.zmart-carousel[tin-slide-break-point="600"][data-theme=pages] .content,
.zmart-carousel[tin-slide-break-point="900"][data-theme=pages] .content {
	font-size: 20px;
	text-align: center;
}

.zmart-carousel[tin-slide-break-point="600"][data-theme=pages][data-num-visible="1"] .content,
.zmart-carousel[tin-slide-break-point="900"][data-theme=pages][data-num-visible="1"] .content {
 	font-size: 28px;
	text-align: center;
}

/**
 * Hide element for page with no children.
 */
.zmart-hide-since-no-children {
	display: none !important;
}

/**
 * Google map.
 */
.acf-map {
    width: 100%;
    height: 400px;
    border: #ccc solid 1px;
    margin: 20px 0;
	border-radius: 20px;
}

// Fixes potential theme css conflict.
.acf-map img {
   max-width: inherit !important;
}

/**
 * TinSlide styling.
 */
.tin-slide-prev:before, .tin-slide-prev:after, .tin-slide-next:before, .tin-slide-next:after {
	display: none;
}

.tin-slide-prev svg, .tin-slide-next svg {
	width: 50px;
	height: 50px;
	margin-top: -25px;
	filter: drop-shadow(0px 0 6px rgba(0, 0, 0, 0.25));
}

@media screen and (max-width: 767px) {
	.tin-slide-dots {
		position: relative;
		bottom: auto;
		left: auto;
		transform: none;
		-webkit-transform: none;
		-ms-transform: none;
		-o-transform: none;
		text-align: center;
		margin-top: 10px;
	}
	
	.tin-slide-dots li {
		border-width: 1px;
		border-color: rgba(0, 0, 0, 0.25);
		box-shadow: none;
		-webkit-box-shadow: none;
	}
	
	.tin-slide-dots li:hover,
	.tin-slide-dots li.on {
		background-color: rgba(0, 0, 0, 0.15);
	}
	
	.tin-slide-prev, .tin-slide-next {
		margin-top: -30px;
	}
}