

body{
	
	margin: auto;
	background-color:white;
	color:#555555;
	font-family: "Montserrat", sans-serif;
}
* {
  box-sizing: border-box;
}
.light{
	background-color:white;
	color:#333333;
}
.dark{
background-color:black;
	color:#ffffff;
	}

/* Style the header */
.header {
  
  padding: 30px;
  text-align: center;
  
}

/* Container for flexboxes */
.row {
  display: -webkit-flex;
  display: flex;
}

/* Create three unequal columns that sits next to each other */
.column {
  padding: 15px 5px;
  margin: 1px;
  
}

/* Left and right column */
.column.side {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
   
}

/* Middle column */
.column.middle {
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  
}

.footer {
	margin-top:50px;
	padding: 10px;
	/*text-align: center;
	background-image:url(https://resizeimages.xyz/img/ft-bg-clear.png); 
	background-repeat: no-repeat;
	background-size: cover;*/
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 900px) {
  .row {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
/* colors*/
.myorange{
	color:#ffa500;
	}
.mygreen{
	color:#04c518;
}
.mypink{
	color:#c90890;
}
.myviolet{
	color:#943ff5;
}
.mylight-gry{
	color:#999999;
}
/* font styling */
p {
  
  font-weight:300;
  /*text-align: center;*/
}
.fontL{
	line-height:25px;
	font-size:18px;
	
}
.fontS{ font-size:0.9em}
h1 {
  font-size: 4.5vw;
  text-align: center;
  
  font-weight: 1200;
}
@media (max-width: 800px) {
  h1 {font-size: 9.2vw;}
}

@media (max-width: 600px){
	h3{font-size: 4vw;}
}

/*canvas{ 
margin-top:5px;
display:block;
margin-left:auto;
margin-right:auto;
}*/
.s2{
	/* section background image
	background-image:url(https://resizeimages.xyz/img/bg1-clear.png); 
	background-repeat: no-repeat;
	background-size: cover;*/
}

.txt-cent{
	text-align: center;
}

.border {
  border: 1px solid #eee;
  border-radius: 4px;
  
}
.centC {
  display: block;
  margin: auto;
  
}  
.margTop-L{
	margin-top:50px;
}
@media (max-width: 800px){
.opaque{ background-color:rgba(0, 0, 0, 0.1);}
}



.mydiv {
  
  display: block;
  margin: auto;
  max-width:950px;
  padding: 10px;
  
}
.results{ 
	background-color:white;
	color:black;
	margin-top: 20px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	max-width: 800px;
	padding: 10px;
	text-align: center;
}
img {
	
	display: block;
	width: 100%;
	max-width: 400px;
	margin:30px auto;
	;
  
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.blankimg{
	
	margin: auto;
	max-width: 500px;
	
	
	box-shadow:none;
}


.inputbox{
	padding:5px 20px;
	font-size:1.5em;
	border: 1px solid #aaa;
	border-radius: 4px;
	/*box-shadow: 0 4px 10px 0 rgb(133, 106, 247), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
	max-width: 500px;
	width:100%;
  
}
.themebtn{
	background-color: #ce0487; /*button color*/

  color: white;
  padding: 5px 10px;
  margin-top: 15px;
  margin-bottom: 15px;
  max-width: 200px;
	border:none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  
}
.themebtn:hover {
  background-color: #7f04b8;
}
.ButtonEffect {
  background-color: #ffa500; /*button color*/

  color: white;
  padding: 10px;
  margin-top: 15px;
  margin-bottom: 15px;
  text-decoration: none;
  max-width: 350px;
font-weight:600;
font-size:1.3em;
border:none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.ButtonEffect:hover {
  background-color: #ed4402;
}



.fileselect{
	display:none;
}
.slider {
  margin-top: 20px;
  margin-bottom: 20px;
  -webkit-appearance: none;
  border-radius: 5px;
  width: 100%;
  max-width: 600px;
  height: 30px;
  background: #b2adee;
  outline: none;

  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.slider:hover {
  opacity: 0.8;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 50px;
  background: #555555;
  cursor: pointer;
  border-radius: 5px;
}

.slider::-moz-range-thumb {
  width: 30px;
  height: 50px;
  background: #555555;
  cursor: pointer;
}