body {
	margin: 0px;
	user-select: none;
	position: relative;
}

body.preview #gallery,
body.preview #pageActions,
body.preview #comicActionEditTitle,
body.preview #comicActionDeleteComicBook,
body.preview #sectionTop,
body.preview #sectionMenu,
body.preview #sectionFooter,
body.preview #sectionBottomBar,
body.preview #comicArtifactActionContainer,
body.preview .comic-artifact .resize-icon,
body.preview .panel-action-container {
	display: none;
}

body.preview .comic-artifact.selected {
    border: none !important;
}

body.preview #sectionComicBook {
		padding-top: 45px;
}

body.preview #comicBookContainer {
	margin-left: 17%;
}

@media (max-width:766px){
	body.preview #comicBookContainer {
		margin-left: 0%;
	}
}

body.preview #pageActionBackFromPreview {
	display: block;
}

.header-bar {
	background-color: #f0efe6;
	width: 100%;
	height: 0px;
	margin-top: -31px;
}

/* =================================
  template styling overrides
  ================================== */
/* background image tree left side */
.elementor-6 .elementor-element.elementor-element-0b240f8 > .elementor-background-overlay,
/* background image tree right side */
.elementor-6 .elementor-element.elementor-element-0b240f8:not(.elementor-motion-effects-element-type-background),
.elementor-6 .elementor-element.elementor-element-0b240f8 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-size: 650px 1105px;
}

/* gallery padding */
.elementor-6 .elementor-element.elementor-element-b3659d1 > .elementor-element-populated {
	padding: 20px 10px 40px 40px;
}

/* gallery tab icons */
.elementor-6 .elementor-element.elementor-element-0e32450 > .elementor-widget-container {
	left: 0px;
}

@media (max-width:1700px){
	.elementor-6 .elementor-element.elementor-element-0b240f8 > .elementor-background-overlay,
	.elementor-6 .elementor-element.elementor-element-0b240f8:not(.elementor-motion-effects-element-type-background), 
	.elementor-6 .elementor-element.elementor-element-0b240f8 > .elementor-motion-effects-container > .elementor-motion-effects-layer	{
		background-size: 600px 950px;
	}
}

@media (max-width:1400px){
	.elementor-6 .elementor-element.elementor-element-0b240f8 > .elementor-background-overlay,
	.elementor-6 .elementor-element.elementor-element-0b240f8:not(.elementor-motion-effects-element-type-background), 
	.elementor-6 .elementor-element.elementor-element-0b240f8 > .elementor-motion-effects-container > .elementor-motion-effects-layer	{
		background-size: 450px 750px;
	}
}

@media (max-width:1000px){
	.elementor-6 .elementor-element.elementor-element-0b240f8 > .elementor-background-overlay,
	.elementor-6 .elementor-element.elementor-element-0b240f8:not(.elementor-motion-effects-element-type-background), 
	.elementor-6 .elementor-element.elementor-element-0b240f8 > .elementor-motion-effects-container > .elementor-motion-effects-layer	{
		background-size: 300px 500px;
	}
}

@media (max-width:500px){
	.elementor-6 .elementor-element.elementor-element-0b240f8 > .elementor-background-overlay,
	.elementor-6 .elementor-element.elementor-element-0b240f8:not(.elementor-motion-effects-element-type-background), 
	.elementor-6 .elementor-element.elementor-element-0b240f8 > .elementor-motion-effects-container > .elementor-motion-effects-layer	{
		background-size: 150px 200px;
	}
}

/* =================================
   Menu
   ================================= */
.elementor-widget-nav-menu {
	position: absolute;
}

#menuMijnVerhalenMobile li a {
	display: inline-block;
}

.elementor-nav-menu, .elementor-nav-menu li.menu-item-username {
	display: none;
}
	
/* =================================
   Introduction
   ================================= */
#introductionSection {
	background-color: #EEEEE5;
	height: 1200px;
}

