/* Reset Styles
***********************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q demo
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
strong {font-weight: bold;}
em {font-style: italic;}
a, button, input, textarea {outline: none;}

@font-face {
    font-family: 'rubikregular';
    src: url('../fonts/rubik-regular-webfont.woff2') format('woff2'),
         url('../fonts/rubik-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rubik_mono_oneregular';
    src: url('../fonts/rubikmonoone-regular-webfont.woff2') format('woff2'),
         url('../fonts/rubikmonoone-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body{
  background-image: linear-gradient(to right, dodgerblue , green);
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.drag-container {
  width: 100%;
  margin: 0px auto;
  padding: 3%;
  color: white;
  font-family: 'rubikregular';
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  overflow: hidden;
}
.drag-container .logo{
  width: 250px;
  margin: 0 auto 1.5%;
  display: block;
}
.drag-container .pie{
  position: absolute;
  bottom: 5%;
  width: 274px;
  margin: 0 auto;
  left: 0;
  right: 0;
}

.drag-list {
  display: inline;
  /*align-items: flex-start;*/
}
/*@media (max-width: 690px) {
  .drag-list {
    display: block;
  }
}*/

.drag-list .drag-column-on-hold:nth-child(1){margin: 0 10px 0 0;}
.drag-list .drag-column-on-hold:nth-child(4){margin: 0 0 0 10px;}

.drag-list .drag-column-a:nth-child(5){
  margin: 50px 10px 0 0;
  clear: both;
}
.drag-list .drag-column-b:nth-child(6){margin: 50px 10px 0 10px;}
.drag-list .drag-column-c:nth-child(7){margin: 50px 0 0 10px;}

.drag-column {
  /*flex: 1;*/
  margin: 0 10px;
  position: relative;
  /*background: rgba(0, 0, 0, 0.2);*/
  /*overflow: hidden;*/
  width: 24%;
  /*float: left;*/
}

.drag-column-a, .drag-column-b, .drag-column-c{width: 32.5%; display: block; margin: 0 auto; min-width: 300px;}

.drag-column h2 {
  font-size: 1rem;
  margin: 0;
  text-transform: uppercase;
  font-weight: normal;
  text-align: center;
}
.drag-column h3 {
  font-family: 'rubik_mono_oneregular';
  font-size: 2rem;
  margin: 0;
  text-transform: uppercase;
  font-weight: normal;
  text-align: center;
}
.drag-column-on-hold .drag-column-header,
.drag-column-on-hold .is-moved,
.drag-column-on-hold .drag-options {
  background: #39D5FF;
}
.drag-column-a .drag-column-header,
.drag-column-a .is-moved,
.drag-column-a .drag-options {
  background: #27AE60;
}
.drag-column-b .drag-column-header,
.drag-column-b .is-moved,
.drag-column-b .drag-options {
  background: #F9BF3B;
}
.drag-column-c .drag-column-header,
.drag-column-c .is-moved,
.drag-column-c .drag-options {
  background: #0077C0;
}

.drag-column-header {
  display: inherit;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
}

.drag-inner-list {min-height: 100px;}

.drag-item {
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: -1px;
  text-align: center;
  margin: 15px 0px;
  padding: 5px;
  background-color: rgba(255, 255, 255, 1);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 10px;
  color: #2980B9;
  box-shadow: 0 0 10px rgba(0,0,0,0.1)
}
.drag-item.is-moving {
  font-family: 'rubikregular';
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  background: rgba(255, 255, 255, 0.7);
  vertical-align: middle;
}
.bra{
  background-image: url(../images/flags-bra.png);
  background-repeat: no-repeat;
  background-position: -50px center;
}
.arg{
  background-image: url(../images/flags-arg.png);
  background-repeat: no-repeat;
  background-position: -50px center;
}
.uru{
  background-image: url(../images/flags-uru.png);
  background-repeat: no-repeat;
  background-position: -50px center;
}
.col{
  background-image: url(../images/flags-col.png);
  background-position: -50px center;
  background-repeat: no-repeat;
}
.chi{
  background-image: url(../images/flags-chi.png);
  background-repeat: no-repeat;
  background-position: -50px center;
}
.per{
  background-image: url(../images/flags-per.png);
  background-repeat: no-repeat;
  background-position: -50px center;
}
.ven{
  background-image: url(../images/flags-ven.png);
  background-repeat: no-repeat;
  background-position: -50px center;
}
.par{
  background-image: url(../images/flags-par.png);
  background-repeat: no-repeat;
  background-position: -50px center;
}
.jap{
  background-image: url(../images/flags-jap.png);
  background-repeat: no-repeat;
  background-position: -50px center;
}
.ecu{
  background-image: url(../images/flags-ecu.png);
  background-repeat: no-repeat;
  background-position: -50px center;
}
.bol{
  background-image: url(../images/flags-bol.png);
  background-repeat: no-repeat;
  background-position: -50px center;
}
.cat{
  background-image: url(../images/flags-cat.png);
  background-repeat: no-repeat;
  background-position: -50px center;
}
.drag-header-more {cursor: move;}

.drag-options {
  position: absolute;
  top: 44px;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.drag-options.active {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}
.drag-options-label {
  display: block;
  margin: 0 0 5px 0;
}
.drag-options-label input {opacity: 0.6;}

/* Dragula CSS  */
.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  list-style-type: none;
}

.gu-hide {display: none !important;}

.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.gu-transit {opacity: 0.2;}

/* Demo info */
.section {
  padding: 20px;
  text-align: center;
}
.section a {
  color: white;
  text-decoration: none;
  font-weight: 300;
}
.section h4 {
  font-weight: 400;
}
.section h4 a {
  font-weight: 600;
}