@font-face {
    font-family:'DroidKufi-Regular';
    src: url('../fonts/DroidKufi/DroidKufi-Regular.ttf') format('truetype');
    font-weight: normal;
      font-style: normal;
  }
  @font-face {
    font-family:'DroidKufi-Bold';
    src: url('../fonts/DroidKufi/DroidKufi-Bold.ttf') format('truetype');
    font-weight: normal;
      font-style: normal;
  }
  @font-face {
    font-family:'Amiri Slanted';
    src: url('../fonts/Amiri\ Slanted.ttf Slanted.ttf') format('truetype');
    font-weight: normal;
      font-style: normal;
  }
  @font-face {
    font-family:'Al_Quran';
    src: url('../fonts/Al_Quran.ttf') format('truetype');
    font-weight: normal;
      font-style: normal;
  }
  @font-face {
    font-family:'Sulimany';
    src: url('../fonts/Sulimany.ttf') format('truetype');
    font-weight: normal;
      font-style: normal;
  }
  @font-face {
    font-family:'Uthman';
    src: url('../fonts/Uthman.otf') format('opentype');
    font-weight: normal;
      font-style: normal;
  }
  

body{
    font-family:'DroidKufi-Regular';
}
/****Scrollbar***/
::-webkit-scrollbar {
    width: 7px;
    /* z-index: 1; */
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #afafaf; 
    border-radius: 7px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #58425f; 
}


/********************NAV BAR**************************************/

.nav-bg {
   
    background-color: #27282fb8;
    border-bottom: 1px solid #ffcdcd;
    top: 0;
}
.logo-top{
    margin: 4px 0 !important;
}
.nav-top{
    margin-top: 10px !important;
}

.fh5co-nav ul li a {
    font-family: 'DroidKufi-Regular';
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 8px;
    color: rgb(255, 210, 210);
    text-shadow: 1px 2px 2px #000000;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
  .fh5co-nav .menu__link {
	/* position: relative;
	display: block;
	text-align: center; */
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}
.fh5co-nav .menu__link:hover{
  color: #ffffff;
    text-shadow: none;
    -webkit-transition: color 0.3s;
	transition: color 0.3s;
}

/******************************* header *******************************/
.w3_agile_header{
	background:#f9e4e4;
}
.w3_agile_header_left{
	float:right;
}
.w3_agile_header_left p{
	color:#565353;
	line-height:2em;
	margin:0.6em 0 0;
}
.w3_agile_header_right{
	float:left;
}
.w3_agile_header_right ul li{
    font-family:'DroidKufi-Regular' ;
	display: inline-block;
    color: #565353;
    text-transform: uppercase;
    font-weight: 600;
}
.w3_agile_header_right ul li a{
	font-size: 14px;
    padding: 10px 30px;
    /* background: #14a1ff; */
    color: #484747;
    text-decoration: none;
    margin-left: 2em;
    display: block;
}
.w3_agile_header_right ul li i{
	padding-left:1em;
}

.w3_agile_header ul{
    margin: 0;
}

.fh5co-nav ul {
    padding: 1em 0;
}
@media(max-width:1024px){
    .fh5co-nav ul li a {
        font-size: 10.5px;
        font-weight: 600;
        padding: 10px 9px;
}
.cd-main-nav__item.cd-main-nav__item--signin, .cd-main-nav__item.cd-main-nav__item--signup {
    border: 1px solid rgba(255, 255, 255, 0.6);
    font-size: 10px;
}
}

@media only screen and (max-width: 768px){
.cd-main-nav {
    margin-left: 12%;
}
}
@media screen and (max-width: 768px){
.fh5co-nav #fh5co-logo {
    margin-top: 1.4em;
}
}

@media(max-width:599px){
    #fh5co-header.fh5co-cover{
        margin-top: -12.55em;
    }
}
/************************INTRO***************************/
#fh5co-header .display-tc h1,
#fh5co-counter .display-tc h1,
.fh5co-cover .display-tc h1 {
 font-family: 'Sulimany';
}

.fh5co-cover .display-tc .form-inline .form-group .form-control:hover,
.fh5co-cover .display-tc .form-inline .form-group .form-control:focus,
.fh5co-cover .display-tc .form-inline .form-group .form-control:active{
    box-shadow: 0px 0px 5px #6cb4fc;
    -webkit-transition:  0.3s all ease-out;
	transition: 0.3s all ease-out;

}

/****************************Start of COL-MD-9*******************************/
/******fam-news*******/

#main-content #fam-news .panel-default {
    border-color: #e8c6d0;
}
#main-content #fam-news .panel-heading{
    background-color: #e8c8d7a6;
}
 #main-content #fam-news .panel-heading .panel-title{
    color: #2a3035;
}
#main-content #fam-news .panel-heading{
    display: -webkit-box;
    padding: 5px 12px 0px;
}
#main-content #fam-news .panel-heading img{
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px;
}
#main-content #fam-news .panel-heading .panel-title{
    display: inline-block;
    margin: -3px 3px 0 0;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
}
/****slider*****/
#main-content #fam-news .main-text{
    position: absolute;
    top: 50px;
    width: 96.66666666666666%;
    color: #FFF;
}
#main-content #fam-news .carousel-caption .slider-btn {
    line-height: 10px;
    color: #805b0a;
    background-color: transparent;
    border-color: #403e3e;
    margin-right: 15px;
    border-radius: 1px;
    margin-top: 16px;
    font-size: 13px;
    font-weight: bold;
    padding: 9px;
}
#main-content #fam-news .carousel-caption .slider-btn:hover{
    color: #000;
    background-color: #FFF;
}
#main-content #fam-news .carousel-control.left,
#main-content #fam-news .carousel-control.right{
    background-color: transparent;
    background-image: none;
}
#main-content #fam-news .carousel-caption h3{
    font-size: 14px;
}
#main-content #fam-news .carousel-caption{
    background-color: #f9f9f9ad;
    bottom: 36px;
    border: 1px solid #525151;
    padding-bottom: 15px;
}
#main-content #fam-news .carousel-indicators{
    bottom: 10px;
}
#main-content #fam-news .carousel-indicators li {
    border: 2px solid #fff;
}
#main-content #fam-news .carousel-indicators li.active {
    background-color: rgb(53, 41, 41);
  }
#main-content #fam-news .carousel-inner img {
    max-height: 500px;
    min-height: 500px;
    width: 100%;
}

  /******img-gallery*******/

