/*
nadredenznak.mk
НАДРЕДЕН ЗНАК
Опис: алатка за лесна и брза употреба на буквите со надреден знак во македонскиот јазик.
Автор: Коста Стаматовски
http://stamatovski.com
Верзија: 1.0
*/

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

html {
	width: 100%;
	height: 100%;
}

a {
	color: #ffffff;
	text-decoration: none;
	
	transition: 0.2s ease-in-out;
}

body {
	width: 100%;
	height: 100%;
	color: #ffffff;
	font-family: 'Rubik', Helvetica, Arial, sans-serif;
	font-weight: 300;	
	margin: 0;
	padding: 0;
}

#header {
	width: 100%;
	height: 14%;
	background: #192644;
	display: table;
	
	transition: 0.4s ease-in-out;
}

#header-levo {
	width: 25%;
	display: table-cell;
}

#header-sredina {
	width: 50%;
	font-size: 1.8em;
	letter-spacing: 3px;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

#header-sredina:hover {
	cursor: default;
}

#header-desno {
	width: 25%;
	font-size: 0.6em;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-align: right;
	display: table-cell;
	padding-right: 30px;
	vertical-align: middle;
}

#header-desno a {
	color: #ffffff;
	text-decoration: none;
	padding: 10px 10px 10px 13px;
	border: 1px solid #ffffff;
	border-radius: 5px;

	transition: 0.3s ease-in-out;
}

#header-desno a:hover {
	background-color: #ffffff;
	color: #192644;
}

#e {
	background: #e4e6e7;
	color: #192644;
	width: 50%;
	height: 86%;
	display: table;
	float: left;
	text-align: center;
	font-size: 19em;
	cursor: pointer;
	
	transition: 0.3s ease-in-out;
}

#e:hover {
	background: #ffffff;
}

#i {
	background: #d0d4d6;
	color: #192644;
	width: 50%;
	height: 86%;
	display: table;
	float: right;
	text-align: center;
	font-size: 19em;
	cursor: pointer;

	transition: 0.3s ease-in-out;
}

#i:hover {
	background: #ffffff;
}

span {
	display: table-cell;
	vertical-align: middle;
}

#za-stranicata {
	background: #e4e6e7;
	color: #192644;
	width: 100%;
	height: 86%;
	display: table;
	float: left;
	padding-top: 50px;
}

#za-stranicata p {
	width: 55%;
	margin: 0 auto 25px auto;
	text-align: left;
	font-size: 1.25em;
	letter-spacing: 0.8px;
	line-height: 2.0em;
}

#za-stranicata a {
	color: #192644;
	transition: 0.3s ease-out;
	border-bottom: 8px solid #c6cacc;
	display: inline-block;
	line-height: 0.6;
}

#za-stranicata a:hover {
	border-bottom: 8px solid #a7adb1;
}

#golemi-mali {
	width: 100%;
	position: fixed;
	overflow: hidden;
	z-index: 9999;
	bottom: 25px;
	display: table;
	pointer-events: none;
	
	transition: 0.4s ease-in-out;
}

#golemi-mali-levo {
	width: 30%;
	display: table-cell;
}

#golemi-mali-sredina {
	width: 40%;
	font-size: 0.6em;
	font-weight: 500;
	letter-spacing: 1.25px;
	text-align: center;
	padding: 10px 14px;
	display: table-cell;
	vertical-align: middle;
}

#golemi-mali-sredina a {
	color: #ffffff;
	text-decoration: none;
	background: #192644;
	padding: 10px 14px;
	border-radius: 4.5px;
	pointer-events: auto;

	transition: 0.3s ease-in-out;
}

#golemi-mali-sredina a:hover {
	background-color: #ffffff;
	color: #192644;
}

#golemi-mali-desno {
	width: 30%;
	display: table-cell;
}

.fadeIn {
	animation: fadeIn 0.4s ease-in-out;
	-webkit-animation: fadeIn 0.4s ease-in-out;
	-ms-animation: fadeIn 0.4s ease-in-out;
}



@media only screen and (max-width: 768px) {

 #header {
 	height: 18%;
 }
 
 #header-levo {
	display: none;
 }

 #header-sredina {
	width: 0vw;
	font-size: 1.5em;
	letter-spacing: 1.15px;
	text-align: left;
	padding-left: 18px;
 }

#header-desno {
	width: 0vw;
	font-size: 0.4em;
	letter-spacing: 1.15px;
	padding-right: 20px;
 }
 
 #header-desno a {
 	padding: 8px 8px 8px 10px;
 }
 
 #e, #i {
	font-size: 10em;
	padding-bottom: 15%; 	
 }
 
 #za-stranicata {
 	padding-bottom: 70px;
 }
 
 #za-stranicata p {
	width: 71%;
	font-size: 1.05em;
	line-height: 2.0em;
 }

}