@import "http://font-style: em;googleapis.com/css?family=Open+Sans)"; article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none } table { border-collapse: collapse; border-spacing: 0 } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } h1 { font-size: 3.0em; line-height: 40px } a { text-decoration: none; color: rgba(19, 178, 82, 0.92) } a:hover { color: #fff } img { max-width: 100% } .pull-right { float: right } .pull-left { float: left } .btn-download { background: rgba(24, 42, 60, 0.92); color: rgba(124, 142, 160, 0.92); padding: 20px 50px; display: inline-block; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px } .btn-download:hover { background: rgba(94, 112, 130, 0.92) } .wrapper { max-width: 100%; margin: 0 auto; margin-top: 30px; margin-bottom: 15px; } .wrapper:before, .wrapper:after { content: ''; display: table; clear: both } footer { margin-top: 30px; background: rgba(24, 42, 60, 0.92); color: rgba(124, 142, 160, 0.92); padding: 20px 0; text-align: left; font-size: 0.9em } @keyframes anima { from { margin-top: -50px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0 } to { margin: auto; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1 } } @-webkit-keyframes anima { from { margin-left: -20px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0 } to { margin-left: 10px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1 } } @media screen and (max-width: 560px) { .wrapper { padding: 20px } } .pic { cursor: pointer; max-width: 18%; max-height: 300px; position: relative; overflow: hidden; margin: 0px 15px 15px 0px; display: inline-block; -webkit-animation: anima 2s; -moz-animation: anima 2s; -o-animation: anima 2s; -ms-animation: anima 2s; animation: anima 2s; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden } .pic-3d { -webkit-perspective: 500; -moz-perspective: 500; -o-perspective: 500; -ms-perspective: 500; perspective: 500; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d } .pic1 { margin: 0px 0px 15px 0px !important; } .pic-caption { cursor: default; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.10); padding: 10px; text-align: center; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0 } .pic-image { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1) } .pic:hover .pic-image { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } .pic-title { color: #FFF; font-size: 1.8em } a, a:hover, .pic .pic-image, .pic-caption, .pic:hover .pic-caption, .pic:hover img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease } .pic:hover .bottom-to-top, .pic:hover .top-to-bottom, .pic:hover .left-to-right, .pic:hover .right-to-left, .pic:hover .rotate-in, .pic:hover .rotate-out, .pic:hover .open-up, .pic:hover .open-down, .pic:hover .open-left, .pic:hover .open-right, .pic:hover .come-left, .pic:hover .come-right { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -moz-touch-callout: none; -o-touch-callout: none; -ms-touch-callout: none; touch-callout: none; -webkit-tap-highlight-color: transparent; -moz-tap-highlight-color: transparent; -o-tap-highlight-color: transparent; -ms-tap-highlight-color: transparent; tap-highlight-color: transparent } .bottom-to-top { top: 50%; left: 0 } .pic:hover .bottom-to-top { top: 0; left: 0 } .top-to-bottom { bottom: 50%; left: 0 } .pic:hover .top-to-bottom { left: 0; bottom: 0 } .left-to-right { top: 0; right: 50% } .pic:hover .left-to-right { right: 0; top: 0 } .right-to-left { top: 0; left: 50% } .pic:hover .right-to-left { left: 0; top: 0 } .rotate-in { -webkit-transform: rotate(90deg) scale(0.1); -moz-transform: rotate(90deg) scale(0.1); -o-transform: rotate(90deg) scale(0.1); -ms-transform: rotate(90deg) scale(0.1); transform: rotate(90deg) scale(0.1); top: 0; left: 0 } .pic:hover .rotate-in { -webkit-transform: rotate(360deg) scale(1); -moz-transform: rotate(360deg) scale(1); -o-transform: rotate(360deg) scale(1); -ms-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1) } .rotate-out { -webkit-transform: rotate(90deg) scale(3); -moz-transform: rotate(90deg) scale(3); -o-transform: rotate(90deg) scale(3); -ms-transform: rotate(90deg) scale(3); transform: rotate(90deg) scale(3); top: 0; left: 0 } .pic:hover .rotate-out { -webkit-transform: rotate(360deg) scale(1); -moz-transform: rotate(360deg) scale(1); -o-transform: rotate(360deg) scale(1); -ms-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1) } .open-down { -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); transform: rotateX(-180deg); top: 0; left: 0 } .pic:hover .open-down { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -o-transform: rotateX(0); -ms-transform: rotateX(0); transform: rotateX(0) } .open-up { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); top: 0; left: 0 } .pic:hover .open-up { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -o-transform: rotateX(0); -ms-transform: rotateX(0); transform: rotateX(0) } .open-left { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); left: 0; top: 0 } .pic:hover .open-left { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg) } .open-right { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); left: 0; top: 0 } .pic:hover .open-right { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg) } .come-left { -webkit-transform: rotateY(90deg) rotateX(90deg); -moz-transform: rotateY(90deg) rotateX(90deg); -o-transform: rotateY(90deg) rotateX(90deg); -ms-transform: rotateY(90deg) rotateX(90deg); transform: rotateY(90deg) rotateX(90deg); left: 0; top: 0 } .pic:hover .come-left { -webkit-transform: rotateY(0) rotateX(0); -moz-transform: rotateY(0) rotateX(0); -o-transform: rotateY(0) rotateX(0); -ms-transform: rotateY(0) rotateX(0); transform: rotateY(0) rotateX(0) } .come-right { -webkit-transform: rotateY(-90deg) rotateX(-90deg); -moz-transform: rotateY(-90deg) rotateX(-90deg); -o-transform: rotateY(-90deg) rotateX(-90deg); -ms-transform: rotateY(-90deg) rotateX(-90deg); transform: rotateY(-90deg) rotateX(-90deg); left: 0; top: 0 } .pic:hover .come-right { -webkit-transform: rotateY(0) rotateX(0); -moz-transform: rotateY(0) rotateX(0); -o-transform: rotateY(0) rotateX(0); -ms-transform: rotateY(0) rotateX(0); transform: rotateY(0) rotateX(0) } @media screen and (max-width: 560px) { .pic { max-width: 49%; max-height: 300px; -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; margin: 0px auto; } .pic1 {margin: 0px auto !important; } }