/*REDOING SECTIONS OF THE WEBSITE FOR A MORE RESPONSIVE WEB DESIGN*/
/* wrapper for the website, all div sections BESIDES the logo and the top row are fitted within */
#wrapper {
  margin-left:auto;
  margin-right:auto;
  width: 80%;
  min-width: 500;
  max-width: 1360px;
  flex: 1;
}

#navWrapper {
    margin-left:auto;
    margin-right:auto;
    width: 80%;
    min-width: 500;
    max-width: 1360px;
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

/*GENERAL STUFF*/
.floatleft {
    float:left;
}
.floatright {
    float:right;
}

.clear {
    clear:both;
}

.clearright {
    clear:right;
}

.center {
    margin: auto;
    width: 50%;
}

/*h1 is only used for the page heading*/
h1 {
    border-bottom-style: solid;
    border-bottom-color: #DCDCDC;
    border-width: 2px;
    padding-bottom: 5px;
}

p {
    font-size: 14pt;
}

h3 {
    color:#B61F24;
    padding-top: 10px;
}

/*
Use ctrl F to find which section to change. If any aesthetic changes are required, they are done here.
This css file comprises the template of the website. The template consists of the top bar holding the -
1. Bar on the top row
  a. The social media section
  b. The contact information
2. Logo and Slogan
3. Navigation
4. Call to Action
#. Footer
*/


/* 1. Bar on the top row */
/* makes the top row white */
#toprow {  
    background-color: #0F1863;
    color: white;
}

#toprow li > a:hover {
    font-weight:bold;
}

/* formatting for the social media section of the website */
.social {
  height: 35px;
  width: 65px;
  float: left;
  padding-right:30px;
}

/* this unordered list is for the contact information */
.contact {
  font-family: Arial;
  font-size: 16px;
}
.contact ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.contact li {
  float: left;
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
}

.contact li a{
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
/* 2. Logo and Slogan */

/*formatting for the logo and slogan*/
#stickyNav {
}

#logo {
    background-color: #B61F24;
}
#logopic {
    width: 240px;
    height: 70px;
}

#mobileOnly {
    display: none;
}

#navLogo {

}

/*3. Navigation */
/*formatting for the navigation*/
/*making the nav bar sticky*/
.nav-sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

.nav-sticky + #wrapper {
    padding-top: 110px;
}

nav {
    background-color: #B61F24;
    color: #FFFFFF;
    font-weight: bold;
    font-family: Arial;
    font-size: 16px;
}

nav a {
    color: inherit;
}

nav a:visited {
    text-decoration: none;
    color: #FFFFFF;
}

nav a:hover {
    text-decoration: none;
    color: #FFFFFF;
}

nav li:hover {
    background-color: #850408;
}

.navbar-nav > li > .dropdown-menu {
    background-color :#B61F24;
}

.navbar-nav > li > .dropdown-menu a {
    font-weight: bold;
    font-family: Arial;
    color: #FFFFFF;
}

.navbar-nav > li > .dropdown-menu a:visited {
    color: #FFFFFF;
}

.navbar-nav > li > .dropdown-menu a:hover {
    background-color: #850408;
    color: #FFFFFF;
}

.navitems {
    padding-top: 20px;
}

#coloredBox {
    background-color: #850408;
    color: #FFFFFF;
    font-weight: bold;
    border: none;
  }

/*animation: slide in
    credit: startBootstrap*/
@media (min-width: 992px) {
    .animate {
      animation-duration: 0.3s;
      -webkit-animation-duration: 0.3s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both;
    }
  }

@keyframes slideIn {
    0% {
      transform: translateY(1rem);
      opacity: 0;
    }
    100% {
      transform:translateY(0rem);
      opacity: 1;
    }
    0% {
      transform: translateY(1rem);
      opacity: 0;
    }
  }
  
  @-webkit-keyframes slideIn {
    0% {
      -webkit-transform: transform;
      -webkit-opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      -webkit-opacity: 1;
    }
    0% {
      -webkit-transform: translateY(1rem);
      -webkit-opacity: 0;
    }
  }
  
  .slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
  }
  
/*Tabs on index showing different jobs*/
.indexTabContent {
    color: black;
    display: none;
    animation: fadeEffect 1s;
}

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

.indexTabs {
    background-color:#B61F24;
    color: white;
    border: none;
    outline: none;
    width: 100%;
    height: 30px;
    text-align: left;
    border: solid 1px;
}

.indexTabs:hover {
    background-color: #850408;
}

#defaultOpen {
   /* background-color: #850408;  */
}

#tabs {
    border-color: rgb(155, 146, 146);
}

#tabs ul {
    list-style-type: none;
    padding-left: 0;
}

/*Call to action, which is on the bottom of the website*/
/*Consult form*/
#consultForm {
    margin-top: 30px;
    margin-bottom: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #B61F24;
}

#consultForm .item {
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 10px;
    padding:15px;
    border: 1px solid #ccc;
    cursor: pointer;
    text-align: center;
    color:#B61F24;
    background: #fff;
}

#consultForm .item.action {
    padding:10px;
    border:none;
}

#consultForm .item .selectable .item-on {
    background:#dff0d8;
    color:#468847;
}

