/*

Perfect Group Stylesheet

Orange: #f47920
Grey: #0d0d0d
Grey 2: #606060
Text: #bebebe
Width: 1140px

*/

.bg-primary {
    background: #0d0d0d!important;
}
.bg-primary-dark {
    background: #000!important;
}


/* Layout */

body {
    background-image: url(../img/bg-main.jpg);
    background-color: #333;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    color: #bebebe;
    font-weight: 300;
}

a {
    color: #f47920;
}

a:hover, a:focus {
    color: #f47920;
}

/* Content */

.h1, h1, .h2, h2, .h3, h3 {
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    text-transform: uppercase;
    color: #f47920;
}

.h2, h2 {
    font-size: 3rem;
}

.h4, h4 {
    color: #f47920;
}

header h1 {
    font-size: 4rem;
    color: #000;
}

h3.values-title {
    border-top: 1px solid #4c4c4c;
    padding-top: 1rem;
    font-size: 1.3rem;
}

.small, small {
    font-size: 70%;
    font-style: italic;
    color: #bebebe;
    text-transform: none;
}

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


.hard-hat {
    max-width: 385px;
    position: absolute;
    top: -4.5rem;
    right: 1rem;
    z-index: 2;
}

.license-number {
    font-size: 3rem;
    font-weight: bold;
    background: -webkit-linear-gradient(#eee, #333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.txt-orange {
    color: #f47920;
}

.material-icons {
    margin: 0 0.5rem 0 0;
}

.material-icons.mi-1 { 
    font-size: 1rem; 
}

.material-icons.mi-2 { 
    font-size: 1.5rem 
}

.material-icons.mi-3 { 
    font-size: 36px; 
}

.material-icons.mi-4 { 
    font-size: 48px; 
}

.material-icons.mi-orange { 
    color: #f47920; 
}

/* Components */

.btn {
    border-radius: 0;
}

.btn-outline-primary {
    color: #7f7f7f;
    border-color: #7f7f7f;
}

.btn-outline-primary:hover {
    background: #f47920;
    border-color: #f47920;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
  -webkit-box-shadow: 0 0 0 2px rgba(127, 127, 127, 1);
          box-shadow: 0 0 0 2px rgba(127, 127, 127, 1);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #7f7f7f;
  background-color: transparent;
}

.btn:focus, .btn.focus {
  outline: 0;
  -webkit-box-shadow: 0 0 0 2px rgba(127, 127, 127, 1);
          box-shadow: 0 0 0 2px rgba(127, 127, 127, 1);
}

.btn-primary {
    color: #fff;
    background-color: #f47920;
    border-color: #f47920;
}

.btn-primary:hover {
    color: #f47920;
    background-color: #fff;
    border-color: #fff;
}

.btn-block {
    display: flex;
}

.card {
    width: 100%;
    background: #0d0d0d;
    border-radius: 0;
    padding: .5rem;
}

#certification .card-block {
    padding: .25rem 1.25rem;
}

.card-text {
    font-style: italic;
}

.card-label {
    display: flex;
    font-weight: 700;
    color: #606060;
    margin-bottom: .5rem;
    text-transform: uppercase;
}

#certification .card {
    border: 1px solid #515151;
    background: inherit;
}

#certification .card-title {
    text-transform: uppercase;
    font-size: 1.3rem;
    font-weight: bold;
    color: #8b8b8b;
}

.form-control {
    color: #464a4c;
    background-color: #191919;
    border: 1px solid #434343;
    border-radius: 0;
}

label {
    display: inline-block;
    margin-bottom: .3rem;
    text-transform: uppercase;
    color: #f47920;
    font-weight: 700;
}

form {
    margin-top: 3rem;
}

/* Utilities */

.p-5 {
    padding: 4rem;
}

@media (max-width: 768px) {

    h2, .license-number {
        font-size: 2rem!important;
        margin-top: 15px;
    }
    
    .hard-hat {
        max-width: 160px;
        /* margin-top: -4rem; */
        /* margin-bottom: -4rem; */
        position: absolute;
        top: -3.5rem;
        right: 1rem;
    }
}