/*
 * %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 *
 * Template Name: Dialia - Registered Massage Therapy HTML Template   
 * Template URI: https://thememarch.com/demo/html/dialia/
 * Description: Dialia is a registered massage therapy HTML template which comes with the unique and clean design. It helps you to create a beautiful massage therapy HTML website. It's a fully responsive website template. It has also e-commerce support. E-commerce pages are included on this template.
 * Author: Thememarch
 * Author URI: https://thememarch.com
 * Version: 2.0
 *
 * %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 */
 .heroslider-content h1{
    color:white;
 }
 .heroslider-content p{
    color:white;
 }
 .img-fluid{
    width: 100%;
    max-height:500px;
 }
 .tm-detail-top{
     height:500px;
 }
 .modal-dialog {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: calc(100% - 1rem);
        }
        .modal-content {
            width: 100%;
            max-width: 500px;
        }
 .logo{
     height:100px;
 }
 @media(max-width:560px){
     .logo{
         height:auto;
     }
     .header-topbutton{
         display:none;
     }
 }
 @media only screen and (max-width: 480px) {
    .header-logo {
        max-width: 200px !important;
    }
    .footer-logo {
            width: 100%;
            height: auto;
    }
     .tm-detail-top{
     height:300px;
 }
 .footer-logo img{
     width:100%;
     padding:20px;
 }
}

.animated.infinite {    -webkit-animation-iteration-count: infinite;    animation-iteration-count: infinite;}
.mypage-alo-ph-circle {    width: 90px;    height: 90px;    top: 12px;    left: 12px;    position: absolute;    background-color: transparent;    -webkit-border-radius: 100%;    -moz-border-radius: 100%;    border-radius: 100%;    border: 2px solid rgba(30, 30, 30, 0.4);    opacity: .1;    opacity: .5;}
.zoomIn {    -webkit-animation-name: zoomIn;    animation-name: zoomIn;}
.animated {    -webkit-animation-duration: 1s;    animation-duration: 1s;    -webkit-animation-fill-mode: both;    animation-fill-mode: both;}
.mypage-alo-ph-circle-fill {    width: 60px;    height: 60px;    top: 28px;    left: 28px;    position: absolute;    -webkit-transition: all 0.2s ease-in-out;    -moz-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;    -webkit-border-radius: 100%;    -moz-border-radius: 100%;    border-radius: 100%;    border: 2px solid transparent;    -webkit-transition: all .5s;    -moz-transition: all .5s;    -o-transition: all .5s;    transition: all .5s;    opacity: .4 !important;}
.mypage-alo-ph-img-circle {    width: 30px;    height: 30px;    top: 43px;    left: 43px;    position: absolute; opacity:1 !important;    background: rgba(30, 30, 30, 0.1) url(../img/wtsp.png) no-repeat center center;	    -webkit-border-radius: 100%;    -moz-border-radius: 100%;    opacity: 1;    -webkit-transition: all 0.2s ease-in-out;    -moz-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;    -webkit-transform-origin: 50% 50%;    -moz-transform-origin: 50% 50%;    -ms-transform-origin: 50% 50%;    -o-transform-origin: 50% 50%;    transform-origin: 50% 50%;    background-size: 100%;}
.tada {    -webkit-animation-name: tada;    animation-name: tada;}
@-webkit-keyframes tada {  from {    -webkit-transform: scale3d(1, 1, 1);    transform: scale3d(1, 1, 1);  }
    10%, 20% {    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);  }
    30%, 50%, 70%, 90% {    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);  }
    40%, 60%, 80% {    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);  }
    to {    -webkit-transform: scale3d(1, 1, 1);    transform: scale3d(1, 1, 1);  }
}
@keyframes tada {  from {    -webkit-transform: scale3d(1, 1, 1);    transform: scale3d(1, 1, 1);  }
    10%, 20% {    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);  }
    30%, 50%, 70%, 90% {    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);  }
    40%, 60%, 80% {    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);  }
    to {    -webkit-transform: scale3d(1, 1, 1);    transform: scale3d(1, 1, 1);  }
}
@keyframes pulse {  from {    -webkit-transform: scale3d(1, 1, 1);    transform: scale3d(1, 1, 1);  }
    50% {    -webkit-transform: scale3d(1.05, 1.05, 1.05);    transform: scale3d(1.05, 1.05, 1.05);  }
    to {    -webkit-transform: scale3d(1, 1, 1);    transform: scale3d(1, 1, 1);  }
}
@-webkit-keyframes zoomIn {  from {    opacity: 0;    -webkit-transform: scale3d(.3, .3, .3);    transform: scale3d(.3, .3, .3);  }
    50% {    opacity: 1;  }
}
@keyframes zoomIn {  from {    opacity: 0;    -webkit-transform: scale3d(.3, .3, .3);    transform: scale3d(.3, .3, .3);  }
    50% {    opacity: 1;  }
}
.mypage-alo-phone { position:fixed; bottom:120px; left:0; z-index:999;}

.mypage-alo-ph-circle {border-color: #43b91e;}
.mypage-alo-ph-circle-fill {background-color:#43b91e;}
.mypage-alo-ph-img-circle {background-color: #43b91e;}.mypage-alo-phone:hover .mypage-alo-ph-circle {border-color: #43b91e;}
.mypage-alo-phone:hover .mypage-alo-ph-circle-fill {background-color:#43b91e;}
.mypage-alo-phone:hover .mypage-alo-ph-img-circle {background-color: #43b91e;}