/*================================================================
/*
/* Handcrafted with love by all the good people of STUDIO SYNAPSE
/*
/*	    www.studiosynapse.cz | justwow@studiosynapse.cz
/*
/*================================================================


/* =========================================================== */
/* -----  Logo na mobilu  ------------------------------ */
@media screen and (max-width: 768px) {
    #theLogoTop {
        width: 120px !important;
        top: 16px !important;
        left: 16px !important;
        z-index: 10001 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Zajisti, že logo v menu je vidět na mobilu */
    #theCapitainMenuPart1 #theLogoMenu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100px !important;
        margin: 4px 16px 0 !important;
        z-index: 10001 !important;
    }
    
    #theCapitainMenuPart1 #theLogoMenuIcon {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 28px !important;
        margin: 6px 0px 0 20px !important;
        z-index: 10001 !important;
    }
    
    /* Zajisti, že menu je vidět */
    #theCapitainMenuPart1 {
        z-index: 10001 !important;
    }
}

/* -----  Landscape Tablets 1024 px  ------------------------------ */
@media screen and (max-width:1023px) {
/* -----  Menu Two ------------------------------ */
#theCapitainMenuTwo { position:fixed; left:0; top:0; transform:none; display:block; width:100vw; height:100%; pointer-events:none;}
#theCapitainMenuPart1 { position:absolute; left:50%; top:32px; transform:translateX(-50%) scale(1); display:flex; flex-direction:row; justify-content:center; align-items:center; height:56px; background-color:var(--color-light-1); box-shadow:var(--shadow-level-2); border-radius:32px; overflow:hidden; white-space:nowrap; transition:all .75s var(--easing-2-easeout-ultrasmooth); pointer-events:all;}
#theCapitainMenuPart2 { position:fixed; left:50%; bottom:32px; transform:translateX(-50%) scale(1); display:flex; flex-direction:row-reverse; justify-content:center; align-items:center; gap:0 8px; padding:0 14px; height:56px; background-color:var(--color-light-1); box-shadow:var(--shadow-pulse-1) !important; border-radius:32px; overflow:hidden; white-space:nowrap; transition:all .75s var(--easing-2-easeout-ultrasmooth); pointer-events:all;}
.is-scrolling-up #theCapitainMenuPart1,
.is-scrolling-down #theCapitainMenuPart1 { transform:translateX(-50%) scale(0.98);}
.is-scrolling-up #theCapitainMenuPart2,
.is-scrolling-down #theCapitainMenuPart2 { transform:translateX(-50%) scale(0.98);}
/* -----  Bcg  ------------------------------ */
#theBcg { left:0; bottom:0; height:100vh;}
.bcg-illu { max-width:48vh; top:2vh; right:0;}
/* -----  Blob  ------------------------------ */
#theBlobSection { position:relative; left:auto; top:auto; height:auto; width:auto; margin-top:-8vh;}
#theBlobSection .blob-image { display:block; position:relative; left:auto; top:auto; margin:0 auto;}
#theBlobSection .blob-image img { }
#theBlobSection .blob-content { position:relative; width:auto; height:auto; left:auto; top:auto; margin-top:calc(-1 * (var(--blob-large) / 2.35));}
#theBlobSection.nocontent .blob-image { left:auto;}
#theBlobSection.nocontent .blob-content { left:auto;}
/* -----  Content  ------------------------------ */
#theContent { display:flex; width:96%; max-width:1024px; min-height:auto; padding:0; margin:0 auto;}
.questionnaire.form #theContent { padding:0; flex-direction:column; align-items:center;}
.questionnaire.form #theContent #theFormSection { margin:48px auto 112px;}
/* -----  webhome  ------------------------------ */
.webhome #theIntroSection { flex-direction:column; margin:0 auto; padding-top:44vh; padding-bottom:15vh;}
.webhome #theIntroSection.pushleft .intro-content { margin-right:auto; margin-left:auto;}
/* -----  Texts  ------------------------------ */
.text-block.image { flex-direction:column; margin:80px auto;}
.text-block.image.left { flex-direction:column;}
.text-block.image .text-content { width:80%;}
.text-block .text-images { width:80%; max-width:360px; margin-top:-5%;}
/* -----  Features  ------------------------------ */
.features-cards { gap:16px;}
.features-items { grid-template-columns:repeat(4, 1fr);}
.features-items .one-item { justify-content:flex-start;}
.features-items .one-item img { position:relative; top:auto; width:25%; margin-top:20%; margin-bottom:6%;}
.features-items .one-item p { min-height:auto;}
/* -----  Footer  ------------------------------ */
.footer-outro { flex-direction:column; gap:8px; margin:128px auto 128px;}
}


