/**
 * 
 * Color Palette for this project
 * 
 * #00abe1 - jasnoniebieski
 * #2cbaea - najjasniejszy niebieski
 * #161f6e - ciemnoniebieski
 * #fff - bialy
 * 
 * */

/**
 * 
 * 
 *  Custom Radio - Secondary
 * 
 * 
 * */

 /* Customize the label (the container) */
.radio-group-secondary {
  display: block;
  position: relative;
  padding-left: 50px;
  padding-top: 2px;
  margin-top: 10px;
  margin-bottom: 20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radio-group-secondary input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.radio-group-secondary .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: none;
  border: 2px solid #121b6a;
  box-sizing: border-box;
  border-radius: 50%;
  transition: 0.2s all;
}

/* On mouse-over, add a grey background color */
.radio-group-secondary:hover input ~ .checkmark {
  background-color: #121b6a;
}

/* When the radio button is checked, add a blue background */
.radio-group-secondary input:checked ~ .checkmark {
  background-color: #121b6a;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-group-secondary .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

 /**
 * 
 * 
 *  Custom Checkbox - Primary
 * 
 * 
 * */

.checkbox-group-primary {
  display: block;
  position: relative;
  padding-left: 50px;
  padding-top: 2px;
  margin-top: 10px;
  margin-bottom: 20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox-group-primary input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-group-primary .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 15px;
  transition: 0.2s all;
}

.checkbox-group-primary:hover input ~ .checkmark {
  background-color: #ddd;
}

.checkbox-group-primary input:checked ~ .checkmark {
  background-color: #161f6e;
}

.checkbox-group-primary .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

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

.checkbox-group-primary .checkmark:after {
  left: 9px;
  top: 6px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/**
 * 
 * 
 *  Primary Button 
 * 
 * 
 * */

.button-blue {
	border: none;
	background: #161f6e;
	border-radius: 25px;
	padding: 12px 30px;
	color: #fff !important;
	cursor: pointer;
	font-size: 1.05em;
  box-sizing: border-box;
  font-family: 'Roboto Sans', sans-serif !important;
  user-select: none;
}

.button-blue:hover {
	color: #fff !important;
}

/**
 * 
 * 
 *  Secondary Button 
 * 
 * 
 * */

.button-white {
	border: none;
	background: #fff;
	color: #161f6e;
	border-radius: 25px;
	padding: 12px 30px;
	cursor: pointer;
	font-size: 1.05em;
  box-sizing: border-box;
  font-family: 'Roboto Sans', sans-serif !important;
  user-select: none;
}

.button-white:hover {
	color: #161f6e !important;
}

/**
 * 
 * 
 *  Green Button 
 * 
 * 
 * */

.button-green {
  border: none;
  background: #1ba864;
  border-radius: 25px;
  padding: 12px 30px;
  color: #fff !important;
  cursor: pointer;
  font-size: 1.05em;
  box-sizing: border-box;
  font-family: 'Roboto Sans', sans-serif !important;
  user-select: none;
}

.button-green:hover {
  color: #fff !important;
}

/**
 * 
 * 
 *  Optional Button 
 * 
 * 
 * */

.button-lightblue {
  border: none;
  background: #00abe1;
  border-radius: 25px;
  padding: 12px 30px;
  color: #fff !important;
  cursor: pointer;
  font-size: 1.05em;
  box-sizing: border-box;
  font-family: 'Roboto Sans', sans-serif !important;
  user-select: none;
}

.button-lightblue:hover {
  color: #fff !important;
}

/**
 * 
 * 
 *  Inactive button
 * 
 * 
 * */

.button-inactive {
  border: none;
  background: #ccc;
  border-radius: 25px;
  padding: 12px 30px;
  color: #fff !important;
  cursor: pointer;
  font-size: 1.05em;
  box-sizing: border-box;
  font-family: 'Roboto Sans', sans-serif !important;
  user-select: none;
}

.button-inactive:hover {
  color: #fff !important;
}

/**
 * 
 * 
 *  Different Font Size
 * 
 * 
 * */

@media(max-width: 767px) {

  .f-huge {
    font-size: 2.25em;
  }

  .f-big {
    font-size: 1.8em;
  }

  .f-medium {
    font-size: 1.4em;
  }

  .f-smedium {
    font-size: 1.2em;
  }

  .f-title {
    font-size: 1.1em;
  }

  .f-normal {
    font-size: 1em;
  }

  .f-small {
    font-size: 0.9em;
    line-height: 1.8em;
  }

  .f-tiny {
    font-size: 0.8em;
    line-height: 1.6em;
  }

}

 @media(min-width: 768px) and (max-width: 1023px) {

  .f-huge {
    font-size: 2.5em;
  }

  .f-big {
    font-size: 2em;
  }

  .f-medium {
    font-size: 1.5em;
  }

  .f-smedium {
    font-size: 1.2em;
  }

  .f-title {
    font-size: 1.1em;
  }

  .f-normal {
    font-size: 1em;
  }

  .f-small {
    font-size: 0.9em;
    line-height: 1.8em;
  }

  .f-tiny {
    font-size: 0.8em;
    line-height: 1.6em;
  }

}

@media(min-width: 1024px) and (max-width: 1365px) {

  .f-huge {
    font-size: 3em;
  }

  .f-big {
    font-size: 2.5em;
  }

  .f-medium {
    font-size: 2em;
  }

  .f-smedium {
    font-size: 1.25em;
  }

  .f-title {
    font-size: 1.1em;
  }

  .f-normal {
    font-size: 1em;
  }

  .f-small {
    font-size: 0.9em;
    line-height: 1.8em;
  }

  .f-tiny {
    font-size: 0.8em;
    line-height: 1.6em;
  }

}

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

  .f-huge {
    font-size: 3.5em;
  }

  .f-big {
    font-size: 2.75em;
  }

  .f-medium {
    font-size: 2.25em;
  }

  .f-smedium {
    font-size: 1.4em;
  }

  .f-title {
    font-size: 1.15em;
  }

  .f-normal {
    font-size: 1em;
  }

  .f-small {
    font-size: 0.9em;
    line-height: 1.8em;
  }

  .f-tiny {
    font-size: 0.8em;
    line-height: 1.6em;
  }

}

@media(min-width: 1600px) and (max-width: 1919px) {

  .f-huge {
    font-size: 4em;
  }

  .f-big {
    font-size: 3em;
  }

  .f-medium {
    font-size: 2.5em;
  }

  .f-smedium {
    font-size: 1.5em;
  }

  .f-title {
    font-size: 1.2em;
  }

  .f-normal {
    font-size: 1em;
  }

  .f-small {
    font-size: 0.9em;
    line-height: 1.8em;
  }

  .f-tiny {
    font-size: 0.8em;
    line-height: 1.6em;
  }

}

@media(min-width: 1920px) {

  .f-huge {
    font-size: 5em;
  }

  .f-big {
    font-size: 4em;
  }

  .f-medium {
    font-size: 3em;
  }

  .f-smedium {
    font-size: 2em;
  }

  .f-title {
    font-size: 1.25em;
  }

  .f-normal {
    font-size: 1em;
  }

  .f-small {
    font-size: 0.9em;
    line-height: 1.8em;
  }

  .f-tiny {
    font-size: 0.8em;
    line-height: 1.6em;
  }

}





/**
 * 
 * 
 *  Text Links
 * 
 * 
 * */

.link-darkblue {
	color: #161f6e;
}

.link-darkblue:hover {
	color: #161f6e;
}

.link-lightblue {
  color: #00abe1;
}

.link-lightblue:hover {
  color: #00abe1;
}

.link-white {
	color: #fff;
}

.link-white:hover {
	color: #fff;
}

/**
 * 
 * 
 *  Text Colors
 * 
 * 
 * */

.text-white {
	color: #fff;
}

.text-darkblue {
	color: #161f6e;
}

.text-lightblue {
  color: #00abe1;
}

/**
 * 
 * Custom Input/Textarea layout
 * 
 * */

.textarea-primary {
  background: #f9f9f9;
  border-radius: 25px;
  border: none;
  resize: none;
  padding: 25px;
  height: 200px;
  box-sizing: border-box;
}