@font-face {
    font-family: 'visitor_tt1_brkregular';
    src: url('visitor1-webfont.eot');
    src: url('visitor1-webfontd41dd41d.eot?#iefix') format('embedded-opentype'),
         url('visitor1-webfont.woff2') format('woff2'),
         url('visitor1-webfont.woff') format('woff'),
         url('visitor1-webfont.ttf') format('truetype'),
         url('visitor1-webfont.svg#visitor_tt1_brkregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* Modal */
#modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
}

/* Modal Content */
#modal-content {
    position: fixed;
    bottom: 0;
    background-color: #fefefe;
    width: 100%;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
}


/* The Close Button */
#close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#close:hover,
#close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

#modal-header {
    padding: 2px 16px;
    background-color: #9E9E9E;
    color: white;
}
#modal-body {padding: 2px 16px; color: #212121; }

#modal-footer {
    padding: 2px 16px;
    background-color: #9E9E9E;
    color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

html{ background-color: #000000; color: #FFFFFF; height: 100%; width: 100%; height: 100%; margin: 0; padding: 0; background-size: cover; font-family: visitor_tt1_brkregular; }

#wrap { position: relative; width: 1000px;  margin: 0 auto; display: block; }
#contentMenuWrap { width: 100%; margin: 0 auto; }
#HeaderBox { background-color: black; margin-top: 50px; width: 100%; height: 150px; border: 2px solid white; max-width: 996px; }
#contentBox { background-color: black; border: 2px solid white; width: 740px; height: 390px; float: right; font-size: 20px; padding: 20px 30px; line-height: 20px; overflow-x:auto;  }

.profileBox { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; }

/* MENU ITEMS */
#menuDown { width: 100%; height: auto; bottom: 10px;  }
.button { background-color: black ; font-size: 20px; margin: 10px 10px 10px 0px; cursor: pointer; width: 182px; line-height: 60px; text-align: center; border: 2px solid white; }
.button:hover { background-color: red; }

.profile { display: -webkit-flex; display: flex; float: left !important; margin: 47px; border: 3px solid transparent; }

.profile:hover { border: 3px solid white; cursor: pointer; }

a { color: #FFFFFF !important; text-decoration: none; }
h1 { font-weight: normal; }

@media all and (max-width: 1000px){
  
    .button { width: 98%; }
    .profile { margin: 0; width: 100%; }
    .profile img { width: 100%, height: auto; }
    #wrap { width: 98% !important; margin: 0 auto; }
    #contentBox { width: auto; padding: 10px 15px; line-height: 25px; float: left; }
    #menuDown { float: left; }
    #HeaderBox { margin: 0; }
    #HeaderBox img { width: auto; height: 100%; }
    #HeaderBox { display: none; }
  
  }