/* Mojoprint styles to complement Bootstrap 4. All these styles are Mobile-first remember!	
--------------------------------------------------------------------------------------------------*/
body{
	background: #f9fbfc;
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
}

h1, h2, h3{
	font-family: "Crete Round", serif;
}

h2 {
	color: #00ade2; 
}

a {
  color: #00ade2;  /* cyan */
  }


a:hover {
  color: #87CCF0; /* cyan light */
  text-decoration: none;
  }


.btn-primary:hover{
	background: #87CCF0; /* cyan light */
	border-color: #87CCF0; /* cyan light */
}

/* Highlight selected nav item */
#landing .products a.nav-link,
#delivery .delivery a.nav-link,
#design .design a.nav-link,
#templates .templates a.nav-link,
#company .about a.nav-link,
#guide .guide a.nav-link,
#quote .quote a.nav-link{
	color: #fff;
}

p.navbar-text {  
  font-size: 22px;
  margin: 0;
}

.navbar-toggler:focus,
.navbar-toggler:active {
    outline: 0;
}

.navbar-toggler span {
   display: block;
   background-color: #ffffff;
   height: 3px;
   width: 25px;
   margin-top: 4px;
   margin-bottom: 4px;
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
   position: relative;
   left: 0;
   opacity: 1;
}

.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
   -webkit-transition: transform .35s ease-in-out;
   -moz-transition: transform .35s ease-in-out;
   -o-transition: transform .35s ease-in-out;
   transition: transform .35s ease-in-out;
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
    
    top: 11px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    opacity: 0.9;
}

.navbar-toggler:not(.collapsed) span:nth-child(2) {
    height: 12px;
    visibility: hidden;
    background-color: transparent;
}

.navbar-toggler:not(.collapsed) span:nth-child(3) {
    top: -12px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    opacity: 0.9;
}



.main-nav-bar {
    background: #f8f9fa;
}

#utility-nav {
	font-size: smaller;
}


#utility-nav li,
#utility-nav li a{
	color: #fff;
}

#utility-nav a:hover{
	opacity: 0.8;
}

#utility-nav .btn {
	border-color: #fff;
}

#sidebar-block {
    margin: 0;
}

#sidebar {
    border-radius: #8px;
    padding: 0;
}

#header{
	background: #00ade2;
}

#main-nav-bar, .bg-dark{
	background: #00ade2;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

#main-nav-bar li{
	padding-right: 10px;
	font-size: 1.2em;
}

#strapline{
	background: #eff1f3;
	margin-bottom: 20px;
	color: #9a9d9e;
}

#strapline h1{
	font-size: 1.75rem !important;
}

.home #strapline{
margin-bottom: 0;
padding: 15px 10px;
}	


#sidebar ul{
	padding: 0;
	margin: 0;
}
#sidebar li, #other-products li {
    list-style: none;
    border-bottom: 1px solid #ddd;
}

#sidebar li:last-child, #other-products li:last-child {
    border-bottom: 0;
}

#sidebar li a, #other-products li a {
    display: block;
    margin: 0px;
    padding: 8px 12px;
    color: #464a4e;
    text-decoration: none;
    text-align: left;
    font-family: "Roboto", sans-serif;
}


/* Style the child products bg  */
#sidebar li ul li, #other-products li ul li {
    background: #f9fbfc;
    margin: 0;
    padding: 3px 0px 3px 6px;
}

/* Style the child products links  */
#sidebar ul li ul li a {
    color: #666;
    background: none;
    padding-bottom: 8px;
    font-size: 0.9rem;
}



#sidebar a:hover, #other-products a:hover {
    color: #00ade2;
}



.alert{
	border-radius: 0;
}

.site-wide-notice{
	margin-bottom: 0;
	background: #f6fda3;
	color: #25aabf;
	border: 0;
}

.site-wide-notice a{
	color: #25aabf;
	text-decoration: underline;
}

#footer{
	background: #eff1f3;
	padding: 20px;
	margin-top: 30px;
}

#copyright{
	background: #5a5959;
	color: #cbcaca;
	padding: 20px;
	font-size: smaller;
}

#footer h4{
	margin-top: 1em;
}

#postsCarousel .carousel-control-next{
	right: -30px;
	}
	
#postsCarousel .carousel-control-prev{
	left: -30px;
}

#postsCarousel .card-title{
	font-size: 1.3em;
}
	
@media (min-width: 768px) {
	
	#footer h4{
	margin: 0 0 1em 0;
}

	
	.site-wide-notice{
	text-align: center;
}

	
	#main-nav-bar li{
	font-size: 1em;
	}
	
	#main-nav-bar .fa-li{
		position: relative;
		text-align: left;
		left: -3px;
		margin-right: 4px;
	}
	

	