#main-content #img-gallery .panel-default {
    border-color: #e8c6d0;
}
#main-content #img-gallery .panel-heading{
    background-color: #e8c8d7a6;
}
 #main-content #img-gallery .panel-heading .panel-title{
    color: #2a3035;
}
#main-content #img-gallery .panel-heading{
    display: -webkit-box;
    padding: 5px 12px 0px;
}
#main-content #img-gallery .panel-heading img{
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px;
}
#main-content #img-gallery .panel-heading .panel-title{
    display: inline-block;
    margin: -3px 3px 0 0;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
}

#main-content .img-gallery{
    padding-right: 0;
}
@media(max-width:991px){
    #main-content .img-gallery{
    padding-left: 0px;
    }
}

#main-content #img-gallery .slider-btn {
    line-height: 10px;
    color: #31312f;
    background-color: transparent;
    border-color: #403e3e;
    margin-right: 15px;
    border-radius: 1px;
    font-size: 13px;
    font-weight: bold;
    padding: 8px;
}
#main-content #img-gallery .slider-btn:hover{
    background-color: #f9b8b880;
    -webkit-transition: background 0.5s ease;
    transition: background 0.5s ease;
}

#main-content #img-gallery .caption a{
    cursor: pointer;
}
#main-content #img-gallery .caption a h3{
    font-size: 13px;
    text-shadow: 0px 0px 1px #5a5a5a;
    color: #333333;
}
#main-content #img-gallery .caption p {
    font-size: 11.5px;
    color: #6f6f6f;
    padding: 7px 0;
}
#main-content #img-gallery .caption a:hover h3{
    color: #c73030;
    -webkit-transition: color 0.5s ease;
    transition: color 0.5s ease;
    }

    #main-content #img-gallery .thumbnail img{
        border-radius: 4px;
    }
    #main-content #img-gallery  .thumbnail img:hover{
        box-shadow: 0px 0px 5px #545353;
        -webkit-transition:  0.5s ease;
    transition:  0.5s ease;
    }


.thumbnail .caption.thumb-cap {
    min-height: 115px;
    max-height: 115px;
}
.thumbnail img.thumb-img {
    min-height: 170px;
    max-height: 170px;
}
/******fam-occasions*******/

#main-content #fam-occasions .panel-default {
    border-color: #e8c6d0;
}
#main-content #fam-occasions .panel-heading{
    background-color: #e8c8d7a6;
}
 #main-content #fam-occasions .panel-heading .panel-title{
    color: #2a3035;
}
#main-content #fam-occasions .panel-heading{
    display: -webkit-box;
    padding: 5px 12px 0px;
}
#main-content #fam-occasions .panel-heading img{
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px;
}
#main-content #fam-occasions .panel-heading .panel-title{
    display: inline-block;
    margin: -3px 3px 0 0;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
}

#main-content .fam-occasions{
    padding-left: 0;
    padding-right: 0;

}

#main-content #fam-occasions .slider-btn {
    line-height: 10px;
    color: #31312f;
    background-color: transparent;
    border-color: #403e3e;
    margin-right: 15px;
    border-radius: 1px;
    font-size: 13px;
    font-weight: bold;
    padding: 8px;
}
#main-content #fam-occasions .slider-btn:hover{
    background-color: #f9b8b880;
    -webkit-transition: background 0.5s ease;
    transition: background 0.5s ease;
}

#main-content #fam-occasions .caption a{
    cursor: pointer;
}
#main-content #fam-occasions .caption a h3{
    font-size: 13px;
    text-shadow: 0px 0px 1px #5a5a5a;
    color: #333333;
}
#main-content #fam-occasions .caption p {
    font-size: 11.5px;
    color: #6f6f6f;
    padding: 7px 0;
}
#main-content #fam-occasions .caption a:hover h3{
    color: #c73030;
    -webkit-transition: color 0.5s ease;
    transition: color 0.5s ease;
    }
    #main-content #fam-occasions .thumbnail img{
        border-radius: 4px;
    }
    #main-content #fam-occasions .thumbnail img:hover{
        box-shadow: 0px 0px 5px #545353;
        -webkit-transition:  0.5s ease;
    transition:  0.5s ease;
    }
/******fam-kids*******/

#main-content #fam-kids .panel-default {
    border-color: #e8c6d0;
}
#main-content #fam-kids .panel-heading{
    background-color: #e8c8d7a6;
}
 #main-content #fam-kids .panel-heading .panel-title{
    color: #2a3035;
}
#main-content #fam-kids .panel-heading{
    display: -webkit-box;
    padding: 5px 12px 0px;
}
#main-content #fam-kids .panel-heading img{
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px;
}
#main-content #fam-kids .panel-heading .panel-title{
    display: inline-block;
    margin: -3px 3px 0 0;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
}
#main-content .fam-kids{
    padding-left: 0;
}
@media(max-width:991px){
    #main-content .fam-kids{
    padding-right: 0px;
    }
}
#main-content #fam-kids .slider-btn {
    line-height: 10px;
    color: #31312f;
    background-color: transparent;
    border-color: #403e3e;
    margin-right: 15px;
    border-radius: 1px;
    font-size: 13px;
    font-weight: bold;
    padding: 8px;
}
#main-content #fam-kids .slider-btn:hover{
    background-color: #f9b8b880;
    -webkit-transition: background 0.5s ease;
    transition: background 0.5s ease;
}

#main-content #fam-kids .caption a{
    cursor: pointer;
}
#main-content #fam-kids .caption a h3{
    font-size: 13px;
    text-shadow: 0px 0px 1px #5a5a5a;
    color: #333333;
}
#main-content #fam-kids .caption p {
    font-size: 11.5px;
    color: #6f6f6f;
    padding: 7px 0;
}
#main-content #fam-kids .caption a:hover h3{
color: #c73030;
-webkit-transition: color 0.5s ease;
transition: color 0.5s ease;
}
#main-content #fam-kids .thumbnail img{
    border-radius: 4px;
}
#main-content #fam-kids .thumbnail img:hover{
    box-shadow: 0px 0px 5px #545353;
    -webkit-transition:  0.5s ease;
transition:  0.5s ease;
}
/****************************Start of COL-MD-3 (Sidebar)*******************************/

/******POLL*******/

