/*
 Theme Name:   Novellini
 Description:  Novellini Theme (based on Ward by c.bavota: https://themes.bavotasan.com/2013/ward/)
 Author:       Andrew Riddlestone
 Template:     dazzling
 Version:      1.0.0
*/



/* website styles */
body, p {
      color: #868686;
  word-wrap: break-word;
  line-height: 22px;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
}
.grey {
    background: #f1f1f1;
    padding: 40px 0;
    text-align: center;
}
.row {
    max-width: 1140px;
    margin: 0 auto;
}
h1, h2,h3,h4,h5,h6 {
letter-spacing: 1px;
}
ul.nav.navbar-nav {
  float: right;
  margin: 0px 0 0;
}
nav.navbar.navbar-default {
  background-color: #fff;
  font-weight: 200;
margin: 10px auto 15px;
    border: none;
  border-bottom: 3px solid #868686;
    padding: 0 0 10px;
}
.navbar-default .navbar-nav li.active a, .navbar-default .navbar-nav li a {
  color: #868686;
  background: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.navbar-default .navbar-nav li.active a:hover, .navbar-default .navbar-nav li.active a, .navbar-default .navbar-nav li a:hover {
  color: #005580;
    background-color: #eee;
}

.navbar-nav .dropdown-menu li a {
padding: 40px 0 0 180px;
    margin: 5px;
    height: 110px;
}
.navbar-nav .dropdown-menu .trap a {
background: #fff url(./images/trap.jpg) no-repeat 10px 10px;
}
.navbar-nav .dropdown-menu .board a {
background: #fff url(./images/board.jpg) no-repeat 10px 10px;
}
.navbar-nav .dropdown-menu .grill a {
background: #fff url(./images/grill.jpg) no-repeat 10px 10px;
}
.navbar-nav .dropdown-menu .waterproofing a {
background: #fff url(./images/waterproofing.jpg) no-repeat 10px 10px;
}

.navbar-nav .open .dropdown-menu .trap.active  a{
background: #428bca url(./images/trap.jpg) no-repeat 10px 10px !important;
}
.navbar-nav .open .dropdown-menu .board.active  a {
background: #428bca url(./images/board.jpg) no-repeat 10px 10px !important;
}
.navbar-nav .open .dropdown-menu .grill.active  a {
background: #428bca url(./images/grill.jpg) no-repeat 10px 10px !important;
}
.navbar-nav .open .dropdown-menu .waterproofing.active  a {
background: #428bca url(./images/waterproofing.jpg) no-repeat 10px 10px !important;
}


.navbar ul.nav.navbar-nav .open .dropdown-menu {
  width: 1140px;
  left: -592px;
  background: #9e9e9e;
    padding: 10px;
}
ul.nav.navbar-nav .dropdown-menu li {
    width: 370px;
  display: inline-block;
}
.navbar ul.nav.navbar-nav .open .dropdown-menu li a:hover{
  background-color: #3e6186 !important;
}

#page {
  width: 1140px;
  margin: 0 auto;
}
div.metaslider div.caption-wrap {
    position: absolute;
    bottom: 300px;
    left: 0;
    right: 0;
    text-align: center;
    background: none;
    color: white;
    opacity: 0.7;
    margin: 0 auto;
    display: block;
    width: 100%;
    line-height: 1.4em;
}
div.metaslider div.caption-wrap h2, .bg-image h2 {
        font-size: 68px;
        text-align: center;
}
div.metaslider div.caption-wrap h3, .bg-image h3 {
        font-size: 22px;
        text-align: center;
}
div.metaslider div.caption-wrap a, .bg-image a {
        border: 3px solid #fff;
    display: inline-block;
    color: #fff;
    padding: 10px 20px;
    margin: 20px 0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 22px;
}
.bg-image {
    padding: 40px 0;
    background: url(./images/bg-image.jpg) no-repeat center 0;
    background-size: cover;
        text-align: center;
}
.bg-image h2, .bg-image h3, .bg-image a, .bg-image p {
    color: #fff;

}
.bg-underline {
    border-bottom: 3px solid #2c527b;
}
div.metaslider div.caption-wrap a:hover, .bg-image a:hover {
        border: 3px solid #fff;
        background: #fff;
    color: #868686;
    text-decoration: none;
}

.flex-direction-nav a.flex-prev, .flex-direction-nav a.flex-next {
    left: 0;
    opacity: 1;
    width: 50px;
        top: 44%;
    height: 144px;
    background: url(./images/left-right-arrows.png) no-repeat 0 0;
}
.flex-direction-nav a.flex-next {
    right: 0;
    left: auto;
    background-position: -50px 0;
}
.view {
   float: left;
   overflow: hidden;
   position: relative;
   background: #fff;
   text-align: center;
   cursor: default;
   width:560px;
   height: 320px;
    margin: 15px 0;
}
.view span.read-more{
    margin: -5px 0 5px;
    text-decoration: underline;
    display: block;
}
.view .mask {
   position: absolute;
   height: 320px;
   width:560px;
   overflow: hidden;
   top: 0;
   left: 0;
    padding: 50px 10px 0 10px;
}
.view .mask h2, .view .mask p{
   color: #fff;
}
.view img {
   display: block;
   position: relative;
}
.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(134,134,134, 0.7);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first p {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
   color: #fff;
    font-size: 16px;
    line-height: 22px;
    padding: 5px;
    text-align: center;
}
.view-first .info {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;



      border: 3px solid #fff;
    display: inline-block;
    color: #fff;
    padding: 10px 20px;
    margin: 20px 0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 22px;

}







