/* HINWEIS GOOGLE FONT

Ersetzen Sie den Google Fonts Code in der fe_page.html5 durch:

<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"/>
<link href="http://fonts.googleapis.com/css?family=" rel="stylesheet" type="text/css"/>
<link href="http://fonts.googleapis.com/css?family=" rel="stylesheet" type="text/css"/>

Weitere Informationen zu Google Fonts finden Sie hier: https://developers.google.com/fonts/faq
*/

/* Anpassungen durch pretty-cool.design ---------------------------- */

/* 21.05.2021 Socials */

#bottom .socials a {
	float: right;
}

/* Silbentrennung ------------------------------------------------*/

p { 
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
   hyphenate-limit-chars: auto 5;
   hyphenate-limit-lines: 2;
}

/* BU im Text-Bild-Element */

.ext_txtpic_bild .img-bu {
    background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
    bottom: 0;
    color: #505050;
    font-size: 11px;
    font-weight: bold; 
    line-height: 165%;
    margin-bottom: 0;
    left: 0;    
    padding: 5px 10px;
    position: absolute;
    width: auto !important;
}

.start .logo {
	float: none;
	height: 80px;
}

.logo {
	float: left;
	height: 60px;
}

#header .inside {
	max-width:3000px;
	padding-left:0;
	padding-right:0;
}

.mod_breadcrumb {
	float: none;
    text-align: left;
    width: 100%;
    margin-bottom: 20px;
}

.homesite .mod_breadcrumb {
	display: none;
}

.ce_text {
	margin-bottom: 15px;
}

#main .ce_text ul {
    list-style: disc;
    margin-left: 15px;
}

#main .colorbox_content ul {
    list-style: disc;
    margin-left: 15px;
}

.image_container {
	margin-bottom: 30px;
}

hr {
	margin: 10px 0 25px 0;
}

.ce_iconbox-version-1 {
	border: 5px solid #F0F3F4;
}

/* Karriere */

body.full_width.rs_karriere #main .ce_text p {
	padding-right: 0px;
}

.karrierebox_ausbildungsplaetze {
    width: 245px;
    height: 340px;
    background-image:url("../../rs_uploads/design-elemente-karriere/Hintergrund.png");
    background-position:center center;
    background-repeat:no-repeat;
    padding: 30px 20px 20px 20px;
}

.karrierebox_ausbildungsplaetze p { 
	color: #fff;
}

.mod_newsreader h2 {
	font-size: 16px;
	margin-bottom: 30px;
}

.nachrichtenliste .date-wrapper {
	display: none;
}

.nachrichtenliste .button {
	float: left;
}

/* Bewerbungsformular */

#bewerbungsformular h4 {
	margin-top: 40px;
}

#bewerbungsformular-azubi h4 {
	margin-top: 40px;
}

#initiativbewerbung h4 {
	margin-top: 40px;
}

.input-wrapper span {
	display: inline!important;
}

.widget-dropzone {
	margin-bottom: 20px;
}


/* Colorbox */

.colorbox {
	margin-bottom: 20px;
}

.colorbox .colorbox_content {
	padding: 30px 40px 20px 40px;
}

.rs_karriere .colorbox h3 {
	color: #fff;
	font-size: 18px;
}

.rs_karriere .colorbox p {
	color: #fff;
}

.rs_karriere .colorbox .colorbox_content {
	padding: 20px 20px 20px 20px;
}


.rs_karriere #bewerbungsformular .colorbox_content h3 {
	color: #333;
}

.rs_karriere #bewerbungsformular .colorbox_content p {
	color: #333;
}


/* Logoleiste */

.home #container_before {
	background: url(../../rs_uploads/design-elemente/logo_bar.png) repeat-x;
	padding: 0px; /* 15px 10px 0px 10px */
	height: 60px;
}

.home #container_before .inside {
	padding: 0; /* 2px 20px 5px 20px */
}

@media only screen and (max-width: 990px) {
	.home #container_before {
		display: none;	
	}
}

/* Home Teaser*/

.home #wrap_teaser p {
	font-size: 90%;
}

.home #wrap_teaser .ce_hyperlink a {
	background-color: transparent;
	color: #333;
	padding: 0;
}

