/* Dieser Eintrag entfernt den gepunkteten Rahmen um Links beim anklicken. */

a:focus {

	outline: none;

}



.fg_design ul.fg_pages_nav {

	XXdisplay: inline;

	list-style-type: none;

	padding-left: 0px;

}



.fg_design ul.fg_pages_nav li {

  	display: inline;

	padding-right: 10px;

  	padding-left: 15px;

  	background: url(./images/crumbs.png) no-repeat left center;

}



.fg_design ul.fg_pages_nav li a.current {

  font-weight: bold;

}





.clear {

	clear: both;

}



hr.clear {

	clear: both;

	padding-top: 15px;

	border:0;

}



figure {margin:0; padding:0;}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

	categories AND photos:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */



.fg_wrapper ul {

/* ul.categories, ul.photostyle { */

	list-style: none;

	list-style-type: none;

	list-style-image: none;

	padding: 0;

	margin:0;	

	clear:left;

	position:relative;

}



.fg_design ul {

/* ul.categories, ul.photostyle { */	

	width:100%;	

	text-align:left;

	list-style: none;

    list-style-type: none;

    list-style-image: none;

	padding: 0;

	margin:0;

}





.fg_wrapper ul li  {

	list-style: none;

	list-style-type: none;

	list-style-image: none;

	display: block;

	

}



.fg_design ul li  {	

	float:left;

	margin: 0 0.5% 10px 0.5%;	

	padding: 0px;

	display: block;	

}











/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

	categories

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */



.fg_wrapper ul.categories li {

	position:relative;

	overflow:hidden;

}







.fg_wrapper ul.categories li a  {

	position:relative;

}



.fg_design ul.categories li a em {

	display:block;

	box-sizing: border-box;

	

	height:68px;

	width:100%;

	padding: 18px 0 0 5%;

	margin-top:-75px;	

	background: transparent url(images/folderbg.png) no-repeat ;

	overflow:hidden;

	font-size:12px;

	line-height:110%;

	font-style:normal;

	color:#fff;

	

}



.fg_design ul.categories  a img  {

	/*box-shadow:         0px 3px 8px #333;*/

	border:0;

	border-radius: 0 30px 0 0;

}



.fg_design ul.categories a.inactive {opacity:0.1;}





/*with Headlines*/

.fg_design ul.captionlist {width:104%; }

.fg_design ul.captionlist li.group {float:left; width:46% ! important; margin: 0 2% 10px 0; padding: 0 2% 10px 0; height:60px;  overflow:hidden; }

.fg_design ul.captionlist li a  {display:block; height:60px; text-decoration: none; font-weight:normal; line-height:120%; font-size: 12px; background: rgba(200, 200, 200, 0.2); transition:background 0.2s;}

.fg_design ul.captionlist li a:hover  {background: rgba(255, 255, 255, 0.4); transition:background 1s;}

.fg_design ul.captionlist .backgroundblock {display:block; float:left; width: 100px; height:60px; margin: 0 2% 0 0; background-size:cover;}

.fg_design ul.captionlist .cat_caption {display:block;  font-size: 14px; line-height:120%; }

.fg_design ul.captionlist .cat_description {}



.rfg_narrow .fg_design ul.captionlist, .rfg_sidebar .fg_design ul.captionlist {width:100%; }

.rfg_narrow .fg_design ul.captionlist li.group, .rfg_sidebar .fg_design ul.captionlist li.group {width:100% ! important; margin: 0 0 10px 0; padding: 0 0 10px 0;}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

	photos

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */





.fg_wrapper ul.photostyle li.group {

	position:relative;

	XXmargin:0; padding:0;

}



.fg_design ul  a  {

	overflow:hidden;

}





.fg_design ul  a img  {	

	width: 100%;

	max-width: 100%;

}



.fg_design ul.photostyle li.group img { border:0; float:left; transition: 1s all;  }



/*extras*/

XXul.photostyle li.group img { border:0; float:left; transition: 1s all;  }





/*Captions*/

ul.photostyle li.group .caption {display: block;
padding: 2px;
position: absolute;
z-index: 600;
bottom: 0;
color: #fff;
font-size: 18px;
line-height: 1.1;
max-height: 100%;
max-width: 90%;
overflow: hidden;
background: rgba(0,0,0,0.5);
pointer-events: none;
opacity: 0.99;
transition: 1s all;
text-align: center; }

