@import url(https://fonts.googleapis.com/css?family=Raleway:500,600,700,100,800,900,400,200,300);
@import url(https://fonts.googleapis.com/css?family=Playball);

::selection {
    background: #688a7e;
    color: #fff;
}
::-moz-selection {
    background: #688a7e;
    color: #fff;
}
body, html{
    font-family: 'Raleway', sans-serif;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}
.container{
    width: 100%;
}
.media-heading{
    padding-bottom: 7px;
    border-bottom: solid 2px rgb(47, 147, 123);
}
#frozen{
    background: #403b4a; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #403b4a, #e7e9bb); /* Chrome 10-25, Safari 5.1-6 */
    background: -moz-linear-gradient(to right, #403b4a, #e7e9bb); /* Firefox */
    background: -o-linear-gradient(to right, #403b4a, #e7e9bb); /* opera */
  background: linear-gradient(to right, #403b4a, #e7e9bb); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.fa.txt30 {
    font-size: 17px;
}
.dropdown-divider {
    border-top: 1px solid #a9abac;
    margin: 5px 0;
}
.dropdown-item {
    color: #d58512;
}

div.tf{
    padding: 100px 0;
    text-align: center;
}
#exampleModal{
    padding-top: 200px;
}
.textmd{
    margin-bottom: 10px;
    text-align: center;
}
.modal-title{
    text-align: center;
    font-size: large;
}
.border-left{
    border-left: 2px solid #dee2e6 !important;
}
div.rit{
    text-align: right;
}
div.lft{
    text-align: left;
}
#remember{
    right: 0;
    left: 0;
    top:0;
}

.dropdown_li{
    width:100%;
    margin:30px;
}
.colorRwd{
    color: #d0211c;
}
.fa.fa-square{
    margin: 0 5px;
    font-size: 10px;
}

h1{
    text-transform: uppercase;
}

h2{
    line-height: 20px;
    margin:  0;
}

ul.d-block li{
    display: block;
}

h4 {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 700;
    color: rgb(47, 147, 123);
}

p{
    font-size: 14px;
}
li{
    display: inline-block;
    padding-right: 1px;
    padding-left: 1px;
    color: #155042;
}
#inner_content h3,#tf-portfolio p{
    color:#155042;
}
.f_size_30{
    font-size: 30px;
}
#tf-portfolio p{
    font-size: 20px;
}
a {
    color: #155042;
    transition: all 0.8s;
}
.alert-success,.alert-danger{
    border: 1px dashed;
}
footer a {
    color: snow;
    font-size: 20px;
}

footer{line-height: 1.0;}
a:hover,
a:focus{
    color: #2F937B;
    text-decoration: none;
}
.bg-dark {
    background: #222222 !important;
}
.nav > li > a {
    position: relative;
    display: block;
    margin: 10px 0;
    padding: 10px 15px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    color: #C5C5C5;
    letter-spacing: 1px;
}
#tf-menu.navbar-default .navbar-nav > li > a#login,.navbar-nav li > a#login{
    color: #d58512; border-right:#d58512 2px solid;
}
#tf-menu.navbar-default .navbar-nav > li > a#login:focus,.navbar-nav li > a#login:focus,.navbar-nav li > a#login:hover,
#tf-menu.navbar-default .navbar-nav > li > a#login:hover{
    color: #2F937B; border-right:#2F937B 2px solid;
}
div>textarea{
    height: 200px;
    min-height: 200px;
}
#details p{
    font-size: 20px;
    color: #155042;
}
#details h3{
    font-size: 1.575rem;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* Home Style */
#tf-ESCindex{
    background: url(../img/011.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: #cfcfcf;
}
#tf-LSindex{
    background: url(../img/0111.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: #cfcfcf;
}
#tf-home{
    background: url(../img/home.PNG);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: #cfcfcf;
}

#tf-home .overlay,#tf-ESCindex .overlay,#tf-LSindex .overlay{
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(17%,rgba(0,0,0,0.73)), color-stop(35%,rgba(0,0,0,0.66)), color-stop(62%,rgba(0,0,0,0.55)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
    background-attachment: fixed;
}

