@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;600&family=Montserrat:wght@400;600&display=swap');
/* font-family: 'Dosis', sans-serif;
font-family: 'Montserrat', sans-serif;
*/




html, body {
  height: 100%;
  margin: 0;
  background: #f5f3f5;
  font-size: 16px;
}




/*wrapper for sticky footer */
.wrapper {
  min-height: 100%;
  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
  margin-bottom: -220px;
}
.footer, .push {
  height: 220px;
}

table {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  width: 100%;
}

tr {
  height: 50px;
}

.table-head-bg {
  background-color: #197874;
  color: white;
  font-weight: 400;
}

.table-col-bg {
  background: #986698;
  color: white;
  font-weight: 400;
}

.table-bg {
  color: #197874;
}

h1, h2 {
  font-family: 'Dosis', sans-serif;
  color: #0f7673;
}

h2 {
  margin-top: 30px;
}

h3 {
  color: #986698;
  font-family: 'Dosis', sans-serif;
}

p, ul, a, button, label, select, option, input, .small-text {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.5em;
}

a {
  text-decoration: none;
}

li {
  margin-bottom: 8px;
}

.alert {
  color: red;
}


/*HEADER*/

img#logo, img#hamburger {
  position: absolute;
}

img#logo {
  height: 12vw;
  left: 2vw;
  top: 2vw;
}

img#hamburger {
  height: 6vw;
  right: 5vw;
  top: 5vw;
}

header .nav-wrapper {
  position: absolute;
  left: -9999px;
  background: #986698;
  display: block;
  width: 100%;
  padding-bottom: 20px;
  z-index: 2;
}

header .nav-wrapper a {
  display: block;
  color: white;
  margin-left: 2vw;
  line-height: 2.5em;
}


header .nav-wrapper img {
  height: 8vw;
  display: block;
  margin: 1vw;
  margin-left: 0;
}

header .social-and-contacts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

header .social-and-contacts > div:nth-child(odd) {
  width: 12vw;
}

header .social-and-contacts > div:nth-child(even) {
  width: 84vw;
}


header .small-text {
  color: white;
}

.slider {
    display: none;
  }



/*MAIN*/

main {
  margin-top: 16vw;
  padding: 2vw;
  padding-bottom: 60px;
}

img#splash {
  display: none;
}

img#splash-mobile {
  display: block;
  width: 104%;
  margin-left: -2%;
}

a.link-button {
  display: block;
  background:#986698;
  width: 100px;
  padding: 8px;
  text-align: center;
  border-radius: 20px;
}

a.link-button:link {
  color: white;
}

a.link-button:active {
  color: white;
}

a.link-button:visited {
  color: white;
}

a.link-button:hover {
  color: white;
  background: #137673;
  transition-duration: 0.4s;
}

/* BUY PAGE */

.buy-service {
	margin: auto;
}

button.service-button {
	height: 46vw;
	width: 46vw;
	margin-right: 1%;
	margin-bottom: 2%;
	background-color:#8691b2;
}

button.service-button:hover {
	background: #8691b2;
}

p.total-style {
	font-family: 'Dosis', sans-serif;
	font-size: 22px;
	font-weight: 700;
}

/*BLOG*/

img.blog-preview-thumb {
  display: none;
}

img.blog-preview-thumb-mobile {
  display: initial;
  width: 100%;
}

p.blog-abstract {
  font-weight: bold;
}

h2.date {
  font-size: 1em;
  color: #986698;
  margin-top: -10px;
}

h2.date-blog {
  margin-top: -14px;
  font-size: 1em;
  color: #986698;
}

a.blog-body-links:link {
  color: #0f7673;
  font-weight: bold;
}

a.blog-body-links:hover {
  color: #986698;
  font-weight: bold;
}

a.blog-body-links:active {
  color: #0f7673;
  font-weight: bold;
}

a.blog-body-links:visited {
  color: #0f7673;
  font-weight: bold;
}

img.blog-image {
  display: initial;
  width: 100%;
}

h3 {
  margin-bottom: -10px;
}

a.blog-button {
  width: 150px;
  position: relative;
  left: initial;
  bottom: initial;
  z-index: 0;
}

.blog-flex {
  margin-bottom: 60px;
}


/*FORMS*/

form {
  width: 99%;
}

textarea, input, select {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-style: none;
}

input {
  font-size: 1em;
  padding: 8px;
  margin-top: 10px;
  -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
     border-radius: 20px;
}

input.infopackform {
  width: 75%;
}

select {
  width: 100%;
  background: white;
  padding: 8px;
  margin-top: 4px;
  color: #000000;
  font-size: 1em;
}

