/* Lightbox */


.example img {
       width: 22%;
    height: 139px;
    border: 2px solid #ffffff;
    float: left;
    margin: 35px 0px 0px 20px;

}

.example h1 {
color: #fff;
    font-size: 29px;
    letter-spacing: 1px;
    float: left;
    margin: 29px 0px 0px 0px;
    font-family: 'Oswald', sans-serif;
    padding: 0px 0px 0px 19px;
    width: 97%;
}

#lightBox {
	      bottom: 0;
    left: 317px;
    position: absolute;
    right: 0;
    top: -979px;
    z-index: 20000;
}

#overlay {
	background: #333;
	background: rgba(0,0,0,0.8);
	bottom: 0;
	display: none;
	left: 0;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;
	z-index: 10000;
}

#lightBox .container {
	background: #FFF;
    display: inline-block;
    padding: 6px;
    position: relative;
}

#lightBox .image {
	background: url(../media/lightbox/ajax-loader.gif) no-repeat center center #FFF;
	display: block;
	position: relative;
	z-index: 1;
}

#lightBox .image img {
	    display: block;
    width: 100%;
}

#lightBox .navigatory {
	bottom: 0;
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: background-position 0.1s linear;
	z-index: 2;
}

#lightBox #nextImage {
	background: url(../media/lightbox/right-tab.png) no-repeat 100% center;
	background-position: calc(100% - 1em) center;
	left: 66%;
}

#lightBox #nextImage:hover {
	background-position: calc(100% - 0.5em) center;
}

#lightBox #nextImage:active {
	background-position: calc(100% - 0em) center;
}

#lightBox #prevImage {
	background: url(../media/lightbox/left-tab.png) no-repeat 0 center;
	background-position: calc(0% + 1em) center;
	right: 66%;
}

#lightBox #prevImage:hover {
	background-position: calc(0% + 0.5em) center;
}

#lightBox #prevImage:active {
	background-position: calc(0% + 0em) center;
}

#lightBox .data {
	display: block;
	padding: 0.9em 0 0 0;
}

#lightBox .leftData, #lightBox .rightData {
	display: inline-block;
	vertical-align: middle;
	width: 50%;
}

#closeBtn {
	background: url(../media/lightbox/close.png) center no-repeat #FFF;
	border-radius: 50%;
	height: 50px;
	position: absolute;
	right: -25px;
	right: calc(-25px - 0.45em);
	top: -25px;
	top: calc(-25px - 0.45em);
	width: 50px;
	z-index: 3;
}




@media only screen  and (min-width : 1224px) 

{
	

.example img {
       width: 18%;
    height: 139px;
    border: 2px solid #ffffff;
    float: left;
    margin: 35px 0px 0px 20px;

}

.example h1 {
color: #fff;
    font-size: 29px;
    letter-spacing: 1px;
    float: left;
    margin: 29px 0px 0px 0px;
    font-family: 'Oswald', sans-serif;
    padding: 0px 0px 0px 19px;
    width: 97%;
}

#lightBox {
	      bottom: 0;
    left: 317px;
    position: absolute;
    right: 0;
    top: -979px;
    z-index: 20000;
}

#overlay {
	background: #333;
	background: rgba(0,0,0,0.8);
	bottom: 0;
	display: none;
	left: 0;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;
	z-index: 10000;
}

#lightBox .container {
	background: #FFF;
    display: inline-block;
    padding: 6px;
    position: relative;
}

#lightBox .image {
	background: url(../media/lightbox/ajax-loader.gif) no-repeat center center #FFF;
	display: block;
	position: relative;
	z-index: 1;
}

#lightBox .image img {
	    display: block;
    width: 100%;
}

#lightBox .navigatory {
	bottom: 0;
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: background-position 0.1s linear;
	z-index: 2;
}

#lightBox #nextImage {
	background: url(../media/lightbox/right-tab.png) no-repeat 100% center;
	background-position: calc(100% - 1em) center;
	left: 66%;
}

#lightBox #nextImage:hover {
	background-position: calc(100% - 0.5em) center;
}

#lightBox #nextImage:active {
	background-position: calc(100% - 0em) center;
}

#lightBox #prevImage {
	background: url(../media/lightbox/left-tab.png) no-repeat 0 center;
	background-position: calc(0% + 1em) center;
	right: 66%;
}

