@font-face {
  font-family: Space_bold;
  src: url(webfont/SpaceGrotesk-Bold.woff);
}

::selection {
background-color: #44c8f5;
}

-moz-::selection {
background-color: #44c8f5;
}

body {
Margin: 0;
Padding: 0;
font-family: Space_bold;
}

razmak {
letter-spacing: -4px;
}

razmakdva {
letter-spacing: -3px;
}

a {
color: black;
text-decoration: none;
background-color: none;
}

a#number:hover {
color: black;
text-decoration: none;
background-color: #44c7f4;
}

a#mail:hover {
color: black;
text-decoration: none;
background-color: #f186b6;
}

@media only screen and (min-width: 980px)
{

#confetti {
position: fixed;
top: 50%;
left: 50%;
margin-top: -540px;
margin-left: -960px;
Width: 1920px;
height: 1080px;
Z-index: 500;
background: no-repeat center center;
}

#quote {
Position: absolute;
top: calc(25%);
left: 30px;
width: 85%;
Z-index: 200;
}

#quote h1 {
Margin: 0;
Padding: 0;
font-size: calc(48px + (98 - 48) * ((100vw - 300px) / (1600 - 300)));
line-height: 1.1;
font-weight: normal;
}

#contact ul {
Position: relative;
float: left;
left: 30px;
top: 30px;
Margin: 0;
Padding: 0;
List-style: none;
font-size: calc(16px + (32 - 16) * ((100vw - 300px) / (1600 - 300)));
}

#contact #name {
margin-right: 60px;
margin-bottom: 30px;
}

#contact #address {
Z-index: 700;
}

#logo {
margin: 0;
padding: 0;
border: none;
position: absolute;
bottom: 30px;
left: 30px;
width: 12%;
min-width: 100px;
height: auto;
}

#slogan {
margin: 0;
padding: 0;
border: none;
position: absolute;
bottom: 30px;
right: 30px;
width: 12%;
min-width: 100px;
height: auto;
}
}

@media only screen and (max-width: 980px)
{


#confetti {
position: fixed;
top: 50%;
left: 50%;
margin-top: -540px;
margin-left: -960px;
Width: 1920px;
height: 1080px;
Z-index: 500;
background: no-repeat center center;
}

#quote {
Position: absolute;
top: calc(25%);
left: 30px;
width: 85%;
Z-index: 200;
}

#quote h1 {
Margin: 0;
Padding: 0;
font-size: calc(36px + (98 - 36) * ((100vw - 300px) / (1600 - 300)));
line-height: 1.1;
font-weight: normal;
}

#contact ul {
Position: relative;
float: left;
left: 30px;
top: 30px;
Margin: 0;
Padding: 0;
List-style: none;
font-size: calc(16px + (32 - 16) * ((100vw - 300px) / (1600 - 300)));
}

#contact #name {
margin-right: 60px;
margin-bottom: 30px;
}

#contact #address {
Z-index: 700;
}

#logo {
margin: 0;
padding: 0;
border: none;
position: absolute;
bottom: 30px;
left: 30px;
width: 12%;
min-width: 100px;
height: auto;
}

#slogan {
margin: 0;
padding: 0;
border: none;
position: absolute;
bottom: 30px;
right: 30px;
width: 12%;
min-width: 100px;
height: auto;
}

}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
#confetti {
position: fixed;
top: 50%;
left: 50%;
margin-top: -540px;
margin-left: -960px;
Width: 1920px;
height: 1080px;
Z-index: 500;
background: no-repeat center center;
background-size: 250%;
}

#quote {
Position: absolute;
top: calc(18%);
left: 30px;
width: 85%;
Z-index: 200;
}

#quote h1 {
Margin: 0;
Padding: 0;
font-size: calc(72px + (136 - 72) * ((100vw - 300px) / (1600 - 300)));
line-height: 1.1;
font-weight: normal;
}

#contact ul {
Position: relative;
float: left;
left: 30px;
top: 30px;
Margin: 0;
Padding: 0;
List-style: none;
font-size: calc(24px + (48 - 24) * ((100vw - 300px) / (1600 - 300)));
}

#contact #name {
margin-right: 60px;
margin-bottom: 30px;
}

#contact #address {
Z-index: 700;
}

#logo {
margin: 0;
padding: 0;
border: none;
position: absolute;
bottom: 30px;
left: 30px;
width: 23%;
min-width: 100px;
height: auto;
}

#slogan {
margin: 0;
padding: 0;
border: none;
position: absolute;
bottom: 30px;
right: 30px;
width: 23%;
min-width: 100px;
height: auto;
}
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
#confetti {
position: fixed;
top: 50%;
left: 50%;
margin-top: -540px;
margin-left: -960px;
Width: 1920px;
height: 1080px;
Z-index: 500;
background: no-repeat center center;
background-size: 250%;
}

#quote {
Position: absolute;
top: calc(18%);
left: 30px;
width: 85%;
Z-index: 200;
}

