/* Create three equal columns that floats next to each other */


.columnfarah {
    left: 0;
    width: 75%;
    #padding: 15px;
	height: auto;
	
}

.columnfarah1 {
    float: right;
    width: 25%;
    #padding: 15px;
	height: 330px;
}

/* Clear floats after the columns */
.row9: {
    content: "";
    display: table;
    clear: both;
	height: 60%;
}

#loadMore {
    padding-bottom: 30px;
    padding-top: 30px;
    text-align: center;
    width: 100%;
}

/*//////////////////////////////////////////////countdown////////////////////////////////////////////////*/
/*body{
	text-align: center;
	background: #00ECB9;
  font-family: sans-serif;
  font-weight: 100;
}*/

h1{
  color: blueblack;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}

#clockdiv{
	font-family: sans-serif;
	color: #fff;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 25px;
}

#clockdiv > div{
	padding: 10px;
	border-radius: 3px;
	background: #F3A712;
	display: inline-block;
}

#clockdiv div > span{
	padding: 15px;
	border-radius: 3px;
	background: #29335C;
	display: inline-block;
}

.smalltext{
	padding-top: 5px;
	font-size: 16px;
}

/*//////////////////////////////////////////////countdown////////////////////////////////////////////////*/
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
	margin-bottom: auto;
	margin-top: auto;
    width: 50%;
}

/*//////////////////////////////////////////////enlarge image/////////////////////////////////////////*/
.thumbnail:hover {
    position:relative;
    top:-25px;
    left:-35px;
    width:500px;
    height:auto;
    display:block;
    z-index:999;
}

/*//////////////////////////////////////////////calendar/////////////////////////////////////////*/
bodyf {
  padding-top: 5vh;
  background-color: #669BBC;
}

.calendar {
  position: relative;
  margin: auto;
  width: 20vw;
  height: 20vw;
}

.base {
  width: 100%;
  height: 45%;
  border-radius: 2vw;
  box-shadow: 0.2vw 0.2vw 1vw 0 rgba(0, 0, 0, 0.27);
  overflow: hidden;
}
.base.top {
  position: relative;
  top: 5%;
  left: 15%;
  background-color: #29335C;
}
.base.top .holes {
  position: absolute;
  top: 88%;
  left: 4%;
}
.base.bottom {
  position: absolute;
  top: 51%;
  left: 15%;
  background-color: #fff;
}
.base.bottom .holes {
  position: absolute;
  top: 4%;
  left: 4%;
}
.base.bottom::before {
  content: " ";
  display: block;
  width: 100%;
  height: 28%;
  background-color: #29335C;
}

.holes {
  width: 128.5714285714%;
  height: 200%;
}
.holes .hole {
  background-color: #669BBC;
  width: 4%;
  height: 4%;
  border-radius: 50%;
  display: inline-block;
  margin-left: 3.8vw;
  box-shadow: inset 0.2vw 0.2vw 1vw 0 rgba(0, 0, 0, 0.27);
}

.rings {
  width: 70%;
  height: 10%;
  position: absolute;
  top: 45.5%;
  left: 17.3%;
}
.rings .ring {
  width: 3.5%;
  height: 20%;
  display: inline-block;
  background-color: white;
  margin-left: 4.6vw;
  border-radius: 70%/10%;
  box-shadow: 0.3vw 0 0.5vw -0.2vw rgba(0, 0, 0, 0.27);
}

.year-side {
  background-color: #F3A712;
  width: 20%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
}
.year-side::after {
  content: "2018";
  display: block;
  color: #29335C;
  font-family: Roboto, sans-serif;
  font-size: 2vw;
  transform: rotate(-90deg);
  position: absolute;
  top: 35%;
  left: -20%;
}

.month-side {
  width: 80%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 20%;
}
.month-side::after {
  content: "OCTOBER";
  display: block;
  color: #F3A712;
  font-family: Roboto, sans-serif;
  font-size: 2vw;
  position: absolute;
  top: 35%;
  left: 20%;
}

.daysf {
  width: 90%;
  height: 75%;
  position: absolute;
  top: 15%;
  left: 5%;
  display: grid;
  grid-template: repeat(6, 1fr)/repeat(7, 1fr);
  grid-gap: 0.2vw;
}
.daysf > div {
  text-align: center;
  padding-top: 20%;
  font-family: Roboto, sans-serif;
  font-size: 1.8vw;
  color: #29335C;
}
.daysf > div.old {
  color: #999;
}
.daysf > div.weekday {
  font-weight: bold;
  color: #F3A712;
}