/* Reset stiilid */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,ol,ul,li,form,label,table,tbody,tfoot,thead,tr,th,td,img {
border:none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
padding:0;
vertical-align:baseline; }

html {font-size:100.01%;}

body {
background:url(img/taust.jpg) no-repeat top left;
font-family:Arial, Helvetica, sans-serif; }

#container {
position:relative;
width:980px; }

/* Font stiilid */
h1, h2, h3, h4 p {font-weight:normal;color:#000; line-height:130%;}
h1 {font-size:20px; margin-bottom:5px; font-weight:bold;}
h2 {font-size:13px; margin:25px 0 5px; font-weight:bold; text-transform:uppercase;}
h3 {font-size:13px; margin:40px 0 5px; font-weight:bold;}
h4 {font-size:11px; margin-bottom:5px; padding-bottom:10px; text-transform:uppercase; letter-spacing:1px; border-bottom:#bbb 1px dashed;}
p  {font-size:12px; margin-bottom:15px;}
.esileht h1    {font-size:13px; font-weight:bold; letter-spacing:2px; margin:-30px 0 0; padding:0 0 0 5px; text-align:center;}
.tagasiside p {line-height:170%; margin:0; padding:0;}
.rohk { color:#FF3300;}
a {font-size:12px; color:#000;text-decoration:underline;}
.teenused a {font-size:13px;}

.hreview {border:1px solid #ddd; margin:10px 0 15px 0; padding:10px 20px 15px 20px; background:#f3f3f3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f3f3f3'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f3f3f3)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #f9f9f9,  #f3f3f3); /* for firefox 3.6+ */}
.hreview .reviewer .fn {font-size:12px; font-weight:700; font-style:italic;}

/* Põhja stiilid */
#header {
float:left;
width:1000px;
height:140px; }

#sisuosa {
float:left;
width:980px;
padding:0 0 50px;
position: relative; /* Added - needed for absolute kitarr positioning relative to this */
}

#footer {
float:left;
width:650px;
border-top:1px solid #999;
margin:30px 0 0 27px;
clear: both; /* Added - Good practice for element after floats */
padding-top: 15px; /* Added - Give space above footer content */
}

/* Header stiilid */
.logo {
position:absolute;
top:50px;
left:155px;
z-index:999;
float:left;
width:181px; }
.logo img { display: block; width: 100%; height: auto; } /* Added */

.menu { margin:100px 0 0 350px; }

/* --- NEW CSS Button Styles --- */
a.button {
    /* Layout */
    display: block;
    float: left;
    height: 30px; /* Original height */
    margin-right: 6px;
    box-sizing: border-box; /* Include padding/border in height/width */

    /* Appearance */
    background-color: #fff; /* Light grey background */
    color: #333333; /* Dark grey text */
    border: 1px solid #fff; /* Subtle border */
    border-radius: 6px; /* Rounded corners */
    padding: 0 10px; /* Horizontal padding for text */
    line-height: 28px; /* Center text vertically (height - 2*border) */
    text-align: center;

    /* Text */
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;

    /* Optional: Smooth transition */
    transition: background-color 0.2s ease, color 0.2s ease;
}

a.button:hover,
a.button:active,
a.button.active { /* Apply hover/active styles also to .active class */
    background-color: #333333; /* Dark background on hover/active */
    color: #ffffff; /* White text on hover/active */
    border-color: #333333; /* Match border to background */
    outline: none;
}
/* --- END NEW CSS Button Styles --- */

/* Sisuosa stiilid */
.ornament {
/*background:url(img/slideshow_ornamendid.png) no-repeat top left;*/
width:799px;
height:315px;
z-index:800;
position:absolute;
_top:140px;  /*IE6<=*/
_left:0;     /*IE6<=*/
top:140px;
left:182px;
display: none; /* Added - Hide if not used */
}

.kitarr {
background:url(img/kitarrinurk.png) no-repeat top left;
position:absolute;
top:333px; /* Should still align below the slider area */
left:182px; /* Should still align with the start of the slider area */
z-index:999; /* Ensure it's above slider content if overlap occurs */
width:39px;
height:273px; }

.sisu {
margin:50px 0 0 220px;
padding:0 50px 0 10px;
position: relative; /* Added - Context for floated images */
z-index: 5; /* Added - Ensure content is below kitarr */
}

/* --- List Item Styles --- */
.sisu ul {
    font-size: 12px; /* Keep original font size */
    padding: 0 0 20px 0; /* Remove default left padding, keep bottom */
    margin: 0; /* Ensure no extra margin */
}

/* Default list item style */
.sisu li {
    list-style: none; /* Remove default bullet */
    padding: 0 0 5px 20px; /* Space for the pseudo-element */
    position: relative; /* Needed for absolute positioning of ::before */
    /* Remove old list-style-position if it was set */
}

.sisu li::before {
    content: '\203A'; /* Right angle bracket › */
    position: absolute;
    left: 0;
    top: 0px; /* Adjust for vertical alignment */
    color: #555; /* Dark grey color for the marker */
    font-weight: bold;
    font-size: 1.2em; /* Make it slightly larger */
}

/* Special list item style (Pulmaema / Garantii) */
.pulmaema li { /* Also applies to .garantii ul.pulmaema li */
    list-style: none; /* Ensure no default style */
    background: none; /* *** REMOVE background image *** */
    padding: 0 0 5px 25px; /* Adjust padding for new icon */
    position: relative; /* Keep relative positioning */
}

.pulmaema li::before {
    content: '\2713'; /* Checkmark ✓ */
    position: absolute;
    left: 0;
    top: 0px; /* Fine-tune vertical alignment */
    color: #28a745; /* Green color */
    font-weight: bold;
    font-size: 1.1em; /* Adjust size as needed */
}
/* --- END List Item Styles --- */


.sisu img {
float:right;
margin:10px; }

.garantii {
margin:10px 0 0 170px;
clear: both; /* Added - Ensure it clears floated images */
}

/* Footer stiilid */
table.kontakt {
font-size:13px;
font-weight:700;
color:#888;
text-align:left;
margin:15px 0 0 80px; }

table.kontakt td {
background:url(img/icon.png) no-repeat center left;
border:none;
padding:0 10px 0 15px; }
/* Added TH style to match */
table.kontakt th {
 font-weight: bold;
 padding: 0 10px 0 0;
 border: none;
 text-align: left;
}


.sisu a:hover,#footer a:link,#footer a:active,#footer a:visited {
color:#247CC5;
text-decoration:underline; }
.email a { word-break: break-all; } /* Added */

object, iframe { /* Added styles for video embeds */
margin-right:15px;
margin-bottom: 15px; /* Added */
float: left; /* Added */
}
/* Add clearfix for video container */
.sisu::after {
    content: "";
    display: table;
    clear: both;
}

/* --- Swiper Slider Specific Styles --- */
#slider {
    /* Explicit desktop size and position */
    width: 799px; /* Match old ornament width */
    height: 410px; /* Maintain aspect ratio approx 1.95:1 based on mobile */
    margin: 0 0 15px 182px; /* Align with kitarr */
    position: relative; /* Needed for Swiper arrows */
    overflow: hidden; /* Clip slide transitions */
    /* Adjust vertical position if needed, original was directly after header */
    top: 0; /* Relative to #sisuosa */
    z-index: 1; /* Ensure it's below .kitarr (z-index 999) */
}

