/**
 Alex Lowe's core-layout classes for responsive designs.
 We have a classes for horizontally and vertically stacking elements, as well as horizontally and vertically conserving elements.
 We can do plain-old rows, horizontally-centered columns, and a horizontally and vertically centered divs.

 You'll note all of the appearances of the position:relative; style. This is so that we can place absolutely-positioned
 divs inside these elements. Absolutely-positioned divs are frowned upon, and like anything else that's frowned upon, it's
 also occasionally necessary.

 https://colintoh.com/blog/display-table-anti-hero
 **/

/*
@font-face {

  font-family: 'Open Sans';
  font-weight: lighter;
  
  /*font-family: 'Neuropol';
  src:  url('neuropol-x-rg.woff2') format('woff2'),
        url('neuropol-x-rg.woff') format('woff'),
        url('neuropol-x-rg.ttf')  format('truetype');
  */


/*
  Levi Edit 7/22/18: Added the OpenSans-Bold.ttf and OpenSans-Light.ttf and OpenSans-Regular.ttf files to the css folder. Adding them the site below.
*/

@font-face {
  font-family: 'OpenSans';
  src: url('OpenSans-Bold.ttf') format(truetype),
       url('OpenSans-Light.ttf') format(truetype);
     }

.footer{
      width:100%; 
      
      color:#444444;
      padding-top:20px; 
      padding-bottom:50px; 
         font-size:1vw; 
         margin-left:2vw; 
}
.copyright, .contact_us{
     font-size:1vw; 
     margin-left:5vw;
     margin-right:0;
}

@media only screen and (max-width: 1100px){
  .copyright, .contact_us{
    font-size: 1.75vh;
  }
}

@media only screen and (max-width: 500px){
  .copyright, .contact_us{
    font-size: 1.25vh;
  }
}




/*clear the defaults.*/
* {margin: 0px;padding: 0px;border: 0px;/*border: 1px solid red;*/}

/*https://css-tricks.com/removing-the-dotted-outline/
get rid of that annoying dotted border around links.*/
a {
outline: 0;
}


img{
    margin-left: auto;
    margin-right: auto;
}


body, html {
height:100%;

}




/*the basic building blocks: row, box, abox and vbox. Why the position:relative style? It needs that so that
absoulely positioned elements insice row, box, abox and vbox will work be positioned correctly.*/
.row {
box-sizing: border-box;
-moz-box-sizing: border-box;
display:block;
position:relative;
}

/*the behavior for a fill-row is for it to go to 100% height.*/
.row.fill {
height:100%;
}


/*absolutely-positioned div. You can use this inside any of these elements accept h-group and v-group, which only
accept boxes and v-inners, respectively.*/
.abox {
position:absolute;
display:inline;
box-sizing:border-box;
-moz-box-sizing: border-box;
top:0px;
left:0px;
}
/*Here is our all-purpose wrapper for filling the width and height of a container.*/
.abox.fill {
width:100%;
height:100%;
}



/*this is a wrapper, and requires a row inside of it to be useful. vbox isn't very commonly used.*/
.vbox {
box-sizing:border-box;
-moz-box-sizing: border-box;
display:table-row;
position:relative;
}



/*Box is our main weapon. It stacks horizontally. If it's within an h-group or v-group, then it obeys the laws of
horizontal or vertical conservation */
.box {
box-sizing:border-box;
-moz-box-sizing: border-box;
display:inline-block;
position:relative;
/*why vertical-align:top? See horizontal conservation vertical alignment problem/index.html
that's the strange problem that happens when you don't have this style.*/
vertical-align:top;
}
.box.fill {
width:100%;
height:100%;
}

.h-group > .box {
display: table-cell;
box-sizing:border-box;
-moz-box-sizing: border-box;
position:relative;
}
/*a box inside an hgroup with the fill modifier-class will fill up all the available height,
but not the available width. We want the widths to be set explicitly with h-conserved elements.*/
.h-group > .box.fill {
height:100%;
}


.v-inner > .box  {
display: table-cell;
box-sizing:border-box;
-moz-box-sizing: border-box;
position:relative;

/*IE 9,10,11 have a problem with max-width images and containers with a percent width.
See img fill issue IE9-10-11 in the html research folder. What happens is that, within a v-group structure an image with
the usual max-width:100% max-height:100%; sizes to 100% wide and ignores the width of its container unless
that width is in something like px. This line fixes that.*/
table-layout:fixed;
}




/*Our wrapper classes for horizontal and vertical conservation*/
.h-group {
display: table;
width:100%;
box-sizing:border-box;
-moz-box-sizing: border-box;
}

/* an hgroup modified with the fill class. the behavior is that the
hgroup will also fill all the available height in addition to the width.*/
.h-group.fill {
height:100%;
}

/*a modifier specifically for the h-group class. This is for when you have fixed-width
horizontally-conserved boxes.*/
.h-fixed-widths {
table-layout:fixed;
}


