@charset "utf-8";
/* CSS Document */


/* --------------------------
base styles 
-------------------------- */  
body{ margin:0px;  padding: 0; color: #000; background: #fff; font: 1em/1.2 verdana, helvetica, arial, sans-serif;}
.parallax {background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;}
.hero{ background-image: url("../images/hero-shot.jpg"); /*background-attachment: fixed; background-position: center; background-repeat: no-repeat;*/ background-size: cover;}
h1 {margin: 0 0 0 0; font-size: 1.5em; font-weight: bold; font-size:200%;}
h2,h3 {margin: 0 0 0 0; font-size: 1.3em; font-weight:bold; font-size:150%;}
p {padding: 10px; text-justify: auto; word-wrap: break-word; }
a { text-decoration:none;}
.spacer-50 {height: 50px;width: 100%; clear: both;}
.spacer-25 {height: 25px; width: 100%; clear: both;}
.spacer-15 {height: 15px; width: 100%; clear: both;}
.spacer-10 {height: 10px; width: 100%; clear: both;}
.spacer-5 {height: 5px; width: 100%; clear: both;}
.sectionname{width:100%; background-color:#F9FBFA; height:150px;}
.sectiontitle{margin-left: 10%; padding-top:60px;}
.containerfluid{ width:100%;}
.center-block{display:block;margin-right:auto;margin-left:auto}
 /****---header start---***/
header{ position:fixed; width:100%; height:55px; background-color:#F9FBFA; border-bottom:thick #333333;}
.container{ width:90%; margin-left:auto; margin-right:auto; margin-top:10px; }

div#logo {   float: left; text-decoration:none; font-family:impact; color:#000000; font-size: 150%; border:none;}
div#navmenu ul{  float: right;  margin: 0;padding: 0;list-style-type: none;}
#navmenu ul li { display: inline; }

li{diplay:inline;}
#navmenu a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; }
#navmenu a:hover { color: #000; }
/****---header end---***/
   
footer { position: relative; margin-bottom:0; text-align:center;  height: 300px; background-color:#494949; width: 100%; color:#FFFFFF; }  
#footerlinks{ color:#FFFFFF; text-align:left;} 
img { -webkit-background-size: inherit; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto;}
.img-responsive-center {  display: block; max-width: 100%; height: auto; margin-right:auto; margin-left:auto}

 /*  Panning   ============================================================================= */
 /*  
@keyframes panning {
  0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 100% 100%;
  }
   50% {
    background-position: 100% 0%;
  }
  75% {
    background-position: 0 100%;
  }
  200% {
    background-position: 0 0;
  }
}

.test {
  position: relative;
  height: 100%;
  width: 100%;
  background: white url(../images/hero-shot.JPG);
  background-size: 200%;
  animation: panning 50s infinite linear;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  z-index: 10;
}

.text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  height: 10%;
  width: 30%;
  margin: auto;
  font-family: Roboto;
  font-size: 34px;
  color: white;
  font-weight: 100;
  text-align: center;
  padding: 10px 40px;
  border: 3px solid #ccc;
  border-radius: 2px;
  -webkit-font-smoothing: antialiased;
}
strong { font-weight: 900; letter-spacing: 2px; font-size: 52px; vertical-align: middle;}
html, body { height: 100%;}
    
 /*  Single Row Content   ============================================================================= */
    .wrap {width: 80%; padding: 20px; margin-left: auto; margin-right: auto; text-align: overflow: hidden; }
	.titlewrap{ position:relative; width: 80%;padding: 20px; width: 100%; background-color:#F9FBFA;}
	

    @media screen and (max-width: 380px) {.wrap {width: 100%;}}


    /*  2 columns Content   ============================================================================= */

.col2 { width: 50%; float: left;  }

    
  @media screen and (max-width: 380px) {.col2a .col2b  {width: 100%;}}
  
   /*  3 columns Content   ============================================================================= */
.col3 {width: 33%; float: left;}    

    
     /* 4 columns Content   ============================================================================= */
	 
.col4 {width: 25%; float: left;} 
	 
	 
@media screen and (max-width: 1800px) {}   
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 960px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 600px) {}
@media screen and (max-width: 480px) {}
@media screen and (max-width: 320px) {}

@media (max-width:700px){
.wrap{overflow: hidden; width: 90%; text-align:justify; }
.col2{overflow: hidden; width: 100%; text-align:justify; }
.col3{overflow: hidden; width: 100%; text-align:justify; }
.col4{overflow: hidden; width: 100%; text-align:justify; }
p{margin-top: 1px; margin-bottom:1px;}
footer{ height:auto;}
header{ height:auto;}
}


/* ----------- Apple Watch ----------- */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm) { 
 .wrap {overflow: hidden;
		margin: 0 5% 1em 5%;  }
}




/* ----------- Moto 360 Watch ----------- */
@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 

}