/*
.presso,.pressotto,.presso a,.pressotto a,.link-p a,#s10 a {
    font-family: TTCommons-Regular;
    font-size: 15px;
    color: #CEC4C3;
    letter-spacing: 0;
    line-height: 19px;    
}
*/

.pressotto {
    margin-top:10px;
}

#s10 input[type=email] {
    outline-style: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    -webkit-appearance: none !important;
    border: none !important;
    width: 70%;
}



.input {
	position: relative;
	z-index: 1;
	display: inline-block;
	max-width: 400px;
	width: calc(100% - 2em);
	vertical-align: top;
}

.input__field {
	position: relative;
	display: block;
	float: left;
	padding: 0.8em;
	width: 70%;
	border: none;
	border-radius: 0;
	background: #f0f0f0;

    font-family: TTCommons-Medium;
    font-size: 16px;
    color: #817B7A;
    letter-spacing: 0;
    line-height: 16px;    
    
	-webkit-appearance: none; /* for box shadows to show on iOS */
}


.input__field:focus {
	outline: none;
}

.input__label {
	display: inline-block;
	float: right;
	padding: 0 1em;
	width: 40%;
	color: #6a7989;
	font-weight: bold;
	font-size: 70.25%;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


.press-ro .input__label-content{
    text-align: left;
}

.input__label-content {
	position: relative;
	display: block;
	padding: 1.6em 0;
	width: 100%;
    font-family: TTCommons-Regular;
    font-weight: 200;
    font-size: 15px;
    color: #CEC4C3;
    letter-spacing: 0;
    line-height: 19px;    
    top: -5px;
   transition: .8s ease all;
    -webkit-transition: .8s ease all;    
}

.buttozzo{
    position: absolute;
    right: 0;
    bottom: 20px;
    background: #D0C4C3;
    padding: 7px 11px;
    font-family: TTCommons-Medium;
    font-size: 16px;
    color: #FAF8F5;
    letter-spacing: 0;
    text-align: center;
    line-height: 16px;
    border-radius: 2.5px;
    padding-bottom: 5px;
    
    transform:translateX(200px);
    transition: .3s ease all;
    -webkit-transition: .3s ease all;
    
}

.isValid .buttozzo{
    background: #ff5170;
    color: #FAF8F5;
    transition: .3s ease all;
    -webkit-transition: .3s ease all;
    
    cursor: pointer;
}
.isValid .buttozzo:hover{
    background: #1A1918;
    color: #FAF8F5;
    transition: .3s ease all;
    -webkit-transition: .3s ease all;    
}

.successMessage {
    font-family: TTCommons-Medium;
    font-size: 16px;
    color: #ff6180;
    letter-spacing: 0;
    line-height: 16px;   
    
    position: absolute;
    top: 250%;
    transform: translateY(-50%);
    transition: .3s ease all;    
    -webkit-transition: .3s ease all;    
    
}

.press-ro .successMessage {
    right: auto;
    left: 0;
}

.sent .successMessage {
    top: 50%;
    transform: translateY(-50%);
    transition: .3s ease all;    
    -webkit-transition: .3s ease all;        
}



.wrapRequest {
    position: relative;
    overflow: hidden;
    margin: 20px 0;
}

.pressMessage{
    opacity: 0;
    margin-left: 4px;
    display: inline-block;
}

.pressMessage,.isValid .pressMessage{
    font-family: TTCommons-Regular;
    font-size: 12px;
    color: #C3341C;
    letter-spacing: 0;
    line-height: 8px;    
    color:white;
    opacity: 0;
}

.isInvalid.input--filled .pressMessage{
    color:#C3341C;
    opacity: 0;
}

.pressMessage{
    opacity: 0;
}

.sent .input--hoshi{
   transition: .3s ease all;
    -webkit-transition: .3s ease all;
     opacity: 0;
}

.input--filled .buttozzo {
    transform:translateX(0px);
    transition: .3s ease all;
    -webkit-transition: .3s ease all;
    
}

.sent .buttozzo {
    transform:translateX(200px);    
}

.input.input--hoshi:not(.input--filled) .input__label-content {
    margin-left: 0px;
    transition: .3s ease all;
    -webkit-transition: .3s ease all;
}

.input.input--hoshi:not(.input--filled):hover .input__label-content {
    color:#1A1918;
    transition: .8s ease all;
    -webkit-transition: .8s ease all;
}

.input.input--hoshi.input--filled .input__arrow {
    color:#C29500;;
    transition: .3s ease all;
    -webkit-transition: .3s ease all;
}

.input.input--hoshi:not(.input--filled):hover .input__arrow {
    margin-left: 10px;
    color:#C29500;
    transition: .3s ease all;
    -webkit-transition: .3s ease all;
}



.graphic {
	position: absolute;
	top: 0;
	left: 0;
	fill: none;
}

/*
.icon {
	color: #ddd;
	font-size: 150%;
}
*/

/* Individual styles */



/* Hoshi */
.input--hoshi {
	overflow: hidden;
    max-width: 300px;
}

.input__field--hoshi {
	margin-top: 20px;
    margin-bottom: -10px;
	padding: 0.85em 0.35em;
	width: 100%;
	background: transparent;
	color: #817B7A;
}

.input__label--hoshi {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 0.25em;
	width: 100%;
	height: calc(100% - 1em);
	text-align: left;
	pointer-events: none;
}

.input__label-content--hoshi {
	position: absolute;
}

.input__label--hoshi::before,
.input__label--hoshi::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 70%;
	height: calc(100% - 22px);
	border-bottom: 1px solid fff;
}

