/*GENERICS*/

body, html {
    overflow-x: hidden;
}

.btn-round {
    border-radius: 30px;
}

.content-on-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.content-center-on-bottom {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-indent {
    text-indent: 30px;
}

hr.divisor {
    margin-bottom: 30px;
    border-top-color: #007bff;
    width: 60%;
}

hr.divisor.white {
    border-top-color: #fff;
}

section header {
    position: relative;
    z-index: 1;
    text-align: center;
}

/*NAV*/

header#nav-container {
    position: absolute;
    width: 100%;
    padding: 0 100px;
    z-index: 20;
    background-color: rgba(255, 255, 255, 0.2);
}

header#nav-container * {
    color: #fff;
}

header#nav-container.fixed {
    position: fixed;
    background-color: rgba(96, 125, 139, 1);
    animation: fadeIn .4s ease;
}

header#nav-container.fixed nav {
    padding: 0 1rem;
}

@keyframes fadeIn {
    from {
        top: -54px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

header#nav-container .navbar-brand img {
    width: 80px;
}

header .btn {
    font-weight: 100;
    color: #c1ffcf !important;
}

header .btn .fab {
    position: relative;
    animation: shake 5s linear infinite;
}

@keyframes shake {
    0% {
        left: 0;
    }
    40% {
        left: 1px;
    }
    42% {
        left: -1px;
    }
    44% {
        left: 1px;
    }
    46% {
        left: -1px;
    }
    48% {
        left: 1px;
    }
    50% {
        left: -1px;
    }
    52% {
        left: 1px;
    }
    54% {
        left: -1px;
    }
    56% {
        left: 1px;
    }
    58% {
        left: -1px;
    }
    60% {
        left: 1px;
    }
    62% {
        left: -1px;
    }
    64% {
        left: 0px;
    }
    100% {
        left: 0;
    }
}

/*INITIAL*/

section#initial {
    width: 100%;
    height: 100vh;
    background-color: #000;
}

section#initial .back {
    width: 100%;
    height: 100vh;
    position: absolute;
    background-image: url(../img/back-header.jpg);
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    filter: grayscale(0.4);
    z-index: 0;
    opacity: 0.3;
}

section#initial h1, section#initial p {
    color: #fff !important;
}

section#initial .content-center-on-bottom, section#initial .content-center-on-bottom * {
    transition: all .4s ease-in-out;
}

section#initial .content-center-on-bottom {
    color: #007bd6;
    font-size: 18px;
    cursor: pointer;
    opacity: .5;
}

section#initial .content-center-on-bottom span {
    display: inline-block;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
}

section#initial .content-center-on-bottom .fas {
    font-size: 40px;
}

section#initial .content-center-on-bottom:hover {
    opacity: .9;
}

section#initial .content-center-on-bottom:hover span {
    width: 200px;
}

/*ABOUT*/

section#about {
    padding: 50px 100px;
    color: #007bff;
    padding-top: 80px;
}

section#about header p {
    width: 930px;
    margin: 25px auto;
}

section#about .item {
    text-align: center;
    border: 1px dotted #007bff4d;
    padding: 20px 50px;
    border-radius: 20px;
    margin: 10px 20px;
}

section#about .item i {
    text-align: center;
    font-size: 40px;
}

section#about .item p {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

/* EVENTS */

section#events {
    padding: 50px 100px;
    color: #fff;
    position: relative;
    padding-top: 80px;
}

section#events .back {
    background-color: #00587D;
    width: 120%;
    height: 120%;
    position: absolute;
    z-index: 0;
    left: -30px;
    top: 0;
    transform: rotateZ(-5deg);
}

@media (max-width: 720px) {
	section#events .back {
		width: 120%;
		position: absolute;
		z-index: 0;
		top: 0;
		transform: rotateZ(0deg);
	}
}
/* WORK */

section#work {
	background-color: #4E5565;
    z-index: 10;
    position: relative;
    padding: 30px 0;
	padding-top: 80px;
}

/*CONTACT*/

section#contact {
    padding: 100px;
    background-color: #505050;
    color: #fff;
    position: relative;
}

section#contact .back {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(../img/back-contact.jpg);
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    filter: grayscale(0.4);
    z-index: 0;
    opacity: 0.3;
    top: 0;
    left: 0;
}

section#contact footer {
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 100%;
    left: 0;
    padding: 6px 25px;
    text-align: right;
    background-color: #00000047;
}

section#contact footer>span {
    margin: 0 4px;
    font-size: 13px;
}

section#contact footer>span a {
    color: #fff;
}

/* SNIPPET */

.snip1571 {
    background-color: #000;
    display: inline-block;
    font-size: 16px;
    margin: 10px;
    max-width: 315px;
    min-width: 230px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
    box-shadow: 0 0 1px 1px #798d98;
    cursor: pointer;
}

.snip1571 *, .snip1571 *:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

.snip1571 img {
    backface-visibility: hidden;
    max-width: 100%;
    vertical-align: top;
}

.snip1571 figcaption {
    bottom: 15px;
    left: 0;
    position: absolute;
    z-index: 0;
}

.snip1571 figcaption:before {
    background-color: #ffffff;
    bottom: -5px;
    content: '';
    left: 0;
    position: absolute;
    right: 100%;
    top: -5px;
    z-index: -1;
}

.snip1571 h3 {
    background-color: #0056b3;
    color: #ffffff;
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
    padding: 5px 10px;
    text-transform: uppercase;
    z-index: 1;
}

.snip1571 a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.snip1571:hover>img, .snip1571.hover>img {
    opacity: 0.1;
}

.snip1571:hover figcaption:before, .snip1571.hover figcaption:before {
    right: -5px;
}