@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, h5 {
	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;
}
.centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.smscrn {
	display: block;
}
.lrgscrn {
	display: none;
}
.rq {
	display: block;
	width: 100%;
	margin: 0 auto;
	border-bottom: 3px solid rgba(37, 175, 180, 0.30);
}

.request {
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 20px;
	padding: 20px 0px 30px 0px;
}
.request button {
	background-color: rgba(76, 81, 102, 1.00);
	border: 1px solid #000;
	border-radius: 5px;
	color: #fff;
	padding: 16px 32px;
	text-align: center;
	text-decoration: none;
  	font-size: 1.2em;
   	transition-duration: 0.4s;
  	cursor: pointer;
}
.request button:hover {
	background-color: rgba(37, 175, 180, 0.60);
}
button.b1 a, button.b2 a {
	color: #ffffff;
	text-decoration: none;
}

.b1 {
	grid-column: 1 / span 2;
	margin-bottom: 15px;

}
.b2 {
	grid-column: 1 / span 2;
}
#toTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: rgba(37, 175, 180, 1.00);
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#toTop:hover {
  background-color: #555;
}
/* 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: 50px;
	position: relative;
	
}
header h1 {
	display: block;
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top: 150px;
	color: rgba(37, 175, 180, 1.00);
	text-align: center;
	font-size: 2.4em;
	letter-spacing: 1px;
	

}

#kwiktemp, #indicaid, #nextemp, #cugrip, #carestart, #logic360, #numed, #microtek {
	padding: 55px 0px 20px 0px;
	
}
/* 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;
	color: #fff;
	font-size: 1em;
	line-height: 1.6;
}
.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-skyline-t .fullimage-line, .fullimage-footer {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}


.fullimage-skyline-t {
	background-image: url("../images/th-skyline-900.jpg");
	min-height: 200px;
	box-shadow: 0px 2px 3px rgba(37, 175, 180, 0.50);
}
.fullimage-line {
	background-image: url("../images/line25d.jpg");
	height: 20px;
	max-height: 20px;
}


.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-skyline, .fullimage-skyline-t, .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-skyline-t {
	height: 180px;
}

.intro {
	padding-top: 35px;
	padding-bottom: 20px;
}
.intro h2, .other h2 {
	color: rgba(37, 175, 180, 1.00);
	text-align: center;
	font-size: 1.4em;
	line-height: 1.2;
	
}

.introt {
	padding-top: 35px;
	padding-bottom: 20px;
}
.introt h2 {
	color: #333;
	text-align: center;
	font-size: 1.6em;
	line-height: 1.4;
	
}

.info {
	display: block;
	width: 80%;
	
}
.info h2, .infot h2 {
	text-align: center;
	font-size: 1.8em;
	line-height: 1.2;
	color: rgba(170, 67, 153, 1.00);
}
.info h3, .other 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, .other p {
	font-size: 1.2em;
	line-height: 1.2;
	padding: 10px 0px 10px 0px;
}
.info ul {
	display: inline-block;
	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;
}

.infot {
	padding-top: 40px;
}

.infot h3 {
	text-align: center;
	font-size: 1.4em;
	line-height: 1.2;
	padding-top: 20px;
	padding-bottom: 8px;
}
.about {
	display: block;
	margin: 0 auto;
	width: 80%;
	height: auto;
	padding: 40px 0px 30px 0px;
}
.about p {
	font-size: 1.2em;
	line-height: 1.4;
	padding: 0px 0px 20px 0px;
	
}
.about h2 {
	font-size: 1.2em;
	line-height: 1.2;
	text-align: left;
}
.about h3 {
	font-size: 1.2em;
	line-height: 1.2;
	text-align: center;
}
.made h3 {
	font-size: 1.2em;
	line-height: 1.6;
	text-align: center;
}
.about a {
	font-weight: 500;
}
.about ul {
	
	padding: 20px 0px;
}
.about li {
	font-size: 1.2em;
	line-height: 1.6;
}
.other {
	display: block;
	margin: 0 auto;
	width: 80%;
	padding-bottom: 20px;

}
.other h2 {
	
}
.other ul {
	padding-left: 12%;
    padding-bottom: 20px;
}
.other li {
	list-style: disc;
	font-weight: 500;   
	line-height: 1.5;
	font-size: 1.2em;
	text-align: left;
    color: #333;

}
.other a {
	color: rgba(170, 67, 153, 1.00);
}
.are ul li {
    font-weight: 500;   
	line-height: 1.5;
	font-size: 1.3em;
	text-align: center;
    color: #333;
}

.tr h5 {
	font-size: 1.2em;
	text-align: center;
}
	
.fullimage-prepare, .fullimage-quote .fullimage-grey {
	height: 60px;
}

.prep h2 {
	color: #fff;
	text-align: center;
	font-size: 1.6em;
	line-height: 1.4;
	
}
.kwikgrn, .nt, .cs, .ind {
	display: block;
	margin: 0 auto;
}
.kwikgrn img, .lgc img, .mcrt img {
	display: block;
	margin: 20px auto;
    width: 280px;
	max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.nmd img {
	display: block;
	margin: 20px auto;
    width: 200px;
	max-width: 100%;
    height: auto;
    border-radius: 8px;
}
#numed h3 {
		text-align: center;
		color: rgba(37, 175, 180, 1.00); 
	}
.nt img, .cs img {
	display: block;
	margin: 20px auto;
    width: 280px;
	max-width: 100%;
    height: auto;
    border: 1px solid #000;
}
.ind img {
	display: block;
	margin: 20px auto;
    width: 280px;
	max-width: 100%;
    height: auto;
}
/* Position CuGrip image container (needed to position the left and right arrows) */
* {
  box-sizing: border-box;
}