.intro-tekst {
	background-image: url('../img/extern/photo-mask-slideshow-tall-951x1024.png');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-color: white;
	position: absolute;
	left: 30%;
	top: 200px;
	padding: 120px 45px 80px 181px;
	height: 600px;
	font-family: "Shadows Into Light Two", Sans-serif;
	width: 650px;
}

.intro-tekst .start-now-button {
	z-index: 3;
}

.intro-tekst p {
    font-size: 20px;
}

.intro-tekst-heading-underline {
	background-image: url('../img/extern/underline-dot.png');
	background-repeat:no-repeat;
	background-size: 100% auto;
	width: 150px;
	height: 20px;
	margin-top: 20px;
}

.intro-background-left {
	background-image: url('../img/extern/intro-achtergrond.png');
	background-position:top left;
	background-repeat:no-repeat;
	background-size:contain;
	position: absolute;
	top: 120px;
	left: 0px;
	height: calc(100% - 120px);
	width: 100%;
	z-index: 2;
}

.intro-background-topright {
	background-image: url('../img/extern/tree-right-swing.png');
	background-position:top right;
	background-repeat:no-repeat;
	background-size:contain;
	position: absolute;
	top: 120px;
	right: 0px;
	height: 40%;
	width: 40%;
	z-index: 2;
}

.intro-background-bottomright {
	background-image: url('../img/extern/town-bottom-right.png');
	background-position:bottom right;
	background-repeat:no-repeat;
	background-size:contain;
	position: absolute;
	bottom: 0px;
	right: 0px;
	height: 40%;
	width: 40%;
}

.intro-background-bottomleft {
	/*background-image: url('../img/extern/hill-left.png');*/
	background-position:bottom left;
	background-repeat:no-repeat;
	background-size:contain;
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: 40%;
	width: 40%;
}

.intro-main-image {
	background-image: url('../img/extern/lady-reading.png');
	background-repeat:no-repeat;
	background-size:contain;
	width: 25%;
	height: 25%;
	position: absolute;
	left: 63%;
	top: 33%;
	z-index: 2;
}

.intro-main-image-grass {
	background-image: url('../img/extern/grass.png');
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 19%;
	position: absolute;
	left: 0px;
	bottom: 0px;
	z-index: 2;
	display: none;
}

.intro-cloud-balloon-image {
	/*background-image: url('../img/extern/cloud-hotair-balloon.png');*/
	background-repeat:no-repeat;
	background-size:contain;
	width: 20%;
	height: 20%;
	position: absolute;
	left: 70%;
	top: 15%;
}

.intro-header {
	color: #8D877D;
	font-family: "Love Ya Like A Sister", Sans-serif;
	font-size: 48px;
	text-transform: capitalize;
	letter-spacing: 1px;
	background-color: #f4f4f4;
	height: 120px;
	width: 100%;
	text-align: center;
	padding-top: 40px;
	line-height: 50px;
}

@media (max-width:2000px){
	.intro-main-image {
		left: 69%;
		top: 43%;
	}
}

@media (max-width:1500px){
	.intro-main-image {
		top: 52%;
	}
}

@media (max-width:1200px){
	.intro-tekst {
		top: 300px;
	}
	
	.intro-main-image {
		top: 62%;
	}
}

@media (max-width:900px){
	.intro-main-image {
		display: none;
	}
	
	.intro-tekst {
		left: 26%;		
		width: 600px;
	}
}

@media (max-width:767px){
	.intro-main-image {
		display: none;
	}
	
	.intro-background-left {
		display: none;
	}
	
	.intro-tekst {
		left: 0%;
		width: 100%;
		background-image: none;
		background-color: #efefe5;
		padding: 20px;
		top: 200px;
	}
	
	#introductionSection {
		height: 750px;
	}
	
	.intro-main-image-grass {
		display: block;
	}
}


@media (max-width:765px){
	
}

@media (max-width:396px){
	.intro-header {
		padding-top: 0px;
	}
}

/* =================================
   Comic book
   ================================= */
#sectionComicBook {
	display: none;
}

#comicBookContainer {
	min-height: 1200px;
}

#comicBookContainer.gallery-fixed {
    margin-left: 35%;
}

