@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');

body, html {
  height: 100%;
  margin: 0;
  font-family: 'Source Sans 3', sans-serif;
  font: 400 1.1rem "Source Sans 3", sans-serif;
  color: #221A2C;
  background-color: #FDFDFD;
}

p {
  line-height: 125%;
}

p.bold {
  font-weight: 600;
}

a {
  color: #221A2C;
  text-decoration: underline;
}

a.light {
  color: #fff;
  text-decoration: underline;
}

a.ua {
  font-family: 'Oswald', sans-serif;
}

a.some {
  text-decoration: none;
}

a:hover {
  color: #fff;
  text-decoration: underline;
}

a.light:hover {
  color: #fff;
  text-decoration: underline;
}

a.dark:hover {
  color: #000;
  text-decoration: none;
}

a:focus {
  color: #242038;
  text-decoration: underline;
}     

a.light:focus {
  color: #fff;
  text-decoration: underline;
}     

a.button {
  text-decoration: none;
}

a.button:hover {
  color: #242038;
  text-decoration: none;
}

a.button:focus {
  color: #242038;
  text-decoration: underline;
}

a.h4squared {
  color: #242038;
  text-decoration: none;
}

a.h4squared:hover {
  color: #242038;
  text-decoration: underline;
}   

a.h4squared:focus {
  color: #242038;
  text-decoration: underline;
}     

p.text-white {
  color: #fff;  
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Anton', Impact, sans-serif;
  color: #242038;
}

h1.ua, h2.ua, h3.ua, h4.ua, h5.ua, h6.ua {
  font-family: 'Oswald', sans-serif;
  color: #242038;
}

h1.color-white, h2.color-white, h3.color-white, h4.color-white, h5.color-white, h6.color-white, p.color-white {
  color: #fff;
}

h1.color-tearose, h2.color-tearose, h3.color-tearose, h4.color-tearose, h5.color-tearose, h6.color-tearose, p.color-tearose {
  color: #E2B1B1;
}

h1.color-vermillion, h2.color-vermillion, h3.color-vermillion, h4.color-vermillion, h5.color-vermillion, h6.color-vermillion, p.color-vermillion {
  color: #DC493A;
}

h1.color-sinopia, h2.color-sinopia, h3.color-sinopia, h4.color-sinopia, h5.color-sinopia, h6.color-sinopia, p.color-sinopia {
  color: #C73E1D;
}

h1.color-persimmon, h2.color-persimmon, h3.color-persimmon, h4.color-persimmon, h5.color-persimmon, h6.color-persimmon. p.color-persimmon {
  color: #EB6424;
}

h1.color-taupe, h2.color-taupe, h3.color-taupe, h4.color-taupe, h5.color-taupe, h6.color-taupe, p.color-taupe {
  color: #4A4238;
}

h1.color-lemoncurry, h2.color-lemoncurry, h3.color-lemoncurry, h4.color-lemoncurry, h5.color-lemoncurry, h6.color-lemoncurry, p.color-lemoncurry {
  color: #B69711;
}

h1.color-jonquil, h2.color-jonquil, h3.color-jonquil, h4.color-jonquil, h5.color-jonquil, h6.color-jonquil, p.color-jonquil {
  color: #F0C808;
}

h1.color-lightgreen, h2.color-lightgreen, h3.color-lightgreen, h4.color-lightgreen, h5.color-lightgreen, h6.color-lightgreen, p.color-persiangreen {
  color: #85FF9E;
}

h1.color-darkspringgreen, h2.color-darkspringgreen, h3.color-darkspringgreen, h4.color-darkspringgreen, h5.color-darkspringgreen, h6.color-darkspringgreen, p.color-persiangreen {
  color: #04724D;
}

h1.color-persiangreen, h2.color-persiangreen, h3.color-persiangreen, h4.color-persiangreen, h5.color-persiangreen, h6.color-persiangreen, p.color-persiangreen {
  color: #1B998B;
}

h1.color-columbiablue, h2.color-columbiablue, h3.color-columbiablue, h4.color-columbiablue, h5.color-columbiablue, h6.color-columbiablue, p.color-columbiablue {
  color: #CBE7FF;
}

