body {
	margin: 0;
	padding: 0;
	line-height: 1.7em;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
	color: #00000;
    background: #e5e5e5 url(images/templatmeo_body_top.jpg) repeat-x top;
}
	    background-image: radial-gradient(#b308b6, #2F144C);
    height:100vh;
    overflow: hidden;
}
.box{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background-color: #2F144C;
    color:#eee;
    padding:20px 40px;
    font-family: monospace;
    width:200px;
}
.box input[name="readmore"]{
    display: none;
}
.box h1{
    margin-bottom: 20px;
    text-align: center;
}
.box .des{
    text-align: justify;
    position: relative;
    overflow: hidden;
    max-height: 150px;
    transition: 0.5s ease-in-out;
}
.box .des::before{
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    height:50px;
    transition: 0.5s ease-in-out;
    content:'';
    background-image: linear-gradient(to top, #2F144C, transparent);
}
.box .button{
    margin-top:50px;
    text-align: center;
}
.box label{
    text-align: center;
    display: inline-block;
    border:1px solid #000;
    width:140px;
    height:50px;
    position: relative;
    cursor: pointer;
}
.box label::before{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    content:attr(data-more);
    display: flex;
    justify-content: center;
    align-items: center;
}
.box input[name="readmore"]:checked ~ .content label::before{
    content:attr(data-less);
}
.box input[name="readmore"]:checked ~ .content .des{
    max-height: 300px;
}
.box input[name="readmore"]:checked ~ .content .des::before{
    height: 0px;
}
.content{
    position: relative;
}
.content::before{
    position: absolute;
    bottom:50px;
    right:5px;
    width:50px;
    height: 70px;
    content:'';
    background-image: url(img1.png);
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 1;
    transition: 2s ease-in-out;
}
.content::after{
    position: absolute;
    bottom:0px;
    right:0px;
    transform: translate(70%,50%);
    width:100px;
    height: 150px;
    content:'';
    background-image: url(img2.png);
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 1;
    transition: 2s ease-in-out;
}
.box input[name="readmore"]:checked ~ .content::before{
    bottom:80%;
    right:100%;
    transform: rotate(-50deg);
}
.box input[name="readmore"]:checked ~ .content::after{
    transform: translate(75%,55%) rotate(30deg);
}
  	
a:link, a:visited { color: #4AA4EF; text-decoration: underline; font-weight: bold; font-size: 14px} 
a:active, a:hover { color: #F03754; text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }

p { margin: 0px; padding: 0px; }

img { margin: 0px; padding: 0px; border: none; }

.float_l {
	float: left;
}

.float_r {
	float: right;
}

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }

.more a {
	display: block;
	width: 100px;
	height: 10px;
	padding: 3px 0 0 0;
	background: url(images/templatemo_button.png) no-repeat;
	color: #777777;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}

.more a:hover {
	color: #c85d16;
}

#templatmeo_wrapper {
	width: 1300px;
	margin: 0 auto;
}

/* header */

#templatemo_header {
	clear: both;
	width: 1300px;
	height: 115px;
	padding: 40px 80px;
	background: url(images/templatemo_header.jpg) no-repeat;
}

#templatemo_header  #site_title {
	float: left;
	width: 50px;
	padding-top: 10px;
}

#templatemo_header  #site_title h1 {
	margin: 0;
	padding: 0;
}

#templatemo_header  #site_title h1 a {
	margin: 0px;
	padding: 0px;
	font-size: 30px;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
}

#templatemo_header  #site_title h1 a span {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: #5d5b5b;
	font-weight: bold;
	letter-spacing: 2px;
}

#templatemo_header #header_right {
	float: right;
}

#header_right #header_button {
	float: right;
	margin: 5;
	padding: 10;
	list-style: none;
}

#header_button li {
	margin: 10px;
	padding: 0px;
	display: inline;
}

#header_button li a {
	float: left;
	display: block;
	width: 200px;
	height: 41px;
	margin-left: 10px;
}

#header_right form {
	margin: 10px 0 0 0;
	padding: 0;
}

#searchfield {
	height: 18px;
	width: 170px;
	padding: 5px 0px 5px 10px;
	margin: 0px 0px 25px 40px;
	font-size: 12px;
	font-variant: normal;
	line-height: normal;
}