.content{
    padding: 20% 0 18% 0;
    text-align: center;
}
/* Navigation */
#tf-menu {
    margin-bottom: 0;
    background: transparent;
    border: 0;
    color: #fff !important;
    padding: 2% 0;
    transition: all 0.5s;
}
#sticky {
    padding: 0.5ex;
    background-color: #333;
    color: #fff;
    font-size: 2em;
    border-radius: 0.5ex;
}
#tf-menu.stick {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
    background: #222222;
    padding: 1% 0;
}
.nav.smlN > li > a {
    padding: 13px 8px;
}
#tf-menu.navbar-default .navbar-nav > li > a {
    color: #C5C5C5;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
}
#tf-menu.navbar-default.LSpacing .navbar-nav > li > a {
letter-spacing: 1px;
}

#tf-menu.navbar-default .navbar-nav > li > a:hover,
#tf-menu.navbar-default .navbar-nav > li > a:focus {
    color: #2F937B;
    background-color: transparent;
}

.logo {
    font-family: 'Playball', cursive;
}

#tf-service{
    padding: 7% 0;
    overflow: hidden;
}

i.media-left{
    padding: 0 5px;
    font-size: 50px;
    color: rgb(47, 147, 123);
}

.media-body h4 {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 700;
    color: rgb(47, 147, 123);
}
.gray{
    background: #f1f1f1;
}
.dropdown-menu a{
    display: block;
}
.dropdown-menu{
    padding: 5px 5px;
}
#tf-portfolio{
    padding: 2%  0 5% 0;
    text-align: center;
}
.section-title hr{
    border-color: rgb(47, 147, 123);
    width: 100px;
}

.section-title h2{ font-weight: 700;}
button.btn,
a.btn {
    margin: 8px 5px;
    transition: all 0.5s;
}

a.navbar-brand.logo {
    font-size: 20px;
}

/*btn*/
button.btn.btn-primary.my-btn,
a.btn.btn-primary.my-btn {
    background: #2F937B;
    border-color: transparent;
    border-radius: 0;
    border-width: 2px;
    padding: 10px 30px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 600;
}
button.btn.btn-primary.my-btn:hover,
a.btn.btn-primary.my-btn:hover{
    background: #FFFFFF;
    color: #2F937B;
    border-color: transparent;
}
button.btn.btn-primary.my-btn.dark:hover,
a.btn.btn-primary.my-btn.dark:hover{
    background: #222222;
    color: #ffffff;
    border-color: transparent;
}
a.btn.btn-primary.my-btn2 {
    background: rgba(47, 147, 123, 0);
    border-color: #FFFFFF;
    border-radius: 0;
    border-width: 2px;
    padding: 10px 30px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 600;
    color: #FFFFFF;
}

a.btn.btn-primary.my-btn2:hover{
    background: #2F937B;
    color: #ffffff;
    border-color: transparent;
}

ul.cat.list-inline li a {
    border: 1px solid #2F937B;
    padding: 5px 15px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    color: #2F937B;
    transition: all 0.5s;
}

ul.cat.list-inline li a:hover{
    background: #2F937B;
    color: #ffffff;
}
.table_box th{
    background-color: #0f2f6b80;
    color: white;
    text-align: center;
}
.table_box{
    color: #4B637B;
    overflow-x: auto;
}
.listImg{
    width: 150px;
    height: 150px;
    font-size: 100px;
}
.space{ padding: 20px}
.toppadding{ padding-top: 30px}
.nopadding{ padding:  0;}
/*footer*/


#tf-about .overlay{
    height: auto;
    background-attachment: fixed;
    padding: 10% 0;
}


#tf-why-me .overlay{
    height: auto;
    background-attachment: fixed;
    padding: 5% 0;
}
ul.why-me li,ul.CustomUl li{
    margin: 10px 0;
}
#tf-contact{
    background: url(../img/08.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    background-repeat: no-repeat;
    padding: 5% 0;
    text-align: center;
}

