/* Copyright (C) YOOtheme GmbH, http://www.gnu.org/licenses/gpl.html GNU/GPL */

@import url(../warp/css/tools.css);


/* Buttons (Needed for System Markup)
----------------------------------------------------------------------------------------------------*/

/* Default */
.button-default {
  padding: 5px 10px;
        color: #444;
  border: 1px solid #ddd;
        border-radius: 2px;
        background: #fff;
        -moz-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        -webkit-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
}

/* Primary */
.button-primary {
        color: #fff;
  padding: 5px 10px;
        display:inline-block;
        background-color:#4a515c;
        border-bottom: none;
        border-radius: 2px;
        -moz-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        -webkit-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
}

.button-primary:hover {
        color: #fff;
  background: #6d727a;
        transition: all 0.3s ease-in-out 0s;
}


.button, .button:visited {
  display: inline-block; 
  padding: 5px 10px 6px; 
  color: #fff; 
  text-decoration: none;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  position: relative;
  cursor: pointer

}

.button, .button:visited {
  display: inline-block; 
  padding: 5px 10px 6px; 
  color: #fff; 
  text-decoration: none;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  position: relative;
  cursor: pointer
}

.mybutton { transition: all 0.3s ease-in-out 0s; }

.mybutton, .mybutton:visited {
  display: inline-block;
  color: #fff;
  position: relative;
  cursor: pointer;
}
 
  .mybutton:hover { color: #fff; transition: all 0.3s ease-in-out 0s; }
  .mybutton:active { top: 1px; }
  .small.mybutton, .small.mybutton:visited { font-size: 12px; border-radius: 8px; padding: 7px;}
  .mybutton, .mybutton:visited,
  .medium.mybutton, .medium.mybutton:visited {
  padding: 10px;
        font-size: 14px;
        line-height: 1; 
}
                          
  .large.mybutton, .large.mybutton:visited { font-size: 16px; padding: 13px; }
  
  .highlight.mybutton, .highlight.mybutton:visited {
        border-radius: 2px;
        -moz-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        -webkit-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        color: #ffffff;
  background: #dd555f;
}
  .highlight.mybutton:hover {
  background: #ee7b84;
}
  .light.mybutton, .light.mybutton:visited {
        color: #018FFF;
  border: 1px solid #eaeaea;
        border-radius: 2px;
        background: #fff;
        -moz-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        -webkit-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
}
  .light.mybutton:hover {
        background: #f5f5f5;
}
  .blue.mybutton, .blue.mybutton:visited { 
        display:inline-block;
        background-color:#018fff;
        border-bottom: none;
        border-radius: 2px;
        -moz-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        -webkit-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
}
  .blue.mybutton:hover {
        background-color:#4bb0ff;
}

  .green.mybutton, .green.mybutton:visited { 
        display:inline-block;
        background-color:#86be48;
        border-bottom: none;
        border-radius: 2px;
        -moz-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        -webkit-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
}
  .green.mybutton:hover {
        background-color:#96cb5a;
}

  .sunny.mybutton, .sunny.mybutton:visited { 
        display:inline-block;
        background-color:#edb033;
        border-bottom: none;
        border-radius: 2px;
        -moz-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        -webkit-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
}
  .sunny.mybutton:hover {
        background-color:#f3bb49;
}

  .orange.mybutton, .orange.mybutton:visited { 
        display:inline-block;
        background-color:#dd4b32;
        border-bottom: none;
        border-radius: 2px;
        -moz-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        -webkit-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
}
  .orange.mybutton:hover {
        background-color:#ef654e;
}

  .pink.mybutton, .pink.mybutton:visited { 
        display:inline-block;
        background-color:#de5aa7;
        border-bottom: none;
        border-radius: 2px;
        -moz-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        -webkit-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
}
  .pink.mybutton:hover {
        background-color:#ed72ba;
}

  .purple.mybutton, .purple.mybutton:visited { 
        display:inline-block;
        background-color:#8b6ed6;
        border-bottom: none;
        border-radius: 2px;
        -moz-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        -webkit-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
}
  .purple.mybutton:hover {
        background-color:#a48ae7;
}

  .mint.mybutton, .mint.mybutton:visited { 
        display:inline-block;
        background-color:#2ec49f;
        border-bottom: none;
        border-radius: 2px;
        -moz-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        -webkit-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
}
  .mint.mybutton:hover {
        background-color:#3ed6b1;
}

  .dark.mybutton, .dark.mybutton:visited { 
        display:inline-block;
        background-color:#4a515c;
        border-bottom: none;
        border-radius: 2px;
        -moz-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        -webkit-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
        box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.2) inset;
}
  .dark.mybutton:hover {
        background-color:#5b626d;
}

