/* CSS Document */
#SPB_container {
    background-color: #060606;
    overflow: auto;
    overflow-x: hidden;
    max-width: 1920px;
    padding-right: 0px;
    padding-left: 0px;
    padding-top:0em;
    margin: auto;
    border-right: 0px solid red;
    border-left: 0px solid red;
}


/*product List*/
.pdlistbox{}
.pdlist{text-align:center; padding:5em 0 0; background:url(https://storage-asset.msi.com/event/desktop/2019/it_configuratore/images/Aegis360Bg.jpg) top center no-repeat; border-top:#222 1px solid;}
.pdlist .pdtb{padding-bottom:5em;}
.pdlist .pdtb img{width:100%;}
.pdlist figure{display:table-cell; padding-bottom:10px; cursor:pointer;}
.pdlist figcaption{font-size:1.8em; color:#fff; overflow:hidden;}
.pdlist figure.active{border-bottom:#f00 5px solid; color:#f00;}
.pdlist figure:hover figcaption{ transform:skewX(-20deg); color:#f00;}
.pdlist figure.active{color:#f00 !important;}
.pdlist figure span{position:relative; display:inline-block; -webkit-transition:-webkit-transform 0.3s; -moz-transition:-moz-transform 0.3s; transition:transform 0.3s;}
.pdlist figure span::before{position:absolute; top:100%; content:attr(data-hover); -webkit-transform:translate3d(5,2,8); -moz-transform:translate3d(5,2,8); transform:translate3d(5,2,8);}
.pdlist figure:hover span,
.pdlist figure:focus span{-webkit-transform:translateY(-100%); -moz-transform:translateY(-100%); transform:translateY(-100%);}
.pdlist .pdtb{display:table; width:100%; max-width:1000px; margin:0 auto;}


/*video setting*/
.video-container{position:relative; padding-bottom: 56.25%; padding-top: 0px !important; height: 0; overflow: hidden;}
.video-container iframe,
.video-container object, 
.video-container embed,
.video-container video{
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.vbox{
	position:relative;
	width:100%;
	}
.vbox i{position:absolute; z-index:10; font-size:40px; color:#fff; top:calc(50% - 20px); left:calc(50% - 20px); text-shadow:#f00 0 0 10px; transition:0.5s all ease-in 0.1s;}
.vbox:hover i{color:#f00; text-shadow:#fff 0 0 10px; transform:scale(1.5,1.5);}
.vbox img{
	position:relative;
	z-index:1;
	width:100%;
	}
.vbox img:hover{box-shadow:#f00 0 0 10px;}

.video{padding:30px; margin-bottom:40px;}
.video:after{clear:both; display:block; visibility:hidden; height:0; content:"";}
.video .vds{width:calc(100% / 3); padding:10px; float:left;}
@media (max-width: 960px) {	
	.video .vds{width:90%; padding:10px 0; margin:0 auto; float:none;}
	
}



/*product info */
.pdcontent{}
.pditemtb, .pditemtb1, .pditemtb2{padding-bottom:30px;}
.pditem{width:75%; margin:0 auto; text-align:center;}
.pditem .text{text-align:left; color:#fff; font-size:1.3em; line-height:1.8em; padding:3em 0 0; font-family:'DINPro-Regular';}
.pditem .pdimg img{width:100%;transition:0.5s all ease-in 0.1s;}
.pditem .txttb:after{clear:both; display:block; visibility:hidden; height:0; content:"";}
.pditem h3{font-family:'DINCondMediumRegular', Arial, Helvetica, 'Microsoft JhengHei', sans-serif !important; color:#fff; font-size:2em; text-align:left;}
.pditem h3 strong{border-bottom:#f00 3px solid;}
.pditem h3 i{color:#666; padding-right:10px;}
.pditem .txttb{border:#222 1px dashed; padding:3em 0; text-align:left; border-left:none; border-right:none; margin-bottom:3em;}
.pditem .txttb p{padding-bottom:20px;}
.pditem .txttb .vd{width:40%; float:right;}
.pditem .txttb .vd .carousel .carousel-control{padding-top:25%;}
.pditem .txttb .txt{width:55%; float:left; font-family:'DINPro-Regular'; font-size:1.2em; line-height:1.2em;}
.pditem .st{margin-top:4em; font-family:'DINPro-Regular'; color:#fff; font-size:1.5em; margin-bottom:10px;}
.pditem .st img{padding-right:8px;}
#pditem1, #pditem2, #pditem3, #pditem4, #pditem5, #pditem6, #pditem7, #pditem8, #pditem9{background:url(https://storage-asset.msi.com/event/desktop/2019/it_configuratore/images/bg-pd1.png) top center no-repeat; background-size:100% auto; display:none;}

@media (max-width: 960px) {	
	h2{font-size:1.6em; padding:0px 0 25px; width:90%; margin:0 auto;}
	.pditem{width:90%;}
	.pditem .txttb .vd{width:100%; float:none;}
	.pditem .txttb .txt{width:100%; float:none;}
	
}



.selpd_lv1,
.selpd_lv2{text-align:left;}

.selpd_s1pd{position:relative;}
.selpd_s1pd .selpd_item{border:#450203 1px solid; width:calc(100% / 3 - 25px); text-align:center; position:relative; float:left; margin-right:25px; cursor:pointer; margin-bottom: 25px;}
.selpd_s1pd .selpd_item:hover{box-shadow:#f00 0 0 30px; border:#f00 1px solid;}
.selpd_s1pd .selpd_item h4{font-size:1.3em; color:#fff;}
.selpd_s1pd .imgtxt{position:absolute; color:#fff; width:90%; left:5%; display:none; z-index:2;}
.selpd_s1pd img { width: 100%;max-width: 380px;}

@media (max-width: 768px) {
	.selpd_s1pd .selpd_item{width:100%; margin:10px auto; float:none; margin-right:0;}
	.selpd_item img{width:100%;}
    .spdtb .txt {padding-top: 20px;}
}
/*
.arrow_box {
	position: relative;
	background: #d51a0d;
	border: 4px solid #f52525;
	padding:15px;
	font-family:'DINPro-Regular';
	font-size:15px;
	color:#fff;
	
}
.arrow_box:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	
}

.arrow_box:after {
	border-color: rgba(213, 26, 13, 0);
	border-top-color: #d51a0d;
	border-width: 14px;
	margin-left: -14px;
}
.arrow_box:before {
	border-color: rgba(245, 37, 37, 0);
	border-top-color: #f52525;
	border-width: 20px;
	margin-left: -20px;
}
*/
.speech-bubble {
position: relative;
background-color: #f00;
color: white;
text-align: center;
border-radius: 10px;
font-family: sans-serif;
padding:15px;
box-shadow:#f00 0 0 30px;
font-size:15px;
}
 
.speech-bubble:after {
content: '';
position: absolute;
 
width: 0;
height: 0;
 
border: 15px solid  rgba(213, 26, 13, 0);
}

.speech-bubble-bottom:after {
border-top-color: #f00;
top: 100%;
left: 50%;
margin-left: -15px;
}
 


.selpd_lv2{margin-top:3em; display:none;}
.selpd_lv2:after{clear:both; display:block; visibility:hidden; height:0; content:"";}
.selpd_lv2 .st{margin:0; text-align:left;}
.selpd_lv2 .selpd_td{float:left; width:calc((100% - 60px) / 3); vertical-align:top; position:relative; display:none;}
.selpd_lv2 .selpd_no{float:left; width:30px; text-align:center; color:#f00; font-size:30px; padding-top:6px; display:none;}
.selpd_s2pd{position:relative; text-align:center;}
.selpd_s2pd .imgtxt{position:absolute; color:#fff; width:90%; left:5%; display:none; z-index:2;}
.selpd_s2pd .sel_item{border:#f00 1px solid; padding:20px 0; color:#fff; font-size:1.6em; margin-top:10px; position:relative; cursor:pointer; display:none;}
.selpd_s2pd .sel_item:hover{box-shadow:#f00 0 0 30px; border:#f00 1px solid;}

@media (max-width: 768px) {
	.selpd_lv2 .selpd_td{float:none; width:100%;}
	.selpd_lv2 .selpd_no{float:none; width:100%;}
	
}



.selpd_spec{background:#111; padding:0; text-align:left; margin-top:30px; display:none;}
.selpd_spec h2{background:#f00; color:#fff !important; text-align:center; padding:15px;}
.selpd_spec .spdtb{margin:30px; width:inherit; padding-bottom: 20px;}
.selpd_spec .spdtb .img{display:table-cell; text-align:center; width:40%;}
.selpd_spec .spdtb .txt{vertical-align:top; text-align:left; font-family:'DINPro-Regular'; color:#fff; font-size:1.1em;}
.selpd_spec .spdtb .monitor{width: 100%;display: table;text-align: center!important;padding-left: 0!important; padding-top: 0!important; padding-bottom: 20px;}
.selpd_spec .spdtb .price{color:#f00; font-size:2.3em; font-weight:bold; font-family:'Geforce-Bold';}
.selpd_spec .spdtb ul{padding:0 0 20px 0; font-style:1.3em; border-bottom:#333 1px dashed; width:100%;}
.selpd_spec .spdtb li{margin:0; padding:5px 0;}
.selpd_spec .wtbuy{margin:0!important; padding:0!important; border:none !important; text-align: center; font-family: 'DINCondMediumRegular', Arial, Helvetica, 'Microsoft JhengHei', sans-serif !important;}
.selpd_spec .wtbuy:after{clear:both; display:none; visibility:hidden; height:0; content:"";}
.selpd_spec .wtbuy li{list-style:none; text-align: center; display: inline-block; max-width: 200px;border:none; margin-right:15px; margin-top:0px;}

@media (max-width: 768px) {
	.selpd_spec .spdtb .img{display:table; width:100%;}
	.selpd_spec .spdtb .img img{width:100%;}
	.selpd_spec .spdtb .txt{display:table;padding-left:0%; width:100%;}
    .selpd_spec .spdtb {margin: 30px!important}
	
}
.wtb, .wtb2{padding:25px 0 50px; margin: 0 auto; display: inline-block;}
.wtb ul{width:100%; margin:0 auto; max-width:100%; position:relative; list-style: none outside none; padding:0}
.wtb ul:after{clear:both; display:block; visibility:hidden; height:20px; content:"";}
.wtb li{float:left; position:relative; transition:0.1s all ease 0.5s;}
.wtb img, .wtb2 img{padding:1px; box-shadow:#999 0 0 20px; margin:0 10px;}
.wtb2 ul{width:100%; margin:0 auto; max-width:1240px; position:relative; list-style: none outside none; padding:0}
.wtb2 ul:after{clear:both; display:block; visibility:hidden; height:20px; content:"";}
.wtb2 li{float:left; width:calc(100% / 4); position:relative; transition:0.1s all ease 0.5s;}
.wtb li:hover, .wtb2 li:hover{z-index:2;}
.wtb li:hover img, .wtb2 li:hover img{box-shadow:#f00 0 0 20px;}
.scroll {
    text-decoration: underline;
}
@media (max-width: 1280px) {
	.wtb2 img{width:100%;}
	.wtb2 ul{max-width:1200px;}	
}

@media (max-width: 1024px) {
	.wtb2 ul{max-width:none; width:100%;}
	.wtb2 li{width:calc(100% / 3);}
}

@media (max-width: 960px) {
	.wtb2 li{width:calc(100% / 3);}
    .selpd_spec .spdtb .col-sm-3 h2 {font-size: 30px;}
}

@media (max-width: 768px) {
	.wtb2 li{width:calc(100% / 2);}
    .selpd_spec .spdtb ul{padding:0 0 20px 10%; font-style:1.3em; border-bottom:#333 1px dashed; width:100%;}
}

@media (max-width: 640px) {
	.wtb, .wtb2{width:100%;}
	.wtb2 img{width:auto;}
	.wtb li,
	.wtb2 li{width:100%; text-align:center; float:none;}
}


.section7 h3{color:#f00; font-size:1.8em;}
.section7 h4{color:#f00; font-size:1.8em;}
.section7 h5{color:#f00; font-size:1.4em;}

.note{clear:both; color:#f00;padding-top: 15px;}
.note a{color:#f00;font-size:1.6em;}
.note a:hover{text-shadow:#f00 0 0 10px;}
.review h3{text-align: center!important; margin-bottom: -30px;}
.personalizza {
    border: solid red 2px;
    padding-bottom: 15px;
    margin-bottom: 10px;
    margin-top: 15px;
    font-size: 18px;
}
p.redtxt{color:#f00; font-size:3em;padding-top: 2%;}


/* carousel */
.quote-carousel 
{
  padding: 0 10px 30px 10px;
  margin-top: 30px;
}

/* Control buttons  */
.quote-carousel .carousel-control
{
  background: none;
  color: #222;
  font-size: 2.3em;
  text-shadow: none;
  margin-top: 30px;
}
/* Previous button  */
.quote-carousel .carousel-control.left 
{
  left: -12px;
}
/* Next button  */
.quote-carousel .carousel-control.right 
{
  right: -12px !important;
}
/* Changes the position of the indicators */
.quote-carousel .carousel-indicators 
{
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
/* Changes the color of the indicators */
.quote-carousel .carousel-indicators li 
{
  background: #c0c0c0;
}
.quote-carousel .carousel-indicators .active 
{
  background: #333333;
}
.quote-carousel img
{
  width: 250px;
  height: 100px
}
/* End carousel */

.item blockquote {
    border-left: none;
    margin: 0;
    padding: 10px 10px 0 10px;
}

.item blockquote img {
    margin-bottom: 10px;
}

.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    margin-right: 10px;
}



/**
  MEDIA QUERIES
*/

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    .quote-carousel 
    {
      margin-bottom: 0;
      padding: 0 40px 30px 40px;
    }
    
}

/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) { 
    
    /* Make the indicators larger for easier clicking with fingers/thumb on mobile */
    
    .quote-carousel .carousel-indicators li {
        display: inline-block;
        margin: 0px 5px;
        width: 15px;
        height: 15px;
    }
    .quote-carousel .carousel-indicators li.active {
        margin: 0px 5px;
        width: 20px;
        height: 20px;
    }
    .personalizza {
    margin-top: 30px;
    }
}