html {
overflow-x: hidden;
scroll-behavior: smooth;
--gapsForNavigation: 80px;
--containerBottom: 50px;
--uniqueBottom: 130px;
--headerHeight: 80px;
--backgroundColor: #e8e8e8;
--contentColor: #ffffff;
}
@font-face {
font-family: Roboto-Regular;
font-style: normal;
font-weight: normal; src: url(//www.my-barber-shop.gr/wp-content/themes/wp_starter/fonts/Roboto-Regular.ttf) format("truetype");
}
* {
font-family: Roboto-Regular !important;
}
body {
overflow-x: hidden;
background-color: var(--backgroundColor);
}
#navLogo {
position: absolute;
z-index: 9999;
left: 40px;
top: 18px;
width: 100px;
height: 42px;
}
.sideNavBtn {
display: none;
}
#mySideNav {
height: 100vh;
width: 50vw;
position: fixed;
left: -50vw;
z-index: 9999;
transition: 0.3s;
}
#services,
#myspace,
#ideas,
#prices {
padding-top: var(--gapsForNavigation)
}
.heroContainer,
.servicesContainer,
.spaceContainer,
.philosophyContainer {
margin-bottom: var(--containerBottom);
}
.ideasContainer,
.pricesContainer {
margin-bottom: var(--uniqueBottom);
}
.colorHeader {
background-color: #000000;
height: var(--headerHeight);
width: 100%;
opacity: 0.6;
}
.menu-main-menu-container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.headerContainer {
z-index: 9999;
position: fixed;
width: 100%;
height: var(--headerHeight);
}
#mainMenu {
display: flex;
height: 100%;
justify-content: end;
align-items: center;
padding-left: 0;
margin-bottom: 0;
}
#mainMenu li:nth-child(4) {
margin-right: 40px;
}
#mainMenu li {
list-style-type: none;
margin-left: 25px;
}
#mainMenuOffcanvas {
padding-left: 0;
}
.colorOffcanvas {
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.6;
}
#mainMenu a {
text-decoration: none;
color: #ffffff;
font-size: 22px;
}
#mainMenuOffcanvas a {
text-decoration: none;
color: #ffffff;
font-size: 26px;
}
#mainMenuOffcanvas li {
list-style-type: none;
text-align: center;
margin-bottom: 18px;
}
#mainMenuOffcanvas {
padding-top: var(--headerHeight);
}
.heroImg {
width: 100%;
height: 100vh;
object-fit: cover;
}
.containerTitle {
background-color: #000000;
color: #ffffff;
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
margin-bottom: 0;
font-size: 32px;
}
.services {
display: flex;
margin-left: auto;
margin-right: auto;
background-color: var(--contentColor);
}
.services p {
font-size: 28px;
margin-top: 10px;
margin-bottom: 0;
}
.servicesCard {
text-align: center;
padding-top: 40px;
padding-bottom: 40px;
}
.spaceImages {
margin-left: auto;
margin-right: auto;
background-color: var(--contentColor);
}
.servicesCard img {
width: 180px;
height: 180px;
}
.spaceImage {
width: 34vw;
height: 34vw;
object-fit: cover;
}
.spaceImages .imgRow {
margin-left: auto;
margin-right: auto;
width: fit-content;
}
.spaceImages .imgRow:nth-child(1) {
margin-bottom: 100px;
}
.spaceImages .leftImage {
margin-right: 50px;
}
.spaceImages .rightImage {
margin-left: 50px;
}
.ideasImages {
margin-left: auto;
margin-right: auto;
}
.ideasImages {
background-color: var(--contentColor);
}
.ideasImages .imgRow {
display: flex;
justify-content: space-between;
}
.ideasImages .imgRow:nth-child(1) {
margin-bottom: 100px;
}
.ideaImage {
width: 26vw;
height: 26vw;
object-fit: cover;
}
.philosophyContent {
display: flex;
margin-left: auto;
margin-right: auto;
}
.philosophyImage {
width: 100%;
height: 100%;
object-fit: cover;
}
.philosophyContainer .row {
width: 100%;
}
.philosophyText {
display: flex;
flex-direction: column;
justify-content: center;
background-color: var(--contentColor);
text-align: center;
}
.philosophyText h2 {
font-size: 32px;
margin-top: 20px;
}
.philosophyText p {
font-size: 20px;
}
.pricesList {
margin-left: auto;
margin-right: auto;
background-color: var(--contentColor);
}
.pricesList ul {
padding-left: 0;
}
.pricesList li {
list-style-type: none;
}
.twoLists {
display: flex;
width: fit-content;
margin-left: auto;
margin-right: auto;
font-size: 24px;
}
.items li {
padding-right: 60px;
}
.items li,
.prices li {
border-bottom: solid 2px black;
padding-top: 12px;
padding-bottom: 12px;
}
.callContainer {
position: relative;
background-color: #000000;
}
.callImage {
width: 100%;
height: auto;
opacity: 0.5;
}
.callText {
font-size: 35px;
margin-bottom: 0;
position: absolute;
top: 50%;
left: 50%;
color: #ffffff;
transform: translate(-50%, -50%);
}
.phoneInfo {
display: flex;
position: absolute;
top: 65%;
left: 50%;
color: #ffffff;
transform: translate(-51%, -50%);
margin-top: 8px;
}
.phoneNumber {
font-size: 30px;
font-weight: bold;
margin-bottom: 0px;
line-height: 1.2;
}
.phoneImage {
height: 60px;
width: 60px;
}
.footerContainer {
background-color: #000000;
color: #ffffff;
}
.footerLogoContainer {
display: flex;
justify-content: center;
}
.footerLogo {
margin-top: 30px;
margin-bottom: 30px;
width: 220px;
height: auto;
}
.workingHoursContainer,
.workingHours {
display: flex;
}
.clockImage {
margin-right: 20px;
height: 50px;
width: 50px;
}
.workingHoursContainer {
align-items: start;
position: relative;
}
.footerContent {
margin-left: auto;
margin-right: auto;
font-size: 22px;
}
.dayList {
padding-left: 0;
}
.dayList li {
list-style-type: none;
}
.workingHours_1,
.workingHours_2,
.workingHours_3 {
position: absolute;
left: 208px;
}
.workingHours_1 {
top: 0px;
}
.workingHours_2 {
top: 84px;
}
.workingHours_3 {
top: 166px;
}
.seperator {
position: absolute;
left: 195px;
top: 40px;
width: 2px;
background-color: #ffffff;
height: 120px;
}
.footerPhoneInfo {
display: flex;
align-items: center;
}
.footerPhoneNumber {
margin-bottom: 0;
line-height: 1.2;
font-weight: bold;
}
.footerPhoneImage {
height: 60px;
width: 60px;
margin-right: 10px;
}
.footerAddressImage {
width: 55px;
height: 60px;
margin-right: 14px;
}
.infoContainer {
margin-top: -4px;
}
.footerAddressInfo {
display: flex;
align-items: center;
}
.mapContainer p {
font-size: 22px;
}
.facebookLink {
text-decoration: none;
color: #ffffff;
}
.bottomFooter {
display: flex;
justify-content: space-between;
padding-left: 0;
padding-right: 0;
padding-top: 50px;
padding-bottom: 20px;
font-size: 16px;
}
.bottomFooter p {
margin-bottom: 0;
}
.map {
width: 100%;
height: 400px;
}@media (max-width:1600px) {
.colorHeader { }
.containerTitle {
font-size: 30px;
}
.services p {
font-size: 26px;
}
.philosophyText h2 {
font-size: 30px;
}
.philosophyText p {
font-size: 18px;
}
.twoLists {
font-size: 22px;
}
.callText {
font-size: 32px;
}
.phoneInfo {
top: 68%;
}
.phoneNumber {
font-size: 28px;
}
.footerContent {
font-size: 20px;
}
.seperator {
left: 188px;
height: 108px;
}
.workingHours_2 {
top: 60px;
}
.workingHours_3 {
top: 150px;
}
.footerPhoneImage {
margin-right: 5px;
}
.footerAddressImage {
margin-right: 10px;
}
.mapContainer h3,
.mapContainer p {
font-size: 20px;
}
} @media (max-width:1400px) {
.colorHeader { }
html {
--containerBottom: 20px;
--uniqueBottom: 100px;
}
#mainMenu a {
font-size: 21px;
}
.servicesCard img {
width: 160px;
height: 160px;
}
.servicesCard {
padding-top: 25px;
padding-bottom: 25px;
}
.spaceImages .imgRow:nth-child(1) {
margin-bottom: 60px;
}
.spaceImages .leftImage {
margin-right: 30px;
}
.spaceImages .rightImage {
margin-left: 30px;
}
.ideasImages .imgRow:nth-child(1) {
margin-bottom: 60px;
}
.philosophyText p {
font-size: 16px;
}
.philosophyText h2 {
font-size: 28px;
}
.workingHoursContainer,
.infoContainer {
border: 1px solid #ffffff;
margin-top: 0;
}
.mapContainer {
margin-top: 30px;
}
.bottomFooter {
padding-top: 15px;
padding-bottom: 15px;
}
.workingHours_2 {
top: 78px;
}
.items li,
.prices li {
padding-top: 12px;
padding-bottom: 12px;
}
}
@media (width = 1200px) {
.philosophyImage {
height: 100% !important;
}
} @media (max-width:1200px) {
.colorHeader { }
.containerTitle {
font-size: 28px;
}
.servicesCard img {
width: 130px;
height: 130px;
}
.services p {
font-size: 24px;
}
.twoLists {
font-size: 20px;
}
.callText {
font-size: 30px;
}
.phoneInfo {
top: 70%;
}
.phoneNumber {
font-size: 26px;
}
.footerContent {
font-size: 18px;
}
.workingHours_2 {
top: 60px;
}
.workingHours_3 {
top: 135px;
}
.items li,
.prices li {
padding-top: 8px;
padding-bottom: 8px;
}
.footerLogo {
margin-top: 18px;
margin-bottom: 18px;
width: 199px;
}
.seperator {
height: 103px;
top: 30px;
}
.philosophyImage {
width: 100%;
height: 450px;
object-fit: cover;
object-position: 100% 0%;
}
.philosophyText h2 {
margin-top: 10px;
margin-bottom: 0px;
}
} @media (max-width:992px) {
.colorHeader { }
html {
--headerHeight: 60px;
--gapsForNavigation: 60px;
--containerBottom: 0px;
--uniqueBottom: 60px;
}
#navLogo {
top: 10px;
}
#mainMenu a {
font-size: 19px;
}
.containerTitle {
font-size: 26px;
}
.services p {
font-size: 22px;
}
.spaceImage {
width: 40vw;
height: 40vw;
}
.spaceImages .imgRow:nth-child(1) {
margin-bottom: 40px;
}
.spaceImages .leftImage {
margin-right: 20px;
}
.spaceImages .rightImage {
margin-left: 20px;
}
.ideasImages .imgRow:nth-child(1) {
margin-bottom: 40px;
}
.ideaImage {
width: 32vw;
height: 32vw;
}
.philosophyImage {
width: 100%;
height: 400px;
}
.philosophyText h2 {
font-size: 24px;
}
.items li,
.prices li {
padding-top: 5px;
padding-bottom: 5px;
}
.callImage {
height: 250px;
object-fit: cover;
}
.callText {
font-size: 26px;
}
.phoneInfo {
top: 67%;
}
.phoneNumber {
font-size: 24px;
}
.phoneImage {
height: 50px;
width: 50px;
}
.footerLogo {
width: 179px;
}
.footerContent {
font-size: 20px;
margin-left: 20px;
margin-right: 20px;
}
.workingHoursContainer,
.infoContainer {
border: none;
}
.workingHours_2 {
top: 78px;
}
.workingHours_3 {
top: 150px;
}
.seperator {
height: 113px;
top: 34px;
}
} @media (max-width:768px) {
.colorHeader { }
#mainMenu {
display: none;
}
.sideNavBtn {
display: block;
position: fixed;
top: 5px;
right: 40px;
height: 50px;
width: 50px;
}
#mySideNav {
display: block;
}
.heroImg {
height: 600px;
}
.containerTitle {
font-size: 22px;
}
.services p {
font-size: 20px;
}
.servicesCard img {
width: 110px;
height: 110px;
}
.spaceImage {
width: 45vw;
height: 45vw;
}
.spaceImages .imgRow {
margin-left: unset;
margin-right: unset;
}
.spaceImages .leftImage {
margin-right: 0px;
}
.spaceImages .rightImage {
margin-left: 0px;
}
.spaceImage {
width: 48vw;
height: 48vw;
}
.spaceImages .imgRow:nth-child(1) {
margin-bottom: 20px;
}
.ideasImages .imgRow:nth-child(1) {
margin-bottom: 20px;
}
.spaceImages .imgRow {
display: flex;
width: 100%;
justify-content: space-between;
}
.philosophyText h2 {
font-size: 22px;
}
.twoLists {
font-size: 18px;
}
.ideaImage {
width: 33vw;
height: 40vw;
}
.bottomFooter {
display: flex;
flex-direction: column;
font-size: 14px;
}
.footerContent {
font-size: 18px;
margin-left: 20px;
margin-right: 20px;
}
.workingHours_2 {
top: 70px;
}
.workingHours_3 {
top: 136px;
}
.seperator {
height: 102px;
top: 32px;
}
.facebookLink {
margin-bottom: 10px;
}
.mapContainer h3,
.mapContainer p {
font-size: 18px;
}
} @media (max-width:576px) {
.philosophyText p {
font-size: 13px;
}
.heroImg {
object-position: 70% 100%;
}
} @media (max-width:450px) {
.colorHeader { }
#mySideNav {
width: 60vw;
left: -60vw;
}
#mainMenuOffcanvas li {
margin-bottom: 4px;
}
#mainMenuOffcanvas a {
font-size: 24px;
}
#navLogo {
left: 20px;
}
.sideNavBtn {
right: 20px;
}
#heroImg {
height: 500px;
}
.containerTitle {
font-size: 20px;
}
.servicesCard img {
width: 80px;
height: 80px;
}
.services p {
font-size: 18px;
}
.spaceImages .imgRow:nth-child(1) {
margin-bottom: 15px;
}
.ideasImages .imgRow:nth-child(1) {
margin-bottom: 10px;
}
.philosophyImage {
height: 300px;
}
.philosophyText h2 {
font-size: 20px;
}
.philosophyText {
padding-left: 15px;
padding-right: 15px;
}
.philosophyText br {
display: none;
}
.twoLists {
font-size: 16px;
}
.callImage {
height: 200px;
}
.callText {
font-size: 22px;
}
.callText {
width: 100%;
text-align: center;
}
.phoneNumber {
font-size: 20px;
}
.footerLogo {
width: 129px;
}
.footerContent {
font-size: 16px;
margin-left: 16px;
margin-right: 16px;
}
.seperator {
height: 91px;
top: 27px;
}
.workingHours_2 {
top: 49px;
}
.workingHours_3 {
top: 120px;
}
.clockImage {
width: 40px;
height: 40px;
}
.footerPhoneImage {
height: 54px;
width: 54px;
}
.footerAddressImage {
width: 48px;
height: 50px;
}
.mapContainer h3,
.mapContainer p {
font-size: 16px;
}
.mapContainer p {
margin-bottom: 8px;
}
.bottomFooter p {
font-size: 12px;
}
}