/** default fonts **/
@font-face{font-family:"Roboto";font-style:normal;font-weight:300;src:local("Roboto Light"),local("Roboto-Light"),url("../fonts/roboto-light.ttf") format("truetype"),url("../fonts/roboto-light.woff") format("woff")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;src:local("Roboto"),local("Roboto-Regular"),url("../fonts/roboto-regular.ttf") format("truetype"),url("../fonts/roboto-regular.woff") format("woff")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;src:local("Roboto Medium"),local("Roboto-Medium"),url("../fonts/roboto-medium.ttf") format("truetype"),url("../fonts/roboto-medium.woff") format("woff")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:700;src:local("Roboto Bold"),local("Roboto-Bold"),url("../fonts/roboto-bold.ttf") format("truetype"),url("../fonts/roboto-bold.woff") format("woff")}
/** typo **/
.back-text{font-size:10px}
.text-left {text-align: left !important;}
.text-right {text-align: right !important; }
.text-center {text-align: center;}
.text-justify {text-align: justify;}
.text-nowrap {white-space: nowrap;}
.text-lowercase {text-transform: lowercase;}
.text-uppercase {text-transform: uppercase;}
.text-capitalize {text-transform: capitalize;}
.to_trusted .item-text-wrap p {margin-bottom:14px; margin-top:14px;}
.to_trusted .item-text-wrap img {height:auto}
.to_trusted h1{font-size:36px;margin:14px 0 14px}
.to_trusted h2{font-size:30px;margin:14px 0 14px}
.to_trusted h3{font-size:24px;margin:14px 0 14px}
.to_trusted h4{font-size:18px;margin:14px 0 14px}
.to_trusted h5{font-size:14px;margin:14px 0 14px}
.to_trusted h6{font-size:12px;margin:14px 0 14px}
.to_trusted p{font-size:14px;margin:14px 0 14px}
.to_trusted img{max-width:100% !important;height:auto;background-color:#eee;margin-bottom:15px}
.to_trusted hr{border:1px solid #eee}
.to_trusted table {border-collapse:collapse;width: 100%;padding-bottom:6px;padding-top:6px;}
.to_trusted table,.to_trusted th,.to_trusted td{border: 1px solid #dddddd;padding:6px;}
.to_trusted dt{padding-top:6px;font-weight: 700;}
.to_trusted dd{padding-bottom:6px;}
.to_trusted dfn,.to_trusted cite,.to_trusted em,.to_trusted i{font-style:italic;}
.to_trusted ul{list-style: disc;margin-left: 1.5em;padding-bottom:6px;padding-top:6px;}
.to_trusted ol{list-style: decimal;margin-left: 1.5em;padding-bottom:6px;padding-top:6px;}
.to_trusted address{font-style: italic;padding-bottom:6px;padding-top:6px;}
.to_trusted code{background-color: #d1d1d1;padding: 0.125em 0.25em;}
.to_trusted pre{border: 1px solid #d1d1d1;line-height: 1.3125;padding: 0.125em 0.25em;font-family: 'Droid Sans Mono';}
.to_trusted iframe{width:100%;height:auto;}
.to_trusted .alignleft{float:left;margin: 0.375em 1.75em 1.75em 0;}
.to_trusted .alignright{float:right;margin: 0.375em 0 1.75em 1.75em;}
.to_trusted .wp-video{max-width:100% !important;padding-bottom:56%;overflow:hidden;padding-bottom:56%;position:relative;height:0}
.to_trusted .wp-video video{left:0;position:absolute;top:0;width:100%;height:auto;background:#eee}
.to_trusted .wp-caption{height:auto;max-width:100% !important}
.to_trusted .wp-audio-shortcode{visibility: initial !important;}
.to_trusted.small p{font-size:12px;}
.to_trusted.small h1{font-size:32px}
.to_trusted.small h2{font-size:28px}
.to_trusted.small h3{font-size:22px}
.to_trusted.small h4{font-size:16px}
.to_trusted.small h5{font-size:12px}
.to_trusted.small h6{font-size:10px}
.to_trusted.normal p{font-size:14px}
.to_trusted.normal h1{font-size:36px}
.to_trusted.normal h2{font-size:30px}
.to_trusted.normal h3{font-size:24px}
.to_trusted.normal h4{font-size:18px}
.to_trusted.normal h5{font-size:14px}
.to_trusted.normal h6{font-size:12px}
.to_trusted.large p{font-size:18px;}
.to_trusted.large h1{font-size:42px}
.to_trusted.large h2{font-size:36px}
.to_trusted.large h3{font-size:28px}
.to_trusted.large h4{font-size:24px}
.to_trusted.large h5{font-size:18px}
.to_trusted.large h6{font-size:16px}
table {width:100%;max-width:100%;margin:0;background-color: transparent; border-collapse: collapse;border-spacing: 0;}
table > tbody > tr:nth-of-type(2n+1){background-color: #efefef;}
table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {padding: 8px;line-height: 1.846;vertical-align: middle;border-top: 1px solid #dddddd;}
.bar .title {text-align: center !important;}
.tab-item {opacity:0.5}
/** fontsize **/
h1, .h1 { font-size:36px}
h2, .h2 { font-size:30px}
h3, .h3 { font-size:24px}
h4, .h4 { font-size:18px}
h5, .h5 { font-size:14px}
h6, .h6 { font-size:12px}
h1 small, .h1 small { font-size:24px}
h2 small, .h2 small { font-size:18px}
h3 small, .h3 small,
h4 small, .h4 small { font-size:14px}
.item h1 { font-size:18px;}
.item p{margin-bottom: 12px;}
.scroll {height: 100%;}
/** ratio **/
.ratio1x2:before{padding-top: 200%;display: block;content: " ";}
.ratio1x1:before{padding-top: 100%;display: block;content: " ";}
.ratio4x3:before{padding-top: 75%;display: block;content: " ";}
.ratio16x9:before{padding-top: 56.25%;display: block;content: " ";}
.ratio2x1:before{padding-top: 50%;display: block;content: " ";}
.list .item {border: 0.5px solid rgba(160,160,160,0.12);}
.list .item-md-label {border: 0;}
.list .noborder {border: 0 solid transparent;}
.list .item-divider {color: inherit;}
.item-thumbnail-left > img:first-child {border-radius: 0%}
.item-icon-right .icon:before {background: #fff;}
.item-options .icon:before {background: transparent;}
.item-radio input:checked + .radio-content .item-content {background:transparent ;}
.item-radio .radio-icon {color:#387EF5}
/** Template for Data Listing **/
.item-thumbnail-3 {overflow: hidden;}
.item-thumbnail-3 .item{border:0;height: 80px !important;min-height: 80px !important;}
.item-thumbnail-3 .item *{color:#fff}
.item-thumbnail-3 .item.item-light *{color:#000};
.item-thumbnail-3, .item-thumbnail-3 .item-content {min-height:80px !important;height: 80px !important;}
.item-thumbnail-3 img {border-radius: 0% !important; top:0 !important;left:0 !important; height: 80px !important;width: 80px !important;}
.item-thumbnail-3 .icon{bottom: 10px;position: absolute;right: 16px;font-size:26px}
.item-thumbnail-3 h3{font-size:16px}
.item-thumbnail-3 p{font-size:11px}
.item-input.item-stacked-label, .item-input.item-floating-label,.item-input.item-placeholder-label{padding: 6px 5px 5px 16px;}
/** fix popover size **/
ion-popover-view.fit {height:auto;}
ion-popover-view.fit ion-content {position: relative;}
ion-popover-view.fit ion-header-bar {position: relative;}
ion-popover-view.fit .has-header{top:0  !important;;}
ion-popover-view.fit .has-header:before{height:0  !important;;}
.platform-android ion-popover-view.fit {margin-top: 10px;}
.platform-ios ion-popover-view.fit {padding-top: 10px;padding-bottom: 10px;}
.button-outline.button-outline {box-shadow:none !important;-webkit-box-shadow:none !important;-moz-box-shadow:none !important;}
.loading-container .loading{background-color:transparent !important;}
.hero > .content > .avatar {height:72px;width:72px;border:0; overflow:hidden;}
.hero-md{max-height:0px !important;height:0px !important;box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);}
.hero .hero-md-content{ width:100%;height: 100% !important;}
.avatar {border:0;overflow:hidden;}
.item-md-label {width: auto !important;}
.item-md-label .input-label{color: #fff;opacity: .5;padding: 0 10px !important;}
.item-md-label input {background-color: rgba(0,0,0,.6);}
@-moz-document url-prefix() { .item-md-label input.ng-not-empty {padding: 0px 10px;}}
.item-select select{background: transparent;}
.item-button-right .button{padding:0 12px;}
.button-small {font-size: 12px;height: inherit;padding:0 12px;}
.popup-buttons .button {font-size: 12px;height: inherit;padding:0 12px;}
blockquote footer, blockquote small {display: block;font-size: 80%;line-height: 1.42857143; color: #777;}
blockquote .small::before, blockquote footer::before, blockquote small::before {content: '\2014 \00A0';}
/** fix position **/
.relative {position:relative !important;left:0;right:0}
.fullscreen .slider {position: absolute !important;top: 0 !important;left: 0 !important;bottom: 0 !important;right: 0 !important;}
.fullscreen .card, .fullscreen .scroll{height: 100%;min-height: 100%;}
iframe.fullscreen {width: 100%;height: 100%;padding:0;margin:0;min-height:100%;border: none;display: block;}
.page-iframe .scroll{height:100%}
/** ionic rating **/
ul.rating li {display: inline !important; border: 0px;background: none;}
ul.rating li i{color:#FFCC00}
.tabs.tabs-dark{background-color: #444444 !important;}
/** video, embed and object, google map  **/
.embed_container{line-height:0}
.embed_container iframe,.embed_container ng-map,.embed_container object,.embed_container embed,.embed_container video{width:100%}
.embed_container{height:0;overflow:hidden;padding-bottom:56%;position:relative}
.embed_container iframe,.embed_container ng-map,.embed_container object,.embed_container embed,.embed_container video{height:100%;left:0;position:absolute;top:0;width:100%;background: #eee}
.menu-open .ion-navicon {transform: rotate(-360deg);-webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.menu-open .ion-navicon:before {content: "\f2ca";}
/** image loader  **/
.image-loader-container .image-loader{stroke: #eeeeee;}
.item-thumbnail-left img,.item-avatar img,.hero img {background-color:#dedede;border:0}
.image-loader-container {margin: 9px;max-width: 81px;max-height: 81px;width: 100%;height: 100%;top: 0;left: 0;position: absolute; background: transparent; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center;  align-content: stretch;align-items: center;}
.item-avatar .image-loader-container {max-width:48px;max-height:48px;top: 10px;left:8px;}
.item-thumbnail-left .image-loader-container, .item-thumbnail-right .image-loader-container{max-width: 81px;max-height: 81px;top:0px;left:0px;}
.item-avatar .avatar,.item-avatar > img:first-child {max-width:48px;max-height:48px;width:48px;height:48px;}
.bar .title {left:40px !important; right:40px !important;}
*[dir="rtl"]{ text-align: right !important; direction: rtl !important;}
*[dir="rtl"] .item-input input{padding-right: 16px;direction: rtl !important;}
*[dir="rtl"] .item-input .item-label{padding-right: 16px;}
*[dir="rtl"] .item-input textarea{padding-right: 16px;}
*[dir="rtl"] .item-input, *[dir="rtl"] .item-divider{text-align: right !important; direction: rtl !important;}
*[dir="rtl"] .item-floating-label .input-label{padding-right: 16px;}
*[dir="rtl"] .placeholder-icon:first-child {padding-right: 16px;}
.slideshow_container { height:0;overflow:hidden;padding-bottom:66%;position:relative}
.slideshow_container .slideshow{width:100%;height:100%;left:0;position:absolute;top:0;width:100%;background: #eee}
.slideshow_container .slideshow img{max-width:100%;height:auto;}
.slideshow_container { min-height: 128px; position: relative !important;}
.slide-box-title,.tags-heroes-title {font-weight: 600;display: block;text-decoration:none;text-decoration-style: none;padding:3px 12px;margin: 0;border: 0;border-bottom: 1px solid rgba(0,0,0,.25);}
.tags-heroes-content .button.button-full{margin:0px;}
.slide-box-hero .swiper-pagination-bullet {background: #fff;}
.slide-box-hero .swiper-pagination-bullet-active{width:10px;height:10px;}
.slide-box-hero { height:0;overflow:hidden;padding-bottom:66%;position:relative}
.slide-box-hero .slide-box-hero-content{width:100%;height:100%;left:0;position:absolute;top:0;width:100%;background: #333}
.slide-box-hero .slide-box-hero-content img{max-width:100%;height:auto;width: 100%;background: url("../data/images/blank.jpg") no-repeat center center;background-size: cover;}
.slide-box-hero { min-height: 128px; position: relative !important;}
.slide-box-hero .slide-box-hero-container{background-size:cover !important;width:100%;height:100%;}
.slide-box-hero .caption{bottom:16px;position:absolute;display:block;color: #fff;}
.slide-box-hero .caption h2{font-size: 20px;color: #fff;opacity: 0.95;text-shadow: 1px 1px 1px rgba(0,0,0,0.9);background: rgba(0,0,0,0.2) !important;padding: 6px;}
.slide-box-hero .caption a{text-decoration: unset;font-size: 16px;color: #fff;opacity: 0.95;text-shadow: 1px 1px 1px rgba(0,0,0,0.9);}
.slide-box-avatar {height:80px}
.slide-box-avatar .avatar{padding:0;margin-left: auto;margin-right: auto; margin-top:8px;margin-bottom:8px;position: relative;display: inherit;left:0;right:0;width: 64px;height: 64px;background: url("../data/images/blank.jpg") no-repeat center center;background-size: cover;}
.slide-box-avatar .swiper-pagination,.slide-box-thumbnail .swiper-pagination{visibility: hidden;}
.slide-box-thumbnail {height:120px;}
.slide-box-thumbnail .slide-box-thumbnail-item{border-left: .5px solid rgba(0,0,0,.05);border-right: .5px solid rgba(0,0,0,.05);}
.slide-box-thumbnail .thumbnail{height: 80px;width: 80px;padding:0;margin:0;margin-left: auto;margin-right: auto;position: relative;display: inherit;left:0;right:0;background: url("../data/images/blank.jpg") no-repeat center center;background-size: cover;}
.slide-box-thumbnail .caption{padding:3px;font-size:10px;line-height:12px;}
.slide-box-thumbnail .caption a{text-decoration: unset;}
.intro-box {margin-bottom: 0px;}
.intro-box .list.card:last-child {margin-bottom: 10px;}
.item-avatar img,img.full-image,.item-image img{background: url("../data/images/blank.jpg") no-repeat center center;background-size: cover;}
.ion-slide-tabs.slider{height: 100%}
.slidingTabs {height:48px;z-index:10}
.slidingTabs .scroll{height:auto;min-width:100%}
.slidingTabs ul{height:48px}
.slidingTabs ul li{height:48px;line-height:48px;text-align:center;float:left;margin:0;padding:0 12px 20px 12px;font-size:11px;text-transform:uppercase;-webkit-transition:color .25s ease-in-out;transition:color .25s ease-in-out;position:relative;overflow:hidden}
.slidingTabs ul li.tab-active{border-bottom:3px solid}
.slidingTabs ul li .ink{display:block;position:absolute;border-radius:100%;transform:scale(0)}
.slidingTabs ul li .ink.animate{-webkit-animation:ripple 0.65s linear;animation:ripple 0.65s linear}
.slidingTabs .tab-indicator-wrapper{width:100%;height:2px;-webkit-transform:translateY(-2px);position:absolute}
.slidingTabs .tab-indicator-wrapper .tab-indicator{height:100%;width:70px;position:relative}
.slidingTabs ul li.tab-active:nth-of-type(1n+1){border-color:#11C1F3;color:#11C1F3}
.slidingTabs ul li.tab-active:nth-of-type(2n+2){border-color:#E65100;color:#E65100}
.slidingTabs ul li.tab-active:nth-of-type(3n+3){border-color:#4CAF50;color:#4CAF50}
.slidingTabs ul li.tab-active:nth-of-type(4n+4){border-color:#11C1F3;color:#11C1F3}
.slidingTabs ul li.tab-active:nth-of-type(5n+5){border-color:#E65100;color:#E65100}
.slidingTabs ul li.tab-active:nth-of-type(6n+6){border-color:#4CAF50;color:#4CAF50}
.slidingTabs ul li.tab-active:nth-of-type(7n+7){border-color:#11C1F3;color:#11C1F3}
.slidingTabs ul li.tab-active:nth-of-type(8n+8){border-color:#E65100;color:#E65100}
.slidingTabs ul li.tab-active:nth-of-type(9n+9){border-color:#4CAF50;color:#4CAF50}
.ion-slide-tabs .slider-slide:nth-of-type(1n+1) .icon{color:#11C1F3}
.ion-slide-tabs .slider-slide:nth-of-type(2n+2) .icon{color:#E65100}
.ion-slide-tabs .slider-slide:nth-of-type(3n+3) .icon{color:#4CAF50}
.ion-slide-tabs .slider-slide:nth-of-type(4n+4) .icon{color:#11C1F3}
.ion-slide-tabs .slider-slide:nth-of-type(5n+5) .icon{color:#E65100}
.ion-slide-tabs .slider-slide:nth-of-type(6n+6) .icon{color:#4CAF50}
.ion-slide-tabs .slider-slide:nth-of-type(7n+7) .icon{color:#11C1F3}
.ion-slide-tabs .slider-slide:nth-of-type(8n+8) .icon{color:#E65100}
.ion-slide-tabs .slider-slide:nth-of-type(9n+9) .icon{color:#4CAF50}
.bar-positive-900,.bar-calm-900,.bar-balanced-900,.bar-energized-900,.bar-assertive-900,.bar-royal-900{color: #fff;}
.bar-positive-900 .title,.bar-calm-900 .title,.bar-balanced-900 .title,.bar-energized-900 .title,.bar-assertive-900 .title,.bar-royal-900 .title{color: #fff;}
@-webkit-keyframes ripple{100%{opacity:0;transform:scale(2.5)}}
/** pdf reader **/
.wrapper {margin: 0 auto; width: 960px; }
.pdf-controls { width: 100%; display: block; background: #eee; padding: 1em;}
.rotate0 {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
.rotate90 {-webkit-transform: rotate(90deg); transform: rotate(90deg);}
.rotate180 {-webkit-transform: rotate(180deg); transform: rotate(180deg);}
.rotate270 {-webkit-transform: rotate(270deg); transform: rotate(270deg);}
.fixed { position: fixed; top: 0; left: calc(50% - 480px); z-index: 100; width: 100%; padding: 1em; background: rgba(238, 238, 238,.9); width: 960px;}
/** header **/

/** menu **/

/** option page **/
#page-about_us{background: url("../data/images/background/App_Background.png") no-repeat left top fixed;background-size: cover;width:100%;height:100%;background-repeat:no-repeat;}
#liederbuch_nordschleswigsche_gemeinde-about_us .navbar-title .bar-header{background: transparent;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}
#page-about_us.has-header{top:0;}
#page-about_us.has-header:before{content:" ";height:44px;display:block}
#page-dashboard{background: url("../data/images/background/bg7.jpg") no-repeat left top fixed;background-size: cover;width:100%;height:100%;background-repeat:no-repeat;}
#page-hilfe{background: url("../data/images/background/App_Background_blank.png") no-repeat left top fixed;background-size: cover;width:100%;height:100%;background-repeat:no-repeat;}
#liederbuch_nordschleswigsche_gemeinde-hilfe .navbar-title .bar-header{background: transparent;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}
#page-hilfe.has-header{top:0;}
#page-hilfe.has-header:before{content:" ";height:44px;display:block}
#page-kategorien{background: url("../data/images/background/App_Background.png") no-repeat left top fixed;background-size: cover;width:100%;height:100%;background-repeat:no-repeat;}
#liederbuch_nordschleswigsche_gemeinde-kategorien .navbar-title .bar-header{background: transparent;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}
#page-kategorien.has-header{top:0;}
#page-kategorien.has-header:before{content:" ";height:44px;display:block}
#page-lieder{background: url("../data/images/background/App_Background.png") no-repeat left top fixed;background-size: cover;width:100%;height:100%;background-repeat:no-repeat;}
#liederbuch_nordschleswigsche_gemeinde-lieder .navbar-title .bar-header{background: transparent;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}
#page-lieder.has-header{top:0;}
#page-lieder.has-header:before{content:" ";height:44px;display:block}
#page-lieder_bookmark{background: url("../data/images/background/App_Background_blank.png") no-repeat left top fixed;background-size: cover;width:100%;height:100%;background-repeat:no-repeat;}
#liederbuch_nordschleswigsche_gemeinde-lieder_bookmark .navbar-title .bar-header{background: transparent;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}
#page-lieder_bookmark.has-header{top:0;}
#page-lieder_bookmark.has-header:before{content:" ";height:44px;display:block}
#page-willkommen{background: url("../data/images/background/App_Background_blank.png") no-repeat left top fixed;background-size: cover;width:100%;height:100%;background-repeat:no-repeat;}
#liederbuch_nordschleswigsche_gemeinde-willkommen .navbar-title .bar-header{background: transparent;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}
#page-willkommen.has-header{top:0;}
#page-willkommen.has-header:before{content:" ";height:44px;display:block}
#page-willkommen.has-header{top:0;}
#page-willkommen.has-header:before{content:" ";height:0;display:block}
/** page about_us **/
.about_us-box{background-color: rgba(255, 255, 255, 0.5);}.about_us-box .item{border-color: rgba(255, 255, 255, 0.5);border-left:0;border-right:0;}
/** page dashboard **/

.dashboard-panel .row .col-33 {text-decoration-line: unset;text-align: center;padding: 22px 20px 10px 20px;border:0;}
.dashboard-panel .row .col-33 i {font-size: 28px;margin-bottom: 2px;}
.dashboard-panel a:link, .dashboard-panel a:visited{text-decoration: none;}
.dashboard-panel .row .col-33 p {font-size: 12px;font-weight:500;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}             
            
/** page hilfe **/
.hilfe-box{background-color: rgba(255, 255, 255, 0.5);}.hilfe-box .item{border-color: rgba(255, 255, 255, 0.5);border-left:0;border-right:0;}
/** page lieder_bookmark **/
.lieder_bookmark{margin-top: 50%;}
.lieder_bookmark .icon:before{font-size:72px;font-weight: 600;}

/** page willkommen **/

/** custom css **/
/** menu **/

.menu .bar.bar-header.expanded {
	/** background-size: 100% !important; **/
}

.menu-kategorien .icon{
	/** color:#387ef5; **/
}

.menu-lieder_bookmark .icon{
	/** color:#11c1f3; **/
}


/** page **/
#page-about_us,.page-about_us{
	/** font-size:14px !important **/
}

#page-dashboard,.page-dashboard{
	/** font-size:14px !important **/
}

#page-hilfe,.page-hilfe{
	/** font-size:14px !important **/
}

#page-kategorien,.page-kategorien{
	/** font-size:14px !important **/
}

#page-language,.page-language{
	/** font-size:14px !important **/
}

#page-lieder,.page-lieder{
	/** font-size:14px !important **/
}

#page-lieder_bookmark,.page-lieder_bookmark{
	/** font-size:14px !important **/
}

#page-lieder_singles,.page-lieder_singles{
	/** font-size:14px !important **/
  
}

#page-willkommen,.page-willkommen{
	/** font-size:14px !important **/
}

.strophen {
    counter-reset: section;
}

.lyrics-container p {
    position: relative;
    padding-left: 30px;
    /*line-height: 1.5;*/
    /*float: left;
    clear: left;
    margin-top: 0;*/
}

.lyrics-container p::before {
    counter-increment: section;
    content: counter(section);
    position: absolute;
left: 0;
top: 0;
font: bold 30px/1 Sans-Serif;
    color: #ddd;
}