@import url('https://fonts.googleapis.com/css?family=Anonymous+Pro:400,700|Open+Sans');

/*    font-family: 'Anonymous Pro', monospace;

    font-family: 'Ubuntu', sans-serif;
*/

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
 * -- BASE STYLES --
 */


 html {
  min-height: 100%;

}

 .pure-g.gutters{
  margin: 0 -1em;
}
.pure-g.gutters > [class *=pure-u]{
  box-sizing: border-box;
  padding: 0em 1em;
}
.instagram-head, .overlaid {
    position: relative;
    margin-bottom: 2em;
}
.overlaid .date-block {
    position:  absolute;
    top: 0;
    right: 0;
    color:  rgb(250, 250, 255);
    background-color: rgba(25, 25, 30, .5);
    padding: .5em;
}
.teaser h4 {
    margin-bottom: 0;
}
.instagram-head {
    padding: 5em 0 2em;
}
.instagram-head .fa {
    display: inline-block;
    position: relative;
    z-index: 10;
    color:  rgb(250, 250, 255);
    background-color: #E6E6EB;
    padding: 0 .5em;

}
.heading-line {
    background-color: rgb(250, 250, 255);
    height: 2px;
    position: relative;
    z-index: 9;
    bottom:  30px;

}


body {
    line-height: 1.5;
    color: #0f0f0f;
    font-family: 'Open Sans', sans-serif;;
    background: #FAFAFF;/*#141419;*/
}
.page-container {
    background: #ecf1f2;
}
.pure-g [class*="pure-u"]{
    font-family: 'Open Sans', sans-serif;;
}
.norm1 {
    /*font-family: 'latin_modern_mono_Bd', serif;*/
    font-family: 'Roboto Slab', serif;
    font-weight: bold;
    text-transform: uppercase;
    color: red;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Anonymous Pro', monospace;
    color: #000;
}

h1 {
    margin: 0;
    font-size: 2em;
}
h2 {
    font-size: 3em;
}
label {
    color: #34495e;
}

a .fa {
    color: rgb(25, 25, 30);
}
footer a .fa, footer .fa {
    color: rgb(250, 250, 255); 
}
a:hover .fa {
    color: red;
}

.pure-img {
    width: 100%;
    height: auto;
}
a.is-right {
    display: block;
    text-align: right;
}
/*
 * -- LAYOUT STYLES --
 * These are some useful classes which I will need
 */

 a.social {
padding-right:  1em;
 } 

.constrained {
    max-width: 48em;
    margin: 0 auto
    
}



