/* GENERALI ------------------------------------------------ */
body, .index-page, {
  overflow-x: hidden !important;
  /* overflow-y: scroll !important; */
  -webkit-overflow-scrolling: touch !important;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.main {
  overflow-x: hidden !important;
}

/* body::-webkit-scrollbar, .index-page::-webkit-scrollbar, .main::-webkit-scrollbar {
  width: 0 !important
} */

.material-icons {
  font-feature-settings: 'liga';
}


.lightBlueColor {
  color: rgba(0, 162, 255, 0.85) !important;
}

.lightBlueBkg {
  background-color: rgba(0, 162, 255, 0.85) !important;
}

.yellowColor {
  color: rgba(248, 186, 0, 0.85) !important;
}

.yellowBkg {
  background-color: rgba(248, 186, 0, 0.85) !important;
}

.greenColor {
  color: rgba(97, 216, 54, 0.85) !important;
}

.greenBkg {
  background-color: rgba(97, 216, 54, 0.85) !important;
}

.redColor {
  color: #cf3929 !important;
}

.redBkg {
  background-color: #cf3929 !important;
}

.title,
.card-title,
.info-title,
.footer-brand,
.footer-big h5,
.footer-big h4,
.media .media-heading {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

a {
  color: #f33527;
}

a:hover {
  color: #f33527;
}

/*.index-page .header-filter:after {
  background: rgba(7, 7, 7, 0.6);
  background: linear-gradient(45deg, rgba(7, 7, 7, 0.8) 0%, rgba(7, 7, 7, 0.45) 100%);
  background: -moz-linear-gradient(135deg, rgba(7, 7, 7, 0.8) 0%, rgba(7, 7, 7, 0.45) 100%);
  background: -webkit-linear-gradient(135deg, rgba(7, 7, 7, 0.8) 0%, rgba(7, 7, 7, 0.45) 100%);
}*/

.section-light-gray {
  background-color: #f7f7f7;
  background: radial-gradient(ellipse at center, #ffffff 0%, #eeeeee 100%);
  background-size: 550% 450%;
}

.description {
  color: #6b6b6b
}

.section-light-gray .description {
  color: #6b6a6a;
}

.section-dark .description,
.section-dark .card-plain .card-description,
.section-dark .card-plain .icon,
.section-image .description,
.section-image .card-plain .card-description,
.section-image .card-plain .icon {
  color: rgba(255, 255, 255, 0.96);
}

.card-background:after, .back-background:after, .front-background:after {
  background-color: rgba(0, 0, 0, 0.4);
}

.card [class*="header-"] .author a,
.card [class*="header-"] .stats,
.card [class*="header-"] .card-category,
.card [class*="header-"] .card-description,
.card[class*="bg-"] .author a,
.card[class*="bg-"] .stats,
.card[class*="bg-"] .card-category,
.card[class*="bg-"] .card-description {
  font-weight: 400;
}

.section-gray {
  background: #ececec !important;
}

.sectionCategory {
  color: #a0a0a0;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.titleWithSmall {
  margin-top: 0;
}

.modal .modal-dialog {
  margin-top: 30px;
}

/* NAVBAR ------------------------------------------------ */
.navbar .navbar-brand {
  font-size: 1.2rem;
}

.nav-logo div {
  width: 34px;
}

.nav-logo {
  height: 39px;
  margin-left: 8px;
}

.nav-logo .st0 {
  fill: #555 !important;
}

.navbar-transparent .nav-logo .st0 {
  fill: white !important;
}

.navbar .navbar-nav .nav-item .nav-link {
  font-size: 13px;
}

.navbar-transparent .navbar-nav .current-nav-item {
  border-bottom: 1px solid white;
}

.navbar-nav .current-nav-item {
  border-bottom: 1px solid #555555;
}

.nav-open .navbar-collapse .current-nav-item {
  border: none !important;
  background-color: #fff;
  border-left: 1px solid #d4d4d4 !important;
}

.dropdown-item:hover {
  background-color: #f33527 !important;
}

.dropdown-menu .current-drop-item {
  background-color: #f33527;
  color: #FFFFFF;
  -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
}

.navbar-collapse::after {
  background-color: #f9f9f9 !important;
  border-left: 1px solid #d4d4d4 !important;
}

/*.disabled-link {
  color: inherit;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}*/

/*.disabled-link:hover {
  background-color: transparent !important;
}*/

/* hero header */
/*.index-page .brand h1 {
  font-size: 4.8rem;
}*/

/* HEADER ------------------------------------------------ */
.header-logo {
  width: 130px;
}

.index-page .brand h3 {
  font-size: 1.9rem;
  max-width: 90%;
}

.presentation-page .page-header:not(.header-small), .index-page .page-header:not(.header-small) {
  height: 94vh;
}

.index-page .header-filter:after {
  background: rgba(7, 7, 7, 0.45);
  background: linear-gradient(-135deg, rgba(7, 7, 7, 0.6) 0%, rgba(7, 7, 7, 0.25) 100%);
  background: -moz-linear-gradient(135deg, rgba(7, 7, 7, 0.6) 0%, rgba(7, 7, 7, 0.25) 100%);
  background: -webkit-linear-gradient(135deg, rgba(7, 7, 7, 0.6) 0%, rgba(7, 7, 7, 0.25) 100%);
}

/* NAVIGAZIONE VERTICALE ------------------------------------------------ */
#cd-vertical-nav .cd-dot {
  background-color: #070707 !important;
}

/* Contact us ------------------------------------------------ */
#contactus .card .card-header-primary,
#contactus .card.bg-primary,
#contactus .card.card-rotate.bg-primary .front,
#contactus .card.card-rotate.bg-primary .back {
  background: linear-gradient(60deg, #383838, #070707);
}

#contactus {
  background-color: #00172b;
}

.designedBy {
  margin: 0px;
  text-align: left;
  color: #c5c5c5;
  font-size: 0.8rem;
}

/*.contactus-1 {
  padding-top: 100px;
  padding-bottom: 110px;
}*/

#contactus .card .card-header-primary {
  -webkit-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.2), 0 13px 24px -11px rgba(7, 7, 7, 0.5);
  box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.2), 0 13px 24px -11px rgba(7, 7, 7, 0.5);
}

