/* Custom popup script by Christian Zagarskas */



/* anim */

#zpop_popup  {-webkit-transition: 0.3s ease-in-out;

    -moz-transition: 0.3s ease-in-out;

    -o-transition: 0.3s ease-in-out;

    transition: 0.3s ease-in-out; }





/* standard  */

.hide { visibility:hidden; display:none !important; opacity:0;}

.show { visibility:visible; display:block !important; opacity:1;}

#zpop_popup .full_cover_img { display:none;}





#zpop_content strong { line-height:45px; font-size:20px;}

#zpop_content .title { text-align:center; font-weight:100; margin:0; padding:5px; font-size:2em;}

#zpop_content p{ margin:0; padding:10px}



#zpop_mask {

 	width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

	z-index: 999991;

	background:rgba(255,255,255,0.95);

	opacity:0;

}





#zpop_popup {

	position: relative;

    margin:0;

	padding:0;

	width:100%;

	height:100%;

	display:block;

}



#zpop_content {

	 position: relative;

    margin: 0 auto;

    background: none;

    padding-bottom: 5px;

    z-index: 999993;

	border:none;

	top:10%;

	text-align:center

}







#zpop_content iFrame, #zpop_content img {

	box-shadow: 5px 5px 20px #000000; border:2px solid #000; background:#3F3F3F;

	 }



.close_pop {

    cursor: pointer;

	position:absolute; z-index:999999 !important;

}



.close_pop { top: 5% !important;}







 .close_pop:hover, .close_pop .fa:hover { }

 

 .next_pop:hover, .next_pop .fa:hover, .prev_pop:hover, .prev_pop .fa:hover { opacity:1;}

 

 .close_pop, .close_pop .fa, .next_pop, .next_pop .fa, .prev_pop, .prev_pop .fa{

  -webkit-transition: opacity .3s ease-in;

  -moz-transition: opacity .3s ease-in;

  -o-transition: opacity .3s ease-in;

  transition: opacity .3s ease-in;

}



 .next_pop, .prev_pop, .close_pop {

	 opacity:0.85; font-size: 2rem; line-height:1rem; 

 }

 

 .next_pop:hover, .prev_pop:hover, .close_pop:hover {

	/*  text-shadow: rgba(0,0,0,0.60) 1px 1px;*/

 }

 

.next_pop .fa, .prev_pop .fa, .close_pop .fa {

 }



.close_pop.standard:after { content: 'X';  font-size:44px; color:#A5A5A5; font-weight:100;}

.prev_pop.standard:after {content: '<';  font-size:74px; color:#A5A5A5; font-weight:100;}

.next_pop.standard:after {content: '>';  font-size:74px; color:#A5A5A5; font-weight:100;}



.prev_pop {left:10%;}

.next_pop {right:10%;}



.prev_pop, .next_pop {

	text-align:center;

    cursor: pointer;

	position:absolute;

	z-index:999995;

}



#group_nav {position:relative;z-index:999995; }

.prev_pop, .prev_pop:hover, .next_pop, .next_pop:hover, .close_pop, .close_pop:hover {

  background:none !important;

}













/* default style ----------------------------------------------  */

/*  ---------------------------------------------- ----------------- */

.default .close_pop{ top: 5% !important; width:100%; text-align:right; padding:0 50px 0 0;}

.default .title{ width:100%; text-align:center; display:block;}



.default .prev_pop, .default .next_pop { margin:-35px 0 0 0; padding:0;}

.default #group_nav { width:100%;

position:absolute; 

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

	}

	

	

.default .title, .default .title { width:100%; text-align:center; display:block; background:none !important}



.default a, .default a{ color:#000000;}



.default #zpop_content, .default #zpop_content {

	width:50% !important; height:50% !important;

}

.default #zpop_content img, .default #zpop_content img {

	max-width:100%;

    max-height:100%;

    width:auto;

    height:auto;

}





/*  ---------------------------------------------- ----------------- */

/*  ---------------------------------------------- ----------------- */













/* centered style ----------------------------------------------  */

/*  ---------------------------------------------- ----------------- */

.centered .close_pop{ top: 5% !important; width:100%; text-align:center}

.centered .title{ width:100%; text-align:center; display:block;}



.centered .prev_pop, .centered .next_pop { margin:-35px 0 0 0; padding:0;}

.centered .prev_pop { left:5%}

.centered .next_pop { right:5%}

.centered #group_nav { width:100%;

position:absolute; 

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

	}

.centered .title { width:100%; text-align:center; display:block; background:none !important}



