@media(min-width:1200px) {
    .gallery {
      padding: 20px;
      max-width: 1100px;
      overflow: hidden;
      margin:0 auto;
    }
}

@media(max-width:1200px) {
    .gallery {
      padding: 20px;
      width:50%;
      overflow: hidden;
    }
}

@media(max-width:600px) {
    .gallery {
      padding: 20px;
      width:30% !important;
      overflow: hidden;
    }
}
.gallery {
  padding-bottom:80px;
}
.gallery img {
display: none;
}
.main {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
background: #ccc;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
margin-bottom: 20px;
}



.main:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;

background: -moz-linear-gradient(
top,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.7) 100%
);
background: -webkit-linear-gradient(
top,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.7) 100%
);
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.7) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
}
.main-selected {
animation: crossfade 0.5s ease;
-webkit-animation: crossfade 0.5s ease;
-moz-animation: crossfade 0.5s ease;
}
@keyframes crossfade {
0% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}

@-webkit-keyframes crossfade {
0% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}

@-moz-keyframes crossfade {
0% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
.main span {
position: absolute;
display: block;
text-align: center;
font-size: 16px;
font-family: sans-serif;
color: #fff;
bottom: 10px;
left: 0;
right: 0;
}
.thumb-roll {
position: relative;
width: auto;
overflow-x: auto;
overflow-y: hidden;

white-space: nowrap;
}
.thumb {
display: inline-block;
position: relative;
width: 100px;
height: 100px;
margin-right: 20px;
background: #ccc;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
cursor: pointer;
}
.thumb:last-of-type {
margin-right: 0px;
}
.thumb:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 5px 5px 0px rgba(51, 204, 255, 0),
inset -5px -5px 0px rgba(51, 204, 255, 0);
}
.thumb.current:after {
box-shadow: inset 5px 5px 0px rgba(51, 204, 255, 1),
inset -5px -5px 0px rgba(51, 204, 255, 1);
background: rgba(255, 255, 255, 0.4);
cursor: default;
}
.thumb:hover:after {
box-shadow: inset 5px 5px 0px rgba(51, 204, 255, 1),
inset -5px -5px 0px rgba(51, 204, 255, 1);
}

#subtitle {
font-size:1.8rem;
color:#353232;
}