*{margin:0;padding:0;box-sizing:border-box;}
.clear{ clear:both;}
img a{ border:none; }
img{ display:block; }
a, button{text-decoration:none;color:inherit;transition:all .3s ease}
a:hover,a:focus,a:active,button.btn:focus, button.btn:hover {color:inherit;outline:none;text-decoration:none;cursor:pointer;}
input:focus, button:focus, textarea:focus, select:focus{outline:none;transition:all .3s ease}
h1,h2,h3,h4{font-weight:400}
p{ line-height:1.6; }
ul{ list-style:none;}
li{ list-style:none; }
strong{font-weight:700;}


body{ background:#fff; color:#727272; font-family:'Rajdhani', sans-serif; font-size:18px; font-weight:500; line-height:1; }
.container { max-width: 1440px; margin: auto; padding:0 30px; }
.txt-center { text-align: center; }




/* Intro */
.intro { padding: 80px 0; }
.intro .logo { display: block; padding-bottom: 40px; }
.intro .content { display: flex; align-items: center; margin-top: 40px; }
.intro .title { display: block; text-transform: uppercase; font-weight: 800; font-size: 28px; color: #061c33; position: relative; margin-bottom: 20px; }
.intro .title:after { position: absolute; content: ''; display: block; height: 2px; width: 60px; background: #96c0e6; margin: 5px 0 30px 0; }
.intro p { padding-left: 80px; color: #727272; }
.intro p span { display: block; text-align: left; }

@media (max-width: 600px) {
    .intro p { padding-left: 20px; }
}

@media (max-width: 400px) {
    .intro .content { display: block; }
    .intro p { width: 100%; margin-top: 30px; padding: 0; }
}




/* Calculator */
table { width: 100%; }
.topbar { background: #96c0e6; color: #fff; text-transform: uppercase; min-height: 65px;  }
.topbar th { width: 20%; padding: 10px 10px; }
.topbar.three th { width: 33.3333333%; }
.one-row { margin-bottom: 40px; }
.one-row td { padding-bottom: 40px; }
.one-row input { width: 100%; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 18px; text-align: center; height: 55px; border: none; border-top: none;border-left: #96c0e6 2px solid; border-bottom: #96c0e6 2px solid; }
.one-row input.ro_input, .one-row input.ro_input:hover, .one-row input.ro_input:focus { background: #eaeaea; cursor: context-menu; }
.one-row input:hover { background: #f8f8f8; }
.one-row input.last { border-right:#96c0e6 2px solid;}
.one-row .required { display: block; }

.btn { margin: 30px 0 130px 0; display: inline-block; color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; line-height: 1.3; letter-spacing: 2px; text-align: center; background: #e62626; border: 1px solid #e62626; padding: 15px 30px; min-width: 200px; transition: all .3s ease; font-family: 'Rajdhani', sans-serif; cursor: pointer;}
.btn:hover { color: #e62626; background: transparent; }

.title-total { text-transform: uppercase; color: #061c33; font-size: 20px; padding-top: 35px; padding-bottom: 12px; }

@media (max-width: 600px) {
    .topbar th { padding: 10px 2px; font-size: 15px; }
}



/* Disclaimer */
.disclaimer { margin: 60px 0; text-align: center; }



/* Material Strength */
.material-strength { padding-top: 50px; padding-bottom: 140px; }
.material-strength .title { text-align: center; text-transform: uppercase; font-weight: 800; font-size: 28px; color: #061c33; position: relative; margin-bottom: 60px; }
.material-strength .title:after { position: absolute; content: ''; display: block; height: 2px; width: 60px; background: #96c0e6; margin: 30px auto; left: 50%; transform: translateX(-50%); }
.accordion { width: 100%; background-color: #fff; color: #444; cursor: pointer; padding: 20px 40px; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; margin-top: 20px; border: 2px solid #96c0e6; font-family: 'Rajdhani', sans-serif; text-transform: uppercase; font-weight: 800; letter-spacing: .2em; display: flex; align-items: center; justify-content: space-between; }
.accordion span { float: left; }
.accordion svg { width: 16px; float:right; transition: .4s ease; transform: none; }
.active, .accordion:hover { background-color: #96c0e6; color: #fff; }
.accordion:hover svg path { fill: #fff; }
.active svg { transform: rotate(-180deg); }
.active svg path { fill: #fff; }
.panel { max-height: 0px; overflow: hidden; transition: .8s ease-in-out; }
.panel.activePanel { max-height: 1800px; }

.first-row td { background: #eaeaea; text-align: center; color: #061c33 !important; }
.panel table, .panel td { border-style: solid; border-color: #96c0e6; color: #727272; }
.panel td { padding: 7px; }

@media (max-width: 600px) {
    .panel { overflow-x: scroll; }
}