#quote h1 {
Margin: 0;
Padding: 0;
font-size: calc(72px + (136 - 72) * ((100vw - 300px) / (1600 - 300)));
line-height: 1.1;
font-weight: normal;
}

#contact ul {
Position: relative;
float: left;
left: 30px;
top: 30px;
Margin: 0;
Padding: 0;
List-style: none;
font-size: calc(24px + (48 - 24) * ((100vw - 300px) / (1600 - 300)));
}

#contact #name {
margin-right: 60px;
margin-bottom: 30px;
}

#contact #address {
Z-index: 700;
}

#logo {
margin: 0;
padding: 0;
border: none;
position: absolute;
bottom: 30px;
left: 30px;
width: 23%;
min-width: 100px;
height: auto;
}

#slogan {
margin: 0;
padding: 0;
border: none;
position: absolute;
bottom: 30px;
right: 30px;
width: 23%;
min-width: 100px;
height: auto;
}
}

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
#confetti {
position: fixed;
top: 50%;
left: 50%;
margin-top: -540px;
margin-left: -960px;
Width: 1920px;
height: 1080px;
Z-index: 500;
background: no-repeat center center;
background-size: 250%;
}

#quote {
Position: absolute;
top: calc(18%);
left: 30px;
width: 85%;
Z-index: 200;
}

#quote h1 {
Margin: 0;
Padding: 0;
font-size: calc(72px + (136 - 72) * ((100vw - 300px) / (1600 - 300)));
line-height: 1.1;
font-weight: normal;
}

#contact ul {
Position: relative;
float: left;
left: 30px;
top: 30px;
Margin: 0;
Padding: 0;
List-style: none;
font-size: calc(24px + (48 - 24) * ((100vw - 300px) / (1600 - 300)));
}

#contact #name {
margin-right: 60px;
margin-bottom: 30px;
}

#contact #address {
Z-index: 700;
}

#logo {
margin: 0;
padding: 0;
border: none;
position: absolute;
bottom: 30px;
left: 30px;
width: 23%;
min-width: 100px;
height: auto;
}

#slogan {
margin: 0;
padding: 0;
border: none;
position: absolute;
bottom: 30px;
right: 30px;
width: 23%;
min-width: 100px;
height: auto;
}
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
#confetti {
position: fixed;
top: 50%;
left: 50%;
margin-top: -540px;
margin-left: -960px;
Width: 1920px;
height: 1080px;
Z-index: 500;
background: no-repeat center center;
background-size: 250%;
}

#quote {
Position: absolute;
top: calc(18%);
left: 30px;
width: 85%;
Z-index: 200;
}

#quote h1 {
Margin: 0;
Padding: 0;
font-size: calc(72px + (136 - 72) * ((100vw - 300px) / (1600 - 300)));
line-height: 1.1;
font-weight: normal;
}

#contact ul {
Position: relative;
float: left;
left: 30px;
top: 30px;
Margin: 0;
Padding: 0;
List-style: none;
font-size: calc(24px + (48 - 24) * ((100vw - 300px) / (1600 - 300)));
}

#contact #name {
margin-right: 60px;
margin-bottom: 30px;
}

#contact #address {
Z-index: 700;
}

#logo {
margin: 0;
padding: 0;
border: none;
position: absolute;
bottom: 30px;
left: 30px;
width: 23%;
min-width: 100px;
height: auto;
}

#slogan {
margin: 0;
padding: 0;
border: none;
position: absolute;
bottom: 30px;
right: 30px;
width: 23%;
min-width: 100px;
height: auto;
}
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
#confetti {
position: fixed;
top: 50%;
left: 50%;
margin-top: -540px;
margin-left: -960px;
Width: 1920px;
height: 1080px;
Z-index: 500;
background: no-repeat center center;
background-size: 250%;
}

#quote {
Position: absolute;
top: calc(18%);
left: 30px;
width: 85%;
Z-index: 200;
}

#quote h1 {
Margin: 0;
Padding: 0;
font-size: calc(72px + (136 - 72) * ((100vw - 300px) / (1600 - 300)));
line-height: 1.1;
font-weight: normal;
}

#contact ul {
Position: relative;
float: left;
left: 30px;
top: 30px;
Margin: 0;
Padding: 0;
List-style: none;
font-size: calc(24px + (48 - 24) * ((100vw - 300px) / (1600 - 300)));
}

#contact #name {
margin-right: 60px;
margin-bottom: 30px;
}

#contact #address {
Z-index: 700;
}

#logo {
margin: 0;
padding: 0;
border: none;
position: absolute;
bottom: 30px;
left: 30px;
width: 23%;
min-width: 100px;
height: auto;
}

#slogan {
margin: 0;
padding: 0;
border: none;
position: absolute;
bottom: 30px;
right: 30px;
width: 23%;
min-width: 100px;
height: auto;
}
}