body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: 400;
    position: relative;
}

html, body {
     width: 100%;
     overflow-x: hidden;
}

h1, h2, h3, h4 {  font-weight: bolder;  letter-spacing: 2px; color: blue; }

.heading {    font-size: 20px;  }

.subheading {   font-size: 14px;    font-weight: bold;    padding-bottom: 60px; }

.bold {   font-weight: bold;  }

a { color:white;  }

hr {  border-color: white;  }

.section-title strong {   color: #FF6347;     font-size: 56px;  }

.section-title h1 {   font-size: 24px;  } 

.section-title {    padding-bottom: 32px; }

.medium-icon {    font-size: 32px !important; }

a:hover{
  opacity: 0.6;
}


legend {
  padding: 10 0 10 0;
  background-color:#164D61;
    color:white;
    font-size:16;
    text-align:middle;
  }
  
legend.dinamik {
  padding: 10 0 10 0;
  background-color:#CCAB48;
    color:white;
    font-size:16;
    text-align:middle;
  }  

html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
  height: 100%;
}
/*body {
  padding-top: 70px;
}*/
footer {
  padding: 30px 0;
}
  
fieldset {
  border:1px solid #999;
  border-radius:20px;
  box-shadow:0 0 10px #999;
  background:rgba(255, 255, 255, 0.3);
}  

.fieldset2 {
  border:1px solid #999;
  border-radius:20px;
  box-shadow:0 0 10px #999;
  background:rgba(255, 255, 255, 0.7);
  margin: 0 0 5px 0;
} 

.fieldset3 {
  border:1px solid #999;
  border-radius:20px;
  box-shadow:0 0 10px #999;
  background-color: #FFE4C4;
  margin: 0 0 5px 0;
} 

