/*Copyright (c) Dr. Heba Sailem 2021*/

#demos-div{
    min-width: 120%;
    color: black;
    animation: 1s ease-out 0s 1 slideUp;
}

.demo-cell{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 0.3s ease-in;
    border: 1px solid #D8D8D8;
    border-radius: 10px;
    width: 22%;
    background-color: white;
    margin: 10px;
    box-sizing: border-box;
}

.demo-cell:hover{
    background-color: #D8D8D8;
}
@keyframes slideUp {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }


#demos-div h2{
    font-size: 1.4em;
    margin: 20px;
    margin-left: 60px;
}

#demos-flex{
    display: flex;
    margin: 20px;
    margin-top: 0;
    width: 85%;
    text-align: center;
    justify-content: flex-start;
    align-items: stretch;
}

.demo-figure{
    cursor: pointer;
}

figcaption{
    margin-top: 10px;
    margin-left: 5px;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    
}

.demo-image{
    max-width: 100%;
    height: auto;
    border: 1px solid transparent;
    border-top: none;
    border-radius: 10px;
    box-sizing: border-box;
}

.demo-cell-description{
    width: 100%;
}

.demo-cell-description p{
    padding: 10px;
    padding-left: 5px;
    line-height: 1.2em;
    text-align: left;
}

.demo-cell button{
    background-color: #474747;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    font-family: "HelveticaNeue";
    cursor: pointer;
}

.demos-container{
    margin: 10px auto;
    width: 90%;
    border: 1px solid #D8D8D8;
    box-shadow: 0px 2px 3px 3px gainsboro;
    min-height: 460px;
}

.templates-container{
    margin: 0 auto;
    padding-top: 15px;
    width: 90%;
    max-height: 20%;
    border: 1px solid #D8D8D8;
   /* border-radius: 10px;*/
    box-shadow: 0px 2px 3px 3px gainsboro;
}

.demo-description, .template-description{
    text-align: left;
    color: black;
    font-family: "Cairo";
    font-size: large;
    font-weight: 600;
    margin: 10px;
    line-height: 1.25em;
    padding-left: 10px;
    border-left: 4px solid #474747;
}


.template-description a{
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

.template-description a:hover{
    color: black;
}

#templates-div{
    margin-top: 40px;
    margin-bottom: 6%;
}

#templates-flex{
    display: flex;
    margin: 20px;
    margin-top: 0;
    width: 70%;
    text-align: center;
}

.template-figure{
    height: 70%;
}

.template-image{
    max-width: 100%;
    height: auto;
}

.template-cell{
    cursor: pointer;
    padding: 5px;
    transition: 0.3s ease-in;
    border: 1px solid #D8D8D8;
    border-radius: 10px;
    width: 19%;
    margin-left: 15px;
    margin-right: 15px;
}
.template-cell figcaption{
    text-align: center;
    font-size: 14px;
}

.template-cell:hover{
    background-color: #D8D8D8;
}

.paging-icon{
    font-size: 40px;
    transition: 0.1s ease-out;
    z-index: 999999999;
}
.paging-icon:hover{
    color:#D8D8D8;
}

.pager{
    display: flex;
    align-items: center;
    justify-content: center;
}

.disabled{
    opacity: 0;
    cursor: default;
}


#clusterPagingItems{
    margin: 0 auto;
    text-align: center;
    list-style-type: none;
    display: inline-block;
    color: blue;
}

#clusterPagingItems span{
    margin-left: 3px;
    margin-right: 3px;
    padding: 5px;
    cursor: pointer;
    color: blue;
    border: 1px solid lightgray;
}

.selectedPage{
    color: red !important;
}

.clusterPagerArrow{
    display: inline-block;
    padding: 5px;
    cursor: pointer;
    color: blue;
    border: 1px solid lightgray;
}

#pagingWrapper{
    width: 50%; 
    display: flex; 
    justify-content: flex-end; 
    align-items: center;
    margin-bottom: 5px;
}


/*.templates-grid:empty{
    width:100%;
	height:100%;
	background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    animation: 1s infinite linear;
    animation-name: load;
	margin-top:10px;
}
@keyframes load{
  0% {
  background-position: -30vw 0;
}
100% {
  background-position: 60vw 0;
}
}*/