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


/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 20px;
}
body {
  font-size: 20px;
  line-height:1.6;
  font-weight:400;
  font-family: "Open Sans", sans-serif;
  color: #000000;
  background-color: #FFFFFF;
  padding:0;
  margin:0px 0 20px 0;

}

a {
  color: #1784c7;
}

/* -------------------------------- 

Main Page Content

-------------------------------- */
.content-wrapper {
  padding: 20px 40px;
  width:100%;
  max-width:1050px;
  margin:auto;
}
.content-container {
  position:relative;
  width:100%;
  margin:auto;
  z-index:1;
}
h1,h2,h3,h4,h5,h6 {
	font-weight:700;
	line-height:1.2;
}
h1 {
font-size:52px;
}
h2 {
font-size:44px;
}
h3 {
font-size:36px;
}
h4 {
font-size:28px;
}
h5 {
font-size:20px;
}
.fs-sm {
font-size:12px;
}
.fs-1 {
font-size:14px;
}
.fs-2 {
font-size:16px;
}
.fs-3 {
font-size:18px;
}
.fs-4 {
font-size:20px;
}
.fs-5 {
font-size:22px;
}
.fs-6 {
font-size:24px;
}
.fs-7 {
font-size:28px;
}
.fs-8 {
font-size:32px;
}
.fs-9 {
font-size:45px;
}
.fs-10 {
font-size:54px;
}
.fs-11 {
font-size:64px;
line-height:1.2;
}
.fs-12 {
font-size:74px;
line-height:1.2;
}
.fs-13 {
font-size:84px;
line-height:1.2;
}
.fs-14 {
font-size:150px;
line-height:1.2;
}
.fw-bold {
font-weight:700;
}
.fw-extrabold {
font-weight:800;
}
.fw-black {
font-weight:900;
}
.fw-italic {
font-style:italic;
}
.fc-green {
color:#00FF00;
}
.fc-green-2 {
color:#4CAF50;
}
.fc-green-3 {
color:#b8f618;
}
.fc-red {
color:#ff013c;
}
.fc-gray {
color:#333333;
}
.fc-gray-2 {
color:#CCCCCC;
}
.fc-gray-3 {
color:#282828;
}
.fc-white {
color:#FFFFFF;
}
.fc-orange {
color:#f85000;
}
.fc-highlight {
background-color:#FFFF00;
}
.fc-highlight-2 {
position: relative;
}
.fc-highlight-2::before {
      /* Highlight color */
      background-color: #FFFF00;
      content: "";
      position: absolute;
      width: calc(100% + 4px);
      height: 60%;
      left: -2px;
      bottom: 0;
      z-index: -1;
      transform: rotate(-2deg);
}
.fc-highlight-3 {
background-color:#fefcec;
color:#7c654d;
}
.fc-outline {
border:solid 3px;
padding:15px;
}
.fc-label {
background-color:#00CC66; 
padding:5px 10px; 
border-radius:2px; 
color:#FFFFFF;
border:none;
}
.fc-label-2 {
background-color:#99FF00; 
padding:5px 10px; 
border-radius:2px; 
color:#000000;
border:none;
}
.fc-label-red {
background-color:#ff4858;
}
.fc-slash {
  position: relative;
}
.fc-slash:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 4px solid #FF0000;
  border-color: inherit #FF0000;

  -webkit-transform:rotate(-15deg);
  -moz-transform:rotate(-15deg);
  -ms-transform:rotate(-15deg);
  -o-transform:rotate(-15deg);
  transform:rotate(-15deg);
}
.fc-angle {
-ms-transform: rotate(1deg); /* IE 9 */
-webkit-transform: rotate(1deg); /* Safari 3-8 */
transform: rotate(1deg);
}

.rock-salt {
font-family: 'Rock Salt', cursive!important;
}
.marker {
font-family: 'Permanent Marker', cursive;
}
.caveat {
font-family: 'Caveat', cursive!important;
}
.rainbow {
font-family: 'Over the Rainbow', cursive!important;
}
.open-sans {
font-family: "Open Sans", sans-serif!important;
}
.bebas {
font-family: 'Bebas Neue', sans-serif!important;
}
.ibm-plex {
font-family: 'IBM Plex Mono', monospace!important;
}
.georgia-font {
font-family:Georgia, "Times New Roman", Times, serif!important;
}
.patua {
    font-family: 'Patua One', cursive!important;
	font-weight:normal!important;
}
.roboto {
font-family: 'Roboto', sans-serif!important;
}
.roboto-mono {
font-family: 'Roboto Mono', monospace!important;
}
.arial {
font-family:Arial, Helvetica, sans-serif!important;
}
.merriweather {
font-family: 'Merriweather', serif!important;
}
.fjalla {
font-family: 'Fjalla One', sans-serif!important;
}



