Gogies 3D Helpers

hidden and visible items based on screen size

See grids section for details on supported screen sizes

.hide-sd hidden on sd devices .visible-sd visible only on sd devices

.hide-md hidden on md devices .visible-md visible only on md devices

.hide-bd hidden on bd devices .visible-bd visible only on bd devices

.hide-xbd hidden on xbd devices .visible-xbd visible only on xbd devices

.hide{display:none;}
.block{ display:block !important;}
.table{display:table !important;}
.center-block{ margin:auto;}
.pull-left{ float:left}
.pull-right{float:right}
.absolute{position:absolute}
.fixed{ position:fixed}
.relative{position:relative}
.top {top:0}
.left{left:0}
.right{right:0}
.bottom{ bottom:0}
.h-pad{ padding:4px}
.h-pad-l{ padding-left:4px}
.h-pad-r{ padding-right:4px}
.h-pad-t{ padding-top:4px}
.h-pad-b{ padding-bottom:4px}
.pad{ padding:8px}
.pad-l{ padding-left:8px}
.pad-r{ padding-right:8px}
.pad-t{ padding-top:8px}
.pad-b{ padding-bottom:8px}
.d-pad{ padding:12px}
.d-pad-l{ padding-left:12px}
.d-pad-r{ padding-right:12px}
.d-pad-t{ padding-top:12px}
.d-pad-b{ padding-bottom:12px}
.nopad{padding:0px}
.h-gap{ margin:4px}
.h-gap-t{ margin-top:4px}
.h-gap-b{ margin-bottom:4px}
.h-gap-r{ margin-right:4px}
.h-gap-l{ margin-left:4px}
.gap{ margin:8px}
.gap-t{ margin-top:8px}
.gap-b{ margin-bottom:8px}
.gap-r{ margin-right:8px}
.gap-l{ margin-left:8px}
.d-gap{ margin:12px}
.d-gap-t{ margin-top:23px}
.d-gap-b{ margin-bottom:12px}
.d-gap-r{ margin-right:12px}
.d-gap-l{ margin-left:12px}
.nogap{margin:0px}
.h-pad{ padding:4px}
.h-pad-l{ padding-left:4px}
.h-pad-r{ padding-right:4px}
.h-pad-t{ padding-top:4px}
.h-pad-b{ padding-bottom:4px}
.pad{ padding:8px}
.pad-l{ padding-left:8px}
.pad-r{ padding-right:8px}
.pad-t{ padding-top:8px}
.pad-b{ padding-bottom:8px}
.d-pad{ padding:12px}
.d-pad-l{ padding-left:12px}
.d-pad-r{ padding-right:12px}
.d-pad-t{ padding-top:12px}
.d-pad-b{ padding-bottom:12px}
.nopad{padding:0px}
.h-gap{ margin:4px}
.h-gap-t{ margin-top:4px}
.h-gap-b{ margin-bottom:4px}
.h-gap-r{ margin-right:4px}
.h-gap-l{ margin-left:4px}
.gap{ margin:8px}
.gap-t{ margin-top:8px}
.gap-b{ margin-bottom:8px}
.gap-r{ margin-right:8px}
.gap-l{ margin-left:8px}
.d-gap{ margin:12px}
.d-gap-t{ margin-top:23px}
.d-gap-b{ margin-bottom:12px}
.d-gap-r{ margin-right:12px}
.d-gap-l{ margin-left:12px}
.nogap{margin:0px}
.bordered{ border: 1px solid #CCCCCC}
.bordered-l{ border-left: 1px solid #CCCCCC}
.bordered-r{ border-right: 1px solid #CCCCCC}
.bordered-t{ border-top: 1px  solid #CCCCCC}
.bordered-b{ border-bottom: 1px solid #CCCCCC}
.noborder{ border:0;}
.align-left{text-align:left}
.align-right{text-align:right}
.align-center{text-align:center}
.align-justify{text-align:justify}
.align-top{display:table-cell;vertical-align:top}
.align-bottom{display:table-cell;vertical-align:bottom}
.text-capitalize{text-transform:capitalize}
.text-uppercase{text-transform:uppercase}
.text-lowercase{text-transform:lowercase}
.round-corners{ -webkit-border-radius:4px;border-radius:4px; }
.circle{-webkit-border-radius:50% !important;border-radius:50% !important;}
.img-responsive{width:100%}
.small{font-size:12px; line-height:12px;}
.medium{font-size:22px; line-height:22px;}
.large{font-size:28px; line-height:28px;}
.full-width{width:100%}
.box{background:#EEEEEE;color:#5a5a5a;border:1px solid #ddd ; margin:5px;  padding:10px}
.label{ line-height:100%; display:inline-block; padding:2px 4px; -webkit-border-radius:3px; border-radius:3px;}
.close { font-size:20px; color:#999999; border:none; position:absolute; top:10px; right:10px;}
.close:hover{ color:#EF696B; border:none;}