ul.photostyle li.group:hover .caption {opacity:1; background: rgba(0,0,0,0.9); color:#fff;}

.nocaptions ul.photostyle li.group .caption {display:none;}



/*fix for PhotoSwipe, if somewhere is max width: 100% */

.pswp__container .pswp__item .pswp__zoom-wrap  pswp__img {width: auto ! important; height: auto ! important; }





/*==========================================================================

predefined classes

==========================================================================*/

.rounded ul.photostyle li.group a img { border-radius:15%; }

.rounded ul.categories li.group a img { border-radius:15% 15% 0 0; }

.rounded ul.photostyle li.group .caption {bottom:10%;}



.circle ul.photostyle li.group a img { border-radius:50%; }

.circle ul.categories li.group a img { border-radius:10% 50% 0 0; }

.circle ul.photostyle li.group .caption {bottom:0; border-radius:10px; width: 80%; margin: 0 10% 0 10%; text-align:center}



.shadow ul li.group a img  {box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.4);}



.opaque ul li.group a img { opacity:0.6; transition: 1s opacity; }

.opaque ul li.group a:hover img { opacity:1; }



.grayscale ul li.group a img {-webkit-filter: grayscale(60%);  filter: grayscale(60%);}

.grayscale ul li.group a:hover img {-webkit-filter: grayscale(0);   filter: grayscale(0);}



.saturate ul li.group a img {-webkit-filter: saturate(0%);  filter: saturate(0%);}

.saturate ul li.group a:hover img {-webkit-filter: saturate(80%);   filter: saturate(80%);}



.sepia ul li.group a img {-webkit-filter: sepia(60%);  filter: sepia(60%);}

.sepia ul li.group a:hover img {-webkit-filter: sepia(0);   filter: sepia(0);}



.blur ul li.group a img {-webkit-filter: blur(3px);  filter: blur(3px);}

.blur ul li.group a:hover img {-webkit-filter: blur(0);   filter: blur(0);}





.blur-rev ul li.group a img {-webkit-filter: blur(0);   filter: blur(0);}

.blur-rev ul li.group a:hover img {-webkit-filter: blur(3px);  filter: blur(3px);}



/*========================================================================== 

Frontend Edit + iFrame 

==========================================================================*/



.fg_fe_editable i.editbutton {cursor:pointer; text-align:center; display:block; position:absolute; top:0; right:0; width:32px; height:32px; background: transparent url(images/edit32.png) no-repeat center center; }

.fg_fe_editable i.editbutton {opacity:0.3; transition: 1s all;}

.fg_fe_editable i.editbutton:hover {opacity:1; transition: 0.3s all;}

