/* base */
@font-face {

    font-family: 'Open Sans', sans-serif;
    src: url('font/OpenSans-Regular-webfont.eot');
    src: url('font/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('font/OpenSans-Regular-webfont.woff') format('woff'),
    url('font/OpenSans-Light-webfont.ttf') format('truetype'),
    url('font/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}


* {
    margin: 0px;
    padding: 0px;
}

body {
    font-family: 'Open Sans', sans-serif;
    min-width: 1100px;
    background-image: url("images/back2021.jpg");
    background-repeat: repeat;
    background-size: cover;

    background-attachment: fixed;
}

img {
    padding: 0px;
    margin: 0px;
}

h1 {
    color: #444;
    font-size: 1em;
    text-align: center;
    margin-top: -10px;
    font-weight: normal;
}

p {
    font-size: 0.8em;
    color: #000;
    padding: 0px 12px 0px 12px;
    margin-bottom: 15px;
}

ul {
    font-size: 20px;
}

li {
    list-style-type: none;
    display: inline;
    margin: 0px 20px 0px 20px;
    font-weight: normal;


}

hr {
    width: 100%;
    margin: 10px auto 0 auto;
    height: 1px;
    color: #d4d4d4;
    background-color: #d4d4d4;
    border: 0 solid #d4d4d4;
    clear: both;
}


a {
    color: #444;;
    transition: 100ms;
    text-decoration: none;
    font-size: 1.5em;
    border-bottom: 1px dotted #888888;
    transition: 200ms;
}

a:hover {
    color: #000;
    border-bottom: 1px dotted #000;
}


/* div */

#body {
    width: 100%;
    height: 100%;
    min-with: 1100px;
    position: fixed;
    backgrond: #333 \9;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;

/* -webkit-animation: back 6s;
-moz-animation: back 6s;
-ms-animation: back 6s;
 animation: back 6s;
 
-webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;


-webkit-animation-delay: 1.5s;
 -moz-animation-delay: 1.5s;
 -o-animation-delay: 1.5s;
   animation-delay: 1.5s;
}


@-webkit-keyframes back
{
from {opacity: 0}
to {opacity: 1}
}
@keyframes back
{
from {opacity: 0}
to {opacity: 1}
}                */


@media screen and (min-width: 1025px) {
    .enter {
        padding: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -75px;
        margin-left: -300px;
        width: 600px;
        height: 150px;
        background: rgba(255, 255, 255, 0.85);

        border-radius: 5px;
        opacity: 1;
        text-align: center;
        -webkit-animation: none;
        -moz-animation: none;
        -ms-animation: none;
        -o-animation: none;
        animation: none;

        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        -ms-animation-fill-mode: forwards;
        -o-animation-fill-mode: forwards;
        animation-fill-mode: forwards;


        -webkit-animation-delay: 7s;
        -moz-animation-delay: 7s;
        -o-animation-delay: 7s;
        -ms-animation-delay: 7s;


    }


    .enter {
        padding: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -75px;
        margin-left: -300px;
        width: 600px;
        height: 150px;
        background: #ffffffbd;

        border-radius: 5px;
        opacity: 0;
        text-align: center;
        -webkit-animation: back 6s;
        -moz-animation: back 6s;
        -ms-animation: back 6s;
        -o-animation: back 6s;
        animation: back 6s;

        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        -ms-animation-fill-mode: forwards;
        -o-animation-fill-mode: forwards;
        animation-fill-mode: forwards;


        -webkit-animation-delay: 7s;
        -moz-animation-delay: 7s;
        -o-animation-delay: 7s;
        -ms-animation-delay: 7s;


    }
}