/* fonts */

@import url('https://fonts.googleapis.com/css2?family=Petrona:wght@300;600&display=swap');

/*css code > font-family: 'Petrona', serif;*/

/*!
 * Start Bootstrap - Modern Business HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Global Styles */

html,
body {
    height: 100%;
}



body {
    padding-top: 0px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */

    font-family: 'Petrona', serif;
    color: #3a3a3a;

    /*https://www.magicpattern.design/tools/css-backgrounds*/
    background-color: #eeeeef;
    opacity: 1;
    background-image:  radial-gradient(#ffffff 1.1px, transparent 1.1px), radial-gradient(#DEDEDE 1.1px, #eeeeef 1.1px);
    background-size: 44px 44px;
    background-position: 0 0,22px 22px;

}



/*---*/




bold {
    color: #1339b7;
}


/* unvisited link */
a:link {
    color: #ed0000;
}

/* visited link */
a:visited {
    color: #ed0000;
}

/* mouse over link */
a:hover {
    color: #FF2428;
}

/* selected link */
a:active {
    color: #ed0000;
}



/* margin bottom */

.mb1 {
    margin-bottom:1em
}
.mb2 {
    margin-bottom:2em
}
.mb3 {
    margin-bottom:3em
}
.mb4 {
    margin-bottom:4em
}


/* ZOOM on hover */

.zoom{
    transition: transform .5s;
}
.zoom:hover{
    transform:scale(1.1);
}


/* fade-in to slider images */

.fade-in {
    animation: fade-in 1s linear;
}
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}



.fade-in-down {
    animation: fade-in-down 2s ease;
}
@keyframes fade-in-down {
    0% {
        opacity: 0;

        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/*pulse animation */

.pulse {
    animation: pulse 2s infinite ease-in-out alternate;
}
@keyframes pulse {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}


/* bounce in animation */
.bounce-in {
    animation: bounce-in 2s ease;
}
@keyframes bounce-in {
    0% {
        opacity: 0;
        transform: scale(.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(.9);
    }
    100% {
        transform: scale(1);
    }
}



.fade-in-left {
    animation: fade-in-left 2s ease infinite;
}
@keyframes fade-in-left {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* border animation */

.draw {
    -webkit-transition: color 0.25s;
    transition: color 0.25s;
}
.draw::before, .draw::after {
    border: 2px solid transparent;
    width: 0;
    height: 0;
}
.draw::before {
    top: 0;
    left: 0;
}
.draw::after {
    bottom: 0;
    right: 0;
}
.draw:hover {
    color: #60daaa;
}
.draw:hover::before, .draw:hover::after {
    width: 100%;
    height: 100%;
}
.draw:hover::before {
    border-top-color: #60daaa;
    border-right-color: #60daaa;
    -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
    border-bottom-color: #60daaa;
    border-left-color: #60daaa;
    -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}


.img-portfolio {
    margin-bottom: 30px;
}

.img-hover:hover {
    opacity: 0.8;
}


/* Home Page Carousel */

header.carousel {
    height: 75%;
}

header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
    height: 100%;
}

header.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

header.carousel .item:nth-child(1) .fill{
    background-image: url('../img/custom_site/slider-index-01.jpg') !important;
}

header.carousel .item:nth-child(2) .fill{
    background-image: url('../img/custom_site/slider-index-02.jpg') !important;
}

/* this style makes homepage carousell vertically min heght */
header.carousel.tallercarousel {
    min-height: 350px;
}



/* this is the mobile carousel style */
@media(max-width:767px) {

    header.carousel {
        height: 33%;
        margin-top: 20px;
    }

}




/*page container for content*/

.page-container {
    padding-top: 3em;
    padding-bottom: 3em;
}
/* this is the mobile carousel style */
@media(max-width:767px) {

    .page-container {
        padding-top: 2em;
        padding-bottom: 2em;
    }
}


/*navbar-inverse*/

.navbar-inverse {
    background-image: unset !important;
    padding-top: 10px;
    padding-bottom: 0px;
    border: none;
    background-color: rgba(0,0,0,.5);

}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media(max-width:991px) {
    .navbar-inverse {
        padding-top: 0px;
        padding-bottom: 10px;
        border: none;
        background-color: rgba(0,0,0,1);

    }
}

@media(max-width:767px) {
    .navbar-inverse {
        padding-top: 0px;
        padding-bottom: 2px;
        border: none;
        background-color: rgba(0,0,0,1);

    }

}



/*logo brand navbar*/
.navbar-brand img {

}

/* navbar brand mobile size */
@media(max-width:767px) {

    .navbar-brand img {
        max-height: 40px

    }

}

.navbar-brand {
    padding: 10px 15px;
}

/* image index max height */

.smaller {
    max-height: 400px;
    padding-bottom: 3em;
}

/* smaller padding-bottom for mobile */
@media(max-width:767px) {

    .smaller {
        max-height: 400px;
        padding-bottom: 2.2em;
    }

}


/*gradient behind text images - https://cssgradient.io/ - */

.radial-gradient{
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(238,238,239,1) 50%);
}




/* vertically centered imaged */

.verticallycentered {
    display: flex;
    justify-content: center;
}


footer {
    margin-top: 3em;
}

.footer-bg {
    background-color: #ffffff;
}

/* footer img logo*/

.logofooter{
}

.sloganfooter{
    max-height: 30px;
    margin-bottom: 1em;
}

footer p {
    color: #888;
    padding-bottom: 40px
}

/*hr divider line */
hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(200, 200, 200, 0), rgba(200, 200, 200, 0.75), rgba(200, 200, 200, 0));
    margin: 10px 0;
}

