/* ------------------

CENTURIO STYLES

dev: Markus Ullrich, m.ullrich@welcome-ag.de
v1: 12|03|2025

-------------------- */



/* --- GLOBALS --- */
body{background: url(../../../../storage/app/media/Background/centurio-bg.jpg);background-size: cover;background-repeat:no-repeat;background-position: 50% 0%;font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  }

h1, h2, h3, h4, h5, h6, p{color:#fff;}
a{color:#fff;text-decoration: none;}
a:hover{color:#c4be00;}

h1{font-size:clamp(2.5rem, 0.6vw + 1rem, 2.75rem);}
h3{font-size:clamp(1.125rem, 0.4vw + 0.975rem, 1.375rem);}
p{font-size:clamp(.9rem, 0.2vw + 0.675rem, 1.175rem);}
strong{font-weight:700;}

/* --- GLOBALS END --- */

.navbar{padding:1.5em 0;}
.navbar-brand{margin-left:auto;margin-right:auto;max-width:200px;text-align: center;margin-top:-50px;padding: 2em 1em 1em 1em;position:relative;min-width: 250px;border-bottom-left-radius:9%;border-bottom-right-radius:9%;}
.navbar-brand img{height:130px;}

/* --- TYPO --- */

h1{font-size:3em;color:#fff;text-transform: uppercase;font-weight: 100;}
.app-content{position:relative;max-width:1320px;margin-left:auto;margin-right:auto;}
.addr{height:100%;display:flex;position: absolute;top:30%;}
.mail{position:absolute;width:300px;right:12%;display:flex;bottom:100px;text-align:right;}
.blue-line{height:2px;width:100%;background-color:#c4be00;position:absolute;bottom:80px;max-width:1320px;}
.mail p{padding:1em 0 0 .5em;font-size:1.5em;}
.mail img{transform: scale(.5);}


/* --- PONTS ON EARTH --- */

.earth{width:100vw;height:auto;display:flex;justify-content: center;align-items: center;}
.earth img{width:50%;height:auto;margin-top:5vh;max-width:500px;}

.dot1{position: absolute;top:40%;left:45%;}
.dot2{position: absolute;top:42%;left:55%;}
.dot3{position: absolute;top:37%;left:30%;}
.point {
  top: 4px;
  margin-right: 0.5em;
  position: relative;
  box-sizing: content-box;
  cursor: pointer;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c4be00;
  transition: all 0.25s ease;
}
.point:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  border: 1px solid #c4be00;
  opacity: 0;
  animation: ripple 900ms ease-out infinite;
}
.point:hover {
  transform: scale(1.5);
}
.point:hover:after {
  animation: none;
}
@keyframes ripple {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.75);
    opacity: 1;
  }
  90% {
    transform: scale(1.9);
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* PEOPLE */

.people-cont{display:flex;width:100%;flex-flow: row wrap;}
.people-item{margin:15px;max-width:16%;}
.people-item img{max-width:100%;}
.people-contact{padding-top:1em;}
.people-contact h3{font-size:clamp(1rem, 0.2vw + 0.975rem, 1.2rem);}

@media (max-width:600px){
    body{background: url(../../../../storage/app/media/Background/centurio-bg-mobile.jpg);background-size: cover;background-repeat:no-repeat;background-position: 50% 0%;font-family: "Montserrat", sans-serif;
 
  }

    .mobile-not{display:none;}

    .navbar-brand{margin-left:auto;margin-right:auto;max-width:150px;text-align: center;margin-top:-50px;padding: 2em 1em 1em 1em;position:relative;min-width: 250px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;}
    .navbar-brand img{height:80px;}

    .earth{width:100vw;height:100vh;display:flex;justify-content: center;align-items: center;}
    .earth img{width:70%;height:auto;margin-top:-42vh;max-width:600px;}

    .dot1{position: absolute;top:36%;left:45%;}
    .dot2{position: absolute;top:38%;left:55%;}
    .dot3{position: absolute;top:32%;left:30%;}

    h1{position:absolute;font-size:1.8em;color:#fff;text-transform: uppercase;font-weight: 100;top:20px;}
    .app-content{position:relative;max-width:1320px;height:80vh;margin-left:auto;margin-right:auto;}
    .addr{height:auto;display:flex;align-items: left;position: absolute;top:0%;}
    .addr p{font-size: .8em;padding-right:1em;}
    .left{top:52%;}
    .right{top:66%;}

    .mail{position:relative;width:100%;bottom:260px;}
    .blue-line{height:1px;width:75vw;background-color:#c4be00;position:absolute;bottom:80px;max-width:1320px;}
    .mail p{padding:2.5em 0 0 2.2em;font-size:1em;}
    .mail img{transform: scale(.2);display:none;}

    /* PEOPLE */

.people-cont{display:flex;width:100%;}
.people-item{margin:25px;width:100%;}
.people-item img{max-width:100%;}
.people-contact{padding-top:1em;}
.people-contact h3{font-size:clamp(1rem, 0.2vw + 0.975rem, 1.2rem);}
}

@media screen and (min-width: 320px) and (max-width: 830px) and (orientation: landscape) {
	/* html {
		background-color: #000;
	}

	html:before {
		content: "Please turn your phone to portrait mode!";
		color: #c4be00;
		display: flex;
		align-content: center;
		align-items: center;
		font-size: 2em;
		text-align: center;
		padding-top: 15%;
	}

	body {
		display: none;
	} */

     .mobile-not{display:none;}

    .navbar-brand{margin-left:auto;margin-right:auto;max-width:150px;text-align: center;margin-top:-50px;padding: 2em 1em 1em 1em;position:relative;min-width: 250px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;}
    .navbar-brand img{height:80px;}

    .earth{width:100vw;height:100vh;display:flex;justify-content: center;align-items: center;}
    .earth img{width:70%;height:auto;margin-top:-42vh;max-width:600px;}

    .dot1{position: absolute;top:36%;left:45%;}
    .dot2{position: absolute;top:38%;left:55%;}
    .dot3{position: absolute;top:32%;left:30%;}

    h1{position:absolute;font-size:1.8em;color:#fff;text-transform: uppercase;font-weight: 100;top:20px;}
    .app-content{position:relative;max-width:1320px;height:80vh;margin-left:auto;margin-right:auto;}
    .addr{height:auto;display:flex;align-items: left;position: absolute;top:0%;}
    .addr p{font-size: .8em;padding-right:1em;}
    .left{top:52%;}
    .right{top:66%;}

    .mail{position:relative;width:100%;bottom:260px;}
    .blue-line{height:1px;width:75vw;background-color:#c4be00;position:absolute;bottom:80px;max-width:1320px;}
    .mail p{padding:2.5em 0 0 2.2em;font-size:1em;}
    .mail img{transform: scale(.2);display:none;}
}