/*== FONTS ==*/

@font-face {
    font-family: 'Agenda Bold';
    src: url('../font/agenda-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Agenda';
    src: url('../font/agenda-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Animation */

@keyframes imagesSlide {
    0% { opacity:0; right: -100%; }
    100% { opacity: 1; right:0%; }
}

@keyframes devSlide {
    0% { opacity:0; left: -100%; }
    100% { opacity: 1; left:0%; }
}

@keyframes imagesFade {
    0% { opacity:0; }
    100% { opacity: 1; }
}

@keyframes KSlide {
    0% { background-position:1300% -50px; }
    100% { background-position:30% -50px }
}

/* Generic */

body { font-family: Agenda; color: #333333; font-size: 16px; line-height: 20px; }
h1, h2, h3, h4 { font-family: Agenda Bold; color: #2A374B; }

h1 { font-size: 48px; line-height: 58px; margin-bottom: 4rem; }
h2 { font-size: 36px; line-height: 46px ; font-family: Agenda;  }
h3 { font-size: 24px; line-height: 40px; }
h4 { font-size: 25px; line-height: 30px; }
h5 { font-size: 16px; line-height: 20px; color: #2A374B; font-family: Agenda Bold; }

p a { color: #BBA27D; transition: all 0.5s ease-in-out; }
p a:hover { color: #003b5c; }

.container {
    max-width: 1440px;
}

.frame {
    background: #BBA27D;
    padding: 30px 40px;
    color: #FFFFFF;
    margin: 40px 0 0;
}

.frame p { margin: 0; }

#hero, #content {float: left;clear: both; width: 100%;}

.button.call { margin-right: 10px; }
.button.mail { margin-left: 10px; }
.button span { margin-right: 10px; }
.button span svg { max-width: 15px; }

.button { font-family: Agenda Bold; background:#000; color: #FFF; padding: 15px 30px; text-align: center; font-weight: 700; transition: all 0.5s ease-in-out; }
.button.gold { background-color: #BBA27D; }
.button:hover { background-color: #003B5C; color: #FFF; text-decoration: none; }

/* HEADER */

img { max-width: 100%; height: auto; }
.logo svg {clear: both;float: left;width: 100%;margin-bottom: 10px;}
.logo {background: #FFF;float: left;padding: 50px 50px 0 0;}
.contact { float: right; padding:50px 0; }

/* BOTTOM */

.social {
    width: 10%;
    margin: 0 45%;
    float: left;
    clear: both;
    text-align: center;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

.socialIcon {
    width: 25px;
    text-indent: -10000px;
    background: url(../img/linkedin.svg) no-repeat;
    height: 25px;
    background-size: cover;
    margin: 0 10px;
    display: block;
}

.socialIcon.twitter { background-image: url(../img/twitter.svg); }

footer {
    float: left;
    clear: both;
    background: #003B5C;
    width: 100%;
    padding: 20px;
}

footer h2 { color: #FFF; }
footer h3 { color: #BBA27D; }
footer .contact {
    width: 50%;
    margin: 0 25%;
    color: #fff;
    float: none;
    text-align: center;
}

footer .container {
    border: 2px solid #FFF;
    max-width: 100%;
    text-align: center;
    padding: 40px;
}

/* CONTENT  */

.development {
    float: left;
    width: 25%;
    color: #2A374B;
    position: relative;
    animation-name: devSlide;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    padding: 5% 0;
}

.images {
    position: relative;
    float: right;
    width: 70%;
    animation-name: imagesSlide;
    animation-duration: 0.75s;
    animation-iteration-count: 1;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    padding: 0 0 50px;
}

 .images img {
    position: relative;
    opacity: 0;
    animation-name: imagesFade;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-delay: 0.75s;
    animation-fill-mode: forwards;
 }

.images .col-2 {
    flex: 0;
    max-width: 48%;
    float: left;
    padding: 0;
}

.images .row-2 img { margin:0 0 30px; }
.images .left-col { margin-right: 4%; }

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

/* RESPONSIVE */

/* Desktop Animations */

@media (min-width: 1441px) {
    body {
        background: #FFF url(../img/Kenley.svg) no-repeat 1300% -50px;
        animation-name: KSlide;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-delay: 0;
        animation-fill-mode: forwards;
    }
}

/* Smaller Desktop  */
@media (max-width: 1460px) {
    body { background: #FFF url(../img/Kenley.svg) no-repeat 20% -50px; }
    .container { max-width: 100%; padding: 0 5%; }
    .development { width: 40%; }
    .images { width: 55%; }
    footer .contact { width: 70%; margin: 0 15%; }
}

/* Tablet */
@media (max-width: 961px) {
    .development { width: 100%; text-align: center; }
    .images { width: 100%; margin-top: 40px; }
    footer .contact { width: 90%; margin: 0 5%; }
}

/* Mobile */
@media (max-width: 766px) {
    .container { max-width: 100%; padding: 0 5%; }
    .images .left-col { margin-right: 0; margin-bottom: 30px; }
    .images .col-2 { max-width: 100%; }
    .button { float: left; width: 100%; margin: 10px 0 !important; }
    .contact { padding: 0; }
    .logo { float: left; padding: 50px; width: 100%; text-align: center; }
    footer .container { float: left; }

}

/* OLDER Mobile */
@media (max-width: 442px) {
}

@media (max-width: 321px) {
}