.home #wrap_teaser .ce_hyperlink a:after {
	content: "\ec0e";
    display: inline-block;
    font-family: "icons";
    font-style: normal;
    margin-left: 5px;
}

/* News Teaser*/

#right .nachrichtenteaser_v3 h4 {
    font-weight: 300;
    font-size: 13px;
    margin-bottom: 8px;
}

/* Main-Nav */

nav.mainmenu {
	background-color: #002F5C; /* #738e9a */ 
}

nav.mainmenu ul li a {
	padding: 10px 0 14px 0;
	color: #fff;
}

/* Meta-Nav */

#headeroffset .mod_customnav ul li {
	float: right;
	margin-right: 20px;
	margin-top: 10px;
}

#headeroffset .mod_customnav ul li a:hover {
	text-decoration: underline;
}

#top, #top a {
	color: #738e9a;
}

/* Revoliton-Slider */
.ce_revolutionslider .color {
	color: #002F5C;
}

/* Footer */
#bottom {
	background-color: #738e9a;
	color: #fff;
}

#bottom .inside {
	padding:10px 40px;
}

#bottom a {
	color: #fff;
}

/* Real Inform Login/Registrierung */

.ce_hyperlink.inform_login a {
	width: 100%;
}

.inform_accordion .toggler {
	color: #fff;
	text-align: center;
	background-color: #738e9a;
	width: 100%;
	margin-bottom: 3px;
}

.inform_accordion .toggler.ui-state-default::before {
	display: none;
	color: #fff;
}

.inform_accordion .toggler.ui-state-active::before {
	display: none;
	color: #fff;
}


/* RS-Inform Individualisierung Colorcode */

.ce_hyperlink a {
	white-space: normal;
}

.rs-inform #bottom {
	background-color: #E1792B;
	color: #fff;
}

.ce_hyperlink.impr_inform a {
	width: 100%;
}

.rs-inkasso #bottom {
	background-color: #972824;
	color: #fff;
}

.ce_hyperlink.impr_inkasso a {
	width: 100%;
}

.rs-factoring #bottom {
	background-color: #104B29;
	color: #fff;
}

.ce_hyperlink.impr_factoring a {
	width: 100%;
}

.hib #bottom {
	background-color: #E8A62D;
	color: #fff;
}

.ce_hyperlink.impr_hib a {
	width: 100%;
}

.hik #bottom {
	background-color: #4E5151;
	color: #fff;
}

.ce_hyperlink.impr_hik a {
	width: 100%;
}

.teka #bottom {
	background-color: #121F36;
	color: #fff;
}

.ce_hyperlink.impr_teka a {
	width: 100%;
}


/* Real Inform Icon-Menu */

#container_before {
	background-color: #f0f3f4!important;
}

#container_before nav.mainmenu {
	background-color: #f0f3f4;
	vertical-align: middle;
}

#container_before .inside {
    padding-bottom: 0!important;
    padding-top: 0!important;
    /* padding-right: 0!important; */
}

#container_before nav.mainmenu ul li {
	width: 16%; /* max-width: 200px */
	border-right: 3px solid #fff;
	padding-top: 20px;
	overflow: hidden;
}

#container_before nav.mainmenu ul li.last {
	border-right: none;
}

#container_before nav.mainmenu ul li:hover {
	background-color: #002f5c;
}

#container_before nav.mainmenu ul li a {
	max-width: 190px;
	padding: 10px 0 24px 0;
	color: #002F5C;
	margin: 0 auto;
}

#container_before nav.mainmenu ul li a:hover {
	color: #fff;
}

#container_before nav.mainmenu ul li.trail a:after {
	background: transparent; /* PC #738e9a */
}

#container_before nav.mainmenu ul li.active a:after {
	background: #fff; /* PC #738e9a */
}

#container_before nav.mainmenu ul li.first a {
	padding-top: 60px;	
}

#container_before nav.mainmenu ul li.adressermittlung a {
    background-image: url(../../rs_uploads/icons/icon-adressermittlung.svg);
    background-position: top center;
    background-repeat: no-repeat;
    padding-top: 60px;
}