#contactus .btn-primary {
  background-color: #070707;
}

#contactus .form-control,
#contactus .is-focused .form-control {
  background-image: linear-gradient(to top, #070707 2px, rgba(156, 39, 176, 0) 2px), linear-gradient(to top, #d2d2d2 1px, rgba(210, 210, 210, 0) 1px);
}

.info p {
  color: #b4b4b4;
}

#contactus .info-title a {
  color: white;
}

#contactus .section-image {
  /*background-position: 41% 50%;*/
  /*background-size: contain;*/
  background-repeat: no-repeat;
}

#contactus .section-image:after {
  background-color: rgba(0, 0, 0, 0.1);
}

.mailPhoneContainer {
  display: inline-flex;
}

.contactus-1 .info:first-child {
  margin-top: 0px;
}

#contactus .info-title a:hover {
  text-decoration: underline;
}

.officeTitle {
  text-transform: uppercase;
  margin-bottom: 0px;
  font-weight: 400;
}

.maps-link {
  color: inherit !important;
  font-weight: 400;
}

.maps-link:hover {
  text-decoration: underline;
}

/* Footer ------------------------------------------------ */
.footer-black {
  background: #1f1f1f;
  background: radial-gradient(ellipse at center, #2d2d2d 0%, #1b1b1b 100%);
}

footer a:hover {
  color: white;
}

/* MEDIA QUERY ---------------------------------------------------------------- */
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
  .sectionCategory {
    font-weight: 500;
  }

  #contactus .description {
    font-weight: 400;
  }

  #contactus .info.info-horizontal p {
    color: whitesmoke;
    font-weight: 400;
    font-size: 0.9rem;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {
  .sectionCategory {
    font-weight: 500;
  }

  .titleWithSmall {
    font-size: 2.1rem;
  }

  #contactus .section-image:after {
    background-color: rgba(0, 0, 0, 0.7);
  }
}

/* Extra Small devices (phones, 576px and down) */
@media (max-width: 575px) {
  .sectionCategory {
    font-weight: 500;
  }

  #contactus .contactus-1 {
    padding: 50px 0px;
  }

  #contactus .section-image:after {
    background-color: rgba(0, 0, 0, 0.7);
  }

  .mailPhoneContainer {
    display: flex;
    flex-direction: column;
  }

  .mailPhoneContainer .info-horizontal {
    margin-left: 0px !important;
  }

  .designedBy {
    font-size: 0.7rem;
  }
}

/* Super Extra Small devices (iPhone 5/SE) */
@media (max-width: 340px) {

}

/*  FROM FRAMEWORK  ------------------------------------------------  */
/*  PRESENTION PAGE   */

/* Section Components */

.presentation-page {
  overflow-x: hidden;
}

.section-components .title {
  margin-top: 60px;
  margin-bottom: 5px;
}

.section-components .description {
  margin-top: 35px;
}

.section-components .image-container {
  height: 560px;
  position: relative;
}

.section-components .components-macbook {
  width: auto;
  left: -100px;
  top: 0;
  height: 100%;
  position: absolute;
}

.section-components .table-img,
.section-components .share-btn-img,
.section-components .coloured-card-btn-img,
.section-components .coloured-card-img,
.section-components .social-img,
.section-components .pin-btn-img {
  position: absolute;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}

.section-components .coloured-card-img {
  left: 90%;
  top: 11%;
  height: 90px;
  border-radius: 2px;
}

.section-components .social-img {
  left: 70%;
  top: 67%;
  height: 40px;
}

.section-components .coloured-card-btn-img {
  left: 35%;
  top: 2%;
  height: 125px;
  border-radius: 6px;
}