h1.color-lapislazuli, h2.color-lapislazuli, h3.color-lapislazuli, h4.color-lapislazuli, h5.color-lapislazuli, h6.color-lapislazuli, p.color-lapislazuli {
  color: #33658A;
}

h1.color-darkpurpleblue, h2.color-darkpurpleblue, h3.color-darkpurpleblue, h4.color-darkpurpleblue, h5.color-darkpurpleblue, h6.color-darkpurpleblue, p.color-darkpurpleblue {
  color: #242038;
}

h1.color-eggplant, h2.color-eggplant, h3.color-eggplant, h4.color-eggplant, h5.color-eggplant, h6.color-eggplant, p.color-eggplant {
  color: #52414C;
}

h1.color-darkpurplered, h2.color-darkpurplered, h3.color-darkpurplered, h4.color-darkpurplered, h5.color-darkpurplered, h6.color-darkpurplered, p.color-darkpurplered {
  color: #30011E;
}

h1 {
  font-size: 8rem;
  line-height: 110%;
  color: #242038;
}

h1.squared {
  border: 15px solid #242038; 
  padding-left: 30px; 
  padding-right: 30px; 
  padding-top: 15px; 
  padding-bottom: 15px;
  text-align: center;
}

h1.squared.ua {
  padding-bottom: 30px;
}

@media only screen and (max-width: 1500px) {
  h1 {
    font-size: 7.5rem;
  }
  h1.squared {
    border: 14px solid #242038;
  }
}

@media only screen and (max-width: 1200px) {
  h1 {
    font-size: 6.9rem;
  }
  h1.squared {
    border: 13px solid #242038;
  }
}

@media only screen and (max-width: 992px) {
  h1 {
    font-size: 4.7rem;
  }
  h1.squared {
    border: 11px solid #242038;
  }
}

@media only screen and (max-width: 768px) {
  h1 {
    font-size: 4.0rem;
  }
  h1.squared {
    border: 9px solid #242038;
  }
}

@media only screen and (max-width: 576px) {
  h1 {
    font-size: 3.4rem;
  }
  h1.squared {
    border: 8px solid #242038;
  }
}

h2 {
  font-size: 3.6rem;
  color: #242038;
}

h2.squared {
  border: 12px solid #242038; 
  padding-left: 30px; 
  padding-right: 30px; 
  padding-top: 15px; 
  padding-bottom: 15px; 
  position: absolute; 
  top: 20px;
  text-align: center;
}

/* Esilehe @sketchingpaas pealkiri, mis ei poolitu */

h2.decreasing {

}

@media only screen and (max-width: 992px) {
  h2, h2.decreasing {
    font-size: 3.0rem;
  }
}

@media only screen and (max-width: 768px) {
  h2, h2.decreasing {
    font-size: 2.8rem;
  }
}

@media only screen and (max-width: 576px) {
  h2, h2.decreasing {
    font-size: 2.6rem;
  }
}

/* h3 stiilid */

h3 {
  font-size: 2.2rem;
  color: #242038;
}

h3 a {
  color: #242038;
  text-decoration: none;
}

h3 a:hover {
  color: #242038;
  text-decoration: underline;
}

h3 a:focus {
  color: #242038;
  text-decoration: underline;
}

h3.squared {
  border: 6px solid #242038; 
  padding-left: 10px; 
  padding-right: 10px; 
  padding-top: 5px; 
  padding-bottom: 5px; 
  top: 20px;
  width: 70px;
  text-align: center;
}

h3.squaredwhite {
    border: 6px solid #FDFDFD; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    top: 20px;
    width: 70px;
    text-align: center;
  }

  h3.squaredwhite:hover {
    border: 6px solid #FDFDFD; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    top: 20px;
    width: 70px;
    text-align: center;
  }

  h3.squaredwhite:focus {
    border: 6px solid #FDFDFD; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    top: 20px;
    width: 70px;
    text-align: center;
  }

h3.squaredfree {
  /* border: 6px solid #5C1080;*/
  padding-left: 10px; 
  padding-right: 10px; 
  padding-top: 5px; 
  padding-bottom: 5px; 
  top: 20px;
  text-align: center;
}

h3.squaredfree a {
  font-size: 2.2rem;
}

h3.squaredfree a:hover {

}

h3.squaredfree a:focus {

}

