@charset "utf-8";
/* CSS Document */


/* colors and fonts
	blue color: rgba(37, 175, 180, 1.00);
	pink: rgba(170, 67, 153, 1.00);
	grey: #333;
	footer backgroud: #4c5166 rgba(76, 81, 102, 1.00);
	border: #e0dede rgba(224, 222, 222, 1.00);
	font-family: 'Roboto Slab', serif;
	font-family: 'Roboto', sans-serif;
/*

/* Reset */

html, body, div, h1, h2, h3, p, a, img, q, sub, sup, b, u, i, center, ul, li, form, caption, figure, figcaption, footer, header, menu, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
	line-height: 1;
    position: relative;
}
ol, ul {
	list-style: none;
}
/* Global Styles */

html, body {
	max-width: 100%;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	position: relative;
}
h1, h2, h3, h4 {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
}
ul, li {
	font-family: 'Roboto Slab', serif;
	font-weight: 500;
    line-height: 1.2;
}
p, a, q {
	font-family: 'Roboto Slab', serif;
	font-weight: 400;
	font-size: 1em;
	line-height: 1;
	color: #000;
}
a {
	text-decoration: none;
}
a:hover {
	color: rgba(37, 175, 180, 1.00);
	text-decoration: underline;
}
a:focus {
	outline-color: rgba(37, 175, 180, 1.00);
}
a img {
 border:none;
 outline:0;
}
.cl {
	clear: both;
}
.smscrn {
	display: block;
}
.lrgscrn {
	display: none;
}

/* Nav */
#fulltopnav {
	overflow: hidden;
	position: fixed;
	top: 0;
	z-index: 5;
	background-color: rgba(224, 224, 224, 1.00);
	height: auto;
	width: 100%;
	box-shadow: 2px 0px 2px #333;
	margin-bottom: 1px;
}
.topnav a {
	float: left;
	display: block;
	font-size: 1.4em;
	color: rgba(76, 81, 102, 1.00);
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}
.fas {
    color: rgba(37, 175, 180, 1.00);
}
.topnav a:hover,
.topnav a:focus {
	color: rgba(37, 175, 180, 1.00);
	background-color: rgba(224, 224, 224, 1.00);
	text-decoration: none;
}
.topnav a:focus {
	outline-color: rgba(76, 81, 102, 1.00);
}
.topnav a.active {
	cursor: default;
	color: rgba(37, 175, 180, 1.00);
}
.topnav a.active:hover {
	background: none;
}
.topnav .scmicon {
	display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 760px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.scmicon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 760px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.scmicon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}	
/* header */
header {
	width: 100%;
	height: auto;
	margin-top: 80px;
	background-color: #ffffff;
	
}
header h1 {
	color: rgb(37, 175, 180, 1.00);
	text-align: center;
	font-size: 2.4em;
	padding-bottom: 20px;
	
}

/* footer */
footer {
    display: block;
	width: 100%;
    max-width: 100%;
    margin: 0 auto;
	background-color: rgb(76, 81, 102, 1.00);
	height: auto;
}
.nameinfo {
	display: grid;
	grid-template-columns: 50% 50%;
	padding: 20px 20px 20px 20px;
}

.f1 h2 {
	font-size: 1.4em;
	line-height: .8;
	text-align: left;
	color: rgba(37, 175, 180, 1.00);
	grid-column: 1;
}

.f2 h2 {	
	font-size: 1.2em;
	line-height: 1;
	text-align: right;
	color: #fff;
	grid-column: 2;
}

.contact h3 {
	text-align: center;
	}
.contact a {
	color: #fff;
	font-size: 1em;
	line-height: 1.6;
}
.contact a:hover, a:focus {
	color: rgba(37, 175, 180, 1.00);
}
footer p {
	text-align: center;
	color: #fff;
	font-size: .8em;
	padding-top: 20px;
    padding-bottom: 12px;
}
footer a {
	color: rgb(37, 175, 180, 1.00);
}

/* background images */