.float-right {
float:right;
margin:20px;
width:100%;
height:auto;
}
.float-left {
float:left;
margin:20px;
width:100%;
height:auto;
}
img {
image-rendering: -webkit-optimize-contrast;
}
.img-round {
border-radius:5px;
}
.img-border{
border:6px solid #FFFFFF;;
}
.img-shadow {
 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
 margin:10px 0px
}
.img-darker {
filter: brightness(98%);
}
.img-responsive {
width:100%; 
height:auto;
}
.img-container {
position: relative;
width: 100%;
max-width: 500px;
}
.bg-gray {
background-color:#F3F3F3;
}
.bg-black {
background-color:#000000;
}
.bg-white {
background-color:#FFFFFF;
}
.nobg {
background-color:transparent!important;
}
.border-round {
border-radius:15px;
}
.border-dashed {
border:2px dashed;
}
.border-solid {
border:2px solid;
}
.shadow {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.divider {
border: dashed #000000;
border-width: 0px 0px 4px 0px;
}
.videobox {
color:#FFFFFF;
background-color:#000000;
box-sizing:border-box;
padding:5px;
border:solid 5px #000000;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
border-radius:2px;
}
.mg-auto {
margin:auto;
}
.mg-1 {
margin:5px!important;
}
.mg-2 {
margin:10px!important;
}
.mgb-1 {
margin-bottom:-5px;
}
.mgb-2 {
margin-bottom:-10px;
}
.pd-1 {
padding:10px!important;
}
.pd-2 {
padding:20px!important;
}
.maxw-auto {
width:auto;
}
.maxw-3 {
max-width:300px;
}
.maxw-4 {
max-width:400px;
}
.maxw-5 {
max-width:500px;
}
.maxw-6 {
max-width:600px;
}
.maxw-7 {
max-width:700px;
}
.maxw-8 {
max-width:800px;
}
.maxw-9 {
max-width:900px;
}
.maxw-10 {
max-width:1000px;
}
.maxw-70 {
max-width:70%;
}
.maxw-80 {
max-width:80%;
}
.maxw-90 {
max-width:90%;
}
.maxw-100 {
width:100%;
}
.min-ht-1 {
min-height:400px;
}

/*-------------------------------------

Tooltip

------------------------------------*/        
            .tooltip {
                display: block;
                position: absolute;
                left: 0;
                bottom: 120%;
                width: auto;
                padding: 10px;
                border-radius: 3px;
                background-color: #09f;
                color: #fff;
                line-height: normal;
                text-transform: none;
                font-size: 12px;
                opacity: 0;
                transform: scaleY(0);
                transition: all 0.2s ease;
				font-family: 'IBM Plex Mono', monospace;
				letter-spacing:normal;
				font-weight:normal;
            }
            .tooltip:after {
                position: absolute;
                content: '';
                left: 10px;
                bottom: -5px;
                width: 0;
                height: 0;
                border-top: 5px solid #09f;
                border-right: 5px solid transparent;
                border-left: 5px solid transparent;
            }
			.tooltip-box {
			position:relative;
			}
            .tooltip-info:hover .tooltip {
                opacity: 1;
                transform: scaleY(1);
            }
			/*


/*------------------------------------------

Forms

------------------------------------------*/

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="file"],
select,
textarea
{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: 'IBM Plex Mono', monospace;
  font-size:16px;
}
select {
background-color:#F0F0F0;
font-size:14px;
}
input[type=checkbox] {
    height:16px;
	width:16px;
}
.input-xl {
padding:20px!important;
}
label {
font-family: "Open Sans", sans-serif;
font-size:14px;
font-weight:700;
}
.card {
background-image:url(../images/icons/cc.png);
background-repeat:no-repeat;
background-position:center left 10px;
padding-left:40px!important;
}
.dark input  {
background-color:#282828!important;
color:#CCCCCC!important;
border:none!important;
}
.checkedbox {
background-image:url(../images/icons/checkgreen.png);
background-repeat:no-repeat;
background-position:center right 15px;
font-family: "Open Sans", sans-serif;
padding:20px!important;
font-size:16px;
}



