html, body {width: auto!important; overflow-x: hidden!important;}


/* get the required local files */
@font-face {
  font-family: 'Roboto';
  src: url('roboto.eot'); /* IE9 Compat Modes */
  src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('roboto.woff') format('woff'), /* Modern Browsers */
  url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* use the font */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
}

.space  {
  height: 120px;
}

.space2 {
  height: 140px;
}

.dayp {
  width: 1220px;
}

.graphic {
  width: 50px;
}

.images {
            display: flex;
            flex-wrap: wrap;
           
        }
  
        .photo {
            max-width: 100%;           
            height: 100%;
        }
  
        .photo img {
            width: 100%;
            height: 100%;
            border-radius: 6%;

        }

        .photo2 img {
            width: 100%;
            height: 100%;
            border-radius: 6%;
          

        }

         .photo7 img {
            width: 100%;
            height: 100%;
            border-radius: 6%;
            border: solid #000 2px;

        }

img.shrink  {
  height: 180px;
}

img.shrink2  {
  height: 130px;
}

p.call   {
  margin-left: auto;
  margin-right: auto;
}


.mobile-display
{display:none}

.desktop-display{display:block}

@media (max-width:1024px){
.desktop-display {display:none}
.mobile-display {display:block}

}

/* Questions centering */

.colalign {
  position: relative;
  top: -40px;
  text-align: center;
  padding: 20px;
  width: 120px;
 
}
}


/* life page group blocks */
 
}


.block-a  {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  background-color: #CCF1FF;
  display: block;
  margin: auto;
  vertical-align: middle;
  border-radius: 12.5px;
  box-shadow:2px 2px 5px 1px #ccc;
  border-style: solid;
  border-color: white;
  width: 300px;
  height: 100%px;

}

.block-b {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  background-color: #E0D7FF;
  display: block;
  margin: auto;
  vertical-align: middle;
  border-radius: 12.5px;
  box-shadow:2px 2px 5px 1px #ccc;
  width: 300px;
  height: 100%px;
  border-style: solid;
  border-color: white;
}

.block-c {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  background-color: #FFCCEE;
  display: block;
  margin: auto;
  vertical-align: middle;
  border-radius: 12.5px;
  box-shadow:2px 2px 5px 1px #ccc;
  width: 300px;
  height: 100%px;
  border-style: solid;
  border-color: white;
 
}

.block-d {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  background-color: #D7EEFF;
  display: block;
  margin: auto;
  vertical-align: middle;
  border-radius: 12.5px;
  box-shadow:2px 2px 5px 1px #ccc;
  width: 300px;
  height: 100%px;
  border-style: solid;
  border-color: white;

}

.block-d {
  padding-top: 20px;
  padding-bottom:20px;
  text-align: center;
  background-color: #D7EEFF;
  display: block;
  margin: auto;
  vertical-align: middle;
  border-radius: 12.5px;
  box-shadow:2px 2px 5px 1px #ccc;
  width: 300px;
  height: 100%px;
  border-style: solid;
  border-color: white;

}

.block-e {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  background-color: #FAFFC7;
  display: block;
  margin: auto;
  vertical-align: middle;
  border-radius: 12.5px;
  box-shadow:2px 2px 5px 1px #ccc;
  width: 300px;
  height: 100%px;
  border-style: solid;
  border-color: white;
}

.block-f {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  background-color: #ffb9b9;
  display: block;
  margin: auto;
  vertical-align: middle;
  border-radius: 12.5px;
  box-shadow:2px 2px 5px 1px #ccc;
  width: 300px;
  height: 100%px;
  border-style: solid;
  border-color: white;
}
/* Scroll up */

#scrollup {
  width: 48px;
  height: 48px;
  background: url(https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_up_alt1-48.png) 0 0 no-repeat;
  text-indent: -9999px;
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
}

/* Section Styling */

section.color_art {
  color: #222;
  background-color: #eee;
  border-style: solid;
  border-color: darkslateblue;
  border-radius: 12.5px;
  padding: 20px 20px 20px 20px;
}

section.color_stepwork {
  background-color: #E0ECF8;
  border-style: solid;
  border-color: darkslateblue;
  border-radius: 12.5px;
  padding: 20px 20px 40px 20px;

}

section.vol {
  display: block;
  background-color: #EFF2FB;
  width: 100%;
  border-radius: 12.5px;
  padding: 20px 20px 40px 30px;
  box-shadow: 5px 5px 5px #084B8A;
  padding-top: 20px 20px 20px 20px;
}

