@charset "UTF-8";

div.containter
{width: 80%;
 margin: auto;
 overflow: hidden;
 text-align: center}

div.containterMENU
{width: 50%;
    margin: auto;
    overflow: hidden;
    text-align: center}

div#brandingContainer
{width: 21%;
 margin: auto}

@font-face
{font-family: 'bebasneue';
    src:  url('bebasneue-regular-webfont.woff') format('woff'),
    url('bebasneue-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;}

@font-face
{font-family: 'andbasr-webfont';
    src:  url('andbasr-webfont.woff') format('woff'),
    url('andbasr-webfont.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;}

/* Body Format*/
body
{background: url("BG.jpg");
 background-size: 100%;
 overflow-x: hidden}

section#MainBodyContent
{margin: 0 auto 0 auto;
 width: 75%;
 padding: 20px;
 background-color: #ffa868}

a
{list-style: none;
 text-decoration: none}

/* Text Hierarchies */

h1
{font-family: 'bebasneue';
 font-size: 30pt}

h2
{font-family: 'andbasr-webfont';
 font-size: 15pt;
 font-weight: 100}

h3
{font-family: "bebasneue";
    font-size: 15pt;
    font-weight: 400}

/* Header Format*/

header
{color: black;
 min-height: 80px;
 padding: 20px;
 width: 100%;
 margin: -50px auto auto auto}

div#branding
{background-size: 100%;
 background-image: url("icon.png");
 width: 250px;
 height: 200px;
 margin-left: -4%;
 display: inline-block}

header p
{font-family: Roboto;
 font-weight: 900;
 font-size: 15pt}

nav#NavMenu
{text-transform: uppercase;
 font-size: 18px;
 margin: 0 0 -50px -4.5%;
 display: inline-block}

a.aMenu
  {list-style: none;
   float: left;
   padding: 8px;
   text-decoration: none;
   color: #fa6900;
   text-shadow: #2d2d2d 1px 1px 0px ;
   font-family: Roboto;
   background: url("UlBg.png") 10% 80%;
   border: groove 1px #2d2d2d;
   margin-left: 5px;}

  a.aMenu:hover
{background-position: 50% 80%;
 transition-duration: 0.5s;}

ul#UlMenu
{padding: 0;
 margin: 0}

li.LiMenu
{float: left}

/*Article Format*/
article#AboutUs
{margin-bottom: 0px;
 width: 100%;
 display: inline-block}
article#Products
{margin-bottom: 0px;
 width: 100%;
 display: inline-block}
article#Contact
{margin-bottom: 0px;
    /*margin-bottom: -500px;*/
    width: 100%;
    display: inline-block}

/* Bottom Stuff */
footer#Footer
{width: 106%;
 margin: 100px 0 -50px -3%;
 bottom: -2%;
 min-height: 250px;
 background-color: rgba(250,105,0,0.8)}

div#content
{font-family: 'andbasr-webfont';
 font-weight: 900;
 font-size: large;
 color: #2d2d2d;
 width: 100%}

a#amark
{width: 20%;
 float: right;}

div#Mark
{background-image: url("IconFAR.png");
 background-size: 100%;
 width: 50px;
 height: 50px;
 position: relative;
 margin-left: 0;
 bottom: 1%}

div#ReturnToTop
{position: fixed;
 background: url("top.png");
 background-size: 100px;
 width: 100px;
 height: 100px;
 left: 0;
 bottom: 0}

div#ReturnToTop p
{font-family: 'bebasneue';
 font-size: 20pt;
 color: #2d2d2d;
 margin: 5px 0 0 -5px;
 text-align: center;
 display: none}

/* Images */

div#Map
{background: url("Map.png");
    background-size: 100%;
    width: 260px;
    height: 160px;
    border: groove 2px #2d2d2d;
    float:right;
    margin-top: -800px;
    display: block;}

div.Gallery
{width: 100%;
 margin: 0}


div.imgGal1
{transition: 1s;
    float: left;
    border-radius: 5px;
    padding: 10px;
    display: block;
    margin: 10px 0 0 20px}

div.imgGal1:hover
{transform: scale(1.1)}

div#imgGal1
{background: url("Vertical1.jpeg") no-repeat;
    background-size: 100%;
    width: 220px;
    height: 300px;}

div#imgGal2
{background: url("Horizon.png") no-repeat;
    background-size: 100%;
    width: 220px;
    height: 300px;}
div#imgGal3
{background: url("Vertical2.jpeg") no-repeat;
    background-size: 100%;
    width: 220px;
    height: 300px;}

div#imgGal4-2
{background: url("Horizon.png") no-repeat;
    background-size: 100%;
    width: 220px;
    height: 300px;
 display: none}

div.imgGal2
{transition: 1s;
    float: left;
    border: solid 2px #fa6900;
    border-radius: 5px;
    padding: 10px;
    display: block;
    margin: 10px 0 0 20px}

div.imgGal2:hover
{transform: scale(1.1)}

div#imgGal4
{background: url("Product1.jpeg") no-repeat;
    background-size: 100%;
    width: 220px;
    height: 140px;}

div#imgGal5
{background: url("Product2.jpeg") no-repeat;
    background-size: 100%;
    width: 220px;
    height: 140px;}
div#imgGal6
{background: url("Product3.jpeg") no-repeat;
    background-size: 100%;
    width: 220px;
    height: 140px;}
div#imgGal7
{background: url("Product4.jpeg") no-repeat;
    background-size: 100%;
    width: 220px;
    height: 140px;}
div#imgGal8
{background: url("Product5.jpeg") no-repeat;
    background-size: 100%;
    width: 220px;
    height: 140px;}
div#imgGal9
{background: url("Product6.jpeg") no-repeat;
    background-size: 100%;
    width: 220px;
    height: 140px;}

/* Form */
form
{text-align: left}

form legend
{font-size: 15pt;
 font-family: 'bebasneue'}

form fieldset
{border: none;
 font-family: 'andbasr-webfont';}

form input,textarea
{width: 240px;
 display: block}

/* Table */

table#none
{background-color: lightgray;
    border: 2px black solid;
    width: 100%;
    font-family: 'andbasr-webfont'}
table td#none
{border: solid 1px rgba(250,105,0,0.5);
    padding: 2px;}

article#table
{display: none}

table#present
{background-color: lightgray;
 border: 2px black solid;
 width: 350px;
 font-family: 'andbasr-webfont';
 display: block;}

table#present td
{border: solid 1px rgba(250,105,0,1);
 background-color: white;
 transition: 0.5s;
 padding: 3px;
 text-align: center}

article#tableP
{float:right;
    margin-top: -500px;
    display: block;}

.whatsapp-logo{
    height:20px;
    width:20px;
    color:#2d2d2d;
}

/* ----------------------------------------------------Breakpoints----------------------------------------------------- */
/*-------------------------------------------------Max-1505-*/
@media screen and (min-width: 1495px)
{div.Gallery
{width: 90%!important;
    margin: auto!important;}}
/*-------------------------------------------------MIN-1250-*/
@media screen and (min-width: 1250px)
{div#Map
{width: 460px!important;
    height: 280px!important;}}
/*-------------------------------------------------MAX-1070-*/
@media screen and (max-width: 1070px)
{article#table {display:block!important;}
 article#tableP{display: none!important;}}


/*-------------------------------------------------MAX-950-*/
@media screen and (min-width: 950px)
{a#Amap br
{display: none!important;}}

@media screen and (max-width: 950px)
{div#Map
{float:left;
    margin-top:0}}

/*-------------------------------------------------MAX-900-*/
@media screen and (max-width: 900px)
{div.SmallerContainter
{width: 105%;
    margin: 0 0 0 -2.5%;
    overflow: visible}
div#imgGal4-2
    {background: url("Horizon.png") no-repeat;
        background-size: 100%;
        width: 220px;
        height: 300px;
        display: inline-block!important;}
div#imgGal2
    {background: url("Horizon.png") no-repeat;
        background-size: 100%;
        width: 220px;
        height: 300px;
        display: none!important;}}

/*-------------------------------------------------MAX-875-*/
@media screen and (max-width: 875px)
{article#AboutUs
{margin-bottom: 0}}
/*-------------------------------------------------MAX-740-*/
@media screen and (max-width: 740px)
{div#developedby
{display: none!important;}}

/*-------------------------------------------------MAX-700-*/
@media screen and (max-width: 700px)
{section#MainBodyContent
{width: 100%;
    margin-left: -20px;}
    div.containter
    {width: 100%;
        overflow: visible}
    div#ReturnToTop
    {position: fixed;
        background: rgba(250,105,0,0.9);
        width: 100px;
        height: 40px;
        left: 0;
        bottom: 0}
    div#ReturnToTop p
    {display: block}
    nav#NavMenu
    {margin-left: -10%}
    div#branding
    {margin-left: -7%}
    h1
    {font-size: 25pt}
    h2
    {font-size: 13pt}

    div#Map
    {float:left!important;
        margin-top:0!important}
    article#Products
    {margin-bottom: 0!important;}
    body
    {overflow-x: inherit}}


/*-------------------------------------------------MAX-612-*/
@media screen and (max-width: 560px)
{article#Products
{margin-bottom: 1100px!important;}}
/*-------------------------------------------------MAX-600-*/
@media screen and (max-width: 600px)
{header p
{font-size: 12pt}

    div#branding
    {width: 200px !important;
        height: 180px !important;}}

/*-------------------------------------------------MAX-380-*/
@media screen and (max-width: 380px)
{a.aMenu
    {padding: 5px;
        font-size: 12pt;
        margin-left: 2px;}
    nav#NavMenu
    {margin-left: -15%}}


.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2147483645;
  box-sizing: border-box;
  width: 100%;

  background-color: #C4BDBB;
}

.cookie-consent-banner__inner {     
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 0;
}

.cookie-consent-banner__copy { 
  margin-bottom: 16px;
}

.cookie-consent-banner__actions {    
}

.cookie-consent-banner__header {
  margin-bottom: 8px;
  
  font-family: "CeraPRO-Bold", sans-serif, arial;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
}

.cookie-consent-banner__description {
  font-family: "CeraPRO-Regular", sans-serif, arial;
  font-weight: normal;
  color: #838F93;
  font-size: 16px;
  line-height: 24px;
}

.cookie-consent-banner__cta {
  box-sizing: border-box;
  display: inline-block;
  min-width: 164px;
  padding: 11px 13px;
    
  border-radius: 2px;
  
  background-color: #C4BDBB;
   
  color: #FFF;
  text-decoration: none;
  text-align: center;
  font-family: "CeraPRO-Regular", sans-serif, arial;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
}

.cookie-consent-banner__cta--secondary { 
  padding: 9px 13px;
  
  border: 2px solid #3A4649;
  
  background-color: transparent;
  
  color: #2CE080;
}

.cookie-consent-banner__cta:hover {
  background-color: #20BA68;
}

.cookie-consent-banner__cta--secondary:hover {
  border-color: #838F93;
    
  background-color: transparent;
  
  color: #22C870;
}

.cookie-consent-banner__cta:last-child {
  margin-left: 16px;
}
