/*End Generated Styles*//** see README file http://wdx.vet.webdexpress.com/uploads/2020/08/20/readme_vet-css.txt for editing help  **/

/** FOR CONTACT PAGE - Please use Dashboard menu to edit Contact page content and settings. Using Wizard menu will cause the current content to be overridden. **/


/** values noted on README ****************************************/

ul.services li:first-child:before {
  background: url(/uploads/2020/08/19/wellness.png) center/90px no-repeat, #42BDA0; /** Note 2.1 - service image and background color **/
}
ul.services li:nth-child(2):before {
  background: url(/uploads/2020/08/19/vaccination.png) center/90px no-repeat, #4AAAD2; /** Note 2.1 - service image and background color **/
}
ul.services li:nth-child(3):before {
  background: url(/uploads/2020/08/19/microchip.png) center/90px no-repeat, #FFC60B; /** Note 2.1 - service image and background color **/
}
ul.services li:nth-child(4):before {
  background: url(/uploads/2020/08/19/dental.png) center/90px no-repeat, #D43A80; /** Note 2.1 - service image and background color **/
}
ul.services li:nth-child(5):before {
  background: url(/uploads/2020/08/19/surgery.png) center/90px no-repeat, #BA9BC9; /** Note 2.1 - service image and background color **/
}
ul.services li:nth-child(6):before {
  background: url(/uploads/2020/08/19/euthanasia.png) center/90px no-repeat, #9CBD3C; /** Note 2.1 - service image and background color **/
}

/** END values noted on README ****************************************/


/* You should not need to edit anything below this point! */
.center {
text-align: center;
}
.g-recaptcha {
    margin: 10px 0 30px 45px;
}

#content p {
  font-size: 18px !important;
  margin-bottom: 15px;
  line-height: 130%;
}

#header {
padding: 50px 10px;
overflow: hidden;
min-height: 400px;
}
#header h2 {
font-size: 25px;
}

.webdexpress_header {
  position: absolute;
  min-height: 0;
    display: inline-block;
    background: rgba(255,255,255,0.7);
    padding: 20px;
    box-shadow: 8px 8px 0 rgba(255,255,255,0.3);
max-width: 100%;
box-sizing: border-box;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

.homeImg {
    display: block;
    margin: auto;
}

#mainbody {
  padding: 20px 40px 40px;
  max-width: 95%;
}

ul.services {
    list-style-type: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

ul.services li {
    width: 49%;
    margin: 2em 0;
    display: inline-block;
    vertical-align: top;
    padding: 0 1em;
box-sizing: border-box;
}

ul.services li strong {
  display: block;
  margin-bottom: -8px;
}

ul.services li:before {
  content: "";
  width: 100px;
  height: 100px;
  float: left;
  border-radius: 50px;
  transition: all .4s; 
  margin-right: 10px;
}

ul.services li:after {
  content: "";
  display: table;
  clear: both;
}

#mainbody #content .button {
  display: flex;
  justify-content: center;
  width: 100%;
}

#mainbody #content .button a {
  padding: 6px 28px;
  font-size: 21px;
  font-weight: bold;
  border: 2px solid #5f2e10;
  border-radius: 50px;
  text-decoration: none;
  color: #fff;
  background: #5f2e10;
  margin: 30px 0;
  transition: all .4s;
  text-align: center;
}

#mainbody #content .button a:hover {
  color: #5f2e10;
  background: transparent;
  transition: all .4s;
}

#mainbody #content {
background: url(/uploads/2021/03/03/bg_kokedama.png) bottom -50px right -10px no-repeat;
}

h3 {
  margin-bottom: 14px;
font-size: 1.8rem;
font-weight: bold;
text-align: center;
}
h3:after {
content: "";
display: block;
margin: 0 auto;
border-bottom: 2px solid #73a842;
width: 40px;
line-height: 8px;
}
.short-border {
display: none;
}

#user_content {
padding: 0;
}
#user_content img.img-right {
    float: right;
    margin: 0 0 10px 10px;
}

@media screen and (max-width: 767px) {
  ul.services li {
    width: 100%;
    margin: 1.5em 0;
  }
}

@media only screen and (max-width: 39.99em) {
    #mainbody {
        padding: 10px 20px 20px;
    }
    #user_content img.img-right {
        float: none;
        margin: 1em auto;
        display: block;
        max-width: 100%;
    }
    #header .wdx_header_wrap {
        margin: 0 auto;
    }
    #header {
        min-height: 300px;
    }
}