.l-box {
    padding: 1em;
}
.feature {
    background-color: rgb(242, 242, 247);
    border: 1px solid rgb(237, 237, 242);
    border-left: 0;
    border-right: 0;
    margin-bottom: 6em;
}
.feature p {
    /*font-size: 2em;*/
}
.l-box-lrg {
    padding: 2em;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.is-center {
    text-align: center;
}
.is-right {
    text-align: right;
}


/*
 * -- PURE FORM STYLES --
 * Style the form inputs and labels
 */
.pure-form label {
    margin: 1em 0 0;
    font-weight: bold;
    font-size: 100%;
}

.pure-form input[type] {
  
}

 * -- MENU STYLES --
 */
header .pure-menu ul{
    float: right;
}


.pure-menu.pure-menu-fixed {
    /* Fixed menus normally have a border at the bottom. */
    border-bottom: none;
    /* I need a higher z-index here because of the scroll-over effect. */
    z-index: 4;
}

.home-menu .pure-menu-heading {
    color: white;
    font-weight: 400;
    font-size: 120%;
}

.home-menu .pure-menu-selected a {
    color: white;
}

.home-menu a {
    color: #6FBEF3;
}
.home-menu li a:hover,
.home-menu li a:focus {
    background: none;
    border: none;
    color: #AECFE5;
}


/*
 * -- SPLASH STYLES --
 * 
 */

.splash-container {
    z-index: 1;
    /* The following styles are required for the "scroll-over" effect */
    width: 100%;
    
    top: 0;
    left: 0;
    position: fixed !important;
    border: 1em solid #fafaff;
}
.splash-container1 {
    border: 1em solid #fafaff;
    border-bottom: 0;
}
.img-slider {
    position: absolute;
    width: 100%;
}
.img-slider img {
    width: 100%;
    height: auto;
}
    
.splash1 {
    /* absolute center .splash within .splash-container */
    width: 80%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 100px; left: 0; bottom: 0; right: 0;
    text-align: center;
    text-transform: uppercase;
}

/* This is the main heading that appears on the blue section */
.splash-head {
    font-size: 20px;
    font-weight: bold;
    padding: 1em 1.6em;
    font-weight: 100;
    line-height: 1em;
}

/* This is the subheading */
.splash-subhead {
    color: white;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

/*
 * -- CONTENT STYLES --
 * This represents the content area (everything below the blue section)
 */

 .gradient {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fafaff+0,fafaff+18,4b4b50+100 */
background: rgb(250,250,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(250,250,255,1) 0%, rgba(250,250,255,1) 18%, rgba(75,75,80,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(250,250,255,1) 0%,rgba(250,250,255,1) 18%,rgba(75,75,80,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(250,250,255,1) 0%,rgba(250,250,255,1) 18%,rgba(75,75,80,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafaff', endColorstr='#4b4b50',GradientType=0 ); /* IE6-9 */

 }
.content-wrapper {
    /* These styles are required for the "scroll-over" effect */
    position: absolute;
    top: 40%;
    width: 100%;
    min-height: 12%;
    z-index: 2;
    background:#fafaff;

}
.content-wrapper1 {
    background:#fafaff;

}

/* We want to give the content area some more padding */
.content {
    padding: 1em 2em;
}

/* This is the class used for the main content headers (<h2>) */
.content-head {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 2em 0 1em;
}

/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
    color: white;
}

/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
    color: #1f8dd6;
}

.pad-top {
    padding-top: 6em;
}
.quotes {
    padding: 2em 0 1em;
}
.quotes p {
    color: #ECF1F2;
    /*font-size: 2em;*/
}
.p-box {
    border: 1px solid rgb(190, 190, 195);
    
    background: rgb(200, 200, 205);
    position: relative;

}
.p-box-sm {
    margin: .1em;
}

.trans-box p {
    margin-top: 0;
}
.nb {
    font-size: smaller;
}

.teaser {
    padding: 0 1em 1em;
}
.teaser h3 {
    margin-bottom: 0;
    padding-bottom: 0;
}

.teaser p {
    margin: 0;
    font-size: .9em
}

.flop { 
}

/* navigation */
nav {
   /* margin-top: 1em; */
    background-color: rgb(50, 50, 55);
    color: #fff ;
    font-weight: bold;
    border-bottom: 1px solid rgb(70, 70, 75);
}
nav a .fa {
    color: #fff;
}
.pure-menu-link {
    color: rgb(250, 250, 255);
    padding: .8em 1em;
}
.pure-menu-link:hover, .pure-menu-link:focus {
    background-color: rgb(50, 50, 55);
}
#custom-menu-toggle {
    position: absolute;
    right: 0;
}
#custom-menu-toggle button {
    padding: 1em;
    background-color: rgb(50, 50, 55);
    border: 0;
}
button:focus {outline:0;}
.toggle-menu .fa {
    color: #fff;
}
nav .content {
    padding: .5em 1em;
}

/* This is the class used for the footer */
footer {
    display: block;
    background: rgb( 20, 20, 25)/*rgb( 130, 130, 135)*/;
    bottom: 0;
    width: 100%;
    border-top: 1px solid rgb(70, 70, 75);
}

footer ul.pure-menu-list {
    display: inline-block;
    font-size: .9em;
}

footer ul a.pure-menu-link {
    padding: .2em .5em;
    margin: 0;
}

.contrast-text {
    color: rgb(250, 250, 255);
    font-weight: bold;
    font-size: .9em;
}
.r-white {
    background: #fff url("../mdimg/bg-tile-white.jpg") center center repeat;
}
.showcase {
    background-color: rgb(230, 230, 235);
    border-top: 1px solid rgb(200, 200, 205);
}
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background-color: #000;
}

.video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}




/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 48em) {

    /* We increase the body font size */
    body {
        font-size: 16px;
    }
    h1 {font-size: 5em;}
    h2 {font-size: 3em;}
    

    /* We can align the menu header to the left, but float the
    menu items to the right. */
    .home-menu {
        text-align: left;
    }
        .home-menu ul {
            float: right;
        }

   

    /* We decrease the width of the .splash, since we have more width
    to work with */
    .splash {
        width: 70%;
        height: 50%;
    }

    .splash-head {
        font-size: 400%;
    }
    .splash-img {
        width:  100%;

    }

    /* We remove the border-separator assigned to .l-box-lrg */
    .l-box-lrg {
        border: none;
    }
 .content-wrapper {
     top: 40%;
 }
}

/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 */
@media (min-width: 78em) {
    /* We increase the header font size even more */
    .splash-head {
        font-size: 300%;
    }
    
    .content-wrapper {
    /* These styles are required for the "scroll-over" effect */
    position: absolute;
    top: 95%;
    }
}

.overlay {
    position: absolute;
    bottom: 2em;
    background-color: rgba(255, 255, 255, 0.5);
    width: 100%;
}
.overlay a {
    display: block;
    padding: .5em 1em;
} 

/* responsive slides */
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
  
  .p-box img {
      width:100%;
  }
  
  .v-space-bottom {
      padding-bottom: 1em;
  }
  .offpage {
      position: absolute;
      top: -1000px;
  }
  
@media (max-width: 35.5em) {
    .custom-menu .pure-menu-item,
    .custom-menu .pure-menu-list {
        display: block;
    }
    .pure-menu-horizontal .pure-menu-item {
        display: block;
    }
    .content-wrapper {
    top: 30%;
    }
    
}
@media screen and (min-width: 35.5em) {
    .content-wrapper {
    top: 90%;
    }
}

.fancybox-caption {border-top: 0!important;}