.ghadi {
    width      : 100%;
    height     : 100%;
    position   : relative;
    overflow   : hidden;
    font-size  : 2vmin;
    background : #fff;
    box-shadow : inset 0 0 30px #f2f2f2;
}

.ghadi, .ghadi * {
    position : relative;
    margin   : 0;
    padding  : 0;
}

.ghadi .nextBtn{
    display : none;
    position  : absolute;
    bottom    : 0%;
    right     : 0%;
    width     : 7%;
    height    : 10%;
}

.ghadi .prevBtn{
    display : none;
    position  : absolute;
    bottom    : 0%;
    left      : 0%;
    width     : 7%;
    height    : 10%;
}

/*=====================================
=            common styles            =
=====================================*/
    .board{
        position   : relative;
        top        : 0%;
        left       : 0%;
        width      : 100%;
        height     : 100%;
        text-align : center;
    }

    .vertical-horizontal-center{
        position          : relative;
        top               : 45%;
        left              : 50%;
        transform         : translate(-50%, -50%);
        -moz-transform    : translate(-50%, -50%);
        -webkit-transform : translate(-50%, -50%);
        text-align        : center;
    }

    .vertical-center{
        position          : relative;
        top               : 50%;
        transform         : translateY(-50%);
        -moz-transform    : translateY(-50%);
        -webkit-transform : translateY(-50%);
        text-align        : center;
    }

    .coverboardfull{
        position : absolute;
        top      : 0;
        left     : 0;
        width    : 100%;
        height   : 100%;
    }

    /*================================================
    =            Notification Pulse Style            =
    ================================================*/
        /**
            How to use:
            - To enable notification pulse add 'data-usernotification="notifyuser"'
              attribute to the html element inside board div
         */

        @keyframes pulse {
         0% { transform   : scale(0); opacity: 0.0; }
         25% { transform  : scale(0); opacity: 0.6; }
         50% { transform  : scale(0.1); opacity: 0.8; }
         75% { transform  : scale(0.5); opacity: 1; }
         100% { transform : scale(1); opacity: 0.0; }
        }

        @-moz-keyframes pulse {
         0% { -moz-transform   : scale(0); opacity: 0.0; }
         25% { -moz-transform  : scale(0); opacity: 0.6; }
         50% { -moz-transform  : scale(0.1); opacity: 0.8; }
         75% { -moz-transform  : scale(0.5); opacity: 1; }
         100% { -moz-transform : scale(1); opacity: 0.0; }
        }

        @-webkit-keyframes pulse {
         0% { -webkit-transform   : scale(0); opacity: 0.0; }
         25% { -webkit-transform  : scale(0); opacity: 0.6; }
         50% { -webkit-transform  : scale(0.1); opacity: 0.8; }
         75% { -webkit-transform  : scale(0.5); opacity: 1; }
         100% { -webkit-transform : scale(1); opacity: 0.0; }
        }


        /*for all element inside board*/
        .board *[data-usernotification*="notifyuser"]{
            cursor : pointer;
        }

        .board *[data-usernotification*="notifyuser"]::after{
            content          : "";
            position         : absolute;
            top              : 0;
            left             : 0;
            width            : 2em;
            height           : 2em;
            background-color : white;
            border           : 2px solid black;
            border-radius    : 50%;

            -webkit-animation : pulse 1.2s ease-out infinite;
            -moz-animation    : pulse 1.2s ease-out infinite;
            animation         : pulse 1.2s ease-out infinite;
        }

    /*=====  End of Notification Pulse Style  ======*/

/*=====  End of common styles  ======*/


/*===============================================
=            general template layout            =
===============================================*/

    div.generalTemplateblock{
        position : absolute;
        top      : 0%;
        left     : 0%;
        width    : 100%;
        height   : 100%;
        /*border   : 1px solid red; */
    }


/*=====  End of general template layout  ======*/

/*=========================================================
=            general templated specific styles            =
=========================================================*/

/*=====  End of general templated specific styles  ======*/

.contentblock{
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	background-color: #CAFAFC;
}

.description_title{
	font-size: 5vmin;
	position: absolute;
	width: 100%;
	text-align: center;
	z-index: 10;
	background-color: #8E7CC3;
	color: #fff;
	/*background-color: #A4F2FC;
	color: #F84A7D;*/
	border-bottom: 0.1em solid #D9D2E9;
	/*border-bottom: 0.1em solid #BAF7FA;*/
}

.description{
  font-size: 3.16vmin;
  border-radius: 0.5em;
  margin: 0.2em;
  width: 70%;
  left: 10%;
}

.writer{
	position: absolute;
	left: 56%;
	top: 3vmin;
	z-index: 10;
	color: #fff;
	/*color: #169384;*/
}

.left_50{
	width: 50%;
	height: auto;
	left: -5%;
	top: 52%;
	position: absolute;
	padding: 1em;
	transform: translateY(-50%);
	z-index: 5;
}

.right_50{
  width: 50%;
  height: auto;
  right: 23%;
  top: 52%;
  position: absolute;
  padding: 1em;
  transform: translateY(-50%);
  z-index: 5;
}

.right_30{
  width: 50%;
  height: auto;
  right: -7%;
  top: 52%;
  position: absolute;
  padding: 1em;
  transform: translateY(-50%);
  z-index: 5;
}

/*#span_speec_text{
	color: #55f;
}

.nextbtnpoem, .prevbtnpoem, .pausebtnpoem, .poempbtn, .replaybtnpoem{
	position: absolute;
	width: 6%;
	bottom: 2%;
	margin-bottom: 0.2em;
	display: none;
}

.nextbtnpoem{
	left: 55%;
}

.prevbtnpoem{
	right: 55%;
	-moz-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

.pausebtnpoem, .poempbtn, .replaybtnpoem{
	left: 47%;
}

.nextbtnpoem:hover{
	filter: drop-shadow(0 0.2em 0.1em #5a5a5a);
}

.prevbtnpoem:hover{
	filter: drop-shadow(0 0.2em 0.1em #5a5a5a);
}

.pausebtnpoem:hover{
	filter: drop-shadow(0 0.2em 0.1em #5a5a5a);
}

.poempbtn:hover{
	filter: drop-shadow(0 0.2em 0.1em #5a5a5a);
}

.replaybtnpoem:hover{
	filter: drop-shadow(0 0.2em 0.1em #5a5a5a);
}

.nextbtnpoem:active{
	margin-bottom: 0.1em;
	filter: drop-shadow(0 0.1em 0.05em #5a5a5a);
	outline: none;
}

.prevbtnpoem:active{
	margin-bottom: 0.1em;
	filter: drop-shadow(0 0.1em 0.05em #5a5a5a);
	outline: none;
}

.pausebtnpoem:active{
	margin-bottom: 0.1em;
	filter: drop-shadow(0 0.1em 0.05em #5a5a5a);
	outline: none;
}

.poempbtn:active{
	margin-bottom: 0.1em;
	filter: drop-shadow(0 0.1em 0.05em #5a5a5a);
	outline: none;
}

.replaybtnpoem:active{
	margin-bottom: 0.1em;
	filter: drop-shadow(0 0.1em 0.05em #5a5a5a);
	outline: none;
}*/
/*.poempbtn{
	left: 47%;
}

.replaybtnpoem{
	left: 47%;
}*/







