/*** 

====================================================================
  Conatct Form Activation
====================================================================

 ***/
.alert-wrapper {
  display: none;
  position: fixed;
  width: 100%;
  height:100%;
  background: rgba(0,0,0,0.6);
  top: 0;
  left: 0;
  z-index: 9999999;
}
#success,
#error {
  position: relative;
  width:500px;
  height: 100px;
  top: calc(50% - 50px);
  left:calc(50% - 250px);
  background: #fff;
  text-align: center;
  float: left;
}
#success .wrapper,
#error .wrapper {
  display: table;
  width:100%;
  height: 100%;
}
#success .wrapper p,
#error .wrapper p{
  display: table-cell;
  vertical-align: middle;
  letter-spacing: 1px;
  font-size: 20px;
}
#success {
  color: #FF5733;
}
#error {
  color: #FF5733;
}
#error button,
#success button {
  color:#fff;
  width:40px;
  height:40px;
  line-height: 20px;
  background: transparent;
  border-radius: 50%;
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 20px;
}
.form-validation label.error {
  display: none !important;
}
.form-validation input.error,
.form-validation select.error,
.form-validation textarea.error {
  border:1px solid #f03838 !important;
}

/*** 

====================================================================
  Youtube videos Responsive
====================================================================

 ***/

@media screen and (max-width: 2099px) 
{
   .yt {
       height: 192px !important;
   }
}

@media screen and (max-width: 1200px) 
{
   .yt {
       height: 163px !important;
   }
}
@media screen and (max-width: 770px) 
{
   .yt {
       height: 129px !important;
   }
}
@media screen and (max-width: 500px) 
{
   .yt {
       height: 264px !important;
   }
}
@media screen and (max-width: 500px) 
{
   .yt {
       height: 192px !important;
   }
}
/*** 

====================================================================
  Youtube videos condition
====================================================================

 ***/

.marginbottom{
    margin-bottom:-170px;
    
}
@media screen and (max-width: 900px) 
{
   .marginbottom {
      margin-bottom:0px !important;
   }
}

/*** 

====================================================================
 make content center
====================================================================

 ***/
.contentcenter
{
    display: flex;
    justify-content: center;
    text-align:center;
}

/*about section recduce stop margin*/
@media screen and (min-width: 1156px) {
    .reduce-margin {
        margin:-44px;

    }
}


/*** 

====================================================================
Master Page CSS copied Below
====================================================================

 ***/

          .button11 {
              border: 0;
              background-color: grey;
              color: #fff;
              font-size: 15px;
              border-radius: 3px;
          }

              .button11:hover {
                  background-color: #FF5733;
              }

          .menublocks {
              color:black;
              font-family: 'Hecan';
              font-size: 180%;
              
          }
          
           .menublock{
            color:black;
            font-family: 'Hecan';
        }
          @media screen and (max-width: 1065px) {
              .menublocks {
                  font-family: 'Hecan';
                  font-size: 140%;
              }
          }

          .menublocksm {
              font-family: 'Hecan';
              font-size: 140% !important;
          }

          .sticky {
              position: fixed !important;
              top: 0;
              width: 100%;
          }

          .menucolor {
              background-color: transparent !important;
          }

          /*menu command video content phone*/
          @media screen and (max-width: 991px) {
              .menucolor {
                  background-color: #fff !important;
              }

              .videopadd {
                  margin-top: 108px;
              }
          }

          @media screen and (max-width: 676px) {

              .videopadd {
                  margin-top: 87px;
              }
          }
          /*rev slider video css*/
          .video-wrapper {
              position: relative;
              padding-bottom: 56.25%;
              height: 0;
          }

              .video-wrapper object,
              .video-wrapper embed,
              .video-wrapper iframe {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
              }


          video {
              /* override other styles to make responsive */
              width: 100% !important;
              height: auto !important;
          }

          .pointer {
              cursor: pointer !important;
          }
          /*start css is used for the desgin of playstore and IOS app show*/
          /*here i give the size to the div to be 50%*/
          .fulldiv {
              width: 50% !important;
          }

          @media screen and (max-width: 991px) {

              #rowsize {
                  max-height: 253px;
              }
          }

          @media screen and (max-width: 430px) {

              #rowsize {
                  max-height: 350px;
              }
          }

          @media only screen and (max-width: 992px) {
              .hide_div {
                  display: none;
              }

              .fulldiv {
                  width: 100% !important;
              }
          }
          /*end css is used for the desgin of playstore and IOS app show*/
          /*** 

====================================================================
  End of Masterpage CSS
====================================================================

 ***/

/*** 

====================================================================
Wajatuha Value Section Animation
====================================================================

 ***/
.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    /*border-left: 1px solid #eee;*/
    border-left-width: .25rem;
    border-radius: .25rem;
}

.bd-callout-warning {
    /*border-left-color: #f0ad4e;*/
}

.thing {
    padding: 1rem;
    border-radius: 0.5rem;
    border-left: 0 solid orange;
    /*border-right: 0 solid orange;*/
    transition: border-right 300ms ease-in-out, padding-left 500ms ease-in-out;
    /*transition: border-right 300ms ease-in-out, padding-right 400ms ease-in-out;*/
}

    .thing:hover {
        /*padding-left: 0.5rem;*/
        border-right: 0.7rem solid orange;
        /*border-right: 0.5rem solid orange;*/
    }

    .thing > :first-child {
        margin-top: 0;
    }

    .thing > :last-child {
        margin-bottom: 0;
    }

/*login logout buttons*/
@media only screen and (min-width: 1462px) {
    .loginhide {
        display: none;
    }
}

@media only screen and (max-width: 1461px) {
    .hideonphone {
        display: none;
    }
}
/*menuwidthstyle*/
.menustyle {
    max-width: 1724px;
    padding-left: 41%;
}
/*nav bar css*/
.navstyle{
    width: max-content !important;
}
/*fixed icons style images*/
.iconheight{
    height: 50px; 
    padding-right: 0.5%;
}
#copyright {
    color: #999;
    margin-right: 75% ;
}
@media screen and (max-width: 1200px) 
{
  #copyright {
    color: #999;
    margin-right: 65%;
}
}
@media screen and (max-width: 1000px) 
{
  #copyright {
    color: #999;
    margin-right: 0;
}
}