@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */
 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
	padding: 0;
	margin: 0;
}

a {
	color: #367ba5;
	transition: all .3s;
}

table {
	border-spacing: 0;
}

fieldset,img {
	border: 0;
}

address,caption,cite,code,dfn,em,strong,th,var {
	font-weight: normal;
	font-style: normal;
}

strong {
	font-weight: bold;
}

caption,th {
	text-align: left;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	font-size: 100%;
	margin:0;
	padding:0;
}

q:before,q:after {
	content:'';
}

abbr,acronym {
	border: 0;
}

* {
	box-sizing:border-box;
	outline: 0;
}

/* == disabilita colorazione diversa dei link autogenerati da Apple ===================================== */

a[x-apple-data-detectors] {
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

/* per abbassare sotto la soglia il Cumulative Layout Shift dovuto al download del google font*/
@font-face {
    font-family: "Montserrat-fallback";
    size-adjust: 113.39999999999998%;
    ascent-override: 82%;
    src: local("Arial");
}

/* evidenzia gli elementi selezionati durante la keyboard navigation */
a:focus-visible, button:focus-visible {
	outline: 3px solid red;
	border-radius: 4px;
	transition: all 0.0s
}

*:focus-visible {
	outline: 3px solid red;
	border-radius: 4px;
	transition: all 0.0s
}

/* Custom CSS
 * --------------------------------------- */

html{
	width: 100%;
	height: 100vh;
	min-height: 100vh;
	scroll-behavior: smooth; 
	-webkit-tap-highlight-color: transparent;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body{
	width: 100%;
	height: 100vh; 
	min-height: 100vh;
	font-size: 100%;
/*	font-family: 'Montserrat', sans-serif; */
	font-family: 'Montserrat','Montserrat-fallback', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
	overflow-x: hidden;
	overflow-y: scroll;
	color: #333;
	background-color: #FFF;
	position: relative;
}

.body-noscroll {
    overflow: hidden;
    height: 100%;
}

body, div {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.mobi-visible{
	display: block;
}

.header {
    top: 0;
    left: 0;
	right: 0;
    width: 100%;
    background: #FFF;
    height: 92px;
    z-index: 5000;
    padding: 0px;
	position: fixed;
    border-bottom: 0 solid transparent;
    transition: border-bottom 0.2s ease;
}

.header.with-border {
    border-bottom: 1px solid #ccc;
}

#logo {
	position: fixed;
	top: 16px;
	left: calc((100vw - 1200px)/2);
	z-index: 8000;
	display: inline-block;
	margin-left: 32px;
}

#logo img {
	width: 216px;
	height: 57px;
}

@media only screen and (max-width: 1200px){
	
#logo {
	left: 0px;
}

}

.page-top-spacer {
	height: 92px;
}

.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0px 32px;
	position: relative;
}

/*
.section-padding9632 .container {
	padding: 0px 0px;
}
*/

.container-large {
	width: 100%;
	margin: 0 auto;
	padding: 0px 32px;
	position: relative;
}

h1 {
	font-size: 2em;
	font-weight: 600;
	text-align: center;
	margin: 0 0 0.4em 0;
	color: #173349;
}

h2 {
	font-size: 1.4em;
	font-weight: 400;
/*	text-align: center; */
	margin: 0.2em 0 0.4em 0;
	color: #173349;
}

p {
	font-size: 1.2em;
	font-weight: 300;
	line-height: 30px;
}

p.smaller {
	font-size: 1.0em;
	margin-top: 8px;
}

.simple-text-box p {
	font-size: 1.0em;
	font-weight: 300;
	line-height: 26px;
}

strong {
	font-weight: 500;
}

.on-dark h1,
.on-dark h2,
.on-dark p,
.on-dark a {
	color: #FFF;
}

/*

.bg-image1 h1,
.bg-image1 p,
.bg-image3 h1,
.bg-image3 p,
.bg-darkblue h1, .bg-darkblue h2,
.bg-darkblue p */{
	color: #FFF;
}

.personal-box-1 h1 {
	text-align: left;
}

#how-it-works span {
	display: inline-block;
	background-color: #367BA5;
	margin: 2em 0 0.4em 0;
	text-align: left;
	color: #FFF;
	padding: 16px 8px 8px 8px;
	width: 48px;
	height: 48px;
	border-radius: 24px;
	font-weight: 600;
}


/* Buttons
* --------------------------------------- */

.button {
	padding: 10px 22px;
	margin-top: 16px;
	display: inline-block;
	border: solid 2px #D00015;
	background-color: #D00015;
	color: #FFFFFF;
	text-decoration: none;
	border-radius: 4px;
	transition: all .3s;
	font-family: 'Montserrat','Montserrat-fallback', sans-serif;
	font-size: 1em;
	font-weight: 500;
	cursor: pointer;
}

