body{
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      background: #3385ff;
      background-size: cover;
  }
  .box{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 50%;
      padding: 0px;
       box-sizing: border-box;
      box-shadow: 0 15px 25px rgba(0,0,0,.5);
      border-radius: 0px;
  }
  .box h2{
      margin: 0 0 30px;
      padding: 0;
      color: #fff;
      text-align: center;
  }
  .box .inputBox{
      position: relative;
  }
  .box .inputBox input{
      width: 100%;
      padding: 10px 0;
      font-size: 16px;
      color: #fff;
      letter-spacing: 1px;
      margin-bottom: 30px;
      border: none;
      border-bottom: 1px solid #fff;
      outline: none;
      background: transparent;
      cursor: pointer;
  }
  .box .inputBox label{
      position: absolute;
      top: 0;
      left: 0;
      letter-spacing: 1px;
      padding: 10px 0;
      font-size: 16px;
      color: #fff;
      pointer-events: none;
      transition: .5s;
  }
  .box .inputBox input:focus ~ label,
  .box .inputBox input:valid ~ label{
      top: -18px;
      left: 0;
      color: #03a9f4;
      font-size: 12px;
  }
  .box input[type="submit"]{
      position: relative;
      display: inline-block;
      border: none;
      text-align: center;
      margin: 15px 107px;
      padding: 12px 20px;
      cursor: pointer;
      color: #03a9f4;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-decoration: none;
      font-size: 18px;
      overflow: hidden;
      -webkit-transition: 0.2s;
      transition: 0.2s;
      border-radius: 10px;
  }
  .box input[type="submit"]:hover{
      color: #255784;
    background: #fff;
    -webkit-box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px 
  
  #2196f3;
            box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px 
  
  #2196f3;
  }
  


  @media (max-width: 651px)  {
  .box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 91.8%;
    padding: 0px;
     box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0,0,0,.5);
    border-radius: 0px;
}

  }
   
  
  .per-card-3 {
              width: 100%;
              height: 424px;
  
              -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
              -moz-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
              -o-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
              box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
          }
  
           .per-card-3:hover .card-content .social-icons {
              opacity: 1;
              height: 280px;
          }
          
           .per-card-3:hover .social-icons .card-btn {
              bottom: 0px !important;
              
              -webkit-animation: down-btn 1.5s;
              -moz-animation: down-btn 1.5s;
              -o-animation: down-btn 1.5s;
              animation: down-btn 1.5s;
          }
  
           .per-card-3 .card-image {
                  position:relative;
                  background: #009688;
                  padding-top: 18px;
                  padding-bottom: 10px;
                  text-align:center;
                 
              }
  
         
  
                  .per-card-3  .per-name {
                      
                     line-height: 28px;
                      text-transform: uppercase;
                      letter-spacing: 0px;
                      font-size: 15px;
                      color: #fff;
                       text-align: 
  
  center;
  
                     font-weight: 600;
                  }
              
        .per-card-3 .card-content {
                  text-align: center;
                  padding-top: 58px;
          position: relative;
          font-weight: 600;
          
              }
  
       .per-card-3 .card-content .per-position {
                      font-size: 19px;
                      text-transform: uppercase;
                      letter-spacing: 2px;
                       color: #009688;
            
            
                  }
  
       .per-card-3 .card-content .card-text {
            padding: 18px;
            
                  }
                      
         .per-card-3 .card-content .card-text span {
                          font-size: 13px;
              color: #007368;
              
                      }
  
       .per-card-3 .card-content .social-icons {
                      position: absolute;
                      top: 0;
                      width: 100%;
                      left: 0;
                      opacity: 0;
                      height: 0%;
                      background: #009688;
                      border-top: 1px solid #5eada5;
                      cursor: pointer;
  
                      -webkit-transition: all .5s ease-in-out;
                      -moz-transition: all .5s ease-in-out;
                      -o-transition: all .5s ease-in-out;
                      transition: all .5s ease-in-out;
                  }
        .per-card-3 .card-content .social-icons h4 {
            font-size:20px;
            color: #fff;
            margin-top: 35px;
            
  
          }
         .per-card-3 .card-content .social-icons i {
                          margin: 15px;
                          font-size:30px;
                          color: #fff;
                          cursor:pointer;
  
                          -webkit-transition: all .3s ease-in-out;
                          -moz-transition: all .3s ease-in-out;
                          -o-transition: all .3s ease-in-out;
                          transition: all .3s ease-in-out;
                      }
  
          .per-card-3 .card-content .social-icons i:hover {
                          -webkit-transform: scale(1.4);
                          -moz-transform: scale(1.4);
                          -o-transform: scale(1.4);
                          transform: scale(1.4);
                      }
                    
                    
                      .per-card-3 .card-content .social-icons 
  
  .card-btn {
                          
                          
                          text-align: center;
                          width: 100%;
                      }
  
            .per-card-3 .card-content .social-icons .card-btn button 
  
  {
                              cursor: pointer;
                              width: 100%;
                              padding: 5px;
                              font-size: 18px;
                              color: #fff;
                              background: #03695f;
                              border: none;
                              
                          }
  
                          .per-card-3  .social-icons .slide__image {
                            cursor: pointer;
                            width: 100%;
                            height: 284px;
                            line-height: 28px;
                            border: none;
                          }   
  
          @media (min-width: 769px)  {
          
                          .per-card-3  .social-icons .slide__image {
                            cursor: pointer;
                            width: 100%;
                            height: 275px;
                            
                            border: none;
                            
                        }
          
                        }
  
  
  
                        @media only screen and (max-width: 451px) {
          
                         
                         
                      .per-card-3  .per-name {
                                      
                        line-height: 28px;
                         text-transform: uppercase;
                         letter-spacing: 0px;
                         font-size: 11.5px;
                         color: #fff;
                          text-align: center;
                  
                        font-weight: 600;
                     }
                   }
                    
                         
                  
                  
                  
                  
  #calendari {
      margin: 0px 0;
      position: relative;
      overflow: hidden;
      height: 384px;
      width: 100%;
      font-size: 14px;
      box-shadow: 0px 1px 4px rgba(0,0,0,0.4);
  }
  table {
      border-collapse: collapse;
      table-layout: fixed;
      width: 100%;
      box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
      background-color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      transform: translateX(0);
      transition: all 0.3s ease;
  }
  table.actiu {
      transform: translateX(0px)top;
  }
  table.inactiu {
      transition: all 0.3s 0.01s ease;
  }
  table.amagat-esquerra {
      transform: translateX(-299px);
  }
  table.amagat-dreta {
      transform: translateX(300px);
  }
  td,th {
      text-align: center;
      background-color: #fff;
  }
  th {
      padding: 10px;
  }
  tr:first-child th {
      font-size: 20px;
      font-weight: bold;
      border-left: none;
    border-top: none;
    text-align: center;
  }
  td:last-child, th:last-child {
    border-right: none;
  }
  
  th {
      border-top: 1px solid rgba(0,0,0,0.1);
      border-right: 1px solid rgba(0,0,0,0.1);
      background-color: #237db1;
      color: #fff;
      text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
      font-weight: normal;
  }
  th .any {
      font-size: 12px;
      font-weight: normal;
      display: block;
      text-shadow: none;
    color: whitesmoke;
    font-weight: bold;
  }
  tr:nth-child(2) th {
      padding: 15px;
      font-weight: 700;
  }
  td {
      padding: 0;
      border-bottom: 2px solid rgba(0,0,0,0.05);
  }
  td>span {
      color: #555;
      padding: 10px;
      display: block;
      border: 1px solid transparent;
      transition: border 0.3s ease;
  }
  
  td:nth-child(even)>span {
      background-color: rgba(0,0,0,0.02);
  }
  td:last-child>span,
  td:nth-child(6)>span {
      color:  #237db1;
  }
  td.avui>span {
      font-weight: bold;
      background-color:  #237db1;
      color: #fff;
      border: 2px solid rgba(0,0,0,0.1);
  }
  td.fora > span {
      opacity: 0.2;
  }
  td > span:hover {
      background:  #33daf0;
      color: #fff;
  }
  .boto-next, .boto-prev {
      background: rgba(0,0,0,0.1);
      color: #fff;
      font-family: inherit;
      border: none;
      font-size: 22px;
      font-weight: bold;
      text-shadow: inherit;
      padding: 5px 10px 5px 10px;
      line-height: 1px;
      height: 30px;
      width: 30px;
      vertical-align: middle;
      border-radius: 0%;
      position: absolute;
      top: 15px;
  }
  .boto-next { right: 10px; padding-left: 13px; }
  .boto-prev { left: 10px; padding-right: 13px;}
  .boto-next:hover,
  .boto-prev:hover {
      background: rgba(0,0,0,0.2);
  }
  button:hover { cursor: pointer; }
  button:focus { outline: none; }
  
  
  
  @media only screen and (max-width: 768px){
    #calendari {
      margin: 0px 0;
      position: relative;
      overflow: hidden;
      height: 405px;
      width: 100%;
      font-size: 14px;   
    }
     
    
    }
  
  
                      
   
  
  /*----------------------------------------------------------------
  
  --
        Post-box
    
  
  ------------------------------------------------------------------
  
  -*/
    
    
    .post-box .date{
        display: inline-block;
        position: absolute;
        top: 15px;
        right: 15px;
        background: #333333;
        color: #fff;
        padding: 10px 15px;
        text-align: center;
    }
    
    .post-thumb{
      position: relative;
      
    }
    
    #categoryPart .single_post_content h1{
      margin-top: 27px;
      margin-bottom: 27px;
      color: #000;
      
    }
  
    #categoryPart .post-desc p{
     margin-left: 0px;
  
    }
    
    #post-thumb .single_post_content4 h2{
      font-size: 10px;
      
    } 
    #team-section .single_post_content4 h2{
      margin-top: 28px;
      color: #000;
      
    }
    
    .post-box{
        -webkit-box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 
  
  0.15);
        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -2px 
  
  rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.2);        
     
      background: #ffffff;
      margin-bottom: 20px;
      margin-top: 0px;
      width: 100%;
    }
    
    .post-thumb {
      width: 100%;
      height: 341px;
      
      
    }
  
    .post-thumb img{
      width: 100%;
      height: 300px;
      display:inline-block;
      
    }
    @media only screen and (max-width: 768px) {
        
      .post-box{
        margin-top: 1px;
        margin-bottom: 5px;
        
      }
  
      .post-box:hover .post-thumb::before{
        
        margin-top: 10px;
      }
  
      
    }
  
    .post-box:hover .post-thumb::before{
        opacity: .6;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        margin-top: 0px;
    }
    
    
    .post-box .post-thumb::before{
        content: "";
        position: absolute;
        
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(51, 51, 51, 0.80);
        opacity: 0;
        -webkit-transition: all .5s;
        transition: all .5s;
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    
    .post-info{
        padding: 0px 15px 40px 15px;
        background: #ffffff;
        text-align: left;
        margin-top: 40px;
    }
    
    .post-info p{
        margin: 0px;
    }
    
    .post-info h4{
        font-size: 20px;
        font-weight: 700;
    }
    
    .post-info ul{
        display: block;
        text-align: center;
        margin-bottom: 15px;
    }
    .post-info ul li{
        
    
    display: inline-block;
        text-align: center;
    }
    
    
    
    
    .spost_nav .media-body > a{
      font-family:"Oswald",sans-serif
    }
    .post-img{
      position:relative
    }
    
    
    
  
  
  
  /*==============*/
  
  strong, b {font-weight:bold;}
  #wrapper {
    margin:0 auto;padding:1.2rem;
    width:100%;height:auto;
    
    background:var(--reversecolor);
    color:var(--textcolor);
    text-align:left;
    position:relative;
  }
  
  #analogclock {
    font-size:8px;
   
    margin:0 ;
    padding:0;
    width:100%;
    height:300px;
   
    border-radius:0%;
    display:block;
    position:relative;
    text-align:center;
    background:#ebf5fc url(../img/irrigation/irrigation541.jpg);
   
  }
  
  #brand {
    display:inline-block;
    position:absolute;
    width:100%;height:auto;
    top:46%;left:2px;
    text-align:center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, 
  
  sans-serif;
    font-size:19px;
   
    translate: (50%, -50%);
    text-shadow: 1px, 1px, 1px #1fa1aa,
    1px, 1px, 1px #919191,
    1px, 1px, 1px #919191,
    1px, 1px, 1px #919191,
    1px, 1px, 1px #919191,
    1px, 1px, 1px #919191,
    1px, 1px, 1px #919191,
    1px, 18px, 5px #464545,
    1px, 22px, 10px #464545,
    1px, 25px, 35px #464545;
  }
  #clocknumbers, #clocknumbers24 {
    display:inline-block;
    position:absolute;
    border:0 none;
    border-radius:50%;
  }
  #clocknumbers {
    width:87%;height:80%;
    top:11%;left:7%;
  }
  #clocknumbers24 {
    width:71%;height:62%;
    top:20%;left:15%;
    border:0 none;
  }
  .clockdigits, .clockdigits24 {
    position:absolute;
    padding:0;margin:0;
    width:4em;height:1em;
    text-align:center;
    font-family:"Times New Roman", serif;
    font-weight:bold;
  }
  .clockdigits{
    font-size:30px;
    color:#345;
  }
  .clockdigits24 {
    color:#684;
    font-size:12px;
  }
  
  #nut {
    display:inline-block;
    position:absolute;width:2.4em;height:2.4em;
    top:calc(50% - 1.2em);left:calc(50% - 1.2em);
    border:0.2em solid #333;
    background:radial-gradient(#ccc,#000, #ccc);
    border-radius:50%;
    box-shadow:inset 0 0 0 0.1em #333,
      0 0 0 0.1em #000;
  }
  .guide {
    position:absolute;
    background:transparent;
    height:100%;width:1px;
    left:50%;top:0;
    transform:rotate(var(--angle));
    font-family:"Times New Roman",serif;
    font-weight:bold;
    font-size:1em;
  }
  .guide::before {
    content:'';
    width:0.5em;height:1em;
    background:#000;
    position:absolute;left:0;top:0;
  }
  .guide::after {
    content:'';
    width:0.5em;height:1em;
    background:#000;
    position:absolute;left:0;top:calc(100% - 1em);
  }
  .guidedot {
    position:absolute;
    background:transparent;
    height:100%;width:1px;
    left:50%;top:0;
    transform:rotate(var(--angle));
  }
  .guidedot::before {
    content:'';
    width:0.25em;height:0.5em;
    background:#000;
    position:absolute;left:0;top:0;
  }
  .guidedot::after {
    content:'';
    width:0.25em;height:0.5em;
    background:#000;
    position:absolute;
    left:0;top:calc(100% - 0.5em);
  }
  #secondscircle {
    position:absolute;
    width:94%;height:94%;
    left:3%;top:3%;
    border-radius:50%;
  }
  #secondshand {
    position:absolute;
    background:rgb(0, 48, 204);
    width:0.2em;
    height:50%;
    left:50%;
    top:0;
    transform-origin: bottom center;
  
  }
  #secondshand:after {
    position:absolute;
    content:'';
    width: 1em; 
    height: 3em; 
    background:linear-gradient(to right, rgb(22, 145, 161), rgb(0, 
  
  48, 204),rgb(22, 145, 161));
    left:-0.4em;top:calc(100% + 2em);
    border-radius:0.5em;
    box-shadow:0 0 1em 0.1em #ccc;
  }
  #minutescircle {
    position:absolute;
    width:74%;height:74%;
  /*   border:1px solid green; */
    left:13%;top:13%;
    border-radius:50%;
  }
  #minuteshand {
    position:absolute;
    width:0.8em;
    left:calc(50% - 0.4em);
    background:linear-gradient(#345 0%, #234 100%);
    
  }
  #hourscircle {
    position:absolute;
    width:50%;height:50%;
    border:0 none;
    left:25%;top:25%;
    border-radius:50%;
  }
  #hourscircle, #minutescircle, #secondscircle {
    pointer-events:none;
  }
  #hourshand {
    position:absolute;
    width:1.2em;
    left:calc(50% - 0.6em);top:0;
    background:linear-gradient(#234 0%, #123 100%);
    
  }
  #minuteshand, #hourshand {
    top:0;
    height:50%;
    border-radius:50% 50% 0 0;
    transform-origin: bottom center;
    pointer-events:none;
  }
  
  
  
  #digitalclock {
    text-align:center;
    margin:40px auto 20px auto;
    font-family: 'Roboto Mono', monaco, monospace;
    font-size:4rem;
    color:#0f0;
    padding:0.75em;
    background:#000;
    width:10em;
    border:4px solid silver;
    border-radius:8px;
    box-shadow:inset 0 0 0 0.5em #234;
  }
  @media only screen and (max-width: 360px){
   
    #analogclock {
    font-size:10px;
    width:100%;
    height:310px;
    
    }
    #clocknumbers {
      width:89%;height:80%;
      top:11%;left:6%;
      }
      #clocknumbers24 {
      width:75%;height:62%;
      top:20%;left:13%;
      border:0 none;
    }
  }
  @media only screen and (min-width: 361px) and (max-width: 401px){
   
    #analogclock {
      font-size:10px;
      width:100%;
      height:310px;
    }
    #clocknumbers {
      width:81%;height:80%;
      top:11%;left:10%;
      }
      #clocknumbers24 {
      width:67%;height:62%;
      top:20%;left:17%;
      border:0 none;
      }
    } 
  
    @media only screen and (min-width: 402px) and (max-width: 
  
  441px){
   
    #analogclock {
      font-size:10px;
      width:100%;
      height:310px;
    }
    #clocknumbers {
      width:75%;height:80%;
      top:11%;left:13%;
      }
      #clocknumbers24 {
      width:64%;height:62%;
      top:20%;left:19%;
      border:0 none;
      }
    } 
    @media only screen and (min-width: 442px) and (max-width: 
  
  504px){
   
    #analogclock {
      font-size:10px;
      width:100%;
      height:310px;
    }
    #clocknumbers {
      width:64%;height:80%;
      top:11%;left:18%;
      }
      #clocknumbers24 {
      width:51%;height:62%;
      top:20%;left:25%;
      border:0 none;
      }
    } 
  
    @media only screen and (min-width: 505px) and (max-width: 
  
  604px){
   
    #analogclock {
      font-size:10px;
      width:100%;
      height:310px;
    }
    #clocknumbers {
      width:50%;height:80%;
      top:11%;left:25%;
      }
      #clocknumbers24 {
      width:41%;height:62%;
      top:20%;left:30%;
      border:0 none;
      }
    } 
    @media only screen and (min-width: 605px) and (max-width: 
  
  700px){
   
    #analogclock {
      font-size:10px;
      width:100%;
      height:310px;
  
    }
    #clocknumbers {
      width:44%;height:80%;
      top:11%;left:28%;
      }
      #clocknumbers24 {
      width:38%;height:62%;
      top:20%;left:31%;
      border:0 none;
      }
    } 
   
    @media only screen and (min-width: 701px) and (max-width: 
  
  768px){
   
    #analogclock {
    font-size:10px;
    width:100%;
    height:310px;
  
    }
    #clocknumbers {
      width:38%;height:80%;
      top:11%;left:31%;
      }
      #clocknumbers24 {
      width:31%;height:62%;
      top:20%;left:35%;
      border:0 none;
      }
    }  
  @media only screen and (min-width: 900px){
    #analogclock {
    font-size:11px;
    }
  }
  @media only screen and (min-width: 1200px){
    #analogclock {
    font-size:12px;
    }
    #clocknumbers {
    width:70%;height:77%;
    top:12%;left:15%;
    }
    #clocknumbers24 {
    width:58%;height:58%;
    top:22%;left:21%;
    border:0 none;
    }
  
  }