/*
====================================================================
MEDIA QUERY CSS
CSS za definisanje ponašanja elemenata u DOM-u
CONTACT PAGE
Sindiri Studio 
v1.0
Miloš Krčobić
=====================================================================
*/


/*
======================================================================
OVA MEDIA QUERY PRAVILA SE GENERALNO VECINOM ODNOSE NA PROMENU FONTOVA,
VELICINU IKONICA, KAO I VELICINU SAME FORME, PROBAO SAM DA MENJAM SAMO
VELICINU FONTA U BODY DELU, NIJE HTELO, PA SAM MENJAO MANUALNO ZA SVAKI
OD ELEMENATA
======================================================================
*/

/*
============================================================
KONTROLNA TACKA KOJA REGULISE MARGINU U FOOTER-U
============================================================
*/
@media only screen and (max-width: 1900px)
{.margin2{margin-right: 6%;}}

/*
============================================================
KONTROLNA TACKA KOJA REGULISE MARGINU U FOOTER-U
============================================================
*/
@media only screen and (max-width: 1801px)
{
    .margin2{margin-left: 3%;}
}

/*
============================================================
KONTROLNA TACKA KOJA REGULISE MARGINU U FOOTER-U
============================================================
*/
@media only screen and (max-width: 1750px)
{
    .margin2{margin-right: 0%;}
}


@media only screen and (max-width: 1520px) 
{
    .info
    {margin-top: -3.7rem;}
    .column_title
    {font-size: 1.7rem;}
    .column_title1
    {font-size: 1.7rem;}
    .column_title2
    {font-size: 1.7rem;}

}

@media only screen and (max-width: 1400px)
{
    .title
    {font-size: 44px;}

    .text1
    {font-size: 18px;}

    .text2
    {font-size: 18px;}

    .text3
    {font-size: 18px;}

    .forma
    {height: 538px;}

    .name_in::-webkit-input-placeholder 
    { font-size: 18px;}
    .name_in::-moz-placeholder 
    { font-size: 18px;}
    .name_in:-ms-input-placeholder 
    {font-size: 18px;}


    .mail_in::-webkit-input-placeholder 
    { font-size: 18px;}
    .mail_in::-moz-placeholder 
    { font-size: 18px;}
    .mail_in:-ms-input-placeholder 
    {font-size: 18px;}

    .phone_in::-webkit-input-placeholder 
    { font-size: 18px;}
    .phone_in::-moz-placeholder 
    { font-size: 18px;}
    .phone_in:-ms-input-placeholder 
    {font-size: 18px;}


    .message_in::-webkit-input-placeholder 
    { font-size: 18px;}
    .message_in::-moz-placeholder 
    { font-size: 18px;}
    .message_in:-ms-input-placeholder 
    {font-size: 18px;}

    .btn_form
    {
        height: 50px;
        width: 172px;
        font-size: 20px;
    }      

    .forma
    {margin-top:-12vw;}

    .name_in
    {font-size: 18px;}

    .mail_in
    {font-size: 18px;}

    .phone_in
    {font-size: 18px;}

    .message_in
    {font-size: 18px;}

}

/*
=================================================
KONTROLNA TACKA KOJA REGULISE NASLOVE U FOOTER-U
=================================================
*/
@media only screen and (max-width: 1340px) 
{
    .column_title
    {font-size: 1.4rem;}

    .column_title1
    {font-size: 1.4rem;}

    .column_title2
    {font-size: 1.4rem;}

    .info
    {font-size: 0.9rem;}

}

@media only screen and (max-width: 1140px) 
{
    .column_title
    {font-size: 1.3rem;}

    .column_title1
    {font-size: 1.3rem;}

    .column_title2
    {font-size: 1.3rem;}

    .info
    {font-size: 0.8rem;}

    .info1
    {font-size: 0.8rem;}
}

@media only screen and (max-width: 1100px)
{
    .mapa 
    {margin-top: -65px;}

}

@media only screen and (max-width: 1025px) 
{
    .column_title
    {font-size: 1.1rem;}

    .column_title1
    {font-size: 1.1rem;}

    .column_title2
    {font-size: 1.1rem;}
}

@media only screen and (max-width: 950px)
{
    .mapa 
    {margin-top: -44px;}

}

