/*
Theme Name: Listable Child
Theme URI: https://pixelgrade.com/demos/listable/
Author: PixelGrade
Author URI: https://pixelgrade.com/
Description: A directory WordPress theme that will help you create and manage a local or global listings site.
Template: listable
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: listable-child-theme
Domain Path: /languages/
Tags: light, white, red

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Listable is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/* ADD YOUR NEW CSS RULES HERE */

/* This file assumes you wish to add new CSS rules that will overwrite the ones in the parent's CSS files
If you wish however, you can copy the whole style.css file from the parent here and hack at it - see functions.php for more details.
In that case please remember that you still need to retain the header above (replace the header of the parent style.css with the one above),
specifically the 'Template: listable' line. */


.header--transparent .primary-menu > ul > .cta.page_item, .header--transparent ul.primary-menu>.cta.menu-item {
    background: #ff1053 !important; }

.primary-menu ul>.cta.page_item, ul.primary-menu>.cta.menu-item {
    background: #ff1053 !important;
color:##ffffff !important;
 }

.sub-menu .primary-menu ul .page_item_has_children:after, .primary-menu ul .sub-menu .page_item_has_children:after, .sub-menu ul.primary-menu .menu-item-has-children:after, ul.primary-menu .sub-menu .menu-item-has-children:after, .primary-menu ul .page_item_has_children:after, ul.primary-menu .menu-item-has-children:after, .primary-menu ul>.cta.page_item:after, ul.primary-menu>.cta.menu-item:after {border-top-colo:##ffffff;}

.page-template-front_page .page-title {
	font-size: 40px;
}
h1{
font-size:34px;
}

.address__state-short, .address__country-short {
	display: none !important;
}

.category {
	float: right;
}

.myflex.no-map {
	max-width: 1360px !important;
}


span.package__subscription-period:before {
    content: "Monatlich";
    font-size: 24px;
    visibility: initial;
}
span.package__subscription-period{
font-size:1px;
    visibility: hidden;
}

#nf-field-25-wrap, #nf-field-25-0, #nf-field-25-1, #nf-field-25-2, #nf-field-25-3, #nf-field-25-4, #nf-field-25-5
 {
	width: 100% !important;
	
}

#nf-field-80-wrap, #nf-field-80-0, #nf-field-38-1, #nf-field-80-2, #nf-field-80-3, #nf-field-80-4, #nf-field-80-5  {
	width: 100% !important;
	
}


#nf-field-101-wrap, #nf-field-101-0, #nf-field-101-1, #nf-field-101-2, #nf-field-101-3, #nf-field-101-4, #nf-field-101-5  {
	width: 100% !important;
	
}


.nf-form-content .nf-field-container #nf-field-25-wrap .nf-field-element li {

    height: 100px;
    width: 20%;
    float: left;
    color: #B3CEFB;
    
    
}

.nf-form-content .nf-field-container #nf-field-80-wrap .nf-field-element li {

    height: 100px;
    width: 20%;
    float: left;
    color: #B3CEFB;
    
    
}

.nf-form-content .nf-field-container #nf-field-101-wrap .nf-field-element li {

    height: 100px;
    width: 20%;
    float: left;
    color: #B3CEFB;
    
    
}

.list-radio-wrap .nf-field-element li input {
	width: 100% !important;
	height: 100%;
	
}

.nf-checked-label {
	color: #ffffff;
	background-color: #ff1053 !important;

	    -webkit-transition: background-color 200ms linear;
	    -ms-transition: background-color 200ms linear;
	    transition: background-color 200ms linear;
	
}

.list-radio-wrap .nf-field-element li label:hover {
	/*color: #ffffff;
		background-color: #ff1053 !important;*/
	
		    -webkit-transition: background-color 200ms linear;
		    -ms-transition: background-color 200ms linear;
		    transition: background-color 200ms linear;
}
.list-radio-wrap .nf-field-element li label {
	position: relative;
	bottom: 0px;
	text-align: center;
	font-size: 13px;
	font-weight: 300;
	width: 90% !important;
	height: 100%;
	
border-radius: 8px;
	
	padding: 1px;
	overflow: hidden;
	cursor: pointer;
	background: white;
	border: 1px solid rgba(0, 0, 0, 0.075);
	padding-top: 60px;
}

ul.primary-menu a {
	text-transform: none !important;
}