/* =========================================================== */
/* -----  Portait Tablets < 780 px  ------------------------------ */
@media screen and (max-width: 780px) {
html { font-size:100%;}
/* -----  Blob  ------------------------------ */
#theBlobSection .blob-image { max-width:100vw;}
#theBlobSection .blob-content { margin-top:-44vw;}
#theBlobSection .blob-content h1 { font-size:1.875rem; width:90%;}
#theBlobSection .blob-content p { width:80%;}
/* -----  Stories  ------------------------------ */
.stories-cards { padding:0 0 160px; width:100%; overflow:hidden;}
.stories-cards .one-story { width:100%; margin-bottom:128px;}
.stories-cards .story-thumbnail3d { width:80px;}
.stories-cards .story-container { right:0; top:-2%; width:92%; padding:24px 32px 32px;}
.stories-cards .story-container h2 { font-size:1rem; margin:1em auto .5em;}
.stories-cards .story-container p { font-size:1.0625rem; line-height:1.333; margin:0 auto 0.5em;}
.stories-cards .one-story.active { z-index:5;}
.stories-cards .one-story.active .story-thumbnail3d { transform:translateX(-4px) rotateY(180deg) rotateX(0deg) scale(1);}
/* -----  Pricelist  ------------------------------ */
.pricelists { margin:200px auto 128px;}
}


/* =========================================================== */
/* -----  Portait Tablets < 600 px  ------------------------------ */
@media screen and (max-width: 600px) {
html { font-size:100%;}
/* -----  Menu  ------------------------------ */
#theCapitainMenu { top:16px; height:40px;}
#theCapitainMenu #theLogoMenu { width:92px; margin:4px 16px 0;}
#theCapitainMenu ul { margin:0 16px 0 16px;}
#theCapitainMenu ul li { padding:0 8px; font-size:.875rem;}
/* -----  Menu 2  ------------------------------ */
#theCapitainMenuPart1 #theLogoMenu { display:none; width:92px; margin:4px 16px 0;}
#theCapitainMenuPart1 #theLogoMenuIcon { display:block; width:24px; margin:6px 0px 0 20px;}
/* -----  Blob  ------------------------------ */
#theBlobSection { margin-top:4vh;}
#theBlobSection .blob-image img { width:56%; left:22%; top:8%;}
/* -----  webhome  ------------------------------ */
.webhome #theIntroSection { padding-top:35vh; padding-bottom:15vh;}
.webhome #theIntroSection .intro-buttons { flex-direction:column; align-content:center; align-items:center; gap:12px;}
/* -----  Texts  ------------------------------ */
.text-block .intro-buttons { flex-direction:column; align-content:center; align-items:center; gap:12px;}
.text-block.withcontainer .text-content { padding:8% 6%; border-radius:var(--border-radius-l);}
/* -----  Features  ------------------------------ */
.features-cards { gap:16px; width:100%;}
.features-items { grid-template-columns:repeat(3, 1fr); gap:10px; padding:128px 20px 20px; border-radius:var(--border-radius-xl);}
.features-items .one-item img {width:28%; margin-top:15%; margin-bottom:6%;}
.features-items .one-item p { font-size:.75rem; padding:0 16px 8px;}
/* -----  Numbers  ------------------------------ */
.numbers-cards { width:90%;}
.numbers-cards .one-number { flex-direction:column; gap:8px; padding:32px; text-align:center;}
.numbers-cards .one-number h2 { text-align:center; margin:0 auto;}
.numbers-cards .one-number h2 br { display:none;}
.numbers-cards .number-thumbnail3d { min-width:64px; border-radius:var(--border-radius-mll);}
.numbers-cards .number-thumbnail3d .face { font-size:1.5rem; border-radius:var(--border-radius-mll);}
/* -----  Pricelist  ------------------------------ */
.pricelist-card .badge { font-size:1.25rem; padding:12px 24px; border-radius:24px 24px 8px 8px; transform:rotate(0deg) translate(-64px, -44px);}
.one-pricelist { padding:16px 24px 16px 32px}
.one-pricelist::before { width:200px;}
.one-pricelist h3 { font-size:1.875rem;}
/* -----  Features/Screens  ------------------------------ */
#theScreensSection { padding:0 48px 0 24px;}
.screens-stripe { gap:0 32px; padding:16px 32px 32px;}
.screens-stripe img { height:320px;}
/* -----  Services  ------------------------------ */
#theServicesSection { padding:0 48px 0 24px;}
/* -----  Clients  ------------------------------ */
.clients-stripe { height:104px;}
.clients-stripe .stripe-content { gap:3rem;}
.clients-stripe img { max-height:36px; max-width:96px;}
}