.fullimage-blue, .fullimage-prepare, .fullimage-footer, .fullimage-therm, .fullimage-quote {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.fullimage-blue {
	background-image: url("../images/introbg-400.jpg");
	min-height: 80px;
}
.fullimage-therm {
	background-image: url("../images/introbg-400.jpg");
	min-height: 100px;
}
.fullimage-prepare {
	background-image: url("../images/kwiktemp-prepare-400.jpg");
	min-height: 60px;
}
.fullimage-quote {
    background-image: url("../images/introbg-400-g.jpg");
    min-height: 60px;
}
.fullimage-footer {
	background-image: url("../images/kwiktemp-footer-400.jpg");
	min-height: 160px;
}

/* Turn off parallax scrolling for tablets and phones. */
@media only screen and (max-device-width: 1024px) {
.fullimage-blue, .fullimage-prepare, .fullimage-footer, .fullimage-therm, .fullimage-quote {
	background-attachment: scroll;
}

}


/* main content - basic - smcrn */
section {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 100%;
	height: auto;
}
.fullimage-blue {
	height: 120px;
 
}
.intro h2 {
	color: #ffffff;
	text-align: center;
	font-size: 1.6em;
	line-height: 1.4;
	padding-top: 25px;
	padding-bottom: 20px;
}


.info {
	display: block;
	width: 80%;
}
.info h2 {
	text-align: center;
	font-size: 1.8em;
	line-height: 1.4;
	color: rgba(170, 67, 153, 1.00);
	padding-top: 25px;
	
}
.info h3 {
	font-size: 1.4em;
	color: rgba(76, 81, 102, 1.00);
	line-height: 1.2;
	text-align: left;
	padding-bottom: 20px;
    padding-top: 25px;
}
.info h4 {
	font-size: 1.4em;
	color: rgba(76, 81, 102, 1.00);
	line-height: 1.2;
	text-align: left;
}
.info p {
	font-size: 1.2em;
	line-height: 1.2;
	padding: 10px 0px 10px 0px;
}
.info ul {
	padding-bottom: 40px;
}
.info li {
    font-weight: 500;   
	line-height: 1.5;
	font-size: 1.3em;
	text-align: center;
    color: rgba(37, 175, 180, 1.00);
}

.infoimgs1 img {
	display: block;
	margin: 0 auto;
	width: 300px;
	max-width: 100%;
	height: auto;
    padding: 20px 0px;
}


.fullimage-prepare, .fullimage-quote {
	height: 60px;
}

.prep h2 {
	color: #ffffff;
	text-align: center;
	font-size: 1.6em;
	line-height: 1.4;
	padding-top: 15px;
	
}
.prepare {
	display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 25px;
	margin: 0 auto;
    padding: 30px 0px 40px 0px;
	width: 80%;
}
.prepare p {
    grid-column: 1 / span 2; 
	font-size: 1.2em;
	color: #000;
	line-height: 1.2;
    align-self: center;
	
}
.quote {
      display: block;
    margin: 0 auto;
    text-align: center;
}
.quote img {
    width: 128px;
    max-width: 100%;
    height: auto;
    padding-top: 6%;
}
.quote img:hover, img:focus {
    opacity: 0.6;
}
.quote h3 {
    grid-column: 2;
    grid-row: 2;
}
.quote a {
    color: rgba(37, 175, 180, 1.00);
}
.quote a:hover, a:focus {
    color: rgba(170, 67, 153, 1.00);
    text-decoration: none;
}
.quotet {
    display: block;
    margin: 0 auto;
    text-align: center;
}
.quotet img {
    width: 128px;
    max-width: 100%;
    height: auto;
    padding-top: 6%;
}
.quotet img:hover, img:focus {
    opacity: 0.6;
}
.quotet a {
    color: rgba(37, 175, 180, 1.00);
}
.quotet a:hover, a:focus {
    color: rgba(170, 67, 153, 1.00);
    text-decoration: none;
}
/* Thermometer Page */

.sph {
    height: 80px;
}
.sph h2 {
	color: #ffffff;
	text-align: center;
	font-size: 2em;
	line-height: 1.4;
    letter-spacing: 2px;
	padding-top: 20px;
	
}

.specs {
    display: block;
    width: 80%;
    margin: 0 auto;
    padding: 30px 0;
}

.specs h2 {
    font-size: 1.4em;
    color: rgba(76, 81, 102, 1.00);
    line-height: 2;
}
.specs h3 {
    font-size: 1.4em;
    color: rgba(76, 81, 102, 1.00);
    line-height: 2;
}
.specs h4 {
    font-size: 1.2em;
    color: rgba(37, 175, 180, 1.00);
}
.specs ul, li {
    font-weight: 500;
    font-size: 1.2em;
    line-height: 1.2;
    color: #000;
    text-align: left;   
}
.specs li {
    padding-bottom: 1em;
}


.dimension h3 {
    text-align: center;
    font-size: 1.6em;
    letter-spacing: 2px;
    color: rgba(170, 67, 153, 1.00);
    padding-top: 30px;
}
.dimension h4 {
    text-align: center;
    font-size: 1.4em;
    color: rgba(76, 81, 102, 1.00);
    
}
.dimension img {
    display: block;
    margin: 0 auto;
    padding-top: 20px;
    width: 300px;
    max-width: 100%;
    height: auto;
}
.th2 img {
    width: 400px;
    max-width: 100%;
    height: auto;
}
.essential {
    display: block;
    width: 80%;
	margin: 0 auto;
    padding: 30px 0px 40px 0px;
}
.quote {
    display: block;
    width: 80%;
	margin: 0 auto;
    padding: 30px 0px 40px 0px;
}
.fullimage-therm {
	height: 100px;
}

.fullimage-therm h2 {
	color: #ffffff;
	text-align: center;
	font-size: 1.4em;
	line-height: 1.4;
	padding-top: 20px;
    padding-bottom: 20px;
    letter-spacing: 2px;
	
}
.essential h3, .quote h3 {
    font-size: 1.4em;
    line-height: 2;
}
.essential a {
    color: rgba(37, 175, 180, 1.00);
}
.essential a:hover, a:focus {
    color: rgba(170, 67, 153, 1.00);
    text-decoration: none;
}


.essential p {
	font-size: 1.2em;
	line-height: 1.2;
    align-self: center;
	
}
@media only screen and (min-width: 760px) {
.smscrn {
    display: none;
}
.lrgscrn {
    display: block;
}

header h1 {
	font-size: 3.2em;
	padding-bottom: 30px;
    padding-top: 20px;
}
.fullimage-blue {
   height: 160px;
}    
.intro h2 {
    font-size: 2em;
    letter-spacing: 2px;
    line-height: 1.8;
    
}
.info h4 {
        text-align: center;
        font-weight: 500;
        font-size: 1.6em;
    }
    .info li {
        line-height: 1.6;
        font-size: 1.4em;
    }
.prep h2 {
    font-size: 1.8em;
    letter-spacing: 2px;
}
.prepare img {
    display: block;
    width: 180px;
    height: auto;
    grid-column: 2;
    border-radius: 8px;
    align-self: center;
}
.prepare p {
        grid-column: 1;
}

.fullimage-therm h2 {

	padding-top: 34px;
    padding-bottom: 34px;
   
}

}
@media only screen and (min-width : 860px) {

    .fullimage-blue {
        height: 160px;
    }
    .intro h2 {
        font-size: 2em;
    }
  
    .info h2 {
        font-size: 2.2em;
    }
}
@media only screen and (min-width : 1024px){
 header {
        padding-top: 20px;
    }    
    header h1 {
        font-size: 4.8em;
    }
   .fullimage-blue {
        height: 200px;
    }
    .intro h2 {
        font-size: 2.6em;
    }
     .prep h2  {
        font-size: 2.4em;
        padding-top: 30px; 
    }
    .fullimage-therm h2 {
        font-size: 1.8em;
        padding: 40px 0;
        letter-spacing: 2px;
    }
.fullimage-prepare, .fullimage-therm, .fullimage-quote {
	height: 120px;

}
    .prepare img {
        width: 220px;
    }
.info, .prepare {
        width: 800px;
    }
    .essential {
        width: 900px;
    }
    .quote {
       width: 800px;
    }
      .quotet {
       width: 900px;
    }
.nameinfo {
	padding: 20px 40px 20px 40px;
}
.f1 h2 {
	font-size: 2em;
    align-self: center;
}

.f2 h2 {	
	font-size: 1.6em;
    align-self: center;
}
    .specs {
        width: 900px;
    }
    .dimension h3 {
    text-align: left;
    font-size: 1.6em;
    letter-spacing: 2px;
    color: rgba(170, 67, 153, 1.00);
}
 
    .thmtr h2 {
        font-size: 2.6em;
        
    }
    .thmtr h3 {
        font-size: 2.6em;
    }
.dimension h4 {
    text-align: left;
    font-size: 1.4em;
    color: rgba(76, 81, 102, 1.00);
    
}
.dimension img {
    margin: 0;
   
   
}
}