#container_before nav.mainmenu ul li.adressermittlung a:hover {
    background-image: url(../../rs_uploads/icons/icon-adressermittlung-weiss.svg);
}


#container_before nav.mainmenu ul li.telefonnummernermittlung a {
    background-image: url(../../rs_uploads/icons/icon-telefonnummernermittlung.svg);
    background-position: top center;
    background-repeat: no-repeat;
    padding-top: 60px;
}

#container_before nav.mainmenu ul li.telefonnummernermittlung a:hover {
    background-image: url(../../rs_uploads/icons/icon-telefonnummernermittlung-weiss.svg);
}

#container_before nav.mainmenu ul li.bonitaetspruefung a {
    background-image: url(../../rs_uploads/icons/icon-bonitaetspruefung.svg);
    background-position: top center;
    background-repeat: no-repeat;
    padding-top: 60px;
}

#container_before nav.mainmenu ul li.bonitaetspruefung a:hover {
    background-image: url(../../rs_uploads/icons/icon-bonitaetspruefung-weiss.svg);
}

#container_before nav.mainmenu ul li.wirtschaftsauskuenfte a {
    background-image: url(../../rs_uploads/icons/icon-wirtschaftsauskunft.svg);
    background-position: top center;
    background-repeat: no-repeat;
    padding-top: 60px;
}

#container_before nav.mainmenu ul li.wirtschaftsauskuenfte a:hover {
    background-image: url(../../rs_uploads/icons/icon-wirtschaftsauskunft-weiss.svg);
}

#container_before nav.mainmenu ul li.sonderermittlung a {
    background-image: url(../../rs_uploads/icons/icon-sonderermittlung.svg);
    background-position: top center;
    background-repeat: no-repeat;
    padding-top: 60px;
}

#container_before nav.mainmenu ul li.sonderermittlung a:hover {
    background-image: url(../../rs_uploads/icons/icon-sonderermittlung-weiss.svg);
}

/* Real Inform Icon-Menu - Theme Designer */

#container_before nav.mainmenu ul li a {
  text-transform: uppercase;
  font-weight: 500;
}

#container_before nav.mainmenu ul li a span.subline {
	display: none;
}

#container_before nav.mainmenu ul li ul li a span.subline {
	display: block;
}

#container_before nav.mainmenu ul li > a:before {
	width: 100%!important;
	margin-right: 0px; 
	font-size: 20px;
	font-weight: 500;
}

#container_before nav.mainmenu span {
	margin-left: 0px;
}

#container_before nav.mainmenu ul li a {
	text-align: left; 
	line-height: 25px!important;
}

#container_before nav.mainmenu ul li ul li a {
	line-height: 15px!important;
}

/* Real Inform Icon-Menu - Brakepoints */

@media only screen and (min-width: 1280px) {
	#container_before nav.mainmenu ul li a {
		margin: 0 7% !important;
	}
}

@media only screen and (max-width: 1280px) {
	#container_before nav.mainmenu ul li a {
		font-size: 16px;
		margin: 0 5% !important;
	}
}

@media only screen and (max-width: 990px) {
	#container_before nav.mainmenu ul li {
		width: 33%;
	}
	
	#container_before nav.mainmenu ul li.last {
		border-right: 3px solid #fff;
	}
	
	#container_before nav.mainmenu ul li a {
		margin: 0 auto !important;
	}

}

@media only screen and (max-width: 767px) {
	.content_page #container_before {
    	display: inline;
	}
	
	#container_before .inside {
		padding: 0 5px !important;
	}
	
	#container_before nav.mainmenu ul li {
		width: 49%;
		border-right: none;
	}
	
	#container_before nav.mainmenu ul li.last {
		border-right: none;
	}
	
	#container_before nav.mainmenu ul li a {
		font-size: 14px;
	}

}


.rs-inform #container_before .icon-navigation-mobil {
	margin-top: 5px;
}

.ce_hyperlink.inform_sub_mobile a {
	width: 100%;
}

/* Real Inform Icon-Menu als Link*/

@media only screen and (min-width: 991px) {
	.rs-inform #container_before .icon-navigation-mobil {
		display: none;
	}	
}

@media only screen and (max-width: 990px) {
	.rs-inform #container_before .mod_customnav {
		display: none;
	}
}