.container {
  margin: 20px auto;
  position: relative;
}
.container a {
	color: #fff;
}
/* Hide the images by default */
.cugripSlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}
.caption-container p {
	color: #fff;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.cgi {
  opacity: 0.6;
}

.active,
.cgi:hover {
  opacity: 1;
}
.prepare {
	display: block;
 	margin: 0 auto;
	padding: 20px 0;
   	width: 80%;
}
.prepare h2 {
	font-size: 1.4em;
	padding-bottom: 12px;
	color: #333;
}
.prepare p {
	font-size: 1.2em;
	color: #000;
	line-height: 1.2;
	padding-bottom: 30px;
 	
}
.prepare img {
    display: block;
	margin: 0 auto;
    width: 300px;
	max-width: 100%;
    height: auto;
    border-radius: 8px;
    
}
.logos {
	display: block;
	margin: 0 auto;
	width: 100%;
	border-top: 3px solid rgba(37, 175, 180, 0.30);
	
	
}

.quote {
    display: grid;
	grid-template-columns: auto; 
	padding-top: 60px;
}

.quote img {
	display: block;
	margin: 0 auto;
    width: 150px;
    max-width: 100%;
    height: auto;
 }
.partners {
	display: grid;
	grid-template-columns: auto;
	padding-bottom: 20px;
}
.partners img {
	display: block;
	margin: 0 auto;
    width: 150px;
    max-width: 100%;
    height: auto;
}
.ptnrwwp1 {
	grid-column: 1;
	grid-row: 1;
}
.ptnrwwp2 {
	grid-column: 1;
	grid-row: 2;
}
.kt img:hover, img:focus {
    opacity: 0.6;
}
.wwp img:hover, img:focus {
    opacity: 0.6;
}
.quote h3 {
    grid-column: 1;
    grid-row: 2;
	text-align: center;
	padding: 20px 0 20px 0;
}
.quote a {
    color: rgba(37, 175, 180, 1.00);
}
.quote 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;
	
}
.therm1 {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: auto;
	
}
.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-test-off {
    display: grid;
    width: 80%;
	margin: 0 auto;
    padding: 30px 0px 40px 0px;
}
.fullimage-therm {
	height: 60px;
}

.fullimage-therm h2 {
	color: #ffffff;
	text-align: center;
	font-size: 1.4em;
	line-height: 1.4;
	position: absolute;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	letter-spacing: 2px;
	
}
.quote h3 {
    font-size: 1.4em;
    line-height: 2;
}
.essential h2 {
	font-size: 1.4em;
	color: #333;
	padding-bottom: 12px;
}


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

header h1 {
	font-size: 3.2em;
	top: 180px;
	letter-spacing: 1.4px;
	
}
	.fullimage-skyline {
	height: auto;
}
.fullimage-skyline-t {
	height: 260px;
}



.fullimage-blue {
   height: 160px;
}    
.intro h2 {
    font-size: 2em;
    letter-spacing: 2px;
    line-height: 1.2;
}
.introt h2 {
    font-size: 2em;
    letter-spacing: 2px;
    line-height: 1.4;
}
.introt {
	padding-top: 20px;
	padding-bottom: 20px;
}

.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;
}