#searchbutton {
 	height: 30px;
	width: 72px;
	margin: 25px;
	padding: 15px 25px 15px 25px;
	cursor: pointer;
	font-size: 12px;
	text-align: center;
	vertical-align: bottom;
	white-space: pre;
	color: #ffffff;
	background: url(images/search_button.jpg); 
	border: none;
}

/* end of header */

/* banner */

#templatemo_banner {
	width: 1300px;
	height: 100px;
	padding: 10px 0;
}

#templatemo_banner #banner_box ul {
	margin: 0;
	padding: 20;
	list-style: none;
	
}

#templatemo_banner #banner_box li {
	margin: 0;
	padding: 0;
	display: inline;
}

#templatemo_banner #banner_box li a {
	position: relative;
	display: block;
	float: left;
	width: 100px;
	height: 100px;
	margin-left: 57px;
}

#templatemo_banner #banner_box li span {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
}

#templatemo_banner #banner_box li a span:hover {
	background: url(images/templatemo_banner_hover.png) no-repeat;
}

#templatemo_banner #banner_box li .current {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
	background: url(images/templatemo_banner_hover.png) no-repeat;
}
/* end of banner */

/* menu */

#templatemo_menu {
	width: 1300px;
	height: 25px;
	padding: 0 10px;
	background: url(images/templatemo_menu.png) no-repeat center top;
}

#templatemo_menu ul {
	margin: 0px;
	padding: 15px 0 0 15px;
	list-style: none;
	color: black
}

#templatemo_menu ul li {
	padding: 0px;
	margin: 0px;
	display: inline;
	color: aqua
}

#templatemo_menu ul li a {
	display: block;
	float: left;
	width: 137px;
	height: 35px;
	margin-left: 2px;
	padding-top: 8px;
	background: url(images/img03.png) no-repeat;
	text-decoration;
	text-align: center;
	font-weight: bold
	color: #000000;
	
}
#templatemo_menu ul li a:hover {
	color: #009900;
	background-image: url(images/img04.png
	);
	color: white
}

/* end of menu */
#zoomA {
  /* (A) OPTIONAL DIMENSIONS */
  width: 100px;
  height: auto;
 
  /* (B) ANIMATE ZOOM */
  /* ease | ease-in | ease-out | linear */
  transition: transform ease-in-out 0.2s;
}
 
/* (C) ZOOM ON HOVER */
#zoomA:hover { transform: scale(2); }
.templatemo_box {
	margin-bottom: 5px;
	background: url(images/templatemo_box_body.jpg) repeat-y right;
}

#zoom1 {
  /* (A) OPTIONAL DIMENSIONS */
  width: 550px;
  height: auto;
 
  /* (B) ANIMATE ZOOM */
  /* ease | ease-in | ease-out | linear */
  transition: transform ease-in-out 0.2s;
}
 
/* (C) ZOOM ON HOVER */
#zoom2:hover { transform: scale(3); }

.templatemo_box {
	margin-bottom: 10px;
	background: url(images/templatemo_box_body.jpg) repeat-y right;
}
	.pagination{
  width: 644px;
  border-radius: 50px;
  box-shadow: 0 0 5px 0px rgb(3, 3, 43);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
}
.pagination a{
  padding: 9px 18px;
  font-weight: 100;
  text-decoration: none;
  font-size: 15px;
  color: #1A04D8;
  border-radius: 50%;
  transition: 0.5s ease-in-out;
}
.control{
  font-size: 15px;
  font-weight: bold;
  background-color: transparent;
  color: #08C31E;
  border: none;
  cursor: pointer;
  padding: 5px 5px;
  border-radius: 5px;
  transition: 0.5s ease-in-out ;
}
.disabled{
  color: rgba(12, 16, 41, 0.5);
  cursor: default;
}
.control:not(.disabled):hover,.pageNumbers a:hover{
  background-color: rgb(9, 9, 75);
  color: white;
}
a.active{
  background-color: rgb(9, 9, 75);
  color: white;
}
.hidden{
  display: none;
}


ul.menu li a:before, ul.menu li .item:before, ul.menu li .separator:before {
  content: "\2022";
  font-family: FontAwesome;
  margin-right: 10px;
  display: inline;
  vertical-align: middle;
  font-size: 1.6em;
  font-weight: normal;
}

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}
.templatemo_box .body {
	padding: 5px 15px 5px 15px;
}

