@charset "utf-8";<style>

*
  {
  margin            : 0;
  padding           : 0;
		}

div, span
  {
  border            : 0;
  }

body
  {
		width       : 100%;
		height      : 100%;
		padding     : 0;
  overflow    : hidden;
  font-family : Lato, Verdana, Helvetica, Arial, Trebuchet MS;
  font-size   : 11pt;
  /*background : url( ../wimgs/bbg.jpg ) no-repeat top left #5e6f65;
  background-size :cover; */
  }

#body
  {
  position   : absolute;
		top        : 0px;
		left       : 0px;
  display    : block;
		height     : 100vh;
  width      : 100vw;
  margin     : 0;
  }

#center
  {
  position   : relative;
  display    : block;
		height     : 90vh;
		width      : 90vw;
  margin     : 20px auto 0 auto;
  overflow-y : auto;
  }

#head
  {
		display    : block;
  height     : 50px;
		width      : 100%;
  background : #ffffff;
  font-family: 'Amatic SC', cursive;
  font-size  : 250%;
		font-weight: bold;
  letter-spacing: 2px;
		text-align : center;
  }

#nav
  {
		position   : relative;
		display    : inline-block;
  min-width  : 95px;
		width      : 9%;
  padding    : 0;
  background : #fefefe;
		vertical-align : top;
		text-align : center;
  overflow-x : hidden;
  overflow-y : auto;
  }

#close
  {
  display : none;
  }

#ig
  {
		display      : inline-block;
		height       : 25px;
  margin       : 0 auto 20px;
  vertical-align: bottom;
  padding      : 0;
		width        : 105px;
  font-family  : 'Amatic SC', cursive;
  font-size    : 100%;
		font-weight  : bold;
		text-align   : center;
  }

#ig img
  {
		display      : inline-block;
		height       : 25px;
  }

#copy
  {
		display      : inline-block;
		height       : 25px;
  margin       : 0 auto 20px;
  vertical-align: bottom;
  padding      : 0;
		width        : 105px;
  font-family  : 'Amatic SC', cursive;
  font-size    : 100%;
		font-weight  : bold;
		text-align   : center;
  }

.btn
  {
  position     : relative;
  display      : block;
  margin       : 0 auto 15px auto;
  font-family  : 'Federo';
		font-size    : 12pt;
		font-weight  : bold;
  height       : 19px;
  width        : 105px;
		padding      : 3px 0 3px 5px;
		text-align   : left;
		border       : 2px solid #ffffff;
		cursor       : pointer;
		-webkit-transition: background-color 1s, -webkit-transform 1s;
		transition   : background-color 1s,  transform 1s;
  }

.bgr
  {
  display      : none;
  }

.btn:hover
  {
		background   : #ffffff;
		color        : orange;
		}

#main
  {
		position   : relative;
		display    : inline-table;
		width      : 82%;
		height     : 90%;
  background : #ffffff;
		vertical-align : top;
		overflow-y : auto;
  }

#box
  {
		display    : block;
		position   : relative;
		width      : 96%;
		height     : 100%;
		margin     : 0 auto;
  background : url( ../imgs/branka_s.jpg ) no-repeat center top / contain #ffffff;
		vertical-align : top;
		-webkit-transition: background-image 2s, -webkit-transform 2s;
		transition : background-image 2s,  transform 2s;
		overflow   : hidden;
		border     : 0;
  }

#box img { display : none; }

.LR
  {
		position     : relative;
  display      : inline-block;
		z-Index      : 1;
		vertical-align : top;
		height       : 25%;
 	width        : 25%;
 	font-size    : 500%;
 	font-weight  : bold;
 	text-align   : center;
 	color        : transparent;
  background   : transparent;
		cursor       : pointer;
		border       : 0;
  }

.LR:hover
  {
  color        : #ffffff;
  opacity      : 0.4;
  }

#Lbtn
  {
  float        : left;
		}

#Lbtn:hover
  {
  background : url( ../imgs/LA.png ) no-repeat 25% center / 20% transparent;
  }

#Rbtn
  {
  float        : right;
		}

#Rbtn:hover
  {
  background : url( ../imgs/RA.png ) no-repeat 75% center / 20% transparent;
  }

#Bbtn
  {
  position     : relative;
		z-Index      : 1;
  display      : inline-block;
  height       : 25%;
  width        : 50%;
  background   : transparent;
		cursor       : pointer;
		border : 0;
  }

#Ibtn
  {
  position     : relative;
		z-Index      : 1;
  display      : block;
  height       : 25%;
  width        : 100%;
  background   : transparent;
		cursor       : pointer;
  }

#Ibtn:hover
  {
  background : url( ../imgs/info.svg ) no-repeat center center / 8% transparent;
		opacity    : 0.5;
  }

#Idiv
  {
  position     : absolute;
  display      : none;
		z-Index      : 2;
  height       : 60%;
  width        : 60%;
  margin       : 2% 20% 38% 20%;
  background   : #ffffff;
  }

.a_name, #a_name
  {
  position     : relative;
  display      : none;
  margin       : 9px auto;
  font-family  : 'Federo';
	 font-size    : 11pt;
	 font-weight  : bold;
  height       : 25px;
  width        : 105px;
	 padding      : 3px 0 3px 5px;
	 text-align   : left;
	 border       : 2px solid #ffffff;
  }

