/** ***********************************************************************************************\
 *                                          CONSTANTS
\**************************************************************************************************/
/** ***********************************************************************************************\
 *                                          FUNCTIONS
\**************************************************************************************************/
/** ***********************************************************************************************\
 *                                             FLEX
\**************************************************************************************************/
/**
 * Container of flex elements
 * Children will automatically become flex-items
 */
.flexContainer {
  display: -webkit-flex;
  /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;
  /* NEW, Spec - Firefox, Chrome, Opera */
}
/**
 * Container of flex elements in inline mode
 * Children will automatically become flex-items
 */
.flexInlineContainer {
  display: -webkit-inline-flex;
  display: inline-flex;
}
.flexWrap {
  -webkit-flex-wrap: wrap ;
  flex-wrap: wrap ;
}
/**
 * When a **container** has this class, children will be horizontally distributed
 */
.flexRow {
  -webkit-flex-direction: row;
  flex-direction: row;
}
/**
 * When a **container** has this class, children will be vertically distributed
 */
.flexColumn {
  -webkit-flex-direction: column;
  flex-direction: column;
}
/**
 * When a **container** has this class, children will be horizontally distributed
 */
.flexRowReverse {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
/**
 * When a **container** has this class, children will be vertically distributed
 */
.flexColumnReverse {
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
/**
 * When a **container** has this class, children will be positioned in the beginning of the container along the main
 * axis (row / column)
 */
.flexJustifyStart {
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
/**
 * When a **container** has this class, children will be positioned in the center of the container along the main
 * axis (row / column)
 */
.flexJustifyCenter {
  -webkit-justify-content: center;
  justify-content: center;
}
/**
 * When a **container** has this class, children will be positioned in the end of the container along the main
 * axis (row / column)
 */
.flexJustifyEnd {
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
/**
 * When a **container** has this class, children will be positioned so that they take up the whole container with
 * space between them along the main axis (row / column)
 */
.flexJustifySpace {
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
/**
 * When a **container** has this class, children will be positioned in the beginning of the container along the
 * secondary axis (row / column)
 */
.flexAlignStart {
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
/**
 * When a **container** has this class, children will be positioned in the center of the container along the secondary
 * axis (row / column)
 */
.flexAlignCenter {
  -webkit-align-items: center;
  align-items: center;
}
/**
 * When a **container** has this class, children will be positioned in the end of the container along the secondary
 * axis (row / column)
 */
.flexAlignEnd {
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.flexCell {
  -webkit-flex-grow: 1 ;
  -webkit-flex-shrink: 1 ;
  -webkit-flex-basis: auto ;
  flex-grow: 1 ;
  flex-shrink: 1;
  flex-basis: auto ;
}
/**
 * When a **flex child** has this class, it will be positioned in the beginning of the container along the secondary
 * axis (row / column)
 */
.flexAlignSelfStart {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
/**
 * When a **flex child** has this class, it will be positioned in the center of the container along the secondary
 * axis (row / column)
 */
.flexAlignSelfCenter {
  -webkit-align-self: center;
  align-self: center;
}
/**
 * When a **flex child** has this class, it will be positioned in the end of the container along the secondary
 * axis (row / column)
 */
.flexAlignSelfEnd {
  -webkit-align-self: flex-end;
  align-self: flex-end;
}
/** ***********************************************************************************************\
 *                                             STYLE
\**************************************************************************************************/
html {
  height: 100% ;
}
body {
  height: 100%;
  margin: 0 auto;
  padding: 0 200px ;
  color: #3a3a3a;
  font-family: "Open Sans", Helvetica, Arial, Verdana, sans-serif;
}
@media screen and (max-width: 1024px) {
  body {
    padding: 0 10px ;
  }
}
main section {
  margin: 0 -200px;
  padding: 10px 200px 30px 200px;
}
@media screen and (max-width: 1024px) {
  main section {
    margin: 0 -10px;
    padding: 10px 10px 30px 10px;
  }
}
footer.SV3DSwipe {
  height: 50px;
}
footer.SV3DSwipe img {
  margin-right: 20px;
}
footer.SV3DSwipe small:last-of-type {
  -webkit-flex-grow: 1 ;
  -webkit-flex-shrink: 1 ;
  -webkit-flex-basis: auto ;
  flex-grow: 1 ;
  flex-shrink: 1;
  flex-basis: auto ;
  text-align: right;
}
/** ***********************************************************************************************\
 *                                             PROGRESS
\**************************************************************************************************/
@-webkit-keyframes progress {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 100%;
  }
}
@-moz-keyframes progress {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 100%;
  }
}
@keyframes progress {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 100%;
  }
}
progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  height: 25px ;
  position: relative;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
progress.showPercentage:before {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  content: attr(value) " %";
  text-align: center;
  line-height: 25px;
  font-weight: bold;
}
progress::-webkit-progress-bar {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #37b6ff;
}
progress::-webkit-progress-value {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #00a1fd;
  background-image: -webkit-linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.3));
  background-image: linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.3));
  background-size: 40px 40px;
  -webkit-animation: progress 8s linear infinite;
  animation: progress 8s linear infinite;
}
progress::-moz-progress-bar {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #00a1fd;
  background-image: linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.3));
  background-size: 40px 40px;
  -moz-animation: progress 8s linear infinite;
  animation: progress 8s linear infinite;
}
/** ***********************************************************************************************\
 *                                             STYLE
\**************************************************************************************************/
.SV3DSwipe.applicationContainer {
  position: relative ;
  width: 100% ;
  height: 500px;
  max-height: 95vh;
  background-color: #00a1fd;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid #00a1fd;
  /**
         * Prevent selection on elements
         */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  display: -webkit-flex;
  /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;
  /* NEW, Spec - Firefox, Chrome, Opera */
}
.SV3DSwipe.applicationContainer.fullscreen {
  position: fixed ;
  top: 0 ;
  right: 0 ;
  bottom: 0 ;
  left: 0 ;
  width: 100%;
  height: 100%;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}