form#contact {
    padding: 5%;
    background: #f1f1f1;
    outline: 6px solid rgba(34, 34, 34, 0.08);
}

#tf-contact input.form-control {
    height: 40px;
}

#tf-contact input.form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
    background-repeat: no-repeat;
    background-position: center right calc(0.375em + 0.1875rem);
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

#tf-contact .form-control{
    display: block;
    width: 100%;
    margin-bottom: 20px;
    padding: 16px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #FFF;
    background-image: none;
    border: 1px solid #FFF;
    border-radius: 0;
    border-top: 2px solid transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: all 0.8s;
}
#tf-contact .form-control:focus,
#tf-contact .form-control:hover{
    border-top: 2px solid #2F937B;
}

#tf-contact .form-control.is-invalid:focus,
#tf-contact .form-control.is-invalid:hover{
    border-top: 2px solid #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
nav#tf-footer{
    background: #222222;
    padding: 2% 0 1% 0;
    color: #f1f1f1;
}
/*last work title*/
.project-item{
    position:relative;
    overflow:hidden;
}
.project-overlay{
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height:100%;
    overflow:hidden;
    position:absolute;
    top:-100%;
    transition:.5s;
    -webkit-transition:.5s;
    -moz-transition:.5s;
}

.project-item:hover .project-overlay{
    top:0;
}
.project-content{
    position:absolute;
    width: 100%;
    bottom:-200%;
    color:#fff;
    transition:.5s;
    -webkit-transition:.5s;
    -moz-transition:.5s;
}
.project-content h5{
    text-transform:uppercase;
    font-size:18px;
    font-weight:500;
}
.project-content h6{
    text-transform:uppercase;
    font-size:14px;
    max-height: 47px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.project-separator {
    height: 3px;
    width: 40px;
    margin: auto;
    background: #fff;
    margin-bottom:5px;

}
main{
    min-height: 77.9vh !important;
    overflow: hidden;
}
.project-item:hover .project-content{
    bottom:1%;
}
i.login{
    font-size: 30px;
    color: #6c758d;
}
.login-card {
    max-width: 600px;
    _width: 600px;
    padding: 0 20px 35px;
    border: 1px solid #b3b3b3;
    border-radius: 4px;
    margin: 5% auto;
    box-shadow: 0 0 20px #0b08214d, inset 0 0 300px #fff;
    background: #eeecf3ad;
    color: #6c758d;
}
.login-head{
    padding: 0.25rem;
    background-color: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius:0 0 20px 20px;
    text-align: center;
    font-size: 30px;
}
.login-put{
    background: #7e8c8133;
}
.login-body{
    margin-top: 20px;
    padding: 0.75rem 0.50rem;
}
.con .img-thumbnail,#tf-portfolio #space>div{
    width: 100%;
    margin: 5px;
}
@media (min-width: 576px) {
    .container {
        max-width: 576px;
    }
}
@media (max-width: 768px) {
    .nav > li > a {
        margin:0;
        padding:5px;
    }

#tf-menu.navbar-default .navbar-nav > li > a#login,.navbar-nav li > a#login{
    border-right:none;
}
#tf-menu.navbar-default .navbar-nav > li > a#login:focus,.navbar-nav li > a#login:focus,.navbar-nav li > a#login:hover,
#tf-menu.navbar-default .navbar-nav > li > a#login:hover{
    border-right:none;
}
}

@media (min-width: 768px) {

    #tf-about{
        background: url(../img/about_us.PNG);
        background-size: cover;
        background-position: center;
        background-attachment: scroll;
        background-repeat: no-repeat;
        color: #222222;
    }
    #tf-why-me{
        background: url(../img/view.PNG);
        background-size: cover;
        background-position: center;
        background-attachment: scroll;
        background-repeat: no-repeat;
        color: #222222;
    }

    div#tf-SecurityAndGuards{
    background: url('../img/security.PNG');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