.centered a, .centered a{ color:#000000;}



.centered #zpop_content { position:absolute; 

  position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

	width:70% !important; height:auto !important;

}

.centered #zpop_content img, .centered #zpop_content img {

	max-width:100%;

    max-height:100%;

    width:auto;

    height:auto;

}









/*  ---------------------------------------------- ----------------- */

/*  ---------------------------------------------- ----------------- */







/* big_gallery style ----------------------------------------------  */

/*  ---------------------------------------------- ----------------- */

.big_gallery .close_pop, .big_gallery .close_pop:hover {

	top: 0 !important; right: 0 !important; padding:15px 20px 20px 20px;

background: rgba(255,255,255,0.95) !important; z-index:999995 !important}

.big_gallery #zpop_content {

    position: relative;

    margin: 0 0 0 0 !important; padding:0 !important;

    top: 0 !important;

    width: 100% !important; min-width: 100% !important;  max-width: 100% !important; 

	height: 100% !important; min-height: 100% !important;  max-height: 100% !important; 

}



.big_gallery #zpop_content img {box-shadow:none !important; border:none !important; background:none !important; width:100%}

 

.big_gallery #zpop_content .the_area {  min-width:50%;}



 /* merge these two togather */

.big_gallery #zpop_content .the_area, .big_gallery #group_nav { 

  position:absolute !important; bottom:12.975% !important; right:-0.175% !important;}

 

.big_gallery #zpop_content .title {background: rgba(255,255,255,0.82); padding:5px 30px !important; 

float:left; clear:none; margin:0 0 2px 0;}



.big_gallery #group_nav {  width:auto !important; min-width:150px;  }

.big_gallery .prev_pop { left:5% !important;}

.big_gallery .next_pop { right:5% !important;}

 

.big_gallery .prev_pop, .big_gallery .next_pop { top:-70px;  line-height: 0.3 !important; 

 height: auto !important; width: auto !important; padding:15px !important}

 

 

 .big_gallery #zpop_content .boxed  { clear:left; margin:2px 0 0 0;

 min-height:75px; background: rgba(255,255,255,0.78); padding:5px 30px !important;  text-align:left !important;}

 .big_gallery #zpop_content .boxed strong {line-height: 21px !important; font-size: 15px !important;}

 .big_gallery #zpop_content .boxed p  { 

  max-width:50% !important; font-size: 0.80rem !important;     line-height: 1.3 !important;

  overflow-wrap: break-word; 

  word-wrap: break-word;

  -ms-word-break: break-all;

  /* This is the dangerous one in WebKit, as it breaks things wherever */

  word-break: break-all;

  /* Instead use this non-standard one: */

  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */

  -ms-hyphens: auto;

  -moz-hyphens: auto;

  -webkit-hyphens: auto;

  hyphens: auto;}

/* big_gallery style ----------------------------------------------  */

/* big_gallery style ----------------------------------------------  */











/* big_gallery_slide style 2----------------------------------------------  */

/* big_gallery_slide style 2 ----------------------------------------------  */

.big_gallery_slide .close_pop{top: -0.1% !important; right: 0.9% !important; z-index:999995 !important}

.big_gallery_slide #zpop_content {

    position: relative;

    margin: 0 0 0 0 !important; padding:0 !important;

    top: 0 !important;

    width: 100% !important; min-width: 100% !important;  max-width: 100% !important; 

	height: 100% !important; min-height: 100% !important;  max-height: 100% !important; 

}



.big_gallery_slide #zpop_content img {box-shadow:none !important; border:none !important; background:none !important; width:100%}

 

.big_gallery_slide #zpop_content .the_area {  min-width:50%;}



 /* do NOT merge these two togather */

.big_gallery_slide #zpop_content .the_area { 

  position:absolute !important; bottom:2.975% !important; right:-0.175% !important; text-align:left; padding:10px;}

  

.big_gallery_slide #group_nav { 

  position:absolute !important; bottom:50% !important; }

 

.big_gallery_slide #zpop_content .title { padding:5px 30px !important; 

float:left; clear:none; margin:0 0 2px 0;}



.big_gallery_slide #group_nav {  width:100% !important; min-width:100%;  }

.big_gallery_slide .prev_pop { left:-0.1% !important;  }

.big_gallery_slide .next_pop { right:-0.1% !important;  }

 

