@import url('../ism/css/sliderheader.css');
@import url('../ism/css/my-slider.css');


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    padding: 0px;
    margin: 0px;
    height: 100%;
    width: 100%;
    /*font-size: 20px;*/
    --base: calc(100vw / 1280);
    --divymnot: clamp(0px, calc(var(--base) * 230), 230px);
    --divympay: clamp(0px, calc(var(--base) * 230), 165px)
}

body {
    height: 100%;
    min-height: 100%;
    width: 100%;
    padding: 0px;
    /*margin: 7px 0px 0px 0px;*/
    background-color: transparent;
}

ol,
ul {
    padding-left: clamp(12px, calc(var(--base) * 25), 25px);
}

.logoname {
    width: clamp(12px, calc(var(--base) * 140), 140px);
    margin-bottom: calc(-1* clamp(0px, calc(var(--base) * 20), 20px));
}

.bordertop {
    background-color: #027BF0; /*#2D24FF;*/
    height: clamp(1px, 0.25vw, 3px);
    -webkit-box-shadow: clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 25), 25px) 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 25), 25px) 0px rgba(0, 0, 0, 0.6);
    box-shadow: clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 25), 25px) 0px rgba(0, 0, 0, 0.6);
}

.shadow {
    -webkit-box-shadow: clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 25), 25px) 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 25), 25px) 0px rgba(0, 0, 0, 0.6);
    box-shadow: clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 25), 25px) 0px rgba(0, 0, 0, 0.6);
}

.text-shadow {
    text-shadow: clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 25), 25px) rgba(0, 0, 0, 0.6);
}

.tab {
    height: 26px;
    margin: -6px -6px 0px -6px;
    text-align: left;
    padding: 3px 3px 0px 5px;
    background-color: #3399FF;
    color: #FFFFFF;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.txt {
    border: 1px solid #0066FF;
    background-color: #FFFFFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.radio {
    height: clamp(0px, calc(var(--base) * 14), 14px);
    width: clamp(0px, calc(var(--base) * 14), 14px);
}

input[type="text"] {
    border-width: 0px;
    background: none;
    width: 100%;
}

.txtsum {
    height: 22px;
    vertical-align: middle;
    padding-left: 5px;
}

.td {
    text-align: left;
    height: clamp(0px, calc(var(--base) * 26), 26px);
}

.b {
    margin-left: 25px;
}

.img {
    margin-top: 3px;
}

.div-font {
    /*font-size: clamp(0px, calc(16 * 100vw / 1280), 1rem);*/
    font-size: clamp(0px, calc(var(--base) * 16), 1rem);
}

.h1 {
    font-style: italic;
    font-weight: normal;
    /*    font-size: calc(3px + (40 - 3) * ((100vw - 100%) / (1920 - 500)));*/
    font-size: clamp(0px, calc(var(--base) * 40), 40px);
    color: #027BF0;
    margin: auto;
    text-shadow: clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 25), 25px) rgba(0, 0, 0, 0.6);
    transform: scale(0.88, 1);
    -webkit-transform: scale(0.88, 1);
    -moz-transform: scale(0.88, 1);
    -o-transform: scale(0.88, 1);
    -ms-transform: scale(0.88, 1);
}

.h2 {
    font-style: italic;
    font-weight: normal;
    /*    font-size: calc(3px + (40 - 3) * ((100vw - 100%) / (1920 - 500)));*/
    font-size: clamp(0px, calc(var(--base) * 32), 32px);
    color: #027BF0;
    margin: auto;
    text-shadow: clamp(0px, calc(var(--base) * 7), 7px) clamp(0px, calc(var(--base) * 7), 7px) clamp(0px, calc(var(--base) * 25), 25px) rgba(0, 0, 0, 0.6);
    transform: scale(0.88, 1);
    -webkit-transform: scale(0.88, 1);
    -moz-transform: scale(0.88, 1);
    -o-transform: scale(0.88, 1);
    -ms-transform: scale(0.88, 1);
}

.sl {
    cursor: pointer;
    border-radius: 0px;
    height: auto;
    width: clamp(0px, calc(var(--base) * 105), 105px);
    -webkit-box-shadow: rgba(0, 0, 0, 0.6) clamp(0px, calc(var(--base) * 4), 4px) clamp(0px, calc(var(--base) * 4), 4px) clamp(0px, calc(var(--base) * 20), 20px);
    box-shadow: rgba(0, 0, 0, 0.6) clamp(0px, calc(var(--base) * 4), 4px) clamp(0px, calc(var(--base) * 4), 4px) clamp(0px, calc(var(--base) * 20), 20px);
    transform-origin: 50% 50%;
    border: 1px solid #00488D;
    color: #00488D;
    transition-property: border color;
    transition-duration: 0.3s;
}