.mn_w_200{
    min-width: 200px;
}

div#tf-Supply{
    background: url('../img/logSup.jpg');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}


div#tf-HumanityProject{
    background: url('../img/humanity.PNG');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

div#tf-TransportAndStore{
    background: url('../img/Trans.PNG');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

div#tf-CarsRental{
    background: url('../img/logCar.jpg');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

div#tf-GovernmentTransactions{
    background: url('../img/logGovTran.jpg');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

div#tf-CleanlinessAndImprovement{
    background: url('../img/clean.PNG');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

div#tf-EMarketing{
    background: url('../img/markiting.PNG');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

div#tf-ProManagement{
    background: url('../img/project_mgr.PNG');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

div#tf-CAndRealES{
    background: url('../img/humanity.PNG');
   /*background-position:center;*/
    background-size:cover;
    background-repeat:no-repeat;
}

div#tf-DandFIndustry{
    background: url('../img/decore.PNG');
    background-size:cover;
    background-repeat:no-repeat;
}

div#tf-MSandSoftware{
    background: url('../img/camira.PNG');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

#tf-SecurityAndGuards>.container,#tf-Supply>.container,#tf-HumanityProject>.container
,#tf-TransportAndStore>.container,#tf-CarsRental>.container,#tf-GovernmentTransactions>.container
,#tf-CleanlinessAndImprovement>.container,#tf-EMarketing>.container,#tf-MSandSoftware>.container
,#tf-DandFIndustry>.container,#tf-CAndRealES>.container,#tf-ProManagement>.container
,#tf-why-me .container,#tf-about .container{
    background: #ffffffa8;
    min-height:400px;
    border-radius: 20Px;
}
    .container {
        max-width: 840px;
    }

    a.navbar-brand.logo {
        font-size: 25px;
    }

}

@media (min-width: 992px) {
    .container {
        max-width: 992px;
    }
    .con .img-thumbnail,#tf-portfolio #space>div{
        width:250px;
        height:190px;
        margin:5px auto;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1270px;
        max-width: 1200px;
    }
    .con .img-thumbnail,#tf-portfolio #space>div{
        width: 250px;
        height: 190px;
        margin: 5px;
    }
}
/* Animation bubbles */
#animate{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.bg-bubbles {
    /*background*/
    background: linear-gradient(to bottom right, #6a47a2 0%, #611d5f 100%);
    background:-webkit-linear-gradient(to bottom right, #6a47a2 0%, #611d5f 100%);
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.bg-bubbles li {
    position: absolute;
    list-style: none;
    display: block;
    width: 40px;
    height: 40px;
    /*square or cercle*/
    border-radius: 30%;
    background-color: rgba(255, 255, 255, 0.1);
    bottom: -160px;
    -webkit-animation: square 25s infinite;
    animation: square 25s infinite;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
    left: 10%;
}
.bg-bubbles li:nth-child(2) {
    left: 20%;
    width: 80px;
    height: 80px;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 17s;
    animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
    left: 25%;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    -webkit-animation-duration: 22s;
    animation-duration: 22s;
    background-color: rgba(255, 255, 255, 0.15);
}
.bg-bubbles li:nth-child(5) {
    left: 60%;
}
.bg-bubbles li:nth-child(6) {
    left: 80%;
    width: 120px;
    height: 120px;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    background-color: rgba(255, 255, 255, 0.17);
}
.bg-bubbles li:nth-child(7) {
    left: 32%;
    width: 160px;
    height: 160px;
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
    left: 55%;
    width: 20px;
    height: 20px;
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
    left: 35%;
    width: 10px;
    height: 10px;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
    background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
    left: 90%;
    width: 120px;
    height: 120px;
    -webkit-animation-delay: 11s;
    animation-delay: 11s;
}
@-webkit-keyframes square {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-700px) rotate(600deg);
        transform: translateY(-700px) rotate(600deg);
    }
}
@keyframes square {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-700px) rotate(600deg);
        transform: translateY(-700px) rotate(600deg);
    }
}