p.border  { border:solid; border-width:2px; color:#164D61; box-shadow:0 0 10px #999;}
p.border2 { border:solid; border-width:3px; color:#CCAB48; background-color:#D6C79A; box-shadow:0 0 10px #999;}

div.vertical-line{
  width: 2px; /* Line width */
  background-color: #CCAB48; /* Line color */
  height: 100%; /* Override in-line if you want specific height. */
  position:right;
}

.scrollable {
    height: auto;
    overflow: scroll;
}

.scrollable2 {
    height: auto;
    overflow: hidden;
}

.scrollable3 {
  height: 400px;
  background: transparent;
  overflow-y: scroll;
  margin-bottom: 25px;
}

@media (min-width:768px){
.scrollable3 {
  height: 400px;
  background: transparent;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:992px){
.scrollable3 {
  height: 600px;
  background: transparent;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:1200px){
.scrollable3 {
  height: 550px;
  background: transparent;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

.scrollable4 {
  height: 300px;
  background: transparent;
  overflow-y: scroll;
  margin-bottom: 25px;
}

@media (min-width:768px){
.scrollable4 {
  height: 400px;
  background: transparent;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:992px){
.scrollable4 {
  height: 500px;
  background: transparent;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:1200px){
.scrollable4 {
  height: 550px;
  background: transparent;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

.scrollable5 {
  height: 250px;
  overflow-y: scroll;
  margin-bottom: 25px;
  border-color: #ddd;
}

@media (min-width:768px){
.scrollable5 {
  height: 250px;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:992px){
.scrollable5 {
  height: 450px;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:1200px){
.scrollable5 {
  height: 450px;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

.scrollable6 {
  height: 200px;
  overflow-y: scroll;
  margin-bottom: 25px;
  border-color: #ddd;
}

@media (min-width:768px){
.scrollable6 {
  height: 200px;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:992px){
.scrollable6 {
  height: 200px;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:1200px){
.scrollable6 {
  height: 450px;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

.scrollable7 {
  height: 300px;
  background: #ddd;
  overflow-y: scroll;
  margin-bottom: 25px;
}

@media (min-width:768px){
.scrollable7 {
  height: 300px;
  background: #ddd;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:992px){
.scrollable7 {
  height: 300px;
  background: #ddd;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:1200px){
.scrollable7 {
  height: 550px;
  background: #ddd;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

.scrollable8 {
  height: 300px;
  overflow-y: scroll;
  margin-bottom: 25px;
  border-color: #ddd;
}

@media (min-width:768px){
.scrollable8 {
  height: 300px;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:992px){
.scrollable8 {
  height: 300px;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:1200px){
.scrollable8 {
  height: 380px;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

.scrollable9 {
  height: 200px;
  overflow-y: scroll;
  margin-bottom: 25px;
  border-color: #ddd;
}

@media (min-width:768px){
.scrollable9 {
  height: 200px;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:992px){
.scrollable9 {
  height: 200px;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:1200px){
.scrollable9 {
  height: 315px;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

.scrollable10 {
  height: 480px;
  background: transparent;
  overflow-y: scroll;
  margin-bottom: 25px;
}

@media (min-width:768px){
.scrollable10 {
  height: 480px;
  background: transparent;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:992px){
.scrollable10 {
  height: 550px;
  background: transparent;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:1200px){
.scrollable10 {
  height: 620px;
  background: transparent;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

.scrollable11 {
  height: 430px;
  background: transparent;
  overflow-y: scroll;
  margin-bottom: 25px;
}

@media (min-width:768px){
.scrollable11 {
  height: 400px;
  background: transparent;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:992px){
.scrollable11 {
  height: 550px;
  background: transparent;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:1200px){
.scrollable11 {
  /*height: auto;*/
  background: transparent;
  overflow: hidden;
  margin-bottom: 25px;
}
}

.scrollable12 {
  height: auto;
  background: #ddd;
  overflow-y: scroll;
  margin-bottom: 25px;
}

@media (min-width:768px){
.scrollable12 {
  height: auto;
  background: #ddd;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:992px){
.scrollable12 {
  height: auto;
  background: #ddd;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:1200px){
.scrollable12 {
  height: 500px;
  background: #ddd;
  overflow: scroll;
  margin-bottom: 25px;
}
}

.scrollable13 {
  height: 220px;
  overflow-y: scroll;
  margin-bottom: 25px;
  border-color: #ddd;
}

@media (min-width:768px){
.scrollable13 {
  height: 400px;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:992px){
.scrollable13 {
  height: 470px;
  overflow-y: scroll;
  margin-bottom: 25px;
}
}

@media (min-width:1200px){
.scrollable13 {
  height: 500px;
  overflow-y: hidden;
  margin-bottom: 25px;
}
}

.scrollable14 {
  height: auto;
  background: transparent;
  overflow: scroll;
  margin-bottom: 25px;
}

@media (min-width:768px){
.scrollable14 {
  height: auto;
  background: transparent;
  overflow: scroll;
}
}

@media (min-width:992px){
.scrollable14 {
  height: auto;
  overflow: hidden;
}
}

@media (min-width:1200px){
.scrollable14 {/*
  height: auto;*/
  overflow: hidden;
}
}

th.try, td.try, tr.try {
    
  background-color:#AA9935;
}

/* ==========================================================================
navigation section
========================================================================== */
custom-navbar .navbar-brand .navbar-toggle {
    background: #FF6347;
    font-size: 16px;
    color: blue;
    }
.custom-navbar .nav li a {
    color: #FF6347;
    font-size: 20px;
    font-weight: 1000;
    }
.custom-navbar .nav li a:hover {
    background: transparent;
    color: #eeeeee;
}

/* ==========================================================================
home section
========================================================================== */
#home {
  background-size: cover;
  background-position: center;
  color: red;
  /*display: -webkit-flex;
  display: -ms-flexbox;*/
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
      align-items: center;
  height: 113vh;
  text-align: center;
  
}

#home .btn {
  background: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 10px;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 12px 42px;
  /*margin-top: 40px;*/
  margin-right: 16px;
  transition: all 0.4s ease-in-out;
}

#home .btn:hover {
  background: white;
  border-color: transparent;
  color: red;
}

#home .btn2:hover {
  background: #424242;
  border-color: transparent;
  color: black;
}

/*.btn2:hover {
  background: #424242;
  border-color: transparent;
  color: black;
  opacity: 1;
}*/

#home .btn-danger {
  background: #af0101;
  border-color: transparent;
}

}
#home .btn-danger:hover {
  border: 4px solid #ffffff;
    border-radius: 100;
  background: transparent;
    color: #ffffff;
}

#home2 {
  background-size: cover;
  background-position: center;
  color: blue;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
      align-items: center;/*
 margin-top: 60px;
 margin-bottom: 80px;*/
  text-align: center;
  
}

#home2 .btn {
  background: transparent;
  border: 2px solid #ffffff;
  border-radius: 100;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 12px 42px;
  margin-top: 40px;
  margin-right: 16px;
  transition: all 0.4s ease-in-out;
}

#home2 .btn:hover {
  background: #FF6347;
  border-color: transparent;
}
#home2 .btn-danger {
  background: #FF6347;
  border-color: transparent;
}

}
#home2 .btn-danger:hover {
  border: 4px solid #ffffff;
    border-radius: 100;
  background: transparent;
    color: #ffffff;
}

#home3 {
  color: blue;
  display: block;
 margin-bottom: 40px;
  text-align: center;
  
}

#home3 .btn {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 100;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  transition: all 0.4s ease-in-out;
  text-shadow: 2px 2px 4px #000000;
}

#home3 .btn:hover {
  background: white;
  border-color: transparent;
  color: red;
  font-weight: bold;
  text-shadow: 2px 2px 4px white;
}
}
#home3 .btn-danger {
  background: #FF6347;
  border-color: transparent;
}

}
#home3 .btn-danger:hover {
  border: 4px solid #ffffff;
    border-radius: 100;
  background: transparent;
    color: #ffffff;
}


/* ==========================================================================
panggil untuk section2
========================================================================== */
#cartaUMNO {
      position: fixed;
      top: 130; /* Set this to the height of the header*/ 
      left: 280;
      right: 280;
      bottom: 0;
      /*display:none;*/
   }
   
#cartaPemilih {
      position: fixed;
      top: 130; /* Set this to the height of the header*/ 
      left: 280;
      right: 280;
      bottom: 0;
      display:none;
   }   

#jadualUMNO {
      position: fixed;
      top: 130; /* Set this to the height of the header*/ 
      left: 280;
      right: 280;
      bottom: 0;
      display:none;
   }
   
#jadualPemilih {
      position: fixed;
      top: 130; /* Set this to the height of the header*/ 
      left: 280;
      right: 280;
      bottom: 0;
      display:none;
   }   

#jadualPemilihP {
      position: fixed;
      top: 130; /* Set this to the height of the header*/ 
      left: 280;
      right: 280;
      bottom: 0;
      display:none;
   }
   
#jadualPemilihL {
      position: fixed;
      top: 130; /* Set this to the height of the header*/ 
      left: 280;
      right: 280;
      bottom: 0;
      display:none;
   }       

#jadualPemilihBr {
      position: fixed;
      top: 130; /* Set this to the height of the header*/ 
      left: 280;
      right: 280;
      bottom: 0;
      display:none;
   }
   
#jadualPemilihKM {
      position: fixed;
      top: 130; /* Set this to the height of the header*/ 
      left: 280;
      right: 280;
      bottom: 0;
      display:none;
   }  

#jadualAJKB {
      position: fixed;
      top: 130; /* Set this to the height of the header*/ 
      left: 280;
      right: 280;
      bottom: 0;
      display:none;
   }
   
#jadualAJKW {
      position: fixed;
      top: 130; /* Set this to the height of the header*/ 
      left: 280;
      right: 280;
      bottom: 0;
      display:none;
   }   

#jadualAJKY {
      position: fixed;
      top: 130; /* Set this to the height of the header*/ 
      left: 280;
      right: 280;
      bottom: 0;
      display:none;
   }   

#jadualAJKP {
      position: fixed;
      top: 130; /* Set this to the height of the header*/ 
      left: 280;
      right: 280;
      bottom: 0;
      display:none;
   }   

#ahliPAR {
      position: fixed;
      top: 130; /* Set this to the height of the header*/ 
      left: 280;
      right: 40;
      bottom: 0;
      display:none;
   }
   
#ahliDUN {
      position: fixed;
      top: 130; /* Set this to the height of the header*/ 
      left: 280;
      right: 40;
      bottom: 0;
      display:none;
   }

#pilihpru {
      position: fixed;
      top: 130; /* Set this to the height of the header*/ 
      left: 280;
      right: 40;
      bottom: 0;
      display:none;
   }  
   
#jentera {
      position: fixed;
      top: 130; /* Set this to the height of the header*/ 
      left: 280;
      right: 40;
      bottom: 0;
   }      
   
/* ==========================================================================
ajk table css
========================================================================== */  

table.imagetable {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#333333;
  border-width: 1px;
  border-color: #999999;
  border-collapse: collapse;
}
table.imagetable th {
  background:#b5cfd2 url('cell-blue.jpg');
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #999999;
}
table.imagetable td {
  background:#dcddc0 url('cell-grey.jpg');
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #999999;
}

/* ==========================================================================
login form
========================================================================== */
.container {   margin: auto;  width: auto;  }

/*input[type=text], input[type=password] { width: 278px; }*/

:-moz-placeholder {
  color: #c9c9c9 !important;
  font-size: 11px;
}

::-webkit-input-placeholder {
  color: #FF6347;
  font-size: 11px;
  font-weight:bolder;
  font-style:oblique;
}

input {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color:black;
  font-weight:bolder;
}

input[type=text], input[type=password] {
  margin: 5px;
  padding: 0 10px;
  height: 34px;
  color: dark blue;
  background:#FFF9C4;
  /*border: 3px ridge;  
  border-radius: 50px;*/
  }

input.data {
  color: white;
  font-size:12px;
  padding:5 5 5 5;
  background:#999999;
  border: 1px solid;
  }  

textarea.data1 {
  color: white;
  font-size:12px;
  padding:5 5 5 5;
  background:#999999;
  border: 1px solid;
  }  
  
select.data {
  color: white;
  font-size:12px;
  padding:5 5 5 5;
  background:#999999;
  border: 1px solid;
  }    
  
dialog {  
    width: 500px;  
    background:#e8e8e8;
    border: 1px solid #dadada;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 5px 10px 20px 20px;
}  

/* ==========================================================================
SUB DROP DOWN MENU
========================================================================== */

[id^="togList"],                        /* HIDE CHECKBOX */
[id^="togList"] ~ .list,                /* HIDE LIST */
[id^="togList"] + label  span + span,   /* HIDE "Collapse" */
[id^="togList"]:checked + label span{   /* HIDE "Expand" (IF CHECKED) */
  display:none;
}
[id^="togList"]:checked + label span + span{
  display:inline-block;                 /* SHOW "Collapse" (IF CHECKED) */
}
[id^="togList"]:checked ~ .list{
  display:block;                        /* SHOW LIST (IF CHECKED) */
}


/* ==========================================================================
coding for table ajk
========================================================================== */ 
<style type="text/css">

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: #164D61;
}
.colortable {
    padding: 3px;
    border-bottom: 1px solid;
    border-top: 0px;
    border-left: 0px;
    border-right: 1px solid;
    border-color: #164D61;
  background-color:white;
  padding-top:5;
  padding-bottom:5;
}
.colortable th {
  display: table-cell;
    vertical-align: inherit;
}
.colortable td {
  display: table-cell;
    vertical-align: inherit;
}

.colortable tr {
  display: table-row;
    vertical-align: inherit;
    border-color: inherit;
} 

.borderlist {
    border-right: 1px solid white;
    BORDER-TOP: 1px solid #164D61;
    BORDER-BOTTOM: 1px solid #164D61;
    border-left: 0px solid white;
    BACKGROUND-COLOR: #164D61;
  padding-top:5;
  padding-bottom:5; 
  color:white;  
}

.borderlistleft {
    border-right: 1px solid white;
    BORDER-TOP: 1px solid #164D61;
    BORDER-BOTTOM: 1px solid #164D61;
    border-left: 1px solid;
    BACKGROUND-COLOR: #164D61;
  color:white;
}

.colortableleft {
    padding: 3px;
    border-bottom: 1px solid;
    border-top: 0px;
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: #164D61;
  BACKGROUND-COLOR: white;
}

.borderlistUp {
    border-right: 1px solid;
  border-bottom: 1px solid white;
    BORDER-TOP: 1px solid;
    border-left: 0px solid;
    border-color: ##164D61;
    BACKGROUND-COLOR: #164D61;
  color:white;
}




/* ==========================================================================
coding for dropdown menu
========================================================================== */
.dropbtn {
    background-color: #B71C1C;
    color: white;
    padding: 9px;
    font-size: 11px;
    border: 10;
    cursor: pointer;
   width:auto;
}


.dropdown {
    display: inline-block;
  position:relative;
  font-size: 11px;
}

.dropdown-content {
    display: none;  
  /*position:static;*/
    background-color: #BDBDBD;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;   
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: black; color: white}

.dropdown:hover .dropdown-content {
    display: block;
    position: absolute;
  
}

.dropdown:hover .dropbtn {
    background-color: #337ab7;
}

/* ==========================================================================
coding for popup modal windows
========================================================================== */ 

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    z-index: 1;  /* Sit on top */    
    width:auto; /* Full width */
    height: auto; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: grey;
    opacity: 0.7;
}

/* Modal Content */
.modal-content {
    background-color: rgb(0,0,0,0.7);
  margin: auto;
    padding: 20px;
  border:1px solid #999;
  border-radius:20px;
  box-shadow:0 0 10px #999;
  height:auto;
}

/* The Close Button */
.close {
    color: black;
    float: right;
  z-index: 1;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    text-decoration: none;
  /*z-index: 2;*/
    cursor: pointer;
}


.cari {display:none;}

@media screen and (min-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
       -moz-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

  .row-offcanvas-right {
    right: 25%;
  }

  .row-offcanvas-left {
    left: 25%;

  }

  .row-offcanvas-left .panel1 {
    margin-bottom: 20px;    
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    background-color: black;
    color: white;
    border: none;
    border-radius: 0;
  }

  .row-offcanvas-left .ul1 {
    padding: 0;
    list-style: none;
  }

  .row-offcanvas-left .li1 {
    list-style: none; 
    margin-left: -30px;
  }

  .row-offcanvas-left .a1 {
    padding-left: 10px; 
    color: white
  }

  .row-offcanvas-left .list1 {
    z-index: 2;
    color: #fff;
    background-color: #337ab7;
    border: none; 
    border-top-left-radius: 0; 
    border-top-right-radius: 0;
    padding-top: 10px;
    padding-bottom: 5px;
  }

  .row-offcanvas-right .sidebar-offcanvas {
    right: -25%; /* 3 columns */
  }

  .row-offcanvas-left .sidebar-offcanvas {
    left: -25%; /* 3 columns */
    padding-left: 2px;
    padding-right: 5px;
    top: -10px;
    width: auto;
  }

  .row-offcanvas-right.active {
    right: 0; /* 3 columns */
  }

  
  .row-offcanvas-left.active {
    left: 0; /* 3 columns */
  }

  /*.row-offcanvas-right.active .sidebar-offcanvas {
    background-color: rgb(254, 254, 254);
  }
  .row-offcanvas-left.active .sidebar-offcanvas {
    background-color: rgb(254, 254, 254);
  }
*/
.row-offcanvas .content {
    width: 75%; /* 9 columns */
    -webkit-transition: all .25s ease-out;
       -moz-transition: all .25s ease-out;
            transition: all .25s ease-out;

  }

  .row-offcanvas.active .content {
    width: 100%; /* 12 columns */
  }
       
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: auto; /* 3 columns */
  }
}
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
       -moz-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

  .row-offcanvas-right {
    right: 0;
  }

  .row-offcanvas-left {
    left: 0;
  }

  .row-offcanvas-left .panel1 {
    margin-bottom: 20px;    
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    background-color: black;
    color: white;
    border: none;
    border-radius: 0;
    width: 273px;
  }

  .row-offcanvas-left .ul1 {
    padding: 0;
    list-style: none;
  }

  .row-offcanvas-left .li1 {
    list-style: none; 
    margin-left: -30px;
  }

  .row-offcanvas-left .a1 {
    padding-left: 10px; 
    color: white
  }

  .row-offcanvas-left .list1 {
    z-index: 2;
    color: #fff;
    background-color: #337ab7;
    border: none; 
    border-top-left-radius: 0; 
    border-top-right-radius: 0;
    padding-top: 10px;
    padding-bottom: 5px;
  }

  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -30%; /* 6 columns */
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -70%; /* 6 columns */
    padding-left: 2px;
    padding-right: 5px;
    top: -10px;
    width: 273px;
  }

  .row-offcanvas-right.active {
    right: 30%; /* 6 columns */
  }

  .row-offcanvas-left.active {
    left: 70%; /* 6 columns */
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 70%; /* 6 columns */
    padding-left: 2px;
    padding-right: 5px;
    top: -10px;
    width: 273px;
  }

}