.big_gallery_slide .prev_pop, .big_gallery_slide .next_pop { top:-70px;  line-height: 0.3 !important; padding:15px !important}

 

 

 .big_gallery_slide #zpop_content .boxed  { clear:left; margin:2px 0 0 0;

 min-height:75px; background: rgba(255,255,255,0.78); padding:5px 30px !important;  text-align:left !important;}

 .big_gallery_slide #zpop_content .boxed strong {line-height: 21px !important; font-size: 15px !important;}

 .big_gallery_slide #zpop_content .boxed p  { 

  max-width:50% !important; font-size: 0.80rem !important;     line-height: 1.3 !important;

  overflow-wrap: break-word; 

  word-wrap: break-word;

  -ms-word-break: break-all;

  /* This is the dangerous one in WebKit, as it breaks things wherever */

  word-break: break-all;

  /* Instead use this non-standard one: */

  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */

  -ms-hyphens: auto;

  -moz-hyphens: auto;

  -webkit-hyphens: auto;

  hyphens: auto;}

  

  

.big_gallery_slide.youtube .close_pop  { text-align:right !important; padding:5px; width:auto !important}

.big_gallery_slide.youtube #zpop_content .title{ width:auto !important;

	 text-align:left; float:left !important; display:block !important}



.big_gallery_slide.youtube #zpop_content .btn {padding: 10px;

float:left !important; display:block !important}

.big_gallery_slide.youtube #zpop_content .the_area { position:absolute !important;

top:0; left:0; max-width:75% !important; height:150px}



@media only screen and (min-device-width : 1025px) {

.big_gallery_slide.youtube iframe { padding:100px 0; background:#000 !important}

}

/* big_gallery style ----------------------------------------------  */

/* big_gallery style ----------------------------------------------  */





























/* full_cover style 2----------------------------------------------  */

/* full_cover style 2 ----------------------------------------------  */

.full_cover .close_pop{top: -0.1% !important; right: 0.9% !important; z-index:999995 !important}

.full_cover #zpop_content {

    position: relative;

    margin: 0 0 0 0 !important; padding:0 !important;

    top: 0 !important;

    width: 100% !important; min-width: 100% !important;  max-width: 100% !important; 

	height: 100% !important; min-height: 100% !important;  max-height: 100% !important; 

}



.full_cover #zpop_content .full_cover_img {

    position:absolute; display:block;

    margin: 0 0 0 0 !important; padding:0 !important;

    top: 0;right: 0;bottom: 0;left: 0;

    width: 100% !important; min-width: 100% !important;  max-width: 100% !important; 

	height: 100% !important; min-height: 100% !important;  max-height: 100% !important;

	background-position:center; background-repeat:no-repeat; background-size:cover;

	z-index:1;

}





.full_cover #zpop_content img { display:none; visibility:hidden;}

 

.full_cover #zpop_content .the_area {  min-width:50%; z-index:99;}



 /* do NOT merge these two togather */

.full_cover #zpop_content .the_area { 

  position:absolute !important; bottom:2.975% !important; 

  right:-0.175% !important; text-align:left; padding:10px 20px;}

  

.full_cover #group_nav { 

  position:absolute !important; bottom:50% !important; }

 

.full_cover #zpop_content .title { padding:5px 30px !important; 

float:left; clear:none; margin:0 0 2px 0;}



.full_cover #group_nav {  width:100% !important; min-width:100%;  }

.full_cover .prev_pop { left:-0.1% !important;  }

.full_cover .next_pop { right:-0.1% !important;  }

 

.full_cover .prev_pop, .full_cover .next_pop { top:-70px;  line-height: 0.3 !important; padding:15px !important}

 

 

 .full_cover #zpop_content .boxed  { clear:left; margin:2px 0 0 0;

 min-height:75px; background: rgba(255,255,255,0.78); padding:5px 30px !important;  text-align:left !important;}

 .full_cover #zpop_content .boxed strong {line-height: 21px !important; font-size: 15px !important;}

 .full_cover #zpop_content .boxed p  { 

  max-width:50% !important; font-size: 0.80rem !important;     line-height: 1.3 !important;

  overflow-wrap: break-word; 

  word-wrap: break-word;

  -ms-word-break: break-all;

  /* This is the dangerous one in WebKit, as it breaks things wherever */

  word-break: break-all;

  /* Instead use this non-standard one: */

  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */

  -ms-hyphens: auto;

  -moz-hyphens: auto;

  -webkit-hyphens: auto;

  hyphens: auto;}

  

  

.full_cover.youtube .close_pop  { text-align:right !important; padding:5px; width:auto !important}

