/*+++++++++++++++++++++
=====================================
 days.css : 
====================================
------------------------------------
	1. Title
	2. Portfolio
	3. Isotope
	4. Portfolio Hover effect
  5. pf_content
  )
-------------------------------------
=====================================
*/

/*======================
======Title=====
========================*/
.title_cooking h2 {font-size: 28px; font-weight: 400;}

.title_cooking {padding:60px 0 0px;}

.title-Cdays {background: url(../img/common/border01.png) repeat-x center center; }
span.Cdays {padding: 0 20px; background:url(../img/common/bg_01.jpg) repeat; text-transform: none; color:#444;}

/*======================
======Portfolio CSS=====
========================*/

.intro {text-align: center; margin: 3rem 0 1.5rem;}

#portfolio {
  padding-top:0px;
  padding-bottom: 10px;
}


#portfolio 
.portfolio-filter {
  margin-bottom:0px;
  margin-top:10px;
  padding: 0;
}

#portfolio 
.portfolio-filter li {
  display: inline-block;
}

#portfolio 
.portfolio-filter li a:hover, 
#portfolio 
.portfolio-filter li a:focus,
#portfolio 
.portfolio-filter li a:active , 
#portfolio 
.portfolio-filter li .active{
  border: 1px solid #fc7700;
  color: #686868;
  box-shadow: none;
  -webkit-box-shadow: none;
  opacity: 1;
}

#portfolio 
.portfolio-filter li a {
  color: #686868;
  font-size: 16px;
  text-transform: uppercase;
  border: none;
  background: rgba(67, 72, 78, 0);
  opacity: .8;
  border: 1px solid rgba(252, 119, 0, 0);
  border-radius: inherit;
}

.portfolio-items > div{
  padding:20px;
}

.portfolio-item h1{
  text-align: center;
  font-size: 0.95em;
  margin: 10px auto 0;
  color: #222}

.portfolio-item  .ddmmyy {font-size: 1.2rem; padding: 1rem 0 0 ; text-align: center;}

.portfolio-item .text {
  text-align: left;
  color: #666;
  margin: 0 auto 1rem;
  font-size: 13px;
}

.portfolio-items img{
  width:100%;
}

.view {  
  cursor: default;
  height: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  width:100%;
}

.efffect h4 {  
  opacity: 0;
  transform: scale(0);
  transition: all 0.5s linear 0s;
}

.efffect h3 {
  opacity: 0;
  transform: scale(0);
  -webkit-transition: all 0.5s linear 0s;
  -moz-transition: all 0.5s linear 0s;
  -ms-transition: all 0.5s linear 0s;
  -o-transition: all 0.5s linear 0s;
  transition: all 0.5s linear 0s;
}

.efffect img {
  transform: scaleY(1);
  -moz-transform: scaleY(1);
  -webkit-transform: scaleY(1);
  -o-transform: scaleY(1);
  -ms-transform: scaleY(1);  
  transition: all 0.7s ease-in-out 0s;
  -moz-transition: all 0.7s ease-in-out 0s;
  -webkit-transition: all 0.7s ease-in-out 0s;
  -o-transition: all 0.7s ease-in-out 0s;
}

.view img {
  display: block;
  position: relative;
}

.efffect .mask {
  background-color: #F6F6F6;
    border:4px solid #333333;
  -webkit-transition: all 0.5s linear 0s;
  -moz-transition: all 0.5s linear 0s;
  -ms-transition: all 0.5s linear 0s;
  -o-transition: all 0.5s linear 0s;
  transition: all 0.5s linear 0s;
  opacity: 0
}

.view .mask, .view .content {
  height:100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width:100%;
}

.mask h3 {
  color: #43484E;
  font-family: cabin;
  font-size: 22px;
  font-weight: 700;
  margin-top: 30px;
  text-transform: uppercase;
  transition: height 500ms ease 0s;
}

.mask h4 {
  color:#000;
  font-family: roboto;
  font-size: 14px;
  font-weight: 200;
  padding: 0 35px 5px;
}

.mask i {
  border: 2px solid #333;
  border-radius: 50%;
  color: #333;
  font-size: 17px;
  margin-left: 8px;
  padding: 8px;
}

.mask i:hover{
  background-color:#fc7700;
  color:#fff;  
}



/*==================================
====== Isotope Recommended CSS=====
====================================*/

/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}
/* End: Recommended Isotope styles */


/*==================================
====== Portfolio Hover effect=======
====================================*/


.efffect img {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   /*transform: scaleY(1);*/
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.efffect .mask {
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   cursor: zoom-in;
}
.efffect h4 {   
   background: transparent;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.efffect h3 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   font-size:22px;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.mask a i {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform:rotate(-180deg);
   -moz-transform:rotate(-180deg);
   -o-transform:rotate(-180deg);
   -ms-transform:rotate(-180deg);
   transform:rotate(-180deg);
   -webkit-transition:all 0.5s linear 0.7s;
   -moz-transition: all 0.5s linear 0.7s;
   -o-transition:all 0.5s linear 0.7s;
   -ms-transition:all 0.5s linear 0.7s;
   transition:all 0.5s linear 0.7s;
}
.efffect:hover img {
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -o-transform: scale(1.2);
   -ms-transform: scale(1.2);
   transform: scale(1.2);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   /*filter: alpha(opacity=0);
   opacity: 0;*/
}
.efffect:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.efffect:hover h4,.efffect:hover h3,.efffect:hover a i {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}

/*==================================
====== pf_content　　　　　　　=======
====================================*/

#pf_content{padding-bottom: 3rem;}

#pf_content .bread {margin: 0; padding: 0 0 1rem 2rem;font-size: 1.2rem;}

#pf_content h1 {font-size: 2rem; padding: 2rem 0 1rem;}

#pf_content .ddmmyy {font-size: 1.2rem; padding: 1rem 0 ;}

/*==================================
====== link button　　　　　　=======
====================================*/

.button {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  height: 36px;
  line-height: 36px;
  outline: none;
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}


.button_1 {
  background-color: #669933;
  border: 2px solid #669933;
  color: #fff;
  font-size:14px;
  margin:1rem;
  width: 150px;
}
.button_1:hover {
  background-color: #fff;
  border-color: #669933;
  color: #669933;
  text-decoration:none;
}

.button_2 {
  background-color: #900020;
  border: 2px solid #900020;
  color: #fff;
  font-size:14px;
  margin:1rem;
  width: 150px;
}
.button_2:hover {
  background-color: #fff;
  border-color: #900020;
  color: #900020;
  text-decoration:none;
}

@media (max-width: 359px) {
.button_2 {
  font-size:12px;
  width: 150px;
}
}