/* Anpassungen durch Theme-Designer - Teil 1
   http://preview.premium-contao-themes.com/quantum2/demo/home-v1-wrevolution-slider.html
---------------------------- */

nav.mainmenu ul li a {
  font-family: Open Sans;
}
body .logo {
  background-image: url(../../rs_uploads/logos-rs-gruppe/Logo_RS_Forderung.svg);
}

body.rs-factoring .logo {
  background-image: url(../../rs_uploads/logos-rs-gruppe/Logo_RS_Forderung.svg);
}

body.rs-inform .logo {
  background-image: url(../../rs_uploads/logos-rs-gruppe/Logo_RS_Forderung.svg);
}

body.rs-inkasso .logo {
  background-image: url(../../rs_uploads/logos-rs-gruppe/Logo_RS_Forderung.svg);
}

body.hib .logo {
  background-image: url(../../rs_uploads/logos-rs-gruppe/HIB.svg);
}

body.hik .logo {
  background-image: url(../../rs_uploads/logos-rs-gruppe/HIK.svg);
}

body.iadb .logo {
  background-image: url(../../rs_uploads/logos-rs-gruppe/IADB.svg);
}

body.teka .logo {
  background-image: url(../../rs_uploads/logos-rs-gruppe/TEKA_Collection.svg);
}


h1,h2,h3,h4,h5,h6 {
  font-family: Open Sans;
}
#header .inside {
	text-align: center;
	}
.logo {
	display: inline-block;
}
.mainmenu li[class*="icon-"] a:before, .mainmenu li[class*="icon-"] span:before {
	display: none;
}
.mainmenu li[class*="icon-"] ul li a:before, .mainmenu li[class*="icon-"] ul li span:before {
	display: inline-block;
}
.logo {
	text-align: center;
	position: static;
}
nav.mainmenu span {
	display: none;
}
nav.mainmenu ul ul span {
	display: block;
}
nav.mainmenu {
	display: inline-block;
	width: 100%;
	position: relative;
}
nav.mainmenu ul {
	float: none;
	text-align: center;
	display: inline-block;
	position: static;
}
nav.mainmenu ul li.last ul {
	right: auto;
}
#header .inside {
	display: block;
}
#stickyheader {
	background: rgba(255,255,255,0.9);
}
#header nav.mainmenu ul {
	width: 100%;
}
#header nav.mainmenu ul li {
	display: inline-block;
	float: none;
}
#header nav.mainmenu ul li.megamenu .layer_two li {
	display: table-cell;
}
#header nav.mainmenu ul li .layer_two li {
	display: block;
}
#header nav.mainmenu ul li.megamenu ul.level_3 li {
	display: block;
}
#header nav.mainmenu ul li a {
	margin-left: 25px;
	margin-right: 25px;
}

@media only screen and (min-width: 991px){
	#header .logo {
		width: 350px;
		margin-bottom: 10px;
		}
}

@media only screen and (max-width: 990px){
	#header .logo {
		height: 90px;
		}
}

