@import url('../more/fonts/css2.css');
h1 {
    font: bold 25px 'Cairo';
}
h2 {
    font: bold 16px 'Cairo';
    text-align: center;
}
mark {
    font: bold 16px 'Cairo';
    padding: 4px 10px;
    border-radius: 10px;
    background-color: #CCC;
    
}
.aa {
display: flex;
justify-content: center;
}
.inl {
display: flex;
}
.osm {
display: flex;
margin: 0px 5px 0px 0px;
}
.square {
  background-color: #faec6652;
  border: 1px #ccc solid;
  height: 20px;
  width: 20px;
  margin: 0 10px 0 0;
  display: inline-block;
}
.square2 {
  background-color: #f5ca7b61;
  border: 1px #ccc solid;
  height: 20px;
  width: 20px;
  margin: 0 10px 0 0;
  display: inline-block;
}
.square3 {
  background-color: #3498db40;
  border: 1px #ccc solid;
  height: 20px;
  width: 20px;
  margin: 0 10px 0 0;
  display: inline-block;
}
.square4 {
  background-color: #88f3724d;
  border: 1px #ccc solid;
  height: 20px;
  width: 20px;
  margin: 0 10px 0 0;
  display: inline-block;
}
.chapters {
    font-size: 14px;
    text-shadow: 1px 0 BLACK;
    float:right;
    margin: 5px 5px 0px 0px;
}
.newyear {
    width: 94%;
    padding: 10px;
    background-color: coral;
    margin: 0 0 10px 0px;
    color: #FFF;
    border: 2px #555 solid;
}
.sun {
    background-color: #faec6652;
}
.tree {
    background-color: #f5ca7b61;
}
.winter {
    background-color: #3498db40;
}
.spring {
    background-color: #88f3724d;
}
#countdown {
    box-shadow: inset 2px 2px 0px #CCC;
}
.main {
	width: 99%;
	font-family: 'Cairo';
	font-size: 16px;
	line-height: 1.75em;
	color: #fff;
	background-color: #008800;
	border-color: #32383e;
	padding: 5px;
}
.main2 {
	width: 98%;
	font-family: 'Cairo';
	font-size: 16px;
	line-height: 1.75em;
	color: #000;
	border-color: #32383e;
	padding: 5px;
	margin: 0 0 10px 0px;
	box-shadow: 3px 3px 0px 0px #ccc;
	border: 2px #CCC solid;
}
.time {
	background: #CCC;
	width: 99%;
	font-family: 'Cairo';
	font-size: 16px;
	line-height: 1.75em;
}
.main1 {
	width: 49%;
	display: inline-block;
	font-family: 'Cairo';
	font-size: 16px;
	line-height: 1.75em;
}
.hadth {
	width: 100%;
	font: bold 18px 'Cairo';
	color:#444;
	line-height: 1.75em;
	text-align: center;
	padding: 0px 0px 20px 0px;
}
.hadth i {
    color:#da3b01;
    font-size:14px;
}
.hjri, .milady {
	width: 49%;
	display: inline-block;
	font-family: 'Cairo';
	font: bold 16px 'Cairo';
	line-height: 1.75em;
	text-align: center;
}
.timer {
	background-color: #efeeee;
	width: 100%;
	font-family: 'Cairo';
	font-size: 12px;
	line-height: 1.75em;
	text-align: center;
}
.duration1, .duration2, .duration3, .duration4 {
	background-color: #FFF;
	width: 100%;
    font: bold 14px 'Cairo';
	line-height: 1.75em;
	text-align: center;
}
.end {
    font: bold 14px 'Cairo';
    color:#F00;
}
/*.timer1 {
	display: inline-block;
	text-align: center;
	font-family: 'Cairo';
	font-size: 16px;
	line-height: 1.75em;
}*/
.timer0, .timer1, .timer2, .timer3, .timer4 {
font: bold 16px 'Cairo';
}
.timer0 {
    color:#0000ff;
}
.timer1 {
    color:#DE3163;
}
.timer2 {
    color:#FF7F50;
}
.timer3 {
    color:#008800;
}
.timer4 {
    color:#0000ff;
}
@-webkit-keyframes blink { 
   50% { border-color: #ff0000; } 
}
@keyframes blink { 
   50% { border-color: #ff0000; } 
}
div.next {
    border: 4px solid transparent;
}

.next {
    animation: blink .5s step-end infinite alternate;
    -webkit-animation: blink .5s step-end infinite alternate;
}

@media screen and (max-width: 700px) {
h1 {
    font: bold 20px 'Cairo';
}
mark {
    font: bold 12px 'Cairo';
    padding: 4px 10px;
    border-radius: 10px;
    background-color: #CCC;
}
.hadth {
	width: 100%;
	font: bold 20px 'Cairo';
	color:#444;
	line-height: 1.75em;
	text-align: center;
	padding: 0px 0px 20px 0px;
}
.timer1, .timer2, .timer3, .timer4 {
    font: bold 12px 'Cairo';
}
}
#content1, #content2, #content3, #content4 {
       font: bold 12px 'Cairo';
       color:#008800;
}
#content11, #content22, #content33, #content44 {
        font: bold 12px 'Cairo';
        color:#FF0000;
}