/* CUSTOMIZE THE CAROUSEL
  -------------------------------------------------- */
  @import url('https://fonts.googleapis.com/css?family=Arvo|Ubuntu|Nunito|Noto+Sans|Lato|Open+Sans|Oswald|Raleway|Roboto');

  .carousel 
  {
    position: relative;
    /*margin-bottom: 5rem;*/
  }/*space between this item and following item*/
  
  
  .carousel-caption 
  {
    
    bottom: 10rem;
    z-index: 10;
  }

  /*Slide text size for the diffrent images
  the text size for small screen is set in 
  Style1.css page*/
  
  .slideP1
  {
    position: relative;
    display: inline-black;
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
    color: #ff9800;
    font-weight: 100;
    font-size: 88px; 
    font-family: 'Lato';
  }
  
  .slideP2
  {
    position: relative;
    display: inline-black;
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
    color: rgb(36, 33, 33);
    font-weight: 100;
    font-size: 31px;
   font-family: 'Ubuntu';
   /*Arvo|Ubuntu|Nunito|Noto*/
  }

.slideP1 > span {
    font-weight: 500;
}


    .slideP1 > span, .slideP2 > span {
        /* background-color: #252424bf;*/
        padding: 5px 10px;
    }




.carousel-item > .container >
#textBlack p, #textBlack h1 {
    color: black;
}

  .carousel-indicators
{
  bottom:3rem;
}



.carousel-control-next-icon:after
{
    /*content: '>';
    font-size: 50px;*/
        color: rgb(230, 154, 4);
    }

.carousel-control-prev-icon:after 
{
   /* content: '<';
    font-size: 50px;*/
    color: rgb(230, 154, 4);
}

.full-screen 
{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.carousel .carousel-item {
  -webkit-transition: .9s ease-in-out opacity;
  -moz-transition: .9s ease-in-out opacity;
  -ms-transition: .9s ease-in-out opacity;
  -o-transition: .9s ease-in-out opacity;
  transition: .9s ease-in-out opacity;
  left: 0 !important;
  }
  
  .carousel .active.left, .carousel .active.right 
  {
  opacity: 0;
  z-index: 1;
  }

.imageOverSc 
{
  position: fixed;
  z-index: -1;
  
}

#article1
{
   position: relative;
  
}

.aboutSection
{
  position: relative;
}


.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
}

.carousel-indicators .active {
    width: 40px;
    height: 10px;
    margin: 0.5px;
    background-color:  rgba(255, 255, 255, 0.774);
    border: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.856); 
    border-radius: 1px;
}
.carousel-indicators li {
    width: 40px;
    height: 11px;
    margin: 0.5px;
    background-color:rgba(255, 255, 255, 0.438);
    border-style: none;
    border-width: none;
    border-color: rgb(10, 73, 145); 
    border-radius: 1px;
    -webkit-transform: skew(0deg, 0deg);
    -moz-transform: skew(0deg, 0deg);
    -ms-transform: skew(0deg, 0deg);
    -o-transform: skew(0deg, 0deg);
    transform: skew(0deg, 0deg);
} 



/*fading the slide show
.carousel-inner > .carousel-item {
  backface-visibility: visible;
  perspective: 1000px;
  transition: opacity 0.8s ease-in-out 0s;
}
.carousel-inner > .carousel-item.active.right, .carousel-inner > .carousel-item.next {
  left: 0;
-webkit-transition: opacity 0.7s ease-in-out;
-moz-transition: opacity 0.7s ease-in-out;
-ms-transition: opacity 0.7s ease-in-out;
-o-transition: opacity 0.7s ease-in-out;
transition: opacity 0.7s ease-in-out;
opacity:0;
}
.carousel-inner > .carousel-item.active.left, .carousel-inner > .carousel-item.prev {
  left: 0;
-webkit-transition: opacity 0.7s ease-in-out;
-moz-transition: opacity 0.7s ease-in-out;
-ms-transition: opacity 0.7s ease-in-out;
-o-transition: opacity 0.7s ease-in-out;
transition: opacity 0.7s ease-in-out;
opacity:0;
}
.carousel-inner > .carousel-item.active, .carousel-inner > .carousel-item.next.left, .carousel-inner > .carousel-item.prev.right {
  left: 0;
  opacity:1;
}*/


  
  /* MARKETING CONTENT
  -------------------------------------------------- */
  
  /* Center align the text within the three columns below the carousel */
  .marketing .col-lg-4 
  {
    margin-bottom: 1.5rem;
    text-align: center;
  }
  .marketing h2 
  {
    font-weight: 400;
  }
  .marketing .col-lg-4 p 
  {
    margin-right: .75rem;
    margin-left: .75rem;
  }
  
  
  /* Featurettes
  ------------------------- */
  
  .featurette-divider 
  {
    margin: 5rem 0; /* Space out the Bootstrap <hr> more */
  }
  
  /* Thin out the marketing headings */
  .featurette-heading 
  {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.05rem;
  }
  

  
/*------------------------------------------------------*/
/* RESPONSIVE
/*------------------------------------------------------*/

@media (max-width: 1400px) {
  .slideP1{font-size: 60px; }
  .slideP2{font-size: 22px}
}



@media (max-width: 991px) {
  .carousel-caption h1 {
      font-size: 40px;
      line-height: 50px;
      margin-bottom: 20px;
  }
  
  .slideP1{font-size: 60px; }
  .slideP2{font-size: 22px}
}

/*---------- MEDIA 480px ----------*/
@media  (max-width: 768px) {
    .carousel-caption {
        /*padding: 10px 50px;*/
        left: 3%;
        right: 3%;
    }
  .carousel-caption h1 {
      font-size: 30px;
      line-height: 40px;
      margin-bottom: 10px;
  }
  .slideP1{font-size: 38px; }
  .slideP2{font-size: 19px}
 
}
@media  (max-width: 480px) {
  .header
{
  margin-bottom: 1px;
}

.navbar-brand #compLogo
{
  /*visibility: hidden;*/
  
}

  .carousel-caption {
     /* padding: 10px 30px;*/
     left: 3%;
     right: 3%;
  }
  .carousel-caption h1 {
      font-size: 20px;
      line-height: 25px;
      margin-bottom: 5px;
  }
  .slideP1{font-size: 29px;}
  .slideP2{font-size: 17px}
  
}

  @media (min-width: 62em) 
  {
    .featurette-heading 
    {
      margin-top: 7rem;
    }
  }