/*v-group and v-inner. These are really only good for the basic layout of a webpage with a header, body and footer.
when you have to do something acrobatic with image-fills and lightboxes they're much less useful.*/
.v-group {
display:table;
height:100%;
width:100%;
box-sizing:border-box;
-moz-box-sizing: border-box;

/*Same "img fill issue IE9-10-11"*/
table-layout:fixed;
}
.v-inner {
display:table-row;
position:relative;
}

/*Our center column class
https://www.w3.org/Style/Examples/007/center.en.html
*/
.center_column {
display:table;
margin:auto;
box-sizing:border-box;
-moz-box-sizing: border-box;
position:relative;
/*display: block;
margin-left: auto;
margin-right: auto;
position:relative;
box-sizing:border-box;
-moz-box-sizing: border-box;*/

/*display:table;
margin-left: auto;
margin-right: auto;
box-sizing:border-box;
-moz-box-sizing: border-box;
position:relative;*/
}
.center_column2 {
display: block;
margin-left: auto;
margin-right: auto;
position:relative;
box-sizing:border-box;
-moz-box-sizing: border-box;
}


/*Our center div which will center itself both horizontally and vertically*/
.center {
position: relative;
top: 50%;
display:table;
margin-left:auto;
margin-right:auto;
box-sizing:border-box;
-moz-box-sizing: border-box;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

/*to deal with long text that might overflow.*/
.ellipsis {
overflow:hidden;
text-overflow:ellipsis;
}
.single-line {
white-space:nowrap;
}


/*https://fettblog.eu/blog/2013/06/16/preserving-aspect-ratio-for-embedded-iframes/
Goddamn that's clever.
*/
.youtube-aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 60%;
}

.youtube-aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                                      //
//  Image fills. Images that have to fit "nicely" inside a container. The images and containers are     //
//  both of arbitrary aspect-ratio, and we assume that the image is bigger than the container.          //
//  See img-fill-w-center for a detailed explanation of the kind of logic that's baked in here. You'll  //
//  also note that we're doing something special for IE10. That's because stupid stupid stupid IE10     //
//  doesn't use max-width/max-height rules unless the element already has an explicit with and height   //
//                                v                                                                     //
////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*********************************************************** img-fill-h-center ********/

/*the mwxh ones are almost identical to the h ones, the only real difference is
that we have to start with a max-width:inherit style to forward that information to the image within.*/
.img-wrap-mwxh-center {
max-width:inherit;
}

/*an img-fill-h-center nested inside a row.*/
.row > .img-wrap-h-center, .row > .img-wrap-mwxh-center, .abox > .img-wrap-h-center, .abox > .img-wrap-mwxh-center {
box-sizing: border-box;
-moz-box-sizing: border-box;
display:block;
position:relative;
height:100%;
overflow:hidden;
}

/*an img-fill-h-center nested inside a box*/
.box > .img-wrap-h-center, .box > .img-wrap-mwxh-center {
box-sizing: border-box;
-moz-box-sizing: border-box;
display:block;
position:relative;
height:100%;
overflow:hidden;
}
_:-ms-fullscreen, :root .box > .img-wrap-h-center {
display:table;
table-layout:fixed;
height:100%;
}

/* Here's a structure of img-fill-h-center. */
.h-group > .box > .img-wrap-h-center, .h-group > .box > .img-wrap-mwxh-center {
box-sizing: border-box;
-moz-box-sizing: border-box;
display:block;
position:relative;
height:inherit;
overflow:hidden;
}

/*here's another nesting of img-fill-h-center
Note that we have to do something different of IE11 */
.row > .box > .img-wrap-h-center {
box-sizing: border-box;
-moz-box-sizing: border-box;
display:block;
position:relative;
height:100%;
overflow:hidden;
}
_:-ms-fullscreen, :root .row > .box > .img-wrap-h-center {
display:table;
table-layout:fixed;
height:100%;
}

/*same as the one above, just another box for the outer-wrapper.*/
.box > .box > .img-wrap-h-center {
box-sizing: border-box;
-moz-box-sizing: border-box;
display:block;
position:relative;
height:100%;
overflow:hidden;
}
_:-ms-fullscreen, :root .box > .box > .img-wrap-h-center {
display:table;
table-layout:fixed;
height:100%;
}

/*And here's the behavior of the img-fill inside the img-fill-h-center wrapper.*/
.img-wrap-h-center > img.box {
max-width: 100%;
max-height: 100%;
top:50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
}

/*A container with a definite height and a max-width.
In this case the padding goes to the image element, not the container. (max-width x height ie mwxh)*/
.img-wrap-mwxh-center > img.box {
max-height: 100%;
max-width: inherit;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
}

/***** img-fill-w-container **********/

/*The container has a definite width, no height specified
So what's the deal here with this transform? See, if there's no height specified, then it's going to take
up ALL the height that it can and fill the container. So centering the image vertially won't be an issue
then. HOWEVER, if the image is MORE narrow than the container then the image will reach its full height
before it runs out of width, and in that case, there's going to be this extra horizontal space left-over.
So what do we do? We have this extra transforming logic to deal with those cases. When the image is MORE
narrow, it will center it horizontally. When the image is LESS narrow, then the width is going to reach the
walls of the container, and the centering trick will simply have no effect.
*/
.img-wrap-w-center {
display:table;
table-layout:fixed;
width:100%;
height:inherit;
}