.nf-form-content .nf-mp-header .nf-breadcrumbs {
	display: block !important;
	width: 200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.nf-breadcrumbs li {
	border: 2px solid #303030;
	border-radius: 50%;
	width: 50px !important;
	width: 50px;
	margin-left: 10px;
}



/* =============================================
* RADIO BUTTONS
=============================================== */

label[for^="nf-field-25-0"]::after {
    content: " ";
	display: block;
            background: url(https://www.webdesign-verzeichnis.de//wp-content/uploads/2017/04/laptop-1.svg) center center no-repeat;
            height: 50px;
            width: 100%;
            position: absolute;
            top: 10px;           
}

label[for^="nf-field-80-0"]::after {
    content: " ";
	display: block;
            background: url(https://www.webdesign-verzeichnis.de//wp-content/uploads/2017/04/laptop-1.svg) center center no-repeat;
            height: 50px;
            width: 100%;
            position: absolute;
            top: 10px;           
}

label[for^="nf-field-101-0"]::after {
    content: " ";
	display: block;
            background: url(https://www.webdesign-verzeichnis.de//wp-content/uploads/2017/04/laptop-1.svg) center center no-repeat;
            height: 50px;
            width: 100%;
            position: absolute;
            top: 10px;           
}

.nf-checked-label[for^="nf-field-25-0"]::after {
    content: " ";
	display: block;
            background: url(https://www.webdesign-verzeichnis.de//wp-content/uploads/2017/04/laptop.svg) center center no-repeat;
            height: 50px;
            width: 100%;
            position: absolute;
            top: 10px;           
}

.nf-checked-label[for^="nf-field-80-0"]::after {
    content: " ";
	display: block;
            background: url(https://www.webdesign-verzeichnis.de//wp-content/uploads/2017/04/laptop.svg) center center no-repeat;
            height: 50px;
            width: 100%;
            position: absolute;
            top: 10px;           
}

.nf-checked-label[for^="nf-field-101-0"]::after {
    content: " ";
	display: block;
            background: url(https://www.webdesign-verzeichnis.de//wp-content/uploads/2017/04/laptop.svg) center center no-repeat;
            height: 50px;
            width: 100%;
            position: absolute;
            top: 10px;           
}

label[for^="nf-field-25-1"]::after, label[for^="nf-field-80-1"]::after, label[for^="nf-field-101-1"]::after {
    content: " ";
	display: block;
            background: url(https://www.webdesign-verzeichnis.de//wp-content/uploads/2017/03/basket.svg) center center no-repeat;
            height: 50px;
            width: 100%;
            position: absolute;
            top: 10px;           
}
.nf-checked-label[for^="nf-field-25-1"]::after, .nf-checked-label[for^="nf-field-80-1"]::after, .nf-checked-label[for^="nf-field-101-1"]::after {
    content: " ";
	display: block;
            background: url(https://www.webdesign-verzeichnis.de//wp-content/uploads/2017/04/basket.svg) center center no-repeat;
            height: 50px;
            width: 100%;
            position: absolute;
            top: 10px;           
}

label[for^="nf-field-25-2"]::after, label[for^="nf-field-80-2"]::after, label[for^="nf-field-101-2"]::after {
    content: " ";
	display: block;
            background: url(https://www.webdesign-verzeichnis.de//wp-content/uploads/2017/03/magnifying-glass.svg) center center no-repeat;
            height: 50px;
            width: 100%;
            position: absolute;
            top: 10px;           
}
.nf-checked-label[for^="nf-field-25-2"]::after, .nf-checked-label[for^="nf-field-80-2"]::after, .nf-checked-label[for^="nf-field-101-2"]::after {
    content: " ";
	display: block;
            background: url(https://www.webdesign-verzeichnis.de//wp-content/uploads/2017/04/magnifying-glass.svg) center center no-repeat;
            height: 50px;
            width: 100%;
            position: absolute;
            top: 10px;           
}

label[for^="nf-field-25-3"]::after, label[for^="nf-field-80-3"]::after, label[for^="nf-field-101-3"]::after {
    content: " ";
	display: block;
            background: url(https://www.webdesign-verzeichnis.de//wp-content/uploads/2017/03/presentation.svg) center center no-repeat;
            height: 50px;
            width: 100%;
            position: absolute;
            top: 10px;           
}
.nf-checked-label[for^="nf-field-25-3"]::after, .nf-checked-label[for^="nf-field-80-3"]::after, .nf-checked-label[for^="nf-field-101-3"]::after {
    content: " ";
	display: block;
            background: url(https://www.webdesign-verzeichnis.de//wp-content/uploads/2017/04/presentation.svg) center center no-repeat;
            height: 50px;
            width: 100%;
            position: absolute;
            top: 10px;           
}

label[for^="nf-field-25-4"]::after, label[for^="nf-field-80-4"]::after, label[for^="nf-field-101-4"]::after {
    content: " ";
	display: block;
            background: url(https://www.webdesign-verzeichnis.de//wp-content/uploads/2017/03/tools.svg) center center no-repeat;
            height: 50px;
            width: 100%;
            position: absolute;
            top: 10px;           
}
.nf-checked-label[for^="nf-field-25-4"]::after, .nf-checked-label[for^="nf-field-80-4"]::after, .nf-checked-label[for^="nf-field-101-4"]::after {
    content: " ";
	display: block;
            background: url(https://www.webdesign-verzeichnis.de//wp-content/uploads/2017/04/tools.svg) center center no-repeat;
            height: 50px;
            width: 100%;
            position: absolute;
            top: 10px;           
}



/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v21/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}


#radios label {
	cursor: pointer;
	position: relative;
}

#radios label + label {
	margin-left: 15px;
}

input[type="radio"] {
	opacity: 0; /* hidden but still tabable */
	position: absolute;
}

input[type="radio"] + span {
	font-family: 'Material Icons';
	color: #B3CEFB;
	border-radius: 50%;
	padding: 12px;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
}

input[type="radio"]:checked + span {
	color: #D9E7FD;
  background-color: #4285F4;
}

input[type="radio"]:focus + span {
	color: #fff;
}

/* ================ TOOLTIPS ================= */

#radios label:hover::before {
	content: attr(for);
	font-family: Roboto, -apple-system, sans-serif;
	text-transform: capitalize;
	font-size: 11px;
	position: absolute;
	top: 170%;
	left: 0;
	right: 0;
	opacity: 0.75;
	background-color: #323232;
	color: #fff;	
	padding: 4px;
	border-radius: 3px;
  display: block;
}

.nf-progress-container {
    margin-top: -11px!important;
    width: 100%!important;
    height: 5px!important;
    border-radius: 50px!important;
    border: 0!important;
    margin-bottom: 30px!important;
}
.nf-mp-header .nf-progress {
    background-color: #ff1053;
    height: 5px!important;
}

/* =============================================
* CENTERING, CONTAINER STYLING ETC || IGNORE
=============================================== */



#radios {
	text-align: center;
	margin 0 auto;
}

.container {
	margin: 0 auto;
}

.nf-next-item .nf-next {
	line-height: 10px;
	margin-top:-10px;
	
}

.tabs.wc-tabs {
	display: none;
}
