@import url(https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed:400,700);
@import url(https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/*@import url(https://fonts.googleapis.com/css?family=Lora:400,700);*/

body,html {margin: 0;padding: 0;}

body {
    background: #222831;
    font-family: 'Roboto';
    font-size: 16px;
}

* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
}

.spacer {padding: 10px 0;}

#menu div {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
 	user-select: none;
}

.tr02, .menu-item:after {
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
}
.tr03 {
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}
.tr07 {
	transition: all 0.7s;
	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	-ms-transition: all 0.7s;
	-o-transition: all 0.7s;
}

a, a:focus, a:visited {color: #5D70A2; text-decoration: none;}
a:hover {text-decoration: underline;}

/* Top Panel */
#top {
	font-family: 'Roboto';
    position: relative;
    background: #EBEBEB;
}
#top .bg {
	background: url(../img/wp.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.1;
}
#menu {
	position: relative;
	padding: 20px 35px;
	font-size: 20px;
	height: 85px;
	color: #5B5049;
	z-index: 8;
}
#menu .left {
	float: left;
}
#menu .right {
	float: right;
}
#menu .menu-item, #menu .log-in {
	display: inline-block;
	padding: 10px 2px;
	margin: 0 8px;
	cursor: pointer;
	position: relative;
	outline: none;
	text-decoration: none;
	color: #393E46;
}
#menu .menu-item a {
	text-decoration: none;
	color: #393E46;
}
#menu .menu-item:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%; right: 50%;
	width: auto;
	border-bottom: 3px solid transparent;
}
#menu .menu-item:hover:after, #menu .menu-item.s:after {
	left: 2px; right: 2px;
	border-bottom-color: #B1B7C1; /*AAA*/
}
#menu .log-in {
	padding: 8px 18px;
	border: 2px solid #BBB;
	background: transparent;
	font-size: 20px;
	color: #7E756E;
	font-family: 'Raleway';
	font-weight: 500;
	margin-left: 15px;
}
#menu .log-in:hover {
	background: #FFF;
	color: #5B5049;
}