.color {
	color: #738e9a;
}
.bg_color {
	background-color: #738e9a;
}
#container_before .inside:after {
	border-color: #738e9a transparent transparent transparent;
}
.button, .ce_hyperlink a, .servicebox_4 a, .servicebox_5 p a, .servicebox_6 p a, input[type="submit"], input.submit {
	background: #738e9a;
}
.servicebox_7:hover {
	border-color: #738e9a;
}
.servicebox_4:hover:before, .servicebox_6:hover img, .servicebox_5:hover .image_container {
	border: 3px solid #738e9a;
}
.servicebox_4 p a {
	background: #738e9a;
}
nav.mainmenu ul ul li a:hover, nav.mainmenu ul ul li a.active, nav.mainmenu ul ul li.active a {
	background: #738e9a; 
}
#submenu a:hover, #submenu a.active {
	color: #738e9a;
}
.more a {
	color: #fff; 
	background-color: #738e9a;
}
.pagination li a:hover {
	color: #738e9a;
}
.pagination li span.current {
	background: #738e9a; 
	color: white;
}
.calltoaction {
	border-left: 4px solid #738e9a;
}
.calltoaction a {
	background: #738e9a; 
	color: #fff;
}
.portfolioliste .backside {
	background-color: #738e9a;
}
.tp-leftarrow.default, .tp-rightarrow.default {
	background: #738e9a;
}
.servicebox_4:hover:before {
	background: #738e9a; 
	color: #fff;
}
#nav-open-btn:before {
	background: #738e9a; 
	border: 2px solid #738e9a;
}
.portfolioteaser .bx_caption .morelink a {
	color: #738e9a;
}
.portfolioteaser .bx_caption {
	background: #738e9a;
}
.testimonial_v1 a {
	color:#738e9a;
}
.testimonial_slider a {
	color:#738e9a;
}
nav.mainmenu ul ul {
	border-top: 5px solid #738e9a;
}
nav.mainmenu ul li a:after {
    background: #fff; /* PC #738e9a */
}
.ce_text p a:not(.button) {
	color: #738e9a;
}
.servicebox:before {
	background: #738e9a; background: #738e9a -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 25%, rgba(0,0,0,0.15) 100%); background: #738e9a -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(25%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.15))); background: #738e9a -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 25%, rgba(0,0,0,0.15) 100%); background: #738e9a -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 25%, rgba(0,0,0,0.15) 100%); background: #738e9a -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 25%, rgba(0,0,0,0.15) 100%); background: #738e9a radial-gradient(ellipse at center, rgba(0,0,0,0) 25%, rgba(0,0,0,0.15) 100%);  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#738e9a00000', endColorstr='#26000000', GradientType=1 );
}
.nachrichtenliste .subheadline {
	color: #738e9a;
}
.ce_text p a:not(.button) {
	color: #738e9a;
}
.blog .comments a, .blog .morelink {
	color: #738e9a;
}
.nachrichtenteaser_slider .subheadline {
	color: #738e9a;
}
.nachrichtenteaser_v3 .subheadline {
	color: #738e9a;
}
.teambox_3 .email a, .teambox_3 .email {
	color: #738e9a;
}
.ce_preistabelle .preiswrapper {
	background: #738e9a;
}
nav.mainmenu ul li.trail a:after, nav.mainmenu ul li.active a:after {
	background: #fff; /* PC #738e9a */
}
.backgroundvideo.overlay .backgroundvideo_content_wrapper {
	background: #738e9a;
}
#top {
	background: #fff; /* #738e9a */
}
.servicebox_2[class^="icon-"]:before,
.servicebox_2[class*="icon-"]:before {
	color: #738e9a
}
.servicebox_2 h1, .servicebox_2 h2, .servicebox_2 h3, .servicebox_2 h4, .servicebox_2 h5, .servicebox_2 h6 {
	color: #738e9a;
}
.articlewrapper.typ3 {
	background: #738e9a;
}
.tabs.horizontal_clean ul li a:hover, .tabs.horizontal_clean ul li a.current {
	background: #738e9a;
}
.teambox_2 .funktion {
	color: #738e9a;
}
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #738e9a;
}
.ce_imagemap .circle {
	box-shadow: 0 0 0 4px #738e9a;
}
.ce_imagemap .hotspot.small .circle {
	box-shadow: 0 0 0 2px #738e9a;
}

body {
	color: #333; /* #002f5c */
}

h1, h2, h3, h4, h5, h6 {
	color: #000;
}

nav.faq ul > li:hover {
  background-color:#002F5C;
  cursor:pointer;
}

div.widget {
  margin-bottom:12px;
}

#hell h3 {
  color: #333;
}

#hell p {
  color: #333;
}

nav.faq ul > li > a {
 -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
  font-size:14pt;
  font-weight:bolder;
}

nav.faq:hover ul > li:hover > a {
  color:#FFFFFF;
}

button[class=submit] {color: #fff; background: #738e9a;}
button[class=submit] {padding: 10px 12px; text-align: center; display: inline-block; margin-bottom: 4px; background: #738e9a; color: #fff; cursor: pointer; }
button[class=submit] {-webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease; -ms-transition: All 0.3s ease; transition: All 0.3s ease;}
button[class=submit]:hover {opacity: 0.9; -webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease; -ms-transition: All 0.3s ease; transition: All 0.3s ease;}
/*
 * The MIT License
 * Copyright (c) 2012 Matias Meno <m@tias.me>
 */
@-webkit-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px); } }
@-moz-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px); } }
@keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px); } }
@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-moz-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }

