body, html {
	width: 100%;
	min-width: 100%;
	height: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
}

@font-face {
    font-family: 'pixel';
    src: url('/fonts/pixel.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#appointer-widget-root > button,
#map,
.yButton,
#instagram,
#facebook {
	opacity: 0;
}

.loaded #appointer-widget-root > button,
.loaded #map,
.loaded .yButton,
.loaded #instagram,
.loaded #facebook,
.loaded button.wlaunchWidgetLoaderControl {
	animation: fadeIn 1.5s ease-in-out forwards 1s;
}

.smartbanner {
	opacity: 0;
}

.loaded .smartbanner {
	animation: fadeInDown .5s ease-in-out forwards 2s;
}

@keyframes showSquare {
	0% {
		transform: translate3d(0, 0, 0);
		width: 52px;
		height: 52px;
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	20% {
		transform: translate3d(-3px, -3px, 0);
		width: 59px;
		height: 59px;
	}
	30% {	
		transform: translate3d(0, 0, 0);
		width: 52px;
		height: 52px;
	}		
	100% {
		opacity: 1;
	}		
}

#squares rect {
	opacity: 0;
}

.loaded #squares rect {
	opacity: 0;
	animation: showSquare 1s ease-in-out forwards;
}

#lines rect {
    height: 0px;
	animation-fill-mode: forwards;
}

#red rect {
	fill: red;
}

#blue rect {
	fill: blue;
}

.loaded #lines rect.line46_1 { animation-name: line46_1; }
@keyframes line46_1 { 100% { height: 46.926px; } }

.loaded #lines rect.line46 { animation-name: line46; }
@keyframes line46 { 100% { height: 46.953px; } }

.loaded #lines rect.line46_2 { animation-name: line46_2; }
@keyframes line46_2 { 100% { height: 46.965px; } }

.loaded #lines rect.line47_1 { animation-name: line47_1; }
@keyframes line47_1 { 100% { height: 47.01px; } }

.loaded #lines rect.line47 { animation-name: line47; }
@keyframes line47 { 100% { height: 47.262px; } }

.loaded #lines rect.line47_2 { animation-name: line47_2; }
@keyframes line47_2 { 100% { height: 47.047px; } }

.loaded #lines rect.line48 { animation-name: line48; }
@keyframes line48 { 100% { height: 48.009px; } }

.loaded #lines rect.line50 { animation-name: line50; }
@keyframes line50 { 100% { height: 50.059px; } }

.loaded #lines rect.line56 { animation-name: line56; }
@keyframes line56 { 100% { height: 56.019px; } }

.loaded #lines rect.line57 { animation-name: line57; }
@keyframes line57 { 100% { height: 57.022px; } }

.loaded #lines rect.line61 { animation-name: line61; }
@keyframes line61 { 100% { height: 61.045px; } }

.loaded #lines rect.line61_1 { animation-name: line61_1; }
@keyframes line61_1 { 100% { height: 61.114px; } }

.loaded #lines rect.line97 { animation-name: line97; }
@keyframes line97 { 100% { height: 97.957px; } }

.loaded #lines rect.line104 { animation-name: line104; }
@keyframes line104 { 100% { height: 104.463px; } }

.loaded #lines rect.line104_1 { animation-name: line104_1; }
@keyframes line104_1 { 100% { height: 104.464px; } }

.loaded #lines rect.line120 { animation-name: line120; }
@keyframes line120 { 100% { height: 102.828px; } }

.loaded #lines rect.line115 { animation-name: line115; }
@keyframes line115 { 100% { height: 115.901px; } }

.loaded #lines rect.line117_1 { animation-name: line117_1; }
@keyframes line117_1 { 100% { height: 117.101px; } }

.loaded #lines rect.line117 { animation-name: line117; }
@keyframes line117 { 100% { height: 117.229px; } }

.loaded #lines rect.line159 { animation-name: line159; }
@keyframes line159 { 100% { height: 159.039px; } }

.loaded #lines rect.line167 { animation-name: line167; }
@keyframes line167 { 100% { height: 167.958px; } }

.loaded #lines rect.line168 { animation-name: line168; }
@keyframes line168 { 100% { height: 168.494px; } }

.loaded #lines rect.line170 { animation-name: line170; }
@keyframes line170 { 100% { height: 170.122px; } }

.loaded #lines rect.line173 { animation-name: line173; }
@keyframes line173 { 100% { height: 173.119px; } }

.loaded #lines rect.line280 { animation-name: line280; }
@keyframes line280 { 100% { height: 280.094px; } }

#logo {
    text-align: center;
    position: absolute;
    top: 5%;
    width: 100%;
}

#logo svg {
    max-width: 50%;
    height: auto;
    max-height: 50%;
    width: auto;
    margin: 0 auto;
}
.yButtonText {
    position: absolute!important;
    top: -100%!important;
    left: -100%!important;
}

#map {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 100%;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}		
}

@keyframes fadeInDown {
	0% {
		opacity: 1;
		transform: translate3d(0, -100%, 0);
	}
	100% {
		opacity: 1;
		transform: translateY(0, 0%, 0);
	}		
}

