@font-face {

    font-family: myfonts_nino;

    src: url('bpg_nino_mtavruli_normal.woff') format('woff');

    font-weight: normal;

    font-style: normal;

  }

  

  @font-face {

    font-family: FontAwesome;

    src: url('fontawesome-webfont.eot') format('woff');

    font-weight: normal;

    font-style: normal;

}



  @font-face {

    font-family: myfonts_glaho;

    src: url('bpg_glaho.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}



body {

	margin:0;

	padding:0;

	font-size:13px;

	font-family:myfonts_glaho;

	color:#333333;

	

	

}



#container {

	width:100%;

	margin:0;

	position:absolute;

	

}

#top-gray{

	width:100%;

	background-color:#504d4d;

	height:15px;

}



#top-white{

	width:100%;

	background-color:#fff;

	height:155px;



}



.ukan {

width:200px;

float:right;

}





#top-pink{

	width:100%;

	background-color:#eae5e5;

	

}



#top-red{

	width:100%;

	background-color:#f6cdd3;

	height:150px;

	padding-top:20px;

	

}



#midlle_white, #midlle_pink, #midlle_red {

	width:1100px;

	margin:0 auto;

	overflow:hidden;



}



#midlle_pink img, #midlle_red img{

	border:0;

}



/* Style the search field */



.cont1{

	margin-top:10px;

	float:right;

	width:380px;

	text-align:right;

	padding-left:720px;

}



.example {

	width:200px; float:left;

}

form.example input[type=text] {

  padding: 10px;

  font-size: 13px;

  border: 0px ;

  width: 100px;

  background: #eae5e5;

  color:#504d4d;

  border-radius:5px;

  float:left;

}



/* Style the submit button */

form.example button {

  padding: 0px;

  background: #fff;

  border: 0px;

  cursor: pointer;

  float:left;

  

}





form.example button:hover {

  background: #f6cdd3;

}





/* Clear floats */

form.example::after {

  content: "";

    }





.fa {

  padding: 10px;

  font-size: 13px;

  width: 15px;

  text-align: center;

  text-decoration: none;

  margin: 0px 2px;

  

  }



.fa:hover {

    opacity: 0.7;

}

.fa-facebook {

  background-color: #504d4d;

  color: #fff;

  float:left;



}



.fa-twitter, .fa-envelope{

  background: #504d4d;

  color: #fff;

  float:left;



}





#white_line2{

	width:450px;

	margin-top:15px;

	height:40px;

	float:left;

}



.navigation {

	width:650px;

	float:right;

	font-family:myfonts_nino;

	margin-top:13px;

}



.navigation ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

 

    

}



.navigation li {

  float: left;

  font-family:myfonts_nino;

  list-style:none;







}



.navigation li a {

  display: block;

  color: #504d4d;

  text-align: center;

  padding: 14px 14px;

  text-decoration: none;

  font-family:myfonts_nino;

  font-size:16px;



}

.navigation li a:hover:not(.active) {

  background-color: #fff;

}



.navigation1 {

	width:650px;

	margin-left:25px;

	float:right;

	font-family:myfonts_nino;

	margin-top:13px;

	cursor:default;

}





.navigation1 ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

 

    

}



.navigation1 li {

  float: left;

  font-family:myfonts_nino;

  list-style:none;

  padding: 14px 14px;



}



.navigation1 li a {

  display: block;

  color: #504d4d;

  text-align: center;

  padding: 14px 14px;

  text-decoration: none;

  font-family:myfonts_nino;

  font-size:16px;

  



}



.navigation1 .active {

	color:#ED9AA7;

}



.mainphoto{

		width:410px;

		

		padding:5px 5px 5px 5px;

		margin: auto;

		display:inline-table;

		overflow:hidden;

		float:left;

}





.pickball {

	width:106px;

	height:106px;

	margin-top:120px;

	float:right;

	margin-left:20px;

	margin-right:80px;



}



.pickball img{

	border:0

}



.leqsebi{

	width:650px;

	float:left;

	overflow:hidden;

	margin-left:10px;

	padding-top:25px;

}