.view-first .info:hover {
  border: 3px solid #fff;
        background: #fff;
    color: #868686;
    text-decoration: none;
}

.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}

.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover p,
.view-first:hover .info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover .info {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.grid-4-images img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.footer-style {
    margin: 0 auto;
    padding: 40px 0;
    border-top: 3px solid #30567e;
    text-align: center;
}
.footer-style img {
    max-width: 135px;
}
.footer-style ul.nav.navbar-nav {
    float: none;
    margin: 20px auto 0;
    text-align: center;
}
.footer-style ul.nav.navbar-nav li{
    float: none;
    text-align: center;
        display: inline-block;
}
.footer-style ul.nav.navbar-nav li a{
    text-transform: uppercase;
    color: #868686;
}
.footer-style .dropdown-menu {
    width: 1140px;
    left: -406px;
}



.container{
width: 1140px !important;
}
.row {
    width: 1140px;
    margin: 0 auto;
}
.widget ul li {
     list-style: initial;
}
.widget-title , .textwidget h2{
     border-bottom: none;
    margin: 0;
    font-size: 40px;
    font-size: 4.0rem;
    font-weight: 300;
    display: block;
}
.widget_text, .widget_sow-editor{
    background-color: #ffffff !important;
    padding: 45px !important;
}

.so-widget-sow-image img{width:100%;}

.widget{
text-align:left;
}

.widget-title:after,  .widget h2:after{
    content: "";
    display: block;
    width: 90px;
    height: 1px;
    background-color: #000;
    margin: 25px 0;
}

.sow-features-feature:after {
    width: 100%;
    content: "";
    display: block;
    width: 300px;
    height: 1px;
    border-bottom: lightgrey solid thin;
    margin: 0 auto;
    padding: 20px;
}

nav.navbar.navbar-default {
    margin:0 !important;
    padding: 20px  !important;

}

.metaslider.metaslider-flex.metaslider-43.ml-slider {
    padding-top: 20px;
}

.number-one {
  display: inline-block;
 width: 50px;
 height: 50px;
 text-align: center;
 background: #43568C;
 color: white;
 font-size: 30px;
 padding-top: 9px;
 }

 .number-two {
   display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  background: #357C8A;
  color: white;
  font-size: 30px;
  padding-top: 9px;
  }

  .number-three {
    display: inline-block;
   width: 50px;
   height: 50px;
   text-align: center;
   background: #53C0D7;
   color: white;
   font-size: 30px;
   padding-top: 9px;
   }


   .number-one-small {
     display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #43568C;
    color: white;
    font-size: 16px;
    padding-top: 3px;
    }

    .number-two-small {
      display: inline-block;
      width: 30px;
      height: 30px;
     text-align: center;
     background: #357C8A;
     color: white;
     font-size: 16px;
     padding-top: 3px;
     }

     .number-three-small {
       display: inline-block;
       width: 30px;
       height: 30px;
      text-align: center;
      background: #53C0D7;
      color: white;
      font-size: 16px;
      padding-top: 3px;
      }
.navbar-header .logo { margin-top: 5px;
}
.sow-image-container{position: relative;}
.caption {position: absolute; background: white; bottom:0; padding: 10px; margin: 10px; border:solid thin;}

/*  LIST STYLES*/
ul {
    list-style-position: inside !important;
}

ul {
  padding-left: 20px !important;
}

.objectfit img {object-fit :cover; height: 100% !important; 
}

ol {
    padding-left: 15px !important;
    padding-top: 15px !important;
}

.footer{ padding: 200px 0px;
    background-image: url(https://www.vari-dec.co.uk/wp-content/uploads/2016/11/footer.png);
    background-repeat: no-repeat;
    margin-right: -181.5px;
    margin-left: -181.5px;
    border-left: 0px;
    border-right: 0px;
    background-size: cover;
    width: 100%;
    Height: 100%;
    margin: 0 auto;
    text-align: center;}
	
	.or {display:inline-block; box-sizing: border-box; border:solid thin; background:white;	border-radius: 50%;width: 30px;height: 30px; text-align:center; line-height:26px;}
	
	
	
	
	
	
.container{ 
width: 1140px !important;
}
.row {
    width: 1140px;
    margin: 0 auto;
}
.widget ul li {
     list-style: initial;
}
.widget-title , .textwidget h2{
     border-bottom: none;
    margin: 0;
    font-size: 40px;
    font-size: 4.0rem;
    font-weight: 300;
    display: block;
}
.widget_text, .widget_sow-editor{
    background-color: #ffffff !important;
    padding: 45px !important;
}

.so-widget-sow-image img{width:100%;}

.widget{
text-align:left;
}

.widget-title:after,  .widget h2:after{
    content: "";
    display: block;
    width: 90px;
    height: 1px;
    background-color: #000;
    margin: 25px 0;
}

.sow-features-feature:after {
    width: 100%;
    content: "";
    display: block;
    width: 300px;
    height: 1px;
    border-bottom: lightgrey solid thin;
    margin: 0 auto;
    padding: 20px;
}

nav.navbar.navbar-default {
    margin:0 !important;
    padding: 20px  !important;
   
}

.metaslider.metaslider-flex.metaslider-43.ml-slider {
    padding-top: 20px;
}