#content{
    grid-template-rows: 5em 2.5em auto 20vh;
    grid-row-gap: 1em;
}
main{display:block; position: relative; padding-top:1em;}

/* # ec5353 */
/* # 17FF8B */
/* bilo # 00bf39 sad je #3dc9c5*/
h1{ color: #3dc9c5; }
h6 {
    font-size: 25px;    margin: 0;    font-family: Montserrat, sans-serif;    font-weight: 500;

}
.forms{ position:relative; width:600px; height:300px; margin: 2em auto; left:0; transition: left 300ms; }
.grayBox {
    display: grid;    grid-template-columns: 1fr 10% 1fr;
    height: 100%;    width: 100%; 
    background: rgba(0,0,0,0.75);    box-shadow: 0 0 5px 3px rgba(0,0,0,0.2);
    transition: all 500ms ease-in-out; color:#3dc9c5;

}
    .grayBox .left, .grayBox .right {
        text-align: center;    display: grid;    padding: 1em;    align-items: center;
        justify-items: center;
    }    
    
    .grayBox p {
        font-size: 16px;    margin: 15px 0 0 0;    color: white;    font-family: Montserrat, sans-serif;
        font-weight: 300;
    }
    .grayBox button {
        font-size: 16px;    margin: 25px 0 0 0;       border: 1px solid #3dc9c5;    background: transparent;
        font-family: Montserrat, sans-serif;    padding: 8px 20px;    border-radius: 5px;    cursor: pointer;
        transition: all 300ms ease-in-out; color:#3dc9c5;
        /*  */
    }
        .grayBox button:hover {
            background: #3dc9c5;    color: rgba(0,0,0,0.75);
        }

main div.whiteBox {
    box-sizing: border-box;    padding: 0 .5em;    display: grid;    align-items: center;    justify-items: center;
    position: absolute;    left: 47%;   top:-3%;    height: 106%;    width: 50%;   
    background: white;    box-shadow: 0 0 5px 3px rgba(0,0,0,0.2);    
    transition: all 500ms ease-in-out;
    opacity:1;  color:#ef7966;
}

        main div.whiteBox .container {
            text-align: center; position:relative; width:80%;  height:80%;
        }
        main div.whiteBox #signInForm, main div.whiteBox #signUpForm, .otherFieldsForm .form {
            border: 3px double #ef7966;
            padding: 1em;  position: absolute; top:0; left:0; right:0; bottom:0;
            transition: opacity 500ms ease-in-out;
        }
        main div.whiteBox #signInForm{ z-index:1; }
        main div.whiteBox #signUpForm{ opacity:0; }
        main div.whiteBox input, .otherFieldsForm input, .otherFieldsForm textarea {
            text-align: left;    font-size: 16px;   box-sizing: border-box;    font-family: Montserrat, sans-serif;
            border: 1px solid #ef7966;    border-radius: 3px;       width: 100%;
            padding: 5px;    transition: all 300ms ease-in-out;
        }
        main div.whiteBox input:focus, .otherFieldsForm input:focus, .otherFieldsForm textarea:focus {
            background: rgba(0,0,0,0.05);
        }
        main div.whiteBox label, .otherFieldsForm label {
            display: block;    margin: 8px 0 2px 0;       font-family: Montserrat, sans-serif;
            font-size: 14px;    box-sizing: border-box;    text-align: left;
        }
        main div.whiteBox label:first-of-type, .otherFieldsForm label:first-of-type {
            margin-top: 1em;
        }
        main div.whiteBox .forgotPassword {
            font-size: 12px;    font-family: Montserrat, sans-serif;      margin-top: 16px;
            text-decoration: underline;    text-decoration-style: dotted;    cursor: pointer;
        }
        main div.whiteBox .ellipse, .otherFieldsForm .ellipse {
            font-size: 16px;    margin-top:23px;    color: white;    border: 1px solid #ef7966;
            background: #ef7966;    font-family: Montserrat, sans-serif;    padding: 8px 20px;
            border-radius: 500px;   cursor: pointer;    transition: all 300ms ease-in-out;
            clear:both;
        }
        main div.whiteBox .ellipse:hover, .otherFieldsForm .ellipse:hover {
            color: white;
            box-shadow: 0 0 8px 0 #ef7966;
        }

.otherFieldsForm {
    text-align:center; position:absolute;
    width:350px; height:450px; left:-350px; margin-top:1em;
    transition: all 300ms; background:white !important; 
}
.otherFieldsFormPravno{   height:500px; }
.otherFieldsForm label[for="Pib"], .otherFieldsForm input[name="Pib"]{ display:none;  }
.otherFieldsFormPravno label[for="Pib"], .otherFieldsFormPravno input[name="Pib"]{ display:block;  }

.otherFieldsFormMoveIn{
    position:relative;
    left:50%; transform:translateX(-50%);
}
    .nepravilno_polje{  box-shadow:10px 10px 5px 0px rgba(0,0,0,0.75);   }
    .otherFieldsFormNar{ height:494px; width:700px; }
    .otherFieldsFormNar h6{ font-size:22px;}
    .otherFieldsFormNar a{ color:blue; }
    .otherFieldsFormNar .obavezno {
        width: 45%; float:left;
    }
    .extra{ display:none; }
    .otherFieldsFormNar .extra{ 
        display:block;  float:right; width:45%;
    }
    .otherFieldsFormNar textarea{ 
        height:245px;
        /*height:295px; */
    }
@media screen and (max-width:750px){
    .otherFieldsFormNar { 
        width:600px;
    }
}
@media screen and (max-width:600px){
    #content{ grid-template-rows: 5em auto auto 20vh; }
    .forms{
        width:96%; height:650px; margin: 2em auto;
    }
    .grayBox {
        grid-template-columns: 1fr; 
    }
    main div.whiteBox { left: -1%; top: 45%; height: 53%; width: 102%; }
    main div.whiteBox .ellipse {  margin-top: 26px; }
    main div.whiteBox label { margin-top: 17px; }
    main div.whiteBox .forgotPassword { margin-top:24px; }
    .otherFieldsFormNar { 
        width:450px;
    }
}
@media screen and (max-width:600px){
    .otherFieldsFormNar { 
        width:100%; height:900px; 
    }
    .otherFieldsFormNar .obavezno{ width:95%; float:none; } 
    .otherFieldsFormNar .extra{ width:95%; float:none; }
    .otherFieldsFormNar .ellipse{ position: absolute; bottom:1em; right: 1em;  }
}
@media screen and (max-width:360px){
    main div.whiteBox .container { width:90%; height:85%; }
    .otherFieldsForm { width:320px; }
}