/* ==== Buttons ========================================================== */
a.wdev4-button {
text-align:center; text-decoration:none;   padding: 7px 20px; margin: 0px 0 10px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block; *display: inline; *zoom: 1; 
  color: #2D2D2D;
  background: #D7D7D7;
}
a.wdev4-button:hover {position: relative; top: 3px; color: #2D2D2D; }

a.wdev4-button.blue {color: #fff; background: #23306D; }
a.wdev4-button.blue:hover {color: #fff; background: #23306D; }


/* ==== Columns ========================================================== */
.wdev4-flex-box {display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; width: 100%; padding: 0 ; margin: 0 ;}

.wdev4-columns {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 0 ; margin: 0 0 10px 0;  float: left;}
.wdev4-columns.last {clear: left; }
.wdev4-columns.one-half {width: 50%; -webkit-flex: 1; flex: 1;  }
.wdev4-columns.one-third {width: 33%;width: 33.333%; -webkit-flex: 1; flex: 1; }
.wdev4-columns.one-fourth {width: 25%; -webkit-flex: 1; flex: 1; }
.wdev4-columns.two-thirds {width: 67%; width: 66.6667%; -webkit-flex: 2; flex: 2;}
.wdev4-columns.three-fourths {width: 75%; -webkit-flex: 3; flex: 3; }

@media (max-width:900px) {
 .wdev4-columns.one-fourth, .wdev4-columns.two-thirds, .wdev4-columns.three-fourths, .wdev4-columns.one-third
    {float: none; margin: 0 auto 10px; width: 100%; -webkit-flex: 100%; flex: 100%;}
}
    
@media (max-width:599px) {
 .wdev4-columns, .wdev4-columns.one-half, .wdev4-columns.one-third, .wdev4-columns.one-fourth, .wdev4-columns.two-thirds, .wdev4-columns.three-fourths 
        {float: none; margin: 0 auto 10px; width: 100%; -webkit-flex: 100%; flex: 100%;}
}