/*section.slides*/
@media screen and (max-width: 500px) {
	section.slides {
		background-image: url(images/slides_bg.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		padding: 0%;
		overflow: visible;
		height: 140vw;
	}
	section.slides .overlay {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		position: absolute;
		z-index: 2;
		background-color: rgba(0, 65, 80, 0.91);
		/*		background-color: var(--color-lightblue);*/
	}
	section.slides .video_box {
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	section.slides .video_box video {
		position: absolute;
		top: 0;
		right: 0;
		margin: auto;
		width: 100%;
		z-index: 1;
		display: block;
	}
	section.slides>.wrap {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100%;
		z-index: 2;
		padding:20px 0;
	}
	section.slides .text {
		width: 100%;
		float: left;
		overflow: auto;
		padding: 0 5%;
		box-sizing: border-box;
	}
	section.slides .text h1 {
		font-size: var(--extra-font-size);
		line-height: var(--extra-line-height);
		width: 100%;
		margin: 15px auto;
		color: var(--color-purple);
		text-align: center;
	}
	section.slides .text h2 {
		font-size: var(--subtitle-font-size);
		width: 100%;
		margin: 0 auto;
		color: white;
		padding-top: 20px;
		text-align: center;
	}
	section.slides .buttons {
		width: 100%;
		overflow: auto
	}
	section.slides .buttons .item {
		float: left;
		width: 100%;
		padding: 5px 5px;
		box-sizing: border-box;
	}
	section.slides .buttons .item a {
		width: 100%;
		display: inline-block;
		font-size: 15px;
	}
	section.slides .buttons .item:nth-of-type(2) a {
		background-color: white;
		color: var(--color-darkpurple);
	}
	section.slides .buttons .item:nth-of-type(1) a {
		background-color: var(--color-green);
		color: white;
	}
	section.slides img {
    position: absolute;
    left: 50%;
    top: 95%;
    transform: translate(-50%,-50%);
		width: 110vw;
	}
}
@media screen and (min-width: 501px) and (max-width: 800px) {
	section.slides {
		background-image: url(images/slides_bg.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		padding: 0%;
		overflow: visible;
		height: 460px;
	}
	section.slides .overlay {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		position: absolute;
		z-index: 2;
		background-color: rgba(0, 65, 80, 0.91);
		/*		background-color: var(--color-lightblue);*/
	}
	section.slides .video_box {
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	section.slides .video_box video {
		position: absolute;
		top: 0;
		right: 0;
		margin: auto;
		width: 100%;
		z-index: 1;
		display: block;
	}
	section.slides>.wrap {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100%;
		z-index: 2;
		padding:20px 0;
	}
	section.slides .text {
		width: 100%;
		float: left;
		overflow: auto;
		padding: 0 5%;
		box-sizing: border-box;
	}
	section.slides .text h1 {
		font-size: var(--extra-font-size);
		line-height: var(--extra-line-height);
		width: 100%;
		margin: 15px auto;
		color: var(--color-purple);
		text-align: center;
	}
	section.slides .text h2 {
		font-size: var(--subtitle-font-size);
		width: 100%;
		margin: 0 auto;
		color: white;
		padding-top: 20px;
		text-align: center;
	}
	section.slides .buttons {
		width: 100%;
		overflow: auto
	}
	section.slides .buttons .item {
		float: left;
		width: 100%;
		padding: 5px 5px;
		box-sizing: border-box;
	}
	section.slides .buttons .item a {
		width: 100%;
		display: inline-block;
		font-size: 15px;
	}
	section.slides .buttons .item:nth-of-type(2) a {
		background-color: white;
		color: var(--color-darkpurple);
	}
	section.slides .buttons .item:nth-of-type(1) a {
		background-color: var(--color-green);
		color: white;
	}
	section.slides img {
    position: absolute;
    left: 50%;
    top: 95%;
    transform: translate(-50%,-50%);
		width: 110vw;
		max-width: 400px;
	}
}
@media screen and (min-width: 801px) and (max-width: 1200px) {
	section.slides {
		background-image: url(images/slides_bg.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		padding: 0 10px;
		overflow: visible;
		height: 450px;
	}
	section.slides .overlay {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		position: absolute;
		z-index: 2;
		background-color: rgba(0, 65, 80, 0.91);
		/*		background-color: var(--color-lightblue);*/
	}
	section.slides .video_box {
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	section.slides .video_box video {
		position: absolute;
		top: 0;
		right: 0;
		margin: auto;
		width: 100%;
		z-index: 1;
		display: block;
	}
	section.slides>.wrap {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100%;
		z-index: 2;
	}
	section.slides .text {
		width: 50%;
		float: left;
		overflow: auto;
	}
	section.slides .text h1 {
		font-size: var(--extra-font-size);
		line-height: 56px;
		width: 100%;
		margin: 10px auto;
		color: var(--color-purple);
	}
	section.slides .text h2 {
		font-size: var(--subtitle-font-size);
		width: 100%;
		margin: 0 auto;
		color: white;
		padding-top: 0px;
	}
	section.slides .buttons {
		width: 100%;
		overflow: auto
	}
	section.slides .buttons .item {
		float: left;
		width: 100%;
		padding: 5px 10px;
		box-sizing: border-box;
	}
	section.slides .buttons .item a {
		width: auto;
		display: inline-block;
		font-size: 16px;
	}
	section.slides .buttons .item:nth-of-type(2) a {
		background-color: white;
		color: var(--color-darkpurple);
	}
	section.slides .buttons .item:nth-of-type(1) a {
		background-color: var(--color-green);
		color: white;
	}
	section.slides img {
		position: absolute;
		top: 0;
		right: 0px;
		bottom: 0;
		margin: auto;
		width: 50%;
	}
}
@media screen and (min-width: 1201px) {
	section.slides {
		background-image: url(images/slides_bg.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		padding: 0 5%;
		overflow: visible;
		height: 600px;
	}
	section.slides .overlay {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		position: absolute;
		z-index: 2;
		background-color: rgba(0, 65, 80, 0.91);
		/*		background-color: var(--color-lightblue);*/
	}
	section.slides .video_box {
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	section.slides .video_box video {
		position: absolute;
		top: 0;
		right: 0;
		margin: auto;
		width: 100%;
		z-index: 1;
		display: block;
	}
	section.slides>.wrap {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100%;
		z-index: 2;
	}
	section.slides .text {
		width: 40%;
		float: left;
		overflow: auto;
	}
	section.slides .text h1 {
		font-size: var(--extra-font-size);
		line-height: 80px;
		width: 100%;
		margin: 30px auto;
		color: var(--color-purple);
	}
	section.slides .text h2 {
		font-size: var(--subtitle-font-size);
		width: 100%;
		margin: 0 auto;
		color: white;
		padding-top: 20px;
	}
	section.slides .buttons {
		width: 100%;
		overflow: auto
	}
	section.slides .buttons .item {
		float: left;
		width: auto;
		padding: 10px 10px;
		box-sizing: border-box;
	}
	section.slides .buttons .item a {
		width: auto;
		display: inline-block;
	}
	section.slides .buttons .item:nth-of-type(2) a {
		background-color: white;
		color: var(--color-darkpurple);
	}
	section.slides .buttons .item:nth-of-type(1) a {
		background-color: var(--color-green);
		color: white;
	}
	section.slides img {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 50%;
	}
}
/*section.call_center*/
@media screen and (max-width: 500px) {
	section.call_center {
		padding: 0 0 0px 0;
	}
	section.call_center>.wrap{
		padding: 0;
	}
	section.call_center img.banner_mobile {
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
		display: block;
	}
	section.call_center img.banner{
		display: none;
	}
}
@media screen and (min-width: 501px) and (max-width: 800px) {
	section.call_center {
		padding: 0 0 0px 0;
		background-color: #09b594;
	}
	section.call_center>.wrap{
		padding: 0;
	}
	section.call_center img.banner_mobile {
		width: 65%;
		max-width: 1000px;
		margin: 0 auto;
		display: block;
	}
	section.call_center img.banner{
		display: none;
	}
}
@media screen and (min-width: 801px) and (max-width: 1280px) {
	section.call_center {
		background-color: var(--color-green);
		padding: 0 0 50px 0;
	}
	section.call_center img.banner {
		width: 70%;
		max-width: 1000px;
		margin: 0 auto;
		display: block;
	}
	section.call_center img.banner_mobile{
		display: none;
	}
}
@media screen and (min-width: 1281px) {
	section.call_center {
		background-color: var(--color-green);
		padding: 0 0 50px 0;
	}
	section.call_center img.banner {
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
		display: block;
	}
	section.call_center img.banner_mobile{
		display: none;
	}
}
/*section.writeup*/
@media screen and (max-width: 500px) {
	section.writeup {}
	section.writeup>.wrap {}
	section.writeup .lf {
		width: 100%;
		height: auto;
		float: left;
		padding-bottom: 30px;
	}
	section.writeup .lf img {
		width: 100%;
	}
	section.writeup .rt {
		overflow: auto;
		float: left;
		width: 100%;
		padding-left: 0px;
		box-sizing: border-box;
	}
	section.writeup .rt .section_title {
		text-align: left;
	}
	section.writeup ul{
		margin: 0px 0;
		padding: 0px 0px 0px 18px;
	}
}
@media screen and (min-width: 501px) and (max-width: 800px) {
	section.writeup {}
	section.writeup>.wrap {}
	section.writeup .lf {
		width: 100%;
		height: auto;
		float: left;
		padding-bottom: 30px;
	}
	section.writeup .lf img {
		width: 100%;
	}
	section.writeup .rt {
		overflow: auto;
		float: left;
		width: 100%;
		padding-left: 0px;
		box-sizing: border-box;
	}
	section.writeup .rt .section_title {
		text-align: left;
	}
	section.writeup ul{
		margin: 0px 0;
		padding: 0px 0px 0px 18px;
	}
}
@media screen and (min-width: 801px) and (max-width: 1200px) {
	section.writeup {}
	section.writeup>.wrap {
		max-width: 1200px;
	}
	section.writeup .lf {
		width: 50%;
		float: left;
	}
	section.writeup h1 {
		color: var(--color-darkblue);
	}
	section.writeup .rt {
		overflow: auto;
		float: left;
		width: 50%;
		padding-left: 50px;
		box-sizing: border-box;
	}
	section.writeup .rt {
		text-align: left;
		border-left: 5px solid var(--color-darkblue);
		box-sizing: border-box;
	}
}
@media screen and (min-width: 1201px) {
	section.writeup {}
	section.writeup>.wrap {
		max-width: 1200px;
	}
	section.writeup .lf {
		width: 50%;
		float: left;
	}
	section.writeup h1 {
		color: var(--color-darkblue);
	}
	section.writeup .rt {
		overflow: auto;
		float: left;
		width: 50%;
		padding-left: 50px;
		box-sizing: border-box;
	}
	section.writeup .rt {
		text-align: left;
		border-left: 5px solid var(--color-darkblue);
		box-sizing: border-box;
	}
}
/*section.services*/
@media screen and (max-width: 500px) {
	section.services {
		background-color: var(--color-lightblue);
		padding: 0 10%;
		margin: 0px 0 40px 0;
	}
	section.services>.wrap {
		position: relative;
		padding: 30px 0;
		overflow: visible;
		height: 400px;
	}
	section.services .lf {
		width: 100%;
		height:60vw;
		overflow: auto;
		float: left;
		background-color: var(--color-darkblue);
		position: relative;
	}
	section.services .lf h1 {
		text-align: left;
		padding: 30px;
		color: white;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	section.services .rt {
		width: 100%;
		overflow: auto;
		float: right;
		padding: 25px 0 25px 25px;
		box-sizing: border-box;
	}
	section.services .rt ul {
		float: left;
		font-size: var(--paragraph-font-size);
		padding: 0 0px;
		margin: 0;
		box-sizing: border-box;
	}
	section.services .rt ul li {
		padding: 8px 0;
		list-style-type: none;
		position: relative;
	}
	section.services .rt ul li:before {
		content: "\2714";
		color: var(--color-dark-blue);
		font-size: 21px;
		position: absolute;
		left: -25px;
		top: 6px;
	}
}
@media screen and (min-width: 501px) and (max-width: 800px) {
	section.services {
		background-color: var(--color-lightblue);
		padding: 0 10%;
		margin: 0px 0 40px 0;
	}
	section.services>.wrap {
		position: relative;
		padding: 30px 0;
		overflow: visible;
		height: 400px;
	}
	section.services .lf {
		width: 100%;
		height:60vw;
		overflow: auto;
		float: left;
		background-color: var(--color-darkblue);
		position: relative;
	}
	section.services .lf h1 {
		text-align: left;
		padding: 30px;
		color: white;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	section.services .rt {
		width: 100%;
		overflow: auto;
		float: right;
		padding: 25px 0 25px 25px;
		box-sizing: border-box;
	}
	section.services .rt ul {
		float: left;
		font-size: var(--paragraph-font-size);
		padding: 0 0px;
		margin: 0;
		box-sizing: border-box;
	}
	section.services .rt ul li {
		padding: 8px 0;
		list-style-type: none;
		position: relative;
	}
	section.services .rt ul li:before {
		content: "\2714";
		color: var(--color-dark-blue);
		font-size: 21px;
		position: absolute;
		left: -25px;
		top: 6px;
	}
}
@media screen and (min-width: 801px) and (max-width: 1280px) {
	section.services {
		background-color: var(--color-lightblue);
		padding: 0 10%;
		margin: 100px 0 200px 0;
		overflow: visible;
	}
	section.services>.wrap {
		position: relative;
		padding: 30px 0;
		overflow: visible;
		height: 400px;
	}
	section.services .lf {
		width: 40%;
		height: 520px;
		overflow: auto;
		float: left;
		background-color: var(--color-darkblue);
		position: absolute;
		left: 0%;
		top: 50%;
		transform: translate(-0%, -50%);
	}
	section.services .lf h1 {
		text-align: left;
		padding: 30px;
		color: white;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	section.services .rt {
		width: 60%;
		overflow: auto;
		float: right;
		padding-left: 35px;
		box-sizing: border-box;
	}
	section.services .rt ul {
		float: left;
		font-size: var(--paragraph-font-size);
		padding: 0 40px;
		margin: 0;
		box-sizing: border-box;
	}
	section.services .rt ul li {
		padding: 8px 0;
		list-style-type: none;
		position: relative;
	}
	section.services .rt ul li:before {
		content: "\2714";
		color: var(--color-dark-blue);
		font-size: 21px;
		position: absolute;
		left: -25px;
		top: 6px;
	}
}
@media screen and (min-width: 1281px) {
	section.services {
		background-color: var(--color-lightblue);
		padding: 0 10%;
		margin: 100px 0 200px 0;
		overflow: visible;
	}
	section.services>.wrap {
		position: relative;
		padding: 30px 0;
		overflow: visible;
		height: 400px;
	}
	section.services .lf {
		width: 40%;
		height: 520px;
		overflow: auto;
		float: left;
		background-color: var(--color-darkblue);
		position: absolute;
		left: 0%;
		top: 50%;
		transform: translate(-0%, -50%);
	}
	section.services .lf h1 {
		text-align: left;
		padding: 30px;
		color: white;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	section.services .rt {
		width: 60%;
		overflow: auto;
		float: right;
		padding-left: 35px;
		box-sizing: border-box;
	}
	section.services .rt ul {
		float: left;
		font-size: var(--paragraph-font-size);
		padding: 0 40px;
		margin: 0;
		box-sizing: border-box;
	}
	section.services .rt ul li {
		padding: 8px 0;
		list-style-type: none;
		position: relative;
	}
	section.services .rt ul li:before {
		content: "\2714";
		color: var(--color-dark-blue);
		font-size: 21px;
		position: absolute;
		left: -25px;
		top: 6px;
	}
}
/*section.outro*/
@media screen and (max-width: 500px) {
	section.outro {
		padding: 0px;
	}
	section.outro>.wrap {
		padding: 30px 30px 30px 30px;
		max-width: 1200px;
	}
	section.outro h2 {
		color: var(--color-green);
		font-weight: bold;
	}
}
@media screen and (min-width: 501px) and (max-width: 800px) {
	section.outro {
		padding: 0px;
	}
	section.outro>.wrap {
		padding: 30px 30px 30px 30px;
		max-width: 1200px;
	}
	section.outro h2 {
		color: var(--color-green);
		font-weight: bold;
	}
}
@media screen and (min-width: 801px) and (max-width: 1280px) {
	section.outro {
		padding: 0px;
	}
	section.outro>.wrap {
		padding: 30px 30px 90px 30px;
		max-width: 1200px;
	}
	section.outro h2 {
		color: var(--color-green);
		font-weight: bold;
	}
}
@media screen and (min-width: 1281px) {
	section.outro {
		padding: 0px;
	}
	section.outro>.wrap {
		padding: 30px 30px 90px 30px;
		max-width: 1200px;
	}
	section.outro h2 {
		color: var(--color-green);
		font-weight: bold;
	}
}