/*
	Theme Name: RK Default.v3 w/ Less
*/

@primary-color: #1a6cb6;
@secondary-color:#fcff00;
@thirth-color:#000000;

h1, h2, h3, h4, h5, h6{
  margin:0 0 10px;
}

.btn{
  padding: 10px 25px;
  display: inline-block;
  text-align: center;
  background: @primary-color;
  color: #fff;
  margin: 15px 0 0 0;
}

label{
  display:block;
  font-weight:700;
  color:#747087;
  margin-bottom:7px;
}
textarea,
input{
  padding:10px;
  width:100%;
}

input[type="submit"]{
  display:inline-block;
  width:auto;
  border:none;
  padding:10px 40px;
}

.header{
  background:@thirth-color;


  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+50,1e5799+50 */
  background: #000000; /* Old browsers */
  background: -moz-linear-gradient(left,  #000000 50%, @primary-color 50%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #000000 50%,@primary-color 50%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #000000 50%,@primary-color 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='@primary-color',GradientType=1 ); /* IE6-9 */


  .logo{
    float:left;
    width:38%;
    padding:30px 0;
    background: @thirth-color;

    img{
      width:250px;
    }
  }
  .nav{
    background: @primary-color;
    padding:25px 0 24px;
    float:left;
    width:62%;

    ul{
      margin:21px 0;
      padding:0;
      list-style:none;
      float:right;

      li{
        position:relative;
        float:left;
        margin-right:10px;

        a{
          padding:10px;
          color:#fff;
          font-weight:700;
          font-size:18px;
        }

        ul{
          position: absolute;
          top: 21px;
          left: 0;
          width: 300px;
          z-index: 500;
          display: none;
          margin: 0;
          padding-top: 55px;

          li{
            width:100%;
            float:none;

            a{
              padding:10px 15px;
              display:block;
              background:@primary-color;
              border-left:5px solid @primary-color;

              &:hover{
                border-left:5px solid #fff;
              }
            }
          }
        }

        &:hover{
          ul{
            display:block;
          }
        }

        &.current-menu-item{
          a{
            
          }
        }

        &.menu-item-has-children{
          &:after{
            content: "\f0d7";
            font-family: 'FontAwesome';
            color:#fff;
          }
        }

        &:last-child{
          margin-right:0px;
        }
      }
    }
  }
}

.display{
  height:550px;
  position:relative;

  &:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.65;
    z-index:50;
  }
  .container{
    position:relative;
    z-index:100;
    top: 50%;
    transform: translate(0%, -50%);

    .btn{
      padding:15px 50px;
      text-decoration: none;
    }
    h1{
      margin:0 0 25px;
      color:#fff;
      font-size: 60px;
      line-height: 80px;
    }
    a{
      color:#fff;
      font-size:16px;
      text-decoration: underline;
    }
    span{
      color:#fff;
      margin:0 15px;
      font-size:16px;
    }
  }
}