@media only screen and (max-width: 1200px) {
  /* For mobile phones: */
  h3.squaredfree, h3.squaredfree a {
    font-size: 2rem;
  }
}

@media only screen and (max-width: 992px) {
  /* For mobile phones: */
  h3.squaredfree, h3.squaredfree a {
    font-size: 1.8rem;
  }
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  h3.squaredfree, h3.squaredfree a {
    font-size: 1.6rem;
  }
}

@media only screen and (max-width: 576px) {
  /* For mobile phones: */
  h3.squaredfree, h3.squaredfree a {
    font-size: 1.4rem;
  }
}

h3.squared-footer {
  border: 5px solid #242038; 
  padding-left: 10px; 
  padding-right: 10px; 
  padding-top: 5px; 
  padding-bottom: 5px; 
  width: 220px;
  white-space: nowrap;
  margin: 25px;
}

h3.squared-footer-ua {
  border: 5px solid #242038; 
  padding-left: 10px; 
  padding-right: 10px; 
  padding-top: 5px; 
  padding-bottom: 10px; 
  width: 295px;
  white-space: nowrap;
}

h3.squared-footer-ee {
  border: 5px solid #242038; 
  padding-left: 10px; 
  padding-right: 10px; 
  padding-top: 5px; 
  padding-bottom: 5px; 
  width: 290px;
  white-space: nowrap;
}

h4 {
  font-size: 1.5rem;
  color: #242038;
}

h4 a {
  color: #242038;
  text-decoration: none;
}

h4 a:hover {
  color: #242038;
  text-decoration: underline;
}   

h4 a:focus {
  color: #242038;
  text-decoration: underline;
}     

h4.squared {
  border: 5px solid #242038; 
  padding-left: 10px; 
  padding-right: 10px; 
  padding-top: 5px; 
  padding-bottom: 5px; 
  top: 15px;
  width: 56px;
  position: relative;
  white-space: nowrap;
}

h4.squared a {
  color: #242038;
  text-decoration: none;
}

h4.squared a:hover {
  color: #242038;
  text-decoration: underline;
}   

h4.squared a:focus {
  color: #242038;
  text-decoration: underline;
}     

h4.squared-footer {
  border: 5px solid #242038; 
  padding-left: 10px; 
  padding-right: 10px; 
  padding-top: 5px; 
  padding-bottom: 5px; 
  width: 160px;
  white-space: nowrap;
}

h4.squared-static {
  border: 5px solid #242038; 
  padding-left: 10px; 
  padding-right: 10px; 
  padding-top: 5px; 
  padding-bottom: 5px; 
  top: 20px;
  width: 54px;
  text-align: center;
  white-space: nowrap;
}

h4.squared-top {
  border: 5px solid #242038; 
  padding-left: 10px; 
  padding-right: 10px; 
  padding-top: 5px; 
  padding-bottom: 5px; 
  margin: 10px;
  width: 54px;
  text-align: center;
  white-space: nowrap;
}

h4.index {
  margin-top: 75px;
}

@media only screen and (max-width: 1200px) {
  /* For mobile phones: */
  h4.index {
    margin-top: 25px;
  }
}

@media only screen and (max-width: 992px) {
  /* For mobile phones: */
  h4.squared-top {
    margin-top: 0px;
  }
}


h5 {
  font-size: 1.2rem;
  color: #242038;
}

h5 a {
  font-size: 1.2rem;
  color: #242038;
}

h5 a:hover {
  font-size: 1.2rem;
  color: #242038;
}

h5 a:focus {
  font-size: 1.2rem;
  color: #1B998B;
}

h6 {
  font-size: 1rem;
  color: #242038;
}

h6.footer {
  font-size: 1rem;
  color: #242038;
  text-align: center;
}

/* h-dele vertikaalsete vahede lisamiseks */

.htop {
  padding-top: 20px;
}

.hbottom {
  padding-bottom: 20px;
}

/* Listid */

ul {
  list-style-type: none;
    line-height: 175%;
    color: #CBE7FF;
    font-size: 1.0rem;
    font-family: 'Source Sans 3', sans-serif;
  }

ul a {
  color: #CBE7FF;
  text-decoration: none;
}
  
ul a:hover {
  color: #FDFDFD;
  text-decoration: underline;
}   
  
ul a:focus {
  color: #E2C423;
  text-decoration: underline;
}     

