@charset "utf-8";
/* CSS Document */
@charset "utf-8";
/* CSS Document */
.testremove
{
position:fixed;
top:0;
z-index:2000;
width:100%;
height:2px;
background-color:grey;
}

 /*for screens such as ipads that are 500 px or MORE */
@media(min-width: 500px) {

.testremove
{

background-color:magenta;

  }
  }

 /*for screens such as laptops that are 990 px or MORE */
@media(min-width: 800px) {

 .testremove
{

background-color:MediumPurple;

  }
  }
 /*for larger full width screens that are 1500 px or MORE */
@media(min-width: 1500px) {

 .testremove
{

background-color:DarkCyan;

  }
  }
  
html,body,div,span,h1,h2,h3,h4,p,a,em,img,strong,b,ul,li,form{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}

/* FONTS*/
body{line-height:1; color:#504747;  font-size:20px; line-height:25px; font-family:'Roboto', sans-serif; font-weight:300;}
.web-inclusions
{
background-color:white;padding:30px;}
.web-inclusions h3
 {
 
    font-size: 35px;
	padding-bottom:30px;
	}
	
	.web-inclusions p
	{
	padding-bottom:40px;
	padding-top:10px;}
 
ul { list-style-position: inside;
padding:20px;}

ul li
{margin-top:1em;}



p {padding-bottom:15px;}
em {font-style:italic;} strong, b {font-weight:bold;}
a:link, a:visited {color:DarkSlateBlue; }
a:hover, a:active {color:DarkMagenta; }


 .fwrap h4  {font-size:40px; line-height:24px; padding-bottom:20px;}

.main-heading, .main-heading2 
{
 

  
	padding:10px 40px 20px 40px;
	text-align:center; 
}

.main-heading2 
{
 
   
  font-size: 25px;
  
	 
}

.main-heading 
{
 
   
  font-size: 40px;
   line-height:45px;  
	 
}

 

.left-align
{
text-align:left; padding-left:0px;}

.slider-title
{
font-size:20px;
clear:both;
text-align:center;
text-transform:uppercase;
}

 .services h2
 {
 
    font-size: 25px;
    line-height: 30px;}
 
/* FOOTER FONTS*/
.column {width:31%; margin:0 1%; float:left;  color:#F5F5F5; font-size:11px; line-height:15px; text-align:center;}
.column h4 {
size:40px;
}

/*  COLUMNS ON WEB DESIGN PAGE FONTS */
.web-column h2
{
font-size:1em;
font-weight:400;
 
text-align:center;
 
}

 .container h1
{
 
padding-bottom: 2%;
} 

.main h1
{font-size: 2em; line-height:1em; 
margin-bottom:0.5em;

 
}
/*TEXT IN HOVER BOXES ON HOME PAGE*/
.hover-text {
  color: white;
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: left;
  
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    
    transition: 0.2s all ease-in-out;
    -moz-transition: 0.2s all ease-in-out;
    vertical-align: left;
	
 
}

#work .hover-text
{color:black;}
 .services-box, .web-box
 {
 text-align:center;
 
 
 }
   /*start with mobile or larger */
 .tagline
{
width:80%; margin:auto;

text-align:center;
 
 
 
}

 .statement
{

 font-size:25px; line-height: 35px; width:80%; margin:auto; padding-bottom:10px;}
 
   /*for screens such as iphones that are 499 px or LESS */
@media(max-width: 499px) {

 .tagline
{
font-size:30px;
 line-height:35px;
padding-top:50px; 

padding-bottom:20px;

}

.main-heading2

{

 font-size:20px; line-height: 25px; padding-bottom:30px; }

   
 .statement
{

 font-size:20px; line-height: 30px; padding-bottom:30px; }

  }
  
  /*for screens such as ipads that are 500 px or MORE */
@media(min-width: 500px) {

 .tagline
{
font-size:40px;
 line-height:50px;
padding-top:100px; 

padding-bottom:0px;

}

 .statement
{

 font-size:30px; line-height: 40px; padding-bottom:30px; }

  }

 /*for screens such as laptops that are 990 px or MORE */
@media(min-width: 990px) {

 
  }
 /*for larger full width screens that are 1500 px or MORE */
@media(min-width: 1500px) {

 
  }

.small 
{
font-size: 0.8em;}

h1, h2, h3, h4
{
padding-top:0.5em;}

h2.title 
{
font-size:0.8em;
color:#868686;
letter-spacing:2px;
text-align:center;
}

@media (min-width:480px) and (max-width:767px){
	
	.var h2 {font-size:40px; line-height:44px;}
	.var h4 {font-size:26px; line-height:30px;}
	form.form span {font-size:20px; line-height:26px;}
	.button	{line-height:25px !important; font-size:11px !important;}
	
	
	 }
}

@media (max-width:479px){
	body {font-size:16px; line-height:22px;}
	
	.var h2 {font-size:30px; line-height:34px;}
	.var h4 {font-size:22px; line-height:24px;}
	form.form span {font-size:20px; line-height:26px;}
	#nav ul li a {font-size:16px; line-height:20px;}

	
	.button	{line-height:20px !important; font-size:12px !important;}
	
}
 




.me{
width:100%;
height:500px;
background-image:url(../images/stonemason.jpg);
background-size:cover;
margin-bottom:20px;
opacity:0.8;
background-position:center;
 }

  /*on screens smaller than 900px - ie ipads, mobiles - make the photo smaller */
@media(max-width: 900px)
{
 
 
 
.me{
width:70%;
height:400px;
background-image:url(images/stonemason.jpg);
background-size:cover;margin:auto;
margin-bottom:20px;
 
 
 }
  
 
 }
/* ===============================================================================================================================
GENERAL STUCTURE 
======================================================================================================================================*/

.about-column
{
 }
 
 .contact-image{margin-bottom:20px; }
 
 /*on screens smaller than 500px center align the text in the contact form */
@media(max-width: 500px)
{
 .ccontact{text-align:center;}
 
 

  
 
 }

/*for larger screens than mobiles and ipads */
@media(min-width: 900px) {

.about-column
{
width:20%; float:right;  font-size:0.8em; border-left: white dotted medium; margin-left:40px; padding-left:30px;}


 .contact-image{float:right;margin-left:30px;}
 
 .contact .main-heading{text-align:left; padding-left:0px;}
  }



.section {float:left; width:100%;}

body {  background-color:#C9BEAC; }



 
.var {padding:0;}
 
  

 
.var_sm2  {background-color: white; margin-top:50px;padding-top:70px; padding-bottom:50px;}
 

.var_sm3  { 
margin-top:0px;
padding-top:50px; }


.form-container
{
width:100%; max-width:400px; margin-top:40px;
}
form.form span {color:black; font-size:24px; line-height:30px; display:block; width:240px; }
form.form input.text {background:#EFEBE8; width:120px; height:20px; padding:6px 15px; border:0 none; box-shadow:1px 1px 3px #595959 inset; border-radius:5px; color:black; float:right;}
form.form textarea {background:#EFEBE8; padding:6px 15px; width:250px; height:70px; border:0 none; box-shadow:1px 1px 3px #595959 inset; border-radius:5px; color:black; float:right;}

a.button, input[type=submit], button[type=submit]  {background:none; padding:20px; color:#000000; font-size:20px; line-height:26px; display:inline-block; text-decoration:none; text-transform:uppercase; border: thin black dotted; margin-top:30px;
 /*Transition*/
  -webkit-transition: All 0.5s ease;
  -moz-transition: All 0.5s ease;
  -o-transition: All 0.5s ease;
  -ms-transition: All 0.5s ease;
  transition: All 0.5s ease; }
a.button:hover, input[type=submit]:hover {background:rgb(0,0,0,0.2) ; cursor: hand;  }

button[type=submit]
{clear:both;float:right;} 
/* WEB DESIGN */
button:hover
{background:rgb(0,0,0,0.2);
 }

.showhide {dheight:auto; margin-top:8px;}

/* SCROLLER ON LOGO PAGE */
#makeMeScrollable div.scrollableArea * {position: relative;	display: block;	float: left;	margin: 0;	padding: 0;	-webkit-user-select: none;	-khtml-user-select: none;	-moz-user-select: none;	-o-user-select: none;	user-select: none; }
#makeMeScrollable {	height:400px;  position: relative;        margin-bottom:10px;background-color:white;width:100%; margin:auto;  }

#makeMeScrollable .scrollableArea img {position: relative; float: left;	margin: 0;	padding: 0;	margin: 0 50px 0 50px; -webkit-user-select: none;	-khtml-user-select: none; -moz-user-select: none; -o-user-select: none;	user-select: none;                    }
.scrollingHotSpotLeft {min-width: 75px; width: 10%;	height: 100%; background-image: url(../designbyjacqui/images/big_transparent.gif);	background-repeat: repeat;	background-position: center center;	position: absolute;	z-index: 200;	left: 0; cursor: url(../images/assets/cursors/cursor_arrow_left.png) , url(../images/assets/cursors/cursor_arrow_left.cur) ,w-resize;}
.scrollingHotSpotLeftVisible { background-image: url(../images/arrow_left.gif);	background-color: #fff;	background-repeat: no-repeat; opacity: 0.35;	-moz-opacity: 0.35;	filter: alpha(opacity = 35); zoom: 1;}
.scrollingHotSpotRight {	min-width: 75px;	width: 10%;	height: 100%;	background-image: url(../designbyjacqui/images/big_transparent.gif);	background-repeat: repeat;	background-position: center center;	position: absolute;	z-index: 200;	right: 0;	cursor: url(../images/assets/cursors/cursor_arrow_right.png) , url(../images/assets/cursors/cursor_arrow_right.cur) ,e-resize;}
.scrollingHotSpotRightVisible {	background-image: url(../images/arrow_right.gif);	background-color: #fff;	background-repeat: no-repeat;	opacity: 0.35;	filter: alpha(opacity = 35);	-moz-opacity: 0.35;	zoom: 1;}
.scrollWrapper {	position: relative;	overflow: hidden;	width: 100%;	height: 100%;}
.scrollableArea {position: relative;	width: auto; height: 100%; }

@media (max-width:479px){
#makeMeScrollable
{display:none;}

#scroller-on-mobile img
{
width:100%;
height:auto;
clear:both;
align:center;
margin-bottom:20px;

}
p.not-mobile 
{display:none;}
}
@media (min-width:479px){

#scroller-on-mobile img
{display:none;}

}

a.counter {color:#000; font-size:16px; line-height:22px; text-decoration:none; }
a.counter:hover {color: yellow; }

.fullwidthbanner-container{ width:100% !important; position:relative; padding:0; height:100vh!important; overflow:hidden; }
.tp-simpleresponsive .caption {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; position:absolute; visibility: hidden; }
.tp-simpleresponsive img	{max-width:none;}



/* ----------------------------------------------
STYLE the full width banner on home page*
---------------------------------------------------*/

 /*Start with mobiles and larger */
 
 .intro 
{
 
text-align:center; }

 .var_sm3  
{
width:100%; 
 
 

 

 margin-top:-100px;
}

.intro  
{
width:100%; 
 
 
  
	 

	 

 margin-top:-100px;
}

 @media(max-width: 900px) {
 a.not-mobile {display:none;
 }
}
 /*for screens such as ipads that are 500 px or MORE */
@media(min-width: 500px) {

.intro, .var_sm3  
{
 
}

.intro
{

}

  }

 /*for screens such as laptops that are 990 px or MORE */
@media(min-width: 990px) {

  .intro 
{
 
  }
  }
 /*for larger full width screens that are 1500 px or MORE */
@media(min-width: 1500px) {

 
  }
 



/* set height of html and body to 100% to make intro div fill screen*/
 html, body {
  height: 100%;
}
 


/* FOOTER */
#fwrap {background: #5A534D;}
#footer {padding:30px 0px 25px; overflow:hidden;}

#footer h3
{text-align:center;
color:#B6A490;
margin-bottom:20px;}

#footer h4
{ 
margin-bottom:10px;}
/* STYLE COLUMNS ON WEB DESIGN PAGE */
.web-column {
width:29%; 
margin:0 2%; 
float:left;

min-height:400px;
}

/* --------------------------------------
set width of site
----------------------------------------- */
.main
{width:90%; padding-left:5%; padding-right:5%} 

@media(max-width: 499px) {

  

 }


 /*for screens such as ipads that are 500 px or MORE */
@media(min-width: 500px) {



  }

 /*for screens such as laptops that are 990 px or MORE */
@media(min-width: 990px) {

 
  }
 /*for larger full width screens that are 1500 px or MORE */
@media(min-width: 1500px) {

 
  }
 



.portfolio   { padding-top:20px;  width:1200px; margin:auto; }

/*
------------------------------------------
PORTFOLIO IMAGES ON HOME PAGE 
------------------------------------------
start with mobile phones... make the hover container the full width of the screen*/

.hover-container {
  position: relative;
  width: 100%;
  
  float:left;
   
  outline: 20px solid #B2A08C;
  
 background:#B2A08C
 ; 
  min-height:300px;
   
}

 
 .hover-container {
 
 
   
 }
   
 .hover-image {
  display: block;
  width: 100%; 
  object-fit: cover;



}
/*for screens such as ipads that are 600 px or MORE */
@media(min-width: 600px) {

 .hover-container {
 
  width: 50%;
  padding-left:0; }
  }


 /*for screens such as laptops that are 990 px or MORE */
@media(min-width: 990px) {

 .hover-container {
 
  width: 33%;
  padding-left:0; }
  }
 /*for larger full width screens that are 1500 px or MORE */
@media(min-width: 1500px) {

 .hover-container {
 
  width: 25%;
  padding-left:0;
  height:40%; }
  }

.hover-image {
  display: block;
  width: 100%;
 



}

 
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.4);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

#work .overlay {
 
  background-color: rgba(255,255,255,0.8);
 
}
.hover-container:hover .overlay {
  height: 100%;
}


  /*for screens such as mobile and ipad that are 499 px or LESS */
@media(max-width: 800px) {

 
   .phone{
position:fixed; top:0; left:0; padding-left:10px;  font-weight:300; margin-top:15px; z-index:1000;}


  }
  
 .phone a
  {
  color:#333333; text-decoration:none;}
  
  
   .services-box, .web-box
 {
 

 padding:0px 0px 00px 0px;
 overflow:hidden;
 }
 

 
  .services
{
width:100%;
 


 }
 /*for screens such as ipads that are 500 px or MORE */
@media(min-width: 850px) {

.services
{
width:45%;
float:left;
padding: 20px 20px;
min-height:150px;

 }
   .phone{
position:fixed; top:0; right:0; padding-right:10px;  font-weight:300; margin-top:15px; z-index:1000;}


  }

 /*for screens such as laptops that are 990 px or MORE */
@media(min-width: 1200px) {

.services
{
width:30%;
  }
  }
 /*for larger full width screens that are 1500 px or MORE */
@media(min-width: 1500px) {

 
  }


  /* responsive top navigation */
.topnav {
    
    overflow: hidden;
	
}

 
 .topnav {
    
  
	    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
 background-color: #A89B8A;
width:100%;
}
/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #281F22;
     font-weight:bold;
    padding: 15px 10px;
    text-decoration: none;
    font-size: 20px;
 
	 letter-spacing:1px;
	 
  -webkit-transition: All 0.5s ease;
  -moz-transition: All 0.5s ease;
  -o-transition: All 0.5s ease;
  -ms-transition: All 0.5s ease;
  transition: All 0.5s ease;
  
}


 

/* Change the color of links on hover */
.topnav a:hover {
    border-bottom:thin #E0E0E0 solid;
	 
	color:grey;
}

/* Add an active class to highlight the current page */
.active {
    border-bottom:thick #281F22 solid;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
} 

 /* When the screen is less than 800 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: 800px) {
  .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
	font-size:10px;
  }

 
}


 /* When the screen is less than 450 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: 450px) {
   
  .ttopnav a.icon {
    float: right;
    display: block;
	font-size:20px;
  }
}

/* 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: 800px) {
  .ttopnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
	 
  }
 a.home
 {
 padding-top:50px;
} 

.topnav.responsive a:hover
{
border-bottom:none;
color:purple;
 }
 }
 
input {
    padding: 10px 10px !important;
	background:white !important;
 
	font-family:Roboto !important;
	font-size:20px;
	 
	margin-bottom:30px;
	cursor: pointer;
	 -webkit-transition: All 0.5s ease;
  -moz-transition: All 0.5s ease;
  -o-transition: All 0.5s ease;
  -ms-transition: All 0.5s ease;
  transition: All 0.5s ease;
  border:none !important;
  box-shadow: 1px 1px 3px #595959 inset;
    border-radius: 5px;
}
 

input[type="submit" i]:hover
{background:LightGrey !important; color:Grey;}

 .introduce
 {
 padding-top:4em;
 }
 
 .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*********************************************

	-	this stops the banner jumping on the first slide -

***********************************************/






.tp-simpleresponsive >ul >li{
	list-stye:none;
	position:absolute;
	visibility:hidden;
}








 

 


.home-page-portfolio
{
padding-top:50%;}
.contact
{
margin-top:50px;
padding-bottom:50px;
}

strong
{
font-weight:400;
}

.web
{
padding-top:50px;
}


.stretch img
{
width:100%;
height:100%;
}




  .services-box 
 {
  

 }

 
.deco {
  width:100%;
  height:5px;
  border-top: gainsboro dotted medium;
  margin:20px 0px;
}

.logo
{
margin-top:65px;
 opacity:0.7;
}

.togglemore
{
margin:20px;}


#contact
{margin-top:20px;
background-color:#B6A490;}

     .img-circle {
        border-radius: 50%;
		height:250px;
		width:250px;
    }
	
	
	.inner
	{
	width:60%; margin:auto;
	}
	.about-page-column-holder
	{
	clear:both; margin-top:30px; border-top:thin white solid; padding:30px;  
	}
	
	.about-page-column
	{
	width:45%; float:left;}
	.about-page-img
	{
	float:left; margin-right:20px;
	}
	
	/*for screens such as iphone that are 499 px or LESS */
@media(max-width: 499px) {

.about-page-img
	{
	float:none; margin:0;
	width:100%;
	}
.inner
	{
	width:100%;
	margin:0;
	 padding:0;
	text-align:center;  
	}

.about-page-column-holder
	{
	 padding:10px;  
	}

.about-page-column
	{
	width:100%;}
	
	.main-heading 
{
 
   
  font-size: 30px;
   line-height:35px;  
	 
}

.about-column
{
text-align:center;
}

.callbacks_container {

   
    width: 300%!important;

}

  }
  
@media(min-width: 501px) { .mobile-only
{
display:none;}}
  
  /*for screens such as mobile and ipad that are 499 px or LESS */
@media(max-width: 500px) {
.home-slider
{display:none;}

.mobile-intro
{
width:100%;
background-image:url(../images/mobile-only.JPG);
background-position: center;
background-repeat:no-repeat;
height:200px;
margin-top:130px;
}

}