.button-light {
	padding: 10px 22px;
	margin-top: 32px;
	display: inline-block;
	border: solid 2px #FFF;
	background-color: none;
	color: #FFF;
	text-decoration: none;
	border-radius: 4px;
	transition: all .3s;
	font-size: 1em;
	font-weight: 500;
}



.button-text,
.back-button-text {
	padding: 10px 0px;
	margin-top: 16px;
	display: inline-block;
	border: none;
	background-color: none;
	color: #D00015;
	text-decoration: none;
	transition: all .3s;
	font-size: 18px;
	font-weight: 500;
}

.button i,
.button-light i,
.button-text i {
  position: relative;
  transform: translateX(-3px);
  transition: transform 0.3s;
}

.back-button-text i {
  position: relative;
  transform: translateX(3px);
  transition: transform 0.3s;
}

.button img.bt-svg,
.button-light img.bt-svg,
.button-text img.bt-svg,
.button svg.bt-svg,
.button-light svg.bt-svg,
.button-text svg.bt-svg {
  position: relative;
  transform: translateX(-3px);
  transition: transform 0.3s;
}

.back-button-text img.bt-svg {
  position: relative;
  transform: translateX(3px);
  transition: transform 0.3s;
}

.linklike-btn,
.linklike-btn-in-p {
	border: 0;
	border-radius: 0;
	background: none;
	color: white;
	font-family: Montserrat, Montserrat-fallback, sans-serif;
	text-decoration: underline;
	font-size: 1em;
	line-height: 20px;
	text-align: left;
	padding: 0px;
	margin: 0px;
	display: inline-block;
	cursor: pointer;
}

.linklike-btn-in-p {
	color: #367ba5;
	font-size: 20px;
	line-height: 30px;
}


/* Sezioni e sfondi
* --------------------------------------- */

.section {
	padding: 96px 0px;
}

.section-padding9632 {
	padding: 96px 0px 32px 0px;
}

#who-needs-it, #how-it-works, #vantages, #use-cases { 
	scroll-margin-top: 48px;
}

.bg-none {
	background: none;
}

.bg-image1 {
	background-color: #333333;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: auto 100vh;
	background-image:url('../images/pallet.jpg');
}

.bg-image3 {
	background-color: #333333;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image:url('../images/tailored-mobi.jpg');
}

.bg-uc-hospital {
	background-color: #333333;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image:url('../images/hospital.jpg');
}

.bg-uc-carfacility {
	background-color: #333333;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image:url('../images/car-facility.jpg');
}

.bg-uc-visitor-flow {
	background-color: #333333;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image:url('../images/visitor-flow.jpg');
}


@media only screen and (min-width: 769px){

.bg-image3 {
	background-image:url('../images/tailored.jpg');
}

}

.bg-imag1-trasp {
	background-color: rgba(0,0,0,1);
    position: relative;
}

.bg-imag1-trasp::before {
	content: "";
	background-position: center top;
	background-repeat: no-repeat;
	background-image:url('../img/web-background-mobi.webp');
    background-size: auto 100vh;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.60;
	background-attachment: fixed;
}

@media only screen and (min-width: 769px){
.bg-imag1-trasp::before {
	background-image:url('../img/web-background.webp');
}
}

.bg-blue {
	background: #367BA5;
}

.bg-darkblue {
	background: #173349;
}

.bg-teal {
	background: #8CCCD6;
}