.input__label--hoshi::after {
	margin-top: 2px;
	border-bottom: 1px solid red;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.input__label--hoshi-color-1::after {
	border-color: #B9C1CA;
}

.input__label--hoshi-color-2::after {
	border-color: hsl(160, 100%, 50%);
}

.input__label--hoshi-color-3::after {
	border-color: hsl(20, 100%, 50%);
}

.input__label-content.input__label-content--hoshi{
    white-space: nowrap;
}

.input__field--hoshi:focus + .input__label--hoshi::after,
.input--filled .input__label--hoshi::after {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);

}


.input.input--hoshi.isInvalid.input--filled {
    text-align: left;
}

.input__field--hoshi:focus + .input__label--hoshi .input__label-content--hoshi,
.input--filled .input__label-content--hoshi {
    white-space: nowrap;
    /*
	-webkit-animation: anim-1 0.3s forwards;
	animation: anim-1 0.3s forwards;
    */
    transform: translateY(-40%);
    width:0;
    transition: .3s ease all;
    
}



.press-ro{
    /*
    font-family: TTCommons-Regular;
    font-size: 15px;
    color: #CEC4C3;
    letter-spacing: 0;
    text-align: right;
    line-height: 19px; 
    */
    
}


.press-r {
    text-align: left;
}


.mobimo.press-r {
    margin-top: 8px;
    margin-bottom: 35px;
}

