@media (min-width: 10em){
.ribbon
{
    display: inline-block;
  width: 100%;
    height: 40px;
    margin-top: 15px;
    float: right;
       
}
.ribbon li
{
    list-style-type:none;
    float:left;    
}

.ribbon:after, .ribbon:before
{
    margin-top: 0.7em;
    content: "";
    float: left;      
    border: 0.7em solid #0AA9E4;
}

.ribbon:after
{
    border-right-color: transparent;
}

.ribbon:before
{
    border-left-color: transparent;
}

.ribbon a:link, .ribbon a:visited
{
    color: #fff;
    text-decoration: none;
    float: left;
    font-size:50%;
        
    overflow: hidden;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:600;
}

.ribbon span
{
    background: #0AA9E4;
    display: inline-block;
    
    line-height: 3em;
    padding: 0 0.2em;
    margin-top: 0.5em;
    position: relative;
    -webkit-transition: background-color 0.2s, margin-top 0.2s; 
    -moz-transition: background-color 0.2s, margin-top 0.2s; 
    -ms-transition: background-color 0.2s, margin-top 0.2s; 
    -o-transition: background-color 0.2s, margin-top 0.2s; 
    transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span, .ribbon a.active span
{
    background: #FF7B1C;
    margin-top: 0;
    
    font-weight:600;
    font-family:Verdana, Geneva, sans-serif;
}

.ribbon span:before
{
    content: "";
    position: absolute;
    top: 3em;
    left: 0;
    border-right: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}

.ribbon span:after
{
    content: "";
    position: absolute;
    top: 3em;
    right: 0;
    border-left: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}
.button
{
    background:none;
    width:150px;
    height:25px;
    color:#fff;
    font-size:18px;
    font-family:Script MT Bold;
    margin-top:10px;
    cursor:pointer;
}

}
 
 @media (min-width: 20em){
.ribbon
{
    display: inline-block;
  width: 100%;
    height: 40px;
    margin-top: 15px;
    float: right;
    
    
}
.ribbon li
{
    list-style-type:none;
    float:left;    
}

.ribbon:after, .ribbon:before
{
    margin-top: 0.7em;
    content: "";
    float: left;      
    border: 0.7em solid #0AA9E4;
}

.ribbon:after
{
    border-right-color: transparent;
}

.ribbon:before
{
    border-left-color: transparent;
}

.ribbon a:link, .ribbon a:visited
{
    color: #fff;
    text-decoration: none;
    float: left;
    font-size:50%;
        
    overflow: hidden;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:600;
}

.ribbon span
{
    background: #0AA9E4;
    display: inline-block;
    
    line-height: 3em;
    padding: 0 0.3em;
    margin-top: 0.5em;
    position: relative;
    -webkit-transition: background-color 0.2s, margin-top 0.2s; 
    -moz-transition: background-color 0.2s, margin-top 0.2s; 
    -ms-transition: background-color 0.2s, margin-top 0.2s; 
    -o-transition: background-color 0.2s, margin-top 0.2s; 
    transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span, .ribbon a.active span
{
    background: #FF7B1C;
    margin-top: 0;
    
    font-weight:600;
    font-family:Verdana, Geneva, sans-serif;
}

.ribbon span:before
{
    content: "";
    position: absolute;
    top: 3em;
    left: 0;
    border-right: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}

.ribbon span:after
{
    content: "";
    position: absolute;
    top: 3em;
    right: 0;
    border-left: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}
.button
{
    background:none;
    width:150px;
    height:25px;
    color:#fff;
    font-size:18px;
    font-family:Script MT Bold;
    margin-top:10px;
    cursor:pointer;
}

}

 @media (min-width: 30.6em) {
.ribbon
{
    display: inline-block;
  width: 72%;
    height: 40px;
    margin-top: 15px;
    float: right;
    
    
}
.ribbon li
{
    list-style-type:none;
    float:left;    
}

.ribbon:after, .ribbon:before
{
    margin-top: 0.7em;
    content: "";
    float: left;      
    border: 0.8em solid #0AA9E4;
}

.ribbon:after
{
    border-right-color: transparent;
}

.ribbon:before
{
    border-left-color: transparent;
}

.ribbon a:link, .ribbon a:visited
{
    color: #fff;
    text-decoration: none;
    float: left;
    font-size:50%;
        
    overflow: hidden;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:600;
}

.ribbon span
{
    background: #0AA9E4;
    display: inline-block;
    
    line-height: 3em;
    padding: 0 0.3em;
    margin-top: 0.5em;
    position: relative;
    -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span, .ribbon a.active span
{
    background: #FF7B1C;
    margin-top: 0;
    
    font-weight:700;
    font-family:Verdana, Geneva, sans-serif;
}

.ribbon span:before
{
    content: "";
    position: absolute;
    top: 3em;
    left: 0;
    border-right: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}

.ribbon span:after
{
    content: "";
    position: absolute;
    top: 3em;
    right: 0;
    border-left: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}
.button
{
    background:none;
    width:150px;
    height:25px;
    color:#fff;
    font-size:18px;
    font-family:Script MT Bold;
    margin-top:10px;
    cursor:pointer;
}

}



@media (min-width: 40.6em) {
.ribbon
{
    display: inline-block;
  width: 70%;
    height: 40px;
    margin-top: 15px;
    float: right;
    
    
}
.ribbon li
{
    list-style-type:none;
    float:left;    
}

.ribbon:after, .ribbon:before
{
    margin-top: 0.7em;
    content: "";
    float: left;      
    border: 0.8em solid #0AA9E4;
}

.ribbon:after
{
    border-right-color: transparent;
}

.ribbon:before
{
    border-left-color: transparent;
}

.ribbon a:link, .ribbon a:visited
{
    color: #fff;
    text-decoration: none;
    float: left;
    font-size:50%;
        
    overflow: hidden;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:700;
}

.ribbon span
{
    background: #0AA9E4;
    display: inline-block;
    
    line-height: 3em;
    padding: 0 1em;
    margin-top: 0.5em;
    position: relative;
    -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span, .ribbon a.active span
{
    background: #FF7B1C;
    margin-top: 0;
    
    font-weight:700;
    font-family:Verdana, Geneva, sans-serif;
}

.ribbon span:before
{
    content: "";
    position: absolute;
    top: 3em;
    left: 0;
    border-right: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}

.ribbon span:after
{
    content: "";
    position: absolute;
    top: 3em;
    right: 0;
    border-left: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}
.button
{
    background:none;
    width:150px;
    height:25px;
    color:#fff;
    font-size:18px;
    font-family:Script MT Bold;
    margin-top:10px;
    cursor:pointer;
}

}

@media  (min-width: 60em) {
.ribbon
{
    display: inline-block;
  width: 65%;
    height: 40px;
    margin-top: 15px;
    float: right;
    
    
}
.ribbon li
{
    list-style-type:none;
    float:left;    
}

.ribbon:after, .ribbon:before
{
    margin-top: 0.7em;
    content: "";
    float: left;      
    border: 1em solid #0AA9E4;
}

.ribbon:after
{
    border-right-color: transparent;
}

.ribbon:before
{
    border-left-color: transparent;
}

.ribbon a:link, .ribbon a:visited
{
    color: #fff;
    text-decoration: none;
    float: left;
    font-size:70%;
    height: 3.5em;    
    overflow: hidden;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:700;
}

.ribbon span
{
    background: #0AA9E4;
    display: inline-block;
    
    line-height: 3em;
    padding: 0 1em;
    margin-top: 0.5em;
    position: relative;
    -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span, .ribbon a.active span
{
    background: #FF7B1C;
    margin-top: 0;
    
    font-weight:700;
    font-family:Verdana, Geneva, sans-serif;
}

.ribbon span:before
{
    content: "";
    position: absolute;
    top: 3em;
    left: 0;
    border-right: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}

.ribbon span:after
{
    content: "";
    position: absolute;
    top: 3em;
    right: 0;
    border-left: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}
.button
{
    background:none;
    width:150px;
    height:25px;
    color:#fff;
    font-size:18px;
    font-family:Script MT Bold;
    margin-top:10px;
    cursor:pointer;
}

}

@media  (min-width: 83.9em){
.ribbon
{
    display: inline-block;
  width: 64%;
    height: 40px;
    margin-top: 15px;
    float: right;
    
 
}
.ribbon li
{
    list-style-type:none;
    float:left;    
}

.ribbon:after, .ribbon:before
{
    margin-top: 0.7em;
    content: "";
    float: left;      
    border: 1em solid #0AA9E4;
}

.ribbon:after
{
    border-right-color: transparent;
}

.ribbon:before
{
    border-left-color: transparent;
}

.ribbon a:link, .ribbon a:visited
{
    color: #fff;
    text-decoration: none;
    float: left;
    font-size:11px;
    height: 3.5em;    
    overflow: hidden;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:700;
}

.ribbon span
{
    background: #0AA9E4;
    display: inline-block;
    
    line-height: 3em;
    padding: 0 1em;
    margin-top: 0.5em;
    position: relative;
    -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span, .ribbon a.active span
{
    background: #FF7B1C;
    margin-top: 0;
    
    font-weight:700;
    font-family:Verdana, Geneva, sans-serif;
}

.ribbon span:before
{
    content: "";
    position: absolute;
    top: 3em;
    left: 0;
    border-right: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}

.ribbon span:after
{
    content: "";
    position: absolute;
    top: 3em;
    right: 0;
    border-left: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}
.button
{
    background:none;
    width:150px;
    height:25px;
    color:#fff;
    font-size:18px;
    font-family:Script MT Bold;
    margin-top:10px;
    cursor:pointer;
}

}
/*
 @media (max-width: 360px){
.ribbon
{
    display: inline-block;
  width: 100%;
    height: 40px;
    margin-top: 15px;
    float: right;    
    
}
.ribbon li
{
    list-style-type:none;
    float:left;    
}

.ribbon:after, .ribbon:before
{
    margin-top: 0.7em;
    content: "";
    float: left;      
    border: 0.6em solid #0AA9E4;
}

.ribbon:after
{
    border-right-color: transparent;
}

.ribbon:before
{
    border-left-color: transparent;
}

.ribbon a:link, .ribbon a:visited
{
    color: #fff;
    text-decoration: none;
    float: left;
    font-size:46%;
        
    overflow: hidden;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:600;
}

.ribbon span
{
    background: #0AA9E4;
    display: inline-block;
    
    line-height: 3em;
    padding: 0 0.3em;
    margin-top: 0.3em;
    position: relative;
    -webkit-transition: background-color 0.2s, margin-top 0.2s; 
    -moz-transition: background-color 0.2s, margin-top 0.2s; 
    -ms-transition: background-color 0.2s, margin-top 0.2s; 
    -o-transition: background-color 0.2s, margin-top 0.2s; 
    transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span, .ribbon a.active span
{
    background: #FF7B1C;
    margin-top: 0;
    
    font-weight:600;
    font-family:Verdana, Geneva, sans-serif;
}

.ribbon span:before
{
    content: "";
    position: absolute;
    top: 3em;
    left: 0;
    border-right: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}

.ribbon span:after
{
    content: "";
    position: absolute;
    top: 3em;
    right: 0;
    border-left: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}
.button
{
    background:none;
    width:150px;
    height:25px;
    color:#fff;
    font-size:18px;
    font-family:Script MT Bold;
    margin-top:10px;
    cursor:pointer;
}

}
/*
 @media (max-width: 320px){
.ribbon
{
    display: inline-block;
  width: 100%;
    height: 40px;
    margin-top: 15px;
    float: right;    
    
}
.ribbon li
{
    list-style-type:none;
    float:left;    
}

.ribbon:after, .ribbon:before
{
    margin-top: 0.7em;
    content: "";
    float: left;      
    border: 0.6em solid #0AA9E4;
}

.ribbon:after
{
    border-right-color: transparent;
}

.ribbon:before
{
    border-left-color: transparent;
}

.ribbon a:link, .ribbon a:visited
{
    color: #fff;
    text-decoration: none;
    float: left;
    font-size:45%;
        
    overflow: hidden;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:600;
}

.ribbon span
{
    background: #0AA9E4;
    display: inline-block;
    
    line-height: 3em;
    padding: 0 0.3em;
    margin-top: 0.3em;
    position: relative;
    -webkit-transition: background-color 0.2s, margin-top 0.2s; 
    -moz-transition: background-color 0.2s, margin-top 0.2s; 
    -ms-transition: background-color 0.2s, margin-top 0.2s; 
    -o-transition: background-color 0.2s, margin-top 0.2s; 
    transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span, .ribbon a.active span
{
    background: #FF7B1C;
    margin-top: 0;
    
    font-weight:600;
    font-family:Verdana, Geneva, sans-serif;
}

.ribbon span:before
{
    content: "";
    position: absolute;
    top: 3em;
    left: 0;
    border-right: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}

.ribbon span:after
{
    content: "";
    position: absolute;
    top: 3em;
    right: 0;
    border-left: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}
.button
{
    background:none;
    width:150px;
    height:25px;
    color:#fff;
    font-size:18px;
    font-family:Script MT Bold;
    margin-top:10px;
    cursor:pointer;
}

}*/
/*
 @media (min-width: 640px){
.ribbon
{
    display: inline-block;
  width: 70%;
    height: 40px;
    margin-top: 15px;
    float: right;    
    
}
.ribbon li
{
    list-style-type:none;
    float:left;    
}

.ribbon:after, .ribbon:before
{
    margin-top: 0.7em;
    content: "";
    float: left;      
    border: 0.6em solid #0AA9E4;
}

.ribbon:after
{
    border-right-color: transparent;
}

.ribbon:before
{
    border-left-color: transparent;
}

.ribbon a:link, .ribbon a:visited
{
    color: #fff;
    text-decoration: none;
    float: left;
    font-size:50%;
        
    overflow: hidden;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:600;
}

.ribbon span
{
    background: #0AA9E4;
    display: inline-block;
    
    line-height: 3em;
    padding: 0 0.3em;
    margin-top: 0.3em;
    position: relative;
    -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span, .ribbon a.active span
{
    background: #FF7B1C;
    margin-top: 0;
    
    font-weight:600;
    font-family:Verdana, Geneva, sans-serif;
}

.ribbon span:before
{
    content: "";
    position: absolute;
    top: 3em;
    left: 0;
    border-right: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}

.ribbon span:after
{
    content: "";
    position: absolute;
    top: 3em;
    right: 0;
    border-left: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}
.button
{
    background:none;
    width:150px;
    height:25px;
    color:#fff;
    font-size:18px;
    font-family:Script MT Bold;
    margin-top:10px;
    cursor:pointer;
}

}*/
/*
 @media (min-width: 768px){
.ribbon
{
    display: inline-block;
  width: 70%;
    height: 40px;
    margin-top: 15px;
    float: right;    
    
}
.ribbon li
{
    list-style-type:none;
    float:left;    
}

.ribbon:after, .ribbon:before
{
    margin-top: 0.7em;
    content: "";
    float: left;      
    border: 0.8em solid #0AA9E4;
}

.ribbon:after
{
    border-right-color: transparent;
}

.ribbon:before
{
    border-left-color: transparent;
}

.ribbon a:link, .ribbon a:visited
{
    color: #fff;
    text-decoration: none;
    float: left;
    font-size:60%;
        
    overflow: hidden;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:600;
}

.ribbon span
{
    background: #0AA9E4;
    display: inline-block;
    
    line-height: 3em;
    padding: 0 0.3em;
    margin-top: 0.3em;
    position: relative;
    -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span, .ribbon a.active span
{
    background: #FF7B1C;
    margin-top: 0;
    
    font-weight:600;
    font-family:Verdana, Geneva, sans-serif;
}

.ribbon span:before
{
    content: "";
    position: absolute;
    top: 3em;
    left: 0;
    border-right: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}

.ribbon span:after
{
    content: "";
    position: absolute;
    top: 3em;
    right: 0;
    border-left: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}
.button
{
    background:none;
    width:150px;
    height:25px;
    color:#fff;
    font-size:18px;
    font-family:Script MT Bold;
    margin-top:10px;
    cursor:pointer;
}

}*/

/*
 @media (min-width: 1024px){
.ribbon
{
    display: inline-block;
  width: 70%;
    height: 40px;
    margin-top: 15px;
    float: right;    
  
}
.ribbon li
{
    list-style-type:none;
    float:left;    
}

.ribbon:after, .ribbon:before
{
    margin-top: 0.7em;
    content: "";
    float: left;      
    border: 1em solid #0AA9E4;
}

.ribbon:after
{
    border-right-color: transparent;
}

.ribbon:before
{
    border-left-color: transparent;
}

.ribbon a:link, .ribbon a:visited
{
    color: #fff;
    text-decoration: none;
    float: left;
    font-size:70%;
        
    overflow: hidden;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:600;
}

.ribbon span
{
    background: #0AA9E4;
    display: inline-block;
    
    line-height: 3em;
    padding: 0 0.3em;
    margin-top: 0.5em;
    position: relative;
    -webkit-transition: background-color 0.2s, margin-top 0.2s; 
    -moz-transition: background-color 0.2s, margin-top 0.2s; 
    -ms-transition: background-color 0.2s, margin-top 0.2s; 
    -o-transition: background-color 0.2s, margin-top 0.2s;
    transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span, .ribbon a.active span
{
    background: #FF7B1C;
    margin-top: 0;
    
    font-weight:600;
    font-family:Verdana, Geneva, sans-serif;
}

.ribbon span:before
{
    content: "";
    position: absolute;
    top: 3em;
    left: 0;
    border-right: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}

.ribbon span:after
{
    content: "";
    position: absolute;
    top: 3em;
    right: 0;
    border-left: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}
.button
{
    background:none;
    width:150px;
    height:25px;
    color:#fff;
    font-size:18px;
    font-family:Script MT Bold;
    margin-top:10px;
    cursor:pointer;
}

}*/