/* 
    Bilyana Raeva website stylesheet
    zoom@zoomdesign.bg
    Stanislav Evstatiev
*/

@charset "utf-8";

* { margin: 0; padding: 0; scroll-behavior: smooth; }

html, body {
	font-family:"Verdana",sans-serif;
	font-style: normal;
	font-size: 12pt; 
	font-weight: 300;
	text-align: center;
	line-height: 1.5em;
	scroll-behavior: smooth;
	width: 100%;
	height: 100%;
	background-color:#EFF4FA;
	color: #000000;
}

h1, h2, h3 {	color: #6F9F9F;}
div {transition: all .5s ease-in-out;}

img {  border-style: none; outline: none;}
a { color:#FFAA00; text-decoration:none; border-style: none; outline: none;}

a:link { color:#727D22; text-decoration:none; font-weight: 700; font-style: bold; }
a:visited { color:#727D22; text-decoration:none; font-weight: 700; font-style: bold;}
a:active { color:#FF0000; text-decoration:none; font-weight: 700; font-style: bold; }
a:hover { color:#FFFFFF; text-decoration:none; font-weight: 700; font-style: bold; }


#links {
	width: 9%;
	position: absolute;
	top: 4%;
	right: 10px;
	min-width: 140px;
}

#links img {
	width: 100%;
	height: 100%;
	margin-bottom: 10%;
}

.text-quote {
	width: 100%;
	min-width: 100%;
	/* text-shadow: 2px 2px 5px #cc9933; */
	bottom: 16px;
	right: 2em;
	text-align: center;
}

.text-quote p {
	margin: 2em 10% 2em 10%;
	text-align: center;
}

/* Animation for the roller div */
@-webkit-keyframes rollerit {
	  0% { background-image:url("images/Bilyana_1280_01.jpg");}
	 15% { background-image:url("images/Bilyana_1280_01.jpg");}
	 20% { background-image:url("images/Bilyana_1280_02.jpg");}
	 35% { background-image:url("images/Bilyana_1280_02.jpg");}
	 40% { background-image:url("images/Bilyana_1280_03.jpg");}
	 55% { background-image:url("images/Bilyana_1280_03.jpg");}
	 60% { background-image:url("images/Bilyana_1280_04.jpg");}
	 75% { background-image:url("images/Bilyana_1280_04.jpg");}
 	 80% { background-image:url("images/Bilyana_1280_05.jpg");}
	 95% { background-image:url("images/Bilyana_1280_05.jpg");}
	100% { background-image:url("images/Bilyana_1280_01.jpg");}
}
@-moz-keyframes rollerit {
	  0% { background-image:url("images/Bilyana_1280_01.jpg");}
	 15% { background-image:url("images/Bilyana_1280_01.jpg");}
	 20% { background-image:url("images/Bilyana_1280_02.jpg");}
	 35% { background-image:url("images/Bilyana_1280_02.jpg");}
	 40% { background-image:url("images/Bilyana_1280_03.jpg");}
	 55% { background-image:url("images/Bilyana_1280_03.jpg");}
	 60% { background-image:url("images/Bilyana_1280_04.jpg");}
	 75% { background-image:url("images/Bilyana_1280_04.jpg");}
 	 80% { background-image:url("images/Bilyana_1280_05.jpg");}
	 95% { background-image:url("images/Bilyana_1280_05.jpg");}
	100% { background-image:url("images/Bilyana_1280_01.jpg");}
}
@keyframes rollerit {
	  0% { background-image:url("images/Bilyana_1280_01.jpg");}
	 15% { background-image:url("images/Bilyana_1280_01.jpg");}
	 20% { background-image:url("images/Bilyana_1280_02.jpg");}
	 35% { background-image:url("images/Bilyana_1280_02.jpg");}
	 40% { background-image:url("images/Bilyana_1280_03.jpg");}
	 55% { background-image:url("images/Bilyana_1280_03.jpg");}
	 60% { background-image:url("images/Bilyana_1280_04.jpg");}
	 75% { background-image:url("images/Bilyana_1280_04.jpg");}
 	 80% { background-image:url("images/Bilyana_1280_05.jpg");}
	 95% { background-image:url("images/Bilyana_1280_05.jpg");}
	100% { background-image:url("images/Bilyana_1280_01.jpg");}
}
#roller {
	position: relative;
	width: 100%;
	height:60%;
	min-height: 420px;
	background-image:url("images/Bilyana_1280_01.jpg");
	background-size: cover;
	background-position: 50%;
	margin-bottom: 1em;
	-webkit-animation: rollerit 10s infinite linear;
	-moz-animation-name: rollerit 10s infinite linear;
	animation: rollerit 10s infinite linear;
	overflow: hidden;
}

#bilyana-raeva-title {
	position: absolute;
	font-size: 4em;
	font-family: Lobster;
	font-style: normal;
	font-variant: normal;
	font-weight: 700;
	transition:font-size 0.3s linear;
	bottom: .5em;
	left: .2em;
	text-align: left; 
	color: white;
	text-shadow: 2px 2px 5px black;
}

.floating-blocker {
	margin-top:-4px;
	float: left;
	width: 50%;
	display: block;
	overflow: hidden;
}

.floating-blocker iframe{
	width: 80%;
	height: 80%;
	min-height: 360px;
}


summary {
	color: #6F9F9F;
	position: absolute;
	right: 10%;
	}

[open] summary {
  bottom: -1.5em;

}

summary::before {
	
	content: "Покажи повече";
}

[open] summary::before {
  content: "Покажи по-малко";
}

details {
  display: inline;
}

.more-text {
  position: relative;
  margin-bottom: 2em;
}




/*
.new-kid-block {
	background-size: cover; 
	width:100%; 
	min-width: 100%; 
	border: solid 4px white;
	padding-bottom: 50%; 
	position:relative; 
	cursor:pointer; 
	overflow: hidden;
}
*/

@media all and (max-width: 1024px) {
	#bilyana-raeva-title {font-size: 3.5em;}
}
@media all and (max-width: 800px) {
	#bilyana-raeva-title {font-size: 3em;}
	.floating-blocker {float: none; width: 100%;}
}
@media all and (max-width: 640px) {
#roller {margin-bottom: 5em; overflow: visible ;}
#links {width: 100%; height: 3.2em; bottom: -3.4em; top: auto; left: 0px; text-align: center; overflow: visible ;}
#links img {display:inline; margin-right: 3%; width:20%;}
}

@media all and (max-width: 480px) {
#bilyana-raeva-title {font-size: 2.5em;}
#links img {display:inline; margin-right: 1%; width:20%; height: auto;}
#roller {min-height: 300px;}
}