@media screen and (max-width: 767px) {
  .g-recaptcha {
    margin-left: 0;
  }
}
@media screen and (max-width: 375px) {
  ul.services li {
    text-align: center;
  }
  ul.services li:before {
    float: none;
    display: block;
    margin: 0 auto 1em auto;
  }
}

/* begin hader animation */

:root {
	 --duration: 20s;
	 --delay: 20s;
}
.headerslide {
	 position: absolute;
	 top: 0;
	 margin: 0 auto;
	 padding: 0 1rem;
	 width: 100vw;
	 height: 100vh;
	 overflow: hidden;
	 animation: spin var(--duration) var(--delay) linear infinite;
	 transform-style: preserve-3d;
	 perspective: 25rem;
	 z-index: -1;
}
.headerslide img {
	 --duration: 40s;
	 --name: float-up-1;
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 33vw;
	 transform: translateY(200vh);
	 animation: var(--name) var(--duration) linear infinite;
	 box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.5);
	 z-index: 1;
}
.headerslide img:nth-child(1) {
	 animation-delay: 0s;
}
.headerslide img:nth-child(2) {
	 animation-delay: -3s;
}
.headerslide img:nth-child(3) {
	 animation-delay: -6s;
}
.headerslide img:nth-child(4) {
	 animation-delay: -9s;
}
.headerslide img:nth-child(5) {
	 animation-delay: -12s;
}
.headerslide img:nth-child(6) {
	 animation-delay: -15s;
}
.headerslide img:nth-child(7) {
	 animation-delay: -18s;
}
.headerslide img:nth-child(8) {
	 animation-delay: -21s;
}
.headerslide img:nth-child(9) {
	 animation-delay: -24s;
}
.headerslide img:nth-child(10) {
	 animation-delay: -27s;
}
.headerslide img:nth-child(1) {
	 --name: float-up-1;
	 --duration: calc(20s * 1);
	 left: 0vw;
	 z-index: -1;
}
.headerslide img:nth-child(2) {
	 --name: float-up-3;
	 --duration: calc(20s * 3);
	 left: 10vw;
	 z-index: -3;
}
.headerslide img:nth-child(3) {
	 --name: float-up-2;
	 --duration: calc(20s * 2);
	 left: 90vw;
	 z-index: -2;
}
.headerslide img:nth-child(4) {
	 --name: float-up-1;
	 --duration: calc(20s * 1);
	 left: 36vw;
	 z-index: -1;
}
.headerslide img:nth-child(5) {
	 --name: float-up-3;
	 --duration: calc(20s * 3);
	 left: 62vw;
	 z-index: -3;
}
.headerslide img:nth-child(6) {
	 --name: float-up-2;
	 --duration: calc(20s * 2);
	 left: 15vw;
	 z-index: -2;
}
.headerslide img:nth-child(7) {
	 --name: float-up-2;
	 --duration: calc(20s * 2);
	 left: 55vw;
	 z-index: -2;
}
.headerslide img:nth-child(8) {
	 --name: float-up-3;
	 --duration: calc(20s * 3);
	 left: -20vw;
	 z-index: -3;
}
.headerslide img:nth-child(9) {
	 --name: float-up-1;
	 --duration: calc(20s * 1);
	 left: 68vw;
	 z-index: -1;
}
.headerslide img:nth-child(10) {
	 --name: float-up-2;
	 --duration: calc(20s * 2);
	 left: 0vw;
	 z-index: -2;
}
 @keyframes float-up-3 {
	 from {
		 transform: translateY(200vh) translateZ(-50vh);
	}
	 to {
		 transform: translateY(-200vh) translateZ(-50vh);
	}
}
 @keyframes float-up-2 {
	 from {
		 transform: translateY(150vh) translateZ(-25vh);
	}
	 to {
		 transform: translateY(-150vh) translateZ(-25vh);
	}
}
 @keyframes float-up-1 {
	 from {
		 transform: translateY(100vh);
	}
	 to {
		 transform: translateY(-100vh);
	}
}
 @keyframes spin {
	 10%, 100% {
		 transform: rotateY(360deg);
	}
}
 @keyframes shrink {
	 0% {
		 transform: scale(1) translateX(0);
	}
	 2.5% {
		 transform: scale(0.75) translateX(5%);
	}
	 7.5% {
		 transform: scale(0.75) translateX(-5%);
	}
	 10%, 100% {
		 transform: scale(1);
	}
}