* {box-sizing: border-box;}

/*.ptitle h2 
{
	background-color:#f05a28;
	color:#fff;
	padding:8px;
}*/

/*.ptitle::after
{
	content: '';
	position: absolute;
	z-index: 2;
	bottom:250px;
	right:100px;
 	height: 100px;
	width: 1500px;
	background-image: linear-gradient(to left, #fdfdfd, rgba(248, 248, 248, 0))
}*/

.image {
	display:inline-block;
	position: relative;
	border: 0.1875em solid #f05a28;
	overflow: hidden;
	cursor:pointer;
}

/*.ptitle{border-bottom:1px dashed #e6e6e6;}*/

.content span {
	color:#fff;
	position: absolute;
	left: 0;
	width: 100%;
	font-size: 1.45em;
	font-weight:normal;
	letter-spacing: -1px;
	background: rgb(240, 90, 40); /* fallback color */
	background: rgba(240, 90, 40, 0.8);
	padding: 6px;
	letter-spacing: 1px;
	z-index: 2;
}

.style_prevu_kit
{
	border:0;
	-webkit-transition: all 400ms ease-in;
	-webkit-transform: scale(1);
	-ms-transition: all 400ms ease-in;
	-ms-transform: scale(1);
	-moz-transition: all 400ms ease-in;
	-moz-transform: scale(1);
	transition: all 400ms ease-in;
	transform: scale(1)

}

.image:hover .style_prevu_kit
{
	z-index: 2;
	-webkit-transition: all 400ms ease-in;
	-webkit-transform: scale(1.2);
	-ms-transition: all 400ms ease-in;
	-ms-transform: scale(1.2);
	-moz-transition: all 400ms ease-in;
	-moz-transform: scale(1.2);
	transition: all 400ms ease-in;
	transform: scale(1.2);
}

.main1 {text-align:center;}
.main1 .image {width:13em; height: 18em; margin:5px;}
.main1 .content span {bottom: -5px;}
.main1 img{width:100%;}

.main2{text-align:center;}
.main2 .image img{width:100%;}
.main2 .image{
	width:18em;
	height:18em;
	margin:8px;
}
/*.main2 .image[data-product*="BA"] img{
	bottom:-20px;
}*/
.main2 .content span {
	bottom: 0px;
	background: rgb(240, 90, 40);
}
/*.main3{text-align:center;}*/
.main3 .image img{width:78%; position: relative; left:30px; float:right;}
.main3 .image[data-product*="BA"] img{width:120%; left:100px;}
.main3 .image {
	margin:5px;
	width:15.85em;
	border:none;
}
.main3 .content span{
	z-index:-1;
	text-align:left;
	color:#404040;
	font-size:1.3em
	font-weight:normal;
	bottom: 50px;
	width: 70%;
	background: rgb(0, 0, 0); /* fallback color */
	background: rgba(0, 0, 0, 0.1);
	letter-spacing: 0px;
}
.main3 .image[data-product*="MS"] .content span,
.main3 .image[data-product*="BA"] .content span,
.main3 .image[data-product*="VN"] .content span{bottom: 0px; width: 100%;}

.main4 {text-align:center;}
.main4 .image{
	border:4px solid rgb(240, 90, 40);
	width:16em;
	height:18em;
	margin:8px;
}

.main4 .image img{width:90%;}
.main4 .content span{bottom:0px; background: rgb(240, 90, 40);}

/*.main5 {text-align:center;}*/
.main5 .view{display:inline-block;}
.main5 .image{border:4px solid rgb(240, 90, 40); cursor:auto;}
/*.main5 .image>div{display:inline-block;padding:8px;}*/
.main5 .image img{width:100%; cursor:pointer;}
.main5 .form{text-align:right;}
.main5 .form input[type=number]{text-align:center; width:120px;}