.content{
  padding:60px 0;
  .clearfix();

  &.grey{
    background:#ededed;
  }
  &.hasSidebar{
    .container{
      padding-left:405px;

      .sidebar{
        position:absolute;
        left:0;
        top:0;
        width:405px;

        &.contactWidget{
          background:#000;
          color:#fff;

          .widget_text{
            position:relative;
            padding:5px 25px 5px 80px;
            border-bottom:1px solid #fff;

            a{
              color:#fff;

              &:hover{
                color:#fff;
              }
            }

            i{
              color:@primary-color;
              position:absolute;
              top:50%;
              left:25px;
              transform: translate(0%, -50%);
              font-size:30px;
            }
          }
        }
        img{
          height:auto;
          width:405px;
        }
      }
      .area{
        padding:30px;
        background:#ededed;
        min-height:600px;

        ul{
          list-style:none;

          li{
            position:relative;
            padding-left:15px;

            &:before{
              content: "\f521";
              font-family: "Font Awesome 5 Free";
              position: absolute;
              top: -2px;
              left: -15px;
              font-weight: 900;
              font-size: 14px;
              color:@primary-color;
            }
          }
        }

        a{
          color:@primary-color;
        }

        img{
          max-width: 280px;
          height: auto;
        }
      }
      h1{
        margin:0 0 35px;
      }
    }
  }
  &.topHome{
    text-align:center;
    padding:60px 0 90px;

    h1, h2{
      margin:0 0 35px;
      font-size:36px;
    }

    p{
      margin:0;
    }

    a{
      color:#000;
    }

    ul{
      margin:50px auto 0;
      padding:0;
      list-style:none;
      width:920px;
      .clearfix();

      li{
        position:relative;
        float:left;
        width:160px;
        margin-right:30px;
        text-align:center;
        font-weight:700;
        padding:170px 0 0 0;

        a{
          position: absolute;
          left: 0;
          bottom: -30px;
          width: 100%;
          z-index: 200;
          padding-top: 170px;
          font-size:16px;
        }

        &:before{
          position:absolute;
          top:0;
          left:0;
          content:"";
          float:left;
          width:160px;
          height:160px;
          text-align:center;
          color:#fff;
          background:@primary-color;
          margin-right:30px;
          padding:15px 0;
          border-radius:5px;
          z-index:50;
        }

        &:after{
          content:"";
          position:absolute;
          top:25px;
          left:50%;
          transform: translate(-50%, 0%);
          width:60%;
          height:60%;
          z-index:75;
          background-size:cover;
          background-position: center center;
        }

        &:nth-child(1){
          &:after{
            background:url(img/img1.png) no-repeat;
          }
        }
        &:nth-child(2){
          &:after{
            background:url(img/img2.png) no-repeat;
          }
        }
        &:nth-child(3){
          &:after{
            background:url(img/img3.png) no-repeat;
          }
        }
        &:nth-child(4){
          &:after{
            background:url(img/img4.png) no-repeat;
          }
        }
        &:nth-child(5){
          &:after{
            background:url(img/img5.png) no-repeat;
          }
        }

        &:last-child{
          margin-right:0px;
        }
      }
    }
  }
  &.middleHome {
    p {
      margin: 0;
    }
    .col1-2 {
      padding: 0 0 0 30px;
    }
    .uspList {
      padding: 0 30px 0 0;

      span {
        color: @primary-color;
        font-weight: 700;
        font-size:21px;
      }

      h2 {
        margin: 15px 0 45px;
        font-size: 40px;
        line-height: 55px;
        font-weight: 700;
        color: #000;
        padding-right: 80px;
      }

      ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
          position: relative;
          margin-bottom: 35px;
          color: #747087;
          padding-left: 75px;

          &:before {
            content: "\f00c";
            font-family: 'FontAwesome';
            position: absolute;
            top: 0;
            left: 0;
            width: 60px;
            height: 60px;
            background: #dbdbdb;
            font-size: 32px;
            padding: 15px;
            color: @primary-color;
          }
          &:last-child {
            margin: 0;
          }
        }
      }
    }
  }
  &.bottomHome {
    text-align: center;

    h2 {
      margin: 0 0 35px;
      font-size: 36px;
    }

    p {
      margin: 0;
    }

    ul{
      margin:30px -15px -15px;
      padding:0;
      list-style:none;

      li{
        position:relative;
        float:left;
        width:520px;
        height:520px;
        margin:15px;

        &:after{
          content:"";
          position:absolute;
          left:0;
          top:0;
          width:100%;
          height:100%;
          background:#000;
          opacity:0.35;
          z-index:10;
        }

        a{
          position:absolute;
          left:0;
          top:0;
          width:100%;
          height:100%;
          z-index:30;
        }

        h3{
          position:absolute;
          bottom:20px;
          left:20px;
          text-align:left;
          color:#fff;
          font-size:22px;
          z-index:20;
        }
      }
    }
  }
}

.footerTop{
  padding:40px 0;
  background:@primary-color;
  color:#fff;
  .clearfix();

  img{
    max-width:200px;
  }

  a{
    color:#fff;

    &:hover{
      color:#fff;
    }
  }

  i{
    margin-right:8px;
  }

  ul{
    list-style:none;
    margin:0;
    padding:0;
  }

  h3{
    margin:0 0 15px;
  }
}

.footer{
  padding:20px 0;
  background:#000;
  .clearfix();
  color:#fff;
  text-align:center;

  i{
    color:@primary-color;
    margin-right:8px;
  }


}

/* --- CLEARFIX --- */
.clearfix() {
  *zoom: 1;

  &:before,
  &:after {
    display: table;
    line-height: 0;
    content: "";
  }

  &:after {
    clear: both;
  }
}