/* -------------------------------- 

Buttons

-------------------------------- */

.btn-submit {
  display: inline-block;
  background-color: #4CAF50;
  color: white;
  padding: 20px 25px;
  margin: 4px 0px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration:none;
  text-align:center;
  font-family: "Open Sans", sans-serif;
  
}

.btn-submit:hover {
  background-color: #45a049;
}

.btn-copy {
background-color:transparent;
border:0;
cursor:pointer;
margin:0;
padding:0;
}
.btn-center {
  position: absolute;
  top: 50%;
  left: 50%;
   transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.btn-shadow {
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }
.btn-round {
 border-radius:50px;
}
.btn-pad-sm {
padding:15px 20px!important;
}
.btn-mg-sm {
margin:8px!important;
}
.btn-green {
background-color: #4CAF50;
}
.btn-blue {
background-color:#0a5dfe!important;
}
.btn-gray {
background-color:#efefef!important;
color:#000000;
}
.btn-green-grad {
color:#000000!important;
background: rgb(224,255,0)!important;
background: linear-gradient(90deg, rgba(224,255,0,0.9471989479385504) 0%, rgba(115,255,83,1) 100%)!important;
}
.btn-green-grad-2 {
color:#000000!important;
background: rgb(4,166,81)!important;
background: linear-gradient(79deg, rgba(4,166,81,1) 0%, rgba(121,193,65,1) 50%)!important; 
}
.btn-blue-grad {
color:#FFFFFF!important;
background: rgb(255,83,219)!important;
background: linear-gradient(90deg, rgba(255,83,219,1) 0%, rgba(0,176,255,0.9584034297312675) 100%)!important;
border:0!important;
}
.btn-orange-grad {
color:#000000!important;
 background: rgb(228,255,33)!important;
background: linear-gradient(90deg, rgba(228,255,33,1) 0%, rgba(255,222,0,1) 58%, rgba(255,205,0,1) 100%)!important;
border:0!important;
}
.toggle-button {
                display: block;
                text-decoration: none;
                padding: 16px 10px;
                color:#054570;
                background-color:#EAEAEA;
                text-transform: uppercase;
                text-align: center;
				border-radius:5px;
				font-size:2.2rem;
				letter-spacing: 1px;
				font-family: 'Bebas Neue', sans-serif;
				text-decoration:underline;
            }
.toggle-button:hover {
  color: #1784c7;
}
.toggle-container .toggle-content {
                display: none;
                padding: 20px;
                background-color:#F3F3F3;
                font-size:1.4rem;
				font-family: 'IBM Plex Mono', monospace;
				text-align:left;
				box-sizing:border-box;
}
.social-button {
padding:3px;
border:0;
}
.social-button:hover {
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.3) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.3) grayscale(1) opacity(.7);
            filter: brightness(1.3) grayscale(1) opacity(.7);
}

.button,
.button:after {
  font-family: 'Bebas Neue', sans-serif;
  background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
  border: 0;
  color: #fff;
  letter-spacing: 3px;
  box-shadow: 6px 0px 0px #00E6F6;
  outline: transparent;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  padding:1em 1.5em;
  margin:0.5em;
  display:inline-block;
  font-size:2.1rem;
  line-height:1.8;
}

.button:after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);
  
  content: 'ALTERNATE TEXT';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
  text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
  clip-path: var(--slice-0);
}

.button:hover:after {
  animation: 1s glitch;
  animation-timing-function: steps(2, end);
}

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }
  10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  }
  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }
  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  }
  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }
  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }
  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 10px);
  }
  70% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }
  80% {
    clip-path: var(--slice-5);
    transform: translate(20px, -10px);
  }
  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}

button:disabled,
button[disabled]{
  opacity:0.5;
}



.alert {
background-color:#ffe6e8;
padding:20px 20px 20px 20px;
box-sizing:border-box;
border-radius:5px;
border:solid #ff4858;
border-width:0 0 0 8px;
margin:0.6em 0;
}
.alert-bg {
background-image:url(../img/exclamation.png);
background-repeat:no-repeat;
background-position:center right 20px;
padding:20px 60px 20px 20px!important;
}
.alert-2 {
background-color:#fff7cb;
padding:20px 20px 20px 20px;
box-sizing:border-box;
border-radius:5px;
border:solid #f6cb7f;
border-width:0 0 0 8px;
margin:0.6em 0;
}
.alert-3 {
background-color:#dcf3d6;
padding:20px 20px 20px 20px;
box-sizing:border-box;
border-radius:5px;
border:solid #a7cb9d;
border-width:0 0 0 8px;
margin:0.6em 0;
}
.alert-4 {
background-color:#111111;
padding:20px 20px 20px 20px;
box-sizing:border-box;
border-radius:5px;
border:solid #252525;
border-width:0 0 0 8px;
margin:0.6em 0;
}


