@font-face {
    font-family: 'Sansation';
    src: url('../fonts/Sansation_Bold.ttf'); 
    src: 
        local('Sansation Bold'),
        local('Sansation-Bold'),
        url('../fonts/Sansation_Bold.ttf') 
        format('truetype');
    font-weight: bold;
    font-style: bold;
}

@font-face {
  font-family: "Sansation";
  src: url("../fonts/Sansation_Regular.ttf");

  font-family: 'Sansation';
  src: url('../fonts/Sansation_Regular.ttf'); /* IE9 Compat Modes */
  src: 
      local('Sansation'),
      url('../fonts/Sansation_Regular.ttf') 
      format('truetype');
  font-weight: normal;
  font-style: normal;
}

html, body{
    font-family: "Sansation";
    line-height: 1;
}

body{
	/*background: url(../imgs/bck_global.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position-x: 113%;
    background-position-y: 85%;*/
}

.hoverable:hover{
  cursor: pointer;
}

.hover:hover{
  cursor: pointer;
}

#sidenav-overlay{
	z-index: 49;
}

.toast-notif-infos{
	background-color: #0098db;
	color: white;
}

.blue{
	background-color: #0098db !important;
}

.blue-text{
	color: #0098db !important;
}

.loading-container{
	display: none;
}

.bordered-left-black{
	border-left: 4px solid #424242;
}

.bordered-left-blue{
	border-left: 4px solid #0098db;
}

.bordered-left-green{
  border-left: 4px solid #2ecc71;
}

.bordered-left-red{
  border-left: 4px solid #e74c3c;
}

.row-no-margin{
	margin-left: 0 !important;
	margin-right: 0 !important;
}


.cart-loader{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(7,7,7,0.6);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	transition: all 0.7s ease;
	display: none;
	opacity: 0;
}

.cart-loader .big{
	width: 200px;
	height: 200px;
}

.cart-loader p{
	font-size: 24px;
}


.input-field-melpro label {
 color: #acafb1;
}
/* label focus color */
.input-field-melpro input[type=text]:focus + label, .input-field-melpro input[type=tel]:focus + label {
 color: #0098db;
}
/* label underline focus color */
.input-field-melpro input[type=text]:focus, .input-field-melpro input[type=tel]:focus {
 border-bottom: 1px solid #0098db;
 box-shadow: 0 1px 0 0 #0098db;
}
/* valid color */
.input-field-melpro input[type=text].valid, .input-field-melpro input[type=tel].valid {
 border-bottom: 1px solid #4CAF50;
 box-shadow: 0 1px 0 0 #4CAF50;
}
/* invalid color */
.input-field-melpro input[type=text].invalid, .input-field-melpro input[type=tel].invalid {
 border-bottom: 1px solid #f44336;
 box-shadow: 0 1px 0 0 #f44336;
}
/* icon prefix focus color */
.input-field-melpro .prefix.active {
 color: #0098db;
}

[type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:after{
	background-color: #0098db;
}

[type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:before, [type="radio"].with-gap:checked+label:after{
	border: 2px solid #0098db;
}


.ariane-container{
	font-size: 20px;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #f0dbdb;
  line-height: 0.;
  height: 38px;
  line-height: 1.8;
}

.ariane-container a{
	margin: 0px 15px;
}


.nomenc-title{
	font-size: 2rem;
    padding: 11px;
}

.card-buttons{
	background-color: white;
	position: absolute; 
	transition: all 0.4s ease-in;
	opacity: 0;
	width: 105%;
	height: 100%;
	left: 100%;
	top: 0px;
	box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.card-buttons button{
	border-radius: 0px;
}


.card-product{
	overflow: visible !important;
}

.col-product{
	transition: all 0.4s ease;
	-webkit-transition: left 0.5s, bottom 0.5s;
	position: relative;
	top: 0;
	left: 0px !important;
}

.col-product:hover{
	left: -5% !important;
}



.col-product:hover .card-buttons{
	z-index: 40;
	opacity: 1;
	width: 100%;
    left: 106%;
    padding: 25px;
}

.cart-product-btn {
	width: 2.3rem;
    top: 4px;
    left: -14px;
}

.card.small .card-image+.card-content, .card.medium .card-image+.card-content, .card.large .card-image+.card-content{
	max-height: 60%;
}

.card-content--product{
  padding-top: 0px !important;
}
/* styles for '...' */ 
.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 3.6em; 
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: justify;  
  /* place for '...' */
  margin-right: -1em;
  padding-right: 1em;
}
/* create the ... */
.block-with-text:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
}

@media screen and (max-width: 600px) {

	.card.small{
		height: 100%;
		padding-bottom: 25px;
	}

	.card.small .card-action, .card.medium .card-action, .card.large .card-action{
		bottom: -5px;
	}

	.card-buttons{
		position: initial;
		opacity: 1;
		width: 100%;
		height: 100%;
		left: 100%;
		top: 0px;
		box-shadow: none;
	}

	.card-buttons .row{
		margin-left: 0px;
		margin-right: 0px;
	}

	.col-product:hover{
		left: 0% !important;
	}

	.col-product:hover .card-buttons{
		width: 100%;
		height: 100%;
		left: 0%;
		padding: 0px;
	}

}


@media print {

  .navbar-fixed nav{
    position: static;
  }

  .button-collapse{
    display: none;
  }

  .btn-logout{
    display: none;
  }

  #search-motor{
    display: none;
  }

  .gammes-browser{
    margin-top: 15px;
  }

  .target-pushpin{
    display: none;
  }

  .product-carac{
    margin-top: 300px;
  }

  footer.page-footer{
    display: none !important;
  }
  
  .card-image{
    max-width: 100px;
  }

  .row .col.s10{
    width: 100%;
  }

}