@import url("https://use.fontawesome.com/releases/v5.10.2/css/all.css");

@import url("reset.css");
@import url("typography.css");
@import url("buttons.css");
@import url("header.css");
@import url("footer.css");



@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}




:root {
    --color-primary: cornflowerblue;

    --color-blue: blue;
    --color-gray-light: lightgray;
    --color-gray-dark: #2c2c3a;
    --color-white: #fff;

    --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --navi-height: 192px;
}


html {
    margin: 0px 20px 10px 20px;
}


body {

    max-height: 100vh;
    max-width: 100vw;
    padding-top: 200px;
    margin-bottom: 5px;



}


a {
    text-decoration: none;
    color: var(--color-primary);
}

h1,
h5 {
    margin-top: 15px;
}

h6 {

    margin-top: 10px;
}

p {
    text-align: justify;
    margin-top: 5px;
    margin-bottom: 5px;


}

h6.fig {
    font-size: 8px;
    text-align: center;
    font-weight: bold;
}

.helvetica{
    font-family: Helvetica, Arial, sans-serif;
      font-style: italic;
    }


i {
    font-size: 20px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.slides__title{
    color: var(--color-primary);
    text-align: center;
    margin-top: 15px;
}

/* Slideshow container------ */
.slideshow-container {

    margin: auto;
    margin-top: 10px;
    margin-bottom: 50px;

}

/* Hide the images by default */
.mySlides {
    display: none;
    position: relative;
    padding-block: 30px;

}

.mySlides img {
    vertical-align: middle;
    text-align: center;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: var(--color-primary);
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.text {
    color: var(--color-primary);
    font-size: 8px;

    font-style: italic;
    padding: 8px 12px;
    position: absolute;
    display: inline-block;
    width: 60px;
    background-color: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: 15px;
    box-shadow: var(--shadow-large);
    left: 0;
    width: 100%;
    text-align: center;
    
    bottom: -30px;
}

/* Number text (1/3 etc) */
.numbertext {
    color: var(--color-primary);
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dots{
    margin-top: 15px;
}
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    background-color: #717171;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/* ----- */



/* manual */
.manual{
    position: relative;
}

label {
    display: block;
    border-radius: 3%;
    margin-bottom: 4px;
}

figure figcaption {

    font-size: 8px;
    margin-top: 0;
    margin-bottom: 15px;
    padding: 0;
}

figure {
    position: relative;
    text-align: center;
}

.manual img {
    width: 100%;

}



.bold {
    font-weight: bold;
}

p span.underline {
    text-decoration: underline;
}

.manual div.italic {
    font-size: 6px;
    font-style: italic;
}

#player{
    display: flex; 
   
    justify-content: center;
    align-items: center;
}





    .download__title {
        text-align: center;
        padding: 20px;
        color: var(--color-primary);
    }
    /* form send mssage */
    .form-control {
        display: block;
        width: 100%;
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
        line-height: 1.25;
        color: #495057;
        background-color: #fff;
        background-image: none;
        background-clip: padding-box;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 0.25rem;
        transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    }
    .btn {
        display: inline-block;
        font-weight: normal;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border: 1px solid transparent;
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
        line-height: 1.25;
        border-radius: 0.25rem;
        transition: all 0.15s ease-in-out;
        cursor: pointer;
    }
    

.btn.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    cursor: pointer;
}
/* contact */
.page-header{
    margin: 0 0 10px;
    text-align:center;
}
.contact.header__logo{
    display:flex;
    margin: 0 0 10px;
    justify-content: center;
    gap:10px; height: 80px;
}
.contact.header__logo img{
    height: 100%;
    align-items: center;
}

.contact__info{
    margin: 0 0 10px;
    text-align:center;
}
.list__social__icons{
    margin: 0 0 10px 5px;
     text-align: center;
    display:flex;
    justify-content: center;
}
.list-inline-item{
    padding: 0 5px;
}
#contactForm{
    width:auto;
}
.controls label{
    margin: 0 0 5px;
 
}






  

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

         
        .slideshow-container {
            width: 250px;
            height: 200px;
        }
    
    
    }
    
    @media screen and (min-width:768px) {
        .manual figure {
            width: auto;
        }
    
        .manual figure img {
            width: auto;
        }
    
    
    
        main {
    
            font-size: 18px;
        }
    
        .slideshow-container {
            width: 400px;
            height: 300px;
        }
        #video1{
            width: 640px;
            height: 320px;
        }
    
       
    }

@media screen and (min-width:960px) {
      .slideshow-container {
            width: 800px;
            height: 600px;
        }


    #video1{
        width: 960px;
        height: 480px;
    }


}


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


    .text {
        display: block;
        bottom: -30px;

    }
    #video1{
        width: 1280px;
        height: 640px;
    }


}