.panel-table .panel-body{
  padding:0;
}

.panel-table .panel-body .table-bordered{
  border-style: none;
  margin:0;
}

.panel-table .panel-body .table-bordered > thead > tr > th:first-of-type {
    text-align:center;
    width: 100px;
}

.panel-table .panel-body .table-bordered > thead > tr > th:last-of-type,
.panel-table .panel-body .table-bordered > tbody > tr > td:last-of-type {
  border-right: 0px;
}

.panel-table .panel-body .table-bordered > thead > tr > th:first-of-type,
.panel-table .panel-body .table-bordered > tbody > tr > td:first-of-type {
  border-left: 0px;
}

.panel-table .panel-body .table-bordered > tbody > tr:first-of-type > td{
  border-bottom: 0px;
}

.panel-table .panel-body .table-bordered > thead > tr:first-of-type > th{
  border-top: 0px;
}

.panel-table .panel-footer .pagination{
  margin:0; 
}

/*
used to vertically center elements, may need modification if you're not using default sizes.
*/
.panel-table .panel-footer .col{
 line-height: 34px;
 height: 34px;
}

.panel-table .panel-heading .col h3{
 line-height: 30px;
 height: 30px;
}

.panel-table .panel-body .table-bordered > tbody > tr > td{
  line-height: 34px;
}

