body { padding: 0px; margin: 0px; font-family: 'Open Sans', Arial, Verdana, sans-serif; color:#4C4C4C; background: var(--bg-color)} ul, p, h1, h2, h3, h4, h5, p { margin: 0px; padding: 0px; } a { text-decoration: none; color:#c39;} a:hover {color:#8d359c;} * {-webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } textarea { font-family: 'Open Sans', Arial, Verdana, sans-serif;} .floatleft { float: left !important; } .floatright { float: right !important; } .clear { clear: both !important; } .no-padding-right { padding-right: 0px !important; } .no-margin-right { margin-right: 0px !important; } .no-border-right { border-right: none !important; } input::-webkit-input-placeholder { line-height: 1.5em; } /* WebKit browsers */ input:-moz-placeholder { line-height: 1.5em; } /* Mozilla Firefox 4 to 18 */ input::-moz-placeholder { line-height: 1.5em; } /* Mozilla Firefox 19+ */ input:-ms-input-placeholder { line-height: 1.5em; } /* Internet Explorer 10+ */ .border-radius-3 { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .label { background: #ffffff; margin: 0px 0 0 0; font-size: 10px; line-height: 13px; color: white; padding: 2px 4px; display: inline-block; text-align: center; font-family: 'Open Sans'; } .label.blue { background: #3b67aa; } .label.black { background: #50514a; } #page-holder { position:relative; overflow:hidden; background: var(--bg-color);} #page-holder.side-open {} #page-holder #content-holder {position:relative; z-index:2; background: var(--bg-color); -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;} #page-holder #side-holder {width:300px; height:100%; z-index:1; position:fixed; top:0px; left:0px; background: var(--menu-nav-backgr); -webkit-transform: translate3d(-300px, 0, 0); transform: translate3d(-300px, 0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } #page-holder #side-holder ul {list-style-type: none;margin: 0;padding: 26px 0px 0px 30px;margin-top: -10px;} #page-holder #side-holder ul li { padding:5px 0px;} #page-holder #side-holder > ul > li > a { color:#FFF; text-transform:uppercase; font-size:16px;} #page-holder #side-holder > ul > li li a {color:#999; font-size:14px;} #page-holder #side-holder a {} #page-holder #side-holder .logo-holder {text-align:center;max-width: 280px;padding: 20px 0px;margin: 10px;margin-right: -38px;background: var(--nav-backgr-top-color);border-radius: 6px;width: 100%;} #page-holder #side-holder .logo-nav-backgr {height: 220px; background-image: url(../images/nav-backgr2.png); width: 100%; background-repeat: no-repeat; padding: 46px 0px 0px 32px;} #page-holder #side-holder .icon-logo {font-size:80px; font-weight:normal; color:#FFF;} #page-holder #side-holder .search-form {padding: 0px 0px 0px 0px; } #page-holder #side-holder .search-input {border: 1.5px solid transparent;background:none;outline:none;color: #9d9dbb;padding: 9px 0px;width:90%;line-height:22px;border-bottom: 2px solid var(--art-horz-border-color);font-size: 27px;font-weight: bolder;font-family: 'Open Sans', Verdana, Arial, sans-serif;letter-spacing: -1px;} #page-holder.side-open #content-holder {-webkit-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0);} #page-holder.side-open #side-holder {-webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0);} #page-holder .side-menu-button {position:fixed; top:20px; left:20px; z-index:3; cursor:pointer; font-size:30px; border-radius:100px; color:#FFF; padding:15px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; overflow:hidden; display:none;} #page-holder.side-open .side-menu-button {-webkit-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0); } /*------------------------- header --------------------------*/ .head-logo {background:#FFF; text-align:center; padding:20px 0px;} .head-logo a.logo { margin:0px 0px; display:inline-block;} .head-logo a.logo > .icon-logo {font-size:28px; line-height:28px; background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#c25b7c),color-stop(100%,#75539e)); background: -webkit-linear-gradient(30deg,#c25b7c 0%,#75539e 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .gradient { background: #75539e; background: -moz-linear-gradient(30deg,#c25b7c 40%,#75539e 100%); background: -webkit-gradient(linear,left bottom,right top,color-stop(40%,#c25b7c),color-stop(100%,#75539e)); background: -webkit-linear-gradient(30deg,#c25b7c 40%,#75539e 100%); background: -o-linear-gradient(30deg,#c25b7c 40%,#75539e 100%); background: -ms-linear-gradient(30deg,#c25b7c 40%,#75539e 100%); background: linear-gradient(30deg,#c25b7c 40%,#75539e 100%); background: linear-gradient(30deg,#c39 11%,#391397 100%); } /* background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); */ .semi-gradient { background: rgba(0,0,0,0.8); background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.8))); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 ); } header { width: 100%; position:relative; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; text-align:center; } header > .inner { width: 1280px; margin: 0 auto; padding: 26px 0px; } header ul.main-nav { list-style:none; font-family:'Roboto', Arial, Verdana, sans-serif; float:left;} header ul.main-nav.right-nav {float:right;} header ul.main-nav.right-nav .desc {font-size:11px; white-space:nowrap; background:rgba(0,0,0,0.08); padding:20px 35px;} header ul.main-nav.right-nav .dropdown-wrapper {} header ul.main-nav.right-nav .dropdown-wrapper [class^="icon-"] {line-height:1px; position:relative; top:7px; font-size:28px; } header ul.main-nav > li { float:left; position:relative; } header ul.main-nav > li > a { font-size:17px; height:52px; font-weight:300; color:#000; padding:23px 30px 0px 30px; display:block; line-height:18px; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } header ul.main-nav > li.border {border-right:1px solid rgba(255,255,255,0.2); height:25px; margin-top:25px;} header ul.main-nav > li > a > .text {vertical-align: top; padding-top: 5px; display: inline-block;} header ul.main-nav > li > a:hover { /*background:rgba(255,255,255,1); color:#c25b7c; */ color:#c39;} header ul.main-nav > li:hover > .dropdown-wrapper { opacity:1; visibility:visible; -webkit-transition: opacity 0.1s ease-in-out; -moz-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; } header ul.main-nav .dropdown-wrapper { opacity:0; visibility:hidden; z-index:100; position:absolute; top:75px; left:0px; background:#FFF; text-align:left;} header ul.main-nav .dropdown-wrapper .triangle { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 9px solid #FFF; position:absolute; top:-9px; left:34px;} header ul.main-nav .dropdown-wrapper ul.categories { list-style:none; } header ul.main-nav .dropdown-wrapper ul.categories a { padding:15px 30px 15px 30px; white-space:nowrap; display:block; font-size:16px; line-height:18px; font-weight:300; color:#7d7d7d;} header ul.main-nav .dropdown-wrapper ul.categories a:hover { color:#c39;} header ul.main-nav .dropdown-wrapper ul.categories li { border-bottom:1px solid rgba(0,0,0,0.08);} header .search-holder {opacity:0; background:#fff; position:absolute; top:28px; left:0px; width:0px; height:75px; overflow:hidden; z-index:1; background:#FFF; -webkit-transition: all 0.2s ease-in-out, left 0.2s ease-in-out, opacity 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out, left 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: all 0.2s ease-in-out, left 0.2s ease-in-out, opacity 0.2s ease-in-out; } header .search-holder.active {width:100%; opacity:1;} header .search-holder .search-input {padding:23px 50px 0 50px; width:100%; border:none; font-size:22px; line-height:28px; outline:none; font-family:'Open Sans', Arial, Verdana, sans-serif; background:transparent;} header .search-holder .close { position:absolute; width:30px; height:30px; top:23px; right:50px; cursor:pointer; font-size: 30px;} header .search-holder .close:hover { color:#c25b7c;} /*------------------------- cover --------------------------*/ .article-info-wrapper { padding: 22px 5px 64px 5px; margin-bottom:0px; background-size:cover; background-repeat:no-repeat; box-shadow: inset 0 0 0 1000px rgba(26, 4, 53, 0.8); background-position:50% 50%; margin: 10px 10px 0px 10px; border-radius: 8px;} .article-info-wrapper > .inner { width: 1280px; margin: 0 auto;} .article-info-wrapper h1 { text-align:left; color:#FFF; font-size:46px; font-family:Open Sans; font-weight:700; max-width: 800px; margin-left: auto; margin-right: auto; text-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.2); padding: 160px 0px 10px 0px;} .article-info-wrapper h1 a {color:#FFF;} .article-info-wrapper h2 { text-align:center; color:#FFF; font-size:40px; font-family:Open Sans; font-weight:700; max-width: 800px; margin-left: auto; margin-right: auto; text-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.2);} .article-info-wrapper h2 a {color:#FFF;} .article-info-wrapper .article-meta { display:block !important; text-align:left; } .article-info-wrapper .article-meta ul { color:#FFF;} .article-info-wrapper .article-meta li { float:none; display:inline-block; padding:12px 0px; margin:0px; } .article-info-wrapper .article-meta li a { font-size:15px; color:#FFF; font-weight:600; font-family: 'Roboto', Arial, Verdana, sans-serif;} .article-info-wrapper .section-title span {display:block;width:40px;border:2px solid #c39;height:0px;border-radius:10px;margin:5px 0 0 0;text-align: left;} /*------------------------- carousel --------------------------*/ .header-carousel-wrapper {width:100%; height:350px; margin-bottom:30px; position:relative;} .header-carousel-wrapper .item { width:100%; height:100%; position:absolute; z-index:1; top:0px; left:0px; background-size:cover; background-repeat:no-repeat; box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3); background-position:50% 50%;} .header-carousel-wrapper .item:first-child {transform:translateX(0px);} /*------------------------- content --------------------------*/ .content-container { padding: 30px 30px 30px 30px; } .page-has-subheader .content-container { padding-top:0px;} .content-container > .inner { width: 1120px; /*width: 1280px; rezolutie prima*/ margin: 0 auto; } .content-container .content-wrap { float:left; width:100%;} .content-container .content-wrap > .inner {margin-right: 400px; padding: 0px 10px 0px 10px;} .content-container .sidebar { margin-left: -360px; width: 360px; float: right; /*background:#333333;*/ } .content-container .sidebar .fixed-section {position:fixed; top:0px; width:360px; margin-top:30px; transform: translateZ(0); -webkit-transform: translateZ(0);} .content-container .section-title {font-size:40px;font-weight:600;color:var(--section-title);display: block;padding-bottom:15px;font-family:'Raleway';padding-top: 20px;text-align: center;} .content-container .section-title span {display:block;width:40px;border:2px solid #c39;height:0px;border-radius:10px;margin:5px 0 0 0;text-align: center;margin-left: auto;margin-right: auto;} .content-container .top-articles-list {margin-bottom:0px;} .ad-page-responsive {padding: 20px 0px 0px 0px;} .ad-page-responsive-art {margin: 30px 0;height: auto;position: relative;background-size: 970px 250px;background-repeat: no-repeat;background-position: 50% 50%;width: 100%;text-align: center;overflow: hidden;} .ad-article-responsive {background:#F3F7FA; padding:30px; margin:-30px -30px 25px -30px;} article.vertical { width:25%; float:left; margin-bottom:10px; } article.vertical:nth-child(even) { padding-left:8px; padding-right: 8px;} article.vertical:nth-child(odd) {padding-left:8px; padding-right: 8px;} article.vertical a.article-thumbnail { } article.vertical a.article-thumbnail > img { width:100%; display:block; border-radius: 6px; background-color: #9001a9;} article.vertical .article-info { /*border-bottom:1px solid #a5a5a5; background:#FFF; */} article.vertical h2.article-title {padding: 5px 5px 20px 0px; font-size:16px; font-family:Open Sans; overflow: hidden; text-overflow: ellipsis; font-weight: 600;} article.vertical h2.article-title a { color:var(--title-home-color);} article.horizontal {width:100%;padding: 20px 0px;border-bottom: 1px solid var(--art-horz-border-color);} article.horizontal a.article-thumbnail { width:50%; float:left; padding-right:0px;} article.horizontal a.article-thumbnail > img { width:100%; display:block; background-color: #e3ebef;} article.horizontal .article-info { float:left; width:50%; padding-left:20px; } article.horizontal h2.article-title { padding:10px 20px 10px 0px; font-size:22px; line-height:30px; font-family:Open Sans; font-weight: 700;letter-spacing: -0.6px;} article.horizontal h2.article-title a { color: var(--title-home-color); } article.horizontal .article-meta {padding-left:0px; } article.horizontal p {font-size: 18px;padding: 0 20px 0 0;line-height: 24px;font-weight: 400;color: var(--home-art-description-color);overflow-x: hidden;overflow-y: hidden;max-height: 50px; font-family: 'Mulish', 'Open Sans', Verdana, Arial, sans-serif;} .article-meta {color: #9a9a9a;font-size: 15px;font-weight: 600;font-family: 'Roboto', Arial, Verdana, sans-serif;padding: 10px 0px 0px 0px;text-transform: uppercase;} .article-meta ul { list-style: none; } .article-meta li { float: left; margin-right: 5px; } .article-meta li a { color: #c39; } .article-meta li a:hover { color: #c39; } .article-meta ul:after { clear: both; display: block; content:" "; } .article-meta-home {padding: 0px 0px 0px 0px !important; font-size: 16px; color: #9a9a9a; font-weight: 600; font-family: 'Roboto', Arial, Verdana, sans-serif; text-transform: uppercase;} .article-meta-latest {padding: 10px 0px 0px 0px;} .article-meta-art {color: #9a9a9a;font-size: 16px;font-weight: 600;font-family: 'Roboto', Arial, Verdana, sans-serif;padding: 0px 0px 14px 0px;text-transform: uppercase;} .article-meta-art ul { list-style: none; } .article-meta-art li { float: left; margin-right: 5px; } .article-meta-art li a { color: #fff; } .article-meta-art li a:hover { color: #c39; } .article-meta-art ul:after { clear: both; display: block; content:" "; } article.article-content { margin: 0 auto !important; width:100%; color: var(--articol-color); max-width: 860px;} article.article-content { padding: 20px 0px 0px 0px; font-size: 20px; line-height: 29px; font-family: 'Mulish', 'Open Sans', Verdana, Arial, sans-serif; } article.article-content h2 { font-size: 24px; line-height: 34px; margin:40px 0 15px 0; font-weight: 600; color: var(--title-h3-color); font-family:'Mulish', 'Open Sans', Verdana, Arial, sans-serif;} article.article-content h3 { font-size: 22px; line-height: 28px; margin:30px 0 15px 0; font-weight: 600; color: var(--title-h3-color); font-family:'Mulish', 'Open Sans', Verdana, Arial, sans-serif;} article.article-content h4 { font-size: 20px; line-height: 20px; margin:40px 0 15px 0; font-weight: 500; color: var(--title-h3-color); font-family:'Mulish', 'Open Sans', Verdana, Arial, sans-serif; } article.article-content h5 { font-size: 18px; line-height: 18px; margin:40px 0 15px 0; font-weight: 500; color: var(--title-h3-color); font-family:'Mulish', 'Open Sans', Verdana, Arial, sans-serif; } article.article-content p { margin-bottom: 25px; margin-top: 25px;} article.article-content p::after{clear:both; content: ""; display: block;} article.article-content p a { text-decoration:none; background: linear-gradient(#0000 70%,var(--link-highlight) 0); font-weight: 600;} article.article-content ul { margin-bottom: 30px; list-style-position: inside; } article.article-content ul li { } article.article-content ul li a { } article.article-content ul li ul { padding-left: 20px; margin-bottom: 0px; } article.article-content .img-wrapper { background: #f5f5f5; border-top: 1px solid #dcdbdd; border-bottom: 1px solid #dcdbdd; padding: 30px; text-align: center; margin-bottom: 30px; margin-left:-30px; margin-right:-30px; } article.article-content .img-wrapper img { width: 100%; display:block;} article.article-content .img-wrapper.normal-size img {width:auto; max-width:100%; height:auto;} article.article-content .img-wrapper.align-center img {margin:0 auto;} article.article-content img {height:auto; max-width:100%;} article.article-content pre {font-size: 12px; line-height: 16px; margin:0px 0px 15px 0px;} article.article-content pre code {display:inline-block; width:100%;} blockquote { font-style: italic; } video {max-width: 100%; height: auto; border: 0px;} /*------------------------- Old wordpress styles --------------------------*/ article.article-content img.size-thumbnail {} article.article-content img.size-full {} article.article-content img.size-large {} article.article-content img.alignnone {} article.article-content img.size-medium {} article.article-content img.aligncenter {margin: 0 auto; display:block;} article.article-content img.alignright {float:right; width:auto; margin-left:20px; margin-bottom:20px;} article.article-content img.alignleft {float:left; width:auto; margin-right:20px; margin-bottom:20px;} .article-stats { margin: 0px 0 20px 0px; padding: 0px; color: #4c4c4c; list-style: none; display: table; font-size: 12px; line-height: 16px; font-family: 'Open Sans'; } .article-stats li { border-bottom: 1px solid #dedede; padding: 10px 30px 10px 20px; } .article-stats li b { font-weight: 700; } .article-stats li.difficulty { background: url(../images/article-stats/difficulty-icon.png) no-repeat left center; } .article-stats li.technologies { background: url(../images/article-stats/technologies-icon.png) no-repeat left center; } .article-stats li.time { background: url(../images/article-stats/time-icon.png) no-repeat left center; } .article-stats li { } .article-short-navigator {width:100%; margin-bottom:20px; text-align:center;padding: 0px !important; margin-top: 80px;} .article-short-navigator .previous {position:relative; width:50%; float:left; height:200px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.60);} .article-short-navigator .next {position:relative; width:50%; float:right; height:200px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.60);} .article-short-navigator .read-more {color:#FFF; border:1.5px solid #FFF; text-transform:uppercase; padding:15px 30px; margin:60px 0px 0px 0px; display:inline-block; line-height:18px; font-size:14px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;} .article-short-navigator .read-more:hover {background-color: #c39; border-color:#c39;} .article-short-navigator .title { font-size:16px; line-height:20px; color:#FFF; display:block; padding:35px 30px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .article-short-navigator .single {width:100%;} .author-bio { font-family: 'Open Sans'; position: relative; margin-top:0px; margin-bottom: 30px; background: var(--nav-backgr-color); text-align:center; } .author-bio .author-header {background-size: cover;background-position: 50% 50%;} .author-bio .author-header .author-image {border: 5px solid #FFFFFF; border-radius: 500px 500px 500px 500px; bottom: -40px; display: inline-block; position: relative; text-align: center;} .author-bio .author-header .author-image img {height: 100px; width: 100px; border-radius: 500px 500px 500px 500px; display:block;} .author-bio .data-container { color: var(--articol-color); min-height: 60px; font-size: 16px; padding:40px 30px 48px 30px;} .author-bio .data-container .title { font-size:26px; line-height: 26px; font-weight: 600; margin-bottom: 15px; display:inline-block; } .author-bio .data-container .message { font-size: 14px; line-height: 19px; max-width: 840px; display: inline-block; } .author-bio .data-container .social-container { } .author-bio .data-container .social-container .social-text { font-size: 14px; line-height: 19px; padding-top: 8px; margin-right: 10px; } .author-bio .data-container .social-container a { margin-right: 7px; display:inline-block;} .author-bio a { text-decoration: none; } .social-icon { width: 35px; height: 35px; background: url(../images/social-icons/icons.png) no-repeat; } .social-icon.twitter { background-position: 0 0px; } .social-icon.google { background-position: 0 -35px; } .social-icon.facebook { background-position: 0 -70px; } .social-icon.pinterest { background-position: 0 -105px; } /*------------------------- related articles --------------------------*/ .related-articles {} .related-articles ul {list-style: none;} .related-articles ul::after {content: " "; clear: both; display: table;} .related-articles ul li {float:left;position: relative;margin-bottom: 30px;width: 31%;margin-right: 2%;} .related-articles ul li:last-child {margin-right: 0px;} .related-articles ul li a { color:#FFF;} .related-articles h3 {padding-top:45px; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:80%; margin: 0 auto; color: #FFF;} .related-articles .info {position: absolute; left:0px; bottom:0px; z-index: 1; width:100%; height:80px; text-align: center; border-radius: 6px;} .related-articles .first {} .related-articles img {max-width:100%; display: block; width: 100%; border-radius: 6px; background-color: #9001a9;} .related-articles span.date {color: #A2A2A2; font-size: 12px; font-family: Roboto; font-weight: 300;} .related-articles a:hover h3 {color:#DADADA;} /*------------------------- post comment --------------------------*/ .post-comment { font-family: 'Open Sans'; background: #FFF; position: relative; padding: 15px; margin-bottom: 20px; } .post-comment .avatar { float:left; width: 8%; } .post-comment .avatar img {width:100%; -webkit-border-radius: 120px; -moz-border-radius: 120px; border-radius: 120px; } .post-comment .comment-wrapper { width:67%; float:left; padding:0px 15px; } .post-comment textarea { width: 100%; height: 60px; border: none; resize: none; outline: none; font-size: 14px; background:#FFF; } .post-comment .submit-comment {border-radius: 6px; float:left; width: 25%; height: 60px; padding: 0px; font-family: lato; background-color: #66c; box-shadow: 0 0 5px #66c inset, 0 1px 1px #eee; border: none; color: #FFF; cursor: pointer; -webkit-appearance: none;} .post-comment .aditional-info-wrapper { display: none; clear:both; padding: 15px 0 0 0; margin: 0 0px 15px 0;} .post-comment .aditional-info-wrapper input { font-size: 14px; background: #FFF; border: none; border-bottom: 2px solid #dcdbdd; width: 32%; padding: 7px 10px 7px 10px; outline: none; margin: 0 1% 0 0; line-height: 20px;} .post-comment .aditional-info-wrapper input[readonly="true"] {background:#F0F0F0; color:#A9A9A9;} .post-comment .aditional-info-wrapper input:last-child { margin-right: 0px; } .post-comment .social-media-connect { display: none; margin: 0 0px 0 75px; padding: 15px 0 0 0; min-height: 60px; } .post-comment .social-media-connect a { margin-right: 7px; } .post-comment .social-media-connect .social-text { font-size: 14px; line-height: 19px; padding-top: 8px; margin-right: 10px; } .post-comment.active .aditional-info-wrapper { display:block;} .post-comment.active .social-media-connect { display:block;} .post-comment.active .submit-comment{ float:none; width:100%;} .post-comment.active .comment-wrapper {width:92%;} .post-comment .message-wrapper {display:none; background:rgba(255,255,255,.8); color:#93EAB5; position:absolute; top:0px; left:0px; width:100%; height:100%; font-weight:700;} .post-comment .message-wrapper.error {color:#c25b7c;} .post-comment .message-wrapper span { display:block; text-align:center; padding-top:20px} ul.comments { list-style: none; font-family: 'Open Sans'; } ul.comments > li { background: var(--comment-box-color); margin-bottom: 10px; /*-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 0 1px #ccc; */ overflow: hidden; border-bottom: 1px solid rgba(0,0,0,0.1); } ul.comments > li[data-reply="true"] {border-bottom:none;} ul.comments > li[data-reply="true"] .post-comment {margin-bottom:0px;} ul.comments .staff { background: var(--comment-box-color); } ul.comments > li.staff { } ul.comments > li:first-child { border-top: 0px; } ul.comments li { } ul.comments ul { list-style: none; background: var(--nav-backgr-color); } ul.comments ul li { padding-left: 40px; background: none; border-top: 1px solid rgba(0,0,0,0.1); } ul.comments li.no-comments { padding: 20px;} .comment-item { position: relative; padding: 15px; } .comment-item.pending {opacity:0.5;} .comment-item .pending-message {font-style:italic; font-size:14px; color:green;} .comment-item .avatar { float:left; width: 8%;} .comment-item .avatar img { width:100%; -webkit-border-radius: 120px; -moz-border-radius: 120px; border-radius: 120px; } .comment-item .data-container { width:92%; float:left; padding:0px 15px; } .comment-item .data-container .name { color: var(--articol-color); font-size: 18px; line-height: 22px; font-weight: 600; margin-bottom: 5px; max-width:350px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; float:left; } .comment-item .data-container .date { font-size: 12px; line-height: 16px; font-weight: normal; color: #b7b7b7; margin-bottom: 4px; padding-top: 4px; float:right; } .comment-item .data-container .message { color: var(--articol-color); font-size: 16px;} .comment-item .data-container .label { position: relative; top: -2px; margin-left: 5px; } .comment-item .data-container .info-container { padding-top: 5px; } .comment-item .data-container .reply-anchor { text-decoration: none; color: #a2a2a2; font-weight: 700; font-size: small; } /*------------------------- tags --------------------------*/ .tags-holder {background: var(--tag-holder-color); font-size:16px; padding:30px; text-transform: lowercase; text-align: center;} .tags-holder ul {list-style:none;} .tags-holder ul li { display:inline-block; font-weight:600; margin:0 3px 0 0;} /*------------------------- assets container --------------------------*/ .icbc-ui-assets-more {font-family: 'Open Sans'; text-align: center; background: #E4EAEF; border-radius:4px; padding: 50px 30px; margin-bottom: 40px;} div.icbc-ui-assets-more h4 {line-height: 20px; font-size: 1.5em; margin:0px; padding:0px 0px 40px 0px; font-weight:700; color:#4e5968; letter-spacing: normal; text-transform: capitalize; } .icbc-ui-assets-more .buttons-container::after {display: table; content:' '; clear:both;} .icbc-ui-assets-more .buttons-container .button-wrap {width:100%; padding:0px;} .icbc-ui-assets-more.two-buttons .buttons-container .button-wrap {width:50%; float:left; padding-left:15px;} .icbc-ui-assets-more.two-buttons .buttons-container .button-wrap:first-child {padding-right:15px; padding-left: 0px;} .icbc-ui-assets-more .info-container {} .icbc-ui-assets-less {width:70%; text-align: center; margin:0 auto 40px auto;} .icbc-ui-assets-less.two-buttons {} .icbc-ui-assets-less.two-buttons::after {display: table; content:' '; clear: both;} .icbc-ui-assets-less.two-buttons .button-wrap {width:50%; float:left; padding-left:15px;} .icbc-ui-assets-less.two-buttons .button-wrap:first-child {padding-right:15px; padding-left: 0px;} .icbc-ui-button {text-transform: uppercase; width:100%; background:#93d0ea; color:#FFF; font-weight: 700; display:inline-block; padding:30px 60px; border-radius:4px; font-size:18px; line-height: 18px; text-decoration: none;} .icbc-ui-button.small {padding:15px 30px; font-size:14px; line-height: 14px;} .icbc-ui-button:hover {color: #FFF;} .icbc-ui-background-dark-green {background-color: #37bb9b;} .icbc-ui-background-dark-blue {background-color:#6292c1;} .icbc-ui-background-dark-yellow {background-color: #f19e21;} .icbc-ui-background-dark-pink {background-color: #EA5C54;} /*------------------------- white box --------------------------*/ .white-box {background:#FFF; padding:30px; font-size: 15px; line-height: 25px;} .white-box ul {margin: 5px 0 30px 15px;} .white-box ul li { list-style-type: disc; padding: 0px; margin: 3px 15px 3px 22px; line-height: 23px;} .white-box p {padding: 0 0 20px 0; line-height: 25px;} .white-box h2 {font-size:22px;} .white-box.legal {} .white-box.legal h2{} .white-box.legal h3{font-size:18px;line-height:24px; padding-bottom:10px; padding-top:15px;} .white-box.legal p{font-size:15px; line-height:25px;} /*------------------------- ads --------------------------*/ .sidebar-ad-holder { max-width:360px; margin:0 auto 30px auto; text-align:center; background:#FFFFFF; padding:12px; } .sidebar-ad-holder > img {display:block;} .sidebar-ad-holder .title {font-size:11px; text-transform:uppercase; color:#676767; display:block; text-align:center; padding-bottom:5px;} /*------------------------- newsletter --------------------------*/ .sidebar-subscribe-holder {margin-bottom: 30px; padding-bottom:30px; font-family: 'Open Sans'; background: linear-gradient(30deg,#c39 11%,#391397 100%); border-radius: 6px;} .sidebar-subscribe-holder span.title {display:block; text-align:center; font-size:30px; padding:10px 0px 20px 0px; color:#FFF; font-weight:300;} .sidebar-subscribe-holder p {font-size:16px; padding:0 20px; color:#FFF;} .sidebar-subscribe-holder .form-wrapper { padding:20px 20px 10px 20px; position:relative;} .sidebar-subscribe-holder .input-text {border:1.5px solid #FFF; border-radius:30px; background:none; height:40px; outline:none; color:#FFF; padding:0 40px 0 20px; width:100%; font-size:16px; line-height:22px; font-family: 'Open Sans'; font-weight:300; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;} .sidebar-subscribe-holder .input-text:focus {background:rgba(0,0,0,0.5); border-color:transparent;} .sidebar-subscribe-holder .input-button {position:absolute; top: 27px; right: 25px; z-index:1; background:none; color:#FFF; border:none; cursor:pointer;} .sidebar-subscribe-holder .input-button .icon {font-size:25px;} /*------------------------- fullwidth module --------------------------*/ .fullwidth-module { padding:80px 0 80px 0px; no-repeat; background-size: cover; background-position: 50% 50%; background: linear-gradient(30deg,#c39 11%,#391397 100%);} .fullwidth-module h2 {display:block; text-align:center; font-size:36px; padding:0px 0px 10px 0px; color:#FFF; font-weight:300;} .fullwidth-module p {font-size:14px; padding:0 20px; color:#FFF; text-align:center;} .fullwidth-module .form-wrapper {margin-top:20px; padding:20px 20px 10px 20px; position:relative;} .fullwidth-module .input-text {border:1.5px solid #FFF; border-radius:30px; background:none; height:40px; outline:none; color:#FFF; padding:0 40px 0 20px; width:100%; font-size:16px; line-height:22px; font-family: 'Open Sans'; font-weight:300; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;} .fullwidth-module .input-text:focus {background:rgba(0,0,0,0.5); border-color:transparent;} .fullwidth-module .input-button {position:absolute; top: 27px; right: 25px; z-index:1; background:none; color:#FFF; border:none; cursor:pointer; } .fullwidth-module .input-button .icon {font-size:25px;} .fullwidth-additional-info {background:#FFF; padding-top:50px; font-family: 'Mulish', 'Open Sans', Verdana, Arial, sans-serif;} .fullwidth-additional-info .box {float:left; width:33.3%; padding:0px 50px 50px 50px; } .fullwidth-additional-info .box.fullwidth {width:100%; float:none; padding-top:0px;} .fullwidth-additional-info h2 {font-size:18px; line-height:22px; padding:0 0 10px 0;} .fullwidth-additional-info p {font-size:14px; line-height:22px;} .fullwidth-additional-info .left-side{float:left; width:50%; padding-right:15px;} .fullwidth-additional-info .right-side{float:right; width:50%; padding-left:15px; } .fullwidth-additional-info .coin-wrapper {margin-bottom:30px;} .fullwidth-additional-info .coin-holder {width:100%; margin-top:30px; position:relative; min-height:50px; height:auto; /*padding-left:70px; background:url(../images/advertise-coin.png) no-repeat center left;*/ float:left;} .fullwidth-additional-info .coin-holder p { width:100%;} .fullwidth-additional-info .coin-holder p .title {display:block; font-size:14px;line-height:14px; text-transform:uppercase; margin-bottom:5px;} .fullwidth-additional-info .coin-holder p .text {display:block; font-size:14px;line-height:18px; } .fullwidth-additional-info ul {font-size:14px; line-height:22px; padding-left:40px; margin-top:5px;} .fullwidth-additional-info ul li {margin-bottom:5px;} /*------------------------- social sidebar --------------------------*/ .sidebar-social-holder { max-width:360px; margin:0 auto; text-align:center; padding-bottom:30px;} .sidebar-social-holder .asset-holder {position:relative; width:100%; display:block;} .sidebar-social-holder .asset-holder video, .sidebar-social-holder .asset-holder img {display:block;} .sidebar-social-holder .coin {width:113px; height:113px; background-repeat:no-repeat; background-size:100%; display:block; background-image:url(../images/social-wiget/social-coins.png);} .sidebar-social-holder .info-holder {background:#FFF; width:100%; padding:15px 0px; min-height:30px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;} .sidebar-social-holder .subscribe-button-holder {float:right; padding:0 15px;} .sidebar-social-holder .fb-wiget-holder {padding:0 20px; overflow: hidden;} .sidebar-social-holder.youtube .coin {background-position:0 -565px; z-index:1; position:absolute; bottom:-50px; left:20px;} .sidebar-social-holder.youtube .asset-holder {min-height:202px;} .sidebar-social-holder.youtube .subscribe-button-holder {padding-left:0px;} .youtube-additional {padding: 0px 6px 0px 4px; height: 22px; color: #777; font-size:12px; line-height: 23px; border: 1px solid #CCC; background-color: #FAFAFA; font-family: arial, sans-serif; display: inline; float: right;} .sidebar-social-holder.facebook .coin{background-position:0 0; margin:0 auto;} .sidebar-social-holder.facebook .asset-holder {background:url(../images/social-wiget/bg-facebook.jpg) no-repeat top left #FFF;} .sidebar-social-holder.facebook .asset-holder .title {font-size:18px; color:#FFF; height:45px; padding-top:25px; text-transform:uppercase; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;} .sidebar-social-holder.twitter .coin {background-position:0 -452px; z-index:1; position:absolute; bottom:-50px; left:20px;} .sidebar-social-holder.twitter .asset-holder {background:url(../images/social-wiget/bg-twitter.jpg) no-repeat top left #FFF; height:80px;} .sidebar-social-holder.twitter .asset-holder .super-title {font-size:12px; color:#FFF; padding-top:25px; padding-left:150px; text-transform:uppercase; text-align:left;} .sidebar-social-holder.twitter .asset-holder .title {font-size:24px; line-height:24px; color:#FFF; padding-left:150px; text-align:left;} .sidebar-social-holder.instagram .coin {background-position:0 -226px; z-index:1; position:absolute; bottom:-50px; left:20px;} .sidebar-social-holder.instagram .asset-holder {background:url(../images/social-wiget/bg-instagram.jpg) no-repeat top left #FFF; height:80px;} .sidebar-social-holder.instagram .asset-holder .super-title {font-size:12px; color:#FFF; padding-top:25px; padding-left:150px; text-transform:uppercase; text-align:left;} .sidebar-social-holder.instagram .asset-holder .title {font-size:24px; line-height:24px; color:#FFF; padding-left:150px; text-align:left;} .sidebar-social-holder.tumblr .coin {background-position:0 -339px; z-index:1; position:absolute; bottom:-50px; left:20px;} .sidebar-social-holder.tumblr .asset-holder {background:url(../images/social-wiget/bg-tumblr.jpg) no-repeat top left #FFF; height:80px;} .sidebar-social-holder.tumblr .asset-holder .super-title {font-size:12px; color:#FFF; padding-top:25px; padding-left:150px; text-transform:uppercase; text-align:left;} .sidebar-social-holder.tumblr .asset-holder .title {font-size:24px; line-height:24px; color:#FFF; padding-left:150px; text-align:left;} .sidebar-social-holder.google-plus .coin {background-position:0 -113px; z-index:1; position:absolute; bottom:-50px; left:20px;} .sidebar-social-holder.google-plus .asset-holder {background:url(../images/social-wiget/bg-google.jpg) no-repeat top left #FFF; height:80px;} .sidebar-social-holder.google-plus .asset-holder .super-title {font-size:12px; color:#FFF; padding-top:25px; padding-left:150px; text-transform:uppercase; text-align:left;} .sidebar-social-holder.google-plus .asset-holder .title {font-size:24px; line-height:24px; color:#FFF; padding-left:150px; text-align:left;} /*------------------------- search slider --------------------------*/ .search-box { padding:30px 20px; margin-bottom:30px;} .search-box .search-form {position:relative; margin:0px;} .search-box .search-form input[type="text"] {border: 1.5px solid #000; border-radius: 30px; background: none; height: 40px; outline: none; color: #000; padding: 0 40px 0 20px; width: 100%; font-size: 16px; line-height: 22px; font-family: 'Open Sans'; font-weight: 300; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;} .search-box .search-form input[type="text"]:focus {background:rgba(0,0,0,0.2);} .search-box .search-form button {border:none; background:none; position:absolute; z-index:1; top: 5px; right: 9px; } .search-box .search-form button .icon-search { display:inline-block; -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); font-size: 26px;} .search-box p {padding-top:10px; font-size:14px;} /*------------------------- social container --------------------------*/ .social-share-container-top {vertical-align:top;min-height: 70px;padding: 20px 0px 0px 0px;max-width: 800px;margin-left: auto;margin-right: auto;} .social-share-container {text-align:center;vertical-align:top;min-height: 70px;padding: 20px 0px 0px 0px;} .social-share-container > div {vertical-align:top; margin: 0 10px !important; min-height:50px !important; display:inline-block;} /*------------------------- paginator --------------------------*/ .paginator-holder { font-size:16px; line-height:19px; color:#2e3639; font-weight:600; padding:60px 0px 20px 0px; text-align:center;} .paginator-holder a {color: var(--home-art-description-color); padding:5px 12px; margin:0 5px 10px 5px; display: inline-block; } .paginator-holder a.active {color:#FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} .paginator-holder span {color: var(--home-art-description-color);} .paginator-holder .title {margin-right:10px;} .paginator-holder a:hover { background:rgba(110, 110, 110, 0.15); color:#3a3a3a; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} /*------------------------- products --------------------------*/ .sidebar-products { margin-bottom:30px; background:#333333;} .sidebar-products .title {font-size:14px; line-height:16px; color:#ffffff; padding:30px 30px 10px 30px; font-weight:400; } .sidebar-products ul { list-style:none;} .sidebar-products ul li { border-top:1px solid #424242; padding:15px 0px;} .sidebar-products ul li a {display:block; padding:0px 30px; color:#676767; font-size:14px; line-height:16px;} .sidebar-products ul li:nth-child(even) { } .sidebar-products ul li:nth-child(odd) { background:#2c2c2c;} .sidebar-products ul li:last-child { border-bottom:1px solid #424242; } .sidebar-products .product-img {float:left } .sidebar-products .product-info { float:left; margin-left:15px; margin-top:10px;} .sidebar-products .product-info .product-price { display:block; color:#FFF; margin-top:4px;} .sidebar-products .product-info .product-title {display:block; } /*------------------------- sidebar item --------------------------*/ .sidebar-item-holder {margin-bottom:30px;} .sidebar-item-holder.flyer-promo {} .sidebar-item-holder.creativemag {} .sidebar-item-holder.inspiration {} /*------------------------- sidebar social carousel --------------------------*/ .sidebar-social-carousel { margin-bottom:30px;} .sidebar-social-carousel .carousel-item {padding-bottom:0px;} .sidebar-social-carousel .navigator-holder { height: 11px;} .sidebar-social-carousel .navigator-holder .item {height: 10px; background: #d1d1d1; border-top: 1px solid #c1c1c1; width: 120px; float: left; cursor: pointer;} .sidebar-social-carousel .navigator-holder .active {} .sidebar-social-carousel .navigator-holder .instagram.active {background: #824F8B; border-top: 1px solid #7B3D75;} .sidebar-social-carousel .navigator-holder .tumblr.active {background: #5079a0; border-top: 1px solid #486582;} .sidebar-social-carousel .navigator-holder .google.active {background: #dd4b39; border-top: 1px solid #985149;} /*------------------------- sidebar text holder --------------------------*/ .sidebar-text-holder {margin-bottom:30px;} .sidebar-text-holder ul {list-style: none; font-size: 14px;} .sidebar-text-holder ul li.white {background: #FFF; padding:12px;} .sidebar-text-holder ul li p {} .sidebar-text-holder ul a {} /*------------------------- sidebar promoted holder --------------------------*/ .sidebar-promoted-holder { font-family: Open Sans;} .sidebar-promoted-holder .item-title {margin-bottom: 10px; text-transform: uppercase; text-align: center; font-size: 14px; line-height: 18px; font-weight: 600;} .sidebar-promoted-holder ul {} .sidebar-promoted-holder ul li {list-style: none; margin-bottom: 8px; margin-top: 8px;} .sidebar-promoted-holder ul li:first-child {display: none;} .sidebar-promoted-holder ul li a::after {clear:both; display: table; content: " "; width:1px; height: 1px;} .sidebar-promoted-holder ul li a .article-image-holder {width:35%; float:left;} .sidebar-promoted-holder ul li a .article-image-holder img {width:100%; display: block;} .sidebar-promoted-holder ul li a .article-info-holder {width:65%; float:left; padding:5px 0 0 10px;} .sidebar-promoted-holder ul li a .article-info-holder h3 {font-size: 16px; font-weight: 400; color: var(--title-home-color);} .sidebar-promoted-holder ul li a .article-info-holder span.date {color: #9a9a9a; font-size: 12px; font-family: Roboto; font-weight: 300;} .sidebar-promoted-holder ul li a:hover h3 {color: var(--logo-color);} .sidebar-promoted-holder .first {position: relative; margin-bottom: 15px; color:#FFF;} .sidebar-promoted-holder .first img {max-width:100%; display: block;} .sidebar-promoted-holder .first .info {position: absolute; left:0px; bottom:0px; z-index: 1; width:100%; height:80px; text-align: center;} .sidebar-promoted-holder .first .info h3 {padding-top:45px; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:80%; margin: 0 auto; color: #FFF;} .sidebar-promoted-holder .first .info span.date {color: #A2A2A2; font-size: 12px; font-family: Roboto; font-weight: 300;} .sidebar-promoted-holder .first a:hover h3 {color:#DADADA;} /*------------------------- sidebar twitch module --------------------------*/ .sidebar-twitch-panel { margin-bottom: 30px;} .sidebar-twitch-panel .item-title {margin-bottom: 10px; text-transform: uppercase; text-align: center; font-size: 14px; line-height: 18px; font-weight: 600; } .sidebar-twitch-panel .twitch-wrapper {padding: 12px; background: #FFF; width:100%; text-align: center; } .sidebar-twitch-panel .twitch-title {font-size: 12px; margin-bottom: 10px; display: block; font-weight: 600;} /*------------------------- error container --------------------------*/ .error-page {background:#292f33; color:#999;} .error-container { text-align:center;} .error-container .icon-logo {color:#FFF; font-size:120px;} .error-container .head-container { vertical-align:middle; padding:60px 0px;} .error-container h2 {margin-top:60px; font-size:32px; font-weight:700;} .error-container p {font-size:16px; margin-top:10px;} /*------------------------- footer --------------------------*/ .footer { padding:30px 12px; text-align:center; color: var(--box-white-home-color); background-color: var(--box-white-home-color); line-height: 26px;} .footer a {color:#c39; font-size:18px;} .footer ul{ list-style:none;} .footer ul li {display:inline-block; padding:0 10px; line-height: 2;} .footer p {font-size:13px; padding:8px 0 0 0; color:#737373;} /*------------------------- icons --------------------------*/ /* versiune vlad icoane prima @font-face { font-family: 'icomoon'; src:url('../fonts/icons/icomoon.eot?-bwgrct'); src:url('../fonts/icons/icomoon.eot?#iefix-bwgrct') format('embedded-opentype'), url('../fonts/icons/icomoon.woff?-bwgrct') format('woff'), url('../fonts/icons/icomoon.ttf?-bwgrct') format('truetype'), url('../fonts/icons/icomoon.svg?-bwgrct#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-menu:before {content: "\e600"; } .icon-search:before {content: "\e601";} .icon-shop:before {content: "\e602"; display: inline-block; padding-top: 3px;} .icon-mail:before {content: "\e603";} .icon-remove:before {content: "\e604";} .icon-logo:before {content: "\e605";} .icon-follow:before {content: "\e606";} .icon-rss-social:before {content: "\e607";} .icon-youtube-social:before {content: "\e608";} .icon-google-plus-social:before {content: "\e609";} .icon-twitter-social:before {content: "\e60a";} .icon-facebook-social:before {content: "\e60b";} .icon-info:before {content: "\e60c";} prima mea versiune icoane @font-face { font-family: "untitled-font-1"; src:url("../fonts/icons/untitled-font-1.eot"); src:url("../fonts/icons/untitled-font-1.eot?#iefix") format("embedded-opentype"), url("../fonts/icons/untitled-font-1.woff") format("woff"), url("../fonts/icons/untitled-font-1.ttf") format("truetype"), url("../fonts/icons/untitled-font-1.svg#untitled-font-1") format("svg"); font-weight: normal; font-style: normal; } [data-icon-social]:before { font-family: "untitled-font-1" !important; content: attr(data-icon-social); font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class^="icon-social-"]:before, [class*=" icon-social-"]:before { font-family: "untitled-font-1" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-social-youtube-play:before { content: "\61"; } .icon-social-facebook:before { content: "\62"; } .icon-social-twitter:before { content: "\63"; } .icon-social-instagram-brands:before { content: "\64"; } .icon-social-pinterest-p:before { content: "\65"; } .icon-social-tumblr:before { content: "\66"; } .icon-social-rss:before { content: "\67"; } .icon-social-envelope:before { content: "\68"; } */ @font-face { font-family: 'icomoon'; src: url('../fonts/icons/2021/icomoon.eot?elo938'); src: url('../fonts/icons/2021/icomoon.eot?elo938#iefix') format('embedded-opentype'), url('../fonts/icons/2021/icomoon.ttf?elo938') format('truetype'), url('../fonts/icons/2021/icomoon.woff?elo938') format('woff'), url('../fonts/icons/2021/icomoon.svg?elo938#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-menu:before { content: "\e600"; } .icon-search:before { content: "\e601"; } .icon-shop:before { content: "\e602"; } .icon-mail:before { content: "\e603"; } .icon-remove:before { content: "\e604"; } .icon-logo:before { content: "\e605"; } .icon-follow:before { content: "\e606"; } .icon-info:before { content: "\e60c"; } .icon-moon:before { content: "\1f319"; } .icon-social-youtube-play:before { content: "\1f39d"; } .icon-social-facebook:before { content: "\1f5e3"; } .icon-social-twitter:before { content: "\1f5f2"; } .icon-social-instagram-brands:before { content: "\1f327"; } .icon-social-pinterest-p:before { content: "\1f329"; } .icon-social-tumblr:before { content: "\1f325"; } .icon-social-rss:before { content: "\1f336"; } .icon-social-envelope:before { content: "\1f582"; } .icon-inline { display: inline; vertical-align: middle; padding: 0px 6px 0px 0px; } /*------------------------- media-query --------------------------*/ @media screen and (max-width: 1380px) { header > .inner { width:auto; padding:26px 0px;} .content-container > .inner { width: auto; max-width: 1120px; } .article-info-wrapper > .inner { width:auto;} } @media screen and (max-width: 1240px) { header > .inner { padding:26px 26px;} .content-container {padding:30px 20px 20px 20px;} .content-container .content-wrap > .inner {margin-right:380px;} .article-info-wrapper {} article.horizontal {margin-bottom:20px;} .related-articles ul li {float:left;position: relative;margin-bottom: 30px;width: 32%;margin-right: 1%;} } @media screen and (max-width: 1040px) { header ul.main-nav.right-nav .dropdown-wrapper {left:-51px;} header ul.main-nav.right-nav .dropdown-wrapper .triangle { left:84px;} .content-container .sidebar {float:none; margin:20px auto 0 auto; width:100%; text-align:center; } .sidebar > div[class*="sidebar-"], .sidebar > [data-sidebar-sticky] > div[class*="sidebar-"] { width:100%; max-width:100%; } .sidebar-social-holder.youtube {display:none;} .sidebar-item-holder.flyer-promo {display:none;} .sidebar-item-holder.creativemag {display:none;} .sidebar-item-holder.inspiration {display:none;} .sidebar-social-carousel {display:none;} .sidebar-promoted-holder {} .sidebar-promoted-holder ul {} .sidebar-promoted-holder ul li {float:left; width:50%; padding-right:15px; text-align: left;} .sidebar-promoted-holder ul li:nth-child(odd) {clear:both;} .sidebar-promoted-holder ul li:first-child {display: block;} .sidebar-promoted-holder .first {display: none;} .sidebar-promoted-holder .item-title {margin-bottom: 15px;} .sidebar-social-holder .asset-holder {background-repeat:repeat-x !important; } .content-container .content-wrap {float:none;} .content-container .content-wrap > .inner {margin-right:0px;} /*article.horizontal p {display:none;} article.vertical {float:none; width:100%; padding:0px !important; background: #FFF;} article.vertical a.article-thumbnail { width: 50%; float: left; box-sizing: border-box; padding-right: 15px; } article.vertical .article-info { float: left; width: 50%; padding-left: 15px; box-sizing: border-box; } article.vertical h2.article-title {padding:0px; overflow:auto; white-space:normal;}*/ header ul.main-nav > li > a > .text {display:none;} .content-container .sidebar .fixed-section {position:static;} .fullwidth-additional-info .box {float:none; width:100%;} .related-articles ul li {float:left;position: relative;margin-bottom: 30px;width: 46%;margin-right: 4%;} .responsive-ad-container, .responsive-ad-item {display: none;} .content-logo { margin-top: 0px;} .article-info-wrapper { margin: 0px; border-radius: 0px; } .sidebar-hide {display:none;} } @media screen and (max-width: 800px) { article.horizontal p {display:none;} } @media screen and (max-width: 768px) { .content-container .top-articles-list { display: none; } .cc_dialog.simple { max-width: 100% !important; } } @media screen and (max-width: 700px) { header ul.main-nav > li > a {padding: 40px 28px 0px 0px;} header ul.main-nav.right-nav .dropdown-wrapper {left:-91px;} header ul.main-nav.right-nav .dropdown-wrapper .triangle { left:112px;} header ul.main-nav.left-nav .dropdown-wrapper .triangle { left:25px;} .content-container .top-articles-list article.vertical {float:none; padding-right:0px; padding-left:0px; width:100%; margin-bottom: 10px;} .sidebar-promoted-holder ul li a .article-info-holder h3 {font-size: 13px; line-height: 18px;} .icbc-ui-assets-more.two-buttons .buttons-container .button-wrap { float:none; padding:0px !important; width: 100%;} .icbc-ui-assets-more.two-buttons .buttons-container .button-wrap:first-child { margin-bottom: 20px;} .icbc-ui-assets-less {width:100%;} .icbc-ui-assets-less.two-buttons .button-wrap {float:none; padding:0px !important; width: 100%;} .icbc-ui-assets-less.two-buttons .button-wrap:first-child { margin-bottom: 20px;} .related-articles ul li {float:none; width:100%; margin-right: 0px;} .tab:checked + label { font-size: 30px !important; width: 124px !important; padding-right: 24px; } .tab:first-of-type:not(:last-of-type) + label { width: 140px !important; } .tab + label { width: 100px !important; font-size: 20px !important; margin: 0px 0px 20px 0px !important; } .ad-page-responsive { display: none; } article.article-content h2 { font-size: 20px; line-height: 30px; } .tab:first-of-type:not(:last-of-type) + label { padding-right: 0px !important; } } @media screen and (max-width: 600px) { article.horizontal a.article-thumbnail {width:100%; float:none; padding-right:0px;} article.horizontal .article-info {float:none; width:100%; padding-left:0px;} article.horizontal .article-meta {padding:15px 0px 0px 0px;} article.horizontal h2.article-title, article.vertical h2.article-title {padding:10px 0px 0px 0px;} .article-info-wrapper .article-meta li {padding:0 5px; } .article-short-navigator .previous {float:none; width:100%; display:block;} .article-short-navigator .next {float:none; width:100%; display:block;} .post-comment .aditional-info-wrapper input {width:100%;} .comment-item .data-container .date {float:none; margin:2px 0 5px 0; padding:0px;} .comment-item .data-container .name {float:none; margin-bottom:0px;} .sidebar-promoted-holder ul li {float:none; clear:both; width:100%; padding-right:0px; text-align: left;} .sidebar-promoted-holder ul li a .article-info-holder h3 {font-size: 15px; line-height: 22px;} .sidebar-promoted-holder ul li a::after {clear:both; display: block; content: " "; } .story .story-item span {text-align: left !important; font-size: 13px !important;} article.horizontal {margin-bottom: 0px;} } @media screen and (max-width: 460px) { header > .inner { padding:26px 12px;} header ul.main-nav > li > a {padding:18px 0px 0px 12px; } header [class^="icon-"] {font-size:26px;} header ul.main-nav.right-nav .dropdown-wrapper {left:-115px;} header ul.main-nav.right-nav .dropdown-wrapper .triangle { left:131px;} header ul.main-nav.left-nav .dropdown-wrapper .triangle { left:18px;} #page-holder #side-holder {width:280px;} #page-holder.side-open #content-holder { -webkit-transform: translate3d(280px, 0, 0); transform: translate3d(280px, 0, 0);} #page-holder.side-open .side-menu-button {-webkit-transform: translate3d(280px, 0, 0); transform: translate3d(280px, 0, 0);} #page-holder .side-menu-button {font-size:24px;} #page-holder #side-holder > ul > li > a {font-size:15px;} #page-holder #side-holder > ul > li li a {font-size:13px;} #page-holder #side-holder .logo-holder {max-width: 230px;} .content-container {padding: 30px 0px 0px 0px;} .inner {padding: 0px 0px 0px 0px !important;} .stream-text {padding: 0px 16px 16px 16px !important; margin-top: -6px;} .stream-viewmore {padding: 0px 16px;} article.article-content {padding: 0px 16px 0px 16px; font-size: 16px; line-height: 1.5;} .latest-padding {padding: 0px 16px;} .category-tags-wrap {padding: 60px 16px 0px 16px;} .related-articles {padding: 0px 16px 0px 16px;} .inf-load-text { padding: 0px 16px;} } @media screen and (max-width: 400px) { .head-logo a.logo > .icon-logo {font-size:80px; line-height:80px;} header > .inner {padding:0px 0px;} header ul.main-nav > li > a {padding: 14px 3px 0px 8px; height: 56px;} header [class^="icon-"] {font-size:22px;} header ul.main-nav > li.border { margin-top: 17px;} header ul.main-nav .dropdown-wrapper {top:60px;} header .search-holder .close {font-size:24px; right:20px;} header .search-holder .search-input {font-size:18px; padding:17px 20px 0 20px;} header .search-holder {height:60px; top: -4px;} .content-container { padding: 20px 0px 10px 0px; } .article-meta {font-size:12px; padding:15px 10px 0px 10px !important;} .article-meta-art {font-size:14px; padding:30px 10px 8px 0px !important;} article.horizontal h2.article-title, article.vertical h2.article-title {font-size: 16px; line-height: 22px; padding:5px 10px 0px 10px;} article.vertical h2.article-title { white-space: initial; overflow: visible; text-overflow: initial;} .article-info-wrapper { padding: 25px 10px 25px 10px;} .article-info-wrapper h2 {font-size: 30px; max-width: 100%;} article.article-content {font-size: 16px; line-height: 1.5;} article.article-content .img-wrapper {padding:15px; margin-left:-15px; margin-right:-15px;} .ad-article-responsive {padding:15px; margin:-15px -15px 15px -15px;} .content-container .section-title {font-size:18px;} } @media screen and (max-width: 370px) { .tab:checked + label { font-size: 24px !important; } .tab + label { margin: 0px -16px 20px 0px !important; } } .product-social-links {line-height: 12px; clear: both;} .collapsible {color: #c39; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: center; outline: none; font-size: 18px; background-color: var(--nav-backgr-color); font-family: 'Raleway';border-bottom: 1px solid #0000001a; font-weight: 500;} .active, .collapsible:hover { } .content-comments {padding: 15px 0px; display: none; overflow: hidden; } ::-moz-selection { color: white; background: #66c; } ::selection { color: white; background: #66c; } .content-logo { height: 35px; overflow: hidden; font-family: 'Raleway', Open Sans, 'Roboto', Arial, Verdana, sans-serif !important; font-size: 26px; line-height: 39px; color: var(--logo-color);; vertical-align: top; padding-top: 0px; } .content-logo__container { font-weight: 300; overflow: hidden; height: 40px; padding: 0 0px; margin-top: -9px; } .content-logo__container:before { content: ''; left: 0; } .content-logo__container:after { content: ''; position: absolute; right: 0; } .content-logo__container:after, .content-logo__container:before { position: absolute; top: 0; color: #fff; font-size: 42px; line-height: 40px; -webkit-animation-name: opacity; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-name: opacity; animation-duration: 2s; animation-iteration-count: infinite; } .content-logo__container__text { display: inline; float: left; margin: 0; } .content-logo__container__list { margin-top: 0px; padding-left: 81px; text-align: left; list-style: none; -webkit-animation-name: change; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; animation-name: change; animation-duration: 10s; animation-iteration-count: infinite; } .content-logo__container__list__item { line-height: 40px; margin: 0; font-weight: 500; } @-webkit-keyframes opacity { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @-webkit-keyframes change { 0%, 12.66%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 16.66%, 29.32% { -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); } 33.32%,45.98% { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } 49.98%,62.64% { -webkit-transform: translate3d(0, -75%, 0); transform: translate3d(0, -75%, 0); } 66.64%,79.3% { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } 83.3%,95.96% { -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); } } @keyframes opacity { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @keyframes change { 0%, 12.66%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 16.66%, 29.32% { -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); } 33.32%,45.98% { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } 49.98%,62.64% { -webkit-transform: translate3d(0, -75%, 0); transform: translate3d(0, -75%, 0); } 66.64%,79.3% { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } 83.3%,95.96% { -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); } } .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .dot { height: 5px; width: 5px; background-color: #c39; border-radius: 50%; display: block; position: absolute; margin-left: 0px; margin-top: -2px; } .menu-page {font-size: 22px;color: #fff;padding: 44px 0px 0px 0px;display: block;margin: 0px auto;width: 34%;font-weight: 800;font-family: 'Mulish', 'Open Sans', Verdana, Arial, sans-serif;margin-left: 76px;margin-top: -122px;} .menu-page a { color:#ebebff; } .menu-cat {padding:0px 0px;font-size: 27px;font-weight: 800;font-family: 'Open Sans', Verdana, Arial, sans-serif;letter-spacing: -1px;} .menu-social {color: #fff;padding: 40px 0px 20px 0px;margin: 0px auto;line-height: 13px;max-width: 265px;} .menu-social a { color:var(--home-art-description-color); } .menu-social-space {font-size: 22px;padding: 13px 18px;margin: 0px auto;display: -webkit-inline-box;display: inline-block;line-height: 13px;} .menu-design-tutorials { background: linear-gradient(to right, #f85ade 0%, #663dfa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .menu-inspiration { background: linear-gradient(to right, #f85d96 0%, #f7c063 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .menu-freebies { background: linear-gradient(to right, #4de2cf 0%, #f1d300 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .menu-web-development { background: linear-gradient(to right, #00e3ff -9%, #6594e8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icon-slidemenu { cursor: pointer; font-size: 30px; border-radius: 100px; color: var(--logo-color);; padding: 15px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; overflow: hidden; } .icon-menu:hover { color: #FFF; background: linear-gradient(30deg,#c39 11%,#391397 100%); transition: all 0.0s ease-in-out; } .topnav-main { height: auto; } .topnav { width: 100%; top: 12px; left: 0px; margin: 0 auto; padding: 40px 30px 50px 30px; float: left; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .dark-icon { margin: 21px 0px 0px 0px; } .topnav a { float: left; color: var(--logo-color); text-align: center; padding: 13px 11px; text-decoration: none; font-size: 21px; } .topnav a:hover { color: #c39; } .topnav-centered { float: none; position: absolute; left: 50%; transform: translate(-50%, -50%); top: 65px; display: inline-block; } .topnav-right { float: right; } .topnav-left { float: left; } /* Responsive navigation menu (for mobile devices) */ @media screen and (max-width: 700px) { .topnav a, .topnav-right { float: none; display: none; } .topnav-right { position: relative; float: left; padding-top: 15px; margin-top: 55px; } .topnav { padding: 0px 0px; padding-bottom: 25px; } .topnav-centered { position: absolute; left: 56%; transform: translate(-50%, -50%); top: 30px; } .topnav-main { height: 10px; } .topnav-left { float: left; padding: 18px 0px 0px 14px; } .dark-icon { display: none; } .ad-page-responsive-art { margin: 0 auto; margin-bottom: 0px; } .article-info-wrapper h1 { font-size: 26px; padding: 0px 30px; } .social-share-container-top { padding: 20px 0px 0px 30px; } .article-title-sticky { font-size: 24px !important; line-height: 30px !important; padding: 0px 16px 18px 16px !important; } .horizontal-sticky p { font-size: 16px !important; line-height: 24px !important; } .horizontal-sticky { margin-bottom: 20px !important; } .fullwidth-module { margin-top: -80px; } } @media screen and (max-width: 459px) { .topnav-centered { left: 50%; top: 37px; } .menu-social { padding: 10px 0px 20px 0px; } #page-holder #side-holder ul {padding: 0px 0px 0px 30px;} } @media screen and (max-width: 400px) { .topnav-centered { left: 53%; top: 50px; } .topnav-left { float: left; padding: 28px 0px 0px 14px; } .article-info-wrapper h1 { font-size: 24px; padding: 0px 10px; } .social-share-container-top { padding: 20px 0px 0px 10px; } } @media screen and (min-width: 769px) { } @media screen and (min-width: 1260px) { .content-container .top-articles-list {margin-bottom:0px;width: 100vw;position: relative;left: 50%;right: 50%;margin-left: -50vw;margin-right: -50vw;padding: 0px 40px;} } @media screen and (min-width: 1300px) { .content-container .top-articles-list {margin-bottom:0px;width: 100vw;position: relative;left: 50%;right: 50%;margin-left: -50vw;margin-right: -50vw;padding: 0px 40px;} article.vertical h2.article-title {font-size: 19px;} article.vertical:nth-child(even) {padding-left: 14px;padding-right: 14px;} article.vertical:nth-child(odd) {padding-left: 14px;padding-right: 14px;} } @media screen and (min-width: 1800px) { .content-container .top-articles-list {padding: 0px 100px;} } @media screen and (min-width: 1400px) { .topnav { padding: 40px 0px 50px 0px; } .article-info-wrapper {padding: 22px 70px 64px 70px;} } .menu-social-nav { padding: 0px 0px 0px 0px; } .menu-social-space-nav {padding: 0px 0px;margin: 0px auto; line-height: 13px; display: inline;} .menu-night-nav {margin: 25px 0px 29px 142px;} .menu-icon { height: 30px; width: 30px; position: fixed; z-index: 2; left: 50px; top: 30px; cursor: pointer; } .menu-icon__line { height: 2px; width: 30px; display: block; background-color: #ffffff; margin-bottom: 4px; transition: background-color .5s ease, -webkit-transform .2s ease; transition: transform .2s ease, background-color .5s ease; transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease; } .menu-icon__line-left { width: 15px; } .menu-icon__line-right { width: 15px; float: right; } .nav { position: fixed; z-index: 1; } .nav:before, .nav:after { content: ""; position: fixed; width: 100vw; height: 100vh; background: rgba(234, 234, 234, 0.2); z-index: -1; transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s; transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s; transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s; -webkit-transform: translateX(0%) translateY(-100%); transform: translateX(0%) translateY(-100%); } .nav:after { background: white; transition-delay: 0s; } .nav:before { transition-delay: .1s; } .nav__content { position: fixed; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); width: 100%; text-align: center; font-size: calc(2vw + 10px); font-weight: 200; cursor: pointer; } .nav__list-item { position: relative; display: inline-block; transition-delay: 0.8s; opacity: 0; -webkit-transform: translate(0%, 100%); transform: translate(0%, 100%); transition: opacity .2s ease, -webkit-transform .3s ease; transition: opacity .2s ease, transform .3s ease; transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease; margin-right: 25px; } .nav__list-item:before { content: ""; position: absolute; background: #000000; width: 20px; height: 1px; top: 100%; -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); transition: all .3s ease; z-index: -1; } .nav__list-item:hover:before { width: 100%; } body.nav-active .menu-icon__line { background-color: #000; -webkit-transform: translateX(0px) rotate(-45deg); transform: translateX(0px) rotate(-45deg); } body.nav-active .menu-icon__line-left { -webkit-transform: translateX(1px) rotate(45deg); transform: translateX(1px) rotate(45deg); } body.nav-active .menu-icon__line-right { -webkit-transform: translateX(-2px) rotate(45deg); transform: translateX(-2px) rotate(45deg); } body.nav-active .nav { visibility: visible; } body.nav-active .nav:before, body.nav-active .nav:after { -webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%); } body.nav-active .nav:after { transition-delay: .1s; } body.nav-active .nav:before { transition-delay: 0s; } body.nav-active .nav__list-item { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease; transition: opacity .3s ease, transform .3s ease, color .3s ease; transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease; } body.nav-active .nav__list-item:nth-child(0) { transition-delay: 0.5s; } body.nav-active .nav__list-item:nth-child(1) { transition-delay: 0.6s; } body.nav-active .nav__list-item:nth-child(2) { transition-delay: 0.7s; } body.nav-active .nav__list-item:nth-child(3) { transition-delay: 0.8s; } body.nav-active .nav__list-item:nth-child(4) { transition-delay: 0.9s; } .box-white-home { position: absolute; background: var(--box-white-home-color); margin: 0 auto; width: 100%; height: 240px; padding: 10px; left: 0px; top: 0px; z-index:-1; border-radius: 0px 0px 0px 6px; } @media screen and (max-width: 900px) { .box-white-home { height: 200px;} } @media screen and (min-width: 1041px) { .featured-tab {max-width: 800px;} } @media screen and (min-width: 1020px) { .article-short-navigator { text-align: center; margin-bottom: 18px; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top: 70px; } .related-articles ul { list-style: none; margin-bottom: 18px; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding: 0px 94px; } .author-bio { font-family: 'Open Sans'; margin-top: 0px; margin-bottom: 30px; background: var(--nav-backgr-color); text-align: center; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding: 0px 94px; } .article-coloane { list-style: none; margin-bottom: 18px !important; max-width: 100vw !important; position: relative; left: 50%; right: 50%; margin-left: -50vw !important; margin-right: -50vw !important; padding: 0px 94px; } } .menu-social-footer { padding: 20px 0px 0px 0px; margin: 0px auto; line-height: 13px; max-width: 100%; } .icon-menu-art { color: #fff !important; } .icon-menu-art a { color: #fff !important; } .icon-menu-art a:hover { color: #c39 !important; } .article-title-sticky { padding: 20px 0px 20px 0px; font-size: 38px; line-height: 50px; font-family: 'Open Sans', Arial, Verdana, sans-serif; font-weight: 800; color: var(--title-home-color); letter-spacing: -1px; } .horizontal-sticky {width:100%;margin-bottom: 20px;border-bottom: 1px solid var(--art-horz-border-color);padding: 0px 0px 0px 0px;} .horizontal-sticky p { font-size: 20px; padding: 0px 0px 20px 0px; line-height: 30px; font-weight: 400; color: var(--home-art-description-color); overflow-x: hidden; overflow-y: hidden; font-family: 'Mulish', 'Open Sans', Verdana, Arial, sans-serif; } .horizontal-sticky h1.article-title-sticky a { color: var(--title-home-color); } .horizontal-sticky img { max-width: 100%; display: block; } .collapsible-art { color: #c39; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: center; outline: none; font-size: 18px; background-color: var(--nav-backgr-color); font-family: 'Raleway'; border-bottom: 1px solid #0000001a; font-weight: 500; margin-top: -16px; } .collapsible-art-home { color: #fff; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: center; outline: none; font-size: 18px; background-color: var(--nav-backgr-color); font-family: 'Mulish', 'Open Sans', Verdana, Arial, sans-serif; border-bottom: 1px solid #0000001a; font-weight: 600; margin: 20px 0px 20px 0px; padding: 30px 0px 30px 0px; border-radius: 6px; background: linear-gradient(30deg,#c39 11%,#391397 100%); } .icon-logo-icbc { width: 70px; height: 70px; fill: #fff; } /*------------------------- story carousel --------------------------*/ .story { padding: 10px 0px 0px 16px; width: 106% !important; } .story .story-item { height: 180px; border-radius: 15px; background: #3e7fff; background-repeat: no-repeat; background-size: cover; background-position: center center; color: white; position:relative; font-size:13px; background-color: #9001a9; } .story .story-item:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: black; opacity: .2; border-radius: 15px; } .story .story-item span { position: absolute; padding: 10px 5px; font-size: 17px; font-family: Roboto; font-weight: 700; bottom: 2px; flex-wrap: nowrap; left: 0; overflow: hidden; word-wrap: normal; right: 0; text-decoration: none; text-overflow: ellipsis; white-space: normal; word-break: normal; text-shadow: 0 1px 2px rgb(0 0 0), 0 5px 10px rgb(0 0 0 / 26%); text-align: center; } .story .owl-stage { right: 28px; } @media screen and (min-width: 769px) { .story {display: none !important;} .swipe-text-story {display: none !important;} .featured-instagram {width: 100%;} } @media screen and (max-width: 320px) { .story .story-item {height: 160px;} } .swipe-text-story { font-size: 13px; font-family: Roboto; padding: 10px 0px 28px 0px; text-align: center; color: var(--home-art-description-color); } /*------------------------- owl carousel css --------------------------*/ .owl-carousel, .owl-carousel .owl-item { -webkit-tap-highlight-color: transparent; position: relative } .owl-carousel { display: none; width: 100%; z-index: 1 } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; touch-action: manipulation; -moz-backface-visibility: hidden } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0 } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; -webkit-transform: translate3d(0, 0, 0) } .owl-carousel .owl-item, .owl-carousel .owl-wrapper { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0) } .owl-carousel .owl-item { min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-touch-callout: none } .owl-carousel .owl-item img { display: block; width: 100% } .owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled { display: none } .no-js .owl-carousel, .owl-carousel.owl-loaded { display: block } .owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev { cursor: pointer; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot { background: 0 0; color: inherit; border: none; padding: 0!important; font: inherit; display: none; } .owl-carousel.owl-loading { opacity: 0; display: block } .owl-carousel.owl-hidden { opacity: 0 } .owl-carousel.owl-refresh .owl-item { visibility: hidden } .owl-carousel.owl-drag .owl-item { -ms-touch-action: pan-y; touch-action: pan-y; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .owl-carousel.owl-grab { cursor: move; cursor: grab } .owl-carousel.owl-rtl { direction: rtl } .owl-carousel.owl-rtl .owl-item { float: right } .owl-carousel .animated { animation-duration: 1s; animation-fill-mode: both } .owl-carousel .owl-animated-in { z-index: 0 } .owl-carousel .owl-animated-out { z-index: 1 } .owl-carousel .fadeOut { animation-name: fadeOut } @keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } .owl-height { transition: height .5s ease-in-out } .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity .4s ease } .owl-carousel .owl-item .owl-lazy:not([src]), .owl-carousel .owl-item .owl-lazy[src^=""] { max-height: 0 } .owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d } .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000 } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url(owl.video.play.png) no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform .1s ease } .owl-carousel .owl-video-play-icon:hover { -ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3) } .owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn { display: none } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity .4s ease } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100% } .featured-instagram { font-size: 18px; padding: 0px 0px 0px 0px; font-weight: 400; color: var(--home-art-description-color); overflow-x: hidden; overflow-y: hidden; font-family: 'Mulish', 'Open Sans', Verdana, Arial, sans-serif; text-align: center; display: block; margin-left: auto; margin-right: auto; } /* hover poze articole */ .img-hover-zoom {overflow: hidden;} .img-hover-zoom img {transition: transform .5s ease;} .img-hover-zoom:hover img { -ms-transform: scale(1.1); /* IE 9 */ -webkit-transform: scale(1.1); /* Safari 3-8 */ transform: scale(1.1); } /* articol grid coloane */ .article-coloane { margin: auto; max-width: 100%; text-align: center; } .cell3 img { display: block; max-width: 100%; margin: 0.3rem; } .cell2 img { display: block; max-width: 100%; margin: 0.3rem; } @media screen and (min-width: 600px) { .grid { display: inline-flex; flex-wrap: wrap; flex-direction: row; } .cell3 { width: 100%; margin-bottom: 15px; margin-left: -7px; } .cell2 { width: 100%; margin-bottom: 15px; margin-left: -7px; } } @media screen and (min-width: 800px) { .cell3 { width: calc(96% / 3); margin: 0.3rem; } .cell2 { width: calc(97% / 2); margin: 0.3rem; } } /* taburi homepage */ .tab-wrap { -webkit-transition: 0.3s box-shadow ease; transition: 0.3s box-shadow ease; max-width: 100%; display: -webkit-box; display: flex; flex-wrap: wrap; position: relative; list-style: none; margin: 0; } .tab { display: none; } .tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) { opacity: 1; -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease; transition: 0.2s opacity ease-in, 0.8s -webkit-transform ease; transition: 0.2s opacity ease-in, 0.8s transform ease; transition: 0.2s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease; position: relative; top: 0; z-index: 100; -webkit-transform: translateY(0px); transform: translateY(0px); } .tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) { opacity: 1; -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease; transition: 0.2s opacity ease-in, 0.8s -webkit-transform ease; transition: 0.2s opacity ease-in, 0.8s transform ease; transition: 0.2s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease; position: relative; top: 0; z-index: 100; -webkit-transform: translateY(0px); transform: translateY(0px); } .tab:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3) { opacity: 1; -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease; transition: 0.2s opacity ease-in, 0.8s -webkit-transform ease; transition: 0.2s opacity ease-in, 0.8s transform ease; transition: 0.2s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease; position: relative; top: 0; z-index: 100; -webkit-transform: translateY(0px); transform: translateY(0px); } .tab:first-of-type:not(:last-of-type) + label { border-top-right-radius: 0; border-bottom-right-radius: 0; -webkit-transition: border-color 0s, font-size 0.3s ease-out; transition: border-color 0s, font-size 0.3s ease-out; font-family: 'Mulish', 'Open Sans', Verdana, Arial, sans-serif; width: 180px; height: 73px; text-align: center; line-height: 70px; white-space: nowrap; overflow: hidden; padding-right: 20px; border-bottom: 1px solid var(--art-horz-border-color); } .tab:not(:first-of-type):not(:last-of-type) + label { border-radius: 0; -webkit-transition: border-color 0s, font-size 0.3s ease-out; transition: border-color 0s, font-size 0.3s ease-out; } .tab:last-of-type:not(:first-of-type) + label { border-top-left-radius: 0; border-bottom-left-radius: 0; -webkit-transition: border-color 0s, font-size 0.3s ease-out; transition: border-color 0s, font-size 0.3s ease-out; font-family: 'Mulish', 'Open Sans', Verdana, Arial, sans-serif; -webkit-transition: border-color 0s, font-size 0.3s ease-out; transition: border-color 0s, font-size 0.3s ease-out; } .tab:checked + label { font-size: 40px; line-height: 26px; cursor: default; color: #c39; -webkit-transition: border-color 0s, font-size 0.3s ease-out; transition: border-color 0s, font-size 0.3s ease-out; width: 180px; height: 73px; text-align: center; line-height: 70px; white-space: nowrap; overflow: hidden; } .tab:checked + label:hover { -webkit-transition: border-color 0s, font-size 0.3s ease-out; transition: border-color 0s, font-size 0.3s ease-out; } .tab + label { cursor: pointer; display: block; text-decoration: none; color: var(--home-art-description-color); text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: center; -webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease; transition: 0.3s background-color ease, 0.3s box-shadow ease; box-sizing: border-box; margin: 30px 0px 30px 0px; font-size: 26px; width: 180px; height: 73px; line-height: 70px; white-space: nowrap; overflow: hidden; border-bottom: 1px solid var(--art-horz-border-color); } .tab + label:hover { } .tab__content { background-color: transparent; position: absolute; width: 100%; z-index: -1; opacity: 0; left: 0; -webkit-transform: translateY(-3px); transform: translateY(-3px); } .stream-page { margin: auto; padding: 10px; max-width: 800px; } /* loader-ellips ------------------------- */ .loader-ellips { font-size: 14px; position: relative; width: 4em; height: 1em; margin: 10px auto; } .loader-ellips__dot { display: block; width: 1em; height: 1em; border-radius: 0.5em; background: #c39; position: absolute; animation-duration: 0.5s; animation-timing-function: ease; animation-iteration-count: infinite; } .loader-ellips__dot:nth-child(1), .loader-ellips__dot:nth-child(2) { left: 0; } .loader-ellips__dot:nth-child(3) { left: 1.5em; } .loader-ellips__dot:nth-child(4) { left: 3em; } @keyframes reveal { from { transform: scale(0.001); } to { transform: scale(1); } } @keyframes slide { to { transform: translateX(1.5em); } } .loader-ellips__dot:nth-child(1) { animation-name: reveal; } .loader-ellips__dot:nth-child(2), .loader-ellips__dot:nth-child(3) { animation-name: slide; } /* stylelint-disable-next-line no-duplicate-selectors */ .loader-ellips__dot:nth-child(4) { animation-name: reveal; animation-direction: reverse; } .moon h3{ font-size: 24px; background: var(--moon); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color:transparent; } .button-moon { padding: 10px 0px 0px 12px; border: none; cursor: pointer; transition: .3s; background-color: transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; } .inf-load-wrapper-cell { display: flex; overflow: hidden; } @-webkit-keyframes placeHolderShimmer { 0% { background-position: -800px 0; } 100% { background-position: 800px 0; } } @keyframes placeHolderShimmer { 0% { background-position: -800px 0; } 100% { background-position: 800px 0; } } .animated-background, .inf-load-content-load, .inf-load-text-line2, .inf-load-text-line, .inf-load-text-line4, .inf-load-text-line5 { -webkit-animation-duration: 0.95s; animation-duration: 0.95s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: placeHolderShimmer; animation-name: placeHolderShimmer; -webkit-animation-timing-function: linear; animation-timing-function: linear; background: #F6F6F6; background: var(--inf-load-color); background-size: 800px 104px; height: 96px; position: relative; max-width: 100%; } .inf-load-text { max-width: 100%; } .inf-load-text-line { height: 35px; width: 550px; border-radius: 4px; margin: 10px 0; } .inf-load-text-line2 { height: 35px; width: 150px; border-radius: 4px; margin: 12px 0; } .inf-load-content-load { height: 160px; width: 700px; border-radius: 4px; margin: 20px 0; } .inf-load-text-line4 { height: 25px; width: 600px; border-radius: 4px; margin: 10px 0; } .inf-load-text-line5 { height: 25px; width: 250px; border-radius: 4px; margin: 12px 0; } .grid-masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows: 50px; grid-gap: 1.7em; counter-reset: item; } .grid-masonry img { width:100%; height: 100%; display:block; border-radius: 6px; background-color: #9001a9; } .grid-item { border-radius: 6px; overflow: hidden; position: relative; background-position: center; background-size: cover; } .product-button { color: #fff; cursor: pointer; border: none; text-align: center; outline: none; font-size: 16px; font-family: 'Mulish', 'Open Sans', Verdana, Arial, sans-serif; border-bottom: 1px solid #0000001a; font-weight: 600; margin:auto; padding: 16px 26px 16px 26px; border-radius: 6px; background-color: #66c; display: flex; } .product-title { padding: 16px 20px 20px 20px; font-size: 22px; line-height: 30px; font-family: 'Mulish', 'Open Sans', Verdana, Arial, sans-serif; font-weight: 700; color: var(--title-home-color); text-align:center; } /*------------------------- culori dark mode --------------------------*/ body { --moon: linear-gradient(30deg, #c39 11%, #391397 100%); --bg-color: #f7f9fa; --title-home-color: #414141; --art-horz-border-color: #efefef; --home-art-description-color: #8c8c8c; --box-white-home-color: #fff; --articol-color: #545454; --title-h3-color: #3a3a3a; --logo-color: #000; --tag-holder-color: #F3F7FA; --nav-backgr-color: #fff; --nav-backgr-top-color: linear-gradient(30deg,#c39 11%,#391397 100%); --comment-box-color: #fff; --section-title: #575757; --link-highlight: #dbe4ff; --menu-nav-backgr: ##F3F7FA; --inf-load-color: linear-gradient(to right, #ced4da 8%, #dee4ea 18%, #ced4da 33%); } body[data-light-mode=dark] { --moon: linear-gradient(30deg, #c39 11%, #391397 100%); --bg-color: #161625; --title-home-color: #e1e1ff; --art-horz-border-color: #212133; --home-art-description-color: #9d9dbb; --box-white-home-color: linear-gradient(30deg,#161625 40%,#541b75 100%); --articol-color: #b8b8d2; --title-h3-color: #e1e1ff; --logo-color: #fff; --tag-holder-color: #101417; --nav-backgr-color: #161625; --nav-backgr-top-color: #000; --comment-box-color: #161625; --section-title: #fff; --link-highlight: #451b77; --menu-nav-backgr: ##F3F7FA; --inf-load-color: linear-gradient(to right, #434361 8%, #4c4c7a 18%, #434361 33%); } body[data-light-mode="dark"] button { --moon: linear-gradient(40deg, #ff0080, #ff8c00 70%); --bg-color: #f7f9fa; --title-home-color: #414141; --art-horz-border-color: #efefef; --home-art-description-color: #8c8c8c; --box-white-home-color: #fff; --articol-color: #545454; --title-h3-color: #3a3a3a; --logo-color: #000; --tag-holder-color: #F3F7FA; /* --nav-backgr-color: #fff; */ --nav-backgr-top-color: linear-gradient(30deg,#c39 11%,#391397 100%); --comment-box-color: #fff; --section-title: #575757; --link-highlight: #dbe4ff; --menu-nav-backgr: ##F3F7FA; --inf-load-color: linear-gradient(to right, #434361 8%, #4c4c7a 18%, #434361 33%); }