/* @sketchingpaas logo img vormistus */

.img-sketchingpaas {
  max-width: 40%; 
}

@media only screen and (max-width: 1200px) {
  .img-sketchingpaas {
    max-width: 50%; 
  }
}

@media only screen and (max-width: 992px) {
  .img-sketchingpaas {
    max-width: 55%; 
  }
}

@media only screen and (max-width: 768px) {
  .img-sketchingpaas {
    max-width: 60%; 
  }
}

@media only screen and (max-width: 576px) {
  .img-sketchingpaas {
    max-width: 65%; 
  }
}

/* Illustratsioonide img vormistus */ 

.img-artwork {
  border: 30px solid #242038;
}

@media only screen and (max-width: 1200px) {
  .img-artwork {
    border: 26px solid #242038;
  }
}

@media only screen and (max-width: 992px) {
  .img-artwork {
    border: 24px solid #242038;
  }
}

@media only screen and (max-width: 768px) {
  .img-artwork {
    border: 22px solid #242038;
  }
}

@media only screen and (max-width: 576px) {
  .img-artwork {
    border: 20px solid #242038;
  }
}

/* Fontawesome ikoonide paigutamiseks */



/* Spanid teksti värvi muutmiseks. Color1 - helesinine, color2 - lilla, color3 - kollane, color4 - tumehall, color 5 - kreemvalge */

.color-white {
  color: #fff;
}

.color-tearose {
  color: #E2B1B1;
}

.color-persimmon {
  color: #EB6424;
}

.color-taupe {
  color: #4A4238;
}

.color-lemoncurry {
  color: #B69711;
}
  
.color-jonquil {
  color: #F0C808;
}

.color-lightgreen {
  color: #85FF9E;
}

.color-darkspringgreen {
  color: #04724D;
}

.color-persiangreen {
  color: #1B998B;
}

.color-columbiablue {
  color: #CBE7FF;
}

.color-lapislazuli {
  color: #33658A;
}

.color-darkpurpleblue {
  color: #242038;
}

.color-eggplant {
  color: #52414C;
}

.color-darkpurplered {
  color: #30011E;
}

/* Borderi värvi muutmiseks */

.border-color-white {
  border-color: #fff;
}

.border-color-tearose {
  border-color: #E2B1B1;
}

/* Nuppude stiilid */

.btn {
  font-family: 'Anton', Impact, sans-serif;
  border: 6px solid #242038; 
  border-radius: 0px;
  padding-left: 30px; 
  padding-right: 30px; 
  padding-top: 15px; 
  padding-bottom: 15px; 
  text-align: center;
  background-color: #E2B1B1;
  font-size: 2.2rem;
}

.btn.ua {
  padding-bottom: 25px; 
}

.btn:hover {
  background-color: #fff;
}

.btn:focus {
  border-color: #1B998B;
}

/* Esilehe hero ala */

.bgimg-hero-index {
  position: relative;

  display: flex;
  flex-direction: row !important;
  align-content: center !important;
  justify-content: center !important;
  align-self: center !important;
  align-items: center !important;
  margin:auto;
}

.bgimg-hero-index-ua {
  position: relative;

  display: flex;
  flex-direction: row !important;
  align-content: center !important;
  justify-content: center !important;
  align-self: center !important;
  align-items: center !important;
  margin:auto;
}

.bgimg-hero-index-ee {
  position: relative;

  display: flex;
  flex-direction: row !important;
  align-content: center !important;
  justify-content: center !important;
  align-self: center !important;
  align-items: center !important;
  margin:auto;
}

@media only screen and (max-width: 1200px) {
  .bgimg-hero-index, .bgimg-hero-index-ee, .bgimg-hero-index-ua {
    height: fit-content;
    padding-top: 20px;

  }
}

@media only screen and (max-width: 992px) {
  .bgimg-hero-index, .bgimg-hero-index-ee, .bgimg-hero-index-ua {
    height: fit-content;
    padding-top: 40px;

  }
}

@media only screen and (max-width: 768px) {
  .bgimg-hero-index, .bgimg-hero-index-ee, .bgimg-hero-index-ua {
    height: fit-content;
    padding-top: 70px;

  }
}

