/* roboto-300 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/roboto-v18-latin-300.eot');
    src: local('Roboto Light'), local('Roboto-Light'),
    url('../fonts/roboto-v18-latin-300.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto-v18-latin-300.woff2') format('woff2'),
    url('../fonts/roboto-v18-latin-300.woff') format('woff'),
    url('../fonts/roboto-v18-latin-300.ttf') format('truetype'),
    url('../fonts/roboto-v18-latin-300.svg#Roboto') format('svg');
}

/* roboto-900 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/roboto-v18-latin-900.eot');
    src: local('Roboto Black'), local('Roboto-Black'),
    url('../fonts/roboto-v18-latin-900.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto-v18-latin-900.woff2') format('woff2'),
    url('../fonts/roboto-v18-latin-900.woff') format('woff'),
    url('../fonts/roboto-v18-latin-900.ttf') format('truetype'),
    url('../fonts/roboto-v18-latin-900.svg#Roboto') format('svg');
}

.banner {
    /*height: 100px;*/
    border-bottom: 2px dashed #ffae00;
    padding: 30px;
    text-align: center;
}

.banner img {
    width: 350px;
    max-width: 100%;
}

.menu {
    background: #ffae00;
    display: none;
    overflow: hidden;
    margin-bottom: 30px;
    width: 100%;
}

.menu ul {
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 30px;
}

.menu ul li {
    font-family: "Roboto", Arial, Helvetica, sans-serif !important;
    font-weight: 600;
    font-size: small;

    border-right: 1px solid rgba(255, 255, 255, .5);
    color: #fff;
    display: inline-block;
    line-height: 1em;
    padding: 15px;
    text-transform: uppercase;
}

.menu ul li:first-child {
    border-left: 1px solid rgba(255, 255, 255, .5);
}

.left, .right {
    box-sizing: border-box;
    max-width: 100%;
    padding: 30px;
}

@media (min-width: 900px) {
    .left, .right {
        float: left;
        width: 50%;
    }
}

.cssgall {
    border: 2px solid #eee;
    box-sizing: border-box;
    height: auto;
    max-width: 100%;
    padding: 15px;
    width: 100%;
}

.cssgall label {
    box-sizing: border-box;
    float: left;
    width: calc(25% - 4px);
    padding: 5px;
    margin-right: 5px;
    border: 2px solid #eee;
}
.cssgall label > img {
    height: auto;
    max-width: 100%;
}


.left img.full {
    border: 2px solid #eee;
    box-sizing: border-box;
    height: auto;
    max-width: 100%;
    padding: 15px;
    width: 100%;
}

.left .thumbs img {
    box-sizing: border-box;
    float: left;
    width: calc(25% - 4px);
    padding: 5px;
    margin-right: 5px;
    border: 2px solid #eee;
}

.left .thumbs img:last-child {
    margin-right: 0;
}

.title {
    color: #ffae00;
    font-family: "Roboto", Arial, Helvetica, sans-serif !important;
    /*font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;*/
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.25em;
    margin-bottom: .25em;
    /*text-transform: uppercase;*/
}

.subtitle {
    color: #414141;
    font-family: "Roboto", Arial, Helvetica, sans-serif !important;
    margin-bottom: 1em;
    font-weight: bold;
}

.specs-title {
    color: #414141;
    font-family: "Roboto", Arial, Helvetica, sans-serif !important;
    font-size: large;
    font-weight: bold;
}

.etc-description {
    color: #4c4c4c;

    font-weight: 300;
}

.etc-description p {
    font-family: "Roboto", Arial, Helvetica, sans-serif !important;
    margin-bottom: 1em;
}

.etc-description ul {
    margin-bottom: 1em;
    margin-top: 1em;
    padding-left: 1em;
}

.etc-description ul li {
    font-family: "Roboto", Arial, Helvetica, sans-serif !important;
    margin: .25em 0;
}

#footer {
    border-top: 15px solid #4c4c4c;
    clear: both;
    margin-top: 30px;
}