#lightBox #prevImage:hover {
	background-position: calc(0% + 0.5em) center;
}

#lightBox #prevImage:active {
	background-position: calc(0% + 0em) center;
}

#lightBox .data {
	display: block;
	padding: 0.9em 0 0 0;
}

#lightBox .leftData, #lightBox .rightData {
	display: inline-block;
	vertical-align: middle;
	width: 50%;
}

#closeBtn {
	background: url(../media/lightbox/close.png) center no-repeat #FFF;
	border-radius: 50%;
	height: 50px;
	position: absolute;
	right: -25px;
	right: calc(-25px - 0.45em);
	top: -25px;
	top: calc(-25px - 0.45em);
	width: 50px;
	z-index: 3;
}
	
	
	
	
	
	
	
}




@media only screen and (max-device-width: 480px) and (min-device-width: 320px)
{


.example img {
     width: 100%;
    height: 179px;
    border: 2px solid #ffffff;
    float: left;
    margin: 21px 0px 0px 0px;

}

.example h1 {
    color: #fff;
    font-size: 27px;
    letter-spacing: 1px;
    float: left;
    text-align: center;
    margin: 29px 0px 0px 0px;
    font-family: 'Oswald', sans-serif;
    padding: 0px 0px 0px 0px;
    width: 100%;
}

#lightBox {
	      bottom: 0;
    left: 0px;
    position: absolute;
    right: 0;
    top: 0px;
    z-index: 20000;
}

#overlay {
	background: #333;
	background: rgba(0,0,0,0);
	bottom: 0;
	display: none;
	left: 0;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;
	z-index: 10000;
}

#lightBox .container {
	background: #FFF;
    display: none;
    padding: 6px;
    position: relative;
}

#lightBox .image {
	background: url(../media/lightbox/ajax-loader.gif) no-repeat center center #FFF;
	display: block;
	position: relative;
	z-index: 1;
}

#lightBox .image img {
	    display: block;
    width: 100%;
}

#lightBox .navigatory {
	bottom: 0;
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: background-position 0.1s linear;
	z-index: 2;
}

#lightBox #nextImage {
	background: url(../media/lightbox/right-tab.png) no-repeat 100% center;
	background-position: calc(100% - 1em) center;
	left: 66%;
}

#lightBox #nextImage:hover {
	background-position: calc(100% - 0.5em) center;
}

#lightBox #nextImage:active {
	background-position: calc(100% - 0em) center;
}

#lightBox #prevImage {
	background: url(../media/lightbox/left-tab.png) no-repeat 0 center;
	background-position: calc(0% + 1em) center;
	right: 66%;
}

#lightBox #prevImage:hover {
	background-position: calc(0% + 0.5em) center;
}

#lightBox #prevImage:active {
	background-position: calc(0% + 0em) center;
}

#lightBox .data {
	display: block;
	padding: 0.9em 0 0 0;
}

#lightBox .leftData, #lightBox .rightData {
	display: inline-block;
	vertical-align: middle;
	width: 50%;
}

#closeBtn {
	background: url(../media/lightbox/close.png) center no-repeat #FFF;
	border-radius: 50%;
	height: 50px;
	position: absolute;
	right: -25px;
	right: calc(-25px - 0.45em);
	top: -25px;
	top: calc(-25px - 0.45em);
	width: 50px;
	z-index: 3;
}



}




@media only screen and (max-device-width: 640px) and (min-device-width: 360px)
{


.example img {
    width: 81%;
    height: 156px;
    border: 2px solid #ffffff;
    float: left;
    margin: 21px 0px 0px 34px;
}

.example h1 {
    color: #fff;
    font-size: 27px;
    letter-spacing: 1px;
    float: left;
    text-align: center;
    margin: 29px 0px 0px 0px;
    font-family: 'Oswald', sans-serif;
    padding: 0px 0px 0px 0px;
    width: 100%;
}

#lightBox {
	      bottom: 0;
    left: 0px;
    position: absolute;
    right: 0;
    top: 0px;
    z-index: 20000;
}

#overlay {
	background: #333;
	background: rgba(0,0,0,0);
	bottom: 0;
	display: none;
	left: 0;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;
	z-index: 10000;
}

