@font-face {
    font-family: headerfont;
    src: url(fonts/Myriad-Apple-Medium/MYRIADAB.TTF);
}

@font-face {
    font-family: mainfont;
    src: url(fonts/Myriad-Apple-Medium/MYRIADAM.TTF);
}

body {
  padding-top: 70px;
  font-family: mainfont,arial,sans-serif;
}

body a {
  color: rgb(118,46,32);
}

img {
    padding-top: 10px;
    padding-bottom: 20px;
}

footer {
	text-align: center;
	font-size: 85%;
	max-width: 600px;
	margin: auto;
}

footer a {
	text-decoration: none;
	font-weight: bold;
  color: rgb(118,46,32);
}

h1, h2, h3 {
    font-family: headerfont,arial,sans-serif !important;
    color: rgb(118,46,32);
}

.logo {
  width:50%;
  min-width:300px;
  margin:0 auto;
}

.customPad {
    margin-left: 10px!important;
}

.navbar-brand {
    padding: 0;
    margin: 0;
}

.navbar-brand img {
    padding: 0;
    margin: 0;
}



.backgroundwhite {
    background-color: white;
    padding: 40px 0px !important;
}

.backgroundgrey {
    background-color: rgba(144, 143, 141,0.5);
    padding:40px 0px !important;
}

.addr-width {
    width: 260px!important;
}

.bottomPad {
    padding-bottom: 40px;
}

.clear{
    clear: both;
}

#about, #services, #contact {
    padding-top: 70px;
}


.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tab button:hover {
  background-color: #ddd;
}


.tab button.tabactive {
  background-color: #ccc;
}


.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  animation: fadeEffect 1s;
  position: relative;
}

.text-block {
  position: absolute;
  bottom: 40px;
  right:20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  opacity: 0.8;
}


@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}


.scenes {
  position: relative;
  aspect-ratio: 2.4 / 1;
  max-width: 100%;
  text-align: center;
}

.scene-1, .scene-2, .scene-3, .scene-4, .scene-5, .scene-6, .scene-7, .scene-8, .scene-9, .scene-10 {
  position: absolute;
  inset:0;
  background-size: cover;
  width: 100%;
  text-align: center;
}


 .scene-1 {
   background-image: url(../images/phys1.jpg);
 }

 .scene-2 {
   background-image: url(../images/phys2.jpg);
   -webkit-mask-image: linear-gradient(to right, transparent 47.5%, #fff 52.5%);
   -webkit-mask-size: 210%;
   -webkit-mask-position: right;
   transition: -webkit-mask-position 3s linear;
   transition-delay: 2s;
 }

 .scene-3 {
   background-image: url(../images/access1.jpg);
 }

 .scene-4 {
   background-image: url(../images/access2.jpg);
   -webkit-mask-image: linear-gradient(to right, transparent 47.5%, #fff 52.5%);
   -webkit-mask-size: 210%;
   -webkit-mask-position: right;
   transition: -webkit-mask-position 3s linear;
   transition-delay: 2s;
 }

 .scene-5 {
   background-image: url(../images/sec1.jpg);
 }

 .scene-6 {
   background-image: url(../images/sec2.jpg);
   -webkit-mask-image: linear-gradient(to right, transparent 47.5%, #fff 52.5%);
   -webkit-mask-size: 210%;
   -webkit-mask-position: right;
   transition: -webkit-mask-position 3s linear;
   transition-delay: 2s;
 }

  .scene-7 {
   background-image: url(../images/emerg1.jpg);
  }

  .scene-8 {
   background-image: url(../images/emerg2.jpg);
    -webkit-mask-image: linear-gradient(to right, transparent 47.5%, #fff 52.5%);
    -webkit-mask-size: 210%;
    -webkit-mask-position: right;
    transition: -webkit-mask-position 3s linear;
    transition-delay: 2s;
  }

  .scene-9 {
   background-image: url(../images/cons1.jpg);
  }

  .scene-10 {
   background-image: url(../images/cons2.jpg);
    -webkit-mask-image: linear-gradient(to right, transparent 47.5%, #fff 52.5%);
    -webkit-mask-size: 210%;
    -webkit-mask-position: right;
    transition: -webkit-mask-position 3s linear;
    transition-delay: 2s;
  }

.tablinks {
  width: 20%;
}