/** .---------------------------------------------------------------------. | @package: Theme Lazy5basic (a.k.a. theme Personal Pro) | @version: v1.4.3 (14 April 2021) | @link: http://italinux.com/personal-pro | @docs: http://italinux.com/theme-personal-pro | | @author: Matteo Montanari | @link: https://matteo-montanari.com '---------------------------------------------------------------------' .---------------------------------------------------------------------------. | @copyright (c) 2021 | | ------------------------------------------------------------------------- | | @license: Concrete5.org Marketplace Commercial Add-Ons & Themes License | | https://concrete5.org/help/legal/commercial_add-on_license | | or just: file://theme_lazy5basic/LICENSE.TXT | | | | This program is distributed in the hope that it will be useful - WITHOUT | | ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or | | FITNESS FOR A PARTICULAR PURPOSE. | '---------------------------------------------------------------------------' */ /** - - - - - - - - - - - - - - - - - - - - - * Import Google Font */ /** - - - - - - - - - - - - - - - - - - - - - * Set Typography */ /** - - - - - - - - - - - - - - - - - - - - - * Additional Configuration * * See related: presets/*.less * and replace values here: */ /** - - - - - - - - - - - - - - - - - - - - - * Local font */ /* oleo-script-regular - latin */ @font-face { font-family: 'Oleo Script'; font-style: normal; font-weight: 400; font-display: swap; src: url('oleo-script/oleo-script-v5-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Oleo Script'), local('OleoScript-Regular'), url('oleo-script/oleo-script-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('oleo-script/oleo-script-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('oleo-script/oleo-script-v5-latin-regular.woff') format('woff'), /* Modern Browsers */ url('oleo-script/oleo-script-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('oleo-script/oleo-script-v5-latin-regular.svg#OleoScript') format('svg'); /* Legacy iOS */ } /* oleo-script-700 - latin */ @font-face { font-family: 'Oleo Script'; font-style: normal; font-weight: 700; font-display: swap; src: url('oleo-script/oleo-script-v5-latin-700.eot'); /* IE9 Compat Modes */ src: local('Oleo Script Bold'), local('OleoScript-Bold'), url('oleo-script/oleo-script-v5-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('oleo-script/oleo-script-v5-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('oleo-script/oleo-script-v5-latin-700.woff') format('woff'), /* Modern Browsers */ url('oleo-script/oleo-script-v5-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('oleo-script/oleo-script-v5-latin-700.svg#OleoScript') format('svg'); /* Legacy iOS */ } /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * GLOBAL Colours * * ODD backgrounds SECTIONS: (default: darks) * + Primary Colours: ODDS, Menu, Banner, Footer etc .. */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * GLOBAL Font Sizes * * Tag: */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Headings Banner (default font-weight) */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * GLOBAL Spaces top / bottom */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * - - START Colors - - * GLOBAL Catalyst Colors */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * GLOBAL basic Colours RGBA / RGB * * ODD (default: darks) */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * HowTo Video INTRO */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * GLOBAL blocks colours CONFIG * * Menu */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Banner */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * What i do */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Team */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Services */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Fb page posts */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * About me */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Adverts */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Bookmarks */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * My skills */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Curriculum vitae */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Portfolio */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * My works */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Map */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Content free */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Prices */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Testimonials */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Contacts */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Clients */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Social media */ /** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Footer */ /** Minix control colors --------------------------------------------------------- */ /** * SMART ITEM LIGHTER COLORS * --------------------------------------------------------- */ /** * SMART ITEM DEFAULT COLORS * --------------------------------------------------------- */ /** * SMART ITEM LOW SATURATION COLORS * --------------------------------------------------------- */ /** * SMART ITEM COLORS for PORTFOLIO, TEAM * --------------------------------------------------------- */ /* Banner ---------------------------------------------------------*/ .single-space-bottom > section.banner.page-block, .double-space-bottom > section.banner.page-block, .no-spaces > section.banner.page-block, .no-space-bottom > section.banner.page-block { padding-bottom: 0 !important; } .single-space-top > section.banner.page-block, .double-space-top > section.banner.page-block, .no-spaces > section.banner.page-block, .no-space-top > section.banner.page-block { padding-top: 0 !important; } .no-sides-spaces > section.banner.page-block { padding-left: 0px !important; padding-right: 0px !important; } .fix-spaces-buttons section.banner .btn { white-space: normal; } .fix-spaces-buttons section.banner div.global-cta .btn { width: 70%; margin: 0px auto; text-align: center; } .fix-spaces-buttons section.banner div.global-cta .btn.goto > span { max-width: 150px; display: inline-block; } .fix-spaces-buttons section.banner div.global-cta .btn.goto::after { vertical-align: text-top; margin-right: -10px; } section.banner { position: relative; overflow: hidden; } section.banner a:not(.CTA-clean).info::after, section.banner a:not(.CTA-clean).goto::after { margin-top: 0px; font-family: "FontAwesome"; font-size: 0.8em; text-decoration: none; } section.banner a:not(.CTA-clean).info > span, section.banner a:not(.CTA-clean).goto > span { align-self: center; } section.banner a:not(.CTA-clean).info::after { content: "\f05a"; margin-right: 5px; margin-left: 5px; } section.banner a:not(.CTA-clean).goto::after { content: "\f08e"; margin-left: 6px; margin-right: 10px; } section.banner div.global-cta { margin-top: 4em; margin-bottom: 2em; font-size: 120%; text-align: center; } section.banner div.global-cta a.btn { width: 30%; } section.banner .btn { max-width: 460px; } section.banner .btn.btn-primary[disabled] { cursor: default; } section.banner.editMode { border: 1px dashed #bbb; } section.banner.page-block { margin: 0px auto; padding: 6em 8%; } section.banner.over-image::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; margin: 0 auto; content: ""; } section.banner.over-image { background-color: transparent; background-image: none; background-repeat: repeat; background-attachment: scroll; background-size: cover; background-position: center center; } section.banner.over-image.cfg-color h1 { color: inherit; } section.banner.over-image.cfg-color h2 { color: inherit; } section.banner.over-image.cfg-color h3 { color: inherit; } section.banner.over-image.cfg-color h4 { color: inherit; } section.banner.over-image.cfg-color h5 { color: inherit; } section.banner.over-image.cfg-color h6 { color: inherit; } section.banner.over-image.cfg-color p { color: inherit; } section.banner.over-image.cfg-color a:not(.btn) { color: inherit; } section.banner div.block-header { position: relative; padding: 0 0 3em; text-align: center; border: none; } section.banner .hide { display: none; visibility: hidden; } section.banner .show { display: block; visibility: visible; } section.banner .single-space-bottom { padding-bottom: 1.8em; } section.banner .double-space-bottom { padding-bottom: 3.2em; } section.banner .single-space-top { padding-top: 1.8em; } section.banner .double-space-top { padding-top: 3.2em; } section.banner .no-margins { margin: 0 !important; } section.banner .no-paddings { padding: 0 !important; } section.banner .no-spaces { margin: 0 !important; padding: 0 !important; } section.banner .no-sides-margins { margin-left: 0 !important; margin-right: 0 !important; } section.banner .no-sides-paddings { padding-left: 0 !important; padding-right: 0 !important; } section.banner .no-space-bottom { margin-bottom: 0 !important; padding-bottom: 0 !important; } section.banner .no-space-top { margin-top: 0 !important; padding-top: 0 !important; } section.banner .no-margin-bottom { margin-bottom: 0 !important; } section.banner .no-margin-top { margin-top: 0 !important; } section.banner .nopaque { opacity: 0; } section.banner .opaque { opacity: 1; } /* Media Desktop ---------------------------------------------------------*/ @media screen and (max-width: 1600px) { section.banner.page-block { padding-left: 6%; padding-right: 6%; } } /* Media Desktop ---------------------------------------------------------*/ @media screen and (max-width: 1280px) { section.banner.page-block { padding-left: 4%; padding-right: 4%; } } /* Media Tablets ---------------------------------------------------------*/ @media screen and (max-width: 1024px) { section.banner.page-block { padding-left: 3%; padding-right: 3%; } } /* Media Mobiles ---------------------------------------------------------*/ section.banner[class^="mobile_view"].page-block { padding-left: 2%; padding-right: 2%; } @media screen and (max-width: 500px) { section.banner.page-block { padding-left: 2%; padding-right: 2%; } } section.banner { font-size: 120%; min-height: 100vh; } section.banner.over-image::before { background-image: -webkit-linear-gradient(top, rgba(68, 79, 139, 0.6) 40%, rgba(255, 255, 255, 0) 96%); background-image: -moz-linear-gradient(top, rgba(68, 79, 139, 0.6) 40%, rgba(255, 255, 255, 0) 96%); background-image: -ms-linear-gradient(top, rgba(68, 79, 139, 0.6) 40%, rgba(255, 255, 255, 0) 96%); background-image: -o-linear-gradient(top, rgba(68, 79, 139, 0.6) 40%, rgba(255, 255, 255, 0) 96%); background-image: linear-gradient(to bottom, rgba(68, 79, 139, 0.6) 40%, rgba(255, 255, 255, 0) 96%); } section.banner.over-image { background-clip: content-box; background-origin: content-box; } section.banner.with-fade::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; margin: 0 auto; content: ""; opacity: 1; } section.banner .single-plus-space-bottom { padding-bottom: 2.8em; } section.banner .single-plus-space-top { padding-top: 2.8em; } section.banner h1 sup { position: absolute; } section.banner div[class^="container"] { position: relative; right: 0; left: 0; display: block; width: auto; height: auto; margin-top: 25px; margin-left: auto; margin-right: auto; margin-bottom: 0px; padding-bottom: 110px; text-align: center; vertical-align: center; align-self: center; z-index: 1; } section.banner div[class^="container"] div.videoStatus { position: absolute; right: 0; left: 0; width: auto; margin: -30px auto 0px -15px; font-family: monospace; font-size: 130%; font-weight: 500; text-align: center; text-shadow: 0 0 3px #fff; display: none; } section.banner div[class^="container"] div.videoStatus.show { -webkit-animation: videostatusfadeout 2s linear 5s 1 normal forwards running; -moz-animation: videostatusfadeout 2s linear 5s 1 normal forwards running; -o-animation: videostatusfadeout 2s linear 5s 1 normal forwards running; animation: videostatusfadeout 2s linear 5s 1 normal forwards running; display: block; } section.banner div[class^="container"] div.videoStatus span { position: absolute; width: 10px; height: 10px; margin: 5px 5px 5px 10px; border-radius: 50%; } section.banner div[class^="container"] div.videoStatus span.video-on { background-color: #26a428; box-shadow: 0 0 5px 3px #90ee90; } section.banner div[class^="container"] div.videoStatus span.video-off { background-color: #a52a2a; box-shadow: 0 0 5px 3px #ffc0cb; } section.banner div[class^="container"] div.banner-photo img[src$=".png"] { box-shadow: none !important; } section.banner div.player { position: absolute !important; top: 0; right: 0; left: 0; width: 100%; height: 100vh !important; margin: 0 auto; padding: 0; opacity: 0; } section.banner div.player div.YTPOverlay { opacity: 0.2; background-color: #444f8b; } section.banner p { margin-bottom: 1em; font-weight: 400; text-shadow: 1px 1px 1px rgba(68, 79, 139, 0.2); } section.banner a.CTA-arrow-top { padding-bottom: 15px; font-weight: 400; text-decoration: none !important; display: inline-block; z-index: 2; } section.banner a.CTA-arrow { padding: 10px 25px; display: inline-block; z-index: 3; } @-webkit-keyframes videostatusfadeout { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes videostatusfadeout { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes videostatusfadeout { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes videostatusfadeout { 0% { opacity: 1; } 100% { opacity: 0; } } /* Media Tablet ---------------------------------------------------------*/ @media screen and (max-width: 1280px) { section.banner.over-image { background-attachment: scroll; } } /* Media Mobile ---------------------------------------------------------*/ @media screen and (max-width: 768px) { section.banner h1 { margin-left: auto; margin-right: auto; } section.banner h1 sup { position: relative; top: -0.6em; margin-left: 8px; } section.banner div.banner-photo { display: none; } } @media screen and (max-width: 500px) { section.banner { font-size: 100%; min-height: 600px; } section.banner div[class^="container"] { padding-left: 0px; padding-right: 0px; } section.banner div[class^="container"] h4 { padding-left: 12px; padding-right: 12px; } section.banner div[class^="container"] a.CTA-arrow { padding-top: 0px; font-size: 70%; } section.banner div[class^="container"] a.CTA-arrow .fa { -webkit-animation: 0s ease 0s normal none 1 running none; -moz-animation: 0s ease 0s normal none 1 running none; -o-animation: 0s ease 0s normal none 1 running none; animation: 0s ease 0s normal none 1 running none; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; -webkit-transition-property: none; -moz-transition-property: none; -o-transition-property: none; transition-property: none; } } /*--------------------- Templates -----------------------*/ /* i_am_what_i_do ---------------------------------------------------------*/ section.banner.i_am_what_i_do > div[class^="container"] { padding-top: 10%; } /* image_round_right ---------------------------------------------------------*/ section.banner.image_round_right > div[class^="container"] { padding-top: 6%; } section.banner.image_round_right > div[class^="container"] p { margin-bottom: 0.3em; } section.banner.image_round_right > div[class^="container"] h1 { margin-bottom: 5px; } section.banner.image_round_right > div[class^="container"] h4 { padding-top: 5px; } section.banner.image_round_right > div[class^="container"] div.content { padding-top: 2.6em; padding-bottom: 3.6em; } section.banner.image_round_right > div[class^="container"] div.banner-photo img { border-radius: 50%; box-shadow: 2px 4px 5px 1px rgba(0, 0, 0, 0.5); } /* image_square_right ---------------------------------------------------------*/ section.banner.image_square_right > div[class^="container"] { padding-top: 6%; } section.banner.image_square_right > div[class^="container"] p { margin-bottom: 0.3em; } section.banner.image_square_right > div[class^="container"] h1 { margin-bottom: 5px; } section.banner.image_square_right > div[class^="container"] h4 { padding-top: 5px; } section.banner.image_square_right > div[class^="container"] div.content { padding-top: 2.6em; padding-bottom: 3.6em; } section.banner.image_square_right > div[class^="container"] div.banner-photo img { border-radius: 0px; box-shadow: 2px 4px 5px 1px rgba(0, 0, 0, 0.5); } /* Media Mobile - Templates: i_am_what_i_do ---------------------------------------------------------*/ @media screen and (max-width: 1280px) { section.banner.i_am_what_i_do > div[class^="container"] { padding-top: 8%; } } @media screen and (max-width: 1024px) { section.banner.i_am_what_i_do > div[class^="container"] { padding-top: 20%; } } @media screen and (max-width: 800px) { section.banner.i_am_what_i_do > div[class^="container"] { padding-top: 22%; } } @media screen and (max-width: 768px) { section.banner.i_am_what_i_do > div[class^="container"] { padding-top: 25%; } } @media screen and (max-width: 500px) { section.banner.i_am_what_i_do > div[class^="container"] { padding-top: 15%; } } /* Media Tablets - Templates: image_round_right ---------------------------------------------------------*/ @media screen and (max-width: 1280px) { section.banner.image_round_right > div[class^="container"] { padding-top: 4%; } } @media screen and (max-width: 1024px) { section.banner.image_round_right > div[class^="container"] { padding-top: 10%; } } /* Media Mobiles - Templates: image_round_right ---------------------------------------------------------*/ @media screen and (max-width: 768px) { section.banner.image_round_right > div[class^="container"] { padding-top: 15%; } section.banner.image_round_right > div[class^="container"] > div.main > div { width: 100%; } section.banner.image_round_right > div[class^="container"] div.content { padding-bottom: 3.2em; } } @media screen and (max-width: 500px) { section.banner.image_round_right > div[class^="container"] div.content { padding-top: 1.6em; padding-bottom: 2.4em; } } /* Media Tablets - Templates: image_square_right ---------------------------------------------------------*/ @media screen and (max-width: 1280px) { section.banner.image_square_right > div[class^="container"] { padding-top: 4%; } } @media screen and (max-width: 1024px) { section.banner.image_square_right > div[class^="container"] { padding-top: 10%; } } /* Media Mobiles - Templates: image_square_right ---------------------------------------------------------*/ @media screen and (max-width: 768px) { section.banner.image_square_right > div[class^="container"] { padding-top: 15%; } section.banner.image_square_right > div[class^="container"] > div.main > div { width: 100%; } section.banner.image_square_right > div[class^="container"] div.content { padding-bottom: 3.2em; } } @media screen and (max-width: 500px) { section.banner.image_square_right > div[class^="container"] div.content { padding-top: 1.6em; padding-bottom: 2.4em; } }