@import url('//fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&subset=latin-ext');
@font-face {
    font-family: 'FontAwesome';
    src: url('//www.delfi.lt/projektai/lietuvai-100/fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('//www.delfi.lt/projektai/lietuvai-100/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('//www.delfi.lt/projektai/lietuvai-100/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('//www.delfi.lt/projektai/lietuvai-100/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('//www.delfi.lt/projektai/lietuvai-100/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* css reset */
body, html {padding: 0; margin: 0; font-family: 'Roboto', Arial,Helvetica,sans-serif; font-size: 12px; font-weight: normal;}
* { box-sizing: border-box; margin: 0; padding: 0;}
ul {list-style: none; padding: 0; margin: 0;}

/* default anchors */
a, a:visited, a:link {color: #16387C; text-decoration: none;}
a:hover {color: #0066FF;}

/* common styles */
img {border: 0px;}
.cb {clear: both;}
.oh {overflow: hidden;}
.fl {float: left;}
.fr {float: right;}
.ct {text-align: center;}
.lh0 {line-height: 0;}
.hcenter {margin-left: auto; margin-right: auto;}

/* container styles */
.container {position: relative; margin: 0px auto; font-family: 'Roboto', Arial, sans-serif; clear: both;}

/* container columns */
.container-col-outer {margin-left: auto; margin-right: auto; overflow: hidden; clear: both;}
.fa {display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.fa-lg {font-size: 1.33333333em; line-height: 0.75em; vertical-align: -15%;}
.fa-2x {font-size: 2em;}
.fa-3x {font-size: 3em;}
.fa-4x {font-size: 4em;}
.fa-5x {font-size: 5em;}
.fa-comment {color: #f0c04f; display: inline;}
.fa-comment:before {content: "\f075";}
.fa-info-circle:before {
    content: "\f05a";
}

/*** TOPBAR ***/
#topbar-dummy {height: 83px;}
#topbar {display:none; height: 83px; text-align: center; position: fixed; width: 100%; z-index: 100; top: 0; left: 0; width: 100%; z-index: 105; -webkit-transition: all 0.5s; transition: all 0.5s;}
#topbar .topbar-content {height: 83px; background: #eee2d0; position: relative; z-index: 10; transform: translateZ(0);}
#topbar .left, #topbar .right {display: block; position: absolute; top: 0; z-index: 1;}
#topbar .left {left: 0;}
#topbar .right {right: 0;}
#topbar .back, #topbar .next {display: block; float: left; height: 83px; outline: 0;}
#topbar .back {width: 83px; background: url("//g.delfi.lt/multimedija/assets/double-arrow-up.svg") no-repeat center center; text-indent: -9999px; background-color: #eee2d0;}
#topbar .next {width: 83px; background: url("//g.delfi.lt/multimedija/assets/double-arrow-down.svg") no-repeat center center; text-indent: -9999px; border-left: 1px solid #000; background-color: #eee2d0;}
.sidebar-toggler {display: block; float: left; min-width: 83px; height: 83px; position: relative; /* border-right: 1px solid #000; border-left: 1px solid #000; */ outline: 0;}
.sidebar-toggler .label {display: block; text-transform: uppercase; font-size: 10px; line-height: 1; white-space: nowrap; /*  margin-left: 58px;*/ padding-top: 29px; padding-left: 20px; padding-right: 20px; color: #807c75; margin-left: 58px; padding-top: 29px; padding-left: 0;}
.sidebar-toggler .lines, .sidebar-toggler .lines:before, .sidebar-toggler .lines:after {display: block; content: ""; width: 30px; height: 2px; position: absolute; top: 33px; left: 26px; background: #000;}
.sidebar-toggler .lines:before {left: 0; top: 6px;}
.sidebar-toggler .lines:after {left: 0; top: 12px;}
#topbar .title {margin: 0 auto; position: relative; z-index: 0;}
#topbar .title .title-inner {position: relative; display: inline-block; cursor: pointer; font-size: 30px; line-height: 83px; font: normal 30px/2 "Roboto", serif; color: #000;}
#topbar .title.title-logo .title-inner img {max-width: 100%; margin: 20px 0;}
.notouch #topbar .back:hover, .notouch #topbar .next:hover, .notouch #topbar .search .toggler:hover, .notouch .sidebar-toggler:hover, .notouch #topbar .topbar-lp .back:hover, .notouch #topbar .topbar-lp .next:hover {background-color: #ddd;}
#topbar .home {display: block; float: left; min-width: 83px; height: 83px; position: relative; border-left: 1px solid #000;  outline: 0; background: #eee2d0; background: url('//g.delfi.lt/multimedija/images/home.png') no-repeat 20px 20px }
#topbar .delfi-logo, .lt100-project-top  .delfi-logo{width: 73px; height: 21px; margin: 31px 5px 31px 15px; float:left}
#topbar .fb, .lt100-project-top .fb { width: 20px; height: 20px; background-position: 0px -28px; margin: 31px 3px; margin-right: 13px;}
#topbar .lin, .lt100-project-top .lin{width: 21px; height: 20px; background-position: -25px -28px; margin: 31px 3px;}
#topbar .tw, .lt100-project-top .tw{width: 20px; height: 20px; background-position: -50px -28px; margin: 31px 3px;}
.about-button {float:left;  margin: 23px 5px 23px 15px; }
.about-button .fa {font-size: 26px; margin-right: 7px; line-height: 1.42857143; color: #000;}

/*** SIDEBAR ***/
.sidebar {display: none; position: fixed; top: 0; left: 0; bottom: 0; text-align: left; width: 283px; overflow: hidden; background: rgba(238,226,208, 0.75); z-index: 1;}
.sidebar-open .sidebar {display: block; z-index: 99;}
#sidebar-right {left: auto; right: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}
.sidebar-open .sidebar {/*display: block;*/}
.right-sidebar-open #sidebar-right {visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
.sidebar .sidebar-inner {position: absolute; top: 83px; left: 0; bottom: 0; right: 0; width: 100%;}
.touch .sidebar .sidebar-inner {-webkit-overflow-scrolling: touch; overflow-y: scroll;}
.sidebar .list {margin: 0; padding: 0; list-style-type: none;}
.sidebar .list li {margin: 0; padding: 0; position: relative; display: block;}
.sidebar .list a {display: block; outline: 0; padding: 22px 25px; color: #000; font-size: 18px; line-height: 1.25; border-bottom: 1px solid #999; position: relative;}
.sidebar .list a .label {display: block; font-size: 10px; line-height: 1.1; padding-bottom: 5px; color: #a2a09d; text-transform: uppercase;}
.sidebar .list a.active {color: #ae3531;}
.sidebar .list a.active .label {color: white;}
.sidebar .list a:hover {color: #ae3531;}
.sidebar .back {display: block; outline: 0; background: #2b2a27;}
.sidebar .back span {display: block; padding: 20px 20px 20px 60px; font-size: 10px; line-height: 1.2; text-transform: uppercase; color: #7f7b72; font-family: "Roboto", sans-serif; background: url("../images/arrow_left.png") no-repeat 25px center;}
.svg .sidebar .back span {background-image: url("../assets/arrow_left.svg");}
.sidebar .back:hover span {background-color: rgba(0, 0, 0, 0.1);}
.sidebar .column-select {display: block; position: relative; outline: 0; height: 83px; background: #eee2d0;}
.sidebar .column-select .column-select-inner {font-size: 22px; line-height: 22px; color: #000; position: relative; padding: 31px 10px 31px 25px; display: inline-block; text-transform: uppercase; font-weight: 400;}
.sidebar .column-select .ico {display: inline-block; width: 30px; height: 30px; margin-right: 10px; vertical-align: -8px; background-size: 100%; background-repeat: no-repeat; background-position: center center;}
.issue-list-footer {padding: 25px 0; text-align:center; background:#ededed; color:#262523;}
.issue-list-footer a {color: #262523; text-decoration: underline; font-weight: 600; display: inline-block; vertical-align: top; margin: 0 20px;}

/*** MAIN + SIDEBAR ***/
#main {width: 100%; text-align: left; position: relative; background: #eee2d0; left: 0; z-index: 99; -webkit-transition: all 0.5s; transition: all 0.5s;}
.right-sidebar-open #main {-webkit-transform: translate3d(-283px, 0, 0); transform: translate3d(-283px, 0, 0);}
.sidebar-open #topbar {-webkit-transform: translate3d(283px, 0, 0); transform: translate3d(283px, 0, 0);}
.sidebar-open #topbar.headroom--unpinned {-webkit-transform: translate3d(283px, -100%, 0); transform: translate3d(283px, -100%, 0);}
.right-sidebar-open #topbar {-webkit-transform: translate3d(-283px, 0, 0); transform: translate3d(-283px, 0, 0);}
.right-sidebar-open #topbar.headroom--unpinned {-webkit-transform: translate3d(-283px, -100%, 0); transform: translate3d(-283px, -100%, 0);}
.sidebar .column-select a.dialog-close {color: #000; right: 5%; font-size: 44px; line-height: 1; font-weight: 300; font-family: "Roboto", sans-serif; padding: 15px 10px 17px 25px; display: inline-block; float: right;}

/* project cap */
.sp {background: url(//g.delfi.lt/projektai/lietuvai-100/i/lt100-sprite.png?v4) 0 0; display: inline-block;}
.lt100-project-top {background: #F7F1E5; padding: 13px 0;}
.lt100-project-top .project-logo{width: 100%; text-align: center;}
.lt100-project-top .project-logo img{width: 100%; max-width: 530px; margin: 0 auto;}
.lt100-project-top .description {color: #383838;font-size: 23px;font-weight: 400;max-width: 960px;margin: 0 auto;text-align: center;padding: 60px 10px;line-height: 1.4;}
.lt100-project-top .description a{color: #383838}
.lt100-project-top .vytis {padding-bottom: 20px}
.lt100-project-header {position: relative; text-align: center; color: #f7f2dd;}
.lt100-procet-image {max-height: 480px; overflow: hidden;}
.lt100-project-title {position: absolute; top: 150px; left: 0; width: 100%; font-size: 50px; line-height: 1; text-shadow: 2px 2px 1px rgba(38,37,35,0.75);}
.lt100-project-title a {color: #FFFFFF;}
.lt100-project-description {position: absolute; top: 210px; left: 0; width: 100%; font-size: 31px; font-weight: 300; line-height: 1; text-shadow: 2px 2px 1px rgba(38,37,35,0.75); padding: 0 20%;}
.parallax-container {width: 100%; min-height: 480px; padding-bottom: 3%;}
.lt100-project-bg {width:100%;height:100%;position: absolute;top: 0;background-color: rgba(0,0,0,0.3);}


/* grid */
.grid {max-width: 1080px; margin: -163px auto 0 auto;}
.grid:after {content: ''; display: block; clear: both;}
.grid-sizer, .grid-item {width: 270px;}
.grid-item {height: 160px; float: left; overflow: hidden}
.grid-item--width2 {width: 540px;}
.grid-item--height2 {height: 320px}
.grid-item .article-title-bg{background: rgba(13,75,47,0.2); width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;}
.grid-item .article-title {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,0d4b2f+100&0+0,1+100 */
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(13,75,47,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(13,75,47,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(13,75,47,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#0d4b2f',GradientType=0 ); /* IE6-9 */
font-size: 17px; font-weight: 500; position: absolute; left: 0; bottom: 0; text-transform: uppercase; padding: 15px; line-height: 1.2;}
.grid-item .article-title a {color: #f7f2dd;}
.grid-item .article-title a span {color: #f7f2dd !important;}
.grid-item.ph {background: url(//g.delfi.lt/projektai/lietuvai-100/i/lt100-grid-item-1.png) no-repeat center 30px #ae3531; text-align: center; color: #f7f2dd; padding: 75px 40px 0 40px; text-transform: uppercase; font-weight: 700}
.grid-item:nth-child(11) {
    background: url(//g.delfi.lt/projektai/lietuvai-100/i/lt100-grid-item-2.png) no-repeat center 30px #0d4b2f;
}
.grid-item.ph-3 {
    background: url(//g.delfi.lt/projektai/lietuvai-100/i/lt100-grid-item-3.png) no-repeat center 30px #f0c04f;
}
.grid-item.ph .title {
    font-size: 28px;
    line-height: 1
}
.grid-item.ph .text {
    font-size: 18px; padding-top: 15px;
}
.commentCount {
    color: #f0c04f !important;
}

.lt100-project-arrow {  
	text-align: center  
}

.lt100-project-arrow.bounce {
	-webkit-animation-name: bounce;
	-moz-animation-name: bounce;
	-o-animation-name: bounce;
	animation-name: bounce;
}
.lt100-project-arrow.animated {
	-webkit-animation-fill-mode:both;
	-moz-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	-o-animation-fill-mode:both;
    animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
	animation-fill-mode:both;
	-webkit-animation-duration:2s;
	-moz-animation-duration:2s;
	-ms-animation-duration:2s;
	-o-animation-duration:2s;
	animation-duration:2s;
}


@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	40% {-webkit-transform: translateY(-30px);}
	60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-30px);}
	60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.parallaxed {height: 600px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;}
.give-me-more {max-width: 1080px; text-align: center; margin: 0 auto; font-size: 18px; text-transform: uppercase; color: #0d4b2f; background: #e8d9c4; padding: 20px 0; font-weight: 600; cursor:pointer}
.arrow-down {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAMAAAH5ks4FAAAAOVBMVEUAAAANSy8NSy8NSy8NSy8NSy8NSy8NSy8NSy8NSy8NSy8NSy8NSy8NSy8NSy8NSy8NSy8NSy8NSy9x2yRBAAAAEnRSTlMAAQMGCg9ql52lr7Gytbu+xclvQ/omAAAAZUlEQVQI10WNQRKDMAwDN7YhmBoC+v9jOaSlOmlWOyNWEsQvYoABePCB1iHkAHUApuVKIKduK0cBuAJqvHJei2w6XQ3g1O7vDb7rBC9VTBClmrulRkAMpb2+bbpvbX8A0Hpv3/oAL7ADDHtqG/kAAAAASUVORK5CYII=);
	width: 18px; height: 10px; display: inline-block; margin-left: 5px; vertical-align: middle;}

.footer {background: #0d4b2f; width: 100%;}
.footer-content {width: 80%; margin: 0 auto; padding: 15px;     max-width: 1080px;}
.footer .footer-section {width: 33%; float: left;}
.footer .footer-section a {color: #fff; display: block; padding: 10px 0; font-size: 16px; font-weight: 300;}
.footer .footer-section.yellow a {color: #e8d9c4;}
.footer .footer-c {border-top: 1px solid #23593e;}
.footer .footer-c p {text-align: center; padding: 25px 0; font-size: 14px; color: #f6efe4; font-weight: 200;}
.footer .footer-section .fb-white{ width: 23px; height: 23px; background-position: -85px -26px; margin-right: 15px;}
.footer .footer-section .lin-white{width: 23px; height: 23px; background-position: -122px -26px; margin-right: 15px;}
.footer .footer-section .tw-white{width: 23px; height: 23px; background-position: -159px -26px;}

@media screen and ( max-width: 826px) {
	.parallaxed {height: 500px; background-attachment: scroll; background-position: top center; background-repeat: no-repeat; background-size: cover;}
	.lt100-project-title {position: static; font-size: 40px; padding:100px 0 50px 0;}
	.lt100-project-description {position: static; font-size: 28px;  padding: 0 10%;}
	.grid {height: initial !important; margin: 0 auto;}
	.grid-item {width:50%; position: relative !important; float: left; left: initial !important; top: initial !important;}
	.grid-item.ph, .grid-item.empty {display: none;}
	.grid-item--height2 {height: initial !important;}
	.grid-item .article-title {font-size:16px;}
	.lt100-project-top .project-logo {padding-top: 60px;}
	#topbar .right {display:none;}
	#topbar .title.title-logo .title-inner {float: right;}
	#topbar .title.title-logo .title-inner img {float: right; padding-right: 10px;}
	.to-top {display: none !important;}
	.footer-content {width: 90%;}
	.footer .footer-section {width: 50%}
	.about-button {display: none}
}

@media screen and ( max-width: 610px) {
	.parallaxed {height: 400px;}
	#topbar .title.title-logo .title-inner img {max-width: 75%;}
	#topbar .topbar-content {height: 65px;}
	#topbar .delfi-logo, .lt100-project-top .delfi-logo {margin: 22px 5px 22px 15px;}
	.sidebar-toggler {height: 65px; min-width: 66px;}
	.sidebar-toggler .lines {top: 26px;}
	#topbar .fb, .lt100-project-top .fb, #topbar .lin, .lt100-project-top .lin, #topbar .tw, .lt100-project-top .tw {margin: 22px 3px;}
	#topbar .fb, .lt100-project-top .fb {margin-right: 13px;}
	.footer .footer-section {width: 100%}
}

@media screen and ( max-width: 440px) {
	#topbar .title.title-logo .title-inner img {max-width: 66%;}
	#topbar .topbar-content {height: 65px;}
	#topbar .delfi-logo, .lt100-project-top .delfi-logo {margin: 22px 5px 22px 15px;}
	.sidebar-toggler {height: 65px; min-width: 30px;}
	.sidebar-toggler .lines {margin-left: 13px;}
	.sidebar-toggler .lines, .sidebar-toggler .lines:before, .sidebar-toggler .lines:after {width: 20px; left: 0px;}


@media screen and ( max-width: 375px) {
	.parallaxed {height: 250px;}
	.lt100-project-title {font-size: 30px; padding: 30px 0;}
	.lt100-project-description {font-size: 20px; padding: 0 5%;}
	.lt100-project-top .description {font-size: 18px; padding: 20px 0;}
	.grid-item .article-title {font-size:13px;}
}
