/* reset */
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 {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {	border-collapse: collapse; border-spacing: 0;}

*{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
	position: relative;
}
/* @end */

:root {
    --blue: #5C8CFF;
	--white: #fff;
	--black: #000;
	--grey: #333;
	--dkgrey: #141414;
	--ltgrey: #e3e3e3;
}

html{
	font-family: 'Roboto', sans-serif;
	line-height: 1.2;
	font-weight:400;
	color:var(--white);
    background: var(--black);
	min-height: 100%;
}

body{
    min-height: 100%;
}

h1, h2, h3, h4, h5, h6{
    font-family: 'Poppins', sans-serif;
	font-weight:600;
	/* color: var(--blue); */
}

h1, .h1{font-size: 48px}
h2, .h2{font-size: 36px}
h3, .h3{font-size: 24px}
h4, .h4{font-size: 18px}
h5, .h5{font-size: 16px}
h6, .h6{font-size: 12px}

p {
    margin-bottom: 40px;
    line-height: 1.5;
    font-size: 1.3rem;
    font-weight: 300;
}

.blue-text{color:var(--blue);}
.yellow-text{color:#FAD548;}
.grey-text{color:var(--grey);}
.white-text{color: var(--white);}
.dkgrey{color: var(--dkgrey);}



.button {
    background: var(--blue);
    color: var(--white);
    height: 44px;
    display: inline-block;
    line-height: 44px;
    padding: 0 40px;
    border-radius: 100px;
    font-size: 18px;
    letter-spacing: 1px;
    transition: all .3s;
	cursor: pointer;
}

.btn-w {
    background: var(--white);
    color: #333;
}


.button:hover{
	background: var(--blue);
	color:var(--white);
}

main a {
    color: var(--grey);
    text-decoration: none;
}

.blue{color: var(--blue)!important}
.white{color: var(--white);}

.bold, strong, b{font-weight: 700;}

.light{font-weight: 300!important;}

.row{clear: both; overflow: hidden;}
.contain{
	width: clamp(300px, 1024px, 1224px);
	margin: auto ;
}

main .contain {
    width: min(800px, 70%);
    margin: auto;
}

.mauto{
    display: block;
    margin: auto;
}
.center-content {
    display: flex;
    justify-content: space-evenly;
}
.text-left{text-align: left;}
.text-right{text-align: right;}
.text-center{text-align: center;}
.pull-left{float:left;}
.pull-right{float: right;}
.no-show{display: none!important;}
.no-scroll {
    overflow: hidden;
}

.wrapper{
    max-width: 1024px;
    margin:auto;
}

@media only screen and (max-width: 1400px) {
	.contain{ max-width: 1024px; margin:auto; padding: 0 40px}
}

@media only screen and (max-width: 769px) {
	.contain{ max-width: 100%; margin:auto; padding: 20px}
}

/* Transform */
.flip{transform: rotateY(180deg);}


/* Padding */

.bottom-xs{margin-bottom:10px}
.bottom-s{margin-bottom:20px}
.bottom-m{margin-bottom:30px}
.bottom-l{margin-bottom:40px}
.bottom-xl{margin-bottom:60px}

.top-xs{margin-top:10px}
.top-s{margin-top:20px}
.top-m{margin-top:30px}
.top-l{margin-top:40px}
.top-xl{margin-top:60px}

.left-xs{margin-left:10px}
.left-s{margin-left:20px}
.left-m{margin-left:30px}
.left-l{margin-left:40px}
.left-xl{margin-left:60px}

.right-xs{margin-right:10px}
.right-s{margin-right:20px}
.right-m{margin-right:30px}
.right-l{margin-right:40px}
.right-xl{margin-right:60px}

.pad-all-s{padding:20px}
.pad-all-m{padding:30px}
.pad-all-l{padding:40px}
.pad-all-xl{padding:50px}

.pad-left-xs{padding-left:10px}
.pad-left-s{padding-left:20px}
.pad-left-m{padding-left:30px}
.pad-left-l{padding-left:40px}
.pad-left-xl{padding-left:50px}

.pad-right-s{padding-right:20px}
.pad-right-m{padding-right:30px}
.pad-right-l{padding-right:40px}
.pad-right-xl{padding-right:50px}

.pad-top-s{padding-top:20px}
.pad-top-m{padding-top:30px}
.pad-top-l{padding-top:40px}
.pad-top-xl{padding-top:50px}

.pad-bottom-s{padding-bottom:20px}
.pad-bottom-m{padding-bottom:30px}
.pad-bottom-l{padding-bottom:40px}
.pad-bottom-xl{padding-bottom:50px}

/* ------- Flex --------*/

.flex-row	{flex-direction: row;}
.flex-row-reverse	{flex-direction: row-reverse;}
.flex-col	{flex-direction: column;}
.flex-col-reverse	{flex-direction: column-reverse;}

/* ----- Grid -------*/

.grid-cols-1	{grid-template-columns: repeat(1, minmax(0, 1fr));}
.grid-cols-2	{grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid-cols-3	{grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid-cols-4	{grid-template-columns: repeat(4, minmax(0, 1fr));}
.grid-cols-5	{grid-template-columns: repeat(5, minmax(0, 1fr));}
.grid-cols-6	{grid-template-columns: repeat(6, minmax(0, 1fr));}
.grid-cols-7	{grid-template-columns: repeat(7, minmax(0, 1fr));}
.grid-cols-8	{grid-template-columns: repeat(8, minmax(0, 1fr));}
.grid-cols-9	{grid-template-columns: repeat(9, minmax(0, 1fr));}
.grid-cols-10 {grid-template-columns: repeat(10, minmax(0, 1fr));}
.grid-cols-11 {grid-template-columns: repeat(11, minmax(0, 1fr));}
.grid-cols-12 {grid-template-columns: repeat(12, minmax(0, 1fr));}
.grid-cols-none	{grid-template-columns: none;}


/*Icons*/
i[class^="icon-"] {
    height: 3vw;
    width: 3vw;
    display: inline-block;
    border: 1px solid;
}


/* For desktop: */
.col-1  {width: 8.33%;}
.col-2  {width: 16.66%;}
.col-3  {width: 25%;}
.col-4  {width: 33.33%;}
.col-5  {width: 41.66%;}
.col-6  {width: 50%;}
.col-7  {width: 58.33%;}
.col-8  {width: 66.66%;}
.col-9 	{width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.offset-1  {left: 8.33%;}
.offset-2  {left: 16.66%;}
.offset-3  {left: 25%;}
.offset-4  {left: 33.33%;}
.offset-5  {left: 41.66%;}
.offset-6  {left: 50%;}
.offset-7  {left: 58.33%;}
.offset-8  {left: 66.66%;}
.offset-9  {left: 75%;}
.offset-10 {left: 83.33%;}
.offset-11 {left: 91.66%;}
.offset-12 {left: 100%;}


.lc{text-transform: lowercase;}
.uc{text-transform: uppercase;}
.ctr{text-align: center;}
/* .center{margin: auto;} */
.clear{clear: both;}
.clear-o{overflow: hidden;}
.pull-left{float: left;}
.pull-right{float: right!important;}
.flex{display:flex;}
.fullw {width: 100%;}
.block{display: block;}
.flex-column{flex-direction:column;}
.flex-column-reverse{flex-direction:column-reverse;}
.flex-row{flex-direction:row;}
.flex-row-reverse{flex-direction:row-reverse;}
.justify-center{justify-content: center;}
.align-center{align-items:center}
.justify-vertical{flex-direction: column;}

@media only screen and (min-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        float: left;
    }
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}