section.vol1 {
  display: block;
  background-color: #E0F8E6;
  width: 100%;
  border-style: solid;
  border-color: white;
  border-radius: 12.5px;
  padding: 20px 20px 40px 30px;
  box-shadow: 5px 5px 5px #0B6138;
}

section.vol2 {
  display: block;
  background-color: #EFF2FB;
  width: 100%;
  border-style: solid;
  border-color: white ;
  border-radius: 12.5px;
  padding: 20px 20px 40px 30px;
  box-shadow: 5px 5px 5px #29088A;
}

section.vol3 {
  display: block;
  background-color: #F7F8E0;
  width: 100%;
  border-style: solid;
  border-color: white ;
  border-radius: 12.5px;
  padding: 20px 20px 40px 30px;
  box-shadow: 5px 5px 5px #868A08;
}



section.nrn {
  display: block;
  background-color: white;
  width: 100%;
  border-style: solid;
  border-color: black ;
  border-radius: 12.5px;
  padding: 20px 20px 40px 30px;
}

section.nrn2 {
  display: block;
  background-color: #eee;
  width: 100%;
  border-style: solid;
  border-color: #ccc ;
  border-radius: 12.5px;
  padding: 20px 20px 40px 30px;
}

a.guardian:link  {
  text-decoration: none;
  color: #ddd;

}

a.guardian:hover {
  background-color: lightgreen;
  color: #202c45;
}

a.guardian:visited {
  background-color: yellow;
  color: #92d4e5;
}

a.guardian2:link  {
  text-decoration: none;
  color: #00687F;

}

a.guardian2:hover {
  background-color: lightgreen;
  color: #202c45;
}

a.guardian2:visited {
  background-color: yellow;
  color: #92d4e5;
}

li.indent   {
  margin-left: 20px;
}

p   {
  font-size: 1.2em;
  padding: 6px;
}

p.kirk  {
  margin-left: 100px;
  margin-right: 100px;
}

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

  p.kirk  {
  margin-left: 37px;
  margin-right: 37px;
}
}

h1  {
  font-size: 3.0em;
  font-family: Roboto, Geneva, Tahoma, sans-serif;
  
}


h1.big  {
  font-size: 3.0em;
  color: #8aadcd;
  text-shadow: 1px 1px 1px #000000;
  padding-top: 60px;
}

h1.life  {
  font-size: 3.0em;
  color: #0b2042;
  text-shadow: 1px 1px 1px #000000;
  padding-top: 60px;
}

h2  {
  font-size: 1.0em;
 text-align: center;
}

h2.big  {
  font-size: 1.0em;
  color: #ddd;
  text-shadow: 2px 2px 3px #000000;
}

h3  {font-size: 1.4em;
  text-align: center;
}

h3.big  {
  font-size: 2.2em;
  color: #8aadcd;
  text-shadow: 1px 1px 1px #000000;
  padding-top: 60px;
}

hr  {
  color: darkblue;
  border: solid; 
  size: 2px;
  color: greenyellow;

}

h4  {font-size: 1.2em;
text-align: center;}


img.tt  {
  border-top: solid 2px;
  border-left: solid 2px;
  border-color: #222 ;
  border-radius: 12.5px;
}

.banner  {
  display: block;
  margin-left: auto;
  margin-right: auto;

}

.move {
  position: relative;
  top: -45px;
}

img   {
  max-width: 100%;
  display: block;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 0px;
}

img.display {
  padding-top: 80px;
}

p.indent  {

  padding-top: 20px;
  padding-left: 80px;
  padding-right: 80px;
 
} 

p.white {
 color: white; 
}

p.heading {
  color: #00284F;
  font-weight: bold;
  padding-left: 80px;
}

/* Mobile device settings and peculiarities */


img.serenity  {
  
  border-radius: 12.5px;
  box-shadow: 11px 11px 11px #0B4C5F;
}

@media only screen and (max-width: 768px) { 
   
p.indent {

  padding-left: 10px;
  padding-right: 10px;
 font-family: Roboto, sans-serif, arial;
}

p.heading {
  color: #00284F;
  font-weight: bold;
  padding-left: 10px;
  font-family: Roboto, sans-serif, arial;
}


}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

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

  .caption  {
    display: none;
  }

  .caption span.border  {

    display: none;
  } 


@media (max-width:1024px) {
  .display  {
    display: none;
  }

}

@media (max-width:1024px) {
  .move2  {
  position: relative;
  top: -70px;
  }

}
  
@media only screen and (min-width: 1024px) {
        .mobile-only {
            display:none !important;
        }
    } 
    @media only screen and (max-width: 1024px) {
        .desktop-only {
            display:none !important;
        }
    }