/* reset CSS first */
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;}
html { font-size:100%;
}
img, embed,
object, video {
    max-width: 100%
}
body {
    max-width: auto;
}
.wrapper {
    position: relative;
    display: -webkit-flexbox;
    min-width: 250px;
    max-width: auto;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    padding-right: 10px;
    padding-bottom: 100px;
    padding-left: 10px;
    background-color: #333;
    font-family: Arial,Helvetica,sans-serif;
    color: #000;
    border: 1px solid #333;
}
header {
    display: block;
    position: fixed;
    visibility: visible;
    z-index: 10;
    height: auto;
    width: 100%;
    margin-top: -2px;
    margin-right: auto;
    margin-left: auto;
    background-color: #333;
    border: 2px solid #333;
}
#logo {
    position: relative;
    display: block;
    width: 360px;
    height: auto;
    padding-top: 10px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 8px;
    clear: left;
    float: left;
    background-color: transparent;
    border: 0px solid #0FF;
}
.topnav {
  overflow: hidden;
  float: right;
  padding-right: 20px;
  color: #0FF;
  background-color: transparent;
  border: 0px solid #FFF;
  z-index: 100;
}
.topnav a {
  display: block;
  float: left;
  padding-top: 10px;
  padding-right: 20px;
  text-align: center;
  text-decoration: none;
  font-size: .85rem;
  color: #FFF;
  border: 0px solid #0FF;
}
.topnav a:hover {
  color: #FFA500;
}
.topnav a.active {
  color: #FFF;
  text-decoration: underline;
}
.topnav .icon {
  display: none;
}
@media screen and (max-width: 350px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 350px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
.flex-container {
  display: flex;
  flex-direction: row;
  text-align: center;
  padding: 0px;
  margin-right: 0px;
  min-width: 250px;
  width: -webkit-auto;
  border: 0px solid #0FF;
}
.titleText {
    text-align: center;
    display: inline-block;
    line-height: auto;
    font-size: 1.4rem;
    width: 100%;
    height: auto;
    padding-top: 0px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    color: #FFF;
    border: 0px solid #0FF;
}
.titleText p {
    text-align: center;
    text-indent: 0px;
    font-size: 1rem;
    font-style: normal;
    width: 100%;
    height: auto;
    padding: 0px;
    padding-right: 0px;
    margin-top: 14px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: px;
    float: left;
    color: #FFF;
    border: 0px solid #FFF;
}
.pic01 {
    display: block;
    width: 100%;
    max-width: -webkit-auto;
    min-width: 250px;
    height: auto;
    margin-top: 110px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    padding-top: 0px;
    padding-bottom: 8px;
    background-color: #333;
    border: 0px solid #0FF;
}
#containerAbout {
    width: 100%;
    max-width: 1400px;
    min-width: 250px;
    height: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    background-color: #333;
    border: 0px solid #FFA500;
}
#containerLocation {
    width: 100%;
    max-width: 1400px;
    min-width: 250px;
    height: -webkit-auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    border: 0px solid #0FF;
}
#containerContact {
    width: 100%;
    max-width: 1400px;
    min-width: 250px;
    height: auto;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    border: 0px solid #0FF;
}
#containerGallery {
    width: 100%;
    max-width: 1400px;
    min-width: 250px;
    height: auto;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    border: 0px solid #0FF;
}
iframe {
    position: relative;
    display: block;
    z-index:: -1;
    margin-top: 5px;
    margin-right: auto;
    margin-bottom: 5px;
    margin-left: auto;
    width: 100%;
    height: -webkit-auto;
    min-height: 380px;
    border: 0px solid #0FF;
}
.flex-item-allLeft {
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 5px;
    flex: 50%;
    min-width: 250px;
    max-width: -webkit-auto;
    border: 0px solid #0FF;
}
.flex-item-allRight {
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 5px;
    flex: 50%;
    min-width: 250px;
    max-width: -webkit-auto;
    border: 0px solid #0FF;
}
.text {
    text-align: center;
    display: inline-block;
    font-family: "Ariel", Helvetica, san-serif;
    line-height: 2rem;
    font-size: 1.4rem;
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-right: 8px;
    padding-bottom: 10px;
    padding-left: 10px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    float: right;
    color: #FFF;
    z-index: 1;
    border: 0px solid #FFFFFF;
}
.text p {
    text-align: left;
    text-indent: 0px;
    line-height: 2rem;
    font-size: 1.15rem;
    font-style: normal;
    width: 100%;
    height: auto;
    padding: 0px;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 3px;
    float: left;
    border: 0px solid #FFF;
}
.pics {
    width: 100%;
    margin-top: 5px;
    margin-right: auto;
    margin-bottom: 5px;
    margin-left: auto;
}
footer {
    position: relative;
    display: block;
    vertical-align: baseline;
    width: 100%;
    max-width: -webkit-auto;
    height: -webkit-auto;
    margin-right: auto;
    margin-left: auto;
    list-style-type: none;
    clear: left;
    border: 0px solid #FFA500;
}
* {
  box-sizing: border-box;
}
a[href^="tel"]{
    color:inherit;
    text-decoration:none;
}
.flex-item-left {
    padding: 0px;
    flex: 33%;
    list-style-type: none;
    background-color: #663300;
    border: 0px solid #0FF;
}
.flex-item-center {
    padding: 0px;
    flex: 33%;
    list-style-type: none;
    background-color: #663300;
    border: 0px solid #0FF;
}
.flex-item-right {
    padding: 0px;
    flex: 33%;
    list-style-type: none;
    background-color: #663300;
    border: 0px solid #0FF;
}
/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 500px) {
  .flex-container {
    flex-direction: column;
  }
}
.bottomNav {
    text-align: center;
    font-size: 1rem;
    padding-top: 10px;
    padding-bottom: 14px;
    margin-left: auto;
    margin-right: auto;
    list-style-type: none;
    border: 0px solid #0FF;
}
.bottomLi a {
	position: relative;
	display: block;
	width: -webkit-auto;
	height: -webkit-auto;
	clear: left;
    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
    padding-left; 5px;
	margin-right: auto;
    margin-left: auto;
    text-decoration: none;
    color: #FFF;
    border: 0px solid #0FF;
}
.bottomLi a:hover {
    color: #FFA500;
	text-decoration: none;
}
#copyWright {
    position: relative;
    display: block;
    text-align: center;
    font-size: 1rem;
    width: -webkit-auto;
    height: -webkit-auto;
    clear: both;
    cursor: default;
    padding: 16px;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    color: #FFF;
    background-color: #333;
    border: 0px solid #0FF;
}
#webDesign {
    position: relative;
    display: block;
    text-align: center;
    font-size: 1rem;
    width: -webkit-auto;
    height: -webkit-auto;
    clear: both;
    cursor: default;
    padding: 16px;
    margin-right: auto;
    margin-left: auto;
    color: #FFF;
    background-color: #333;
    border: 0px solid #0FF;
}
body {
    background-color: #333;
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
    0% {
        opacity: .3;
    }
    100% {
        opacity: 1;
     }
}
@media screen and (min-width: 200px) {
    #logo { width: 180px;}
    .pic01 { margin-top: 200px;}
}
@media screen and (min-width: 250px) {
    #logo { width: 200px;}
    .pic01 { margin-top: 210px;}
}
@media screen and (min-width: 280px) {
    #logo { width: 250px;}
    .pic01 { margin-top: 210px;}
}
@media screen and (min-width: 371px) {
    #logo { width: 250px;}
    .pic01 { margin-top: 220px;}
}
@media screen and (min-width: 425px) {
    #logo { width: 250px;}
    .pic01 { margin-top: 225px;}
}
@media screen and (min-width: 432px) {
    #logo { width: 250px;}
    .pic01 { margin-top: 225px;}
}
@media screen and (min-width: 501px) {
    #logo { width: 320px;}
    .pic01 { margin-top: 225px;}
}
@media screen and (min-width: 525px) {
    .flex-item-logo { padding-left: 20px;}
    #logo { width: 320px;}
    .pic01 { margin-top: 230px;}
}
@media screen and (min-width: 610px) {
    .titleText p { font-size: 1.2rem;
        margin-top: 14px;}
    #logo { width: 360px;}
    .pic01 { margin-top: 230px;}
}
@media screen and (min-width: 740px) {
    .titleText p { font-size: 1.4rem;}
    #logo { width: 360px;}
    .pic01 { margin-top: 235px;}
}
@media screen and (min-width: 800px) {
        #logo { width: 360px;}
        .pic01 { margin-top: 235px;}
}
@media screen and (min-width: 900px) {
    #logo { width: 360px;}
    .pic01 { margin-top: 235px;}
}
@media screen and (min-width: 1096px) {
    #logo { width: 360px;}
    .pic01 { margin-top: 235px;}
}
@media screen and (min-width: 1250px) {
    #logo { width: 360px;}
    .pic01 { margin-top: 235px;}
}
@media screen and (min-width: 1350px) {
    #logo { width: 380px;}
    .pic01 { margin-top: 250px;}
}
@media screen and (min-width: 1500px) {
    #logo { width: 390px;}
    .pic01 { margin-top: 250px;}
}