.scrolldiv {
overflow-y: scroll; 
max-height:400px; 
padding:10px; 
box-sizing:border-box; 
height:auto;
}





ul.simple {
list-style-type:disc;
padding:0;
margin:0 0 0 20px;
line-height:1.3;
}
ul.simple  li{
padding:5px 0;
}
ul.simple-2 {
list-style-type:none;
padding:0;
margin:0;
}
ul.simple-2 li {
padding:10px 0 10px 40px;
background-image:url(../images/icons/checkgreen.png);
background-repeat:no-repeat;
background-position:0px 10px;
}
ul.simple-3 {
list-style-type:none;
padding:0;
margin:0;
}
ul.simple-3 li {
padding:10px 0 10px 40px;
background-image:url(../images/icons/checkred.png);
background-repeat:no-repeat;
background-position:0px 10px;
}
ul.simple-4 {
list-style-type:none;
padding:0;
margin:0;
}
ul.simple-4 li {
display:inline-block;
padding:0px 15px 0px 35px;
background-image:url(../images/icons/checkgreen2.png);
background-repeat:no-repeat;
background-position:0px 0px;
}
ul.simple-5 {
list-style-type:none;
padding:0;
margin:0;
}
ul.simple-5 li {
display:inline-block;
padding:0px 15px 0px 35px;
background-image:url(../images/icons/checkwhite2.png);
background-repeat:no-repeat;
background-position:0px 0px;
}

ul.checkmark {
list-style-type:none;
padding:0;
margin:0;
}
ul.checkmark li {
padding:15px 0 15px 40px;
background-image:url(../images/icons/checkbox.jpg);
background-repeat:no-repeat;
background-position:0px 8px;
}

ul.bullet {
list-style-type:none;
padding:0;
margin:0;
}
ul.bullet li {
padding:10px 0 10px 35px;
background-image:url(../images/icons/bullet.png);
background-repeat:no-repeat;
background-position:0px 15px;
}
.li-container {
padding:15px 10px; 
box-sizing:border-box; 
background-color:rgba(255, 255, 255,0.08); 
border:solid 1px rgba(255, 255, 255,0.2); 
border-radius:10px; margin:15px 0
}
.li-container-green {
background-color:rgba(81, 227, 14,0.07)!important;
border:solid 1px rgba(81, 227, 14,0.15)!important; 
}

.hidden {
display:none;
}
.inline {
display:inline-block;
}

/*Radio-Checkbox ON-OFF*/
.check-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}
.btnoff{
background-image:url(../img/off.jpg);
}

.check-selector input:active +.switch{
opacity: 0.5;
}
.check-selector input:checked +.switch{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
			background-image:url(../img/on.jpg);
}
.switch {
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;height:44px;
	margin:5px 0px;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
}
/*------------------------------------------

Animation

------------------------------------------*/
.loader {
  background: linear-gradient(to right, rgb(22, 113, 202) 50%, transparent 50%);
  animation: spin 1s infinite linear;
}
.loader:before {
  display: block;
  content: '';
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  background: #222;
  border-radius: 50%;
}

.gelatine {
  animation: gelatine 0.5s infinite;
}
@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}

.spin {
  animation: spin 1s infinite linear;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.elastic-spin {
  animation: elastic-spin 1s infinite ease;
}
@keyframes elastic-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(720deg); }
}

.pulse {
  animation: pulse 1s infinite ease-in-out alternate;
}
@keyframes pulse {
  from { transform: scale(0.8); }
  to { transform: scale(1.2); }
}

.flash {
  animation: flash 500ms ease infinite alternate;
}
@keyframes flash {
	from { opacity: 1; }	
	to { opacity: 0; }
}

.hithere {
  animation: hithere 1s ease infinite;
}
@keyframes hithere {
  30% { transform: scale(1.2); }
  40%, 60% { transform: rotate(-20deg) scale(1.2); }
  50% { transform: rotate(20deg) scale(1.2); }
  70% { transform: rotate(0deg) scale(1.2); }
  100% { transform: scale(1); }
}