.grand {
	width: 100%;
    padding: 50px 100px 75px;
    font-family: 'Roboto Condensed';
    position: relative;
}
.grand .cell {
	width: 33%;
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
.grand .cell.l, .grand .cell.r, .grand .cell.cb {
    font-family: 'Roboto Condensed';
    font-size: 25px;
    font-weight: 700;
    color: #393E46;
}
.grand .cell p {
	margin: 10px 0;
}
.grand .cell.l {text-align: left; padding-left: 96px;}
.grand .cell.c {text-align: center;}
.grand .cell.c:before, .grand .cell.c:after {
	content: '';
	position: absolute;
	top: 50%;
	width: 64px; height: 64px;
	margin-top: -32px;
	background-image: url(../img/i/next2.png);
	background-size: 100% 100%;	
}
.grand .cell.c:before {left: -64px;}
.grand .cell.c:after {right: -72px;}
.grand .cell.r {text-align: right; padding-right: 96px;}
.grand .cell.cb {text-align: center; padding-right: 0px; vertical-align: top;
}
.grand .cell .c {
	width: 100%;
	padding-left: 8px;
}
.grand .title {
	display: inline-block;
	vertical-align: middle;
	font-size: 75px;
	font-weight: 700;
	color: #393E46;
	text-shadow: 1px 4px 1px rgba(0, 0, 0, 0.05);
    /*position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);*/
}
.grand .subt {
    position: relative;
    width: 55%;
    font-size: 26px;
    margin: 50px auto;
    text-align: center;
    color: #393E46;
    line-height: 1.5;
}
.grand .subt p {
	font-weight: 700;
	font-size: 30px;
	margin: 0 0 30px;
}
.grand .eval-section {
	position: relative;
	margin: 50px auto 0;
	text-align: center;
}
.grand .sign-up {
    display: inline-block;
    padding: 15px 32px;
    border: 4px solid #00ADB5;
    background: transparent;
    font-family: 'Roboto Condensed';
    font-weight: 700;
    font-size: 20px;
    color: #00ADB5; /*#3A342B*/
    cursor: pointer;
    position: relative;
    outline: none;
}
/*.grand .sign-up:before {
	content: '';
	position: absolute;
	top: -40px;
	left: -70px;
	right: -70px;
	width: auto;
	border-top: 3px dashed rgba(81, 76, 69, 0.66);
}*/
.grand .sign-up:hover {
	background: #00ADB5;
	color: #FFF;
}
#middle .cell {
	padding: 65px 140px;
	background: #222831;
	background: -moz-linear-gradient(left,  #222831 0%, #393e46 100%);
	background: -webkit-linear-gradient(left,  #222831 0%,#393e46 100%);
	background: linear-gradient(to right,  #222831 0%,#393e46 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222831', endColorstr='#393e46',GradientType=1 );
}
#middle .cell.w {
	text-align: right;
	background: #eeeeee;
	/*background: -moz-linear-gradient(left,  #eeeeee 0%, #cccccc 100%);
	background: -webkit-linear-gradient(left,  #eeeeee 0%,#cccccc 100%);
	background: linear-gradient(to right,  #eeeeee 0%,#cccccc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=1 );*/
}
#middle .cell.bigp { padding: 200px 0; }
#middle .padding-mid {
	padding: 50px 200px;
	background: #313944;
	color: #e8e8e8;
	overflow: hidden;
}
#middle .ul {
	list-style-position: inside;
	padding: 5px 50px;
}
#middle .ul2 {
	margin: 0;
    padding: 60px 200px;
    background: #313944;
}
#middle .ul2 li {
	color: #e8e8e8;
    line-height: 2;
}
#middle .ul2 img {
	display: block;
    margin: 50px auto 0;
    opacity: 0.9;
}
h4[data-i] {
	position: relative;
	padding: 22px 25px;
	/*background: #535b69;*/
	border-bottom: 3px solid #3e4754;
    color: #f2f4f9;
    opacity: 0.6;
    margin-bottom: 0;
    margin-top: 3px;
	cursor: pointer;
	font-size: 16px;

    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.1s;

    float: left;
    width: 100%;
}
h4[data-i]:before {
	content: '';
	position: absolute;
	top: 0; left: 0; width: 5px; height: 100%;
	opacity: 0;
	background: #00ADB5;

	-webkit-transition: all 0.1s;
	-o-transition: all 0.1s;
	transition: all 0.1s;
}
h4[data-i]:after {
	content: '';
	position: absolute;
	top: 50%; right: 23px;
	margin-top: -4px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 8px 0 8px;
	border-color: #f2f4f9 transparent transparent transparent;
	-webkit-transform-origin: middle;
	-moz-transform-origin: middle;
	-ms-transform-origin: middle;
	-o-transform-origin: middle;
	transform-origin: middle;

	-webkit-transition: all 0.1s;
	-o-transition: all 0.1s;
	transition: all 0.1s;
}
h4[data-i].o:after {
	transform: rotateX(180deg);
}
h4[data-i].o, h4[data-i].o:before {
	opacity: 1;
	background: #00ADB5;
}
h4[data-i].o {
	background: 
}
h4[data-i]:hover {
	opacity: 1;
}
h4[data-i] i {
	font-style: normal;
    font-family: 'Lato';
    font-weight: bolder;
    color: #00f4ff;
    margin: 0 2px;
}
div[data-i] {
	position: relative;
    display: none;
    float: left;
    width: 100%;
    padding: 30px 0;
    background: #484e58;
    border-left: 5px solid #00ADB5;
}
div[data-i]:before {
	content: '';
	position: absolute;
	top: 0; left: 0; width: 100%; height: 5px;
	background: #222831;
	opacity: 0.1;
}
div[data-expand="true"] { display: block; }
#top .arrow {
	display: inline-block;
    margin-left: -20px;
    font-size: 20px !important;
    color: #393E46;
    padding: 10px;
    background: #EEE;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s;
}
#top .arrow.pos {
	position: absolute;
    bottom: -20px;
    left: 50%;
}
#top .arrow.eval-arrow {
	
}
#top .arrow:hover,
#top .arrow.eval-arrow:hover {
	background: #2E333C !important;
	color: #EEE;
}
#top .full-btn {
	position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -21px;
    margin-left: 100px;
    padding: 2px 10px 2px 25px;
    background: #eee;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    cursor: pointer;
}
#top .full-btn:hover,
#top .full-btn:hover i {
	background: #2E333C;
	color: #eee;
}
#top .full-btn:hover .eval-caption { color: #eee; }
#top .full-btn i { border-radius: 0; }
#top .full-btn:hover {

}
#top .eval-caption {
	display: inline-block;
    padding: 0 10px;
    font-size: 13px;
    position: relative;
    top: -2px;
    color: #393e46;
}
#middle .cell-cont, #middle .cell-img {display: inline-block;}
#middle .cell-cont {
	width: 60%;
	color: #EEE;
    padding-right: 5%;
    vertical-align: middle;
    display: inline-block;
}
#middle .cell.w .cell-cont {
	padding-left: 5%;
	padding-right: 0;
}
#middle .cell-img {
	width: 40%;
	text-align: right;
	perspective: 500px;
	-webkit-perspective: 500px;
    vertical-align: middle;
}
.mon {
	display: inline-block;
	width: 330px;
	height: 219px;
	background-image: url(../img/webprev.png);
	background-size: 100% 100%;
	border: 8px solid #393E46;
	margin: 20px 0;
	transition: all 0.1s;
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	-ms-transition: all 0.1s;
	-o-transition: all 0.1s;
}
.mon2 {
    width: 330px;
    height: 74px;
	background-image: url(../img/mon2.png);
	background-size: inherit;
	border: none;
}
.logos {
	display: inline-block;
	width: 397px;
	height: 154px;
	background-image: url(../img/ha2_logo_w.png);
	background-size: 100% 100%;
	margin: 20px 0;
}
.certifs {
	text-align: left;
	background-size: 100% 100%;
	margin: 20px 0;
}
#middle .title {
    font-family: 'Roboto Condensed';
    font-size: 45px;
    font-weight: 700;
    color: #EEE;
    padding: 15px 0;
    margin: 0 0 15px;
    border-bottom: 4px solid #393E46;
}
#middle .title2 {
    font-family: 'Roboto Condensed';
    font-size: 45px;
    font-weight: 700;
    color: #EEE;
    padding: 15px 0;
    margin: 0 0 15px;
    text-align: center;
}
#middle .title3 {
    font-family: 'Roboto Condensed';
    font-size: 26px;
    font-weight: 700;
    color: #585e66;
    padding: 15px 0;
    margin: 0 0 15px;
    text-align: center;
}
#middle .cell.w .title,
#middle .cell.w .title2,
#middle .cell.w .title3 {
	font-weight: 700;
	color: #393E46;
}
#middle ul {
	padding-left: 0;
	list-style-type: circle;
}
#middle p, #middle li {
	color: #ddd;
    padding: 10px 0;
    margin: 0;
    line-height: 1.5;
}
#middle .cell.w p, #middle .cell.w li {
	color: #393e46;
}