/* Images and Objects (Needed for System Markup)
----------------------------------------------------------------------------------------------------*/

img.border-box { border: 1px solid #ddd; }


/* Lists and Tables (Needed for System Markup)
----------------------------------------------------------------------------------------------------*/

/* Line */
ul.line > li { border-top: 1px solid #ddd; }
ul.line > li:first-child { border: none; }

/* Check */
ul.check > li {
  padding: 4px 0 0 10px;

}

ul.check > li:before {
    padding-right: 10px;
    font-family: FontAwesome;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    content: "\f138";
    color: #444;
    }
    
    
ul.chevron > li {
  padding: 4px 0 0 10px;
}
ul.chevron > li:before {
    padding-right: 10px;
    font-family: FontAwesome;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    content: "\f054";
    color: #444;
    }
    
ul.chevron > li {
  padding: 4px 0 0 10px;
}
ul.chevron > li:before {
    padding-right: 10px;
    font-family: FontAwesome;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    content: "\f054";
    color: #444;
    }
    

/* Zebra List and Table */
ul.zebra > li,
table.zebra tbody td { border-bottom: 1px solid #ddd; }
ul.zebra > li:first-child,
table.zebra tbody tr:first-child td { border-top: 1px solid #ddd; }

ul.zebra > li.odd,
table.zebra tbody tr.odd { background: #fafafa; }
ul.zebra > li:nth-of-type(odd),
table.zebra tbody tr:nth-of-type(odd) { background: #fafafa; }

table.zebra caption { color: #999; }

/* Pricing Table 
----------------------------------------------------------------------------------------------------*/

.ptable {
  border: 1px solid #ddd;
  background: #fff;
  text-align: center;
  overflow: hidden;
        border-radius: 2px;
        -moz-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.3) inset;
        -webkit-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.3) inset;
        box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.3) inset;
        transition: all 0.3s ease-in-out 0s;
}


.ptable:hover {
  border: 1px solid #ddd;
    background: #f7f7f7;
  text-align: center;
  overflow: hidden;
        -moz-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.3) inset;
        -webkit-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.3) inset;
        box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.3) inset;
        transition: all 0.3s ease-in-out 0s;
}      

.ptable-bestseller {
        color: #fff;
  background: #4a515c;
  text-align: center;
  overflow: hidden;
        border-radius: 2px;
        -moz-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.3) inset;
        -webkit-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.3) inset;
        box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.3) inset;
        transition: all 0.3s ease-in-out 0s;
}

.ptable-bestseller:hover {
        color: #fff;
  background: #5b626d;
  text-align: center;
  overflow: hidden;
        -moz-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.3) inset;
        -webkit-box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.3) inset;
        box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.3) inset;
        transition: all 0.3s ease-in-out 0s;
}

.ptable .price {
        color: #fff;
        text-align: center;
  background: #018fff;
        font-size: 30px;
        line-height: 55px;
}

.ptable-bestseller .price {
        color: #fff;
        text-align: center;
  background: #343940;
        font-size: 30px;
        line-height: 55px;
}

/* Definition Lists
----------------------------------------------------------------------------------------------------*/

dl.separator dt {  
  position: relative;
  padding-top: 5px;
  padding-bottom: 5px;
  text-transform: uppercase;
}

/* border code because of RTL */
dl.separator dd {
  padding-top: 5px;
  padding-bottom: 5px;
  border-width: 0 0 0 1px;
  border-style: solid;
  border-color: #DDD;
}

dl.separator dt:before {
  content: "";
  position: absolute;
  top: 0;
  right: -15px;
  width: 30px;
  border-top: 1px solid #DDD;
}

