/*
    DEMO STYLE
*/
@font-face {
    font-family: 'Stainless';
    src: url('fonts/Stainless-Regular.woff2') format('woff2'),
        url('fonts/Stainless-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Stainless';
    src: url('fonts/Stainless-Light.woff2') format('woff2'),
        url('fonts/Stainless-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Stainless';
    src: url('fonts/Stainless-Bold.woff2') format('woff2'),
        url('fonts/Stainless-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
html {
    overflow: hidden;
}
body {
    font-family: 'Stainless', sans-serif;
    background-image: url(img/photo-of-blue-sky-low.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    overflow-x: hidden;
	transition: all 0.3s;
}
body.sunset{background-image: url(img/sunshine.jpg);}
p {
    font-family: 'Stainless', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}
:focus {
    outline: 0 !important;
}
.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}
canvas{transition: all 0.3s; margin-top:-20vh;}
canvas.panel-plegado{margin-top:0px;}
/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}
#sidebarCollapse{
    color: #fff;
background-color:#333;
border-color:    #333;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	padding: .0rem 2.75rem;
}
#sidebar {
    text-align:center;
    width: 100%;
    background: transparent;
    color: #fff;
    transition: all 0.3s;
	position: fixed;
bottom: 0;
}
#sidebar .btn-info:not(:disabled):not(.disabled).active:focus,#sidebar .btn-info:not(:disabled):not(.disabled):active:focus{
    box-shadow: none;
}
#sidebar.active.customize {
    /*margin-top: 250px;*/
	bottom:-335px;
}
#sidebar.active.configuration {
    /*margin-top: 250px;*/
    bottom:-174px;
}
#sidebar.active.special {
    /*margin-top: 250px;*/
    bottom:-180px;
}
#sidebar label{margin-right: 5px;text-align: left;display: block;margin-bottom: 5px;}
nav.navbar-light a.nav-item {font-weight: bold; padding: 15px 25px!important;    font-size: 18px;}
.disabled-btn{
    /*pointer-events: none;*/
    opacity:0.6;}
#scheme{font-size:12px; max-width: 150px;}

#colors{margin-top: 0px;margin-left: 0px;display: flex;flex-wrap: wrap;}
#colors input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
	visibility: hidden;
}
#colors label {
    display: inline-block;
    background-color: #ddd;
    padding: 10px 20px;
    font-family: sans-serif, Arial;
    font-size: 16px;
    border: 2px solid #444;
    border-radius: 4px;
}
.custom-select {
	color:#fff;
	background: #666 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
    background-size: auto;
background-size: 8px 10px;
border:none;}
#colors input[type="radio"]:checked + label {
    background-color:#bfb;
    border-color: #4c4;
}
#colors input[type="radio"]:focus + label {
    border: 2px dashed #444;
}
#colors .custom-control:first-child label{background-color:red;}
#colors .custom-control:nth-child(2) label{background-color:blue;}
#colors .custom-control:nth-child(3) label{background-color:orange;}
#colors button{border: none; cursor:pointer;}
#colors button:hover{opacity:0.8;}
#colors button.selected:before{background-image: url(img/color-selected.svg);
position: absolute;
width: 20px;
height: 20px;
display: block;
content: "";
top: 4px;
left: 5px;}
#colors button.selected{border: 1px solid #fff;position: relative;}
#colors button.not-available{/*border: 2px solid red;*/position: relative;}
#colors button.not-available:before{background-image: url(img/color-unavailable.svg);
position: absolute;
width: 16px;
height: 16px;
display: block;
content: "";
top: 8px;
left: 8px;}
.carousel-indicators li {
   
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.carousel-indicators {	bottom: -10px;}
/* selector paracaigudes*/
.titol {
    fill: #fff;
    font-family: 'Stainless', arial;
    font-size: 13px;
    text-align: center;
    font-weight: normal;
}
.titolsub {
    fill: #fff;
    font-family: 'Stainless', arial;
    font-size: 11px;
    text-align: center;
    font-weight: normal;
}
#carouselElements{/*width:100%;*/margin-top: 10px;padding: 0 40px;}
#carouselElements .carousel-inner {    height: 150px;}
#carouselElements .carousel-control-prev {    left: -35px; width:35px;}
#carouselElements .carousel-control-next {    right: 0px; width:35px;}

.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next{position: absolute;
top: 25px;
width: 40px;
height: 40px;
background: rgba(255,255,255,0.3);
border-radius: 50%;}
.owl-carousel .owl-nav button.owl-prev{left:0}
.owl-carousel .owl-nav button.owl-next{right:0;}
.owl-carousel .owl-nav button span{font-size: 40px;
height: 40px;
display: block;
line-height: 25px;}
.owl-theme .owl-nav{margin:0!important;}
.owl-carousel .owl-item {    max-height: 107px;}
.carousel-item .col-3{padding:0;}

/*.item .gran{flex: 0 0 28%;max-width: 28%;}*/
/*.item .petit{flex: 0 0 12%;max-width: 12%;}*/
/*#carouselElements.owl-carousel .owl-item:nth-child(1){width: 25%!important;}
#carouselElements.owl-carousel .owl-item:nth-child(2){width: 25%!important;}*/
html.no-touch #carouselElements.owl-carousel .owl-item:nth-child(1) .item{width: 240px}
html.no-touch #carouselElements.owl-carousel .owl-item:nth-child(2) .item{width: 240px}
html.no-touch #carouselElements.owl-carousel .owl-item:nth-child(3) .item{width: 240px}
html.no-touch #carouselElements.owl-carousel .owl-item:nth-child(4) .item{width: 110px}
html.no-touch #carouselElements.owl-carousel .owl-item:nth-child(5) .item{width: 240px}
html.no-touch #carouselElements.owl-carousel .owl-item:nth-child(6) .item{width: 240px}
/*#carouselElements.owl-carousel .owl-item:nth-child(4){width: 5%!important;}*/
/*#carouselElements.owl-carousel .owl-item:nth-child(5){width: 237.5px!important;}*/
/*#carouselElements.owl-carousel .owl-item:nth-child(6){width: 237.5px!important;}*/
#carouselElements.owl-carousel .owl-item .item div{padding:0;}
/*fi selector paracaigudes*/
#openParachute{
	/*width: 100%;
background-image: url("img/open.svg");
height: 100px;
background-color: transparent;
border: 0;
background-repeat: no-repeat;
color: transparent;

cursor:pointer;*/}

