/* -------------------------------- 
Primary style
-------------------------------- */
*, *::after, *::before {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
font-family: 'Heebo', sans-serif;
color: #0f1926;
background-color: #ebebeb;
}
a {
color: #eebb00;
text-decoration: none;
}
img {
max-width: 100%;
}
/* -------------------------------- 
Patterns - reusable parts of our design
-------------------------------- */
.cd-btn { text-align: center; background-color: #fff; color: #000000; font-size: 16px; padding: 0 40px; display: inline-block; height: 50px; line-height: 50px; border: 0; border-radius: 4px; position: relative; -webkit-transition: color 0.5s, background-color 0.3s; -o-transition: color 0.5s, background-color 0.3s; transition: color 0.5s, background-color 0.3s; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); vertical-align: middle; background-position: center center; background-repeat: no-repeat }
.cd-btn:before { content: ''; display: block; width: 50%; height: 1px; position: absolute; left: -33%; top: 50%; background: #333333; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s }
.cd-btn.black { background-color: #5a5b5d; color: #fff }
/* .cd-btn.btn-add-cart { background-image: url('../images/icon_cart.svg'); padding: 0 33px } */
.cd-btn.btn-add-cart:before { content: url('../images/icon_cart.svg');}
/* .cd-btn.btn-add-cart:before { display: none } */
.cd-btn:focus { color: #333;;text-decoration:none }
.btn-wrap { margin: 20px auto }
.btn-wrap-right {margin: 0.5em 9.3em 0em 9.3em; text-align: left }
.btn-wrap-center { margin: 3rem auto; text-align: center; font-size: 0 }
.btn-more { display: inline-block }
.btn-back { display: inline-block; color: #000; font-size: 1rem; position: relative; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s }
.btn-back:before { content: ''; display: inline-block; width: 20px; height: 1px; background: #444; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; left: 0; z-index: -1; vertical-align: middle; margin-right: 20px }
.btn-back:after { content: ''; position: absolute; width: 10px; height: 8px; border-style: solid; border-color: #000; border-width: 1px 1px 0 0; transform: rotate(-135deg); -webkit-transition: left 0.5s ease; -o-transition: left 0.5s ease; transition: left 0.5s ease; display: block; bottom: 0; left: 0; top: 5px }
@media (min-width:992px) {
.cd-btn:hover { color: #fff; background-color: #666 }
.cd-btn:hover:before { background: #fff; left: 100%; width: 0 }
.cd-btn.black:hover { background-color: #bca97a }
.cd-btn2.black:hover,
.cd-btn2.greenlake:hover { background-color: #bca97a }
.btn-back:hover { letter-spacing: 1px; color: #000 }
.btn-back:hover:before { width: 30px }
}
@media (max-width:992px) {
.cd-btn { height: 40px; line-height: 40px; padding: 0 20px }
.cd-btn:before { width: 23%; left: -15% }
.btn-wrap-center { margin: 1.5rem 0 }
}
@media only screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {

.cd-btn {font-size: 14px;}
.btn-wrap { margin: 20px auto }
.btn-wrap-right {margin: 0.5em 1.8em 0em 5.8em !important; text-align: left }
.cd-btn:hover { color: #fff; background-color: #666 }
.cd-btn:hover:before { background: #fff; left: 100%; width: 0 }
.cd-btn.black:hover { background-color: #bca97a }
.cd-btn2.black:hover,
.cd-btn2.greenlake:hover { background-color: #bca97a }
.btn-back:hover { letter-spacing: 1px; color: #000 }
.btn-back:hover:before { width: 30px }
}
@media only screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

.cd-btn {font-size: 14px;}
.btn-wrap { margin: 20px auto }
.btn-wrap-right {margin: 0.5em 1.8em 0em 4.4em !important; text-align: left }
.cd-btn:hover { color: #fff; background-color: #666 }
.cd-btn:hover:before { background: #fff; left: 100%; width: 0 }
.cd-btn.black:hover { background-color: #bca97a }
.cd-btn2.black:hover,
.cd-btn2.greenlake:hover { background-color: #bca97a }
.btn-back:hover { letter-spacing: 1px; color: #000 }
.btn-back:hover:before { width: 30px }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (max-device-height: 1024px) {
.cd-btn {font-size: 14px;}
.btn-wrap { margin: 20px auto }
.btn-wrap-right {margin: 0.5em 1.8em 0em 4.5em; text-align: left }
.cd-btn:hover { color: #fff; background-color: #666 }
.cd-btn:hover:before { background: #fff; left: 100%; width: 0 }
.cd-btn.black:hover { background-color: #bca97a }
.cd-btn2.black:hover,
.cd-btn2.greenlake:hover { background-color: #bca97a }
.btn-back:hover { letter-spacing: 1px; color: #000 }
.btn-back:hover:before { width: 30px }
}

@media (max-width:480px) {
.cd-btn {font-size: 14px;}
.btn-wrap { margin: 20px auto }
.btn-wrap-right {margin: 0.5em 1.8em 0em 2.5em; text-align: right }
.cd-btn:hover { color: #fff; background-color: #666 }
.cd-btn:hover:before { background: #fff; left: 100%; width: 0 }
.cd-btn.black:hover { background-color: #bca97a }
.cd-btn2.black:hover,
.cd-btn2.greenlake:hover { background-color: #bca97a }
.btn-back:hover { letter-spacing: 1px; color: #000 }
.btn-back:hover:before { width: 30px }
}
@media (max-width:480px) {
.cd-btn { height: 40px; line-height: 0px; padding: 0 20px }
.cd-btn:before { width: 23%; left: -15% }
.btn-wrap-center { margin: 1.5rem 0 }
}
.no-touch .cd-btn:hover {
/* box-shadow: 0 0px 30px rgba(238, 187, 0, 0.9), inset 0 0px 0 rgba(255, 255, 255, 0.9);*/
/* */
}
.cd-img-replace {
/* replace text with image */
color: transparent;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
/* -------------------------------- 
Intro page
-------------------------------- */
.cd-intro-block {
position: relative;
z-index: 2;
height: 500px;
width: 100%;
background: linear-gradient(rgba(43, 44, 47, 0.1), rgba(43, 44, 47, 0.1)), url(../images/Certification-Banner-01.png) no-repeat -120px 0px;;
background-size:cover;
/* used to vertical align its content */
display: table;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.67, 0.15, 0.83, 0.83);
-moz-transition-timing-function: cubic-bezier(0.67, 0.15, 0.83, 0.83);
transition-timing-function: cubic-bezier(0.67, 0.15, 0.83, 0.83);
}
.cd-intro-block::after {
/* arrow icon visible when .cd-intro-block slides out */
content: '';
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
top: 95%;
height: 24px;
width: 24px;
background: url(../img/cd-arrow-back.svg) no-repeat center center;
opacity: 0;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.cd-intro-block .content-wrapper {
/* vertical align the .cd-intro-block content */
display: table-cell;
vertical-align: middle;
text-align: center;
}
.cd-intro-block h1 {
width: 90%;
margin: 0 auto .6em;
font-size: 2.4rem;
color: #000000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cd-intro-block.projects-visible {
/* translate the .cd-intro-block element to reveal the projects slider */
-webkit-transform: translateY(-90%);
-moz-transform: translateY(-90%);
-ms-transform: translateY(-90%);
-o-transform: translateY(-90%);
transform: translateY(-90%);
box-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.cd-intro-block.projects-visible:after {
/* show arrow icon */
opacity: 1;
}
@media only screen and (min-width: 900px) {
.cd-intro-block::after {
top: 97.5%;
}
.cd-intro-block h1 {
font-size: 16px;
font-weight: 500px;
width:34%;
padding: 5px 5px 7px 7px;
text-align:justify;
line-height:28px;
margin-left:100px
}
.cd-intro-block h3 {
font-size: 20px;
font-weight: 700px;
color:#000000;
padding: 5px 5px 7px 7px;
text-align:justify;
line-height:23px;
margin-left:100px
}
.cd-intro-block.projects-visible {
-webkit-transform: translateY(-95%);
-moz-transform: translateY(-95%);
-ms-transform: translateY(-95%);
-o-transform: translateY(-95%);
transform: translateY(-95%);
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

.cd-intro-block {
background: linear-gradient(rgba(43, 44, 47, 0.2), rgba(43, 44, 47, 0.2)), url(../images/Certification-Banner-01.png) no-repeat -120px 0px;
width: 100%;
height: 500px;
overflow: hidden;
background-position:  center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
}

.cd-intro-block h1 {
font-family: '微軟正黑體', sans-serif;
font-size: 16px;
font-weight: 300;
width:75%;
padding: 0% 22% 2% 14%;
margin-left:-7%;
text-align:justify;
line-height:25px;
}
.cd-intro-block h3 {
font-size: 20px;
font-weight: bold;
color:#000000;
width:80%;
padding: 3% 12% 2% 9%;
margin-left:-2%;
text-align:justify;
line-height:23px;
}
.cd-btn {font-size: 14px;}
.btn-wrap { margin: 20px auto }
.btn-wrap-right {margin: 0.5em 1em 0em 4.2em; text-align: left }
.cd-btn:hover { color: #fff; background-color: #666 }
.cd-btn:hover:before { background: #fff; left: 100%; width: 0 }
.cd-btn.black:hover { background-color: #bca97a }
.cd-btn2.black:hover,
.cd-btn2.greenlake:hover { background-color: #bca97a }
.btn-back:hover { letter-spacing: 1px; color: #000 }
.btn-back:hover:before { width: 30px }
}
@media only screen and (max-width: 480px) {
.cd-intro-block::after {
top: 97.5%;
}
.cd-intro-block {
background: linear-gradient(rgba(43, 44, 47, 0.2), rgba(43, 44, 47, 0.2)), url(../images/Certification-Banner-01.png);
width: 100%;
height: 500px;
overflow: hidden;
background-position:  center right;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
}
.cd-intro-block h1 {
font-size: 16px;
font-weight: 500px;
width:90%;
padding: 0% 2% 2% 4%;
text-align:justify;
line-height:23px;
}
.cd-intro-block h3 {
font-size: 20px;
font-weight: bold;
color:#000000;
width:90%;
padding: 3% 2% 2% 9%;
text-align:justify;
line-height:23px;
}
.cd-btn {
display: inline-block;
padding: 1.5em 2em;
border-radius: 0px;
background-color: transparent;
border:1px solid #000000;
margin-right:0%;
/* -----
box-shadow: 0 0px 20px rgba(238, 187, 0, 0.2), inset 0 0px 0 rgba(255, 255, 255, 0.4);
-------------------------------- */
width:160px;
color: #000000;
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
-webkit-transition: box-shadow 0.2s;
-moz-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
}

}
/* -------------------------------- 
Projects Slider
}
-------------------------------- */
.cd-projects-wrapper {
position: fixed;
z-index: 1;
top: 0;
left: 0px;
width: 100%;
height: 100%;
visibility: hidden;
background-color: #0f1926;
-webkit-transition: visibility 0s 0.5s;
-moz-transition: visibility 0s 0.5s;
transition: visibility 0s 0.5s;
}
.cd-projects-wrapper::before {
/* never visible - this is used in jQuery to check the current MQ */
content: 'mobile';
display: none;
}
.cd-projects-wrapper.projects-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
@media only screen and (min-width: 900px) {
.cd-projects-wrapper::before {
/* never visible - this is used in jQuery to check the current MQ */
content: 'desktop';
}
}
.cd-slider {
padding-top: 10vh;
height: 100%;
overflow-y: auto;
/* 認證肯定區塊左右調整 */
}
.projects-visible .cd-slider {
/* smooth scrolling on iOS */
-webkit-overflow-scrolling: touch;
}
.cd-slider li {
margin: 4%;
opacity: 0;
border-radius: .25em;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transition: opacity 0s 0.5s;
-moz-transition: opacity 0s 0.5s;
transition: opacity 0s 0.5s;
/* Force hardware acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-slider li.slides-in {
-webkit-transition: opacity 0s 0s;
-moz-transition: opacity 0s 0s;
transition: opacity 0s 0s;
opacity: 1;
-webkit-animation: cd-translate 0.5s;
-moz-animation: cd-translate 0.5s;
animation: cd-translate 0.5s;
}
.cd-slider a {
display: block;
height: 100%;
width: 100%;
}
.cd-slider img {
display: block;
border-radius: .25em .25em 0 0;
width: 100%;
opacity: .5;
}
.cd-slider .project-info {
padding: 1em 1.6em;
background-color: #ebebeb;
border-radius: 0 0 .25em .25em;
width: 100%;
/*font-family: 'Montserrat', sans-serif;*/
}
.cd-slider 
{
font-size: 20px;
font-weight: bold;
line-height: 1.2;
text-align:center;
color:#4e4e4e;
}
.cd-slider p {
font-size: 1.4rem;
opacity: .6;
padding: .4em 0;
/* truncate text with ellipsis if too long */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cd-slider h2, .cd-slider p {
line-height: .8;
color: #000000;
font-weight: bold;
}
@media only screen and (min-width: 900px) {
.cd-slider {
padding: 0;
overflow: hidden;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
/* Force hardware acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-slider::after {
clear: both;
content: "";
display: table;
}
.cd-slider li {
position: relative;
float: left;
width: 26vw;
margin: 0 0 0 2vw;
top: 50%;
-webkit-transform: translateX(400%) translateY(-50%) rotate(-10deg);
-moz-transform: translateX(400%) translateY(-50%) rotate(-10deg);
-ms-transform: translateX(400%) translateY(-50%) rotate(-10deg);
-o-transform: translateX(400%) translateY(-50%) rotate(-10deg);
transform: translateX(400%) translateY(-50%) rotate(-10deg);
-webkit-transition: opacity 0s 0.3s, -webkit-transform 0s 0.3s;
-moz-transition: opacity 0s 0.3s, -moz-transform 0s 0.3s;
transition: opacity 0s 0.3s, transform 0s 0.3s;
}
.cd-slider li:first-of-type {
margin-left: 9vw;
}
.cd-slider li.slides-in {
/* this class is used to trigger the entrance animation */
-webkit-animation: none;
-moz-animation: none;
animation: none;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.cd-slider li.slides-in:first-of-type {
/* change transition duration/delay for the entrance animation */
-webkit-transition: -webkit-transform 0.55s 0s;
-moz-transition: -moz-transform 0.55s 0s;
transition: transform 0.55s 0s;
}
.cd-slider li.slides-in:nth-of-type(2) {
-webkit-transition: -webkit-transform 0.53s 0.05s;
-moz-transition: -moz-transform 0.53s 0.05s;
transition: transform 0.53s 0.05s;
}
.cd-slider li.slides-in:nth-of-type(3) {
-webkit-transition: -webkit-transform 0.5s 0.1s;
-moz-transition: -moz-transform 0.5s 0.1s;
transition: transform 0.5s 0.1s;
}
.cd-slider li.slides-in:nth-of-type(4) {
-webkit-transition: -webkit-transform 0.48s 0.15s;
-moz-transition: -moz-transform 0.48s 0.15s;
transition: transform 0.48s 0.15s;
}
.cd-slider.next li.current {
/* next slide animation */
-webkit-animation: cd-slide-1 0.5s;
-moz-animation: cd-slide-1 0.5s;
animation: cd-slide-1 0.5s;
}
.cd-slider.next li.current + li {
-webkit-animation: cd-slide-2 0.5s;
-moz-animation: cd-slide-2 0.5s;
animation: cd-slide-2 0.5s;
}
.cd-slider.next li.current + li + li {
-webkit-animation: cd-slide-3 0.5s;
-moz-animation: cd-slide-3 0.5s;
animation: cd-slide-3 0.5s;
}
.cd-slider.next li.current + li + li + li + li {
-webkit-animation: cd-slide-4 0.5s;
-moz-animation: cd-slide-4 0.5s;
animation: cd-slide-4 0.5s;
}
.cd-slider.next li.current + li + li + li + li + li {
-webkit-animation: cd-slide-5 0.5s;
-moz-animation: cd-slide-5 0.5s;
animation: cd-slide-5 0.5s;
}
.cd-slider.next li.current + li + li + li + li + li ~ li {
-webkit-animation: cd-slide-6 0.5s;
-moz-animation: cd-slide-6 0.5s;
animation: cd-slide-6 0.5s;
}
.cd-slider.prev li {
/* previous slide animation */
-webkit-animation: cd-slide-7 0.5s;
-moz-animation: cd-slide-7 0.5s;
animation: cd-slide-7 0.5s;
}
.cd-slider.prev li.previous {
/* previous slide animation - the previous class is used to target the slide which was visible right before the current one */
-webkit-animation: cd-slide-1 0.5s;
-moz-animation: cd-slide-1 0.5s;
animation: cd-slide-1 0.5s;
}
.cd-slider.prev li.previous + li {
-webkit-animation: cd-slide-2 0.5s;
-moz-animation: cd-slide-2 0.5s;
animation: cd-slide-2 0.5s;
}
.cd-slider.prev li.previous + li + li {
-webkit-animation: cd-slide-3 0.5s;
-moz-animation: cd-slide-3 0.5s;
animation: cd-slide-3 0.5s;
}
.cd-slider.prev li.current + li {
-webkit-animation: cd-slide-4 0.5s;
-moz-animation: cd-slide-4 0.5s;
animation: cd-slide-4 0.5s;
}
.cd-slider.prev li.current + li + li {
-webkit-animation: cd-slide-5 0.5s;
-moz-animation: cd-slide-5 0.5s;
animation: cd-slide-5 0.5s;
}
.cd-slider.prev li.current, .cd-slider.prev li.current + li + li ~ li {
-webkit-animation: none;
-moz-animation: none;
animation: none;
}
}
@-webkit-keyframes cd-slide-1 {
0%, 100% {
-webkit-transform: translateY(-50%);
}
50% {
-webkit-transform: translateY(-50%) translateX(-85%);
}
}
@-moz-keyframes cd-slide-1 {
0%, 100% {
-moz-transform: translateY(-50%);
}
50% {
-moz-transform: translateY(-50%) translateX(-85%);
}
}
@keyframes cd-slide-1 {
0%, 100% {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
50% {
-webkit-transform: translateY(-50%) translateX(-85%);
-moz-transform: translateY(-50%) translateX(-85%);
-ms-transform: translateY(-50%) translateX(-85%);
-o-transform: translateY(-50%) translateX(-85%);
transform: translateY(-50%) translateX(-85%);
}
}
@-webkit-keyframes cd-slide-2 {
0%, 100% {
-webkit-transform: translateY(-50%);
}
50% {
-webkit-transform: translateY(-50%) translateX(-55%);
}
}
@-moz-keyframes cd-slide-2 {
0%, 100% {
-moz-transform: translateY(-50%);
}
50% {
-moz-transform: translateY(-50%) translateX(-55%);
}
}
@keyframes cd-slide-2 {
0%, 100% {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
50% {
-webkit-transform: translateY(-50%) translateX(-55%);
-moz-transform: translateY(-50%) translateX(-55%);
-ms-transform: translateY(-50%) translateX(-55%);
-o-transform: translateY(-50%) translateX(-55%);
transform: translateY(-50%) translateX(-55%);
}
}
@-webkit-keyframes cd-slide-3 {
0%, 100% {
-webkit-transform: translateY(-50%);
}
50% {
-webkit-transform: translateY(-50%) translateX(-23%);
}
}
@-moz-keyframes cd-slide-3 {
0%, 100% {
-moz-transform: translateY(-50%);
}
50% {
-moz-transform: translateY(-50%) translateX(-23%);
}
}
@keyframes cd-slide-3 {
0%, 100% {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
50% {
-webkit-transform: translateY(-50%) translateX(-23%);
-moz-transform: translateY(-50%) translateX(-23%);
-ms-transform: translateY(-50%) translateX(-23%);
-o-transform: translateY(-50%) translateX(-23%);
transform: translateY(-50%) translateX(-23%);
}
}
@-webkit-keyframes cd-slide-4 {
0%, 100% {
-webkit-transform: translateY(-50%);
}
50% {
-webkit-transform: translateY(-50%) translateX(23%);
}
}
@-moz-keyframes cd-slide-4 {
0%, 100% {
-moz-transform: translateY(-50%);
}
50% {
-moz-transform: translateY(-50%) translateX(23%);
}
}
@keyframes cd-slide-4 {
0%, 100% {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
50% {
-webkit-transform: translateY(-50%) translateX(23%);
-moz-transform: translateY(-50%) translateX(23%);
-ms-transform: translateY(-50%) translateX(23%);
-o-transform: translateY(-50%) translateX(23%);
transform: translateY(-50%) translateX(23%);
}
}
@-webkit-keyframes cd-slide-5 {
0%, 100% {
-webkit-transform: translateY(-50%);
}
50% {
-webkit-transform: translateY(-50%) translateX(55%);
}
}
@-moz-keyframes cd-slide-5 {
0%, 100% {
-moz-transform: translateY(-50%);
}
50% {
-moz-transform: translateY(-50%) translateX(55%);
}
}
@keyframes cd-slide-5 {
0%, 100% {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
50% {
-webkit-transform: translateY(-50%) translateX(55%);
-moz-transform: translateY(-50%) translateX(55%);
-ms-transform: translateY(-50%) translateX(55%);
-o-transform: translateY(-50%) translateX(55%);
transform: translateY(-50%) translateX(55%);
}
}
@-webkit-keyframes cd-slide-6 {
0%, 100% {
-webkit-transform: translateY(-50%);
}
50% {
-webkit-transform: translateY(-50%) translateX(65%);
}
}
@-moz-keyframes cd-slide-6 {
0%, 100% {
-moz-transform: translateY(-50%);
}
50% {
-moz-transform: translateY(-50%) translateX(65%);
}
}
@keyframes cd-slide-6 {
0%, 100% {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
50% {
-webkit-transform: translateY(-50%) translateX(65%);
-moz-transform: translateY(-50%) translateX(65%);
-ms-transform: translateY(-50%) translateX(65%);
-o-transform: translateY(-50%) translateX(65%);
transform: translateY(-50%) translateX(65%);
}
}
@-webkit-keyframes cd-slide-7 {
0%, 100% {
-webkit-transform: translateY(-50%);
}
50% {
-webkit-transform: translateY(-50%) translateX(-95%);
}
}
@-moz-keyframes cd-slide-7 {
0%, 100% {
-moz-transform: translateY(-50%);
}
50% {
-moz-transform: translateY(-50%) translateX(-95%);
}
}
@keyframes cd-slide-7 {
0%, 100% {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
50% {
-webkit-transform: translateY(-50%) translateX(-95%);
-moz-transform: translateY(-50%) translateX(-95%);
-ms-transform: translateY(-50%) translateX(-95%);
-o-transform: translateY(-50%) translateX(-95%);
transform: translateY(-50%) translateX(-95%);
}
}
/* -------------------------------- 
Project slider navigation
-------------------------------- */
.cd-slider-navigation {
display: none;
}
.cd-slider-navigation a {
position: absolute;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
height: 60px;
width: 4%;
background: url(../img/cd-arrow.svg) no-repeat center center;
-webkit-transition: opacity 0.2s 0s, visibility 0s 0s;
-moz-transition: opacity 0.2s 0s, visibility 0s 0s;
transition: opacity 0.2s 0s, visibility 0s 0s;
}
.cd-slider-navigation a.next {
right: 0;
left: auto;
}
.cd-slider-navigation a.prev {
-webkit-transform: translateY(-50%) rotate(180deg);
-moz-transform: translateY(-50%) rotate(180deg);
-ms-transform: translateY(-50%) rotate(180deg);
-o-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
.cd-slider-navigation a.inactive {
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
-moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
@media only screen and (min-width: 900px) {
.cd-slider-navigation {
display: block;
}
}
/* -------------------------------- 
Project content panel 
-------------------------------- */
.cd-project-content {
/*font-family: 'Montserrat', sans-serif;*/
position: fixed;
z-index: 3;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
background-color: #ebebeb;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s 0s, visibility 0s 0.4s;
-moz-transition: -moz-transform 0.4s 0s, visibility 0s 0.4s;
transition: transform 0.4s 0s, visibility 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.67, 0.15, 0.83, 0.83);
-moz-transition-timing-function: cubic-bezier(0.67, 0.15, 0.83, 0.83);
transition-timing-function: cubic-bezier(0.67, 0.15, 0.83, 0.83);
}
.cd-project-content > div {
height: 100%;
overflow-y: auto;
padding: 4em 2em;
}
.cd-project-content > div > * {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.cd-project-content.is-visible {
visibility: visible;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.4s 0s, visibility 0s 0s;
-moz-transition: -moz-transform 0.4s 0s, visibility 0s 0s;
transition: transform 0.4s 0s, visibility 0s 0s;
-webkit-transition-timing-function: cubic-bezier(0.67, 0.15, 0.83, 0.83);
-moz-transition-timing-function: cubic-bezier(0.67, 0.15, 0.83, 0.83);
transition-timing-function: cubic-bezier(0.67, 0.15, 0.83, 0.83);
}
.cd-project-content.is-visible > div {
/* smooth scrolling on iOS */
-webkit-overflow-scrolling: touch;
}
.cd-project-content h2 {
font-size: 20px;
font-weight: bold;
}
.cd-project-content em {
display: block;
font-size: 1.8rem;
font-style: italic;
margin: 1em auto;
}
.cd-project-content p {
margin-bottom: 1em;
font-size: 15px;
color: #000000;
}
.cd-project-content a {
color: #000000;
font-size: 15px;
}
.cd-project-content a:hover {
color: #1F9ED2;
font-weight:600px
}
.cd-project-content em, .cd-project-content p {
line-height: 1.6;
}
.cd-project-content .close {
display: block;
height: 32px;
width: 32px;
position: absolute;
top: 10px;
right: 10px;
background: url(../img/cd-close-dark.svg) no-repeat center center;
}
@media only screen and (min-width: 900px) {
.cd-project-content h2 {
font-size: 28px;
}
.cd-project-content em {
font-size: 2.4rem;
}
.cd-project-content p {
font-size: 15px;
}
.cd-project-content .close {
top: 30px;
right: 5%;
}
}
/* -------------------------------- 
Keyframes
-------------------------------- */
@-webkit-keyframes cd-translate {
0% {
opacity: 0;
-webkit-transform: translateY(100px);
}
100% {
-webkit-transform: translateY(0);
opacity: 1;
}
}
@-moz-keyframes cd-translate {
0% {
opacity: 0;
-moz-transform: translateY(100px);
}
100% {
-moz-transform: translateY(0);
opacity: 1;
}
}
@keyframes cd-translate {
0% {
opacity: 0;
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
}
100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}