/*
 Theme Name:   Storefront Child
 Description:  Storefront Child Theme
 Author:       YOUin3D.com GmbH
 Author URI:   http://youin3d.com
 Template:     storefront
 Text Domain:  storefrontchild

 @author   Sami
 @date     2015-08-01
 @modified 2015-08-11 Ika
*/

/*Colors: 
pink: #e30f96
darkviolet: #5a0e59
grey: #cbcbcb
*/

@font-face {
  font-family: 'champagne__limousinesregular';
  src: url('fonts/champagne__limousines-webfont.eot');
  src: url('fonts/champagne__limousines-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/champagne__limousines-webfont.woff2') format('woff2'),
       url('fonts/champagne__limousines-webfont.woff') format('woff'),
       url('fonts/champagne__limousines-webfont.ttf') format('truetype'),
       url('fonts/champagne__limousines-webfont.svg#champagne__limousinesregular') format('svg');
      font-weight: normal;
      font-style: normal;
}

@font-face {
  font-family: 'fontello';
  src: url('fonts/fontello.eot?22408088');
  src: url('fonts/fontello.eot?22408088#iefix') format('embedded-opentype'),
       url('fonts/fontello.woff?22408088') format('woff'),
       url('fonts/fontello.ttf?22408088') format('truetype'),
       url('fonts/fontello.svg?22408088#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'radiohead';
  src: url('fonts/radiohead.eot');
  src: url('fonts/radiohead.eot?#iefix') format('embedded-opentype'),
       url('fonts/radiohead.woff') format('woff'),
       url('fonts/radiohead.ttf') format('truetype'),
       url('fonts/radiohead.svg#radiohead') format('svg');
  font-weight: normal;
  font-style: normal;
}

::-moz-selection { /* Code for Firefox */
    color: white;
    background: #6fb400;
}

::selection {
    color: white;
    background: #6fb400;
}

section#nav_menu-8 {
    float : right;
}

div.dg_singlepage_header {
    margin-top        : 32px; 
    margin-bottom     : 32px;
    text-align        : center;
}

div#dg_minimenu_toggler {
    margin-left       : -80px;
    margin-top        : -270px; 
    width             : 61px; 
    height            : 61px;
    cursor            : pointer;
    margin-bottom     : 100px; 
}

div#dg_gallery_toggler {
    margin-left       : -80px;
    margin-top        : -270px; 
    width             : 61px; 
    height            : 61px;
    cursor            : pointer;
    margin-bottom     : 300px; 
}

div#dg_presets_container {
    position          : relative;
    top               : -800px;
    left              : -200px;
    height            :  200px;
    margin-bottom     : -200px;
    width             : 64px;
}

div.dg_preset_wrapper {
    margin-left: 4px;
    cursor: pointer;
    float: right;
    background-size: 100%;
}
#dg_preset_classic {
    background-image: url("/3d-printed-custom-toys/wp-includes/images/logo_preset_default.png");
}
#dg_preset_plug {
    background-image: url("/3d-printed-custom-toys/wp-includes/images/logo_preset_plug.png");
}
#dg_preset_special {
    background-image: url("/3d-printed-custom-toys/wp-includes/images/logo_preset_curvy3.png");
}

/* The mini menu is initially invisible */
ul#dg_minimenu {
    display           : none;
    position          : absolute;
    background-color  : white;
}

div#dildo_settings {
    position          : relative;
    background-color  : grey;
    width             : 200px;
    height            : 400px;
}


.dg_missing_form_input { 
    border-width      : 1px;
    border-style      : solid;
    border-color      : #a80000;
    background-color  : #ffa8a8;   
    border            : 1px solid;
    color             : #ff0000; 
}

.error {
    color             : #a80000;
}



/* General  ---------- */
body, html {
    max-width: 100%;
}  
body {
    background: rgba(111,180,15,0.2);
}

p {
    text-align: justify;
}

.shipping p {
    float: left;
}

a, button, input {
    font-weight: 300;
}

a::focus {
    outline: dotted;
}

table thead th {
    border-bottom: none;
}

body, button, input, textarea,
h1, h2, h3, h4, h5, h6 {
	font-family: "champagne__limousinesregular";    
}
#message_layer_blanket {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
#message_layer_box {
    background-color: white !important;
    /*left: 0 !important;
    right: 50% !important;
    top: 260px !important;
    width: 100% !important;*/
}
.col-full {
    max-width: none;
    margin: 0 auto;
    /*border: 1px solid blue;*/
}

h2, #page, .dg_preset_wrapper, #material label, #color label, #dg-settings, .main-navigation ul li a, .site-title a, ul.menu li a, 
.site-branding h1 a, #publish-and-order, .dg_bezier_controls, #vibration_settings, #site-navigation button, #site-navigation .handheld-navigation ul, 
#site-navigation .handheld-navigation li a {
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

/* Font-Smoothing */
h1, h2, h3, h4, h5, h6, p, li, td {
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTJBQkFGRUZFOTIyMTFFMEJDRDNEQzkxOTVGOTNBODAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTJBQkFGRjBFOTIyMTFFMEJDRDNEQzkxOTVGOTNBODAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MkFCQUZFREU5MjIxMUUwQkNEM0RDOTE5NUY5M0E4MCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MkFCQUZFRUU5MjIxMUUwQkNEM0RDOTE5NUY5M0E4MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtrV+I8AAAAQSURBVHjaYvj//z8DQIABAAj8Av7bok0WAAAAAElFTkSuQmCC',sizingMethod=crop);
      zoom: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
}

