h3 {

text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
font-family: Century Gothic, sans-serif;
font-weight: 900;
color: #505050; 
text-shadow: 0px 2px 3px #F0F0F0;
font-style: normal;

}

.bigname { font-size: 75px; font-family: Century Gothic, sans-serif; }
.slogan { font-size: 25px; font-family: Century Gothic, sans-serif; }

.padding1 { padding: 25px; }
.padding2 { padding: 20px; }
.padding3 { padding: 15px; }

.light { color: #FFFFFF; }
.color { color: #D00000; }
.dark { color: #505050; }

.darkshadow { text-shadow: 0px 2px 3px #000000; }
.midshadow { text-shadow: 0px 2px 3px #A0A0A0; }
.lightshadow { text-shadow: 0px 2px 3px #FFFFFF; } 

.darkback { background-color: #505050; background-color: rgba(0, 0, 0, 0.5); }
.midback { background-color: #505050; background-color: rgba(250, 0, 0, 0.5); }
.lightback { background-color: #505050; background-color: rgba(250, 250, 250, 0.5); }

.whiteback { background-color: #ffffff; backgrou-nd-color: rgba(250, 250, 250, 1); }

.p1, .p2, .p3, .p4 { margin-top: 1em; margin-bottom: 1em; }

.p4 { font-size: 12px; font-family: Century Gothic, sans-serif; }
.p3 { font-size: 15px; font-family: Century Gothic, sans-serif; }
.p2 { font-size: 20px; font-family: Century Gothic, sans-serif; }
.p1 { font-size: 25px; font-family: Century Gothic, sans-serif; letter-spacing-: 1px; }





.header-menu-container {
  position: fixed;
  left:0px;
  top:0px;
  z-index:5;
  width: 100%;
  height: 75px;
  text-align: center;
  overflow: hidden;
  margin: 0px;
  background: #ffffff;
  box-shadow: 0px 0px 4px 2px #CCCCCC;
}

.header-menu {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 1000px;
  height: 100%;
  z-index:7;
  overflow: hidden;
  text-align: right;
  padding: 0px;
  margin: 0px;
  background:  
  border:1px;
}



.main-container {
  position: relative;
  width: 100%;
  text-align: center;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  background: #ffffff;
}

.main-container-gray {
  position: relative;
  width: 100%;
  text-align: center;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  background: #F8F8F8;
}

.main-container-color {
  position: relative;
  width: 100%;
  text-align: center;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  background: #3899ec;
}


.main-container-trans {
  position: relative;
  width: 100%;
  text-align: center;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  background-color: rgba(0, 0, 0, 0.01);
  
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  transition: all 0.30s ease-in-out;
}

.main-container-trans:hover {
  position: relative;
  width: 100%;
  text-align: center;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  background-color: rgba(150, 150, 150, 0.75);
  
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  transition: all 0.30s ease-in-out;
}


.main-container-noback {
  position: relative;
  width: 100%;
  text-align: center;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}

.main-container-footer {
  position: relative;
  width: 100%;
  text-align: center;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  background: #303030;
}



.main-content {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 1000px;
  text-align: center;
  padding-top: 75px;
  padding-bottom: 75px;
  margin: 0px;
}


.main-content-name {
  position: relative;
  display: inline-block;
  align: center;
  width: 100%;
  max-width: 1000px;
  height: 60%;
  max-height: 750px;
  text-align: center;
  padding-top: 75px;
  padding-bottom: 75px;
  margin: 0px;
}


.link {

display: inline-block;
text-align: center;
background-color: none;
font-size: 15px;

font-family: Verdana, sans-serif;

-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}

.link a {
text-decoration: none;
text-shadow: 1px 2px 3px #F0F0F0;
display: inline-block;
text-align: center;
color: #505050;
background-color: none;
padding: 5px;

-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}


.link a:hover {
text-decoration: none;
display: inline-block;
text-align: center;
color: #ffffff;
background-color: #505050;
padding: 5px;

-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}



.box-border {
position: relative;
display: inline-block;
align: center;
text-align: center;
vertical-align: middle;
padding: 15px 35px 15px 35px;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 4px 2px #909090;
margin: 0px;
  
}








.box {

display: inline-block;
text-align: center;
vertical-align: middle;
margin: 5px;

max-width: 200px;
min-width: 150px;

border-radius: 5px;  
}



.list-img {

display: inline-block;
text-align: center;
vertical-align: middle;
width: 45%;
min-width: 300px;
padding: 5px;
margin: 0px;
  
}

.list-txt {

display: inline-block;
text-align: justify;
vertical-align: middle;
width: 45%;
min-width: 300px;
padding: 5px;
margin: 0px;
  
}





.list-tree-right {

display: inline-block;
text-align: right;
vertical-align: middle;
width: 40%;
min-width: 250px;
padding: 15px;
margin: 0px;
  
}

.list-tree-left {

display: inline-block;
text-align: left;
vertical-align: middle;
width: 40%;
min-width: 250px;
padding: 15px;
margin: 0px;
  
}








.box-shadow {

box-shadow: 0px 0px 4px 2px #f0f0f0;

}


.box-img {

display: inline-block;
width: 20%;
min-width: 100px;
text-align: center;
background-color: none;
box-shadow: 0px 0px 4px 2px #CCCCCC;
z-index: 5;
margin: 5px;

-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}

.box-img-shade {

display: block;
width: 100%;
text-align: center;
background-color: #000000;
z-index: 7;

-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}


.pad-box-25 {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 100%;
  padding: 25px;
  margin: 0px;
}

.pad-box-50 {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 100%;
  padding: 50px;
  margin: 0px;
}




body {
    background: #667078 url("bg.jpg") no-repeat right top; background-attachment:fixed; background-size: 100%;
}




@media only screen and (max-width: 800px) {
    body {
        background: #667078 url("bg.jpg") no-repeat right top; background-attachment:fixed; background-size: 100%;
    }
    .bigname { font-size: 50px; font-family: Century Gothic, sans-serif; }
    .slogan { font-size: 20px; font-family: Century Gothic, sans-serif; }
}




@media only screen and (max-width: 500px) {
    body {
        background: #667078 url("bg-mobile.jpg") no-repeat right top; background-attachment:fixed; background-size: 100%;
    }
    .bigname { font-size: 25px; font-family: Century Gothic, sans-serif; }
    .slogan { font-size: 15px; font-family: Century Gothic, sans-serif; }
}