/* 404 Page Styles */

.error-404 {
    font-size: 100px;
}

/* Button Styles */

.navbar-btn {
    margin-left: 2px;
}

/* unvisited link */
.btn-primary:link {
    background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    background-color:#ffec64;
    border-radius:3px;
    color: #000000;
    margin-top: 11px;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
    font-size: 19px;
    letter-spacing: 0.1em;
    padding: 6px 20px;
}

/* visited link */
.btn-primary:visited {
    color: #000000;
}

/* mouse over link */
.btn-primary:hover {
    color: #fff;
    background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
    background-color: #3d94f6;
}

/* selected link */
.btn-primary:active {
    color: #000000;
}





/* Heart beat animation for Login Button */

@keyframes flickerAnimation {
    0%   {
        opacity:1;
    }
    50%  {
        opacity:0.4;
    }
    100% {
        opacity:1;
    }
}
@-o-keyframes flickerAnimation{
    0%   {
        opacity:1;
    }
    50%  {
        opacity:0.4;
    }
    100% {
        opacity:1;
    }
}
@-moz-keyframes flickerAnimation{
    0%   {
        opacity:1;
    }
    50%  {
        opacity:0.4;
    }
    100% {
        opacity:1;
    }
}
@-webkit-keyframes flickerAnimation{
    0%   {
        opacity:1;
    }
    50%  {
        opacity:0.4;
    }
    100% {
        opacity:1;
    }
}
.animate-flicker {
    -webkit-animation: flickerAnimation 2s infinite;
    -moz-animation: flickerAnimation 2s infinite;
    -o-animation: flickerAnimation 2s infinite;
    animation: flickerAnimation 2s infinite;
}



/* visited link */
.btn-secondary:visited {
    color: #000000;
}

/* mouse over link */
.btn-secondary:hover {
    color: #fff;
    background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
    background-color: #3d94f6;
}

/* selected link */
.btn-secondary:active {
    color: #000000;
}

/* Footer Styles */

footer {
    margin: 50px 0;
}

/* Responsive Styles */

@media(max-width:991px) {
    .customer-img,
    .img-related {
        margin-bottom: 30px;
    }
}

@media(max-width:767px) {
    .img-portfolio {
        margin-bottom: 15px;
    }

    header.carousel .carousel {
        height: 70%;
    }
}