@import url('https://fonts.googleapis.com/css?family=Didact+Gothic|Poppins');
/*
font-family: 'Didact Gothic', sans-serif;
font-family: 'Poppins', sans-serif;
*/

/* COLORS
grey: #383838;
white: #FEFCFB;
pink: #DA4167;
blue: #034078;
yellow: #EAC435;
*/

:root {
scroll-behavior: smooth;
}

/* ANIMATIONS */

@keyframes scroll {
    0% {
        transform: translateY(-50px);
        opacity: 1;
    }
    
    20% {
        transform: translateY(0px);
        opacity: 0.3;
    }
    
    40% {
        transform: translateY(0px);
        opacity: 0.5;
    }
    
    60% {
        transform: translateY(0px);
        opacity: 0.7;
    }
    
    100% {
       transform: translateY(100px); 
        opacity: 1;
    }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease-in 1 forwards;
}

/* GLOBAL */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
}

html, body {
    height: 100%;
}

ul, nav { list-style: none; }

a {
    text-decoration: none;
}

h1,h2:not(#logo) { text-transform: uppercase;}
h1, h2:not(#logo), p {margin-bottom: 2rem;}

.button {
    text-transform: uppercase;
    border: 2px solid #DA4167;
    padding: 10px;
    display: inline-block; /* ovo se postavlja da bi moglo da se primeni margin-bottom */
}

.button:hover {
    background-color: #DA4167;
    color: #FEFCFB;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

.flex-container {
    display: flex;
    flex-direction: column;
}

/* HEADER */

.main-nav li {
    text-align: center;
    margin: 15px auto;
}

.main-nav { display: none; }

.logo {
    display: inline-block;
    font: bold 32px 'Didact Gothic', sans-serif;
    margin-top: 10px;
    margin-left: 20px;
    color: #383838;
}

.nav-links {
    color: #383838;
}

.navbar-toggle {
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer; 
    color: #383838;
    font-size: 30px;
}

.active {
    display: block;
}  

/* HERO */

.hero {
    display: flex;
    flex-direction: column;
}

.left-half {
    min-height: 100vh;
    background: url(../img/mobile-hero-opacity.png);
    background-position: center;
    background-size: cover;
    color: #383838;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.left-half-content {
    margin-left: 2rem;
    margin-right: 2rem;
}

.left-half-content > h1 {
    text-transform: uppercase;
    text-align: center;
    font-size: 30px;
    margin-top: 2rem;
}

.left-half-content a {
    color: #383838;
    margin-bottom: 1rem;
}

.right-half {
    visibility: hidden;
}

.scroll {
    display: none;
}

/* "SCROLL TO TOP" BUTTON */
    
#scroll-to-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    background-color: transparent;
    border: 2px solid #DA4167;
    outline: none;
    color: #DA4167;
    cursor: pointer;
    padding: 12px;
    font-size: 1em;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

#scroll-to-top:hover {
    background-color: #DA4167;
    color: #FEFCFB;
}

/* INFO */

.info {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 2rem;
    text-align: center;
    color: #383838;
    background: #FEFCFB;
    padding: 2rem;
}

.info-wrapper { order: 1; }
.info-wrapper  h1 { margin-top: 2rem; }

.more-info-about-us { color: #383838; }

.info img {
    max-width: 100%;
    order: 2;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* SERVICES */

.services {
    font-family: 'Didact Gothic', sans-serif;
    background: #383838;
    text-align: center;
    color: #FEFCFB;
}

.services a {
    color: #FEFCFB;
    margin-bottom: 1rem;
}

.services h3 { margin-bottom: 1rem; }
.services h2 { margin-top: 2rem; }
.services p { margin: 1rem 2rem; }

/* GALLERY */

.gallery {
    background: #FEFCFB;
    color: #383838;
    text-align: center;
}

.gallery p {
    margin-left: 2rem;
    margin-right: 2rem;
}

.gallery-container {
    max-width: 300px;
    margin: auto;
    margin-bottom: 1rem;
    border: 2px solid #DA4167;
}

.gallery > h2 {margin-top: 2rem;}

.imgs {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
}

.main-img img,
.imgs img {
    width: 100%;
    height: auto;
}

/* BLOG */

.blog-posts {
    background: #383838;
    text-align: center;
    color: #FEFCFB;
}

.blog-posts > h2 { margin-top: 2rem;}

.blog-posts > a {
    color: #FEFCFB;
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.posts {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 2rem;
}

.posts > article {
    border: 1px solid #FEFCFB;
    padding: 1rem;
    margin-left: 2rem;
    margin-right: 2rem;
}

.posts p { margin-top: 1rem;}
.posts a { color: #DA4167; }

.date {
    color: #EAC435; 
    text-transform: uppercase;
    letter-spacing: .2rem;
}


/* FOOTER */

.footer {
    font-size: 0.875rem;
    margin: 2rem;
    background: #FEFCFB;
    color: #383838;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.copy-and-design-info {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.copy-and-design-info p { margin: 0;}
.copy-and-design-info a { color: #383838; }

.footer-nav { display: none; }

.footer-nav li a { color: #383838; }

.footer-nav li a:hover {
        text-decoration: underline;
        color: #DA4167;
    }

.work-hours { text-align: center; }
.work-hours p { line-height: 2; }

.social { text-align: center; }
.social-icons { margin-top: 1rem; }
.social-icons a { margin: 0 10px; }

.fa-facebook { color: #4862A3; }
.fa-instagram { color: #C9006B }
.fa-google-plus-g { color: #D44546; }

#footer-logo {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 2rem;
    letter-spacing: 1px;
    text-transform: capitalize !important;
}

#footer-logo a { color: #383838; }
#footer-logo a:hover { color: #DA4167; }

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

.jovan a { color: #4862A3; }


@media (min-width: 1281px) and (max-width: 1366px) {


    .posts article:hover {
        margin: -5px 5px 5px -5px;
        box-shadow: 5px 5px 0px 0px rgba(218, 65, 103, 0.5);
        transition: all .5s;
        cursor: pointer;
    }

 }


/* ===============================================================================
DESKTOP LAYOUT
================================================================================== */

@media screen and (min-width: 1281px) {

/* GENERIC STYLES */
    
    body {
        font-size: 18px;
    }
    
    h1 { font-size: 3rem !important;}
    
/* HEADER */
    
    .navbar {
        display: flex;
        justify-content: space-between;
        padding-bottom: 0;
        height: 70px;
        align-items: center;
    }
    
    .main-nav {
        display: flex;
        margin-right: 30px;
        flex-direction: row;
        justify-content: flex-end;
    }
    
    .main-nav li { margin: 0; }
    
    .nav-links {
        margin-left: 40px;
        color: #383838;
    }
    
    .logo { margin-top: 0; }
    
   .navbar-toggle { display: none; }
    
    .logo:hover,
    .nav-links:hover {
        color: #DA4167;
    }

    
/* HERO */
    
    .hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 100vh;
    }
    
    .hero a { color: #FEFCFB; }
    
    .left-half {
        background: #383838;
        color: #FEFCFB;
    }
    
    .left-half-content {
        width: 50%;
        text-align: center;
    }
    
    .left-half-content h1 { text-align: left; }
    .left-half-content p { text-align: left; }
    
    .right-half {
        visibility: visible;
        background-image: url(../img/mobile-hero.jpg);
        background-size: cover;
        background-position: center;
   }
    
/* SCROLL DOWN BUTTON */

    .scroll {
        display: block;
        position: absolute;
        top: 95%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        border: 2px solid #DA4167;
        border-radius: 50%;
        text-align: center;
        font-size: 50px;
        line-height: 80px;
        overflow: hidden;
    }

    .scroll:hover {
        background: rgba(218,65,103, 0.1);
    }

    .scroll .fas {
        margin: 0;
        padding: 0;
        color: #DA4167;
        animation: scroll 1.7s cubic-bezier(.52,.01,.51,1) infinite;
    }
    
/* "SCROLL TO TOP" BUTTON */
    
    #scroll-to-top {
        padding: 15px;
        font-size: 1.5em;
    }
    
/* INFO */

    .info {
        color: #383838;
        background: #FEFCFB;
        display: grid;
        grid-gap: 2rem;
        grid-template-columns: repeat(2, 1fr);
        padding: 3rem;
        text-align: center;
    }

    .info-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .info-wrapper > p {
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .info img {
        transition: transform .5s;
        order: 1;
    }

    .info img:hover {
        transform: scale(1.1);
        transition: transform .5s;
    }
    
/* SERVICES */
    
    .services-img {
        display: grid;
        margin-left: 2rem;
        margin-right: 2rem;
        margin-bottom: 1rem;
        grid-gap: 2rem;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    .services-img img {
        max-width: 100%;
        transition: transform .5s;
}

    .services-img img:hover {
        transform: scale(1.1);
        transition: transform .5s;
    }
    
    .services h3 { margin-top: 0.5rem; }
    
/* GALLERY */
    
    .gallery-container {
        max-width: 1200px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-auto-flow: dense;
        grid-gap: 10px;
    }
    
    .imgs:hover { cursor: pointer; }

    .main-img {
        grid-column: 1 / 3;
        grid-row: 1 / -1;
    }

    .imgs {
        grid-column: 3 / -1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-auto-flow: dense;
    }
    
/*    .imgs img { max-height: 290px; }*/
    
    
/*  BLOG-POSTS */
    
    .posts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        grid-gap: 3rem;
        margin-bottom: 2rem;
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .posts article:hover {
        margin: -5px 5px 5px -5px;
        box-shadow: 5px 5px 0px 0px rgba(218, 65, 103, 0.5);
        transition: all .5s;
        cursor: pointer;
    }
    
    .blog-posts > a { margin-top: 0; }
    
/* FOOTER */
    
    .footer {
        flex-direction: row;
        font-size: 16px;
    }
    
    .footer-nav {
        display: block;
        text-align: center;
        font-size: 1.2rem;
        line-height: 1.5;
        font-size: 16px;
    }
    
    .footer-info { text-align: left; }
    
    .copy-and-design-info {
        flex-direction: row;
        justify-content: space-around;
    }
    
} /* media query zagrada */



/* ===============================================================================
TABLETS, IPADS (PORTRAIT)
================================================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {
    
/*   SERVICES */
  
    .services-img {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
/*  GALLERY */
    
    .gallery-container {
        max-width: 500px;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        grid-auto-flow: dense;
        grid-gap: 10px;
    }
    
    .imgs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: dense;
    }
    
    
/*  BLOG-POSTS */
    
    .posts {
        max-width: 60%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .posts article { margin-bottom: 1rem; }
    
    .blog-posts > a { margin-top: 1rem; }
    
/*  FOOTER */
    
    .footer {
        display: grid;
        grid-template-areas: 
            'info hours'
            'social social';
    }
    
    .footer-info { grid-area: info; }
    
    .work-hours { grid-area: hours; }
    
    .social { grid-area: social; }
  
}




/* ===============================================================================
LAPTOPS
================================================================================== */


@media (min-width: 1025px) and (max-width: 1280px) {
    
/*  SERVICES */

    .services-img {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
/*  GALLERY */
    
    .gallery-container {
        max-width: 850px;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: 1fr 1fr;
        grid-auto-flow: dense;
        grid-gap: 10px;
    }
    
    .imgs:hover { cursor: pointer; }

    .main-img {
        grid-column: 1 / 4;
        grid-row: 1 / -1;
    }
    
    #current, .imgs img { height: 100%; }

    .imgs {
        grid-column: 4 / -1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: dense;
    }
    
    
/*  BLOG-POSTS */
    
    .posts {
        max-width: 60%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .posts article { margin-bottom: 1rem; }
    
    .blog-posts > a { margin-top: 1rem; }
    
/*  FOOTER */
    
    .footer {
        display: grid;
        grid-template-areas: 
            'info nav hours'
            'social social social';
    }
    
    .footer-info { grid-area: info; }
    
    .second-nav {
        grid-area: nav;
        text-align: center;
    }
    
    .footer-nav { display: block; }
    
    .work-hours { grid-area: hours; }
    
    .social { grid-area: social; }
     
  
}