#comicBookContainer .elementor-widget-icon .elementor-widget-container {
    float: left;
    margin-top: -70px;
    margin-right: 10px;
}

#comicBookContainer #pageActionSaveBook {
	float: right !important;
}

/* action buttons */
#comicBookContainer .elementor-widget-icon .elementor-widget-container {
	background-size: 70px auto;
    width: 70px;
    height: 71px;
}

.comic-header {
    width: 100%;
	margin-bottom: 20px;
}

.comic-page-count {
	text-align: center;
	display: inline-block;
	width: 100%;
	margin-top: 10px;
}

.page-navigation.bottom .comic-page-count {
	margin-top: 37px;
}

.page-navigation {
	height: 65px;
	margin-top: -25px;
	width: 100%;
	position: relative;
}

.next-page {
	width: 32px;
	height: 32px;
	background-image: url('../img/icons/next-icon.png');
	position: absolute;
	top: 35px;
	right: 10px;
	cursor: pointer;
}

.previous-page {
	width: 32px;
	height: 32px;
	background-image: url('../img/icons/previous-icon.png');
	position: absolute;
	top: 35px;
	left: 10px;
	cursor: pointer;
}

.comic-page {
	display:flex;
	flex-wrap:wrap;
	width: 100%;
}

.edit-title {
    background-image: url('../img/action-button-edit-title.png');
    width: 41px;
    height: 41px;
    display: inline-block;
    margin-left: 15px;
	vertical-align: middle;
}

.delete-comic-book {
    background-image: url('../img/action-button-delete-comic-book.png');
    width: 41px;
    height: 41px;
    display: inline-block;
    margin-left: 15px;
	vertical-align: middle;
}

/* =================================
   gallery with comic artifacts 
   ================================= */
#gallery {
    position: relative;
    height: 100%;
    float: left;
    overflow: visible;
	z-index: 9999;
	transition: width 0.25s;
}

@media (max-width:766px){
	#gallery {
		display: none;
	}
}

#gallery.gallery-fixed {
	position: fixed;
	top: 25px;
	height: 94%;
}

#gallery.wide {
	width: 90% !important;
}
#gallery .elementor-column-wrap {
	border: 2px solid #8d877d;
}

#gallery.wide .elementor-column-wrap {
	background-color: rgba(255, 255, 255, 1);
}

.gallery-tab-content {
	width: calc(100% - 55px) !important;
	padding-left: 10px;
	display: none;
}

#gallery .comic-artifact {
    max-width: 25% !important;
    position: relative;
    margin: 10px;
	display: inline-block;
}

#gallery.wide .comic-artifact {
	max-width: 10% !important;
}

#gallery .comic-artifact.background-artifact {
	max-width: 40% !important;
}

#gallery.wide .comic-artifact.background-artifact {
	max-width: 30% !important;
}

@media (max-width:1600px){
	#gallery .comic-artifact {
		max-width: 33% !important;
	}
	
	#gallery.wide .comic-artifact {
		max-width: 14% !important;
	}
	
	#gallery .comic-artifact.background-artifact {
		max-width: 90% !important;
	}
	
	#gallery.wide .comic-artifact.background-artifact {
		max-width: 30% !important;
	}
}

@media (max-width:1000px){
	#gallery .comic-artifact {
		max-width: 100% !important;
	}
	
	#gallery.wide .comic-artifact {
		max-width: 20% !important;
	}
	
	#gallery.wide .comic-artifact.background-artifact {
		max-width: 43% !important;
	}
}

.gallery-tab {
    position: relative;
}

.gallery-tab-arrow {
    display: none;
	width: 20px;
    height: 20px;
    position: absolute;
    right: -27px;
    top: 30%;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #787974;
}

.gallery-tab.active .gallery-tab-arrow {
	display: block;
}

@media (max-height:900px){
	#gallery #galleryContent #galleryTabContainer .gallery-tab {
		background-size: 62px auto;
		width: 80px;
		height: 62px;
	}
}

