@charset "utf-8";
/*!
 * ConvergenWeb - info@convergenceweb.ch
 * servicebox style.css 
 * Copyright (c) 2021 ConvergenceWeb
 */

.serviceBoxL{
	background:linear-gradient(to right, rgba(191, 13, 62,0.4), rgba(191, 13, 62,0));
    padding: 2vh 10vh 2vh 3vh;
    transition: all 0.5s ease 0s;
	margin:0;
	width:fit-content;
	border-radius:10vh;
	display:flex;
}
.serviceBoxLS{
	background:linear-gradient(to right, rgba(191, 13, 62,0.4), rgba(191, 13, 62,0));
    padding: 2vh 10vh 2.5vh 8vh;
	position: relative;
    transition: all 0.5s ease 0s;
	width:fit-content;
	margin:0 2vh 2vh 10vh;
	border-radius:20vh;
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
}

.serviceBoxL:hover {
	border: 0.2vh solid #fff;
	background:linear-gradient(to right, rgba(191, 13, 62,1), rgba(191, 13, 62,0));
	
}
.serviceBoxLS:hover {
	border: 0.2vh solid #fff;
	background:linear-gradient(to right, rgba(191, 13, 62,1), rgba(191, 13, 62,0));
	font-family:'Commissioner', sans-serif;
    font-size: 3vh;
	font-weight:600;
    color: #fff;
}
.serviceBoxL:before,
.serviceBoxL:after {
    content: "";
    display: block;
    width: 3.5vh;
    height: 0.5vh;
    background: #fff;
    position: absolute;
	border-radius:5vh;
    left: 0;
    opacity: 0;
    transition: all 0.5s ease 0s;
}
.serviceBoxLS:before,
.serviceBoxLS:after {
    content: "";
    display: block;
    width: 8vh;
    height: 1vh;
    background: #fff;
    position: absolute;
	border-radius:5vh;
    left: 0;
    opacity: 0;
    transition: all 0.5s ease 0s;
}
.serviceBoxL:before {
    top: 0vh;
}
.serviceBoxLS:before {
    top: -0.2vh;
}
.serviceBoxL:after {
    bottom: 0vh;
}
.serviceBoxLS:after {
    bottom: -0.2vh;
}
.serviceBoxL:hover:before,
.serviceBoxL:hover:after {
    left: 4.5vh;
    opacity: 1;
}
.serviceBoxLS:hover:before,
.serviceBoxLS:hover:after {
    left: 10vh;
    opacity: 1;
}
.serviceBoxL .service-icon {
    opacity: 0.4;
    transition: all 0.5s ease-in 0s;
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}
.serviceBoxLS .service-icon {
    opacity: 0.4;
    transition: all 0.5s ease-in 0s;
	height:auto;
	display:flex;
	flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
.serviceBoxL:hover 
.service-icon {
    opacity: 1;
}
.serviceBoxLS:hover 
.service-icon {
    opacity: 1;
}

.serviceBoxLS .trame-service {
	padding-left:5vw;
	height:auto;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: nowrap;
}
.serviceBoxLS .title{
	font-family:'Commissioner', sans-serif;
    font-size: 3vh;
	font-weight:600;
    color: #bf0d3e;
    margin-bottom: 2vh;
	width:auto;
}
.serviceBoxLS:hover .title {
  color: #fff;
}
.serviceBoxL .description {
	font-family: 'Inter', sans-serif;
    font-size: 2vh;
	font-weight:400;
	text-align:left;
    color: #bf0d3e;
	padding-left:1.5vw;
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}
.serviceBoxL:hover .description {
  color: #fff;
}
.serviceBoxLS .description {
	font-family: 'Inter', sans-serif;
    font-size: 2vh;
	font-weight:400;
	text-align:left;
    color: #bf0d3e;
	display:flex;
}
.serviceBoxLS:hover .description {
  color: #fff;
}

/******************************** BOOTSTRAP MEDIA QUERIES ********************************/
/*Screens portrait */
@media screen and (max-width: 767px) and (orientation: portrait) {
.serviceBoxL{
	margin:0;
	padding: 1vh 3vh 1vh 3vh;
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
.serviceBoxL:hover:before,
.serviceBoxL:hover:after {
    left: 10vw;
    opacity: 1;
}
.serviceBoxLS:hover:before, 
.serviceBoxLS:hover:after {
    left: 35vw;
    opacity: 1;
}
.serviceBoxL .service-icon {
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
}
.serviceBoxLS{
	background:linear-gradient(to bottom, rgba(191, 13, 62,0.4), rgba(191, 13, 62,0));
    padding: 5vh 5vw 14vh 3vw;
	position: relative;
    transition: all 0.5s ease 0s;
	width:fit-content;
	margin:0;
	border-radius:50vw;
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
.serviceBoxLS .trame-service {
	padding-left:5vw;
	padding-right:5vw;
	height:auto;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}
.img-c-box2 {
    height: 7vw !important;
    margin: 0 0 0.2vh -1vw !important;
}
.serviceBoxLS .title {
    font-family: 'Commissioner', sans-serif;
    font-size: 3vh;
    font-weight: 600;
    color: #bf0d3e;
	margin-top: 2vh;
    margin-bottom: 2vh;
    width: auto;
}
.serviceBoxL .description {
    font-size:4vw;
    font-weight: 400;
    padding-left: 3.5vw;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}
.serviceBoxLS 
.description {
    font-family: 'Inter', sans-serif;
    font-size: 2vh;
    font-weight: 400;
    text-align: center;
	padding:0 5vw;
    color: #bf0d3e;
    display: flex;
}
.serviceBoxLS:before, .serviceBoxLS:after {
    width: 4.5vh;
    height: 1vh;
    border-radius: 5vh;
    left: 10vw;
}
.serviceBoxLS:before, .serviceBoxLS:after {
    content: "";
    display: block;
    width: 10vw;
    height: 2vh;
    background: #fff;
    position: absolute;
    border-radius: 5vh;
    left: 0;
    opacity: 0;
    transition: all 0.5s ease 0s;
}		
}

@media screen and (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
.serviceBoxL{
	margin:0;
	padding: 2vh 5vh 2vh 4vh;
}

.serviceBoxL .trame-service {
   padding-left: 2vh;
}
.serviceBoxLS {
    padding: 2vh 5vh 2.5vh 3vh;
    margin: 0;
    border-radius: 20vw;
    display: flex;
}
.serviceBoxLS .title{
    font-size: 2vh;
	font-weight:600;
    margin-bottom: 2vh;
}
.serviceBoxLS .description {
	font-size: 1.5vh;
	font-weight:400;
	text-align:justify;
}
.serviceBoxLS:before,
.serviceBoxLS:after {
    width: 8vw;
    height: 0.7vw;
}
.serviceBoxLS:hover:before,
.serviceBoxLS:hover:after {
    left: 14vw;
    opacity: 1;
    width: 6vw;
    height: 0.9vw;
}
}


/*Screens landscape */
@media screen and (max-width: 1199px) and (orientation: landscape) {

.serviceBoxL .description {
    font-size: 2.4vw;
    padding-left: 1.5vw;
}
.serviceBoxL:hover:before, .serviceBoxL:hover:after {
    left: 5.5vw;
    opacity: 1;
}
.serviceBoxLS {
	margin: 0 2vh 2vh 0;
	padding: 4vh 10vh 4.5vh 8vh;
    border-radius: 30vh;
}
.serviceBoxLS .title {
    font-size: 3vw;
    margin-bottom: 2vh;
}
.serviceBoxLS .description {
    font-size: 2vw;
}
}

@media screen and (min-width: 768px) and (max-width: 991px) and (orientation: landscape) {
.serviceBoxL{
	margin: 0 10vw !important;
}
}

@media only screen and (min-width: 1366px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
.serviceBoxL .description {
    font-size: 2vw;
    padding-left: 1.5vw;
}
.serviceBoxL:hover:before, .serviceBoxL:hover:after {
    left: 5.5vw;
    opacity: 1;
}
.serviceBoxLS {
	margin: 0 2vh 2vh 0;
	padding: 4vh 10vh 4.5vh 8vh;
    border-radius: 30vh;
}
.serviceBoxLS .title {
    font-size: 3vw;
    margin-bottom: 2vh;
}
.serviceBoxLS .description {
    font-size: 2vw;
}
.serviceBoxLS:before, .serviceBoxLS:after {
    width: 8vh;
    height: 1vh;
}
.serviceBoxLS:hover:before, .serviceBoxLS:hover:after {
    left: 13vw;
    opacity: 1;
}
}