@import url('https://fonts.googleapis.com/css?family=Cairo');
@import url('https://fonts.googleapis.com/css?family=Changa');

html
{
    overflow-x: hidden;
}
body
{
    font-family: 'Cairo', sans-serif;
}
ul
{
    list-style-type: none;
}
/************start*************/

/******************background style******************/
.cover 
{
    background-image:url(../image/pexels-photo-297755.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 500px;
    z-index: 99999;
}
.cover .overlay
{
   
    height: 400px;
    filter:blur(.8);
}

.navbar-default
{
    background-color: rgba(248, 248, 248, 0);
    border-color: rgba(231, 231, 231, 0);
    z-index: 99999;
 
}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand
{
    margin-left: 92px;
}
.navbar-brand>img
{
    width: 80px;
    margin-right: 65px;
}
.navbar-right
{
    margin-right: 310px;
    margin-top:50px;
}
.navbar-default .navbar-nav>li>a
{
    color: #e0dcdc;
    font-size: 16px;
    font-weight: 500;
}

.hvr-underline-from-right:before
{
    background-color: #edb836;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus
{
    color: #fff;
}

.cover .text
{
    margin-top: 90px;
}
.cover .text h1
{
    color: #FFC107;
}
.cover .text h3
{
    color: #f0f8ff;
    margin-top: 50px;
}
.cover .text p
{
    color: #e2e2ed;
    font-size: 16px;
font-family: 'Changa', sans-serif;
}


/***navbar toggle***/
@media(max-width: 768px)
{
    .navbar .navbar-brand img
    {
        display: none;
    }
    
     .navbar-default .navbar-toggle
    {
        border-color: #FFC107;
        position: relative;
        top: 2px;
        right: 13px;
        float: right;
    }
    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus
    {
        background-color: #fff;
    }
    .navbar-default .navbar-toggle .icon-bar
    {
        background-color: #FFC107;
        border-radius: 0;
    }
    .navbar-toggle
    {
        border-radius: 0;
        padding: 12px 12px;
        border: 2px solid rgba(152, 42, 42, 0);
    }
    .navbar-right
    {
        margin-right: 0;
        float: right;
    }
    .container>.navbar-header, 
    .container-fluid>.navbar-header,
    .container>.navbar-collapse,
    .container-fluid>.navbar-collapse
    {
        background-color: #3c3c3c;
    }
    .hvr-underline-from-right:before
    {
        background-color: rgba(237, 184, 54, 0);
    }
    
}




/*********end style******/
  


/***********start form************/
form
{
    direction: rtl;
}
.search
{
    padding-top: 25px;
    padding-bottom: 25px;
}
.search h3
{
    margin-top: 15px;
}
.search .form-inline .form-control
{
    padding: 10px 50px;
    background-color: #ececec;
    margin-left: 20px;
}
.btn-default {
    color: #fff;
    background-color: #edb836;
    border-color: #ffc107;
    font-size: 17px;
    padding: 6px 70px;
}
/***********end form************/

















.family
{
    padding-top: 30px;
    padding-bottom: 50px;
}




.tree ul {
    padding-top: 20px; position: relative;
    
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree li {
    float: left; text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree ul li a #chevron {
  position:relative;
  text-align:center;
  padding:6px;
  margin-bottom:3px;
  height:30px;
  width:100px;
}
.tree ul li a #chevron:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:51%;
  background:#f33;
  -webkit-transform:skew(0deg,6deg);
}
.tree ul li a #chevron:after {
  content:"";
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:50%;
  background:#f33;
  -webkit-transform:skew(0deg,-6deg);
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 1px solid #ccc;
    width: 50%; height: 20px;
}
.tree li::after{
    right: auto; left: 50%;
    border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
    border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 1px solid #ccc;
    width: 0; height: 20px;
}
.family .tree .died
{
    color: #e00000;
    font-weight: 900;
}
.family .tree h6 {
    color: #edb836;
    font-weight: 700;
}

.tree li a{
    border: 1px solid #ccc;
    padding: 5px 1px;
    min-width: 88px;
    text-decoration: none;
    color: #666;
    font-size: 11px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
    background: ; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
    border-color:  #94a0b4;
}
.tree .open
{
    display: none;
}







/*******************form popup******************/
.modal-title
{
    color:#edb836;
    font-size: 17px;
}
label
{
    margin-left: 12px;
}
input[type="radio"], input[type="checkbox"]
{
    margin-left: 14px;
}

.modal-footer .btn+.btn
{
    background-color: #edb836;
    border-color: #edb836;
}
.modal-footer .btn-secondary
{
    background-color:transparent;
    border-color: #edb836;
}

.btn-primary
{
    background-color: #3e3833;
    border-color: #3e3833;
    transition: all 0.2s ease-in-out;
}
.btn-primary:hover
{
       background-color: #edb836;
    border-color: #edb836;
 
}
/*******************form popup******************/






/****************contact**********/
.contact 
{
    padding-top: 50px;
}
.contact h2
{
    margin-bottom: 30px;
}
.contact .panel-contact
{
    padding-top: 15px;
    
}
.contact .panel-contact .form-group
{
    margin-bottom: 15px;
}
.contact .panel-contact .form-group label
{
    margin-bottom: 15px;
    font-weight: bold;
}
.contact .panel-contact .form-group .form-control
{
    width: 100%;
    padding: 2px 15px;
    border: 1px solid #dce4ec;
    border-radius: 4px;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
 textarea.form-control
{
    height: auto;
}

.btn-info
{
    background-color: #edb836;
    font-size: 18px;
}
.contact h2
{
    color: #333;
}
.contact .line {
    border-bottom: 3px solid #edb836;
    width: 250px;
    margin: 0 auto;
    padding: 5px 0;
}


/****************contact**********/


.footer
{
    background-color: #424242;
    padding-bottom: 25px;
    padding-top: 25px;
    
}
.footer .social ul
{
    list-style-type: none;
}

.footer .social ul li
{
    display: inline-block; 
    margin-left: 8px;
}
.footer .social ul li a
{
     color:#f2f2f2;
    font-size: 17px;
        transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
}
.footer .social ul li a:hover
{
    color: #edb836;  
}
.footer .social .line
{
   border-bottom: 2px solid #bbbbbb;
   margin-top: 30px;    
}
.footer .logo img
{
    width: 100px;
    margin-left: 76px;
}
.footer .logo
{
    padding-top: 40px;
}
.footer .logo h4
{
    color:#f2f2f2; 
}
.footer .title
{
    color:#f2f2f2; 
    margin-top: 200px;
}



/*Thats all. I hope you enjoyed it.
Thanks :)*/
.widgets
{
    padding-top: 30px;
    padding-bottom: 30px;
}
.widgets .line {
    border-bottom: 3px solid #edb836;
    width: 250px;
    margin: 0 auto;
    padding: 5px 0;
}
.widgets .link
{
    padding-top: 20px;
    padding-bottom: 20px;
}
.widgets .link .text h3
{
   text-align: right;
}
.widgets .link .text .line {
    margin-right:0px;
    width: 150px;
    margin-bottom: 25px;
}

@media(max-width: 768px)
{
   .widgets .link .text
    {
        text-align: center;
    }
}



.alert{
    position: absolute;
    z-index: 2000;
    top: 100px;
    margin: auto;
    text-align: center;
    width: 438px;
}