#page {
    margin: 0 auto;
    max-width: none;
    background: white;
    min-height: 100%;
    height: auto important;
    height: 100%;
}

h2 {
    font-weight: 300;
    margin: 0;
    padding: 0;
}

#content .col-full > h2 {
    text-align: center;
}

#masthead a:hover, #masthead li.current-menu-item > a, #page a:not(.checkout-button):focus {
    color: #6fb400;
    outline: none;
}

li {
    list-style: none;
}

table tbody td {
    background: transparent;
}

#masthead {
	/* display          : none; */
    margin-bottom : 0;   /* EDIT Ika 2016-04-04 Abstand Header-zu-Content war zu groß */ 
    padding-top: 0.8em;
    border-bottom: 1px solid #494c50;
}

.secondary-navigation #menu-shop-menu a {
    padding: 0 12px 24px;
}

.secondary-navigation .menu > li > a::before {
    top: 9%;
}

.main-navigation, .woocommerce-active .site-header .site-header-cart {
    padding-top: 0;
}

.main-navigation ul.menu > li:first-child, .main-navigation ul.nav-menu > li:first-child {
    margin-left: 0;
}

.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a, .site-header-cart .cart-contents {
    padding: 0 12px 6px;
}

.main-navigation ul.menu > li > a:first-child, .main-navigation ul.nav-menu > li > a:first-child {
    padding: 0 12px 6px 0;
}

.site-header .site-logo-anchor img, .site-header .site-logo-link img {
    /*max-height: 2.618em;*/
    max-width: 125px;
    height: none; 
}

.woocommerce-active .site-header .secondary-navigation {
    float: right;
    margin-right: 0;
    width: auto;
    font-size: 18px;
    margin-bottom: 0;
}

 #content {
    padding-top: 0.2em;
    background: white;
    position: relative;
    height: auto;
}

button, input[type="button"], input[type="reset"], input[type="submit"], .button, .added_to_cart, .widget-area .widget a.button, .site-header-cart .widget_shopping_cart a.button {
    background: #6fb400;
    border-color: #6fb400;
}

.page-id-2779 #content {
    min-height: 720px; /* nur für dev - muss angepasst werden für jeden Media Query, wenn canvas fertig sind */
}

.hentry .entry-header {                        /* EDIT Ika 2016-04-04 Abstand Header-zu-Content war zu groß */ 
    margin-bottom : 0;
}

.hentry {                                      /* EDIT Ika 2016-04-04 Abstand Header-zu-Content war zu groß */ 
    /* margin-bottom : 0; */ 
    padding-bottom : 0;
    border-bottom : 0;
    margin: 0;
}

.content-area, .widget-area {
    margin-bottom: 0;
}

footer#colophon {
    background: white;
    margin: 0 auto;
    border-top: 1px solid black;
}

footer .widget {
    margin: 0;
}

footer#colophon a {
    color: #6f6f6f; 
}

footer #nav_menu-8 li {
    text-align: center;
    margin: 0;
    width: 50%;
}

/* Woocommerce -----------------------------------------------------------------------------------------------*/

    
table.cart td.actions input, .wc-proceed-to-checkout .button.checkout-button, button, input[type="button"], input[type="reset"], input[type="submit"], .button, .added_to_cart, .widget-area .widget a.button, .site-header-cart .widget_shopping_cart a.button {
        font-weight: 300;
}
a.remove::before {
        filter: invert(50%);
}
#payment .payment_methods li label {
        font-weight: 300;
        margin-left: 1em;
        margin-right: 1em;
}
button, input[type="button"], input[type="reset"], input[type="submit"], .button, .added_to_cart {
        box-shadow: none;
}
#content .cart-empty, #content .return-to-shop {
        text-align: center;
}
/* Sticky Warenkorb weißer Hintergrund */
.ssatc-sticky-add-to-cart {
    background: white;
}


/* Kasse Borders weg */
#order_review_heading, #order_review {
    border: none;
}
/*dev*/
#content .coming_soon {
    display: none;
}
.demo_store {
        background-color: #6fb400;
        font-size: 1,1em;
        padding: 0.4em;
        text-align: center;
}
.woocommerce-checkout .shop_table {
    background-color: white;
}
ul.products li.product.first{clear:none !important}
#order_review_heading {
    float: left;
}

#order_review .legal label {
    font-size: 1.3em;
}


/* "Dildo Generator" */
.dg_preset_wrapper:hover, #material label:hover, #color label:hover {
    opacity: 0.8;
}

#material > label {
    width: 86px;
    height: 86px;
    text-align: center;
    float: right;
    cursor: pointer;
    padding: 4px;
}

#material > label.coming_soon {
    background: white none repeat scroll 0 0;
    color: black;
    font-weight: 300;
}
#dg_wood_notice {
    color: red;
    left: 840px;
    position: absolute;
}

div.dg_preset_wrapper.coming_soon {
    padding: 4px;
}

.site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link {
    width: auto;
}
.site-branding h1.site-title {
    	/* letter-spacing   : 2px; */
        line-height          : 100%;
        font-weight          : light; /* normal; */
	text-transform       : uppercase;
	/* color                : #ff0000; */
	font-family          : "champagne__limousinesregular";
	line-break           : strict;
    letter-spacing: 0.03em;
    float: left;
}