.contact {
	width: 600px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}
.contact .err-msg {
	margin: 0 0 10px;
    padding: 20px;
    border: 4px solid #963636;
    background: #b34141;
}
.form-inp {
	width: 100%;
	padding: 15px 20px;
    margin: 1% 0;
    float: left;
    border: 0;
    border-left: 0px solid #393e46;
    background: #393e46; /*#dedede;*/
    font-family: 'Open Sans';
    font-size: 14px;
    font-weight: 600;
    color: #a1a9af; /*#393e46;*/
    outline: none;

    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.form-inp:hover { background: #4a505a; /*#d8d8d8;*/ }
.contact .form-inp:focus {
	border-left: 7px solid #4179b3;
    color: #dee0e2;
    background: #4a505a; /*#d8d8d8;*/
}
.form-inp.h { width: 49%; }
.form-inp.nm { margin-left: 2%; }
.form-ta {
	min-height: 100%;
	max-height: 100%;
}
.contact .subm {
	position: relative;
    width: 165px;
    padding: 15px;
    padding-right: 15px;
    margin: 2%;
    border: none;
    font-family: 'Open Sans';
    font-size: 15px;
    font-weight: 600;
    background: #4179b3;
    color: #dee0e2;
    cursor: pointer;
    overflow: hidden;
    outline: none;

    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.contact .subm i {
	position: absolute;
    right: -50px;
    top: 0;
    font-size: 18px;
    padding: 16px;
    background: #366596;

    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.contact .subm:hover,
.contact .subm:focus {
	padding-right: 65px;
}
.contact .subm:hover i,
.contact .subm:focus i { right: 0; }

.form-inp::-webkit-input-placeholder {
  font-family: 'Open Sans';
  font-size: 14px;
  font-weight: 700;
  color: #aaa; /*#646a71;*/
}
.form-inp::-moz-placeholder {
  font-family: 'Open Sans';
  font-size: 14px;
  font-weight: 700;
  color: #aaa; /*#646a71;*/
}
.form-inp:-ms-input-placeholder {
  font-family: 'Open Sans';
  font-size: 14px;
  font-weight: 700;
  color: #aaa; /*#646a71;*/
}
.form-inp:-moz-placeholder {
  font-family: 'Open Sans';
  font-size: 14px;
  font-weight: 700;
  color: #aaa; /*#646a71;*/
}
.form-inp.e {
	background: #b34141;
    color: #bda4a4;
}
.form-inp.e::-webkit-input-placeholder { color: #bb6b6b; }
.form-inp.e::-moz-placeholder { color: #bb6b6b; }
.form-inp.e:-ms-input-placeholder { color: #bb6b6b; }
.form-inp.e:-moz-placeholder { color: #bb6b6b; }
#footer {
	padding: 20px 30px;
    color: #585e66;
    font-family: 'Open Sans';
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}