.yButton {
	right: 30px;
    margin: 0 auto;
	transform: translate(0, -30px) !important;
}

.loader {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
	transition: all 0.1s ease-in-out;
}

.loader img {
    position:absolute;
    top:0;
    bottom:0;
	left: 0;
    right: 0;
    margin:auto;
}

.info {
	opacity: 0;
	font-family: 'pixel';
}

.info * {
    font-size: 1.5rem;
}

.info {
	padding: 1rem 0 0;
}

.info .address {
	padding: 0 0 1rem;
}

.loaded .info {
	opacity: 1;
	transition: opacity 1s ease-in-out 1s;
}

.loaded .loader {
	opacity: 0;
}

#instagram,
#facebook {
	display: block;
	position: absolute;
	bottom: 3rem;
}
#instagram img,
#facebook img {
	height: 5rem;
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated; /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
}
#facebook {
	left: 3rem;
}
#instagram {
	right: 3rem;
}

#appointer-widget-root > button {
	background-color: #000 !important;
	position: relative !important;
	right: -50% !important;
	transform: translate(-50%);
	bottom: 8.25rem !important;
	font-size: 2rem !important;
	padding-top: 0px;
	padding-bottom: 0px;
	opacity: 0;
    font-family: 'pixel' !important;
	color: #fff !important;
	height: 5rem;
	     clip-path: polygon(
    0px calc(100% - 21px),
    3px calc(100% - 21px),
    3px calc(100% - 15px),
    6px calc(100% - 15px),
    6px calc(100% - 9px),
    9px calc(100% - 9px),
    9px calc(100% - 6px),
    15px calc(100% - 6px),
    15px calc(100% - 3px),
    21px calc(100% - 3px),
    21px 100%,
    calc(100% - 21px) 100%,
    calc(100% - 21px) calc(100% - 3px),
    calc(100% - 15px) calc(100% - 3px),
    calc(100% - 15px) calc(100% - 6px),
    calc(100% - 9px) calc(100% - 6px),
    calc(100% - 9px) calc(100% - 9px),
    calc(100% - 6px) calc(100% - 9px),
    calc(100% - 6px) calc(100% - 15px),
    calc(100% - 3px) calc(100% - 15px),
    calc(100% - 3px) calc(100% - 21px),
    100% calc(100% - 21px),
    100% 21px,
    calc(100% - 3px) 21px,
    calc(100% - 3px) 15px,
    calc(100% - 6px) 15px,
    calc(100% - 6px) 9px,
    calc(100% - 9px) 9px,
    calc(100% - 9px) 6px,
    calc(100% - 15px) 6px,
    calc(100% - 15px) 3px,
    calc(100% - 21px) 3px,
    calc(100% - 21px) 0px,
    21px 0px,
    21px 3px,
    15px 3px,
    15px 6px,
    9px 6px,
    9px 9px,
    6px 9px,
    6px 15px,
    3px 15px,
    3px 21px,
    0px 21px
  );
}

@media only screen and (min-device-width: 320px) and (max-device-width: 768px) and (orientation: portrait) {
	#appointer-widget-root > button,
	#instagram img,
	#facebook img {
		height: 3rem;
	    font-size: 1.5rem !important;
	}
	#appointer-widget-root > button,
	#instagram,
	#facebook {
			bottom: 5rem;
	}
	#facebook {
			bottom: 5rem;
	}
	
	#appointer-widget-root > button {
clip-path: polygon(
    0px calc(100% - 9px),
    3px calc(100% - 9px),
    3px calc(100% - 6px),
    6px calc(100% - 3px),
    9px calc(100% - 3px),
    9px 100%,
    calc(100% - 9px) 100%,
    calc(100% - 9px) calc(100% - 3px),
    calc(100% - 6px) calc(100% - 3px),
    calc(100% - 3px) calc(100% - 6px),
    calc(100% - 3px) calc(100% - 9px),
    100% calc(100% - 9px),
    100% 9px,
    calc(100% - 3px) 9px,
    calc(100% - 3px) 6px,
    calc(100% - 6px) 3px,
    calc(100% - 9px) 3px,
    calc(100% - 9px) 0px,
    9px 0px,
    9px 3px,
    6px 3px,
    3px 6px,
    3px 9px,
    0px 9px
  );
	}
	/*#logo svg {
		max-width: 90%;
		max-height: 90%;
	}
	.yButton {
		transform: scale(3,3) translate(0, -70px) !important;
	}
	
	.info * {
		font-size: 3rem;
	}*/
}
.smartbanner__info__author {
    display: none !important;
}

.smartbanner__info__title {
    font-size: 16px !important;
}

.smartbanner__info__price {
    font-size: 12.5px !important;
}

.smartbanner--android .smartbanner__info__title {
    font-size: 16px !important;
}

.smartbanner--android .smartbanner__info__price {
    font-size: 9.5px !important;
}

button.wlaunchWidgetLoaderControl {
	background: #000 !important;
	position: relative !important;
	right: -50% !important;
	transform: translate(-50%);
	bottom: 9rem !important;
	opacity: 0;
}

/* fix */
div#widget\ popup {
    top: 0px;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

div#widget\ popup > div {
    max-height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
}