/* GRA310 - Digital Graphic Design for Web - SNHU
        Style Sheet - Common
        Author: Claudia Lindsay
        Date:   02/02/2017

        Filename: style_sheet_common_CLindsay.css*/
/* ##########################LOGO - TOP################################ */
#logotop img{
    width:50%; 
    height:auto; 
    margin-top:-90px; 
    margin-bottom:-170px;
}

/* ##########################MENU ITEMS################################ */
@import url(https://fonts.googleapis.com/css?family=Muli);
.menu_items {
  font-family: 'Muli', Arial, sans-serif;
  font-size: 20px;
  letter-spacing: 1.5px;
  line-height: 1em;
  margin: 30px 40px;
  text-transform: uppercase;
}

.menu_items li {
  display: inline-block;
  list-style: outside none none;
  margin: 0.5em 0.6em;
  padding: 12px 15px;
  position: relative;
}

.menu_items li a {
  color: #8a8c8f;
  text-decoration: none;
}

.menu_items li:before,
.menu_items li:after {
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  height: 2px;
  width: 35%;
  background-color: #be1e2d;
  position: absolute;
  content: '';
  opacity: 0;
}

.menu_items li:before {
  top: 0;
  left: 0;
}

.menu_items li:after {
  bottom: 0;
  right: 0;
}

.menu_items li:hover:before,
.menu_items li.hover:before,
.menu_items li:hover:after,
.menu_items li.hover:after {
  opacity: 1;
}

.menu_items li:hover:before,
.menu_items li.hover:before {
  left: 65%;
}

.menu_items li:hover:after,
.menu_items li.hover:after {
  right: 65%;
}

/* instructions from discussion forum this week (week 5).
Hide the list item that contains the link that should open and close the topnav on small screens */
ul.menu_items li.icon {display: none;}


/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
  ul.menu_items li:not(:first-child) {display: none;}
  ul.menu_items li.icon {
    float: right;
    display: inline-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 */
@media screen and (max-width:680px) {
  ul.menu_items.responsive {position: relative;}
  ul.menu_items.responsive li.icon {
    position: absolute;
    right: 0;
    top: 120px;
  }
  ul.menu_items.responsive li {
    float: none;
    display: inline;
  }
  ul.menu_items.responsive li a {
    display: block;
    text-align: left;
  }
}

/* #############################END MENU ITEMS########################### */



/* #############################BODY##################################### */
body {
  background-color: #060000!important;
  text-align: center;  
}

/*####################################FOOTER##########################*/
@import url(https://fonts.googleapis.com/css?family=Muli);
#clau_footer {
    font-family: 'Muli', Arial, sans-serif;
    background-color:#060000;
    padding-top: 50px; /*different from home page*/
}

#clau_footer .footer-copyright {
    background-color: #060000;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
    margin: 10px;
    color: #8a8c8f;
}

#clau_footer .row {
    margin-bottom: 6px;
}

#clau_footer ul {
    list-style-type: none;
    padding-left: 0;
    line-height: 1.7;
}

#clau_footer h5 {
    font: Muli;
    font-size: 18px;
    color: #8a8c8f;
    font-weight: bold;
    margin-top: 30px;
}

#clau_footer h2 a{
    font-size: 30px;
    text-align: center;
    color: #8a8c8f;
    /*margin-left: 95px; see if it's ok when mobile*/
}

#clau_footer a {
    color: #8a8c8f;
    text-decoration: none;
}

#clau_footer a:hover {
    text-decoration: none;
    color: #be1e2d;
}

#clau_footer .social-networks {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 16px;
}

#clau_footer .social-networks a {
    font-size: 32px;
    color: #8a8c8f;
    padding: 10px;
    transition: 0.2s;
}

#clau_footer .social-networks a:hover {
    text-decoration: none;
    color: #be1e2d;
}

#clau_footer .btn {
    color: #333333;
    background-color: #be1e2d;
    border-radius: 20px;
    border: none;
    width: 150px;
    display: block;
    margin: 0 auto;
    margin-top: 10px;
    line-height: 25px;
}

#clau_footer .btn:hover {
    text-decoration: none;
    color: #be1e2d;
    background-color: #333333;
}


@media screen and (max-width: 960px) {
    #myFooter {
        text-align: center;
    }
}

@media screen and (min-width: 480px) {
    #clau_footer{
       width:100%;    
       float: left;
    }
 }

@media screen and (max-width: 960px) {
    #logotop {
       width:100%;
        margin-top: 1%;
        margin-bottom: 60px;
        float: left;
    }
 }


@media screen and (max-width: 660px) {
    #middle {
       width:100%;
       margin: 0 auto;   
       padding-left: 10%;
        
    }
 }