/*
Clarendon URW // bold // 16pt (large font)
Clarendon URW // regular // 14pt (time font)
Clarendon URW // light //13 (body font)
*/

@font-face {
    font-family: 'Copperplate';
    src: url('../fonts/Copperplate/Copperplate.eot') format('embedded-opentype');
    src: url('../fonts/Copperplate/Copperplate.woff') format('woff'), url('./fonts/Copperplate/Copperplate.ttf') format('truetype'), url('./fonts/Copperplate/Copperplate.svg#Copperplate') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'hoefler';
    src: url('../fonts/hoefler.ttc') format('truetype');
}

body {
    /*   background: url("../image/background_prev.png") no-repeat;*/
    color: #575046;
    width: 100%;
    background-size: cover;
    font-family: "clarendon-urw";
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    background: transparent;
}

.main-bg {
    height: 100vh;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    /* background-image: url('../image/background.png');*/
}

#dairy {
    position: relative;
    width: 1040px;
    height: 800px;
    margin: 0 auto;
    margin-top: -30px;
    background: url("../image/diary.png") no-repeat;
    background-size: contain;
    top: 68px;
}

#dairy h2{

 	margin-top:5px;
 }


/* section style */

section {
    display: none;
    width: 50%;
    float: left;
    position: relative;
    height: 100%;
}

section .quote {
    font-family: 'hoefler';
    font-size: 20px;
    text-align: center;
    padding: 10% 14%;
}

section h2 {
    font-weight: 700;
    font-size: 16px;
    font-family: "clarendon-urw";
}

section:nth-child(odd) .pageitem {
    padding-right: 14%;
    padding-left: 6%;
}

section:nth-child(even) .pageitem {
    padding-left: 14%;
    padding-right: 8%;
}


/* page style */

.pagecontent {
    position: absolute;
    left: 10%;
    top: 18%;
    width: 80%;
    height: 56%;
}

.pagecontent section .pageitem {
    position: absolute;
    top: 38%;
    /* height: 64%; */
    width: 100%;
}

.pagecontent a.pagelink {
    position: absolute;
    bottom: 0;
    color: #757372;
    text-decoration: none;
}

.pagecontent a.pagelink.nextpage {
    right: 30px;
}

.pagecontent a.pagelink.prevpage {
    left: 30px;
}


/* calendar style */

.datepickerblock {
    display: none;
    position: absolute;
    top: 15.5%;
    left: 10%;
    font-size: 12px;
    width: 40%;
    z-index: 100;
}

#datedaypicker {
    width: 56%;
    float: left;
    margin: 2% 0 0 2%;
}

#monthyearpicker {
    width: 30%;
    float: left;
    margin-top: 8%;
    margin-left: 4%;
}

.datepickerblock .bootstrap-datetimepicker-widget table {
    width: 94%;
}

.datepickerblock .table-condensed>tbody>tr>td {
    padding: 1px;
    margin: 0;
    ;
}

.datepickerblock .bootstrap-datetimepicker-widget table td span {
    display: inline-block;
    width: 38px;
    height: 22px;
    line-height: 14px;
    margin: 0;
    margin-top: 3px;
    cursor: pointer;
    border-radius: 4px;
    padding: 2px;
}

.datepickerblock .bootstrap-datetimepicker-widget table td span.active,
.datepickerblock .bootstrap-datetimepicker-widget table td.active,
.datepickerblock .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: transparent;
    color: #AA3524;
    text-shadow: none;
    font-weight: bold;
    border: 1px solid #AA3524 !important;
    border-radius: 0;
}

.datepickerblock .bootstrap-datetimepicker-widget table td.active,
.datepickerblock .bootstrap-datetimepicker-widget table td.active,
.datepickerblock .bootstrap-datetimepicker-widget table td.active:hover {
    border: none !important;
    position: relative;
    /* border-right: 1px solid #000 !important;
    border-left: 1px solid #000 !important; */
}

.datepickerblock .bootstrap-datetimepicker-widget table td.active::after {
    content: "";
    border: 1px solid;
    width: 80%;
    position: absolute;
    top: 2px;
    left: 3px;
    padding: 0px;
    right: 2px;
    bottom: 2px;
}

.datepickerblock th.picker-switch {
    color: #AA3524;
    text-transform: uppercase;
    background: transparent;
}


/* 2px solid #AA3524 !important */

.datepickerblock .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background: transparent;
}

.datepickerblock .bootstrap-datetimepicker-widget table thead tr:first-child th {
    width: 15%;
}

.datepickerblock .bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: #AA3524;
}

.datepickerblock #monthyearpicker .next .glyphicon-chevron-right:before {
    content: "\00BB";
}

.datepickerblock #monthyearpicker .prev .glyphicon-chevron-left:before {
    content: "\00AB";
}

.datepickerblock #datedaypicker .bootstrap-datetimepicker-widget table th.prev::after {
    content: "\003C";
}

.datepickerblock #datedaypicker .bootstrap-datetimepicker-widget table th.next::after {
    content: "\003E"
}

