* 
{
    margin: 0;
    padding: 0;
    text-decoration: none;
}
html {scroll-behavior: smooth;} 

body 
{
    overflow-x: hidden;
    font-family: "Visby Round CF";
}

.main-content 
{
    padding: 50px;
    padding-bottom: 0;
}

.home-main
{
    width: 100vw;
    height: 100vh;
}
.main-wrapper
{
    background-image: url("bck_001.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

.rental-login
{
   background-color: #f5f5f5; 
   width: 35%;
   margin-top: 150px;
   height: 90px;
   border-radius: 15px;
   transition: all 500ms linear;
   overflow-y: hidden;
   text-align: center;
   position: relative;
}

#rental-overview
{
    height: 80px;
    width: 30%;
    overflow-x: hidden;
}

#rental-review
{
    height: 122px;
    width: 30%; 
    transition: all 250ms linear;
    overflow-x: hidden;
}

.main-wrapper h1
{
    font-weight: bold;
    color: #68acff;
    font-size: 50px;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.main-content h2 {
    text-transform: uppercase;
    margin-top: 10px;
}

.main-wrapper p 
{
    margin-top: 20vh;
    font-size: 14px;
    color: #707070;
    width: 30%;
    line-height: 20px;
    letter-spacing: 1px;
    text-align: justify;
}

.main-content a 
{    
    margin-top: 10vh; 
}

.btn-border:hover
{
    border: 2px solid #db2653;
    background-color: #db2653; 
    color: #ffffff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
}
.btn-border 
{
    display: inline-block;
    color: #B32045;
    width: 90px;
    text-align: center;
    background-color: transparent;
    border: 2px solid #B32045;
    font-family: "Visby Round CF";
    font-weight: bolder;
    padding: 10px 20px;
    border-radius: 20px;
    transition: box-shadow .2s, background-color .3s;
    transition-timing-function: ease-in-out;
    margin-top: 15px !important;
}


.btn-solid 
{
    display: inline-block;
    color: #ffffff;
    width: 90px;
    text-align: center;
    background-color: #B32045;
    font-family: "Visby Round CF";
    font-weight: bolder;
    padding: 10px 20px;
    border-radius: 20px;
    transition: box-shadow .2s, background-color .3s;
    transition-timing-function: ease-in-out;
}

.btn-solid:hover 
{
    background-color: #db2653; 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
}

/* Rentals */

.btn-header 
{
    display: inline-block;
    color: #ffffff;
    width: 90px;
    text-align: center;
    background-color: #D54F43;
    font-family: "Visby Round CF";
    font-weight: bolder;
    padding: 10px 20px;
    border-radius: 20px;
}


#btn-id
{
    border-radius: 15px 0px 0px 0px;
    float: left;
    transition: none !important;
    margin-top: 0vh;
    width: calc(50% - 40px);
}

#btn-name
{
    color: black;
    background-color: #f5f5f5;
    border-radius: 0px 15px 0px 0px;
    margin-top: 0vh;
    width: calc(50% - 40px);
}

#btn-header
{
    border-radius: 15px 15px 0px 0px;
    width: calc(100% - 40px);
}

#btn-footer1
{
    border: none;
    padding: 9px 20px;
    width: 50%;
    border-radius: 0px 0px 0px 15px;
    border: 0px;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 15px;
    cursor: pointer;
}

#btn-footer2
{
    border: none;
    padding: 9px 20px;
    width: 50%;
    border-radius: 0px 0px 15px 0px;
    border: 0px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #7ac142;
    font-size: 15px;
    cursor: pointer;
}

.btn-table
{
    border: none;
    background: none;
    color: #ffffff;
    text-align: center;
    background-color: #D54F43;
    font-family: "Visby Round CF";
    font-weight: bolder;
    padding: 5px 10px;
    border-radius: 8px;
    transition: box-shadow .2s, background-color .3s;
    transition-timing-function: ease-in-out;

}

#rental-entry
{
    border: none;
    width: calc(100% - 20px);
    height: 36px;
    margin-top: 0px;
    border-radius: 0px 0px 15px 15px;
    border: 0px;
    background-color: #f0f0f0;
    padding-left: 20px;
    font-weight: bolder;
}

#rental-guard
{
    border: none;
    width: calc(50% - 21px);
    height: 36px;
    margin-top: 9px;
    border-radius: 15px 0px 0px 0px;
    border: 0px;
    border-right: 1px solid #c0c0c0;
    background-color: #f0f0f0;
    padding-left: 20px;
    font-weight: bolder;
}

#rental-email
{
    border: none;
    width: calc(50% - 21px);
    height: 36px;
    margin-top: 9px;
    border-radius: 0px 15px 0px 0px;
    border: 0px;
    border-left: 1px solid #c0c0c0;
    background-color: #f0f0f0;
    padding-left: 20px;
    font-weight: bolder;
}


.table_parent
{
    margin-top: 10px;
    width: 100%;
}

.rental_table
{
    width: 100%;
    
}

.rental_table td
{
    padding-top:6px;
}

#rental-overview td h1
{
    font-weight: bolder;
    font-size: 20px;
}

#rental-overview td
{
    padding-top: 12px !important;
}

#rental-overview .check
{
    position: absolute;
    margin-left: 10px !important;
}

#rental-review td h1
{
    font-weight: bolder;
    font-size: 20px;
}

#rental-review td
{
    padding-top: 12px !important;
}

#rental-review .check
{
    position: absolute;
    margin-left: 10px !important;
}

#table_overview
{
    table-layout: fixed;
    width: 100%;
}

.overview_book
{
    float: left;
    margin-left: 61px; 
    font-size: 20px !important;
    letter-spacing: 0px !important;
    text-transform: none !important;
    white-space: nowrap;
}

.overview_author
{
    float: right;
    margin-right: 10px;
    font-size: 18px !important;
    letter-spacing: 0px !important;
    text-transform: none !important;

}

.overview-entry
{
    position: absolute;
    bottom: 0;
    left: 0;
}

.overview-guard
{
    position: absolute;
    bottom: 32px;
    left: 0;
}

.overview-email
{
    position: absolute;
    bottom: 32px;
    right: 0;
}

.checkmark__circle {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 41px;
  height: 41px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 33;
  stroke-dashoffset: 33;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

/* Empty Start */

.checkmark__circle_empty {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #fff;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark_empty {
  width: 41px;
  height: 41px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #fff;
  animation: empty .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

/* Outstanding Start */

.checkmark__circle_out {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #ff4d4d;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark_out {
  width: 41px;
  height: 41px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #fff;
  animation: out .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}

@keyframes empty {
  100% {
    box-shadow: inset 0px 0px 0px 30px #fff;
  }
}

@keyframes out {
  100% {
    box-shadow: inset 0px 0px 0px 30px #ff4d4d;
  }
}

.media-links 
{
    padding-bottom: 55px; 
    font-size: 25px;  
}
.media-link
{
    color: black;
    margin-right: 20px;
    opacity: 35%;
    transition: opacity .2s;
    transition-timing-function: ease-in-out;
}

.media-link:hover 
{
    opacity: 1.0;   
}

/* sections */

.section-title 
{
    color: #68acff;
    font-size: 35px;
    position: relative;
}

.section-title::after 
{
    content: "";
    position: absolute;
    width: 60px;
    height: -12px;
    left: 0;
    margin-top: 45px;   
    border-radius: 10px;
    border: 4px solid #68acff;
    background-color: #68acff;
}

/* Posts Section */

.news-section
{
    height: auto;
    min-height: 20vh;
    padding: 50px;
    padding-top: 25px;
    padding-bottom: 75px;
    background-color: #f7f7f7;  
    position: relative;
    
}

/* Outstanding Books Page */

.temp-header{
  position: relative;
  height: 45px;
  background-color: #F66969;
  border-radius: 25px 25px 25px 0;
  align-items: center;
  line-height: 45px;
  display: inline-block;
}

.temp-header::before {
  content: "";
  position: absolute;
  
  background-color: transparent;
  bottom: -50px;
  height: 50px;
  width: 25px;
  border-top-left-radius: 25px;
  box-shadow: 0 -25px 0 0 #F66969;
}

#temp-text{
    margin-left: 40px;
    letter-spacing: 2px;
    font-size: 35px;
    margin-right: 20px;
}

#temp-textc{
    margin-left: 20px;
    letter-spacing: 2px;
    font-size: 35px;
    margin-right: 20px;
    text-transform: none;
}

.out-content{
    background-color: #f0f0f0;
    border-radius: 0px 10px 10px 10px;
    display: inline-block;
    max-width: 100%;
    padding-left: 20px;
}

.out-span{
    margin-left: 20px;
    margin-bottom: 10px;
    display: inline-block;
    text-transform: none;
}

.out-span h2{
    text-transform: none;
}

/* Outstanding Page End */

.posts
{
    position: relative;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 50px;
    margin-top: 30px;
}
.post-r 
{
    width: 40vw;
    display: inline-grid;
    grid-column: 1;
}

.post-r-title {font-size: 30px;}
.post-r-body
{
    font-size: 13px;
    text-align: justify;
    line-height: 23px;
    color: #707070;
    font-weight: 300;
    letter-spacing: 1px;
}
.post-img
{
    border: 1px solid rgba(0, 0, 0, 0.158);
    height: 30vh;
    width: 50%;
    object-fit: cover;
    background-color: rgba(0, 0, 0, 0.158);
    margin-top: 10px;
    margin-bottom: 30px;
}
.post-r-date, .post-r-link {display: inline-block;margin-top: 20px;}
.post-r-link::after ,.viewAll-link::after
{
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;
    border-width: 0 0 3px;
    border-style: solid;
} 
.post-r-link, .viewAll-link
{
    float: right;
    color: #B32045;
    font-weight: 700;
    padding-bottom: 5px;
    position: relative;
    transition: color 0.2s;
    cursor: pointer;
}

.viewAll-link
{
    max-height: 18px;
    cursor: pointer;
}

.post-r-link:hover, .viewAll-link:hover, .post-o-link:hover
{
    color: #db2653;
}

.post-r-date, .post-o-date
{
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 600;
    color: #9A9A9A;
}

.end-col
{
    align-self: end;
    width: 100%;
}
.post-o
{
    display: inline-grid;
    grid-column: 2;
    /* justify-content: space-evenly; */
    /* text-align: justify; */
    row-gap: 15px;
}
.post-o-date, .post-o-link {display: inline-block;}

.post-o-date {float: right;}
.post-o-link 
{
    color: #B32045;
    font-weight: 700;
    padding-bottom: 5px;
    position: relative;
    z-index: 1;
    transition: color 0.2s;
    cursor: pointer;   
}
.post-card
{
    background-color: white;
    display: inline-grid;
    padding: 3% 3%;
    height: 18vh;
}
.post-o-title {font-size: 20px;padding-top: 10px;padding-bottom: 10px;}

.post-o-body
{
    font-size: 15px;
    color: #707070;
    font-weight: 300;
    letter-spacing: 1px;
    padding-bottom: 5px;
}

/* calendar section */
.calendar-section
{
    padding: 50px;
    height: 85vh;
    position: relative;
    display: grid;
    justify-content: center;
}

.event-card-wrapper
{
    margin: auto;
    margin-top: 12vh;
    display: grid;
    height: 60vh;
    width: 80vw;
    grid-template-columns: 1fr 2fr;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
}

.card-dow
{
    padding: 50px;
    grid: 1;
    display: inline-grid;
    width: 350px;
    position: relative;
    column-gap: 20px;
    column-width: 10%;
}

.card-date
{
    font-size: 100px;
}

.card-day
{
    margin-top: 50px;
    font-size: 30px;
    color: #D2D2D2;
    font-weight: normal;
}
.card-day, .card-date
{
    grid-row: 1;
}
.card-day, .card-yr
{
    text-align: right;
}
.card-mnth, .card-yr
{
    align-self: end;
    font-size: 25px;
    color: #db2653;
}

.card-events
{
    display: inline-grid;
    width: 100%;
    position: relative;
    justify-content: center;
    /* background: rgb(110,194,208);
    background: -moz-linear-gradient(55deg, rgba(110,194,208,1) 0%, rgba(97,166,208,1) 100%);
    background: -webkit-linear-gradient(55deg, rgba(110,194,208,1) 0%, rgba(97,166,208,1) 100%);
    background: linear-gradient(55deg, rgba(110,194,208,1) 0%, rgba(97,166,208,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6ec2d0",endColorstr="#61a6d0",GradientType=1); */
    background: rgb(158,0,39);
    background: -moz-linear-gradient(315deg, rgba(158,0,39,1) 0%, rgba(194,0,47,1) 100%);
    background: -webkit-linear-gradient(315deg, rgba(158,0,39,1) 0%, rgba(194,0,47,1) 100%);
    background: linear-gradient(315deg, rgba(158,0,39,1) 0%, rgba(194,0,47,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9e0027",endColorstr="#c2002f",GradientType=1);
}

.card-events table{ 
    align-self: center;
    justify-self: center;
    width: 600px;
    height: 100%;
    border-collapse: collapse;
    border-spacing: 20px 20px;
    text-align: center; 
    
}
.card-events table tr th 
{
    color: white;
    font-weight: bold;
    font-size: 23px;
}
.card-events table tr {
    border-bottom: 1px solid #ffffff6b;
}

.card-events table tr td
{
    color: white;
}

/* Login */
.error-msg
{
    color: red;
    margin-top: 20px;
    font-weight: bold;
}

.login-pg
{
    background-image: url("l_bck_001.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

.lg-card-container
{
    animation-name: zoomIn;
    animation-fill-mode: backwards;
    animation-duration: 1s;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 80vw;
    height: 90vh;
    grid-auto-flow: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-box-shadow: 0px 0px 32px -4px rgba(0,0,0,0.26);
        -moz-box-shadow: 0px 0px 32px -4px rgba(0,0,0,0.26);
            box-shadow: 0px 0px 32px -4px rgba(0,0,0,0.26);
}

.lg-card-left
{
    border-radius: 5px 0 0 5px;
    padding: 80px;
    text-align: center;
    background: rgb(110,194,208);
    background: -moz-linear-gradient(180deg, rgba(110,194,208,1) 0%, rgba(97,166,208,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(110,194,208,1) 0%, rgba(97,166,208,1) 100%);
    background: linear-gradient(180deg, rgba(110,194,208,1) 0%, rgba(97,166,208,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6ec2d0",endColorstr="#61a6d0",GradientType=1);
}

.lg-card-left h1
{
    color: white;
    font-size: 45px;
}

.lg-card-left input::placeholder 
{
    font-family: "Visby Round CF";
    padding-left: 10px;
}

.lg-card-left input
{
    padding: 10px;
    margin-bottom: 50px;
    width: 80%;
    border: none;
    transition: 0.2s ease-in-out;
    border-radius: 20px;
}

.lg-card-left input:nth-child(2) 
{
    margin-top: 80px;
}


.lg-card-left a
{
    color: #F6F6F6;
    font-size: 13px;
    transition: 0.2s ease-in-out;
}
.lg-card-left a:hover
{
    opacity: 0.4;
    text-decoration: underline;
}
.lg-card-left input:focus {
    outline: none;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(213, 79, 67, 0.295);
        -moz-box-shadow: 0px 0px 20px 0px rgba(213, 79, 67, 0.295);
            box-shadow: 0px 0px 20px 0px rgba(213, 79, 67, 0.295);
}
.lg-card-left button
{
    border: 0;
    background-color: #B32045;
    font-family: "Visby Round CF";
    font-weight: bold;
    color: white;
    padding: 10px;
    border-radius: 20px;
    width: 55%;
    margin-top: 20px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

.lg-card-left button:hover
{
    background-color: #db2653;
}

.lg-card-right
{
    background-image: url("welcome.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 0 5px 5px 0;
}

/* Downloads section */

.downloads-section
{
    height: 70vh;
    padding: 50px;

}

.dwnld-grid
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 2fr 1fr;
    justify-items: center;
    align-items: top;
    height: 70%;
    position: relative;
    margin-top: 12vh;
}

.dwnld-grid > *
{
    text-align: center;
}

.d-icon
{
    font-size: 40px;
    color: #B32045;
}

.dwnld-grid p
{
    width: 200px;   
}
.download-opt
{
    height: auto;
    display: grid;
    grid-template-rows: 1fr 1fr 0.5fr;
    justify-items: center;
}
.dwnld-grid .download-opt a 
{
    color: #68acff;
    border: solid 2px #68acff;
    font-weight: bold;
    font-family: "Visby Round CF";
    box-sizing: border-box;
    display: inline-block;
    width: 50%;
    align-self: center;
    padding: 10px;
    border-radius: 15px;
    transition: 0.2s ease-in-out;
}

.download-opt a:hover
{
    color: white;
    background-color: #68acff;
}