#autoplay{
	/*width: 100%;
background-image: url("img/autoplay.svg");
height: 100px;
background-color: transparent;
border: 0;
background-repeat: no-repeat;
color: transparent;

cursor:pointer;*/}
#openParachute img,#openParachute p,#autoplay img,#autoplay p{ opacity:0.3}
#openParachute:hover img,#autoplay:hover img{ opacity:0.6}
#openParachute.active img,#openParachute.active p,#autoplay.active img,#autoplay.active p{ opacity:1/*background-image: url("img/open-active.svg");*/}
/*#autoplay{ opacity:0.7/*background-image: url("img/autoplay-active.svg");}*/

#controlzone .boto{padding:0;}
#controlzone .boto img,#controlzone .boto a{ max-width:65px; margin:0 auto;}
#controlzone p{color: #ccc;
font-size: 0.8em;
margin: 0px 0 0 0;    line-height: 1em;}
 /* HIDE RADIO */
#controlzone [type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
#controlzone .daylight{text-align: center;border: 2px solid #666;border-radius: 25px;margin-top: 10px;padding: 3px 0;}
#controlzone .daylight .form-check-inline{margin: 15px auto;width: 45%;}
#controlzone .daylight .form-check-inline label{margin:0 auto;}
#controlzone .daylight .form-check-inline label p{margin-top:-5px;}
#controlzone [type=radio] + img {
  cursor: pointer;
}
#controlzone [type=radio] + img,#controlzone [type=radio] + img + p{
  /*outline: 2px solid #f00;*/
	opacity:0.3;margin: 0 auto;display: block;
}
/* CHECKED STYLES */
#controlzone [type=radio]:checked + img,#controlzone [type=radio]:checked + img + p{
  /*outline: 2px solid #f00;*/
	opacity:1;
}
#exampleFormControlTextarea1{background-color: #666; border:none; color:#fff;}
.formularitem{margin-bottom:5px;}
#modal-enviar .formularitem, #modal-guardar .formularitem{    padding-right: 7px;    padding-left: 7px;}
#modal-enviar .contingut{    padding: 0 10px;}