.bg-gray-grad {
	background: #F5F5F5;
	background-size: auto auto;
	background: -webkit-linear-gradient(38deg, #EAEAEA 0%, #f5f5f5 100%);
	background: -moz-linear-gradient(38deg, #EAEAEA 0%, #f5f5f5 100%);
	background: linear-gradient(38deg, #EAEAEA 0%, #f5f5f5 100%);
}

.bg-lightgray-grad {
	background: #FFFFFF;
	background-size: auto auto;
	background: -webkit-linear-gradient(38deg, #f5f5f5 0%, #ffffff 100%);
	background: -moz-linear-gradient(38deg, #f5f5f5 0%, #ffffff 100%);
	background: linear-gradient(38deg, #f5f5f5 0%, #ffffff 100%); 
}

.desktop-right-aligned {
	padding: 32px 0px;
	text-align: right
}

/* Hero
* --------------------------------------- */

#hero {
	margin-bottom: 0px;
	min-height: calc(100vh - 92px);
	padding: 0px;
	border: 0px;
}

#hero h1 {
	font-size: 1.8em;
	text-align: left;
	margin: 0.4em 0 0.4em 0;
}



#hero .container > div:nth-child(1) {
	padding: 64px 0;
}

.facility-container {
	position: relative;
}

#facility {
	position: relative;
	margin: 32px 0;
	width: 683px;
	height: auto;
}
/*
.anchor {
	width: 48px;
	height: 48px;
	position: absolute;
	top: 163px;
	left: 347px;
    animation-duration: 2s;
    animation-delay: 1.5s;
}

.tag1 {

	width: 36px;
	height: 36px;
	position: absolute;
	top: 260px;
	left: 118px;
    animation-duration: 2s;
    animation-delay: 2s;
}

.tag2 {
	width: 36px;
	height: 36px;
	position: absolute;
	top: 371px;
	left: 218px;
    animation-duration: 2s;
    animation-delay: 2.5s;
}
*/

.anchor, .tag1, .tag2, .tag3 {
	position: absolute;
      opacity: 0;
      animation: fadeIn 0.2s ease-out forwards;
}

.anchor {
	width: 48px;
	height: 48px;
	top: 163px;
	left: 347px;
      animation-delay: 1.0s;
}

.tag1 {

	width: 36px;
	height: 36px;
	top: 247px;
	left: 188px;
      animation-delay: 1.2s;
}

.tag2 {
	width: 36px;
	height: 36px;
	top: 371px;
	left: 218px;
      animation-delay: 1.4s;
}

.tag3 {
	width: 36px;
	height: 36px;
	top: 286px;
	left: 475px;
      animation-delay: 1.6s;
}

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: scale(0.6);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

.linea1, .linea2, .linea3 {
      position: absolute;
      width: 0;
      height: 3px;
      background: #376BA5;
      border-radius: 4px;
    }


.linea1 {
      left: 372px;
      top: 184px;
      transform-origin: left center;
      transform: rotate(-206deg);  
      animation: allunga1 0.2s ease-out forwards;
      animation-delay: 2.0s;
    }

    @keyframes allunga1 {
      from {
        width: 0;
      }
      to {
        width: 184px;
      }
    }
	
.linea2 {
      left: 372px;
      top: 184px;
      transform-origin: left center;
      transform: rotate(-236deg); 
      animation: allunga2 0.2s ease-out forwards;
      animation-delay: 2.2s;
    }

    @keyframes allunga2 {
      from {
        width: 0;
      }
      to {
        width: 245px;
      }
    }
	
.linea3 {
      left: 372px;
      top: 184px;
      transform-origin: left center;
      transform: rotate(44deg); 
      animation: allunga3 0.2s ease-out forwards;
      animation-delay: 2.4s;
    }

    @keyframes allunga3 {
      from {
        width: 0;
      }
      to {
        width: 170px;
      }
    }

.ord-1 {
    animation-duration: 1s;
    animation-delay: 0s;
}

.ord-2 {
    animation-duration: 1s;
    animation-delay: 0.5s;
}

.ord-3 {
    animation-duration: 1s;
    animation-delay: 1.0s;
}

.ord-4 {
    animation-duration: 1s;
    animation-delay: 1.5s;
}



/* card 2 3 4 colonne
* --------------------------------------- */

.grid-2col-special, .grid-3col, .grid-3col-special {
	width: 100%;
}

.simple-text-box{
	margin-top: 32px;
	padding: 16px;
}

.stb-blue {
	background: #173349;
}

.stb-white {
	background: #FFF;
	border: dashed 1px #666666;
	box-shadow: 0px 6px 14px 0px rgba(190, 190, 190, 0.5);
}

.personal-box-1 {
	padding: 0 0 32px 0;
}

.personal-box-2 {
	padding: 0 0 0 0;
}

.usecase {
	border:solid 1px white;
	padding: 16px;
	margin-top: 32px;
}

.usecase h2 {
	min-height: 82px;
	text-align: left;
	margin: 0 0 0.4em 0;
}

.personal-box-1 li {
	color: #FFF;
	font-size: 1.2em;
	font-weight: 300;
	line-height: 30px;
	margin-left: 24px;
	list-style: square outside;
}

.personal-box-2 a {
	color: #FFF;
	display: inline-block;
	font-size: 1.2em;
	font-weight: 300;
	line-height: 30px;
	margin-top: 32px;
}

.our-offer {
	background-color: #333333;
/*	font-size: 1.0em;
	line-height: 26px;*/
	margin: 0px -16px -16px -16px;
	padding: 16px;
}



/* tabelle dei cookies
* --------------------------------------- */

.text-wrapper ul {
	  list-style: square outside;
	  margin-top: 32px;
}

.text-wrapper li {
	margin-bottom: 8px;
	margin-left: 16px;
}

.text-wrapper table {
	width: 100%;
}

.text-wrapper th,
.text-wrapper td {
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	padding: 8px 16px 8px 0px;
	vertical-align: top;
	border-bottom: solid 1px #666;
}

.text-wrapper th {
	font-weight: 600;
	padding-bottom: 16px;
	white-space: nowrap;	
}



/* Footer
* --------------------------------------- */

footer {
	width: 100%;
	max-width: 100%;
	padding: 98px 0px;
	background-color: #000;
	text-align: center;
}

footer p {
	color: #FFF;
	font-size: 1em;
	text-align: center;
}


div.footer-wrapper {
	width: 100%;
	display: block;
}

#social-footer{
	padding-bottom: 32px;
}

#social-footer a, #corporate-info a {
	color: #FFF;
}