.img-wrap-w-center > img.box {
max-width: 100%;
max-height: 100%;
left: 50%;
transform: translateX(-50%);
-ms-transform: translateX(-50%);
}

/*******************************************************************************/




/*A container with a definite width and a max-height.
In this case the padding goes to the image element, not the container. (width x max-height ie wxmh)*/
.img-fill-wxmh-center {
max-width: 100%;
max-height: inherit;
left: 50%;
transform: translateX(-50%);
-ms-transform: translateX(-50%);
}


/**
https://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
they claim that
@media screen and (min-width:0\0) {
will only fire on IE9 and 10, but I also find that it fires on IE11 as well.
*/
@media screen and (min-width:0\0) {


}

/*this is how we can target classes to alter for IE11*/
/*_:-ms-fullscreen, :root .img-fill, .img-fill-wxh-center, .img-fill-h-center, .img-fill-w-center, .img-fill-wxmh-center, .img-fill-mwxh {
  }*/
/*_:-ms-fullscreen, :root .img-fill-h-center-wrapper4 {
width:100%; height:0px; min-height:100%;
}*/



/**
  for an h-group, we can add a class which will make the structure revert to row when the screen reaches below a critical width
  within a group of h-conserved elements, we can include a box with the class switch-to-hgroup, and it will have the opposite effect.
  the box will become an h-group, and all boxes therein will become h-conserved by that h-group.

  So the idea is that you have h-conserved elements that you want to turn into rows, but SOME of them you want them to STAY as h-conserved
  elements. For instance, maybe you have a name and a thumbnail, but when the screen gets small you want those elements to to REMAIN
  h-conserved instead of each busting into a new row. And WHY? because you might have some elements that are SMALL and you don't want each one
  to become a separate row.

  You'll note that we have to then override some of the img-fill behavior in here.
 **/
  @media only screen and (max-device-width : 900px), only screen and (max-width: 900px) {

    /*h-group.switch-to-rows will become rows at this width. we're resetting the width to auto
    and all the other styles get overriden so this thing is a row. */
    .h-group.switch-to-rows {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display:block;
    position:relative;
    width:auto;
    }

    /*similarly, all of the horizontal-conserved elements inside h-group become rows at this width.*/
    .h-group.switch-to-rows > .box:not(.switch-to-hgroup) {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display:block;
    position:relative;
    width:auto !important; /*need to override the width propery of the box, even inline styles*/
    vertical-align:baseline;
    max-width:none !important; /*need to override the max-width propery of the box, even inline styles*/
    }


    /*these are boxes which switch to h-groups at this width*/
    .box.switch-to-hgroup {
    display: table;
    width:100% !important;
    box-sizing:border-box;
    -moz-box-sizing: border-box;
    vertical-align:baseline;
    }

    /*some helper for the .box.switch-to-hgroup add these classes if you don't want the width to expand to 100%
    and you have somethng else in mind. */
    .switch-mw-20 {
    max-width:20%;
    }
    .switch-mw-40 {
    max-width:40%;
    }
    .switch-mw-60 {
    max-width:60%;
    }
    .switch-mw-80 {
    max-width:60%;
    }
    .switch-mw-100px {
    max-width:100px;
    }
    .switch-mw-200px {
    max-width:200px;
    }
    .switch-mw-300px {
    max-width:300px;
    }


    /*And the first level of boxes within become horizontally-conserved elements.*/
    .box.switch-to-hgroup > .box {
    display: table-cell;
    box-sizing:border-box;
    -moz-box-sizing: border-box;
    position:relative;
    vertical-align:baseline;
    }


    /*.h-group.switch-to-rows and their boxes switch to rows, so their img-wraps must switch to row behavior*/
    .h-group.switch-to-rows > .img-wrap-h-center, .h-group.switch-to-rows > .img-wrap-mwxh-center, .h-group.switch-to-rows > .box > .img-wrap-h-center, .abox > .img-wrap-mwxh-center {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display:block;
    position:relative;
    height:100%;
    overflow:hidden;
    }

    /*box.switch-to-h-group becomes an h-group at this width, so these img-wraps need to go to h-group > box behavior*/
    .box.switch-to-h-group > .box > .img-wrap-h-center, .box.switch-to-h-group > .box > .img-wrap-mwxh-center {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display:block;
    position:relative;
    height:inherit;
    overflow:hidden;
    }

    /*.h-group.switch-to-rows > .box becomes rows at this width, so these img-fills bave to adust to row > box behavior. */
    .h-group.switch-to-rows > .box > .box > .img-wrap-h-center {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display:block;
    position:relative;
    height:100%;
    overflow:hidden;
    }
    _:-ms-fullscreen, :root .h-group.switch-to-rows > .box > .box > .img-wrap-h-center {
    display:table;
    table-layout:fixed;
    height:100%;
    }

  }