.datepickerblock #monthyearpicker .next .glyphicon-chevron-right,
.datepickerblock #monthyearpicker .prev .glyphicon-chevron-left {
    font-size: 22px;
    color: #AA3524;
}

.datepickerblock span.glyphicon.glyphicon-chevron-left,
.datepickerblock span.glyphicon.glyphicon-chevron-right {
    color: #AA3524;
}

#datedaypicker .table-condensed td,
#datedaypicker .table-condensed th {
    /* border: 1px solid #000; */
    border-bottom: 0;
    border-top: 0;
}

#datedaypicker .table-condensed th.dow {
    opacity: 0.7;
}

#datedaypicker .table-condensed th.prev,
#datedaypicker .table-condensed th.next,
#datedaypicker .table-condensed th.picker-switch {
    border: none;
}

#monthyearpicker .table-condensed thead tr,
#monthyearpicker .table-condensed {
    border-bottom: 3px solid #000;
}

#datedaypicker .table-condensed thead tr,
#datedaypicker .table-condensed {
    border: none;
}

#monthyearpicker .bootstrap-datetimepicker-widget table td {
    height: 20px;
    line-height: 20px;
    width: 20px;
}

#datedaypicker .bootstrap-datetimepicker-widget table td.day {
    height: 16px;
    line-height: 16px;
    width: 16px;
}

#datedaypicker .table-condensed td.disabled:hover {
    cursor: default;
}

.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover {
    cursor: default !important;
}


/* bootom modal links */

.bottom-links {
    display: none;
    position: absolute;
    bottom: 20%;
    right: 12%;
    font-size: 10px;
    z-index: 999;
}

.bottom-links a {
    color: #37231c;
    padding: 8px;
    text-decoration: none;
}


/* modal style */

#newsModal,
#appointmentModal {
    /*top:10%;
    padding: 10px;*/
}

#newsModal.in,
#appointmentModal.in {
    display: flex !important;
    padding: 10px;
}

#newsModal .modal-dialog,
#appointmentModal .modal-dialog {
    width: 80%;
    margin: auto;
}

#newsModal .modal-content,
#appointmentModal .modal-content {
    height: 500px;
    overflow: hidden;
    background: #F4F1F1;
}

.prev .glyphicon,
.next .glyphicon {
    line-height: 0;
}

.pageitem .jw-icon.jw-icon-tooltip.jw-icon-volume.jw-button-color.jw-reset.jw-off {
    border: 1px solid !important;
    padding: 6px 8px !important;
}

.datepickerblock .bootstrap-datetimepicker-widget table th {
    height: 18px;
    line-height: 18px;
    width: 18px;
}

span.time-title {
    display: block;
    font-size: 14px;
    font-weight: normal;
    font-family: 'clarendon-urw';
}

.pageitem video,
.pageitem audio {
    margin: 0 auto;
    display: block;
    -webkit-box-shadow: 0px 0px 31px -8px rgba(0, 0, 0, 0.41);
    -moz-box-shadow: 0px 0px 31px -8px rgba(0, 0, 0, 0.41);
    box-shadow: 0px 0px 31px -8px rgba(0, 0, 0, 0.41);
}

.pageitem .diaryimage {
    width: 100%;
    text-align: center;
}

.pageitem .section-img {
    width: 280px;
    -webkit-box-shadow: 0px 0px 31px -8px rgba(0, 0, 0, 0.41);
    -moz-box-shadow: 0px 0px 31px -8px rgba(0, 0, 0, 0.41);
    box-shadow: 0px 0px 31px -8px rgba(0, 0, 0, 0.41);
}


/*media player style*/

div#controls,
div#audio_player {
    width: 70%;
    margin: 2% auto;
    display: block;
    padding: 4px;
}

div.left-controls {
    width: 56%;
    display: inline-block;
    /* float: left; */
}

#controls button,
#audio_player button {
    border: none;
    cursor: pointer;
    margin: 0 2%;
}

div.right-controls button {
    float: right;
}

div.right-controls {
    width: 40%;
    display: inline-block;
    float: right;
}

input#volume-bar {
    width: 40%;
    display: inline-block;
    margin-left: 4%;
    color: #AA3524;
    background-color: #AA3524;
}

#controls input[type='range'] {
    overflow: hidden;
    background-color: #AA3524;
}

button#btnMute {
    border: none;
}

#appointmentModal button.close,
#newsModal button.close {
    position: absolute;
    width: 22px;
    height: 22px;
    top: 0px;
    right: -26px;
    z-index: 10;
    /* font-size: 35px; */
    /* color: #D4B79B; */
    opacity: 1;
    /* background: #38241D; */
    line-height: 2px;
    /* text-shadow: 1px 1px #fff; */
    /* font-weight: 400; */
}

#appointmentModal button.close,
#newsModal button.close img {
    box-shadow: 0 5px 15px #2A1B15;
}

#appointmentModal .modal-content,
#newsModal .modal-content {
    border: 2px solid #2A1B15;
    box-shadow: 0 5px 15px #2A1B15;
}

#appointmentModal,
#newsModal {
    /* overflow-x:hidden;  */
}


