@charset "utf-8"; /*----------------------------------------------------------------------------- Matrix Responsive HTML Template - Core CSS - Light ------------------------------------------------------------------------------- Version : 1.2.3 Date : 21 / 02 / 2013 Author : Billy Foo -----------------------------------------------------------------------------*/ /*.sbp-content ul li{list-style:none;}*/ /*.sbp-content ul li:before{content:"• "; font-size:15px;position:relative;top:0px; }*/ .sbp-content ul li{ font-size:1.0em; line-height:1.0em; font-family:"Helvetica Neue", Arial, Tahoma, sans-serif;} *{ margin:0; padding:0; border:0; } a{ text-decoration:none; border:none; } body{ font:62.5%/1.5 "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; background:url(images/bg/background.jpg) center top no-repeat; background-attachment:fixed; background-size:cover; -moz-background-size:cover; -webkit-background-size:cover; -o-background-size:cover; min-width: 360px; } hr{ height:1px; } span.Apple-tab-span{ white-space:normal !important; } .fail{border: 1px solid red;} textarea{resize: none;} #container{ max-width:960px; text-align:center; margin:auto; /*padding-top:50px;*/ } .clearfix:after{ content:" "; clear:both; height:0; visibility:hidden; display:block; } .centered{ margin:0 auto; } .db{display:block;} .oh{overflow: hidden;} .fl{float:left;} .fr{float:right;} .pa{position:absolute;} .pr{position:relative;} .pb0{padding-bottom: 0px !important;} .pb5{padding-bottom: 5px !important;} .pt0{padding-top: 0px !important;} .pt10{padding-top: 10px !important;} .pb10{padding-bottom: 10px !important;} .pb20{padding-bottom: 20px !important;} .pl10{padding-left: 10px !important;} .pl15{padding-left: 15px !important;} .pr10{padding-right: 10px !important;} .m0{margin: 0px !important;} .mb0{margin-bottom: 0px !important;} .mb5{margin-bottom: 5px !important;} .mb10{margin-bottom: 10px !important;} .mb20{margin-bottom: 20px !important;} .mt0{margin-top: 0px !important;} .mt5{margin-top: 5px !important;} .mt10{margin-top: 10px !important;} .mt18{margin-top: 18px !important;} .mt20{margin-top: 20px !important;} .mt30{margin-top: 30px !important;} .mt40{margin-top: 40px !important;} .mt44{margin-top: 44px !important;} .ml10{margin-left: 10px !important;} .ml20{margin-left: 20px !important;} .ml30{margin-left: 30px !important;} .mr10{margin-right: 10px !important;} .tal{text-align: left;} .tar{text-align: right;} .tac{text-align: center;} .clear{clear:both;} .db{display: block;} .dn{display: none;} .fs8{font-size: 8px !important;} .fs10{font-size: 10px !important;} .fs12{font-size: 12px !important;} .fs14{font-size: 14px !important;} .fs17{font-size: 17px !important;} .fs18{font-size: 18px !important;} .fs20{font-size: 20px !important;} .mh0{min-height: 0px !important;} .r0{right:0px !important;} .l0{left:0px !important;} h1, h2, h3, h4, h5{ font-weight:normal; padding:5px 0; line-height: 32px; } h1{ font-size:36px; font-family: 'Segoe UI Light' !important; } h2{ font-size:2.6em; } h3{ font-size:20px; } h4{ font-size:18px; } h5{ font-size:2.0em; } p{ font-size:1.3em; line-height:1.5em; padding-bottom:20px; font-family:"Helvetica Neue", Arial, Tahoma, sans-serif; } .blue-bg{ background: #1BA1E2 !important; } .dark-blue-bg{ background:#2D88EF !important; } .red-bg{ background: #D9442F !important; } .green-bg{ background: #00A000 !important; } .orange-bg{ background: #D7522B !important; } .orange-light-bg{ background: #FF791F !important; } .orange-dark-bg{ background: #D7522B !important; } .grey-bg{ background: #3E3E3E !important; } .dark-purple-bg{ background: #5938B4 !important; } .white-bg{ background: #FFF !important; } .white-bg span{ color:#000 !important; } /*---------------------------------------------------------------------------- Header ----------------------------------------------------------------------------*/ header a{ border:none; text-decoration:none; } header{ min-height:100px; margin:0 5px 10px 5px; background: #2D88EF; } .header-link{ text-decoration:none; border:none; color:#ffffff; cursor: pointer; } #headerlink{ float:left; } #logo{ display:inline; margin: 10px 0 0 0px; vertical-align:top; } #sitename{ font-size:7.2em; color:#202020; line-height:100px; margin-left:20px; } nav{ font-size:1.4em; text-transform:uppercase; font-weight:600; display:inline-block; float:right; /*margin-right:20px;*/ margin-top:30px; } #nav a{ color:#202020; } .divider{ width:100%; display:block; margin-top:10px; height:20px; margin-top:0; margin-bottom:10px; } /*----------------------------Mobile Version--------------------------------*/ @media all and (max-width:780px) { #container{ padding-top:10px; } header{ padding-top:25px; } #headerlink{ float:none; display:block; } nav{ margin:0 0 25px 0; float:none; } } /*---------------------------------------------------------------------------- Navigation ----------------------------------------------------------------------------*/ ul#nav{ position:relative; list-style:none; overflow:visible; /* makes sure the container fits the floated list-items below */ } ul#nav ul.podmenu2{ margin-left: 170px; /*top:0px !important;*/ top: 0 ; } ul.podmenu2 li{ border:none !important; list-style-type: none; } ul#nav li.current > a{ color:#fff; } ul#nav:hover li.current > a{ background:none; /*color:#1a1a1a;*/ color:#fff; } ul#nav > li a{ /*padding:5px 10px;*/ /*transition:background 0.3s, color 0.3s; -moz-transition:background 0.3s, color 0.3s; -webkit-transition:background 0.3s, color 0.3s; -o-transition:background 0.3s, color 0.3s;*/ color:#fff; } ul#nav ul li a{ padding:3px 15px; } ul#nav > li{ float:left; /* floats list items to the left, creating a horizontal menu */ position:relative; /*line-height:50px;*/ width: 115px; list-style-type: none; display: block; height: 70px; } ul#nav li span{ position:relative; /* must have position set to anything other than static to use z-index */ z-index:600; } ul#nav:hover > li:hover > a{ color:#fff; } ul#nav > li li{ border-left:3px solid; list-style-type: none; padding-bottom:3px; } ul#nav ul{ display:none; position:absolute; /*top:40px;*/ top:70px; z-index:550; text-align:left; line-height:1.3em; box-shadow:0 0 5px 0 rgba(0,0,0,0.3); } ul#nav li li span{ font-weight:normal; text-transform:none; /*line-height:2em;*/ line-height:1.2em; padding-right:5px; } ul#nav li li a:hover span{ /*font-weight:bold;*/ padding-right:0; } ul#nav li:hover li{ background:#404040; list-style:none; float:none; } ul#nav li li a{ display:block; /*width:130px;*/ width:140px; transition: background 0.3s, color 0.3s; -moz-transition: background 0.3s, color 0.3s; -o-transition: background 0.3s, color 0.3s; -webkit-transition: background 0.3s, color 0.3s; } ul#nav li li a:hover{ color:#2D88EF; } nav > select{ display:none; width:310px; background-color:#e5e5e5; color:#404040; padding:5px 0 0 5px; margin-left:auto; margin-right:auto; } nav > select:hover{ background-color:#f4f4f4; } nav > select > option{ padding:5px; } /*----------------------------Mobile Version--------------------------------*/ @media all and (max-width:780px) { ul#nav{ display:none; } nav > select{ display:block; } } /*---------------------------------------------------------------------------- Content - Universal ----------------------------------------------------------------------------*/ #content a:hover{ /*text-decoration:underline;*/ } #content{ color:#888; margin-top:40px; } #content-title{ font-size:5.8em; font-weight:200; color:#000; line-height:50px; border-bottom:3px solid; margin:0 5px 10px 5px; padding-left:25px; text-align:left; text-transform:uppercase; } .content-sub-title{ color:#000; } .content-img{ padding-bottom:20px; max-width:100%; } #sidebar a:hover{ text-decoration:none; } .break{ width:100%; height:1px; display:block; clear:both; margin:10px 0; } .one-half, .one-third, .two-thirds, .one-fourth, .three-fourths{ margin:0 4% 20px 0; float:left; position:relative; } .one-half h2, .one-third h2, .two-thirds h2, .one-fourth h2, .three-fourths h2, .one-half h3, .one-third h3, .two-thirds h3, .one-fourth h3, .three-fourths h3{ color:#000; } .one-half{ width:48%; } .one-third{ width:30.66%; } .two-thirds{ width:65%; } .one-fourth{ width:22%; } .three-fourths{ width:74%; } .widget-quote{ min-height:100px; height:auto; } .widget-kontakt{ min-height:150px; height:auto; } .quote-w, .lb-quote{ background:url(images/quote.png) no-repeat top left; padding:10px 0 30px 50px; font-size:1.8em; font-style:italic; } .quote-w{ background:url(images/quote-w.png) no-repeat top left; } .quote-author{ text-align:right; color:#7d7d7d; } .quote-bg1, .testimonial-1{ padding:20px 20px 0 20px; margin-bottom:10px; color:#fff; } .no-text-dec{ text-decoration:none; } article ul{ padding:0 0 20px 20px; } article ul li{ padding:5px 0; font-size:1.4em; } .section-title{ font-size:4.8em; letter-spacing:-0.03em; color:#000; padding:10px 0 !important; margin-left:30px; text-transform:uppercase; font-weight:200; } .enlarge{ width:100%; height:100%; background:url(../images/bloglistbg.png) repeat; position:absolute; top:0; left:0; transition:opacity 0.3s; -moz-transition:opacity 0.3s; -webkit-transition:opacity 0.3s; -o-transition:opacity 0.3s; opacity:0; filter:alpha(opacity=0); } .enlargeicon{ background:url(../images/enlarge.png) no-repeat center; width:100%; height:100%; } .enlarge:hover{ opacity:1; filter:alpha(opacity=100); } .obvestila-title{ width:100%; height:40px; position:relative; } .obvestilo-intro-naslov{ width:auto; height:100%; text-align: left; padding-left: 10px; padding-right: 10px; color:#ffffff; font-size:18px; line-height:25px; display:block; z-index: 101; margin-right: 100px; } .obvestilo-intro{ width:100%; height:103px; display:block; overflow: hidden; background:#ffffff; } p#obvestilo-intro-text{ height:50px; } .obvestilo-intro-overlay{ width:100%; height:103px; display:block; background:#ffffff; bottom:0; cursor: default; z-index: 100; transition:bottom 0.3s; -moz-transition:bottom 0.3s; -webkit-transition:bottom 0.3s; -o-transition:bottom 0.3s; } .obvestilo-intro:hover .obvestilo-intro-overlay{ bottom:-100%; } .text{ padding-top: 10px; font-size:1.3em; line-height:1.5em; padding-bottom:20px; font-family:"Helvetica Neue", Arial, Tahoma, sans-serif; } /*--------------------------Toggle and Accordion------------------------*/ .toggle-button, .ac-tab{ width:100%; display:block; color:#fff; font-size:1.4em; line-height:50px; text-indent:20px; transition:background 0.3s; -moz-transition:background 0.3s; -webkit-transition:background 0.3s; -o-transition:background 0.3s; margin-top:10px; } .toggle-button:hover, .ac-tab:hover{ background-color:#404040; cursor:pointer; } .mainpage .toggle-button{ height:20px; line-height:normal; text-align:center; margin-top:0; margin-bottom:10px; } .toggle-content{ display:block; } .mainpage .toggle-content{ margin-top:10px; } #content .toggle-content{ border:1px solid; border-top:0; padding:20px 20px 0 20px; } .toggle-indicator{ float:right; margin-right:20px; } .mainpage .toggle-indicator{ float:none; } .close{ display:none; } .table-details{ display:none; padding:20px 40px; font-size:0.857em; } /*---------------------------------Buttons------------------------------*/ span.button-met{ padding:2px 10px; font-weight:bold; text-transform:lowercase; font-size:12px; transition:background-color 0.5s, color 0.5s; -moz-transition:background-color 0.5s, color 0.5s; -webkit-transition:background-color 0.5s, color 0.5s; -o-transition:background-color 0.5s, color 0.5s; text-decoration:none; display:inline-block; position: relative; top: 45px; /*left: -75px;*/ } span.button-met:hover{ text-decoration:none; } span.dark{ background:#000; color:#fff; border:3px solid #fff; } span.dark:hover{ background:#fff; color:#000; } span.light{ background:#2D88EF; color:#ffffff; } span.light:hover{ background:#2D88EF; color:#ffffff; cursor: pointer; } span.dark-blue{ background:#19a2de; color:#fff; border:3px solid #fff; } span.dark-blue:hover{ background:#fff; color:#19a2de; } span.dark-red{ background:#e61400; color:#fff; border:3px solid #fff; } span.dark-red:hover{ background:#fff; color:#e61400; } span.dark-green{ background:#319a31; color:#fff; border:3px solid #fff; } span.dark-green:hover{ background:#fff; color:#319a31; } span.dark-magenta{ background:#ff0094; color:#fff; border:3px solid #fff; } span.dark-magenta:hover{ background:#fff; color:#ff0094; } span.dark-purple{ background:#a500ff; color:#fff; border:3px solid #fff; } span.dark-purple:hover{ background:#fff; color:#a500ff; } span.dark-teal{ background:#00aaad; color:#fff; border:3px solid #fff; } span.dark-teal:hover{ background:#fff; color:#00aaad; } span.dark-lime{ background:#8cbe29; color:#fff; border:3px solid #fff; } span.dark-lime:hover{ background:#fff; color:#8cbe29; } span.dark-brown{ background:#9c5100; color:#fff; border:3px solid #fff; } span.dark-brown:hover{ background:#fff; color:#9c5100; } span.dark-pink{ background:#e671b5; color:#fff; border:3px solid #fff; } span.dark-pink:hover{ background:#fff; color:#e671b5; } span.dark-mango{ background:#ef9608; color:#fff; border:3px solid #fff; } span.dark-mango:hover{ background:#fff; color:#ef9608; } span.light-blue{ background:#1BA1E2; color:#000; border:3px solid #000; } span.light-blue:hover{ background:#000; color:#19a2de; } span.light-red{ background:#e61400; color:#000; border:3px solid #000; } span.light-red:hover{ background:#000; color:#e61400; } span.light-green{ background:#319a31; color:#000; border:3px solid #000; } span.light-green:hover{ background:#000; color:#319a31; } span.light-magenta{ background:#ff0094; color:#000; border:3px solid #000; } span.light-magenta:hover{ background:#000; color:#ff0094; } span.light-purple{ background:#a500ff; color:#000; border:3px solid #000; } span.light-purple:hover{ background:#000; color:#a500ff; } span.light-teal{ background:#00aaad; color:#000; border:3px solid #000; } span.light-teal:hover{ background:#000; color:#00aaad; } span.light-lime{ background:#8cbe29; color:#000; border:3px solid #000; } span.light-lime:hover{ background:#000; color:#8cbe29; } span.light-brown{ background:#9c5100; color:#000; border:3px solid #000; } span.light-brown:hover{ background:#000; color:#9c5100; } span.light-pink{ background:#e671b5; color:#000; border:3px solid #000; } span.light-pink:hover{ background:#000; color:#e671b5; } span.light-mango{ background:#ef9608; color:#000; border:3px solid #000; } span.light-mango:hover{ background:#000; color:#ef9608; } /*-----------------------------------Tabs--------------------------------*/ .orgTab ul{ list-style:none; } .orgTab .tab-nav{ overflow: hidden; margin:0; font-size:1.4em; } .orgTab .tab-nav li{ width: auto; margin: 0 5px 0 0; padding:0; float:left; list-style:none; } .orgTab .tab-nav li.last{ margin-right: 0; } .orgTab .tab-nav li a{ display: block; padding: 5px 20px; text-align: center; border: 0; } .orgTab .tab-nav li a:hover{ background-color: #ccc; color:#fff; } #content .orgTab .tab-nav li a:hover{ text-decoration:none; } .list-wrap{ background-color:#eee; } .list-wrap .p-tab p{ padding:0 20px 20px 20px; } .list-wrap .p-tab p:first-child{ padding:20px; } .list-wrap .list-item-tab ul li{ list-style:square; margin-left:35px; padding-left:0; } .list-wrap .list-item-tab ul li:first-child{ padding-top:20px; } .list-wrap .list-item-tab ul li:last-child{ padding-bottom:20px; } .list-wrap .link-tab li:first-child{ padding-top:20px; } .list-wrap .link-tab li:last-child{ padding-bottom:20px; } .list-wrap ul li{ font-size:1.2em; padding:5px 20px; } .list-wrap ul li a{ color:#fff; } .orgTab .current{ background-color:#eee; font-weight:bold; } .hide { position: absolute; top: -9999px; left: -9999px; } /*-------------------------Paragraph Highlights-----------------------------*/ .hl1{ border-left:3px solid; padding:0 0 0 20px; margin:20px 0; } .hl2{ color:#fff; padding:20px; } .hl2 a{ color:#fff; } .hl3{ border-right:3px solid; padding:0 20px 0 0; margin:20px 0; } div.hl1{ } div.hl2{ padding:10px 20px 10px 20px; } div.hl3{ } .arhiv-gumb{ width: 116px; display:block; height:20px; font-size: 14px; color:#ffffff; background: #D9442F; padding:5px; margin-top: 50px; } /*---------------------------Information Boxes-------------------------------*/ .infobox-msg{ padding-left:40px; font-size:1.2em; } .infobox-red{ background:url(images/info-red.png) no-repeat #cc0033; } .infobox-red .infobox-msg{ color:#fff; } .infobox-yellow{ background:url(images/info-yellow.png) no-repeat #ffff66; } .infobox-yellow .infobox-msg{ color:#505020; } .infobox-green{ background:url(images/info-green.png) no-repeat #c4fc1e; } .infobox-green .infobox-msg{ color:#3d4f09; } .infobox-blue{ background:url(images/info-blue.png) no-repeat #1300cc; } .infobox-blue .infobox-msg{ color:#fff; } .infobox-red, .infobox-yellow, .infobox-green, .infobox-blue{ background-position:5px 5px; padding:20px; margin:0 0 20px 0; } /*-----------------------------------Tables---------------------------------*/ .table{ width:100%; display:block; } .table h2{ padding-bottom:20px; } .table-content{ margin-top:10px; } .one-half .table-content{ width:80%; display:block; font-size:1.2em; } .one-half .table-content{ float:right; } .last .table-content{ float:left; } .one-third .table-content{ width:100%; display:block; font-size:1.2em; } .table-title{ font-size:1.6em; padding:20px 0; text-align:center; display:block; color:#fff; } .table-price{ padding:60px 0; text-align:center; background:#eee; } .price-pre{ font-size:24px; line-height:24px; position:absolute; left:-10px; top:6px; } .price{ font-size:8.4em; line-height:80px; color:#000; position:relative; display:inline-block; font-weight:100; } .price-post{ font-size:16px; line-height:16px; position:absolute; bottom:0; } .table-info ul{ list-style:none; font-size:1.4em; background:#ddd; } .table-info ul li{ padding:10px 0 10px 20%; margin:0 5%; border-bottom:1px solid; } .table-info ul li:last-child{ border:none; padding-bottom:20px; } .hl-txt2{ font-weight:bold; } #loader{ background:url(../images/loader.gif) no-repeat center center rgba(0,0,0,0.5); position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; display:none; } /*----------------------------Mobile Version--------------------------------*/ @media all and (max-width:768px) { .mainpage .toggle-button{ height:40px; } .mainpage .toggle-indicator{ font-size:2em; line-height:40px; } } @media all and (max-width:640px) { #content-title{ margin-left:0; margin-right:0; } .one-half, .one-third, .two-thirds, .one-fourth, .three-fourths{ margin:0; float:none; display:block; width:100%; } .one-half .table-content{ width:100%; margin-bottom:20px; } .one-third .table-content{ margin-bottom:20px; } } /*---------------------------------------------------------------------------- Content - Main Page Tiles ----------------------------------------------------------------------------*/ .live>div{ position:absolute; } .live img{ border:none; } .live-front{ width:100%; height:100%; z-index:20; } .live-back{ width:100%; height:100%; z-index:10; } .live-img{ display:block; height:100%; width:100%; } .tile{ margin:0 5px 10px 5px; float:left; overflow:hidden; position:relative; transition: opacity 0.5s ease 0.1s; -moz-transition: opacity 0.5s ease 0.1s; -o-transition: opacity 0.5s ease 0.1s; -webkit-transition: opacity 0.5s ease 0.1s; } .tilehover{ position:absolute; top:0; right:0; z-index:30; display:none; } .tile:hover{ /*border:5px solid #404040; margin:-5px 0 0 0; box-shadow:0 0 5px 0 rgba(0,0,0,0.3); -moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.3); -webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.3);*/ } .exclude:hover{ border:none; /*margin:0 5px 10px 5px;*/ } a .tile:hover .tilehover{ display:inline; } .tile-text{ color:#fff; font-size:2.4em; /*bottom:5px;*/ /*top:5px; left:10px; position:absolute;*/ z-index:30; /*text-align:left;*/ text-transform: uppercase; } .tile-text-medium{ color:#fff; font-size:18px; /*bottom:5px;*/ top:5px; left:10px; position:absolute; z-index:30; text-align:left; } .tile-text-small{ color:#fff; font-size:14px; /*bottom:5px;*/ top:40px; left:10px; position:absolute; z-index:30; text-align:left; } .largest{ width:470px; height:362px; } .large{ width:310px; height:310px; } .medium-long{ width:470px; height:150px; } .medium{ width:310px; height:150px; } .medium-thin{ width:310px; height:100px; } .medium-super-thin{ width:310px; height:70px; } .small{ width:150px; height:150px; } .small-thin{ width:150px; height:100px; } .fade{ opacity:0.5; filter:alpha(opacity=50); } .tile-date{ background:none; color:#7f7f7f; position:absolute; top:0; right:0px; z-index:99; width:100px; } .tile-date .date{ font-size:6em; } .tile-date .month{ font-size:2em; position:absolute; top:70px; right:30px; } .tile-cat{ /*position:absolute; bottom:0; left:0;*/ font-size:2.4em; color:#fff; z-index:99; text-align:left; padding:0 10px; } .tile:hover .tile-cat{ visibility:visible; } .bloglist .tile-cat{ visibility:visible; width: auto; height:100%; } #tweeter{ font-size:1.2em; color:#fff; text-align:left; margin:10px 20px 0 20px; } #tweeter a{ color:#fff; text-decoration:underline; } #tweeter a:hover{ text-decoration:none; } #tweeter li{ margin:0 0 10px 10px; list-style:square ; } .tweeter{ margin-left:10px; } #mainpage-mos{ padding:0; margin:0; position:relative; } .info-logo{ left:5px; top:5px; } .quote-left{ left:5px; top:5px; } .quote-right{ right:5px; bottom:0px; } .quote-text{ left:0px !important; text-align: center; } .pdf-icon{ right:5px; bottom:5px; } /*---------------------------------------------------------------------------- Content - Bloglist and Portfoliolist(Left) ----------------------------------------------------------------------------*/ #bloglist-left, #portfoliolist-left{ width:630px; float:left; margin-left:5px; position:relative; padding-bottom:63px; } #portfoliolist-left #filter{ margin-left:0px; } #content .bloglist a:hover, #content .portfoliolist a:hover{ text-decoration:none; } .bloglist, .portfoliolist{ width:100%; height:150px; margin-bottom:10px; position:relative; overflow:hidden; display:block; cursor: pointer; } .bloglist:hover, .portfoliolist:hover{ /*border:5px solid #404040; margin-left:-5px; margin-top:-5px; margin-bottom:5px;*/ } .bl-posttitle, .pl-projecttitle{ width:100%; height:100%; position:absolute; background:url(images/bloglistbg.png) repeat; display:table; transition:opacity 0.3s; -moz-transition:opacity 0.3s; -webkit-transition:opacity 0.3s; -o-transition:opacity 0.3s; opacity:0; filter:alpha(opacity=0); } .bloglist:hover .bl-posttitle{ opacity:1.0; filter:alpha(opacity=100); } .portfoliolist:hover .pl-projecttitle{ opacity:1.0; filter:alpha(opacity=100); } .bl-title, .pl-title{ font-size:1.4em; color:#000; display:table-cell; vertical-align:middle; } .bloglist-img{ float:right; } .pagination{ position:absolute; bottom:0; width:100%; display:block; margin:20px 0; font-size:1.4em; } #content .pagination a:hover{ text-decoration:none; } .pages{ float:right; height:30px; background-color:#fff; line-height:30px; padding:0 10px; } .pagination .current, .page, .nextpagelink{ float:left; height:30px; width:30px; line-height:30px; margin-right:3px; background-color:#fff; border-bottom:3px solid; transition:background 0.3s; -moz-transition:background 0.3s; -webkit-transition:background 0.3s; -o-transition:background 0.3s; } .pagination .current{ font-weight:bold; color:#fff; border-bottom:3px solid #fff; } .page:hover, .nextpagelink:hover{ background-color:#404040; font-weight:bold; } .ajax-pagination{ position:relative; margin:0; width:100%; display:block; } .ajax-pagination .page-numbers{ display:none; } .ajax-pagination .next, .ajax-pagination .prev{ display:block; margin:0; border:0; background: url(images/bg_direction_nav.png) no-repeat 0 0; height:40px; width:30px; opacity:0.6; transition:0.3s opacity; z-index:1000; -moz-transition:0.3s opacity; -webkit-transition:0.3s opacity; -o-transition:0.3s opacity; position:absolute; } .ajax-pagination .next{ float:right; background-position:100% 0; right:-36px; } .ajax-pagination .prev{ float:left; left:-36px; } .ajax-pagination .next:hover, .ajax-pagination .prev:hover{ opacity:1; } #mainpage-mos .ajax-pagination{ position:absolute; top:40%; visibility:hidden; } #mainpage-mos:hover .ajax-pagination{ visibility:visible; } #mainpage-mos:hover .ajax-pagination .next{ right:10px; } #mainpage-mos:hover .ajax-pagination .prev{ left:10px; } /* .obvestilo-front{ width:100%; height:140px; display:block; cursor: pointer; } */ .bloglist-title{ z-index: 101; font-size: 18px; width: auto; height:100%; display:block; margin-right: 100px; } .bloglist{ background:#ffffff; cursor: default; overflow:hidden; } .bloglist-overlay{ width:100%; height:150px; display:block; background:#ffffff; bottom:0; cursor: default; z-index: 100; transition:bottom 0.3s; -moz-transition:bottom 0.3s; -webkit-transition:bottom 0.3s; -o-transition:bottom 0.3s; } .bloglist:hover .bloglist-overlay{ bottom:-100%; } /*----------------------------Mobile Version--------------------------------*/ @media all and (max-width:970px) { #bloglist-left, #portfoliolist-left{ width:65.6%; } } @media all and (max-width:900px) { #headerlink{ display: block; margin: 0 auto; float:none; } nav{ margin-left:auto; margin-right:auto; float:none; } } @media all and (max-width:640px) { #bloglist-left, #portfoliolist-left{ float:none; width:100%; margin-right:10px; margin-left:0; } } /*---------------------------------------------------------------------------- Content - Blog and Portfolio Tile (Left) ----------------------------------------------------------------------------*/ #portfoliotile-left, #blogtile-left{ width:640px; float:left; position:relative; padding-bottom:60px; } #content #blogtile-left .tile a:hover, #content #portfoliotile-left .tile a:hover{ text-decoration:none; } #filter{ margin:10px 0 20px 5px; } ul#port-filter{ float:left; font-size:1.4em; list-style:none; margin-left:0; width:100%; } ul#port-filter li{ float:left; line-height:30px; font-size:1.2em; padding:0 10px; margin-right:10px; background-color:#fff; transition:background 0.3s; -moz-transition:background 0.3s; -webkit-transition:background 0.3s; -o-transition:background 0.3s; } ul#port-filter li:hover{ background-color:#404040; } ul#port-filter li:last-child{ margin-right:0; } #content ul#port-filter a:hover{ text-decoration:none; } ul#port-filter li.filter-current{ color:#fff; } li.filter-current a{ color:#fff; } #portfolio, #blogs{ text-align:center; display:inline-block; } #portfolio .tile, #blogs .tile{ border-width:0; position:relative; } #portfolio .tile:hover, #blogs .tile:hover{ /*border:5px solid #404040; margin:-5px 0 5px 0;*/ } #portfolio .fade, #blogs .fade{ opacity:1.0; filter:alpha(opacity=100); } #portfolio .tile:hover .pl-projecttitle, #blogs .tile:hover .bl-posttitle{ opacity:1.0; filter:alpha(opacity=100); } #blogs .large .tile-cat{ visibility:visible; } #blogtile-left .pagination, #portfoliotile-left .pagination{ margin:20px 5px; } #blogtile-left .pagination .pages, #portfoliotile-left .pagination .pages{ margin-right:10px; } /*----------------------------Mobile Version--------------------------------*/ @media all and (max-width:970px) { #portfoliotile-left, #blogtile-left{ width:67%; } #portfolio .tile, #blogs .tile{ float:none; } #portfolio .small{ float:left; } } @media all and (max-width:640px) { #portfoliotile-left, #blogtile-left{ float:none; width:100%; margin-left:0; } #blogtile-left .pagination, #portfoliotile-left .pagination{ margin:20px 0; } #blogtile-left .pagination .pages, #portfoliotile-left .pagination .pages{ margin-right:0; } } /*---------------------------------------------------------------------------- Content - Single Blog Post ----------------------------------------------------------------------------*/ #single{ float:left; width:630px; min-height: 898px; background: #ffffff; text-align:left; margin-left:5px; margin-bottom: 20px; } #single h1{ color:#ffffff; text-transform: uppercase; } #single h2, #single h3, #single h4, #single h5{ color:#000; } .post-meta{ position:relative; margin-bottom:30px; } .post-meta-left{ float:left; max-width:480px; display:block; } .sbp-article, .spf-article{ position:relative; background-color:#fff; } .sbp-title, .spf-title{ color:#000; padding:25px 0 25px 30px; letter-spacing:-0.01em; background: #D9442F; min-height: 64px; } .sbp-content, .spf-content{ color:#3E3E3E; padding:20px 30px 10px 30px; } #authorinfo{ background:#eee; color:#888; position:relative; padding-left:140px; min-height:120px; } #author-avatar{ position:absolute; left:30px; top:30px; } .author{ display:block; font-size:1.6em; padding:25px 0 10px 0; } #authorinfo p{ display:block; padding:0 20px 20px 0; } /*----------------------------Mobile Version--------------------------------*/ @media all and (max-width:970px) { #single{ width:65.6%; } } @media all and (max-width:640px) { #single{ float:none; width:100%; min-height:0px; margin-right:10px; margin-left:0; } } /*---------------------------------------------------------------------------- Content - Single Portfolio Item ----------------------------------------------------------------------------*/ .sgportfolio-img{ display:block; margin-bottom:30px; position:relative; } .portfolio-fullimg{ max-width:100%; display:block; } .spf-title{ padding-top:0; } .portfolio-details p{ padding-bottom:0; } /*---------------------------------------------------------------------------- Content - Page (General) ----------------------------------------------------------------------------*/ #page{ margin:0 5px; background-color:#fff; text-align:left; } #page h1, #page h2, #page h3{ padding:10px 0; } #page-img{ max-width:100%; position:relative; } #pg-content{ padding:10px 30px; margin-bottom:10px; position:relative; } .highlights{ max-width:100%; } .highlights-txt{ max-width:100%; padding:10px 0; } .mainpage{ margin:0 5px; text-align:left; overflow:hidden; } .fixed-medium{ max-width:310px; margin-right:10px; background:#fff; color:#888; float:left; position:relative; margin-bottom:20px; } .fixed-medium:after{ clear:both; display:block; content:" "; } .fixed-medium h2{ padding:10px 0; color:#000; } .fixed-medium h2, .fixed-medium p{ padding-left:20px; padding-right:20px; } .feature-text{ width:80%; padding-top:20%; margin:0 auto; } .features-img{ max-width:100%; display:block; } .no-bottom{ margin-bottom:0px; } /*----------------------------Mobile Version--------------------------------*/ @media all and (max-width:970px) { .mainpage{ width:100%; margin:0; } .fixed-medium{ float:none; max-width:100%; } .highlights{ float:left; } .highlights-txt{ float:left; width:50%; } } @media all and (max-width:640px) { #page{ width:100%; margin-left:0; } .fixed-medium{ max-width:310px; margin-left:auto; margin-right:auto; } .highlights{ float:none; } .highlights-txt{ float:none; width:100%; } .feature-text{ padding-top:0; } } /*---------------------------------------------------------------------------- Content - About Page ----------------------------------------------------------------------------*/ #content a.no-text-dec:hover{ text-decoration:none; } #page-excerpt{ background:rgba(255,255,255,0.9); width:600px; padding:25px 30px; color:#666; font-size:2em; position:absolute; top:-200px; left:30px; } #about-container{ width:100%; display:block; margin-bottom:30px; } #about-container a{ display:inline-block; width:215px; margin:0 7px 10px 0; } #about-container a.last{ margin-right:0; } .about-person{ width:175px; display:inline-block; padding:20px; background-color:#eee; text-align:center; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; } .about-person:hover{ background:#404040; color:#fff; } #page .about-person h3{ text-transform:uppercase; padding-bottom:0; } .about-person p{ opacity:0.6; filter:alpha(opacity=60); padding-bottom:10px; } .about-portrait{ max-width:100%; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; -o-border-radius:50%; } #about-testimonial{ margin-bottom:20px; } .page-sub-title{ padding:25px 0; } .page-sub-title h1{ font-size:4.8em; letter-spacing:-0.03em; line-height:10px; color:#000; display:inline; padding:0 !important; text-transform:uppercase; font-weight:200; } .page-sub-title .tagline{ display:inline-block; font-size:1.2em; padding-left:20px; vertical-align:top; } .testimonial-1{ position:relative; } .testimonial-s{ background-color:#eee; width:290px; min-height:250px; margin-right:10px; position:relative; float:left; } .testimonial-s p{ padding:30px 30px 50px 30px; } .testimonial-author{ display:block; font-size:1.4em; color:#fff; opacity:0.7; filter:alpha(opacity=70); position:absolute; bottom:20px; right:30px; } /*----------------------------Mobile Version--------------------------------*/ @media all and (max-width:970px) { .about-person{ width:81.8%; padding:9.1%; } #about-container a{ width:23.15%; margin:0 0.7% 1% 0; } .testimonial-s{ width:32.2%; } #page-excerpt{ width:500px; } } @media all and (max-width:640px) { #about-container a{ width:100%; margin-bottom:10px; } .testimonial-s{ width:100%; float:none; min-height:0; margin-bottom:10px; } } /*---------------------------------------------------------------------------- Content - Contact Page ----------------------------------------------------------------------------*/ #contact-location{ position:absolute; top:30px; right:30px; } #contact-location .location{ background:rgba(255,255,255,0.9); position:relative; color:#000; padding:15px 50px 30px 30px; margin-bottom:30px; font-size:1.3em; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; } .location h5{ font-weight:600; } #contact-location .location:hover{ background:#fff; } .gmap{ background:url(images/gmap.png) no-repeat center; opacity:0.5; filter:alpha(opacity=50); cursor:pointer; width:40px; height:40px; display:block; position:absolute; right:20px; bottom:20px; } .gmap:hover{ opacity:1; filter:alpha(opacity=100); } .contact-form-sender input, .contact-form-email input, .contact-form-subject input, .contact-form-content textarea{ background-color:#eee; color:#888888; padding:5px 0; font:inherit; width:100%; text-indent:5px; } .contact-form-content textarea{ height:150px; } #consubmit{ background:none; font:inherit; color:inherit; cursor:pointer; } #contact-fb, #contact-be, #contact-tw, #contact-gp{ width:80px; height:80px; margin:0 10px 10px 0; background:url(images/social.png) no-repeat; float:left; transition:background 0.3s; -moz-transition:background 0.3s; -webkit-transition:background 0.3s; -o-transition:background 0.3s; } #contact-fb{ background-position:-80px -80px; } #contact-be{ background-position:-80px 0; } #contact-tw{ background-position:-80px -240px; } #contact-gp{ background-position:-80px -160px; } #contact-fb:hover{ background-position:0 -80px; } #contact-be:hover{ background-position:0 0; } #contact-tw:hover{ background-position:0 -240px; } #contact-gp:hover{ background-position:0 -160px; } .loader{ background:url('../images/loader1.gif') no-repeat; width:16px; height:16px; margin-left: 80px; margin-top: -20px; position: absolute; border:none; } /*---------------------------------------------------------------------------- Tile Preview (Lightbox) ----------------------------------------------------------------------------*/ .tile-pre{ display:none; } .lb-article, .lb-portfolio{ width:640px; } .lb-quote{ color:#000; margin:50px 20px 20px 20px; } .lb-title, .lb-project{ color:#000; padding:25px 0 0 30px; } .lb-title a, .lb-project a{ color:#000; text-decoration:none !important; } .lb-excerpt, .lb-desc{ color:#888; padding:20px 30px 10px 30px; } .lb-excerpt a:hover, .lb-desc a:hover{ text-decoration:underline; } .lb-port-cont{ float:right; max-width:310px; display:block; } .lb-video p{ padding:0 30px 20px 30px; color:#888; } .lb-video p a:first-child{ font-size:2.2em; color:#000; display:block; padding-top:25px; padding-bottom:20px; } .lb-video p:last-child{ padding-bottom:30px; } .lb-video object, .lb-video object embed{ width:100%; z-index:100; } .tile-pre-img{ max-width:100%; height:auto; display:block; } .article-img{ position:relative; } .portfolio-img{ max-width:330px; float:left; } .article-date{ float:right; margin:5px 30px 0 0; color:#7f7f7f; position:relative; } .article-date span.date{ font-size:6em; } .article-date span.month{ font-size:2em; position:absolute; right:5px; top:70px; } .postcat, .projectcat{ color:#7d7d7d; margin:10px 0 0 30px; font-size:1.8em; display:inline-block; } .article-cat{ position:absolute; left:0; bottom:-15px; font-size:2.4em; color:#fff; padding:0 10px; } .exp-button{ text-decoration:none; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; } .exp-button:hover{ color:#000; } /*----------------------------Mobile Version--------------------------------*/ @media all and (max-width:640px) { .lb-article, .lb-portfolio{ width:auto; } .portfolio-img{ max-width:100%; float:none; } .lb-project, .lb-desc{ float:none; } .lb-port-cont{ float:left; } } /*---------------------------------------------------------------------------- Comments ----------------------------------------------------------------------------*/ #commentform{ padding:10px 0; } #comments{ background-color:#fff; color:#888; margin:20px 0; position:relative; overflow:hidden; } .commentlist{ padding:0 30px 20px 30px; list-style:none; } .comment{ position:relative; padding:0 20px 0 120px; margin-bottom:10px; background:#eee; min-height:120px; } .avatar{ position:absolute; left:20px; top:20px; } .comment-author{ padding-top:15px; } .commenter{ display:block; font-size:1.5em; } .comment-date{ display:block; margin-bottom:10px; } .comment-reply{ position:absolute; top:20px; right:20px; visibility:hidden; z-index:100; } .comment:hover .comment-reply{ visibility:visible; } #comments .comment-reply:hover{ text-decoration:none; } ul.children{ list-style:none; padding-bottom:10px; } ul.children .comment{ background-color:#fff; } #respond{ padding:0 30px 20px 30px; } #comsubmit{ background:none; font:inherit; color:inherit; cursor:pointer; } .comment-form-author input, .comment-form-email input, .comment-form-url input, .comment-form-comment textarea{ background-color:#eee; color:#888; padding:5px 0; font:inherit; width:100%; text-indent:5px; } .comment-form-comment textarea{ max-width:366px; height:187px; } #commentformleft{ display:inline-block; width:33%; } #commentformright{ display:inline-block; width:65%; margin-left:2%; vertical-align:top; text-align:right; } /*----------------------------Mobile Version--------------------------------*/ @media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1){ /* For iPad */ .comment-reply{ visibility:visible; } } @media all and (max-width:970px) { #commentformleft{ display:block; width:100%; } #commentformright{ display:block; width:100%; margin-left:0; } .comment-form-comment textarea{ max-width:100%; height:185px; } } @media all and (max-width:640px) { .comment-reply{ left:35px; top:110px; } .comment-reply{ visibility:visible; } } /*---------------------------------------------------------------------------- Sidebar ----------------------------------------------------------------------------*/ #sidebar{ float:right; width:310px; height:100%; text-align:left; overflow:hidden; margin-right:5px; } .widget h5{ color:#fff; font-size:1.5em; line-height:1.5em; text-transform:uppercase; text-indent:15px; font-weight:200; } .widget{ width:100%; font-size:1.4em; margin-bottom:20px; position:relative; } .widget ul{ list-style:none; } .widget p{ font-size:0.93em; color:#888; padding:0 20px; } .widget-predlogi{ background: #ffffff; height:auto; padding: 10px; } .widget-predlogi form.predlogi label{ font-size: 16px; line-height:20px; } /*-------------------------------Search Box------------------------------*/ #search{ margin:10px 5px 20px 0; position:relative; width:100%; } #search-field{ background:#fff; line-height:30px; height:30px; padding-left:10px; width:270px; color:#888; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; -webkit-appearance: none; } #search-field:focus{ color:#fff; } #search-submit{ background:url(images/search.png) center center no-repeat #fff; height:30px; width:30px; position:absolute; top:0; right:0; transition:background-color 0.3s; -moz-transition:background-color 0.3s; -webkit-transition:background-color 0.3s; -o-transition:background-color 0.3s; } #search-submit:hover{ cursor:pointer; } /*--------------------------------Post Meta------------------------------*/ #post-meta{ color:#fff; margin-bottom:10px; } #post-meta .tile-sidebar{ width:100px; height:100px; display:inline-block; position:relative; overflow:hidden; } #post-meta .tile-sidebar .meta1 > img, #post-meta .tile-sidebar .meta2 > img, #post-meta .tile-sidebar .meta3 > img{ position:absolute; top:0; left:0; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; } #post-meta .count{ font-size:0.9em; position:absolute; bottom:5%; left:10%; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; } .comment-widget .comment-count{ color:#000; background:#fff; padding:10px; min-width:25px; text-align:center; } .comment-widget .comment-count:hover{ text-decoration:underline; } .comment-widget .comment-quick-reply{ background:url(images/comment-widget.png) no-repeat; width:45px; height:30px; line-height:28px; text-indent:6px; } .comment-widget .comment-quick-reply:hover{ text-decoration:underline; } #post-meta .comment-widget{ left:27%; } #post-meta .fb-like{ left:27%; } #post-meta .twitter-share-button{ left:20%; } #post-meta .comment-widget, #post-meta .fb-like, #post-meta .twitter-share-button{ position:absolute; top:-100%; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; display:block; } #post-meta .tile-sidebar:hover .meta1 > img, #post-meta .tile-sidebar:hover .meta2 > img, #post-meta .tile-sidebar:hover .meta3 > img{ top:-100%; } #post-meta .tile-sidebar:hover .count{ bottom:-100%; } #post-meta .tile-sidebar:hover .comment-widget, #post-meta .tile-sidebar:hover .fb-like, #post-meta .tile-sidebar:hover .twitter-share-button{ top:20%; } /*---------------------------------Articles------------------------------*/ .articles-widget li{ /*margin-top:1px;*/ position:relative; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; overflow:hidden; } .articles-widget img{ display:block; width:100%; height:auto; vertical-align:bottom; z-index:40; } .articles-widget .title{ display:block; background:#fff; position:absolute; left:100%; top:0; width:100%; height:100%; font-size:1.3em; color:#888; padding:20px; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; vertical-align:top; z-index:50; opacity:0; } .articles-widget li:hover .title{ color:#000; left:0; opacity:1; } .articles-widget .more{ display:block; position:absolute; background:url(images/more.png) no-repeat; width:25px; height:25px; bottom:10px; right:10px; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; opacity:0.7; z-index:55; } .articles-widget li:hover .more{ opacity:1; } /*---------------------------------Archive------------------------------*/ table, td, td{ border-spacing:1px; color:#404040; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; } #archive th, #archive tbody td{ width:44px; height:44px; text-align:center; } #archive tfoot td{ text-align:center; background-color:#fff; height:25px; } #archive thead th{ background-color:#fff; } #archive td.none{ background:#fff; } #archive tbody td:hover, #archive tfoot #prev:hover, #archive tfoot #next:hover{ background:#404040 !important; color:#fff; cursor:pointer; } #archive tbody td.none:hover{ background:#fff !important; color:inherit; cursor:inherit; } /*-----------------------------Text Widget------------------------------*/ .text-widget p{ background:#fff; padding:20px; } /*---------------------------------Twitter------------------------------*/ #sidebar #twitter{ background:#fff; } #twitter #tweeter{ margin:0 0 0 15px; color:#888; padding-top:20px; font-size:0.93em; } .widget #tweeter li{ background:url(images/twtr-widget.png) no-repeat top left; padding:0 20px 20px 30px; margin:0; list-style:none; } .widget #tweeter li:hover{ font-weight:inherit; background-color:inherit; } /*----------------------------Mobile Version--------------------------------*/ @media all and (max-width:970px) { #sidebar{ width:32.3%; } } @media all and (max-width:640px) { #sidebar{ width:100%; margin-right:0; } #search{ display:none; } } @media all and (max-width:495px) { .largest{ width:310px; } .bloglist-title{ display:none; } } /*---------------------------------------------------------------------------- Footer ----------------------------------------------------------------------------*/ footer{ margin:0 5px; } footer > small{ font-size:1.2em; line-height:30px; color:#fff; float:right; } footer #footer-social{ float:left; margin-bottom:10px; } #footer-copyrights{ width:100%; height:30px; display: block; margin-top: 0; color:#ffffff; font-size:12px; line-height:30px; } .behance-mini, .dribbble-mini, .facebook-mini, .flickr-mini, .forrst-mini, .linkedin-mini, .pinterest-mini, .tumblr-mini, .twitter-mini, .vimeo-mini{ background:url(images/social-mini.png) no-repeat; width:30px; height:30px; margin-right:0; display:inline-block; transition:background 0.3s; -moz-transition:background 0.3s; -webkit-transition:background 0.3s; -o-transition:background 0.3s; } .behance-mini{ background-position:0 0; } .behance-mini:hover{ background-position:-30px 0; } .dribbble-mini{ background-position:0 -30px; } .dribbble-mini:hover{ background-position:-30px -30px; } .facebook-mini{ background-position:0 -60px; } .facebook-mini:hover{ background-position:-30px -60px; } .flickr-mini{ background-position:0 -90px; } .flickr-mini:hover{ background-position:-30px -90px; } .forrst-mini{ background-position:0 -120px; } .forrst-mini:hover{ background-position:-30px -120px; } .linkedin-mini{ background-position:0 -150px; } .linkedin-mini:hover{ background-position:-30px -150px; } .pinterest-mini{ background-position:0 -180px; } .pinterest-mini:hover{ background-position:-30px -180px; } .tumblr-mini{ background-position:0 -210px; } .tumblr-mini:hover{ background-position:-30px -210px; } .twitter-mini{ background-position:0 -240px; } .twitter-mini:hover{ background-position:-30px -240px; } .vimeo-mini{ background-position:0 -270px; } .vimeo-mini:hover{ background-position:-30px -270px; } /*---------------------------------------------------------------------------- MetroJS ----------------------------------------------------------------------------*/ /* ------ Hardware Accelerated CSS3 Animations --------*/ .live>.ha.flip-front{ position:absolute; /* time to start repeating ourselves note: we are not setting a duration or delay here, that is added in script */ -webkit-animation-name:flipfront180; -webkit-animation-play-state:paused; -webkit-animation-fill-mode:forwards; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name:flipfront180; -moz-animation-play-state:paused; -moz-animation-fill-mode:forwards; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -ms-animation-name:flipfront180; -ms-animation-play-state:paused; -ms-animation-fill-mode:forwards; -ms-animation-iteration-count: 1; -ms-animation-timing-function: linear; -o-animation-name:flipfront180; -o-animation-play-state:paused; -o-animation-fill-mode:forwards; -o-animation-iteration-count: 1; -o-animation-timing-function: linear; animation-name:flipfront180; animation-play-state:paused; animation-fill-mode:forwards; animation-iteration-count: 1; animation-timing-function: linear; } .live>.ha.flip-back{ position:absolute; -webkit-animation-name:flipback180; -webkit-animation-play-state:paused; -webkit-animation-fill-mode:forwards; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name:flipback180; -moz-animation-play-state:paused; -moz-animation-fill-mode:forwards; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -ms-animation-name:flipback180; -ms-animation-play-state:paused; -ms-animation-fill-mode:forwards; -ms-animation-iteration-count: 1; -ms-animation-timing-function: linear; -o-animation-name:flipback180; -o-animation-play-state:paused; -o-animation-fill-mode:forwards; -o-animation-iteration-count: 1; -o-animation-timing-function: linear; animation-name:flipback180; animation-play-state:paused; animation-fill-mode:forwards; animation-iteration-count: 1; animation-timing-function: linear; } /* Flip Vertical */ @-keyframes flipfront180 { from { z-index:20; transform: rotateX(0deg); } 49% { z-index:20; } 50% { z-index:10; } to { z-index:10; transform: rotateX(-180deg); } } @-webkit-keyframes flipfront180 { from { z-index:20; -webkit-transform: rotateX(0deg); } 49% { z-index:20; } 50% { z-index:10; } to { z-index:10; -webkit-transform: rotateX(-180deg); } } @-moz-keyframes flipfront180 { 0% { z-index:20; -moz-transform: rotateX(0deg); } 49% { z-index:20; } 50% { z-index:10; } 100% { z-index:10; -moz-transform: rotateX(-180deg); } } @-ms-keyframes flipfront180 { from { z-index:20; -ms-transform: rotateX(0deg); } 49% { z-index:20; } 50% { z-index:10; } to { z-index:10; -ms-transform: rotateX(-180deg); } } @-o-keyframes flipfront180 { from { z-index:20; -o-transform: rotateX(0deg); } 49% { z-index:20; } 50% { z-index:10; } to { z-index:10; -o-transform: rotateX(-180deg); } } @-keyframes flipback180 { 0% { z-index:10; transform: rotateX(180deg); } 49% { z-index:10; } 50% { z-index:20; } 100% { z-index:20; transform: rotateX(0deg); } } @-webkit-keyframes flipback180 { from { z-index:10; -webkit-transform: rotateX(180deg); } 49% { z-index:10; } 50% { z-index:20; } to { z-index:20; -webkit-transform: rotateX(0deg); } } @-moz-keyframes flipback180 { 0% { z-index:10; -moz-transform: rotateX(180deg); } 49% { z-index:10; } 50% { z-index:20; } 100% { z-index:20; -moz-transform: rotateX(0deg); } } @-ms-keyframes flipback180 { from { z-index:10; -ms-transform: rotateX(180deg); } 49% { z-index:10; } 50% { z-index:20; } to { z-index:20; -ms-transform: rotateX(0deg); } } @-o-keyframes flipback180 { from { z-index:10; -o-transform: rotateX(180deg); } 49% { z-index:10; } 50% { z-index:20; } to { z-index:20; -o-transform: rotateX(0deg); } } /* Flip Horizontal */ @-keyframes flipfrontY180 { 0% { z-index:20; transform: rotateY(0deg); } 49% { z-index:20; } 50% { z-index:10; } 100% { z-index:10; transform: rotateY(-180deg); } } @-webkit-keyframes flipfrontY180 { from { z-index:20; -webkit-transform: rotateY(0deg); } 49% { z-index:20; } 50% { z-index:10; } to { z-index:10; -webkit-transform: rotateY(-180deg); } } @-moz-keyframes flipfrontY180 { 0% { z-index:20; -moz-transform: rotateY(0deg); } 49% { z-index:20; } 50% { z-index:10; } 100% { z-index:10; -moz-transform: rotateY(-180deg); } } @-ms-keyframes flipfrontY180 { from { z-index:20; -ms-transform: rotateY(0deg); } 49% { z-index:20; } 50% { z-index:10; } to { z-index:10; -ms-transform: rotateY(-180deg); } } @-o-keyframes flipfrontY180 { from { z-index:20; -o-transform: rotateY(0deg); } 49% { z-index:20; } 50% { z-index:10; } to { z-index:10; -o-transform: rotateY(-180deg); } } @-keyframes flipbackY180 { 0% { z-index:10; transform: rotateY(180deg); } 49% { z-index:10; } 50% { z-index:20; } 100% { z-index:20; transform: rotateY(0deg); } } @-webkit-keyframes flipbackY180 { from { z-index:10; -webkit-transform: rotateY(180deg); } 49% { z-index:10; } 50% { z-index:20; } to { z-index:20; -webkit-transform: rotateY(0deg); } } @-moz-keyframes flipbackY180 { 0% { z-index:10; -moz-transform: rotateY(180deg); } 49% { z-index:10; } 50% { z-index:20; } 100% { z-index:20; -moz-transform: rotateY(0deg); } } @-ms-keyframes flipbackY180 { from { z-index:10; -ms-transform: rotateY(180deg); } 49% { z-index:10; } 50% { z-index:20; } to { z-index:20; -ms-transform: rotateY(0deg); } } @-o-keyframes flipbackY180 { from { z-index:10; -o-transform: rotateY(180deg); } 49% { z-index:10; } 50% { z-index:20; } to { z-index:20; -o-transform: rotateY(0deg); } } /* * FancyBox - jQuery Plugin * Simple and fancy lightbox alternative * * Examples and documentation at: http://fancybox.net * * Copyright (c) 2008 - 2010 Janis Skarnelis * That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated. * * Version: 1.3.4 (11/11/2010) * Requires: jQuery v1.3+ * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html */ #fancybox-loading { position: fixed; top: 50%; left: 50%; width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; cursor: pointer; overflow: hidden; z-index: 1104; display: none; } #fancybox-loading div { position: absolute; top: 0; left: 0; width: 40px; height: 480px; background-image: url('images/fancybox/fancybox.png'); } #fancybox-overlay { position: absolute; top: 0; left: 0; width: 100%; z-index: 1100; display: none; } #fancybox-tmp { padding: 0; margin: 0; border: 0; overflow: auto; display: none; } #fancybox-wrap { position: absolute; top: 0; left: 0; padding: 20px; z-index: 1101; outline: none; display: none; } #fancybox-outer { position: relative; width: 100%; height: 100%; background: #fff; } #fancybox-content { width: 0; height: 0; padding: 0; outline: none; position: relative; overflow: hidden; z-index: 1102; border: 0px solid #404040; } #fancybox-hide-sel-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 1101; } #fancybox-close { position: absolute; top: 10px; left: 45px; width: 32px; height: 32px; background: transparent url('images/fancybox/fancy_options.png') 0px -32px; cursor: pointer; z-index: 1103; display: none; } #fancybox-close:hover{ background-position:-32px -32px; } #fancybox-error { color: #444; font: normal 12px/20px Arial; padding: 14px; margin: 0; } #fancybox-img { width: 100%; height: 100%; padding: 0; margin: 0; border: none; outline: none; line-height: 0; vertical-align: top; } #fancybox-frame { width: 100%; height: 100%; border: none; display: block; } #fancybox-left, #fancybox-right { position: absolute; top: 10px; height: 32px; width: 32px; cursor: pointer; outline: none; background: transparent url('images/fancybox/blank.gif'); z-index: 1102; display: none; border:none; } #fancybox-left { left: 10px; } #fancybox-right { left: 80px; } #fancybox-left-ico, #fancybox-right-ico { position: absolute; top: 0; left: -9999px; width: 32px; height: 32px; cursor: pointer; z-index: 1102; display: block; } #fancybox-left-ico { background-image: url('images/fancybox/fancy_options.png'); background-position:0 0; } #fancybox-left-ico:hover{ background-position:-32px 0; } #fancybox-right-ico { background-image: url('images/fancybox/fancy_options.png'); background-position:0 -64px; } #fancybox-right-ico:hover{ background-position:-32px -64px; } #fancybox-left:hover, #fancybox-right:hover{ visibility: visible; /* IE6 */ } #fancybox-left:hover span{ left:0; } #fancybox-right:hover span { left:0; } .fancybox-bg { position: absolute; padding: 0; margin: 0; border: 0; width: 20px; height: 20px; z-index: 1001; } #fancybox-bg-n { top: -20px; left: 0; width: 100%; background-image: url('images/fancybox/fancybox-x.png'); } #fancybox-bg-ne { top: -20px; right: -20px; background-image: url('images/fancybox/fancybox.png'); background-position: -40px -162px; } #fancybox-bg-e { top: 0; right: -20px; height: 100%; background-image: url('images/fancybox/fancybox-y.png'); background-position: -20px 0px; } #fancybox-bg-se { bottom: -20px; right: -20px; background-image: url('images/fancybox/fancybox.png'); background-position: -40px -182px; } #fancybox-bg-s { bottom: -20px; left: 0; width: 100%; background-image: url('images/fancybox/fancybox-x.png'); background-position: 0px -20px; } #fancybox-bg-sw { bottom: -20px; left: -20px; background-image: url('images/fancybox/fancybox.png'); background-position: -40px -142px; } #fancybox-bg-w { top: 0; left: -20px; height: 100%; background-image: url('images/fancybox/fancybox-y.png'); } #fancybox-bg-nw { top: -20px; left: -20px; background-image: url('images/fancybox/fancybox.png'); background-position: -40px -122px; } #fancybox-title { font-family: Helvetica; font-size: 12px; z-index: 1102; } .fancybox-title-inside { padding-bottom: 10px; text-align: center; color: #333; background: #fff; position: relative; } .fancybox-title-outside { padding-top: 10px; color: #fff; } .fancybox-title-over { position: absolute; bottom: 0; left: 0; color: #FFF; text-align: left; } #fancybox-title-over { padding: 10px; background-image: url('images/fancybox/fancy_title_over.png'); display: block; } .fancybox-title-float { position: absolute; left: 0; bottom: -20px; height: 32px; } #fancybox-title-float-wrap { border: none; border-collapse: collapse; width: auto; } #fancybox-title-float-wrap td { border: none; white-space: nowrap; } #fancybox-title-float-left { padding: 0 0 0 15px; background: url('images/fancybox/fancybox.png') -40px -90px no-repeat; } #fancybox-title-float-main { color: #FFF; line-height: 29px; font-weight: bold; padding: 0 0 3px 0; background: url('images/fancybox/fancybox-x.png') 0px -40px; } #fancybox-title-float-right { padding: 0 0 0 15px; background: url('images/fancybox/fancybox.png') -55px -90px no-repeat; } /* * jQuery FlexSlider v2.0 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl-2.0.html * * Contributing author: Tyler Smith (@mbmufffin) */ /* Browser Resets */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider {margin: 0; padding: 0;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {width: 100%; display: block;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* FlexSlider Default Theme *********************************/ .flexslider {margin: 0; position: relative; zoom: 1; color:#fff;} .mainslide{margin-bottom:10px;} .postslide{overflow:hidden;position:relative;} article ul.slides li{padding:0;margin:0;} article ul.flex-direction-nav{height:0;} .flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;} .loading .flex-viewport {max-height: 300px;} .flexslider .slides {zoom: 1;} .carousel li {margin-right: 5px} .flex-title{ position:absolute; top:55px; right:25px; padding:0 20px; font-size:4.8em; line-height:1.4em; } /* Direction Nav */ .flex-direction-nav a {width: 30px; height: 40px; margin: -20px 0 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;} .flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; } .flex-direction-nav .flex-prev {left: -36px;} .flexslider:hover .flex-next {opacity: 0.8; right: 5px;} .flexslider:hover .flex-prev {opacity: 0.8; left: 5px;} .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;} .flex-direction-nav .disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;} /* Control Nav */ .flex-control-nav {width: 100%; position: absolute; bottom: 0; text-align: center;} .flex-control-nav li {margin: 0 6px 10px 6px; display: inline-block; zoom: 1; *display: inline;} .flex-control-paging li a {width: 20px; height: 10px; display: block; cursor: pointer; text-indent: -9999px; border:1px solid #fff; transition:background 0.3s; -moz-transition:background 0.3s; -webkit-transition:background 0.3s; -o-transition:background 0.3s;} .flex-control-paging li a:hover { background: #fff; border:1px solid;} .flex-control-paging li a.flex-active { background: #fff; border:1px solid;} .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;} .flex-control-thumbs li {width: 25%; float: left; margin: 0;} .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;} .flex-control-thumbs img:hover {opacity: 1;} .flex-control-thumbs .active {opacity: 1; cursor: default;} @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev {opacity: 1; left: 0;} .flex-direction-nav .flex-next {opacity: 1; right: 0;} .flex-title{ font-size:3.6em; line-height:50px; } } @media screen and (max-width: 640px) { .flexslider{ margin-top:50px; } .postslide{ margin-top:0; } .flex-title{ top:-40px; left:0; font-size:2.4em; line-height:40px; display:block; width:100%; } } /* * Skin for jPlayer Plugin (jQuery JavaScript Library) * http://www.happyworm.com/jquery/jplayer */ .jp-jplayer > video{ background:#000; } .jp-video, .jp-audio { font-family:"Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; position:relative; } .jp-video-360p { width:100%; margin:0; } .jp-video-full { width:480px; height:270px; position:static !important; position:relative } .jp-video-full .jp-jplayer { top: 0; left: 0; position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */ overflow: hidden; z-index:1000; } .jp-video-full .jp-gui { position: fixed !important; position: static; /* Rules for IE6 (full-screen) */ top: 0; left: 0; width:100%; height:100%; z-index:1000; } .jp-video-full .jp-interface { position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */ bottom: 0; left: 0; z-index:1000; } /* Controls */ .jp-interface { position: relative; width:100%; height: 35px; background:#202020; } div.jp-controls-holder { clear: both; width:570px; margin: 0 auto; position: relative; overflow:hidden; } a.jp-play, a.jp-pause { width:40px; height:35px; float:left; text-indent:-9999px; outline:none; } a.jp-play { background: url("images/jp-controls.png") 0 0 no-repeat; } a.jp-pause { background: url("images/jp-controls.png") -40px 0 no-repeat; display: none; } .separator { background-image:url("images/separator.png"); background-repeat:no-repeat; width: 2px; height: 35px; float:left; margin-top: 7px; margin-right: 10px; } .jp-progress { background: #706d6d; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.4), 0px 1px 0px rgba(255,255,255,.4); -moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,.4), 0px 1px 0px rgba(255,255,255,.4); box-shadow: inset 0px 1px 4px rgba(0,0,0,.4), 0px 1px 0px rgba(255,255,255,.4); width:280px; height:10px; float:left; margin-top: 13px; } .jp-seek-bar { width:0px; height:100%; cursor: pointer; } .jp-seeking-bg { background:#575555; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .jp-play-bar { background: url("images/play-bar.png") left repeat-x; width:0px; height:10px; position:relative; z-index: 9999; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .jp-play-bar span { position:absolute; top: -3px; right: -12px; width: 16px; height: 17px; } .jp-current-time, .jp-duration { font-size:11px; font-family:Arial; color:#f7f7f7; margin-top: 10px; float:left; } .jp-current-time { float: left; display:inline; } .jp-duration { float: left; display:inline; text-align: right; } .jp-video .jp-current-time, .jp-audio .jp-current-time { margin-left:10px; } .jp-video .jp-duration, .jp-audio .jp-duration { margin-right:10px; } .time-sep { float:left; margin: 10px 3px 0 3px; font-size:11px; font-family:Arial; color:#f7f7f7; } .jp-video a.jp-mute, .jp-video a.jp-unmute, .jp-audio a.jp-mute, .jp-audio a.jp-unmute { text-indent:-9999px; float:left; height: 35px; outline:none; } .jp-mute { float:left; background: url("images/jp-controls.png") -80px 0 no-repeat; margin-top: 1px; margin-left: -10px; width: 35px; } a.jp-unmute { background: url("images/jp-controls.png") -115px 0 no-repeat; margin-top: 1px; margin-left: -13px; display: none; width: 38px; } .jp-volume-bar { float:left; margin-top: 13px; margin-right: 10px; overflow:hidden; width:70px; height:10px; cursor: pointer; background: #706d6d; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.4), 0px 1px 0px rgba(255,255,255,.4); -moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,.4), 0px 1px 0px rgba(255,255,255,.4); box-shadow: inset 0px 1px 4px rgba(0,0,0,.4), 0px 1px 0px rgba(255,255,255,.4); } .jp-volume-bar-value { width:0px; height:10px; position: relative; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .jp-volume-bar-value span { position:absolute; top:0px; right:-5px; width:11px; height:10px; } .jp-full-screen { background: url("images/jp-controls.png") -150px 0 no-repeat; float:left; width: 40px; height: 35px; text-indent:-9999px; margin-left: -15px; outline:none; } .jp-restore-screen { background: url("images/jp-controls.png") -185px 0 no-repeat; float:left; width: 40px; height: 35px; text-indent:-9999px; margin-left: -15px; outline:none; } a.jp-play, a.jp-pause, a.jp-mute, a.jp-unmute, a.jp-full-screen, a.jp-restore-screen { opacity:0.8; transition:opacity 0.3s; -moz-transition:opacity 0.3s; -webkit-transition:opacity 0.3s; -o-transition:opacity 0.3s; } a.jp-play:hover, a.jp-pause:hover, a.jp-mute:hover, a.jp-unmute:hover, a.jp-full-screen:hover, a.jp-restore-screen:hover { opacity:1; } /* @end */ /* @group NO SOLUTION error feedback */ .jp-no-solution { position:absolute; width:390px; margin-left:-202px; left:50%; top: 10px; padding:5px; font-size:.8em; background-color:#eee; border:2px solid #009be3; color:#000; display:none; } .jp-no-solution a { color:#000; } .jp-no-solution span { font-size:1em; display:block; text-align:center; font-weight:bold; } /* @end */ /*---------------------------------------------------------------------------- Theme Colours ----------------------------------------------------------------------------*/ .blue{ background-color:#1BA1E2 !important; } .bluetxt{ color:#1BA1E2 !important; } .red{ background-color:#D9442F !important; } .redtxt{ color:#D9442F !important; } .green{ background-color:#00A000 !important; } .greentxt{ color:#00A000 !important; } .magenta{ background-color:#FF0094 !important; } .magentatxt{ color:#FF0094 !important; } .purple{ background-color:#A500FF !important; } .purpletxt{ color:#A500FF !important; } .teal{ background-color:#00AAAD !important; } .tealtxt{ color:#00AAAD !important; } .lime{ background-color:#8CBE29 !important; } .limetxt{ color:#8CBE29 !important; } .brown{ background-color:#9C5100 !important; } .browntxt{ color:#9C5100 !important; } .pink{ background-color:#E671B5 !important; } .pinktxt{ color:#E671B5 !important; } .mango{ background-color:#EF9608 !important; } .mangotxt{ color:#EF9608 !important; } .black{ background-color:#000 !important; } .blacktxt{ color:#000 !important; } .white{ background-color:#fff !important; } .whitetxt{ color:#fff !important; } .orange{ background-color:#D7522B !important; } .orangetxt{ color:#D7522B !important; } .orange-light{ background: #FF791F !important; } .orange-dark{ background: #D7522B !important; } .orange-light-txt{ color: #FF791F !important; } .orange-dark-txt{ color: #D7522B !important; } /*---------------------------------------------------------------------------- Position-dependent classes ----------------------------------------------------------------------------*/ .last{ margin-right:0; } #fancybox-left-ico { left:0; } #fancybox-right-ico { left:0; } /*-------------------------Browser Specific CSS-----------------------------*/ noindex:-o-prefocus, #content-title, .page-sub-title h1, .section-title, .widget h5 { font-family:'Segoe UI Light' !important; } @media all and (-webkit-min-device-pixel-ratio:0) { #content-title, .page-sub-title h1, .section-title, .widget h5 { font-family:'Segoe UI Light' !important; } } /*----------------------------Mobile Version--------------------------------*/ @media all and (max-width:640px) { .last{ margin-right:auto; } } /*---------------------------------------------------------------------------- Theme Preview Demo Only ----------------------------------------------------------------------------*/ #colorchanger{ position:fixed; top:50px; left:-210px; display:block; text-align:left; transition:left 0.3s; -moz-transition:left 0.3s; -webkit-transition:left 0.3s; -o-transition:left 0.3s; z-index:1500; } #colorchanger:hover{ left:0; } #colorchanger h4{ background:url(images/right.png) no-repeat 212px 7px #000; color:#fff; padding-right:40px; } #colorchanger a span{ width:80px; height:30px; display:block; margin-bottom:5px; color:#fff; text-align:center; line-height:30px; font-size:1.2em; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; } #colorchanger a span:hover{ background:#fff !important; color:#000; } .button-demo span{ margin:0 20px 20px 0; } #demo-button h2{ padding-left:20px; } .demo-dark-button{ background:#000; padding:20px 0 0 20px; } .demo-light-button{ background:#fff; padding:20px 0 0 20px; } div#quote-block{ cursor: pointer; } .foto-ggalerija{ z-index: 30; text-transform: uppercase; bottom: 0px; position: absolute; text-align: center; width: 310px; background: royalblue; }