:root {
--yellow: #F1F806;
--yellowLight: #F6F472;
--red: #D00D16;
--blue: #002830;
--orange: #E97401;
--pink: #F5555C;
  --grey: #A3A0A0;
  --green: #0DBEB4;

--blueDark: #131328;
--blueLight:#46B5B5;
--red:#B40B15;
--grey:#D3D0D0;
}


html, body {margin:0; padding: 0; font-family:'Montserrat';}
body { font-size: 20px;  line-height: 1.8;  width: 100%}
body a {color: #fff}
.dot{color:#E67204; font-size: 12px; top: -7px; margin: 0 5px; position:relative}
html {color:var(--blueDark); width: 100%;}
#main {width :100%}

.txtUp{text-transform: uppercase; }

h1.top{margin: 20px auto 100px}

h1 {font-family:'Montserrat'; font-weight: 600; font-size: 2.5em; line-height: 1.4; margin: 20px auto 20px;text-transform: uppercase; width: fit-content; text-align: center;}

h1, h2 {position: relative;    position: relative;
    z-index: 2;}

#imgB1{position: absolute; right:0; z-index: 1; }

#bkg1{background-color:var(--blueDark); height: 650px; width: 100%; background-repeat: no-repeat; position:relative}

#bkg_e1{position: absolute; background-image: url("images/banner1.png"); height: 650px; width: 100%; background-repeat: no-repeat;}

.container2 {background-color:#fff; background-image: url("images/bkg3___.png"); color:#37447E; position: relative; padding: 20px 60px 80px 60px; border-bottom: 1px solid #C1C2C5}

.container2 h1 {width: 90%;  margin: 20px auto 10px;
    float: left;
}
.cont{width: 90%; margin: 0px auto; display: flex;
    flex-wrap: wrap; justify-content: space-between}
.cBlue{color:var(--blueLight)}

.w30 img{width: 95%; margin: 0 auto}
.w70 img{width: 60%; margin: 0 auto}
.w50 {width: 50%}
.w50 img{width: 75%}
.w100 {clear: both; padding-top: 0px; width:100%}
.cright_{float: right; }
.cleft_{ float: left; }
.cTxt {color:var(--blueDark); padding: 0; font-size: 0.9em; line-height:1.3}
.cright.cTxt { position: absolute__; right: 5%}
.cright img {float:right}

.cleft.cTxt {position: absolute__; left: 5%}
.title{font-weight:900; color:var(--blueDark); width: 100%;  text-transform: uppercase; width: 710px;
    padding: 0 5%}
	.title .red{color:var(--red)}
.title.cright {float: right; text-align:right; background-image: linear-gradient(to left, var(--grey), #fff);}
.title.cleft {float: left; text-align:left; background-image: linear-gradient(to right, var(--grey), #fff);}

.contTxt{margin: 20px 0}
.btn.top {
	background-color: var(--red);
	color:#fff;
    cursor: pointer;
    border: 1px solid #fff;
	width: fit-content;
    padding: 5px 20px;
    position: absolute;
    bottom: 100px; left: 15%}
	
#footer {color:#fff; font-family:'Montserrat'; background-color:var(--blueDark); font-weight: 300; position: relative}

#el2 {position: absolute;
    width: 30%;
    right: 0;
	bottom:0
	}


#err {color: var(--red);}

#flex2 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.news {
    margin: 20px auto;
    margin: 20px auto;
    padding: 5px;
    background-color: #fff;
}
.news img {
    width: 100%;
    margin:  0;
}
#contact, .block {
    width: 300px;
    margin: 0px auto;}
#contact input, #contact textarea {font-weight: 900; padding: 5px; margin: 3px auto; width: calc(100% - 20px);
font-size: 18px;}
	
	
.btn {
	background-color: var(--red);
    color: #fff;
    cursor: pointer;
    border: 2px solid var(--red);
    padding: 5px;
    width: 80%;
    margin: 25px auto;
    text-align: center;
    font-size: 18px;
}




.left {width: 90%; margin: 0 auto}
/*
.left, .right {display:block; float: left}
.left {width: calc(75% - 100px); padding-right: 100px}
.right {width: calc(25% - 2px); border-left: 1px solid #fff}
.right img {width: 80%}

*/

#grid {border-top: 1px solid #fff; padding-top: 30px}
.spot {display: block; width: 30%; margin: 0 20px 20px 0; float: left}
.item {display: block; width: calc(25% - 22px); margin: 10px;  float: left; padding: 0}
.rest .item {display: block; width: calc(10% - 12px); margin: 5px;  float: left; padding: 0}
.item img {display: block; width:100%}

.clear {width: 100%; clear:both}
.clearTop {width: 100%; clear:both; border-top:1px solid #fff; margin: 5px 0 20px 0}
.flex {
	display: flex; /* or inline-flex */
	flex-wrap: wrap;
	width: 100%;
}

.fItem{
	display: block;
	padding: 10px;
	margin: 10px;
	width: calc(30% - 2px);
	min-width: 300px;
	order: 1; 	
	margin: 0 auto
}
.fItem img {width: 100%}

		
.testimonials {min-width: 320px; margin: 0 auto}
.testimonials p {sans-serif; font-size:22px; line-height: 1.5; color:#fff;}
.testimonials img.face {width:200px; float:left; margin: 0 20px 10px 0}

.samples img { dispaly:block; width: calc(25% - 20px); padding: 10px}
.samples2 img { dispaly:block; width: calc(35% - 20px); padding: 10px}



#video1{    width: calc(90% - 20px); 
    display: block;
	z-index: 10;
    position: relative; border-radius: 10px;
    border: 5px solid #fff;;
	margin: 0 auto}
	




#bt2 
{background: linear-gradient(to right, #fff 50%, var(--red) 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
}
#bt2.step2 {
    background-position: left;
}

#btSend,  #btDone{height:34px}
#btSend.hid, #btLoading.hid, #btDone.hid{height:0px}

.hid, .loading.hid  {height: 0; overflow: hidden; display: block}

.loading {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 20px;
  margin: 5px auto;
}
.loading div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background: var(--red);
  animation: loading 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.loading div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.loading div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}
.loading div:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}
@keyframes loading {
  0% {
    top: -6px;
    height: 64px;
	}
	50%, 100% {
		top: 4px;
		height: 15px;
	}
}

.checkmark {
    display:block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
	margin:0 auto;
	    top: 10px;
    position: relative;
}

.checkmark_stem {
    position: absolute;
    width:3px;
    height:19px;
    background-color:#fff;
    left:11px;
    top:-5px;
}

.checkmark_kick {
    position: absolute;
    width:13px;
    height:3px;
    background-color:#fff;
    left:1px;
    top:12px;
}




.sep {height: 20px;
    width: 100%;
	border-bottom: 1px solid #eee}

.container {
  width: 100%
}
.item {
  flex-basis:  | auto; 
}


@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 

	h1 {font-size: 1.1em;}
	#imgB1 {width: 95%;top: 130px;}
	#imgB1.pgPartner {top: 280px;}
	#topList{top:190px; font-size: 1em}
	.btn.top {bottom:50px; width: 300px; left: calc( 50% - 171px);}
	.w30{width:100%; }
	.w50{width:100%; }
	.w70{width: 100% }
	.w70.cright {padding-left:0}
	.w70.cleft {padding-right:0}
	.cright.cTxt, .cleft.cTxt {text-align: left;}
	.orderD1 {order: 2}
	.orderD2 {order: 1}
	.title{margin: 20px 0 0px;}
	.w50 img, .cright img {float:none; display:block; margin: 0 auto; width: 90%}
}

@media screen and (min-width: 1200px) {
	h1 {font-size: 2.5em;}
	#imgB1 {width: 55%;top: 150px;}
	#imgB1.pgPartner {top: 150;}
	#topList{top:0; font-size: 1.5em}
	.btn.top {bottom: 100px; width: fit-content; left: 15%}
	.w30{width:30%; }
	.w50{width:50%; }
	.w50 img{width: 75%}
	.w70{width: calc(70% - 200px) }
	.w70.cright {padding-left:150px}
	.w70.cleft {padding-right:150px}
	.cright.cTxt {text-align: right; }
	.cleft.cTxt {text-align: left; }
	.orderD1 {order: 1}
	.orderD2 {order: 2}
	.title{margin: 20px 0 30px;}
	.cright img {float:right; width: 70%}
}