@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

* { margin:0; padding:0; border:none; outline:none; box-sizing:border-box; }
html { min-height:100%; width:100%; overflow-x:hidden; }
body { font-family: 'Open Sans', sans-serif; font-size:14px; font-weight:300; color:#000; padding:0; min-width:300px; background:#fff; }

input, select, textarea { 
	padding:5px; border:1px solid #bcc1c5; 
	-webkit-transition: border-color 0.30s ease-in-out;
	-moz-transition: border-color 0.30s ease-in-out;
	-ms-transition: border-color 0.30s ease-in-out;
	-o-transition: border-color 0.30s ease-in-out;	
}

input[type='file'],input[type='checkbox']{
	border:none;
	padding:0;
}

input:hover, select:hover, textarea:hover {
	border-color:#888;
}
input:focus, select:focus, textarea:focus {
	border-color:#98be37;
}

.nu { text-decoration:none; }
.ita { font-style:italic; }
.bld { font-weight:bold; }
.fw300 { font-weight:300; }
.fw400 { font-weight:400; }
.fw700 { font-weight:700; }
.hoverbtn:hover { opacity:0.7; }
.hoverbtn2 { opacity:0.6; }
.hoverbtn2:hover { opacity:1; }
.clr:after {
  content:"";
  display:table;
  clear:both;
}
.fl { float:left; }
.fr { float:right; }

.xxxl { font-size:25px; }
.xxl { font-size:20px; }
.xl { font-size:18px; }
.l { font-size:16px; }
.sm { font-size:12px; }
.xsm { font-size:11px; }

.tc { text-align:center; }
.tr { text-align:right; }
.uc { text-transform:uppercase; }
.pad5 { padding:5px; }
.pad10 { padding:10px; }
.vpad5 { padding-top:5px !important; padding-bottom:5px !important; }
.vpad10 { padding-top:10px !important; padding-bottom:10px !important; }
.vpad20 { padding-top:20px !important; padding-bottom:20px !important; }
.vpad40 { padding-top:40px !important; padding-bottom:40px !important; }
.hpad10 { padding-left:10px !important; padding-right:10px !important; }
.hpad20 { padding-left:20px !important; padding-right:20px !important; }
.hpad40 { padding-left:40px !important; padding-right:40px !important; }
.lpad20 { padding-left:20px !important; }
.note { font-size:12px; }
.req { color:#d00; }
.ib { display:inline-block; }
.vt { vertical-align:top; }
.vt { vertical-align:middle; }
.prel { position:relative; }
.fitparent { position:absolute; left:0; top:0; bottom:0; right:0; }

.w5 { width:5%; }
.w10 { width:10%; }
.w15 { width:15%; }
.w20 { width:20%; }
.w25 { width:25%; }
.w30 { width:30%; }
.w35 { width:35%; }
.w40 { width:40%; }
.w45 { width:45%; }
.w50 { width:50%; }
.w55 { width:55%; }
.w60 { width:60%; }
.w65 { width:65%; }
.w70 { width:70%; }
.w75 { width:75%; }
.w80 { width:80%; }
.w85 { width:85%; }
.w90 { width:90%; }
.w95 { width:95%; }
.w100 { width:100%; }

.r3 { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.r5 { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.r7 { -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; }
.r9 { -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; }
.rr { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; }

.trans02 {
	transition:         all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition:    all .2s ease-in-out;
	-o-transition:      all .2s ease-in-out;
}
.trans04 {
	transition:         all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	-moz-transition:    all .4s ease-in-out;
	-o-transition:      all .4s ease-in-out;
}

select:disabled { opacity:0.6; }

.btn { 	
	-webkit-transition: all 0.10s ease-in-out;
	-moz-transition: all 0.10s ease-in-out;
	-ms-transition: all 0.10s ease-in-out;
	-o-transition: all 0.10s ease-in-out;	 
	display: inline-block;
	font-weight:400;
	color:#006FB4;
	cursor: pointer;	
	padding:9px 25px;
	background:#fff;
	border:1px solid #006fb4;

} 
.btn:hover { background-color:#006FB4; color:#fff; }
.btn.disabled, header .search-result.disabled .btn { background-color:#81b7d9; border-color:#81b7d9; color:#bedaeb; cursor:default; }

.container { max-width:1000px; margin:0 auto; }

.splash { position:fixed; top:0; left:0; right:0; bottom:0; background:#EBEFF0; z-index:2000; text-align:center;  }
.splash .title { font-size:21px; color:#006FB4; text-align:center; width:60%; margin:30px auto; font-weight:700; }
.splash img { max-width:200px; margin-top:16%;  }

header { background:#006FB4; color:#fff; position:absolute; left:0; right:0; top:0; z-index:900; min-width:300px; }
header > .container { padding:20px; }
header h1 { border-bottom:2px solid #fff; font-size:18px; font-weight:400; padding:0 0 5px 0;}
header .top-vals .note br, header .top-vals .note span { display:none; }
header .top-val { font-size:28px; line-height:28px; font-weight:400; }
header .top-val span { font-weight:300; color:#80b7d9; }
header .search-result .status { width:75%; background:#fff; border:1px solid #fff; 
	color:#006FB4; padding:9px 25px; font-size:16px; border-right:2px solid #fff; }
header .search-result.disabled .status { background:#83b8da; border:1px solid #83b8da; color:#fff; }

header .search-result .btn { width:25%; border-color:#81b7d9; background-color:#006FB4; color:#fff; } 
header .search-result .btn:hover { border-color:#fff; background-color:#fff; color:#006FB4; border-left:1px solid #006FB4 !important;  } 
header .search-result.disabled .btn { background-color:#81b7d9; border-color:#81b7d9; color:#bedaeb; cursor:default; } 

section.wizard { padding:20px; }
.wizard .xsection { background:#ebeff0; border:1px solid #ebeff0; position:relative; margin-bottom:10px; }
.wizard .xsection > span { position:absolute; width:10px; height:20px; left:15px; top:11px; background:url(../img/arrow.png) 0 0 no-repeat; background-size:100% 100%; 
	transition:         all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition:    all .2s ease-in-out;
	-o-transition:      all .2s ease-in-out;
	pointer-events: none;
}
.wizard .xsection.active > span {
  -webkit-transform: rotate(90deg);  
      -ms-transform: rotate(90deg);  
          transform: rotate(90deg); 	
}
.wizard .xsection .title { color:#006FB4; padding:10px 180px 10px 40px; cursor:pointer; font-size:16px; }
.wizard .xsection .content { display:none; }
.wizard .xsection:hover { border:1px solid #006FB4; }
.wizard .xsection .selected-class { position:absolute; right:0; top:0; bottom:0; border-left:1px solid #fff; pointer-events:none; }
.wizard .xsection .class-current { font-size:18px; color:#006FB4; font-weight:700; padding:8px; min-width:90px; text-align:center; pointer-events:none; }
.wizard .xsection .class-selector { display:none; margin:8px; pointer-events:auto; }

.wizard .xsection .class-selector .btn { padding:2px 5px; display:block; height:29px; float:left; margin-left:-1px; font-size:16px; vertical-align: middle; }
.wizard .xsection .class-selector .btn.active { background-color:#006FB4; color:#fff; }
.wizard .xsection .class-selector .btn.reset { padding-top:4px; /* font-size:15px; line-height:18px; padding:3px 5px 5px 5px; */ }
.wizard .xsection .class-selector .btn.reset span { display:inline-block; width:15px; height:15px; background:url(../img/x.png) 0 0 no-repeat; background-size:100% auto; }
.wizard .xsection .class-selector .btn.reset:hover span { background-position:0 -15px; }
.wizard .xsection .class-selector .btn.disabled { background:#fff; opacity:0.5; }

.wizard .xsection.active .selected-class { border-left:none; }
.wizard .xsection.active .class-selector { display:block; }
.wizard .xsection.active .class-current { display:none; }

.wizard .xsection.disabled { opacity:0.4; border-color:#ebeff0; }
.wizard .xsection.disabled .title { cursor:default;  }

.wizard .xsection .class-data { padding-top:10px; }
.wizard .xsection .class-data .t-row { border-bottom:1px solid #fff; }
.wizard .xsection .class-data .t-row:last-child { border-bottom:none; }

.popup-wrap { background:#fff; position:absolute; z-index:1000; left:0; top:0; bottom:0; right:0; min-height:100%; display:none; }
.popup-bg { background:#fff; }
.popup-close { position:fixed; text-align:right; padding-top:5px; padding-bottom:5px; left:0; top:0px; right:0; font-size:30px; background:rgba(255,255,255,0.9); 
	z-index:100; 
	-o-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translate3d(0px, 0px, 0px);
}
.popup-close span { width:30px; height:30px; display:inline-block; background:url(../img/x.png) 0 0 no-repeat; background-size:100% auto; cursor:pointer; 
	margin-top:7px; margin-right:19px; }
.popup-close span:hover { background-position:0 -60px; }
.popup .content { padding:10px 20px; }
.popup .title { font-size:21px; color:#006FB4; line-height:28px; padding:5px 5px 5px 0; margin-right:45px; position:relative; }

.cement-list { padding:20px 0; }
.cement-list > .item { background:#EBEFF0; padding:20px; margin-bottom:8px; }
.cement-list > .item .diagram { width:230px; position:absolute; }
.cement-list > .item .data { padding-left:230px; }
.cement-list > .item .cement-name { font-size:16px; color:#006FB4; letter-spacing:0.5px; font-weight:700; }
.cement-list > .item .cement-params { padding:15px 0; }
.cement-list > .item .cement-params .item { border-bottom:1px solid #fff; }
.cement-list > .item .cement-params .cell { padding:5px 0; }
.cement-list > .item .cement-params .cell span { display:inline-block; width:12px; height:12px; border:1px solid #fff; background-color:#aaa; margin-right:4px; }

.hidden { display:none !important; }
.copyright { padding:0px 20px 20px 20px; }

.cement-list > .item .toggle-name { font-size:16px; color:#006FB4; font-weight:700; cursor:pointer; position:relative; z-index:10; padding-left:20px; }

.cement-list > .item .toggle-name > span { position:absolute; width:6px; height:12px; left:5px; top:4px; background:url(../img/arrow.png) 0 0 no-repeat; background-size:100% 100%; 
	transition:         all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition:    all .2s ease-in-out;
	-o-transition:      all .2s ease-in-out;
	pointer-events: none;
}
.cement-list > .item .toggle-name.active > span {
	-webkit-transform: rotate(90deg);  
	  -ms-transform: rotate(90deg);  
	      transform: rotate(90deg); 	
}

@media(min-width:769px){
	.cement-list > .item .toggle-name { display:none; } 
}

@media(max-width:768px){
	body { padding:0; }
	.btn { padding-left:10px; padding-right:10px; }
	section.wizard { padding:10px; }
	header > .container { padding:10px; }
	header .search-result .status { width:65%; height:42px; font-size:2.2vw; padding-left:10px; padding-right:10px; }
	header .search-result .btn { width:35%; }
	header .top-val { font-size:22px; }
	.wizard .xsection .title { font-size:15px; padding-right:90px; }
	.wizard .xsection > span { width:8px; height:16px; top:12px; }
	.wizard .xsection .selected-class { position:static; } 
	.wizard .xsection.active .class-selector { margin-left:40px; margin-top:0; }
	.wizard .xsection .class-current { position:absolute; right:0; top:0; bottom:0; border-left:1px solid #fff; }
	.t-row .fl { float:none !important; width:auto !important; }
	.cement-list > .item { padding:10px; border:1px solid #EBEFF0; }
	.cement-list > .item:hover { border:1px solid #006fb4; }
	.cement-list > .item .diagram { position:static; width:100%; text-align:center; padding-top:20px; }
	.cement-list > .item .data { padding:0; } 
	.cement-list > .item .cement-name { display:none; } 
	.cement-list > .item .toggle-holder { display:none; } 
	.cement-list > .item .toggle-name { display:block; font-size:13px; } 
	.param-name { font-size:12px; padding-right:10px !important; }
	.popup .content { padding:10px; }
	header .top-vals .note br { display:block; }
	header .top-vals .note span { display:inline; }
	.popup-close span { margin-right:10px; }
	.go-fullscreen { display:none; }
}

@media (max-width:590px){
	header .search-result .status { font-size:13px; letter-spacing: -0.3px; line-height:14px; }
}

@media (max-width:640px){
	header .search-result .status { padding-top:6px; }
}