.full_cover.youtube #zpop_content .title{ width:auto !important;

	 text-align:left; float:left !important; display:block !important}



.full_cover.youtube #zpop_content .btn {padding: 10px;

float:left !important; display:block !important}

.full_cover.youtube #zpop_content .the_area { position:absolute !important;

top:0; left:0; max-width:75% !important; height:150px}



@media only screen and (min-device-width : 1025px) {

.full_cover.youtube iframe { padding:100px 0; background:#000 !important}

}

/* full_cover style ----------------------------------------------  */





















/* patch for small phones */

@media only screen and (max-width: 40em) {  

.default #zpop_content { max-width:100%; padding:0; top:15%;}

.default #zpop_content img{ padding:0; box-shadow:none; border:none !important; max-width:90% !important;}



.default #zpop_content iFrame{ padding:0; box-shadow:none; border:none !important; max-width:100% !important; max-height:45% !important;}

.default #zpop_content { width:90% !important; height:90% !important; }

.default #zpop_content .title { font-size:1.5375rem; height:80px; display:block;}

.default #group_nav { top:13px;} .default .close_pop { top:2% !important;}

.default .prev_pop { left: -10%;} .default .next_pop { right: -10%;}

.default .prev_pop:after, .default .next_pop:after { font-size:50px}

.default .close_pop:after { font-size:36px}



.default.youtube #zpop_content { top: 10%;}

.default #zpop_content .title {    font-size: 1rem; height: auto;}



/* big_gallery_slide ----------------------------------------------  */

.big_gallery_slide #zpop_content { max-width:100%; width:auto; padding:0; }



.big_gallery_slide #zpop_content iFrame, .big_gallery_slide #zpop_content img{ padding:0; box-shadow:none; border:none;}



.big_gallery_slide #zpop_content .title { font-size:1.5375rem; display:block; padding:2px 10px !important; width:100%; text-align:left !important}

.big_gallery_slide #zpop_content .boxed { padding:2px 5px !important;}

.big_gallery_slide #zpop_content .boxed p { max-width:100% !important; padding:0 !important;}



.big_gallery_slide #group_nav { top:45%;}



.big_gallery_slide #zpop_content .the_area { 

bottom:-0.01% !important; left:-0.01% !important; right:-0.01% !important; width:100% !important; }



.big_gallery_slide .mobile_gallery {

	height:100%;

     background-size:cover !important;

	 background-attachment:scroll !important;

	 background-position:center !important;

}



.big_gallery_slide.youtube #zpop_content {}

.big_gallery_slide.youtube #zpop_content .title {font-size: 1.1rem; height: auto; text-align:center !important; display:block;}

.big_gallery_slide.youtube #zpop_content .the_area {}







}



	

/*iPhone 6 portrait 736px */

@media only screen and (max-device-width : 46em) and (orientation : portrait) { 



	.big_gallery_slide.youtube #zpop_content .btn { margin:0 !important; 

	 height:auto !important; font-size:1rem; padding:5px 10px}

 

}





/* https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

patch for iPads V everything but the iPad Minni  and (max-width: 38em)

768px => 1024px */

@media only screen and (min-device-width: 48em) and (max-device-width: 64em) {

#group_nav { top:13px;} .close_pop { top:20px;}

}







/* Landscape HACKS */

@media only screen and (min-width:320px) and (max-width:773px) and (orientation:landscape) {

	.default #zpop_content iFrame{ padding:0; box-shadow:none; border:none !important; max-width:100% !important; max-height:100% !important;}

		.default #zpop_content{ top:20%;}

	

/* big_gallery_slide ----------------------------------------------  */

	.big_gallery_slide #zpop_content .title { font-size:1.5375rem; display:block; padding:2px 10px !important; width:100%; text-align:left !important}

.big_gallery_slide #zpop_content .boxed { padding:2px 5px !important;}

.big_gallery_slide #zpop_content .boxed p { max-width:100% !important; padding:0 !important;}



.big_gallery_slide #zpop_content .the_area { 

bottom:-0.01% !important; right:-0.01% !important; min-width:70% !important; max-width:70% !important; }



.big_gallery_slide .mobile_gallery {

	height:100%;

     background-size:cover !important;

	 background-attachment:scroll !important;

	 background-position:center !important;

}



/* big_gallery_slide + youtube----------------------------------------------  */

.big_gallery_slide.youtube #zpop_content { top:0 !important}

.big_gallery_slide.youtube #zpop_popup .close_pop {

	right: 0 !important; top:-0.1% !important; text-align:left !important; padding:10px 20px 0 0;} 

