@charset "ISO-8859-1";

html {
	-ms-overflow-style: -ms-autohiding-scrollbar;
	height: 100%;
	/*overflow: hidden;*/
	scroll-behavior: smooth;
}

body {
	height: 100%;
	background-color: transparent;
}

::-webkit-scrollbar {
    display:none;
}

.transboxlandscape {
	display: none;
}

.transboxhome {
	position: absolute;
	left: 0%;
	top: 20%;
	background-color: transparent;
	text-align: center;
	width: 54%;
	height: 50%;
	overflow: hidden;
	z-index: 2;
}

.transboxhome img, .logohead {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.transboxhomephone {
	position: absolute;
	left: 0%;
	bottom: 26%;
	background-color: transparent;
	text-align: center;
	width: 54%;
	height: 8%;
	overflow: hidden;
	z-index: 2;
}

.transboxhomeinfo {
	position: absolute;
	left: 0%;
	bottom: 16%;
	background-color: transparent;
	text-align: center;
	width: 54%;
	height: 12%;
	overflow: hidden;
	z-index: 2;
}

.hamsterbounce {
    position: fixed;
    width: 2%;
    opacity: 0.3;
    bottom: 0;
    left: 1%;
    animation-name: bounce;
    animation-duration: 1s;
    animation-delay: 0s;
    -webkit-animation: bounce 1s infinite 0s;
    -moz-animation: bounce 1s infinite 0s;
    z-index: 10;
}

.transboxgallery {
	position: absolute;
	top: 3%;
	left: 4%;
	text-align: center;
	width: 94%;
	height: 88%;
	overflow: hidden;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	box-shadow: 10px 40px 60px 10px white;
	border: 0px solid black;
	background: rgba(0,0,0,0.6);
	z-index: 10;
}

.transboxconsult {
	position: absolute;
	top: 3%;
	left: 8%;
	text-align: center;
	width: 50%;
	height: 60%;
	overflow: hidden;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	box-shadow: 10px 40px 60px 10px black;
	border: 0px solid black;
	background: rgba(40, 180, 99, 0.7);
	z-index: 2;
}

.transboxwho {
	position: absolute;
	top: 3%;
	right: 5%;
	text-align: center;
	width: 65%;
	height: 90%;
	overflow: hidden;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	box-shadow: 10px 40px 60px 10px black;
	border: 0px solid black;
	background: rgba(40, 180, 99, 0.7);
	z-index: 2;
}

.transboxservices {
	position: absolute;
	top: 3%;
	left: 8%;
	text-align: center;
	width: 60%;
	height: 80%;
	overflow: hidden;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	box-shadow: 10px 40px 60px 10px black;
	border: 0px solid black;
	background: rgba(40, 180, 99, 0.7);
	z-index: 2;
}

.transboxemergency {
	position: absolute;
	top: 3%;
	right: 8%;
	text-align: center;
	width: 50%;
	height: 80%;
	overflow: hidden;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	box-shadow: 10px 40px 60px 10px black;
	border: 0px solid black;
	background: rgba(40, 180, 99, 0.7);
	z-index: 2;
}

.transboxopenings {
	position: absolute;
	top: 3%;
	left: 8%;
	text-align: center;
	width: 55%;
	height: 85%;
	overflow: hidden;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	box-shadow: 10px 40px 60px 10px black;
	border: 0px solid black;
	background: rgba(40, 180, 99, 0.7);
	z-index: 2;
}

.transboxlinks {
	position: absolute;
	top: 3%;
	right: 6%;
	text-align: center;
	width: 45%;
	height: 80%;
	overflow: hidden;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	box-shadow: 10px 40px 60px 10px black;
	border: 0px solid black;
	background: rgba(40, 180, 99, 0.7);
	z-index: 2;
}

.transboxcontact {
	-webkit-transform: none;
	position: absolute;
	top: 3%;
	left: 6%;
	text-align: center;
	width: 90%;
	height: 85%;
	overflow: hidden;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	box-shadow: 10px 40px 60px 10px black;
	border: 0px solid black;
	background: rgba(40, 180, 99, 0.7);
	z-index: 2;
}

.stickytitle {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

.framecontainerconsult, .framecontainerservices, .framecontainerwho, .framecontaineremergency, .framecontainerlinks, .framecontainercontact, .framecontainerteam {
    position: relative;
    width: 100%;
	height: 100%;
    padding-bottom: 0;
}

.framecontaineropenings {
    position: relative;
    width: 100%;
	height: 31%;
    padding-bottom: 0;
}
 
 .framecontaineropenings2 {
    position: relative;
    width: 100%;
	height: 52%;
    padding-bottom: 0;
}
 
.framecontainermap {
    position: relative;
    width: 90%;
	height: 90%;
    padding-bottom: 0;
}
  
.iframeconsult {
    position: absolute;
    top: 12%;
    left: 0;
    width: 100%;
    height: 65%;
}
 
.iframeteam {
	position: absolute;
    top: 12%;
    left: 0;
    width: 100%;
    height: 65%;
}
 
 .iframewho {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 21%;
}
 
 .iframeservices {
    position: absolute;
    top: 11%;
    left: 0;
    width: 100%;
    height: 71%;
}

.iframeemergency {
    position: absolute;
    top: 7%;
    left: 0;
    width: 100%;
    height: 75%;
}
 
 .iframelinks {
    position: absolute;
    top: 7%;
    left: 0;
    width: 100%;
    height: 77%;
}

 .iframecontact {
    position: absolute;
    top: 22%;
    left: 0;
    width: 100%;
    height: 68%;
}
 
 .iframemap {
    position: absolute;
    width: 100%;
    height: 100%;
	margin: 0;
}
 
.iframeopenings {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
}
 
 .iframeopenings2 {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
}

#sectionlandscape {
	display: none;
	background-image : url(../images/backimages/backimagehome.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right;
	background-color: rgba(232, 235, 242, 1);
	height: 102%;
}

#sectionhome {
	background-image : url(../images/backimages/backimagehome.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right;
	background-color: rgba(232, 235, 242, 1);
	height: 100%;
}

#sectiongallery {
	background-image : url(../images/backimages/backimagegallery.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right bottom;
	background-color: rgba(232, 235, 242, 1);
	height: 105%;
}

#sectionconsult {
	background-image : url(../images/backimages/backimageconsult.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right bottom;
	background-color: rgba(226, 235, 234, 1);
	height: 105%;
}

#sectionwho {
	background-image : url(../images/backimages/backimagewho.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-color: rgba(250, 250, 250, 1);
	height: 105%;
}

#sectionservices {
	background-image : url(../images/backimages/backimageservices.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom;
	background-color: rgba(159, 160, 162, 1);
	height: 105%;
}

#sectionemergency {
	background-image : url(../images/backimages/backimageemergency.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right top;
	background-color: rgba(237, 232, 228, 1);
	height: 105%;
}

#sectionopenings {
	background-image : url(../images/backimages/backimageopenings.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-color: rgba(243, 244, 246, 1);
	height: 105%;
}

#sectionlinks {
	background-image : url(../images/backimages/backimagelinks.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-color: rgba(243, 244, 246, 1);
	height: 105%;
}

#sectioncontact {
	background-image : url(../images/backimages/backimagecontact.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right bottom;
	background-color: rgba(232, 235, 242, 1);
}

.parallax {
	background-image: url(../images/backimages/parallax.png);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 30%;
	opacity: 0.3;
}

.row {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	margin-top: 10%;
}

.row2 {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	margin-top: 1%;
}

.column {
	float: left;
    width: 15.7%;
    margin-bottom: 1%;
    padding-left: 1%;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    background-color: white;
}

.card img {
	filter: grayscale(0%);
	width: 90%;
	padding-top: 5%;
}

.container {
    padding: 0 3%;
}

.container::after, .row::after, .row2::after {
    content: "";
    clear: both;
    display: table;
}

.modalmap, .modalappointment, .modalannouncement, .modalteam {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.6);
}

.modalmap-content {
	position: relative;
	background : url(../images/modals/modalmap.jpg) right bottom / cover no-repeat;
	margin: 5% auto;
	width: 100%;
	height: 80%;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;  
	border-radius: 30px;
	box-shadow: 10px 40px 60px 10px black;
	-moz-box-shadow: 10px 40px 60px 10px black;
	-webkit-box-shadow: 10px 40px 60px 10px black;
	-webkit-animation-name: animateright;
	-webkit-animation-duration: 2.0s;
	animation-name: animateright;
	animation-duration: 2.0s;
}

.modalappointment-content, .modalannouncement-content {
	position: relative;
	background-color : white;
	margin: 10% auto;
	width: 50%;
	height: 60%;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;  
	border-radius: 30px;
	box-shadow: 10px 40px 60px 10px black;
	-moz-box-shadow: 10px 40px 60px 10px black;
	-webkit-box-shadow: 10px 40px 60px 10px black;
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 1.0s;
	animation-name: animatetop;
	animation-duration: 1.0s;
}

.modalteam-content {
	position: relative;
	background-color : white;
	margin: 10% auto;
	width: 50%;
	height: 60%;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;  
	border-radius: 30px;
	box-shadow: 10px 40px 60px 10px black;
	-moz-box-shadow: 10px 40px 60px 10px black;
	-webkit-box-shadow: 10px 40px 60px 10px black;
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 1.0s;
	animation-name: animatefadein;
	animation-duration: 2.5s;
}

.closemap {
	float: right;
	margin-top: 0%;
	margin-right: 1%;
}

.closeappointment, .closeannouncement, .closeteam {
	float: right;
	margin-top: 0%;
	margin-right: 2%;
}

.closemap:hover, .closemap:focus, .closeteam:focus {
	text-decoration: none;
	cursor: pointer;
	color: #28B463;
}

.closeappointment:hover, .closeappointment:focus, .closeteam:hover, .closeteam:focus, .closeannouncement:hover, .closeannouncement:focus {
	text-decoration: none;
	cursor: pointer;
	color: red;
}

.gmap_canvas {
	overflow: hidden;
	background: none!important;
	width: 85%;
	height: 100%;
	margin-left: 4%;
	margin-top: 1%;
}

.appointmentbutton {
	position: absolute;
	font-family: "Genos", sans-serif;
	font-size: 1.2vw;
	color: white;
	border: none;
	padding: 2% 4%;
	cursor: pointer;
	background-color: red;
	bottom: 2%;
	right: 2%;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;  
	border-radius: 10px;
}

.appointmentbutton:hover {
	opacity: 0.5;
}

.footer {
	position: absolute;
	background-color: transparent;
    bottom: 0;
    width: 100%;
	z-index: 1;
}

@-webkit-keyframes animateright {
	from {right:-2000px; opacity:0} 
	to {right:0; opacity:1}
}

@keyframes animateright {
	from {right:-2000px; opacity:0}
	to {right:0; opacity:1}
}

@-webkit-keyframes animatetop {
	from {top:-1000px; opacity:0} 
	to {top:0; opacity:1}
}

@keyframes animatetop {
	from {top:-1000px; opacity:0}
	to {top:0; opacity:1}
}

@-webkit-keyframes animatefadein {
	from {opacity:0} 
	to {opacity:1}
}

@keyframes animatefadein {
	from {opacity:0}
	to {opacity:1}
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-30px); }
    60% { transform: translateY(-15px); }
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); }
    40% { -webkit-transform: translateY(-30px); }
    60% { -webkit-transform: translateY(-15px); }
}