/********************General**************************************/
body {font-family:'Lucida Sans Unicode'; font-size:16px; font-style:normal; font-variant:normal; font-weight:400; line-height:30px;}
a {color:red; text-decoration:none;}
* {box-sizing:border-box;}
.left {float:left;}
.right {float:right;}
.sq_btn {display:inline-block; padding:0.3em 1em; text-decoration:none; color:#67c5ff; border:solid 2px #67c5ff; border-radius:3px; transition:0.4s;}
.sq_btn:hover {background:#67c5ff; color:#fff;}

/********************Main Page**************************************/
.row {display:flex; width:100%;}
.column-left {flex:1; padding:16px; background-color:#fff; border:solid 1px;}
.column-middle {flex:1; padding:16px; max-width:70%; margin-left:auto; margin-right:auto; background-color:#fff; border:solid 1px;}
.column-right {flex:1; padding:16px; margin-left:1%; background-color:#fff; border:solid 1px;}
.row:after {content:''; display:table; clear:both;}
.namesheader,.placesheader {width:100%; display:inline-block; background-color:azure; border:solid 0.5px; color:#000; font-size:medium; padding:5px 0 5px 10px; margin:0 0 4px 0; box-shadow:#789;}
.names,.places {list-style:none!important; display:inline-block; padding:0; color:red; display:none; padding:0 5px 0 10px;}
.line {color:red; border-bottom:0.5px dashed #999; width:100%; display:inline-block; width:100%; cursor:pointer;}

/********************Hourglass**************************************/
.hourglass {overflow:hidden; padding:20px 0 20px 0; width:auto; max-width:1250px; min-width:240px; position:relative; margin-right:auto; margin-left:auto;}
.textcenter {text-align:center; color:Gray;}
.column1 {float:left; width:18%; margin-bottom:20px;}
.column2 {float:left; width:20%; margin-bottom:20px;}
.column3 {float:left; width:22%; margin-bottom:20px;}
.column4 {float:left; width:22%; margin-bottom:20px;}
.column5 {float:left; width:18%; margin-bottom:20px;}
.box {float:left; width:100%;}
.box4 {float:left; width:100%;}
.person1 {height:60px; width:96%; box-sizing:border-box; float:left; border:1px solid #000; padding:2px; box-shadow:2px 2px 1px 0 gray;-webkit-box-shadow:2px 2px 1px 0 gray;-moz-box-shadow:2px 2px 1px 0 gray; font-size:11px; line-height:13px;}
.person2 {height:60px; width:90%; box-sizing:border-box; float:left; border:1px solid #000; padding:2px; box-shadow:2px 2px 1px 0 gray;-webkit-box-shadow:2px 2px 1px 0 gray;-moz-box-shadow:2px 2px 1px 0 gray; font-size:11px; line-height:13px;}
.person3 {height:60px; width:84%; box-sizing:border-box; float:left; border:1px solid #000; padding:2px; box-shadow:2px 2px 1px 0 gray;-webkit-box-shadow:2px 2px 1px 0 gray;-moz-box-shadow:2px 2px 1px 0 gray; font-size:11px; line-height:13px;}
.person4 {height:60px; width:84%; box-sizing:border-box; float:left; border:1px solid #000; padding:2px; box-shadow:2px 2px 1px 0 gray;-webkit-box-shadow:2px 2px 1px 0 gray;-moz-box-shadow:2px 2px 1px 0 gray; font-size:11px; line-height:13px;}
.person5 {height:60px; width:92%; box-sizing:border-box; float:left; border:1px solid #000; padding:2px; box-shadow:2px 2px 1px 0 gray;-webkit-box-shadow:2px 2px 1px 0 gray;-moz-box-shadow:2px 2px 1px 0 gray; font-size:11px; line-height:13px;}
.personempty {height:80px; float:left; width:84%;}
.name {font-size:14px; text-align:center; padding:2px;}
.dates {display:inherit; font-size:11px; text-align:center; margin-top:2px;}
.message {display:inherit; font-size:10px; color:brown; text-align:center;}
.space {height:40px; box-sizing:border-box; float:left; width:84%;}
.hori6 {float:left; width:6%; height:80px; top:30px; box-sizing:border-box; position:relative; border-top:1px solid #000;}
.hori6edge {float:left; width:6%; height:80px; top:30px; box-sizing:border-box; position:relative; border-top:1px solid #000;}
.hori5 {float:left; width:5%; height:80px; top:30px; box-sizing:border-box; position:relative; border-top:1px solid #000;}
.verti6left {float:left; width:6%; height:80px; top:30px; box-sizing:border-box; position:relative; border-left:1px solid #000; border-top:1px solid #000;}
.verti4left {float:left; width:4%; height:80px; top:30px; box-sizing:border-box; position:relative; border-left:1px solid #000; border-top:1px solid #000;}
.verti6right {float:left; width:6%; height:80px; top:30px; box-sizing:border-box; position:relative; border-right:1px solid #000; border-top:1px solid #000;}
.verti4right {float:left; width:4%; height:80px; top:30px; box-sizing:border-box; position:relative; border-right:1px solid #000; border-top:1px solid #000;}
.color10 {background-color:Bisque;}
.color20 {background-color:Bisque;}
.color3 {background-color:Gold;}
.color30 {background-color:#afeeee;}
.color31 {background-color:#e6e6fa;}
.color32 {background-color:#ffdab9;}
.color33 {background-color:#add8e6;}
.color34 {background-color:#48d1cc;}
.color35 {background-color:Violet;}
.color40 {background-color:#fdf5e6;}
.color41 {background-color:#ffdead;}
.color42 {background-color:#b0c4de;}
.color43 {background-color:#b0e0e6;}
.color44 {background-color:#98fb98;}
.color45 {background-color:Peru;}
.color50 {background-color:Plum;}
.label {float:left; width:25%;}
.data {float:left; width:75%;}


/********************Media****************************************/

.rancestry {width: 100%; display: table; padding-left: auto; padding-right: auto;}
.cancestry {width:25%; float:left;}
.person0 {height:60px; width:80%; box-sizing:border-box; float:left; border:1px solid #000; padding:2px; box-shadow:2px 2px 1px 0 gray;-webkit-box-shadow:2px 2px 1px 0 gray;-moz-box-shadow:2px 2px 1px 0 gray; font-size:11px; line-height:13px;}
.personblank {height:60px; float:left; width:80%;}
.horiz {float:left; width:20%; height:30px; top:30px; box-sizing:border-box; position:relative; border-top:1px solid #000;}
.bottom {height:20px; width: 40%; float:left;}

/********************Media****************************************/
@media all and (max-width: 480px) {
.column1,.column5 {display:none;}
.hori6edge {display:none;}
.person2 {width:96%;}
.box4 {display:none;}
.column2 {width:30%;}
.column3 {width:36%;}
.column4 {width:34%;}

}

/*******************************************From Stirpe CSS****************************************/

/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/*******************************MEDIA BOX***********************************************/

.mediabox {
    float: left;
    width: 280px;
    margin-top: 5px;
    margin-bottom: 5px;
    vertical-align: top;
}

.mediaimage {
    float: left;
    border-radius: 50px;
    padding: 2px;
    border: thin solid black;
    margin-right: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.mediaboxtext {
    display: table-cell;
    vertical-align: middle;
    height: 110px;
    font-size: small;
    line-height: normal;
}

/**********************************BUTTONS**********************************************/

.buttons {
    /*font-size: 12px; */
    text-decoration: none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    margin: 0 15px 15px 0;
    padding: 12px 10px;
    overflow: hidden;
    display: inline-block;
    width: auto;
}

    .buttons span {
        float: none;
        overflow: hidden;
    }

a.buttons {
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    font-weight: bold;
}

    a.buttons.left {
        margin-right: 15px;
        margin-bottom: 15px;
        float: left;
    }

    a.buttons.right {
        margin-left: 15px;
        margin-bottom: 15px;
        margin-right: 0;
        float: right;
    }

div.button-center {
    width: 100%;
    text-align: center;
}

a.buttons.center {
    clear: both;
    display: inline-block;
    float: none;
    width: auto;
}

/*		Heading
---------------------------------------------------------------*/
.heading-style-default {
    padding: 2px 0;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
}

    .heading-style-default .heading-inner {
        padding: 1em .5em;
        border-top: 4px solid #eee;
        border-bottom: 4px solid #eee;
    }

.heading.heading-align-left {
    text-align: left;
}

    .heading.heading-align-left .heading-inner {
        padding-left: .2em;
    }

.heading.heading-align-right {
    text-align: right;
}

    .heading.heading-align-right .heading-inner {
        padding-right: .2em;
    }

.heading.heading-align-center {
    text-align: center;
}


/*		Divider
---------------------------------------------------------------*/
.divider {
    clear: both;
    border: none;
    text-align: right;
    line-height: 1;
}

    .divider a {
        display: inline-block;
        font-size: .8em;
        text-decoration: none;
        outline: none;
        padding-bottom: 5px;
    }

.divider-style-default {
    border-bottom-style: solid;
}

.divider-style-dotted {
    border-bottom-style: dotted;
}

.divider-style-dashed {
    border-bottom-style: dashed;
}

.divider-style-double {
    border-bottom-style: double;
}

/**********************************Form**********************************************/

.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-group {
    margin-bottom: .5rem;
}

::placeholder {
    color: gray;
    font-size: .75rem;
    font-family: Arial;
}

/**********************************Images**********************************************/

.imgInfo .imgCtct {
    margin-left: 10px;
    vertical-align: top;
}
.fa-genetree {
    font-size: 18px;
}

/************************************************MODAL HOURGLASS******************************************************/
#modal {
    display: none;
    /* initially hide the modal window - display it by JS */
    /* Make the modal window fill the screen */
    position: fixed;
    transform: translate(0, 0);
    width: auto;
    left: 0;
    right: 0;
    height: auto;
    top: 0;
    bottom: 0;
    z-index: 990;
    /* display above everything else */
    background: #transparent;
    /* no background, just fill space */
    padding: 20px;
    /* create padding for inner window - page under modal window will be still visible */
    /* Note: I use pixels to show you that this layout is NOT base on some
       * percentage counting (e.g. 2% padding + 96% width makes 100% screen width)
       */
  }
  #modal.flex-center {
    /* Make Flex items centered */
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -ms-flex-align: center;
    flex-align: center;
    -webkit-align-items: center;
    -webkit-align-content: center;
    align-items: center;
    align-content: center;
    -webkit-box-pack: center;
    moz-box-pack: center;
    box-pack: center;
    -ms-flex-pack: center;
    flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
  #modal:target {
    /* when URL contains hash of this element... */
    display: block;
    /* ... then make it visible (fallback for IE9 and older) */
    /* Display as Flexbox */
    display: -webkit-box !important;
    /* iOS6+, Safari 3.1+ */
    display: -moz-box !important;
    /* Firefox 4 - 19 */
    display: box !important;
    /* ostatn(Opera 12 - 14) */
    display: -ms-flexbox !important;
    /* IE10 */
    display: flexbox !important;
    /* */
    display: -webkit-flex !important;
    /* iOS7.1+, Safari 6+ */
    display: flex !important;
    /* 
                      (Firefox 22+, Chrome 21+,
                      IE11, Opera 15+) */
  }
  #modal .shade {
    /* shade creates semi-transparent background for modal window to block clicks on page below */
    display: block;
    /* make the shade fill whole screen as well */
    position: absolute;
    width: auto;
    left: 0;
    right: 0;
    height: auto;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    z-index: 995;
    /* display between modal container and modal window */
    /* make semi-transparent gray background */
    opacity: 0.3;
    background: #222222;
  }
  #modal .inner {
    /* inner window in the actual modal window with backround, border, etc. */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    width: 60%;
    height: auto;
    /* allow to fit content (if smaller)... */
    max-height: 100%;
    /* ... but make sure it does not overflow browser window */
    /* allow vertical scrolling if required */
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    /* allows to use z-index to display over shade but still remain non-absolute layout */
    z-index: 999;
    /* definition of modal window layout */
    background: #ffffff;
    border: 2px solid #222222;
    border-radius: 16px;
    /* some nice (modern) round corners */
    padding: 16px;
    /* make sure inner elements does not overflow round corners */
    /* Note:
       *  Scrollbar over round corners may not look good in some browsers
       *  so if you expect the content to be long, you better not use them.
       */
  }
  #modal .header {
    /* allows to position close button to the right */
    position: relative;
    background: gold;
    text-align: center;
  }
  #modal a.close {
    /* display close link in top right corner */
    position: absolute;
    top: 0;
    right: 0;
    border: 3px solid #fff;
    border-radius: 100rem;
    color: red;
    background: #faebd7;
    font-size: 1.4rem;
    font-family: inherit;
    letter-spacing: 0.2rem;
    transition: 0.2s;
    cursor: pointer;
    margin: 0.4rem;
    padding-left: 3px;
  }
  #modal a.close:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-0.2rem);
  }
  .block {
    margin-top: 5px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: dashed 0.5px;
    float: left;
    width: 100%;
  }
  @media (max-width: 480px) {
    #modal .inner {
      width: 90%;
    }
  }
  /**************************************************************************************************************/