header .main-navigation ul li a, header .site-title a, header ul.menu li a, header .site-branding h1 a, h2, p, li, td {
    font-weight: 300; 
    color: #494c50;
}

/* "Ajust your lust" */
.site-branding p.site-description {
    color : #6fb400;
    font-family : "radiohead";
    font-size : 1.6em;
    margin-left: 12px;
    font-weight: 100;
    float: left;
    line-height: 1;
    margin: 0 0 0 12px;
    display: block;
}

.dg_single-page label.dg_square {
    /* EDIT BY IKA : square have no border any more */
    border: 6px solid transparent; /* none */
}

.dg_single-page .dg_square, .dg_single-page .dg_rectangle{
    display: inline-block;
    position: relative;
    height: auto;
    margin-top: 10px;
}

/* EDIT IKAROS 2015-08-27 */
.dg_single-page .two_halves {
    width: 100%;
    height: 500px;
}

.dg_gallery_overlay {
    height: 520px;
    /* background-color: #5a0e59; /* purple; */
    /*float: left;*/
    /*display: inline-block;*/
    width: 100%;
    text-align: center;
}

.dg_gallery_tile {
    width : 22%;
    height: 160px; /*auto;*/
    background-color: #6FB400; /* #5a0e59; /* purple; /* #e30f96; */
    display: inline-block;
    margin: 1%;
    /* text-align: center; */
    padding-left: 30px;
    padding-top: 10px;
}

.dg_single-page .dg_bezier_controls > .dg_icon_selected {
    background-color: #6fb400;
    color: white;
    border: 2px dotted white;
    padding-top: 3px;
}
.dg_icon_selected::before {
    filter: invert(1);
    -moz-filter: invert(1);
    -webkit-filter: invert(1);
}

.dg_single-page .one-half {
    width: 45%;
    width: calc(50% - 5px);
}
.dg_single-page .one-half.display--table-cell {
    width: 50%;
}

.dg_single-page .one-half.odd{
    margin-right: 5px;
    vertical-align: top;
}


.dg_single-page .one-half.display--table-cell.even{
    margin-right: 0;
}

.dg_single-page .one-half.display--table-cell.odd{
    margin-left: 0;
    margin-right: 0;
}

 /* to keep the aspect radio of 1*1 */
.dg_single-page  .dg_square:before{
    content: "";
    display: block;
    padding-top: 100%;
}
  
.dg_single-page .dg_square-inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 20px;
}
.dg_single-page .dg_square-inner.dg_square-inner--with-label {
    padding-bottom: 24%;
}

.dg_single-page .dg_square--label {
    text-align: center;
    width: 100%;
    display: block;
    font-weight: bold;
    letter-spacing: 5px;
    font-size: 1em;
    bottom: 5px;
    position: absolute;
    left: 0;
}

.dg_single-page .dg_save-and-next--button,
.dg_single-page .dg_back--button  {
	text-align: center;
    font-size: 1.5em; 
    position: relative;
	width: 100%;
	height: 60px;
    line-height: 60px;
    vertical-align: top;
    cursor: pointer;
}

.dg_single-page .dg_save-and-next--button input,
.dg_single-page .dg_back--button input{
	padding: 0;
	color: inherit;
}
.dg_single-page .dg_save-and-next--button input:hover,
.dg_single-page .dg_back--button input:hover{
	color: inherit;
}

.dg_single-page .dg_save-and-next--button:after {
    content: '';
    position: absolute;
    right: -15px;
    top: 0;
    width: 0px;
    height: 0px;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 15px solid black;
    clear: both;
}
.dg_single-page .dg_back--button:before {
    content: '';
    position: absolute;
    left: -15px;
    top: 0;
    width: 0px;
    height: 0px;
    /*border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;*/
    border-right: 15px solid grey;
    clear: both;
}

.dg_single-page #size .js-number-input__control {
	cursor: pointer;
}
.dg_single-page #size .js-number-input__input{
	height: 50px;
	color: black;
	text-align: right;
	background: transparent;
	border: none;
	box-shadow: none;
	width: 35px; /*70px;*/
	/* size: 4; */
	letter-spacing: 2px;
	background-image: -webkit-repeating-linear-gradient(right, white, white 19px, transparent 19px, transparent 20px, white 20px, 
	white 37px, transparent 37px, transparent 38px, white 38px, 
	white 55px, transparent 55px, transparent 56px, white 56px);
	background-image: -moz-repeating-linear-gradient(right, white, white 19px, transparent 19px, transparent 20px, white 20px, 
	white 37px, transparent 37px, transparent 38px, white 38px, 
	white 55px, transparent 55px, transparent 56px, white 56px);
	background-image: linear-gradient(right, white, white 19px, transparent 19px, transparent 20px, white 20px, 
	white 37px, transparent 37px, transparent 38px, white 38px, 
	white 55px, transparent 55px, transparent 56px, white 56px);
}   
.dg_single-page #size .icon-plus:before,
.dg_single-page #size .icon-minus:before {
	line-height: 25px;
    font-size: 25px;
}

.dg_single-page .dg_preview img, 
.dg_single-page .dg_preview canvas{
	width: 100%;
	height: auto;
}
.dg_single-page .dg_bezier_controls > div {
    display: table-cell;
    width: 25%;
    vertical-align: top;
	text-align: center;
	line-height: 1.1em;
	font-size: 0.75em;
	font-weight: bold;
	letter-spacing: 2px;
	border: 5px solid transparent;
}
.dg_single-page .dg_bezier_controls .icon:before {
	font-size: 20px;
    line-height: 20px;
    margin-bottom: 10px;
}

