@charset "utf-8";
/* dk-blue:#194775 */
    	@font-face {
    font-family: 'roboto_slabbold';
    src: url('RobotoSlab-Bold-webfont.eot');
    src: url('RobotoSlab-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('RobotoSlab-Bold-webfont.woff') format('woff'),
         url('RobotoSlab-Bold-webfont.ttf') format('truetype'),
         url('RobotoSlab-Bold-webfont.svg#roboto_slabbold') format('svg');
    font-weight: normal;
    font-style: normal;
	}
	@font-face {
    font-family: 'open_sansregular';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Regular-webfont.woff') format('woff'),
         url('OpenSans-Regular-webfont.ttf') format('truetype'),
         url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {width: 100%;
	height:102%;
    padding: 0!important;
    font-size: 18px!important;
}

body {
    padding: 0!important;
    font-size: 18px!important;
    margin: 0!important;
    font-family: open_sansregular, sans-serif;	
}
.dark {
    background:#194775;
	background-image:url(../img/RoofBGimgADJ3.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
	background-size:contain;
	background-attachment:fixed;
}
/* ===================================================== LAYOUT ================================================ */
.wrapper {
    position: relative;
    display: block;
    width: 100%;
    margin:0;
    padding: 0 0 100px 0!important;
    overflow: auto!important;
}
.main-content {
    z-index: 800;
    background: rgba(255, 255, 255, .95);
    margin-top: 100px!important;
    overflow:auto!important;
	margin-bottom:0!important;
}

.grids {
    position: relative;
    display: block;
    padding: 40px 0 0 0!important;
    /*width: 1600px!important;
    max-width: 98%!important;*/
	 max-width:96%;
 width: 96%!important;
    clear: both;
    margin: 0 auto!important;
    list-style: none;
}

[class^="grid-"]{float:left;margin:0 2.679% 0 0;}
.grids [class^="grid-"]{margin:0 0 0 2.679%;}

.grid-1 { width: 3.571%}
.grid-2 { width: 9.821%}
.grid-3 {width: 16.071%}
.grid-4 {width: 22.321%}
.grid-5 {width: 28.571%}
.grid-6 { width: 34.821%}
.grid-7 {width: 41.071%}
.grid-8 {width: 47.321%}
.grid-9 { width: 53.571%}
.grid-10 {width: 59.821%}
.grid-11 {width: 66.071%}
.grid-12 {width: 72.321%}
.grid-13 {width: 78.571%}
.grid-14 {width: 84.821%}
.grid-15 {width: 91.071%}
.grid-16 { width: 97.321%;margin: 0}

/*=============================================display===========================================*/
* {box-sizing: border-box}
.lg-screen {display: block!important;}
.sm-screen {display: none!important;}
/*=============================================FONTS & HEADS==================================================*/
.boto,
h2,
h3,
h4,
h5,
h6 {
    font-family: roboto_slabbold, serif
}
h3, h4, h5, h6 {letter-spacing:1px;}
/*=============================================================HEADER=======================================================*/
header {position:fixed; display:inline!important; z-index:2000; padding:10px 4px!important; margin:0 0!important;
-webkit-box-shadow: 0 10px 5px 0px rgba(0,0,0,0.35);box-shadow: 0 10px 5px 0px rgba(0,0,0,0.35);
background:rgba(7,62,99,1)!important;top:0; left:0!important; height:80px!important; min-width:100%; }
.divH1 {margin:0; padding:0; overflow:auto; max-width:72%;}
h1 {display:inline!important;padding:0; margin:10px 0!important;font-size:18px; font-weight:500;color:#fff;}
header p {position:relative;display:inline;font-size:15px!important;color:#fff}
.tel {color:#fff!important; text-decoration:none}
.tel:hover {color:#fff!important; text-decoration:underline!important;}

/*===================================================Spacing=========================================*/
.clear {clear: both;}
.lessMargin {margin-left:1%!important}
.bot-pad {clear: both; height: 200px!important}

/*================================================================LG-Nav================================================================*/
#lg-nav {
	position:fixed;
	z-index:2100!important;
	left:68%!important;
	top:10px!important;
	display:inline-block;
	list-style:none;
	text-decoration:none;
	font-size:16px!important;
}
#lg-nav ul {font-size:inherit!important;}
#lg-nav li {float:left; width:100px; text-align:center;text-decoration:none;}
#lg-nav a, .button {color:#fff; margin:0!important;text-decoration:none;}
#lg-nav a:hover, button:hover {color:#fff;text-decoration:none;}

#page-name, #page-name a {width:100px; outline:none!important; border-top:none;border-right:none;border-bottom:rgba(255,255,255,0) solid 1px!important; border-left:none!important;text-decoration:none!important;}

#page-name a:hover {position:relative;display:block;color:#fff; padding:12px 0 6px 2px;border-bottom:rgba(255,255,255,0) solid 1px!important;text-decoration:none;}

.button {width:100px; outline:none!important; border-top:none;border-right:none;border-bottom:rgba(255,255,255,0) solid 1px!important; border-left:none!important;text-decoration:none!important;}
.button:hover {border-bottom:rgba(255,255,255,1) solid 1px!important;text-decoration:none!important;}

/*==================================================================sm nav-------------------------------------------------------*/
sm-nav {
 position:fixed;
 z-index:2100!important;
 left:86%!important;
 top:-6px!important;
}
 .menu-i {
position:relative;
display:block;
top:2px;
right:2px;
font-size:32px;
}
.fa {color:#fff;background:rgba(0,0,0,0)!important;}


.accordion {
background-color:rgba(0,0,0,0)!important;
color:#fff;
cursor:pointer;
width:100px;
border:none!important;
outline:0;
font-size:18px;
transition:.4s
}

.page-name {
position:relative;
display:block;
font-size:18px;
color:#fff;
background:#194775!important;
cursor:default;
padding:12px 0 6px 4px;
}

 .panel {
display:none;
overflow:hidden;
text-align:left;
padding:12px 0 6px 4px;
}
 .panel-inner, .page-name {
background:#194775;
position:relative;
display:block;
text-align:left;
font-size:16px;
padding:12px 0 6px 6px!important;
text-align:left;
border-bottom:1px solid #fff;
}
.panel-inner {
color:#7fbbf6;
text-decoration:none;
background:#194775;
}
/*=================================================animation styles Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden========================================*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.delay-e{animation-delay: 1.25s!important; -webkit-animation-delay: 1.25s!important;}
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}
/*===========================================================================Footer styles==============*/
footer {
    position: fixed;
    display: inline!important;
    background:#194775;
    height: 56px;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 3000;
	color:#fff;
	text-align:center;
}

footer p {
	display:inline;
    text-align: center;
    color: #fff;
    font-size: 14px;
    padding: 0;
    margin: 18px 0 0 0!important	
}
footer a {color:#cff;}
footer a:hover {color:#0ff;}
.vx2 {height: 1.8rem;width: 1.8rem;font-family: Tahoma, Geneva, sans-serif;font-weight: 500;color: #fff!important;text-decoration:none!important;}
.vx2 a {background-color: #09C!important;color: #fff!important;border-radius: .9rem;text-decoration:none!important; }
.vx2 a:hover {background-color: #6CF!important;color: #fff!important;border-radius: .9rem;text-decoration:none;}

/*======================================================================== POSITIONING=====================================================*/
.t-center {text-align: center}
.t-right {text-align: right}
/* ========================================================Custom Head & paragraph styles=========================================================*/

.page-head-h2 {
	font-size: 3rem!important;
    position: relative;
    display: block;
    padding: 0 0 0 0;
	text-shadow:2px 2px 2px #000!important;	
    color: #fff;
    text-align: center
}

.page-head-2nd {
	font-size: 3rem!important;
    position: relative;
	top:60px;
    display: block;
    padding: 0 0 100px  0;
	margin:0 0 0 0!important;
	text-shadow:2px 2px 2px #000!important;	
    color: #fff;
    text-align: center
}
.wrapperH2 {padding-top:0;margin-top:0}
.lgP {font-size:1.2rem;}
.intro-p {margin:0 1rem; padding:.8rem;font-size:1.3em; color:#fff; background:rgba(25,71,117,.7);text-align:center}
/*============================================================background styles=======================================================*/
.white-bg {
	background-color:rgba(255, 255, 255, 0.90);
	background-size:cover;
	overflow:hidden;
}
.calc-panel {padding:1rem;background-color: #fff;border-radius: 1rem;}
.blueRadBg {background:rgba(25,71,117,.2); border-radius:1rem; padding:1rem!important; overflow:visible!important;}
/*==================================================================Images====================================================*/
.img-scale {position:relative;display:block;max-width:100%!important;margin-left:auto;margin-right:auto!important; height:auto!important;}
.processImg{display: inline; margin: 0 5px;}

/*===================
BEGIN PAGE SPECIFIC*/
/*============================================Index================== */
.quote{padding:20px 0;background-image:url(../img/quote.png); background-repeat:no-repeat; background-position:0 0;}
.metalHr {border-top:1px solid #999}
.sm-p {
	float: left;
	font-size: 12px
}
.prods img {
	margin-bottom: 0!important;
	padding-bottom: 0!important;
	width: 140px;
	max-width: 99%!important
}
.swatchDiv {position:relative; display:inline;}
.colors {padding-right: 1rem; padding-bottom: 1rem;}
.descrip {border-top: 1px solid #194775;border-bottom: 1px solid #eee;padding: 2rem;background-color: #fff;margin:1rem auto!important;overflow:auto;}
.descrip p {padding: 1rem;line-height: 1.2}
.specUl {list-style-type:disc!important; margin:0 0 0 0!important;padding:0 0 0 1rem!important;}
/*===============================================================================FAQ styles========================================================*/
.raq {color:#194775; font-size:140%; font-weight:bold;}
.accordionF {
	background-color:rgba(25,71,117,.7);
	color: #fff;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	transition: 0.4s;
	font-weight:bold;
	text-align:center;
}
.accordionF:hover {
	background-color:rgba(25,71,117,1);
	color:#fff;
}
.panelF {
	padding: 10px 18px;
	display: none;
	background-color:#fff;
	overflow:hidden;
	text-align:center;
}

/*==================================================================gallery styles==================================================*/
.lilbox {
position: relative;
display: block!important;
text-align:center!important;
}

.lilbox img {
    padding: 10px 10px;
    border: 1px solid #eee;
    /*box-shadow: 4px 4px 4px #999;
    /*border-radius: 6px;*/ 
	background:#fff;
	margin-left:auto!important;
	margin-right:auto!important;
	max-width:100%!important;
	height:auto!important;
}

.lilbox p {
    position: relative;
	text-align:center;
    display: block;
    margin-bottom: 2rem!important
}

.lilbox:hover img {
    border: 1px solid #31a3dd;
    /*box-shadow: 4px 4px 4px #999;
    /*border-radius: 6px*/
}