/* Developed in 2016 by Atalanta Web Design */

@import url(//fonts.googleapis.com/css?family=Bitter:400,700);
@import url(//fonts.googleapis.com/css?family=Varela+Round);
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,800);

html {height: 100%;}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
margin:0;
padding:0;
height:100%;
background-color: #5ca2d5;
-webkit-font-smoothing: antialiased;
font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
min-height: 100%;
background: 
linear-gradient(115deg, transparent 75%, rgba(18,18,63,.4) 75%) 0 0,
linear-gradient(245deg, transparent 75%, rgba(18,18,63,.2) 75%) 0 0,
linear-gradient(115deg, transparent 75%, rgba(18,18,63,.4) 75%) 7px -15px,
linear-gradient(245deg, transparent 75%, rgba(18,18,63,.2) 75%) 7px -15px,
#000030;
background-size: 15px 30px
}

h1 {
	margin: 5px auto;
	text-align: center;
	text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(245,169,31,0.9);
	color: #f5a91f;
	color: #4F01BC;
	opacity: 0.8;
	font: 800 40px 'Open Sans', sans-serif;
}

.dont_use {font: 700 40px 'Bitter';}

#header {
background:#5ca2d5;
padding:10px;
right: 0;
left: 0;
}

.clr1{height: 1px; width: 100%; clear: both;}
.clr10{height: 10px; width: 90%; clear: both;}
.clr20{height: 20px; width: 100%; clear: both;}
.clr25{height: 25px; width: 90%; clear: both;}

#page-wrap { width: 100%; margin: 0 auto; text-align: center;min-height:100%;position:relative;}
.circle1, .circle2, .circle3, .circle4, .circle5, .circle6 {
  background-image: url('img/circle-sprite.png');
  background-repeat: no-repeat; width: 150px; height: 150px;
}

.circle1 { background-position: -0px -0px; }
.circle2 { background-position: -150px -150px; }
.circle3 { background-position: -0px -0px; }
.circle4 { background-position: -0px -0px; }
.circle5 { background-position: -0px -0px; }
.circle6 { background-position: -0px -0px; }

#slides {display: none}
#slides .slidesjs-navigation {margin-top:5px;}
a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
      background-image: url(img/btns-next-prev.png);
      background-repeat: no-repeat;
      display:block;
      width:12px;
      height:18px;
      overflow: hidden;
      text-indent: -9999px;
      float: left;
      margin-right:5px;
    }

a.slidesjs-next {margin-right:10px;background-position: -12px 0;}
a:hover.slidesjs-next {background-position: -12px -18px;}
a.slidesjs-previous {background-position: 0 0;}
a:hover.slidesjs-previous {background-position: 0 -18px;}
a.slidesjs-play {width:15px;background-position: -25px 0;}
a:hover.slidesjs-play {background-position: -25px -18px;}
a.slidesjs-stop {width:18px;background-position: -41px 0;}
a:hover.slidesjs-stop {background-position: -41px -18px;}
.slidesjs-pagination {margin: 7px 0 0;float: right;list-style: none;}
.slidesjs-pagination li {float: left;margin: 0 1px;}
.slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image: url(img/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {background-position: 0 -13px}
.slidesjs-pagination li a:hover {background-position: 0 -26px}
#slides a:link,#slides a:visited {color: #333}
#slides a:hover,#slides a:active {color: #9e2020}
.navbar {overflow: hidden}

    #slides {display: none}
    .container {margin: 0 auto}
    
/* essential for slide sizing */    
#slides img { background-size: contain; width: 100%; height: auto;
border-color: #016fbc;border-width: 2px;border-style: solid;
  position: absolute;
  top: 0;
  left: 0;}

/* For tablets & smart phones */
@media (max-width: 767px) {
     body {padding-left: 20px;padding-right: 20px;}
     .container {width: auto}
     .xxxxcontainer {width: 250px; height: 210px;}
}

/* For smartphones */
@media (max-width: 480px) {
     .container {width: auto}
     .xxxxcontainer {width: 250px; height: 210px;}
}

/* For smaller displays like laptops */
@media (min-width: 768px) and (max-width: 979px) {
     .xxxxcontainer {width: 250px; height: 210px;}
}

/* For larger displays */
@media (min-width: 1200px) {
     .xxxxcontainer {width: 250px; height: 210px;}
}

#main_area { width: 600px; height: 500px; 
background-image: url("img/600x500.png");
margin: auto;
background-repeat: no-repeat;
    background-position:center center;
}
#photo_view { width: 224px; height: 188px; }

#panela { float: left; width: 181px; height: 498px;}
#panelb { float: left; width: 230px; height: 498px; text-align: center;}
#paneld { float: left; width: 4px; height: 498px;}
.square1 { width: 100%; height: 100px; text-align: right;}
.square2 { width: 100%; height: 100px; text-align: left;}
.space1{height: 104px; width: 90%; clear: both;}
.space2{height: 92px; width: 90%; clear: both;}
.space3{height: 5px; width: 90%; clear: both;}
.space4{height: 36px; width: 90%; clear: both;}
.space5{height: 15px; width: 90%; clear: both;}
.space6{height: 104px; width: 90%; clear: both;}
.space7{height: 92px; width: 90%; clear: both;}


.grow { transition: all .25s ease; z-index: 1000; opacity: 0.0;
border-width: 5px;border-style: solid; }

.grow:hover { transform: scale(1.8); opacity: 1.0;}

.fade {
   opacity: 0.0;
   transition: opacity .90s ease-in-out;
   -moz-transition: opacity .90s ease-in-out;
   -webkit-transition: opacity .90s ease-in-out;
   }

