/* Reset css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
html {
scroll-padding-top: 80px;
scroll-behavior: smooth;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* --------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Fonts import */
@font-face {
font-family: 'Nunito-black';
src: url('../fonts/Nunito-Black.ttf');
}
@font-face {
font-family: 'Nunito-Bold';
src: url('../fonts/Nunito-Bold.ttf');
}
@font-face {
font-family: 'Nunito-SemiBold';
src: url('../fonts/Nunito-SemiBold.ttf');
}
@font-face {
font-family: 'Nunito-Regular';
src: url('../fonts/Nunito-Regular.ttf');
}
@font-face {
font-family: 'Nunito-Light';
src: url('../fonts/Nunito-Light.ttf');
}
/* --------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* CSS Variables */
:root {
--primary: #5248AF;
--secondary: #0CA6AA;
--black: #000000;
--white: #ffffff;
}
/* --------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Global css */
body, html{
height: 100%;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100vw;
height: 100vh;
overflow: hidden;;
font-family: 'Nunito-Regular';
font-size: 16px;
background-color: #ffffff;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ededed;
}
::-webkit-scrollbar {
width: 8px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #e0dcdc;
}
::-webkit-scrollbar-thumb:hover {
border-radius: 10px;
background-color: #ccc;
}
a {
text-decoration: none;
color: unset;
cursor: pointer;
}
.button{
font-family: 'Nunito-Bold';
font-size: 1rem;
border-radius: 10px;
border: none;
padding: 5px 20px;
box-shadow: none;
display: flex;
align-items: center;
height: 36px;
width: fit-content;
outline: none;
cursor: pointer;
transition: .2s linear all;
justify-content: center;
}
.button.disabled{
opacity: 0.3;
}
.button-primary{
background: #5248AF;
color: #ffffff;
}
.button-secondary{
background: #0CA6AA;
color: #ffffff;
}
.button:hover{
box-shadow: 0px 4px 10px rgba(82, 72, 175, 0.5); ;
}
.button.disabled:hover{
box-shadow: none;
}
.button i{
margin-right: 10px;
font-size: 14px;
}
h1{
font-size: 2.4rem;
font-family: 'Nunito-black';
color: #5248AF;
}
h2{
font-size: 2rem;
font-family: 'Nunito-black';
color: #5248AF;
}
.container{
padding: 0px 10px;
}
.main-content{
height: calc(100vh - 40px);
width: calc(100vw - 40px);
background-image: url("../images/eupis-bgd.png");
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-y: auto;
}
@media(max-width: 1400px){
.main-content{
background-image: url("../images/eupis-bgd-md.png");
background-size: cover;
}
}
@media(max-width: 768px){
.main-content{
background-image: url("../images/eupis-bgd-sm.png");
}
}
.logo-wrapper{
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.ministartstvo-logo-wrapper{
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
@media(max-width: 1200px){
.logo img{
max-height: 40px;
}
.ministarstvo-logo img{
max-height: 78px;
}
}
.cards{
display: flex;
align-items: baseline;
justify-content: center;
}
.card-wrapper{
margin: 20px 30px;
flex: 1;
max-width: 380px;
}
.card{
background-color: #ffffff;
padding: 40px 30px 50px 30px;
position: relative;
border-radius: 15px 15px 20px 20px;
box-shadow: 0px 4px 75px rgba(34, 34, 101, 0.5);
display: block;
transition: all .1s ease-out;
min-height: 180px;
}
.card-button:hover{
transition: .3s all ease;
transform: translateY(-2px);
box-shadow: 0px 4px 50px rgb(34, 34, 101);
cursor: pointer!important;
}
.card-button:hover h1, .card-button:hover p{
color: #0CA6AA;
transition: .3s all ease;
cursor: pointer;
}
.card-button-disabled h1, .card-button-disabled p {
color: #a39ed5!important;
}
.card-button-disabled {
pointer-events: none;
user-select: none;
}
.card:not(.card-button-disabled):hover {
box-shadow: 0px 15px 42px 15px rgba(34, 34, 101, .8);
transform: translateY(-5px);
}
.card h1, .card p{
color: #5248AF;
margin: 15px 0px;
text-align: center;
}
.card p{
font-family: "Nunito-bold";
font-size: 1.4rem;
}
.card .button{
margin: 40px auto 0px auto;
}
/*.card-border{
background-color: #5248AF;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 13px;
}*/
@media(max-width: 992px){
.main-content{
background-size: cover;
}
.cards{
flex-direction: column;
align-items: center;
}
}
@media(max-width: 768px){
.cards{
padding: 20px 0px;
}
.card{
padding: 40px 15px;
}
.card h1{
font-size: 2rem;
}
}
.upis-info{
color: #ffffff;
text-align: center;
margin: 10px 0px;
line-height: 1.3;
}
/* Interent Explorer style */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.button{
height: auto;
display: table;
padding: 12px 20px;
}
.card-wrapper{
flex: none;
}
.cards{
flex-direction: row;
flex-wrap: wrap;
}
}