#sidebar #poll .panel-default {
    border-color: #e8c6d0;
}
#sidebar #poll .panel-heading{
    background-color: #e8c8d7a6;
}
 #sidebar #poll .panel-heading .panel-title{
    color: #2a3035;
}
#sidebar #poll .panel-heading{
    display: -webkit-box;
    padding: 5px 12px 0px;
}
#sidebar #poll .panel-heading img{
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px;
}
#sidebar #poll .panel-heading .panel-title{
    display: inline-block;
    margin: -3px 3px 0 0;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
}
/*****************************************/
#sidebar #poll .panel-body legend{
    font-size: 14px;
}
#sidebar #poll .panel-body label{
    font-size: 13px;
}
#sidebar #poll .panel-body button{
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    letter-spacing: 0.3px;
    background-color: #c7ddff;
}
#sidebar #poll .panel-body button:hover{
    background-color: #f0dbe69e;
    /* border: 1px solid #b6defd; */
    color: #216bb5;
    box-shadow: 0px 0px 4px #4797d4bd;
    -webkit-transition: color 0.5s ease;
    transition: color 0.5s ease;
    /* -webkit-transition: border 0.5s ease-in;
    transition: border 0.5s ease-in;  */
    -webkit-transition: background 0.5s ease;
    transition: background 0.5s ease; 
}
#sidebar #poll .panel-body .form-group{
    margin-bottom: 5px;
}
#sidebar #poll .panel-body .form-check{
    padding: 3px 0;
}


/******Stats*******/
#sidebar #stats .panel-default {
    border-color: #e8c6d0;
}
#sidebar #stats .panel-heading{
    background-color: #e8c8d7a6;
}
 #sidebar #stats .panel-heading .panel-title{
    color: #2a3035;
}
#sidebar #stats .panel-heading{
    display: -webkit-box;
    padding: 5px 12px 0px;
}
#sidebar #stats .panel-heading img{
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px;
}
#sidebar #stats .panel-heading .panel-title{
    display: inline-block;
    margin: 3px 3px 0 0;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
}
#sidebar #stats .panel-body h4{
    font-size: 12.5px;
    color: #868686;
    text-shadow: 1px 1px 2px #d0cfcf;
    padding-bottom: 11px;
}
/******invitations*******/

#sidebar #invitations .panel-default {
    border-color: #e8c6d0;
}
#sidebar #invitations .panel-heading{
    background-color: #e8c8d7a6;
}
 #sidebar #invitations .panel-heading .panel-title{
    color: #2a3035;
}
#sidebar #invitations .panel-heading{
    display: -webkit-box;
    padding: 5px 12px 0px;
}
#sidebar #invitations .panel-heading img{
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px;
}
#sidebar #invitations .panel-heading .panel-title{
    display: inline-block;
    margin: -3px 3px 0 0;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
}
#sidebar #invitations .panel-body label{
    font-size: 14px;
    line-height: 17px;
}
#sidebar #invitations .panel-body button{
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    letter-spacing: 0.3px;
    background-color: #c7ddff;
}
#sidebar #invitations .panel-body button:hover{
    background-color: #f0dbe69e;
    /* border: 1px solid #b6defd; */
    color: #216bb5;
    box-shadow: 0px 0px 4px #4797d4bd;
    -webkit-transition: color 0.5s ease;
    transition: color 0.5s ease;
    /* -webkit-transition: border 0.5s ease-in;
    transition: border 0.5s ease-in;  */
    -webkit-transition: background 0.5s ease;
    transition: background 0.5s ease; 
}

#sidebar #invitations .panel-body input{
    height: 35px;
    font-size: 12px;
    margin-top: 10px;
}


/********************************FOOTER*****************************/

footer .search-text{
	margin-top: 0;
    background-color: #7dabdb;
    padding-top: 60px;
    padding-bottom: 60px;
}
	
footer .search-text .input-search{
	height:45px;
	width:35%;
    color:#333;
    font-size: 14px;
    padding: 0 1em;
} 
@media(max-width:768px){
    footer .search-text .input-search{
        width:90%;
    } 
}
footer .search-text .btn-search{
	background-color:#7dabdb;
	border:1px solid #FFF;
	color:#FFF;
	padding: 10px 19px;
    font-size: 14px;
    
}
@media(max-width:732px){
    footer .search-text .btn-search{
        margin-top: 10px;
    }
}


footer .search-text  .btn-search:hover{
	background-color:#FFF;
	color:#7dabdb;
}

footer .copyright{
    background-color:#f0f0f0;
}

footer .copyright p{
   margin:15px 0px;
   font-size: 13px;
}
footer .copyright a{
    color: #5a5a5a;
    font-weight: bold;
}
footer{
	background-color: #222222;
    padding:  0px;
}

footer .menu li a{
	color:#b1aca1;
	padding:5px;
    text-decoration:none;
    font-size: 12px;
}

footer .menu li a:hover{
	color:#7dabdb;
}

footer .fab.fa-facebook , 
footer .fab.fa-dropbox, 
footer .fab.fa-flickr , 
footer .fab.fa-github , 
footer .fab.fa-linkedin ,
footer .fab,fa-tumblr ,
footer .fab.fa-google-plus , 
footer .fab.fa-tumblr,
footer .fab.fa-twitter {
	color:#b1aca1;
	font-size:20px;
	padding:10px;
}

footer  .fab.fa-facebook:hover, 
footer .fab.fa-dropbox:hover,
footer .fab.fa-flickr:hover,
footer .fab.fa-github:hover, 
footer .fab.fa-linkedin:hover,
footer .fab,fa-tumblr:hover,
footer .fab.fa-google-plus:hover,
footer .fab.fa-tumblr:hover ,
footer .fab.fa-twitter:hover{
	color:#6794c2;
}
footer .list-inline {
    margin-left: -5px;
}
footer .myframegmap{

    border: 3px solid #f6f5f0;
    border-radius: 1px;
    height: 130px;
    width: 80%;
    box-shadow: 0px 0px 3px 3px #e7e4dc;
    overflow: hidden;
    position: relative;
    margin: 2em auto 0;

}
footer .mapouter{
    box-shadow: 0px 0px 10px #f59797;
    margin: 2em 0 0 0;
    text-align:center;
    height:200px;
    width:100%;
    min-width: 100%;
}
footer .gmap_canvas {
        border-radius: 4px;
        overflow:hidden;
        background:none!important;
        height:200px;
        width: 100%;
    }


@media (max-width:767px){
    footer ul.footer-social{

    }
    footer .mapouter {
        margin: 8em 0 0 0;
    }
}
@media (max-width: 386px){
    footer .mapouter {
        margin: 10em 0 0 0;
    }
}
/****************************************************PAGES******************************************************/
/**************Fam-History******************/