/* Product slider styles  */


	/* show 3 items */
	    #postsCarousel .carousel-inner .active,
	    #postsCarousel .carousel-inner .active + .carousel-item,
	    #postsCarousel .carousel-inner .active + .carousel-item + .carousel-item {
	        display: block;
	    }
	    
	    #postsCarousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
	    #postsCarousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
	    #postsCarousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
	        transition: none;
	    }
	    
	    #postsCarousel .carousel-inner .carousel-item-next,
	    #postsCarousel .carousel-inner .carousel-item-prev {
	      position: relative;
	      transform: translate3d(0, 0, 0);
	    }
	    
	    #postsCarousel .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
	        position: absolute;
	        top: 0;
	        right: -33.3333%;
	        display: block;
	        visibility: visible;
	      
	    }
	    
	    /* left or forward direction */
	    #postsCarousel .active.carousel-item-left + .carousel-item-next.carousel-item-left,
	    #postsCarousel .carousel-item-next.carousel-item-left + .carousel-item,
	    #postsCarousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
	    #postsCarousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
	        position: relative;
	        transform: translate3d(-100%, 0, 0);
	        visibility: visible;
	    }
	    
	    /* farthest left hidden item must be also be positioned and transitioned for animation */
	    #postsCarousel .carousel-inner .carousel-item-prev.carousel-item-right {
	        position: absolute;
	        top: 0;
	        left: -33.33%;
	        display: block;
	        visibility: visible;
	        transform: translate3d(100%, 0, 0);

	    }
	    
	    /* right or prev direction */
	    #postsCarousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
	    #postsCarousel .carousel-item-prev.carousel-item-right + .carousel-item,
	    #postsCarousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
	    #postsCarousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
	        position: relative;
	        transform: translate3d(100%, 0, 0);
	        visibility: visible;
	        display: block;
	       
	    }
	
	#postsCarousel .carousel-control-next{
		right: -120px;
	}
	
	#postsCarousel .carousel-control-prev{
		left: -120px;
	}
	
	#postsCarousel .carousel-inner{
		min-height: 320px;
	}
	
	#postsCarousel .card {
		border: 0;
		box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.4);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	}
	

	#postsCarousel .card:hover {
	  box-shadow: 0 7px 14px rgba(0,0,0,0.4), 0 10px 10px rgba(0,0,0,0.22);
	}

}


#product-slider{
	background-color: #eff1f3;
}

/* Design folio slider styles */

#design-folio .carousel-fade{
	background: #5a5959;
}

#design-folio .carousel-item.active,
#design-folio .carousel-item-next,
#design-folio .carousel-item-prev
{
    /*SET IN BS AS FLEXBOX. SO PERSPECTIVE SCALE DID NOT WORK*/
    display:block;
}


#design-folio .carousel-inner>.carousel-item>a>img,
#design-folio .carousel-inner>.carousel-item>img,
#design-folio .img-responsive
{
    display: block;
    max-width: 100%;
    height: auto;
}

#design-folio .carousel-fade .carousel-inner .carousel-item {
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -ms-transition-property: opacity;
    transition-property: opacity;
}

#design-folio .carousel-inner .carousel-item,
#design-folio .carousel-inner .active.carousel-item-left,
#design-folio .carousel-inner .active.carousel-item-right
{
    opacity:0;
}

#design-folio .carousel-inner .active,
#design-folio .carousel-inner .carousel-item-next.carousel-item-left,
#design-folio .carousel-inner .carousel-item-previous.carousel-item-right
{
    opacity: 1;
}

#design-folio .carousel-item.active,
#design-folio .active.carousel-item-left,
#design-folio .active.carousel-item-prev,
#design-folio .carousel-item-next.carousel-item-left,
#design-folio .carousel-item-prev.carousel-item-right
{
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
#design-folio .carousel-caption{
	bottom: 40px;
    left: 5%;
	text-align: left;
	}
	
	.carousel-caption h1{
		font-family: 'Crete Round', serif;
		font-weight: 700;
		font-size: 2rem;
		color: #fff;
		line-height: 1.1em;	
		margin-top: 15px;
	}
	
	
	.carousel-caption .btn{
		color: #fff;
		border: 0;
	}
	
	.carousel-caption .btn:hover{
		background: rgba(0, 0, 0, 1)
			
	}
	
	.carousel-caption span{
		font-size: smaller;
		padding: 3px 5px;
		margin-right: 5px;
		background: #cf0070;
		color: #fff;
		border-radius: 3px;
	}

