/* 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, font, 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 {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

/* Main */
body { 
    font-size: 18px;
    font-family: 'Roboto Slab', serif;
    letter-spacing: 1px;
    background: #262626;
    color: #ddd;
}

img { width: 100%; }

h1, h2, h3, h4, h5, h6 {
    color: #2262AD;
    margin: 20px 0;
}

h1 { font-size: 200%; line-height: 300%; }
h2 { font-size: 183%; line-height: 275%; }
h3 { font-size: 160%; line-height: 240%; }
h4 { font-size: 150%; line-height: 225%; }
h5 { font-size: 130%; line-height: 195%; }
h6 { font-size: 116%; line-height: 174%; }


p {
    line-height: 150%;
    margin: 0px 0 20px 0;
    font-family: 'Montserrat', sans-serif;
}

a {
    font-weight: bold;
    text-decoration: none;
    color: #2262AD;
    font-size: 110%;
    line-height: 100%;
}

a:hover {
    text-decoration: underline;
}

hr {
    margin: 0px;
    padding: 0px;
    border: none;
    width: 100%;
    height: 1px;
    color: white;
    background-color: white;
}

.collection-title {
    max-width: 898px;
    margin: auto;
    text-align: center;
}

.collection-title h1 {
    color: #fff;
    line-height: 175%;
    text-align: center;
}

.embedded-video div.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}

.embedded-video div.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.embedded-video video {
    width:100%;
    height:auto;
}

video::-webkit-media-controls-overlay-play-button {
    opacity: 0.33;
}

video::-webkit-inner-spin-button {
    opacity: 0.33;
}

video::-webkit-inner-spin-button {
    opacity: 0.33;
}

.gallery {
    max-width: 898px;
    margin: 0px auto;
    padding: 20px;
}

.grid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
  }
  
.grid img {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  max-width: 267px;
  cursor: pointer;
}

.collections-title {
    max-width: 898px;
    margin: auto;
    text-align: center;
}

.collections-title h1 {
    color: #fff;
    line-height: 175%;
    text-align: center;
}

.collections-list {
    max-width: 898px;
    margin: 0px auto;
    padding: 20px;
}

.grid2 { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
  }
  
.grid2 img {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  max-width: 433px;
  opacity: 0.85;
}

.grid2 img:hover {
  opacity: 1;
}

grid-container {
    display: inline-block;
    border: none;
    padding: none;
    margin: none;
    position: relative;
    text-align: center;
}

grid-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.contacts {
    max-width: 898px;
    margin: 0px auto;
    padding: 20px;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;
    column-width: 400px;
    min-height: 600px;
}

.services {
    max-width: 898px;
    margin: 0px auto;
    padding: 20px;
    min-height: 600px;
}

.footer {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #4C4C4C;
}

.footer div {
    max-width: 898px;
    margin: 0px auto;
    padding: 20px 0;
    text-align: center;
}

.footer div p {
    font-size: 90%;
}

.footer div p a {
    color: #5989c1;
}

/* Responsive settings */
@media only screen and (max-width: 898px) {

.collection-title {
    width: 100%;
    margin: auto;
    text-align: center;
}

.collection-title h1 {
    font-size: 133%;
    max-width: 50%;
    margin: auto;
    text-align: center;
}

.footer div p {
    font-size: 60%;
}