/* Theme Name: Atracium Theme URI: Author: Mohammed El-Sayad - AtraciumProject Author URI: https://www.facebook.com/mhmdelsayad Description: atracium is a simple and minimal WordPress theme especially suited to blogging. Its structure allows you to have a classic sidebar and a push sidebar that can be activated through a special button. The full width header allows you to insert your own image and the site structure can be boxed or full width. Unlimited colors, 2 sidebars, footer widget, custom logo and many other options. Version: 1.0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: atracium Tags: two-columns, right-sidebar, custom-colors, custom-menu, featured-images, custom-header, flexible-header, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, blog, news, e-commerce, footer-widgets, custom-logo, custom-background --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Accessibility --------------------------------------------------------------*/ /* =WordPress Core -------------------------------------------------------------- */ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float: right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption p.wp-caption-text, .gallery-caption, .entry-caption { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } /*-------------------------------------------------------------- # Clearings --------------------------------------------------------------*/ .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after, .atracium-bar:before, .atracium-bar:after, #tertiary.widget-area:before, #tertiary.widget-area:after, .widget_archive li:before, .widget_archive li:after, .widget_categories li:before, .widget_categories li:after, .widget.widget_search:before, .widget.widget_search:after, footer.entry-footer:before, footer.entry-footer:after, .atracium-footer-widgets:before, .atracium-footer-widgets:after, .atracium-copyright:before, .atracium-copyright:after { content: ""; display: table; table-layout: fixed; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after, .atracium-bar:after, #tertiary.widget-area:after, .widget_archive li:after, .widget_categories li:after, .widget.widget_search:after, footer.entry-footer:after, .atracium-footer-widgets:after, .atracium-copyright:after { clear: both; } /*-------------------------------------------------------------- # Content --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Header Menu --------------------------------------------------------------*/ .atracium-menu { position: fixed; top: 0; left: 0; right: 0; z-index: 999; } .atracium-menu .navbar li { font-weight: 500; font-size: 18px; margin: 5px 3px; } .atracium-menu .navbar li a { letter-spacing: 1px; } .atracium-menu .navbar li:hover a { background-color: transparent; } .atracium-menu .navbar-inverse { border: none; border-radius: 0px; height: 60px; } .atracium-menu .navbar-inverse a.navbar-brand { margin: 0.9em; font-size: 22px; padding: 0px; font-weight: 500; } .front-page-menu { background-color: transparent; box-shadow: 0; } .front-page-menu a { color: #236ca8; } .front-page-menu a.navbar-brand { margin: 0.8em; font-size: 26px; padding: 18px; letter-spacing: 1px; font-weight: 600; } .front-page-menu .navbar li { font-weight: 700; font-size: 22px; margin: 20px 3px; } .front-page-menu .navbar-inverse { border: none; border-radius: 0px; height: 60px; background-color: rgba(34, 34, 34, 0.9); } .front-page-menu .navbar-inverse li { font-weight: 500; font-size: 18px; margin: 5px 3px; } .front-page-menu .navbar-inverse a.navbar-brand { margin: 0.9em; font-size: 22px; padding: 0px; font-weight: 500; } .main-header { text-align: center; position: relative; padding-bottom: 21px; } .main-header .site-branding-inner { position: absolute; width: 100%; height: 100%; top: 0; border-bottom: 8px solid rgba(0, 0, 0, 0.1); background-attachment: scroll; background-position-x: 50%; background-position-y: 50%; background-size: cover; } .main-header .intro .custom-logo-link, .main-header .intro .site-title { position: relative; } .main-header .intro .custom-logo-link { margin-bottom: 60px; } .main-header .intro h1.site-title, .main-header .intro p.site-title { font-size: 6em; font-weight: 400; margin: 0; line-height: 1.3; letter-spacing: -1px; margin-top: 0.5em; overflow: hidden; } .main-header .intro .cd-intro { max-width: none; color: #ffffff; } .main-header .arrow { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; } .main-header .arrow i { border: 2px solid #e2e2e2; padding: 13px 3px; border-radius: 15px; color: #e2e2e2; margin-bottom: 20px; position: relative; cursor: pointer; } .page-header { margin: 70px 0 60px 0; position: relative; min-height: 180px; } .page-header .site-branding-inner { position: absolute; width: 100%; height: 100%; top: 0; border-bottom: 8px solid rgba(0, 0, 0, 0.1); background-attachment: scroll; background-position-x: 50%; background-position-y: 50%; background-size: cover; } .page-header .atraciumLogo .custom-logo-link, .page-header .atraciumLogo .site-title { position: relative; } .page-header .atraciumLogo .custom-logo-link { margin-bottom: 60px; } .page-header .atraciumLogo h1.site-title, .page-header .atraciumLogo p.site-title { font-size: 3em; font-weight: 400; margin: 0; line-height: 1.3; letter-spacing: -1px; margin-top: -0.5em; overflow: hidden; } .page-header .atraciumLogo .site-description { letter-spacing: 1px; font-size: 12px; position: relative; color: #ffffff; } .page-header .atraciumLogo .site-description:before, .page-header .atraciumLogo .site-description:after { position: absolute; content: ""; width: 5%; background-color: #ffffff; height: 1px; top: 50%; margin: 0 0 0 -6%; display: inline-block; } .page-header .atraciumLogo .site-description:after { margin: 0 0 0 1%; width: 5%; } /*-------------------------------------------------------------- ## Categories --------------------------------------------------------------*/ .categories { overflow: hidden; margin: 60px 0; } .categories h2 { margin: 20px 0 0 0; color: #236ca8; } .categories h2:after { content: ""; display: block; top: 50px; left: 0; width: 140px; margin: 10px auto 0; border-bottom: 2px solid #3c363c; transition: all 0.8s ease-out; } .categories:hover h2:after { width: 200px; } .categories .category { margin: 30px 0 5px 0; padding: 20px 20px 15px 20px; border: 1px solid #f2f2f2; border-radius: 20px; box-shadow: 0 0px 20px rgba(0, 0, 0, 0.05); } .categories .category img { width: 50%; height: 50%; margin: 0 auto; border-right: 2px solid #236ca8; } .categories .category h3 { font-weight: normal; font-size: 22px; margin: 20px auto 5px; } .categories .category p { line-height: 1.7; font-size: 16px; color: #6a6a6a; margin-bottom: 0; padding: 20px 30px; } /*-------------------------------------------------------------- ## Resent Posts --------------------------------------------------------------*/ .resent-posts { background-color: #f6f6f6; padding: 60px 0; } .resent-posts h2 { margin: 50px 0 0 0; color: #236ca8; font-size: 40px; text-align: center; } .resent-posts h2:after { content: ""; display: block; top: 50px; left: 0; width: 140px; margin: 15px auto 0; border-bottom: 2px solid #3c363c; transition: all 0.8s ease-out; } .resent-posts:hover h2:after { width: 200px; } .resent-posts .last-post { background-color: #ffffff; width: 64%; margin-left: 1.33%; padding: 20px 5px; border-radius: 10px; } .resent-posts .last-post img { border-radius: 10px; } .resent-posts .last-post .post-title a:hover { text-decoration: none; } .resent-posts .last-post .post-title a h3 { margin: 0px; } .resent-posts .last-post p { font-size: 16px; } .resent-posts .post { overflow: hidden; margin: 30px 0 5px 0; } .resent-posts .post img { min-height: 340px; border-radius: 10px; } .resent-posts .post .post-title { position: absolute; bottom: -10px; left: 15px; right: 15px; height: 100px; } .resent-posts .post .post-title a { position: absolute; bottom: 20px; color: #FFF; text-decoration: none; transition: all 0.8s ease-out; } .resent-posts .post .post-title a h3 { position: relative; margin-left: 15px; margin-right: 10px; color: #FFF; padding-bottom: 15px; } .resent-posts .post .post-title a h3:after { content: ''; position: absolute; width: 0; height: 3px; background-color: #fff; left: 0px; bottom: 0; transition: all 0.7s ease-out; } .resent-posts .post:hover .post-title a { bottom: 60px; } .resent-posts .post:hover .post-title a h3:after { width: 50%; } /*-------------------------------------------------------------- ## Contact Us --------------------------------------------------------------*/ .contact-us { margin: 60px 0; } .contact-us h2 { margin: 0; font-size: 50px; line-height: 60px; font-weight: 400; letter-spacing: 0px; } .contact-us p { color: #8f96a6; font-size: 16px; max-width: 800px; margin: 15px auto; } .contact-us .contactus-content { padding: 30px 0; } .contact-us .contactus-content h3 { margin: 10px 0 5px; text-align: center; font-size: 28px; } .contact-us .contactus-content p { font-size: 14px; text-align: center; } .contact-us .contactus-content .information { background-color: #ffffff; padding: 10px 12%; } .contact-us .contactus-content .information i { color: #236ca8; padding: 20px; } .contact-us .contactus-content .information .item { padding: 30px 0 10px; } .contact-us .contactus-content .reservation { padding: 10px 12%; border-radius: 20px; background-color: #f6f6f6; } .contact-us .contactus-content .reservation input { border-radius: 5px; } .contact-us .contactus-content .reservation input[type="submit"] { padding: 10px; font-size: 18px; background-color: #236ca8; margin-bottom: 12px; } .contact-us .contactus-content .reservation input[type="submit"]:hover { background-color: #474854; } /*-------------------------------------------------------------- ## Contact Us --------------------------------------------------------------*/ .refere { background-color: #f6f6f6; padding-top: 60px; padding-bottom: 50px; } .refere i { color: #018cb9; font-size: 150px; } .refere .col-sm-offset-1 { margin-left: 5.33333333%; } .refere .col-sm-offset-1 h2 { margin-top: 14px; margin-bottom: 12px; font-weight: 600; } /*-------------------------------------------------------------- # Pages --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Error 404 --------------------------------------------------------------*/ .not-found .page-header { margin: 30px 0; text-align: center; } .not-found .page-content p { font-size: 18px; } .not-found .page-content form input[type="search"] { padding: 5px; border-radius: 5px; margin: 10px; font-size: 17px; width: 350px; } .not-found .page-content form input[type="search"]:focus { border-color: #236ca8; } .not-found .page-content form input[type="submit"] { padding: 10px 0; border-radius: 5px; margin: 10px; font-size: 17px; width: 120px; } .not-found .page-content form input[type="submit"]:focus { border-color: #236ca8; } .not-found .page-content .col-sm-6 { margin: 20px 0; text-align: left; padding-left: 15%; } .not-found .page-content .col-sm-6 .widget ul { list-style: none; padding-left: 10px; } .not-found .page-content .col-sm-6 .widget ul li { padding: 5px 0; } .not-found .page-content .col-sm-6 .widget ul li a { color: #264141; font-size: 16px; } .not-found .page-content .col-sm-6 .widget ul li:hover a { color: #236ca8; text-decoration: none; } /*-------------------------------------------------------------- # Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 3em; /* Make sure select elements fit in widgets. */ } .widget select { max-width: 100%; } .widget .widget-title { position: relative; overflow: hidden; padding: 1em 1.5em; margin: 1em 0; } .widget:first-child .widget-title { margin-top: 0; } .widget .widget-title:before, .widget .widget-title:after { position: absolute; content: ""; width: 50%; background-color: #413e4a; height: 1px; top: 50%; margin: 0 0 0 -52%; display: inline-block; } .widget .widget-title:after { margin: 0 -50% 0 4%; width: 100%; } .widget .widget-title h3 { font-weight: 700; display: inline-block; border-style: solid; border-width: 1px; border-color: #413e4a; padding: 2px 10px; margin: 0; font-size: 1em; } aside ul { margin: 0; padding: 0; list-style-type: none; } aside ul li { border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #e0e0e0; padding: 1em 0; } aside ul li:first-child { padding-top: 0; } /* Calendar Widget */ #wp-calendar { margin: 0px; border-collapse: separate; } #wp-calendar > caption { padding: 6px 0; color: #ffffff; text-align: center; background-color: #236ca8; } #wp-calendar th { text-align: center; background-color: #e0e0e0; padding: 5px 0; } #wp-calendar tfoot td { border: none; padding-top: 5px; } #wp-calendar tfoot td#next { text-align: right; } #wp-calendar tbody td { text-align: center; border-width: 1px; border-style: solid; border-color: #e0e0e0; padding: 5px 0; } #wp-calendar tbody td#today { border-color: #236ca8; } .widget_archive li, .widget_categories li { text-align: right; } .widget_archive li a, .widget_categories li a { float: left; } .widget.widget_categories li:before { font-family: FontAwesome; content: "\f114"; padding-right: 0.5em; float: left; } .widget.widget_archive li:before { font-family: FontAwesome; content: "\f0da"; padding-right: 0.5em; float: left; } /* Menu Widget */ aside ul.menu ul.sub-menu { display: none; padding-left: 2em; } aside ul.menu li { position: relative; border-bottom-width: 0; border-bottom-style: none; border-bottom-color: transparent; padding: 0; } aside ul.menu li a { border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #e0e0e0; padding: 1em 0; display: block; } aside ul.menu .indicatorBar { position: absolute; right: 0; top: 0; width: 57px; line-height: 57px; text-align: center; cursor: pointer; font-family: 'FontAwesome'; font-size: 16px; border-left-width: 1px; border-left-style: dashed; border-color: #e0e0e0; } aside ul.menu .indicatorBar:before { content: "\f107"; } aside ul.menu .indicatorBar.yesOpenBar:before { content: "\f106"; } /* Search widget */ .widget.widget_search input[type="search"] { width: 68%; display: inline-block; -webkit-appearance: none; padding: 4px 15px; line-height: 1; float: left; height: 40px; border-right-width: 0px; } .widget.widget_search input[type="submit"] { width: 32%; display: inline-block; float: right; height: 40px; } /*-------------------------------------------------------------- ## SideBar --------------------------------------------------------------*/ .opacityBox { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); left: 0; top: 0; z-index: 999; opacity: 0; visibility: hidden; -o-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .opacityBox .yesOpen { opacity: 1; visibility: visible; } body.admin-bar .atracium-menu { top: 32px; } .atracium-bar { position: fixed; width: 350px; top: 0; left: -350px; height: 100%; z-index: 9999; -webkit-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); -moz-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); -o-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -wekbit-transition-property: left; -moz-transition-property: left; -o-transition-property: left; transition-property: left; } .atracium-subbar { position: fixed; left: 0; width: 60px; z-index: 9999; top: 0; background-color: #236ca8; color: #ffffff; height: 100%; text-align: center; -webkit-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); -moz-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); -o-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -wekbit-transition-property: left; -moz-transition-property: left; -o-transition-property: left; transition-property: left; } body.admin-bar .atracium-bar { top: 32px; } body.admin-bar .atracium-subbar { top: 32px; } .atracium-bar.yesOpen { left: 0px; } .atracium-subbar.yesOpen { left: 350px; } /* Footer */ .footer-inner { padding: 0 5em; margin: 0 auto; } .atracium-big-content { background-color: #ffffff; } .atracium-big-content.boxed { position: relative; top: -80px; } .atracium-big-content.boxed .page-content { padding: 5em; } #secondary.widget-area { float: left; width: 31%; padding-left: 5%; } #tertiary.widget-area { width: 350px; float: left; position: relative; background-color: #ffffff; } #tertiary.widget-area .nano-content { visibility: hidden; opacity: 0; transition-delay: 150ms; -webkit-transform: translate3d(-50px, 0, 0); transform: translate3d(-50px, 0, 0); transition: visibility 0s linear 0.2s, opacity 0.2s linear, transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } .atracium-bar.yesOpen #tertiary.widget-area .nano-content { visibility: visible; opacity: 1; transition-delay: 150ms; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .tagcloud a, .tags-links a, .edit-link a { border-style: solid; border-width: 1px; border-color: #e0e0e0; box-shadow: 3px 3px 0px 0px #e0e0e0; margin: 4px 2px; padding: 1px 6px; display: inline-block; font-size: 12px; color: #413e4a; -o-transition: box-shadow .3s ease-in-out, border-color .3s ease-in-out; -moz-transition: box-shadow .3s ease-in-out, border-color .3s ease-in-out; -webkit-transition: box-shadow .3s ease-in-out, border-color .3s ease-in-out; transition: box-shadow .3s ease-in-out, border-color .3s ease-in-out; } .tagcloud a:hover, .tagcloud a:focus, .tagcloud a:active, .tags-links a:hover, .tags-links a:focus, .tags-links a:active, .edit-link a:hover, .edit-link a:focus, .edit-link a:active { border-color: #236ca8; box-shadow: 3px 3px 0px 0px #236ca8; } .tags-links { display: block; } .entry-meta > span { margin-right: 0.5em; } .entry-meta span i { color: #236ca8; } .entry-meta span { font-size: 12px; letter-spacing: 1px; } .entry-meta span a, .entry-meta span { color: #413e4a; } .cat-links a { border-style: solid; border-width: 1px; border-color: #413e4a; box-shadow: 3px 3px 0px 0px #413e4a; margin: 4px 3px; padding: 2px 8px; display: inline-block; color: #413e4a; font-size: 1em; -o-transition: background-color .3s ease-in-out, color .3s ease-in-out; -moz-transition: background-color .3s ease-in-out, color .3s ease-in-out; -webkit-transition: background-color .3s ease-in-out, color .3s ease-in-out; transition: background-color .3s ease-in-out, color .3s ease-in-out; } /* Seidebar button */ .atracium-absolute { position: absolute; top: 50%; left: 50%; margin-top: -11px; margin-left: -12px; } .atracium-sidebar-button { position: relative; width: 60px; height: 50px; } .hamburger { display: block; cursor: pointer; transition-property: opacity, -webkit-filter; transition-property: opacity, filter; transition-property: opacity, filter, -webkit-filter; transition-duration: 0.15s; transition-timing-function: linear; } .hamburger-box { width: 25px; height: 19px; position: relative; margin: 0 auto; } .hamburger-inner { top: 50%; margin-top: 0; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 25px; height: 2px; background-color: #ffffff; border-radius: 4px; position: absolute; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -7px; } .hamburger-inner::after { bottom: -7px; } .hamburger--spin .hamburger-inner { transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in; } .hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.34s ease-in, -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin.is-active .hamburger-inner { -webkit-transform: rotate(225deg); transform: rotate(225deg); transition-delay: 0.14s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out; } .hamburger--spin.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); transition: bottom 0.1s ease-out, -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); } /* Search button */ .atracium-search-button { position: relative; width: 60px; height: 50px; } .asbutton { position: relative; background: transparent; border-color: #ffffff; border-style: solid; border-width: 2px; width: 18px; height: 18px; border-radius: 50%; right: -2px; margin: 0 auto; cursor: pointer; } .asbutton:after { position: absolute; content: ""; background-color: #ffffff; width: 7px; height: 2px; transform: rotate(45deg); bottom: -3px; right: -5px; } .atracium-subbar .search-container { position: absolute; top: -18px; left: 42px; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); z-index: -1; border-style: solid; border-width: 1px; border-color: #ffffff; box-shadow: 3px 3px 0px 0px #ffffff; border-left-width: 0; visibility: hidden; opacity: 0; transition: visibility 0s linear 0.2s,opacity 0.2s linear, transform 0.2s linear; } .atracium-subbar.searchOpen .search-container { visibility: visible; opacity: 1; transition-delay: 0s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .atracium-subbar .search-container input[type="search"] { background-color: #236ca8; padding: 15px; color: #ffffff; border: none; width: 300px; -webkit-appearance: none; } .atracium-subbar .search-container input[type="submit"] { display: none; } .search-container ::-webkit-input-placeholder { color: #ffffff; } .search-container ::-moz-placeholder { color: #ffffff; } .search-container :-ms-input-placeholder { color: #ffffff; } .search-container :-moz-placeholder { color: #ffffff; } /* Social buttons */ .atracium-social-button.inSidebar { position: absolute; bottom: 20px; } .atracium-social-button.inSidebar .atracium-social { color: #ffffff; display: block; width: 60px; height: 35px; line-height: 35px; } header.entry-header .post-title { font-weight: 400; font-size: 2em; line-height: 1.5; letter-spacing: -.5px; } .post-featuredImg { margin-bottom: 2em; position: relative; overflow: hidden; } .post-featuredImg a.thumbnail { overflow: hidden; } .post-featuredImg.onlist img { -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); transition: transform 1.5s linear; } .post-featuredImg.onlist:hover img, .post-featuredImg.onlist:focus img, .post-featuredImg.onlist:active img { -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } footer.site-footer a { margin: 0 2px; } footer.entry-footer { position: relative; padding: 0 0 6em; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #e0e0e0; } footer.entry-footer .read-more { display: inline-block; float: right; border-style: solid; border-width: 1px; border-color: #413e4a; box-shadow: 3px 3px 0px 0px #413e4a; font-size: 1em; } footer.entry-footer .read-more a { padding: 2px 10px; display: block; color: #413e4a; -o-transition: background-color .3s ease-in-out, color .3s ease-in-out; -moz-transition: background-color .3s ease-in-out, color .3s ease-in-out; -webkit-transition: background-color .3s ease-in-out, color .3s ease-in-out; transition: background-color .3s ease-in-out, color .3s ease-in-out; } header.page-header h1 { font-weight: 400; } footer.site-footer { background-color: #202020; color: #f3f3f3; border-top-style: solid; border-top-width: 8px; border-top-color: #236ca8; } footer.site-footer .widget .widget-title h3 { border-color: #f3f3f3; box-shadow: 3px 3px 0px 0px #f3f3f3; } footer.site-footer .widget .widget-title:before, footer.site-footer .widget .widget-title:after { background-color: #f3f3f3; } .footer-inner .atracium-footer-widgets aside.footer { float: left; width: 33.3333%; padding: 2.5em; } footer.site-footer .tagcloud a:hover, footer.site-footer .tagcloud a:focus, footer.site-footer .tagcloud a:active { border-color: #ff5555; box-shadow: 3px 3px 0px 0px #ff5555; } .atracium-copyright { font-size: 12px; padding: 2em 0; } .atracium-copyright .site-info { float: left; } .atracium-copyright .atracium-social-button.inFooter { float: right; } #toTop { position: fixed; bottom: -50px; right: 30px; width: 40px; height: 40px; line-height: 40px; text-decoration: none; outline: none; text-align: center; cursor: pointer; color: #413e4a; background-color: #ffffff; border-style: solid; border-width: 1px; border-color: #413e4a; z-index: 99; -webkit-transition-timing-function: cubic-bezier(0.42, 0.66, 0.14, 1.24); -moz-transition-timing-function: cubic-bezier(0.42, 0.66, 0.14, 1.24); -o-transition-timing-function: cubic-bezier(0.42, 0.66, 0.14, 1.24); transition-timing-function: cubic-bezier(0.42, 0.66, 0.14, 1.24); -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-property: bottom; -moz-transition-property: bottom; -o-transition-property: bottom; transition-property: bottom; } #toTop.visible { bottom: 30px; } #toTop:hover { text-decoration: none; } /*-------------------------------------------------------------- ## Posts and pages --------------------------------------------------------------*/ .sticky { display: block; } .sticky header.entry-header .post-title { position: relative; padding-left: 40px; } .sticky header.entry-header .post-title:before { position: absolute; font-family: FontAwesome; content: "\f097"; font-size: 150%; line-height: 1; left: 0; top: 0; } .hentry { margin: 0 0 6em; } .updated:not(.published) { display: none; } .entry-content, .entry-summary { margin: 1.5em 0 0; letter-spacing: .2px; } .entry-summary { text-align: justify; } .entry-content a, .entry-summary a { text-decoration: underline; } .page-links { clear: both; margin: 0 0 1.5em; float: right; } /*-------------------------------------------------------------- ## Comments --------------------------------------------------------------*/ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } #respond.comment-respond, #comments.comments-area { outline: none; } #comments ol { list-style-type: none; padding: 0; margin: 3em 0; } #comments ol .pingback, #comments ol article { margin: 0 0 2.5em; position: relative; border-color: #e0e0e0; border-bottom-style: dashed; border-bottom-width: 1px; } #comments ol ol { padding-left: 10%; } #comments article footer img { float: left; margin-right: 1em; width: 70px; box-shadow: 3px 3px 0px 0px #e0e0e0; } #comments article .comment-content { clear: both; padding-bottom: .5em; } #comments article .comment-metadata { font-size: 12px; } #comments .reply { position: absolute; top: 0; right: 1.5em; font-size: 12px; border-style: solid; border-width: 1px; border-color: #e0e0e0; padding: 0.3em 0.8em; box-shadow: 3px 3px 0px 0px #e0e0e0; } .comment-awaiting-moderation { margin: 0; color: red; font-size: 12px; } .comments-area { margin: 0 0 6em; clear: both; } .comment-reply-title { margin: 0; } .comment-reply-title small { margin: 0 1em; } .comment-notes { margin: 0; font-size: 12px; margin-bottom: 1.5em; } .comments-area .required { color: red; } .comment-respond .comment-form-comment, .comment-respond .comment-form-author, .comment-respond .comment-form-email, .comment-respond .comment-form-url { margin: 0; margin-bottom: 1em; } .comment-respond .comment-form-author, .comment-respond .comment-form-email, .comment-respond .comment-form-url { width: 33.3333%; float: left; } .comment-respond .comment-form-email { padding: 0 1em; } .comment-respond .comment-form-author input, .comment-respond .comment-form-email input, .comment-respond .comment-form-url input { width: 100%; } .comment-respond .form-submit { clear: both; } /*-------------------------------------------------------------- ## Nano Scroller --------------------------------------------------------------*/ .nano { height: 100%; overflow: hidden; } .nano > .nano-content { position: absolute; overflow: scroll; overflow-x: hidden; top: 0; right: 0; bottom: 0; left: 0; padding: 2.3em; -webkit-overflow-scrolling: touch; height: 100%; } .nano > .nano-content:focus { outline: thin dotted; } .nano > .nano-content::-webkit-scrollbar { display: none; } .has-scrollbar > .nano-content::-webkit-scrollbar { display: block; } .nano > .nano-pane { background-color: rgba(178, 219, 191, 0.15); position: absolute; width: 5px; right: 0; top: 0; bottom: 0; visibility: hidden\9; /* Target only IE7 and IE8 with this hack */ opacity: .01; -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; transition: .2s; } .nano > .nano-pane > .nano-slider { background-color: #236ca8; background-color: rgba(178, 219, 191, 0.3); position: relative; margin: 0 1px; } .nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed { visibility: visible\9; /* Target only IE7 and IE8 with this hack */ opacity: 0.99; } /*-------------------------------------------------------------- ## atracium Loader --------------------------------------------------------------*/ .loader-page { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background-color: #ffffff; height: 100%; } /* Animation 1 */ .aLoader1 { position: absolute; top: 50%; left: 50%; width: 100px; margin-top: -50px; margin-left: -50px; } .aLoader1:before { content: ''; display: block; padding-top: 100%; } .circular { animation: rotate 2s linear infinite; height: 100%; transform-origin: center center; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .path { stroke: #413e4a; stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; } @keyframes rotate { 100% { transform: rotate(360deg); } } @keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } /*-------------------------------------------------------------- ## Responsive --------------------------------------------------------------*/ /* Extra Small devices, Phones */ @media only screen and (max-width: 479px) { .atracium-subbar { display: none; } .navbar ul { list-style: none; margin: 0; padding-left: 40px; padding-right: 20px; } .navbar li { display: block; position: relative; font-weight: 700; font-size: 16px; } } /* Extra Small devices, Phones */ @media only screen and (min-width: 480px) and (max-width: 767px) { .navbar ul { list-style: none; margin: 0; padding-left: 40px; padding-right: 20px; } .navbar li { display: block; position: relative; font-weight: 700; font-size: 16px; } h1.site-title, p.site-title { font-size: 2em; } header.entry-header .post-title { font-size: 1.8em; } .atracium-big-content.boxed .page-content, .atracium-big-content.fullwidth .page-content { padding: 1.5em 0; } #primary.content-area, #secondary.widget-area, .footer-inner .atracium-footer-widgets aside.footer { padding: 0 1.5em; } .nano > .nano-content { padding: 1.5em; } .navigation.pagination .nav-links span.current, .page-links > .page-links-number, .navigation.pagination .nav-links a, .page-links a { padding: 0.1em 0.8em; margin: 4px 2px; } .atracium-subbar { display: none; } } /* Small devices, Tablets */ @media only screen and (min-width: 768px) and (max-width: 991px) { h1.site-title, p.site-title { font-size: 2.5em; } .nav-links .nav-previous .meta-nav:after, .nav-links .nav-next .meta-nav:before { display: none; } .post-navigation .nav-previous, .post-navigation .nav-next { float: left; width: 100%; text-align: center; } .post-navigation .nav-next { margin-top: 2em; } footer.entry-footer, .main-site .comment-navigation, .main-site .posts-navigation, .main-site .post-navigation, .main-site .navigation.pagination { padding: 0 0 4em; } .hentry { margin: 0 0 4em; } ul.products.columns-3 > li, ul.products.columns-4 > li, ul.products.columns-5 > li, .related.products .products > li { width: 100%; } body.admin-bar .atracium-menu, body.admin-bar .atracium-subbar, body.admin-bar .atracium-bar { top: 46px; } body.admin-bar .main-navigation.toggled .nav-menu, body.admin-bar .atracium-subbar .search-container { top: calc(50px + 46px); } .atracium-big-content.boxed .page-content, .atracium-big-content.fullwidth .page-content { padding: 3em 0; } .atracium-big-content.fullwidth { padding-top: 0; } #primary.content-area, #secondary.widget-area { float: left; width: 100%; margin: 0; padding: 0 3.5em; } .footer-inner { padding: 3em 0; } .footer-inner .atracium-footer-widgets aside.footer { float: left; width: 100%; padding: 0 3.5em; } .atracium-copyright { padding: 1em; } .atracium-copyright .site-info, .atracium-copyright .atracium-social-button.inFooter { float: left; width: 100%; text-align: center; } #customer_details, #order_review, #order_review_heading { float: left; width: 100%; } } /* Medium Devices, Desktops */ @media only screen and (min-width: 992px) and (max-width: 1199px) { body:before { display: none; } header.site-header { margin-top: 0; } body.admin-bar .main-navigation.toggled .nav-menu, body.admin-bar .atracium-subbar .search-container { top: calc(50px + 32px); } } /* Large Devices, Wide Screens */ @media only screen and (min-width: 1200px) { .page-content, .footer-inner, .atracium-big-content.boxed { max-width: 1040px; } .atracium-big-content.boxed .page-content, .atracium-big-content.fullwidth .page-content { padding: 3em; } .atracium-big-content.fullwidth { padding-top: 3em; } } /*# sourceMappingURL=style.css.map */