/* -- import Roboto Font ---------------------------- */
@import "https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic";

/* -- You can use this tables in Bootstrap (v3) projects. -- */
// @import "//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css";


/* -- Box model ------------------------------- */
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* -- Demo style ------------------------------- */
html, body {
  position: relative;
  min-height: 100%;
  height: 100%;
}

.card {
  background-color: gold;
  border-radius: 2px;
  display: inline-block;
  height: 60px;
  /*margin: 1rem;*/
  margin-top: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  position: relative;
  width: auto;
  text-align: center;
  padding-top: 7px;
  padding-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px;
  color: black;
  font-weight: bold;
  letter-spacing: 0.3em;
  font-size: 30px;
}

.c {
  /*background: rgba(255, 255, 0, 0.2);*/
  border-radius: 2px;
  display: inline-block;
  /*margin: 1rem;*/
  /*margin-top: 1rem;*/
  /*margin-right: 1rem;
  margin-bottom: 1rem;*/
  position: relative;
  /*width: 180px;*/
  text-align: center;
  /*padding-top: 7px;
  padding-bottom: 10px;*/
  padding-left: 1px;
  padding-right: 1px;
  color: black;
  font-weight: bold;
  font-size: 22px;
}

.card2 {
  /*background: rgba(255, 255, 0, 0.2);*/
  border-radius: 2px;
  display: inline-block;
  height: 60px;
  /*margin: 1rem;*/
  margin-top: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  position: relative;
  width: 273px;
  text-align: center;
  padding-top: 7px;
  padding-bottom: 10px;
  padding-left: 1px;
  padding-right: 1px;
  color: black;
  font-weight: bold;
  letter-spacing: 0.3em;
  font-size: 16px;
}

