/*
info

gold = 245, 192, 86
light blue = 36,180, 214
dark blue = 16, 18, 58

font = olympian lt std roman
OCR B Std
*/

@font-face {
    font-family: headerfont;
    src: url(fonts/arial-mt-condensed-extra-bold.ttf);
}


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

body a {
  color: rgb(21, 9, 88);
}

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(21, 9, 88);
}

h1, h2, h3 {
    font-family: headerfont,arial,sans-serif !important;
    color: rgb(16, 18, 58);
    /* font-size: 15%; */
}

.latinfont {
  font-family: "Times New Roman",serif !important;
}

.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;
}

.backgroundblue {
    background-color: rgba(36,180,214,0.5);
    padding:40px 0px !important;
}

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

.bottomPad {
    padding-bottom: 40px;
}

.clear{
    clear: both;
}

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


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

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an tabactive/current tablink class */
.tab button.tabactive {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
  position: relative; /* for text */
}

.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;
}

.row {
  display: flex;
}

.column {
  flex: 50%;
  padding: 10px;
}

/* Go from zero to full opacity */
@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/doc.jpg);
 }

 .scene-2 {
   background-image: url(../images/web.jpg);
 }

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

 .scene-4 {
   background-image: url(../images/mult.jpg);
 }

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

 .scene-6 {
   background-image: url(../images/tech.jpg);
 }

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

 .scene-8 {
   background-image: url(../images/inter.jpg);
 }

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

 .scene-10 {
   background-image: url(../images/aud.jpg);
 }


.tablinks {
  width: 20%;
}

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

  .tablinks {
    width: 50%;
  }

}