index.css

.row {margin:auto !important;}
.style-clear-float { clear: both;}
.style-text-left { text-align: left;}
.style-text-right { text-align: right;}
.style-text-center { text-align: center;}
.style-text-center-middle{ text-align: center; vertical-align: middle; /* fallback for non-Flexbox browsers */ display: inline-block; /* Flexbox browsers */ display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; /* vertical centering for legacy, horizontal centering for modern */ -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; /* modern Flexbox only */ -ms-flex-align: center; -webkit-align-items: center; align-items: center; /* legacy Flexbox only */ -webkit-box-orient: vertical; -moz-box-orient: vertical;}
.style-text-middle { vertical-align: middle; /* fallback for non-Flexbox browsers */ display: inline-block; /* Flexbox browsers */ display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; /* vertical centering for legacy, horizontal centering for modern */ -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center;                                                           /* modern Flexbox only */ -ms-flex-align: center; -webkit-align-items: center; align-items: center;/* legacy Flexbox only */ -webkit-box-orient: vertical; -moz-box-orient: vertical;}

.style-border-bottom {border-bottom: 1px solid #e5e5e5;}

.style-fullw      { width: 100%; }
.style-fullh      { height: 100%;}
.style-fullwh     { width: 100%; height: 100%;}
.style-right      { float: right; }
.style-left       { float: left; }

.style-position-relative {position: relative;}
.style-position-absolute {position: absolute;}

.style-hidden     { display: none;}
.style-color-black { color: black;}
.style-color-black2 { color: #222222;}
.style-color-blue { color: blue;}
.style-color-blue2 { color: #496892;}
.style-color-red  { color: red;}
.style-color-gray { color: gray;}
.style-color-green{ color: green;}
.style-color-yello{ color: yellow;}
.style-color-banana{color: #74b1be;}
.style-color-white{color: white;}


.style-bg-gray3   {background:#f0f0f0;}
.style-bg-gray2   {background:#2b2e3b;}
.style-bg-gray    {background:gray   ;}
.style-bg-white   {background:white  ;}
.style-bg-green   {background:green  ;}
.style-bg-orange  {background:orange ;}
.style-bg-black   {background:black  ;}
.style-bg-black-nc{background:#1a1b23;}

.style-border-1px-gray {border: 1px solid gray}

.style-bold       {font-weight: bold;}


.style-fontsize-1    { font-size: 1px; }
.style-fontsize-2    { font-size: 2px; }
.style-fontsize-3    { font-size: 3px; }
.style-fontsize-4    { font-size: 4px; }
.style-fontsize-5    { font-size: 5px; }
.style-fontsize-6    { font-size: 6px; }
.style-fontsize-7    { font-size: 7px; }
.style-fontsize-8    { font-size: 8px; }
.style-fontsize-9    { font-size: 9px; }
.style-fontsize-10   { font-size: 10px; }
.style-fontsize-11   { font-size: 11px; }
.style-fontsize-12   { font-size: 12px; }
.style-fontsize-13   { font-size: 13px; }
.style-fontsize-14   { font-size: 14px; }
.style-fontsize-15   { font-size: 15px; }
.style-fontsize-16   { font-size: 16px; }
.style-fontsize-17   { font-size: 17px; }
.style-fontsize-18   { font-size: 18px; }
.style-fontsize-19   { font-size: 19px; }
.style-fontsize-20   { font-size: 20px; }
.style-fontsize-21   { font-size: 21px; }
.style-fontsize-22   { font-size: 22px; }
.style-fontsize-23   { font-size: 23px; }
.style-fontsize-24   { font-size: 24px; }
.style-fontsize-25   { font-size: 25px; }
.style-fontsize-26   { font-size: 26px; }
.style-fontsize-27   { font-size: 27px; }
.style-fontsize-28   { font-size: 28px; }
.style-fontsize-29   { font-size: 29px; }
.style-fontsize-30   { font-size: 30px; }
.style-fontsize-31   { font-size: 31px; }
.style-fontsize-32   { font-size: 32px; }
.style-fontsize-33   { font-size: 33px; }
.style-fontsize-34   { font-size: 34px; }
.style-fontsize-35   { font-size: 35px; }
.style-fontsize-36   { font-size: 36px; }
.style-fontsize-37   { font-size: 37px; }
.style-fontsize-38   { font-size: 38px; }
.style-fontsize-39   { font-size: 39px; }
.style-fontsize-40   { font-size: 40px; }
.style-fontsize-41   { font-size: 41px; }
.style-fontsize-42   { font-size: 42px; }
.style-fontsize-43   { font-size: 43px; }
.style-fontsize-44   { font-size: 44px; }
.style-fontsize-45   { font-size: 45px; }
.style-fontsize-46   { font-size: 46px; }
.style-fontsize-47   { font-size: 47px; }
.style-fontsize-48   { font-size: 48px; }
.style-fontsize-49   { font-size: 49px; }

/* image fit inside a box */
.style-box img    { max-width: 100%;  max-height: 100%;width: auto;height: auto;display: block;}
.style-box-100    { width: 100px; height: 100px;}
.style-box-100    { width: 100px; height: 100px;}
.style-box-150    { width: 150px; height: 150px;}
.style-box-200    { width: 200px; height: 200px;}
.style-box-250    { width: 250px; height: 250px;}
.style-box-300    { width: 300px; height: 300px;}
.style-box-350    { width: 350px; height: 350px;}
.style-box-400    { width: 400px; height: 400px;}
.style-box-450    { width: 450px; height: 450px;}
.style-box-500    { width: 500px; height: 500px;}
.style-box-550    { width: 550px; height: 550px;}
.style-box-600    { width: 600px; height: 600px;}
.style-box-650    { width: 650px; height: 650px;}
.style-box-max-100{ max-width: 100px; max-height: 100px;}
.style-box-max-150{ max-width: 150px; max-height: 150px;}
.style-box-max-200{ max-width: 200px; max-height: 200px;}
.style-box-max-250{ max-width: 250px; max-height: 250px;}
.style-box-max-300{ max-width: 300px; max-height: 300px;}
.style-box-max-350{ max-width: 350px; max-height: 350px;}
.style-box-max-400{ max-width: 400px; max-height: 400px;}
.style-box-max-450{ max-width: 450px; max-height: 450px;}
.style-box-max-500{ max-width: 500px; max-height: 500px;}
.style-box-max-550{ max-width: 550px; max-height: 550px;}
.style-box-max-600{ max-width: 600px; max-height: 600px;}
.style-box-max-650{ max-width: 650px; max-height: 650px;}

.style-width-10   { width: 10px;} 
.style-width-20   { width: 20px;} 
.style-width-30   { width: 30px;} 
.style-width-50   { width: 50px;} 
.style-width-100  { width: 100px;} 
.style-width-120  { width: 120px;} 
.style-width-150  { width: 150px;} 
.style-width-200  { width: 200px;} 
.style-width-250  { width: 250px;} 
.style-width-300  { width: 300px;} 
.style-width-350  { width: 350px;} 
.style-width-400  { width: 400px;} 
.style-width-450  { width: 450px;} 
.style-width-500  { width: 500px;} 
.style-width-550  { width: 550px;} 
.style-width-600  { width: 600px;} 
.style-width-650  { width: 650px;} 
.style-width-700  { width: 700px;} 
.style-width-750  { width: 750px;} 
.style-width-800  { width: 800px;} 
.style-width-850  { width: 850px;} 
.style-width-900  { width: 900px;} 
.style-width-950  { width: 950px;} 
.style-width-1000 { width: 1000px;} 

.style-height-10  { height: 10px;} 
.style-height-20  { height: 20px;} 
.style-height-30  { height: 30px;} 
.style-height-50  { height: 50px;} 
.style-height-80  { height: 80px;} 
.style-height-100 { height: 100px;} 
.style-height-150 { height: 150px;} 
.style-height-200 { height: 200px;} 
.style-height-250 { height: 250px;} 
.style-height-300 { height: 300px;} 
.style-height-350 { height: 350px;} 
.style-height-400 { height: 400px;} 
.style-height-450 { height: 450px;} 
.style-height-500 { height: 500px;} 
.style-height-550 { height: 550px;} 
.style-height-600 { height: 600px;} 
.style-height-650 { height: 650px;} 
.style-height-700 { height: 700px;} 
.style-height-750 { height: 750px;} 
.style-height-800 { height: 800px;} 
.style-height-850 { height: 850px;} 
.style-height-900 { height: 900px;} 
.style-height-950 { height: 950px;} 
.style-height-1000{ height: 1000px;} 

.style-max-width-10   { max-width: 10px;} 
.style-max-width-20   { max-width: 20px;} 
.style-max-width-30   { max-width: 30px;} 
.style-max-width-50   { max-width: 50px;} 
.style-max-width-80   { max-width: 80px;} 
.style-max-width-100  { max-width: 100px;} 
.style-max-width-120  { max-width: 120px;} 
.style-max-width-150  { max-width: 150px;} 
.style-max-width-200  { max-width: 200px;} 
.style-max-width-250  { max-width: 250px;} 
.style-max-width-300  { max-width: 300px;} 
.style-max-width-350  { max-width: 350px;} 
.style-max-width-400  { max-width: 400px;} 
.style-max-width-450  { max-width: 450px;} 
.style-max-width-500  { max-width: 500px;} 
.style-max-width-550  { max-width: 550px;} 
.style-max-width-600  { max-width: 600px;} 
.style-max-width-650  { max-width: 650px;} 
.style-max-width-700  { max-width: 700px;} 
.style-max-width-750  { max-width: 750px;} 
.style-max-width-800  { max-width: 800px;} 
.style-max-width-850  { max-width: 850px;} 
.style-max-width-900  { max-width: 900px;} 
.style-max-width-950  { max-width: 950px;} 
.style-max-width-1000 { max-width: 1000px;} 

.style-max-height-10  { max-height: 10px;  } 
.style-max-height-20  { max-height: 20px;  } 
.style-max-height-30  { max-height: 30px;  } 
.style-max-height-50  { max-height: 50px;  } 
.style-max-height-100 { max-height: 100px; } 
.style-max-height-150 { max-height: 150px; } 
.style-max-height-200 { max-height: 200px; } 
.style-max-height-250 { max-height: 250px; } 
.style-max-height-300 { max-height: 300px; } 
.style-max-height-350 { max-height: 350px; } 
.style-max-height-400 { max-height: 400px; } 
.style-max-height-450 { max-height: 450px; } 
.style-max-height-500 { max-height: 500px; } 
.style-max-height-550 { max-height: 550px; } 
.style-max-height-600 { max-height: 600px; } 
.style-max-height-650 { max-height: 650px; } 
.style-max-height-700 { max-height: 700px; } 
.style-max-height-750 { max-height: 750px; } 
.style-max-height-800 { max-height: 800px; } 
.style-max-height-850 { max-height: 850px; } 
.style-max-height-900 { max-height: 900px; } 
.style-max-height-950 { max-height: 950px; } 
.style-max-height-1000{ max-height: 1000px;} 

.style-min-width-10   { min-width: 10px;} 
.style-min-width-20   { min-width: 20px;} 
.style-min-width-30   { min-width: 30px;} 
.style-min-width-50   { min-width: 50px;} 
.style-min-width-80   { min-width: 80px;} 
.style-min-width-100  { min-width: 100px;} 
.style-min-width-120  { min-width: 120px;} 
.style-min-width-150  { min-width: 150px;} 
.style-min-width-200  { min-width: 200px;} 
.style-min-width-250  { min-width: 250px;} 
.style-min-width-300  { min-width: 300px;} 
.style-min-width-350  { min-width: 350px;} 
.style-min-width-400  { min-width: 400px;} 
.style-min-width-450  { min-width: 450px;} 
.style-min-width-500  { min-width: 500px;} 
.style-min-width-550  { min-width: 550px;} 
.style-min-width-600  { min-width: 600px;} 
.style-min-width-650  { min-width: 650px;} 
.style-min-width-700  { min-width: 700px;} 
.style-min-width-750  { min-width: 750px;} 
.style-min-width-800  { min-width: 800px;} 
.style-min-width-850  { min-width: 850px;} 
.style-min-width-900  { min-width: 900px;} 
.style-min-width-950  { min-width: 950px;} 
.style-min-width-1000 { min-width: 1000px;} 

.style-min-height-10  { min-height: 10px;  } 
.style-min-height-20  { min-height: 20px;  } 
.style-min-height-30  { min-height: 30px;  } 
.style-min-height-50  { min-height: 50px;  } 
.style-min-height-100 { min-height: 100px; } 
.style-min-height-150 { min-height: 150px; } 
.style-min-height-200 { min-height: 200px; } 
.style-min-height-250 { min-height: 250px; } 
.style-min-height-300 { min-height: 300px; } 
.style-min-height-350 { min-height: 350px; } 
.style-min-height-400 { min-height: 400px; } 
.style-min-height-450 { min-height: 450px; } 
.style-min-height-500 { min-height: 500px; } 
.style-min-height-550 { min-height: 550px; } 
.style-min-height-600 { min-height: 600px; } 
.style-min-height-650 { min-height: 650px; } 
.style-min-height-700 { min-height: 700px; } 
.style-min-height-750 { min-height: 750px; } 
.style-min-height-800 { min-height: 800px; } 
.style-min-height-850 { min-height: 850px; } 
.style-min-height-900 { min-height: 900px; } 
.style-min-height-950 { min-height: 950px; } 
.style-min-height-1000{ min-height: 1000px;} 

.style-h-10-pc    { height: 10%;} 
.style-h-20-pc    { height: 20%;} 
.style-h-30-pc    { height: 30%;} 
.style-h-50-pc    { height: 50%;} 
                
.style-w-10-pc    { width: 10%;} 
.style-w-20-pc    { width: 20%;} 
.style-w-30-pc    { width: 30%;} 
.style-w-50-pc    { width: 50%;} 
.style-w-90-pc    { width: 90%;} 
.style-w-100-pc   { width: 100%;} 

.style-hm-150     { min-height: 150px;} 

.style-margin-5  { margin: 5px;} 
.style-margin-10 { margin: 10px;} 
.style-margin-20 { margin: 20px;} 
.style-margin-30 { margin: 30px;} 
.style-margin-50 { margin: 50px;} 
.style-margin-100{ margin: 100px;} 
.style-margin-150{ margin: 150px;} 
.style-margin-200{ margin: 200px;} 
.style-margin-250{ margin: 250px;} 
.style-margin-300{ margin: 300px;} 
.style-margin-350{ margin: 350px;} 
.style-margin-400{ margin: 400px;} 
.style-margin-450{ margin: 450px;} 
.style-margin-500{ margin: 500px;} 

.style-margin-left-5  { margin-left: 5px;} 
.style-margin-left-10 { margin-left: 10px;} 
.style-margin-left-20 { margin-left: 20px;} 
.style-margin-left-30 { margin-left: 30px;} 
.style-margin-left-50 { margin-left: 50px;} 
.style-margin-left-100{ margin-left: 100px;} 
.style-margin-left-150{ margin-left: 150px;} 
.style-margin-left-200{ margin-left: 200px;} 
.style-margin-left-250{ margin-left: 250px;} 
.style-margin-left-300{ margin-left: 300px;} 
.style-margin-left-350{ margin-left: 350px;} 
.style-margin-left-400{ margin-left: 400px;} 
.style-margin-left-450{ margin-left: 450px;} 
.style-margin-left-500{ margin-left: 500px;} 

.style-margin-right-5  { margin-right: 5px;} 
.style-margin-right-10 { margin-right: 10px;} 
.style-margin-right-20 { margin-right: 20px;} 
.style-margin-right-30 { margin-right: 30px;} 
.style-margin-right-50 { margin-right: 50px;} 
.style-margin-right-100{ margin-right: 100px;} 
.style-margin-right-150{ margin-right: 150px;} 
.style-margin-right-200{ margin-right: 200px;} 
.style-margin-right-250{ margin-right: 250px;} 
.style-margin-right-300{ margin-right: 300px;} 
.style-margin-right-350{ margin-right: 350px;} 
.style-margin-right-400{ margin-right: 400px;} 
.style-margin-right-450{ margin-right: 450px;} 
.style-margin-right-500{ margin-right: 500px;} 

.style-margin-top-5  { margin-top: 5px;} 
.style-margin-top-10 { margin-top: 10px;} 
.style-margin-top-20 { margin-top: 20px;} 
.style-margin-top-30 { margin-top: 30px;} 
.style-margin-top-50 { margin-top: 50px;} 
.style-margin-top-100{ margin-top: 100px;} 
.style-margin-top-150{ margin-top: 150px;} 
.style-margin-top-200{ margin-top: 200px;} 
.style-margin-top-250{ margin-top: 250px;} 
.style-margin-top-300{ margin-top: 300px;} 
.style-margin-top-350{ margin-top: 350px;} 
.style-margin-top-400{ margin-top: 400px;} 
.style-margin-top-450{ margin-top: 450px;} 
.style-margin-top-500{ margin-top: 500px;} 

.style-margin-bottom-5  { margin-bottom: 5px;} 
.style-margin-bottom-10 { margin-bottom: 10px;} 
.style-margin-bottom-20 { margin-bottom: 20px;} 
.style-margin-bottom-30 { margin-bottom: 30px;} 
.style-margin-bottom-50 { margin-bottom: 50px;} 
.style-margin-bottom-100{ margin-bottom: 100px;} 
.style-margin-bottom-150{ margin-bottom: 150px;} 
.style-margin-bottom-200{ margin-bottom: 200px;} 
.style-margin-bottom-250{ margin-bottom: 250px;} 
.style-margin-bottom-300{ margin-bottom: 300px;} 
.style-margin-bottom-350{ margin-bottom: 350px;} 
.style-margin-bottom-400{ margin-bottom: 400px;} 
.style-margin-bottom-450{ margin-bottom: 450px;} 
.style-margin-bottom-500{ margin-bottom: 500px;} 

.style-padding-5  { padding: 5px;} 
.style-padding-10 { padding: 10px;} 
.style-padding-20 { padding: 20px;} 
.style-padding-30 { padding: 30px;} 
.style-padding-50 { padding: 50px;} 
.style-padding-100{ padding: 100px;} 
.style-padding-150{ padding: 150px;} 
.style-padding-200{ padding: 200px;} 
.style-padding-250{ padding: 250px;} 
.style-padding-300{ padding: 300px;} 
.style-padding-350{ padding: 350px;} 
.style-padding-400{ padding: 400px;} 
.style-padding-450{ padding: 450px;} 
.style-padding-500{ padding: 500px;} 


.style-padding-left-5  { padding-left: 5px;} 
.style-padding-left-10 { padding-left: 10px;} 
.style-padding-left-20 { padding-left: 20px;} 
.style-padding-left-30 { padding-left: 30px;} 
.style-padding-left-50 { padding-left: 50px;} 
.style-padding-left-100{ padding-left: 100px;} 
.style-padding-left-150{ padding-left: 150px;} 
.style-padding-left-200{ padding-left: 200px;} 
.style-padding-left-250{ padding-left: 250px;} 
.style-padding-left-300{ padding-left: 300px;} 
.style-padding-left-350{ padding-left: 350px;} 
.style-padding-left-400{ padding-left: 400px;} 
.style-padding-left-450{ padding-left: 450px;} 
.style-padding-left-500{ padding-left: 500px;} 

.style-padding-right-5  { padding-right: 5px;} 
.style-padding-right-10 { padding-right: 10px;} 
.style-padding-right-20 { padding-right: 20px;} 
.style-padding-right-30 { padding-right: 30px;} 
.style-padding-right-50 { padding-right: 50px;} 
.style-padding-right-100{ padding-right: 100px;} 
.style-padding-right-150{ padding-right: 150px;} 
.style-padding-right-200{ padding-right: 200px;} 
.style-padding-right-250{ padding-right: 250px;} 
.style-padding-right-300{ padding-right: 300px;} 
.style-padding-right-350{ padding-right: 350px;} 
.style-padding-right-400{ padding-right: 400px;} 
.style-padding-right-450{ padding-right: 450px;} 
.style-padding-right-500{ padding-right: 500px;} 

.style-padding-top-5  { padding-top: 5px;} 
.style-padding-top-10 { padding-top: 10px;} 
.style-padding-top-20 { padding-top: 20px;} 
.style-padding-top-30 { padding-top: 30px;} 
.style-padding-top-50 { padding-top: 50px;} 
.style-padding-top-100{ padding-top: 100px;} 
.style-padding-top-150{ padding-top: 150px;} 
.style-padding-top-200{ padding-top: 200px;} 
.style-padding-top-250{ padding-top: 250px;} 
.style-padding-top-300{ padding-top: 300px;} 
.style-padding-top-350{ padding-top: 350px;} 
.style-padding-top-400{ padding-top: 400px;} 
.style-padding-top-450{ padding-top: 450px;} 
.style-padding-top-500{ padding-top: 500px;} 

.style-padding-bottom-5  { padding-bottom: 5px;} 
.style-padding-bottom-10 { padding-bottom: 10px;} 
.style-padding-bottom-20 { padding-bottom: 20px;} 
.style-padding-bottom-30 { padding-bottom: 30px;} 
.style-padding-bottom-50 { padding-bottom: 50px;} 
.style-padding-bottom-100{ padding-bottom: 100px;} 
.style-padding-bottom-150{ padding-bottom: 150px;} 
.style-padding-bottom-200{ padding-bottom: 200px;} 
.style-padding-bottom-250{ padding-bottom: 250px;} 
.style-padding-bottom-300{ padding-bottom: 300px;} 
.style-padding-bottom-350{ padding-bottom: 350px;} 
.style-padding-bottom-400{ padding-bottom: 400px;} 
.style-padding-bottom-450{ padding-bottom: 450px;} 
.style-padding-bottom-500{ padding-bottom: 500px;} 
    
.button {
  background-color: #82E0AA;
  border: none;
  color: white;
  padding-top: 15px;
  -text-align: center;
  -text-decoration: none;
  -display: inline-block;
  margin: 4px 2px;
}

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

svg {
    display: block;
    width: 400px;
    margin: auto;
    margin-top: 50px;
}