/*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; }

li {
  box-sizing: border-box; }

/*end of reset*/


html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #F7F6F0;
}

body {
  height: 100vh;
}

html, body {
  font-size: 10px; }

body, a {
  margin: 0 auto;
   }

a:hover, a:visited, a:focus {
   }

.page-container {
  height: 100%;
  background-image: url(../images/capitool-test.png);
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.logo {
  width: 240px;
  position: absolute;
  top: -53px;
  left: 0px;
  
}

.text-textarea-container {
  width: 75%;
  text-align: center;
  background-color: #f8f8f8;
  margin: auto;
  border-radius: 0px 10px 10px 10px;
  position: relative;
   -webkit-box-shadow: 0px 0px 50px 6px rgba(0, 0, 0, 0.4);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    0px 0px 50px 6px rgba(0, 0, 0, 0.4);  /* Firefox 3.5 - 3.6 */
  box-shadow:         0px 0px 50px 10px rgba(0, 0, 0, 0.4);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
  
}

.text-textarea-container textarea {
  width: 100%;
  color: #393636;
  font-size: 3.4em;
  font-weight: 700;
  background: none;
  border: none;
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  padding-top: 50px;
  padding-bottom: 10px;
}

.text-textarea-container textarea::placeholder {
  color: #807e7e;
}

.text-textarea-container textarea:focus {
  background-color: #eaeaea;
}


.madeByOot, a {
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1.4em;
  margin-bottom: 20px;

}





/* MEDIA QUERIES */

/* @media (min-width: 1300px) { */


@media (max-width: 1300px) and (min-width: 1100px) {

  .text-textarea-container textarea {
    font-size: 3.2em;
    padding-top: 50px;
    padding-bottom: 10px;
  }
  
  .text-textarea-container { 
    width: 85%;
  }
}

@media (max-width: 1100px) and (min-width: 500px) {

.text-textarea-container textarea {
  font-size: 3em;
  padding-top: 50px;
  padding-bottom: 45px;
}

  .text-textarea-container { 
    width: 85%;
    padding-left: 20px;
    padding-right: 20px;
  }
}




@media (max-width: 500px) {
  
  .text-textarea-container textarea {
  font-size: 3em;
  padding-top: 50px;
  padding-bottom: 90px;
}

  .text-textarea-container { 
    width: 85%;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  }

/* End of Media Queries */