.SV3DSwipe.applicationContainer.leftConfigurator {
  -webkit-flex-direction: row;
  flex-direction: row;
}
.SV3DSwipe.applicationContainer.leftConfigurator .applicationConfigurator {
  width: 200px;
}
.SV3DSwipe.applicationContainer.rightConfigurator {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.SV3DSwipe.applicationContainer.rightConfigurator .applicationConfigurator {
  width: 200px;
}
.SV3DSwipe.applicationContainer.topConfigurator {
  -webkit-flex-direction: column;
  flex-direction: column;
}
.SV3DSwipe.applicationContainer.topConfigurator .applicationConfigurator {
  height: 100px;
}
.SV3DSwipe.applicationContainer.bottomConfigurator {
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.SV3DSwipe.applicationContainer.bottomConfigurator .applicationConfigurator {
  height: 100px;
}
.SV3DSwipe.applicationContainer progress {
  margin: auto;
  display: none;
}
.SV3DSwipe.applicationContainer.loading progress {
  display: block;
}
.SV3DSwipe.applicationOverlay {
  position: absolute ;
  top: 0 ;
  right: 0 ;
  bottom: 0 ;
  left: 0 ;
  pointer-events: none ;
}
.SV3DSwipe.applicationOverlay * {
  pointer-events: auto ;
}
.SV3DSwipe.applicationConfigurator {
  background-color: #00a1fd;
  overflow: hidden;
}
.SV3DSwipe.applicationVisualiser {
  background-color: white;
  position: relative ;
  display: -webkit-flex;
  /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;
  /* NEW, Spec - Firefox, Chrome, Opera */
  -webkit-flex-grow: 1 ;
  -webkit-flex-shrink: 1 ;
  -webkit-flex-basis: auto ;
  flex-grow: 1 ;
  flex-shrink: 1;
  flex-basis: auto ;
}
.SV3DSwipe.applicationVisualiser canvas {
  position: absolute ;
}
.SV3DSwipe.applicationVisualiser canvas.pointer {
  cursor: pointer;
}