.fullimage-therm h2 {

	padding-top: 34px;
    padding-bottom: 34px;
   
}
	.ind img {
		width: 360px; 
	}
}
@media only screen and (min-width : 860px) {

		.fullimage-skyline {
	background-image: url("../images/kt-skyline-1500.jpg");
	height: auto;
}
.fullimage-skyline-t {
	background-image: url("../images/th-skyline-1500.jpg");
	height: 300px;
}
	header h1 {
	font-size: 3.2em;
	top: 225px;
	letter-spacing: 1.8px;
	
}
.about {
	padding-top: 10px;
}

.about h2 {
	font-size: 1.4em;
	padding-top: 10px;
}
.made h3 {
	font-size: 1.2em;
	line-height: 1.6;
	text-align: left;
}
	.b1 {
	grid-column: 1;
	margin-bottom: 0px;

}
.b2 {
	grid-column: 2;

}
	.other h2 {
		font-size: 1.4em;
	}
    .fullimage-blue {
        height: 160px;
    }
    .intro h2 {
        font-size: 2em;
    }
	.introt {
		font-size: 1.2em;
	}
    .info h2, .other h2 {
        font-size: 2.2em;
    }
.kwikgrn, .nt, .lgc, .mcrt {
	display: grid;
	grid-template-columns: auto auto;
    margin: 0 auto;
	padding: 20px 0;
	grid-column-gap: 20px;
	
}
.nmd {
	display: grid;
	grid-template-columns: auto auto auto;
    margin: 0 auto;
	padding: 20px 0;
	grid-column-gap: 20px;
	
}
.kwg1, .lgc1 {
	grid-column: 1;
	grid-row: 1;
}
	.mcrt2 {
		grid-column: 2;
	}
	.mcrt1 img {
		grid-column: 1;

	}
.kwg2, .lgc2 {
	grid-column: 1;
	grid-row: 2;
}
.kwikgrn img, .lgc img {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin: 0px auto;
 }
	.ind img {
		width: 520px;
	}
.nt ul {
	grid-column: 1;
	}
.nt img {
		grid-column: 2;
		margin: 0px auto;
	}
	.nmd1 {
	grid-column: 1;
	}

	.nmd2 {
		grid-column: 2;
	}
	.nmd3 {
		grid-column: 3;
		
	}

	
.cs, .bn {
	display: grid;
	grid-template-columns: auto auto;
    margin: 0 auto;
	padding: 20px 0;
	grid-column-gap: 20px;
	align-items: center;
}


.csi2, .bni1 {
	grid-column: 1 / span 2;
	grid-row: 1;
	}

.cs p, .bn p {
	grid-column: 1 / span 2;
	grid-row: 2;
	padding: 20px 0px;
	}
.cs ul {
	grid-column: 1;
	grid-row: 3;
}
.bn h3 {
	grid-column: 1 / span 2;
	grid-row: 3;
	text-align: center;
}
	.bn ul {
		grid-column: 1;
		grid-row: 4;
	}
	.bni2 {
		grid-column: 2;
		grid-row: 4;
	}
.csi1 {
	grid-column: 2;
	grid-row: 3;
	}

.prepare {
	display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 25px;
	margin: 0 auto;
    padding: 30px 0px 40px 0px;
	width: 80%;
		
}
.prepare h2 {
	grid-column: 1 / span 3;
	grid-row: 1;
	text-align: left;
}
.prepare p {
    grid-column: 1 / span 2; 
	font-size: 1.2em;
	color: #000;
	line-height: 1.2;
    align-self: center;
	
}
 .prepare img {
	grid-column: 3;
       width: 220px;
   }

.quote h3 {
    font-size: 1.6em;
}
.partners {
	display: grid;
	grid-template-columns: auto auto auto;
	align-content: center;
	grid-column-gap: 16px;
}

.ptnrwwp1 {
	grid-column: 1 / span 2;
	grid-row: 1;
}
.ptnrwwp2 {
	grid-column: 3;
	grid-row: 1;
}
}
@media only screen and (min-width : 1024px){
    
header h1 {
    font-size: 4em;
	
	}
	

.fullimage-skyline-t {
	height: 340px;
}
header h1 {
	top: 260px;
	letter-spacing: 2px;
	
}
.fullimage-blue {
    height: 200px;
    }
.intro h2 {
    font-size: 2.6em;
}
.introt h2 {
    font-size: 2.2em;
}
     .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;

}

.about, .info, .other {
        width: 800px;
    }
	.about {
		padding-top: 40px;
	}
	
	.prepare {
		width: 900px;
	}
    .essential {
        width: 900px;
    }
    .quote {
       width: 100%;
    }
      .quotet {
       width: 900px;
    }
.quote h3 {
    font-size: 1.8em;
}
.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;
  
}
	.box {
		width: 800px;
	}	
	.quote img {
		width: 128px;
	}
	.ind img {
		width: 580px;
	}
}

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

.fullimage-skyline-t {
	background-image: url("../images/th-skyline-2000.jpg");
	height:360px;
}
header h1 {
	top: 100px;
	letter-spacing: 2.5px;
	
}
	.box {
		width: 80%;
	}	
.quote h3 {
    font-size: 2em;
}
}