.leqsebi1{

	width:650px;

	float:left;

	overflow:hidden;

	margin-left:10px;

}



.leqsebi img{

	vertical-align:middle;

}



.leqsebi a, .leqsebi1 a{

	color:#333333;

	text-decoration:none;

	margin-top:3px;

	margin-bottom:3px;

}



.leqsebi a:hover{

	color:#ED9AA7;

}



.leqsebi1 a:hover{

	color:#ED9AA7;

}





.leqsebi li, .leqsebi1 a {

	list-style:circle; margin-top:6px; margin-bottom:6px;

}



.publist li {

	list-style:circle; margin-top:6px; margin-bottom:6px;

}



.ukan {

width:100%;

text-align:right;

float:right;

margin-bottom:25px;

display:inline;



}



.ukan a{

	color:white;

	text-decoration:none;

}



.ukan a:hover{

	text-decoration:none;

	color:#E66477;

}



.ukan img{

	border:0px

}





h5 {

	font-size:15px;

	font-weight:bold;

}





/* photo gallery */

.header {

  text-align: center;

  padding:16px;

  width:100%;

  margin:0 auto;

  clear:both;



}



.row {

  display: -ms-flexbox; /* IE 10 */

  display: flex;

  -ms-flex-wrap: wrap; /* IE 10 */

  flex-wrap: wrap;

  padding: 0 4px;

}



/* Create two equal columns that sits next to each other */

.column {

  -ms-flex: 45%; /* IE 10 */

  flex: 45%;

  padding: 0 4px;

}



.column img {

  margin-top: 8px;

  vertical-align: middle;

}



/* Style the buttons */

.btn {

  border: none;

  outline: none;

  padding: 10px 16px;

  background-color: #f1f1f1;

  cursor: pointer;

  font-size: 18px;

}



.btn:hover {

  background-color: #ddd;

}



.btn.active9 {

  background-color: #666;

  color: white;

}



.audio td{

	text-align:center;

	width:33%;

}

.audio img {

	border:0;

}

.audio a {

	text-decoration:none;

	color:black;

}



.audio a:hover{

	color:#ED9AA7;

}



.audio.satauri{

	margin-top:5px;

	margin-bottom:3px; font-weight:bold;

}



