426 lines
9.7 KiB
CSS
426 lines
9.7 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
|
|
@import url('https://fonts.googleapis.com/css?family=Comfortaa:400,700,300');
|
|
|
|
/*search*/
|
|
|
|
|
|
p {
|
|
font-size: x-large;
|
|
}
|
|
|
|
label {
|
|
display: none;
|
|
}
|
|
|
|
.btn {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
border: 0;
|
|
color: #000000;
|
|
/* width: 98%; */
|
|
font-weight: bold;
|
|
border-radius: 20px;
|
|
min-height: 50px;
|
|
transition: all 0.2s ease;
|
|
padding: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.menubtn {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
border: 0;
|
|
color: #000000;
|
|
/* width: 98%; */
|
|
font-weight: bold;
|
|
border-radius: 20px;
|
|
height: 40px;
|
|
transition: all 0.2s ease;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
}
|
|
|
|
.btn:active {
|
|
background: rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
.btn:hover {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
img {
|
|
border-radius: 20px !important;
|
|
}
|
|
|
|
|
|
input.search_bar{
|
|
border: none;
|
|
outline: none;
|
|
width: 75px;
|
|
border-radius: 55px;
|
|
margin: 0 auto;
|
|
font-size: 1.3em;
|
|
color: #0d2840;
|
|
padding: 15px 30px 15px 45px;
|
|
transition: all .3s cubic-bezier(0,0,.5,1.5);
|
|
box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
|
|
background: rgba(255, 255, 255, 0.3) url(https://i.imgur.com/seveWIw.png) no-repeat center center;
|
|
}
|
|
|
|
input.search_bar:focus{
|
|
width: 100%;
|
|
background-position: calc(100% - 35px) center
|
|
}
|
|
|
|
/*Removes default x in search fields (webkit only i guess)*/
|
|
input[type=search]::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
/*Changes the color of the placeholder*/
|
|
::-webkit-input-placeholder {
|
|
color: #0d2840;
|
|
opacity: .5;
|
|
}
|
|
|
|
:-moz-placeholder {
|
|
color: #0d2840;
|
|
opacity: .5;
|
|
}
|
|
|
|
::-moz-placeholder {
|
|
color: #0d2840;
|
|
opacity: .5;
|
|
}
|
|
|
|
:-ms-input-placeholder {
|
|
color: #0d2840;
|
|
opacity: .5;
|
|
}
|
|
|
|
/*search*/
|
|
|
|
/*Search2*/
|
|
.searchBox {
|
|
width: 60px;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
height: 60px;
|
|
border-radius: 40px;
|
|
padding: 10px;
|
|
margin: 0 auto;
|
|
transition: 0.8s;
|
|
}
|
|
|
|
.searchInput:active > .searchBox{
|
|
width:100%
|
|
}
|
|
.searchInput:focus > .searchBox {
|
|
width: 100%
|
|
}
|
|
|
|
.searchBox:hover {
|
|
width: 100%;
|
|
}
|
|
|
|
.searchBox:hover > .searchInput {
|
|
width: calc(100% - 60px);
|
|
padding: 0 6px;
|
|
}
|
|
|
|
.searchBox:hover > .searchButton {
|
|
background: white;
|
|
color: #2f3640;
|
|
}
|
|
|
|
.searchButton {
|
|
color: white;
|
|
float: right;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background-color: #e493d0;
|
|
background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)), radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0));
|
|
background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax;
|
|
background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax;
|
|
background-repeat: no-repeat;
|
|
animation: 10s movement linear infinite;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.searchInput {
|
|
border: none;
|
|
background: none;
|
|
outline: none;
|
|
font-size: 1.3em !important;
|
|
color: #0d2840 !important;
|
|
float: left;
|
|
padding: 0;
|
|
color: white;
|
|
font-size: 16px;
|
|
transition: 0.4s;
|
|
line-height: 40px;
|
|
width: 0px;
|
|
}
|
|
|
|
/*Search2*/
|
|
|
|
|
|
.event {
|
|
border-radius: 20px !important;
|
|
background-color: rgba(255, 255, 255, 0.2) !important;
|
|
backdrop-filter: blur(20px);
|
|
border: 0;
|
|
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.07);
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
/*card design*/
|
|
.card {
|
|
border-radius: 20px !important;
|
|
overflow: hidden;
|
|
color:#fff;
|
|
background-color: rgba(255, 255, 255, 0.2) !important;
|
|
backdrop-filter: blur(20px);
|
|
border: 0;
|
|
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.07);
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1), 0 10px 8px rgba(0, 0, 0, 0.015);
|
|
}
|
|
|
|
.card-body .card-title {
|
|
font-family: 'Lato', sans-serif;
|
|
font-weight: 700;
|
|
letter-spacing: 0.3px;
|
|
font-size: 24px;
|
|
color: #fff;
|
|
}
|
|
|
|
.card-text {
|
|
font-family: 'Lato', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 15px;
|
|
letter-spacing: 0.3px;
|
|
color: #fff;
|
|
}
|
|
|
|
.card .container {
|
|
width: 88%;
|
|
/*background: #F0EEF8;*/
|
|
border-radius: 30px;
|
|
/*height: 140px;*/
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.container:hover > img {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.container img {
|
|
/*padding: 75px;*/
|
|
/*margin-top: -40px;
|
|
margin-bottom: -40px;*/
|
|
transition: 0.4s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*card design*/
|
|
|
|
/*bg*/
|
|
|
|
|
|
:root {
|
|
font-size: 15px;
|
|
}
|
|
|
|
body {
|
|
/*font-family: 'Comfortaa', 'Arial Narrow', Arial, sans-serif;*/
|
|
/*font-family: 'Quicksand', sans-serif;*/
|
|
color: #fff !important;
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background-color: #000;
|
|
/*background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)), radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0));*/
|
|
/*background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax;*/
|
|
/*background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax;*/
|
|
background-repeat: no-repeat;
|
|
/*animation: 10s movement linear infinite;*/
|
|
}
|
|
|
|
body::after {
|
|
content: '';
|
|
display: block;
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.myspan {
|
|
position: relative;
|
|
z-index: 10;
|
|
display: flex;
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 5rem;
|
|
color: transparent;
|
|
text-shadow: 0px 0px 1px rgba(255, 255, 255, .6), 0px 4px 4px rgba(0, 0, 0, .05);
|
|
letter-spacing: .2rem;
|
|
}
|
|
|
|
/*@keyframes movement {
|
|
0%, 100% {
|
|
background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax;
|
|
background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax;
|
|
}
|
|
|
|
25% {
|
|
background-size: 100vmax 100vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 60vmax 60vmax;
|
|
background-position: -60vmax -90vmax, 50vmax -40vmax, 0vmax -20vmax, -40vmax -20vmax, 40vmax 60vmax;
|
|
}
|
|
|
|
50% {
|
|
background-size: 80vmax 80vmax, 110vmax 110vmax, 80vmax 80vmax, 60vmax 60vmax, 80vmax 80vmax;
|
|
background-position: -50vmax -70vmax, 40vmax -30vmax, 10vmax 0vmax, 20vmax 10vmax, 30vmax 70vmax;
|
|
}
|
|
|
|
75% {
|
|
background-size: 90vmax 90vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 70vmax 70vmax;
|
|
background-position: -50vmax -40vmax, 50vmax -30vmax, 20vmax 0vmax, -10vmax 10vmax, 40vmax 60vmax;
|
|
}
|
|
}*/
|
|
|
|
|
|
/*bg*/
|
|
|
|
.mytextarea {
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
backdrop-filter: blur(20px);
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
border-width: 0px;
|
|
}
|
|
|
|
.mytextarea:active {
|
|
border-width: 0px;
|
|
}
|
|
|
|
.mytextarea:focus-visible {
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
border-width: 0px !important;
|
|
outline: -webkit-focus-ring-color auto 0px;
|
|
outline-color: transparent;
|
|
}
|
|
|
|
.navbar-toggler-icon {
|
|
/*background-image: var(--bs-navbar-toggler-icon-bg);*/
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e;");
|
|
z-index: 10;
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-size: 1.7rem;
|
|
color:#fff;
|
|
}
|
|
|
|
.navbar-brand:hover
|
|
{
|
|
font-size: 1.8rem;
|
|
color: antiquewhite;
|
|
}
|
|
|
|
.form-select {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
color:#fff;
|
|
border-radius: 55px;
|
|
}
|
|
|
|
.form-select > option {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
color: #fff;
|
|
}
|
|
|
|
.contactform-overlay {
|
|
position: fixed;
|
|
z-index: 100;
|
|
height: 100vh;
|
|
width: 100%;
|
|
padding: 100px;
|
|
top: 0px;
|
|
left: 0px;
|
|
/* padding-top: 10vh; */
|
|
backdrop-filter: blur(20px);
|
|
/* background-color: rgba(1, 1, 1, .4); */
|
|
}
|
|
|
|
.form-control {
|
|
background-color: rgba(255,255,255,0.4);
|
|
border-radius: 55px;
|
|
height: 50px;
|
|
}
|
|
|
|
.contactform-close-overlay {
|
|
position: relative;
|
|
height: 10vh;
|
|
}
|
|
|
|
.contactform-popup-content {
|
|
height: 80vh;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.contactform-popup-close {
|
|
position: relative;
|
|
height: 10vh;
|
|
z-index: 80;
|
|
}
|
|
|
|
.calendly-overlay {
|
|
position: absolute;
|
|
z-index: 100;
|
|
height: 100vh;
|
|
width: 100%;
|
|
top: 0px;
|
|
/* padding-top: 10vh; */
|
|
backdrop-filter: blur(20px);
|
|
/* background-color: rgba(1, 1, 1, .4); */
|
|
}
|
|
|
|
.calendly-close-overlay {
|
|
position: relative;
|
|
height: 10vh;
|
|
}
|
|
|
|
.calendly-popup-content {
|
|
height: 80vh;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.calendly-popup-close {
|
|
position: relative;
|
|
height: 10vh;
|
|
z-index: 80;
|
|
}
|
|
|
|
#myVideo {
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.table {
|
|
color: #fff !important;
|
|
}
|