@font-face {
    font-family: "Finger Paint";
    src: url(../font/FingerPaint-Regular.ttf);
}

@font-face {
    font-family: "Roboto";
    src: url(../font/Roboto-Regular.ttf);
}

@font-face {
    font-family: "lora";
    src: url(../font/Lora-Regular.ttf);
}

@font-face {
    font-family: "loraB";
    src: url(../font/Roboto-Bold.ttf);
}

html
{
    scroll-behavior: smooth;
}

html, body 
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

body
{
    overflow-x: hidden;
    background-image: url("../img/bikeTri.jpg");
    width: 100%;
    height:auto;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: black;
}

footer
{
    background-color: #c2c2c2;
    min-height: 150px;
    text-align: center;
    font-family:"Roboto";
    font-size: 1.3em;
    overflow: hidden;
    padding-top: 45px;
    border-top: 5px solid #68aead;
}



.offFooter
{
    padding-top: 50px;
}

ul
{
    list-style-type: none;
}


.aboutMe
{
    background-color: #dddddd;
    padding-bottom: 5%;
    overflow: hidden;
    padding-top: 200px;
    text-align: center;
}

.leistungen
{
    background-color: #9cd9d8;
    padding-bottom: 5%;
    overflow: hidden;
    padding-top: 30px;
    text-align: center;
}

.leistungen ul
{
    margin-top: 2%;
    font-size: 2em;
}

.contact
{
    background-color: #dddddd;
    padding-top: 80px;
    overflow: hidden;
    text-align: center;
}

.parallax
{
    min-height: 400px;
    border-bottom: 10px solid #68aead;
    border-top: 10px solid #c2c2c2;
}

.navbar
{
    background-color: #c2c2c2;
    border-bottom: 5px solid #68aead;
    font-family: "loraB";
    position: fixed;
    width: 100%;
    z-index: 500;
}

.navbar-collapse
{
    background-color: #c2c2c2;
    font-family: "loraB";
    margin-top: 0px;
    width: 100%;
    text-align: center;
}

.navbar-light .navbar-nav .nav-link
{
    color:rgba(0,0,0,1);
}

.navbar a
{
    border-bottom: 5px solid transparent;
    font-size: 2.5em;
}

.navbar a:hover
{
    border-bottom: 5px solid #68aead;
}

.navbar a:active
{

    border-bottom: 5px solid #68aead;
}

.navbar a:focus
{

    border-bottom: 5px solid #68aead;
}

#nav1:target #nav2:target #nav3:target
{
    border-bottom: 5px solid #68aead;
}

/*.imgBike, .imgSwim
    {
        max-width: 200px;
    }
*/

.logo
{
    height: 85px;
    margin-top: auto;
    margin-bottom: auto;
}

.imgAM
{
    margin-left:auto;
    margin-right:auto;
    margin-top:2%;
    max-height: 600px;
}

h1
{
    font-family: "Roboto";
    font-size: 4em;
}

h2
{
    font-family: "Roboto";
    font-size: 3em;

}

.ld
{
    text-align: left;
    padding-top:10%;
}

.tbox
{
    margin-top: 5%;
    padding: 1%;
    font-family: "Roboto";
    font-size: 1.5em;
    background-color: #c2c2c2;
    border-radius: 15px;
    -webkit-box-shadow: 35px 35px 0px 0px rgba(104,174,173,1);
    -moz-box-shadow: 35px 35px 0px 0px rgba(104,174,173,1);
    box-shadow: 35px 35px 0px 0px rgba(104,174,173,1);

}

.clear
{
    clear:both;
}

.social
{
    height: 75px;
    width: 75px;
}

.btn
{
    margin-top: 1%;
    margin-bottom: 1%;
}

.form-control
{
    margin-top: 1%;
}

.row
{
    margin-bottom: 2%;
}

#review
{
    height: 2200px;

    font-size: 1.5em;
}

.imgSwim
{
    float: right;
    visibility: hidden;
}

.imgBike
{
    float: left;
    visibility: hidden;
}

.carousel-caption
{
    font-family: "Roboto";
    font-size: 1em;
    line-height: 120%;
}

#image-caption
{
    font-family: "Roboto";
    font-size: 1em;
}

#leistungHeader
{
    text-align: center;
}


@media ( min-width: 720px ) {  /** Größerer Viewport: Tablett **/

    #review
    {
        height: 1000px;
    }

    .table
    {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .carousel-caption
    {
        font-size: 1.5rem;
    }

}

@media ( min-width: 1000px ) { /** Großer Viewport: Browserfenster **/
    .imgBike, .imgSwim
    {
        height: 600px;
        margin-top: 300px;
        visibility: visible;
    }

    .nav-link
    {
        margin-left: 50px;
    }

    .carousel-caption
    {
        font-size: 1.5rem;
    }


    #review
    {
        height: 800px;
    }

    .navbar-collapse{
        min-width: 900px;
        width: 100%;
        margin-top: 16px;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }

}
@media ( min-width: 1600px )
{
    main
    {
        width: 100%;
    }

    .imgSwim
    {
        float: right;
        visibility: visible;

        height: auto;
        margin-top: 0;
    }
    
    .imgBike
    {
        float: left;
        visibility: visible;
        height: auto;
        margin-top: 0;
    }

    #review
    {
        height: 700px;

    }
}