/*=========================================================
ELTC Engineering Guide
responsive.css

Responsive Layout
Desktop
Laptop
Tablet
Mobile
=========================================================*/


/*=========================================================
LARGE DESKTOP
=========================================================*/

@media (min-width:1600px){

:root{

--container:1450px;

}

body{

font-size:17px;

}

.hero h1{

font-size:64px;

}

.section{

padding:140px 0;

}

}


/*=========================================================
LAPTOP
=========================================================*/

@media (max-width:1400px){

.hero-grid{

gap:50px;

}

.product-grid{

gap:50px;

}

.content-grid{

gap:40px;

}

}


/*=========================================================
TABLET LANDSCAPE
=========================================================*/

@media (max-width:1200px){

h1{

font-size:46px;

}

h2{

font-size:34px;

}

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero p{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-image{

margin-top:40px;

}

.content-grid{

grid-template-columns:1fr;

}

.two-column{

grid-template-columns:1fr;

gap:40px;

}

.product-grid{

grid-template-columns:1fr;

gap:60px;

}

.footer-grid{

grid-template-columns:1fr;

}

}


/*=========================================================
TABLET
=========================================================*/

@media (max-width:992px){

header .container{

height:72px;

}

.logo img{

height:42px;

}

#main-nav{

display:none;

}

.hero{

padding-top:130px;

padding-bottom:90px;

}

.hero h1{

font-size:40px;

}

.hero h2{

font-size:22px;

}

.section{

padding:90px 0;

}

.cards{

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

}

.reference-list{

grid-template-columns:1fr;

}

table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

.diagram-placeholder{

min-height:260px;

padding:25px;

}

}


/*=========================================================
MOBILE
=========================================================*/

@media (max-width:768px){

body{

font-size:15px;

line-height:1.75;

}

.container{

width:94%;

}

.section{

padding:75px 0;

}

.section-title{

margin-bottom:40px;

}

.section-title h2{

font-size:30px;

}

.section-title p{

font-size:15px;

}

.hero{

padding-top:120px;

}

.hero h1{

font-size:34px;

}

.hero h2{

font-size:20px;

}

.hero p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

align-items:stretch;

}

.primary-btn,
.secondary-btn{

width:100%;

justify-content:center;

}

.cards{

grid-template-columns:1fr;

}

.two-column{

grid-template-columns:1fr;

}

.product-grid{

grid-template-columns:1fr;

}

.product-image img{

max-width:320px;

}

.callout{

padding:25px;

}

.callout h3{

font-size:22px;

}

thead th,
tbody td{

padding:12px;

font-size:14px;

}

.footer-logo{

height:60px;

}

}


/*=========================================================
SMALL MOBILE
=========================================================*/

@media (max-width:576px){

h1{

font-size:30px;

}

h2{

font-size:26px;

}

h3{

font-size:22px;

}

p{

font-size:15px;

}

.section-number{

font-size:12px;

padding:5px 14px;

}

.hero-image img{

max-width:260px;

}

.product-content h3{

font-size:28px;

}

.product-content h4{

font-size:20px;

}

.faq-item{

padding:22px;

}

.reference-list li{

padding:16px;

}

#scrollTop{

width:46px;

height:46px;

right:18px;

bottom:18px;

font-size:18px;

}

}


/*=========================================================
EXTRA SMALL DEVICES
=========================================================*/

@media (max-width:400px){

body{

font-size:14px;

}

.hero h1{

font-size:26px;

}

.hero h2{

font-size:18px;

}

.section{

padding:60px 0;

}

.primary-btn,
.secondary-btn{

padding:13px 20px;

font-size:14px;

}

.callout{

padding:20px;

}

.diagram-placeholder{

padding:20px;

min-height:220px;

}

.footer-logo{

height:50px;

}

}


/*=========================================================
RTL RESPONSIVE
=========================================================*/

@media (max-width:768px){

.rtl{

text-align:right;

}

.rtl .hero-buttons{

align-items:stretch;

}

.rtl table{

font-size:14px;

}

}


/*=========================================================
PRINT
=========================================================*/

@media print{

body{

background:white !important;

color:black !important;

}

.section{

padding:30px 0;

}

.hero{

padding-top:20px;

}

header,
footer,
.hero-buttons,
#scrollTop,
#progress-bar{

display:none !important;

}

img{

max-width:100%;

page-break-inside:avoid;

}

table{

page-break-inside:avoid;

}

}


/*=========================================================
HIGH RESOLUTION SCREENS
=========================================================*/

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi){

img{

image-rendering:auto;

}

}


/*=========================================================
LANDSCAPE PHONES
=========================================================*/

@media (max-height:500px) and (orientation:landscape){

.hero{

padding-top:100px;

padding-bottom:60px;

}

.section{

padding:60px 0;

}

.hero-image{

display:none;

}

}

/*=========================================================
END OF responsive.css
=========================================================*/