/*
	Theme Name: SrobarkaTheme
	Theme URI: https://srobarka.sk
	Note: CSS styl zjednocujuci pre vsetky clanky a stranky
	Date: 2018-10-12
*/

/* ----------------------------------------------
 * Generated by Animista
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes vibracia {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibracia {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
/* ---------------------------------------------- */
.container {
	font-weight: 500;
	background-color: white;
	width: 100%;
	min-height: 10em;
}
.container-new { font-weight: 500; background-color: white;	width: 100%; min-height: initial; }
.container-new .row { padding-left: 12.5%; padding-right: 12.5%; margin-left: 0; margin-right: 0;}
.container-new .row:first-of-type {	padding-top: 4em; }
.container-new .row:last-of-type {  padding-bottom: 4em; }
.container-new .row .col-md-8 > h2:first-child { margin-top: 0; }
.container-new ol.decimal { list-style-type: decimal; }
.container-new ul.square { list-style-type: square; }
.container-new ul.square > li + li,
.container-new ol.decimal > li + li { margin-top: .5em; }
.container-new ul.no-li-space > li + li { margin-top: 0; }
.container-new h2,
.container-new h2 small,
.container-new h3,
.container-new h3 small,
.container-new h4,
.container-new h4 small,
.container-new h5,
.container-new h6 {
	color:#7a0101;
	font-style: normal;
}
.container-new h2,
.container-new .h2 {
	font-size: 2em;
	font-weight: 700;
	margin: 2em 0 .5em;
}
.container-new h3,
.container-new .h3 {
	font-size: 1.625em;
	font-weight: 600;
	margin: 1.8em 0 .5em;
}
.container-new h4,
.container-new .h4 {
	font-size: 1.4em;
	font-weight: 600;
	margin: 1.6em 0 .5em;
}
.container-new h5,
.container-new .h5 {
	font-size: 1.3em;
	font-weight: 600;
	margin: 1.45em 0 .5em;
}
.container-new h6,
.container-new .h6 {
	font-size: 1.1em;
	font-weight: 500;
	margin: 1.25em 0 .5em;
}
.container-new ul 		{ list-style-type: square; }
.container-new ul ul 	{ list-style-type: circle; }
.container-new ol 		{ list-style-type: decimal; }
.container-new ol ol 	{ list-style-type: lower-latin; }
.container-new .id-link-jump { position: absolute; top: -1.7em; width: .1em; height: .1em; }
.container-new .relative-pos { position: relative; }

.container-new dl.row {
	margin: .7em 0;
	padding-top: .5em !important;
	padding-bottom: .5em !important;
}
.container-new dl.row > dt,
.container-new dl.row > dd {
	margin-top: .7em;
}
.container-new dl.row > dd {
	padding-right: 0;
}
.container-new dl.row > dd > ul,
.container-new dl.row > dd > ol {
	padding-left: 1.2em;
}
.container-new dl.row > dt {
	clear: left;
	padding-left: 0;
}
.container-new dl.row > dt:first-of-type,
.container-new dl.row > dd:first-of-type {
	margin-top: 0;
}
.container-new .poz-pod-ciarou 		 { position: relative; top:-.3em; line-height: 1em; }
.container-new .poz-pod-ciarou small { display: inline-block; margin-left: 1.2em; }
.container-new .poz-pod-ciarou sup	 { position: absolute; left: 0; top: .6em; }

.container-new .hr-text 	   { font-size: 3em; font-weight: 400; margin-top: 2.5em; }
.container-new .hr-text:before { height: 2px; }
.container-new .center         { text-align: center; }

