/*
 Theme Name:   Volos WP Child
 Theme URI:    https://demo.cocobasic.com/volos-wp
 Description:  Volos WP Child Theme
 Author:       CocoBasic
 Author URI:   https://cocobasic.com/
 Tags: grid-layout, four-columns, custom-colors, featured-images, threaded-comments, translation-ready, theme-options
 Template:     volos-wp
 Text Domain:  volos-wp-child
*/

.relative{position:relative;}
.transition{-webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; -ms-transition: all 0.6s ease; transition: all 0.6s ease;}
.logo-skill{opacity:0.65;}
.logo-skill:hover{opacity:1;}

/* PORTFOLIO */
.portfolio-text-holder p.portfolio-text { color: #114846; }
.portfolio-text-holder p.portfolio-cat { color:#fff; }
.portfolio-text-wrapper{bottom:30px;}

/* PHONE MASK */
.elementor-56 .elementor-element.elementor-element-2c690e0 { background-image: url(https://staging.davidebolognesi.com/wp-content/uploads/2022/06/bg-smartphone.png); background-size:cover; }
div.phone-mask{height:510px; overflow:hidden; position:relative;}
.phone-mask img{width:100%; transform:translateY(0px); transition-duration:15s;}
.phone-mask img:hover{transform:translateY(calc(510px - 100%)); transition-duration:7s;}

/* FORM CONTATTI */
.form-phone{
	font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 25px;
    color: #fff;
    background-color: transparent;
    width: 100%;
    height: 28px;
    border: 0;
    border-bottom: 2px solid #fff;
    padding-top: 13px;
    padding-bottom: 0px;
    margin-bottom: 20px;
    -webkit-box-sizing: initial;
    box-sizing: initial;
}
.wpcf7-form textarea{height:100px; color:#333;}
.wpcf7-form span.wpcf7-not-valid-tip{color:red;}
.acceptance{padding-bottom:10px;}


/* MOBILE */
@media (max-width: 767px){
	.m-0{ margin-left: -5%; margin-right: -5%; overflow: hidden;}
	div.phone-mask{height:306px;}
	
	/* The element to apply the animation to */
	.phone-mask img {
	  transition-duration:0s;
	  animation-name: smartphone;
	  animation-duration: 20s;
	  animation-delay: 3s;
      animation-timing-function: linear;
	}
	.phone-mask img:hover{transform:translateY(0px);}
	/* The animation code */
	@keyframes smartphone {
	  0%   {transform:translateY(0px);}
	  50%   {transform:translateY(calc(306px - 100%));}
	  100% {transform:translateY(0px);}
	}	
}
@media (max-width: 650px){
.skill-circle-holder > div:nth-of-type(n) {
    display: inline-block!important;
    width: 50%;
    margin-left: 10px !important;
    margin-right: 10px !important;
	}
}