/*		GENERAL		*/

body {
	background-color: #e56d6f;
	height: 100% !important;
	width: 100vw;
	overflow: hidden;
	margin: 0;
	font-family: 'Poppins', sans-serif;
}

iframe {
  display: none;
}

#pageContainer {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

.paragraph-header {
	font-size: 1.2rem;
	font-family: 'Poppins', sans-serif;

}

/*		FOOTER		*/

#footer {
	position: absolute;
	bottom: 0px;
	left: 0px;
	color: white;
	height: 2.5rem;
	font-family: 'Open sans', sans-serif;
}

#footer a {
	color: white;
}

/*		HEADER		*/

#header {
	position: relative;
	z-index: 1;
	overflow: visible;
}

.header-logo {
	height: 10vh;
	margin-left: 5vw;
	padding-top: 7.5vh;
	margin-right: 2.5vw;
	box-sizing: initial;
	transition: transform .2s;
}

.header-logo:hover {
	cursor: pointer;
	transform: scale(1.05);
}

.header-span {
	vertical-align: top;
	font-size: 1.5rem;
	color: white;
	padding-left: 2.5vw;
	padding-right: 2.5vw;
	margin-top: 10vh;
}

.header-span:hover {
	text-decoration: underline;
	cursor: pointer;
}

.header-info {
	vertical-align: top;
	font-size: 1rem;
	color: white;
	padding-right: 5vw;
	margin-top: 10.5vh;
	float: right;
	font-family: 'Open Sans', sans-serif;
}

.header-info a {
	color: white;
	text-decoration: none;
}

.header-info a:hover {
	text-decoration: underline;
}

#header .legitRipple-ripple {
	background-color: transparent;
	opacity: 1;
	-webkit-transition-duration: 0.5s, 1s;
          transition-duration: 0.5s, 1s;
  	-webkit-transition-timing-function: linear, cubic-bezier(1, 0, 0.8, 0);
          transition-timing-function: linear, cubic-bezier(1, 0, 0.8, 0);
}

/*		HOME		*/

#home {
	display: inline-block;
}

.home-title {
	font-size: 8rem;
	color: white;
	line-height: 1em;
	padding-top: 10vh;
	padding-left: 5vw;
}

.home-caption {
	padding-top: 4vh;
	padding-left: 5vw;
	font-size: 2rem;
	color: white;
	line-height: 1.5rem;
}

/*		ABOUT		*/

#about {
	display: none;
}

#aboutDerk {
	padding: 5vw;
	box-sizing: border-box;
	vertical-align: top;
	border-right: white 2px solid;
}

#aboutDerk .col-st-oh {
	vertical-align: top;
}

#aboutDerk .col-st-oh img {
	width: 100%;
    padding-right: 15%;
    border-radius: 50%;
    box-sizing: border-box;
}

#aboutDerk .col-st-oh .logo {
	border-radius: 0;
	width: 100%;
	padding-bottom: 60px;
}

#aboutDerk .col-st-oh .service-title {
	color: white;
	width: 100%;
}

.social-container {
	padding-top:10px;
	width:100%;
}
.social-icon {
	margin-right: 10px;
	height: 40px;
    display: inline-block;
    width: 40px;
    background-color: white;
    border-radius: 20px;
    color: rgb(136, 171, 117);
    text-align: center;
    font-size: 22px;
    padding-top: 3px;
    box-sizing: border-box;
}

#portfolioCarousel {
	padding:20px;
}

.carousel-caption {
	position: initial;
	background-color: rgb(136, 171, 117);
	right: 0;
	left: 0;
	bottom: 0;
	padding-bottom: 5px;
}

.carousel-caption a {
	color: white;
}

.carousel-caption p {
	font-family: 'Open Sans', sans-serif;
}

#projects .service-title {
	color: white;
	width: 100%;
	padding-bottom: 10px;
}

.carousel-item img {
	object-fit: cover;
}

#projects {
	padding: 5vw;
}
#aboutDerk .service-description {
	color: white;
	padding-top: 20px;
}

/*		SERVICES	*/

#services {
	display: none;
	padding-top: 10vh;
}

#servicesContainer {
	width: 100%;
	text-align: center;
	padding-left: 5vw;
	padding-right: 5vw;
	box-sizing: border-box;
	vertical-align: top;
}