#social-footer a.social {
	padding: 16px 12px;
	width: 36px;
	height: 48px;
	background-size: 20px 20px;
	transition: all 0.3s;
	content: "";
	background-color: rgba(1,1,1,0);
	display: inline-block;
}

#social-footer a.social:last-of-type {
	margin-right: -8px;
}

#corporate-info, #corporate-info p{
	font-size: 0.9em;
	color: #FFF;
}

.in { background: url('../images/svg/linkedin.svg') no-repeat 8px 16px;}
.fb { background: url('../images/svg/facebook.svg') no-repeat 8px 16px;}
.tw  { background: url('../images/svg/twitter.svg') no-repeat 8px 16px;}
.inst { background: url('../images/svg/instagram.svg') no-repeat 8px 16px;}



/* HR styling
* --------------------------------------- */



div.hr {
	width: 100%;
	max-width: 192px;
	position: relative;
	margin: 30px 0px;
	background: #8CCCD6;
}

div.hr::after {
	content: "";
	clear: both;
	display: table;
}

div.hr div {
	width: 32px;
	height: 3px;
	float: left;
}

div.hr div:nth-child(1) { background: #173349; }
div.hr div:nth-child(2) { background: #367BA5; }
div.hr div:nth-child(3) { background: #D00015; }




/* -----------------------------------
Android MDPI
------------------------------------ */
@media only screen and (max-width: 374px){

}


/* -----------------------------------
TABLETS PORTRAIT
------------------------------------ */
@media only screen and (min-width: 769px){

.bg-image1,
.bg-image2,
.bg-image3 {
    background-size: cover;
}

.bg-imag1-trasp::before,
.bg-imag3-trasp::before {
    background-size: cover;
}

.container {
	padding: 0px 32px;
}

#hero .container {

	display: grid;
	grid-template-columns: 1fr 32px 1fr;
	grid-template-rows: 1fr;
}

#hero .container > div:nth-child(1) {
	align-self: end;
	min-width: 364px;
}

#facility {
	margin: 32px 0 32px 32px;
}

.grid-2col-special {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
}

.grid-3col {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 32px 1fr 32px 1fr;
	grid-template-rows: 1fr;
}

.grid-3col-special {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
}

.personal-box-1 {
	border-right:dashed 1px white;
	padding: 0 32px 0 0;
}

.personal-box-2 {
	padding: 0 0 0 32px;
}

.personal-box-2 p {
	vertical-align: bottom;
}

}

@media only screen and (min-width: 1200px){


.jf-screen-wrapper {
	display: block;
	position: relative;
	width: 100%;
	max-width: 562px;
	margin: 0 auto;
}

img#justfollow-scr-1 {
	display: block;
	max-width: 562px;
	height: auto;
}

img#justfollow-scr-2 {
	position: absolute;
	top: 20%;
	left: 0%;
	display: block;
	max-width: 190px;	
	height: auto;
}

img#justfollow-scr-3 {
	position: absolute;
	top: 30%;
	right: 0%;
	display: block;
	max-width: 120px;	
	height: auto;
}




}


/* -----------------------------------
Device che prevedono gli Hover effects
------------------------------------ */

@media (hover: hover) and (pointer: fine) {


.header a:hover {
	color: #333;
}

.button:hover {
	background-color: #99000f;
	border: solid 2px #99000f;
	color: #FFFFFF;
}

.button-light:hover {
	background-color: #FFF;
	color: #000;
}

.button:hover i,
.button-light:hover i,
.button-text:hover i,
.back-button-text:hover i {
	transform: translateX(0);
}

.button:hover img.bt-svg,
.button-light:hover img.bt-svg,
.button-text:hover img.bt-svg,
.button:hover svg.bt-svg,
.button-light:hover svg.bt-svg,
.button-text:hover svg.bt-svg,
.back-button-text:hover img.bt-svg {
	transform: translateX(0);
}





footer a:hover {color: #FEDA28;}



}


/* -----------------------------------
DESKTOP
------------------------------------ */
@media only screen and (min-width: 1900px){




}

/* -----------------------------------
To adjust size of text into home carousel in short desktop screens
------------------------------------ */

@media only screen and (min-width: 1200px) and (max-height: 630px){

	
}

@media only screen and (min-width: 1200px) and (min-height: 712px) {


}