.fg_fe_editable i.editbutton.editobjactive {opacity:1;  width:48px; height:48px; background: #00cc33 url(images/edit32.png) no-repeat center center;}



.fg_fe_editable i.editbutton {opacity:0.0;}

.fg_fe_editable:hover  i.editbutton {opacity:0.3 ! important;}

.fg_fe_editable li i.editbutton.editobjactive, .fg_fe_editable li i.editbutton:hover {opacity:1 ! important;}



.fe_editadd_big {cursor:pointer; opacity:1; display: block; float:left; width:170px; padding: 20px 0 20px 40px; color:#fff; font-weight: bold; font-size:18px; background: #999 url(images/edit32.png) no-repeat  5px center ; }



.topbuttons {position: relative; z-index:900; height:0px; opacity:0.2; transition: 0.3s all}

.topbuttons div {position:absolute; border-radius: 50%; border: 2px solid #000; cursor:pointer;  transition: 0.3s all}

.fg_fe_editable:hover div.topbuttons {opacity:0.8; }



.topbuttons div.fe_editadd {left:-10px;  top:2px; height:41px; width:41px; background: #444 url(images/add.png) no-repeat center center;}

.makeitdraggableswitch {left:-5px;  top:50px; height:31px; width:31px; background: #999 url(images/sort.png) no-repeat center center;}

.makeitdraggableswitch.active {background-color:#33cc00; }



li.sortgroup a {cursor:move ! important;}



.anfasser {height:15px;cursor:move; }

#fg_frontendedit {z-index:1200; opacity: 0.2; transition: 0.9s opacity; position: absolute; left:-1000px; top:0; width:400px; background: #222; height:250px; padding:0; box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.8); transition: 1s width, 1s height;}					

#editthisiframe {widht:100%; height:100%;}



.fg_header .fe_editedit {cursor:pointer; display:block; float:right; width:32px; height:32px; background: transparent url(images/edit32.png) no-repeat center center; opacity:0.3; transition: 1s all;}

.fg_header:hover .fe_editedit {opacity:1; transition: 0.3s all;}

	



/* Setup */

#rfg_setup_assistant {float:none; text-align:center; clear:both; font-size:32px; padding: 5px 0; margin: 10px 0; width:100% ! important; background: rgba(128,128,128,0.3);}

.rfg_setup_choose {clear:both;  margin: 0 0 10px 0; opacity:0.4; transition:1s all; background: rgba(200,200,200,0.1); cursor:pointer;}

.rfg_setup_choose img {float:left; margin: 0 10px 0 0}

.rfg_setup_choose.rfg_setup_ischosen, .rfg_setup_choose:hover {opacity:1; background: rgba(200,200,200,0.2); }

	

a.rfg_setup_button {border: 1px solid #999; padding:2px 5px; text-decoration:none; background: rgba(128,128,128,0.2); cursor:pointer;}

.rfg_output {float:right; clear:right; width: 80px; text-align:right; margin: 0 0 0 0}



h3 a.setup_button {font-size:11px; font-weight:normal;}



#rfg_setup_controls.rfg_setup_style2 #rfg_width_controls {display:none;}

#rfg_setup_controls.rfg_setup_style3 #rfg_height_controls {display:none;}



.XXrfg_setup_style1 .rfg_outputw2, .XXrfg_setup_style2 .rfg_outputw2 {display:none;}

.XXrfg_setup_style3 .rfg_outputw2 {display:block;}

.XXrfg_setup_style3 .rfg_outputw1 {display:none;}

#rfg_setup_controls.rfg_setup_style2 .predefined  {display:none;}





h1#fg_jquery_check {font-size: 36px; padding: 10px 0; text-align: center; color:#fff; background-color:#f00;}

#rfg_setup_wrapper {overflow:hidden;}

.rfg_setup_dummy {background: #eff url(images/dummy.png) no-repeat; background-size: 100% 100%, auto;}

#rfg_setup_wrapper .group.rfg_getfitting a, #rfg_setup_wrapper .group.rfg_getfitting a div {width:100% ! important; height:100% ! important;}



#rfg_setup_wrapper.rfg_wrapper_style2 .photostyle {width:150%;}

#rfg_setup_wrapper.rfg_wrapper_style2 .photostyle .group  {margin:0 5px 5px 0;}



#rfg_setup_wrapper.rfg_wrapper_style3 .photostyle {XXwidth:400%;}

#XXrfg_setup_wrapper.rfg_wrapper_style3 .group {margin:0;}



#class_chooser a.rfg_setup_button {display: block; float: left;}

#class_chooser .useclass {background: rgba(128,128,128,0.5)}





.rfgstyle1.rfg_narrow .fg_design ul.categories li, .rfgstyle1.rfg_narrow .fg_design ul.photostyle li {width: 32% ! important;}

.rfgstyle1.rfg_sidebar .fg_design ul.categories li, .rfgstyle1.rfg_sidebar .fg_design ul.photostyle li {width: 49% ! important;}





/*moving*/

.fg_wrapper ul.categories li.movetothis  { background: rgba(45,210,230,0.5);}

.fg_wrapper ul.categories li.movetothis a  {opacity:0.3;}



#upfolder_area {width:100px; height:88px; background: transparent url(images/folder-up.png) no-repeat; background-size: 100% 100%, auto; position: absolute; top:0; left:0;}

#upfolder_area.movetothis  { background-color: rgba(45,210,230,0.5);}					



/* ================================================================================================= */

/* touch? */

@media screen and (max-width: 1200px) {

	.fg_fe_editable  i.editbutton {opacity:0.2;}

	.XXfg_fe_editable div.fe_editadd {opacity:0.9; width:40px;}

	.topbuttons {opacity:0.3}

}



/* ================================================================================================= */



/* Smaller Screens */

@media screen and (max-width: 768px) {

	.rfgstyle1 .fg_design ul.categories li, .fg_design ul.photostyle li {width: 24%; height:auto;}

	.fg_design ul.categories li a img, .fg_design ul.photostyle li a img  {width: 100%; height:auto;}

	

	.fg_design ul.captionlist, .fg_design ul.captionlist {width:100%; }

	.fg_design ul.captionlist li.group, .fg_design ul.captionlist li.group {width:100% ! important; margin: 0 0 10px 0; padding: 0 0 10px 0;}



	.fg_wrapper ul.captionlist li, .fg_wrapper ul.captionlist li a {float:none; clear:left; width:100% ! important; padding-right:0; margin: 0 0 10px 0; height:auto; } /*stronger */

	.XXmakeitdraggableswitch {display:none;} /*Funktioniert am Handy nicht */	

}





/* Smaller Screens */

@media screen and (max-width: 540px) {

	.rfgstyle1 .fg_design ul.categories li, .rfgstyle1 .fg_design ul.photostyle li {width: 32% ! important;}

	

	

}



/* Smaller Screens */

@media screen and (max-width: 400px) {

	.fg_design ul.categories li, .fg_design ul.photostyle li  {width: 49% ! important;}

	.fg_design ul.captionlist .backgroundblock {width: 30%; XXheight:100%;}

}