.modal-content{background-color:#444;  color:#fff;  padding-bottom: 25px;}
.modal-content .form-control{    color: #fff;    background-color: rgba(255,255,255,0.2); border:none;}
.modal-content option{color:#333;}
.modal-content  .modal-footer{border:none;}
.modal-content label,.modal-title{color:#fff; }
.modal-content label{font-weight: 300;}
.modal-content h6{color:#fff; text-align: center;font-size: 1.1rem;}
.modal-header {padding: 1rem 1rem 0; border:0;}
.modal-content .close {	color: #fff;    opacity: 1;    text-shadow: none;}
.modal-content .btn-primary {
    color: #fff;
    background-color: #ff0000;
    border-color: #ff0000;
}


#sidebar .sidebar-header {
    padding: 20px;
    background: #333;
	min-height: 120px;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.navbar-light .navbar-nav .nav-link.active{
    color: #ff0000;
}

.form-group{
    margin-bottom: 0px!important;
}
.disabled-svg{
    pointer-events: none;
    opacity: 1;
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article,
a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}

/*-------------------------
	Inline help tip
--------------------------*/
.help{position: relative; width: 40px}
.help sup{background: #222;line-height: 15px;
width: 20px;
display: inline-block;
text-align: center;
font-size: 10px;
height: 20px;
border-radius: 50%;
padding: 3px;
margin-top: -3px;
/*position: absolute;
top: 0;*/
margin-left: 5px;}
.help-tip{
	position: absolute;
	top: 18px;
	right: 18px;
	text-align: center;
	background-color: #BCDBEA;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	font-size: 14px;
	line-height: 26px;
	cursor: default;
}

.help-tip:before{
	content:'?';
	font-weight: bold;
	color:#fff;
}

.help-tip:hover p{
	display:block;
	transform-origin: 100% 0%;

	-webkit-animation: fadeIn 0.3s ease-in-out;
	animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{
	display: none;
	text-align: left;
	background-color: #1E2021;
	padding: 20px;
	width: 300px;
	position: absolute;
	border-radius: 3px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	right: -4px;
	color: #FFF;
	font-size: 13px;
	line-height: 1.4;
}

.help-tip p:before{
	position: absolute;
	content: '';
	width:0;
	height: 0;
	border:6px solid transparent;
	border-bottom-color:#1E2021;
	right:10px;
	top:-12px;
}

.help-tip p:after{
	width:100%;
	height:40px;
	content:'';
	position: absolute;
	top:-40px;
	left:0;
}
.modal-custom{
    top:50px!important;
}

@-webkit-keyframes fadeIn {
	0% { 
		opacity:0; 
		transform: scale(0.6);
	}

	100% {
		opacity:100%;
		transform: scale(1);
	}
}

@keyframes fadeIn {
	0% { opacity:0; }
	100% { opacity:100%; }
}
/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}
.show-mob{display:none}
	.hidden-mob{display:block}
/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
    /* ... */
}
/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
    #controlzone .boto { /*   display:none;*/}
	.show-mob{display:block}
	.hidden-mob{display:none}
	
}
@media (max-width: 1024px) {
	
}
@media (max-width: 767px) {
	body{background-size: cover;}
	.show-mob{display:block}
	.hidden-mob{display:none}
	.bloc{/*margin-bottom:15px;*/}
	#sidebar .sidebar-header {padding-bottom: 0;}
	.owl-carousel .owl-item {    max-height: inherit;}
	#colors > button {    width: 26px;		height: 26px;padding:0;}
	#controlzone{margin-bottom:10px;}
	#controlzone .boto button{    height: 70px;}
	#colorschemes{width:auto; margin-left:25px;}
	#carouselElements {margin-top: 0px;}
	#controlzone .boto img, #controlzone .boto a{    padding: 0;    width: 40px;    margin: 0 auto;}
	#carouselElements.owl-carousel .owl-item:nth-child(1) .item{width: auto}
#carouselElements.owl-carousel .owl-item:nth-child(2) .item{width: auto}
#carouselElements.owl-carousel .owl-item:nth-child(3) .item{width: auto}
#carouselElements.owl-carousel .owl-item:nth-child(4) .item{width: 160px;margin: 0 auto;}
#carouselElements.owl-carousel .owl-item:nth-child(5) .item{width: auto}
#carouselElements.owl-carousel .owl-item:nth-child(6) .item{width: auto}
	nav.navbar-light a.nav-item {font-weight: bold; padding: 15px 10px!important;    font-size: 14px;}
	.owl-theme .owl-dots {display:none;}
	#sidebar .configuration .col-md-3{width:50%; margin-bottom:10px;}
	#sidebar .special{margin-bottom:25px!important;}
	#sidebar .configuration{margin-bottom:25px!important;}
	#colors button.not-available:before {    top: 6px;    left: 5px;}
	#colors button.selected:before {    top: 1px;    left: 2px;}
    #sidebar {
        
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
       
    }
	canvas{transition: all 0.3s; margin-top:-32vh;}
canvas.panel-plegado{margin-top:0px;}
	.item .petit{height: 50px;}
	#carouselElements.owl-carousel .owl-item {    height: 130px;}
	.titolcontrols{font-size:10px;}
	#controlzone p{font-size:9px; line-height:9px;    margin-top: -3px;}
}
#brandlogo{
padding: 25px;
max-width: 250px;
width: 45%;
min-width: 140px;
opacity: 0.5;
position: absolute;
top: 50px;
pointer-events: none;}

@media (max-width: 400px) {
	#colors > button {
    width: 23px;
    height: 23px; padding:0;}
	#carouselElements.owl-carousel .owl-item {    height: auto;}
	.configuration .col{flex: 0 0 50%;    max-width: 50%; margin-bottom:10px;}
}
@media (max-width: 600px) and (orientation: landscape) {
	#carouselElements.owl-carousel .owl-item {    height: 95px;}
	#colors > button {    width: 23px;    height: 23px; padding:0;}
}
@media (max-width: 890px) and (orientation: landscape) {
	/*mobile horitzontal*/
	.container {    max-width: 100%;}
	#sidebar .sidebar-header {		padding: 10px 20px;}
	#Elements,#colorlist{    flex: 0 0 50%;    max-width: 50%;}
	#Elements{    margin-top: -47px;}
	#colors > button {    /*width: 22px;    height: 22px; */   margin-right: 8px;    margin-bottom: 8px;}
	.titolcontrols {display:none;}
	#carouselElements.owl-carousel .owl-item {    height: 82px;   }
	#carouselElements.owl-carousel .owl-item  svg{height: 82px;}
	#controlzone .boto {       flex: 0 20%;    max-width: 20%;}
	html.touch #sidebar .col-md-3,html.touch #sidebar .col-md-10,html.touch #controlzone.col-md-2{    flex: 0 0 100%;    max-width: 100%;}
	html.touch #carouselElements .col-md-12{/*flex: 0 0 50%;    max-width: 50%;*/}
	html.touch #carouselElements.owl-carousel .owl-item .item,html.touch #carouselElements.owl-carousel .owl-item .item div { /*margin: 0 auto;
		width: auto!important;*/}
	html.touch #controlzone .boto img, #controlzone .boto a {    max-width: 40px;}

}

