/*** 

====================================================================
  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;
    }
}
/***
====================================================================
 make about section magin reduce
====================================================================

 ***/


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

/*** 

====================================================================
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-left 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-left: 0.7rem solid orange;
        /*border-right: 0.5rem solid orange;*/
    }

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

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

#copyright {
    color: #999;
    margin-left: 69%;
}

@media screen and (max-width: 1200px) {
    #copyright {
        color: #999;
        margin-left: 65%;
    }
}

@media screen and (max-width: 1000px) {
    #copyright {
        color: #999;
        margin-left: 0;
    }
}

.menublock {
    color: black;
    font-family: CenturyGothic;
}

.menublocks {
    color: black;
    font-family: CenturyGothic;
    font-size: 146%;
}

@media screen and (max-width: 1065px) {
    .menublocks {
        font-family: CenturyGothic;
        font-size: 120%;
    }
}

.menublocksm {
    font-family: 'Cairo', sans-serif;
    font-size: 120%;
}

.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;
}

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

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

.fulldiv {
    width: 50% !important;
}

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

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

@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;
    }
}

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

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

#navBar ul li.active a, #navBar ul li a:hover {
    /*text-decoration: none;*/
    color: orangered;
    background-color: transparent;
}