/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; }
#cboxOverlay { position: fixed; width: 100%; height: 100%; }
#cboxMiddleLeft, #cboxBottomLeft { clear: left; }
#cboxContent { position: relative; }
#cboxLoadedContent { overflow: auto; }
#cboxTitle { margin: 0; }
#cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; }
.cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; }
.cboxIframe { width: 100%; height: 100%; display: block; border: 0; }
#colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; }
/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay { background: url(img/overlay.png) repeat 0 0; }
#colorbox { }
#cboxTopLeft { width: 21px; height: 21px; background: url(img/controls.png) no-repeat -101px 0; }
#cboxTopRight { width: 21px; height: 21px; background: url(img/controls.png) no-repeat -130px 0; }
#cboxBottomLeft { width: 21px; height: 21px; background: url(img/controls.png) no-repeat -101px -29px; }
#cboxBottomRight { width: 21px; height: 21px; background: url(img/controls.png) no-repeat -130px -29px; }
#cboxMiddleLeft { width: 21px; background: url(img/controls.png) left top repeat-y; }
#cboxMiddleRight { width: 21px; background: url(img/controls.png) right top repeat-y; }
#cboxTopCenter { height: 21px; background: url(img/border.png) 0 0 repeat-x; }
#cboxBottomCenter { height: 21px; background: url(img/border.png) 0 -29px repeat-x; }
#cboxContent { background: #fff; overflow: hidden; }
.cboxIframe { background: #fff; }
#cboxError { padding: 50px; border: 1px solid #ccc; }
#cboxLoadedContent { margin-bottom: 28px; }
#cboxTitle { position: absolute; bottom: 4px; left: 0; text-align: center; width: 100%; color: #949494; }
#cboxCurrent { position: absolute; bottom: 4px; left: 58px; color: #949494; }
#cboxSlideshow { position: absolute; bottom: 4px; right: 30px; color: #0092ef; }
#cboxPrevious { position: absolute; bottom: 0; left: 0; background: url(img/controls.png) no-repeat -75px 0; width: 25px; height: 25px; text-indent: -9999px; }
#cboxPrevious:hover { background-position: -75px -25px; }
#cboxNext { position: absolute; bottom: 0; left: 27px; background: url(img/controls.png) no-repeat -50px 0; width: 25px; height: 25px; text-indent: -9999px; }
#cboxNext:hover { background-position: -50px -25px; }
#cboxLoadingOverlay { background: url(img/loading_background.png) no-repeat center center; }
#cboxLoadingGraphic { background: url(img/loading.gif) no-repeat center center; }
#cboxClose { position: absolute; bottom: 0; right: 0; background: url(img/controls.png) no-repeat -25px 0; width: 25px; height: 25px; text-indent: -9999px; }
#cboxClose:hover { background-position: -25px -25px; }
/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);
}
/*
  The following provides PNG transparency support for IE6
  Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft { background: url(img/borderTopLeft.png); }
.cboxIE6 #cboxTopCenter { background: url(img/borderTopCenter.png); }
.cboxIE6 #cboxTopRight { background: url(img/borderTopRight.png); }
.cboxIE6 #cboxBottomLeft { background: url(img/borderBottomLeft.png); }
.cboxIE6 #cboxBottomCenter { background: url(img/borderBottomCenter.png); }
.cboxIE6 #cboxBottomRight { background: url(img/borderBottomRight.png); }
.cboxIE6 #cboxMiddleLeft { background: url(img/borderMiddleLeft.png); }
.cboxIE6 #cboxMiddleRight { background: url(img/borderMiddleRight.png); }
.cboxIE6 #cboxTopLeft, .cboxIE6 #cboxTopCenter, .cboxIE6 #cboxTopRight, .cboxIE6 #cboxBottomLeft, .cboxIE6 #cboxBottomCenter, .cboxIE6 #cboxBottomRight, .cboxIE6 #cboxMiddleLeft, .cboxIE6 #cboxMiddleRight { _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}
figure { position: relative; float: left; overflow: hidden; width: 100%; height: 100%; background: #3085a3; text-align: center; cursor: pointer; margin: 0; }
figure img { width:260px; height:195px; position: relative; display: block; }
figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
 figure figcaption::before, figure figcaption::after {
 pointer-events: none;
}
figure figcaption, figure figcaption > a { position: absolute; top: 0; left: 0; width: 260px; height:195px; }
figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; }
figure h2 { word-spacing: -0.15em; font-size:28px; font-weight: 300; }
/***** Winston *****/
figure.effect-winston { background: #3C3C3C; text-align: left; }
figure.effect-winston img { -webkit-transition: opacity 0.45s; transition: opacity 0.45s; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
 figure.effect-winston figcaption::before {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: url(style/images/img/triangle.svg) no-repeat center center;
 background-size: 100% 100%;
 content: '';
 -webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
 transition: opacity 0.45s, transform 0.45s;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(0deg);
 transform: rotate(45deg);
 -webkit-transform-origin: 0 100%;
 -ms-transform-origin: 0 100%;
 transform-origin: 0 100%;
}
figure.effect-winston h2 { letter-spacing: 2px; opacity:0; transition: opacity 0.45s; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); }
figure.effect-winston h2 span { font-weight: normal; font-size: 1rem; }
figure.effect-winston h2 div { font-size: 0.9rem; margin-top: .2rem;
margin-left: 1.4rem; }
figure.effect-winston p { position: absolute; right: 0; bottom: 0; padding: 0 8% 8% 0; }
figure.effect-winston figcaption > a { -webkit-transform: rotate3d(0, 0, 1, 73deg); transform: rotate3d(0, 0, 1, 73deg); margin: -3rem 0 0 -1rem; }
figure.effect-winston p>a { margin: 0 10px; color: #626262; font-size: 170%; }
figure.effect-winston p>a:hover, figure.effect-winston p>a:focus { color: #009966; }
figure.effect-winston p>a>i { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); }
figure.effect-winston:hover img { opacity: 0.6; }
figure.effect-winston:hover h2 { opacity:1; -webkit-transition: opacity 0.45s, -webkit-transform 0.45s; transition: opacity 0.45s, transform 0.45s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
 figure.effect-winston:hover figcaption::before {
 opacity: 0.7;
 -webkit-transform: rotate(25deg);
 -ms-transform: rotate(25deg);
 transform: rotate(25deg);
}
figure.effect-winston:hover p i { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
 figure.effect-winston:hover p a:nth-child(2) i {
 -webkit-transition-delay: 0.1s;
 transition-delay: 0.1s;
}
figure.effect-winston:hover p a:first-child i { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; }
/***** Jazz *****/
figure.effect-jazz { background: #3C3C3C; }
 figure.effect-jazz figcaption::after, figure.effect-jazz img, figure.effect-jazz p {
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
}
figure.effect-jazz figcaption { padding:5px; }
 figure.effect-jazz figcaption::after {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-top: 1px solid #fff;
 border-bottom: 1px solid #fff;
 content: '';
 opacity: 0;
 -webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1);
 transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1);
 -webkit-transform-origin: 50% 50%;
 -ms-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
}
figure.effect-jazz p, figure.effect-jazz h2 { padding:5px; text-transform: none; opacity: 0; -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); }
figure.effect-jazz h2 { letter-spacing: 2px; padding-top:80px; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; }
figure.effect-jazz h2 span { letter-spacing: 0; font-size:1rem; }
figure.effect-jazz:hover img { opacity: 0.2; -webkit-transform: scale3d(1.05, 1.05, 1); transform: scale3d(1.05, 1.05, 1); }
 figure.effect-jazz:hover figcaption::after {
 opacity: 1;
 -webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1);
 transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1);
}
figure.effect-jazz:hover h2, figure.effect-jazz:hover p { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
.items { margin: 0 auto; overflow: hidden; }
.items li { position: relative; width:260px; height:195px; margin:20px; float: left; }
.items li:first-child figure.effect-winston { background: transparent; }
.items li:first-child figure.effect-winston figcaption { background: rgba(0, 0, 0, 0.6); }
.items li:first-child figure.effect-winston:hover figcaption { background: rgba(0, 0, 0, 0); }
.items li:first-child figure.effect-winston h2 { opacity: 1; }
.items li:first-child figure.effect-winston:hover h2 { opacity: 0; }
 .items li:first-child figure.effect-winston figcaption::before {
 display: none;
}
.items li:first-child figure.effect-winston:hover img { opacity: 1; }
#articeBottom { font-size: 14px; margin: 6px 0 10px; padding-top: 10px; text-align: center; width: 98%; margin:0 auto; }