.section-components .table-img {
  left: -13%;
  top: 27%;
  height: 175px;
  border-radius: 2px;
}

.section-components .pin-btn-img {
  left: 0%;
  top: 68%;
  height: 25px;
  border-radius: 3px;
}

.section-components .share-btn-img {
  left: 3%;
  top: -3%;
  height: 25px;
}

/* Section Content */

.section-content .section-description {
  margin-top: 100px;
}

.section-content .title {
  margin-bottom: 5px;
}

.section-content .section-description .title+.description {
  margin-top: 0;
}

.section-content .description {
  margin-top: 35px;
}

.section-content .image-container {
  max-width: 900px;
  position: relative;
}

.section-content .image-container .ipad-img {
  width: 100%;
  transition: transform .6s .9s;
  z-index: 2;
}

.section-content .image-container .area-img,
.section-content .image-container .info-img {
  position: absolute;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translate3D(0px, 100px, 0px);
  -webkit-transform: translate3D(0px, 100px, 0px);
}

.section-content .image-container .area-img {
  top: 10%;
  left: 60%;
  height: 300px;
  width: 250px;
  z-index: 2;
  -webkit-transition: all 1s ease-out 0s;
  -moz-transition: all 1s ease-out 0s;
  -o-transition: all 1s ease-out 0s;
  -ms-transition: all 1s ease-out 0s;
  transition: all 1s ease-out 0s;
}

.section-content .image-container .info-img {
  top: 50%;
  left: 0%;
  height: 200px;
  width: 300px;
  -webkit-transition: all 1s ease-out 0s;
  -moz-transition: all 1s ease-out 0s;
  -o-transition: all 1s ease-out 0s;
  -ms-transition: all 1s ease-out 0s;
  transition: all 1s ease-out 0s;
}

.animated {
  transform: translate3D(0px, 0px, 0px) !important;
  -webkit-transform: translate3D(0px, 0px, 0px) !important;
  opacity: 1 !important;
}

/*  animated images  */

@-webkit-keyframes Floatingy {
  from {
    -webkit-transform: translate(0, 0px);
  }
  65% {
    -webkit-transform: translate(50px, 0);
  }
  to {
    -webkit-transform: translate(0, -0px);
  }
}

@-moz-keyframes Floatingy {
  from {
    -moz-transform: translate(0, 0px);
  }
  65% {
    -moz-transform: translate(50px, 0);
  }
  to {
    -moz-transform: translate(0, -0px);
  }
}

@-webkit-keyframes Floatingx {
  from {
    -webkit-transform: translate(50px, 0px);
  }
  65% {
    -webkit-transform: translate(0, 0);
  }
  to {
    -webkit-transform: translate(50px, -0px);
  }
}

@-moz-keyframes Floatingx {
  from {
    -moz-transform: translate(50px, 0px);
  }
  65% {
    -moz-transform: translate(0, 0);
  }
  to {
    -moz-transform: translate(50px, -0px);
  }
}

.table-img,
.coloured-card-img,
.coloured-card-btn-img,
.pin-btn-img,
.share-btn-img,
.social-img {
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: Floatingy;
  -moz-animation-name: Floatingy;
  float: left;
}

.table-img {
  -webkit-animation-duration: 14s;
  -moz-animation-duration: 14s;
  -webkit-animation-name: Floatingx;
  -moz-animation-name: Floatingx;
}

.coloured-card-img {
  -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
  -webkit-animation-name: Floatingx;
  -moz-animation-name: Floatingx;
}

.coloured-card-btn-img {
  -webkit-animation-duration: 18s;
  -moz-animation-duration: 18s;
}

.pin-btn-img {
  -webkit-animation-duration: 15s;
  -moz-animation-duration: 15s;
}

.share-btn-img {
  -webkit-animation-duration: 11s;
  -moz-animation-duration: 11s;
}

.social-img {
  -webkit-animation-duration: 16s;
  -moz-animation-duration: 16s;
  -webkit-animation-name: Floatingx;
  -moz-animation-name: Floatingx;
}

/* Presentation Page OnScroll Animation */

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.hinge {
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  animation-duration: .75s;
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  animation-name: flash;
}

.fixed-section {
  top: 90px;
  max-height: 71vh;
  overflow: scroll;
  border-bottom: 1px solid rgba(220, 220, 220, .8);
}

.fixed-section ul li {
  list-style: none;
}

.fixed-section li a {
  font-size: 14px;
  padding: 2px;
  display: block;
  color: #666666;
}

.fixed-section li a.active {
  color: #00bbff;
}

.fixed-section.float {
  position: fixed;
  top: 100px;
  width: 200px;
  margin-top: 0;
}

@media (max-width: 991px) {
  .fixed-section.affix {
    position: relative;
    margin-bottom: 100px;
  }
}

#images h4 {
  margin-bottom: 30px;
}

#javascriptComponents {
  padding-bottom: 0;
}

#javascriptComponents .btn-raised {
  margin: 10px 0px;
}