/*Global*/
body, html {
    height: 100%;
}

.bg {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("imgs/backgroundimgs/fabrizio-conti-783891-unsplash.jpg");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 240px) {
    h1.display-1 {
        font-size: 1.75rem;
    }
    .lead {
        font-size: 1rem;
    }
}

@media (min-width: 440px) {
    h1.display-1 {
        font-size: 2.5rem;
        /*margin-bottom: 2rem;*/
    }
}

@media (min-width: 544px) {
    .html {
        font-size: 1rem;
    }

    h1.display-1 {
        font-size: 3.5rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .html {
        font-size: 1.2rem;
    }

    h1.display-1 {
        font-size: 4.5rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .html {
        font-size: 1.4rem;
    }

    h1.display-1 {
        font-size: 5.5rem;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .html {
        font-size: 1.6rem;
    }

    h1.display-1 {
        font-size: 6.25rem;
    }

    .bg {
        /* The image used */
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("imgs/backgroundimgs/fabrizio-conti-783896-unsplash.jpg");

        /* Full height */
        height: 100%;

        /* Center and scale the image nicely */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}


.main {
    border: 1px solid white;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.cta {
    position: relative;
    /*top: 25%;
    transform: translateY(-35%);*/
    padding: 3rem;
}

.social {
    /*position: relative;
    top: 15%;*/
    /*width: 50%;*/
}

.display-1 {
    /* margin-left: -1%*/
}

.smi {
    padding: 1rem;
    font-size: 1.5rem;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    height: 4rem;
    width: 4rem;
    padding-top: 1.25rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    color: white;
}

.smi:hover {
    opacity: 0.7;
}

.fa-facebook-f {
    background: #3b5998;
}

.fa-twitter {
    background: #1da1f2;
}

.fa-linkedin-in {
    background: #007bb5;
}

.fa-instagram {
    background: #c32aa3;
}

.fa-envelope {
    background: #fbad50;
}