* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    
}
body {
    background-color: rgb(0, 0, 0);
    width: 800px;
    margin: auto;
}

#content-wrap {
    width: 100%;
    box-shadow: 0px 0px 12px 4px rgba(255, 255, 255, 0.58);
    padding: 0px;
    
}

header {
    width: 100%;
    position: relative;
    height: 90px;
}


div.green {
    font-size: 20px;
    font-weight: bolder;
    color: green;
}

.header-bg {
    width: 100%;
    position: absolute;
    display: inline-block;
    padding: 0px;
    
}

.header-bg__video {
    position: absolute;
    z-index: -1;
}

.header-bg__video_small {
    display: none;
    position: absolute;
    z-index: -1;
    object-fit: fill;
}


.header-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0px;
    height: 100%;
}

.header-logo img {
    position: absolute;
    display: inline;
    height: 64px;
    margin: 0px;
    
}
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    
}
ul {
    list-style-type: square;
}

img.pix100C {
    width: 100px;
    align: center;
}

img.pix150C {
    
    width: 150px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

nav {
    position: absolute;
    bottom: 0;
    
    
}

nav a {
    color: #efefef;
    text-decoration: none;
    text-shadow: 2px 2px #0000004b;
    font-weight: bold;
    padding: 4px;
    display: inline-block;
    transition: background-color 3.0s;
    
}

nav a:hover {
    background-color: rgba(255,255,255,0.25);
    transition: background-color 0.4s;
    
}
a.active {
    background-color: rgba(146, 146, 146, 0.418);
    
}
h1 {
    text-align: center;
    font-weight: bolder;
}
div.footer {
    background-color: rgb(255, 255, 255);
    font-size: 10px;
    text-align: center;
    font-style: oblique;
}

div.bold {
    font-size: 20px;
    font-weight: bolder;
}

div.content {
    text-align: center;
    padding: 4px;
    font-size: 40px;
    color: rgb(187, 0, 187);
    text-shadow: 0px 0px 30px rgb(187, 0, 187); 
    font-weight: bolder;
    
    
    /*background-color: white;*/
}
a.link {
    text-decoration: none;
    font-weight: bolder;
}
img.smallimg {
    width: 100%;
    height: auto;
}
img.saleimg {
    width: 50%;
    height: auto;
    position: relative;
    
}

div.content_column {
    width: 70%; 
    text-align: left;
    margin: auto;
}
div.article {
    background: white;
    padding: 2px;
    transition: background-color 0.4s;
}


div.bar {
    background: rgb(15, 68, 82);
    height: 2px;
    width: 100%;
    text-decoration: none;
}
table.portfolio_box {
    text-align: left;
    font-size: 12px;
}

table.portfolio_box td {
    vertical-align: top;
    border-bottom: 1px solid #ddd;
}

table.portfolio_box h1 {
    color: rgb(15, 68, 82);
    font-weight: bolder;
    font-size: 18px;
    text-shadow: 1px 1px #0000004b;
    text-align: left;
}

table.portfolio_box img {
    width: 100%;
}

table.version {
    border-collapse: collapse;
    width:100%;
    
    
}

table.version td {
    
    border: 1px solid black;
    vertical-align: top;
    padding-left:20px;
}

span.date {
    text-decoration: none;
    font-weight: bolder;
    background: rgb(0, 162, 255);
    color: white;
    padding: 2px;
}

span.red {
    color: rgb(255, 0, 0);
}
span.blue {
    color: rgb(4, 26, 124);
}

span.green {
    font-weight: bolder;
    color: rgb(17, 102, 17);
}

span.bold {
    font-weight: bolder;
    
}
.swiper-container {
    width: 100%;
    height: auto;    
}

.swiper-slide img, video {
    width: 100%;
    height: auto;
}


@media screen and (max-width: 800px) {
    body {
        width: 100%;
    }
}

@media screen and (max-width: 550px) {
    header {
        height: 200px;
    }
    .header-bg__video {
    
        display: none;
    }
    .header-bg__video_small {
        display: inline;
    }
    nav a {
        display: inline-block;
        width:100%;
        text-align: right;
        bottom: 100%;
        
    }
}