*{margin:0px; box-sizing: border-box;}

/*.background_360{background-image: url(../images/360_bg.jpg); background-repeat: no-repeat; background-size: cover;}*/

.detail_page_container{max-width: 1300px; margin:auto;}
.detail_page_title{font-size: 40px; line-height: 48px; font-weight: 600; text-align: center; margin:0px 0px; text-transform: uppercase; color: #000000;}
.detail_page_title img{max-width: 100%; vertical-align: super;}

.wrapper_360{position: relative; padding:0px; box-sizing: border-box;}
.wrapper_360 .tab_360{position: absolute; top:60px; right:50px; display: flex;}
.wrapper_360 .tab_360 .tabs_360{font-size: 18px; line-height: 28px; color: #000; border:1px solid #000; min-width: 8em; text-decoration: none; text-align: center; padding:5px 0px; text-transform: uppercase;}
.wrapper_360 .tab_360 .tabs_360:first-child{border-radius: 3px 0px 0px 3px;}
.wrapper_360 .tab_360 .tabs_360:last-child{border-radius: 0px 3px 3px 0px;}
.wrapper_360 .tab_360 .tabs_360.tabs_360_active{background-color: #000; color: #fff;}
/* Model Color */
.wrapper_360 .model_color_360{display: flex; justify-content: center; list-style: none; padding:60px 0px; box-sizing: border-box;}
.model_color_360 .model_color_image{position: relative; padding-right:10px; box-sizing: border-box; cursor: pointer;}
.model_color_360 li:last-child .model_color_image{padding-right:0px;}
.model_color_360 .model_color_image img{max-width:100%;}
.model_color_360 .model_color_image .active_model_color{position: absolute; top:-12px; right:16%; display: none;}
.model_color_360 .model_color_image.selected .active_model_color{display: block;}
.model_color_360 .model_color_image .active_model_color img{max-width: 100%; width:25px;}


.wrapper_360 .wrapper_360_show{display: block;}

.wrapper_360_container{display: none; padding:70px 10px 40px;}
.wrapper_360_rotation_container{max-width: 1300px; margin:auto; position: relative;}

.wrapper_360_rotation_container .img360{width:95%; max-height: 400px; margin: auto; text-align: center;}
.wrapper_360_rotation_container #myImg{cursor: url(../images/ico/icon_drag_wh.png),auto;}
#preload-imgs {
    display:none;
}
.wrapper_360_rotation_container .nav_360{position: absolute; top:50%; transform: translateY(-50%); width: 100%;}
.wrapper_360_rotation_container .nav_360 .prev_360,
.wrapper_360_rotation_container .nav_360 .next_360{display: block;}
.wrapper_360_rotation_container .nav_360 .prev_360{position: absolute; left:0px;}
.wrapper_360_rotation_container .nav_360 .next_360{position: absolute; right:0px;}

.wrapper_360_rotation_container .nav_360 .prev_360 img{max-width: 100%;}
.wrapper_360_rotation_container .nav_360 .next_360 img{max-width: 100%;}


/* Panorama Block */
.panorama_container{overflow: hidden; display: none; padding-top:60px;}
.panorama_block{width: 100%; height:500px;}
/* 360 spec block css */

.spec_360_block{display: flex; align-items: center; justify-content: center; padding:30px 0px;}
.spec_360_block .spec_360_list{list-style: none; padding:0px 0px; display: flex; align-items: center;}
.spec_360_block .spec_360_list li{ padding:0px 40px; box-sizing: border-box; position: relative;}
.spec_360_block .spec_360_list li::before{content:''; width:1px; height:42px; background-color: #000000; display: inline-block; position: absolute; top:50%; left:0px; transform: translateY(-50%);}
.spec_360_block .spec_360_list li strong{font-size: 22px; line-height: 28px; color: #000000; text-align: center; text-transform: uppercase; font-weight: 500; display: block;}
.spec_360_block .spec_360_list li span{display: block; text-align: center; font-size: 17px; line-height: 23px; color: #676767;}
.spec_360_block .spec_360_cta{width: auto;}
.spec_360_block .spec_360_cta a{text-decoration: none; font-size:17px; line-height:17px; text-transform: uppercase; color: #f1f3f4; background-color: #686868; padding:12px 20px; box-sizing: border-box; display: block; border-radius: 3px; transition: .3s linear;}
.spec_360_block .spec_360_cta a:hover{background-color: #575757;}


/* Media Queries */

@media screen and (min-width:200px) and (max-width:1024px){
    .detail_page_container{max-width: 100%; padding:0px 15px; box-sizing: border-box;}
    .detail_page_title{font-size: 22px; line-height: 30px;}
    .detail_page_title img{width: 10px;}
    /*  */

    .wrapper_360_container{display: none; padding:20px 10px 20px;}

    .wrapper_360{padding:20px 0px 10px;}
    .wrapper_360_rotation_container .img360 {  width: 96%;}
    .wrapper_360 .tab_360{top:25px; right:15px;}
    .wrapper_360 .tab_360 .tabs_360{font-size: 15px; line-height: 23px; min-width: 7em;}
    .wrapper_360 .model_color_360{padding:30px 15px; box-sizing: border-box;}
    .model_color_360 .model_color_image .active_model_color img{width: 20px;}
    .wrapper_360_rotation_container .nav_360 .prev_360{left:5px}
    .wrapper_360_rotation_container .nav_360 .next_360{right:5px;}
    .wrapper_360_rotation_container .nav_360 .next_360 img{width:20px;}
    .wrapper_360_rotation_container .nav_360 .prev_360 img{width:20px;}

    .panorama_block{height:400px;}
    .panorama_container{padding-top:40px;}


    /* 360 Seection Styling and Responsive */
    
    .spec_360_block {flex-direction: column; padding:20px 0px 10px;}
    .spec_360_block .spec_360_list{display: none;}
    .spec_360_block .spec_360_list li{padding: 0px 15px;}
    .spec_360_block .spec_360_list li strong{font-size: 17px; line-height: 24px;}
    .spec_360_block .spec_360_list li span{font-size: 14px; line-height: 24px;}
    .spec_360_block .spec_360_cta a{font-size: 15px; line-height:15px; }
}


@media screen and (min-width:768px) and (max-width:1024px){
    .detail_banner_inner .detail_banner_block{width:50%;}
    .detail_page_title{font-size: 26px; line-height: 32px;}
    .wrapper_360_rotation_container .nav_360 .prev_360{left:2%}
    .wrapper_360_rotation_container .nav_360 .next_360{right:2%}
}

@media screen and (min-width:570px) and (max-width:1024px){
    .spec_360_block .spec_360_list{display: flex;}
    .spec_360_block .spec_360_cta{padding-top: 15px;}
}

@media screen and (min-width:1025px) and (max-width:1600px){
    .detail_page_container{padding:0px 15px; box-sizing: border-box;}
    .detail_page_title{font-size: 34px; line-height:42px;}
    .wrapper_360 .model_color_360{padding: 40px 0px;}
    .wrapper_360_rotation_container .nav_360 .prev_360{left:2%}
    .wrapper_360_rotation_container .nav_360 .next_360{right:2%}
    .spec_360_block{padding:20px 15px; box-sizing: border-box;}
    .spec_360_block .spec_360_list li{padding:0px 25px;}

     .wrapper_360_container {    padding: 40px 10px 40px;  }
}