/*  Copyright 2024 HeyI / Commuto-ltd. All Rights Reserved.
This code and associated files are protected by copyright law and may not be
copied, reproduced, modified, or distributed without explicit permission
from the copyright holder. Use of this code is subject to the terms and
conditions specified in the applicable license agreement.
*/
body {
font-family: 'Courier Prime', monospace;
background-color: #d0d2d3;
margin: 0px;
cursor: ;
}
::selection {
background-color: #13367c;
color: #f1f1f2;
}
::-moz-selection {
background-color: #13367c;
color: #f1f1f2;
}
.more {
display: none;
margin-bottom: 0px;
}
.fade-out {
opacity: 0;
transition: opacity 1s;
}
img,
object {
max-width: 100%;
min-width: 100%;
-webkit-user-drag: none;
}
a {
text-decoration: none;
color: #13367c;
}
a:hover {
text-decoration: underline;
color: #000;
}
ul{
list-style-type:square;
list-style-position:inside;
padding-left: 25px;
margin-top: 0px;
}
.fade-in {
opacity: 0;
transform: translateY(140px);
transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.button {
/* Button styles */
background: #d0d2d3;
color: #13367c;
border: 1.5px solid #13367c;
font-family: 'Courier Prime', monospace;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 100px;
cursor: pointer;
}
.button:hover {
/* Hover styles */
background: #13367c;
color: #d0d2d3;
border-color: #d0d2d3; /* Add an outline by changing the border color */
}
/*   headings  */
h1 {
margin-left: 0;
margin-top: 0;
margin-bottom: 1em;
text-align: left;
color: #13367c;
letter-spacing: 0.0em;
font-size: 1.2em;
line-height: 1.1;
font-weight: 200;
background-color: #;
font-style: ;
text-transform: ;
}
/*  parags */
h2 {
margin-left: 0;
margin-top: 0;
margin-bottom: 0.5em;
text-align: left;
color: #13367c;
letter-spacing: 0.0em;
font-size: 1.0em;
line-height: 1.2em;
font-weight: 200;
background-color: #;
font-style: ;
text-transform: ;
}
/*  proj */
h3 {
margin-left: 0;
margin-top: 0.5em;
margin-bottom: 0.5em;
text-align: left;
color: #13367c;
letter-spacing: 0.0em;
font-size: 1.0em;
line-height: 1.2em;
font-weight: 200;
background-color: #;
font-style: ;
text-transform: ;
}
/*  br */
h4 {
margin-left: 0;
margin-top: 0;
margin-bottom: 0em;
text-align: right;
padding-left: 0%;
padding-right: 0%;
color: #dedcd3;
letter-spacing: 0.0em;
font-size: 1.5em;
font-weight: 100;
background-color: #;
font-style: ;
text-transform: ;
}
/*  parags */
h5 {
margin-left: 0;
margin-top: 0;
margin-bottom: 0em;
text-align: left;
color: #d0d2d3;
letter-spacing: 0.0em;
font-size: 1.0em;
line-height: 1.3em;
font-weight: 100;
background-color: #;
font-style: ;
text-transform: ;
}
/*  menu ins */
h6 {
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
text-align: center;
color: #dedcd3;
letter-spacing: 0.0em;
font-size: 2em;
line-height: 1.3em;
font-weight: 200;
background-color: #;
font-style: ;
text-transform: ;
}
/*  shop titles */
.h7{
margin-left: 0;
margin-top: 0;
margin-bottom: 0em;
text-align: left;
color: #214235;
letter-spacing: 0.0em;
font-size: 1.2em;
line-height: 1.3em;
font-weight: 200;
background-color: #;
font-style: ;
text-transform: ;
}
/*  shop titles light */
.h8{
margin-left: 0;
margin-top: 0;
margin-bottom: 0em;
text-align: left;
color: #dedcd3;
letter-spacing: 0.0em;
font-size: 1.2em;
line-height: 1.3em;
font-weight: 200;
background-color: #;
font-style: ;
text-transform: ;
}
.speech-bubble {
width: 100%;
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
margin-bottom: 8%;
float: left;
padding: 4% 4% 4% 4%;
position: relative;
background: #d0d2d3;
border-radius: 2em;
border: 1.5px solid #13367c;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 37px solid transparent;
border-top-color: #13367c;
border-bottom: 0;
border-left: 0;
margin-left: -30%;
margin-bottom: -37px;
}
.text-overlay {
position: absolute;
bottom: 3%; /* Adjust the bottom distance as needed */
left: 3%; /* Adjust the left distance as needed */
}
#main {
float: left;
width: auto;
width: 100%;
background-color: #;
opacity: 0;
transition: opacity 0.5s ease-in;
}
/* Preloader styles */
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10px; /* Adjust the height of the loading bar */
background-color: #13367c; /* Gray loading bar color */
z-index: 9999;
}
#progress-bar {
width: 15%;
height: 100%;
background-color: #f1f1f2; /* White progress bar color */
transition: width 0.3s ease-in-out;
}
#wiggle {
position: fixed;
z-index: -1;
width: 10em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#container {
width: 100%;
position: relative;
}
#full {
width: 100%;
float: left;
}
#fullend {
width: 100%;
float: left;
background-color: #c4c4c4;
}
#im1 {
width: 70%;
float: left;
margin-top: 0%;
margin-left: 10%;
margin-right: 0%;
background-color: #;
}
#im2 {
width: 50%;
float: left;
margin-top: 0%;
margin-left: 10%;
margin-right: 0%;
background-color: #;
}
#hero {
width: 95%;
float: left;
margin-top: 0%;
margin-left: 2.5%;
margin-right: 0%;
margin-bottom: 2.5%;
background-color: #;
}
#herol {
width: 46.5%;
float: left;
margin-top: 0%;
margin-left: 2.5%;
margin-right: 0%;
margin-bottom: 2.5%;
background-color: #;
}
#heror {
width: 46.5%;
float: right;
margin-top: 30%;
margin-left: 0%;
margin-right: 2.5%;
margin-bottom: 2.5%;
background-color: #;
}
#proj1 {
width: 31.5%;
float: left;
margin-top: 0%;
margin-left: 1.5%;
margin-right: 0%;
margin-bottom: 5%;
background-color: #;
}
#info1 {
width: 50%;
float: left;
margin-top: 0%;
margin-left: 10%;
margin-right: 0%;
background-color: #;
}
#infol {
width: 40%;
float: left;
margin-top: 0%;
margin-left: 10%;
margin-right: 0%;
margin-bottom: 5%;
background-color: #;
}
#tabin {
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 90vh;
left: 50%; /* Center horizontally */
transform: translateX(-50%); /* Center horizontally */
}
#bergnav {
position: fixed;
z-index: 4;
width: 100%;
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
margin-bottom: 0%;
padding-top: 0%;
background-color: #;
opacity: 1;
}
#menu {
width: 100%;
min-height: 100%;
padding-bottom: 1%;
float: right;
background-color: #;
}
#logo {
position: fixed;
z-index: 5;
width: 18em;
float: left;
margin-left: 30px;
margin-right: 0px;
margin-top: 30px;
margin-bottom: 0px;
background-color: #;
}
/* the berger menu icon */
#menuico {
width: 2.5em;
float: right;
margin-left: 0%;
margin-right: 30px;
margin-top: 30px;
margin-bottom: 0px;
background-color: #;
cursor: pointer;
}
/* full colour */
#menuin {
width: 100%;
height: 100vh;
background-color: #13367c;
}
#bl {
display: inline;
position: fixed;
bottom: 30px;
left: 30px;
width: 50%;
z-index: 5;
}
#br {
position: fixed;
bottom: 30px;
right: 30px;
width: 2.5em;
z-index: 5;
}
#box1 {
width: 90%;
height: 1px;
margin-left: 5%;
margin-right: 5%;
margin-top: 2%;
margin-bottom: 2%;
float: left;
background-color: #13367c;
}
#null {
width: 100%;
float: left;
background-color: #;
}
#gap1 {
width: 100%;
height: 1%;
float: left;
background-color: #;
}
#gap2 {
width: 100%;
height: 2%;
float: left;
background-color: #;
}
#gap3 {
width: 100%;
height: 3%;
float: left;
background-color: #;
}
#gap4 {
width: 100%;
height: 4%;
float: left;
background-color: #;
}
#gap5 {
width: 100%;
height: 7%;
float: left;
background-color: #;
}
#gappin {
width: 100%;
height: 50px;
float: left;
background-color: #;
}
#gap10 {
width: 100%;
height: 10%;
float: left;
background-color: #;
}
#gap15 {
width: 100%;
height: 15%;
float: left;
background-color: #;
}
#gap20 {
width: 100%;
height: 20%;
float: left;
background-color: #;
}
#gap25 {
width: 100%;
height: 25%;
float: left;
background-color: #;
}
#gap40 {
width: 100%;
height: 40%;
float: left;
background-color: #;
}
#gap50 {
width: 100%;
height: 50%;
float: left;
background-color: #;
}
#gap60 {
width: 100%;
height: 60%;
float: left;
background-color: #;
}
#gap100 {
width: 100%;
height: 100%;
float: left;
background-color: #;
}
#slidespot {
width: 100%;
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
margin-bottom: 0%;
background-color: #;
float: left;
}
.sss {
height: 0;
margin: 0;
padding: 0;
position: relative;
display: block;
overflow: hidden;
}
.ssslide {
width: 100%;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
display: none;
overflow: hidden;
}
.ssslide img {
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
position: relative;
display: block;
}
html {
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
}