.card3 {
  /*background: rgba(255, 255, 0, 0.2);*/
  border-radius: 2px;
  display: inline-block;
  /*height: 60px;*/
  /*margin: 1rem;*/
  /*margin-top: 1rem;*/
  /*margin-right: 1rem;
  margin-bottom: 1rem;*/
  position: relative;
  /*width: 180px;*/
  text-align: center;
  /*padding-top: 7px;
  padding-bottom: 10px;*/
  padding-left: 1px;
  padding-right: 1px;
  color: black;
  font-weight: bold;
  font-size: 16px;
}

.card4 {
  /*background: rgba(255, 255, 0, 0.2);*/
  border-radius: 2px;
  display: inline-block;
  /*margin: 1rem;*/
  /*margin-top: 1rem;*/
  /*margin-right: 1rem;
  margin-bottom: 1rem;*/
  position: relative;
  /*width: 300px;*/
  text-align: center;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 1px;
  padding-right: 1px;
  color: black;
  font-weight: bold;
  font-size: 16px;
}

.card5 {
  background-color: #FFCDD2;
  border-top-left-radius: 40px;
  border-bottom-right-radius: 40px;
  display: inline-block;
  padding: 10px;
  /*margin-top: 1rem;*/
  /*margin-right: 1rem;
  margin-bottom: 1rem;*/
  position: relative;
  width: auto;
  height: auto;
  text-align: center;
  color: black;
  font-weight: bold;
  font-size: 16px;
}

.c1 {
background-color: #e06377;
}

.c1a {
background-color: lightpink;
}

.c2 {
background-color: #ff6f69;
}

.c2a {
background-color: moccasin;
}

.c3 {
background-color: mediumpurple;
}

.c3a {
background-color: #b8a9c9;
}

.c4 {
background-color: lightseagreen;
}

.c4a {
background-color: lightskyblue;
}

.c5 {
background-color: #ffcc5c;
}

.c5a {
background-color: khaki;
}

.c6 {
background-color: #f2ae72;
}

.c6a {
background-color: navajowhite;
}

.c7 {
background-color: #667292;
}

.c7a {
background-color: #8d9db6;
}