.qq-uploader, .qq-uploader * {
  box-sizing: border-box; }

.qq-upload-button {
  width: 100%;
  background: #fff;
  color: #333;
}

.qq-upload-list {
  display: flex;
}

.qq-upload-list li.qq-upload-success {
  background: #fff;
  color: #333;
}

.qq-uploader {
  min-height: 150px;
  border: 2px dashed rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  background: white;
  margin-bottom:20pt;
  padding: 20px 20px; }
  .qq-uploader.dz-clickable {
    cursor: pointer; }
    .qq-uploader.dz-clickable * {
      cursor: default; }
    .qq-uploader.dz-clickable .dz-message, .qq-uploader.dz-clickable .dz-message * {
      cursor: pointer; }
  .qq-uploader.dz-started .dz-message {
    display: none; }
  .qq-uploader.dz-drag-hover {
    border-style: solid; }
    .qq-uploader.dz-drag-hover .dz-message {
      opacity: 0.5; }
  .qq-uploader .dz-message {
    text-align: center;
    margin: 2em 0; }
  .qq-uploader .dz-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 16px;
    min-height: 100px; }
    .qq-uploader .dz-preview:hover {
      z-index: 1000; }
      .qq-uploader .dz-preview:hover .dz-details {
        opacity: 1; }
    .qq-uploader .dz-preview.dz-file-preview .dz-image {
      border-radius: 20px;
      background: #999;
      background: linear-gradient(to bottom, #eee, #ddd); }
    .qq-uploader .dz-preview.dz-file-preview .dz-details {
      opacity: 1; }
    .qq-uploader .dz-preview.dz-image-preview {
      background: white; }
      .qq-uploader .dz-preview.dz-image-preview .dz-details {
        -webkit-transition: opacity 0.2s linear;
        -moz-transition: opacity 0.2s linear;
        -ms-transition: opacity 0.2s linear;
        -o-transition: opacity 0.2s linear;
        transition: opacity 0.2s linear; }
    .qq-uploader .dz-preview .dz-remove {
      font-size: 14px;
      text-align: center;
      display: block;
      cursor: pointer;
      border: none; }
      .qq-uploader .dz-preview .dz-remove:hover {
        text-decoration: underline; }
    .qq-uploader .dz-preview:hover .dz-details {
      opacity: 1; }
    .qq-uploader .dz-preview .dz-details {
      z-index: 20;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      font-size: 13px;
      min-width: 100%;
      max-width: 100%;
      padding: 2em 1em;
      text-align: center;
      color: rgba(0, 0, 0, 0.9);
      line-height: 150%; }
      .qq-uploader .dz-preview .dz-details .dz-size {
        margin-bottom: 1em;
        font-size: 16px; }
      .qq-uploader .dz-preview .dz-details .dz-filename {
        white-space: nowrap; }
        .qq-uploader .dz-preview .dz-details .dz-filename:hover span {
          border: 1px solid rgba(200, 200, 200, 0.8);
          background-color: rgba(255, 255, 255, 0.8); }
        .qq-uploader .dz-preview .dz-details .dz-filename:not(:hover) {
          overflow: hidden;
          text-overflow: ellipsis; }
          .qq-uploader .dz-preview .dz-details .dz-filename:not(:hover) span {
            border: 1px solid transparent; }
      .qq-uploader .dz-preview .dz-details .dz-filename span, .qq-uploader .dz-preview .dz-details .dz-size span {
        background-color: rgba(255, 255, 255, 0.4);
        padding: 0 0.4em;
        border-radius: 3px; }
    .qq-uploader .dz-preview:hover .dz-image img {
      -webkit-transform: scale(1.05, 1.05);
      -moz-transform: scale(1.05, 1.05);
      -ms-transform: scale(1.05, 1.05);
      -o-transform: scale(1.05, 1.05);
      transform: scale(1.05, 1.05);
      -webkit-filter: blur(8px);
      filter: blur(8px); }
    .qq-uploader .dz-preview .dz-image {
      border-radius: 20px;
      overflow: hidden;
      width: 120px;
      height: 120px;
      position: relative;
      display: block;
      z-index: 10; }
      .qq-uploader .dz-preview .dz-image img {
        display: block; }
    .qq-uploader .dz-preview.dz-success .dz-success-mark {
      -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
      -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
      -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
      -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
      animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
    .qq-uploader .dz-preview.dz-error .dz-error-mark {
      opacity: 1;
      -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
      -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
      -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
      -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
      animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
    .qq-uploader .dz-preview .dz-success-mark, .qq-uploader .dz-preview .dz-error-mark {
      pointer-events: none;
      opacity: 0;
      z-index: 500;
      position: absolute;
      display: block;
      top: 50%;
      left: 50%;
      margin-left: -27px;
      margin-top: -27px; }
      .qq-uploader .dz-preview .dz-success-mark svg, .qq-uploader .dz-preview .dz-error-mark svg {
        display: block;
        width: 54px;
        height: 54px; }
    .qq-uploader .dz-preview.dz-processing .dz-progress {
      opacity: 1;
      -webkit-transition: all 0.2s linear;
      -moz-transition: all 0.2s linear;
      -ms-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      transition: all 0.2s linear; }
    .qq-uploader .dz-preview.dz-complete .dz-progress {
      opacity: 0;
      -webkit-transition: opacity 0.4s ease-in;
      -moz-transition: opacity 0.4s ease-in;
      -ms-transition: opacity 0.4s ease-in;
      -o-transition: opacity 0.4s ease-in;
      transition: opacity 0.4s ease-in; }
    .qq-uploader .dz-preview:not(.dz-processing) .dz-progress {
      -webkit-animation: pulse 6s ease infinite;
      -moz-animation: pulse 6s ease infinite;
      -ms-animation: pulse 6s ease infinite;
      -o-animation: pulse 6s ease infinite;
      animation: pulse 6s ease infinite; }
    .qq-uploader .dz-preview .dz-progress {
      opacity: 1;
      z-index: 1000;
      pointer-events: none;
      position: absolute;
      height: 16px;
      left: 50%;
      top: 50%;
      margin-top: -8px;
      width: 80px;
      margin-left: -40px;
      background: rgba(255, 255, 255, 0.9);
      -webkit-transform: scale(1);
      border-radius: 8px;
      overflow: hidden; }
      .qq-uploader .dz-preview .dz-progress .dz-upload {
        background: #333;
        background: linear-gradient(to bottom, #666, #444);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 0;
        -webkit-transition: width 300ms ease-in-out;
        -moz-transition: width 300ms ease-in-out;
        -ms-transition: width 300ms ease-in-out;
        -o-transition: width 300ms ease-in-out;
        transition: width 300ms ease-in-out; }
    .qq-uploader .dz-preview.dz-error .dz-error-message {
      display: block; }
    .qq-uploader .dz-preview.dz-error:hover .dz-error-message {
      opacity: 1;
      pointer-events: auto; }
    .qq-uploader .dz-preview .dz-error-message {
      pointer-events: none;
      z-index: 1000;
      position: absolute;
      display: block;
      display: none;
      opacity: 0;
      -webkit-transition: opacity 0.3s ease;
      -moz-transition: opacity 0.3s ease;
      -ms-transition: opacity 0.3s ease;
      -o-transition: opacity 0.3s ease;
      transition: opacity 0.3s ease;
      border-radius: 8px;
      font-size: 13px;
      top: -55px;
      left: -10px;
      width: 140px;
      background: #be2626;
      background: linear-gradient(to bottom, #be2626, #a92222);
      padding: 0.5em 1.2em;
      color: white; }
      .qq-uploader .dz-preview .dz-error-message:after {
        content: '';
        position: absolute;
        bottom : -6px;
        left: 64px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #a92222; }

.qq-uploader.error {
  border-color: #c20000;
}

.disabled {
  cursor: not-allowed !important;
  display: none;
}

img.gimage {
  max-width:100pt; height:auto;
}

.aspect,
.responsive {
    position:relative;
    height:auto;
}
