body {
  /*padding: 0;*/
  padding-top:0;
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
  margin-top:0;
  margin-bottom:0;
  margin-left:0;
  margin-right:0;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  /*width: 900px;*/
  /*width: 80%;*/
  margin: 0 auto;
  font-family: Helvetica, Arial, sans-serif;
  /*background-color: red;*/
}

/* -- SPLASH CONTAINER - */
.SplashContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  /*max-width: 80vw;*/
  height: auto;
  /*background-color: red;*/
}

.SplashContainer h1 {
  /*margin-top: 5vh;*/
  font-size: 40px;
  margin: 0px;
  margin-top: 50px;
  margin-bottom: 20px;
}

.SplashContainer h2 {
  font-size: 23px;
  font-weight: normal;
  margin: 0px;
  margin-bottom: 45px ;
  line-height: 30px;
}


.SplashContainer div {
  /*width: 100%;*/
  /*max-width: 800px;*/
  /*max-width: 80vw;*/
  /*height: auto;*/
}

.SplashContainer div img {
  /*display: flex;*/
  width: 100%;
  max-width: 55vw;
  height: auto;
}





/* -- UPLOAD CONTAINER - */
.UploadContainer {
  text-align: center;
  padding: 20px 0;
  /*border: 1px solid red;*/
}
.UploadContainer #button {
  width: 300px;
  height: 300px;
  /*background-color: red;*/
  /*border: 5px solid red;*/
}


/* -- FILTER CONTAINER - */
.FilterContainer {
  display: flex;
  position: relative;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
#FilterCanvas canvas {
  position: relative;
  background: red;
  width: 300px;
  height: 300px;
  display:none;
  /*border: 1px solid blue;*/
}
.FilterContainer #button {
  width: 300px;
  height: 50px;
}

a {
  color: #4166B5;
  text-decoration: none;
}





/* - SAVECANVAS - */


h2, form {
  text-align: center;
}
form {
  margin-top: 5px;
}
.input {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  display: block;
  /*border: 5px solid red;*/
}
#canvas {
  cursor: crosshair;
  /*margin-bottom: 20px;*/
}
#canvas, #html {
  border: 1px solid #000;
}
.filename {
  text-align: right;
}
#html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  overflow: auto;
  padding: 1em;
}




/* -  BODY -  */



.wrapper{
  width: 55vw;
  height: auto;
  /*background-color: red;*/
  margin: 0 auto;
  margin-top: 20px;
  /*text-align: center;*/
}

.wrapper h1{
  font-size: 19px;
  margin: 0px;
}

.wrapper .countries{
  width: 42vw;
  height: auto;
  margin: 0 auto;
  font-size: 15px;
    /*margin-top: 40px;*/
}


.wrapper .countries a{
  text-decoration: none;
  color: blue;
}

.wrapper .countries a:hover {
  border-bottom: 1px solid blue;
}


.wrapper .countries p span{
  font-weight: bold;
}

/*.wrapper li {
  list-style: none;

}*/

.social{
  width: 220px;
  height: 22px;
  margin: 0 auto;
  margin-top: 40px;
  /*background-color: gray;*/
  position: relative;
  left: 20px;

}

.social .facebook {
    width: 100px;
    height: 22px;
    /*background-color: orange;*/
    float: left;
}



.social .twitter {
    width: 120px;
    height: 22px;
    /*background-color: red;*/
    float: right;
}



.credits{
  text-align: center;
  margin-top: 15px;
  font-size: 13px;
  margin-bottom: 35px;
}

.credits a{
    text-decoration: none;
  color: blue;
}


.credits a:hover {
  border-bottom: 1px solid blue;
}



.mobilemessage{
  display: none;
}

.mobileModal{
  width:100%;
  height:100%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /*max-width:500px;*/
  /*max-height:500px;*/
  position:fixed;
  top:0%;
  left:0%;
  /*transform: translateX(-50%) translateY(-50%);*/
  /*-webkit-transform: translateX(-50%) translateY(-50%);*/
  /*-moz-transform: translateX(-50%) translateY(-50%);*/
  box-shadow: 1px 1px 4px hsl(0,0%,50%);
  background:white;
  text-align: center;
  display:none;
  padding-top: 80px;
}
.button{
  border: 1px solid grey;
  display: inline-block;
  padding: 5px 10px;
  height: 30px;
  line-height: 30px;
  cursor:pointer;
  margin: 10px auto;
}



/*  @media only screen 
  and (min-device-width : 375px) 
  and (max-device-width : 667px) 
  and (orientation : portrait) { 

    .mobilemessage{
        display: visible;
      width:100%;
      background-color: blue;
      height: 100px;
      height: 197px;
    }

    .title{
      font-size: 21px;
    }

  }


*/