/* Theme Name: vavoulas Theme URI: http://vavoulas.gr Author: Digitalbox Author URI: http://digitalbox.gr Description: Responsive WordPress Theme for vavoulas.gr Version: 1.0 Tags: white, light, two-columns, right-sidebar, responsive-layout, custom-menu, featured-images */ /* Table of Contents - - - - - - - - - 1. Global 2. Standard Forms 3. Global Typography 4. Top Bar 5. Navigation 6. Home Page 7. Inner Pages 8. Footer 9. WordPress Core - - - - - - - - - */ /* ============ 1 = Global ============ */ body {font-family: 'Open Sans', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; font-weight: normal; font-style: normal; font-size: 14px; line-height: 1.4; color: #333; position: relative; -webkit-font-smoothing: antialiased; background: #fff; margin:0;} .row {max-width:1170px;} .row.multicol {max-width:95%;} iframe {margin: 0 0 40px; border:0; width:100%;} code { text-shadow: 0 1px white; line-height:1.3; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-weight:normal; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -o-pre-wrap; background: #F5F2F0;display: block; padding: 12px; margin: 8px 0; color:#303038; border: 0; border-radius:6px;} /* ==================================== 3 = Global Typography ==================================== */ h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; font-weight: 700; color: #000; text-rendering: optimizeLegibility; line-height: 1.1; margin-bottom: 12px; margin-top: 12px; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; } h1 { font-size: 44px; } h2 { font-size: 34px; } h3 { font-size: 27px; } h4 { font-size: 23px; } h5 { font-size: 17px; } h6 { font-size: 14px; } a { color: #000; text-decoration: none; line-height: inherit; } a:hover { color: #303038; text-decoration: underline;} p { font-family: inherit; font-weight: normal; line-height: 1.4; margin-bottom: 17px; font-size: 14px;} hr { border: solid #e8e8e8; border-width: 1px 0 0; clear: both; margin: 0 0 21px; height: 0; } hr.small { border: solid #fe8f8c; border-width: 6px 0 0; clear: both;margin:0 auto; margin-top:30px; margin-bottom:20px; height: 0; max-width:150px; } .text-center {text-align:center;} .section-title-bottom-line { background: #dfdfdf; border-left: 150px solid #fe8f8c; height:1px; margin: 22px 0;} .spacing-25 {padding-bottom:25px;} .spacing-top-50 {padding-top:50px; } .spacing-bottom-40 {padding-bottom:40px; } .content {min-height:450px;} /* ==================================== 4 = Header ==================================== */ .top {background:#fff; padding:15px 0 0; } .logo {text-align: center; border-bottom:1px solid #ddd; padding-bottom:15px;} /* Navigation ---------------------- */ .navmenu {background:#fff; } nav.desktop-menu { padding: 0; display:table; margin:0 auto; text-align: center; } .slicknav_menu, .mobile-menu { display:none; } /*** Superfish Essential Styles ***/ .sf-menu, .sf-menu * { overflow: visible; margin: 0; padding: 0; list-style: none; z-index: 1000; } .sf-menu { line-height: 1.0; float: left; margin-bottom: 0; } .sf-menu ul { z-index: 1000; position: absolute; top: -999em; padding: 0; overflow: visible !important; } .sf-menu ul li { display: block; width: 100% !important; text-align: left; padding:4px 0; border-bottom: 1px solid #333;margin-left:0!important; } .sf-menu ul li:last-child { border-bottom: 0; -webkit-border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;} .sf-menu ul li a { border:none; -webkit-border-radius: 0!important;-moz-border-radius: 0!important;border-radius: 0!important;} .sf-menu ul li:hover, .sf-menu ul li a:hover { background: #333 !important; } .sf-menu li { float: left; position: relative; text-decoration:none; text-align: center;padding:28px 0 25px; margin:0 12px; } .sf-menu li:first-child { margin-left:0; } .sf-menu a { display: block; position: relative; font-size:14px; letter-spacing:.07em; text-transform: uppercase; font-weight:400; padding:6px 15px 8px; color:#7f7f7f; } .sf-menu > li > a {display: block; } .sf-menu li li a { font-size:11px; color:#fff; padding:7px 10px 5px; } .sf-menu li a:hover { color:#fff; background: #000; text-decoration: none; -webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;-ms-transition:all .3s;transition:all .3s; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;} .sf-menu li li a:hover { border-bottom:0; text-decoration: none} .sf-menu li.current-menu-item a, .sf-menu li.current-menu-parent a, .sf-menu li.current_page_parent a { background: #000; color:#fff; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;} .sf-menu li:hover ul,.sf-menu li.sfHover ul { left: 0; top: 73px; z-index:999999; width:175px; -webkit-animation-duration: .3s; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: both; -webkit-animation-name: fadeInRight; -moz-animation-duration: .3s; -moz-animation-timing-function: ease; -moz-animation-fill-mode: both; -moz-animation-name: fadeInRight; animation-duration: .3s; animation-timing-function: ease; animation-fill-mode: both; animation-name: fadeInRight;} ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 175px; top: 0; -webkit-border-radius: 0!important;-moz-border-radius: 0!important;border-radius: 0!important; } ul.sf-menu li li:hover ul li:last-child, ul.sf-menu li li.sfHover ul li:last-child {-webkit-border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;} ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 175px; top: 0; -webkit-border-radius: 0!important;-moz-border-radius: 0!important;border-radius: 0!important;} .sf-menu li:hover { outline: 0; } .sf-menu li li a:hover { color:#fff !important; -webkit-transition:none !important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important;} .sf-menu > li:hover { border:none !important; background: none !important; } .alt-nav { display:none; } .sf-menu ul {background:#000; -webkit-border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px; } .sf-menu ul:after { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;} .sf-menu ul:after { border-color: rgba(127, 140, 141, 0); border-bottom-color: #000; border-width: 10px; left: 17%; margin-left: -10px;} .sf-menu ul li ul:after { bottom: 100%; border: transparent; } .sf-menu ul li ul:after { border:0;} /* Home Page Horizontal Slider ----------------------- */ .owl-controls { position:absolute; bottom:0; right:1%; left:1%; z-index:9999;} .owl-theme .owl-controls .owl-buttons div{padding: 10px 20px;-webkit-border-radius: 0; margin:0; -moz-border-radius: 0; border-radius: 0; background: #000; } .owl-theme .owl-controls .owl-buttons .owl-prev{margin-right:1px; } .owl-theme .owl-controls .owl-buttons i { font-size:36px; font-style: normal} .products {padding:50px 0;} .products h2 {color:#7f7f7f; font-weight:100; font-size:24px; padding-bottom: 15px } .products .prbrd li {border:1px solid #eee; width:23%; margin: 0 1% 15px; padding:6px;} .products .button {margin:0 auto; display: table; text-align: center; background: #000; margin-top:25px;} .products .button:hover {text-decoration: none; background: #D16314;} .products2 {padding:50px 0; background:#e5e5e5;} .products2 h2 {color:#7f7f7f; font-weight:100; font-size:24px; padding-bottom: 15px } .products2 .prbrd li {border:1px solid #fff; width:23%; margin: 0 1% 15px; padding:6px;} .products2 .button {margin:0 auto; display: table; text-align: center; background: #000; margin-top:25px;} .products2 .button:hover {text-decoration: none; background: #D16314;} .products3 .prbrd li {border:1px solid #eee; width:48%; margin: 0 1% 15px; padding:6px;} .products-cat {padding:30px 0 120px;} .products-cat h2 {color:#7f7f7f; font-weight:100; font-size:29px; padding-bottom: 15px; text-align: center; border-bottom: 4px double #eee } .products-cat .prbrd {padding-top:25px;} .products-cat .prbrd li {border:1px solid #eee; width:23%; margin: 0 1% 15px; padding:6px;} .content-cat {padding:30px 0 120px;} .content-cat h2 {color:#7f7f7f; font-weight:100; font-size:29px; padding-bottom: 15px; text-align: center; border-bottom: 4px double #eee } footer {background: #7f7f7f; padding:15px 0;} .copyright {text-align: right; color:#fff; padding-top:8px;} .copyright a {color:#fff; text-decoration: underline} .copyright a:hover {color:#ccc; text-decoration: underline} .content h2 {margin-top:-30px;color:#fff; font-weight:100; font-size:24px; padding: 15px 0; text-align: center; background:#000; border:5px solid #333; } .pagecontent {padding:20px 0;} #maplocation img { max-width: none; height: auto; } .gmap3{border-bottom: 6px solid #e6e6e6; width: 100%; height: 400px;} .gmaplabels { color: #fff; background: #78B3D4; font-size: 12px; text-align: center; font-weight:bold; border: 1px solid #666; padding:7px; white-space: nowrap;} #maplocationen img { max-width: none; height: auto; } .gmap3en{border-bottom: 6px solid #e6e6e6; width: 100%; height: 400px;} .gmaplabelsen { color: #fff; background: #78B3D4; font-size: 12px; text-align: center; font-weight:bold; border: 1px solid #666; padding:7px; white-space: nowrap;} /* Gallery ---------------------- */ .gallery { margin: 0 auto; padding-bottom:25px;} .gallery .gallery-item { float: left; margin-top: 0; text-align: center; width: 33%;} .gallery-columns-2 .gallery-item { width: 50%; } .gallery-columns-3 .gallery-item { width: 33.333%; } .gallery-columns-4 .gallery-item { width: 25%; } .gallery-columns-5 .gallery-item { width: 20% } .gallery-columns-6 .gallery-item { width: 16.666% } .gallery-columns-7 .gallery-item { width: 14.294% } .gallery-columns-8 .gallery-item { width: 12.5% } .gallery-columns-9 .gallery-item { width: 11.111% } .gallery img { box-shadow: 0px 0px 4px #ccc; border: 1px solid white !important; padding: 4px; background: #f2f2f2;} .gallery img:hover {background: white;} .gallery-columns-2 .attachment-medium { max-width: 92%; height: auto;} .gallery-columns-4 .attachment-thumbnail { max-width: 84%; height: auto;} .gallery .gallery-caption { color: #888; font-size: 12px; margin: 0 0 12px;} .gallery dl, .gallery dt { margin: 0; } .gallery br { clear: both } .gallery br+br { display: none; } /* IMAGE LIGHTBOX SELECTOR */ #imagelightbox { cursor: pointer; position: fixed; z-index: 10000; -ms-touch-action: none; touch-action: none; -webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */ box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */ } /* ACTIVITY INDICATION */ #imagelightbox-loading, #imagelightbox-loading div { border-radius: 50%; } #imagelightbox-loading { width: 2.5em; /* 40 */ height: 2.5em; /* 40 */ background-color: #444; background-color: rgba( 0, 0, 0, .5 ); position: fixed; z-index: 10003; top: 50%; left: 50%; padding: 0.625em; /* 10 */ margin: -1.25em 0 0 -1.25em; /* 20 */ -webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 ); /* 40 */ box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 ); /* 40 */ } #imagelightbox-loading div { width: 1.25em; /* 20 */ height: 1.25em; /* 20 */ background-color: #fff; -webkit-animation: imagelightbox-loading .5s ease infinite; animation: imagelightbox-loading .5s ease infinite; } @-webkit-keyframes imagelightbox-loading { from { opacity: .5; -webkit-transform: scale( .75 ); } 50% { opacity: 1; -webkit-transform: scale( 1 ); } to { opacity: .5; -webkit-transform: scale( .75 ); } } @keyframes imagelightbox-loading { from { opacity: .5; transform: scale( .75 ); } 50% { opacity: 1; transform: scale( 1 ); } to { opacity: .5; transform: scale( .75 ); } } /* OVERLAY */ #imagelightbox-overlay { background-color: #fff; background-color: rgba( 255, 255, 255, .9 ); position: fixed; z-index: 9998; top: 0; right: 0; bottom: 0; left: 0; } /* "CLOSE" BUTTON */ #imagelightbox-close { width: 30px; /* 40 */ height: 30px; /* 40 */ text-align: left; background-color: #666; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: fixed; z-index: 10002; top: 2.5em; /* 40 */ right: 2.5em; /* 40 */ -webkit-transition: color .3s ease; transition: color .3s ease; } #imagelightbox-close:hover, #imagelightbox-close:focus { background-color: #111; } #imagelightbox-close:before, #imagelightbox-close:after { width: 2px; background-color: #fff; content: ''; position: absolute; top: 20%; bottom: 20%; left: 50%; margin-left: -1px; } #imagelightbox-close:before { -webkit-transform: rotate( 45deg ); -ms-transform: rotate( 45deg ); transform: rotate( 45deg ); } #imagelightbox-close:after { -webkit-transform: rotate( -45deg ); -ms-transform: rotate( -45deg ); transform: rotate( -45deg ); } /* CAPTION */ #imagelightbox-caption { text-align: center; color: #fff; background-color: #666; position: fixed; z-index: 10001; left: 0; right: 0; bottom: 0; padding: 0.625em; /* 10 */ } /* NAVIGATION */ #imagelightbox-nav { background-color: #444; background-color: rgba( 0, 0, 0, .5 ); border-radius: 20px; position: fixed; z-index: 10001; left: 50%; bottom: 3.75em; /* 60 */ padding: 0.313em; /* 5 */ -webkit-transform: translateX( -50% ); -ms-transform: translateX( -50% ); transform: translateX( -50% ); } #imagelightbox-nav button { width: 1em; /* 20 */ height: 1em; /* 20 */ background-color: transparent; border: 1px solid #fff; border-radius: 50%; display: inline-block; margin: 0 0.313em; /* 5 */ } #imagelightbox-nav button.active { background-color: #fff; } /* ARROWS */ .imagelightbox-arrow { width: 3.75em; /* 60 */ height: 7.5em; /* 120 */ background-color: #444; background-color: rgba( 0, 0, 0, .5 ); vertical-align: middle; display: none; position: fixed; z-index: 10001; top: 50%; margin-top: -3.75em; /* 60 */ } .imagelightbox-arrow:hover, .imagelightbox-arrow:focus { background-color: #666; background-color: rgba( 0, 0, 0, .75 ); } .imagelightbox-arrow:active { background-color: #111; } .imagelightbox-arrow-left { left: 2.5em; /* 40 */ } .imagelightbox-arrow-right { right: 2.5em; /* 40 */ } .imagelightbox-arrow:before { width: 0; height: 0; border: 1em solid transparent; content: ''; display: inline-block; margin-bottom: -0.125em; /* 2 */ } .imagelightbox-arrow-left:before { border-left: none; border-right-color: #fff; margin-left: -0.313em; /* 5 */ } .imagelightbox-arrow-right:before { border-right: none; border-left-color: #fff; margin-right: -0.313em; /* 5 */ } #imagelightbox-loading, #imagelightbox-overlay, #imagelightbox-close, #imagelightbox-caption, #imagelightbox-nav, .imagelightbox-arrow { -webkit-animation: fade-in .25s linear; animation: fade-in .25s linear; } @-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @media only screen and (max-width: 41.250em) /* 660 */ { #container { width: 100%; } #imagelightbox-close { top: 1.25em; /* 20 */ right: 1.25em; /* 20 */ } #imagelightbox-nav { bottom: 1.25em; /* 20 */ } .imagelightbox-arrow { width: 2.5em; /* 40 */ height: 3.75em; /* 60 */ margin-top: -2.75em; /* 30 */ } .imagelightbox-arrow-left { left: 1.25em; /* 20 */ } .imagelightbox-arrow-right { right: 1.25em; /* 20 */ } } @media only screen and (max-width: 20em) /* 320 */ { .imagelightbox-arrow-left { left: 0; } .imagelightbox-arrow-right { right: 0; } } /* MEDIA QUERIES */ @media only screen and (max-width: 767px) { .js nav.desktop-menu { display:none; } .js .slicknav_menu {display: block;} }