@font-face {
  font-family: 'MyWebFont';
  src: url('https://typekit.com/fonts/athelas-web'); 
  src: url('http://www.losttype.com/ font/?name=majesti_banner') format('embedded-opentype'), 
}
body {
  font-family: 'MyWebFont', "Majesti Banner Book" "Majesti Banner Bold";
}

.left {
        float: left;
        width: ;
    }
    .right {
        float: right;
        width: 80%;
    }
    img {
        max-width: 80%;
        height: auto;
    }
    .group:after {
        content:"";
        display: table;
        clear: both;
    }
    @media screen and (max-width: 480px) {
        .left, .right {
            float: none;
            width: auto;
        }
    }
@import "compass/css3";

nav {
   width:22em;
   @media (max-width: 800px) {
     width:15em;
    }
   @media (max-width: 600px) {
     width:8em;
    }
   @media (max-width: 410px) {
     width:6em;
    }
}

ul {
  list-style-type:none;
  width:100%;
}

li {
  padding:10px;
  border-radius:10px;
  border:1px solid #41393d;
  background-color:#41393d;
  transition: background-color:#d7e4c2;
  -moz-transition: background-color .5s;
  -webkit-transition: background-color .5s;
  -o-transition: background-color .5s;
  
  
  @media (max-width: 410px) {
    padding:10px;
    border-radius:10px;
    }
  
  &:hover {
    background-color:#d7e4c2;
  }
  
  &:before {
    content: ' ';
	  height: 50px;
	  position: absolute;
	  width: 50px;
	  border: 10px solid transparent;
	  border-left-color: #333;
    @media (max-width: 410px) {
      border:none;
      
    }
    
  }

}

li a {
  text-decoration:none;
  color:#fff;
  padding-left:20px;
  
}

.desc {
  font-size:.8em;
  color:#d7e4c2;
  @media (max-width: 600px) {
      display:none;
    }
}

.long {
  @media (max-width:800px) {
    display:none;
  }
}
* {margin: 10px;padding: 0;}

.clearfix {clear: both;}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}

.clr1 {background: #41393d; color: #333743;}
.clr2 {background: #41393d; color: #8F94A3;}
.clr3 {background: #41393d; color: #BDC3CF;}
.clr4 {background: #41393d; color: #E3E7F2;}
.clr5 {background: ; color: #F1F3F5;}
.clr6 {background: ; color: #be1e2d;}
.clr7 {background: ; color: #be1e2d;}

a {color: #be1e2d; text-decoration: none;}
a:hover {color: #d7e4c2; text-decoration: underline;}
a:visited{}
#footer {
	max-width: 100%;
	background: #41393d;
}

#footer-wrapper {
	margin: 1000 auto
	max-width: 100%
}