.big_gallery_slide.youtube #zpop_content .the_area { top:0 !important; left:0 !important;

max-height:50px !important; min-height:50px !important; overflow:hidden !important; position:absolute !important} 

.big_gallery_slide.youtube #zpop_content .title { float:left;

	font-size: 1rem; text-align:left; width:auto; 

	}

.big_gallery_slide.youtube #zpop_content .btn { margin:0 !important; width:auto !important; height:auto !important; font-size:0.8rem; padding:0 5px; 

float:left;}

 

 .content.fill #zpop_content, .content.fill #zpop_content .the_area { 

 top: 2% !important; height:98% !important; width:98% !important; margin:0 auto !important;

 max-height:98% !important; max-width:98% !important; 

  }

  

  .content.fill .close_pop  { width: 96% !important; text-align: right !important;

  }

 

}



/* Landscape for IPAD max-width:1024px */ 

@media only screen and (max-width: 64em) and (orientation:landscape) {

	.big_gallery_slide.youtube #zpop_content iframe  {

		width:100% !important; height:100% !important;

		max-width:100% !important; max-height:100% !important;

	}

}	



/* Portrait for IPAD max-height:1024px */

@media only screen and (max-height: 64em) and (orientation:portrait) {

	.big_gallery_slide.youtube #zpop_content iframe  {

		width:100% !important; height:100% !important;

		max-width:100% !important; max-height:100% !important;

	}

	.big_gallery_slide.youtube #zpop_content .btn  { clear:left;

	}

	.big_gallery_slide.youtube #zpop_content .title  { height:auto !important;

	}

}	

	

/* Landscape */

@media only screen and (min-device-width: 320px) and (max-device-width: 768px) { 

  

  .big_gallery_slide .mobile_gallery {

	height:100%;

     background-size:cover !important;

	 background-attachment:scroll !important;

	 background-position:center !important;

}



 

 /* 

#zpop_content img{ max-width:55%; max-height:200px; float:left;}



#zpop_content .title { font-size:1.5375rem; height:50px; display:block; text-align:left; }

#zpop_content p, #zpop_content p strong { float:left ; font-size:1rem; text-align:left;  }

#zpop_content p strong { display:block; width:100%; }

#zpop_content p { max-width:45%; padding-top:0;}

#group_nav { top:5px;} .close_pop { top:20px;}

.prev_pop { left: -5%;} .next_pop { right: -5%;}

.prev_pop:after, .next_pop:after { font-size:40px}

.close_pop:after { font-size:26px}

 */

 

 

}





@media only screen 

  and (min-device-width: 768px) 

  and (max-device-width: 1024px) {

	  

.default #zpop_content { max-width:100%; padding:5px;}

.default #zpop_content img, .default #zpop_content iFrame{ max-width:95%; max-height:400px; }

.default #zpop_content iFrame{ max-height:450px !important}

.default #group_nav { top:40%;} .default .close_pop { top:20px;}

.default #zpop_content .title { font-size:1.8375rem; height:65px; display:block;}

.default .prev_pop { left:0;} .default .next_pop { right:0;}

.default .prev_pop:after, .default .next_pop:after { font-size:70px}

.default .close_pop:after { font-size:45px}









/* big_gallery_slide ----------------------------------------------  */

.big_gallery_slide #zpop_content { max-width:100%; width:auto; padding:0; }

.big_gallery_slide #zpop_content iFrame, .big_gallery_slide #zpop_content img{ padding:0; box-shadow:none; border:none;}

.big_gallery_slide #group_nav { top:45%;}

.big_gallery_slide .mobile_gallery {

	height:100%;

     background-size:cover !important;

	 background-attachment:scroll !important;

	 background-position:center !important;

}







.big_gallery_slide #zpop_content .title { font-size:1.5375rem; display:block; padding:2px 10px !important; width:100%; text-align:left !important}

.big_gallery_slide #zpop_content .boxed { padding:2px 5px !important;}

.big_gallery_slide #zpop_content .boxed p { max-width:100% !important; padding:0 !important;}



.big_gallery_slide #zpop_content .the_area { 

bottom:-0.01% !important; right:-0.01% !important; min-width:70% !important; max-width:70% !important; }



}













/* for inbetween sizes */

@media only screen and (min-width: 599px) and (max-width: 1199px) { 

.big_gallery_slide .mobile_gallery {

	height:100%;

     background-size:cover !important;

	 background-attachment:scroll !important;

	 background-position:center !important;

}

}