#slider .swiper-slide {
    text-align: center; /* Center image if it's smaller */
    font-size: 18px;
    background: #fff; /* Background for slides */

    /* Center slide content vertically */
    display: flex;
    justify-content: center;
    align-items: center;
}

#slider .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the slide area */
}

/* Basic styling for Swiper arrows for better visibility */
.swiper-button-next::after,
.swiper-button-prev::after {
    color: #FFF; /* White arrow */
    text-shadow: 0 0 5px rgba(0,0,0,0.5); /* Add shadow for contrast */
    font-size: 24px; /* Adjust size if needed */
}


/* --- END OF ORIGINAL CSS --- */


/* ------------- MEDIA QUERY FOR MOBILE (< 768px) ------------- */

@media (max-width: 768px) {

    /* Make basic structure fluid */
    body {
        background-image: none; /* Remove desktop background */
        background-color: #f0f0f0; /* Example mobile background */
        -webkit-text-size-adjust: 100%; /* Prevent font scaling on rotate */
    }

    #container {
        width: 100%; /* Fluid width */
        padding: 0 5px; /* Add padding */
        box-sizing: border-box; /* Include padding in width */
    }

    #header {
        float: none; /* Remove float */
        width: 100%;
        height: auto; /* Auto height */
        padding-bottom: 5px;
    }

    #sisuosa {
        float: none; /* Remove float */
        width: 100%;
        padding: 0 10px 30px 10px; /* Adjust padding */
        position: static; /* Reset positioning context */
        box-sizing: border-box;
    }

    #footer {
        float: none; /* Remove float */
        width: auto; /* Auto width based on content */
        margin: 20px 10px 0 10px; /* Adjust margin */
        padding-top: 10px;
        border-top: 1px solid #999;
    }

    /* Adjust Header Elements */
     .logo {
        position: static; /* Remove absolute positioning */
        float: none; /* Remove float */
        width: 140px; /* Smaller logo */
        margin: 15px auto 5px auto; /* Center */
        z-index: auto;
    }

    .menu {
         margin: 5px 0 0 0; /* Reset margin */
         text-align: center;
         padding: 0 5px;
    }

    /* --- Mobile Button Adjustments (Pure CSS) --- */
    a.button {
        float: none; /* Remove float */
        display: inline-block; /* Allow wrapping */
        font-size: 11px; /* Smaller button text */
        height: 28px; /* Adjust height */
        line-height: 26px; /* Adjust line height (height - 2*border) */
        padding: 0 10px; /* Adjust padding */
        margin: 2px;
    }
    /* Hover/Active state colors are already defined globally */


    /* Hide desktop-specific elements */
    .kitarr, .ornament {
        display: none;
    }

    /* Adjust Content Area */
    .sisu {
        margin: 20px 0 0 0; /* Remove desktop left margin */
        padding: 0; /* Reset padding, #sisuosa handles outer padding */
        z-index: auto; /* Reset z-index */
    }

     /* Make images responsive */
     img {
        max-width: 100%;
        height: auto;
        display: block; /* Helps center if margin auto used */
    }
     /* Ensure content images are responsive and centered */
    .sisu img {
        float: none; /* Remove float for mobile */
        margin: 15px auto; /* Center images */
        display: block; /* Ensure block display */
    }

    /* --- Mobile List Styles --- */
    .sisu ul {
        padding: 0 0 10px 0; /* Adjust bottom padding */
    }
    /* Default list item */
    .sisu li {
        padding: 0 0 6px 20px; /* Adjust padding */
        /* list-style-position: outside; <- No longer needed */
    }
    .sisu li::before {
         /* Adjustments usually not needed, but can fine-tune top/left here */
         top: 0px;
    }
    /* Checkmark list item */
    .pulmaema li {
        padding: 0 0 6px 25px; /* Adjust padding */
    }
    .pulmaema li::before {
         /* Adjustments usually not needed, but can fine-tune top/left here */
         top: 2px;
    }
    /* --- END Mobile List Styles --- */

    .hreview {
        padding: 10px;
    }

    .garantii {
        margin: 15px 0 0 0; /* Remove desktop left margin */
    }

    /* Stack footer contact info */
    table.kontakt {
        font-size: 11px;
        margin: 10px auto 0 auto; /* Center table */
        width: 100%; /* Full width */
        max-width: 300px; /* Constrain width */
    }
    table.kontakt th, table.kontakt td {
        display: block; /* Stack cells */
        width: 100%;
        text-align: center;
        padding: 6px 5px;
        background: none; /* Remove icon */
        border-bottom: 1px solid #eee; /* Add separator */
    }
    table.kontakt th {
         border-bottom: 1px solid #ccc;
         padding-bottom: 0;
         color: #333;
         font-weight: bold;
    }
     table.kontakt tr:last-child td:last-child {
         border-bottom: none; /* Remove last border */
    }


    /* Make videos responsive */
    object, iframe {
        float: none; /* Remove float */
        display: block;
        margin: 10px auto; /* Center iframe */
        max-width: 100%; /* Full width */
        width: 100%; /* Use 100% width */
        height: auto; /* Auto height */
        aspect-ratio: 16 / 9; /* Use aspect ratio for responsive height */
    }
     .sisu::after { /* Disable clearfix on mobile */
        display: none;
    }


    /* Make Slider Responsive */
    #slider {
        width: 100%; /* Fluid width */
        height: auto; /* Auto height */
        aspect-ratio: 800 / 410; /* Maintain aspect ratio */
        margin: 0 auto 15px auto; /* Center and add bottom margin, remove desktop margin-left */
        position: relative; /* Keep for arrows */
        overflow: hidden; /* Keep */
        top: auto; /* Reset desktop positioning */
        left: auto; /* Reset desktop positioning */
        z-index: 1; /* Reset z-index if needed, should be fine */
    }

    #slider .swiper-slide img {
         /* Styles already defined globally for responsiveness, ensure they apply */
         display: block;
         width: 100%;
         height: 100%;
         object-fit: cover;
    }

    /* Adjust Swiper arrows for mobile */
    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 20px; /* Slightly smaller arrows */
    }
    /* Optional: Hide arrows on very small screens */
    /* @media (max-width: 480px) {
        .swiper-button-next, .swiper-button-prev { display: none; }
    } */

     /* Remove Old Nivo specific rules that were in mobile query */
     .nivo-directionNav, .nivo-controlNav, .nivo-controlNav a, .nivo-controlNav a.active {
         /* These properties are now irrelevant */
         display: none !important; /* Ensure they are gone */
     }

     .esileht h1 {
         font-size: 12px;
         margin: 15px 5px 0; /* Adjust margin */
         padding: 0; /* Reset padding */
         letter-spacing: normal; /* Reset letter spacing */
     }
}

/* Optional: Even smaller screens */
@media (max-width: 480px) {
     /* --- Mobile Button Adjustments (Pure CSS) for Stacking --- */
     a.button {
         display: block; /* Stack buttons vertically */
         width: 90%; /* Take up most width */
         margin: 5px auto; /* Center and space */
         /* Height, padding, line-height, font-size are inherited from 768px breakpoint */
     }
     /* Hover/Active state colors are already defined globally */


     .esileht h1 {
         line-height: 1.4;
     }
     /* Optionally hide Swiper arrows on very small screens */
     /*
     .swiper-button-next,
     .swiper-button-prev {
        display: none;
     }
     */
}