#main-content #fam-history .panel-default {
    border-color: #e8c6d0;
}
#main-content #fam-history .panel-heading{
    background-color: #e8c8d7a6;
}
 #main-content #fam-history .panel-heading .panel-title{
    color: #2a3035;
}
#main-content #fam-history .panel-heading{
    display: -webkit-box;
    padding: 5px 12px 0px;
}
#main-content #fam-history .panel-heading img{
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px;
}
#main-content #fam-history .panel-heading .panel-title{
    display: inline-block;
    margin: -3px 3px 0 0;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
}
#main-content #fam-history .panel-body .jumbotron{
    padding-right: 1.5em;
    padding-left:  1.5em;
    background-color: #f8faff;
    border: 5px solid #f5e5ff;
    margin-bottom: 0;
}
#main-content #fam-history .panel-body .jumbotron h3{
    font-size: 18px;
    color: #5076da;
    text-shadow: 1px 0px 0px #c124ff;
    padding-bottom: 1em;
}
#main-content #fam-history .panel-body .jumbotron p{
    font-size: 16px;
    font-weight: 300;
    line-height: 1.9em;
}
/**************Fam-Tree******************/

#main-content #fam-tree .panel-default {
    border-color: #e8c6d0;
}
#main-content #fam-tree .panel-heading{
    background-color: #e8c8d7a6;
}
 #main-content #fam-tree .panel-heading .panel-title{
    color: #2a3035;
}
#main-content #fam-tree .panel-heading{
    display: -webkit-box;
    padding: 5px 12px 0px;
}
#main-content #fam-tree .panel-heading img{
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px;
}
#main-content #fam-tree .panel-heading .panel-title{
    display: inline-block;
    margin: -3px 3px 0 0;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
}
/* Style the Image Used to Trigger the Modal */
#main-content #fam-tree .panel-body #myImg {
    border-radius: 2px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 0 9px #04298c;
}

#main-content #fam-tree .panel-body #myImg:hover {
    opacity: 0.7;
}

/* The Modal (background) */
#main-content #fam-tree .panel-body .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 4; /* Sit on top */
    padding-top: 40px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
#main-content #fam-tree .panel-body .modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 600px;
    height: 90%;
    max-height: 90%;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#main-content #fam-tree .panel-body #caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
#main-content #fam-tree .panel-body .modal-content, #main-content #fam-tree .panel-body #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
    border-radius: 2px;
    
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
#main-content #fam-tree .panel-body .close {
    position: absolute;
    top: 0.85em;
    right: 4em;
    color: #fffefe;
    font-size: 50px;
    font-weight: bolder;
    transition: 0.3s;
    float: right;
    opacity: 1;
    /* background-color: #d2d2d200; */
    /* border-radius: 5px; */
    /* padding: 0px 6px; */
}

#main-content #fam-tree .panel-body .close:hover,
#main-content #fam-tree .panel-body.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    #main-content #fam-tree .panel-body  .modal-content {
        width: 100%;
    }
}
/* #fam-tree .panel-body{
    background-image: url('../images/icons/fam-tree-lg.png');
} */
/**************Fam-News (page)******************/

#main-content #fam-news-page .panel-default {
    border-color: #e8c6d0;
}
#main-content #fam-news-page .panel-heading{
    background-color: #e8c8d7a6;
}
 #main-content #fam-news-page .panel-heading .panel-title{
    color: #2a3035;
}
#main-content #fam-news-page .panel-heading{
    display: -webkit-box;
    padding: 5px 12px 0px;
}
#main-content #fam-news-page .panel-heading img{
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px;
}
#main-content #fam-news-page .panel-heading .panel-title{
    display: inline-block;
    margin: -3px 3px 0 0;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
}
#fam-news-page .panel-body{
    /* background-image: url('../images/icons/news-ico-lg.png'); */
}
/*---------------*/
/***** Ruby *****/
/*---------------*/
#fam-news-page .panel-body .grid {
	position: relative;
	margin: 0 auto;
	padding: 1.5em 0;
	max-width: 1000px;
	list-style: none;
    text-align: center;
    overflow: hidden;
} 

/* Common style */

    #fam-news-page .panel-body .grid figure {
        text-align: center;
        position: relative;
        float: none;
        overflow: hidden;
        margin: 10px 22%;
        min-width: 320px;
        max-width: 480px;
        max-height: 360px;
        min-height: 240px;
        width: auto;
        background: #4c2738;
        text-align: center;
        cursor: pointer;
    }

        #fam-news-page .panel-body .grid figure img {
            position: relative;
            display: block;
            min-height: 100%;
            height: 100%;
            max-width: 100%;
        }

#fam-news-page .panel-body .grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

#fam-news-page .panel-body .grid figure figcaption::before,
#fam-news-page .panel-body .grid figure figcaption::after {
	pointer-events: none;
}

#fam-news-page .panel-body .grid figure figcaption,
#fam-news-page .panel-body .grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
#fam-news-page .panel-body .grid figure figcaption > a {
	z-index: 1;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

#fam-news-page .panel-body .grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 500;
}

#fam-news-page .panel-body .grid figure h2 span {
	font-weight: 500;
}

#fam-news-page .panel-body .grid figure h2,
#fam-news-page .panel-body .grid figure p {
	margin: 0;
}

#fam-news-page .panel-body .grid figure p {
	letter-spacing: 0;
	font-size: 17px;
}


#fam-news-page .panel-body figure.effect-ruby {
	/* background-color: #ffffff; */
}

#fam-news-page .panel-body figure.effect-ruby img {
	opacity: 0.65;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
}
#fam-news-page .panel-body figure.effect-ruby .special-img{
    -webkit-transform: rotate(90deg) scale(1.45); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
  -moz-transform: rotate(90deg) scale(1.45); /* Fx 3.5-15 */
-ms-transform: rotate(90deg) scale(1.45); /* IE 9 */
-o-transform: rotate(90deg) scale(1.45); /* Op 10.5-12 */
transform: rotate(90deg) scale(1.45);/* Fx 16+, IE 10+ */
}

#fam-news-page .panel-body figure.effect-ruby:hover img {
	opacity: 0.5;
	-webkit-transform: scale(1);
	transform: scale(1);
}
#fam-news-page .panel-body figure.effect-ruby:hover .special-img{
    -webkit-transform: rotate(90deg) scale(1.35); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
    -moz-transform: rotate(90deg) scale(1.35); /* Fx 3.5-15 */
  -ms-transform: rotate(90deg) scale(1.35); /* IE 9 */
  -o-transform: rotate(90deg) scale(1.35); /* Op 10.5-12 */
    transform: rotate(90deg) scale(1.35);
}