.templatemo_box h2 {
	position: relative;
	height: 25px;
	margin: 0;
	padding: 8px 15px;
	font-size: 15px;
	color: #048dc6;
	font-weight: bold;
	background: url(images/templatemo_box_tr.jpg) no-repeat top right; 
}

.templatemo_box h2 span {
	position: absolute;
	width: 10px;
	height: 35px;
	top: 0;
	left: 0;
	background: url(images/templatemo_box_tl.jpg);
}

.templatemo_box .box_bottom {
	position: relative;
	height: 12px;
	background: url(images/templatemo_box_br.jpg) top right;
}

.templatemo_box .box_bottom span {
	position: absolute;
	width: 10px;
	height: 12px;
	top: 0;
	left: 0;
	background: url(images/templatemo_box_bl.jpg);
}

.side_menu {
	list-style: none;
	padding: 0px;
	margin: 0 0 0 0;
	
}

.side_menu li {
	padding: 0;
	margin: 5px 0;
}

.side_menu li a {
	display: block;
	color: #4AA4EF;
	padding: 0px 15px;
	font-weight: normal;
	text-decoration: none;
	background: url(images/templatemo_menu_list.png) left center no-repeat;
}

.side_menu li a:hover {
	color: #c85d16;
}

/* content*/

#templatemo_content_wrapper {
	clear: both;
	padding: 10px;
}

#templatemo_left_sidebar {
	float: left;
	margin-right: 10px;
	width: 265px;
}

#templatemo_right_sidebar {
	float: right;
	width: 265px;
}

#templatemo_content {
	float: left;
	width: 730px;
}

.news_image {
	float: left;
	margin: 3px 15px 0 0;
	border: 5px solid #e5e5e5;
}

.news_box {
	clear: both;
	margin-bottom:10px;

}
	
.news_box h3{
	font-size: 14px;
	margin: 0 0 10px 0;
}
//----------  responsive breakpoints
//------------------------------------------------------------------------------
@mixin breakpoint ($value) {
  @if $value == 'phone' {
    @media only screen and (min-width: 100px) and (max-width: 100px) { @content; }
  } @else if $value == 'tablet' {
    @media only screen and (min-width: 100px) and (max-width: 100px) { @content; }
  } @else if $value == 'touch' {
    @media only screen and (min-width: 100px) and (max-width: 100px) { @content; }
  } @else if $value == 'desktop' {
    @media only screen and (min-width: 100px) { @content; }
  } @else {
    @media only screen and (max-width: $value) { @content; }
  }
}
 table{ 
            table-layout: fixed; 
            width: 400px; 
        } 
        td{ 
            padding: 5px; 
            border: 2px solid black; 
            width: 120px; 
            overflow: auto; 
        } 
          
        .column2{ 
            color: green; 
            font-weight: bold; 
        } 
// Colors
$white: #fff;
$black: #000;
$grey: #595959;
$grey-dark: #2b2b2b;
$grey-light: #eee;
$green: #86c023;
$blue: #017ac7;

// Transition
$duration: 400ms;
$easing: ease;

//----------  reset
//------------------------------------------------------------------------------
htm,
body {
  font-family: sans-serif;
}

a {
  text-decoration: none;
}



footer {
  padding: 1em;
  text-align: center;
  background-color: #FFDFB9;
}

footer a {
  color: inherit;
  text-decoration: none;
}

footer .heart {
  color: #DC143C;
}
.sidebar_box {
	margin-bottom: 10px;
}

/* footer */

#templatemo_footer_wrapper {
	background: #bfbfbf url("images/templatemo_footer.png") top repeat-x;
}

#templatemo_footer {
	width: 1300px;
	padding: 30px 10px;
	margin: 0 auto;
	text-align: center;
	color: #666666;
}

#templatemo_footer a {
	color: #FFFFFF;
	font-weight: normal;
}

#templatemo_footer a:hover {
	color: #000000;
	font-weight: normal;
}


#templatemo_footer a:hover {
	text-decoration: none;
}

#templatemo_footer .footer_menu {
	margin: 0 0 10px 0;
	padding: 0px;
	list-style: none;
}




.footer_menu li {
	margin: 0px;
	padding: 0 20px;
	display: inline;
	border-right: 1px solid #666666;
}

.footer_menu .last_menu {
	border: none;
	
.message {
  color: #ccc6e3;
    text-align: center;
    margin-top: 10px;
}	
.counter{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}


/* end of footer */.zoomA {
}