@charset "UTF-8";

/* Fonts */
@font-face { font-family: 'Raleway Medium'; font-style: normal; font-weight: 500; src: local('Raleway Medium'), local('Raleway-Medium'), url('//themes.googleusercontent.com/static/fonts/raleway/v6/CcKI4k9un7TZVWzRVT-T8xsxEYwM7FgeyaSgU71cLG0.woff') format('woff'); }
@font-face { font-family: 'Raleway Bold'; font-style: normal; font-weight: 700; src: local('Raleway Bold'), local('Raleway-Bold'), url('//themes.googleusercontent.com/static/fonts/raleway/v6/JbtMzqLaYbbbCL9X6EvaIxsxEYwM7FgeyaSgU71cLG0.woff') format('woff'); }

/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; font-size: 100%; font: inherit; padding: 0; border: 0; vertical-align: baseline; }
html { height: 100%; }
body { line-height: 1; height: 100%; background-color: #FFF; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
strong { font-weight: bold; }
em { font-style: italic; }
* { outline: 0; }

#affiliates { position: relative; max-width: 1200px; height: 100%; font-family: "Raleway Medium", sans-serif; }

.top { height: 15%; margin: 0 auto; width: 94%; position: relative; }
.top a { height: 44px; display: block; width: 169px; position: relative; top: 30%; }
.top .logo { height: 100%; width: 100%; display: block; }
.top .logo img { height: 44px; width: 169px; }

.top .arrows { height: 44px; width: 100px; text-align: right; position: absolute; right: 0; top: 30%; }
.top .arrows div { display: inline-block; width: 44px; height: 44px; cursor: pointer; }
.top .arrows div img { height: 100%; width: 100%; }

.lots { width: 97%; height: 70%; min-height: 250px; margin: 0 auto; overflow: hidden; }
.lots:after { content: ""; display: table; clear: both; }

.lots .lot { float: left; width: 22%; height: 100%; min-height: 250px; padding: 0; margin: 0 0.5%; position: relative; }
.lots .lot .picture { width: 100%; height: auto; border: 1px solid #E7E7E7; }
.lots .lot .picture .img { height: auto; width: 100%; display: block; margin: 0 auto; background-color: #FFF; }
.lots .lot .title { margin-top: 6%; display: block; height: 44px; overflow: hidden; line-height: 22px; font-size: 18px; font-family: "Raleway Medium", sans-serif; color: #000; text-decoration: none; }
.lots .lot .infoWrapper { display: block; height: 15%; min-height: 60px; margin-top: 8%; overflow: hidden; }
.lots .lot .infoWrapper a { font-size: 16px; font-family: "Raleway Medium", sans-serif; color: #000; margin-bottom: 3%; height: 18px; overflow: hidden; text-decoration: none; display: block; }
.lots .lot .infoWrapper a.auctionHouse { color: #a7a9ac; }
.lots .lot .button { color: #FFF; background: #FF7D00; cursor: pointer; display: block; text-decoration: none; text-align: center; font-size: 18px; width: 100%; padding: 7% 0; border-radius: 4px; }
.lots .lot .button:hover { background-color: #FF6400; }

.footer { width: 94%; margin: 0 auto; height: 15%; display: block; text-align: center; }
.footer p { font-size: 18px; font-family: "Raleway Medium", sans-serif; line-height: 22px; width: 100%; margin-top: 3%; }
.footer a { text-decoration: none; color: #FF7D00; font-family: "Raleway Medium", sans-serif; }

@media only screen and (max-width: 768px) {
    #affiliates { position: relative; height: 100%; }
    .top a { height: 30px; width: 127px; display: block; position: relative; top: 30%; }
    .top .logo img { height: 30px; width: 127px; }

    .top .arrows { height: 30px; width: 70px; text-align: right; position: absolute; right: 0; top: 30%; }
    .top .arrows div { display: inline-block; width: 30px; height: 30px; cursor: pointer; }

    .lots { min-height: 200px; }
    .lots .lot { min-height: 200px; }
    .lots .lot .title { font-size: 14px; line-height: 16px; height: 32px; }
    .lots .lot .infoWrapper { min-height: 28px;  }
    .lots .lot .infoWrapper a { font-size: 12px; height: 12px; }
    .lots .lot .button { font-size: 14px; height:  }
    .footer p { font-size: 14px; }
}

@media only screen and (max-width: 480px) {
    .top { height: 15%; margin: 0 auto; width: 86%; }
    .top a { height: 34px; width: 127px; display: block; position: relative; top: 40%; }
    .top .logo img { height: 34px; width: 127px; }

    .top .arrows { height: 34px; width: 80px; text-align: right; position: absolute; right: 0; top: 40%; }
    .top .arrows div { display: inline-block; width: 34px; height: 34px; cursor: pointer; }

    .lots { width: 92%; margin: 0 auto; overflow: hidden; }
    .lots:after { content: ""; display: table; clear: both; }

    .lots .lot { float: left; width: 100%; height: 100%; padding: 0; margin: 0; position: relative; }
    .lots .lot:nth-child(odd) { margin: 0 0.5% 0 0.5%; }
    .lots .lot:nth-child(even) { margin: 0 0.5% 0 0.5%; }
    .lots .lot .picture { width: 100%; height: auto; border: 1px solid #E7E7E7; }
    .lots .lot .picture .img { height: auto; width: 100%; display: block; margin: 0 auto; background-color: #FFF; }
    .lots .lot .title { margin-top: 10%; display: block; height: 36px; overflow: hidden; line-height: 18px; font-size: 16px; font-family: "Raleway Medium", sans-serif; color: #000; text-decoration: none; }
    .lots .lot .infoWrapper { display: block; height: 10%; min-height: 38px; margin-top: 10%; }
    .lots .lot .infoWrapper a { font-size: 14px; height: 14px; font-family: "Raleway Medium", sans-serif; color: #000; margin-bottom: 3%; text-decoration: none; display: block; }
    .lots .lot .button { color: #FFF; background: #FF7D00; cursor: pointer; display: block; text-decoration: none; text-align: center; font-size: 16px; width: 100%; padding: 6% 0; }
    .lots .lot .button:hover { background-color: #FF6400; }

    .footer { width: 80%; margin: 0 auto; height: 16%; display: block; text-align: center; }
    .footer p { font-size: 18px; font-family: "Raleway Medium", sans-serif; line-height: 20px; width: 100%; }
    .footer a { text-decoration: none; color: #FF7D00; font-family: "Raleway Medium", sans-serif; }
}

@media only screen and (max-width: 300px) {
    #affiliates { min-width: 260px; }
    .top { height: 15%; margin: 0 auto; width: 80%; }
    .top a { height: 34px; width: 127px; display: block; position: relative; top: 40%; }
    .top .logo { width: 127px; }
    .top .logo img { height: 34px; width: 127px; }

    .top .arrows { height: 34px; width: 80px; text-align: right; position: absolute; right: 0; top: 40%; }
    .top .arrows div { display: inline-block; width: 34px; height: 34px; cursor: pointer; }

    .lots { width: 90%; margin: 0 auto; overflow: hidden; }
    .lots:after { content: ""; display: table; clear: both; }

    .lots .lot { float: left; width: 100%; height: 100%; padding: 0; margin: 0; position: relative; }
    .lots .lot:nth-child(odd) { margin: 0 0.6% 0 0.6%; }
    .lots .lot:nth-child(even) { margin: 0 0.6% 0 0.6%; }
    .lots .lot .picture { width: calc(100% - 2px); height: auto; border: 1px solid #E7E7E7; }
    .lots .lot .picture .img { height: auto; width: 100%; display: block; margin: 0 auto; background-color: #FFF; }
    .lots .lot .title { margin-top: 10%; display: block; height: 40px; overflow: hidden; line-height: 20px; font-size: 18px; font-family: "Raleway Medium", sans-serif; color: #000; text-decoration: none; }
    .lots .lot .infoWrapper { display: block; height: 44px; min-height: 44px; margin-top: 2%; }
    .lots .lot .infoWrapper a { font-size: 16px; height: 18px; font-family: "Raleway Medium", sans-serif; color: #000; margin-bottom: 3%; text-decoration: none; display: block; }
    .lots .lot .button { color: #FFF; background: #FF7D00; cursor: pointer; display: block; text-decoration: none; text-align: center; font-size: 18px; width: 100%; padding: 5% 0;  }

    .lots .lot .button:hover { background-color: #FF6400; }

    .footer { width: 80%; margin: 0 auto; height: 13%; display: block; text-align: center; }
    .footer p { font-size: 18px; font-family: "Raleway Medium", sans-serif; line-height: 20px; width: 100%; }
    .footer a { text-decoration: none; color: #FF7D00; font-family: "Raleway Medium", sans-serif; }
}