:root {
  --blue: #1e90ff;
  --white: #ffffff;
  --blueport:#014872;
  --redport:#c40c04;
  --blackport:#000;
  --grayport:#dadce2;
}


.port-slider-container{
  transition: all 250ms ease-in-out;
}

.port-slider-container{
        background-color:#961442 ;
        background-position: center; 
        background-size: cover;
        width: 100%;
        min-height: 600px;
        max-height: 750px;
        padding: 20px;

              }

              
      ul.port-slider-slice{ position: relative; display:flex;max-width: 100%;  list-style: none;list-style-type: none; margin: 0 auto; padding: 0;}
      ul.port-slider-slice li{display: inline; white-space: nowrap; margin:0  7px;}
      ul.port-slider-slice li a { padding:10px 20px; background-color: #1c1c1c; color:#fff; border-radius: 40px; text-decoration: none; border:1px solid transparent; }
      ul.port-slider-slice li a:hover{background-color: #fff;color:#1c1c1c;}
      ul.port-slider-slice li a.active{background-color: #fff;color:#1c1c1c; position: relative; border-color:#1c1c1c;}
      ul.port-slider-slice li a.active:before{
        content: '';
        width: 10px; height: 10px;
        border:5px solid transparent;
        border-top-color: #fff;
        position: absolute; left:calc(50% - 5px); bottom:-10px;
      }
      .port-slider-content{min-height: 450px; /*background-color: #fff;*/-moz-user-select: none;
-webkit-user-select: none;
user-select: none;}
      .port-slider-content .row{min-height: 100%;}
.left-card,.right-card{padding: 0px; min-height: 100%; background-color: transparent; border-radius: 16px; }
      .left-card{padding: 10px 20px;   background-color: #fff; display: flex; align-items: center;  box-shadow: 3px 5px 7px rgba(0,0,0,0.3);}
      .right-card{ /* border-radius: 20px; border:3px solid #fff; box-shadow: 3px 5px 7px rgba(0,0,0,0.3);*/}
      .right-card img{width: 100%; height: auto; border-radius: 16px;
        box-shadow: 3px 5px 7px rgba(0,0,0,0.3); 
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
        pointer-events: none;}

      .left-card h1{}
      .left-card .btn{border-radius: 20px; padding: 7px 14px}


[data-color=blackport] .left-card{background-color: #1c1c1c; color:#fff; }
  [data-color=blackport] .btn{background-color: #fff; color:#000;}
[data-color=blueport]  .left-card{background-color: #006b9f ; color:#fff; }
  [data-color=blueport]  .btn{background-color: #fff; color:#000;}
[data-color=redport]   .left-card{background-color: #c40c04 ; color:#fff; }
  [data-color=redport]   .btn{background-color: #fff; color:#000;}
[data-color=white]   .left-card{background-color: #fff ; color:#000; }
  [data-color=white]   .btn{background-color: #000; color:#fff;}
[data-color=grayport]   .left-card{background-color: #fff ; color:#000; }
  [data-color=grayport]   .btn{background-color: #000; color:#fff;}



@media(max-width: 1142px){
  .left-card h1{font-size:1.5em;}
}

      ul.port-slide-list{position: relative; display: flex; margin: 10px 0 0 0; padding: 0; width:100%;  background-color:; overflow: hidden;  overflow:hidden;}
      ul.port-slide-list li{display: inline; margin: 0px; padding: 0; min-width: 100%;  }
      ul.port-slide-list li .row{padding:0  10px;}
      .port-slider-arrows a.prev,
      .port-slider-arrows a.next{position: absolute; margin-top:5px; width:40px; height: 40px;   
        background-color: transparent; color:#1c1c1c; border:1px solid #ccc; border-radius: 20px; 
 font-size: 1.3em; line-height: 1.9em; text-decoration: none; text-align: center; 
 color:#ccc; z-index: 2
      }
      
      .port-slider-arrows a:hover{background-color: #fff;color:#1c1c1c}
      .port-slider-arrows a.prev{ left:  0px;}
      .port-slider-arrows a.next{ right: 0px;}
      ul.port-slider-dots{position: relative; display:flex;max-width: 100%; margin: 10px auto; padding:  0; list-style: none; list-style-type: none; ;}
      ul.port-slider-dots li{ display: inline; margin-right: 7px; min-width: 20px; height: 20px; border-radius: 10px; background-color: transparent; border:1px solid #ccc; cursor: pointer; ;}
      ul.port-slider-dots li.active{background-color: #ccc}

.dot-container,.slice-menu{display: flex; flex-direction: row; justify-content: center; overflow-y: hidden; /*border-top:1px solid #fff*/   height: 50px; align-items: center;  }
.dot-container{max-width: 78%; margin: 0 auto}



@media(max-width: 992px){
  /*ul.port-slider-slice{  display: flex; justify-content: center; }
  ul.port-slider-slice li{display: inline-flex; width: 70%;}*/
  .port-slider-container{min-height: auto; /*max-height: 550px;*/  max-height: auto }
  .port-slider-content,
  .port-slider-content .row,
  .right-card{min-height: auto !important;  }
  .left-card{margin-top: 7px; }
  .left-card h1{ float: left; margin-right: 7px; font-size:1.5em;}
  
}

@media(max-width: 768px){
  .port-slider-container{min-height: auto; max-height:auto; }
  .port-slider-content .row{height: auto;min-height: auto}
  .left-card{background-color: transparent; margin-top: 0; }
  /*.port-slider-arrows{margin-top: -160px}*/
  .slice-menu{border-radius: 50px;     }
  .slice-menu-container{position:relative;background-color: #ffffff60; border-radius: 50px}
  .slice-menu-container:before{
    content: '';
    position: absolute;
    left: 0;
    top:1px;
    z-index: 2;
    width: 20px;
    height: 48px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  }
  .slice-menu-container:after{
    content: '';
    position: absolute;
    top: 1px;
    right: 0;
    z-index: 2;
    width: 20px;
    height: 48px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  }
  ul.port-slider-slice li a.active:before{
    border-top-color:#1c1c1c;
  }
  .left-card{box-shadow: none; /*border-top-left-radius: 0; border-top-right-radius: 0*/}
  /*.right-card,.right-card img{border-bottom-left-radius: 0; border-bottom-right-radius: 0}*/

[data-color=blackport] .left-card{background-color:transparent; }

[data-color=blueport]  .left-card{background-color: transparent; ; color:#fff; }

[data-color=redport]   .left-card{background-color: transparent; color:#fff; }

[data-color=white]   .left-card{background-color: transparent; ; color:#000; }

[data-color=grayport]   .left-card{background-color: transparent; ; color:#000; }

    [data-color=blackport] .btn{background-color: #014872; color:#000; }
    [data-color=blueport] .btn{background-color: #000000 ; color:#fff; }
    [data-color=redport] .btn{background-color: #fff ; color:#c40c04; }
}

@media(max-width: 592px){
  .port-slider-container{min-height: auto; max-height:auto; }

}





 
.port-slider-container [data-color=var(--portblue)]{
  background-color: #f36;
}

/*[data-color=grayport]>ul.port-slider-dots li{ background-color: #000 !important; border:1px solid #000 !important;}
      [data-color=grayport]>ul.port-slider-dots li.active{background-color: #000 !important}
[data-color=white]>ul.port-slider-dots li{ background-color: #000 !important; border:1px solid #000 !important;}
      [data-color=white]>ul.port-slider-dots li.active{background-color: #000 !important}*/