.btn2
  {
  position     : relative;
  display      : block;
  margin       : 5px auto;
  font-family  : 'Federo';
		font-size    : 12pt;
		font-weight  : bold;
  height       : 30px;
  width        : 130px;
		padding      : 2px 0 4px 5px;
		text-align   : left;
		border       : 2px solid #ffffff;
		background   : #ffffff;
		cursor       : pointer;
  }

#FileUpload1
  {
  width        : 300px;
  }

#new, #save
  {
  display      : none;
  }

#admin
  {
  background   : url(../imgs/lock_cls.svg) no-repeat 60% center / 12% transparent;
  }

#admin:hover
  {
		background-color : #ffffff;
		color        : orange;
  }

#gallery
  {
  position     : relative;
		display      : table;
		border-collapse : collapse;
		width        : 100%;
		}

.pix
  {
		display      : table-cell;
		width        : 25%;
		height       : 210px;
		text-align   : center;
		vertical-align : middle;
		border       : 0;
		}

.pic
  {
		display      : block;
		width        : 100%;
		text-align   : center;
		vertical-align : middle;
		border       : 0;
  background : url( ../imgs/branka_s.jpg ) no-repeat top center #ffffff;
  background-size : cover;
		}

.dest
  {
		display      : inline-block;
		width        : 73%;
		height       : 22px;
		text-align   : center;
		border       : 1px solid #afafaf;
		}

.move
  {
		display      : inline-block;
		width        : 25%;
		height       : 22px;
		text-align   : center;
		background   : #ffffff;
		border       : 1px solid #afafaf;
		}

.move:hover
  {
		background   : #ffc891;
  }

#heading
  {
		display      : inline-block;
  height       : 35px;
		width        : 20%;
  background   : #ffffff;
  font-family  : 'Amatic SC', cursive;
  font-size    : 150%;
		font-weight  : bold;
  letter-spacing: 2px;
		text-align   : center;
  }

.dest2
  {
		display      : inline-block;
		width        : 78%;
		height       : 30px;
		text-align   : left;
		border       : 1px solid #afafaf;
		}

.stry
  {
		display      : block;
		width        : 100%;
		height       : 60px;
		text-align   : center;
		border       : 1px solid #afafaf;
		}

.loader
  {
		display : inline-block;
		width : 1px;
		height : 1px;
		background-size : conatin;
		opacity : 0;
		}

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

  #center
    {
    position   : relative;
    display    : block;
  		height     : 90vh;
  		width      : 100vw;
    margin     : 10px auto 0 auto;
    }

  #head
    {
  		display    : inline-block;
  		padding    : 8px 0 0 0;
    height     : 37px;
  		width      : 80%;
    background : #ffffff;
    font-family: 'Amatic SC', cursive;
    font-size  : 150%;
  		font-weight: bold;
    letter-spacing: 2px;
  		text-align : left;
    }

  #nav
    {
  		position   : absolute;
  		display    : none;
  		top        : 0px;
  		left       : 0px;
  		z-Index    : 3;
    width      : 80%;
    height     : 80%;
    padding    : 10%;
    background : #ffffff;
  		vertical-align : top;
  		text-align : center;
    overflow-x : hidden;
    overflow-y : auto;
    }

  #close
    {
    display : block;
    float   : right;
    padding : 12px 0 0 0;
    text-align : center;
    height       : 30px;
    width        : 42px;
    cursor : pointer;
    }

  .btn
    {
    position     : relative;
    display      : block;
    margin       : 5px auto;
  		padding      : 16px 0 0 0;
    font-family  : 'Federo';
  		font-size    : 11pt;
  		font-weight  : bold;
    height       : 42px;
    width        : 55px;
  		text-align   : center;
  		border       : 2px solid #ffffff;
  		cursor       : pointer;
    }

  .bgr
    {
    position     : relative;
    display      : inline-block;
    height       : 45px;
    width        : 11%;
    float        : left;
    font-family  : 'Federo';
   		font-weight  : bold;
  		 font-size    : 21pt;
  	  	padding      : 0;
  		 text-align   : center;
  		 cursor       : pointer;
    }

  .btn:hover, .bgr:hover
    {
  		background   : #ffffff;
  		color        : orange;
  		-webkit-transition: color 0.3s, -webkit-transform 0.3s;
  		transition   : color 0.3s,  transform 0.3s;
    }

  #admin
    {
    background   : transparent;
    }

  #admin:hover
    {
  		background   : #ffffff;
  		color        : orange;
    }

  #main
    {
    position   : relative;
    top        : 0px;
  		 display    : block;
  		 width      : 100%;
		  z-Index    : 0;
    background : #ffffff;
  		 vertical-align : top;
  		 overflow-y : auto;
    }

  #box
    {
  		display    : block;
  		position   : relative;
  		width      : 96%;
  		height     : 96%;
  		margin     : 0 auto;
    background : url( ../imgs/branka_s.jpg ) no-repeat center top / contain #ffffff;
  		vertical-align : top;
  		-webkit-transition: background-image 2s, -webkit-transform 2s;
  		transition   : background-image 2s,  transform 2s;
    }

  #Lbtn:hover
    {
    background : url( ../imgs/LA.png ) no-repeat 25% 5% / 20% transparent;
    }

  #Rbtn:hover
    {
    background : url( ../imgs/RA.png ) no-repeat 75% 5% / 20% transparent;
    }
		}