html {
    font-family: sans-serif;
}

.dark {
    background-color: black;
    color: white;
}

.lite {
    background-color: white;
    color: black;
}

.img-rounded {
    max-width: 100%; 
    height: auto
}
.image-banner {
    height: 400px;
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: none;
}

.lite .image-banner {
    box-shadow: 0 0 8px 8px white inset;
}

.dark .image-banner {
    box-shadow: 0 0 8px 8px black inset;
}

.lite hr {
    border-color: black;
}

.dark .well {
    color: black;
}

.well {
    background-color: #DCDCDC !important;
}
.software-icon img,
.software-screenshot img {
    padding: 2px;
    background-color: transparent;
}
.software-icon img {
    border: none;
}
.software-icon img:hover,
.software-screenshot img:hover {
    box-shadow: 0 0 6px 3px rgba(33, 153, 232, .7);
    cursor: pointer;
}

.software-icon {
    margin-bottom: 10px;
    min-height: 128px;
}
.software-icon h2,
.software-icon h3 {
    margin-top: 0; 
    margin-bottom: 0;
}
.software-screenshot {
    min-height: 300px;
}

.landscape {
    min-height: 276px;
}
.landscape img{
    width: 100% !important;
    min-width: 100% !important;
}

.portrait {
    min-height: 480px;
            
}
.portrait img{
    /*max-height: 336px;*/
    width: 100% !important;
    min-width: 100% !important;
}
.menu {
    padding: 0;
    margin: 0;
}

.menu li {
    float: left;
    display: table-cell;
    padding: .7rem 1.25rem;
    font-size: 1.25em;
}

.menu li:first-of-type a {
    color: black;
}

.dark .menu li:first-of-type a {
    color: white;
}

.menu > li a:hover {
    text-decoration: none !important;
}

@media (max-width: 762px) {
    .container {
        /*margin-top: 55px;*/
    }
    .image-banner {
        height: 200px !important;
    }
}

@media (max-width: 992px) {
    .image-banner {
        height: 324px;
    }
}