#actionExpandGallery {
    background-image: url('../img/icons/arrow-expand-icon.png');
    width: 48px;
    height: 48px;
    position: absolute;
    top: 50%;
    right: -14px;
    background-color: #dde3bd;
    border-radius: 10px;
    z-index: 2;
    border: 1px solid #9bb36a;
    cursor: pointer;
}

/* gallery tab icons */
.elementor-widget-icon .elementor-widget-container {
    padding: 20px 20px 20px 20px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 73px auto;
    width: 90px;
    height: 76px;
    margin-top: 3px;
}

/* Gallery scroll behaviour */
.gallery-tab-content {
    overflow-y: scroll;
    height: 100%;
}

/* Gallery tab iconen van comic artifcacts */
.elementor-element-0e32450 {
	width: 120px !important;
	position: relative;
	margin-left: -65px;
	height: 100%;
	overflow: hidden;
}

.elementor-widget-container {
	cursor: pointer;
}

/* =================================
   Page actions
   ================================= */
#pageActionBackFromPreview {
	display: none;
	position: absolute;
	top: -100px;
	left: -25px;
}


/* ===================================================
  Panels
  ==================================================== */
.panel {
	background-color:#fff;
	border:solid 2px #000;
	box-shadow:0 6px 6px -6px #000;
	display:inline-block;
	flex:1 1;
	height:200px;
	margin:1vmin;
	overflow:hidden;
	position:relative;
	box-sizing: border-box;
	z-index:0;
}

.panel.drop-active {
	/*border: dashed 3px darkblue;*/
}

.panel.drop-target {
	border: solid 7px #44d44a;
}

.panel-text {
  background-color:#fff;
  border:solid 2px #000;
  margin:0;
  padding:3px 10px;
}

.panel-text-top-left {
  left:-6px;
  position:absolute;
  top:-2px;
  transform:skew(-15deg);
}

.panel-text-bottom-right {
  bottom:-2px;
  position:absolute;
  right:-6px;
  transform:skew(-15deg);
}

.panel.width-100 {
  flex-basis: 100%;
}

.panel.width-66 {
  flex-basis: 62%;
}

.panel.width-50 {
  flex-basis: 46%;
}

.panel.width-33 {
  flex-basis: 30%;
}

/* ===================================================
  Panel actions
  ==================================================== */
.panel-action-container {
	width: 32px;
    position: absolute;
    left: 0px;
    top: 50px;
	z-index: 99999;
}

.panel-action {
    width: 32px;
    height: 32px;
    float: left;
	cursor: pointer;
	margin-bottom: 10px;
}

.panel-action-resize-text {
	display: none;
    position: absolute;
    left: 30%;
    top: 35%;
    font-size: 70px;
	z-index: 99999;
}

.panel-action.resize-bigger {
	background-image: url('../img/icons/resize-bigger.png');
}
 
.panel-action.resize-smaller {
	background-image: url('../img/icons/resize-smaller.png');
}

.panel-action.panel-delete {
	background-image: url('../img/icons/delete-panel.png');
}
.panel-action.panel-add {
	background-image: url('../img/icons/add-panel.png');
}

/* ===================================================
  Comic-artifact
  ==================================================== */
.comic-artifact {
	position: absolute;
	border-radius: 15px !important;
	z-index: 1;
	touch-action: none;
	overscroll-behavior: none;
	max-width: none !important;
}

.comic-artifact.selected  {
	border: 3px dashed rgb(155, 179, 106) !important;
}

.comic-artifact.dragging  {
	z-index: 9999999;
}

.comic-artifact img {
	display: block;
	width: 100%;
	height: 100%;
}

.comic-artifact.background-artifact {
	border-radius: 0px !important;
}

.comic-artifact.can-drop {
	/*border: dashed 3px green;*/
}

.comic-artifact .resize-icon {
	background-image: url('../img/icons/resize-artifact.png');
	width: 32px;
	height: 32px;
	position: absolute;
	display: none;
}

.comic-artifact.selected .resize-icon {
	display: block;
}

