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, font, 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, figure, figcaption { margin: 0; padding: 0; border: 0; outline: 0; }


html, body { margin:0; padding:0; line-height: 1.25em; }

body { letter-spacing:1px; margin: 0; padding: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; }

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0; line-height: 1.25; }
h1, h2, h3, h4 { color: #331; letter-spacing: 0px; }
p { font-size: 16px; } 
.darkgrey { color: #616164; }
a { text-decoration: none; }

sup { vertical-align: top; position: relative; }
sub { vertical-align: bottom; position: relative; bottom: -0.25em; }

.table { display: table; width: 100%; height: auto; }
.table.show { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }
.col-1 { width: 100%; }
.col-2 { width: 50%; }
.col-3 { width: 33%; }
.col-4 { width: 25%; }

.align-left { text-align: left !important; }
.align-right { text-align: right !important; }
.align-center { text-align: center !important; }
.align-top { vertical-align: top !important; padding-top:0; }
.align-bottom { vertical-align: bottom !important; padding-top:0; }
.align-middle { vertical-align: middle !important; }
.text-small, small { font-size: 12px; }
.box-border { border: 1px solid #000; }


/* Text */
.gray { color: grey; }
.blue { color: blue; }
.red { color: red; }
.pink { color: pink; }
.green { color: green; }
.blue { color: blue; }
.yellow { color: yellow; }
.green { color: green; }
.orange { color: orange; }
.white { color: #ffffff; }
.skyblue { color: skyblue; }

.bg-white { background: #ffffff; }
.bg-red { background: red; }
.bg-pink { background: pink; }
.bg-green { background: green; }
.bg-blue { background: blue; }
.bg-yellow { background: yellow; }
.bg-green { background: green; }
.bg-orange { background: orange; }
.bg-skyblue { background: skyblue; }
.bg-redlight { background: rgba(255, 0, 0, 0.2); }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
/* End Text */

.item-absolute { position: absolute; }
.item-relative { position: relative; }
.item-fixed { position: fixed; }

.item-block { display: block; }
.item-inline-lock { display: inline-block; }

.width-auto { width: auto; }
.width-50 { width: 50px; }
.width-100 { width: 100px; }
.width-200 { width: 200px; }

/* Flex */
.flex-container { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-container.flex-start { justify-content: flex-start; }
.flex-container.flex-end { justify-content: flex-end; }
.flex-container.flex-end { justify-content: flex-end; }
.flex-container.center { justify-content: center; }
.flex-container.space-between { justify-content: space-between; }
.flex-container.space-around { justify-content: space-around; }
.flex-container.space-evenly { justify-content: space-evenly; }
.flex-container.align-top { align-items: flex-start; }
.flex-container.align-center { align-items: center; }
.flex-container.align-bottom { align-items: flex-end; }
.flex-container.flex-start { align-items: flex-start; }
.flex-container.wrap { flex-wrap: wrap; }
.flex-container.flex-nowrap { flex-wrap: nowrap; }
.flex-container.wrap-reverse { flex-wrap: wrap-reverse; }

.box-flex-center { display: flex; justify-content: center; align-items: center; }

.rcorner-5 { border-radius: 5px; }
.rcorner-10 { border-radius: 10px; }
.rcorner-20 { border-radius: 20px; }
.circle { border-radius: 50%; }

.width-100 { width: 100%; }
.height-100 { height: 100%; }

.padding-4 { padding: 4px; }
.padding-5 { padding: 5px; }
.padding-6 { padding: 6px; }
.padding-10 { padding: 10px; }
.padding-20 { padding: 20px; }

.nowrap { white-space: nowrap; }
.show { display: block; }
.hide { display: none; }

.site-container { display: flex; flex-flow: row wrap; min-height: 100vh; align-content: space-between; position: relative;}
.site-container-bottom { width: 100%; }

ul.none-style li {list-style-type: none; }
p, ul li { color: #5d5d5d; }
ul.list-inline li { display: inline-block; }

.animation { position: relative; }
.icon { position: absolute; }

.btn, .btn-href { cursor: pointer; }
input[type=submit], button, .btn { -webkit-appearance: none; }

.disabled { pointer-events: none; cursor: default; }

.animated { 
	-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-ms-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.confirm-box.show { position: absolute; top: 0; left: 0; width: 100%; 
	animation: fadein 0.5s forwards;
	-webkit-animation: fadein 0.5s forwards; 
	-o-animation: fadein 0.5s forwards;  
	-moz-animation: fadein 0.5s forwards;  
	-ms-animation: fadein 0.5s forwards;  
}

.confirm-box.transitionOut {
	animation: fadeout 0.5s forwards;
	-webkit-animation: fadeout 0.5s forwards; 
	-o-animation: fadeout 0.5s forwards;  
	-moz-animation: fadeout 0.5s forwards;  
	-ms-animation: fadeout 0.5s forwards;  
}

.confirm-box.show, .confirm-box.transitionIn, .confirm-box.transitionOut { position: fixed; top: 50%; left:50%; background: #f3f3f3; width: 300px; height: 200px; margin-top: -100px; margin-left: -150px; text-align: center; cursor: pointer; border-radius: 20px; box-shadow: 2px 2px 10px #000; }
.confirm-box.transitionIn { opacity: 0; }
.confirm-box h3 { margin: 30px auto 10px; font-size: 18px; height: 100px; }
.confirm-box .btns { display: flex; flex-direction: row; justify-content: center;  }
.confirm-box .btns span { background: #cfd0d0; width: 100px; height: 30px; box-shadow: 2px 2px 5px #000; text-shadow: 1px 1px 2px #FFF; padding-top: 10px; }
.confirm-box .btns span.right { margin-left: 20px; }

.alert-box { position: fixed; top: 30%; left: 50%; width: 350px; height: auto; margin-left: -225px; padding: 50px; padding-bottom: 20px; background: #FFF; border-radius: 5px; box-shadow: 10px 10px 20px #d6d6d6; border: 2px solid #830052; z-index: 100; overflow: scroll; }
.alert-box h4 { color: #525656; font-weight: bold; margin-bottom: 10px; }
.alert-box p { color: #525656; }
.alert-box p.red { color: red; }
.alert-box .btn { color: #FFF; margin: 20px auto; width: 160px; font-size: 16px;  }
.alert-red  { color: red !important; }

.shadow-white { 
filter: drop-shadow(2px 2px 5px rgba(255,255,255,1));
-webkit-filter: drop-shadow(2px 2px 5px rgba(255,255,255,1));
-moz-filter: drop-shadow(2px 2px 5px rgba(255,255,255,1));
-ms-filter: drop-shadow(2px 2px 5px rgba(255,255,255,1));
-o-filter: drop-shadow(2px 2px 5px rgba(255,255,255,1)); 
}
.shadow-black { 
filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.6));
-webkit-filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.6));
-moz-filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.6));
-ms-filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.6));
-o-filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.6)); 
}

.loader { position: fixed; top: 50%; left: 50%; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; z-index: 5000; 
  -webkit-animation: fadein 1s;
  -moz-animation: fadein 1s;
  -ms-animation: fadein 1s;
  -o-animation: fadein 1s;
  animation: fadein 1s;
}
.loader .icon-loading { background: url(../images/icon-loading.svg) center center no-repeat; background-size: contain; width: 100px; height: 100px; }
.icon-loading {
  -webkit-animation: spinning 3s linear infinite;
  -moz-animation: spinning 3s linear infinite;
  -ms-animation: spinning 3s linear infinite;
  -o-animation: spinning 3s linear infinite;
  animation: spinning 3s linear infinite;
}
.loader.transitionOut, .transitionOut { opacity: 0;
  -webkit-animation: fadeout 1s;
  -moz-animation: fadeout 1s;
  -ms-animation: fadeout 1s;
  -o-animation: fadeout 1s;
  animation: fadeout 1s;
}
.transitionIn {
  -webkit-animation: fadein 1s;
  -moz-animation: fadein 1s;
  -ms-animation: fadein 1s;
  -o-animation: fadein 1s;
  animation: fadein 1s;
}

.btn-pointer, .btn-toggle {cursor:pointer;}

.device-touch { -webkit-overflow-scrolling: touch; }
.select-none { -webkit-user-select: none;  }

/* Collapse */
.btn-collapse { cursor: pointer; }
.data-collapse { height: auto; overflow: hidden; }
.data-collapse.collapsed { height: auto; }
.data-collapse .content { margin-top: -300px; display: block; height: 200px; overflow: hidden;
	-webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.05);
	-moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.05);
	-ms-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.05);
	transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.05);
}
.data-collapse.collapsed .content { margin-top: 0%; height: auto; }
/* End Collapse */

