@-webkit-keyframes constantrotation { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); background: red } to { transform: rotate(36deg); -webkit-transform: rotate(36deg); -moz-transform: rotate(36deg); -ms-transform: rotate(36deg); -o-transform: rotate(36deg); background: blue } } @keyframes constantrotation { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); background: red } to { transform: rotate(36deg); -webkit-transform: rotate(36deg); -moz-transform: rotate(36deg); -ms-transform: rotate(36deg); -o-transform: rotate(36deg); background: blue } } body { font-family: "Source Sans Pro"; font-size: 14px; font-weight: 300 } body:not(.blog) #search-top { display: none } .container { width: 100% } a,a:active,a:hover,a:visited { color: #666; text-decoration: none; -webkit-transition: ease all .1s; -o-transition: ease all .1s; transition: ease all .1s } #main { margin-right: 20px } #content { padding: 0px } #primary-home { position: relative; left: 25% } #primary-home #page-title { font-family: "Source Sans Pro", Sans-Serif; font-size: 22px; text-transform: uppercase; font-variant: small-caps!important; font-weight: 700; padding: 10px 0; text-align: center; margin-top: 10px; width: 100%; color: black } #primary-home .site-main { padding: 0px } .header-top { position: absolute } #header-wrapper { position: relative } .site-header { overflow: hidden } .site-header .site-branding { z-index: 2; position: absolute; text-align: center; top: 15% } .site-header .site-branding #logo { max-width: 300px; margin: auto } .site-header .site-branding #logo img { width: 200px; height: auto } .site-header .site-branding .site-title { padding: 10px 20px; font-weight: 700 } .site-header .site-branding .site-description { font-size: 16px; padding: 10px 20px; margin: 0px } .header-image { height: 100vh; border-top: solid 1px #999; border-bottom: solid 1px #999; top: 0px; left: 0px; right: 0px; z-index: 1 } body:not(.blog) .site-branding { width: 25%; position: fixed; top: 20% } #search-top { position: absolute; display: block; width: 100%; text-align: center; top: 60%; z-index: 9; margin-left: auto; margin-right: auto } #search-top input[type=text] { border: solid 1px rgba(0, 0, 0, 0.5); outline: 0px; border-radius: 13px; background: rgba(255, 255, 255, 0.5); width: 250px } #search-top button[type=submit] { position: relative; padding: 0px; -webkit-box-shadow: none; box-shadow: none; background: transparent; border: 0px; right: 27px } #search-top button[type=submit] img { height: 15px; width: auto } #page { z-index: 2; position: relative; top: 100%; padding: 0px } #page a { color: #555 } #page a:hover { color: #999 } #scroll-arrow { position: absolute; right: 5%; z-index: 999; bottom: 20px; color: white; cursor: pointer; padding: 20px; background: rgba(0, 0, 0, 0.5); border-radius: 10px } body:not(.blog) .site-branding { width: 25%; position: fixed; top: 20% } body:not(.blog) .site-branding h2.site-description { margin: 0px } .main-navigation { z-index: 3; position: absolute; font-size: 14px; background: rgba(0, 0, 0, 0.4); font-weight: 300 } .main-navigation a { color: #eee } .main-navigation ul { -webkit-transition: opacity ease-in-out 0.2s; -o-transition: opacity ease-in-out 0.2s; transition: opacity ease-in-out 0.2s } .main-navigation ul li { margin: 0px 15px; padding: 15px 0px; display: inline-block; float: none } .main-navigation ul li ul { background: transparent; -webkit-box-shadow: none; box-shadow: none; margin-top: 29px; border-top: solid 1px transparent; opacity: 0 } .main-navigation ul li ul li.page_item_has_children>a:after { content: "\f105"; font-family: "FontAwesome"; margin-left: 10px; color: rgba(255, 255, 255, 0.7) } .main-navigation ul li ul a { width: auto } .main-navigation ul li ul li { width: 150px; margin: 0px; padding: 8px 10px; text-align: left; background: rgba(0, 0, 0, 0.4) } .main-navigation ul li ul li ul { margin-top: -1px; margin-left: 1px } .main-navigation ul>li.page_item_has_children>a:after { content: "\f107"; font-family: FontAwesome; margin-left: 10px } .main-navigation li:hover>ul { opacity: 1 } .main-navigation ul.nav-menu { text-align: center } .main-navigation ul>li { float: none; display: inline-block } .slicknav_menu { position: absolute; z-index: 999; background: rgba(0, 0, 0, 0.5); width: 100%; padding: 10px } .slicknav_menu a { color: white } .slicknav_menu a.slicknav_btn { font-size: 16px; display: inline-block; text-align: right } .slicknav_menu a .slicknav_menutxt { background: #000; color: white; font-weight: 400; padding: 10px 10px } .slicknav_menu ul { width: 80% } .slicknav_menu li { list-style: none; padding: 10px } #social-icons { position: absolute; bottom: 10%; z-index: 9; text-align: center; display: block; width: 100% } #social-icons span { font-size: 30px } #social-icons span i.fa-circle { color: #000 } body:not(.blog) #social-icons { width: 25%; position: fixed; padding: 0px 15px } body:not(.blog) #social-icons i { margin: 10px } .page .header-image,.single .header-image { display: none } .page .main-navigation,.single .main-navigation { position: fixed } .page #page,.single #page { margin-top: 60px; width: 75%; position: relative; float: right } .page #page .entry-header,.single #page .entry-header { padding: 10px 0px } .page #page .entry-header h1.entry-title,.single #page .entry-header h1.entry-title { padding: 4px 0px; margin: 0px; font-size: 30px } .page #page .entry-header .entry-meta,.single #page .entry-header .entry-meta { background: #000; padding: 10px 20px; text-align: right } .page #page .entry-header .entry-meta a,.single #page .entry-header .entry-meta a { color: #eee; text-transform: uppercase; font-weight: 700; font-size: 13px } .page #page .entry-header .entry-meta .byline,.page #page .entry-header .entry-meta .posted-on,.single #page .entry-header .entry-meta .byline,.single #page .entry-header .entry-meta .posted-on { display: inline-block; text-align: right } .page #page .entry-content,.single #page .entry-content { margin-bottom: 10px; margin-top: 10px } .page #page .entry-content p,.single #page .entry-content p { font-size: 15px; line-height: 2em; letter-spacing: 0.05em } .page #page .entry-content img,.single #page .entry-content img { max-width: 80%; display: block; margin: auto } .page #page .entry-footer,.single #page .entry-footer { display: inline-block; width: 100%; text-transform: uppercase; border-top: solid 1px #ddd } .page #page .entry-footer a,.single #page .entry-footer a { display: inline-block } .page #page .entry-footer .cat-links,.single #page .entry-footer .cat-links { text-align: center; font-size: 12px } .page #page .entry-footer .tags-links,.single #page .entry-footer .tags-links { text-align: center; font-size: 12px } .page #page .entry-footer .comments-link,.single #page .entry-footer .comments-link { text-align: center; font-size: 12px } .page #page .entry-footer .edit-link,.single #page .entry-footer .edit-link { display: inline-block; width: 100%; text-align: left } .page #page .entry-footer .text,.single #page .entry-footer .text { color: black; margin-bottom: 10px; margin-top: 10px; padding-top: 5px; font-weight: 700; font-size: 16px; width: 100%; display: block } .page #page .post-navigation,.single #page .post-navigation { display: block; width: 100%; background: #000; padding: 10px 20px; margin-top: 15px } .page #page .post-navigation a,.single #page .post-navigation a { color: white; font-size: 14px; font-weight: 700 } .single-format-video .fa-video-camera { position: absolute; z-index: -1; font-size: 100px; color: #ddd; top: -18px; left: -10px } .single-format-audio .fa-headphones { position: absolute; z-index: -1; font-size: 100px; color: #ddd; top: -18px; left: -10px } .single-format-image .fa-file-image-o { position: absolute; z-index: -1; font-size: 100px; color: #ddd; top: -18px; left: -10px } .single-thumb { margin: 15px auto; width: 100%; text-align: center } .single-thumb img { width: 70%; display: block; margin: auto } .single-format-gallery #primary .entry-content .gallery-icon img { margin: 0px; max-width: 100%; width: 100% } .single-format-gallery #primary .entry-content figcaption { margin: 5px } .left-sidebar { position: relative; right: 50%; background: none!important } .right-sidebar { position: relative; background: none!important; float: right } #secondary { padding-left: 30px; padding-right: 30px; background: #eee } #secondary .widget h1.widget-title { padding: 10px; margin-top: 25px; font-size: 22px; color: #000; font-weight: 400; font-variant: small-caps; margin-bottom: 0px } #secondary .widget>ul { border: solid 1px #ddd } #secondary .widget ul { margin-left: 0px; background: #f5f5f5; padding: 10px 30px; list-style: none; border: solid 1px #ddd } #secondary .widget ul ul { border: none } #secondary .widget li { line-height: 2em } #secondary .widget a:hover { color: #000 } #secondary .widget_search { margin-top: 20px; margin-bottom: 10px; margin-left: auto; margin-right: auto } #secondary .widget_search form { display: inline-block; width: 100%; margin: auto } #secondary .widget_search form label { width: 100% } #secondary .widget_search form label input[type=search] { width: 100%; outline: none; border-radius: 0px; font-family: "Source Sans Pro", "Sans Serif"; font-weight: 300 } #secondary .widget_text .textwidget { padding: 10px 30px; background: #f5f5f5; border: solid 1px #ddd } #secondary .widget_text .textwidget p { margin: 0; color: #555 } #secondary .widget_nav_menu ul ul.sub-menu { padding: 5px 10px } .pagination { display: block; clear: both; text-align: center; margin: 0px; padding: 30px 0 } .pagination li { list-style: none; float: left; color: #000; margin: 0px 7px } .pagination li span { background: none; padding: 10px; margin-right: 1px } .pagination li .page_count:after { color: #b93d3d } .pagination li .page_count:before { color: #b93d3d } .pagination ul { float: none; display: inline-block } .pagination a { color: #000; background: white; padding: 10px 16px; margin-left: 1px; border: solid 1px #000; border-radius: 50%; text-decoration: none; -webkit-transition: background ease-in-out 0.2s, color ease-in 0.2s; -o-transition: background ease-in-out 0.2s, color ease-in 0.2s; transition: background ease-in-out 0.2s, color ease-in 0.2s } .pagination .next,.pagination .prev { padding: 0px; border: 0px; background: none } .pagination .dots { background: none; border: none } .pagination .current { background: #000; color: white; border-right: none; padding: 10px 16px; border-radius: 50%; margin: 0; margin-left: 1px } .pagination a:hover:not(.next):not(.prev) { background: #000; color: white } #comments .form-allowed-tags { display: none } #comments ul { list-style: none } #comments ul li { border-left: solid 1px #ccc; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; border-right: solid 1px #ccc; margin-bottom: 10px; margin-right: -1px; background: #f5f5f5 } #comments ul li:nth-child(3n) { background: #ddd } #comments ul li:nth-child(3n+1) { background: #eee } #comments ul li:nth-child(3n+2) { background: #f5f5f5 } #comments ul li .children { margin-left: 10px } #comments ul .comment-body { list-style: none; margin: 20px 0px 20px 10px } #comments ul .comment-body .comment-meta .vcard { display: inline-block; width: 100% } #comments ul .comment-body .comment-meta .vcard span { display: none } #comments ul .comment-body .comment-meta .vcard img { min-height: 50px; width: auto; display: inline-block; border: solid 1px #ccc } #comments ul .comment-body .comment-meta .vcard b { display: block; font-weight: 300; padding: 4px 0px } #comments ul .comment-body .comment-meta .comment-metadata { display: inline-block; float: none; padding: 10px 0px } #comments ul .comment-body .comment-meta .comment-metadata time { display: inline-block; float: left; background: black; color: white; padding: 5px 8px } #comments ul .comment-body .comment-meta .comment-metadata .edit-link { margin-left: 10px; font-weight: 400 } #comments ul .comment-body .comment-content { padding: 10px 20px; margin-bottom: 10px; margin-right: 10px; border: solid 1px #ccc; background: white; border-radius: 3px } #comments ul .comment-body .comment-content ol li,#comments ul .comment-body .comment-content ul li { border: 0px; background: transparent } #comments ul .comment-body .reply { display: inline-block; background: #000; padding: 5px 10px } #comments ul .comment-body .reply a { color: white } #comments #respond { text-align: center } #comments #respond .comment-form-comment label { text-transform: uppercase } #comments #respond .comment-form-comment textarea { border-radius: 0px!important; outline: none } #comments #respond .form-submit input { -webkit-box-shadow: none!important; box-shadow: none!important; border-radius: 0px; text-shadow: none!important; padding: 13px 20px; text-transform: uppercase; font-weight: 400 } #comments .comment-form-author,#comments .comment-form-email,#comments .comment-form-url { display: inline-block; margin-right: 46px; padding: 10px 0px } #footer-sidebar .widget h1.widget-title { padding: 10px 0 10px 10px; background: #000; color: #eee; font-size: 20px; font-weight: 300; text-transform: uppercase; border-bottom: dotted 2px #999999 } #footer-sidebar .widget h1.widget-title:before { content: "\25A0"; color: white; margin-right: 12px; top: 3px } #footer-sidebar .widget ul { margin-left: 30px; list-style: none } #footer-sidebar .widget li { line-height: 2em } .front-page .site-info,.home .site-info { background: #eee; padding: 20px 10px; border-top: solid 2px #000; font-weight: 400 } .front-page .footer-text,.home .footer-text { display: inline-block } .front-page .powered-by,.home .powered-by { display: inline-block; float: right } body:not(.home):not(.front-page) .site-info { padding: 20px 10px; font-weight: 400; text-align: right } body.archive #page #primary header.page-header .page-title { font-weight: 700 } body.archive #page #primary .grid3 { padding: 0px } body.archive #page #primary .grid3 article { margin-bottom: 0px } body.archive #page #primary .grid3 article .featured-wrapper .featured-image { margin: auto } body.archive #page #primary .grid3 article .entry-title:before { display: none } .archive .search-entry,.search .search-entry { margin-bottom: 80px!important } .archive .page-header,.search .page-header { border-bottom: 0px } .archive .header-image,.search .header-image { display: none } .archive .site-branding,.search .site-branding { width: 25%; position: fixed } .archive .main-navigation,.search .main-navigation { position: fixed } .archive #page,.search #page { margin-top: 60px; width: 75%; position: relative; float: right } .archive #page .entry-header,.search #page .entry-header { display: inline-block; padding: 0px; width: 100% } .archive #page .entry-header h1.entry-title,.search #page .entry-header h1.entry-title { display: inline-block; width: 75%; padding: 13px 0px; margin: 0px; font-size: 30px; font-weight: 300 } .archive #page .entry-header h1.entry-title:before,.search #page .entry-header h1.entry-title:before { content: "\25A0"; color: #999; margin-right: 12px; top: 3px } .archive #page .entry-header h1.entry-title a,.search #page .entry-header h1.entry-title a { color: black } .archive #page .entry-header .entry-meta,.search #page .entry-header .entry-meta { width: 25%; float: right; display: inline-block; background: #000; padding: 10px 10px 10px 0px } .archive #page .entry-header .entry-meta a,.search #page .entry-header .entry-meta a { color: #eee; text-transform: uppercase; font-weight: 700; font-size: 13px } .archive #page .entry-header .entry-meta .posted-on,.search #page .entry-header .entry-meta .posted-on { display: block; text-align: right } .archive #page .entry-header .entry-meta .byline,.search #page .entry-header .entry-meta .byline { display: block; text-align: right } .archive #page .entry-summary,.search #page .entry-summary { margin: 20px 30px } .archive #page .entry-footer,.search #page .entry-footer { display: inline-block; width: 100%; text-transform: uppercase; border-top: solid 1px #ddd } .archive #page .entry-footer a,.search #page .entry-footer a { display: inline-block } .archive #page .entry-footer .cat-links,.search #page .entry-footer .cat-links { text-align: center; font-size: 12px } .archive #page .entry-footer .tags-links,.search #page .entry-footer .tags-links { text-align: center; font-size: 12px } .archive #page .entry-footer .comments-link,.search #page .entry-footer .comments-link { text-align: center; font-size: 12px } .archive #page .entry-footer .text,.search #page .entry-footer .text { color: black; margin-bottom: 10px; margin-top: 10px; font-weight: 700; font-size: 16px; width: 100%; display: block } .archive #page .post-navigation,.search #page .post-navigation { display: block; width: 100%; background: #000; padding: 20px 10px; margin-top: 15px } .archive #page .post-navigation a,.search #page .post-navigation a { color: white; font-size: 14px; font-weight: 700 } .error404 .header-image { display: none } .error404 #page { width: 75%; float: right; margin-top: 40px } .error404 #page .page-content { background: none } .error404 #page .page-content input[type=submit] { -webkit-box-shadow: none; box-shadow: none; border-radius: 0px; text-shadow: none } .error404 #page .page-content input[type=search] { border-radius: 0px } .error404 #page #content .page-header { margin-top: 0px } .klean { margin: 0px; padding: 0 } .klean .featured-wrapper { overflow: hidden } .klean .featured-wrapper .featured-image { opacity: 1; -webkit-transition: opacity ease-in-out 0.5s; -o-transition: opacity ease-in-out 0.5s; transition: opacity ease-in-out 0.5s; margin: 0 auto; overflow: hidden; z-index: 3; position: relative; background-color: #000; background-size: cover } .klean .featured-wrapper .featured-image img { overflow: hidden; -webkit-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; width: 100%; opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15); bottom: 0px } .klean .featured-wrapper .entry-header { position: absolute; overflow: hidden; top: 25%; left: 0px; right: 0px; z-index: 444; width: 60%; margin: auto; opacity: 0; margin-right: -10px; padding-right: 20px; -webkit-transition: opacity 0.3s ease-in-out 0.5s, margin-right 0.3s ease-in-out 0.5s; -o-transition: opacity 0.3s ease-in-out 0.5s, margin-right 0.3s ease-in-out 0.5s; transition: opacity 0.3s ease-in-out 0.5s, margin-right 0.3s ease-in-out 0.5s } .klean .featured-wrapper .entry-header .entry-title { position: relative; text-align: right; font-size: 22px!important; padding: 0px 20%; overflow: hidden; font-weight: 200!important; margin: 0px } .klean .featured-wrapper .entry-header .entry-title a { text-decoration: none; margin: 0px!important; color: white!important; opacity: 1; font-family: "Source Sans Pro", Helvetica } .klean .featured-wrapper .featured-bar { content: ""; position: absolute; width: 70%; left: 0px; right: 0px; margin: auto; height: 2px; background: white; z-index: 5; bottom: 10%; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s } .klean .featured-wrapper:hover .featured-image img { opacity: .8 } .klean .featured-wrapper:hover .entry-header { margin-right: 0; opacity: 1 } .klean .featured-wrapper:hover .featured-bar { content: ""; position: absolute; width: 70%; left: 55%; right: 0px; margin: auto; height: 2px; background: white; z-index: 5; bottom: 50%; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg) } .grid-row { margin: 0; padding: 0; margin-left: -8px } .grid { margin: 10px 0; padding-left: 0; padding-bottom: 17px; border-bottom: solid 1px #f0f0f0 } .grid:nth-last-child(2) { border: none } .grid .featured-thumb { border-top: #000 solid 3px; overflow: hidden; transition: 0.3s all ease; -webkit-transition: 0.3s all ease; -moz-transition: 0.3s all ease; -ms-transition: 0.3s all ease; -o-transition: 0.3s all ease; padding: 0 } .grid .featured-thumb img { transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease } .grid .featured-thumb:hover img { transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; -moz-filter: brightness(0.9); -webkit-filter: brightness(0.9); filter: brightness(0.9) } .grid .out-thumb h1 { margin: 5px 0; margin-top: 1px; font-weight: normal; font-size: 19px } .grid .out-thumb h1 a { color: #040404; padding-bottom: 2px } .grid .out-thumb h1 a:before { height: 1px; background: #040404; width: 98%; left: 1% } .grid .out-thumb .postedon { font-size: 12px; color: #5e5e5e; font-weight: 300; margin-bottom: 5px } .grid .out-thumb .postedon a { color: #999; text-decoration: underline } .grid .out-thumb .postedon a:hover { color: #000 } .grid .out-thumb .entry-excerpt { color: #444; line-height: 1.6em; font-weight: 400 } .grid .readmore { display: block; clear: both } .grid .readmore a { color: black } .grid .hvr-underline-from-center:before { height: 1px; background: #000 } .grid_2_column { padding: 0; border-bottom: none } .grid_2_column .out-thumb { padding: 12px 0 }