.dg_single-page .dg_preview_controls{
	float: right;
	margin-bottom: 10px;
}

/*koment tady byl*/
.dg_single-page #preview_canvas,
.dg_single-page #bezier_canvas {
	max-width: 100%;
	height: auto;
    float: left;
}
.dg_single-page #color_and_surface .dg_save-and-next--button {
	position: absolute;
	bottom: 0;
}
.dg_single-page #color_and_surface .dg_color_square {
	width: 40px;
    height: 40px;
    border-radius: 100%;
    display: inline-block;
    vertical-align: top;
}

.dg_single-page #color > label,
.dg_single-page #surface > label {
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    width: 40px;
    height: 40px;
}

#material > label {
    width: 60px;
    height: 60px;
    color: white;   
    display: inline-block;
    margin-left: 4px;
    /* background: #6fb400;  */
}

#dg_material_wood {
    background: #6fb400;
    background-image: url("/3d-printed-custom-toys/wp-includes/images/icon_material_wood_200x200.png");
    background-size: 95% 95%; 
    background-repeat: no-repeat;
    background-position: 5% 5%;
}

#dg_material_silicone {
    background: #6fb400;
    background-image: url("/3d-printed-custom-toys/wp-includes/images/icon_material_silicone_200x200.png");
    background-size: 95% 95%; 
    background-repeat: no-repeat;
    background-position: 5% 5%;
}

fieldset#material {
    height : auto;
    float: left;
    width: 100%;
    margin: 0;
}

div#material_settings {
    height : auto;
}

.js-number-input {
    float: left;
    width: 50%;
    height: 100px;
    text-align: right;
}

.js-number-input label, .js-number-input input {
    display: block;
    font-size: 1.3em;
}

.js-number-input label {
    margin-top: 12px;
}

.js-number-input input {
    width: 45px;
    line-height: 1.5;
}

label {
    font-weight      : 300;
}

.js-number-input .js-number-input__control {
    float            : left;
    margin           : 0 6px 0 8px;
}

#color {
    margin-right     : 0;
}

.footer-widgets {
    padding-top      : 0;
    border-bottom    : none;
}

footer li {
    float            : left;
    text-decoration  : none;
    margin           : 0 12px 0 0;
}

.widget_nav_menu ul li::before {
    content          : none;
}

.site-info {
    padding          : 0;
    text-align       : center;
}

span.warning {
    font-weight      : bold;
    color            : #c88800;
}

.dg_single-page #color input#color-black + label {background: black;}
.dg_single-page #color input#color-grey + label {background: grey;}
.dg_single-page #color input#color-white + label {background: white;	border: 1px solid grey;}
.dg_single-page #color input#color-green + label {background: #005e14; } /* #6FB400;} */
.dg_single-page #color input#color-blue + label {background: #287CE4;}
.dg_single-page #color input#color-orange + label {background: orange;}
.dg_single-page #color input#color-yellow + label {background: yellow;}
.dg_single-page #color input#color-purple + label {background: purple;}
.dg_single-page #color input#color-red + label {background: red; margin-right: 0;}

.dg_single-page #color input[type="radio"]:checked + label {	
	border: 2px dotted white;
}
.dg_single-page #color input#color-white[type="radio"]:checked + label {    
    border: 2px solid black;
}

.dg_single-page #material input[type="radio"]:checked + label {	
	border: 2px dotted white;
}

.dg_single-page #surface input + label {
    border: 2px solid transparent;	
}

.dg_single-page #surface input + label:before {
	content: "";
    display: block;
    position: absolute;
    background-size: auto 100% ;
    background-repeat: no-repeat;
    font-family: "fontello"; 
    font-size: 34px;
    line-height: 40px;
}
.dg_single-page #surface input#surface-nubby + label:before { content:"\e805";}
.dg_single-page #surface input#surface-plain + label:before { content:"\e804";}

/* Sami: style aus template rausgenommen, div container die id 'dg-settings' vergeben & styles nach css verschoben */
#dg-settings {
    display: inline; 
    position: absolute; 
    left: 350px; 
}
#dg_surface_settings {
    right: 0;
}

/* Overrides on regular Form Elements */
/* EDIT IKA 2015-11-09: the new radio button is visible */
/* .dg_single-page input[type="radio"],  */
.dg_single-page input[type="button"], 
.dg_single-page input[type="submit"] {
    display: none;
}

/* ADDED BY IKA: by default radio boxes are now visible. Need a new invisible-class now. */
.no_display {
    display   : none;
}

input[type=number] {-moz-appearance: textfield; box-shadow: inset 0px 0px 0px 0px;}

::-moz-focus-inner {
    border: 0;
    padding: 0;
}
::-webkit-inner-spin-button { -webkit-appearance: none;}
::-webkit-outer-spin-button { -webkit-appearance: none;}

/* Helpers */

.dg_single-page .display--table {
	display: table;
	width: 100%;
    height: 100%;
}
.dg_single-page .display--table-row {
	display: table-row;
	width: 100%;
}
.dg_single-page .display--table-cell {
	display: table-cell;
	vertical-align: middle;
	position: relative;
}
.dg_single-page .display--block {
	display: block;
}
.dg_single-page .display-inline--block {
	display: inline-block;
}
.dg_single-page .icon {
	position: relative;
}
.dg_single-page .icon-plus,
.dg_single-page .icon-minus,
.dg_single-page .icon-edit,
.dg_single-page .icon-advanced {
	cursor: pointer;
}

