/* Theme Name: OHMM v2 Theme URI: http://ohmm.pt/ Author: Plura Author URI: http://plura.pt/ This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /* FONTS */ @import url("css/fonts.css"); /* I M A G E S */ @import url("css/colors.css"); /* T R A N S I T I O N S */ @import url("css/transitions.css"); /* * * * * * * * * * * * * * * * * * S T R U C T U R E * 1. Common 1.1. Clear Floats 1.3. Cursors [Default | Pointer] 2. Layout 2.1. Touch 2.2. Slides 2.3. Toggle 2.5. Big Form 2.6 Posts 3. Main 3.1 Body | Page 3.2 Header 3.2.1 Logo 3.2.2 Toggle 3.3 Menus 3.3.1. Environment 3.3.2. Main 3.3.3. Social + Lang 3.4 Home 3.5 Homes > Graphic Diary 3.6 Concept 3.6 Contacts 7. CUSTOM TYPES 7.1 Grid 7.2 Houses 7.2.1. House 7.2.2. Testimonials 7.3 Services 7.3.1 Tips 7.4 Resources 7.4.1. Partners 8. Chat * * * * * * * * * * * * * * * * */ html { height: 100%; } /* 1.1 Clear Floats */ .home .testimonials .testimonial:after, #menu-main:after, #menu-secondary:after, .single-ohmm_houses .info-booking.fixed::after { content:"."; display:block; height:0; clear:both; visibility:hidden; } /* COMMON: Hidden */ #main #comments, #secondary, #page article .edit-link { display:none; } /* 1.3 Cursor [Default] */ body:not(.home) .site-header .menu-item.current-menu-item>a, nav#sub #qtranslate-chooser>.active a { cursor:default; } /* 1.3 Cursor [Pointer] */ .home .poster, header.site-header .toggle-single, #menu-main>.menu-item>.trigger, nav#sub #menu-secondary .menu-item, body:not(.home) .site-header .menu-item:hover:not(.current-menu-item), .single-ohmm_houses article .p-slideshow .nav .item:not(.active) { cursor:pointer; } /* C O M M O N L A Y O U T I T E M S */ /* 2.1. TOUCH [SCROLL] see http://benfrain.com/horizontal-scrolling-area-css-overflow-ios/ */ /* .touch:not(.home)>* { overflow:hidden; }*/ /* to allow inner div scroll :p */ .p-client-touch .touch-scroll { -webkit-overflow-scrolling: touch; } .p-client-touch .touch-scroll.touch-scroll-x { overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } /* has to be scroll, not auto */ .p-client-touch .touch-scroll.touch-scroll-y { overflow-y: scroll; overflow-x: hidden; } /* has to be scroll, not auto */ /* 2.3. CONTACTS & CHECKOUT END FORM/INFO TOGGLE */ .toggle { width:100%; list-style:none; margin: 0; } .toggle .node { float:left; width:50%; text-align:center; } .toggle, .toggle-inactive { visibility:hidden; opacity: 0; } .toggle.active, .toggle-active { visibility:visible; opacity: 1; } .toggle-inactive { z-index:auto; } .toggle-active { z-index:999; } .toggle .node .trigger { position:relative; } .toggle .node .trigger:before { position:absolute; left: 0; } /*dims*/ .toggle { height:35px; margin: 10px 0 0 0; padding: 10px 0 0 0;} .toggle .node .trigger { padding: 0 0 0 30px; } .toggle .node.i0 .trigger:before { top:-6px; } /* 2.6 POSTS | PAGE */ body:not(.home) #page { margin:0 auto 0 auto; } body:not(.home) #page .entry-content { overflow:hidden; position:relative; } #main { position: relative; } .archive .archive-header, .archive .page-header, article .entry-header { display: flex; align-items: center; } .single article .entry-title { margin: 0; text-align: center; } .archive .archive-header .archive-title, .archive .page-header .page-title, article .entry-header .entry-title { margin-top: 0; margin-bottom: 0; } /*dims*/ #page { min-height: calc(100vh - 50px - 2px); } body:not(.home) #main { min-height: calc(100vh - 50px - 60px); } body:not(.home) #main { padding:0 10px 50px 10px; } body:not(.home) header.fixed + #main { padding-top: 60px; } body:not(.home) #main .author { position: absolute; bottom: 10px; right: 10px; } .single article { padding-top: 20px; padding-bottom: 40px; } /* bottom - 33px + 40px */ .single-ohmm_houses article { padding-bottom: calc(35px + 5px * 2); } .archive .archive-header, .archive .page-header, article .entry-header { min-height: 70px; } /* L A Y O U T */ body { margin:0; padding:0; position:relative; } .slimScrollDiv .slimScrollBar { opacity:1 !important; } /* COMMON DIMS */ /* Main Width */ #page { width:100%; /*border:1px solid #f00;*/ } /*menu enviornment label (used in home & env select)*/ #menu-environment-label { text-align: center; overflow: visible; position: relative; } #menu-environment-label:after, #menu-environment-label:before { display: inline-block; position: absolute; z-index: 999; } #menu-environment-label:after { right: 2em; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } #menu-environment-label:before { left: 2em; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } #menu-environment-label:after, #menu-environment-label:before { bottom: -1.2em; } /* 3.2. Layout: Header */ header.site-header { position:relative; } header #search-container { display:none; } /*header.site-header.fixed { position: fixed; left: 0; top: 0; width: 100%; z-index: 999; }*/ header.site-header .header-main { height:100%; position:relative; } header.site-header .header-main:after { content:''; width:100%; position: absolute; z-index: auto; } /*dims*/ header.site-header .header-main:after { height:2px; bottom:-2px; } /* 3.2.1 Header Logo */ header.site-header .site-title a { display:block; } header.site-header .site-title { margin:0; position:absolute; top:0; left:0; } header.site-header .site-title a { text-indent:-9999px; } header.site-header .site-title, header.site-header .site-title a { height: 100%; } header.site-header .site-title a { width: 100%; } /*dims*/ header.site-header { padding:10px 10px 0 10px; height: 60px; } header.site-header .site-title { width: calc( 100% / 3); padding-bottom: 5px; } /* 3.2.2 Header: Toggle */ header.site-header .toggle-single { padding: 0; display: table; text-align: center; border: none; } header.site-header .toggle-single .label { display: none; } header.site-header .toggle-single:before { display:table-cell; vertical-align: middle; } header.site-header .toggle-single { width: 40px; height: 40px; } header.site-header .toggle-single { position: absolute; right:0; bottom:10px; } /* 3.3. Layout: MENUS */ #menu-environment, #menu-main, #menu-main .sub-menu { list-style: none; padding-left: 0; margin-top: 0; margin-bottom: 0; } #menu-environment .menu-item { padding: 0; float:left; } /* 3.3.1 MENU: ENVIRONMENT */ #menu-environment { /*position: absolute; left:50%; z-index: 998;*/ } #menu-environment .menu-item { overflow: hidden; } #menu-environment .menu-item a { display: flex; justify-content: center; align-items: center; } body:not(.p-client-touch) #menu-environment .menu-item a { opacity: 0; visibility: hidden; } body:not(.p-client-touch) #menu-environment .menu-item:hover a { opacity: 1; visibility: visible; } /* ios exception - click doesn't work otherwis */ .p-client-touch #menu-environment .menu-item { overflow: visible; } /* dims */ #menu-environment .menu-item a { width: 100px; height:100px; } #menu-environment .menu-item:not(:last-child) { margin:0 50px 0 0; } .p-client-touch #menu-environment .menu-item a span { bottom: -30px; } /* environemnt popup */ #menu-environment-popup { position: fixed; left: 0; top: 0; width: 100%; z-index: 999; height: 100%; } #menu-environment-popup #menu-environment-label { position: absolute; } #menu-environment-popup #menu-environment-label { width: 90%; left: 50%; } /* 3.3.2 MENU: Main */ #menu-main.toggle-target { position: relative; position: fixed; z-index: 1000;} /*dims*/ #menu-main.toggle-target { top: 62px; } /* 3.3.3 MENU: Secondary Nav Social Menu | Qtranslate Menu */ nav#sub { display:inline-block; overflow: visible; } /* overflow visible is necessary for ios/android :/ */ nav#sub #menu-secondary, nav#sub #qtranslate-chooser { padding:0; list-style:none; margin:0; } nav#sub #menu-secondary li { display: inline-flex; justify-content: center; align-items: center; position: relative;} nav#sub #menu-secondary li:not(#chat-trigger-holder) a { display:block; text-indent:-9999px; position:absolute; z-index:1; width: 100%; height: 100%; top: 0; left: 0; } nav#sub #menu-secondary>.menu-item { float:left; } nav#sub #qtranslate-chooser { position:absolute; opacity:0; visibility:hidden; } nav#sub.lang #qtranslate-chooser { opacity:1; visibility:visible; } nav#sub #qtranslate-chooser li:after { content:attr(data-lang); } nav#sub #qtranslate-chooser span, .qtrans_widget_end { display:none; } nav#sub #menu-secondary .menu-item.env { opacity: .8; /*border: 1px solid #000;*/ } /* dims */ nav#sub li { height: 50px; } nav#sub #menu-secondary .menu-item:not(:last-child) { margin:0; } nav#sub #qtranslate-chooser { top:auto; left:0; bottom:50px; } /* 4. MODULES */ /* 3.4 HOME */ .home { overflow: hidden; } .home #main { display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 0; } .home #main nav#sub { z-index: 10; } .home #main #video-holder { position: relative; } .home #main #video-holder img { position: absolute; z-index: 2; width: 100%; height: 100%; object-fit: cover; } /* dims */ .home { height: 100%; } .home #main { height: calc(100% - 50px); } /*CONCEPT*/ .page-id-1220 .p-slideshow { width: 100%; } .page-id-1220 .p-slideshow .media { position: relative; } .page-id-1220 .p-slideshow .media, .page-id-1220 .p-slideshow .item { width: 100%; height: 100%; } .page-id-1220 .p-slideshow .item { position: absolute; z-index: auto; object-fit: contain; } /*dims*/ .page-id-1220 .p-slideshow { height: 400px; } /* 4.5.1 SERVICE [POST] */ .single article.ohmm_services .entry-title { padding-left: 60px; padding-top: 10px; padding-bottom: 10px; } /* 4.8 GRAPHIC DIARY*/ .grid.instagram .grid-item img { width: 100%; height: auto; vertical-align: bottom;} .grid.instagram .grid-item a[data-caption]::before { content: attr(data-caption); display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; opacity: 0; visibility: hidden; position: absolute; z-index: auto; } .grid.instagram .grid-item:hover a[data-caption]::before { opacity: 1; visibility: visible; } /*dims*/ .grid.instagram .grid-item a[data-caption]::before { padding: 15px; } /* 3.6 CONTACTS */ .page-id-1208 form { display: flex; justify-content: space-between; flex-wrap: wrap; } .page-id-1208 form label, .page-id-1208 form input, .page-id-1208 form textarea { display: block; } .page-id-1208 form input, .page-id-1208 form textarea { margin: 0; padding: 0; } /*dims*/ .page-id-1208 form label { width: 25%; } .page-id-1208 form input, .page-id-1208 form textarea { width: 70%; } .page-id-1208 form label, .page-id-1208 form input { height: 30px;} .page-id-1208 form label[for="message"], .page-id-1208 form textarea { height: 100px; } .page-id-1208 form input:not([type="submit"]), .page-id-1208 form label[for="message"], .page-id-1208 form textarea { margin-bottom: 15px; } .page-id-1208 form input[type="submit"] { margin-left: 30%; } /* 7 CUSTOM TYPES */ .plura-box.details table { width: 100%; } .plura-box.details table td:first-child:after { content: ':';} .plura-box.details table td:last-child { text-align: right; } /* header form */ #main header + form { display: flex; justify-content: flex-end; } /*dims*/ #main header + form { padding-top: 10px; padding-bottom: 10px; } #main header + form input, #main header + form button, #main header + form label { height: 25px; } /* 7.1 Grid*/ .grid .grid-item { overflow: hidden; position: relative; } .grid .grid-item .holder { position: relative; overflow: hidden; } .grid .grid-item header { position: relative; } .grid .grid-item header .title { margin: 0; } .grid .grid-item .body { text-align: left; } .grid .grid-item .body ul { padding-left: 0; } .grid .grid-item .body p:empty { display: none; } .grid .grid-item footer { position: absolute; bottom: 0; width: 100%; text-align: center; } /*variations*/ .grid.houses .grid-item .holder, .grid.services .grid-item .holder { cursor: pointer; } .grid.houses .grid-item header, .grid.services .grid-item header { display: flex; align-items: center; } .grid.houses .grid-item .title, .grid.services .grid-item .title { text-align: center; margin: 0; } .grid.partners .grid-item header img, .grid.special-thanks .grid-item header img { width: 100%; object-fit: contain; } .grid.partners .grid-item .body, .grid.special-thanks .grid-item .body { text-align: center; } /*dims*/ .grid .grid-item:nth-child(2n+1) .holder { margin-right: 4px; } .grid .grid-item:nth-child(2n) .holder { margin-left: 4px; } .grid .grid-item { margin-bottom: 20px; } .grid .grid-item .body { padding-left: 15px; padding-right: 15px; } .grid .grid-item footer { padding-top: 10px; padding-bottom: 5px; } /*variations*/ .grid.houses .grid-item header { height: 70px; padding-top: 20px; } .grid.services .grid-item header { height: 40px; } .grid.houses .grid-item .holder { height: calc(40px + 150px); } .grid.services .grid-item .body { height: 150px; } .grid.houses .grid-item header { justify-content: center;} .grid.services .grid-item header .title { margin-left: 40px; width: calc(100% - 40px); } .grid.partners .grid-item header .title, .grid.special-thanks .grid-item header .title { text-align: center; } .grid.partners .grid-item header img, .grid.special-thanks .grid-item header img { height: 80px; } .grid.team .grid-item header img { height: 100px; width: 100px; } .grid.partners .grid-item, .grid.special-thanks .grid-item { min-height: 200px; } /* 7.2 Houses */ .post-type-archive-ohmm_houses .map-holder .map { height: 100%; } .post-type-archive-ohmm_houses .map-holder { position: relative; } .post-type-archive-ohmm_houses .map-holder::before { width: 100%; height: 100%; position: absolute; z-index: 999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; } .post-type-archive-ohmm_houses .loading .map-holder::before { visibility: visible; opacity: 1; } .post-type-archive-ohmm_houses .loading .map-holder .map { opacity: .2; } .post-type-archive-ohmm_houses .grid .grid-item.partner header::after { content: ''; position: absolute; } .post-type-archive-ohmm_houses form input[type=date] { text-align: center; } .post-type-archive-ohmm_houses form button[type=submit] { position: relative; text-indent: -9999px; } .post-type-archive-ohmm_houses form button[type=submit]::before { position: absolute; text-indent: 0; top: 0; left: 0; z-index: auto; width: 100%; height: 100%; } .post-type-archive-ohmm_houses form label, .post-type-archive-ohmm_houses form input[type=date], .post-type-archive-ohmm_houses form button[type=submit]::before { display: flex; align-items: center; justify-content: center; } /*dims*/ .post-type-archive-ohmm_houses .map-holder { height: 200px; margin-bottom: 20px; } .post-type-archive-ohmm_houses .grid .grid-item.partner header::after { width: 10px; height: 10px; top: 7px; right: 7px; } .post-type-archive-ohmm_houses form label { width: calc( (100% - 10px) * 1/5.5); } .post-type-archive-ohmm_houses form input[type=date] { width: calc( (100% - 10px) * 1.5/5.5); } .post-type-archive-ohmm_houses form button[type=submit] { width: calc( (100% - 10px) * 0.5/5.5); margin-left: 10px; } .grid.houses .grid-item .availability-calendar { left: 5px; top: 5px; padding-left: 20px; } .grid.houses .grid-item .availability-calendar, .grid.houses .grid-item .availability-calendar::before { position: absolute; } .grid.houses .grid-item .availability-calendar::before { left: 0; } .grid.houses .grid-item .availability-calendar::after { content: 'Checking Availability...'; } .grid.houses .grid-item .availability-calendar[data-availability-date]::after { content: 'Available ' attr(data-availability-date); } .grid.houses .grid-item .availability-calendar[data-availability-remaining="0"]::after { content: 'Available Now!'; } /* 7.2.1 House */ .single-ohmm_houses article .main { position: relative;} .single-ohmm_houses article .main[data-license]::before { content: attr(data-license); position: absolute; } .single-ohmm_houses article .sidebar.fixed { position: absolute; right: 0; } .single-ohmm_houses article .sidebar .details { margin-right: 0; margin-left: 0; } .single-ohmm_houses .info-booking .button { display: block; text-align: center; position: relative; } .single-ohmm_houses .info-booking .button:before { position: absolute; z-index: auto; left: 45px; } .single-ohmm_houses .info-booking.fixed { position: fixed; width: 100%; } .single-ohmm_houses .info-booking.fixed>* { float: left; } .single-ohmm_houses article .p-slideshow .media { position: relative; overflow: hidden; }/*plura-c width */ .single-ohmm_houses article .p-slideshow .media img { object-fit: cover; width: 100%; height: 100%; position: absolute; z-index: auto; } .single-ohmm_houses article .p-slideshow .nav { /*overflow: horizontal;*/ /*width: 2010px;*/} .single-ohmm_houses article .p-slideshow .nav:not(.touch-scroll) { overflow: hidden; position: relative; } .single-ohmm_houses article .p-slideshow .nav:not(.touch-scroll) .holder { position: absolute; } .single-ohmm_houses article .p-slideshow .p-previousnext { width: 100%; height: 100%; } .single-ohmm_houses article .p-slideshow .p-previousnext, .single-ohmm_houses article .p-slideshow .p-previousnext-controls { position: absolute; z-index: auto; top: 0; } .single-ohmm_houses article .p-slideshow .p-previousnext-controls { position: absolute; height: 100%; display: inline-flex; align-items: center; cursor: pointer; } .single-ohmm_houses article .p-slideshow .p-previousnext-controls.next { right: 0;} .single-ohmm_houses article .p-slideshow .nav img { width: auto; } .single-ohmm_houses article #calendar:not(.on) { display: none; } .single-ohmm_houses article #calendar .title { margin-top: 0; text-align: center; } .single-ohmm_houses article #calendar .holder .alert { opacity: 1; position: relative; display: flex; justify-content: center; align-items: center; margin:0; } .single-ohmm_houses article #calendar .holder:not(.loading) .alert { opacity: 0; } .single-ohmm_houses article #calendar .p-calendar { padding: 0; border: none; width: 100%; } .single-ohmm_houses article #calendar .p-calendar .p-previousnext { top: 0; } .single-ohmm_houses article #calendar .p-calendar .month .weekdays .weekday span { display: none; } .single-ohmm_houses article #calendar .p-calendar .month .weekdays .weekday::before { content: attr(data-label-1); } .single-ohmm_houses #main .grid-items.testimonials-ohmm { margin-top: 20px; } /*dims*/ .single-ohmm_houses article .main .entry-title { padding-top: 30px; padding-bottom: 30px; } .single-ohmm_houses article .main[data-license]::before { top: 5px; } .single-ohmm_houses .info-booking.fixed { padding: 0 10px 0 10px; bottom: calc(50px + 5px); } .single-ohmm_houses .info-booking.fixed .info-booking-child { width: -webkit-calc(50% - 2px); width: calc(50% - 2px); } .single-ohmm_houses .info-booking.fixed .info-booking-child:first-child { margin-right: 2px; } .single-ohmm_houses .info-booking.fixed .info-booking-child:last-child { margin-left: 2px; } .single-ohmm_houses article .sidebar .details { margin-bottom: 10px; } .single-ohmm_houses article .info-booking .button:not(:first-child) { margin-top: 10px; } .single-ohmm_houses article .sidebar .details, .single-ohmm_houses .info-booking .button { padding: 8px; } .single-ohmm_houses article .p-slideshow { margin-bottom: 10px; } .single-ohmm_houses article .p-slideshow .media, .single-ohmm_houses article .p-slideshow .p-previousnext { height: calc( (100vw - 10px * 2) * 2 / 3); } .single-ohmm_houses article .p-slideshow .nav, .single-ohmm_houses article .p-slideshow .nav img { height: 60px; } .single-ohmm_houses article .p-slideshow .nav img:not(:last-child) { margin-right: 5px; } .single-ohmm_houses article .p-slideshow .p-previousnext-controls { padding-left: 5px; padding-right: 5px; } .single-ohmm_houses article #calendar { padding: 10px; margin-bottom: 10px; } .single-ohmm_houses article #calendar .holder .alert::before { margin-right: 5px; } /* 7.2.2. Testimonials */ .grid.testimonials .grid-item header img { float: left; object-fit: cover; } /* dims */ .grid.testimonials .grid-item header img { width: 50px; height: 50px; margin-right: 10px; object-fit: cover; } .post-type-archive-ohmm_testimonials form label { width: calc( 100% * 1 / 3 ); } .post-type-archive-ohmm_testimonials form select { width: calc( 100% * 2 / 3 ); } /* 7.3 SERVICES */ .services-ohmm::before { content:''; width: 100%; display: block; } /* dims */ .services-ohmm::before { height: 130px; } /* 7.3.1 SERVICES > TIPS */ .single-ohmm_services.postid-1624 #main .grid { list-style: none; padding: 0; } .single-ohmm_services.postid-1624 #main .grid .grid-item .plura-box { text-align: center; } .single-ohmm_services.postid-1624 #main .grid .grid-item .icon-holder { display: inline-block; } .single-ohmm_services.postid-1624 #main .grid .grid-item.no-icon .icon-holder { display: inline-flex; justify-content: center; align-items: center; } .single-ohmm_services.postid-1624 #main .grid .grid-item span { display: block; } .single-ohmm_services.postid-1624 #main .grid .grid-item img { width:100%; height: 100%; object-fit: contain; } /*dims*/ .single-ohmm_services.postid-1624 #main .entry-content .grid .grid-item { min-height: 190px; } .single-ohmm_services.postid-1624 #main .entry-content .grid .grid-item .icon-holder { width: 100px; height: 100px; margin-bottom: 10px; } /* 7.4.1 Partners */ .grid.team .grid-item header { text-align: center; } .grid.team .grid-item .body { min-height: 130px; } /* CHAT */ #chat-trigger { display: inline-flex; } #chat-trigger span { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media screen and (max-width:767px) { /* 3.1 PAGE */ #page { padding-bottom: 50px; padding-top: calc(60px + 2px); } /* 3.2. Layout: Header */ header.site-header { position: fixed; left: 0; top: 0; width: 100%; z-index: 999; } /*3.3 Menus */ #menu-main { opacity: 0; visibility: hidden; } #menu-main.toggle-target-on { opacity: 1; visibility: visible; } #menu-main>.menu-item { position: relative; } #menu-main>.menu-item>.trigger { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; } #menu-main>.menu-item>.sub-menu { overflow: hidden; } #menu-main>.menu-item:not(.open)>.sub-menu { height: 0; } #menu-main .menu-item>a { display: flex; align-items: center; } #menu-main .sub-menu { padding-left: 0; } /*dims*/ #menu-main { height: calc(100vh - 60px - 2px - 50px); width: calc(100% - 10px * 2); } /* win height - header height - header bottom border - secondary nav-height */ #menu-main .menu-item>a { padding-left: 20px; } /* 3.3.3 MENU: Secondary Nav Social Menu | Qtranslate Menu */ nav#sub { position:fixed; z-index: auto; right:0; bottom: 0; width:100%; } nav#sub #menu-secondary>li { width: calc( 100% / 6 ); } /*6 items*/ .type-guest nav#sub #menu-secondary>li, .type-owner nav#sub #menu-secondary>li { width: calc( 100% / 7 ); } /*7 items*/ nav#sub #menu-secondary li li { width: 100%; } /* 3.4 Home */ .home #main #video-holder, .home #main #video-holder video { width: calc(100vw - 30px); height: calc( (100vw - 30px) * 360 / 640 ); } /* 7.1 GRID */ .grid.team .grid-item { min-height: 270px; } .grid.team .grid-item header img { height: 100px; width: 100px; } /* 8. CHAT */ iframe#tawkchat-maximized-iframe-element { width: 100% !important; } } @media (min-width: 768px) { /*3.1 Main: Body | Page */ #page { min-height: 100vh; } body:not(.home) #main { margin-top: auto; padding:0 40px 40px 40px; min-height: calc( 100vh - 115px); } .single-ohmm_houses article { padding-bottom: 40px; } body:not(.home) #main .author { right: 40px; } /* 3.2. Layout: Header */ header.site-header { padding:20px 40px 0 40px; height: 115px; } header.site-header .site-title { width: calc( 100% / 4); padding-bottom: 5px; } /* 3.3.3 MENU: Secondary Nav Social Menu | Qtranslate Menu */ body:not(.home) nav#sub { position: absolute; width: auto; bottom: auto; top:10px; right: 40px; z-index: 999; } nav#sub li { width:33px; height:33px; } nav#sub #qtranslate-chooser { top:33px; bottom: auto; /*inverts direction*/ } nav#sub #menu-secondary .menu-item:not(:last-child) { margin: 0 5px 0 0; } /* 3.4 Home */ .home #main { height: 100vh; } .home #main #video-holder { width: 640px; height: 360px; } .home .author, .home .author-sketch { position: absolute; bottom: 10px; } .home .author { left: 20px; } .home .author-sketch { right: 20px; } /* 3.6 CONTACTS */ .page-id-1208 .entry-content { display: flex; justify-content: space-between; } .page-id-1208 .entry-content form, .page-id-1208 .entry-content .info { width: calc(50% - 40px); } /* 3.2.2 MENU: Main */ .site-header { z-index: 999; } #menu-main { position:absolute; bottom: 0; right: 0; z-index: 999; } #menu-main .menu-item { position:relative; float: left; display: flex; justify-content: center; align-items: center; } #menu-main .menu-item a { position: relative; z-index:2; } #menu-main>.menu-item:after { content:''; width:100%; position: absolute; top: 0; left: 0; z-index: 1; } #menu-main .menu-item .sub-menu .menu-item { width: 100%; } #menu-main>.current-menu-item:after, #menu-main>.menu-item:hover:after { height: 100%; } #menu-main .menu-item .sub-menu { opacity: 0; visibility: hidden; position: absolute; left: 0; padding-left: 0; } #menu-main .menu-item:hover .sub-menu { opacity: 1; visibility: visible; width: 100%; } #menu-main>.menu-item>.trigger { display: none; } /* dims */ #menu-main>.menu-item { width: 115px; } #menu-main .menu-item { height: 45px; } #menu-main>.menu-item:not(:last-child) { margin-right: 6px; } #menu-main>.menu-item .sub-menu { top: 45px; } #menu-main .menu-item:after { height:2px; } /*3.3.1 Environment NAV*/ #menu-environment .menu-item a { width: 130px; height:130px; } #menu-environment .menu-item:not(:last-child) { margin:0 130px 0 0; } /* 4.5.1 SERVICE [POST] */ .single article.ohmm_services .entry-title { padding-left: 60px; padding-top: 10px; padding-bottom: 10px; } /* 7 */ /* header form */ #main header + form { position: absolute; z-index: auto; top: 0; padding-top: 20px; padding-bottom: 20px; width: calc(100% - 40px * 2); } #main header + form input, #main header + form button, #main header + form label { height: 30px; } /* 7.1 Grid */ .grid.services .grid-item header { height: 50px; } .grid.houses .grid-item .holder { height: 200px; } .grid.houses .grid-item header { height: 80px; padding-top: 20px; } .grid.special-thanks .grid-item header img { height: 150px; } /*variations*/ .grid.services .grid-item header, .grid.services .grid-item .body { padding-left: 20px; padding-right: 20px; } .grid.services .grid-item header .title a { width: 90%; } /* 7.2.1 House */ .single-ohmm_houses article .sidebar { padding: 0 0 0 15px; } .single-ohmm_houses .info-booking .services .service, .single-ohmm_houses .info-booking .more-info { padding: 20px; } .single-ohmm_houses .info-booking .more-info:before { margin-right: 40px; } /* 7.2.2. Testimonials */ .post-type-archive-ohmm_testimonials form label { width: calc( 50% * 1 / 3 ); } .post-type-archive-ohmm_testimonials form select { width: calc( 50% * 2 / 3 ); } /* 8. CHAT */ #chat-trigger { position: fixed; right: 20px; bottom: 20px; } .home #chat-trigger { top: 20px; bottom: auto; } } @media (min-width: 768px) and (max-width: 991px) { /* 3.2.2 MENU: Main */ #menu-main>.menu-item { width: 90px; } #menu-main .menu-item { height: 35px; } #menu-main>.menu-item:not(:last-child) { margin-right: 4px; } #menu-main>.menu-item .sub-menu { top: 35px; } } @media (max-width: 991px) { /* 7.2.1 House */ .single-ohmm_houses article .p-slideshow .nav { margin-top: 5px; } } @media (min-width: 992px) { /*3.1 PAGE */ #page { width: 930px; } /* 4.5 SERVICES */ .services-ohmm::before { height: 305px; } /* 7.1 Grid */ .grid .grid-item:nth-child(3n+1) .holder { margin-left: 0; margin-right: calc(20px * 2/3); } .grid .grid-item:nth-child(3n+2) .holder { margin-left: calc(20px * 1/3); margin-right: calc(20px * 1/3); } .grid .grid-item:nth-child(3n) .holder { margin-left: calc(20px * 2/3); margin-right: 0; } /*7.2 Houses */ .post-type-archive-ohmm_houses .map-holder { height: 300px; } .post-type-archive-ohmm_houses form label { width: calc( (50% - 10px) * 1/5.5); } .post-type-archive-ohmm_houses form input[type=date] { width: calc( (50% - 10px) * 1.5/5.5); } .post-type-archive-ohmm_houses form button[type=submit] { width: calc( (50% - 10px) * 0.5/5.5); margin-left: 10px; } /* 7.2.1 House */ .single-ohmm_houses article .p-slideshow { position: relative; } .single-ohmm_houses article .p-slideshow .media, .single-ohmm_houses article .p-slideshow .nav { display: inline-block; } /* vertical align top removes unwanted margin-bottom*/ .single-ohmm_houses article .p-slideshow .nav img { vertical-align: top; } /*dims*/ .single-ohmm_houses article .p-slideshow .media, .single-ohmm_houses article .p-slideshow .p-previousnext { width: calc( 100% * 2 / 3 ); } /* use 848px article width since variables are not fully accepted yet...*/ .single-ohmm_houses article .p-slideshow, .single-ohmm_houses article .p-slideshow .media, .single-ohmm_houses article .p-slideshow .p-previousnext, .single-ohmm_houses article .p-slideshow .nav { height: calc( ( 848px * 2 / 3 ) * 3 / 4 ); } .single-ohmm_houses article .p-slideshow .nav { width: calc( 100% * 1 / 3 - 15px ); margin-left: 15px; } .single-ohmm_houses article .p-slideshow .nav img { width: calc( ( 100% - 3 * ( 15px / 2 ) ) / 4 ); height: auto; } .single-ohmm_houses article .p-slideshow .nav img:not(:nth-child(4n+4)) { margin-right: calc( 14.95px / 2); margin-bottom: calc( 14.95px / 2); } .single-ohmm_houses article .p-slideshow .nav img:nth-child(4n+4) { margin-right: 0; } }