/*!
 *  Responsive Portfolio Image Gallery 1.0.4
 *  by @realwebcare - http://www.realwebcare.com
 */
*,
*:after,
*:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;padding: 0;margin: 0}
.clearfix:before,
.clearfix:after {content: " ";display: table}
.clearfix:after {clear: both}
.clearfix {*zoom: 1}
.og-grid {list-style: none;padding: 20px 0;margin: 0 auto;text-align: center;width: 100%}
.og-grid li {display: inline-block;vertical-align: top;overflow: hidden}
.og-grid li.hidden {display: none}
.og-grid li > a,
.og-grid li > a img {border: none;outline: none;display: block;position: relative}
.og-pointer{top: auto;border: solid transparent;content: " ";height: 0;width: 0;position: relative;pointer-events: none;border-bottom-color: #dcdcdc;border-width: 15px;left: 50%;margin: -20px 0 0 -15px}
.og-expander {position: absolute;background: #DCDCDC;color: #2a2a2a;top: auto;left: 0;width: 100%;margin-top: 0px;text-align: left;height: 0;overflow: hidden}
.og-expander-inner {padding: 30px 30px;height: 100%}
.og-close{background:#999;border-radius:5px;position:absolute;width:32px;height:32px;top:10px;right:10px;cursor:pointer;opacity:0.4;z-index: 9999}
.og-close::before,.og-close::after{content:'';position:absolute;width:70%;left: 5px;top:48%;height:3px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}
.og-close::after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}
.og-close:hover{opacity: 0.8}
.og-fullimg,
.og-details {width: 50%;float: left;height: 100%;overflow: hidden;position: relative}
.og-details .infosep {border-bottom: 1px solid #c4c4c4;box-shadow: 0 1px #e7e7e7;margin: 15px 0 10px -15px}
.og-details {padding: 0 20px}
.og-fullimg {text-align: center}
.og-fullimg img {display: inline-block;max-height: 100%;max-width: 100%}
.og-details h3 {font-weight: 300;font-size: 36px;margin-top: 0px;margin-bottom: 10px}
.og-details p {font-weight: 400;font-size: 15px;line-height: 22px;color: #303030;margin: 0;padding-bottom: 20px}
.og-details iframe {max-width: 400px;max-height: 250px;margin-bottom: 0px}
.og-details a.link-button {font-size: 11px;padding: 8px 10px;background-color: #e7e7e7;background: -moz-linear-gradient(top,#e7e7e7 0%,#c4c4c4);background: -webkit-gradient(linear, left top, left bottom,from(#e7e7e7),to(#c4c4c4));-moz-border-radius: 1px;-webkit-border-radius: 1px;border-radius: 3px;border: 1px solid #c3c3c3;text-shadow:0px -1px 0px rgba(41,41,41,0.7),0px 1px 0px rgba(3,3,3,0.3);white-space: normal;word-wrap: normal;color: #575757 !important;cursor: pointer !important;font-size: 11px;font-weight: bold;text-align: center;text-shadow: 0 -1px 0 rgba(0,0,0,.5);white-space: normal;margin-left: 10px}
.og-details a.first{margin-left: 0px}
.og-details a:hover {background-color: #dcdcdc;background: -moz-linear-gradient(top,#dcdcdc dcdcdc%,#c4c4c4);background: -webkit-gradient(linear, left top, left bottom,from(#dcdcdc),to(#c4c4c4));text-decoration: none}
.og-details:after,.og-details:before{content:'';position:absolute;top:0;background:#ff0000;width:1px;height:100%;z-index:9999}
.og-details:before{border-left:1px solid #e7e7e7;left:6px}
.og-details:after{border-right:1px solid #c4c4c4;left:5px}
.og-loading {width: 20px;height: 20px;border-radius: 50%;background: #ddd;box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;position: absolute;top: 50%;left: 50%;margin: -25px 0 0 -25px;-webkit-animation: loader 0.5s infinite ease-in-out both;-moz-animation: loader 0.5s infinite ease-in-out both;animation: loader 0.5s infinite ease-in-out both}
@-webkit-keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
@-moz-keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
@keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
/* Work - filter by tag */
.wagwep-container{overflow: hidden}
.wagwep-container ul#portfolio-filter {float: left;font-size: 16px;list-style: none;padding: 10px 0px;width: 100%;border-bottom: 1px solid #ddd}
.wagwep-container ul#portfolio-filter li {background: none;float: left;line-height: 16px;margin: 0px;padding: 10px}
.wagwep-container ul#portfolio-filter li:last-child {border-right: none;margin-right: 0;padding-right: 0}
.wagwep-container ul#portfolio-filter a {color: #444444; text-decoration: none;border:0;background:0;margin:0 10px 10px 0;padding:6px 12px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px}
.wagwep-container ul#portfolio-filter li.current a, ul#portfolio-filter a:hover {text-decoration: none;background:#eee;color:#222}
.wagwep-container ul#portfolio-filter li.current a {color: #333; font-weight: bold;background:#666;color:#fff}
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";display: table}
.clearfix:after {clear: both}
.clearfix {*zoom: 1}
/* rcpigslide Style */
.rcpigslide-list {list-style-type: none;display: none}
.no-js .rcpigslide-list {display: block}
.rcpigslide-carousel ul li {min-width: 20px}
.rcpigslide-wrapper {position: relative;background-color: #dedede;margin: 0 auto;min-height: 60px;box-shadow: inset 0 0 10px #999;-moz-box-shadow: inset 0 0 10px #999;-webkit-box-shadow: inset 0 0 10px #999}
.rcpigslide-wrapper.rcpigslide-loading {background-image: url(../images/loading.gif);background-repeat: no-repeat;background-position: center center}
.rcpigslide-horizontal {padding: 10px 40px}
.rcpigslide-vertical {padding: 40px 10px}
.rcpigslide-carousel {overflow: hidden;position: relative}
.rcpigslide-carousel ul {position: relative;display: block;list-style-type: none;padding: 0;margin: 0;-webkit-backface-visibility: hidden;-webkit-transform: translateX(0px);-moz-transform: translateX(0px);-ms-transform: translateX(0px);-o-transform: translateX(0px);transform: translateX(0px)}
.rcpigslide-horizontal ul {white-space: nowrap}
.rcpigslide-carousel ul li {margin: 0;-webkit-backface-visibility: hidden}
.rcpigslide-horizontal ul li {height: 100%;display: inline-block}
.rcpigslide-vertical ul li {display: block}
.rcpigslide-carousel ul li a {display: inline-block;width: 100%;padding: 0px}
.rcpigslide-carousel ul li a img {display: block;border: 2px solid #313131;max-width: 100%}
.rcpigslide-carousel ul li a img.selected {border: 2px solid #999999}
/* Navigation Arrows */
.rcpigslide-wrapper nav span {position: absolute;background: #999 url(../images/nav.png) no-repeat 4px 3px;width: 23px;height: 23px;border-radius: 50%;text-indent: -9000px;cursor: pointer;opacity: 0.8}
.rcpigslide-wrapper nav span:hover {opacity: 1.0}
.rcpigslide-horizontal nav span {top: 50%;left: 10px;margin-top: -11px}
.rcpigslide-vertical nav span {top: 10px;left: 50%;margin-left: -11px;background-position: -17px 5px}
.rcpigslide-horizontal nav span.rcpigslide-next {right: 10px;left: auto;background-position: 4px -17px}
.rcpigslide-vertical nav span.rcpigslide-next {bottom: 10px;top: auto;background-position: -17px -18px}
/* Hover */
.og-grid li a {overflow: hidden}
.og-grid li a.unhoverdir {overflow: visible}
.og-grid li a figure {position: absolute;background: #c4c4c4;background: rgba(196,196,196,0.7);width: 100%;height: 100%}
.og-grid li a figure span {display: block;padding: 10px 0;margin: 40px 20px 20px 20px;text-transform: uppercase;font-weight: bold;color:rgba(0,0,0,0.9);text-shadow: 1px 1px 1px rgba(250,250,250,0.2);border-bottom: 1px solid rgba(0,0,0,0.5)}
/* Effect */
.og-grid.effect-opacity li.animate {-webkit-animation: fadeIn 0.65s ease forwards;-moz-animation: fadeIn 0.65s ease forwards;animation: fadeIn 0.65s ease forwards}
@-webkit-keyframes fadeIn {
to { opacity: 1; }
}
@-moz-keyframes fadeIn {
to { opacity: 1; }
}
@keyframes fadeIn {
to { opacity: 1; }
}
.og-grid.effect-moveup li.animate {-webkit-transform: translateY(200px);-moz-transform: translateY(200px);transform: translateY(200px);-webkit-animation: moveUp 0.65s ease forwards;-moz-animation: moveUp 0.65s ease forwards;animation: moveUp 0.65s ease forwards}
@-webkit-keyframes moveUp {
to { -webkit-transform: translateY(0); opacity: 1; }
}
@-moz-keyframes moveUp {
to { -moz-transform: translateY(0); opacity: 1; }
}
@keyframes moveUp {
to { transform: translateY(0); opacity: 1; }
}
.og-grid.effect-scaleup li.animate {-webkit-transform: scale(0.6);-moz-transform: scale(0.6);transform: scale(0.6);-webkit-animation: scaleUp 0.65s ease-in-out forwards;-moz-animation: scaleUp 0.65s ease-in-out forwards;animation: scaleUp 0.65s ease-in-out forwards}
@-webkit-keyframes scaleUp {
to { -webkit-transform: scale(1); opacity: 1; }
}
@-moz-keyframes scaleUp {
to { -moz-transform: scale(1); opacity: 1; }
}
@keyframes scaleUp {
to { transform: scale(1); opacity: 1; }
}
.og-grid.effect-helix {-webkit-perspective: 1300px;-moz-perspective: 1300px;perspective: 1300px}
.og-grid.effect-helix li.animate {-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);transform: rotateY(-180deg);-webkit-animation: helix .8s ease-in-out forwards;-moz-animation: helix .8s ease-in-out forwards;animation: helix .8s ease-in-out forwards}
@-webkit-keyframes helix {
100% { -webkit-transform: rotateY(0deg); opacity: 1; }
}
@-moz-keyframes helix {
100% { -moz-transform: rotateY(0deg); opacity: 1; }
}
@keyframes helix {
100% { transform: rotateY(0deg); opacity: 1; }
}
.og-grid.effect-popup {-webkit-perspective: 1300px;-moz-perspective: 1300px;perspective: 1300px}
.og-grid.effect-popup li.animate {background: none;padding: 0;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform: scale(0.4);-moz-transform: scale(0.4);transform: scale(0.4);-webkit-animation: popUp .8s ease-in forwards;-moz-animation: popUp .8s ease-in forwards;animation: popUp .8s ease-in forwards}
@-webkit-keyframes popUp {
70% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; }
100% { -webkit-transform: scale(1); opacity: 1; }
}
@-moz-keyframes popUp {
70% { -moz-transform: scale(1.1); opacity: .8; -moz-animation-timing-function: ease-out; }
100% { -moz-transform: scale(1); opacity: 1; }
}
@keyframes popUp {
70% { transform: scale(1.1); opacity: .8; animation-timing-function: ease-out; }
100% { transform: scale(1); opacity: 1; }
}
/* Responsive */
nav#porfolio-nav {width: 100%;position: relative}
nav#porfolio-nav ul {padding: 0;margin: 0 auto}
nav#porfolio-nav li {display: inline;float: left}
nav#porfolio-nav li a {border-right: 1px solid #576979;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
nav#porfolio-nav li:last-child a {border-right: 0}
#rcpig_grid_demo h3 {margin: 0 0 5px;border-bottom: none;color:#2a2a2a}
#rcpig_grid_demo ul.og-grid li {margin: 10px 5px 0 5px;padding: 0;background:none !important}
.og-expander .og-details ul li {margin: 10px 5px 0 5px;padding: 0}
@media (min-width: 1200px) {
.og-expander h3 {font-size: 35px}
.og-expander p {font-size: 13px}
.og-expander a {font-size: 12px}
}
@media (max-width: 1023px) {
.rcpigslide-wrapper{height: 150px}
}
@media (min-width: 768px) and (max-width: 979px) {
.og-expander h3 {font-size: 32px}
.og-expander p {font-size: 12px}
.og-expander a {font-size: 11px}
.og-grid .sep {margin: 20px 10px;height: 80%}
}
@media (max-width: 767px) {
.og-expander h3 {font-size: 20px !important}
.og-expander p {font-size: 12px;padding-bottom: 5px;line-height:18px}
.og-expander a {font-size: 11px}
.og-grid .sep {display: none}
.og-fullimg{height: 40%;width: 100%}
.og-details{width: 100%;margin-top: 5px}
.og-details a.link-button {padding: 5px 10px;}
.og-details .infosep {margin: 7px 0 7px -15px}
.rcpigslide-wrapper{max-width: 300px;padding-bottom: 5px;height: 110px}
.rcpigslide-carousel ul {padding:0 !important}
}
/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
nav#porfolio-nav {height: auto}
nav#porfolio-nav ul {width: 100%;display: block;height: auto}
nav#porfolio-nav li {width: 50%;float: left;position: relative}
nav#porfolio-nav li a {border-bottom: 1px solid #576979;border-right: 1px solid #576979}
nav#porfolio-nav a {text-align: left;width: 100%;text-indent: 25px}
}
/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
nav#porfolio-nav {border-bottom: 0}
nav#porfolio-nav ul {height: auto}
.og-expander h3 {font-size: 18px}
.og-expander p {font-size: 12px}
.og-expander a {font-size: 11px}
.og-expander-inner {padding: 10px}
.og-grid .sep {display: none}
.og-fullimg{height: 30%;width: 100%}
.og-details{width: 100%;margin-top: 5px}
.og-details h3 {font-size: 18px;margin-bottom: 0px}
.og-details p {padding-bottom: 10px}
.og-details .infosep {margin: 10px 0px}
.rcpigslide-wrapper{max-width: 300px}
.rcpigslide-horizontal {padding: 5px 30px}
}
/*Smartphone*/
@media only screen and (max-width : 320px) {
nav#porfolio-nav li {display: block;float: none;width: 100%}
nav#porfolio-nav li a {border-bottom: 1px solid #576979}
.og-details h3 {font-size: 18px;margin-bottom: 0px}
.og-details p {padding-bottom: 10px}
.og-details .infosep {margin: 10px 0px}
.rcpigslide-wrapper{height: 80px}
.rcpigslide-horizontal {padding: 0 30px}
}