/*.sl:hover {
                border: 1px solid #42BD00;
                color: #42BD00;
                -webkit-box-shadow: rgba(0, 0, 0, 0.6) 7px 7px 25px;
                box-shadow: rgba(0, 0, 0, 0.6) 7px 7px 25px;
                transition-property: border color;
                transition-duration: 0.3s;
            }*/

.sldown {
    border: 1px solid #42BD00;
    color: #42BD00;
    /*transform:scale(1,1);*/
    -webkit-box-shadow: rgba(0, 0, 0, 0.6) clamp(0px, calc(var(--base) * 4), 4px) clamp(0px, calc(var(--base) * 4), 4px) clamp(0px, calc(var(--base) * 20), 20px);
    box-shadow: rgba(0, 0, 0, 0.6) clamp(0px, calc(var(--base) * 4), 4px) clamp(0px, calc(var(--base) * 4), 4px) clamp(0px, calc(var(--base) * 20), 20px);
    /*transition-property: border color;
            transition-duration: 0.3s;*/
}

.slover {
    border: 1px solid #42BD00;
    color: #42BD00;
    /*transform:scale(1.01,1.01);*/
    -webkit-box-shadow: rgba(0, 0, 0, 0.6) clamp(0px, calc(var(--base) * 7), 7px) clamp(0px, calc(var(--base) * 7), 7px) clamp(0px, calc(var(--base) * 25), 25px);
    box-shadow: rgba(0, 0, 0, 0.6) clamp(0px, calc(var(--base) * 7), 7px) clamp(0px, calc(var(--base) * 7), 7px) clamp(0px, calc(var(--base) * 25), 25px);
    transition-property: border color;
    transition-duration: 0.3s;
}

.div-main {
    display: grid;
    width: 100%;
    height: 80%;
    position: relative;
    align-items: center;
    justify-items: center;
}

.div {
    /*border-radius: 5px;*/
    height: auto;
    margin: auto;
    overflow: hidden;
    text-align: left;
    padding: clamp(0px, calc(var(--base) * 5), 5px);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-shadow: rgba(0, 0, 0, 0.6) clamp(0px, calc(var(--base) * 3), 3px) clamp(0px, calc(var(--base) * 3), 3px) clamp(0px, calc(var(--base) * 10), 10px);
    /*-webkit-box-shadow: rgba(0, 0, 0, 0.6) 7px 7px 25px;
            box-shadow: rgba(0, 0, 0, 0.6) 7px 7px 25px;
            transform-origin: 50% 50%;*/
    width: auto;
    /*border: 1px solid #288FF2;*/
}

.div-ymnot {
    height: var(--divymnot);
    margin: calc((100vh - var(--divymnot))/3) 0px;
}
.div-ympay {
    height: var(--divympay);
    margin: calc((100vh - var(--divympay))/3) auto;
}

.auto-style1 {
    width: 430px;
    /*height: auto;*/
    align-content: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: clamp(0px, calc(var(--base) * 7), 7px) clamp(0px, calc(var(--base) * 7), 7px) clamp(0px, calc(var(--base) * 25), 25px) 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: clamp(0px, calc(var(--base) * 7), 7px) clamp(0px, calc(var(--base) * 7), 7px) clamp(0px, calc(var(--base) * 25), 25px) 0px rgba(0, 0, 0, 0.6);
    box-shadow: clamp(0px, calc(var(--base) * 7), 7px) clamp(0px, calc(var(--base) * 7), 7px) clamp(0px, calc(var(--base) * 25), 25px) 0px rgba(0, 0, 0, 0.6);
}

.auto-style2 {
    width: 99px;
    height: 102px;
    margin-top: 10px;
    margin-left: 10px;
}

@keyframes arrowdown {
    from {
        margin-bottom: clamp(0px, calc(var(--base) * 10), 10px);
        margin-top: 0px;
    }

    to {
        margin-bottom: 0px;
        margin-top: clamp(0px, calc(var(--base) * 10), 10px);
    }
}

@-moz-keyframes arrowdown {
    from {
        margin-bottom: clamp(0px, calc(var(--base) * 10), 10px);
        margin-top: 0px;
    }

    to {
        margin-bottom: 0px;
        margin-top: clamp(0px, calc(var(--base) * 10), 10px);
    }
}

@-webkit-keyframes arrowdown {
    from {
        margin-bottom: clamp(0px, calc(var(--base) * 10), 10px);
        margin-top: 0px;
    }

    to {
        margin-bottom: 0px;
        margin-top: clamp(0px, calc(var(--base) * 10), 10px);
    }
}

.arrowdownstyle {
    width: clamp(5px, calc(var(--base) * 48), 48px);
    animation-name: arrowdown;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
    -moz-animation-name: arrowdown;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-play-state: running;
    -webkit-animation-name: arrowdown;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
}

