body
{
  padding: 0;
  margin: 0;
  min-width: 500px;
  min-height: 100%;

  font-family: Open Sans, Arial;
  font-style: normal;
  font-size: 16px;

  display: flex;
  flex-direction: column;
}

a { text-decoration: none; }

/*******************************************************************************************************/

.contact
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;

  font-size: 18px;

  border-top: 1px solid #cccccc;
  margin: 0 50px;
}

.contact div
{
  padding: 10px;
  white-space: nowrap;
}

.contact div:last-child
{
  text-align: right;
}

/*******************************************************************************************************/

.head
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;

  padding: 10px;

  font-size: 20px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.head div
{
  padding: 5px;
}

.head a, .contact a
{
  color: #333333;
}


.head a.logo, .head a.phone
{
  color: rgb(22, 22, 22);
  font-size: 36px;
  font-family: Russo One, Arial;
}

.head a.phone
{
  font-size: 20px;
}

.head h1
{
  padding: 20px;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}

/*******************************************************************************************************/

.board
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;

  padding: 10px;
}

/*******************************************************************************************************/

.board div.tile
{
  width: 400px;
  height: 400px;
  padding: 10px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}


.board div.tile img
{
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.board div.card
{
  width: 460px;
  padding: 10px;

  margin-bottom: 20px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;


  display: flex;
  flex-direction: column;
}

.board div.card a
{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.board div.card img
{
  width: 100%;
  height: 300px;

  object-fit: cover;
}

.board div.card .comment
{
  margin: 10 0;
  text-align: center;
  color:#000000;
  text-transform: uppercase;
  font-weight: bold;
  white-space: pre;
}

.board div.card .button
{
  height: 50px;
  color:#ffffff;
  background-color:#000000;

  margin: 0 120px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.board div.product
{
  width: 50%;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;

  @media (max-width: 900px) or (orientation: portrait) { width: 100%; }
}

.board div.product div.photo
{
  width: 100%;
  height: 600px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.board div.product div.photo img
{
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.board div.product div.list
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;

  padding-top: 4px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.board div.product div.list img
{

  width: 133px;
  height: 100px;
  margin: 4px;

  object-fit: cover;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.board div.product div.list img.active
{
  border: 5px solid #B22222;
}

.board div.description
{
  padding: 30px;
}

.board div.description .title
{
  padding: 0;
  margin: 0;
  text-transform: uppercase;

  font-family: Russo One, Arial ;
  font-weight: 200;
}

/*******************************************************************************************************/

.video-header
{
  color: rgb(22, 22, 22);
  font-size: 36px;
  font-family: Russo One, Arial !important;
  text-align: center;
}

.video
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.video iframe
{
  height: 480px;
  margin: 10px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/*******************************************************************************************************/

#form
{
  justify-content: center;
}

#form form
{
  display: flex;
  flex-direction: column;

  width: 800px;
  justify-content: right;
}

#form form h2
{
  text-align: center;
}

#form form div
{
  text-align: right;
}

#form form div input,textarea
{
  width: 70%;
}

#form form div textarea
{
  height: 100px;
}

span#result.error
{
  color: red;
}

span#result.success
{
  color: green;
}

/*******************************************************************************************************/

#map
{
  height: 300px;
  padding: 20px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/*******************************************************************************************************/

.rubber { flex-grow: 1; }

/*******************************************************************************************************/

/*******************************************************************************************************/

.footer
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.footer div
{
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0 5px;
  height: 34px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.footer span { padding-left: 5px; }
.footer i.fa-telegram { color: #24A1DE; }
.footer i.fa-skype { color: #00AFF0; }
.footer i.fa-whatsapp { color: #25D366; }
.footer i.fa-phone { color: #052994; }
.footer i.fa-envelope { color: #db3b06; }