.btn-primary{
	background: #00ade2;  /* MP cyan */
	border-color: #00ade2;  /* cyan */
}	

.product-callouts .card {
background: #d1effb;
border: 0;
}

.card-text{
	color: #464a4e;
}

.card-footer{
	background: #fff;
}

#news div p{
	border-bottom: 1px solid #ddd;
	padding-bottom: 10px;
	color: #464a4e;
}



#news div:last-child p{
	border-bottom: 0;
	padding-bottom: 0;
}

.product-callouts .card-title {
font-family: "Crete Round", serif;
}

.alert-warning{
	background: #fff7be !important; /* MP notes */
}


.alert-light{
	background: #e6f6fb !important; /* pale blue */
	border: 1px solid #ddd !important;
}

.badge-danger{
	background: #ee4b84 !important; /* MP magenta */
}

.bg-danger{
	background: #ee4b84 !important; /* MP magenta */
}

.bg-info{
	background: rgba(0, 173, 226, 0.2) !important;  /* MP pale cyan */
}

.bg-light{
	background: #fff7be !important;  /* MP notes */
}


.bg-primary{
	background: #00ade2 !important;  /* MP cyan */
}

.text-danger{
	color: #ee4b84 !important; /* MP magenta */
}

.text-primary{
	color: #00ade2 !important;  /* MP cyan */
}
 
.jumbotron{
	background: linear-gradient(45deg, #b2e2f1, #00ade2);
	color: #fff;
}

.jumbotron-fluid{
	    text-align: center;
}

/* Accordian elements (finishes.php) */
#accordian .card{
	margin-bottom: 15px;
}

/* Product card deck grid */
.grid {
   display: flex;
   flex-wrap: wrap;
}

.grid > div[class*='col-'] {
  display: flex;
}

.grid .card-title{
	font-size: 1.3rem;
}

.grid .card{
	border: 0;
}

.card-img-top{
	height: 140px;
	object-fit: cover;
}

#product-slider .card-img-top,
.landing .card-img-top {
background: rgb(201,229,242);
background: linear-gradient(90deg, rgba(201,229,242,1) 0%, rgba(155,211,246,1) 35%, rgba(161,228,255,1) 100%);
}

.landing .card-img-top {
	height: 400px;
	}
	
.landing .product-grid .card-img-top {
	height: 120px;
	}

	
  .calendar .table td{
	 padding: 5px;
	 text-align: center;
 } 

.calendar .weekend{
	background: rgba(238, 74, 132, 0.2);
}

.calendar .card-body {
	padding: 0;
}

.mini-cal th,
.mini-cal td{
	font-size: smaller;
}

 #pricetable td.price:hover{
	 background: #f8f9fa;
 }
 
  #pricetable td.color{
	 text-align: center;
 }  

.page-item.active .page-link{
	background: #00ade2;
	border-color: #00ade2;
}

.thead-dark th{
	background-color: #00ade2 !important;  /* MP cyan */
	border-color: #00ade2 !important;  /* MP cyan */
	font-weight: 200;
}

.card-header{
	background-color: #eff1f3;
	font-weight: 200;
	font-size: 1.3rem;
	color: rgba(0, 0, 0, 0.6)
}

.card-header.w-icon{
	padding: 0;
	background: #fff;
}

.card-icon {
	border-top-left-radius: calc(.25rem - 1px) calc(.25rem - 1px);
	background: rgb(255, 255, 255);
	border-right: 1px solid #ddd;
}

.card-icon .svg-inline--fa {
	color: #00ade2;
	font-size: 1.75rem;
}

.summary .form-group{
	margin-bottom: 0;
}
.fa-ul{
	margin-left: 1.5rem;
}

#footer li a {
	padding: 0;
	margin: 0;
}

#footer li  {
	padding: 0;
	margin: 0.25rem 0;
	font-size: 0.9rem;
}

#footer h4{
	font-size: 18px;
}

.specs{
	font-size: 0.9rem;
    background: #caecf4;
    padding: 12px;
    border-radius: 5px;
    color: #464a4e;
}
.order-steps .order-step {
	position: relative; 
	margin-top: 50px;  
	z-index: 2;
	background: #fff;
	
	border-radius: 12px;
	}
.order-steps .order-step:first-child {
	margin-top: 0;
	}
.order-steps .order-step:before {
	position: absolute; 
	border: 2px solid #00ade2; 
	width: 0; 
	height: 51px; 
	display: block; 
	content: ''; 
	left: 50%; 
	z-index: 1; 
	top: -51px; 
	margin-left: -1px;
	}
	
