/*

  blu chiaro: #00abe1
  blu scuro : #161f6d


  azzurro: #78fff1;
  rosa: #ff6495;
  viola chiaro: #8A9EFF;
  viola: #361999;
  viola scuro: #190C4D;


*/

body{font-family: 'Open Sans', sans-serif !important;color:#8A9EFF;}
p{color:#fff;letter-spacing:1px}

h1, h2, h3, h4, h5{font-family: 'Comfortaa', cursive;}

h1.title{font-weight:bold;color:#78fff1;padding-bottom:30px;padding-top:70px;text-align: center;}
h2{color:#ff6495;padding-top:30px;padding-bottom:5px}
h3{color:#fff;padding-bottom:5px;padding-top:10px}
a{color:#78fff1 !important}
a:hover, a:focus {color: #ff6495 !important;text-decoration: none !important;}

/* menu */
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181 !important;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {color: #ff6495 !important;text-decoration: none;}

.overlay .closebtn {
  position: absolute; top: 0px; right: 45px; font-size: 60px;
}

.openbtn {
  cursor:pointer;
  position: fixed;
  top: 5px;
  right: 50px;
  font-size: 50px;
  z-index: 3;
  color:#78fff1;
}

#myNav a.active{color:#ff6495 !important}

.openbtn:hover{color: #ff6495;}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}

#head{position:fixed;right: 0px;z-index:2; height: 100px;width: 100%;
  /*background-color:rgba(54,25,153,0.9);*/
 background: url('background.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;  
  padding:25px}
#head .head-overlay{background-color: #20008f;width: 100%;height: 100px;position:fixed;top:0px;left:0px;opacity:0.9;} 
#head .head-container{position:relative;} 
#head .logo{color:#fff;font-family: 'Comfortaa', cursive;margin-left: 35px;font-weight: bold;font-size: 1.9rem}
#head p{text-align:center;}

/* HOME */

body.home {
  background: url('background.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.rainbow {
  /*background-color: #7FFF00;*/
  background-color: #20008f;
  animation: bgColor 20s infinite linear;
  width: 100%;height: 100%;
  position:absolute;top:0px;left:0px;
  opacity:0.8;
}

@keyframes bgColor {
  12.5% {
    background-color: #20008f;
  }
  25% {
    background-color: #361999;
  }
  70% {
    background-color: #190C4D;
  }
  100% {
    background-color: #20008f;
  }
}



.testo{
  position: absolute;
  bottom:0px;left:0px;
  padding:10%;
}
.testo h1{color:#78fff1;}
.testo h2{padding-top:0px;}
.testo p{margin-bottom:0px}

/* PAGES */
body{background: url('background.jpg') no-repeat center center fixed;
  -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover;} 

body .body-overlay{background-color: #20008f;width: 100%;height: 100%;position:fixed;top:0px;left:0px;opacity:0.9;}

.elenco-badge{text-align: center;}
p.elenco-badge{font-size:1.3em;margin-top:40px;margin-bottom:45px}

#content{position:relative;z-index:1;padding: 50px}

.card{background-color:#190C4D !important;border: none;}
.card p{font-size:1rem; color:#8A9EFF;letter-spacing: initial;}
.card b{color:#fff}
.card-footer{background-color: #8A9EFF !important}
.card h3{color:#ff6495}
.card-body a{}
.tool .card-columns {column-count: 3;}
.tool .badge{font-weight: normal;}

/* colori badge*/
.badge-utility{background-color:#0B3EE0;color:#fff !important}
  a.badge-utility:hover, a.badge-utility:focus, a.badge-utility:active{background-color:#fff;color:#0B3EE0 !important;}
.badge-multimedia{background-color:#E04016;color:#fff !important}
  a.badge-multimedia:hover, a.badge-multimedia:focus, a.badge-multimedia:active{background-color:#fff;color:#E04016 !important;}
.badge-digital{background-color:#E0A916;color:#fff !important}
  a.badge-digital:hover, a.badge-digital:focus, a.badge-digital:active{background-color:#fff;color:#E0A916 !important;}
.badge-sviluppo{background-color:#0BE09D;color:#fff !important}
  a.badge-sviluppo:hover, a.badge-sviluppo:focus, a.badge-sviluppo:active{background-color:#fff;color:#0BE09D !important;}

.btn-utility{background-color:#0B3EE0!important; color:#fff !important}
  a.btn-utility:hover, a.btn-utility:focus, a.btn-utility:active{background-color:#fff !important;color:#0B3EE0 !important;}
.btn-multimedia{background-color:#E04016!important; color:#fff !important}
  a.btn-multimedia:hover, a.btn-multimedia:focus, a.btn-multimedia:active{background-color:#fff!important;color:#E04016 !important;}
.btn-digital{background-color:#E0A916!important; color:#fff !important}
  a.btn-digital:hover, a.btn-digital:focus, a.btn-digital:active{background-color:#fff!important;color:#E0A916 !important;}
.btn-sviluppo{background-color:#0BE09D!important; color:#fff !important}
  a.btn-sviluppo:hover, a.btn-sviluppo:focus, a.btn-sviluppo:active{background-color:#fff!important;color:#0BE09D !important;}

/* footer */
#footer{position:relative;z-index:1;padding-bottom:15px}
#footer p{color:#8A9EFF;font-size: 70%}

/* timeline */
ul.timeline {list-style-type: none;position: relative;padding-left: 1.5rem;}
ul.timeline:before {content: ' '; background: #fff; display: inline-block; position: absolute;left: 16px;width: 4px;
  height: 100%;z-index: 400;border-radius: 1rem;}
li.timeline-item {margin: 20px 0;background-color:#190C4D}
.timeline-arrow {border-top: 0.5rem solid transparent;border-right: 0.5rem solid #190C4D;border-bottom: 0.5rem solid transparent;
  display: block;position: absolute;left: 2rem;}
li.timeline-item::before {content: ' ';background: #190C4D;display: inline-block;position: absolute;border-radius: 50%;
  border: 3px solid #fff;left: 11px;width: 14px;height: 14px;z-index: 400;box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);}
.timeline h3{color:#fff;padding-top:0px}
.timeline .small{color:#8A9EFF}
.timeline b{color:#78fff1}

.badge-adl{background-color:#190C4D;color:#78fff1;font-weight:normal !important;}


@media screen and (max-width: 1140px) {
  .testo h1{font-size:2.2rem}
  .openbtn{top:15px;right:20px;font-size:30px}
  .overlay .closebtn{top:0px;right:13px;font-size:47px}
  #content{padding: 25px;}
  .tool .card-columns {column-count: 2;}
  #head{height: 70px;padding:25px}
  #head .head-overlay{height:70px}
  #head .logo{margin-left: 1px;font-size: 1.2rem}
}

@media screen and (max-width: 720px) {
  body, #head{background-image: none;}
  #head .head-overlay{background-color:#351899;}
  .tool .card-columns {
    column-count: 1;
  }
}