.c8 {
background-color: #80ced6;
}

.c8a {
background-color: #d5f4e6;
}


.card-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);  
}

.card-1:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

hr.style-four {
    height: 12px;
    border: 0;
    box-shadow: inset 0 10px 12px -12px rgba(255, 255, 255, 0.8);
}

html {
  position: relative;
  overflow-x: hidden;
 /* margin: 16px;*/
  padding: 0;
  min-height: 100%;
  font-size: 62.5%; // For rem units support
}

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 11px;
  line-height: 2rem;
  letter-spacing: 1px;
  color: #212121;
  background-color: #f5f5f5;

  // Font Rendering
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

#demo {
  margin: 20px auto;
  max-width: 960px;
}

// Material Design typography
// https://codepen.io/zavoloklom/pen/IkaFL
#demo h1 {
  font-size: 2.4rem;
  line-height: 3.2rem;
  letter-spacing: 0;
  font-weight: 300;
  color: #212121;
  text-transform: inherit;
  margin-bottom: 1rem;
  text-align: center;
}
#demo h2 {
  font-size: 1.5rem;
  line-height: 2.8rem;
  letter-spacing: 0.01rem;
  font-weight: 400;
  color: #212121;
  text-align: center;
}

// Material Design shadows
// 
.shadow-z-1 {
  -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.12),
                      0 1px 2px 0 rgba(0,0,0,.24);
  -moz-box-shadow:    0 1px 3px 0 rgba(0,0,0,.12),
                      0 1px 2px 0 rgba(0,0,0,.24);
  box-shadow:         0 1px 3px 0 rgba(0,0,0,.12),
                      0 1px 2px 0 rgba(0,0,0,.24);
}


/* -- Material Design Table style -------------- */

// Variables
// ---------------------
@table-header-font-weight:      400;
@table-header-font-color:       #757575;

@table-cell-padding:            1.6rem;
@table-condensed-cell-padding:  @table-cell-padding/2;


@table-bg:                      #fff;
@table-bg-accent:               #f5f5f5;
@table-bg-hover:                rgba(0,0,0,.12);
@table-bg-active:               @table-bg-hover;
@table-border-color:            #e0e0e0;



// Mixins
// -----------------
.transition(@transition) {
  -webkit-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}

// Tables
//
// -----------------

// Baseline styles
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 2rem;
  background-color: @table-bg;
  > thead,
  > tbody,
  > tfoot {
    > tr {
      .transition(all .3s ease);
      > th,
      > td {
        text-align: left;
        padding: @table-cell-padding;
        vertical-align: top;
        border-top: 0;
        .transition(all .3s ease);
      }
    }
  }
  > thead > tr > th {
    font-weight: @table-header-font-weight;
    color: @table-header-font-color;
    vertical-align: bottom;
    border-bottom: 1px solid rgba(0,0,0,.12);
  }
  > caption + thead,
  > colgroup + thead,
  > thead:first-child {
    > tr:first-child {
      > th,
      > td {
        border-top: 0;
      }
    }
  }
  > tbody + tbody {
    border-top: 1px solid rgba(0,0,0,.12);
  }

  // Nesting
  .table {
    background-color: @table-bg;
  }

  // Remove border
  .no-border {
    border: 0;
  }
}

// Condensed table w/ half padding
.table-condensed {
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        padding: @table-condensed-cell-padding;
      }
    }
  }
}


// Bordered version
//
// Add horizontal borders between columns.
.table-bordered {
  border: 0;
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        border: 0;
        border-bottom: 1px solid @table-border-color;
      }
    }
  }
  > thead > tr {
    > th,
    > td {
      border-bottom-width: 2px;
    }
  }
}


// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
  > tbody > tr:nth-child(odd) {
    > td,
    > th {
      background-color: @table-bg-accent;
    }
  }
}

// Hover effect
//
.table-hover {
  > tbody > tr:hover {
    > td,
    > th {
      background-color: @table-bg-hover;
    }
  }
}

.img1 {
    width: 50%;
}

@media (min-width:768px){
.img1 {
    width: 35%;
}
}

@media (min-width:992px){
.img1 {
    width: 80%;
}
}

@media (min-width:1200px){
.img1 {
    width: 100%;
}
}

.img2 {
    width: 40%;
}

@media (min-width:768px){
.img2 {
    width: 25%;
}
}

@media (min-width:992px){
.img2 {
    width: 18%;
}
}

@media (min-width:1200px){
.img2 {
    width: 20%;
}
}

.img3 {
    width: 50%;
}

@media (min-width:768px){
.img3 {
    width: 30%;
}
}

@media (min-width:992px){
.img3 {
    width: 80%;
}
}

@media (min-width:1200px){
.img3 {
    width: 60%;
}
}

.img4 {

    margin-top: 500px;
    width: 20%;
}

@media (min-width:768px){
.img4 {
    margin-top: 500px;
    width: 15%;
}
}

@media (min-width:992px){
.img4 {    
    margin-top: -100px;
    width: 10%;
}
}

@media (min-width:1200px){
.img4 {
    width: 8%;
}
}

#basereduce {
  background: peru;
  display: inline-block;
  height: 80px;
  margin-left: 30px;
  margin-top: 0;
  position: relative;
  width: 273px;
  padding: 10px;
}

