:root {
	
	--green:#4CABA6;
	--white: #F2F2F2;
	--pinkL: #fef0eb;
	--pink: #F2CBBD;
	--red: #8E2323;
	--choco: #260104;
	--plum: #BF8578;
	--white: #F2F0F0;
	--blue: #1E3D58; 
	--blueL: #4A647F;
	--grey: #7f888f;
	--blue-link: #2D4682;
	--top: 55px;
	--yellow: #F2F527;
}

body{ background-color: var(--white); margin: 0; font-family: 'Montserrat', sans-serif;}

#main {min-height: 700px}

#menuLogin {cursor:pointer; position: absolute;
    color: #fff;
    text-decoration: none;
    top: 20px;}
#menuSignup{
position: absolute;
    color: var(--blue);
	background-color: #fff;
    padding: 6px 20px;
    border-radius: 20px;
	border-radius: 20px;
    text-decoration: none;
    top: 14px;
}

.how2 {
    background-color: #fff;
    font-family: Roboto;
    position: relative;
    top: -3px;
    margin: 0 0 0 20px;
    color: var(--blue-link);
    font-size: 18px;
    line-height: 0.8;
    cursor: pointer;
    width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid var(--blue-link);
    display: inline-block;
}
.descr {
    border-bottom: 1px solid #ddd;
   padding: 10px;
    line-height: 1.4;
    background-color: #eee;
}
.errored {
    background-color: var(--pink);
}

.step {height: fit-content; position: relative; transition: left .5s ease-out; left: 0; width: 100%}
.step.before {transition: left .5s ease-out; left: +200%; height: 0;}
.step.after, #step1.after, #step2.after, #step1.before, #step2.before{transition: left .5s ease-out; left: -200%; height: 0;}

.step span {margin: 20px auto 5px;
    display: block;
    width: calc(100% - 50px);
    line-height: 1.2;
}

.hid {height:0; padding: 0; display: none}


.container2 {width: 100%}
.middle { margin: 0 auto;}

.logoLink {width: 100px; display:block; margin: 0 auto}

.questionMark {
    position: relative;
    top: 3px;
	    font-weight: 700;
}
#topNavBkg { background-color: var(--blue); opacity: 1; transition: opacity 0.5s;
  background-size: cover; /* Cover the entire element */
  background-position: center; /* Center the image */
  background-repeat: repeat-x; /* Do not repeat the image */
  position:absolute; height: 50px; width: 100%
  }
  
#topNavBkg.hide {opacity:0.1; transition: opacity 0.5s;}


#topNav.hide {
color:var(--green)
}

#topNav .middle {
  margin: 10px auto;
}

.middle .container2{ padding-top: 70px}

#menu a { text-decoration : none; color:#fff}


#err {
	color: var(--red);
	padding: 15px 35px;
	width: 90%;
	max-width: calc(400px - 70px);
	margin: 10px auto;
}
#err.hid {
	padding: 0;
	display: none;
}
	
.circle {
  width: 50px;
  height: 50px;
  border: 3px solid var(--red);
  border-radius: 50%;
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7
}

.circle.hid {opacity:0}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 12px solid var(--red);
  opacity: 0.7
}

.item {
  flex-basis:  | auto; 
}

#col2-1 {width: 60%}
#col2-2 {width: calc(40% - 40px); padding-left: 40px}


#bizPortalArrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
  transition: transform 0.3s ease;
  float: right;
      position: relative;
    top: 10px;
}

#bizPortalArrow.active {
  transform: rotate(360deg);
  border-top-color: white;
  border-bottom: 6px solid white;
  border-top: none;
}

#portfolioMenu{height: 370px; transition: height 0.5s ease-out; overflow: hidden;}
#portfolioMenu.hid {height: 0; overflow: hidden; }


h1, h2 {
    color: var(--red);
    text-align: center;
    width: 100%;
}

#icons a {color: var(--plum)}
#icons div:hover a{color: var(--red)}

#icons img {cursor:pointer}
#icons img{opacity: 0.5;}
#icons img:hover{opacity: 1}