.grow {
  animation: grow 2s ease infinite;
}
@keyframes grow {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.fade-in {
  animation: fade-in 2s linear infinite;
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-out {
  animation: fade-out 2s linear infinite;
}
@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.bounce {
  animation: bounce 2s ease infinite;
}
@keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}

.bounce2 {
  animation: bounce2 2s ease infinite;
}
@keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.shake {
  animation: shake 2s ease infinite;
}
@keyframes shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.flip {
	backface-visibility: visible !important;
	animation: flip 2s ease infinite;
}
@keyframes flip {
	0% {
		transform: perspective(400px) rotateY(0);
		animation-timing-function: ease-out;
	}
	40% {
		transform: perspective(400px) translateZ(150px) rotateY(170deg);
		animation-timing-function: ease-out;
	}
	50% {
		transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		animation-timing-function: ease-in;
	}
	80% {
		transform: perspective(400px) rotateY(360deg) scale(.95);
		animation-timing-function: ease-in;
	}
	100% {
		transform: perspective(400px) scale(1);
		animation-timing-function: ease-in;
	}
}

.swing {
	transform-origin: top center;
	animation: swing 2s ease infinite;
}
@keyframes swing {
	20% { transform: rotate(15deg); }	
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(5deg); }	
	80% { transform: rotate(-5deg); }	
	100% { transform: rotate(0deg); }
}

.wobble {
  animation: wobble 2s ease infinite;
}
@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}

.fade-in-down {

  animation: fade-in-down 2s ease infinite;
}
@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-left {
  animation: fade-in-left 2s ease infinite;
}
@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-out-down {
  animation: fade-out-down 2s ease infinite;
}
@keyframes fade-out-down {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

.fade-out-right {
  animation: fade-out-right 2s ease infinite;
}
@keyframes fade-out-right {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}

.bounce-in {
  animation: bounce-in 2s ease infinite;
}
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% { transform: scale(.9); }
  100% { transform: scale(1); }
}

.bounce-in-right {
  animation: bounce-in-right 2s ease infinite;
}
@keyframes bounce-in-right {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px);
  }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

.bounce-out {
  animation: bounce-out 2s ease infinite;
}
@keyframes bounce-out {
  0% { transform: scale(1); }
  25% { transform: scale(.95); }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(.3);
  } 
}

.bounce-out-down {
  animation: bounce-out-down 2s ease infinite;
}
@keyframes bounce-out-down {
  0% { transform: translateY(0); }
  20% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

.rotate-in-down-left {
  animation: rotate-in-down-left 2s ease infinite;
}
@keyframes rotate-in-down-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}

.rotate-in-up-left {
  animation: rotate-in-up-left 2s ease infinite;
}
@keyframes rotate-in-up-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}

.hinge {
  animation: hinge 2s ease infinite;
}
@keyframes hinge {
  0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }  
  20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }  
  40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 
  80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 
  100% { transform: translateY(700px); opacity: 0; }
}

.roll-in {
  animation: roll-in 2s ease infinite;
}
@keyframes roll-in {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
}

.roll-out {
  animation: roll-out 2s ease infinite;
}
@keyframes roll-out {
    0% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) rotate(120deg);
  }
}


@media only screen and (max-width: 768px) {

body {
  font-size: 16px;
  margin:0;
}
.content-wrapper {
  padding: 10px 20px;
}
h1 {
font-size:36px;
}
h2 {
font-size:30px;
}
h3 {
font-size:24px;
}
h4 {
font-size:16px;
}
.fs-1 {
font-size:12px;
}
.fs-2 {
font-size:14px;
}
.fs-3 {
font-size:16px;
}
.fs-4 {
font-size:18px;
}
.fs-5 {
font-size:20px;
}
.fs-6 {
font-size:22px;
}
.fs-7 {
font-size:24px;
}
.fs-8 {
font-size:26px;
}
.fs-9 {
font-size:36px;
}
.fs-10 {
font-size:46px;
}
.fs-11 {
font-size:50px;
}
.fs-12 {
font-size:54px;
}
.fs-13 {
font-size:74px;
}
.fs-14 {
font-size:120px;
line-height:1.2;
}
.hide-content {
display:none;
}
.text-center {
text-align:center;
}
.text-left {
text-align:left;
}
.text-right {
text-align:right;
}
}