﻿.container {
  max-width: 960px;
}

/*
 * Custom translucent site header
 */
.navbar > .container {
	display: grid!important;
     justify-content: normal!important;
}
.navbar p {
	color: #757575;
}
.navbar .row {
	margin: 0!important;
}
.navbar .row {
	justify-content: space-between;
}
.navbar-light .navbar-brand {
    color: rgb(127, 127, 127)!important;
}
nav {
  background: #fff;
/*background: linear-gradient(180deg, rgba(218,245,255,0.95) 0%, rgba(218,245,255,0.95) 74%, rgba(234,248,252,0.65) 100%);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);*/
}
nav .nav-link {
  color: #333!important;
  transition: ease-in-out color .15s;
  padding: 0!important;
  font-size: 1rem;
  font-weight: 400;
}
nav .nav-link:hover {
  color: #b90000!important;
  text-decoration: none;
	text-decoration: underline;
/*  background: #e4e4e4;*/
/*background: linear-gradient(180deg, rgba(171,229,250,0.90) 0%, rgba(171,229,250,0.90) 74%, rgba(205,241,255,0.65) 100%);*/

}
nav .nav-item {
	text-align: center;
	margin: auto .5rem;
}
nav .nav-item:first-of-type {
	margin-left: auto;
}
nav .nav-item:last-of-type {
	margin-right: 0;
}

@media (min-width: 995px) and (max-width: 1199px) {
nav .nav-item {
	/*margin-left: 1rem;*/
	text-align: center;
}
}
@media (min-width: 900px) and (max-width: 994px) {
nav .nav-item {
	/*margin-left: .5rem;*/
	text-align: center;
}
	.navbar .container {
		margin: 0;
		padding: 0;
		max-width: none;
	}
}
	.navbar .ml-auto {
		margin: 0!important;
		display: contents;
	}
@media (min-width: 768px) and (max-width: 1199px) {

	.navbar .container {
		margin: 0;
		padding: 0;
		max-width: none;
	}
	.navbar-brand {
	margin: auto!important;
}
}
@media (max-width: 767px) {
nav .nav-item {
	/*margin-left: 0;*/
	text-align: center;
}
/*nav .nav-item:first-of-type {
	margin: auto!important;
}*/
}
@media (min-width: 768px) and (max-width: 970px) {
  .navbar-nav {
    width: 100%;
  }

}


/*nav .nav-link:last-of-type {
  margin-right: 20px;
}*/

.hrnav {
	margin: 0;
	border-color: rgba(0, 0, 0, .3)
}
/*
 * Dummy devices (replace them with your own or something else entirely!)
 */

.dropdown-menu {
  background: rgb(255,255,255)!important;
/*background: linear-gradient(180deg, rgba(218,245,255,0.95) 0%, rgba(218,245,255,0.95) 74%, rgba(234,248,252,0.65) 100%)!important;
  -webkit-backdrop-filter: saturate(180%) blur(20px)!important;
  backdrop-filter: saturate(180%) blur(20px)!important;*/
	top: 99%!important;
	
	margin: 0!important;
	border: 0 solid rgba(0, 0, 0, 0)!important;
	box-shadow: 0 .2rem .5rem -.2rem rgba(0,0,0,0.1);
}
.dropdown-submenu {
 position: relative;
 }

.dropdown-menu a {
	text-align: center;
}
@media (max-width: 767px){
.navbar-nav .dropdown-menu {
	position: absolute!important;
}
.dropdownNavServices,
.dropdownNavSoft {
		left: 0!important;
		right: 0!important;
	}
}
.menuX3,
.dropdown-submenu {
  color: rgba(0, 0, 0, 0.5)!important;
	padding: 5px;
 }

