#body{
    overflow-x: hidden;
    overflow-y: hidden;
  
  }
  


  .background-image{
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
   /*  background-image: url('../../assets/image/trygif2.gif'); */
    background-image: url('../../assets/image/bgtry3.jpg');
    background-size:100%;
    background-repeat: no-repeat;
  }
  /* 
  ::-webkit-scrollbar {
    display: none;
    } */
  
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
      }
      
      .switch input {display:none;}
      
      .slider {
        position: absolute;
        cursor: pointer;
        top: 6px;
        left: 11px;
        right: 7px;
        bottom: 7px;
        background-color: #ccc;
        transition: .4s;
      }
      
      .slider:before {
        position: absolute;
        content: "";
        height: 11px;
        width: 11px;
        left: 2px;
        bottom: 5px;
        background-color: white;
        transition: .4s;
      }
      
      input:checked + .slider {
        background-color: #2196F3;
      }
      
      input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
      }
      
      input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
      }
      
      /* Rounded sliders */
      .slider.round {
        border-radius: 34px;
      }
      
      .slider.round:before {
        border-radius: 50%;
      }
  
  
  .sk-fading-circle {
    margin: 100px auto;
    width: 40px;
    height: 40px;
    position: relative;
    
  }
  
  .sk-fading-circle .sk-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  
  .sk-fading-circle .sk-circle:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #333;
    border-radius: 100%;
    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
  }
  .sk-fading-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  .sk-fading-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  .sk-fading-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .sk-fading-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
            transform: rotate(120deg);
  }
  .sk-fading-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
            transform: rotate(150deg);
  }
  .sk-fading-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  .sk-fading-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
            transform: rotate(210deg);
  }
  .sk-fading-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
            transform: rotate(240deg);
  }
  .sk-fading-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .sk-fading-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
            transform: rotate(300deg); 
  }
  .sk-fading-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
            transform: rotate(330deg); 
  }
  .sk-fading-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s; 
  }
  .sk-fading-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
            animation-delay: -1s; 
  }
  .sk-fading-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s; 
  }
  .sk-fading-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s; 
  }
  .sk-fading-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s; 
  }
  .sk-fading-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s; 
  }
  .sk-fading-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s; 
  }
  .sk-fading-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
  }
  .sk-fading-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
  }
  .sk-fading-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
  }
  .sk-fading-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s;
  }
  
  @-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
  }
  
  @keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; } 
  }
  #d:hover { 
    color: rgb(14, 102, 18);
  
    
  }
  #active{
    text-decoration-line: underline;
    text-decoration-color: rgb(66, 26, 245);
  } 
  #ac{
    color: rgb(38, 38, 90)
  }
  ul, li {
    list-style: none;
    float: left;
    line-height: 15vh;
  }
  .upper{
    margin-top: -70px;
    width: 100%;
    height: 15%;
   /* margin-left: -2px;*/
    position: fixed;
    background-color: white;
    top: 0;
    z-index: 1
  }
  .up{
    color: gray;
    /* Add a font */
   
    /* Set the font-size to 25 pixels */
    font-size: 25px;
  
  }  
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: -220px;
    margin-top: -20px;
    
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  .desc {
    padding: 15px;
    text-align: center;
  }
  #insert{
    margin-left:8px;
    margin-top:-15px;
    text-shadow: 20px;
  }
  #insert2{
    margin-left:8px;
    margin-top:-15px;
    text-shadow: 20px;
  }
  .example-container {
    width: 500px;
    height: 300px;
    border: 1px solid rgba(0, 0, 0, 0.5);
  }
  
  .example-sidenav-content {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
  
  .example-sidenav {
    padding: 20px;
  }
  .vertical-menu {
    width: 250px;
    padding-left: 10px;
  }
  
  .vertical-menu a {
    background-color: #eee;
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;
   
  }
  
  .vertical-menu a:hover {
    background-color: #ccc;
  }
  
  .vertical-menu a.active {
    
    background: rgba(0, 0, 0, 0.8);
    color: white;
  }
  #c2 {
    
    
  }
  #c1 {
    float:left;
  
  }
  
  body {margin:0}
  
  .icon-bar {
    width: 17%;
  /*     background-color: #555; */
  background-color: #18262F;
    margin-top: -9px;
    height:100%;
    position: fixed;
    display: inline-block;
    margin-left: -16px;
  }
  @media screen and (max-width: 1000px){        
    .off{
       display: none;
    }
  }
  
  
  /* Absolute Center Spinner */
  .loading {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  
  /* Transparent Overlay */
  .loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
  }
  
  /* :not(:required) hides these rules from IE9 and below */
  .loading:not(:required) {
    /* hide "loading..." text */
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
  }
  
  .loading:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    -webkit-animation: spinner 1500ms infinite linear;
    -moz-animation: spinner 1500ms infinite linear;
    -ms-animation: spinner 1500ms infinite linear;
    -o-animation: spinner 1500ms infinite linear;
    animation: spinner 1500ms infinite linear;
    border-radius: 0.5em;
    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  }
  
  /* Animation */
  
  @-webkit-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-moz-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-o-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  
  
  .icon-bar2 {
    
    width: 299px;
    background-color: white;
    margin-top: -7px;
    height:86vh;
    position: fixed;
   
  }
  .icon-bar a {
    display: block;
    text-align: center;
    padding: 16px;
    transition: all 0.3s ease;
    color: white;
    font-size: 14px;
    text-align: left;
  }
  
  .icon-bar a:hover {
    background-color: #000;
  }
  
  .active {
    background-color: #4CAF50 !important;
  }
  .iphone {
    width: 201px;
    height: 378px;
    background: #f9f7f9;
    border: 5px solid #c1bfc1;
    border-radius: 45px;
    opacity: 0.8;
  }
  .highlight {
    width: 185px;
    height: 366px;
    border: 3px solid #fff;
    border-radius: 45px;
    position: relative;
    z-index: 10;
    top: -748px;
    left: 10px;
  }
  .circle {
    width: 7px;
    height: 7px;
    background: #333;
    border-radius: 50%;
    position: relative;
    top: -370px;
    left: 92px;
  }
  .camera {
    width: 10px;
    height: 10px;
    background: #333;
    border-radius: 50%;
    position: relative;
    top: -376px;
    left: 66px;
  }
  .speaker {
    width: 59px;
    height: 3px;
    background: #333;
    border-radius: 5px;
    position: relative;
    top: -372px;
    left: 73px;
  }
  .screen {
    width: 166px;
    height: 255px;
    border: 3px solid #333;
    border-radius: 5px;
    position: relative;
    left: 18px;
    top: -365px;
  background: #7f8282;
  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
  background: -o-linear-gradient(#e2e3e4, #7f8282);
  background: -moz-linear-gradient(#e2e3e4, #7f8282);
  background: linear-gradient(#e2e3e4, #7f8282);
  }
  .home1 {
    width: 47px;
    height: 47px;
    background: #fff;
    border-radius: 50%;
    position: relative;
    top: -353px;
    left: 79px;
    z-index: 2;
  }
  .home2 {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    position: relative;
    top: -403px;
        left: 77px;
  background: #7f8282;
  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
  background: -o-linear-gradient(#e2e3e4, #7f8282);
  background: -moz-linear-gradient(#e2e3e4, #7f8282);
  background: linear-gradient(#e2e3e4, #7f8282);
  } 
  #c2{
    background:green;
    float:right;
  }
  #c1, #c2 {
    width: 33%; 
    background: rebeccapurple
  }
  
  #c3 {
    width: auto;
     width:34%;
    background: red
  }
  .off{
    margin: auto;
    width: 60%;
    top:70%;
    padding: 10px;
    margin-right:30%
    
  }
  .newspaper {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    align-content:left;
    text-align: left;
  }
  #demo {
    margin: 30px 0 50px 0;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    
  }
  
  #demo .wrapper {
    display: inline-block;
    width: 180px;
    margin: 0 10px 0 0;
    height: 20px;
    position: relative;
  
  }
  
  #demo .parent {
    height: 100%;
    width: 100%;
    display: block;
    cursor: pointer;
    line-height: 30px;
    height: 30px;
    border-radius: 5px;
    background: #F9F9F9;
    border: 1px solid #AAA;
    border-bottom: 1px solid #777;
    color: #282D31;
    font-weight: bold;
    z-index: 2;
    position: relative;
    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
    -webkit-transition-delay: .8s;
    text-align: center;
  }
  
  #demo .parent:hover,
  #demo .content:hover ~ .parent {
    background: #fff;
    -webkit-transition-delay: 0s, 0s, 0s;
  }
  
  #demo .content:hover ~ .parent {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 0;
  }
  
  #demo .content {
    position: absolute;
    top: 0;
    display: block;
    z-index: 1;
    height: 0;
    width: 180px;
    padding-top: 30px;
    -webkit-transition: height .5s ease;
    -webkit-transition-delay: .4s;
    border: 1px solid #777;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,.4);
  }
  
  #demo .wrapper:active .content {
    height: 123px;
    z-index: 3;
    -webkit-transition-delay: 0s;
  }
  
  #demo .content:hover {
    height: 123px;
    z-index: 3;
    -webkit-transition-delay: 0s;
  }
  
  
  #demo .content ul {
    background: #fff;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  
  #demo .content ul a {
    text-decoration: none;
  }
  
  #demo .content li:hover {
    background: #eee;
    color: #333;
  }
  
  #demo .content li {
    list-style: none;
    text-align: left;
    color: #888;
    font-size: 14px;
    line-height: 30px;
    height: 30px;
    padding-left: 10px;
    border-top: 1px solid #ccc;
  }
  
  #demo .content li:last-of-type {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .customClass {
    background-color: #dd3;
    border-radius: 5px;
    margin:5px;
    width: 500px;
  }
  
  .customClass .img-ul-upload {
    background-color: #000 !important;
  }
  
  .customClass .img-ul-clear {
    background-color: #B819BB !important;
  }
  
  .customClass .img-ul-drag-box-msg {
    color: purple !important;
  }
  
  .customClass .img-ul-container {
    background-color: #FF6CAD !important;
  }
  .img-ul-file-upload[_ngcontent-c6] {
    padding: 16px;
    height: 201px !important;
  }
  .weekDays-selector input {
    display: none!important;
  }
  
  .weekDays-selector input[type=checkbox] + label {
    display: inline-block;
    border-radius: 6px;
    background: #dddddd;
    height: 40px;
    width: 34.2px;
    margin-right: 3px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
  }
  
  .weekDays-selector input[type=checkbox]:checked + label {
    background: #2AD705;
    color: #ffffff;
  }
  @media screen and (max-width: 900px) {
        .icon-bar{
            display: none;
            
        }
        .sch{
            display: none;
        }
        .first{
            width:1%!important;
        }
        .second{
            margin-left: 8px!important;
        }
        .small{
            display: block!important;
        }
        .image{
            display: none;
        }
        .schlar{
            display: block!important;
        }
  }
  
  @media screen and (min-width: 900px) {
  .schlar{
    display: none;
  }
  
  }
  .small{
      display: none;
  }
  .first{
    float:left;
    width: 16%; 
    height:86vh;
    overflow-y: hidden;
    overflow-x: hidden;
    margin-right: 5px
  }
  .second{
    width: 88%; 
    height:86vh;
    margin-left:171px;
  }
  .mat-dialog-container {
    max-width: none !important;
  }
  .sch{
  
  }
  .schlar{
  
  }
  .pointer{
    cursor:pointer !important;
    font-size: 11px
  }
  /* Side Navi */
  #mySidenav a {
    margin-top: -9px;
    position: absolute;
    left: -80px;
    transition: 0.3s;
    width: 100px;
    text-decoration: none;
    font-size: 28px;
    color: white;
    border-radius: 0 5px 5px 0;
  }
  
  #mySidenav a:hover {
    left: 0;
  }
  
  #about {
    top: 20px;
    background-color: #ffffff;
    opacity: .4;
  }
  
  #blog {
    top: 80px;
    background-color: #18262F;
  }
  
  #projects {
    top: 140px;
    background-color: #f44336;
  }
  
  #contact {
    top: 200px;
    background-color: #555
  }
  
  .expansion-panel__content{
    margin-left: 0% !important;
  }
  
  
  
  .button2 {background-color: #008CBA;}
  .ngx-picker--btn {
    color: #000;
    background-color: transparent;
    border: none;
    padding: 1em;
    font-size: 1em; }
    .ngx-picker--btn__selected {
      background-color: #eee; }
    .ngx-picker--btn:hover {
      transition: .25s ease;
      background-color: #eee;
      cursor: pointer; }
    .ngx-picker--btn:focus {
      outline-color: transparent; }
  
  .ngx-picker--btn__month:hover {
    border-top-left-radius: 0.2em; }
  
  .ngx-picker--btn__done:hover {
    border-bottom-right-radius: 0.2em; }
  
  .ngx-picker--btn__now:hover {
    border-bottom-left-radius: 0.2em; }
  
  .ngx-picker--btn__next:hover {
    border-top-right-radius: 0.2em; }
  
  .calendar {
    position: absolute;
    background-color: #e6e6e6;
    max-width: 16em;
    min-width: 16em;
    font-size: 16px;
    font-family: "Arial", sans-serif;
    border-radius: 0.2em;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
  
  .calendar--previous-and-next {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: flex-end; }
  
  .calendar--footer {
    display: flex;
    justify-content: space-between;
    background-color: #e6e6e6;
    padding: 0;
    border-radius: 0.2em; }
  
  .calendar--years-select,
  .calendar--months-select {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 14.85em;
    background-color: #fff;
    width: 100%; }
  
  .calendar--year,
  .calendar--month {
    display: block;
    padding: .5em 1em;
    width: 100%;
    overflow: hidden;
    color: #000; }
    .calendar--year__selected,
    .calendar--month__selected {
      color: #000;
      font-weight: bold;
      background-color: #eee; }
    .calendar--year:hover,
    .calendar--month:hover {
      cursor: pointer;
      background-color: #eee;
      font-weight: 400;
      color: #000; }
  
  .calendar--days-of-week {
    display: flex;
    justify-content: space-around;
    background-color: #eee; }
  
  .calendar--day-of-week {
    position: relative;
    padding: .5em;
    text-align: center;
    text-transform: uppercase;
    color: #000;
    font-size: .9em; }
  
  .calendar--days-select {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #fff; }
  
  .calendar--day {
    text-align: center;
    width: 1.285em;
    padding: .5em;
    font-weight: 500;
    color: #000; }
    .calendar--day__muted {
      color: #999; }
    .calendar--day__selected {
      background-color: #eee;
      color: #000; }
    .calendar--day:hover {
      cursor: pointer;
      color: #000;
      background-color: #eee; }
  
  .ngx-picker {
    display: flex;
    position: relative; }
    .ngx-picker .calendar {
      position: absolute;
      left: 0;
      top: 2.5em;
      z-index: 3; }
  
  .time-picker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    max-width: 16em;
    min-width: 16em;
    background-color: #e6e6e6; }
  
  .time--values {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 16em;
    min-width: 16em;
    background-color: #eee; }
  
  .time--value {
    width: 2.66em;
    font-size: 1em;
    padding: .5em 0;
    text-align: center;
    color: #000; }
    .time--value__selected {
      color: #000;
      background-color: #e6e6e6; }
    .time--value:hover {
      transition: .25s ease;
      cursor: pointer;
      background-color: #e6e6e6; }
  
  [hidden] {
    display: none !important; }
    #c11 {
        width: 25%; 
        float:left
    }
    #c22{
        width: 25%; 
        float:left
    }
    #c33 {
        width: 25%; 
        float:left
        
    }
    #c44{
        width: 25%; 
        float:left
    }
    #c111 {
        width: 50%; 
        float:left
    }
    #c222{
        width: 45%; 
        float:left
    }
    #c333 {
        width: 5%; 
        float:left
        
    }
    