@charset "UTF-8";
/* CSS Document */

body {
    color: #3D5270;
    position:relative;
}
p, .btn {
    font-size: 1.1rem;
}
p {
    font-weight: 300;
}
a:focus,
a:hover {
    outline: none;}


/* Navbar
========================================================================== */
.navbar-header {
    float:left;
}
.navbar-header:after,
.navbar-header:before {
    content: " ";
    display: table;
}
.navbar-header:after {
    clear:both;
}



/* Sections
========================================================================== */
.intro {
    position:relative;
    background:#17212e url(/technology/landing/vector4k/img/intro-bk.jpg) left bottom no-repeat;
}
.intro-text p {
    color:#a4d2e8;
    font-size: 1.6rem;
}
.intro-screen {
    position:absolute;
    bottom:0;
    top:0;
    right:0;
    width: 100%;
    background:transparent url(/technology/landing/vector4k/img/intro-bk-screen.png) center no-repeat;
}
@media (max-width: 47.9em) {  /* Medium devices */
    .intro-text {
        text-align: center;
    }
    .intro-text p {
        font-size: 1.1rem;
    }
    .intro-text img {
        margin:0 auto;
	    display: block;
        clear: both;
    }
}
@media (max-width: 75em) and (min-width: 48em) {
    .intro-text {
        margin-left: 2rem;
    }
}

.panel {
    position: relative;
    display:block;
    overflow: hidden;
    background: #FFF url(/technology/landing/vector4k/img/list-panel.png) top center no-repeat; 
    width: 100%;
}
.panel:after {
    display: block;
    content: ' ';
    height: 0px;
    clear: both;
    overflow: hidden;
    visibility: hidden;
    }

