/* Mobile first layout - media queries found below are for non-mobile layouts*/


/* WIDE IMPACTING CSS ITEMS ---------- */
/* WIDE IMPACTING CSS ITEMS ---------- */
/* WIDE IMPACTING CSS ITEMS ---------- */
/* WIDE IMPACTING CSS ITEMS ---------- */
/* WIDE IMPACTING CSS ITEMS ---------- */


html{
    width: 100%;
    min-height: 90%;  /* for all other browsers */
    height: 90%;  /* for IE */
}

body{
    display: block;
    padding: 0;
    margin: 0;
    width: 100%;
    color: #f2f2f2;
    padding: 0;
    margin: 0;
}

header{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: rgba( 0, 0, 0, 0.8);
    padding: 1em;
    margin: 0;
    z-index: 1;
    height: auto;
} 

footer{
    display: block;
    width: 100%;
    background-color: rgba( 0, 0, 0, 0.8);
    padding: 0;
    margin: 0;
    z-index: 1;
    font-size: 0.75em;
    text-align: center;
    vertical-align: middle;

}

h1{
    font-family: 'Roboto', sans-serif;
    font-size: 2em;
    line-height: 1.5em;
}

a:hover {
    color: #F8981D;
}


/* --------------------------------------- */
/* LOGO CSS ITEMS ------------------------ */
/* LOGO CSS ITEMS ------------------------ */
/* LOGO CSS ITEMS ------------------------ */
/* LOGO CSS ITEMS ------------------------ */
/* LOGO CSS ITEMS ------------------------ */
/* LOGO CSS ITEMS ------------------------ */
/* LOGO CSS ITEMS ------------------------ */
/* --------------------------------------- */


.logocontainer{
    display: inline-block;
    width: 50%;
    height: 100%;
    vertical-align: middle;
}

.logocontainer img{
	float: left;
	width: 200px;
	height: auto;
}

/* --------------------------------------------- */   
/* NAVIGATION CSS ITEMS ------------------------ */
/* NAVIGATION CSS ITEMS ------------------------ */   
/* NAVIGATION CSS ITEMS ------------------------ */   
/* NAVIGATION CSS ITEMS ------------------------ */   
/* NAVIGATION CSS ITEMS ------------------------ */   
/* NAVIGATION CSS ITEMS ------------------------ */
/* --------------------------------------------- */   


.topnav {
    display: inline-block;
    overflow: hidden;
    width: 40%;
    vertical-align: middle;
    text-align: right;
    font-family: 'Roboto', sans-serif;

}

/* Style the links inside the navigation bar */
.topnav a {
    display: inline-block;
    color: #f2f2f2;
    text-decoration: none;
    font-size: 1em;
    padding: 0.25em;
}

/* Change the color of links on hover */
.topnav a:hover {
    color: #F8981D;
}

/* Add an active class to highlight the current page */
.active {
    text-decoration: underline;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

#home .home-pg{
    text-decoration: underline;
}/* when on home page/ when only on the home page, then style it with class .home-pg */
 
/* --------------------------------------------- */   

.emphasize{
    font-size: 2em;
    color: #F8981D;
}

.boldcentered{
    text-align: center;
    font-weight: bold;
}

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 7em;
    margin-right: 7em;
    border-style:inset;
    border-width: 1px;
} 

.spantiny{
    display:block; 
    height: 50px;
}


.spansmall{
    display:block; 
    height: 125px;
}

.spanmoderate{
    display:block; 
    height: 175px;
}

.chapter{
    display: block;
    width: 100%;
    min-height: 600px;
}

.overlaytext{
        background-color: rgba( 0, 0, 0, 0.6);
        color: #FFFFF6;
        width: 70%;
        margin: auto;
        padding: 1em;
}

.overlaytextcentered{
        background-color: rgba( 0, 0, 0, 0.6);
        color: #FFFFF6;
        width: 70%;
        margin: auto;
        padding: 1em;
        text-align: center;
        line-height: 1.5em;
}

.overlaycontainer{
        background-color: rgba( 0, 0, 0, 0.6);
        color: #FFFFF6;
        width: 85%;
        margin: auto;
        padding: 1em;
        line-height: 1.5em;
        font-size: 1em;
        text-align: center;
}

blockquote{
    font-size: 1.5em;
    line-height: 1.25em;
    font-style: italic;
}

.overlaycontainer iframe{
    width: 100%;
    height: auto;
    margin: auto;

}

.overlaycontainer img{
    width: 60%;
    text-align: center;
}

.overlaycontainer p{
    text-align: left;
}


/* --------------------------------------------------- */   
/* --------------------------------------------------- */   
/* ----IMAGE CSS ITEMS-------------------------------- */ 
/* --------------------------------------------------- */   
/* --------------------------------------------------- */   
/* --------------------------------------------------- */   

/* The following images have been scaled back to smaller sizes for mobile devices. 800px horizontal for landscape in most cases. */


#homeimage{
    background-image:url(../images/small/forestlight-smallsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}

#meetgregimage{
    background-image:url(../images/small/bridge-smallsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}

#contactimage{
    background-image:url(../images/small/bridge-smallsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}

#faqsimage{
    background-image:url(../images/small/faq-smallsize.jpeg); /* Using a larger size image for mobile because of the large amount of content this background needs to stretch to fit w/o looking pixalated. */
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;

}