.order-steps .order-step:first-child:before {
	display: none;
	}


table caption{
	caption-side: top;
}
/* Nav menu dropdowns  */

/* adds some margin below the link sets  */
.navbar .dropdown-menu div[class*="col"] {
   margin-bottom:1rem;
}

.navbar .dropdown-menu {
  border:none;
  background-color:#00ade2;
}

 .navbar .dropdown-menu .nav-item{
	  margin: 0.1rem;
	  padding: 0;
  }
  .navbar .dropdown-menu .nav-item .nav-link{
	  margin: 0;
	  padding: 0;
	  color: #666 !important;
	  font-size: 0.9rem;
  }
  
    .navbar .dropdown-menu .nav-item .nav-link:hover{
	  color: #00ade2 /* MP cyan */;
  }
  
/* breakpoint and up - mega dropdown styles */
@media screen and (min-width: 992px) {
  
  /* remove the padding from the navbar so the dropdown hover state is not broken */
.navbar {
  padding-top:0px;
  padding-bottom:0px;
}

/* remove the padding from the nav-item and add some margin to give some breathing room on hovers */
.navbar .nav-item {
  padding:.5rem .0rem;
  margin:0;
}

/* makes the dropdown full width  */
.navbar .dropdown {position:static;}

.navbar .dropdown-menu {
  width:100%;
  left:0;
  right:0;
/*  height of nav-item  */
  top:53px;
}
 
  /* shows the dropdown menu on hover */
.navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover {
  display:block!important;
}
  
  .navbar .dropdown-menu {
    border: 1px solid rgba(0,0,0,.125);
    border-top: 0;
/*     background-color: #f9fbfc;  */
    background-color: #fff /* white */;
    border-radius: 0px 0px 10px 10px;
    padding-top: 0;
  }
  
    .navbar .dropdown-menu .menu-header{
    background-color: #00ade2 /* MP cyan */;   
  }
  
  .navbar .dropdown-menu h5{
      border-bottom: 1px solid rgba(0,0,0,.125);
      padding-bottom: 0.5rem;
  }

  .navbar .dropdown-menu h5 a{
      font-size: 0.9rem;
  }

} 
/* Animated Success Checkbox */

.checkmark-circle {
  width: 150px;
  height: 150px;
  position: relative;
/*   display: inline-block; */
  vertical-align: top;
  margin: 0px auto;
}
.checkmark-circle .background {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #00ade2;
  position: absolute;
}
.checkmark-circle .checkmark {
  border-radius: 5px;
}
.checkmark-circle .checkmark.draw:after {
  -webkit-animation-delay: 100ms;
  -moz-animation-delay: 100ms;
  animation-delay: 100ms;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-name: checkmark;
  -moz-animation-name: checkmark;
  animation-name: checkmark;
  -webkit-transform: scaleX(-1) rotate(135deg);
  -moz-transform: scaleX(-1) rotate(135deg);
  -ms-transform: scaleX(-1) rotate(135deg);
  -o-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.checkmark-circle .checkmark:after {
  opacity: 1;
  height: 75px;
  width: 37.5px;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
  border-right: 5px solid white;
  border-top: 5px solid white;
  border-radius: 2.5px !important;
  content: '';
  left: 35px;
  top: 80px;
  position: absolute;
}

@-webkit-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}
@-moz-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}
@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}

#products #strapline{
	margin-bottom: 0;
}

.landing #strapline{
	display: none;
}



/* Checkout steps */


#checkout-steps{
	background: #fff;
	padding: 20px 0;
	margin-bottom: 40px;
}
.bs-wizard {}

.bs-wizard {border-bottom: solid 1px #f5f5f5; padding: 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 16px; margin-bottom: 5px;}
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #999; font-size: 14px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #00ade2; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;} 
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #fff; border-radius: 50px; position: absolute; top: 8px; left: 8px; } 
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 18px 0;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #00ade2;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 1;}
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }
/*END Form Wizard*/

/* Anything bigger than a mobile - place styles here  */
@media (min-width: 576px) { 
	
	#logo{
		text-align: left !important;
			}
	
	#utility-nav ul{
		justify-content: flex-end !important;
	}
	
	.carousel-caption{
		width: 50%;
	}
}

/* ----------- iPad Pro 10.5" ----------- */

/* Landscape */
@media only screen 
  and (min-device-width: 1112px) 
  and (max-device-width: 1112px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2)  {
  	.navbar-expand-lg .navbar-nav .nav-link svg {
    display: none;
    }
}

.v-middle td{
	vertical-align: middle;
}