#icons {display: flex;  
	flex-wrap: wrap;
	justify-content: space-between}



#pTxt1{    max-width: 280px; padding: 5px;
    margin: 50px auto 0px;}

.closeLink {margin: 10px auto;
width: fit-content; cursor:pointer}

#closeMenu1,  #closeMenu2 {color:var(--white); cursor:pointer}
#closeMenu1 {    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
	}
#closeMenu2{margin: 50px auto 10px auto;
    width: fit-content;}
	
.menu__item {
	cursor: pointer;
  display: block;
  font-size: 16px;
  padding: 20px 0 20px 10px;
  border-bottom:1px solid var(--white);
  color: var(--white);
  text-decoration: none;
  -webkit-transition-duration: .25s;
       -o-transition-duration: .25s;
          transition-duration: .25s;
	text-transform: capitalize;
	text-transform: uppercase;
}

.menu__item:hover {
  background-color: var(--white);
  color: var(--red);
}
.menu__item:active {
  background-color: var(--white);
  color: var(--red);
}
.menu__item:focus {
  background-color: var(--white);
  color: var(--red);
}
.menu__item.active{
  background-color: var(--white);
  color: var(--red);
  cursor: auto;
}


#footCopy{margin: 20px auto;
width: fit-content;}

.red{color:var(--red)}

#logoTop {width: 55px;
    margin: 0 auto;
    top: -18px;
    position: relative;}
#logo2 {margin: 50px auto;
    width: 180px;}
#logoTop img, #logo2 img{display:block; width:100%}

html, body {margin: 0 ; padding:0}
.courgette {
  font-family: "Courgette", cursive;
  font-weight: 400;
  font-style: normal;
  overflow:hidden
}

.icon2{    display: block;
    margin: 0px auto; position:relative; top: -20px}
#icons {  position: absolute; top: 25px}

#signature {display: block;
    float: right;
    font-size: 38px;}

.cal-sans {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.raleway {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.great-vibes  {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-style: normal;
}
.mochiy-pop-one {
  font-family: "Mochiy Pop One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.rocknroll {
  font-family: "RocknRoll One", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.parent {
  display: flex;
  justify-content: center; /* horizontally centers */
  align-items: center;     /* vertically centers */
  _height: 100vh;           /* full viewport height */
}
.flex {
	display: flex; /* or inline-flex */
	flex-wrap: wrap;
	width: 100%;
	justify-content: space-between
}
.imgAbs { position: absolute; bottom: 70px}

#menuBtn {    top: 20px;
    position: relative;
    left: 20px; cursor:pointer;
	color:  #fff;
	width: fit-content;
	}

#menu {  height: 630px; background-color: var(--blueL);position: absolute;
    
    width: 40%;
	transition: height 0.5s ease-in-out;
	z-index:100; overflow:hidden}
	
#menu.extended{  height: 1010px; transition: height 0.5s ease-in-out;}

#menu ul {list-style: none; padding: 0; margin: 50px auto;}
#menu ul ul{list-style: none; padding: 0; margin: 0px auto;}
#menu a {text-decoration:none; color:var(--white)}

#menu.hideMenu, #menu.extended.hideMenu {height: 0px; }

#topNav {
	color:var(--red);
	background-color:var(--blue); 
  font-size: 18px;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
  height: 55px;
  -webkit-transition: height 0.5s;
  -o-transition: height 0.5s;
  transition: height 0.5s;
  top: 0;
  overflow: visible;
  z-index: 100;
  width: 100%;
  max-width: 1700px;
  line-height:1;
  margin: 0 auto;
  
}


.flex-container{display: flex;
	 flex-wrap: wrap;
	 flex-direction: row-reverse}
	 
.flex2 {display: flex;
	 flex-wrap: wrap;}