dl.separator dt:after {
  content: "";
  position:absolute;
  top: -3px;
  right: -3px;
  width: 5px;
  height: 5px;
  background: #FFF;
  border: 1px solid #DDD;
  border-radius:6px;
}

dl.separator dt:first-child:before,
dl.separator dt:first-child:after { display: none; }


/* Text
----------------------------------------------------------------------------------------------------*/

/* Inline Text Box */
em.box { 
  border: 1px dotted #bbb;
  background: #fafafa;
  color: #444;
}

/* Dotted Horizontal Rule */
hr.dotted { background: url(../images/tools/line_dotted.png) 0 0 repeat-x; }


/* Boxes
----------------------------------------------------------------------------------------------------*/

.box-content {
  background: #fafafa;
  border: 1px solid #ddd;
}

.box-note,
.box-info,
.box-warning,
.box-hint,
.box-download {
  background: #fafafa;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.box-info {
    background: #ebf5fa;
    border-color: #d2dce1;
    }
    
.box-info:before {
    margin-left: -15px;
    padding-right: 10px;
    font-family: FontAwesome;
    font-size: 25px;
    font-style: normal;
    font-weight: normal;
    content: "\f05a";
    color: #444;
}

.box-warning {
  background: #fff0eb;
  border-color: #ffd7cd;
}
.box-warning:before {
    margin-left: -15px;
    padding-right: 10px;
    font-family: FontAwesome;
    font-size: 25px;
    font-style: normal;
    font-weight: normal;
    content:  "\f071";
    color: #444;
}

.box-hint {
  background: #fffae6;
  border-color: #fae6be;
}
.box-hint:before {
    margin-left: -15px;
    padding-right: 10px;
    font-family: FontAwesome;
    font-size: 25px;
    font-style: normal;
    font-weight: normal;
    content:  "\f084";
    color: #444;
}

.box-download {
  background: #faffe6;
  border-color: #dce6be;
}
.box-download:before {
    margin-left: -15px;
    padding-right: 10px;
    font-family: FontAwesome;
    font-size: 25px;
    font-style: normal;
    font-weight: normal;
    content:  "\f0ed";
    color: #444;
}

/* Forms (Needed for System Markup)
----------------------------------------------------------------------------------------------------*/