/* width */


/*#newsModal button.close{
    color: #000;
}*/

#wave-thumb {
    width: 260px;
    height: 180px;
    text-align: center;
    margin: 0 auto;
    background: url(../image/audio.thumbnail.png) no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 0px 31px -8px rgba(0, 0, 0, 0.41);
    -moz-box-shadow: 0px 0px 31px -8px rgba(0, 0, 0, 0.41);
    box-shadow: 0px 0px 31px -8px rgba(0, 0, 0, 0.41);
}

.mediabutton {
    background-size: cover;
    margin: 0 auto;
    width: 24px;
    height: 24px;
}

button.mediabutton {
    outline: none;
}

.speaker {
    background: url(../image/volume.png) no-repeat;
}

.plus {
    background: url(../image/plus.png) no-repeat;
}

.minus {
    background: url(../image/minus.png) no-repeat;
}

.play {
    background: url(../image/play.png) no-repeat;
}

.replay {
    background: url(../image/replay.png) no-repeat;
}

.mute {
    background: url(../image/mute.png) no-repeat;
}

.pause {
    background: url(../image/pause.png) no-repeat;
}

.loader {
    position: fixed;
    width: 100%;
    height: 105%;
    z-index: 9999;
    background-color: #202020;
    text-align: center;
}

.loader img {
    position: relative;
    /* width: 20%; */
    width: 50%;
}

.rwar {
    display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: top;
}

.tb {
    display: table;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
}

.tbl-cell {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

#datepickerblock .bootstrap-datetimepicker-widget table td.new.disabled,
#datepickerblock .bootstrap-datetimepicker-widget table td.new.disabled:hover {
    color: #777777;
}

#datepickerblock .bootstrap-datetimepicker-widget table td.disabled,
#datepickerblock .bootstrap-datetimepicker-widget table td.disabled:hover {
    color: #575046;
}

.table-condensed>thead>tr>th {
    padding: 1px 10px;
}

.modallink img {
    width: 20px;
}


/*.bottom-footer {
    background: url(../image/footer-bg.png) no-repeat;
    position: absolute;
    bottom: 0;
    width: 100%;
    background-size: contain;
    padding: 15px;
    color: #fff;
}
.top-header {
    color: #fff;
}*/


/*.top-header {
   // background: url(../image/top_banner_bg.png) no-repeat;
    position: absolute;
    top: 0;
    width: 100%;
    padding: 16px;
}*/


/*.left-header {
    display: inline-block;
    width: 10%;
    float: left;
}
.top-header .center-header {
    text-align: center;
     
    width: 80%;
    float: left;
}
.center-header h4:before{
    content: url(../image/shape_lt.png);
    
}
.center-header h4:after {
    content: url(../image/shape_rt.png);
    
}
.center-header h4 {
    display: inline-block;
}
.bottom-breadcumb {
    display: inline-block;
    padding: 5px;
}
.bottom-footer .img-logo {
    display: inline-block;
   
}
.img-logo img {
    width: 40px;
}*/

.top-header {
    height: 90px;
    display: flex;
    position: relative;
    text-align: center;
    align-items: center;
}

.left-header {
    top: 30px;
    left: 24px;
    position: absolute;
}

.left-header a {
    color: #fff;
    font-family: "Hoefler Text", Georgia, "Times New Roman", serif;
    font-size: 16px;
    text-transform: uppercase;
}

.left-header img {
    margin-right: 15px;
    width: 20px;
}

.center-header {
    width: 50%;
    margin: 0 auto;
}

.center-header span {
    color: #fff;
    font-size: 26px;
    position: relative;
    display: inline-block;
    font-family: "Hoefler Text", Georgia, "Times New Roman", serif;
}

.center-header span:before {
    top: 5px;
    content: '';
    left: -100px;
    width: 45px;
    height: 14px;
    position: absolute;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../image/shape_lt.png');
}

.center-header span:after {
    top: 5px;
    content: '';
    right: -100px;
    width: 45px;
    height: 14px;
    position: absolute;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../image/shape_rt.png');
}

.bottom-footer {
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 12px 15px;
    position: absolute;
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-image: url('../image/footer-bg.png');
}

.bottom-footer .img-logo img {
    height: 60px;
    margin-right: 10px;
}

.bottom-footer .img-logo,
.bottom-footer .bottom-breadcumb {
    display: inline-block;
    vertical-align: middle;
}

.bottom-footer .bottom-breadcumb {
    margin-right: 20px;
    position: relative;
    font-family: "Hoefler Text", Georgia, "Times New Roman", serif;
    font-size: 28px;
    color: rgb(254, 254, 254);
    opacity: 0.648586;
    padding: 14px 0px;
}

.bottom-footer .bottom-breadcumb.active:before {
    content: '>';
    left: -15px;
    position: absolute;
}

.bottom-footer .bottom-breadcumb.active {
    padding-left: 25px;
    color: rgb(254, 254, 254);
    opacity: 1;
}

.top-header,
.bottom-footer {
    display: none;
}

.blank_h2 {
    margin: 0px;
}