@media screen and (max-width: 850px)
{

#logo {
position: fixed;
z-index: 5;
width: 14.5em;
float: left;
margin-left: 30px;
margin-right: 0px;
margin-top: 30px;
margin-bottom: 0px;
background-color: #;
}
/* the berger menu icon */
#menuico {
width: 1.75em;
float: right;
margin-left: 0%;
margin-right: 30px;
margin-top: 30px;
margin-bottom: 0px;
background-color: #;
cursor: pointer;
}
#proj1 {
width: 46.25%;
float: left;
margin-top: 0%;
margin-left: 2.5%;
margin-right: 0%;
margin-bottom: 5%;
background-color: #;
}


}

@media screen and (max-width: 600px)
{

#logo {
position: fixed;
z-index: 5;
width: 14.5em;
float: left;
margin-left: 30px;
margin-right: 0px;
margin-top: 30px;
margin-bottom: 0px;
background-color: #;
}
/* the berger menu icon */
#menuico {
width: 1.75em;
float: right;
margin-left: 0%;
margin-right: 30px;
margin-top: 30px;
margin-bottom: 0px;
background-color: #;
cursor: pointer;
}
#im1 {
width: 90%;
float: left;
margin-top: 0%;
margin-left: 5%;
margin-right: 5%;
background-color: #;
}
#im2 {
width: 80%;
float: left;
margin-top: 0%;
margin-left: 10%;
margin-right: 10%;
background-color: #;
}
#herol {
width: 70%;
float: left;
margin-top: 0%;
margin-left: 2.5%;
margin-right: 0%;
margin-bottom: 2.5%;
background-color: #;
}
#heror {
width: 70%;
float: right;
margin-top: 0%;
margin-left: 0%;
margin-right: 2.5%;
margin-bottom: 2.5%;
background-color: #;
}
#proj1 {
width: 95%;
float: left;
margin-top: 0%;
margin-left: 2.5%;
margin-right: 0%;
margin-bottom: 5%;
background-color: #;
}
#info1 {
width: 80%;
float: left;
margin-top: 0%;
margin-left: 10%;
margin-right: 0%;
background-color: #;
}
#infol {
width: 80%;
float: left;
margin-top: 0%;
margin-left: 10%;
margin-right: 0%;
margin-bottom: 5%;
background-color: #;
}
.speech-bubble {
width: 89%;
padding: 5% 5% 5% 5%;
}


}