#consultForm .item .selectable .item-on *{
    color:#468847;
}

#consultForm h2 {
    text-align: center;
    margin: 0 0 20px;
    color: #fff;
}

#consultForm h3 {
    color:white;
}

#consultForm h4 {
    text-align: center;
}

#consultForm h5 {
    font-size: 20px;
}

.whichservice {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

#consult_formWHO {
    margin-left: 20px;
    margin-right: 20px;
}

#consult_formWHICH {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

#consult_form .slick-arrow { display:none!important; }

#consult_form .slick-panel { outline:none!important; }

/* #. Footer */
/*footer*/
footer{
  font-family: Arial;
  text-align: center;
  font-style: italic;
  color: white;
  padding-top: 20px;
  padding-bottom: 5px;
  background-color: #B61F24;
}

footer a {
  color: inherit;
}

footer a:hover {
    color: inherit;
}

.PTList {
    font-weight: bold;
}

/*Sitemap*/
.sitemap {
    border-top: 2px solid grey;
    border-bottom: 2px solid grey;
    background-color: #B61F24;
    color:white;
    font-family: Arial;
}

.sitemap ul {
    list-style-type: none;
}

.sitemap a {
    color:#dbdbdb;
    text-decoration: none;
}

.sitemap a:hover {
    color: white;
    font-weight: bold;
    text-decoration: none;
}

.sitemap b {
    padding: 3px;
    border-bottom: solid 2px white;
}

.sitemap footer a:hover {
    text-decoration: none;
    font-weight: normal;
    color:#dbdbdb;
}

.sitemap-icon-row {
    padding-left: 95px;
}

.sitemap-icon {
    height: 40px;
    width: 40px;
    margin-left: 10px;
    margin-right: 10px;
}

/*Contact Us*/
#contactMap {
    width: 100%;
}

#contacticons {
    float: left;
    width: 50%;
}

.sendMessage {
    background-color:#B61F24;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 20px;
    color: white;
    font-weight: bold;
    float: right;
    width: 50%;
    margin-bottom: 20px;
    margin-top: 10px;
}

.sendMessage h3 {
    color: white;
}

.sendMessage input, textarea {
    width: 95%;
}

.sendMessage input[type=button], input[type=submit] {
    color: white;
    border-color: white;
    background-color: #B61F24;
    width: 200px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.insertarea {
    padding-bottom: 15px;
}

/*Protection against spam from bots using Honeypotting*/
.sProtect {
    display: none;
}

#map {
    clear: both;
}

/*alert messages are displayed on success or failure of an event*/
.alert-success {
    display:none;
}

.alert-danger {
    display:none;
}

/*Home Page Stuff*/
.homeButton {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 120px;
  text-align: center;
}

.eastwestSlider {
    margin-top: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    width: 100%;
    height: 500px;
}

.slick-prev:before, .slick-next:before{
    color:red;
}

#eastwestPhotos {
    height: 500px;
    width: 100%;
}

/*Media queries for different screen sizes
---------------------------------------------------------------*/
@media(max-width: 600px) {
    #toprow {
        display: none;
    }
    #logo {
        height: 180px;
    }
    #logopic {
        padding-bottom: 0px;
        float: center;
        width: 100%;
        height: 120px;
    }
    #logotext {
        display: none;
    }
    #navLogo {
        display: none;
        margin: 0;
        padding: 0;
    }
    #mobileOnly {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #contacticons {
        float: none;
        width: 100%;
    }
    #contacticons h2 {
        font-size: 20px;
    }
    .sendMessage {
        float: none;
        width: 100%;
    }
    nav {
        font-size: 16px;
    }
}

@media(max-width: 665px) and (min-width: 601px) {
    #logotext {
        display: none;
    }
    #logopic {
        float: center;
    }
}

@media(max-width: 768px) {
    #toprow {
        padding-bottom: 0px;
        display: none;
    }
    .contact {
        clear: both;
        padding-top: 20px;
        padding-bottom: 10px;
    }
    #logotext{
        font-size: 16pt;
        padding-top: 25px;
    }
}

@media(max-width: 825px) and (min-width: 769px) {
    #toprow {
        padding-bottom: 0px;
        margin-bottom: -20px;
        display: none;
    }
    .contact {
        clear: both;
        padding-top: 20px;
        padding-bottom: 30px;
    }
    #logotext {
        font-size: 18pt;
        padding-top: 20px;
    }
}

@media(max-width: 992px) and (min-width: 825px) {
    #toprow {
        padding-bottom: 0px;
        margin-bottom: -20px;
        display: none;
    }
    .contact {
        clear: both;
        padding-top: 20px;
        padding-bottom: 30px;
    }
    #logotext{
        font-size: 18pt;
        padding-top: 40px;
    }
}


@media(max-width: 1199px) and (min-width: 993px) {
    #toprow {
        padding-bottom: 20px;
    }
    nav {
        top: -20px;
        width: 100%;
        position: absolute;
    }
    .contact {
        float: right;
        padding-bottom: 20px;
    }
    #logo {
        clear: right;
    }
    #logotext {
        padding-top: 35px;
    }

}

@media(min-width: 1200px) {
     .contact {
        float: right;
    }
}