/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body
{
   font-family: 'empik_proregular';
}

h1
{
   text-transform: uppercase;
   font-weight: 700;
   margin-top: 10px;
   margin-bottom: 20px;
   color: #1c1c1a;
   font-family: 'empik_probold';
   font-size: 4.1rem;
}

.register-h
{
   text-transform: uppercase;
   font-weight: 700;
   margin-top: 10px;
   margin-bottom: 20px;
   color: #1c1c1a;
   font-family: 'empik_probold';
   font-size: 2.5rem;
}

.bg2
{
   width: 100%;
   transform: scale(1.05);
}

.form-bottom
{
   text-align: center;
}

.has-error{
   color: #ff0500;
}
.has-error>input
{
   border-color: #ff0500 !important;
}

.container{
   min-height: 90vh;
}

@media (min-width: 768px)
{
   .container {
      background: url('../bg.jpg');
      background-size: 100%;
      background-position: right;
      background-position-y: top;
      background-repeat: no-repeat;
   }
   h1
   {
      margin-top: 5px;
      margin-bottom: 20px;
   }

   .form-bottom
   {
      display: flex;
      justify-content: space-between;
   }
}

@media (min-width: 992px)
{
   .container {
      width: 100%;
      background: url('../bg.jpg');
      background-size: 100%;
      background-position: right;
      background-position-y: top;
      background-repeat: no-repeat;
   }
   h1
   {
      margin-top: 45px;
      margin-bottom: 64px;
   }
   .bg2
   {
      display: none;
   }

   .form-bottom
   {
      display: flex;
      justify-content: space-between;
   }
}

@media (min-width: 1200px)
{
   .container {
      width: 1200px;
      background: url('../bg.jpg');
      background-size: 100%;
      background-position: right;
      background-position-y: top;
      background-repeat: no-repeat;
   }
   h1
   {
      margin-top: 45px;
      margin-bottom: 64px;
   }
   .bg2
   {
      display: none;
   }

   .form-bottom
   {
      display: flex;
      justify-content: space-between;
   }
}

.form-group {
   margin-bottom: 15px;
   position: relative;
}

.form-control {
   border: 1px solid #1f74a3;
   border-radius: 50px;
   padding: 5px 25px;
   height: 50px;
   font-size: 19px;
   color: black;
}

input[required] + label {
   color: #000;
   position: absolute;
   left: 26px;
   top: 11px;
   font-size: 19px;
   font-weight: 500;
}

input[required] + label:after {
   content:'*';
   color: red;
   padding: 0 5px;
}

/* show the placeholder when input has no content (no content = invalid) */
input[required]:invalid + label {
   display: inline-block;
}

/* hide the placeholder when input has some text typed in */
input[required]:valid + label{
   display: none;
}

.error
{
   padding-left: 15px;
   font-weight: 700;
   color: #ff2e2e;
   display:none;
}

/* Checkbox */

.checkbox-container {
   display: block;
   position: relative;
   padding-left: 40px;
   margin-bottom: 12px;
   cursor: pointer;
   font-weight: 500;
}
.checkbox-required::before {
   content: '*';
   color: red;
   font-size: 13px;
   position: absolute;
   left: 25px;
   top: 0;
   font-weight: 700;
}

.checkbox-container input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
}

.checkmark {
   position: absolute;
   top: 8px;
   left: 0;
   height: 20px;
   width: 20px;
   border-radius: 50%;
   border: 1px solid #1f74a3;
}

.checkbox-container:hover input ~ .checkmark {
   border: 1px solid #1f74a3;
}

.checkbox-container input:checked ~ .checkmark {
   border: 1px solid #1f74a3;
}

.checkmark:after {
   content: "";
   position: absolute;
   display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
   display: block;
}

.checkbox-container .checkmark:after {
   top: 4px;
   left: 4px;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #e20613;
}

.required-info>span
{
   color: red;
   font-size: 27px;
}
button
{
   background: #1f74a3;
    border: none;
    color: white;
    font-weight: 700;
    font-size: 30px;
    padding: 5px 40px;
    border-radius: 50px;
}

button:focus,
button:hover,
button:active
{
   border: none;
   outline: none;
   background: #327093;
}

.rodo
{
   margin: 0px 0px 10px 40px;
   font-size: 11px;
}