.service {
	vertical-align: top;
	border: white 15px solid;
	background-color: transparent;
	/*color: rgb(244, 132, 95);*/
	color: white;
	height: 60vh;
	width: 30%;
	border-radius: 2vw 0vw 2vw 0vw;
	padding: 1.5rem;
	box-sizing: border-box;
	transition: transform .2s;
}

.service:hover {
	transform: scale(1.05);
}

.service-title {
	font-size: 1.5rem;
	height: 10%;
}

.service-info {
	height: 90%;
}

.service-image {
	width: 100%;
}

.service-image img {
	width: 40%;
	padding-top: 20px;
	padding-bottom: 20px;
}

.service-description {
	font-family: 'Open Sans', sans-serif;
	text-align: justify;
}

#middleService {
	margin-left: 4.5%;
	margin-right: 4.5%;
}

/*		CONTACT		*/

#contact {
	display: none;
}

.contact-container {
	padding-top: 10vh;
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
}

.contact-padding {
	padding-left: 5vw;
}

.contact-body {
	padding-left: 2vw;
	vertical-align: middle;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border-left-color: white;
	border-left-width: 2px;
	border-left-style: solid;
}

.contact-body a {
	color: white;
}

/*		FORM		*/

#contactFormContainer {
	padding-top: 10vh;
	vertical-align: top;
}

#contactForm div {
	white-space: nowrap;
}

.form-field {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	height: 40px;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 20px;
	font-size: 1rem;
	font-family: 'Open Sans', sans-serif;
	border-style: solid;
	border-color: red; 
	border-width: 0px;
	transition: border .1s;
}

.form-field:focus {
	outline: 0;
	border: black 2px solid;
}

.form-field::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #cccccc;
  opacity: 1; /* Firefox */
}

.form-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #cccccc;
}

.form-field::-ms-input-placeholder { /* Microsoft Edge */
  color: #cccccc;
}

.half {
	width: 17vw;
	margin-right: 2vw;
	margin-top: 0px !important;
}

.whole {
	width: 36vw;
}

.paragraph {
	padding-top: 15px;
	width: 36vw;
	height: 15vh;
}

.caption {
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	color: white;
	padding-right: 4vw;
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
	margin-top: 15px;
}

#formSubmit, #formSubmitMobile {
	width: 17vw;
	padding: 0px;
	font-size: 1rem;
	color: white;
	font-family: 'Open sans', sans-serif;
	background-color: transparent;
	margin-top: 15px !important;
  	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border-color: white;
	border-width: 2px;
	border-style: solid;
}

#formSubmit:hover {
	cursor: pointer;
}

/* Buttons */

.privacy-button {
	text-decoration: none;
}

.privacy-button:hover {
	cursor: pointer;
	text-decoration: underline;
}

.terms-button {
	text-decoration: none;
}

.terms-button:hover {
	cursor: pointer;
	text-decoration: underline;
}

.call-button {
	text-decoration: none;
}

.call-button:hover {
	cursor: pointer;
	text-decoration: underline;
}

/*		MODALS		*/


.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 10vh;
	padding-left: 20vw;
	padding-right: 20vw;
	padding-bottom: 10vh;
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  color: gray;
  font-size: 1rem;
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 100%;
  height: 100%;
}

#callModalContent {
	width: 50vw;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.text-box-container {
	height: 90%;
	padding: 2vh;
	border-bottom: 1px solid gray;
	border-top: 1px solid gray;
}

.text-box {
	margin: 0;
	height: 100%;
	overflow-y: scroll;
	font-family: 'Open sans', sans-serif;
	text-align: justify;
	width: 100%;

}

.text-box-header {
	font-size: 1rem;
	text-decoration: underline;
}

#callModalContent .text-box {
	overflow: hidden;
}

/*	CALL MODAL 	*/

#callForm {
	padding: 0;
	margin: 0 2vw 0;
	color: gray;
	font-size: 1rem;
}

#callForm .form-field {
	border-width: 1px;
	border-style: solid;
	border-color: gray;
	font-size: 1rem;
}

#callForm .caption {
	color: gray;
	text-align: left;
	font-size: 1rem;
}

#callForm #callFormButton {
	border-width: 0px;
	margin-top: 2vh !important;
	color: #fefefe;
	background-color: gray;
}

#callModal .text-box-container {
	padding-left: 0;
	padding-right: 0;
	width: 100%
}

#callModal .modal-content{
	height: auto;
}

#callModalContent .text-box {
  	height: auto;
  }



/* mobile and tablet support */

#contactFormContainerMobile {
	display: none;
}