@keyframes arrowright {
    from {
        margin-right: clamp(0px, calc(var(--base) * 10), 10px);
        margin-left: 0px;
    }

    to {
        margin-right: 0px;
        margin-left: clamp(0px, calc(var(--base) * 10), 10px);
    }
}

@-moz-keyframes arrowright {
    from {
        margin-right: clamp(0px, calc(var(--base) * 10), 10px);
        margin-left: 0px;
    }

    to {
        margin-right: 0px;
        margin-left: clamp(0px, calc(var(--base) * 10), 10px);
    }
}

@-webkit-keyframes arrowright {
    from {
        margin-right: clamp(0px, calc(var(--base) * 10), 10px);
        margin-left: 0px;
    }

    to {
        margin-right: 0px;
        margin-left: clamp(0px, calc(var(--base) * 10), 10px);
    }
}

.arrowrightstyle {
    animation-name: arrowright;
    animation-duration: 1s;
    animation-timing-function: linear;
    /*animation-delay: 2s;*/
    animation-iteration-count: infinite;
    /*animation-direction: alternate;*/
    animation-play-state: running;
    /* Firefox: */
    -moz-animation-name: arrowright;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    /*-moz-animation-delay: 2s;*/
    -moz-animation-iteration-count: infinite;
    /*-moz-animation-direction: alternate;*/
    -moz-animation-play-state: running;
    /* Safari è Chrome: */
    -webkit-animation-name: arrowright;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    /*-webkit-animation-delay: 2s;*/
    -webkit-animation-iteration-count: infinite;
    /*-webkit-animation-direction: alternate;*/
    -webkit-animation-play-state: running;
}

.k {
    width: clamp(5px, calc(var(--base) * 350), 350px);
    /*    width: 350px;
*/ /*height: 310px;*/
    -webkit-box-shadow: rgba(0, 0, 0, 0.6) clamp(0px, calc(var(--base) * 7), 7px) clamp(0px, calc(var(--base) * 7), 7px) clamp(0px, calc(var(--base) * 25), 25px);
    box-shadow: rgba(0, 0, 0, 0.6) clamp(0px, calc(var(--base) * 7), 7px) clamp(0px, calc(var(--base) * 7), 7px) clamp(0px, calc(var(--base) * 25), 25px);
    transition: transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    /*z-index: 0;*/
}

    .k:hover {
        /*z-index: 1;*/
        transform: scale(2.5,2.5);
        -moz-transform: scale(2.5,2.5);
        -webkit-transform: scale(2.5,2.5);
        -o-transform: scale(2.5,2.5);
    }

.k1 {
    width: clamp(5px, calc(var(--base) * 350), 350px);
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    margin: auto;
    /*margin-right: 30px;
            margin-left: 30px;*/
    -webkit-box-shadow: rgba(0, 0, 0, 0.6) clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 25), 25px);
    box-shadow: rgba(0, 0, 0, 0.6) clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 7), 7px) clamp(1px, calc(var(--base) * 25), 25px);
    transition: transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    z-index: 0;
}

    .k1:hover {
        transform: scale(2.5,2.5);
        -moz-transform: scale(2.5,2.5);
        -webkit-transform: scale(2.5,2.5);
        -o-transform: scale(2.5,2.5);
        z-index: 1;
    }

ul {
    margin-top: 5px;
    margin-bottom: 5px;
}

span {
    cursor: pointer;
    text-decoration: underline;
}

.bootAnim {
    display: grid;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: auto;
}

    .bootAnim div {
        height: 20%;
    }

.bootAnimImg {
    width: 40%;
    animation: bootAnimR 2s linear infinite normal;
    -webkit-animation: bootAnimR 2s linear infinite normal;
    -moz-animation: bootAnimR 2s linear infinite normal;
    -o-animation: bootAnimR 2s linear infinite normal;
}

@keyframes bootAnimR {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

@-webkit-keyframes bootAnimR {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

@-moz-keyframes bootAnimR {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

@-o-keyframes bootAnimR {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

.ps1-style {
    position: relative;
    overflow: visible;
    height: 350px;
}

.ps1-img {
    position: absolute;
    right: 0;
    bottom: -16%;
    height: 120%;
    width: 40%;
}

.ps1-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 65%
}

.ps2-style {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ps2-img {
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
}

.ps2-button {
    transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -webkit-transform: scale(0.3);
    -o-transform: scale(0.3);
}

.ps2-play {
    left: 6%;
    bottom: -8px;
}

.ps2-indicators {
    transform-origin: 20px 35px;
    -moz-transform-origin: 20px 35px;
    -ms-transform-origin: 20px 35px;
    -webkit-transform-origin: 20px 35px;
    -o-transform-origin: 20px 35px;
    transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -webkit-transform: scale(0.3);
    -o-transform: scale(0.3);
}

.imgslide {
    bottom: -16%;
    height: 120%;
    top: 10px;
}