/*
 * Start Bootstrap - One Page Wonder (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

body {
	font-family: 'cwTeXYen', sans-serif;    
}

.header-image {
    display: block;
    width: 100%;
    text-align: center;
    /*background: url('../img/header.png') no-repeat center center scroll;*/
	background-color:white;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.headline {
    padding: 5px;
	border-top-style:solid;
	border-width: 10px 0 0 0;
	border-color:#EEEE00;
}

.headline h1 {
    font-size: 40px;
	text-shadow: 2px 2px 3px #434a54;
}

.featurette-heading{
	border-left-style:solid;
	border-color:#FF6D24;
	border-width:5px;
	padding-left:5px;
	margin-bottom:10px;
}
.featurette-divider {
        margin: 40px 0;
}

footer {
    margin: 50px 0;
}

#fblink {
    position: fixed;
    top: 250px;
    left: -15px;
    padding: 10px 20px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    z-index: 999;
}
#fblink  img{
	width:50px;
	opacity: 0.3;
}
#fblink  img:hover{
	opacity: 0.8;	
	transition: all ease 0.5s;
}

#iglink {
    position: fixed;
    top: 305px;
    left: -15px;
    padding: 10px 20px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    z-index: 999;
}
#iglink  img{
	width:50px;	
	opacity: 0.3;
}
#iglink  img:hover{
	opacity: 0.8;	
	transition: all ease 0.5s;
}

#totop {
    position: fixed;
    bottom: 25px;
    right: 0px;
    padding: 10px 20px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    z-index: 999;
}
#totop  span{
	font-size:50px;
	color:rgba(102, 102, 102, 0.6);
}
#totop  span:hover{
	color:rgba(102, 102, 102, 0.9);
	transition: all ease 0.5s;
}

@media(max-width:768px) {
    .container {
        margin: 0 15px;
    }

    .featurette-divider {
        margin: 40px 0;
    }

    .featurette-heading {
        font-size: 25px;
    }
}


.glyphicon.glyphicon-zoom-in{
	font-size: 60px;
}
.portfolioDescription{
	margin-top: 6px;
	font-size:20px;
	text-align:center;
}
.modal-body p {
	font-size:24px;	
}
.modal-body li {
	font-size:16px;	
}
/*navbar*/
.navbar{
	background-color:rgba(255, 255, 255, 0.95);
	border-color:rgba(24, 188, 156, 0);
	border-bottom-style:solid;
	border-color:#C7C7C7;
}
.navbar-inverse .navbar-nav>li>a {
    color: #666666;
}
.navbar-inverse .navbar-nav>li>a:hover {
    background-color: #C7C7C7;
	transition: all ease 0.5s;
}
.navbar-inverse .navbar-brand {
	display:none;
    color: #666666;
}
.navbar-inverse .navbar-brand:hover {
    background-color: #C7C7C7;
	transition: all ease 0.5s;
}
.navbar-inverse .navbar-toggle {
    border-color: #C7C7C7;
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: #C7C7C7;
}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
    background-color: #C7C7C7;
	transition: all ease 0.5s;
}
.navbar-inverse .navbar-nav>li>a.active {
	color:white;
    background-color: #FF6D24;
}

@media(max-width:768px) {
.navbar{
	background-color:#C7C7C7;
	border-color:rgba(24, 188, 156, 0);
}
.navbar-inverse .navbar-nav>li>a {
    color: white;
}
.navbar-inverse .navbar-nav>li>a:hover {
    background-color: #666666;
	transition: all ease 0.5s;
}
.navbar-inverse .navbar-brand {
    color: white;
}
.navbar-inverse .navbar-brand:hover {
    background-color: #666666;
	transition: all ease 0.5s;
}
.navbar-inverse .navbar-nav>li>a.active {
	color:white;
    background-color: #B3B3B3;
}

}
/**/

section {
  padding: 0px 0;
}
section h2 {
  margin-bottom:15px;
  font-size: 3em;
}
section.success {
  background: #5D92B1;
  color: white;
}
@media (max-width: 767px) {
  section {
    padding: 0px 0;
  }
  section.first {
    padding-top: 75px;
  }
}

