/* Responsive Blocks */

.container
{
    max-width: 1330px;
    padding: 0 15px;
    margin: 0 auto; 
}

@media only screen and (max-width: 426px)
{
    .main-headings { font-size: 35px; }
}

/* Navbar Block */

@media only screen and (max-width: 830px)
{
    .order-btn , .menu-links { display: none; }

    nav .container { justify-content: space-between; }

    .hamburger 
    { 
        display: inline-block;
        padding: 15px 15px;
        cursor: pointer;
        transition-property: opacity, filter;
        transition-duration: 0.15s;
        transition-timing-function: linear;
        text-transform: none;
        background-color: transparent;
        border: 0;
        margin: 0;
        overflow: visible; 
        z-index: 5;
    }

    .hamburger:hover , .hamburger.is-active:hover { opacity: 0.9; }
    
    .hamburger-box 
    {
        height: 32px; width: 35px;
        display: inline-block;
        position: relative; 
    }

    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after 
    {
        height: 4px; width: 35px;
        background-color: #766ba7;
        border-radius: 4px;
        position: absolute;
        transition: transform 0.15s ease;
        display: block;
        content: "";
    }

    .hamburger-inner { top: 50%; }

    .hamburger-inner::before { top: -10px; left: 5px; width: 25px; height: 4px!important;}

    .hamburger-inner::after { bottom: -10px; right: 5px; width: 25px; }
    
    .hamburger.is-active .hamburger-inner::before,
    .hamburger.is-active .hamburger-inner,
    .hamburger.is-active .hamburger-inner::after
    { 
        width: 35px; left: 0; right: 0;
    }

    .hamburger--spin .hamburger-inner 
    {
        transition-duration: 0.22s;
        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 
    }
    
    .hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
    
    .hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
      
    .hamburger--spin.is-active .hamburger-inner 
    {
        transform: rotate(225deg);
        transition-delay: 0.12s;
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
    }
    
    .hamburger--spin.is-active .hamburger-inner::before 
    {
        top: 0;
        opacity: 0;
        transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; 
    }
     
    .hamburger--spin.is-active .hamburger-inner::after 
    {
        bottom: 0;
        transform: rotate(-90deg);
        transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); 
    }
    
    .hamburger:focus { outline: none; }

    nav { position: relative; }

    .menu-links.opened
    {
        position: absolute;
        top: 0; left: 0;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        height: 100vh; width: 100vw;
        background-color: #eef3f9;
        z-index: 3;
        margin: 0;
    }

    .menu-links.opened li  { margin: 12px auto; }

    .menu-links.opened li a { font-size: 20px; }
        
    .menu-open-anm { animation: menu-open-anm 0.5s ease; }

    .menu-close-anm { animation: menu-close-anm 0.5s ease; }

    .menu-close-anm li a { display: none; }
}

@keyframes menu-open-anm
{
    from { height: 100px; }
    to { height: 100vh;}
}

@keyframes menu-close-anm
{
    from { height: 100vh; }
    to { height: 0px; }
}

/* Banner Block */

@media only screen and (min-width: 1024px)
{
    .one { top: -200px; right: -350px; }

    #banner-img { order: 2; }

    #banner-img img { height: 550px; }

    #banner-text h2 { width: 75%; }
}

@media only screen and (min-width: 1100px)
{
    #banner-text h2 { width: 100%; }
}

@media only screen and (min-width: 1300px)
{
    #banner-text h1 { width: 90%; }
}

@media only screen and (min-width: 1440px)
{
    .one { top: -200px; right: -350px; }
    
    #banner-text { padding-bottom: 100px; }

    #banner-img img { height: 600px; }
}

@media only screen and (max-width: 1023px)
{
    #banner { position: relative; }

    #banner-img { position: static; }

    #banner .container { flex-direction: column; }

    #banner-img img { height: 600px; }

    .one { top: -50%; left: 50%; transform: translateX(-50%); }

    #banner-text 
    {
        margin: 50px 0;
        text-align: center;
    }

    #banner-text h2 { width: 100%; }

    #banner-text a { margin: 0 auto; }
}

@media only screen and (max-width: 767px)
{
    #banner-img img { width: 75%; height: auto; }

    .one { top: -30%; }
}

@media only screen and (max-width: 600px)
{
    #banner-text h1 { font-size: 40px; }

    #banner-text h2 { font-size: 25px; }
}   

@media only screen and (max-width: 600px)
{
    .one { top: -50%; }
}


/* Products Block */

@media only screen and (max-width: 1024px)
{
    .arc.two
    {
        height: 600px; width: 600px;
        top: -425px; left: 50%; transform: translateX(-50%);
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
    }

    #products-left , #products-right { flex-basis: 100%; }

    #products-left { text-align: center; margin-top: 0; }

    #products-right { margin: 0; }

    #products-left p { width: 90%; text-align: center; margin: 35px auto 50px; }

    #products-left a { margin: 0 auto; }

    #products-right>img { bottom: -25px; right: 25px; height: 400px; }
}

@media only screen and (max-width: 767px)
{
    #products-right>span{ flex-basis: 50%; }

    #products-right span:nth-child(5) { color:  rgb(240, 255, 255); }
    
    #products-right span:nth-child(4) { color: #f08a5d; }

    #products-right>img { height: 500px; }
}

@media only screen and (max-width: 426px)
{
    .arc.two { top: -460px; }

    #products-right>span{ flex-basis: 100%; }

    #products-right span:nth-child(5) { color: #f08a5d; }
    
    #products-right span:nth-child(4) { color:  rgb(240, 255, 255); }

    #products-right>img { height: 450px; left: 50%; transform: translateX(-50%); }
}

