/* oit.css */

@font-face {
    font-family:"OpenSans";
    src:url("../fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf") format("truetype");
}

@font-face {
    font-family:"Roboto";
    src:url("../fonts/Roboto/Roboto-Regular.ttf") format("truetype");
}

@font-face {
    font-family:"RobotoThin";
    src:url("../fonts/Roboto/Roboto-Thin.ttf") format("truetype");
}

@font-face {
    font-family:"RobotoLight";
    src:url("../fonts/Roboto/Roboto-Light.ttf") format("truetype");
}

@font-face {
    font-family:"RobotoBlack";
    src:url("../fonts/Roboto/Roboto-Black.ttf") format("truetype");
}

@font-face {
    font-family:"Poppins";
    src:url("../fonts/Poppins/Poppins-Regular.ttf") format("truetype");
}

@font-face {
    font-family:"Poppins";
    font-weight:bold;
    src:url("../fonts/Poppins/Poppins-SemiBold.ttf") format("truetype");
}


body { 
  background:#F9F8F6;
  xbackground:var(--bs-light);
}

nav {
   xborder-bottom:1px solid #fff;
   xbox-shadow:0 0 20px 0 rgba(0,0,0,0.05);
   background:rgba(255,255,255,0.8);
}

nav .navbar-nav a {
  font-family:"OpenSans";
  font-weight:400;
  letter-spacing:0.04em; 
  font-size:0.9em;
  margin:0 1em;
  line-height:1rem;
}

.navbar-nav .nav-link.active
{
   border-bottom:2px solid var(--bs-orange);
}

.content {
   min-height:100vh;
}

.sp_home_banner {
  width:100%;
  height:500px;
  position:relative;
  overflow:hidden;
}

.home_banner {
   xmargin-top:-30%;
   width:100%;
   xtransition:margin 1s;
   position:relative;
}

.sp_title 
{
   position:absolute;
   top:50%;
   left:10%;
   font-family:"OpenSans";
   font-weight:100;
   color:#fff;
   font-size:4.2358em;
   line-height:1.3;
   letter-spacing:2px;
}

.sp_title .sp_char
{
   position:relative;
   display:inline-block;
   opacity:0;
   top:-100px;
}

.sp_title.started .sp_char
{
    opacity:1;
    top:0px;
    transition:all 2s ease-out 0.1s;  
}

.sp_title.ended .sp_char
{
    top:100px;
    transition:all 1s ease-out;
}

.sp_title .sp_char .sp_char2
{
   position:absolute;
   left:0px;
}


.photo_attribute 
{
   position:absolute;
   right:10px;
   bottom:10px;
   font-size:0.8em;
   color:#000;
   font-weight:300;
}

.photo_attribute a { color:#000; }

.sp_col_title
{
   text-align:center;
   font-weight:600;
}


.footer 
{
   min-height:10em;
   background:#388CD5;
   padding:2em 10%;
   color:#fff;
   box-sizing:border-box;
   width:100%;
}

.footer_section
{
   font-family:"OpenSans";
   font-weight:300;
   font-size:0.9em;
   line-height:1.7em;
   border-right:1px solid #ffffff88;
   padding:0 2em;
}

quote {
   font-size:1.3em;
   display:block;
   margin-bottom:10px;
   font-family:"Poppins";
   font-weight:300;
}

.footer_section a { color:#fff; text-decoration:none; }

.footer_section:last-child
{
   border-right:0px;
}

.section { 
   position:relative; 
   xheight:450px;
   overflow:hidden;
}

.section .inner_section
{
   position:absolute;
   top:0;
   padding:1em;
   background:rgba(255,255,255,0.9);
}

.section .inner_section li
{
   font-size:0.9em;
   line-height:2em;
}

.section 
.photo_credit {
   opacity:0.5;
   position:absolute;
   bottom:5px;
   right:5px;
   font-size:0.7em;
   color:#fff;
}

.box_image {
   position:relative;
}

.box_image img {
   width:100%;
}

.box_image .box_text
{
}

.box_image .photo_credit {
   position:absolute;
   bottom:5px;
   right:5px;
   font-size:0.7em;
   color:#fff;
   opacity:0.5;
}

.box_image .img_title
{
   font-family:"Opensans";
   font-weight:700;
   font-size:2em;
   position:absolute;
   bottom:20%;
   right:5%;
   color:#fff;
   box-shadow:0 0 10px 0 rgba(0,0,0.0.8);
}

.box_image .photo_credit a,
.section .photo_credit a { text-decoration:none;color:#fff; }

.section h3 { vertical-align:middle; }

.section .btn_language 
{
   float:right;
   text-decoration:none;
   font-size:8px;
   vertical-align:middle;
   background:rgba(255,10,10,0.8);
   color:#fff;
   padding:3px;
   border-radius:2px;
}

.section .sp_ch { display:none; }

/* contact */

#form_contact
{
   padding-right:2em;
}

#form_contact .sp_fname
{
   font-size:0.9em;
   margin:3px 0px;
}

#form_contact input[type="text"],
#form_contact input[type="email"],
#form_contact textarea
{
   width:100%;
   border:1px solid #ccc;
   border-radius:5px;
   padding:5px;
   font-size:0.9em;
}

#form_contact textarea
{
   height:100px;
   margin:3px 0px;
}

.col_contact_address
{
   background:url(../images/office.JPG);
   background-size:cover;
   background-repeat:no-repeat;
   background-position:right;
   min-height:500px;
}

.sp_address {

   font-weight:300;
   font-size:0.9em;
   line-height:2.0em;
   margin:2em 1em;
   background:rgba(0,0,0,0.8);
   color:#fff;
   width:fit-content;
   padding:1.5em;
   background: rgb(2,0,36);
   background: radial-gradient(circle, rgba(2,0,36,0.6980238970588235) 23%, rgba(0,0,0,0.7980238970588236) 73%);
}

.sp_address a {
   text-decoration:none;
   color:#fff;
}

.services .section2
{
   font-size:0.9em;
   line-height:1.8em;
   margin-bottom:2em;
}

.services .div_img img
{
   max-width:200px;
   max-height:160px;
   margin:10px;
   padding:1em;
}

.align-right,
.right-align
{
   text-align:right;
}

#form_contact input[type="button"]
{
   border:1px solid #ccc;
   background:#ddd;
   min-width:100px; 
   font-size:0.9em;
   padding:5px 10px;
   border-radius:5px;
   margin:10px 10px;
}

@media (max-width: 1145px) {

  .footer { padding:2em 5%; }
  .footer_section { padding:0em 1em; }
}  

@media (max-width: 830px) {

    .section .inner_section {
       position:relative;
    }
}

@media (max-width: 430px) {

  .home_banner {
     height:100%;
     width:auto;
  }

  .section .photo_credit,
  .box_image .photo_credit {
      display:none;
  }
}

/* end of file */
