@charset "utf-8";
/* CSS Document */

 /* @media screen and (min-width: 180px) and (max-width: 1000px){ */

	 #main-container {
    	padding-right: 0px;
	}


	 #header .center-container {
		 top: 10%;
		 width: 90%;
		 height: 100%;
	}

	.display {
    top: 85%;
    width: 100%;
	}

	.container, .container-info, .container-small {
		font-size: 10px;
	}


	.container-info{
		font-size: 5px;
	}


	.center-button {
		margin: 50px auto;
		width: 220px;
	}

	.center-button .inner-arrow {
    	padding: 14px;
    	width: 40px;
    	height: 40px;
    	margin-right: 10px;
	}

	.container-info.first .info-line {
    	height: 40%;
    	width: 7px;
	}
	.container-info.first .info-icon {
    	top: 40%;
   		padding: 12px;
    	border: 6px solid #5f062a;
    	font-size: 3em;
    	width: 50px;
    	height: 50px;
	}

	.container-info.second .info-line, .container-info.third .info-line {
		height: 10%;
    	width: 7px;
	}

	.container-info.second .info-icon, .container-info.third .info-icon {
    	top: 10%;
   		padding: 12px;
    	border: 6px solid #5f062a;
    	font-size: 3em;
    	width: 50px;
    	height: 50px;
	}


	.info .center-container {
		width: 90%;
	}

	.center-counter {
    	text-align: center;
    	font-size: 1.7em;
	}

	.info .center-sub-title {
    	font-size: 3em;
	}
	.info .center-container {
    	height: 400px;
	}

	#submit{
		height: 100%!important;
	}

	#submit .center-container {
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	margin: auto;
    	display: block;
    	width: 80%;
    	height: 60%;
    	z-index: 2222;
	}
	#submit .center-button {
    	position: absolute;
    	right: 0;
    	left: 0;
    	top: 90%;
    	bottom: 0;
    	margin: auto;
    	padding: 0;
    	width: 220px;
    	height: 50px;
    	display: block;
    	font-size: 1.7em;
    	font-weight: 300;
	}

	#submit .center-title {
    	font-size: 4rem;
    	text-align: center;
	}

	@media only screen and (max-width: 480px) {
		#submit .center-title {
	    	font-size: 2rem;
	    	text-align: center;
		}
	}

	#submit .center-sub-title {
    	text-align: center;
	}

#steps {
  height: 100%!important;
}

	#steps .center-container {
		width: 90%;
	}

  @media only screen and (min-width: 481px) and (max-width: 821px) {
  #stepone, #steptwo, #stepthree, #stepfour, #stepfive {
    height: 35%!important;
   }

  #stepone.container-small.positive .sub-title,#steptwo.container-small.negative .sub-title, #stepthree.container-small.positive .sub-title, #stepfour.container-small.negative .sub-title, #stepfive.container-small.positive .sub-title{
	 width:90%!important;
	 font-size: 1.5em;
 	}

	#steps{
		height: 80%!important;
	}
}

	@media only screen and (max-width: 480px) {
	#steps {
		height: 75%!important;
	}
}

@media only screen and (max-width: 380px) {
#steps {
	height: 85%!important;
}
}

  #stepone, #steptwo, #stepthree, #stepfour, #stepfive {
		height: 50%;
	}

  @media only screen and (max-width: 480px) {
  #stepone, #steptwo, #stepthree, #stepfour, #stepfive {
		height: 35%!important;
		margin-bottom: 75%!important;
	 }
 }

	.container-small.positive .wrapper-icon {
    	position: absolute;
    	right: 0;
    	top: 0;
    	display: block;
    	padding: 6px;
    	border: 6px solid #5f062a;
    	color: #333;
    	text-align: center;
      /*line-height: 0.75em;*/
    	font-size: 2em;
    	width: 50px;
    	height: 50px;
    	box-sizing: border-box;
	}

	.container-small.positive .sub-title {
   		position: absolute;
    	right: 0;
    	top: 55%;
    	width: 50%;
    	display: block;
    	padding: 0.3em 0;
    	display: block;
    	font-size: 1.3em;
    	text-align: right;
    	font-weight: 400;
			z-index: 200;
	}

	.container-small.negative .sub-title {
   		position: absolute;
    	left: 0;
    	top: 55%;
    	width: 400px;
    	display: block;
    	padding: 0.3em 0;
    	display: block;
    	font-size: 1.3em;
    	text-align: left;
    	font-weight: 400;
			z-index: 200;
	}

	@media only screen and (max-width: 480px){
		.container-small.negative .sub-title{
			font-size: 1.2em;
		}

		.container-small.positive .sub-title{
			font-size: 1.2em;
		}
	}

	.container-small.positive .title {
    	top: 20%;
    	width: 400px;
	}

	.container-small.negative .wrapper-icon {
    	position: absolute;
    	font-weight: 900;
    	left: 0;
    	top: 0;
    	display: block;
    	padding: 6px;
    	border: 6px solid #5f062a;
    	color: #333;
    	text-align: center;
      /*line-height: 0.75em;*/
    	font-size: 2em;
    	width: 50px;
    	height: 50px;
    	box-sizing: border-box;
	}

	  @media only screen and (max-width: 480px) {
			.container-small.positive .wrapper-icon{
				padding: 4px!important;
	    	border: 4px solid #5f062a!important;
				font-size: 1.5em!important;
				width: 35px!important;
				height: 35px!important;
			}

			.container-small.negative .wrapper-icon{
				padding: 4px!important;
				border: 4px solid #5f062a!important;
				font-size: 1.5em!important;
				width: 35px!important;
				height: 35px!important;
			}

		}

	#portfolio {
		height: 150%!important;
	}

	#portfolio .center-container {
    	width: 90%;
	}

	#contactForm {
    	width: 300px;
	}

	#footer .center-container {
      height: fit-content!important;
	}

@media only screen and (min-width: 481px) and (max-width: 821px) {
	#footer .center-container {
			width: 70%;
	}
}

	#footer .center-button {
    width: 40px;
	}

	.footer-input-message, .footer-input {
	font-size: 2em;
	 border-bottom: solid 1px #fff;
}


 }

  @media screen and (min-width: 180px) and (max-width: 500px){
	  #steps img {width: 50%}
	  #portfolio {
    height: 220%!important;
}
	  #submit {
    height: 150%!important;
}

	 }