input[type=submit] {
	background-color:#986698;
	color:#FFF;
	padding:8px 30px;
	border:0;
	border-radius:20px;
	font-size:1em;
	transition-duration: 0.4s;
	font-family: 'Montserrat', sans-serif;
}

input[type=submit]:hover {
	background-color: #137673;
}

button {
	background-color:#986698;
	color:#FFF;
	padding:8px 30px;
	border:0;
	border-radius:20px;
	font-size:1em;
	transition-duration: 0.4s;
	font-family: 'Montserrat', sans-serif;
}

button:hover {
	background-color: #137673;
}

.calculator-results {
  font-weight: bold;
  color: #986698;
}



/* ABOUT US PAGE */

img.portrait {
	width: 30vw;
}



/*FOOTER*/

footer {
  text-align: center;
  font-size: 0.8em;
  background: #986698;
}

footer nav {
  padding-top: 50px;
}

footer a:link {
  color: white;
}

footer a:active {
  color: white;
}

footer a:visited {
  color: white;
}

footer a:hover {
  color: white;
  font-weight: bold;
}

footer p {
  padding-bottom: 30px;
  color: white;
}



@media only screen and (min-width: 767px) {

  img.portrait {
  	width: 20vw;
  }

  /* BUY PAGE */

	button.service-button {
		height: 180px;
		width: 180px;
		margin-right: 10px;;
		margin-bottom: 10px;
		background-color:#8691b2;
	}


}


@media only screen and (min-width: 1024px) {

  /*HEADER*/
  p#floated {
    position:absolute;
    left: 50px;
    top: 300px;
    z-index: 590;
    font-family: 'Dosis', sans-serif;
    font-size: 2em;
    width: 400px;
    line-height: 1.2em;
    font-weight: bold;
    color: #986698;
    text-shadow: 1px 1px #552856;
  }

  a#floated-button {
    position:absolute;
    left: 50px;
    top: 540px;
    z-index: 590;

  }

  img#logo {
    height: 80px;
    left: 20px;
    top: 20px;
  }

  img#hamburger {
    display: none;
  }

  img#splash {
    margin-top: initial;
    width: initial;
  }

  img#splash-mobile {
    display: none;
  }

  header {
    width: 100%;
    height: 120px;
  }

  header .nav-wrapper {
    position: absolute;
    left: 0px;
    display: block;
    width: 100%;
      padding-bottom: initial;
  }

  header .nav-wrapper a {
    display: inline-block;
    margin-left: initial;
  }

  header .nav-wrapper img {
    height: 22px;
    display: block;
    margin: initial;
    margin-left: initial;
    margin-right: 10px;
  }

  .main-links {
    width: 80%;
    left: 240px;
    position: absolute;
    text-align: center;
    top: 65px;
  }

  .main-links a {
    width: 16%;
  }

  a.header-links:link {
    color: #986698;
  }

  a.header-links:active {
    color: #986698;
  }

  a.header-links:visited {
    color: #986698;
  }

  a.header-links:hover {
    color: #0f7673;
    font-weight: bold;
  }

  header .social-and-contacts {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    position: absolute;
    top: 20px;
    right: 20px;
  }

  header .social-and-contacts > div:nth-child(odd) {
    width: initial;
  }

  header .social-and-contacts > div:nth-child(even) {
    width: initial;
    position:absolute;
    left: -9999px;
  }


  header .small-text {
    color: white;
  }

.slider {
    position:absolute;
    display: none;
    color: #0f7673;
    right: 250px;
    top: 5px;
  }



  /*MAIN*/
  main {
    margin-top: 60px;
    padding: initial;
    padding-bottom: 60px;
    width: 720px;
    margin-left: auto;
    margin-right: auto;
   }

   img#splash {
     display: block;
     width: 100%;
   }

   img.portrait {
     width: 150px;
   }

   img.blog-image {
     width: 100%;
     display: block;
   }

   /*BLOG*/

   img.blog-preview-thumb {
     display: initial;
   }

   img.blog-preview-thumb-mobile {
     display: none;
   }

   .blog-flex {
     display: 100%;
     position: relative;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     margin-bottom: 60px;
   }

   h2.date-blog {
     margin-top: -14px;
     font-size: 1em;
     color: #986698;
   }

   p.blog-abstract-preview {
     margin: 0;
     padding-left: 20px;
   }

   .blog-flex > div:first-child {
     width: 30%;
   }

   .blog-flex > div:nth-child(2) {
     position: relative;
     width: 70%;
   }

   .blog-flex img {
     width: 100%;
   }

   a.blog-button {
     width: 150px;
     position: absolute;
     left: 20px;
     bottom: 3px;
   }

   /* BUY PAGE */

	button.service-button {
		height: 164px;
		width: 164px;
		margin-right: 10px;;
		margin-bottom: 10px;
		background-color:#8691b2;
	}

}