.dg_single-page .icon:before {
	font-family: "fontello";
	content: "";
    display: block;
    margin: 0 auto;
    font-style: normal;
  	font-weight: normal;
  	speak: none;
    font-size: 20px;
    line-height: 20px;
}
    
.dg_single-page .icon-plus:before {
	/*content:"\e800";*/
	content: "";
	background-image:  url("images/plus.svg");
	background-size: 32px;
	height: 32px;
	width: 32px;
}
.no-svg .dg_single-page .icon-plus:before {
	background-image:  url("images/plus.png");
}

.dg_single-page .icon-minus:before {
	/*content:"\e801";*/
	content: "";
	background-image:  url("images/minus.svg");
	background-size: 32px;
	height: 32px;
	width: 32px;
}
.no-svg .dg_single-page .icon-minus:before {
	background-image:  url("images/minus.png");
}
.dg_single-page .icon-edit:before {
	/*content:"\e802";*/
	content: "";
	background-image:  url("images/edit.svg");
	background-size: 32px;
	height: 32px;
	width: 32px;
}
.no-svg .dg_single-page .icon-edit:before {
	background-image:  url("images/edit.png");
}

.dg_single-page .icon.icon-inline:before {
    display: inline-block;
}

.dg_single-page .bottom-aligned {
	vertical-align: bottom;
}

.dg_single-page .top-aligned {
	vertical-align: top;
}

.dg_single-page .dg_save-and-next--button {
	background: black;
	color: white;
	display: block; /* for labels */
}

.dg_single-page .dg_back--button {
	background: #6fb400;
	color: white;
}

.dg_back--button {
    cursor: pointer;
}

label#publish-button {
    cursor: pointer;
}

/* Dildo Generator general --------------------------------------------------------------------------------- */

    #dg-main-form {
        position: relative;
        height: 0;
        margin: 0;
    }

    #wrapper-bezier-dildo {
        display: none; /* Sami: mobile Bezier raus*/
    }

    .dg_bezier_controls {
        display: inline-block;        
        margin: 5px 0 10px;
    }

    #adjust {
        position: absolute;
        left: 0;        
    }

    div#dg_presets_container {
        top: 0;
        margin-bottom: 0;
        position: absolute;
        width: auto;
        height: auto;
    }        

    #dg-settings {         
        border-left-width: 0;
    }

    .dg_single-page #color, .dg_single-page #surface {
        width: 275px;
        right: 0;
        max-width: 100%;
    }

    .dg_single-page #color > label, .dg_single-page #surface > label {
        height: 32px;
        width: 32px;
        margin: 5px;
    }

    .dg_single-page #steps_container {
        margin: 0;
    }

    #order_display--price {
        font-size: 28px;
    }

    #price-wrapper {
        position: absolute;        
        left: 5%;
        width: 150px;
        max-width: 100%;
    }

    #vibration_settings {
        font-size: 1.3em;
        right: 0;        
    }   

    #vibration_settings label, #vibration_settings input, #vibration_settings span {
        padding-top: 3px;
        float: left;
    }

    #vibration_settings input {
        display: none;
    }

    #vibration_settings label {
        margin: 0 0 0 18px;
        width: 40px;
        height: 40px;
        cursor: pointer;
    }
    label[for="vibration-yes"] {
        padding-left: 3px;
    }
    label[for="vibration-no"] {
        padding-left: 5px;
    }

    #vibration_settings input[type="radio"]:checked + label {
        background: #6fb400;
        color: white;
        padding-top: 1px;
        border: 2px dotted white;
    }   

    #vibration-yes + label:hover {
      animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      perspective: 1000px;
    }

    @keyframes shake {
      10%, 90% {
        transform: translate3d(-1px, 0, 0);
      }
      
      20%, 80% {
        transform: translate3d(2px, 0, 0);
      }

      30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
      }

      40%, 60% {
        transform: translate3d(4px, 0, 0);
      }
    }

    #dg_bend, #dg_zoom, #dg_surface_settings, #vibration_settings {
        position: absolute;
        font-size: 1.3em;
    }
    #dg_surface_settings {
        top: 250px;
    }
    #vibration_settings {
        top: 190px;
    }
    #dg_bend {top: 410px; left: 842px; width: 260px; max-width: 100%;}
   
    #bend_controls-text {
        display: block;
        width: auto;
        float: right;
        max-width: 100%;
        /*padding: 0 12px 0 0;*/
    }

    #preview_bend {
        width: 130px;
        max-width: 100%;
    }

    #dg_zoom {top: 470px; left: 842px; width: 260px; max-width: 100%;}
/* End Dildo Generator general ---------------------------------------------------------------------------- */


/* ******************************************************* */
/* ********* MEDIA QUERIES ******************************* */
/* ******************************************************* */

