.m-none { margin: 0; }
.p-none { padding: 0; }
.m-t-none { margin-top: 0; }
.p-t-none { padding-top: 0; }
.m-r-none { margin-right: 0; }
.p-r-none { padding-right: 0; }
.m-b-none { margin-bottom: 0; }
.p-b-none { padding-bottom: 0; }
.m-l-none { margin-left: 0; }
.p-l-none { padding-left: 0; }
.m-xxs { margin: 0.125rem; }
.p-xxs { padding: 0.125rem; }
.m-t-xxs { margin-top: 0.125rem; }
.p-t-xxs { padding-top: 0.125rem; }
.m-r-xxs { margin-right: 0.125rem; }
.p-r-xxs { padding-right: 0.125rem; }
.m-b-xxs { margin-bottom: 0.125rem; }
.p-b-xxs { padding-bottom: 0.125rem; }
.m-l-xxs { margin-left: 0.125rem; }
.p-l-xxs { padding-left: 0.125rem; }
.m-xs { margin: 0.25rem; }
.p-xs { padding: 0.25rem; }
.m-t-xs { margin-top: 0.25rem; }
.p-t-xs { padding-top: 0.25rem; }
.m-r-xs { margin-right: 0.25rem; }
.p-r-xs { padding-right: 0.25rem; }
.m-b-xs { margin-bottom: 0.25rem; }
.p-b-xs { padding-bottom: 0.25rem; }
.m-l-xs { margin-left: 0.25rem; }
.p-l-xs { padding-left: 0.25rem; }
.m-sm { margin: 0.5rem; }
.p-sm { padding: 0.5rem; }
.m-t-sm { margin-top: 0.5rem; }
.p-t-sm { padding-top: 0.5rem; }
.m-r-sm { margin-right: 0.5rem; }
.p-r-sm { padding-right: 0.5rem; }
.m-b-sm { margin-bottom: 0.5rem; }
.p-b-sm { padding-bottom: 0.5rem; }
.m-l-sm { margin-left: 0.5rem; }
.p-l-sm { padding-left: 0.5rem; }
.m-md { margin: 1rem; }
.p-md { padding: 1rem; }
.m-t-md { margin-top: 1rem; }
.p-t-md { padding-top: 1rem; }
.m-r-md { margin-right: 1rem; }
.p-r-md { padding-right: 1rem; }
.m-b-md { margin-bottom: 1rem; }
.p-b-md { padding-bottom: 1rem; }
.m-l-md { margin-left: 1rem; }
.p-l-md { padding-left: 1rem; }
.m-lg { margin: 2rem; }
.p-lg { padding: 2rem; }
.m-t-lg { margin-top: 2rem; }
.p-t-lg { padding-top: 2rem; }
.m-r-lg { margin-right: 2rem; }
.p-r-lg { padding-right: 2rem; }
.m-b-lg { margin-bottom: 2rem; }
.p-b-lg { padding-bottom: 2rem; }
.m-l-lg { margin-left: 2rem; }
.p-l-lg { padding-left: 2rem; }
.m-xl { margin: 4rem; }
.p-xl { padding: 4rem; }
.m-t-xl { margin-top: 4rem; }
.p-t-xl { padding-top: 4rem; }
.m-r-xl { margin-right: 4rem; }
.p-r-xl { padding-right: 4rem; }
.m-b-xl { margin-bottom: 4rem; }
.p-b-xl { padding-bottom: 4rem; }
.m-l-xl { margin-left: 4rem; }
.p-l-xl { padding-left: 4rem; }
.m-xxl { margin: 8rem; }
.p-xxl { padding: 8rem; }
.m-t-xxl { margin-top: 8rem; }
.p-t-xxl { padding-top: 8rem; }
.m-r-xxl { margin-right: 8rem; }
.p-r-xxl { padding-right: 8rem; }
.m-b-xxl { margin-bottom: 8rem; }
.p-b-xxl { padding-bottom: 8rem; }
.m-l-xxl { margin-left: 8rem; }
.p-l-xxl { padding-left: 8rem; }

@media only screen and (min-width: 1025px) {
    .hero-banner-image {
        background-image: url(../img/zibuild1.png), url(../img/zi-o1.png), linear-gradient(to right, #cc2b5e, #753a88);
        background-repeat: no-repeat, no-repeat;
        background-color:#cc2b5e;
        background-position: right bottom, left center;
        text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    }

    .hero-banner-v2 {

    }
}

@media only screen and (max-width: 1024px) {
    .hero-banner-image {
        background: #cc2b5e url("../img/geiz-majesty-500px.png") no-repeat center;
        text-shadow:
                2px 0 0 #2980b9,
                -2px 0 0 #2980b9,
                0 2px 0 #2980b9,
                0 -2px 0 #2980b9,
                1px 1px #2980b9,
                -1px -1px 0 #2980b9,
                1px -1px 0 #2980b9,
                -1px 1px 0 #2980b9;
    }
}

.hero.hero-home h1, .hero.hero-post h1 {
    font-size: 80px;
    font-weight: bolder;
    color:#fff !important;
}

.hero.hero-home h2, .hero.hero-post h2 {
    font-size: 25px;
    font-weight: bolder;
    color:#fff !important;
}

.is-purple {
    background-image: linear-gradient(to right, #cc2b5e, #753a88);
    background-color:#cc2b5e;
    color:#fff;
}
.is-frost {
    background-image: linear-gradient(to right, #000428, #004e92);
    background-color:#004e92;
    color:#fff;
}



.hero.hero-support h1 {
    font-size: 60px;
    font-weight: bolder;
}

.hero.hero-support h2 {
    font-size: 40px;
    font-weight: bolder;
}

.w-50 {
    width: 50%;
}

.middle-block {
    margin: 0 auto;
}

.post-image-pic {
    text-align: center;   
}

@media (min-width: 320px) {
    .post-image-pic img {
        max-width: 100%;
    }

    .hero.hero-home h1, .hero.hero-post h1 {
        font-size: 50px;
        padding-bottom: 15px;
    }
}

@media (min-width: 728px) {
    .post-image-pic img {
        max-width: 600px;
        max-height: 100%;
        object-fit: cover;
    }

    .hero.hero-home h1, .hero.hero-post h1 {
        font-size: 60px;
        padding-bottom: 10px;
    }
}


.movies-banner {
    background-image: url(../img/movies-banner-60p.webp);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-shadow: 2px 0 0 #ff00ff, -2px 0 0 #ff00ff, 0 2px 0 #ff00ff, 0 -2px 0 #ff00ff, 1px 1px #ff00ff, -1px -1px 0 #ff00ff, 1px -1px 0 #ff00ff, -1px 1px 0 #ff00ff;
}

.movies-banner h1 {
    font-size: 80px;
	font-weight: bolder;
	padding-bottom: 10px;
}

.movies-banner h2 {
	font-size: 35px;
	font-weight: bolder;
}


.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.flex {
    display: flex;
}
.h-10 {
    height: 2.5rem;
}
.items-center {
    align-items: center;
}
.justify-between {
    justify-content: space-between;
}
.space-x-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.font-medium {
    font-weight: 500;
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-yellow-300,
.hover\:text-yellow-300:hover {
    --tw-text-opacity: 1;
    color: rgb(253 224 71 / var(--tw-text-opacity));
}
.hover\:text-gray-100:hover {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity));
}
@media (min-width: 640px) {
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}