@media only screen and (max-width: 576px) {
  .bgimg-hero-index, .bgimg-hero-index-ee, .bgimg-hero-index-ua {
    height: fit-content;
    padding-top: 100px;

  }
}

/* Illustratsiooni alamlehe malli hero ala */

.bgimg-hero-artwork {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

  display: flex;
  flex-direction: row !important;
  align-content: center !important;
  justify-content: center !important;
  align-self: center !important;
  align-items: center !important;
  height: 100%;
}

@media only screen and (max-width: 1200px) {
  .bgimg-hero-artwork {
    height: fit-content;
    padding-top: 20px;
    padding-bottom: 50px;
  }
}

@media only screen and (max-width: 992px) {
  .bgimg-hero-artwork {
    height: fit-content;
    padding-top: 50px;
    padding-bottom: 70px;
  }
}

@media only screen and (max-width: 768px) {
  .bgimg-hero-artwork {
    height: fit-content;
    padding-top: 80px;
    padding-bottom: 90px;
  }
}

@media only screen and (max-width: 576px) {
  .bgimg-hero-artwork {
    height: fit-content;
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.bgimg-story {
  background-image:url('./img/20221214_111950.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

.bgimg-story-data {
  background-image:url('./img/andmed.png');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

.bgimg-story-intervjuu {
  background-image:url('./img/intervjuu.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

.bgimg-story-muu {
  background-image:url('./img/muu.png');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

/* Saidi alade taustavärvid */

.area-tearose {
  background-color: #E2B1B1;
}

.area-vermillion {
  background-color: #DC493A;
}

.area-sinopia {
  background-color: #C73E1D;
}

.area-persimmon {
  background-color: #EB6424;
}

.area-taupe {
  background-color: #4A4238;
}

.area-lemoncurry {
    background-color: #B69711;
}
  
.area-jonquil {
    background-color: #F0C808;
}

.area-lightgreen {
    background-color: #85FF9E;
}

.area-darkspringgreen {
  background-color: #04724D;
}

.area-persiangreen {
  background-color: #1B998B;
}

.area-columbiablue {
  background-color: #CBE7FF;
}

.area-lapislazuli {
  background-color: #33658A;
}

.area-darkpurpleblue {
  background-color: #242038;
}

.area-eggplant {
  background-color: #52414C;
}

.area-darkpurplered {
  background-color: #30011e;
}

/* Opacity classid RGB värvides */

.background-color1-75 {
  background: rgba(203, 231, 255, 0.75);
}

/* Saidi avalehe kaardid */

.card {
    border-style: none;
}

.card-header {
  height: 100px; padding-left: 25px;
  background-color: #FDFDFD;
  border-style: none;
}

.card-body {
  background-color: #FDFDFD;
}

.img-fluid {
  width: 100%;
}

.img-index {
}

@media only screen and (max-width: 1200px) {
  .img-index {
    width: 100%;
    margin-bottom: 50px;
  }
}

@media only screen and (max-width: 992px) {
  .img-index {
    width: 100%;
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 768px) {
  .img-index {
    width: 100%;
    margin-bottom: 30px;
  }
}

@media only screen and (max-width: 576px) {
  .img-index {
    width: 100%;
    margin-bottom: 20px;
  }
}

/* Pildikarusseli numnbrid */

.carousel-caption {
  width:100%;
  height:100%;
  left:0 !important;
}

.carousel-caption h4 {
margin-left:30px;
margin-top:30px;
border: 5px solid #242038;
background-color: #1B998B; 
padding-left: 7px; 
padding-right: 7px; 
padding-top: 5px; 
padding-bottom: 5px;
width: 52px;
color: #242038;
text-align: center;
}

.carousel-caption h4.raekoja {
  background-color: #d98969;
}

.carousel-caption h4.backtotartu {
  background-color: #B69711;
}

.carousel-caption h4.studentcommune {
  background-color: #4a4238;
  color: #fff;
  border-color: #fff;
}

.carousel-caption h4.ruutli {
  background-color: #38261e;
  color: #fff;
  border-color: #fff;
}

.carousel-caption h4.onriiastreet {
  background-color: #CBE7FF;
}

.carousel-caption h4.startupday {
  background-color: #F0C808;
}

@media only screen and (max-width: 576px) {
  .carousel-caption h4 {
    margin-left:15px;
    margin-top:15px;
  }
}