#lightBox .container {
	background: #FFF;
    display: none;
    padding: 6px;
    position: relative;
}

#lightBox .image {
	background: url(../media/lightbox/ajax-loader.gif) no-repeat center center #FFF;
	display: block;
	position: relative;
	z-index: 1;
}

#lightBox .image img {
	    display: block;
    width: 100%;
}

#lightBox .navigatory {
	bottom: 0;
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: background-position 0.1s linear;
	z-index: 2;
}

#lightBox #nextImage {
	background: url(../media/lightbox/right-tab.png) no-repeat 100% center;
	background-position: calc(100% - 1em) center;
	left: 66%;
}

#lightBox #nextImage:hover {
	background-position: calc(100% - 0.5em) center;
}

#lightBox #nextImage:active {
	background-position: calc(100% - 0em) center;
}

#lightBox #prevImage {
	background: url(../media/lightbox/left-tab.png) no-repeat 0 center;
	background-position: calc(0% + 1em) center;
	right: 66%;
}

#lightBox #prevImage:hover {
	background-position: calc(0% + 0.5em) center;
}

#lightBox #prevImage:active {
	background-position: calc(0% + 0em) center;
}

#lightBox .data {
	display: block;
	padding: 0.9em 0 0 0;
}

#lightBox .leftData, #lightBox .rightData {
	display: inline-block;
	vertical-align: middle;
	width: 50%;
}

#closeBtn {
	background: url(../media/lightbox/close.png) center no-repeat #FFF;
	border-radius: 50%;
	height: 50px;
	position: absolute;
	right: -25px;
	right: calc(-25px - 0.45em);
	top: -25px;
	top: calc(-25px - 0.45em);
	width: 50px;
	z-index: 3;
}



}





@media only screen and (max-device-width: 667px) and (min-device-width: 375px)
{


.example img {
        width: 87%;
    height: 179px;
    border: 2px solid #ffffff;
    float: left;
    margin: 21px 0px 0px 26px;
}

.example h1 {
    color: #fff;
    font-size: 27px;
    letter-spacing: 1px;
    float: left;
    text-align: center;
    margin: 29px 0px 0px 0px;
    font-family: 'Oswald', sans-serif;
    padding: 0px 0px 0px 0px;
    width: 100%;
}

#lightBox {
	      bottom: 0;
    left: 0px;
    position: absolute;
    right: 0;
    top: 0px;
    z-index: 20000;
}

#overlay {
	background: #333;
	background: rgba(0,0,0,0);
	bottom: 0;
	display: none;
	left: 0;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;
	z-index: 10000;
}

#lightBox .container {
	background: #FFF;
    display: none;
    padding: 6px;
    position: relative;
}

#lightBox .image {
	background: url(../media/lightbox/ajax-loader.gif) no-repeat center center #FFF;
	display: block;
	position: relative;
	z-index: 1;
}

#lightBox .image img {
	    display: block;
    width: 100%;
}

#lightBox .navigatory {
	bottom: 0;
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: background-position 0.1s linear;
	z-index: 2;
}

#lightBox #nextImage {
	background: url(../media/lightbox/right-tab.png) no-repeat 100% center;
	background-position: calc(100% - 1em) center;
	left: 66%;
}

#lightBox #nextImage:hover {
	background-position: calc(100% - 0.5em) center;
}

#lightBox #nextImage:active {
	background-position: calc(100% - 0em) center;
}

#lightBox #prevImage {
	background: url(../media/lightbox/left-tab.png) no-repeat 0 center;
	background-position: calc(0% + 1em) center;
	right: 66%;
}

#lightBox #prevImage:hover {
	background-position: calc(0% + 0.5em) center;
}

#lightBox #prevImage:active {
	background-position: calc(0% + 0em) center;
}

#lightBox .data {
	display: block;
	padding: 0.9em 0 0 0;
}

#lightBox .leftData, #lightBox .rightData {
	display: inline-block;
	vertical-align: middle;
	width: 50%;
}

#closeBtn {
	background: url(../media/lightbox/close.png) center no-repeat #FFF;
	border-radius: 50%;
	height: 50px;
	position: absolute;
	right: -25px;
	right: calc(-25px - 0.45em);
	top: -25px;
	top: calc(-25px - 0.45em);
	width: 50px;
	z-index: 3;
}



}