.comic-artifact .resize-right-side {
	right: -18px;
	top: 40%;
	transform: rotate(-45deg);
}

.comic-artifact .resize-right-bottom-side {
	right: -18px;
	bottom: -18px;
}

.comic-artifact .resize-bottom-side {
	bottom: -18px;
	right: 40%;
	transform: rotate(45deg);
}

.comic-artifact .add-artifact {
	display: none;
	background-image: url('../img/icons/add-artifact.png');
	width: 32px;
	height: 32px;
	position: absolute;
	right: 0px;
	top: 0px;
	cursor: pointer;
}

#gallery .comic-artifact .add-artifact {
	display: block;
}

.comic-artifact .artifact-added {
	display: none;
	background-image: url('../img/icons/artifact-added.png');
	width: 48px;
	height: 48px;
	position: absolute;
	right: 35%;
	top: 35%;
}

/* ===================================================
  Comic-artifact actions
  ==================================================== */
  
#comicArtifactActionContainer {
	position: absolute;
	left: -10000px;
    z-index: 99999999;
    height: 26px;
	background-color: #f0efe6;
	border: 2px solid #8d877d;
    border-radius: 15px;
    padding: 7px 15px;
}
  
#comicArtifactActionContainer .comic-artifcact-action {
	width: 27px;
	height: 27px;
	cursor: pointer;
	float: left;
	margin-right: 15px;
	background-size: 27px 27px;
}

#comicArtifactActionContainer .comic-artifcact-action:last-child {
    margin-right: 0px;
}

#comicArtifactActionContainer #comicArtifactActionToForeground {
	background-image: url('../img/icons/foreground.png');
}

#comicArtifactActionContainer #comicArtifactActionToBackground {
	background-image: url('../img/icons/background.png');
}

#comicArtifactActionContainer #comicArtifactActionMirrorHorizontaal {
	background-image: url('../img/icons/mirror-horizontaal.png');
}

#comicArtifactActionContainer #comicArtifactActionMirrorVerticaal {
	background-image: url('../img/icons/mirror-verticaal.png');
}


#comicArtifactActionContainer #comicArtifactActionDelete {
	background-image: url('../img/icons/delete.png');
}

#comicArtifactActionContainer #comicArtifactActionTextfield {
	background-image: url('../img/icons/textfield.png');
}

#comicArtifactActionContainer #comicArtifactActionRotate {
	background-image: url('../img/icons/rotate.png');
}


/* ===================================================
  Text balloons
  ==================================================== */
.text-balloon-container img.text-balloon {
    width: 100%;
    height: 100%;
}

.text-balloon-content {
    position: absolute;
    width: 100%;
    text-align: center;
	padding: 10px 30px;
    box-sizing: border-box;
	z-index: 2;
	color: black;
	font-family: "Comic Sans MS", "Comic Sans", "ChalkboardSE-Regular";
	line-height: 1.2em;
	font-size: 1.5vw;
	padding: 5px 5px;
}

@media (min-width:767px){
	.text-balloon-content {
		font-size: 1vw;
		padding: 7px 15px;
	}
}

@media (min-width:1000px){
	.text-balloon-content {
		padding: 12px 15px;
	}
}

@media (min-width:1500px){
	.text-balloon-content {
		padding: 15px 25px;
	}
}

@media (min-width:2000px){
	.text-balloon-content {
		padding: 20px 40px;
	}
}

.text-balloon-content.margintop {
	margin-top: 10px;
}

.text-balloon-container.mirror-verticaal .text-balloon-content {
    bottom: 0px;
}

.panel {
  /*background-image:radial-gradient(circle, #c3fdc3, #cde895););*/
} 

/* ===================================================
  Input dialog
  ==================================================== */
.custom-dialog-container {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color:rgba(0,0,0,.75);
	top: 0px;
	left: 0px;
	z-index: 99999;
	display: none;
	font-family:var( --e-global-typography-91b63da-font-family ), Sans-serif;
}