#basereduce:before {
  border-left: 30px solid peru;
  border-right: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-top: 40px solid transparent;
  content: "";
  height: 0;
  left: 273px;
  position: absolute;
  top: 0;
  width: 0;
}

#basereduce:after {
  border-left: 30px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 40px solid peru;
  border-top: 40px solid peru;
  content: "";
  height: 0;
  left: -30px;
  position: absolute;
  top: 0;
  width: 0;
}

#basereduce:hover {
  box-shadow: 0 1px 10px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.5); transition: all 0.3s cubic-bezier(0.25,0,8,0.25,1);
}

#baseregain {
  background: salmon;
  display: inline-block;
  height: 80px;
  margin-left: 30px;
  margin-top: 0;
  position: relative;
  width: 273px;
  padding: 10px;
}

#baseregain:before {
  border-left: 30px solid salmon;
  border-right: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-top: 40px solid transparent;
  content: "";
  height: 0;
  left: 273px;
  position: absolute;
  top: 0;
  width: 0;
}

#baseregain:after {
  border-left: 30px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 40px solid salmon;
  border-top: 40px solid salmon;
  content: "";
  height: 0;
  left: -30px;
  position: absolute;
  top: 0;
  width: 0;
}

#baseregain:hover {
  box-shadow: 0 1px 10px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.5); transition: all 0.3s cubic-bezier(0.25,0,8,0.25,1);
}

#baseretain {
  background: gold;
  display: inline-block;
  height: 80px;
  margin-left: 30px;
  margin-top: 0;
  position: relative;
  width: 273px;
  padding: 10px;
}

#baseretain:before {
  border-left: 30px solid gold;
  border-right: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-top: 40px solid transparent;
  content: "";
  height: 0;
  left: 273px;
  position: absolute;
  top: 0;
  width: 0;
}

#baseretain:after {
  border-left: 30px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 40px solid gold;
  border-top: 40px solid gold;
  content: "";
  height: 0;
  left: -30px;
  position: absolute;
  top: 0;
  width: 0;
}

#baseretain:hover {
  box-shadow: 0 1px 10px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.5); transition: all 0.3s cubic-bezier(0.25,0,8,0.25,1);
}

#basemaroon {
  background: -webkit-linear-gradient(90deg, rgb(200, 51, 73), rgb(224, 99, 119));
  background: linear-gradient(88deg, rgb(200, 51, 73), rgb(224, 99, 119));
  display: inline-block;
  height: 115px;
  margin-left: 30px;
  margin-top: 0;
  position: relative;
  width: 273px;
  padding: 10px;
}

#basemaroon:before {
  border-left: 30px solid #E06377; 
  border-right: 40px solid transparent;
  border-bottom: 58px solid transparent;
  border-top: 57px solid transparent;
  content: "";
  height: 0;
  left: 273px;
  position: absolute;
  top: 0;
  width: 0;
}

#basemaroon:after {
  border-left: 30px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 58px solid #C83349;
  border-top: 57px solid #C83349;
  content: "";
  height: 0;
  left: -30px;
  position: absolute;
  top: 0;
  width: 0;
}

#basemaroon:hover {
  box-shadow: 0 1px 10px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.5); transition: all 0.3s cubic-bezier(0.25,0,8,0.25,1);
}

#basepurple {
  background: -webkit-linear-gradient(77deg, rgb(145, 47, 88), rgb(173, 90, 124));
  background: linear-gradient(77deg, rgb(145, 47, 88), rgb(173, 90, 124));
  display: inline-block;
  height: 115px;
  margin-left: 30px;
  margin-top: 0;
  position: relative;
  width: 273px;
  padding: 10px;
}

#basepurple:before {
  border-left: 30px solid #ad5a7c; 
  border-right: 40px solid transparent;
  border-bottom: 58px solid transparent;
  border-top: 57px solid transparent;
  content: "";
  height: 0;
  left: 273px;
  position: absolute;
  top: 0;
  width: 0;
}

#basepurple:after {
  border-left: 30px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 58px solid #912f58;
  border-top: 57px solid #912f58;
  content: "";
  height: 0;
  left: -30px;
  position: absolute;
  top: 0;
  width: 0;
}

#basepurple:hover {
  box-shadow: 0 1px 10px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.5); transition: all 0.3s cubic-bezier(0.25,0,8,0.25,1);
}

#basechoc {
  background: -webkit-linear-gradient(77deg, rgb(140, 97, 56), rgb(173, 129, 86));
  background: linear-gradient(77deg, rgb(140, 97, 56), rgb(173, 129, 86));
  display: inline-block;
  height: 115px;
  margin-left: 30px;
  margin-top: 0;
  position: relative;
  width: 273px;
  padding: 10px;
}

#basechoc:before {
  border-left: 30px solid #ad8156; 
  border-right: 40px solid transparent;
  border-bottom: 58px solid transparent;
  border-top: 57px solid transparent;
  content: "";
  height: 0;
  left: 273px;
  position: absolute;
  top: 0;
  width: 0;
}

#basechoc:after {
  border-left: 30px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 58px solid #8C6138;
  border-top: 57px solid #8c6138;
  content: "";
  height: 0;
  left: -30px;
  position: absolute;
  top: 0;
  width: 0;
}

#basechoc:hover {
  box-shadow: 0 1px 10px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.5); transition: all 0.3s cubic-bezier(0.25,0,8,0.25,1);
}