#fam-news-page .panel-body figure.effect-ruby h2 {
    margin-top: 10%;
    color: #fdfdfd;
    font-size: 22px;
    /* text-shadow: 1px 1px 0 #b9b6bb; */
    letter-spacing: 0.5px;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

    #fam-news-page .panel-body figure.effect-ruby p {
        margin: 1em 0 20px;
        padding: 1.5em 1em;
        border: 1px solid #fdfdfd;
        color: #fdfdfd;
        font-weight: 500;
        text-shadow: 1px 1px 1px #545252;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(0,20px,0) scale(1.1);
        transform: translate3d(0,20px,0) scale(1.1);
    }
    #fam-news-page .panel-body figure.effect-ruby span{
        font-size: 16px;
        letter-spacing: 0.5px;
        word-spacing: 2px;
    }

    #fam-news-page .panel-body figure.effect-ruby:hover h2 {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        color: #fdfdfd;
        text-shadow: 1px 1px 0 #b9b6bb;
        box-shadow: 0 0.5px 6px #fff;
        padding: 12px 5px;
        /* background-color: #f7f3f36b; */
    }

#fam-news-page .panel-body figure.effect-ruby:hover p{
    line-height: 1.8em;
	opacity: 1;
	-webkit-transform: translate3d(0,0,0) scale(1);
	transform: translate3d(0,0,0) scale(1);
}
@media(max-width: 1028px){
#fam-news-page .panel-body .grid figure {
    float: none; 
    display: inline-block;
    margin: 10px 10px;
}
}
@media(max-width: 924px){
    #fam-news-page .panel-body figure.effect-ruby h2 {
        margin-top: 18%;
        color: #fdfdfd;
        font-size: 16px;
        line-height: 1.5em;
    }
    #fam-news-page .panel-body .grid figure figcaption {
        padding: 1em 1.5em;
    }
    #fam-news-page .panel-body figure.effect-ruby p {
        margin: 1em 0 0;
        padding: 1em 1.4em;
        font-size: 15px;
    }
}

@media(max-width: 440px){
    #fam-news-page .panel-body .grid figure {
        overflow: hidden;
        min-width: 100%;
        max-width: 100%;
        /* padding: 1em; */
        margin: 1em 0 0 0;
    }
}
@media(max-width: 389px){
    #fam-news-page .panel-body figure.effect-ruby h2 {
        margin-top: 8%;
    }
    #fam-news-page .panel-body .grid figure figcaption {
        padding: 0.5em 1em;
    }
    #fam-news-page .panel-body figure.effect-ruby p {
        padding: 0.8em;
        font-size: 14px;
    }    
}
 @media(max-width: 321px){
    #fam-news-page .panel-body .grid figure figcaption {
        padding: 0.5em 0.5em;
    }
    #fam-news-page .panel-body figure.effect-ruby p {
            padding: 0.6em;
    font-size: 12px;
    }    
} 
/********************Fam-Occasions PAGE********************************/
#main-content #fam-occasions-page .panel-default {
    border-color: #e8c6d0;
}
#main-content #fam-occasions-page .panel-heading{
    background-color: #e8c8d7a6;
}
 #main-content #fam-occasions-page .panel-heading .panel-title{
    color: #2a3035;
}
#main-content #fam-occasions-page .panel-heading{
    display: -webkit-box;
    padding: 5px 12px 0px;
}
#main-content #fam-occasions-page .panel-heading img{
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px;
}
#main-content #fam-occasions-page .panel-heading .panel-title{
    display: inline-block;
    margin: -3px 3px 0 0;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
}
#fam-occasions-page .panel-body{
    /* background-image: url('../images/icons/news-ico-lg.png'); */
}
/*---------------*/
/***** Ming *****/
/*---------------*/

#fam-occasions-page .panel-body figure.effect-ming {
	background: #030c17;
}

#fam-occasions-page .panel-body figure.effect-ming img {
	opacity: 0.9;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

#fam-occasions-page .panel-body figure.effect-ming figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.4,1.4,1);
	transform: scale3d(1.4,1.4,1);
}

#fam-occasions-page .panel-body figure.effect-ming h2 {
	margin: 20% 0 10px 0;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

#fam-occasions-page .panel-body figure.effect-ming p {
	padding: 1em 1.5em 1em;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

#fam-occasions-page .panel-body figure.effect-ming:hover h2 {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}

#fam-occasions-page .panel-body figure.effect-ming:hover figcaption::before,
#fam-occasions-page .panel-body figure.effect-ming:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}
#fam-occasions-page .panel-body figure.effect-ming:hover p span.date{
    box-shadow: 0 0 8px #ffb1b1;
    padding: 0px 9px;
    background-color: #403d3e80;
    border-radius: 6px;
    color: #ffffff;
}

#fam-occasions-page .panel-body figure.effect-ming:hover figcaption {
	background-color: rgba(58,52,42,0);
}

#fam-occasions-page .panel-body figure.effect-ming:hover img {
	opacity: 0.4;
}

/* Common style */
    #fam-occasions-page .panel-body .grid figure {
        position: relative;
        float: none;
        overflow: hidden;
        margin: 10px 26%;
        min-width: 320px;
        max-width: 480px;
        max-height: 360px;
        min-height: 255px;
        width: 48%;
        /*height: auto;*/
        background: #4e2035;
        text-align: center;
        cursor: pointer;
    }
@media(max-width:1999px){
    #fam-occasions-page .panel-body .grid figure {
        float: none;
        overflow: hidden;
        margin: 10px 26%;
       
    }
}
@media(max-width:800px){
    #fam-occasions-page .panel-body .grid figure {
        /* position: relative;
        float: none;
        overflow: hidden;
        margin: 10px 26%; */
       
    }
}

#fam-occasions-page .panel-body .grid figure img {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    opacity: 0.8;
    height: 270px;
    min-height: 270px;
}

#fam-occasions-page .panel-body .grid figure figcaption {
    padding: 2em 1.5em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#fam-occasions-page .panel-body .grid figure figcaption::before,
#fam-occasions-page .panel-body .grid figure figcaption::after {
	pointer-events: none;
}

#fam-occasions-page .panel-body .grid figure figcaption,
#fam-occasions-page .panel-body .grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
#fam-occasions-page .panel-body .grid figure figcaption > a {
	z-index: 1;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

#fam-occasions-page .panel-body .grid figure h2 {
	word-spacing: -0.15em;
	font-weight: bold;
    /* border: 1px solid red; */
    box-shadow: 0 0 8px #171616;
 padding: 16px 0px;
    background-color: #fff7f78a;
}

#fam-occasions-page .panel-body .grid figure h2 span {
	font-weight: 800;
}

#fam-occasions-page .panel-body .grid figure h2,
#fam-occasions-page .panel-body .grid figure p {
	margin: 0;
}