#breakingthroughthefacade{
    background-image:url(../images/small/sunrise-smallsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}

#theimportanceofbalance{
    background-image:url(../images/small/menseekingsupport-smallsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}

#griefandloss{
    background-image:url(../images/small/griefandloss-smallsize.jpeg)
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}

#buildingtherelationship{
    background-image:url(../images/medium/relationship-mediumsize.jpg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}

#parentsofteens{
    background-image:url(../images/small/parentsofteens-smallsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}

#menseekingsupport{
    background-image:url(../images/small/menseekingsupport-smallsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}


#resources{
    background-image:url(../images/small/resources-smallsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}


#blog{
    background-image:url(../images/small/friends-smallsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}  
    


/* --------------------------------------------------- */   


p{
    font-family: 'Alegreya', serif;
}

.firstcharacter {
  color: #f2f2f2;
  float: left;
  font-size: 75px;
  line-height: 60px;
  padding-right: 3px;
  padding-left: 3px;
}
 


a{
    color: #f2f2f2;
    text-decoration: none;
}

a:visited{
    color: #f2f2f2;
}



/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {

    .topnav.responsive 
    {position: relative;
    }
    
    
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
    
  .topnav.responsive a {
    float: none;
    display: block;
    text-align:center;
  }
}


/* When the screen is larger than 600px wide (usually for non-mobile layouts), execute the following: */
@media screen and (min-width: 600px) {
    .overlaytext{
    width: 40%;
    font-size: 2em;
}
    
.overlaycontainer iframe{
    width: 100%;
    height: 600px;

}


    .overlaycontainer{
        width: 60%;
        font-size: 1.5em;
    }


    .topnav {
        display: inline-block;
        width: 60%;
        vertical-align: bottom;
        text-align: right;
    }
    
.topnav a {
    padding: 0.5em;
    text-align: right;
}
    
.logocontainer{
    width: 30%;
    height: auto;
}

.logocontainer img{
    width: 95%;
    height: auto;
}
    
    


#homeimage{
    background-image:url(../images/medium/forestlight-mediumsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}

#meetgregimage{
    background-image:url(../images/medium/bridge-mediumsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}

#contactimage{
    background-image:url(../images/medium/bridge-mediumsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}
    
#faqsimage{
    background-image:url(../images/medium/faq-mediumsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
    }

#breakingthroughthefacade{
    background-image:url(../images/medium/sunrise-mediumsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
    }
#theimportanceofbalance{
    background-image:url(../images/medium/balance-mediumsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}

#griefandloss{
    background-image:url(../images/medium/griefandloss-mediumsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}
    
    
#buildingtherelationship{
    background-image:url(../images/medium/relationship-mediumsize.jpg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}
    
#forteens{
    background-image:url(../images/medium/road-mediumsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}

#forteens{
    background-image:url(../images/medium/road-mediumsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}
    
#parentsofteens{
    background-image:url(../images/medium/parentsofteens-mediumsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}

#menseekingsupport{
    background-image:url(../images/medium/menseekingsupport-mediumsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}
#resources{
    background-image:url(../images/medium/resources-mediumsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}
    
#blog{
    background-image:url(../images/medium/friends-mediumsize.jpeg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}  
    
#faqs-questions-image{
    background-image:url(../images/medium/forest-medium.jpg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    /*keeps the center of the picture in the middle of the viewing screen. */
    z-index: -1;
}    

    
    
}
/*------------------------------------ */
/* LAYOUT TROUBLESHOOTING */ 
/* LAYOUT TROUBLESHOOTING */
/* LAYOUT TROUBLESHOOTING */
/* LAYOUT TROUBLESHOOTING */ 
/* LAYOUT TROUBLESHOOTING */ 
/* LAYOUT TROUBLESHOOTING */ 
/* LAYOUT TROUBLESHOOTING */ 
/* LAYOUT TROUBLESHOOTING */ 
/* LAYOUT TROUBLESHOOTING */ 
/* LAYOUT TROUBLESHOOTING */ 


/*

html{
    border-color:black;
    border-style:dashed;
}

header{
     border-color: blueviolet;
    border-style:dashed;   
}

topnav{
     border-color: azure;
    border-style:dashed;   
}


body{
    border-color: red;
    border-style:dashed;
}

main{
    border-color:aqua;
    border-style:dashed;
}

section{
    border-color: yellow;
    border-style:dashed;
}

article{
    border-color:blue;
    border-style:dashed;
} 

li{
    border-color:aquamarine;
    border-style:dashed;
}

.logo{
    border-color:brown;
    border-style:dashed;
}

footer{
    border-color: purple;    
    border-style:dashed;
}

h1{
    border-color:forestgreen;    
    border-style:dashed;
}

h2{
    border-color:forestgreen;    
    border-style:dashed;
}

h3{
    border-color:forestgreen;    
    border-style:dashed;
}

div{
    border-color:orange;    
    border-style:dashed; 
}
    
img{
    border-color:blue;    
    border-style:dashed; 
}

.wideimagecontainer{
    border-color:darkseagreen;    
    border-style:dashed; 
        
}

.tallimagecontainer{
    border-color:darkseagreen;    
    border-style:dashed; 
        
}

.averageimagecontainer{
    border-color:darkseagreen;    
    border-style:dashed; 
        
}

a{
    border-color:darkseagreen;    
    border-style:dashed;  
}