@media only screen and (max-width: 900px) 
{
  
    .footer
    {
        padding-left: 0%;
        padding-right: 0%;
        width: 100%;
    }

    .column1
    {margin:auto;text-align: center;width: 100%}

    .column_title {margin: auto;margin-top: 20px;margin-bottom: 15px;font-size: 1.3rem;width: 75%;}
    #column_title1{display: none;}
    #column_title2{display: none;}
    #column_title3{display: none;}

    #info1 {font-size: 0.92rem;}
    #info2 {font-size: 0.92rem;}
    #info3 {margin-top: 5px; font-size: 0.75rem;}

    .column2
    {flex-direction: row;}

    #info4
    {display: none;}
    #info6
    {display: none;}
    #info5
    {text-align: center;margin-top: 20px;margin-bottom: 25px;}

    .column3
    {flex-direction: row;flex: 15%;}

    .fb
    {height: 28px;width: 28px;}

    .in
    {height: 28px;width: 28px;}

    .skype
    {height: 28px;width: 28px;}

    #info7
    {display: none;}
    #info9
    {display: none;}
    #info8
    {text-align: center;margin-top: -20px;}

    .column4
    {flex-direction: column;justify-content: space-between;margin: auto;margin-top: -50px;align-items: center;}

    #info12
    {font-size: 0.72rem;margin-top: 7px;margin-bottom: 14px;}

    #info11
    {display: none;}

    .column_title1
    {margin: 0;}

    .column_title2
    {margin: 0;}

    .info
    {margin: 0;font-size: 0.92rem;}

    .info1
    {margin: 0;}

    .footer
    {flex-direction: column;margin:auto}

    .margin1
    {margin:0;margin-top: 20px;}

    .margin2
    {margin: 0;}

    .socials
    {
        margin-top: 0;
        margin-bottom: 0;
    }
}



@media only screen and (max-width: 850px)
{
    .title
    {font-size: 37px;}

    .text1
    {font-size: 16px;line-height: 20px;}

    .text2
    {font-size: 16px;line-height: 20px;}

    .text3
    {font-size: 16px;line-height: 20px;}


    .name_in::-webkit-input-placeholder 
    { font-size: 16px;}
    .name_in::-moz-placeholder 
    { font-size: 16px;}
    .name_in:-ms-input-placeholder 
    {font-size: 16px;}


    .mail_in::-webkit-input-placeholder 
    { font-size: 16px;}
    .mail_in::-moz-placeholder 
    { font-size: 16px;}
    .mail_in:-ms-input-placeholder 
    {font-size: 16px;}

    .phone_in::-webkit-input-placeholder 
    { font-size: 16px;}
    .phone_in::-moz-placeholder 
    { font-size: 16px;}
    .phone_in:-ms-input-placeholder 
    {font-size: 16px;}


    .message_in::-webkit-input-placeholder 
    { font-size: 16px;}
    .message_in::-moz-placeholder 
    { font-size: 16px;}
    .message_in:-ms-input-placeholder 
    {font-size: 16px;}

    .name_in
    {font-size: 16px;margin-bottom: 1px;}

    .mail_in
    {font-size: 16px;margin-bottom: 1px;}

    .phone_in
    {font-size: 16px;margin-bottom: 1px;}

    .message_in
    {font-size: 16px;}

    .left_part 
    {margin-bottom: 25%;}

    .time
    {margin-bottom: 10px;}

    .location
    {margin-bottom: 10px;}
}

@media (max-width: 800px) 
{
    
    .logo
    {z-index: 20;}
    
    .navbar-links ul
    {
        background-color: rgba(44,58,103,1);
        opacity: 0.95;
        width: 100%;
        margin: auto;
    }
    
    
    .navbar-links ul li a 
    {
        color: white !important;
        font-weight: 600;
        width: 100%;
        margin-right: 0%;
        margin-top: 111px;
        padding-right: 0;
        font-size: 36px;
        margin-bottom: 20px;
    }

    .navbar-links li a {margin-top: 67px;}

    .btn_info
    {background-color: rgba(44,58,103,1);margin-top: -16px !important;}

    .navbar-links ul 
    {z-index: 16;}

    .toggle-button 
    {z-index: 17;}

    .navbar-links.transition 
    {transition: none !important;}

    .navbar-links.active_nav
    {transition: none !important;}

    .forma
    {flex-direction: column; height:650px; margin-top:-11vw; margin-right: 0%; padding-bottom: 3%;}
    
    .left_part
    {margin-bottom: 3%;}

    .right_part_form {margin-bottom: -2%;}

    .div_btn_form {margin: auto;}

    .icon_1
    {width: 40px;height: 40px;}

    .icon_2
    {width: 40px;height: 40px;}

    .icon_3
    {width: 40px;height: 40px;}

    .name
    {margin-bottom: 5px;}
    .phone
    {margin-bottom: 5px;}
    .mail
    {margin-bottom: 5px;}
}


@media only screen and (max-width: 630px)
{
    .navbar-links ul li 
    {text-align: center;margin-right: 0%;}
}

@media only screen and (max-width: 600px)
{
    .info 
    {font-size: 0.9rem;}

    #info1
    {font-size: 0.9rem;}
    
    #info2 
    {font-size: 0.9rem;}
}

@media only screen and (max-width: 520px)
{
    .mapa {margin-top: -31px;}

    .forma {margin-top: -6vw;}

    .btn_form {height: 40px;width: 152px;font-size: 16px;}
}

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

@media only screen and (max-width: 450px)
{
    
    .column4
    {margin-top: -10px;margin-bottom: 15px;}
}

@media only screen and (max-width: 400px)
{
   
    .column4
    {margin-top: 10px;margin-bottom: 25px;}


    
}

@media only screen and (max-width: 380px)
{
    .forma 
    {/*margin-top: 28vw;*/height: 613px;}

}