#fam-occasions-page .panel-body .grid figure p {
    letter-spacing: 0;
    font-size: 70.5%;
    line-height: 36px;

}
#fam-occasions-page .panel-body .grid figure span{
    font-size: 16px;
    letter-spacing: 0.5px;
    word-spacing: 1px;
}

@media screen and (max-width: 1199px) {
#fam-occasions-page .panel-body .grid figure figcaption {
    padding: 1.5em 1em;
}
#fam-occasions-page .panel-body figure.effect-ming figcaption::before {
    position: absolute;
    top: 20px;
    right: 22px;
    bottom: 20px;
    left: 22px;
}
#fam-occasions-page .panel-body .grid figure p {
    font-size: 67.5%;
    line-height: 33px;
    padding: 1em 1em 1em;
}
#fam-occasions-page .panel-body figure.effect-ming:hover h2 {
    font-size: 17px;
}
}
@media screen and (max-width: 50em)/*800px*/ {
    #fam-occasions-page .panel-body .grid figure figcaption {
        padding: 3.5em 1em;
    }
    #fam-occasions-page .panel-body .grid figure p {
        font-size: 75.5%;
        line-height: 50px;
    }
 #fam-occasions-page .panel-body .content {
	padding: 0 10px;
	text-align: center;
}
 #fam-occasions-page .panel-body .grid figure {
	display: inline-block;
	margin: 1em auto;
    max-width: initial;
    width: 100%;
}
 #fam-occasions-page .panel-body .grid figure img {
        position: relative;
        display: block;
        min-height: 100%;
        max-width: 100%;
        width: 100%;
    }
}
@media(max-width:480px){
    #fam-occasions-page .panel-body .grid figure {
        min-width: auto;
    }
    #fam-occasions-page .panel-body .grid figure figcaption {
        padding: 2.5em 1em;
    }
    #fam-occasions-page .panel-body figure.effect-ming figcaption::before {
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
    }
    #fam-occasions-page .panel-body .grid figure h2 {
       
        padding: 13px 0px;
        font-size: 16px;
    }
    #fam-occasions-page .panel-body .grid figure p {
        font-size: 66.5%;
        line-height: 28px;
        padding: 1em 1em;
    }
    #fam-occasions-page .panel-body figure.effect-ming p {
        padding: 2em 1.5em 1em;
    }
}


@media(max-width:382px){
    #fam-occasions-page .panel-body .grid figure {
        min-width: auto;
    }
    #fam-occasions-page .panel-body .grid figure figcaption {
        padding: 1em 0.5em;
    }
    #fam-occasions-page .panel-body figure.effect-ming figcaption::before {
        position: absolute;
        top: 12px;
        right: 12px;
        bottom: 12px;
        left: 12px;
    }
    #fam-occasions-page .panel-body .grid figure h2 {
       
        padding: 13px 0px;
        font-size: 16px;
    }
    #fam-occasions-page .panel-body .grid figure p {
        font-size: 66.5%;
        line-height: 22px;
        padding: 1em 1em;
    }
}

/****Pagination****/
#SHowButton.pagination input.btn {
    padding: 4.5px 11.5px;
    background-color: #8c87ef;
    color: #fff;
    border: 2px solid #8c87ef;
    transition:all 0.6s ease;
}
    #SHowButton.pagination input.btn:hover, #SHowButton.pagination input.btn:focus {
        background-color: transparent;
        color: #8c87ef;
        
    }


    .pagination > li > a, .pagination > li > span {
        padding: 10px 17px !important;
        background-color: transparent;
    }
    .pagination > li.active > a{
        background-color: #0d8dfb !important;
        z-index: 1;
    }
    .pagination > li > a:hover{
        background-color: #eeeeee;

    }
    .pagination > li > a:focus , .pagination > li > a:active{
        background-color: #0d8dfb !important;
        color: #fff !important;

    }

    @media(max-width:451px){
        .pagination > li > a, .pagination > li > span {
            padding: 4px 10px !important;
        }
    }

    @media(max-width:354px){
        .pagination > li > a, .pagination > li > span {
            padding: 1px 7px !important;
        }
    }

/*********************Image Gallery PAGE********************************/
#main-content .panel-body .wthree_services_grids i.fa-search-plus {
    /*margin-top: 50%;*/
    margin-top: 32%;
    font-size: 1.6em;
    color: #e8c8d7;
}
/*-- projects --*/
.w3ls-title {
    text-align: center;
}
.portfolio {
    padding: 5em 0;
}
.w3_agileits_header1:after{
	left:20% !important;
}
.filtr-item {
    padding: 0.5em;
}
.item-desc {
    background-color: rgba(0,0,0,0.5);
    color: white;
    position: absolute;
    text-transform: uppercase;
    text-align: center;
    padding: 1em;
    z-index: 1;
    bottom: 1em;
    left: 1em;
    right: 1em;
} 
/* Filter controls */
ul.simplefilter {
    text-align: center;
    margin: 3em 0;
}
.simplefilter li {
    color: white;
    cursor: pointer;
    display: inline-block;
    text-transform: uppercase;
    padding: 0.6em 1.3em;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    margin: 0 0.3em 1em 0.3em;
    font-size: 0.8em;
    background-color: #d26cff;

    /* font-size: 0.7em; */
    /* background: url("../images/picture11.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 66% 66%; */
}
/* .simplefilter li span{
    visibility: hidden;
}
.simplefilter li:hover span , .simplefilter li:focus span , .simplefilter li:active span{
    visibility: visible;
    display: block;
    transition: all 0.5s ease-in;
} */

.simplefilter li.active , .simplefilter li:hover {
    background-color: #807aec;
}
.agileits_portfolio_grid {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0 0 8px #807aec;
}
.agileits_portfolio_grid .w3_textbox{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
    transform: scale(0);
    background-color: rgba(0, 0, 0, 0.53);
	padding: 0 2em;
}
.agileits_portfolio_grid:hover .w3_textbox{
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
}
.w3_textbox {
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
	transition: all 0.5s;
	text-align:center;
}
.w3_textbox h4 {
    font-size: 1.5em;
    color:#6bcad2;
    margin: 3em 0 .5em;
    text-transform: uppercase;
    letter-spacing: 5px;
}
.w3_textbox p{
	color: #fff;
    line-height: 1.8em;
}
.agileits_portfolio_grid .group1.sb img {
    max-height: 195px;
    min-height: 195px;
    width: 100%;
}
/*-- //projects --*/

/***********************PEOPLE PAGE*****************************/


/* FEATURES
----------------------*/