@media screen and (min-width: 600px) and (max-width: 1400px) {
	.service-description {
		font-size: 0.8rem !important;
	}

	#aboutDerk .logo {
		padding-bottom: 10px !important;
	}

	#aboutDerk {
		padding-top: 4vw;
		padding-bottom: 0;
	}

	#projects {
		padding-top: 4vw;
		padding-bottom: 0;
	}

	.home-title {
		font-size: 6rem;
	}

	.home-caption {
		font-size: 1.5rem;
		line-height: 1rem;
	}

	.contact-body {
		font-size: 0.8rem;
	}

	form {
		font-size: 0.8rem !important;
	}

	.form-field {
		font-size: 0.8rem !important;
	}

	#footer {
		font-size: 0.8rem;
	}
	
	.service-title, .header-span, .paragraph-header {
		font-size: 1.1rem;
	}
	
}



@media screen and (min-width: 0px) and (max-width: 600px) {
  /*	GENERAL	*/

  body {
  	overflow-y: visible;
  	overflow-x: hidden;
  	margin: 0;
  }

  /*	HEADER	*/
   
  .header-logo{ 
  	float: left;
  	height: auto;
  	width: 15vw;
  	margin-right: 5vw;
  }

  .header-span {
  	font-size: 1rem;
  	margin-top: 9vh;
  }

  .header-info {
  	display: none
  }

  /*	HOME	*/

  .home-title {
  	padding-top: 7.5vh;
  	font-size: 2.8rem;
  }

  .home-caption {
  	font-size: 1rem;
  }

  /*	SERVICES	*/

  #services {
  	padding-top: 7.5vh;
  }

  #servicesContainer {
  	margin-bottom: 4vh;
  }

  #servicesContainer .col-st-ot {
  	width: 100% !important;
  	padding-bottom: 5vh;
  }

  .service {
  	height: auto;
  	width: 80vw;
	border-radius: 2vh 0vw 2vh 0vw;
	margin-bottom: 5vh;
	border-width: 8px;
  }

  .service-image img {
  	width: 50%;
  }

  .service-description {
	padding-top: 20px;
	font-size: 1rem;
  }

  /*	ABOUT	*/

  #about {
	  padding-top: 5vh;
  }

  #aboutDerk {
	  width: 100% !important;
	  border: 0;
  }

  #aboutDerk .col-st-oh {
	width: 100% !important;
	text-align: center;
  }

  #aboutDerk .col-st-oh img {
	width: 70% !important;
	padding-right: 0;
	margin-bottom: 20px;
  }

  #aboutDerk .logo {
	  display: none;
  }

  #projects {
	  width: 100% !important; 
  }

  #portfolioCarousel {
	margin-bottom: 30px;
  }

  .carousel-item img {
	  height: 60vh !important;
  }

  .carousel-caption {
	  text-align: center;
	  width: 100%;
  }


  /* 	CONTACT	*/

  #contact .col-st-oh {
  	width: 100% !important;
  }

  #contactTerms {
  	padding-top: 5vh;
  }

  .contact-container {
  	padding-top: 7.5vh;
  }

  .contact-form {
  	padding-top: 10vw;
  	padding-left: 7.5vw;
  	padding-right: 7.5vw; 
  }

  #contactFormContainer {
	display: none;
  }


  #contactFormContainerMobile {
	display: inline-block;
	margin-bottom: 4vh;
  }

  #contactFormContainerMobile div {
	width: 100%;
  }

  .caption {
  	margin-top: 1vh;
  }

  #callForm div {
  	width: 100%;
  }

  .whole {
  	width: 100%;
  }

  .form-field {

  	padding-left: 5vw;
  	padding-right: 5vw;
  }

  .paragraph {
  	width: 100%;
  	padding-left: 5vw;
  	padding-right: 5vw
  }

  #formSubmitMobile {
  	width: 85vw;
  	margin-bottom: 7vh;
  }

  /* MODAL		*/

  .modal {
	  padding-left: 7.5vw;
	  padding-right: 7.5vw;
	  padding-bottom: 10vh;
  }

  .modal-content {
	  width: 100%;;
	  
	  height: 100%;
	  margin: 0;
  }

  .text-box-container {
	  width: 100%;
	  height: 90%;
  	font-size: 1rem;
  	padding-left: 0;
  }

  .text-box {
	height: 100%;
  	text-align: left;
  }

  .text-box-header {
  	font-size: 1rem;
  }

}








/* 

#e56d6f

#f69075

#f8b390

#e8d9db

#F2C57C

*/