html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit; /*vertical-align: baseline;*/
}
html, body{
height: 100%;
min-height: 100%;
}
*{
outline: none !important;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
font-family: "Roboto" !important;
transition: all .4s !important;
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom center;
}
ol, ul {
list-style: none;
}
hr {
margin: 0 !important;
}
textarea, input {
outline: none !important;
}
.expandTo100{
height: 100%;
min-height: 100%;
}
.z0{
z-index: 0 !important;
}
.leftToggle{
left:23px !important;
}
.relative{
position: relative;
}
.opacity0{
opacity: 0;
}
.opacity1{
opacity: 1;
}
.mAuto{
margin: auto;
}
.mTop100{
margin-top: 100px;
}
.pTop50{
padding-top: 50px;
}
.pTopBottom100{
padding: 100px 0;
}
.pTopBottom50{
padding: 50px 0;
}
.pBot100px{
padding-bottom: 100px;
}
.divider{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,7f7f7f+50&0+0,0.8+50,0+100 */
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(127,127,127,0.8) 50%, rgba(127,127,127,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(127,127,127,0.8) 50%,rgba(127,127,127,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(127,127,127,0.8) 50%,rgba(127,127,127,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#007f7f7f',GradientType=1 ); /* IE6-9 */
width:90%;
height: 2px;
margin: 50px auto;
}
.overflowH{
overflow: hidden;
}
/*bgcolors*/
.lightblue{
background-color: #0298e6;
color: #fff;
}
.grey{
background-color: #f7f7f8;
}
/*end bgcolors*/
/*text colors*/
.cLightblue{
color: #0298e6;
}
.cWhite{
color: #fff !important;
}
.cError{
color: #F44336 !important;
}
.borderBError{
border-bottom: 1px solid #F44336 !important;
}
.cSuccess{
color: #259b24 !important;
}
/*end text-colors*/
/*HEADER*/
.navbar-default{
background-color: #fff !important;
height:66px !important;
width:100% !important;
border-radius:0 !important;
box-shadow: 0 1px 5px rgba(161, 161, 161, 0.25);
position: fixed;
width:100%;
z-index: 2;
}
.navbar-default .navbar-nav>li{
border-left: 1px solid #EFEFEF;
}
.navbar-default .navbar-nav>li:last-child{
border-right: 1px solid #EFEFEF;
}
.navbar-default .navbar-nav>li>a{
position: relative;
text-transform: uppercase;
font-size: 12px;
height: 66px;
line-height: 33px;
color: #7d7d7d !important;
font-weight: 300;
padding-left: 25px;
padding-right: 25px;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover{
color: #0298e6 !important;
}
.navbar-brand{
padding: 10px !important;
}
/*end HEADER*/
/*buttons*/
.round-button{
display: block;
max-width: 150px;
padding: 15px 50px;
font-size: 19px;
border-radius: 30px;
text-transform: uppercase;
text-align: center;
border: 1px solid transparent;
}
.square-button{
display: block;
max-width: 150px;
padding: 15px 50px;
font-size: 19px;
text-transform: uppercase;
text-align: center;
border: 1px solid transparent;
}
.square-button.lightblue:hover{
border: 1px solid #0298e6;
color: #0298e6;
text-decoration: none;
background-color: transparent !important;
}
.round-button.lightblue:hover{
border: 1px solid #0298e6;
color: #0298e6;
text-decoration: none;
background-color: transparent !important;
}
/*end buttons*/
/*font-sizes*/
h1{
font-size: 60px;
font-weight: 200;
line-height: 70px;
}
h2{
font-size: 45px;
font-weight: 200;
line-height: 55px;
}
.sub-title{
font-size: 22px !important;
font-weight: 300;
line-height: 27px;
color: #6d6d6d;
}
.sub-title.cGrey{
color: #d1d1d1;
}
/*end font-size*/
/*CQ*/
.cqScreenshots{
background: url('/img/countertopQuote/slide_bg.jpg') no-repeat center center fixed;
background-size: cover;
webkit-background-size: cover;
}
slick .screenShot{
padding:0 20px;
transition: opacity 0.3s ease-out 0.3s;
}
slick .screenShot img{
max-width: 700px;
display: block;
margin: auto;
}
slick .clientItem{
padding: 0 20px;
height: 150px;
}
slick .clientItem a{
transform: translateY(-50%);
position: relative;
top: 50%;
display: block;
}
slick .clientItem a img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
slick .clientItem a img:hover{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
.slick-center.screenShot #toggleText{
opacity: 1 !important;
transition: opacity 0.3s ease-out 0.3s;
}
/*end CQ*/
/*CONTACT*/
.overlay-black{
background-color: rgba(0, 0, 0, 0.8);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
left: 0;
top: 0;
}
.overlay-black .container{
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.overlay-black .form-field{
margin: 25px 0;
}
.overlay-black .form-field label{
color: #0298E6;
margin-left: -5px;
}
.overlay-black input{
padding-bottom: 5px;
}
.overlay-black input,
.overlay-black textarea{
border: 0;
border-bottom: 1px solid #fff;
background-color: transparent;
margin-top: 10px;
font-size: 19px;
width: 100%;
transition: all 0.3s ease-out;
resize: none;
color: #fff;
}
.overlay-black input:focus,
.overlay-black textarea:focus{
border-bottom: 1px solid #0298E6;
}
.overlay-black .successNotify{
font-weight: 500;
font-size: 19px;
padding-top: 20px;
padding-left: 20px;
}
map .switch{
position: absolute;
bottom: 0;
width:100%;
padding: 20px 0;
text-align: center;
z-index: 1;
color: #fff;
}
map .switch .radio{
position: relative;
width: 45px;
height: 25px;
background: transparent;
border: 1px solid #fff;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
margin: auto;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
map .switch .radio .elipse{
position: absolute;
display: block;
width: 21px;
height: 21px;
background: #fff;
top: 1px;
left: 1px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.9);
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.9);
}
/*END CONTACT*/
@media only screen and (max-width: 767px) {
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
text-align: center;
background-color: #fff;
overflow: hidden;
}
.navbar-default .navbar-nav>li{
border-left: 0;
border-bottom: 1px solid #d9d9d9;
}
.navbar-default .navbar-nav>li>a{
height: 50px;
line-height: 25px;
}
.navbar-default .navbar-collapse .navbar-nav{
float: none !important;
margin: 0;
}
}