/*
 Theme Name:     Divi Child Max
 Theme URI:      https://max.com.tw
 Description:    Divi Child Theme
 Author:         max
 Author URI:     https://max.com.tw
 Template:       Divi
 Version:        2.1
*/
/*--- Custom CSS Style ---*/

/*** image scrolling ***/
.image-bg-1 {
				margin:0;
				padding:0;
				background-image: url("https://wordpress.blog.tw/images/imac_480x_01.png");
				background-repeat: no-repeat;
				display: inline-block;
				height: 404px;
				padding-top: 0px;
				position: relative;
				width: 480px;
			}
			.image-bg-1:hover .image-show-scroll {
				background-position: center 100% !important;
			}
			.image-bg-1 .image-show-scroll {
				transition: all 8s ease-out 0s;
			}
			.image-bg-1 .image-show-scroll {
				background-position: center 0;
				background-repeat: no-repeat;
				height: 247px;
				top: 20px;
				left: 0px;
				margin-bottom: 20px;
				overflow: hidden;
				position: absolute;
				width: 100%;
}

.image-bg-2 {
				margin:0;
				padding:0;
				background-image: url("https://wordpress.blog.tw/images/macbook_640x362.png");
				background-repeat: no-repeat;
				display: inline-block;
				height: 362px;
				padding-top: 0px;
				position: relative;
				width: 640px;
			}
			.image-bg-2:hover .image-show-scroll {
				background-position: center 100% !important;
			}
			.image-bg-2 .image-show-scroll {
				transition: all 5s ease-out 0s;
			}
			.image-bg-2 .image-show-scroll {
				background-position: center 0;
				background-repeat: no-repeat;
				height: 264px;
				left: 0;
				top: 22px;
				margin-bottom: 20px;
				overflow: hidden;
				position: absolute;
				width: 100%;
}

/*** image hover ***/

.image-container:hover {
    -webkit-transition: background-position 4.5s linear 0s;
    -moz-transition: background-position 4.5s linear 0s;
    transition: background-position 4.5s linear 0s;
    background-position: center bottom;
}
.image-container {
    min-height: 415px;
    display: block;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: relative;
    -webkit-transition: background-position 0.8s linear 0s;
    -moz-transition: background-position 0.8s linear 0s;
    transition: background-position 0.8s linear 0s;
}

/*** button style ***/
.m-btn1 {
  background: #2195f3;
  background-image: -webkit-linear-gradient(top, #2195f3, #1975d2);
  background-image: -moz-linear-gradient(top, #2195f3, #1975d2);
  background-image: -ms-linear-gradient(top, #2195f3, #1975d2);
  background-image: -o-linear-gradient(top, #2195f3, #1975d2);
  background-image: linear-gradient(to bottom, #2195f3, #1975d2);
  -webkit-border-radius: 2;
  -moz-border-radius: 2;
  border-radius: 2px;
  text-shadow: 1px 1px 3px #666666;
  -webkit-box-shadow: 1px 3px 6px #666666;
  -moz-box-shadow: 1px 3px 6px #666666;
  box-shadow: 1px 3px 6px #666666;
  font-family: Microsoft JhengHei, Georgia;
  color: #ffffff !important;
  font-size: 24px;
  padding: 20px;
  text-decoration: none;
}

.m-btn1:hover {
  background: #1975d2;
  background-image: -webkit-linear-gradient(top, #1975d2, #2196F3);
  background-image: -moz-linear-gradient(top, #1975d2, #2196F3);
  background-image: -ms-linear-gradient(top, #1975d2, #2196F3);
  background-image: -o-linear-gradient(top, #1975d2, #2196F3);
  background-image: linear-gradient(to bottom, #1975d2, #2196F3);
  text-decoration: none;
}

.m-btn2 {
  background: #ff5252;
  background-image: -webkit-linear-gradient(top, #ff5252, #e91e62);
  background-image: -moz-linear-gradient(top, #ff5252, #e91e62);
  background-image: -ms-linear-gradient(top, #ff5252, #e91e62);
  background-image: -o-linear-gradient(top, #ff5252, #e91e62);
  background-image: linear-gradient(to bottom, #ff5252, #e91e62);
  -webkit-border-radius: 2;
  -moz-border-radius: 2;
  border-radius: 2px;
  text-shadow: 1px 1px 3px #666666;
  -webkit-box-shadow: 1px 3px 6px #666666;
  -moz-box-shadow: 1px 3px 6px #666666;
  box-shadow: 1px 3px 6px #666666;
  font-family: Microsoft JhengHei, Georgia;
  color: #ffffff !important;
  font-size: 24px;
  padding: 20px;
  text-decoration: none;
}

.m-btn2:hover {
  background: #E91E63;
  background-image: -webkit-linear-gradient(top, #E91E63, #FF5252);
  background-image: -moz-linear-gradient(top, #E91E63, #FF5252);
  background-image: -ms-linear-gradient(top, #E91E63, #FF5252);
  background-image: -o-linear-gradient(top, #E91E63, #FF5252);
  background-image: linear-gradient(to bottom, #E91E63, #FF5252);
  text-decoration: none;
}

/*** button style 2 ***/
/*** button div ***/
#mx-buttons {
  padding-top: 50px;
  text-align: center;
}

/*** button css ***/
.mx-btn {
  border-radius: 5px;
  padding: 15px 25px;
  font-size: 22px;
  text-decoration: none;
  margin: 20px;
  color: #ffffff !important;
  position: relative;
  display: inline-block;
}

.mx-btn:active {
  transform: translate(0px, 5px);
  -webkit-transform: translate(0px, 5px);
  box-shadow: 0px 1px 0px 0px;
}

.blue {
  background-color: #55acee;
  box-shadow: 0px 5px 0px 0px #3C93D5;
}

.blue:hover {
  background-color: #6FC6FF;
}

.red {
  background-color: #e74c3c;
  box-shadow: 0px 5px 0px 0px #CE3323;
}

.red:hover {
  background-color: #FF6656;
}

/*** content link color ***/
.post-wrap a{
color:#E91E63;
  -o-transition:color 2s ease-out, background 2s ease-in;
  -ms-transition:color 2s ease-out, background 2s ease-in;
  -moz-transition:color 2s ease-out, background 2s ease-in;
  -webkit-transition:color 2s ease-out, background 2s ease-in;
  transition:color 2s ease-out, background 2s ease-in;
}
.post-wrap a:hover { 
color:#E91E63; background:#FFF79D;
}