.container-new .row.red-linear-gradient {
	background: rgba(54,0,0,1);
	background: -moz-linear-gradient(-45deg, rgba(54,0,0,1) 0%, rgba(122,1,1,1) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(54,0,0,1)), color-stop(100%, rgba(122,1,1,1)));
	background: -webkit-linear-gradient(-45deg, rgba(54,0,0,1) 0%, rgba(122,1,1,1) 100%);
	background: -o-linear-gradient(-45deg, rgba(54,0,0,1) 0%, rgba(122,1,1,1) 100%);
	background: -ms-linear-gradient(-45deg, rgba(54,0,0,1) 0%, rgba(122,1,1,1) 100%);
	background: linear-gradient(135deg, rgba(54,0,0,1) 0%, rgba(122,1,1,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#360000', endColorstr='#7a0101', GradientType=1 );
	color: white;
	margin-left: 0; margin-right: 0;
	padding: 3em 12.5%;
}

.container-new .row.red-linear-gradient ul {
	padding-left: 4.5em;
}
.container-new .row.red-linear-gradient ul li {
	list-style-type: none;
	padding-left: 1em;
	position: relative;
	transition-duration: 0.3s;
}
.container-new .row.red-linear-gradient ul li span:nth-of-type(2) {
	display: block;
	margin-left: 1.5em;
}
.container-new .row.red-linear-gradient a {
	color: #ffebc9;
	text-decoration: none;
	padding-left: 0;
	transition-duration: 0.5s;
}
.container-new .row.red-linear-gradient a:hover {
	color: #89c7ff;
	transition-duration: 0.5s;
}
.container-new .row.red-linear-gradient ul li:hover {
	padding-left: 0.2em;
	color: #89c7ff;
	transition-duration: 0.3s;
}
.container-new .glyphicon-paperclip,
.container-new .glyphicon {
	color: inherit;
	display: block;
	position: absolute;
	left: 0;
}

@media screen and (max-width: 991px) {
	.container-new .row:first-of-type {
		padding-top: 3em;
	}
	.container-new .row:last-of-type {
		padding-bottom: 3em;
	}
	.container-new .row {
		padding-left: 7%;
		padding-right: 7%;
	}
}
@media screen and (max-width: 767px) {
	.container-new dl.row > dd {
		border-top: none;
		margin-top: 0;
	}

	.container-new dl.row > dt {
		margin-top: .7em;
	}
	.container-new .hr-text {
		font-size: 2em;
	}
}
@media screen and (max-width: 500px) {
	.container-new .row {
		padding-left: 15px;
		padding-right: 15px;
	}
}
@media screen and (max-width: 400px) {
	.container-new .hr-text {
		font-size: 1.6em;
	}
}
.flexbox {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
/*++++++++++ FREIWILLIGER ++++++++++*/
img.freiwilliger-photo {
	width:200px; height: auto; padding-top: 1.2em;
}
.row.freiwilliger {
	padding-bottom: 2em;
	margin-top: 0;
}
.row.freiwilliger h3 {
	margin-top: 1em;
}
@media screen and (min-width: 768px) {
	img.freiwilliger-photo { float: right; width:160px;}
}
@media screen and (max-width: 767px) {
	img.freiwilliger-photo { padding-bottom: .5em;}
	.row.freiwilliger {padding-bottom: 0;}
}
/*++++++++++ PRACOVNE PONUKY ++++++++++*/
.container-new div.prac-ponuk 		{ padding-left: 0;	padding-right:7.5%; }
.container-new div.prac-ponuk h2 	{ margin-top: .5em;	margin-bottom: 1em; }
.container-new img.prac-ponuk		{ margin-top:5.5em; width:9em; float: right; margin-right: 2em;}
@media screen and (max-width: 991px) {
	.container-new div.prac-ponuk { padding-right: 0 }
	.container-new img.prac-ponuk { display: none }
}
@media screen and (max-width: 767px) {
	.container-new div.prac-ponuk dl.row > dt,
	.container-new div.prac-ponuk dl.row > dd {
		padding-right: 0;
	}
}
/*++++++++++ PREDMETY ++++++++++*/
div.vyucujuci > h2 {
	text-align: center;
}
ul.vyucujuci {
	list-style-type: none;
	padding-left: 0;
}
ul.vyucujuci li {
	padding: 0;
	margin: .3em 0;
	color: inherit;
	font-weight: 500;
	text-align: center;
	font-size: 1.3em;
}
img.predmety-piktogram {
	display: block;
	width: 80%;
	height: auto;
	margin: 0 auto 5em;
	max-width: 220px;
}
@media screen and (max-width: 991px) {
	img.predmety-piktogram { display: none; }
}
/*++++++++++ VEREJNE VYZVY ++++++++++*/
.verejne-vyzvy .col-md-12 > h2:first-child,
.verejne-vyzvy .col-md-12 > h3:first-child {
	margin-top: 0;
}
.verejne-vyzvy .col-md-12 h2 small { line-height: 1.1em; display: inline-block; margin-top: .5em;}
.verejne-vyzvy .datum-zverejnenia { margin: 1em 0 0; text-align: right; }
.verejne-vyzvy ol { list-style-type: none; padding-left: 0; margin-top: 0;}
.verejne-vyzvy ol li+li { margin-top: .4em; }
.verejne-vyzvy ol li a {
	display: block;
	position: relative;
	background: rgba(54,0,0,1);
	background: -moz-linear-gradient(-45deg, rgba(54,0,0,1) 0%, rgba(122,1,1,1) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(54,0,0,1)), color-stop(100%, rgba(122,1,1,1)));
	background: -webkit-linear-gradient(-45deg, rgba(54,0,0,1) 0%, rgba(122,1,1,1) 100%);
	background: -o-linear-gradient(-45deg, rgba(54,0,0,1) 0%, rgba(122,1,1,1) 100%);
	background: -ms-linear-gradient(-45deg, rgba(54,0,0,1) 0%, rgba(122,1,1,1) 100%);
	background: linear-gradient(135deg, rgba(54,0,0,1) 0%, rgba(122,1,1,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#360000', endColorstr='#7a0101', GradientType=1 );
}
.verejne-vyzvy #vyzvy-archiv ol li a,
.verejne-vyzvy ol li.archiv a {
	background: rgba(226,226,226,1);
	background: -moz-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(254,254,254,1) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(226,226,226,1)), color-stop(100%, rgba(254,254,254,1)));
	background: -webkit-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(254,254,254,1) 100%);
	background: -o-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(254,254,254,1) 100%);
	background: -ms-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(254,254,254,1) 100%);
	background: linear-gradient(135deg, rgba(226,226,226,1) 0%, rgba(254,254,254,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=1 );
}
.verejne-vyzvy ol li {			transition-duration: 0.3s; padding-left: 0; }
.verejne-vyzvy ol li a { 		transition-duration: 0.5s; color: #ffebc9; padding: .5em 1em .5em 2.5em; text-decoration: none; }
.verejne-vyzvy ol li a:hover {	transition-duration: 0.5s; color: #89c7ff; }
.verejne-vyzvy ol li a span:nth-of-type(1)		{ position: absolute; left: 1em; top: .75em; color: #ffebc9; }
.verejne-vyzvy ol li a span:nth-of-type(2)  	{ transition-duration: 0.5s; color: #ffebc9; padding-left: .5em; padding-right: 0;display: inline-block; }
.verejne-vyzvy ol li a:hover span:nth-of-type(2){ transition-duration: 0.5s; color: #89c7ff; padding-left: 0; padding-right: .5em;}
.verejne-vyzvy ol li a span.glyphicon-download-alt:before		{ transition-duration: 0.5s; color: #ffebc9; }
.verejne-vyzvy ol li a:hover span.glyphicon-download-alt:before { transition-duration: 0.5s; color: #89c7ff; }
.verejne-vyzvy ol li a:hover .vibracia { -webkit-animation: vibracia 0.3s linear infinite both; animation: vibracia 0.3s linear infinite both; }

.verejne-vyzvy #vyzvy-archiv ol li   {		transition-duration: 0.3s; padding-left: 0; }
.verejne-vyzvy #vyzvy-archiv ol li a { 		transition-duration: 0.5s; color: #777777; padding: .5em 1em .5em 2.5em; text-decoration: none; }
.verejne-vyzvy #vyzvy-archiv ol li a:hover {transition-duration: 0.5s; color: #0161b7; }
.verejne-vyzvy #vyzvy-archiv ol li a span:nth-of-type(1)	{ position: absolute; left: 1em; top: .75em; color: #777777; }
.verejne-vyzvy #vyzvy-archiv ol li a span:nth-of-type(2)  	{ transition-duration: 0.5s; color: #777777; padding-left: .5em; padding-right: 0;display: inline-block; }
.verejne-vyzvy #vyzvy-archiv ol li a:hover span:nth-of-type(2){ transition-duration: 0.5s; color: #0161b7; padding-left: 0; padding-right: .5em;}
.verejne-vyzvy #vyzvy-archiv ol li a span.glyphicon-download-alt:before		  { transition-duration: 0.5s; color: #777777; }
.verejne-vyzvy #vyzvy-archiv ol li a:hover span.glyphicon-download-alt:before { transition-duration: 0.5s; color: #0161b7; }

.verejne-vyzvy ol li.archiv   {			transition-duration: 0.3s; padding-left: 0; }
.verejne-vyzvy ol li.archiv a { 		transition-duration: 0.5s; color: #777777; padding: .5em 1em .5em 2.5em; text-decoration: none; }
.verejne-vyzvy ol li.archiv a:hover {transition-duration: 0.5s; color: #0161b7; }
.verejne-vyzvy ol li.archiv a span:nth-of-type(1)	{ position: absolute; left: 1em; top: .75em; color: #777777; }
.verejne-vyzvy ol li.archiv a span:nth-of-type(2)  	{ transition-duration: 0.5s; color: #777777; padding-left: .5em; padding-right: 0;display: inline-block; }
.verejne-vyzvy ol li.archiv a:hover span:nth-of-type(2){ transition-duration: 0.5s; color: #0161b7; padding-left: 0; padding-right: .5em;}
.verejne-vyzvy ol li.archiv a span.glyphicon-download-alt:before		  { transition-duration: 0.5s; color: #777777; }
.verejne-vyzvy ol li.archiv a:hover span.glyphicon-download-alt:before { transition-duration: 0.5s; color: #0161b7; }

.container-new .hr-divider 			{ line-height: 1em; position: relative; outline: 0; border: 0; color: black; text-align: center; height: .5em; font-size: 1em; margin: 0; }
.container-new .hr-divider:before	{ content: ''; background: #7a0101; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; }
.container-new section+.hr-divider	{ top: 1.4em; }
.container-new ol+.hr-divider		{ top: -.3em; }
.container-new ol+.hr-divider:before { background: silver; }

/*++++++++++ VYHLASENIE o pristupnosti ++++++++++*/
.container-new img#html5, .container-new img#css3 { height: auto; display: block; margin: 0 auto; width: 80%; }
.container-new img#css3 { width: 56.8%; margin-top: 2em; }

@media screen and (max-width: 991px) {
	.container-new .html5 > .w3c-1, .container-new .html5 > .w3c-2 { width: 30%; position: relative; top: 2em; margin-bottom: 2em;}
	.container-new .html5 > .w3c-1 { float: left; left: 20%; }
	.container-new .html5 > .w3c-2 { float: right; right: 20%; }
	.container-new img#css3 { margin-top: 0; }
}

/*++++++++++ ODKAZY na stiahnutie suboru (OZ priatelia srobarka) ++++++++++*/

.odkazy-na-stiahnutie ol li a {
	display: block;
	position: relative;
	background: rgba(54,0,0,1);
	background: -moz-linear-gradient(-45deg, rgba(54,0,0,1) 0%, rgba(122,1,1,1) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(54,0,0,1)), color-stop(100%, rgba(122,1,1,1)));
	background: -webkit-linear-gradient(-45deg, rgba(54,0,0,1) 0%, rgba(122,1,1,1) 100%);
	background: -o-linear-gradient(-45deg, rgba(54,0,0,1) 0%, rgba(122,1,1,1) 100%);
	background: -ms-linear-gradient(-45deg, rgba(54,0,0,1) 0%, rgba(122,1,1,1) 100%);
	background: linear-gradient(135deg, rgba(54,0,0,1) 0%, rgba(122,1,1,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#360000', endColorstr='#7a0101', GradientType=1 );
}

.odkazy-na-stiahnutie ol li {			transition-duration: 0.3s; padding-left: 0; }
.odkazy-na-stiahnutie ol li a { 		transition-duration: 0.5s; color: #ffebc9; padding: .5em 1em .5em 2.5em; text-decoration: none; }
.odkazy-na-stiahnutie ol li a:hover {	transition-duration: 0.5s; color: #89c7ff; }
.odkazy-na-stiahnutie ol li a span:nth-of-type(1)		{ position: absolute; left: 1em; top: .75em; color: #ffebc9; }
.odkazy-na-stiahnutie ol li a span:nth-of-type(2)  	{ transition-duration: 0.5s; color: #ffebc9; padding-left: .5em; padding-right: 0;display: inline-block; }
.odkazy-na-stiahnutie ol li a:hover span:nth-of-type(2){ transition-duration: 0.5s; color: #89c7ff; padding-left: 0; padding-right: .5em;}
.odkazy-na-stiahnutie ol li a span.glyphicon-download-alt:before		{ transition-duration: 0.5s; color: #ffebc9; }
.odkazy-na-stiahnutie ol li a:hover span.glyphicon-download-alt:before { transition-duration: 0.5s; color: #89c7ff; }
.odkazy-na-stiahnutie ol li a:hover .vibracia { -webkit-animation: vibracia 0.3s linear infinite both; animation: vibracia 0.3s linear infinite both; }


/*++++++++++ SMERNICA - format pre legislativu ++++++++++*/

#smernica-new h2,
#smernica-new h2 small,
#smernica-new h3 { color: inherit; text-align: center; }

#smernica-new h2		{ margin: 2.5em 0 2em; }
#smernica-new h2 span	{ font-weight: 400; font-size: 1.5em; margin: .5em 0; display: inline-block; }
#smernica-new h2 small	{ font-weight: 500; font-size: 70%; }
#smernica-new h3 		{ font-weight: 400; font-size: 1.35em; margin: 2em 0 1.2em; }
#smernica-new h3 span 	{ font-weight: 600; }
#smernica-new .normal	{ font-weight: 500; }
#smernica-new p 		{ position: relative; margin: 0 0 .5em; line-height: 1.3em; text-indent: 2em; text-indent: 0;}
#smernica-new p.noindent { text-indent: 0;}
#smernica-new p.alpha 	{ margin-left: 2em; padding-left: 1.2em; }
#smernica-new p span 	{ position: absolute; left: 0; }
#smernica-new p.preambula 				 { line-height: 1.5em; margin-top: 4em; margin-bottom: 4em; text-align: center; text-indent: 0; }
#smernica-new p.preambula span.preambula { position: static; letter-spacing: .3em; }
#smernica-new sup 		{ line-height: 1.3em; font-size: .7em; }
#smernica-new hr 		{ display: block; background-color: #999; height: 1px; margin-top: 2.5em; width: 33%; float: left; }
#smernica-new #pod-ciarou 		{ font-size: .8em; font-weight: 500; color: inherit; clear: left; }
#smernica-new #pod-ciarou p 	{ position: relative; }
#smernica-new #pod-ciarou p sup { position: absolute; left: 1em; top:  0; }
#smernica-new #pod-ciarou p span{ position: relative; display: inline-block; padding-left: 2.3em;}

#smernica-new ol.decimal { 
	counter-reset: oldecimal;
	list-style-type: none;
	padding-left: 0;
}
#smernica-new ol.decimal > li {
	counter-increment: oldecimal;
	position: relative;
	padding-left: 2.75em;
	margin-top: .65em;
}
#smernica-new ol.decimal > li::before {
	content: "(" counter(oldecimal, decimal) ") ";
	position: absolute;
	left: -.1em;
	display: block;
	text-align: right;
	width: 2.4em;
}

#smernica-new ol.decimal > li >ol { 
	counter-reset: olalpha;
	list-style-type: none;
	padding-left: 0;
}
#smernica-new ol.decimal > li > ol > li {
	counter-increment: olalpha;
	position: relative;
	padding-left: 2.75em;
	margin-top: .65em;
}
#smernica-new ol.decimal > li > ol > li::before {
	content: counter(olalpha, lower-latin) ") ";
	position: absolute;
	left: -.1em;
	display: block;
	text-align: right;
	width: 2.4em;
}

#smernica-new ol.decimal >li > ol > li > ol.subdecimal { 
	list-style-type: decimal;
	margin-top: .65em;
}
#smernica-new ol.decimal > li > ol > li > ol.subdecimal > li {
	margin-top: .65em;
}

/*++++++++++ Den otvorenych dveri na titulke ++++++++++*/
#DOD { position: absolute; width: 100%; background-color: rgba(0,0,0,.6); text-align: center; text-transform: normal !important; font-size: 1.5em; bottom: 0; left: 0; padding: 0; margin: 0; z-index: 1000 }
#DOD a { color: rgba(249,249,164,1); padding: 0 .3em; margin: 0; display: inline-block; font-weight: 500 }

/*++++++++++ Formulare a tlaciva ++++++++++*/
@media screen and (max-width: 400px) 						{ .formulare-tlaciva .hr-text { font-size: 1em; margin-top: 3em; } }
@media screen and (min-width: 401px) and (max-width: 450px)	{ .formulare-tlaciva .hr-text { font-size: 1.4em; margin-top: 3em; } }
@media screen and (min-width: 451px) and (max-width: 600px)	{ .formulare-tlaciva .hr-text { font-size: 1.6em; } }
@media screen and (min-width: 601px) 						{ .formulare-tlaciva .hr-text { font-size: 2.2em; font-weight: 300; } }
.formulare-tlaciva .hr-text, .formulare-tlaciva .hr-text:after { color: #777; }
.formulare-tlaciva .hr-text:before { background: #777; }

/*++++++++++ Tabla absolventov ++++++++++*/
#tablo hr { display: none; }
#tablo a img { max-width: 100%; }
#tablo a,
#tablo a img { margin: 0; padding: 0; }
#tablo a { padding: 1.7%; }
#tablo a { box-shadow: inset 0px 0px 14px -4px rgba(0,0,0,.6); border: 1px solid rgba(0, 0, 0,.2); }
#tablo > figure > div { text-align: center; text-decoration: none; color: #398F24; font-size: 1em; }
#tablo > figure { display: flex; flex-direction: row; align-items: center; font-size: 1em; font-weight: 300; margin-bottom: 3em; }
#tablo > figure a,
#tablo > figure > div { width: 50%; }
#tablo > figure > div { padding-left: 1em; }
#tablo > figure a { border-top-color: rgba(0, 0, 0,.3); border-top-width: 2px; border-left-color: rgba(0, 0, 0,.3); border-left-width: 2px; }
#tablo > figure:first-of-type { margin-top: 3em; }
#tablo > figure > div > div:first-of-type > div { margin-bottom: .4em; font-size: 3.5em; width: 2em; border: 3px solid #398F24; border-radius: 80px; height: 2em; text-align: center; position:relative; left: 50%; transform: translateX(-50%); }
#tablo > figure > div > div:first-of-type > div > div { margin: .2em auto; }
#tablo > figure > div > div > span { font-size: 1.2em; font-weight: 400; line-height: 1.1em; }
#tablo > figure > div > div > span:first-of-type { font-size: 1.8em; }
@media screen and (max-width: 1200px) {
	#tablo > figure > div > div:first-of-type > div { font-size: 3em; }
	#tablo > figure > div > div > span:first-of-type { font-size: 1.55em; }
}
@media screen and (max-width: 991px) {
	#tablo > figure > div > div:first-of-type > div { font-size:2.5em; border-width: 2px; }
	#tablo > figure > div > div > span { font-size: 1em; }
	#tablo > figure > div > div > span:first-of-type { font-size: 1.4em; }
}
@media screen and (max-width: 776px) {
	#tablo > figure > div > div:first-of-type > div { font-size:1.8em; border-width: 1px; }
	#tablo > figure > div > div > span { font-size: .8em; }
	#tablo > figure > div > div > span:first-of-type { font-size: 1.1em; }
}
@media screen and (max-width: 600px) {
	#tablo > figure > div > div:first-of-type > div { font-size:1.5em; }
	#tablo > figure > div > div > span { font-size: .8em; }
	#tablo > figure > div > div > span:first-of-type { font-size: .99em; }
}
@media screen and (max-width: 500px) {
	#tablo hr {  position: relative; top: -1em; display: inherit; width:10%; border: none; border-bottom: 1px solid #398F24; }
	#tablo > figure a,
	#tablo > figure > div { width: inherit; }
	#tablo a { padding: 2%; }
	#tablo > figure { display: grid; grid-template-columns: 100%; grid-gap: 10px 0; }
	#tablo > figure > div { font-weight: 600; padding-left: initial; }
	#tablo > figure > div > div:first-of-type {	margin: unset; }
	#tablo > figure > div > div:first-of-type > div { border: unset; font-size: 1.5em; margin: unset; height: initial; width: initial; }
	#tablo > figure > div > div:first-of-type > div > div { margin: unset; }
	#tablo > figure > div > div > span { font-size: 1.1em; }
	#tablo > figure > div > div > span:first-of-type { font-size: 1.3em; font-weight: 600; }
}
@media screen and (max-width: 375px) {
	#tablo > figure > div > div:first-of-type > div { font-size: 1.1em; }
	#tablo > figure > div > div > span { font-size: .9em; }
	#tablo > figure > div > div > span:first-of-type { font-size: 1.1em; }
}
@media screen and (max-width: 324px) {
	#tablo > figure > div > div:first-of-type > div { font-size: 1em; }
	#tablo > figure > div > div > span { font-size: .9em; }
	#tablo > figure > div > div > span:first-of-type { font-size: 1em; }
}