/* global overrides*/

body {
    font-family: 'Raleway', sans-serif;
}

p {
    font-size: 1.25rem;
}

/* utility styles */

.bg-blue {
    background-color: #007bff;
    color: white;
}

.blue-brand {
    color: #007bff;
}

/* navbar styles*/
.navbar-brand {

    font-weight: 600;
}
.nav-link {
    font-weight: bold;
    text-transform: uppercase;
}
.navbar-brand .fa-recycle {
    color: #007bff;
}

/* headline styles */
.headline h1, h2 {
    font-weight: 900;
}


.list-group-item {
    border-style: none;
    font-size: 1.5rem;
    font-weight: 900;
}

.mr-3-2rem {
    margin-right: 3rem;
}

/* about styles */

#about {
  /* Location of the image */
  background: linear-gradient(rgba(0,123,255,.8), rgba(0,123,255,.8)), url(images/road.jpg);

  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;

  /* Background image doesn't tile */
  background-repeat: no-repeat;

  /* Background image is fixed in the viewport so that it doesn't move when
     the content's height is greater than the image's height */
  background-attachment: fixed;

  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;

  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;
}


.about h3
{
    font-weight: 600;

}
/* device styles */
.card, .card-footer {
    border: none;
    border-top: none;
}




.devices h3 {
    font-weight: 900;
}

/*returns styles */

.returns h3, .faq h3{
font-weight: 900;
}

.returns p {
    font-size: 2rem;
}

.returns a {
    color: white;
    text-decoration: underline;
}

/*faq styles*/

.card-header {
    padding: 0;
}

.returns img {

    align-self: center;

}


/* return to top styles */

#return-to-top {
z-index: 2;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {

    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}

/*footer styles */

.footer{
  background: #007bff;
    color:white;}

  .links ul {
    list-style-type: none;}
    .links li a{
      color: white;
      transition: color .2s;

    }



    .about-company a{
      color:white;
        transition: color .2s;}
    }

  .location i{
    font-size: 18px;}
  }
  .copyright p{border-top:1px solid rgba(255,255,255,.1);}

.footer a {
    color: white;
    text-decoration: underline;
}







/* mobile media queries */

@media only screen and (max-width: 600px) {
    .resp-one {
        order: 1!important
    }

    .resp-two {
        order: 12!important
    }
    .footer a {
            font-size: 1rem;
    }
  .smbx-img {
    max-width: 100%;
  }

}

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


    .card-img-top {
        padding: 0!important;
    }

}

/* desktop media queries */

@media only screen and (min-width: 600px) {
    .clp {padding-left: 10rem;}
.crp {padding-right: 10rem;}
    .navbar-brand {
        font-size: 1.75rem;
    }
   .headline h1 {
    font-size: 3.5rem;
}

}

@media only screen and (min-width: 1660px) {

    .triangle-right:after {
        content: '';
    position: absolute;

    left: 100%;
   bottom: 50%;
    width: 0;
    height: 0;

    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid #007bff;
    z-index: 1000;
}

    .triangle-left:after {
        content: '';
    position: absolute;

    right: 100%;

    width: 0;
    height: 0;

    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 30px solid #007bff;
    z-index: 1000;
}

}