/* mobile general */
@media only screen and (max-width: 767px) and (min-resolution: 1dppx) { 
      
    #adjust {
        top: 0; 
    }
    canvas {
        max-width: 300px;
        max-height: 394px;
    }
    div.dg_preset_wrapper {
        width: 86px;
        height: 86px;
        margin-right: 7px;
        margin-left: 7px;
    }
    #dg-settings, div#dg_presets_container, div#material_settings, .dg_single-page fieldset#color, #dg_surface_settings { 
        width: 300px; 
        left: 0; 
        margin: 0;
    }
    div#dg_presets_container {
        top: 410px;
    }
    #dg-settings {
        top: 520px;
    }
    #material > label {
        height: 86px;
        margin: 0 32px;
        width: 86px;
        font-size: 1.2em;
    }
    .js-number-input label {
        margin-right: 32px;
        margin-top: 24px;
    }
    #vibration_settings {
        top: 200px; 
        width: 300px;
        left: 50px;
        font-size: 1.5em;
    }
    #dg_surface_settings {
        top: 270px;
    }

    .dg_single-page #color > label, .dg_single-page #surface > label {
        width: 45px;
        height: 45px;
        margin: 1px;
    }

    #price-wrapper {
        top: 330px;
        width: 160px;
        left: 105px;
    }

    #publish-and-order {
        position: absolute;
        top: 930px;
    }

    #publish-and-order .one-half.display--table-cell {
        width: 100%;
        display: block;
    }
    .dg_single-page .dg_save-and-next--button::after {
        display: none;
    }

    .display--table-cell > div#dg_zoom, .display--table-cell > div#dg_bend, .display--table-cell > div#dg_wood_notice {
        display: none !important;
        visibility: hidden;
        top: 0;
        left: 0;
    }    
    h2 {
        font-size: 2em;
    }    
    #dg_surface_settings {
        font-size: 1em;
    }
    #page {
        min-width: 310px;
        max-width: calc(100%-10px);
    }
    .col-full {
        width: 300px;
    }
    #masthead {
        border-bottom: none;
        padding-top: 1em;
    }
    .site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link {
        margin: 0 0 0.8em 0;
        margin-bottom: none;
    }
    .handheld-navigation ul {
    }
    #site-navigation button {
        font-size: 1.8em;
        margin: 0;
        padding: 0.2em 0.5em;
        border: none;
    }
    #site-navigation button:active, #site-navigation button:hover {
        border: none;
        color: white;
        background: rgba(111,180,0,0.9)
      
    }
    #site-navigation .handheld-navigation li a {
        color: white;
        background-color: rgba(111,180,0,1);
        font-size: 1.6em;
        padding: 0.2em 0.5em;
        opacity: 1;        
    }
    #site-navigation .handheld-navigation li a:hover {
        opacity: 0.8;
        color: white;
    }
    #site-navigation .handheld-navigation li a::before {
        background-image: url("/wp-includes/images/logo_preset_default.png");
        background-size: auto 100%;
        color: transparent;
        content: "dg";
    }
    .page-id-2779 #content {
        min-height: 1150px;
    }
}

/* iPad general */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-resolution: 1dppx) {     
    #dg_bend, #dg_zoom, #dg_surface_settings, #vibration_settings {
        font-size: 1em;
    }
}

/* iPad portrait */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (min-resolution: 1dppx) {
    header {
        font-size: 1.1em;
    }
    #page {
        width: 768px;
        margin: 0 auto;        
    }
    .col-full {
        width: 728px;     
    }
    h2 {
        font-size: 3em;
        margin: 24px;
    }
    
    canvas {
        max-width: 350px !important;
        max-height: 460px;
    }
   #adjust {
        width: 360px; 
    }
    .dg_single-page .one-half.display--table-cell.even {
        padding-left: 10px;
    }
    #dg_zoom {
        float: left;
    }
    #zoom_control-text {
        border: 0 none;
        display: block;
        float: right;
        margin-left: 2px;
    }
    div#dg_presets_container {
        left: 378px;
    }    
    .dg_preset_wrapper {
        width: 86px;
        height: 86px;
    }

    #dg-settings, div#dg_presets_container, div#material_settings { 
        width: 360px;  
    }
    #dg-settings { 
        left: 368px;
        top: 100px;        
    } 
    .js-number-input label, .js-number-input input {
        display: block;
        font-size: 1.3em;
    }
    #material > label {
        width: 86px;
        height: 86px;
        text-align: center;
        cursor: pointer;
        padding: 4px;
    }
    #price-wrapper {
        top: 440px;
    }
    .dg_single-page #color, .dg_single-page #surface {
        width: 360px;
        margin-bottom: 0;
    }
    .dg_single-page #color > label, .dg_single-page #surface > label {
        height: 48px;
        width: 48px;
        margin-left: 4px;
    }
    .js-number-input input {
        width: 40px;
    }
    .js-number-input label {
        margin-top: 24px;
    }
    .dg_single-page .bottom-aligned {
        vertical-align: top;
    }
    #vibration_settings {
        top: 210px;
        font-size: 1.3em;
        width: 186px;
        left: 185px;
    }    
    #vibration_settings label {
        width: 36px;
        height: 36px;
    }
    #dg_surface_settings {
        top: 260px;
        height: 100px;
        left: 194px;
    }
    .dg_single-page #color, 
    .dg_single-page #surface {
        width: 181px;
    }
    .js-number-input label, .js-number-input input {
        font-size: 1.3em;
    }
    .dg_single-page .icon-minus::before {
        height: 32px;
        width: 32px;
        background-size: 32px;
    }
    .dg_single-page .icon-plus::before {
        height: 32px;
        width: 32px;
        background-size: 32px;
    }
    #dg_bend, #dg_zoom, #dg_wood_notice {
        top: 500px;
        margin: 0;
        width: 350px;
    }
    #dg_wood_notice {
        font-size: 1.3em;
        left: 0;
    }
    #dg_bend {
        left: 0;
    }
    #preview_bend {
        width: 230px;
        height: 24px;
        vertical-align: baseline;
    }
    #dg_zoom {
        left: 385px;
    }
    #dg_zoom span.icon {
        float: right;
        margin: 4px 6px 0 8px;
    }
    #dg_bend, #dg_zoom, #dg_surface_settings, #vibration_settings {
        font-size: 1.3em;
    }
    #publish-and-order {
        margin-top: 92px;
        font-size: 2em;
    }
    .page-id-2779 #content {
        min-height: 768px;
    }
}