/* =========================================

   RESPONSIVE LAYOUT — mobile only

   Desktop rules above remain unchanged

   ========================================= */

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

    html, body {

        width: 100%;

        max-width: 100%;

        min-width: 0;

        margin: 0;

        padding: 0;

        overflow-x: hidden;

    }



    #container {

        position: relative;

        width: 100%;

        max-width: 100%;

        min-width: 0;

        margin: 0;

        overflow: hidden;

        box-sizing: border-box;

    }



    #top-gray,

    #top-white,

    #midlle_white,

    #top-pink,

    #midlle_pink,

    #top-red,

    #midlle_red {

        width: 100%;

        max-width: 100%;

        min-width: 0;

        height: auto;

        min-height: 0;

        box-sizing: border-box;

    }



    #top-white {

        padding: 10px 0 14px;

    }



    #midlle_white {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        padding: 10px 12px;

        overflow: visible;

    }



    .cont1 {

        order: 2;

        float: none !important;

        display: flex;

        flex-wrap: wrap;

        align-items: center;

        justify-content: center;

        gap: 8px;

        width: 100% !important;

        margin: 8px 0 0 !important;

        padding: 0 !important;

        text-align: center;

        box-sizing: border-box;

    }



    .cont1 form.example {

        float: none !important;

        display: flex;

        width: 100% !important;

        max-width: 300px;

        margin: 0 auto;

        box-sizing: border-box;

    }



    .cont1 form.example input[type=text] {

        float: none !important;

        flex: 1;

        width: auto !important;

        min-width: 0;

        box-sizing: border-box;

    }



    .cont1 form.example button {

        float: none !important;

    }



    .cont1 > a.fa {

        float: none !important;

        display: inline-block;

        flex: 0 0 35px;

        box-sizing: border-box;

        margin: 0 2px;

    }



    #white_line2 {

        order: 1;

        float: none !important;

        width: 100% !important;

        height: auto !important;

        margin: 8px auto 12px !important;

        text-align: center;

        box-sizing: border-box;

    }



    #white_line2 img {

        display: inline-block;

        width: auto !important;

        max-width: 100%;

        height: auto !important;

        max-height: 40px;

    }



    .navigation {

        order: 3;

        float: none !important;

        position: relative;

        clear: both;

        width: 100% !important;

        height: auto !important;

        margin: 8px 0 0 !important;

        box-sizing: border-box;

    }



    .navigation ul {

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        gap: 0;

        margin: 0;

        padding: 0;

        overflow: visible;

    }



    .navigation li {

        float: none !important;

        margin: 0;

        padding: 0;

    }



    .navigation li a {

        display: block;

        padding: 9px 8px !important;

        font-size: 13px !important;

        line-height: 1.5;

    }



    #top-pink {

        clear: both;

    }



    #midlle_pink {

        position: relative;

        height: auto !important;

        min-height: 0 !important;

        padding: 18px 12px 24px !important;

        overflow: hidden;

        box-sizing: border-box;

    }



    .mainphoto {

        display: block !important;

        float: none !important;

        position: relative !important;

        top: auto !important;

        left: auto !important;

        right: auto !important;

        width: 100% !important;

        max-width: 350px;

        height: auto !important;

        margin: 8px auto 24px !important;

        padding: 0 !important;

        clear: both;

        overflow: visible;

        box-sizing: border-box;

        text-align: center;

    }



    .mainphoto img {

        display: block;

        position: static !important;

        width: 100% !important;

        max-width: 350px;

        height: auto !important;

        margin: 0 auto;

    }



    .pickball {

        display: inline-block !important;

        float: none !important;

        position: static !important;

        width: 29% !important;

        max-width: 106px;

        height: auto !important;

        margin: 8px 1% !important;

        padding: 0;

        vertical-align: top;

        box-sizing: border-box;

    }



    .pickball img {

        display: block;

        width: 100% !important;

        max-width: 106px;

        height: auto !important;

        margin: 0 auto;

    }



    #top-red {

        padding: 16px 0;

    }



    #midlle_red {

        padding: 12px;

        text-align: center;

        box-sizing: border-box;

    }



    #midlle_red p {

        margin: 0;

        font-size: 13px;

        line-height: 1.6;

    }



    /* Gallery grids */

    .row {

        display: flex;

        flex-wrap: wrap;

    }



    .column {

        flex: 0 0 50%;

        max-width: 50%;

        box-sizing: border-box;

    }



    .column img {

        display: block;

        width: 100%;

        height: auto;

    }



    .audio {

        width: 100%;

        table-layout: fixed;

    }



    .audio td {

        width: auto !important;

        padding: 5px;

        overflow-wrap: anywhere;

    }



    .audio img {

        width: 100%;

        max-width: 100%;

        height: auto !important;

    }

}



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

    .navigation li a {

        padding: 8px 5px !important;

        font-size: 12px !important;

    }



    .column {

        flex: 0 0 100%;

        max-width: 100%;

    }

}



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

    /* მთავარი გვერდი — ფოტო და ჰორიზონტალური ბურთულები */
    #midlle_pink.home-layout {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
    }

    #midlle_pink.home-layout .mainphoto {
        order: 1 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
    }

    #midlle_pink.home-layout .ball-poems {
        order: 2 !important;
    }

    #midlle_pink.home-layout .ball-translations {
        order: 3 !important;
    }

    #midlle_pink.home-layout .ball-books {
        order: 4 !important;
    }

    #midlle_pink.home-layout .pickball {
        float: none !important;
        flex: 0 0 29% !important;
        width: 29% !important;
        max-width: 106px !important;
        height: auto !important;
        margin: 8px 1% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #midlle_pink.home-layout .pickball img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    /* შიდა გვერდები — ქვემენიუ ტექსტის ზემოთ */
    #midlle_pink:not(.home-layout) {
        display: block !important;
    }

    #midlle_pink:not(.home-layout) .navigation1 {
        float: none !important;
        width: 100% !important;
        margin: 0 auto 15px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
}