/* Gallery Block */

@media only screen and (max-width: 1024px)
{
    #gallery { padding-bottom: 0; }

    .circle.two
    {
        height: 600px; width: 600px;
        top: -425px; left: 50%; 
        transform: translateX(-50%);
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
    }

    #gallery h1 { text-align: center; }

    .gallery-box>div { flex-basis: 32%; }

    .gallery-box>div:nth-child(3n) { display: none; }
}

@media only screen and (max-width: 824px)
{
    .gallery-box>div { flex-basis: 49%; }

    .gallery-box>div:nth-child(3n) { display: flex; }
}

@media only screen and (max-width: 600px)
{
    .gallery-box>div { flex-basis: auto; padding: 50px 50px 25px; width: 300px; }

    .gallery-box>div:nth-child(even) { display: none; }
}

@media only screen and (max-width: 426px)
{
    .circle.two { top: -460px; }
}

/* Moment Block */

@media only screen and (max-width: 1023px)
{
    #moment { margin-top: 25px; }

    .moment-arc { display: none; }

    #moment p { width: 80%; }
}

@media only screen and (max-width: 768px)
{
    #moment p { width: 100%; }
}

@media only screen and (max-width: 575px)
{
    #moment .container img { width: 100%; height: auto; }
}

/* About Block */

@media only screen and (max-width: 1023px)
{
    #about { overflow: hidden; }

    .about-arc
    {
        height: 600px; width: 100%;
        top: -250px; left: 50%; 
        transform: translateX(-50%);
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
    }

    #about .container>div { flex-basis: 100%; }

    .about-right { margin-top: 50px; }

    .about-right h1 , .about-right h3 { text-align: center; }

    .about-right a { margin: 25px auto 0; }
}

@media only screen and (max-width: 600px)
{
    .about-left img { width: 90%; }

    .about-arc { display: none; }
}

@media only screen and (max-width: 426px)
{
    .about-right h3 { font-size: 22px; }
}

/* Insta Block */

@media only screen and (max-width: 1200px)
{
    .insta-text { flex-basis: 20%; }
}

@media only screen and (max-width: 1023px)
{
    #about { margin-bottom: 50px; }

    .insta-circle
    {
        border-top-right-radius: 0;
        border-bottom-right-radius: 100%;
        border-bottom-left-radius: 100%;
        top: -425px; left: 50%; transform: translateX(-50%);
    }

    .insta-bg { display: none; }

    .insta-text { flex-basis: 100%; margin-bottom: 50px; }
    
    .insta-embed { flex-basis: 40%; }
}

@media only screen and (max-width: 682px)
{
    .insta-embed:nth-child(2) { display: none; }

    .insta-circle { display: none; }
}

@media only screen and (max-width: 426px)
{
    .insta-text h1 , .locate-text h1 { font-size: 35px; }
}

/* Maps Block */

@media only screen and (max-width: 1050px)
{
    .locate-text { flex-basis: 20%; }
}

@media only screen and (max-width: 1023px)
{
    .maps-bg , .locate-circle { display: none; }

    #locate { margin-top: 0; padding-top: 0; }

    .locate-text { flex-basis: 100%; order: 1; margin-bottom: 50px; }

    .locate-map { flex-basis: 100%; order: 2; display: flex; justify-content: center; }
}

@media only screen and (max-width: 625px)
{   
    .mapouter , .gmap_canvas ,.gmap_canvas iframe { height: 500px; width: 100%; }

    #locate { margin-bottom: 50px; }
}

/* Footer Block */

@media only screen and (max-width: 1200px)
{
    footer { padding-bottom: 12px; }

    footer .container
    { 
        min-height: 250px;
        flex-direction: column;
        justify-content: space-around;
    }
    
    footer .container>div:nth-child(2) { order: 1; }
        
    footer .container>div:nth-child(4) { order: 2; } 
   
    footer .company-logo { display: none; }

    .footer-arc
    {
        height: 300px; width: 500px;
        bottom: -175px; left: 50%;
        transform: translateX(-50%);
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
    }

    footer .container>div:nth-child(2) { width: auto; }

    .social-links
    {
        width: 250px;
        margin: 0 auto;
        justify-content: space-between;
    }

    .social-links img { height: 35px; }

    footer .container>div:nth-child(4)
    {
        margin: 0 auto;
        text-align: center;
    }
}

@media only screen and (max-width: 768px)
{
    
    footer .container { min-height: 500px; }

    .address { text-align: center; line-height: 2; flex-direction: column; }

    .phone { margin-top: 25px; flex-direction: column; }

    .phone a { margin: 12px 0; }

    .phone img, .address img{ margin: 0 0 12px; }
}

/* Animations */

@media only screen and (min-width: 1024px)
{
    .slide-left-in { animation: slide-left-in 0.75s ease-out 0.25s both; }

    .slide-right-in { animation: slide-right-in 0.75s ease-out 0.25s both; }

    .locate-map.scale-up
    { 
        animation: scale-up 1s ease-out 1s both;
        transform-origin: top left;
    }

    .fade-in { animation: fade-in 1s ease-out 1s both; transform-origin: top center; }

    @keyframes slide-left-in
    {
        from { transform: translateX(-1000px); }
    }

    @keyframes slide-right-in
    {
        from { transform: translateX(1000px); }
    }

    @keyframes scale-up
    {
        from { transform: scale(0,0); }
    }

    @keyframes fade-in
    {
        from { transform: scale(0,0); }
    }
}