#basegreen {
  background: -webkit-linear-gradient(77deg, rgb(121, 128, 0), rgb(187, 193, 71));
  background: linear-gradient(77deg, rgb(121, 128, 0), rgb(187, 193, 71));
  display: inline-block;
  height: 115px;
  margin-left: 30px;
  margin-top: 0;
  position: relative;
  width: 273px;
  padding: 10px;
}

#basegreen:before {
  border-left: 30px solid #bbc147; 
  border-right: 40px solid transparent;
  border-bottom: 58px solid transparent;
  border-top: 57px solid transparent;
  content: "";
  height: 0;
  left: 273px;
  position: absolute;
  top: 0;
  width: 0;
}

#basegreen:after {
  border-left: 30px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 58px solid #828902;
  border-top: 57px solid #828902;
  content: "";
  height: 0;
  left: -30px;
  position: absolute;
  top: 0;
  width: 0;
}

#basegreen:hover {
  box-shadow: 0 1px 10px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.5); transition: all 0.3s cubic-bezier(0.25,0,8,0.25,1);
}

#baseyellow {
  background: -webkit-linear-gradient(77deg, rgb(198, 130, 3), rgb(226, 176, 81));
  background: linear-gradient(77deg, rgb(198, 130, 3), rgb(226, 176, 81));
  display: inline-block;
  height: 115px;
  margin-left: 30px;
  margin-top: 0;
  position: relative;
  width: 273px;
  padding: 10px;
}

#baseyellow:before {
  border-left: 30px solid #e2b051; 
  border-right: 40px solid transparent;
  border-bottom: 58px solid transparent;
  border-top: 57px solid transparent;
  content: "";
  height: 0;
  left: 273px;
  position: absolute;
  top: 0;
  width: 0;
}

#baseyellow:after {
  border-left: 30px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 58px solid #ce8908;
  border-top: 57px solid #ce8908;
  content: "";
  height: 0;
  left: -30px;
  position: absolute;
  top: 0;
  width: 0;
}

#baseyellow:hover {
  box-shadow: 0 1px 10px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.5); transition: all 0.3s cubic-bezier(0.25,0,8,0.25,1);
}

.text3r_up {
    font-size: 30px;
    padding: 2px 0 2px 0;
    margin-top: -15px;
}

.text3r_down {
    font-size: 30px;
    padding: 0 0 0 9px;
    margin-top: 10px;
    white-space: initial;
    line-height: 20px;
    color: red;
}

.text3r_downx {
    font-size: 20px;
    padding: 0 5px 0 5px;
    /*margin-top: -10px;*/
    white-space: initial;
    line-height: 20px;
    color: white;
}

.text_main {
    font-size: 28px;
    padding: 0 0 0 11px;
    white-space: initial;
    line-height: 20px;
    color: white;
}

.text_main2 {
    font-size: 18px;
    padding: 0;
    white-space: initial;
    line-height: 20px;
    color: white;
}

.text_percent {
    font-size: 16px;
    padding: 2px 2px 0 0;
    white-space: initial;
    line-height: 20px;
    background-color: white;
    border-radius: 4px;
    margin: 0;
    background-color: #FFF9C4;
    border: 1px solid #ccc;
    font-weight: bold;
}

.strokeme
{
    text-shadow:
    -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white;  
}

.margintittle
{
  padding: 0;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid black;
}

.textdash {
  font-size: 16px;
  font-weight: bold;
  line-height: 16px;
  letter-spacing: 0;
}

.textdash2 {
  font-size: 11px;
  font-weight: bold;
  line-height: 11px;
  letter-spacing: 0;
}

@media (min-width:768px){
.textdash {
  font-size: 12px;
  font-weight: bold;
  line-height: 12px;
  letter-spacing: 0;
}
}
@media (min-width:992px){
.textdash {
  font-size: 12px;
  font-weight: bold;
  line-height: 12px;
  letter-spacing: 0;
}
}

@media (min-width:1200px){
.textdash {
  font-size: 16px;
  font-weight: bold;
  line-height: 16px;
  letter-spacing: 0;
}}
/*@media (min-width:768px){
.text3r {
    font-size: 30px;
    padding: 5px;
}
}

@media (min-width:992px){
.text3r {
    font-size: 30px;
    padding: 5px;
}
}

@media (min-width:1200px){
.text3r {
    font-size: 30px;
    padding: 5px;
}
}*/

#scroll {
    position:fixed;
    right:700px;
    top:10px;
    cursor:pointer;
    width:auto;
    height:auto;
    background-color:#B71C1C;
    /*text-indent:-9999px;*/
    display:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    z-index: 9999;
    color: white;
}

#scroll:hover {
    background-color:#757575;
    opacity:1;
    filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}

.tittleicon {
  font-size: 18px;
  white-space: initial;
  font-weight: normal;
}

@media (min-width:768px){
.tittleicon {
  font-size: 18px;
  white-space: initial;
  line-height: 18px;
  font-weight: normal;
}
}
@media (min-width:992px){
.tittleicon {
  font-size: 18px;
  white-space: initial;
  line-height: 18px;
  font-weight: normal;
}
}
}

@media (min-width:1200px){
.tittleicon {
  font-size: 20px;
  white-space: initial;
  line-height: 20px;
  font-weight: normal;
}
}