/*
Description: start.tpl styles
*/

@media screen and (min-width: 320px)
{
	.master-slider .ms-view,
	.master-slider .ms-view .ms-mask-frame,
	.master-slider [data-id="start"].ms-slide {
		height: 350px !important;
	}
	.master-slider .ms-view {
		background-color: #005AA9;
	}
	.master-slider [data-id="start"] .ms-slide-layers {
		overflow: initial;
		overflow: inherit;
	}
	.master-slider [data-id="start"] .ms-layer-mask img {
		height: 100%;
	}
	.master-slider [data-id="start"] .ms-layer h2 {
		line-height: normal;
	}
	.master-slider [data-id="start"] .ms-layer .buttons a.btn {
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 0 14px 10px 0 #00000010;
		margin-right: 15px;
		font-size: 14px;
	}
	.colored-bg-darkgrey {
		background-color: #676767;
	}
	.catseo.colored-bg-seo {
		background: rgb(12,85,157);
		background: -moz-linear-gradient(90deg, rgba(12,85,157,1) 0%, rgba(6,42,78,1) 100%);
		background: -webkit-linear-gradient(90deg, rgba(12,85,157,1) 0%, rgba(6,42,78,1) 100%);
		background: linear-gradient(90deg, rgba(12,85,157,1) 0%, rgba(6,42,78,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0c559d",endColorstr="#062a4e",GradientType=1);
    }
    .colored-bg-seo,
	.colored-bg-darkgrey {
		color: #fff;
		width: 100vw;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
	}
	.colored-bg-darkgrey > .flex-box {
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		max-width: 1245px;
		margin: 0 auto;
		padding: 100px 30px;
		align-items: center;
		column-gap: 30px;
	}
	.colored-bg-darkgrey > .flex-box > div {
		flex-basis: calc(100% - 30px);
		margin: 0 auto 30px;
	}
	.colored-bg-darkgrey > .flex-box a {
		color: #fff;
		padding: 0 0 0 40px;
		position: relative;
		animation: ctaArrowTextStart 0.45s cubic-bezier(0.23, 0.46, 0.4, 1) forwards;
	}
	.colored-bg-darkgrey > .flex-box a:hover {
		text-decoration: none;
	}
	.colored-bg-darkgrey > .flex-box a:before {
	    height: 1px;
	    width: 25px;
	    position: absolute;
	    content: '';
	    left: 0;
	    display: block;
	    top: 50%;
	    background-color: #fff;
	    transform-origin: left;
	    -webkit-transform: translateY(calc(-50% + 0.5px)) translateZ(0);
	    transform: translateY(calc(-50% + 0.5px)) translateZ(0);
	    animation: ctaArrowLineStart 0.45s cubic-bezier(0.23, 0.46, 0.4, 1) forwards;
	}
	.colored-bg-darkgrey > .flex-box a:hover:before {
	    animation: ctaArrowLineEnd 0.45s cubic-bezier(0.23, 0.46, 0.4, 1) forwards;
	    left: -5px;
	}
	.colored-bg-darkgrey > .flex-box a:after {
	    position: absolute;
	    left: 5%;
	    top: 46%;
	    width: 16px;
	    font-size: 20px;
	    opacity: 0;
	    transition: opacity 100ms ease-out;
	    color: #fff;
	    -webkit-text-stroke: 0.5px #ffffff;
	    content: "\e90e";
	    right: -10px;
	    padding-left: 5px;
	    font-family: christiani;
	    transform: translateY(-50%);
	}
	.colored-bg-darkgrey > .flex-box a:hover:after {
	    opacity: 1;
	    transition: opacity 50ms 0.40s ease-out;
	}
    .colored-bg-darkgrey > .flex-box a:hover {
	    animation: ctaArrowTextEnd 0.45s cubic-bezier(0.23, 0.46, 0.4, 1) forwards;
	    text-decoration: none;
	}
	@keyframes ctaArrowTextStart {
	  0% {
		    transform: translateX(6px);
	  }
	  100% {
			transform: translateX(0);
	  }
	}
	@keyframes ctaArrowTextEnd {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(6px);
		}
	}
	
	@keyframes ctaArrowLineStart {
		0% {
			transform-origin: left;
			transform: scaleX(1.2) translateY(calc(-50% + 0.5px)) translateZ(0);
		}
		100% {
			transform: scaleX(1) translateY(calc(-50% + 0.5px)) translateZ(0);
		}
	}
	
	@keyframes ctaArrowLineEnd {
		0% {
			transform-origin: right;
			transform: scaleX(1) translateY(calc(-50% + 0.5px)) translateZ(0);
		}
		50% {
			transform-origin: right;
			transform: scaleX(0) translateY(calc(-50% + 0.5px)) translateZ(0);
		}
		51% {
		 	transform-origin: left;
		}
		
		100% {
			transform: scaleX(1.2) translateY(calc(-50% + 0.5px)) translateZ(0);
			transform-origin: left;
		}
	}
	.colored-bg-darkgrey > .flex-box > div img {
		border-radius: 5px;
		box-shadow: 0 14px 10px 0 #00000025;
    }
    .colored-bg-seo {
		background: rgb(6,42,78);
		background: -moz-linear-gradient(180deg, rgba(6,42,78,1) 0%, rgba(12,85,157,1) 100%);
		background: -webkit-linear-gradient(180deg, rgba(6,42,78,1) 0%, rgba(12,85,157,1) 100%);
		background: linear-gradient(180deg, rgba(6,42,78,1) 0%, rgba(12,85,157,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#062a4e",endColorstr="#0c559d",GradientType=1);
	}
    .colored-bg-seo .white-block {
		background-color: #fff;
		color: #333;
		border-radius: 5px;
	}
	.seo-first.colored-bg-seo > div {
		margin: 0 auto;
		padding: 50px 30px;
	}
	.seo-first.colored-bg-seo > div {
		max-width: 825px;
	}
	.colored-bg-seo h2 {
		font-size: 45px;
		line-height: 45px;
		margin-top: 0;
	}
	.colored-bg-seo .white-block {	
		box-shadow: 0 8px 10px 0 #00000015;
		display: flex;
		flex-direction: column;
		padding: 15px;
	}
	.colored-bg-seo .white-block > div {	
		flex: 0 0 100%;
		padding: 0px;
		color: #000000;
	}
	.colored-bg-seo .white-block > div:first-child {	
		margin-bottom: 15px;
	}
	.seo-second {	
		padding: 50px 0;
	}
	.seo-second > div:first-child > .row {	
		margin: 0px -15px;
	}
	.seo-second > div {
		padding: 0 15px;
	}
	.seo-second > div:first-child > .row > div {	
		padding: 0 15px;
		margin-bottom: 10px;
	}
	.seo-second img {	
	    box-shadow: rgb(0 0 0 / 24%) 0px 30px 80px;
	    border-radius: 5px;
	    margin: 30px auto 0;
	}
	.checklist {
		display: flex;
		flex-flow: row wrap;
	}
	.checklist-item {
		display: flex;
		align-items: flex-start;
		flex-basis: 100%;
		margin-bottom: 40px;
		color: #676767;
	}
	.checklist-item span {
		padding-right: 10px;
	}
	.checklist-item i {
    	font-size: 25px;
    	padding-right: 10px;
	}
	.seperator {
		width: 100%;
		height: 2px;
		background-color: #d7d7d7;
	}
	.catseo.colored-bg-seo > div > div > div > div.flex-box {
		flex-flow: row wrap;
	}
	.catseo.colored-bg-seo > div {
		width: 100%;
	    padding: 80px 30px;
	    margin: 0 auto;
	}
	.catseo .catseo-box {
		width: 100%;
		padding: 0 15px;
		margin-bottom: 50px;
	}
	.catseo .catseo-box a {
		color:#B3B3B3;
	}
	.catseo.colored-bg-seo h2 {
		margin-bottom: 50px;
	}
	.catseo.colored-bg-seo h3 {
		font-size: 26px;
		line-height: 26px;
		margin-top: 0;
		margin-bottom: 20px;
	}
	.seo-third {
		padding: 0 15px;
		margin-left: -15px;
		margin-right: -15px;
	}
	.rev-banner-container {
		margin: 0;
	}
	.cl-start .hm-content-box .icon i {
		font-size: 40px;
	}
}

@media screen and (min-width: 450px)
{
	.checklist-item {
		flex-basis: 50%;
	}
	.seo-first.colored-bg-seo > div {
		padding: 50px 30px;
	}
	.catseo.colored-bg-seo > div {
	    padding: 80px 30px;
	}
	.colored-bg-darkgrey > .flex-box > div {
		padding: 30px 0;
		flex-basis: 100%;
	}
}
@media screen and (min-width: 690px) {
	.catseo .catseo-box {
		width: 50%;
		margin-bottom: 70px;
	}
	.colored-bg-seo .white-block {	
		flex-direction: row;
		padding: 0;
	}
	.colored-bg-seo .white-block > div {	
		flex: 0 0 50%;
		padding: 30px 15px;
	}
	.colored-bg-seo .white-block > div:first-child {	
		margin-bottom: 0px;
	}
	.master-slider [data-id="start"] .ms-layer .buttons a.btn {
		font-size: 16px;
	}
}	

@media screen and (min-width: 768px)
{
	.master-slider .ms-view,
	.master-slider .ms-view .ms-mask-frame,
	.master-slider [data-id="start"].ms-slide {
		height: 463px !important;
	}
	.colored-bg-darkgrey > .flex-box {
		padding: 100px 15px;
	}
	.colored-bg-darkgrey > .flex-box > div {
		flex-basis: calc(50% - 15px);
		margin-bottom: 0px;
		padding: 0;
	}
	.seo-first.colored-bg-seo > div > div:first-child {
		padding: 0px;
	}
	.colored-bg-seo .white-block {	
		margin-bottom: -100px;
	}
	.seo-second {	
		padding: 150px 0 100px;
	}
	.catseo.colored-bg-seo h2 {
		width: 70%;
		margin: 0px 0px 50px;
		text-align: left;
	}
	.seo-third h4 {
		width: 60%;
		margin: 0 auto;
	}
	.checklist-item {
		flex-basis: 33.333333%;
	}
	.seo-first.colored-bg-seo > div {
		padding: 50px 15px;
	}
	.catseo.colored-bg-seo > div {
	    padding: 80px 15px;
	}
}

@media screen and (min-width: 991px)
{
	.catseo.colored-bg-seo > div,
	.colored-bg-darkgrey .flex-box {
		width: 970px;
	}
	.seo-second img {	
	    margin: 0 auto;
	}
	.catseo.colored-bg-seo h2 {
		width: 100%;
		font-size: 40px;
		line-height: 40px;
		margin: 0px auto 50px;
	}
	.seo-fourth.row {
		margin-left: -15px;
		margin-right: -15px;
	}
}

@media (min-width: 1200px)
{
	.checklist-item {
		flex-basis: 20%;
	}
	.catseo.colored-bg-seo > div,
	.colored-bg-darkgrey .flex-box {
	    width: 1170px;
	}
	.catseo.colored-bg-seo h2 {
		font-size: 50px;
		line-height: 50px;
	}
	.catseo.colored-bg-seo h3 {
		font-size: 37px;
		line-height: 37px;
	}
}

@media screen and (min-width: 1300px)
{
	.catseo.colored-bg-seo > div,
	.colored-bg-darkgrey .flex-box {
		width: 1245px;
	}
}