.fade:hover { opacity: 1.0;}

.footer {
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #016fbc;
  color: #000033;
  text-align: center;
  
  background: url(https://spiritsvision.com/NHMS/img/footerbk2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  
}

.footer-cont { position: relative;font-size: 0.9em; font-family: Verdana, Helvetica, Arial, sans-serif; width: 80%; margin: 0 auto;}
.footer-cont h1 {font-size: 1.2em;}
.footer-cont h2 {line-height: 0.5em; color: #000030; font-weight: bold; font-size: 1.2em;}
.footer-cont p {line-height: 1.0em; font-size: 1.2em;}

.footer-col { padding: 0px; float: left; display: block; width: 25%; }
.footer-col h2 { text-align: left; padding-left: 25%;}
.footer-col p { text-align: left; padding-left: 25%;}


.footer-col50 { padding: 0px; float: left; display: block; width: 40%; left: -28px; position: relative;}

.footer-col50 p { text-align: left; margin: 15% -30px; font-size: 1.1em; line-height: 1.2em; 
background: white; padding: 12px; }

.footer-col a:link {text-decoration: none; color: #000033;}      /* unvisited link */
.footer-col a:visited {text-decoration: none; color: #000033;}  /* visited link */
.footer-col a:hover { text-decoration: none; color: #f5a91f;}  /* mouse over link */
.footer-col a:active {text-decoration: none; color: #f5a91f;}  /* selected link */ 

.footer-credits { font-size: 0.8em; font-family: 'Varela Round'; line-height: 1.0em; width: 80%; margin: 0 auto; padding: 0px; text-align: right; color: #f5a91f;}

.footer-credits a {text-decoration: none; color: #f5a91f;}

.footer-credits a:link {text-decoration: none; color: #000033;}      /* unvisited link */
.footer-credits a:visited {text-decoration: none; color: #000033;}  /* visited link */
.footer-credits a:hover { text-decoration: underline; color: #f5a91f;}  /* mouse over link */
.footer-credits a:active {text-decoration: none; color: #f5a91f;}  /* selected link */ 

.footer-credits img { width: 50%; height: auto;}
.footer-credits img:hover { opacity: 0.5; filter: alpha(opacity=50);}

.tagline { text-align: justify; font-size: 1.1em; font-family: 'Varela Round'; line-height: 1.0em; width: 80%; margin: 0 auto; padding: 0px; color: #fff;}


#socialicons {width: 80%;text-align: center;margin: 0 auto;}

/* NAVIGATION - using sprites - sweeeeet! */
#socialicons img {width: 104px; height: 104px; vertical-align:middle; background: url(img/social-sprite.png); display: inline-block;background-position: 0px 0px; content: ' ';}

#socialicons img {
border-image-width: none;
border: 0px; border-width: inherit;
}

#socialicons img.ico1 {background-position: -0px -0px;}
#socialicons img.ico1:hover {background-position: -0px -2px; opacity: 0.4; filter: alpha(opacity=40);}

#socialicons img.ico2 {background-position: -105px -0px;}
#socialicons img.ico2:hover {background-position: -105px -2px; opacity: 0.4; filter: alpha(opacity=40);}

#socialicons img.ico3 {background-position: -212px -0px;}
#socialicons img.ico3:hover {background-position: -212px -2px; opacity: 0.4; filter: alpha(opacity=40);}

#socialicons img.ico4 {background-position: -318px -0px;}
#socialicons img.ico4:hover {background-position: -318px -2px; opacity: 0.4; filter: alpha(opacity=40);}


@media screen and (max-width: 2800px) {
#mobile { display: none; }
}

@media screen and (max-width: 1800px) {

#main_area {  
width: 600px; height: 500px; 
background-image: url("img/600x500.png");
margin: auto;
background-repeat: no-repeat;
    background-position:center center;}

#mobile { display: none; }

#pre-area { width: 80%; background-image:url('img/triangle.png');
    background-repeat:no-repeat;
    background-position:center bottom;
    margin: auto;
    background-size: cover; }

}

@media screen and (max-width: 780px) {

#main_area { 
width: 600px; height: 500px; 
background-image: url("img/600x500.png");
background-repeat: no-repeat;
background-position:center center;
display: block;
position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
    
    }

#mobile { display: none; }

#pre-area { width: 90%; background-image:url('img/triangle.png');
    background-repeat:no-repeat;
    background-position:center bottom;
    margin: auto;
    background-size: cover; 
    position: relative;
    overflow: hidden;
    height: 500px;
    }

}

@media screen and (max-width: 540px) {
.footer-col { padding: 0px; float: none; width: auto; border:0; margin-right:0; border-color: white;border-width: 1px;border-style: solid; margin-bottom: 20px;border-bottom:2px solid #000;}
.xxfooter-col50 { padding: 0px; float: none; width: auto; border:0; margin-right:0; border-color: white;border-width: 1px;border-style: solid; margin-bottom: 20px;border-bottom:2px solid #000;}

.footer-col50 { display: block; padding: 0px; float: none; width: auto; border: 0; margin-right: 0; left: 0px; position: relative;}

#main_area { display: none; }

#mobile { display: block; width: 100%; height: auto; padding: 0; margin: 0 auto;}

#mobile img { width: 100%; height: auto; }

.footer { background: url(https://spiritsvision.com/NHMS/img/footerbk5.jpg);
    background-size: cover;
    background-repeat: no-repeat;}
    
.footer-col, .footer-col50 { background: #fff; }

.footer-col h2 { text-align: left; padding-left: 5%;}
.footer-col p { text-align: left; padding-left: 5%;}

#pre-area { display: none; }

}