@media (min-width: 800px) and (orientation: landscape) {
html.touch #carouselElements.owl-carousel .owl-item .item{width: 295px}
/*html.touch #carouselElements.owl-carousel .owl-item:nth-child(1) .item{width: 295px}
html.touch #carouselElements.owl-carousel .owl-item:nth-child(2) .item{width: 295px}
html.touch #carouselElements.owl-carousel .owl-item:nth-child(3) .item{width: 295px}
html.touch #carouselElements.owl-carousel .owl-item:nth-child(4) .item{width: 295px}
html.touch #carouselElements.owl-carousel .owl-item:nth-child(5) .item{width: 295px}
html.touch #carouselElements.owl-carousel .owl-item:nth-child(6) .item{width: 295px}*/
html.touch.iPad #carouselElements.owl-carousel .owl-item .item{width: auto}	
html.touch.iPad #carouselElements.owl-carousel .owl-item .item .petit svg{height:95px;}	
}
/*tablets petites*/
@media (min-width: 1024px) and (orientation: landscape) {
html.touch #carouselElements.owl-carousel .owl-item .item{width: 245px}
html.touch #carouselElements.owl-carousel .owl-item .item .petit svg{height:105px;}	
}
@media (min-width: 768px) and (orientation: portrait) {
html.touch #carouselElements.owl-carousel .owl-item {    max-height: 225px;}
html.touch #carouselElements.owl-carousel .owl-item .item .petit svg{height:225px;}		
	html.touch.iPad #carouselElements.owl-carousel .owl-item .item svg{height:155px;}	
}
@media (max-width: 575px) and (orientation: portrait) {
#brandlogo{top: 0px!important;}
}
/*fi tablets petites*/

@media (max-width: 1366px) and (orientation: landscape) {
	/*ipadpro*/
html.touch.ipadpro #carouselElements.owl-carousel .owl-item .item {    width: 285px;}
	
	
}
html.touch.ipadpro .owl-carousel .owl-item {    max-height: 130px;}
html.touch.ipadpro .owl-carousel .owl-item .petit svg{    height: 130px;}
html.touch.ipadpro #controlzone.col-md-2{    flex: 0 0 16.666667%;    max-width: 16.666667%;}
html.touch.ipadpro #controlzone .daylight,html.touch.iPad #controlzone .daylight  {display:block;}


@media (orientation: portrait) {
body {	background-size: cover;}
html.touch.iPad #carouselElements.owl-carousel .owl-item .item .petit svg{    height: 105px;}

}
@media (orientation: landscape) {
html.iPad body {	background-size: cover;}
}

/* Pol Ord; 20201204 */
@media (min-width: 1025px) {
    #logo {
        padding: 25px;
        max-width: 250px;
        width: 45%;
        min-width: 140px;
        opacity: 0.5;
        position: absolute;
        top: 50px;
        right: 0px;
        pointer-events: none;
    }
    }

@media (min-width: 576px) {
    #logo {
        padding: 25px;
        max-width: 250px;
        width: 45%;
        min-width: 140px;
        opacity: 0.5;
        position: absolute;
        top: 50px!important;
        right: 0px;
        pointer-events: none;
    }
}
@media (min-width: 300px) {
    #logo {
        padding: 25px;
        max-width: 250px;
        width: 45%;
        min-width: 140px;
        opacity: 0.5;
        position: absolute;
        top: 0px;
        right: 0px;
        pointer-events: none;
    }
}