/*----------------------------------------------------------------------- Style Name: Default Author: Elves Sousa This style contains most of the needed styles for the frontend. Feel free to adjust it to your needs. - Tags - Header - Loading screen - Slider - Full Slider page - Timelines - Master headings - Search forms ------------------------------------------------------------------------*/ /*/ @import url(animation.css); /**/ /**/ @import url(specific/icons.css); /**/ /* Tags ------------------------------------ */ html, body { margin: 0 !important; padding: 0; } body { background-color: #fff; color: #000; font-size: 14px ; line-height: 1.5em; } a { color: #666; } a:hover { -moz-transition: color .5s linear; -ms-transition: color .5s linear; -o-transition: color .5s linear; -webkit-transition: color .5s linear; color: #333; text-decoration: none; transition: color .5s linear; } h1, h2, h3, h4 { -moz-font-feature-settings:"liga=1, dlig=1"; color: #000; font-feature-settings: 'liga'; -moz-font-feature-settings:"liga", "dlig"; -ms-font-feature-settings:"liga", "dlig"; -o-font-feature-settings:"liga", "dlig"; -webkit-font-feature-settings:"liga", "dlig"; font-feature-settings:"liga", "dlig"; } p, blockquote p, form { line-height: 1.2em; } strong { color: #000; } img { max-width: 100%; height: auto; } ul.sub-menu, ul.menu { padding: 0; } .inline li { display: block; float: left; } .entry-title { clear:both; font-size: 1.5em; } .entry-title a { color: #000;} .entry-title span { color: #ccc; } /* Header ------------------------------------ */ #header { -webkit-animation-duration: .5s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: ease; animation-duration: .5s; animation-name: fadeIn; animation-timing-function: ease; } #header .logo h1 { padding: 10px 0 0 0; margin: 0; } /* Loading screen ------------------------------------ */ #site-loading { position: fixed; background: #fff; height: 100%; width: 100%; z-index: 10000; } .empty #site-loading { display: none; } #site-loading .loading { width: 40px; height: 40px; position: fixed; top: 50%; left: 50%; color: #000; font-size: 40px; } .spin { -moz-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; } /* Top menu ------------------------------------ */ .menu li a { padding: 1em; } /* Side menu ------------------------------------ */ #sidr .caret { display: none;} #sidr a, #sidr ul li a { background: none;} #side-menu-left { left: 0; margin: 10px; position: absolute; } #side-menu-right { margin: 10px; position: absolute; right: 0; } /* Slider ------------------------------------ */ #homeslider { height: 400px; overflow: hidden; text-align: center; } .slider-content { display: table; width: 100%; } .slider-container .masthead { margin-bottom: 0; padding: 0; text-align: center; } .slider-container .masthead p { text-align: center; } .slider-caption { padding: 20px; } .slider-caption, .slider-image { display: table-cell; vertical-align: middle; } .bx-prev, .bx-next { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .slider-caption .caption-inner { text-align: left; } .slide img { margin: auto; max-width: 100% !important; } .slider-thumbs { margin-top: -70px; position: absolute; text-align: center; width: 100%; z-index: 100 } .slider-thumbs a img { height: auto; } /* Featured Shortcode ------------------------------------ */ #featured-full { width: 100%; height: 400px; } #featured-full .masthead-tag{ text-align: center; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto !important; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } #featured-full .masthead-tag img{ width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto !important; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } #featured-full a.full-link { display: block; height: 100%; width: 100%; position: absolute; left: 0px; z-index: 100; } /* Full Slider page ------------------------------------ */ body.slider-full { height: 100%; width: 100%; overflow: hidden; } .slider-full footer { display: none; } /* Timelines ------------------------------------ */ #timeslider .storyjs-embed { border-left: 0; border-radius: 0; border-right: 0; border-top: 0; } .timepage-full #top, .timepage-full .navbar { position: absolute; width: 100%; z-index: 10; } .timepage-full .vco-timeline { height: 100% !important; position: absolute !important; z-index: 1; } .timepage-full footer { display: none; } /* Master headings ------------------------------------ */ .heading-container { background-attachment: fixed; display: table; text-align: center; width: 100%; } .heading-container .masthead { display: table-cell; vertical-align: middle; } .masthead { margin-bottom: 0; padding: 70px 0 80px; } .masthead h1 { animation: bounceIn .5s ease-in-out; -moz-animation: bounceIn .5s ease-in-out; -ms-animation: bounceIn .5s ease-in-out; -o-animation: bounceIn .5s ease-in-out; -webkit-animation: bounceIn .5s ease-in-out; font-size: 6em; letter-spacing: -2px; line-height: 1; } .masthead p { font-size: 40px; font-weight: 200; line-height: 1.25; } /* Textual links in masthead */ .masthead-links { list-style: none; margin: 0; } .masthead-links li { color: #000; display: inline; padding: 0 10px; } /* Modal search ------------------------------------ */ #searchmodal { box-shadow: none; border: transparent; color: #eee; } #searchmodal p { padding: 10px 0; } #searchmodal .modal-header { border: transparent; padding: 0; } #searchmodal button.close { position: absolute; top: 0px; right: 10px; color: #fff; padding: 10px; font-size: 40px; } #searchmodal .modal-backdrop, .modal-backdrop.fade.in { opacity: 0.9; filter: alpha(opacity=80); } #searchmodal .input-term { height: auto; padding: 10px 16px; font-size: 60px; background: transparent; border-color: transparent; color: #fff; } #searchmodal button.close:focus, #searchmodal .input-term:focus, #searchmodal .button-search:focus { box-shadow: none; outline: none; } #searchmodal .button-search { background: transparent; color: #fff; font-size: 30px; } /* Content ------------------------------------ */ #catchphrase { padding: 20px 0px; } #catchphrase h1, #catchphrase p { text-align: center; } .feature { margin-top: 10px; } #pagetitle { padding: 20px 0; } #pagetitle h1 { color: #000; display: block; font-size: 3.5em; line-height: 50px; } .search #pagetitle h1 { text-align: center; } .sectionhead { color: #fff; display: block; font-size: 3.5px; font-weight: 100; line-height: normal; margin: 40px 0 40px 0; text-align: center; } .entry-content { margin: 20px 0 20px 0; } .archive .entry-content, .blog .entry-content { clear: right; margin: 0; } .placeholder { color: #ddd; font-size: 80px; text-align: center; } .breadcrumbs { margin: 0; padding: 0; list-style: none;} .breadcrumbs li { padding: 0.2em 0.2em; display: block; float:left;} /* Pages ------------------------------------ */ .page-header { border-bottom: 1px solid #EEE; font-size: 1.5em; line-height: 1.5em; margin: 20px 0 30px; padding-bottom: 20px; } .single .page-header { border-bottom: transparent; font-size: 1.5em; line-height: 1.5em; margin: 20px 0 30px; padding-bottom: 20px; } /* Post ------------------------------------ */ .posts { padding: 20px 0; } .posts .date { margin: 25px 0 0 0; text-align: center; } .posts .date h2 { color: #666; font-size: 2.7em; margin: 0; padding: 0; } .posts .date h3 { color: #555; font-size: 1em; margin: -20px 0 0 0; } .entry-meta { clear:both; color: #444; } .comment-meta { clear:both; color: #444; } .single .comment-meta { margin: 0 0 0 80px; } .entry-date { color: #444; } #container { } #primary { } #content { margin: 0 !important; } .portfolio-item, .video-item { height: 260px; overflow: hidden; } .symbol { float: right; padding: 0 20px 0 10px; font-size: 50px; color: rgba(0, 0, 0, 0.1); } .entry-content p { line-height: 1.5em; } .bypostauthor {} .sticky {} /* Widget areas ------------------------------------ */ .home-sidebar ul li { list-style: none; } /* Posts in widgets ------------------------------------ */ .lastlist .item { height: 90px; margin: 10px 0 0 -20px; } .lastlist .thumbblock { background: #000; border: 1px solid #ccc; height: 78px; margin: 0 20px 0 20px; overflow:hidden; width: 78px; } .lastlist .thumbblock img { height: auto; min-width: 90px; } .lastlist .nothumb { background: #ddd; border: 1px solid #ccc; height: 78px; width: 78px; } .lastlist .text { margin: 2% 0 0 39% ; } .lastlist .name { padding: 10px 12px; } .lastlist .postlink { font-size: 1.3em; line-height: 1.3em; } .item-top { text-align: center; } .item-list .item-image, .video-image { width: 100%; max-height: 150px; overflow: hidden; border-radius: 5px; } .item-list .item-image img { margin: auto; } .item-list .name { font-size: 18px; padding: 10px 0; text-align: center; } .item-list .item .thumbnail { margin: auto; } .item-list img.video-item { margin-top: -30px;} .item-date h2, .item-date h4 { line-height: 0.9em; margin: 0; padding: 0; text-align: center; } .text .name br { display: none; } /* Tumblog styled posts ------------------------------------ */ .tpost { border: 1px solid #ccc; margin: 0 0 40px 0; } .tpost:hover { border: 1px solid #bbb; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .tpost .pthumbnail {clear: both; } .tpost .entry-date { padding: 5px; } .tpost .entry-meta { clear: both !important; } .tpost img { border-bottom: 1px solid #ccc; clear: both; height: auto; width: 100%; } .tpost .postname {} .tpost .entry-content { border-bottom: 1px solid #eee; border-top: 1px solid #eee; padding: 10px; } .tpost .item-date { background: #000; border: 1px solid #ccc; color: #fff; border-radius: 5px; left: -10px; padding: 5px; position: relative; } .tpost .date { text-align: center; } .tpost .item-date h2 { color: #fff; } .tpost .item-date h4 { color: #fff; } .tpost .title { float: left; min-height: 75px; width: 70%; } .tpost .entry-title { clear: both; margin-top: 12px; } .tpost .entry-meta { padding: 10px; } /* Tumblog styled posts ------------------------------------ */ .pinpost { margin: 0; } .pinpost .pin { border: 1px solid #ccc; margin: 20px; } .pinpost h4, .pinpost p { padding: 0 20px; } .pinpost .entry-meta, .pinpost .date { padding: 20px; } /* Share Options ------------------------------------ */ .share-options .share-links li { padding: 5px; } .share-options .share-links li i { font-size: 25px; margin: 5px 0; } .share-options .share-links .inline li i { font-size: 25px; margin: 0 15px 0 0; } /* Comments ------------------------------------ */ #respond, #comments { border-top: 1px solid #444; } #comment-meta { } .commenter { font-size: 1em; margin: 0 0 0 60px; } /* Single ------------------------------------ */ .single #topcontent { padding: 0 0 20px 0; } .single .video { background: #000; margin: -30px 0 30px 0; } .single .gallery-item img { background: #ddd; border: 6px solid #eee !important; margin: 5px; outline: 1px solid #ccc; } .single #respond, #comments { border-top: none; } .attachment .entry-content { text-align: center } .entry-attachment a img { border: 6px solid #000; margin: auto; outline: 1px solid #333; } .singlebar { margin: 20px 0 0 0; } #singleoptions .sidelinks li { padding: 5px 0; } #singleoptions i.social { float: left; font-size: 1.5em; } #singleoptions .date { border-right: none; border-top: 1px solid #404040; display: block; padding: 5px; text-align: left; } .comment-meta i { color: #333; float: none; font-size: 14px; } /* Sidebar ------------------------------------ */ .sidebar h3 { color: #000; } .sidebar ul { margin: 10px;} .sidebar ul li { list-style: none; padding: 5px; } .sidebar ul li a { } .sidebar ul li ul li ul { background: #eee; border-radius: 5px; border: 1px solid #ccc; display: none; margin: -10px 0 0 20px; min-width: 100px; padding: 10px; position: absolute; } .sidebar ul li ul li:hover ul { display: block; } /* Footer ------------------------------------ */ #footer { border-top: 1px solid transparent; color: #333; margin: 30px 0 0 0; padding: 0; } #footer .menucontainer { border-bottom: 1px solid transparent; } #footer .menu { margin: 0px; } #footer .menu li a { display: block; padding: 3px 16px 0 0; text-decoration: none; } #footer h3 { color: #666; } #footer ul, #footer li { list-style: none; margin: 0; padding: 0; } #bottom { border-top: 1px solid transparent; margin: 20px 0 0 0; } .copy { color: #444; } .scrollup { position:fixed; right: 10px; bottom: 20px; width: 50px; background: #000; background: rgba(0, 0, 0, 0.1); padding: 5px; border-radius: 5px; text-align: center; cursor: pointer; } /* Social links ------------------------------------ */ #footer .social a, #top .social a { color: #444; display: block; float: right; font-size: 20px; height: 30px; margin: 5px; width: 30px; cursor: pointer; } #footer .social a:hover, #top .social a:hover { color: #666; } .thumb { border: none; margin: auto; padding: 0; border-radius: 5px; width: 100%; max-width: 300px; overflow: hidden; } .thumb img { height: auto; /*min-width: 300px;*/ max-width: 100%; } /* Portfolio ------------------------------------ */ .project-type .read-more { font-size: 28px; padding: 0 0 0 30px; } /* Profiles ------------------------------------ */ .profile-type .read-more { font-size: 28px; padding: 0 0 0 30px; } /* Portfolio & Recipes columns ------------------------------------ */ /* 4 columns */ .col-lg-3 .dailymage, .col-lg-3 .portfolio-image, .col-lg-3 .profile-image, .col-lg-3 .vimage, .col-lg-3 .youthumb, .col-lg-3 .video-image { height: 150px; margin: 1px; overflow: hidden; position: relative; width: 290px; } .gallery-item { padding: 0; } .gallery-item p { padding: 10px; } .gallery-image { height: 200px; overflow: hidden; position: relative; } .youthumb img { margin: -40px 0 0 0; } .thumbnail img, .portfolio-image img, .profile-image img { height: auto; max-width: 310px; } .video-image img { margin-top: -45px; } .videooptions {opacity: 1; } .options {opacity: 1; } i.thumbicon { display: block; font-size: 60px; height: 60px; letter-spacing: 1em; text-align: center; width: 60px; } .portfolio-item h2, .profile-item h2 { font-size: 18px; line-height: normal; text-align: center } .portfolio-item h2 i { padding: 0 5px 0 6px; } .video-item h2 { font-size: 18px; line-height: normal; text-align: center } .videoexcerpt, .folioexcerpt, .linkexcerpt, .imageexcerpt, .galleryexcerpt { padding: 0 15px 0 7px; } .wtitle { height: 250px !important;} /* Cover */ .cover { background: #000; color: #ccc; background: rgba(0, 0, 0, 0.8); height: 200px; opacity: 0; display: table; text-align: center; overflow: hidden; position: absolute; visibility: hidden; width: 100% ; } .no-image .info { background: #000; color: #ccc; height: 200px; display: table; text-align: center; overflow: hidden; position: absolute; width: 100% ; } .cover .title, .no-image .info .title { display: table-cell; vertical-align: middle; } .cover a { color: #eee;} .cover a:hover { color: #fff;} .cover i { color: #fff;} .video-image:hover .cover, .gallery-image:hover .cover, .p .cover { -moz-transition: opacity .5s linear; -webkit-transition: opacity .5s linear; -o-transition: opacity .5s linear; opacity: 1; visibility: visible; } /* Video Channel page ------------------------------------ */ .vtitle h3 { font-size: 18px; line-height: normal; } /* Gallery page ------------------------------------ */ h2.view { font-size: 3em; margin: 65px 0 0 75px; } /* Audio player ------------------------- */ p.audio-link { margin: 0; padding: 10px 0 30px 0; } /* Recipes ------------------------------------- */ .recipe-categories-list { border-bottom: 1px solid #eee; border-top: 1px solid #eee; } .recipe-categories-list .term-list { } .recipe-categories-list .category-title { text-align: center; } .recipe-categories-list .inline li a { display: block; float: left; font-size: 14px; line-height: 12px; padding: 5px; text-align: center; width: 80px; } .recipe-category .read-more { font-size: 28px; padding: 0 0 0 30px; } .recipe-item h2 { font-size: 18px; line-height: normal; text-align: center; } .recipe-item i.icon-search { color: white; font-size: 1em; position: absolute; z-index: 3; } .recipe-item i.icon-play { color: white; font-size: 2.5em; margin: 115px 25px 0 0; position: absolute; right: 0; z-index: 3; } .single .recipe-image img { display: block; margin: auto; } .single .recipe-image i { color: #fff; font-size: 40px; margin: 16px -527px; position: absolute; z-index: 1; } .recipe-info .inline li { padding: 5px 15px 5px 0; } .recipe-info .inline li i { margin: -2px 15px 0; } .recipe-ingredients ul li { list-style: none outside url(../images/elements/lists.png); } /* Channel page ------------------------------------ */ .videopage #topcontent { margin: 0 0 20px 0; padding: 0 0 20px 0; } #videoplayer { background: black; border: 1px solid #666; display: block; height: 375px; margin: auto; width: 610px; } #topvideo, .topvideo { text-align: center; margin: 20px auto 40px auto; } #topvideo iframe, .topvideo iframe { box-shadow: 0 0 10px rgba(0, 0, 0, 0.4) } .vtitle { padding: 10px 0;} h2.play { font-size: 3em; margin: 18% 41%; text-align: left; } /* Bootstrap workarounds ------------------------- */ .accordion-group { border: none;} .accordion-heading .accordion-toggle { padding: 10px 0 0 0; } .hero-unit { background-color: transparent;} .carousel-caption { border-top-left-radius: 10px; border-top-right-radius: 10px; color: #ccc; text-align: left; } .jumbotron { background-color: transparent !important;} .navbar-static-top { margin-bottom: 0; } .nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus { background-color: #000; } .nav>li>a:hover, .nav>li>a:focus { background-color: transparent;} .navbar-brand { padding: 15px 5px; } /* Video player ------------------------- */ .videoplayer { margin: auto !important; } /* Icons ------------------------- */ .recipe-info i { font-size: 20px; } header #top i, #footer i { font-size: 20px; margin: 0; } .navbar i { font-size: 20px; margin: 7px 19px; } .navbar .dropdown ul li i { font-size: 17px; margin: 0px 10px 0 0; } i.quote:before { content: '\201C'; line-height: 0.7em; } i.quote { color: #000000; display: block; float: left; font-family: Georgia,serif; font-size: 7em; font-style: italic; height: 20px; overflow: hidden; padding: 10px; width: 0.6em; } /* Social Icons ------------------------- */ .color .icon-gplus:hover, .color .icon-google-plus-2:hover { color: #db4a39;} .color .icon-pinterest:hover, .color .icon-pinterest-2:hover { color: #910101; } .colored .icon-facebook, .color .icon-facebook:hover, .colored .icon-facebook-2, .color .icon-facebook-2:hover { color: #3b5998; } .colored .icon-flickr,.color .icon-flickr:hover { color: #0063dc;} .colored .icon-github-5, .color .icon-github-5:hover { color: #4183c4; } .colored .icon-google-plus-2, .colored .icon-gplus, .colored .icon-linkedin, .color .icon-linkedin:hover { color: #0e76a8; } .colored .icon-pinterest, .colored .icon-pinterest-2, .colored .icon-tumblr, .color .icon-tumblr:hover { color: #34526f; } .colored .icon-twitter, .color .icon-twitter:hover { color: #00a0d1; } .colored .icon-vimeo, .color .icon-vimeo:hover { color: #86c9ef;} .colored .icon-youtube, .color .icon-youtube:hover { color: #c4302b;} .color .icon-facebook:hover, .color .icon-facebook-2:hover, .color .icon-flickr:hover, .color .icon-github-5:hover, .color .icon-gplus:hover, .color .icon-google-plus-2:hover, .color .icon-linkedin:hover, .color .icon-pinterest:hover, .color .icon-pinterest-2:hover, .color .icon-tumblr:hover, .color .icon-twitter:hover, .color .icon-vimeo:hover, .color .icon-youtube:hover { -moz-transition: color .5s linear; -ms-transition: color .5s linear; -o-transition: color .5s linear; -webkit-transition: color .5s linear; margin: -1px 0 0 0; transition: color .5s linear; } .colored i:hover { -moz-transition: color .5s linear; -ms-transition: color .5s linear; -o-transition: color .5s linear; -webkit-transition: color .5s linear; color: #000; margin: -1px 0 0 0; transition: color .5s linear; } /* Responsiveness ------------------------- */ .embed-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; margin-bottom: 30px; } .embed-container iframe, .embed-container object { position: absolute; left: 0 } #menu-phone ul li, #menu-phone ul:hover li ul { display: block; float: none; } #menu-phone .menu-title { text-align: center } /* Phones ------------------------- */ @media (max-width: 767px) { .logo { text-align: center; } #toparea .social { display: none !important; } .navbar .menu li { display: block; float: none; } .content { margin: 0 20px;} .navbar .menu li ul { color: inherit !important; display: block; opacity: 1; position: static; background: transparent; border: transparent; padding: 5px; } .carousel-caption { top: 70% !important; width: 100% !important; } .tpost .date h2 { line-height: normal; } .tpost .title { text-align: center; width: 100% !important; display: block; } .symbol, .bx-next, .bx-prev { display: none; } } /* Tablet ------------------------- */ @media (min-width: 768px) and (max-width: 979px) { .logo { text-align: center; } #toparea .social { display: none !important; } .navbar .menu li { display: block; float: none; } .content { margin: 0 20px;} .navbar .menu li ul { color: inherit !important; display: block; opacity: 1; position: static; background: transparent; border: transparent; padding: 5px; } .tpost img { max-width: 100%;} .tpost .date h2 { line-height: normal; } .tpost .title { text-align: center; width: 100% !important; display: block; } .symbol, .bx-next, .bx-prev { display: none; } } /* Tools ------------------------- */ .absolute { position: absolute; z-index: 2} .center img, img.center { margin: auto;} .center { text-align: center} .fill { width: 100%; } .left-space { padding: 0 0 0 10px;} .space { padding: 10px 0; } .toppad { padding: 10px 0 0 0; } .top-1 { z-index: 2; } .top-2 { z-index: 5; } .hidden { display: none; } .no-margin { margin: 0; padding: 0;} .tabled { display: table } .cell { display: table-cell; vertical-align: middle; } .fixed-top { position: fixed; width: 100%; z-index: 100; } /* Gallery ------------------------- */ div.gallery { clear:both; } p.wp-caption-text { font-style:italic; } div.gallery dl { margin: 1em auto; overflow: hidden; text-align: center; } div.gallery dl.gallery-columns-1 { width:100%; } div.gallery dl.gallery-columns-2 { width:49%; } div.gallery dl.gallery-columns-3 { width:33%; } div.gallery dl.gallery-columns-4 { width:24%; } div.gallery dl.gallery-columns-5 { width:19%; } .gallery-caption {} /* Navigation ------------------------- */ #nav-above { clear: both; margin-bottom: 1em; } #nav-below { clear: both; margin-top: 1em; } #nav-images { height:150px; margin:1em 0; } div.navigation { height:1.25em; } div.navigation div.nav-next { float:right; text-align:right; } .sidebar h3 { } div.gallery dl, div.navigation div.nav-previous { float:left; } /* Twitter ------------------------- */ .twitter-widget a { color: #000 !important; } /* Browser specific ---------------------------------------------------------------------- */ /* Webkit Scrollbars ------------------------- */ /* ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #fff; border-left: 1px solid rgba(0,0,0,0.1); border-top: 1px solid rgba(0,0,0,0.1); } ::-webkit-scrollbar-thumb { background: #ccc; }*/