.gradient-fill:before {
    color: #fc73b4;
    background: -moz-linear-gradient(top, #9477b4 0%, #fc73b4 100%);
    background: -webkit-linear-gradient(top, #9477b4 0%, #fc73b4 100%);
    background: linear-gradient(to bottom, #9477b4 0%, #fc73b4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card.features {
    border: 0;
    border-radius: 3px;
    box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

@media (max-width:991px) {
    .card.features {
        margin-bottom: 2rem;
    }
    [class^="col-"]:last-child .card.features {
        margin-bottom: 0;
    }
}

.card.features:before {
    content: "";
    position: absolute;
    width: 3px;
    color: #fc73b4;
    background: -moz-linear-gradient(top, #9477b4 0%, #fc73b4 100%);
    background: -webkit-linear-gradient(top, #9477b4 0%, #fc73b4 100%);
    background: linear-gradient(to bottom, #9477b4 0%, #fc73b4 100%);
    top: 0;
    bottom: 0;
    left: 0;
}

.card-text {
    font-size: 14px;
}

.card.features:hover {
    transform: translateY(-3px);
    -moz-box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.08);
}

.box-icon {
    box-shadow: 0px 0px 43px 0px rgba(0, 0, 0, 0.14);
    padding: 10px;
    width: 70px;
    border-radius: 3px;
    margin-bottom: 1.5rem;
    background-color: #FFF;
}

.circle-icon {
    box-shadow: 0px 9px 32px 0px rgba(0, 0, 0, 0.07);
    padding: 10px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 1.5rem;
    background-color: #FFF;
    color: #f5378e;
    font-size: 48px;
    text-align: center;
    line-height: 80px;
    font-weight: 300;
    transition: all 0.3s ease;
}

@media (max-width:992px) {
    .circle-icon {
        width: 70px;
        height: 70px;
        font-size: 28px;
        line-height: 50px;
    }
}

.ui-steps li:hover .circle-icon {
    background-image: -moz-linear-gradient( 122deg, #e6388e 0%, #fb378e 100%);
    background-image: -webkit-linear-gradient( 122deg, #e6388e 0%, #fb378e 100%);
    background-image: -ms-linear-gradient( 122deg, #e6388e 0%, #fb378e 100%);
    background-image: linear-gradient( 122deg, #e6388e 0%, #fb378e 100%);
    box-shadow: 0px 9px 32px 0px rgba(0, 0, 0, 0.09);
    color: #FFF;
}

.ui-steps li {
    padding: 15px 0;
}

.ui-steps li:not(:last-child) {
    border-bottom: 1px solid #f8e3f0;
}

.perspective-phone {
    position: relative;
    z-index: -1;
}

@media (min-width:992px) {
    .perspective-phone {
        margin-top: -150px;
    }
}


/*  TABS
----------------------*/
.post-right{
    max-height: 23.5em;
    overflow-y: auto;
    
}

    .post-right::-webkit-scrollbar {
        width: 4px;
        /* z-index: 1; */
        /* display: none;  */
    }
    
    /* Track */
    .post-right::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey; 
        border-radius: 10px;
    }
    
    /* Handle */
    .post-right::-webkit-scrollbar-thumb {
        background: #bdbdbd; 
        border-radius: 10px;
    }
    
    /* Handle on hover */
    .post-right::-webkit-scrollbar-thumb:hover {
        background: #58425f; 
    }
    
    

    

.tab-content {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    background-color: #FFF;
    border: 1px solid #ce75b4;
    border-radius: 4px;
    box-shadow: 0px 0px 14px rgb(251, 237, 255);
    padding: 2rem 1rem;
    margin-top: 2em;
}

@media (max-width:992px) {
    .tab-content {
        padding: 1.5rem;
    }
}

.tab-content p , .tab-content .post-right span {
    line-height: 1.8;
    color: #c977a0;
    margin-bottom: 1rem;
    font-size: 14px;
}
p.text{
    color: #636062;
}

.tab-content h2 {
    margin-bottom: 1rem;
    font-size: 22px;
    font-size: 14.5px;
    color: #633991;
    font-weight: 500;
    text-shadow: 0px 1px 2px #c755ac;
    word-spacing: 2px;
}

.nav-tabs {
    border-bottom: 0;
}

.nav-tabs .nav-item .nav-link,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    padding: 0.5rem;
    border-color: #faf6fb #faf6fb #FFF;
    font-size: 19px;
    color: #b5a4c8;
    background: #f5eff7;
}

.nav-tabs .nav-item.active a.nav-link  {
    background: #FFF;
    border-top-width: 3px;
    border-color: #ce75b4 #faf6fb #FFF;
    color: #633991;
}

.tab-content .tab-pane img{
    border-radius: 1%;
    box-shadow: 0 0 10px #e7bcdb;
    min-height: 13em;
}

/******************Kids Comments*******************/
.kids-comments .main-news{
    padding-right: 30px;
    padding-left: 30px;
}
.kids-comments .post-grids{
    overflow: hidden;
}
.kids-comments .post-grids{
    padding: 1em 0.2em;
    border-radius: 6px;
    box-shadow: 0 0 7px #6ca0ff;
}
    .kids-comments .post-grids p.text, .kids-comments .post-grids span.text {
        color: #636062;
        font-size: 13.5px;
        line-height: 24px;
        padding-top: 10px;
    }
.kids-comments .post-grids h4{
    font-size: 17px;
    font-weight: 600;
    text-shadow: 1px 1px 0 #d289f1;
    color: #58415f;
    word-spacing: 3px;
    padding: 6px 3px;
}
@media(max-width:991px){
    .post-right {
        margin-top: 1em;
    }
}
@media(max-width:1199px){
    .kids-comments .post-grids .post-left{
        padding-top: 0.65em;
    }
}

.kids-comments .post-grids .post-left img {
    border-radius: 5px;
    min-height: 210px;
}
@media(min-width:1200px){
    .post-right {
        padding-top: 0.3em;
        padding-bottom: 0.3em;
    }
}

/***comments***/
.kids-comments .comments .thumbnail {
    margin-bottom: 0;
    border: 0;
}
.kids-comments .comments .panel {
    position:relative;
    margin-bottom: 0;
}
.kids-comments .comments .panel.panel-default{
    border-color: #c5d2ff !important;
}
.kids-comments .comments .panel .panel-heading{
    padding: 8px 10px 8px 10px !important;
    background-color: #e5eaf7 !important;
}
   
.kids-comments .comments .panel .panel-heading strong{
    font-size: 12px;
}
.kids-comments .comments .panel .panel-heading span{
    font-size: 11px;
    margin-right: 1em;
}
.kids-comments .comments .panel>.panel-heading:after,.kids-comments .comments .panel>.panel-heading:before{
	position:absolute;
    top:10px;
    right:-16px;
	left:100%;
	width:0;
	height:0;
	display:block;
	content:" ";
	border-color:transparent;
	border-style:solid solid outset;
	pointer-events:none;
}
.kids-comments .comments .panel>.panel-heading:after{
	border-width:7px;
	border-left-color:#e5eaf7;
	margin-top:1px;
	margin-right:2px;
}
.kids-comments .comments .panel>.panel-heading:before{
	border-left-color:#e5eaf7;
	border-width:8px;
}

.comments{
    padding: 30px 15px 10px 15px;
}
.kids-comments .comments .thumbnail img {
    transform: scale(0.9,0.9);
    border-radius: 50%;
    height: 80px;
    width: 80px;
}
@media(min-width:1200px){
.kids-comments .comments .comment-text{
    padding-top: 9px;
}
}

/***Add Comment Text Area***/
.kids-comments  .add-comment{
    padding: 10px 30px;
}
.kids-comments  .add-comment #paper {
      color:#FFF;
      font-size:20px;
  }
  .kids-comments  .add-comment #margin {
      margin-left:12px;
      margin-bottom:20px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none; 
  }
    .kids-comments .add-comment #text {
        width: 100%;
        overflow: hidden;
        background-color: #FFF;
        color: rgb(46, 46, 46);
        word-spacing: 3px;
        font-weight: normal;
        font-size: 19px;
        resize: none;
        line-height: 40px;
        padding-left: 100px;
        padding-right: 100px;
        padding-top: 28px;
        padding-bottom: 34px;
        /*background-image: url("https://static.tumblr.com/maopbtg/E9Bmgtoht/lines.png"), url("https://static.tumblr.com/maopbtg/nBUmgtogx/paper.png");*/
        /*background-repeat: repeat-y, repeat;*/
        background-image: url('../images/lined-paper.png');
        -webkit-border-radius: 12px;
        border-radius: 12px;
        -webkit-box-shadow: 0px 1px 5px #7b7b7b;
        box-shadow: 0px 1px 5px #7b7b7b;
        border-top: 1px solid #FFF;
        border-bottom: 1px solid #FFF;
    }
  .kids-comments  .add-comment #title {
      background-color:transparent;
      border-bottom:3px solid #FFF;
      color:#FFF;
      font-size:20px;
      font-family:Courier, monospace;
      height:28px;
      font-weight:bold;
      width:220px;
  }
  .kids-comments  .add-comment #button {
      
     cursor: pointer;
     margin-top: 20px;
     float: left;
     padding: 10px 14px;
     font-size: 15px;
     color: #ffffff;
     border-radius: 7px;
     background-color: #7697fb;
     border: 1px solid #7697fb;
     /* background-image: url("../images/icons/plus.png");
     background-position: left;
     background-repeat: no-repeat; */
  }
  .kids-comments .add-comment #button:hover{
    background-color: transparent;
    border: 1px solid #7697fb;
    color: #7697fb;
    font-weight: 600;
  }
  .kids-comments .add-comment #button:active {
      zoom: 1;
      filter: alpha(opacity=80);
      opacity: 0.8;
  }
  .kids-comments .add-comment #button:focus {
      zoom: 1;
      filter: alpha(opacity=80);
      opacity: 0.8;
  }
  .kids-comments .add-comment #wrapper {
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
    margin-bottom: 40px;
  }