.menuX3:hover,
.dropdown-submenu:hover {
	background: rgb(171,229,250);
	background: linear-gradient(180deg, rgba(171,229,250,0.90) 0%, rgba(171,229,250,0.90) 74%, rgba(205,241,255,0.65) 100%);
	color: rgba(0, 0, 0, 0.9)!important;
	cursor: pointer;
}
/*.dropdown>.dropdown-menu {
	left: -50%!important;
}*/
.menuX3>a {
  font-size: .85rem!important;
}

.dropdown-submenu>a {
	 font-size: .95rem!important;
}

.menuX3>a,
.dropdown-submenu>a {
  padding: .3rem;
  font-weight: 600;
	color:inherit;
 }

.menuX3>a:hover,
 .dropdown-submenu>a:hover  {
	color:inherit;
}

 .dropdown-submenu>.dropdown-menu {
 top: 0!important;
 left: 100%;
 margin-top: -6px;
 margin-left: -1px;
 -webkit-border-radius: 0 6px 6px 6px;
 -moz-border-radius: 0 6px 6px 6px;
 border-radius: 0 6px 6px 6px;
 }
 
 .dropdown-submenu:hover>.dropdown-menu {
 display: block;
 }
 
.dropdown-submenu>a:after {
 display: block;
 content: " ";
 float: right;
 width: 0;
 height: 0;
 border-color: transparent;
 border-style: solid;
 border-width: 5px 0 5px 5px;
 border-left-color: #cccccc;
 margin-top: 5px;
 margin-right: 10px;
 }
 .dropdown-submenu:hover>a:after {
 border-left-color: #ffffff;
 }
 
 .dropdown-submenu.pull-left {
 float: none;
 }
 
 .dropdown-submenu.pull-left>.dropdown-menu {
 left: -100%;
 margin-left: 10px;
 -webkit-border-radius: 6px 0 6px 6px;
 -moz-border-radius: 6px 0 6px 6px;
 border-radius: 6px 0 6px 6px;
 }


.product-device {
  position: absolute;
  right: 10%;
  bottom: -30%;
  width: 300px;
  height: 540px;
  background-color: #333;
  border-radius: 21px;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.product-device::before {
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  background-color: rgba(255, 255, 255, .1);
  border-radius: 5px;
}

.product-device-2 {
  top: -25%;
  right: auto;
  bottom: 0;
  left: 5%;
  background-color: #e5e5e5;
}


/*
 * Extra utilities
 */

.flex-equal > * {
  -ms-flex: 1;
  flex: 1;
}
@media (min-width: 768px) {
  .flex-md-equal > * {
    -ms-flex: 1;
    flex: 1;
  }
}

.overflow-hidden { overflow: hidden; }




/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
.headerCarousel .carousel{  
 position: absolute!important;
    width: 100%!important;
  z-index: 1;}  
/* Carousel base class */
/* Since positioning the image, we need to help out the caption */

/* Declare heights because of positioning of img element */
#headerCarouselhome .carousel-item {
  height: 50vh;
}

@media screen and (max-width: 479px) {
#headerCarouselhome .carousel-item {
  height: 17rem;
}
}

#headerCarouselpage .carousel-item {
  height: 50vh;
}

#CarouselModalImg .carousel-item {
	  height: 70vh;
}


.carousel-control-prev-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%redff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%redff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

.headerCarousel .carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
}

.headerCarousel [class*="carousel-img"] {  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  text-align: center;
  vertical-align: middle;
  position: relative;
}
@media screen and (max-width: 479px) {
	.headerCarousel .carousel-img2 {  
  background-position: center right!important;
}
}
.carousel-item > img {
  max-width: 100%;
}
#fotoCarousel ol {
  margin-bottom: 5rem!important;
}

#headerCarouselhome ol {
  margin-bottom: 1rem!important;
}
@media (min-width: 480px) and (max-width: 767px) {
#headerCarouselhome ol {
  margin-bottom: .7rem!important;
}
}

@media screen and (max-width: 479px) {
#headerCarouselhome ol {
  margin-bottom: .5rem!important;
}
}
/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}