.main6 section{width:100%; display:inline-block; vertical-align:top;}
.main6 section:nth-child(1) input{margin:10px 0px}
.main6 section:nth-child(1) h3,
.main6 section:nth-child(2) h3{border-bottom:1px solid #e6e6e6; padding: 0 6px;}
/*.main6 input[type=email]{font-size:14px;}*/
.main6 input[type=radio]{border:2px solid rgb(240, 90, 40); padding:6px;}
.main6 label:hover{cursor:pointer;}

/*table order*/
.section-table{width: 100%; overflow:auto;}
.tb_title {text-align:center;}
[class*=table-] {border-collapse: collapse;}
[class*=table-] tbody td{padding:2px 4px; font-weight:normal; color:#4d4d4d;}
.table-detail tbody {border-top:2px solid rgb(240, 90, 40); border-bottom:2px solid rgb(240, 90, 40); border-collapse: separate;}
.table-detail tbody tr:nth-child(odd){background-color:#fdede7;}
.table-detail tbody td:nth-child(1){text-align:center; width:18px;}
.table-detail {min-width:900px;}
.table-total {text-align:right; width:100%;}
.table-total tbody td{font-size:18px; font-weight:600; color:#4d4d4d;}

#tb1_1 tbody td:nth-last-child(1),
#tb1_1 tbody td:nth-last-child(2) {text-align:right;}
#tb1_4, #tb5{margin: 16px 0;}
#tb1_2 tbody td:nth-last-child(1),
#tb1_3 tbody td:nth-last-child(1),
#tb1_4 tbody td:nth-last-child(1),
#tb1_5 tbody td:nth-last-child(1){width:50px; text-align:right;}

#tb1_2 tbody td:nth-last-child(2),
#tb1_3 tbody td:nth-last-child(2),
#tb1_4 tbody td:nth-last-child(2),
#tb1_5 tbody td:nth-last-child(2){width:150px; text-align:right;}

#tb1_1 tbody td:nth-last-child(3),
#tb1_1 tbody td:nth-last-child(4),
#tb1_1 tbody td:nth-last-child(5){text-align:center;}

#tb1_2 tbody td:nth-last-child(4){text-align:center;}

#tb2_1 tbody td:nth-last-child(1),
#tb2_2 tbody td:nth-last-child(1){width:50px; text-align:right;}

#tb2_1 tbody td:nth-last-child(2),
#tb2_2 tbody td:nth-last-child(2){width:150px; text-align:right;}

.section-button{
	text-align:center;
	border-top:1px solid #e6e6e6;
	margin-top:16px;
	padding:16px;
}

.input-text{
	font-size:14px;
	padding: 6px 4px;
    margin: 4px 0;
    box-sizing: border-box;
    border-radius:4px;
    border:solid 2px rgb(240, 90, 40);
}

.ghost-button{
	font-family: 'supermarketRegular';
	font-size:18px;
	font-weight:normal;
	color:#fff;
	cursor:pointer;
	padding:2px 12px;
	border-radius:4px;
	border:2px solid #404040;
	background-color:#5f5f5f;
	}

.ghost-button:hover{
	transition: all 100ms ease-in;
	box-shadow: 1px 1px 5px #888888;
}

.two-part{padding: 0 6px; display:inline-block; vertical-align:top; width:100%; min-height:50vh;}
.subheading{border-bottom:1px solid #e6e6e6; padding: 0 6px;}
.inline-block{display:inline-block;}
label.inline-block{width:110px;}
.l-location > li { margin-left:40px; max-width:92%;}

.input-error {
    background: #f8bac0;
	border-color: #DA4453;
}


  .box-choice{
    list-style: none;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .box-choice li{
    display: block;
    position: relative;
    float: left;
    width: 100%;
    /*height: 100px;*/
    border-bottom: 1px solid #e6e6e6;
  }

  .box-choice li > input[type=radio]{
    position: absolute;
    visibility: hidden;
  }

  .box-choice li > label{
    display: block;
    position: relative;
    /*font-weight: 300;*/
    font-size: 1em;
    padding: 6px 6px 6px 40px;
    margin: 10px auto;
    /*height: 30px;*/
    z-index: 9;
    cursor: pointer;
    -webkit-transition: all 0.25s linear;
  }

  .box-choice > li:hover > label{
    color: rgb(240, 90, 40);
  }

  .box-choice li .check{
    display: block;
    position: absolute;
    border: 4px solid #e6e6e6;
    border-radius: 100%;
    height: 25px;
    width: 25px;
    top: 15px;
    /*bottom: -1px;*/
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
  }

  .box-choice li:hover .check {
    border: 4px solid rgb(240, 90, 40);
  }

  .box-choice li .check::before {
    display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 13px;
    width: 13px;
    top: 2px;
    left: 2px;
    margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
  }

  .box-choice input[type=radio]:checked ~ .check {
    border: 4px solid rgb(240, 90, 40);
  }

  .box-choice input[type=radio]:checked ~ .check::before{
    background: rgb(240, 90, 40);
  }

  .box-choice input[type=radio]:checked ~ label{
    color: rgb(240, 90, 40);
  }

  .box-content{
  	display:none;
  	padding:4px 0px 4px 40px;
  	margin-bottom:16px;
  	border:1px dashed #e6e6e6;
  	/*background-color:#f2f2f2;*/
  	}



@media only screen and (min-width: 320px){
	.main1 .image {width: 15.5em; height: 21.8em;}
	.main2 .image {width: 16em; height:16em;}

	.main5 .view {margin:8px 0px;}
	input[name='continue']{width:100%;}
}

@media only screen and (min-width: 480px){
	input[name='continue']{width:280px;}
	.main6 .tb_title {padding:0 10%;}
}

@media only screen and (min-width: 640px){
	.two-part{ width:48%; padding:0 20px; }
	.two-part:nth-child(2){border-left:1px solid #e6e6e6;}
}

@media only screen and (min-width: 768px){
	.main1 .image {width: 10em; height: 17.8em;}

	.main5 .view {margin:8px 10px;}
	.main5 .image {width:24em;}

	.main6 .tb_title {padding:0 15%;}
}

@media only screen and (min-width:1200px){
	.main6 section:nth-child(1){width:28%; padding:0 10px;}
	.main6 section:nth-child(2){width:70%; border-left:1px solid #e6e6e6; padding:0 10px; min-height: 50vh;}
	.table-detail {min-width:100%;}
	.main6 .tb_title {padding:0 30%;}
}


/*  Timeline */
*::after, *::before {
	box-sizing: border-box;
}
.timeline {
	position: relative;
	height: 100px;
	/*width: 90%;*/
	/*max-width: 800px;*/
	/*margin: 0 auto;*/
}
.loaded {
  /* show the timeline after events position has been set (using JavaScript) */
  opacity: 1;
}
.events-wrapper {
	position: relative;
	height: 100%;
	margin: 0 40px;
	overflow: hidden;
}
.events-wrapper::after, .events-wrapper::before {
  /* these are used to create a shadow effect at the sides of the timeline */
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  height: 100%;
  width: 20px;
}
.events-wrapper::before {
  left: 0;
  background-image: -webkit-linear-gradient( left , #fdfdfd, rgba(248, 248, 248, 0));
  background-image: linear-gradient(to right, #fdfdfd, rgba(248, 248, 248, 0));
}
.events-wrapper::after {
  right: 0;
  background-image: -webkit-linear-gradient( right , #fdfdfd, rgba(248, 248, 248, 0));
  background-image: linear-gradient(to left, #fdfdfd, rgba(248, 248, 248, 0));
}
.events {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 49px;
	height: 6px;
	background: #f8b6a0;
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	transition: transform 0.4s;
}
section#main-timeline ol, section#main-timeline ul{
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
.events li>span {
	cursor:pointer;
	position: absolute;
	bottom: 0;
	z-index: 2;
	text-align: center;
	font-size: 1.1rem;
	padding-bottom: 10px;
	/*color: transparent;*/
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
.events li span::after {
	content: attr(data-after);
	position: absolute;
	left: 50%;
	right: auto;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	bottom: -7px;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	border: 2px solid #f8b6a0;
	background-color: #f8f8f8;
	-webkit-transition: background-color 0.3s, border-color 0.3s;
	-moz-transition: background-color 0.3s, border-color 0.3s;
	transition: background-color 0.3s, border-color 0.3s;
}
.events li span:hover::after{background-color: #f05a28; border-color:#f05a28;}
.events li span.selected {pointer-events: none;}
.events li span.selected::after {
    -webkit-transition: all 300ms ease-in;
    -ms-transition: all 300ms ease-in;
    -moz-transition: all 300ms ease-in;
    transition: all 300ms ease-in;
	height: 56px;
	width: 56px;
	bottom:-24px;
	background-color: #f05a28;
	border-color: #f05a28;

	color:#f8f8f8;
	font-size: 32px;
	font-weight:normal;
}
.events li span.older-event::after {border-color: #f05a28;}
.filling-line {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #f05a28;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}
.cd-timeline-navigation span {
	cursor:pointer;
	position: absolute;
	z-index: 1;
	top: 50%;
	bottom: auto;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	height: 34px;
	width: 34px;
	border-radius: 50%;
	border: 2px solid #dfdfdf;
	overflow: hidden;
	color: transparent;
	text-indent: 100%;
	white-space: nowrap;
	-webkit-transition: border-color 0.3s;
	-moz-transition: border-color 0.3s;
	transition: border-color 0.3s;
}
/*.cd-timeline-navigation span:hover{border-color:#f05a28;}*/
.cd-timeline-navigation span::after {
	content: '';
	position: absolute;
	height: 16px;
	width: 16px;
	left: 50%;
	top: 50%;
	bottom: auto;
	right: auto;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	background: url(../img/cd-arrow.svg) no-repeat 0 0;
}
/*.cd-timeline-navigation span:hover::after{background}*/
.cd-timeline-navigation span.prev {
	left:0;
	-webkit-transform: translateY(-50%) rotate(180deg);
	-moz-transform: translateY(-50%) rotate(180deg);
	-ms-transform: translateY(-50%) rotate(180deg);
	-o-transform: translateY(-50%) rotate(180deg);
	transform: translateY(-50%) rotate(180deg);
}
.cd-timeline-navigation span.next {right: 0;}
.no-touch .cd-timeline-navigation span:hover {border-color: #f05a28;}
.cd-timeline-navigation span.inactive {cursor: not-allowed;}
.cd-timeline-navigation span.inactive::after {background-position: 0 -16px;}
.no-touch .cd-timeline-navigation span.inactive:hover {border-color: #dfdfdf;}

ol span.inactive {pointer-events: none;}
ol span.inactive::after {background-position: 0 -16px;}
ol span.inactive:hover {border-color: #dfdfdf;}