.panel-dim,
.panel-dim-inner { background-color:#f2f3f5; }
.panel-dark { background-color:#333; }
.panel,
.panel-dim {
    border-top: 1px solid rgba(34, 36, 38, 0.15);
    }
 
.section-title {
    font-weight: 500;
    font-size: 2.6rem;
    margin-bottom: .75em;
}    
.section-title.section-center {    
    text-align: center;
    margin: 7rem 0;
}
@media (max-width: 47.9em) {
  .section-title {
      font-size: 1.5rem;
  }
  .section-title.section-center {
    margin: 4rem 0;
  }
  section h1 {
      font-size: 2em; 
  }
  section h2 {
      font-size: 1.5em; 
  }
}

.panel-facility-img {
    background:transparent url(/technology/landing/vector4k/img/extron_video_testing_facility2.jpg) center right no-repeat;
}


/* 4K specification 
================================================================*/
.card-4kspec {
    background: #fff;
    padding: 1rem 1.5rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(34, 36, 38, 0.15);
    position:relative;
    font-size: 70%;
    -webkit-box-shadow: 3px 3px 1px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 3px 3px 1px 0px rgba(0,0,0,0.1);
    box-shadow: 3px 3px 1px 0px rgba(0,0,0,0.1);
}

.table-4kspec {
    background: #fff;
    margin-bottom: .5rem;
}

.table-4kspec thead th {
    text-align:center;
}
.table-4kspec thead th, .table-4kspec tbody td {
    vertical-align:middle;
    border: 1px solid #e2e4e5;
    padding: 0.2rem 0.3rem;
    background-color:#f2f3f5;
}
.table-4kspec .table-success > th,
.table-4kspec .table-success > td  {
    background-color: #2185d0;
    color:#fff;
    }
.table-4kspec-note {
    margin-bottom: 0.5rem;
}
.table-4kspec-note td {
    padding: 0;
    border-bottom:1px solid #e2e4e5;
}


/*  expandable thumbnails for "Scaling" and "Integration" features 
================================================================ */
.thewall-container  {
  margin-right: auto;
  margin-left: auto;
}

.thewall-container:before,
.thewall-container:after {
  display: table;
  content: " ";
}

.thewall-container:after {
  clear: both;
}
@media (min-width: 75em) {
  .thewall-container {
    max-width: 75rem;
    padding: 0 .75rem;
  }
}

.thewall-tabs {
    width: 100%;
    list-style: none;
    margin: 0 auto;
    padding: 0;    
    display:table;
    table-layout: fixed;  
}

.thewall-tabs:before {
    display: table;
    content: " ";
}
.thewall-tabs:after {
    clear: both;
    overflow: hidden;
}

.thewall-tabs > .nav-item {
    display: table-cell;
    float: none;   
    width: 33.333333%;
    height:100%;
    padding: 0;
    margin:0;
    background: rgba(68,91,124,0.15);
    border:1px solid #ffffff;
    box-sizing: border-box;
    vertical-align: top;
    text-align:center;
}   

.thewall-tabs .nav-link {
    position:relative;
    display: inline-table;
    width: 100%;
    height:100%;
    color: #3D5270;
    text-decoration: none;
    padding: 1rem;
    text-align: center;
    line-height: 1.42857143;   
    overflow: hidden;
}

.thewall-tabs .nav-link:focus,
.thewall-tabs .nav-link:hover {
    background: rgba(68,91,124,0.2);
}

.thewall-tabs .nav-link.active,
.thewall-tabs.open .nav-link.active {
    color: #fff;
    background:rgba(68,91,124,0.8)
}

.thewall-tabs .thewall-header {
    font-size: 1.3em;
    margin: 1em auto;
}
/* patent icon */
.thewall-tabs .ui-patent.ui.corner.label {
    border-color: #2185d0;
}

/* image */
.thewall-tabs .image {
    display: block;
    min-height: 130px;
}
.thewall-tabs .image > img {
    display: block;
    max-width:100%;
    height:auto;
	border: none;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    bottom: 1.5em;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}
@media (max-width: 47.9em) {
    .thewall-tabs > li > a {
        padding:0.5em;
    }
    .thewall-tabs .thewall-header {
        font-size: 1em;
    }
}
.thewall-tabs > li > a:hover > .image > .up,
.thewall-tabs > li > a > .image > .hover,
.thewall-tabs > li > a.active > .image > .up {
    opacity: 0;
	filter: alpha(opacity = 0);
}
.thewall-tabs > li > a > .image > .up,
.thewall-tabs > li > a:hover > .image > .hover,
.thewall-tabs > li > a.active > .image > .hover {
    opacity: 1;
	filter: alpha(opacity = 100);
}



/*=================================
  tabs when .tab-content is opened 
===================================*/

.thewall-tabs.open {
    width: 50%;
}
.thewall-tabs.open.thewall-tabs-row1 {
    float:left;
}
.thewall-tabs.open.thewall-tabs-row2 {
    float:right;
}

.thewall-tabs.open .thewall-header {
    font-size: .9em;
    margin-bottom: .5em;
    min-height:70px;
}
.thewall-tabs.open .image {
    min-height: 80px;
}
.thewall-tabs.open .image > img {
    max-width: 50%;
    bottom: 1em;
}
    
@media (max-width: 61.9em) {
    .thewall-tabs.open > li > a {
        padding:0.6em;
    }
    .thewall-tabs.open .image {
        min-height:80px;
    }
    .thewall-tabs.open .thewall-header {
        min-height: inherit;
    }
    .thewall-tabs.open .ui-patent.ui.corner.label {
        border-color: transparent;
        color:#2185d0;
    }
    .thewall-tabs.open .active .ui-patent.ui.corner.label {
        color:#fff;
    }
}

@media (max-width: 47.9em) {
    .thewall-tabs.open .image {
        min-height:70px;
    }
    .thewall-tabs.open .thewall-header {
        font-size: 0.6em;
        margin-top: 1.5em;
    }
}

/*=========================
        tab-content 
===========================*/
.thewall-container > .tab-content {    
    position: relative;
    overflow: hidden;
    display: none;
    width:100%;
    border-top: 1px solid #fff;
}
.thewall-container > .tab-content.active {
    display: inline-block;
}
.thewall-container > .tab-content > .tab-pane {
    background: rgba(68, 91, 124, 0.15);
    padding: 3em 0;
    position: relative;
}
.thewall-title {
    font-size: 2.2rem;
    margin: .75em 0;
}
.thewall-container > .tab-content > .tab-pane p {

}
.thewall-container > .tab-content > .tab-pane .caption {
    font-size: .9rem;
    font-weight: 300;
    margin-top: .75em;
}
@media (max-width: 61.9em) {
    .thewall-container >.tab-content > .tab-pane {
        padding: 2em .5em;
    }
}
@media (max-width: 33.9em) {
    .thewall-container > .tab-content,
    .thewall-container >.tab-content > .tab-pane {
        display: block;
    }
    .thewall-container >.tab-content > .tab-pane {
        padding: 2em 1em;
    }
    .thewall-container > .tab-content > .fade {
        filter: alpha(opacity=100);
        opacity: 1;
    }
    .btnClose,
    .btnNext,
    .btnPrev {
        display: none;
    }
    .thewall-container >.tab-content > .tab-pane {
        margin-bottom: 1em;
    }
    .thewall-title {
        font-size: 1.3rem;
    }
}

/* Prev/Next button */
.btnNext,
.btnPrev {
    position: absolute;
    top: 50%;
    cursor: pointer;
    width: 40px;
    height: 83px;
    font-size: 1.8em;
    color: #fff;
    text-align: center;
    padding: 18px 0;
    vertical-align: middle;
    border-radius: 4px;
    background: rgba(68, 91, 124, 0.3);
    filter: alpha(opacity=50);
    opacity: 0.5;
    font-family:'FontAwesome';
    z-index:1;
    }
.btnNext:hover,
.btnPrev:hover {
    background: #2185d0;
    filter: alpha(opacity=100);
    opacity: 1;
    text-decoration: none;
    outline: 0;
    }
.btnNext {
    border-top-right-radius:0;
    border-bottom-right-radius:0;
    right: 0;
}
.btnNext:before {
    content:"\f054";
    }
.btnPrev {
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    left: 0;
}
.btnPrev:before {
    content:"\f053";
    }


/* Close button */
.btnClose {  
    position: absolute;
    width:40px;
    height:40px;
    top: 20px;
    right: 20px;
    filter: alpha(opacity=30);
    opacity: 0.3;    
    cursor: pointer;
    text-align: center;
    z-index: 1;
}
.btnClose::before {
    content: url(/technology/landing/vector4k/img/btn-close.gif);
}

.btnClose:hover {
    filter: alpha(opacity=100);
    opacity: 1;
    text-decoration: none;
}


/* Light Theme */
.btnClose.light::before,
.btnClose.light::after {
    background: rgba(255,255,255,0.5);
}
.btnClose.light:hover::before,
.btnClose.light:hover::after {
	background: rgba(255,255,255,0.8);
}

.video-768by432 {
    width:768px;
    height:432px;
    margin: 1rem auto;
    display: inline-block;
 }
 @media (max-width: 768px) {
    .video-768by432 {
        width: auto;
        height: auto;
     }
}
 
/* Seamless Switching feature
================================================================ */
.swapimg-container {
	position:relative;
	display: table;
	margin: 0 auto;
	background-color: #000;
	-webkit-box-shadow: 0px 0px 0px 7px rgba(0, 0, 0, 1);
	-moz-box-shadow:    0px 0px 0px 7px rgba(0, 0, 0, 1);
	box-shadow:         0px 0px 0px 7px rgba(0, 0, 0, 1);
	width: 550px;
	height: 365px;
}
.swapimg-container img {
	position:absolute;	
	top:0;
	left:0;
	right:0;
	bottom:0;
}
.swapimg-2 {
	opacity:0;
}

.fade-in,
.dissolve-in,
.cut-in {
	opacity:1;
}
.fade-out,
.dissolve-out,
.cut-out {
	opacity:0;
}

/* Fade */
.fade-in,
.fade-out {
	-webkit-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}
.swapimg-container img.fade-in {
	-webkit-transition-delay: .8s; /* Safari */
    transition-delay: .8s;
}


/* Dissolve */
.dissolve-in,
.dissolve-out {
	-webkit-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}


@media (max-width: 47.9em) {
    .swapimg-container {
		width: 400px;
		height: 265px;
	}
	.swapimg-shadow {
		width: 400px;
		height: auto;
	}
}



/* Image storage and keying feature
================================================================ */
.draggable-background {
	position:relative;
	display: table;
	margin: 2em auto;
	width: 750px;
	height: 484px;
	background-image:url(/technology/landing/vector4k/img/image-storage-keying.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
}

.draggable-container  {
	position: absolute;
	top:62px;
	right:37px;
	width: 517px;
	height: 333px;
}
.draggable-item {
	position:absolute;
	
}
.draggable-item:hover {
	cursor: move;
}

.draggable-item-caption {
	position:absolute;
	bottom: -100px;
	font-size: 1rem;
}

@media (max-width: 47.9em) {
	.draggable-background {
		width: 400px;
		height: 258px;
	}
	.draggable-container {
		top: 30px;
		right: 5px;
		width: 305px;
		height: 185px;
	}
	.draggable-item img {
		width: 50%;
		height: auto;
	}
}

/* Product Spotlight
========================================================================== */
.card-prod {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: .5em;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.card-prod > .card {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0.75em;  
  width: calc( 20%  -  1.5em );
  float: none;
}
.card-prod.four > .card {
	width: calc( 25%  -  1.5em );
}
.card-prod.five > .card {
	width: calc( 20%  -  1.5em );
}
.card-prod.six > .card {
	margin: 0.75em 0.5em;  
	width: calc( 16.6666%  -  1em );
}
/* Clearing */
.card-prod:after {
  display: block;
  content: ' ';
  height: 0px;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.card-prod .image-centered {
  height: 130px;
  font-size: 0;
  text-align: center;
  margin-bottom:.5rem;
}
.card-prod .image-centered:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.card-prod .image-centered-item {
  display: inline-block;
  width: 100%;
  font-size: 1rem;
  vertical-align: middle;
  
}
.card-prod .image-centered-item img {
  max-width: 100%;
  height: auto;
  max-height: 130px;
  padding: 0;
  margin: 0 auto;
}
.card-prod .card-text {
    font-size: 1rem;
}

@media (max-width: 61.9em) {
	.card-prod {
		margin-left: .5em;
		margin-right: .5em;
	}
	.card-prod.four > .card,
	.card-prod.five > .card,
	.card-prod.six > .card {
		width: calc( 33.33333333%  -  1em );
		margin: .5em;
	}
 }
 @media (max-width: 47.9em) {
	.card-prod.four > .card,
	.card-prod.five > .card,
	.card-prod.six > .card {
		width: calc( 50%  -  1em );
	}
 }
@media (max-width: 33.9em) {  
    .card-prod {
      display: block;
      table-layout: inherit;
      border-spacing: 1.25rem 0;
    }
	.card-prod.four > .card,
	.card-prod.five > .card,
	.card-prod.six > .card {
        display: block;
        width: 100%;
    }
    .card-deck-wrapper {
        margin-left: 0;
        margin-right: 0;
    }
}
/*----------------------------
    No-flexbox fallback 
 -----------------------------*/

.no-flexbox .card-prod > .card {
	display: inline-block;
	margin-left: .25em;
	margin-right: .25em;	
}  
.no-flexbox .card-prod .image-centered {
	display:block;
}

 


/* Button & Links
========================================================================== */	

/* Back to top button*/
.link-pagetop {
    position: fixed;
    bottom: 15%;
    right: 50px;
    background-color: rgba(153,153,153, 0.5);
    padding: 0.9em 1em;
    outline: medium none;
    border-radius: 4px;
    color: #fff;
    font-size: 1.5em;
    display:none;
}
.link-pagetop:link,
.link-pagetop:hover,
.link-pagetop:focus { 
    color: #fff; 
}
.link-pagetop:hover { 
    background: #2185d0;
}

[class^="link-"],
[class*=" link-"] {
    cursor: pointer;
}
[class^="link-"]:hover,
[class*=" link-"]:hover {
     text-decoration:none;
     border-bottom: 1px dotted;
}
[class^="link-"]:focus,
[class*=" link-"]:focus {
    outline: none;
}
    
[class^="link-"]:before,
[class*=" link-"]:before,
[class^="link-"]:after,
[class*=" link-"]:after {
	display: inline;
	width: auto;
	height: auto;
	margin-top: 0;
    font-family:'FontAwesome';
	font-weight: normal;
	font-style: normal;
	line-height: normal;
	text-decoration: inherit;
	-webkit-font-smoothing: antialiased;
	vertical-align: baseline;
	background-image: none;
	background-position: 0% 0%;
	background-repeat: repeat;
	speak: none;
    font-size: 90%;
    
}

[class^="link-"]:after,
[class*=" link-"]:after { padding-left:4px; }

[class^="link-"]:before,
[class*=" link-"]:before { padding-right:4px; }

.link-more,
.link-collapse-more,
.link-collapse-less {
    font-weight:300;
    white-space:nowrap;
}

.link-more:after {
    content:"\f054"
}
.link-collapse-more:after {
    content:"\f078"
}
.link-collapse-less:after {
    content:"\f077"
}

.btn-dim {
  color: #fff;
  background-color: #999;
  border-color: #999;
}

.btn-dim:focus,
.btn-dim.focus,
.btn-dim:active,
.btn-dim.active,
.open > .btn-dim.dropdown-toggle {
  color: #fff;
  background-color: #999;
  border-color: #999;
}

.btn-dim:hover {
  color: #fff;
  background-color: #333;
  border-color: #333;
}

@media (max-width: 33.9em) { 
.btn-block-xs {
  display: block;
  width: 100%;
  white-space:normal;
    }
}

.social-media .fa {
    position: relative;
}
.social-media .fa::before {
    margin-top: -20px;
    padding-right: 0.5rem;
    position: absolute;
    right: 100%;
}

/* Corner Label
========================================================================== */	
.ui.corner.label {
    background-color: transparent !important;
    border-color: #e8e8e8;
    height: 4em;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    transition: border-color 0.1s ease 0s;
    width: 4em;
    z-index: 1;
}
.ui.corner.label::after {
    background-color: transparent !important;
    border-bottom: 4em solid transparent;
    border-left: 0 solid transparent;
    border-right-color: inherit;
    border-style: solid;
    border-top: 0 solid transparent;
    border-width: 0 4em 4em 0;
    content: "";
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: border-color 0.1s ease 0s;
    width: 0;
    z-index: -1;
}
.ui.corner.label .fa {
    cursor: default;
    font-size: 1.14286em;
    left: 0.785714em;
    margin: 0;
    position: relative;
    top: 0.642857em;
}
/* Left */
.ui.left.corner.label .fa {
    left: -0.785714em;
}
.ui.left.corner.label, 
.ui.left.corner.label::after {
    left: 0;
    right: auto;
}
.ui.left.corner.label::after {
    border-bottom: 0 solid transparent;
    border-left: 0 solid transparent;
    border-right: 4em solid transparent;
    border-style: solid;
    border-top-color: inherit;
    border-width: 4em 4em 0 0;
}


/***********************************
	   tab-group
/***********************************/
.tab-group {
  position: relative;
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.tab-group:after {
  clear: both;
}

.tab-group > .nav-item {
  position: relative;
  float: left;
  display: inline-block;
}
.tab-group > .nav-item > a {  
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
      touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
    border: .0625rem solid transparent;
    border-radius: 0;
    padding: .375rem 4rem;
    color: #373a3c;
    background-color: #fff;
    border-color: #0275d8;
}
@media (max-width: 61.9em) {  /* Large devices */
    .tab-group > .nav-item > a  {
        font-size: .8rem;
        padding: .375rem 1rem;
    }
}
.tab-group .nav-item + .nav-item,
.tab-group .nav-item + .tab-group,
.tab-group .tab-group + .nav-item,
.tab-group .tab-group + .tab-group {
  margin-left: -1px;
}

.tab-group > .nav-item > a.active {
    color: #fff;
    background-color: #0275d8;
    border-color: #0275d8;
}
.tab-group > .nav-item:first-child:not(:last-child) > a {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;

}
.tab-group > .nav-item:last-child:not(:first-child) > a {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;

}


/***********************************
	        Helper Classes
/***********************************/

/* display */
.display-block { display:block !important; }
.display-inline { display: inline !important; }
.display-inline-block { display:inline-block !important; }

/* Image Alignment */
img.align-left {
	float: left;
	display:block;
	padding: 10px 25px 10px 0;
}
img.align-right {
	float:right;	
	display: block;
	padding: 10px 0 25px 10px;
}
img.align-center {
	margin:0 auto;
	display: block;
	clear: both;
}

/* Image Style */
img.img-border {
    border: 1px solid #666;
}


/* Alignment */
.text-left  { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* $Divider
========================================================================== */

.gap-xs,
.gap-sm,
.gap-md,
.gap-lg,
.gap-xl {
	display:block;
	width:100%;
	clear:both;
	overflow:hidden;	
}

.gap-xs { height:0.5em; }
.gap-sm { height:1.5em; }
.gap-md { height:2em; }
.gap-lg { height:2.5em; }
.gap-xl { height:4em; }


hr.light { border-bottom: 1px solid rgba(255,255,255,0.5)}

/* $Size and Spacing
========================================================================== */
.row-fluid .size16 { width: 100%; }
.row-fluid .size15 { width: 93.62549800796813%; }
.row-fluid .size14 { width: 87.25099601593627%; }
.row-fluid .size13 { width: 80.8764940239044%; }
.row-fluid .size12 { width: 74.50199203187252%; }
.row-fluid .size11 { width: 68.12749003984064%; }
.row-fluid .size10 { width: 61.75298804780877%; }
.row-fluid .size9 { width: 55.3784860557769%; }
.row-fluid .size8 { width: 49.00398406374502%; }
.row-fluid .size7 { width: 42.629482071713156%; }
.row-fluid .size6 { width: 36.25498007968128%; }
.row-fluid .size5 { width: 29.880478087649404%; }
.row-fluid .size4 { width: 23.505976095617534%; }
.row-fluid .size3 { width: 17.13147410358566%; }
.row-fluid .size2 { width: 10.756972111553786%; }
.row-fluid .size1 { width: 4.382470119521913%; }

/* $Typography
========================================================================== */
.figcaption {
    font-size: .85em;
    color:#8a9299;
    padding:0.5em;
}
    
/* Size */
.text-xs { font-size: .71rem; }
.text-sm { font-size: .85rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.3rem; }

/* color */
.text-light { color:#8a9299; }


/* weight */
.text-normal { font-weight: normal !important; }


/* Padding and Margin 
========================================================================== */

/* content-block */
.content-block { 
    padding: 3em 4em;
    display: block;
}


/*	Padding
**********************************/

/* top */
.padding-top-xs { padding-top: 0.5em !important; }
.padding-top-sm { padding-top: 1.5em !important; }
.padding-top-md { padding-top: 2em !important; }
.padding-top-lg { padding-top: 2.5em !important; }
.padding-top-xl { padding-top: 3.5em !important; }


/* right */
.padding-right-xs { padding-right: 0.5em !important; }
.padding-right-sm { padding-right: 1.5em !important; }
.padding-right-md { padding-right: 2em !important; }
.padding-right-lg { padding-right: 2.5em !important; }
.padding-right-xl { padding-right: 3.5em !important; }

/* bottom */
.padding-bottom-xs { padding-bottom: 0.5em !important; }
.padding-bottom-sm { padding-bottom: 1.5em !important; }
.padding-bottom-md { padding-bottom: 2em !important; }
.padding-bottom-lg { padding-bottom: 2.5em !important; }
.padding-bottom-xl { padding-bottom: 3.5em !important; }

/* left */
.padding-left-xs { padding-left: 0.5em !important; }
.padding-left-sm { padding-left: 1.5em !important; }
.padding-left-md { padding-left: 2em !important; }
.padding-left-lg { padding-left: 2.5em !important; }
.padding-left-xl { padding-left: 3.5em !important; }

/* all */
.padding-all-xs { padding: 0.5em !important; }
.padding-all-sm { padding: 1.5em !important; }
.padding-all-md { padding: 2em !important; }
.padding-all-lg { padding: 2.5em !important; }
.padding-all-xl { padding: 3.5em !important; }


/* Margin
/***********************************/

/* top */
.margin-top-xs { margin-top: 0.5em !important; }
.margin-top-sm { margin-top: 1.5em !important; }
.margin-top-md { margin-top: 2em !important; }
.margin-top-lg { margin-top: 2.5em !important; }
.margin-top-xl { margin-top: 3.5em !important; }


/* right */
.margin-right-xs { margin-right: 0.5em !important; }
.margin-right-sm { margin-right: 1.5em !important; }
.margin-right-md { margin-right: 2em !important; }
.margin-right-lg { margin-right: 2.5em !important; }
.margin-right-xl { margin-right: 3.5em !important; }

/* bottom */
.margin-bottom-xs { margin-bottom: 0.5em !important; }
.margin-bottom-sm { margin-bottom: 1.5em !important; }
.margin-bottom-md { margin-bottom: 2em !important; }
.margin-bottom-lg { margin-bottom: 2.5em !important; }
.margin-bottom-xl { margin-bottom: 3.5em !important; }

/* left */
.margin-left-xs { margin-left: 0.5em !important; }
.margin-left-sm { margin-left: 1.5em !important; }
.margin-left-md { margin-left: 2em !important; }
.margin-left-lg { margin-left: 2.5em !important; }
.margin-left-xl { margin-left: 3.5em !important; }

/* all */
.margin-all-xs { margin: 0.5em !important; }
.margin-all-sm { margin: 1.5em !important; }
.margin-all-md { margin: 2em !important; }
.margin-all-lg { margin: 2.5em !important; }
.margin-all-xl { margin: 3.5em !important; }