/* iPad landsacpe */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (min-resolution: 1dppx) {
    
    #page {
        width: 1024px;
        margin: 0 auto;
    }
    .col-full {
        width: 984px;        
    }
    canvas {
        max-width: 300px !important;
        max-height: 394px;
    }
    #wrapper-bezier-dildo {
        display: table-cell;
    }
    #adjust .display--table > .one-half.display--table-cell.odd {
        padding-right: 0;
    }
    #adjust .display--table > .one-half.display--table-cell.odd .dg_save-and-next--button {
        max-width: 300px;
    }
    #adjust #publish-and-order .one-half.display--table-cell.odd {
        padding-right: 12px;
    }
    #publish-and-order .one-half.display--table-cell.even {
        padding-left: 0;
    }
    #dg-settings, div#dg_presets_container, div#material_settings {
        width: 258px;        
    }
    div#dg_presets_container {
        left: 726px;
    }
    div.dg_preset_wrapper canvas {display: none; /*dev*/}
    div.dg_preset_wrapper {
        width: 60px;
        height: 60px;
    }    
    #dg-settings { 
        left: 728px;
        top: 70px;
    } 
    div#material_settings {
        float: left;
    }
    .js-number-input label {
        margin-right: 4px;
    }
    .js-number-input input {
        width: 32px;
    }
    .dg_single-page .bottom-aligned {
        vertical-align: text-bottom;
    }
    #vibration_settings {
        top: 138px;
        font-size: 1em;
    }    
    #vibration_settings label {
        width: 32px;
        height: 32px;
    }
    #dg_surface_settings {
        top: 180px;
    }
    .dg_single-page #color, 
    .dg_single-page #surface {
        width: 267px;
    }
    .js-number-input label, .js-number-input input {
        font-size: 1em;
    }
    .dg_single-page .icon-minus::before {
        height: 20px;
        width: 20px;
        background-size: 20px;
    }
    .dg_single-page .icon-plus::before {
        height: 20px;
        width: 20px;
        background-size: 20px;
    }
    #dg_bend, #dg_zoom {
        top: 312px;
        margin: 0;
        width: 130px;
    }
    #zoom_control-text {
        border: 0 none;
        display: block;
        float: right;
    }
    #dg_bend span.icon {
        margin: 0 0 0 12px;
        vertical-align: sub;
    }
    #dg_zoom span.icon {
        float: right;
        margin: 5px 16px 0 0;
    }
    #dg_bend {
        left: 850px;
    }
    #preview_bend {
        /*height: 1px;
        vertical-align: super;
        width: 162px;*/
        display: none;
    }
    #dg_wood_notice {
        top: 310px;
        width: 130px;
        left: 875px;
        font-size: 1em;
        line-height: 1;
    }
    #dg_zoom {
        left: 692px;
    }
    .dg_single-page .icon-edit::before {
        background-size: 20px;
        height: 20px;
        width: 20px;
    }
    .dg_single-page .dg_bezier_controls {
        position: absolute;
        top: 345px;
        width: 260px;
        left: 377px;
    }
    .dg_single-page .dg_bezier_controls > div {
        border: none;
        text-align: left;
        font-weight: 300;
        line-height: 1;
        letter-spacing: 1px;
        font-size: 0.8em;
        padding: 4px;
    }
    .dg_bezier_controls .icon::before {
        margin: 0;
    }
    #publish-and-order {
        margin-top: 24px;
        font-size: 1.7em;
    }
    #price-wrapper {
        top: 340px;
        left: -50px;
    }
    .page-id-2779 #content {
        min-height: 540px;
    }
}