form.box fieldset { border: 1px solid #ddd; }
form.box legend { background: #fff; }

form.style input[type="button"],  
form.style input[type="submit"],  
form.style button  {
        height: 40px;
        display:inline-block;
        padding: 10px;
        color: #fff;
        background-color:#4a515c;
        border: none;
        border-radius: 2px;
        -moz-box-shadow: 0px -3px 0px 0px rgba(0,0,0,0.2) inset;
        -webkit-box-shadow: 0px -3px 0px 0px rgba(0,0,0,0.2) inset;
        box-shadow: 0px -3px 0px 0px rgba(0,0,0,0.2) inset;
}

form.style input[type="button"],  
form.style input[type="submit"],   
form.style button:hover {
        display:inline-block;
        padding: 10px;
        color: #fff;
        background-color:#5b626d;
        border: none;
        border-radius: 2px;
        -moz-box-shadow: 0px -3px 0px 0px rgba(0,0,0,0.2) inset;
        -webkit-box-shadow: 0px -3px 0px 0px rgba(0,0,0,0.2) inset;
        box-shadow: 0px -3px 0px 0px rgba(0,0,0,0.2) inset;
}

/* Social Icons
----------------------------------------------------------------------------------------------------*/
ul.social-icons {
 list-style: none;
 padding: 5px;
 overflow: hidden;
}
 
.social-icons li { 
 float: left;
 margin-left: 5px;
}
 
.social-icons li:first-child { margin-left: 0; }
 
.social-icons li a {
 display: block;
 width: 40px;
 height: 40px;
 background: url(../images/icons_social.png) 0 0 no-repeat;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
 
.social-icons .deviantart a:hover { background-position: 0 -40px; 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
 
.social-icons .digg a { background-position: 0 -80px; }
.social-icons .digg a:hover { background-position: 0 -120px; 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
 
.social-icons .dribbble a { background-position: 0 -160px; }
.social-icons .dribbble a:hover { background-position: 0 -200px;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
 }
 
.social-icons .facebook a { background-position: 0 -240px; }
.social-icons .facebook a:hover { background-position: 0 -280px; 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
 
.social-icons .flickr a { background-position: 0 -320px; }
.social-icons .flickr a:hover { background-position: 0 -360px; 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
 
.social-icons .google-plus a { background-position: 0 -400px; }
.social-icons .google-plus a:hover { background-position: 0 -440px; 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
 
.social-icons .icq a { background-position: 0 -480px; }
.social-icons .icq a:hover { background-position: 0 -520px; 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
 
.social-icons .instagram a { background-position: 0 -560px; }
.social-icons .instagram a:hover { background-position: 0 -600px; 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.social-icons .linkedin a { background-position: 0 -640px; }
.social-icons .linkedin a:hover { background-position: 0 -680px; 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.social-icons .picasa a { background-position: 0 -720px; }
.social-icons .picasa a:hover { background-position: 0 -760px; 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.social-icons .pinterest a { background-position: 0 -800px; }
.social-icons .pinterest a:hover { background-position: 0 -840px; 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.social-icons .rss a { background-position: 0 -880px; }
.social-icons .rss a:hover { background-position: 0 -920px; 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.social-icons .skype a { background-position: 0 -960px; }
.social-icons .skype a:hover { background-position: 0 -1000px; 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.social-icons .myspace a { background-position: 0 -1040px; }
.social-icons .myspace a:hover { background-position: 0 -1080px; 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.social-icons .twitter a { background-position: 0 -1120px; }
.social-icons .twitter a:hover { background-position: 0 -1160px; 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.social-icons .vimeo a { background-position: 0 -1200px; }
.social-icons .vimeo a:hover { background-position: 0 -1240px; 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.social-icons .wordpress a { background-position: 0 -1280px; }
.social-icons .wordpress a:hover { background-position: 0 -1320px; 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.social-icons .youtube a { background-position: 0 -1360px; }
.social-icons .youtube a:hover { background-position: 0 -1400px; 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

/*  
 * blockquotes  
 */  
 
blockquote:before,
blockquote:after { content: ""; }
 
blockquote {
 padding-left: 60px;
 padding-right: 0;
 font-style: normal;
 line-height: 60px;
 font-size: 20px;
 background-image: url(../images/block.png);
 background-position:  0 -5px;
 background-repeat: no-repeat;
 border-right: 3px solid;
} 
 
blockquote:hover {
 padding-left: 60px;
 padding-right: 0;
 font-style: normal;
 line-height: 60px;
 font-size: 20px;
 background-image: url(../images/block-over.png);
 background-position: 0 -5px;
 background-repeat: no-repeat;
 border-right: 3px solid;
 border-right-color: #a8a8a8;
}




/*  SECTIONS  */
.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}

/*  COLUMN SETUP  */
.col {
  display: block;
  float:left;
  margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; }


/*  GRID OF TWO   */

.span_2_of_2 {
  width: 100%;
}

.span_1_of_2 {
  width: 49.2%;
}

@media only screen and (max-width: 767px) {
  .span_2_of_2 { width: 100%;}
  .span_1_of_2 { width: 100%; }
}

/*  GRID OF THREE  */

.span_3_of_3 {
  width: 100%;
}
.span_2_of_3 {
  width: 66.1%;
}
.span_1_of_3 {
  width: 32.2%;
}

@media only screen and (max-width: 767px) {
.span_3_of_3 { width: 100%;}
.span_2_of_3 { width: 100%; }
.span_1_of_3 { width: 100%; }
}


/*  GRID OF FOUR  */
.span_4_of_4 {
  width: 100%;
}
.span_3_of_4 {
  width: 74.6%;
}
.span_2_of_4 {
  width: 49.2%;
}
.span_1_of_4 {
  width: 22.8%;
}

@media only screen and (max-width: 767px) {
.span_4_of_4 { width: 100%; }
.span_3_of_4 { width: 100%; }
.span_2_of_4 { width: 100%; }
.span_1_of_4 { width: 100%; }
}

@media only screen and (max-width: 480px) {
  .col { 
    margin: 1% 0 1% 0%;
  }
}