.footer {background-color: var(--blue); color:#fff; min-height: 150px;     padding: 10px 0 50px 0;}
.footer a {
	
    color: var(--white);
    display: block;
}

.flex2 {display: flex; justify-content: space-around;}

.shadow{box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; width:80%; display:block; ;  border: 3px solid var(--white);
	    margin: 20px auto 0; line-height: 0}
#block1 {border-top: 2px solid var(--red);}
#block2 { margin: 40px auto 30px}
#block2 h2{color:var(--red); width: 100%; text-align:center; font-family: "Raleway", sans-serif;
    font-weight: 600;}
#block2 .col { padding: 0 0 85px; position: relative}
#block2 .col p { padding: 0 20px 0 30px}
#block1 img {width:80%;}
	
#block1 .col2 {background-color: #000; position:relative}

#block2 picture {box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; width:80%; display:block; ;  border: 3px solid var(--white);
	    margin: 20px auto 0; line-height: 0}
#block2 picture img{width:100%; }
#block2 img {
	
	display:block;
    margin: 0 auto;
    display: block;}
#block1 p {font-size: 34px;
    width: 80%;
    margin: auto;
    display: block;
    height: fit-content;
    position: relative;
    text-align: center;}
	


.btnW{color:var(--white); cursor:pointer; border: 1px solid var(--white); border-radius: 5px; margin : 40px auto 0; width: 180px; 
padding: 10px 20px; text-align:center;
	}

.btn4 {
    color: var(--blue);
    cursor: pointer;
    border: 1px solid var(--blue);
    padding: 5px 15px;
    width: 220px;
    margin: 25px auto 20px auto;
    text-align: center;
    font-size: 18px;
    line-height: 1.2;
}


.btn { color:var(--red); cursor:pointer; border: 1px solid var(--red); border-radius: 5px; margin : 40px auto 0; width: 100px; 
padding: 10px 20px; text-align:center; }

.btn:hover {background-color: var(--red); color:#fff}


#bt21, #bt22, #btn23
{color:#fff; background: linear-gradient(to right, #fff 50%, var(--red) 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
}
#bt22.hid {height: 0; margin: 0 auto; transition: .5s ease-out;}


#btSend,  #btDone{height:20px}
#btSend, #btSend2 {color:#fff}

#btSend.hid, #btLoading.hid, #btDone.hid,
#btSend2.hid, #btLoading2.hid, #btDone2.hid
{height:0px}

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

.loading {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 20px;
  margin: 0 auto;
}
.loading div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background: #fff;
  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: 5px;
    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;
}

#flex2, .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;
}

@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
	
	#icons {width: 110px}
	#icons svg {height: 20px; width: 20px}
	#icons {top: 30px;}
	
	#menu {top: var(--top); width: 100%;}
	#menu ul {width: 90%; }
	#icons { right: 10px;}
	#icons img{height: 25px; margin: 0px 5px;}
	#signature {margin: 10px 0;}
	
	.middle{ width: 95%}
	.flex > * {display: block; margin: 10px auto; width:90%}
	.footer .flex > * { width:30%}
	#footer flex2 div{width: 80%}
	.footer .flex2 .col{width: 80%}
	#col2-1, #col2-2 {width: 95%; padding: 0; margin: 0 auto}
	.news {width: 95%;}	
		#menuSignup{right: 20px;}
	#menuLogin {right: 50px;}
}

@media screen and (min-width: 1200px) {
	
	#icons {width: 180px}
	#icons svg {height: 30px; width: 30px}
	#icons {top: 20px;}
	
	
	#menu {top: var(--top); width: 40%;}
	#menu ul {width: 60%; }
	#icons { right: 50px;}
	#icons img{height: 30px; margin: 0px 15px}
	#signature {margin: 50px 0 0}
	.middle{ width: 80%}
	.flex > * {display: block; margin: 10px auto; width:30%}
	
	#footer flex2 div{width: 30%}
	.footer .flex2 .col{width: 30%}
	#col2-1 {width: 60%}
	#col2-2 {width: calc(40% - 40px); padding-left: 40px}
	.news {width: 30%;}
		#menuSignup{right: 70px;}
	#menuLogin {right: 200px;}
}