/* Keep the main nav's menu links visible at all times, on every screen size, instead of
   collapsing into a toggle. Two different collapsible-menu approaches were tried (the
   theme's own off-canvas panel, then a custom Bootstrap dropdown) and both had visual
   bugs, so we're keeping the classic always-visible horizontal bar. The theme itself
   hides the menu under 768px width by default (leaving no way to reach it once hidden),
   so this overrides that to keep it visible there too. Also permanently hide the theme's
   own broken toggle/off-canvas panel so they can never show up or intercept clicks. */
.fh5co-nav-toggle,
#fh5co-offcanvas {
    display: none !important;
}
@media screen and (max-width: 768px) {
    .fh5co-nav .menu-1 {
        display: inline-block !important;
    }
}

/* The main nav is position:fixed, so anchor links (#fam-history, #fam-tree, #fam-news)
   were landing right under it, hiding the section's heading. This reserves space above
   each anchor target equal to the fixed nav's height so it clears it when scrolled to. */
#fam-news, #fam-history, #fam-tree, #fam-occasions {
    scroll-margin-top: 130px;
}

/* The theme's own style.css sets ".fh5co-nav ul li { display: inline; }" on the menu,
   which makes multi-word labels like "مناسبات الأسرة" flow like plain text -- when the
   phrase doesn't fit on the line, only its last word wraps, and because the menu is
   center-aligned that lone word lands in the middle. This keeps each label's words
   together so the whole label wraps as one unit instead of splitting mid-phrase. */
.fh5co-nav .left-menu ul li,
.fh5co-nav .right-menu ul li {
    white-space: nowrap;
}

.news-desc {
    max-height: 0;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s ease;
    color: #666;
    line-height: 1.8;
}
.news-desc.expanded {
  max-height: 2000px;
  margin-top: 10px;
}
.read-more-btn {
    cursor: pointer;
    color: #6bcad2;
    display: inline-block;
    margin-top: 0.5em;
}

/* Plain, image-free headline list for the family news page (and its AJAX pages),
   styled like a news-aggregator index: a small tag+date line, then a bold
   clickable headline that expands its body in place when clicked. */
.news-headline-list {
    max-width: 900px;
    margin: 0 auto;
}
.news-headline-item {
    padding: 18px 4px;
    border-bottom: 1px solid #e5e5e5;
}
.news-headline-item:last-child {
    border-bottom: none;
}
.news-headline-meta {
    margin-bottom: 4px;
    font-size: 0.85em;
}
.news-headline-tag {
    color: #b64d99;
    font-weight: 700;
}
.news-headline-sep {
    color: #ccc;
    margin: 0 6px;
}
.news-headline-date {
    color: #888;
}
.news-headline-title {
    margin: 0;
    font-size: 1.25em;
    font-weight: 700;
    color: #222;
    line-height: 1.4;
    cursor: pointer;
}
.news-headline-title:hover {
    color: #807aec;
    text-decoration: underline;
}
.news-headline-arrow {
    font-size: 0.7em;
    margin-inline-start: 6px;
    color: #807aec;
    transition: transform 0.2s ease;
    display: inline-block;
}
.news-headline-arrow.rotated {
    transform: rotate(180deg);
}