.press-r a.subl{
    overflow: hidden;
    background: rgb(26,25,24);
    background: linear-gradient(10deg, rgba(26,25,24,1) 50%, rgba(206,196,195,1) 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 500% 100%;
    background-position: 100%;
    transition: .5s cubic-bezier(0.65, 0.05, 0.36, 1) all;
    -webkit-transition: .5s cubic-bezier(0.65, 0.05, 0.36, 1) all;
    text-decoration: none;    
    position:relative;
}

.press-r a.subl::after{
    content:"";
    position: absolute;
    height: 1px;
    width: 100%;
    bottom: 0px;
    left:0;
    background: #d8d8d8;;
    transition: .5s cubic-bezier(0.65, 0.05, 0.36, 1) all;
    -webkit-transition: .5s cubic-bezier(0.65, 0.05, 0.36, 1) all;    
}

.press-r a.subl:hover::after,.hover .press-r a.subl::after{
    background: #E7DEDC;
  transition: .5s ease all;
  -webkit-transition: .5s ease all;    
}


.press-r a:hover,.hover .press-r a {
    background-position:0%;
  transition: .5s ease all;
  -webkit-transition: .5s ease all;
    
}

.presso {
    margin-bottom:55px;
    margin-top: 10px;
    display: none;
}

.logos img {max-width: 44px;}

a .divaus {
    position: relative;
    display: inline-block;
    background: #D0C4C3;
    clip-path: url("#logo-sublimio");
    -webkit-clip-path: url("#logo-sublimio");
    -moz-clip-path: url("#logo-sublimio");
    
    overflow: hidden;
    background: rgb(26,25,24);
    background: linear-gradient(10deg, rgba(26,25,24,1) 50%, rgba(206,196,195,1) 50%);
    background-size: 500% 300%;
    background-position: 0% 0%;
    transition: .5s ease all;
    -webkit-transition: .5s ease all;
    text-decoration: none;    
    position:relative;
    background-repeat: no-repeat;
    
}

a:hover .divaus,.hover a .divaus {
    background-position: 0 100%;
    transition: .5s ease all;
    -webkit-transition: .5s ease all;
}


a.linkInsta i {
    color: #CEC4C3;
    font-size: 15px;
    vertical-align: middle;
    margin-right: 0px;
    vertical-align: middle;
    margin-top: -2px;
    display: inline-block;
    transition: .3s ease all;
    -webkit-transition: .3s ease all;    
}

a.linkInsta:hover i{
    color:#1A1918;
    transition: .3s ease all;
    -webkit-transition: .3s ease all;
}

@-webkit-keyframes anim-1 {

	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, -40%, 0);
		transform: translate3d(0, -40%, 0);
        width: 0;
	}
}

@keyframes anim-1 {

	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, -40%, 0);
		transform: translate3d(0, -40%, 0);
        width: 0;
	}
}

@-webkit-keyframes animso-1 {

	50% {
		opacity: 1;
		-webkit-transform: translate3d(0, -40%, 0);
		transform: translate3d(0, -40%, 0);
	}
    100% {
        width: 0;
	}
}

@keyframes animso-1 {
	50% {
		opacity: 1;
		-webkit-transform: translate3d(0, -40%, 0);
		transform: translate3d(0, -40%, 0);
	}
	100% {
        width: 0;
	}
}


.link-p {display:none;}

#press-aprile img {
    opacity: 0;
}

a#press-aprile {
    background-color: #D0C4C3;
    -webkit-mask: url("../images/kool-logo.svg") no-repeat center;
    mask: url("../images/kool-logo.svg") no-repeat center;
    mask-size:contain;
    -webkit-mask-size:contain;
    display: inline-block;    
    transition: .3s ease all;
    -webkit-transition: .3s ease all;
}

a#press-aprile:hover {
    background-color: rgb(26,25,24);
    transition: .3s ease all;
    -webkit-transition: .3s ease all;
}



#s10 a {
    text-underline-offset: 3px !important;
}

/*MEDIO*/
@media only screen and (min-width: 40.063em){
    
    .link-p {display:inline-block;}
    
    .link-p a {
        transition: .3s ease all;
        -webkit-transition: .3s ease all;
        position: relative;
        
    }
    
    .link-p a:after {
        content: "";
        position: absolute;
        height: 1px;
        width: 100%;
        bottom: 0px;
        left: 0;
        background: #d8d8d8;
    }
    
    .link-p a:hover {
        color:rgb(26,25,24);
        transition: .3s ease all;
        -webkit-transition: .3s ease all;
    }    
    
    a.linkInsta i {
        margin-top: -2px;
        margin-right: 20px;        
    }    
        
    
    .logos img {max-width: none;}    
    
    .mobimo{
        display: none;
    }
    
    
    
    .presso {
        display: inline-block;
    }    
    
    .press-ro .input__label-content{
        text-align: right;
    }
    
    .press-ro .successMessage {
        left: auto;
        right: 0;
    }    
    .press-r {
        text-align: right;
    } 
    
    #mailtech {float: right;}
    #mailtech:focus {float: left;}
    .input--filled #mailtech {float: left;}
    
}