/* NAV */
.nav-container span { display: flex; justify-content: center; align-items: center; }
/* End Nav */

/* Contents */
.container { width: 100vw; position: relative; }
.container img { width: 100%; }
/* End Contents */

/* Popup Modal */
.box-model { z-index: 100; }
.box-model .bg-dark { position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); width: 100vw; height: 100vh; 
	-webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.25);
	-moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.25);
	-ms-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.25);
	transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.25);
}
.box-model .body-content { width: 300px; height: 300px; background: #FFF; position: fixed; left: 50%; margin-left: -150px;
  -webkit-animation: movedown 1s linear forwards;
  -moz-animation: movedown 1s linear forwards;
  -ms-animation: movedown 1s linear forwards;
  -o-animation: movedown 1s linear forwards;
  animation: movedown 1s linear forwards;
}
.box-model.transitionOut .body-content { top: 10%;
  -webkit-animation: moveup 1s linear forwards;
  -moz-animation: moveup 1s linear forwards;
  -ms-animation: moveup 1s linear forwards;
  -o-animation: moveup 1s linear forwards;
  animation: moveup 1s linear forwards;
}
.box-model.hide .bg-dark { opacity: 0; }
/* End Popup Modal */

/* Features */
.site-container .feature-container { width: 100%; }
.site-container .feature-container .cta-read-more { cursor: pointer; }
.site-container .feature-container .cta-read-more::after { content: "Read more"}
/* End Features */

/* Animation */
@keyframes fadeout {
  	0% { opacity: 1; }
  	100% { opacity: 0; }
}

@keyframes fadein {
  	0% { opacity: 0; }
  	100% { opacity: 1; }
}

@keyframes spinning {
    from { transform: rotateZ(0deg); }
    to { transform: rotateZ(360deg); }
}

@keyframes moveup {
  	100% { opacity: 0; top: -150%; }
}

@keyframes movedown {
  	0% { opacity: 0; top: -150%; }
  	100% { opacity: 1; top: 10%;}
}
/* End Animation */
/* Safari only */
@media not all and (min-resolution:.001dpcm) { 
	@supports (-webkit-appearance:none) {
		.image-container img { height: intrinsic; }
	}
}
/* End Safari */