#portfolio .portfolio-item {
  margin: 0 0 15px;
  right: 0;
}
#portfolio .portfolio-item .portfolio-link {
  display: block;
  position: relative;
  max-width: 400px;
  margin: 0 auto;
}
#portfolio .portfolio-item .portfolio-link .caption {
  background: rgba(24, 188, 156, 0.9);
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
}
#portfolio .portfolio-item .portfolio-link .caption:hover {
  opacity: 1;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content {
  position: absolute;
  width: 100%;
  height: 20px;
  font-size: 20px;
  text-align: center;
  top: 50%;
  margin-top: -12px;
  color: white;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content i {
  margin-top: -12px;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content h3,
#portfolio .portfolio-item .portfolio-link .caption .caption-content h4 {
  margin: 0;
}
#portfolio * {
  z-index: 2;
}
@media (min-width: 767px) {
  #portfolio .portfolio-item {
    margin: 0 0 30px;
  }
}
.modal-content {
	background-color:rgba(255, 255, 255, 0.9);
}
.portfolio-modal .modal-content {
  border-radius: 0;
  background-clip: border-box;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  min-height: 100%;
  padding: 100px 0;
  text-align: center;
}
.portfolio-modal .modal-content h2 {
  margin: 0;
  font-size: 3em;
}
.portfolio-modal .modal-content img {	
  width:100%;
  margin-bottom: 30px;
}
.portfolio-modal .modal-content .item-details {
  margin: 30px 0;
}
.portfolio-modal .close-modal {
  position: absolute;
  width: 75px;
  height: 75px;
  background-color: transparent;
  top: 25px;
  right: 25px;
  cursor: pointer;
}
.portfolio-modal .close-modal:hover {
  opacity: 0.3;
}
.portfolio-modal .close-modal .lr {
  height: 75px;
  width: 1px;
  margin-left: 35px;
  background-color: #5D92B1;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Safari and Chrome */
  z-index: 1051;
}
.portfolio-modal .close-modal .lr .rl {
  height: 75px;
  width: 1px;
  background-color: #5D92B1;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Safari and Chrome */
  z-index: 1052;
}
.portfolio-modal .modal-backdrop {
  opacity: 0;
  display: none;
}


/*gallery*/
.card-container {	
  border-radius: 6px;
  margin:5px;
  position: relative;
  height: 200px;
  max-width: 250px;
  border-style:solid;
  border-width:0px;
  border-color:gray;
  margin:25px auto;
}
.link{
	color:white;
	font-size:24px;
	position:absolute;
	bottom:-60px;
	left:0px;
	width:100%;
	height:50%;
	background: rgba(0,0,0,0.6);
	padding:5px;
	transition: all 0.6s ease-in-out;
}
.date{
	font-weight:bold;
	width:10em;
	height:3em;
	color:#FFE7DB;
	background-color:#F17232;
	text-align:center;
	text-decoration:none;
	transform: rotate(30deg);
	position:absolute;
	padding-top:7%;
	right:-22%;
	top:-5%;
	transition: all 0.3s linear 0.3s;
}
.card {
  height: 100%;
  position: absolute;
  width: 100%;
  cursor:pointer;
}
.card:hover .side{  
  overflow: hidden;
  transform: rotate(0deg);
  transform: scale(1.2,1.2);
  opacity: 0.5;
}
.card:hover .link{
	bottom:0px;
}
.card:hover .date{
	transform:translate(50px,-50px);
}

.side{	
  z-index:-1;
  width:400px;
  height:300px;
  transform: rotate(30deg);
  position: absolute;
  top:-20px;
  left:-75px;
  transition: transform 1s ease-in-out;
}
.card {
  border-radius: 6px;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.note{
	border-radius:5px;
	padding:0px 0px;
	max-width:600px;
	height:35px;
	font-size:24px;
	transition: all 0.3s linear;
	border-bottom:1px;
	border-right:1px;
	border-style:solid;
	border-color:#4F4F4F;
	margin-bottom:5px;
}
.note:hover{
	background-color:#FFF3EE;
	cursor:pointer;
}
.note a{
	color:#4F4F4F;
	text-decoration:none;
}
.note .note_date{
	color:white;
	font-size:12px;
	background-color:#4F4F4F;
	display:inline;
	height:100%;
	border-radius:3px;
	padding:3px;
	top:-12px;
	left:-1px;
	position:relative;
	margin-right:5px;
}