/* kleine Bildschirme */
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
    #page {width: 1024;}
    .col-full {width: 980px;} 
    .woocommerce-active .site-header .main-navigation {
        font-size: 20px;
    }
    canvas {
        max-width: 312px !important;
        max-height: 410px;
    }
    #wrapper-bezier-dildo {
        padding-left: 20px;
        display: table-cell;
    }
    #publish-and-order .one-half.display--table-cell.even {
        padding-left: 10px;
    }
    #dg-settings, div#dg_presets_container, div#material_settings {
        width: 258px;        
    }
    div#dg_presets_container {
        left: 722px;
    }
    div.dg_preset_wrapper canvas {display: none; /*dev*/}
    div.dg_preset_wrapper {
        width: 60px;
        height: 60px;
    }
    #dg-settings { 
        left: 724px;
        top: 70px;
    } 
    div#material_settings {
        float: left;
    }
    .js-number-input input {
        width: 32px;
    }
    .dg_single-page .bottom-aligned {
        vertical-align: text-bottom;
    }
    #vibration_settings {
        top: 140px;
        font-size: 1em;
    }    
    #vibration_settings label {
        width: 32px;
        height: 32px;
    }
    #dg_surface_settings {
        top: 189px;
        height: 45px;
    }
    .dg_single-page #color, 
    .dg_single-page #surface {
        width: 272px;
    }
    .js-number-input label, .js-number-input input {
        font-size: 1em;
    }
    .dg_single-page .icon-minus::before {
        height: 20px;
        width: 20px;
        background-size: 20px;
    }
    .dg_single-page .icon-plus::before {
        height: 20px;
        width: 20px;
        background-size: 20px;
    }
    #dg_bend, #dg_zoom {
        top: 320px;
        margin: 0;
        width: 130px;
    }
    #zoom_control-text {
        border: 0 none;
        display: block;
        float: right;
    }
    #dg_bend span.icon {
        margin: 0 0 0 12px;
        vertical-align: sub;
    }
    #dg_zoom span.icon {
        float: right;
        margin: 5px 16px 0 0;
    }
    #dg_bend {
        left: 850px;
    }
    #preview_bend {
        /*height: 1px;
        vertical-align: super;
        width: 162px;*/
        display: none;
    }
    #dg_wood_notice {
        top: 320px;
        width: 130px;
        left: 875px;
        font-size: 1em;
        line-height: 1;
    }
    #dg_zoom {
        left: 692px;
    }
    
    .dg_single-page .icon-edit::before {
        background-size: 20px;
        height: 20px;
        width: 20px;
    }
    .dg_single-page .dg_bezier_controls {
        position: absolute;
        top: 356px;
        width: 260px;
        left: 410px;
        margin: 0;
    }
    .dg_single-page .dg_bezier_controls > div {
        border: none;
        text-align: left;
        font-weight: 300;
        line-height: 1;
        letter-spacing: 1px;
        font-size: 0.8em;
        padding: 4px;
    }
    .dg_bezier_controls .icon::before {
        margin: 0;
    }
    #publish-and-order {
        margin-top: 12px;
        font-size: 1.8em;
    }
    #price-wrapper {
        top: 395px;
    }
    .page-id-2779 #content {
        min-height: 610px;
    }
}


/* Desktop ... ----------------- */ /* Sami 2016-04-10 */
@media only screen and (min-width: 1200px) {
    body {        
        font-size: 16px;
        letter-spacing: 0.02em;
    }
    h1 {
        font-size: 36px;
    }
    h2 {
        font-size: 24px;
    }
    h3 {
        font-size: 22px;
    }
    h4, h5, h6 {
        font-size: 18px;
    }
    #page {
        width: 1200px;
    }
    .col-full {
        width: 1100px;
    }
    .site-header .site-logo-anchor img, .site-header .site-logo-link img {
        width: 150px;
        max-width: 100%;
    }     
    .woocommerce-active .site-header .main-navigation {
        width: auto;  
        font-size: 22px;      
    }
    .woocommerce-active .site-header .site-header-cart {
        font-size: 18px;
        display: none;
    }
    .woocommerce-active .site-header .main-navigation, .woocommerce-active .site-header .site-header-cart {        
        padding-top: 0;
    }
    .site-header-cart {
        font-size: 14px;
    } 
    #primary {
        max-width: 100%;
    }
    .hentry .entry-header, .hentry .entry-header h1 {
        border-bottom: none;
    }
    footer#colophon {
        width: 1200px;         
        padding-top: 24px;
    } 

    /* Dildo Generator Desktop ---------------------------------------------------------------------------------------*/
   #adjust {
        width: 720px; 
    }
    .dg_single-page .one-half.display--table-cell.even {
        padding-left: 10px;
    }
    canvas {
        max-width: 350px !important;
        max-height: 460px;
    }
    #wrapper-bezier-dildo {
        display: table-cell;
    }
    .dg_bezier_controls {
        width: 350px;
    }
    #dg_zoom {
        float: left;
    }
    #zoom_control-text {
        border: 0 none;
        display: block;
        float: right;
        margin-left: 2px;
    }
    div#dg_presets_container {
        left: 734px;
    }    
    .dg_preset_wrapper {
        width: 86px;
        height: 86px;
    }
    #dg-settings, div#dg_presets_container { 
        width: 370px;  
    }
    #dg-settings { 
        left: 734px;
        top: 100px;
    } 
    #material > label {
        width: 86px;
        height: 86px;
        text-align: center;
        cursor: pointer;
        padding: 4px;
    }
    #price-wrapper {
        top: 440px;
    }
    .dg_single-page #color, .dg_single-page #surface {
        width: 275px;
        margin-bottom: 0;
    }
    .dg_single-page #color > label, .dg_single-page #surface > label {
        height: 32px;
        width: 32px;
        margin: 5px;
    }

    #publish-and-order {
        font-size: 2em;
    }
    #order_display--price {
        font-size: 28px;
    }   
    #dg_wood_notice {
        font-size: 1.2em;
        top: 410px;
        width: 260px;
    }
    .dg_preset_wrapper, #material label, #color label, #dg-settings {
        border: transparent;
    }    
     #dg_zoom span.icon {
        float: right;
        margin: 4px 6px 0 8px;
    }
    div#dg_preset_xxx, div#dg_material_xxx, div#dg_material_xxxxxx  {
        display: none;
    }
    /* End Dildo Generator Desktop -----------------------------------------------------------------------------*/   
}