/* Dieser Eintrag entfernt den gepunkteten Rahmen um Links beim anklicken. */
a:focus {
	outline: none;
}

.rfg_design ul.fg_pages_nav {
	XXdisplay: inline;
	list-style-type: none;
	padding-left: 0px;
}

.rfg_design ul.fg_pages_nav li {
  	display: inline;
	padding-right: 10px;
  	padding-left: 15px;
  	background: url(./images/crumbs.png) no-repeat left center;
}

.rfg_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:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.rfg_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;
}

.rfg_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;
}


.rfg_wrapper ul li  {
	list-style: none;
	list-style-type: none;
	list-style-image: none;
	display: block;
	
}

.rfg_design ul li  {	
	float:left;
	margin: 0 0.5% 10px 0.5%;	
	padding: 0px;
	display: block;	
}





/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	categories
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.rfg_wrapper ul.categories li {
	position:relative;
	overflow:hidden;
}



.rfg_wrapper ul.categories li a  {
	position:relative;
}

.rfg_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;
	
}

.rfg_design ul.categories  a img  {
	/*box-shadow:         0px 3px 8px #333;*/
	border:0;
	border-radius: 0 30px 0 0;
}

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


/*with Headlines*/
.rfg_design ul.captionlist {width:104%; }
.rfg_design ul.captionlist li.group {float:left; width:46% ! important; margin: 0 2% 10px 0; padding: 0 2% 10px 0; height:60px;  overflow:hidden; }
.rfg_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;}
.rfg_design ul.captionlist li a:hover  {background: rgba(255, 255, 255, 0.4); transition:background 1s;}
.rfg_design ul.captionlist .backgroundblock {display:block; float:left; width: 100px; height:60px; margin: 0 2% 0 0; background-size:cover;}
.rfg_design ul.captionlist .cat_caption {display:block;  font-size: 14px; line-height:120%; }
.rfg_design ul.captionlist .cat_description {}

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

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	photos
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


.rfg_wrapper ul.photostyle li.group {
	position:relative;
	padding:0;
	border: none;
	border-radius: 0;
}

ul.photostyle li.group a img {padding:0 ! important; border:0 ! important;}

.rfg_design ul  a  {
	overflow:hidden;
}


.rfg_design ul  a img  {	
	width: 100%;
	max-width: 100%;
}

.rfg_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:12px; line-height:1.1; max-height:100%; max-width:90%; overflow:hidden; background: rgba(0,0,0,0.5); pointer-events: none; opacity:0.7;  transition: 1s all; }
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);}

.rfg_design.center ul  {text-align:center; }
.rfg_design.center ul li.group {display: inline-block; float:none; margin: 0 0.2% 0 0.2%; }


.rfg_header.noheader h3, .rfg_header.noheader p  {display:none;}

/*========================================================================== 
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:210px; height:60px;  background: darkgreen url(images/add_images_big.png) no-repeat center ; }

.topbuttons {position: relative; z-index:900; height:0px; width:50px; opacity:0.2; transition: 0.3s all}
.topbuttons div {position:absolute; border-radius: 50%; border: 2px solid #000; cursor:pointer;  transition: 0.3s all}
.rfg_outertools div.topbuttons {top:-20px; }
.rfg_outertools:hover div.topbuttons {opacity:0.8; }

.topbuttons div.fe_editadd {left:-10px;  top:2px; height:41px; width:41px; background-color: #444;  background-repeat: no-repeat; background-position: center center; }
.eafolder { background-image:  url(images/add_folder.png);}
.eaimage { background-image:  url(images/add_image.png);}
.makeitdraggableswitch {left:-5px;  top:50px; height:31px; width:31px; background: #999 url(images/sort.png) no-repeat center center;}
.makeitdraggableswitch.active {background-color:#33cc00; }
.rfg_scrollhelper {display:none; position: absolute; top:0; right:0; z-index:9000; width: 20px; height: 100%; background:#ffea00 url(images/scrollhere.png) ; background-size: 100% auto}

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%;}

.rfg_header {position: relative;}
.rfg_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;}
.rfg_header .fe_editedit {position:absolute; right:0; top:-40px; z-index:1000;}
.rfg_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 .rfg_design ul.categories li, .rfgstyle1.rfg_narrow .rfg_design ul.photostyle li {width: 32% ! important;}
.rfgstyle1.rfg_sidebar .rfg_design ul.categories li, .rfgstyle1.rfg_sidebar .rfg_design ul.photostyle li {width: 49% ! important;}

/*2021 von FG geklaut
Funktioniert nicht mit Sorting
.rfgstyle1 .photostyle {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 3fr));
    list-style: none;
    margin: 0 0 5px 0;
    padding: 0;
}*/
/* //2021 von FG geklaut*/

/*moving*/
.rfg_wrapper ul.categories li.movetothis  { background: rgba(45,210,230,0.5);}
.rfg_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 .rfg_design ul.categories li, .rfg_design ul.photostyle li {width: 24%; height:auto;}
	.rfg_design ul.categories li a img, .rfg_design ul.photostyle li a img  {width: 100%; height:auto;}
	
	.rfg_design ul.captionlist, .rfg_design ul.captionlist {width:100%; }
	.rfg_design ul.captionlist li.group, .rfg_design ul.captionlist li.group {width:100% ! important; margin: 0 0 10px 0; padding: 0 0 10px 0;}

	.rfg_wrapper ul.captionlist li, .rfg_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 .rfg_design ul.categories li, .rfgstyle1 .rfg_design ul.photostyle li {width: 32% ! important;}
	
	
}

/* Smaller Screens */
@media screen and (max-width: 400px) {
	.rfg_design ul.categories li, .rfg_design ul.photostyle li  {width: 49% ! important;}
	.rfg_design ul.captionlist .backgroundblock {width: 30%; XXheight:100%;}
	
	body.rfg_sortable {XXmargin-left:40px;}
	body.rfg_sortable .rfg_scrollhelper {display:block;}
}