/*
CKstudio website
Author:Kuan-Lin Chiu

File Description: custom CSS styles
*/

/* credits text */
.small {
    font-size: 9px;
    font-weight: 300;
    float: left;
}

/* thumbnail stack*/

.thumbnail-stack-sm {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 250px;
  vertical-align: middle;
  display:block; 
}
/* the images */
.thumbnail-stack-sm img { 
  position: absolute;
  left: 50%;
  top: 50%;
  border: 5px solid #f3f3f3;
  box-shadow: 1px 1px 2px #666;
  width: 200px;
  margin-left: -100px;
  height: auto;
  display: block;
  transition: all .3s ease-in-out;
  -webkit-transform : translateY(-50%); 
  -ms-transform : translateY(-50%);
  transform : translateY(-50%);
}

.thumbnail-stack {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 350px;
  vertical-align: middle;
  display:block; 
}

/* the images */
.thumbnail-stack img { 
  position: absolute;
  left: 50%;
  top: 50%;
  border: 5px solid #f3f3f3;
  box-shadow: 1px 1px 2px #666;
  width: 400px;
  margin-left: -200px;
  height: auto;
  display: block;
  transition: all .3s ease-in-out;
  -webkit-transform : translateY(-50%); 
  -ms-transform : translateY(-50%);
  transform : translateY(-50%);
}

/* first image animation properties */
.thumbnail-stack:hover .photo1, .thumbnail-stack:focus .photo1,
.thumbnail-stack-sm:hover .photo1, .thumbnail-stack-sm:focus .photo1 {
    transform: rotate(-6deg) translate(-100px, -100px) scale(1.1);
}
/* third image animation properties */
.thumbnail-stack:hover .photo2, .thumbnail-stack:focus .photo2,
.thumbnail-stack-sm:hover .photo2, .thumbnail-stack-sm:focus .photo2 {
    transform: rotate(-3deg) translate(-50px, -150px) scale(1.1);
}
/* second image animation properties */
.thumbnail-stack:hover .photo3, .thumbnail-stack:focus .photo3,
.thumbnail-stack-sm:hover .photo3, .thumbnail-stack-sm:focus .photo3 {
    transform: rotate(0deg) translate(0, -180px) scale(1.1);
}
/* third image animation properties */
.thumbnail-stack:hover .photo4, .thumbnail-stack:focus .photo4,
.thumbnail-stack-sm:hover .photo4, .thumbnail-stack-sm:focus .photo4 {
    transform: rotate(6deg) translate(100px, -100px) scale(1.1);
}
/* third image animation properties */
.thumbnail-stack:hover .photo5, .thumbnail-stack:focus .photo5,
.thumbnail-stack-sm:hover .photo5, .thumbnail-stack-sm:focus .photo5 {
    transform: rotate(3deg) translate(50px, -150px) scale(1.1);
}


/* Fixed YT video 100% width with missing height */
.yt-wrapper {
    position: relative;
    padding-bottom: 65%; /* 56.25% 16:9 */
    padding-top: 25px;
    height: 0; /* padding to be space as container*/
}
.yt-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*Fix the bootstap button change color when stay focus*/
.image-box .btn-default:focus,
.image-box .btn-default.focus,
.image-box .btn-default:active,
.image-box .btn-default.active {
    background-color: white;
}

.image-box .btn-default:hover {
    color: #ffffff;
    background-color: #339BEB;
    border-color: #339BEB;
}

/* Y align middle */
.modal-dialog {
    position: relative;
    top: 100px;
    z-index: 6;
}

/* Y align img hack*/
.vertical-helper {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.overlay-container img {
    vertical-align: middle;
    display: inline-block;
}

/*image overlay scale*/
.image-box .overlay-container img {
    height: 100%;
    transform: scale(1, 1);
    transition-duration: 2000ms;
    transition-timing-function: ease-out;
    width: 100%;
}
.image-box:hover .overlay-container img {
    position: relative;
    transform: scale(1.15, 1.15);
    transition-duration: 1500ms;
    transition-timing-function: ease-out;
}

/*fix right align of Skill section*/
.media-body {
    width: 100%;
}

.country .media-body {
    width: 80%;
}

.item-title {
    color: #759C8A;
    border-bottom: 1px solid #CCC;
    padding-bottom: 5px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 20px;
    margin-top: 14px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.item-caption {
    color: #777;
    font-size: 14px;
    font-weight: 700;
}

.item-caption span {
    color: #777;
}

.item-add {
    color: #777;
    font-size: 14px;
    font-style: italic;
    font-weight: 200;
}

/*text weight*/
.text-bold {
    font-size: 120%;
    font-weight: 300;
}

/*Map*/
#world-map {
    width: 100%;
}

@media (max-width: 640px) {
    #world-map {
        height: 400px;
    }
}

@media (max-height:480px) and (min-width: 640px) {
    #world-map {
        height: 360px;
    }
}

@media (min-height:480px) and (max-height:768px) and (min-width: 640px) {
    #world-map {
        height: 550px;
    }
}

@media (min-height:768px) and (min-width: 640px) {
    #world-map {
        height: 800px;
    }
}

/*Banner BG order*/
.bg-fixed {
    padding-top: 0px;
    position: fixed;
    z-index: -1;
}

/*Smaller logo*/
#logo {
    max-height: 60px;
	/* width: 80%; */
    min-width: 80px;
}

/*3D roll effect on navbar buttons*/
.roll {
    display: inline-block;
    overflow: hidden;
    perspective: 400px;
    perspective-origin: 50% 50%;
    position: relative;
    transform-style: preserve-3d;
    vertical-align: top;
    z-index: 200;
}
.roll span {
    display: block;
    overflow: hidden;
    padding: 0 2px;
    pointer-events: none;
    position: relative;
    transform-origin: 50% 0 0;
    transform-style: preserve-3d;
    transition: all 400ms ease 0s;
}
a.roll:hover span {
    overflow: visible;
    transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}
.roll span::after {
    background: #fff none repeat scroll 0 0;
    color: #424b51;
    content: attr(data-title);
    display: block;
    left: 0;
    padding: 0 2px;
    position: absolute;
    top: 1px;
    transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
    transform-origin: 50% 0 0;
}

/*Banner deco Icon*/

.demo .deco {
    width: 200px;
    height: 200px;
    border: 2px dashed #ddd;
    border: 2px dashed rgba(150,150,150,0.4);
    border-radius: 50%;
    position: absolute;
    bottom: 110%;
    left: 50%;
    margin: 0 0 0 -100px;
}

.demo [data-icon]:after {
    content: attr(data-icon);
    font-family: 'AnimalsNormal';
    color: #c1c1c1;
    text-shadow: 0 0 2px #999;
    position: absolute;
    width: 180px;
    height: 180px;
    line-height: 180px;
    text-align: center;
    font-size: 90px;
    top: 50%;
    left: 50%;
    margin: -90px 0 0 -90px;
    box-shadow: inset 0 0 0 8px #f7f7f7;
    border-radius: 50%;
}

/* Navbar breakpoint fix for Bootstrap3 */
@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
        margin: 25px 0;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
  }