.custom-dialog {
	position: fixed;
	width: 500px;
	height: auto;
	left: 40%;
	top: 40%;
	background-color: #efeee4;
	padding: 50px 50px 35px 50px;
	border-radius: 20px;
	border: 2px solid #8d877d;
	z-index: 999999;
}

.custom-dialog.multiline {
	height: 300px;
}

.custom-dialog .dialog-text {
    font-size: 22px;
    margin-bottom: 20px;
}

.custom-dialog textarea {
	width: 100%;
	font-size: 18px;
	height: 30px;
}

.custom-dialog.multiline textarea {
	height: 100px;
}

.custom-dialog .dialog-button-bar {
    width: 100%;
	margin-top: 30px;
}

.custom-dialog .dialog-button-bar button {
	float: right;
	margin-left: 15px;
}

.custom-dialog .dialog-button-bar button.dialog-button-register {
	float: left;
	margin-left: 0px;
}

.custom-dialog .dialog-button-bar .dialog-button-confirm {
	width: 120px;
}

.custom-dialog .dialog-button-bar .dialog-button-confirm.large {
	width: 200px;
}

.custom-dialog .dialog-row {
	margin-bottom: 10px;
}

.custom-dialog .dialog-row input {
    width: 100%;
	height: 35px;
	font-size: 17px;
}

.custom-dialog label {
	width: 100%;
	float: left;
	font-size: 18px;
}

.form-dialog-container {
    z-index: 9999;
}

#registerDialog {
	height: 480px;
	top: 25%;
	z-index: 99999;
}

#loginDialog {
	height: 350px;
	width: 700px;
	top: 25%;
	z-index: 99999;
}

@media (max-width:1200px){
	.custom-dialog {
		left: 25%;
	}
}

@media (max-width:770px){
	.custom-dialog {
		left: 17%;
	}
}

@media (max-width: 600px){
	.custom-dialog {
		left: 15px;
		width: 93%;
	}
}

/* ===================================================
  Friends dialog
  ==================================================== */
#friendsDialog {
	height: 80%;
	top: 10%;
	left: 35%;
	width: 700px;
}

#friendsDialog .friends-container {
    position: relative;
    height: calc(100% - 150px);
    overflow-y: scroll;
}

#friendsDialog .friend-comic-list {
	display: none;
	font-size: 20px;
	clear: both;
}

#friendsDialog .friend-comic-list li {
	margin-bottom: 10px;
}

#friendsDialog .dialog-row .friend-name-label {
    font-size: 23px;
    margin-bottom: 25px;
	width: auto;
	clear: both;	
	height: 40px;
	padding-top: 10px;
}

#friendsDialog .dialog-row .friend-name-label i {
    font-size: 18px;
}

#friendsDialog .dialog-row .friend-name-label.accepted {
	padding-right: 40px;
	cursor: pointer;
	background-image: url('../img/icons/next-icon.png');
	background-repeat: no-repeat;
	background-position: right;
	background-size: 28px 28px;
}

#friendsDialog .dialog-text {
	font-size: 25px;
	margin-bottom: 40px;
}

.accept-friend, .decline-friend {
	width: 32px;
	height: 32px;
	cursor: pointer;
	display: block;
	margin-top: -5px;
	float: right;
	margin-left: 10px;
}

.accept-friend {
	background-image: url('../img/icons/accept-friend.png');
}

.decline-friend {
	background-image: url('../img/icons/decline-friend.png');
}

/* Add friend UI */
.show-add-friend-button {
    background-image: url('../img/icons/add-friend.png');
	width: 40px;
    height: 40px;
    position: absolute;
    right: 100px;
    top: 50px;
    background-size: 40px 40px;
    cursor: pointer;
}

.add-friend-container {
    border: 2px solid #8d877d;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 15px;
	width: 400px;
	display: none;
}

.add-friend-button-bar {
    margin-top: 15px;
}

.add-friend-button-bar button {
    font-size: 15px;
    padding: 10px 20px;
}

.add-friend-container input {
	width: 332px;
	font-size: 15px;
	margin-top: 7px;
}

/* ===================================================
  Footer
  ==================================================== */
#sectionFooter {
	z-index: 3;
}