/* =========================================================== */
/* -----  Portait Tablets < 430 px  ------------------------------ */
@media screen and (max-width: 430px) {
/* -----  Menu 2  ------------------------------ */
#theCapitainMenuTwo {}
#theCapitainMenuPart1 { height:46px; top:16px;}
#theCapitainMenuPart1 #theLogoMenuIcon { margin:6px 0px 0 12px;}
#theCapitainMenuPart1 ul.switch-menu { height:40px; font-size:.75rem; padding:0; margin:0 2px 0 8px;}
#theCapitainMenuPart1 ul li a { height:34px; padding:0 12px;}
#theCapitainMenuPart2 { height:50px; bottom:32px; gap:0 8px; padding:0 14px;}
/* -----  Bcg  ------------------------------ */
:root {
	--blob-cursor:240px;
}
.bcg-illu { max-width:48vh; top:5vh;}
/* -----  Content  ------------------------------ */
#theContent { width:92%;}
/* -----  Intro  ------------------------------ */
#theIntroSection h1 { font-size:2rem;}
#theIntroSection p { font-size:1.0625rem; width:90%;}
/* -----  Texts  ------------------------------ */
.text-block h1 { font-size:1.625rem; width:90%;}
.text-block p { font-size:1.0625rem; width:90%;}
/* -----  Features  ------------------------------ */
.features-cards { gap:12px;}
.features-cards .one-card3d { width:144px; min-height:188px;}
.features-cards .one-card3d h2 { font-size:.9375rem; padding:0 24px 4px;}
.features-cards .one-card3d .face.back h2 { font-size:1.0625rem}
.features-items { grid-template-columns:repeat(3, 1fr); gap:8px; padding:120px 12px 12px; border-radius:var(--border-radius-l);}
.features-items .one-item p { padding:0 16px 8px; border-radius:var(--border-radius-ml);}
/* -----  Numbers  ------------------------------ */
.numbers-cards .one-number { gap:8px; padding:28px; margin-bottom:24px;}
.numbers-cards .one-number h2 { font-size:1.375rem; margin-top:8px;}
.numbers-cards .one-number p { font-size:.9375rem;}
.numbers-cards .number-thumbnail3d { min-width:48px; border-radius:var(--border-radius-ml);}
.numbers-cards .number-thumbnail3d .face { font-size:1.25rem; border-radius:var(--border-radius-ml);}
/* -----  Pricelist  ------------------------------ */
.pricelist-card .badge { font-size:1rem; padding:10px 16px; border-radius:20px 20px 8px 8px; transform:rotate(0deg) translate(-64px, -36px);}
.one-pricelist { padding:16px 24px 16px 32px}
.one-pricelist::before { width:190px; right:-30px;}
.one-pricelist h3 { font-size:1.75rem;}
.one-pricelist h2 { font-size:1.5rem;}
.one-pricelist p { font-size:.9375rem;}
.one-pricelist ul { font-size:.9375rem; margin:0;}
/* -----  Features/Screens  ------------------------------ */
.screens-stripe { gap:0 32px; padding:16px 28px 28px;}
.screens-stripe img { height:232px;}
.screens-stripe h2 { font-size:1.125rem;}
/* -----  Services  ------------------------------ */
.services-stripe { gap:0 32px; padding:4px 28px 16px;}
.services-stripe .one-service { width:248px;}
.services-stripe img { width:52%;}
.services-stripe h2 { font-size:1.125rem;}
.services-stripe p { font-size:.875rem;}
/* -----  Form  ------------------------------ */
#theFormSection form { padding:24px 20px 24px 20px;}
/* -----  Button  ------------------------------ */
.button { min-height:40px; font-size:.9375rem; padding-left:1.2em; padding-right:1.2em;}
.button.big { min-height:40px; font-size:1rem;}
/* -----  Footer  ------------------------------ */
.footer-block { font-size:.875rem; width:90%;}
}