#fade{/*--Transparent background layer--*/display: none; /*--hidden by default--*/background: #000;position: fixed;left: 0;top: 0;width: 100%;height: 100%;opacity: .80;z-index: 9999;}      
  
.popup_block{display: none; /*--hidden by default--*/background: #fff;border: 1px solid black;float: left;font-size: 1.2em;position: fixed;
             top: 53%;left: 50%;
    z-index: 99999;-moz-box-shadow: 28px 28px 28px #000; /*--CSS3 Rounded Corners--*/
    width:234px;}    
/*  top: 55%;left: 50%;  dùng để chỉnh nơi hiển thị của popup*/


img.btn_close {
    float: right;
    width: 25px;
    margin: 14px;
    padding: 0px;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade{position: absolute;}
*html .popup_block{position: absolute;}

.contentpopup{float:left;width:96%;height:0 auto;overflow:hidden;padding:0px 2% 2% 2%;}

.popup-header{float:left;width:30%;height:0 auto;overflow:hidden;}
    .popup-header h3{float:left;width:100%;font: 19px "Barlow-Bold";color:#df0024;text-transform:uppercase;text-align:left;}
    .popup-header span.typeproject{float:left;width:100%;font: 15px "Barlow-Regular";color:#df0024;margin-top:2%;text-align:left;}
    .popup-header span.typeproject b{font: 15px "Barlow-Bold"; text-transform:uppercase;}

    .popup-header p {
        float: left;
        width: 100%;
        font: 15px "Barlow-Regular";
        color: #000000;
        margin-top: 2%;
        text-align: left;
        line-height: 22px;
    }
    
.popup-slide{float:left;width:68%;height:0 auto;overflow:hidden;margin-left:2%;}
    .popup-slide .cate-item{float:left;width:100%;height:0 auto;overflow:hidden;margin:1% 0px 20% 0px;}       
        .popup-slide .cate-item img{float:left;width:95%;margin-left:0%;height:380px;} 

.popup-slide .slick-prev{bottom:-5%;right:40.5%;}
.popup-slide .slick-next{bottom:-5%;right:33.5%;}


@media (min-width: 1024px) and (max-width: 1365px) 
{
    .popup_block{width:90vw !important;margin-left:-45vw !important;margin-top:10vh !important;top:0px;}
  .contentpopup{height:70vh;overflow-y:scroll;}
  .contentpopup iframe{width:86vw !important;height:66vh !important;}


  .popup-header{float:left;width:100%;height:0 auto;overflow:hidden;}
  .popup-slide{float:left;width:100%;height:0 auto;overflow:hidden;margin:5% 0px 0px 0px;}
    .popup-slide .slick-prev{right: calc(40vw + 15px);}
    .popup-slide .slick-next{right: calc(40vw - 40px);}
}        
@media (min-width: 768px) and (max-width: 1023px) 
{
  .popup_block{width:90vw !important;margin-left:-45vw !important;margin-top:10vh !important;top:0px;}
  .contentpopup{height:70vh;overflow-y:scroll;}
  .contentpopup iframe{width:86vw !important;height:66vh !important;}


  .popup-header{float:left;width:100%;height:0 auto;overflow:hidden;}
  .popup-slide{float:left;width:100%;height:0 auto;overflow:hidden;margin:5% 0px 0px 0px;}
    .popup-slide .slick-prev{right: calc(40vw + 15px);}
    .popup-slide .slick-next{right: calc(40vw - 40px);}
}
@media (min-width: 480px) and (max-width: 767px) 
{
 .popup_block{width:90vw !important;margin-left:-45vw !important;margin-top:10vh !important;top:0px;}
  .contentpopup{height:70vh;overflow-y:scroll;}
  .contentpopup iframe{width:86vw !important;height:66vh !important;}


  .popup-header{float:left;width:100%;height:0 auto;overflow:hidden;}
  .popup-slide{float:left;width:100%;height:0 auto;overflow:hidden;margin:5% 0px 0px 0px;}
    .popup-slide .slick-prev{right: calc(40vw + 15px);}
    .popup-slide .slick-next{right: calc(40vw - 40px);}
}
@media (max-width: 479px) 
{
  .popup_block{width:90vw !important;margin-left:-45vw !important;margin-top:10vh !important;top:0px;}
  .contentpopup{height:70vh;overflow-y:scroll;}
  .contentpopup iframe{width:86vw !important;height:66vh !important;}


  .popup-header{float:left;width:100%;height:0 auto;overflow:hidden;}
  .popup-slide{float:left;width:100%;height:0 auto;overflow:hidden;margin:5% 0px 0px 0px;}
    .popup-slide .slick-prev{right: calc(40vw + 15px);}
    .popup-slide .slick-next{right: calc(40vw - 40px);}
}