/*@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);*/
/*@import url(https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css);*/
@import url(./bootstrap.min.css);

* {
    box-sizing:border-box;
}

a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var {
    /*background: transparent;*/
    border: 0 none;
    font-size: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: top;
}


/*=========================== price tag (can be further tuned from index.html ===================================*/
.price {
   color:black;
   font-size:1.8em;
   background-size:100% 100%;
   background-image:url('../img/price.png');
   font-weight:bold;
   vertical-align:bottom;
   line-height:2.6;
   text-align:center;
    text-indent:0;/*negate this property- it is used in products*/
}

.price:after, .price:before {
   
}


/*=========================== GDPR ===================================*/
.gdpr {
   background-color: rgba(255,255,255, .9);
    border: 1px solid white;
    position: fixed;
    bottom: 0;    
    z-index: 200000;
    right: 0;
    left: 0;
    padding: 6px;
    padding-right: 100px;
}


.gdpr button {
   position: absolute;
    right: 10px;
    top: 8px;    
    padding: .5rem 2rem;
    border-radius: 10%;
}


img, .res-img {
  max-width: 100%;
  height: auto;
}

html, body
{
	/*prevent pull-down-to-refresh of mobile chrome*/
	overscroll-behavior-y: contain;
	  
	margin:0;
	width:100%;
	height:100%; 
	font-family:Montserrat, Arial, sans-serif;
}

/*Experiment with css transition*/
body {
    /*transition:padding-top ease-in .15s;*/
}


/* In bootstrap the nav node has white background. This overlaps some of the text underneath*/
nav{	
  background-color:#f7f7f7;	
}
/*
 #menu--navbar { display:inline-block;} */

body
{
	padding-top:130px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
 
.logo-image{
	width: 50%;
    /* border: 1px solid red; */
    display: block;
    height: 105px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/logo.png);
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
	top:25px;
}


h1
{
	text-align:center;
}

h2
{
	border-top:3px solid #9D9E9E;
	font-size:140%;
	line-height:3em;
	margin: 0 12%;
}

footer{
	background-color:#EBECEC;
	/*margin-top: 7px;*/
}

.top{
	background-image:url('../img/title.jpg');
	background-repeat:no-repeat;
    background-size:cover;
	min-height:360px;
	height:35%;
	position:relative;
}

/*===================================== Tabstrip ==============================================*/
.tab-panel
{
	/* height:100%;*//*legacy logic uses % in setting height  - as measured from  body*/ 
	/* position:relative; */
	display:none;
	
}

.tab-panel.active
{
	/*display:inline;*//*legacy logic uses % in setting height fo some panels!  - as measured from  body - hence we need this to be inline, not block*/ 
    display:inline;
}

/*================================== contacts ===========================================*/
.contact-list {
    padding:1em;
    list-style-type:none;
    font-size:125%;
}

.contact-list h6
{	
	background-image:url("../img/contacts.png");
	background-size:2.3em auto;
	background-position:left center;
	background-repeat:no-repeat;
	padding:.5em 0 .2em 2.2em;
}

.contact-list h6.contact-email { background-position:left -3px; }
.contact-list h6.contact-fb { background-position:left -3.3em; }
.contact-list h6.contact-phone { background-position:left -6.2em; }
.contact-list h6.contact-viber { background-position:left -9.3em; }

/*================================== CONTENTS ===========================================*/
.contents{	
    text-align:center;/*so that inner contents are centered*/
	min-height:500px;
	padding: 30px 15% 30px 15%;
	box-sizing:border-box;
    position:relative;    
}

.contents > *{	 	 
	 width:23.5%;
	 margin:.5%;
     display: inline-block;
	 position:relative;
	 cursor:pointer; 	
	/*overflow:hidden;*/
}

/*NEW: Add child img tags in the link elements - so that those ar indexed by search engines*/
/*.contents > a > img{
	position:absolute;
	top:0;
	left:0;
}*/

/*Act as container for img*/
.contents > a > em {
    top:0;left:0;right:0;bottom:0;position:absolute;overflow:hidden;
}

/*Simulate cover - https://stackoverflow.com/questions/11670874/is-there-an-equivalent-to-background-size-cover-and-contain-for-image-elements/21668368*/
.contents > a  img {
  max-width:none;
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  min-width: 1000%;
  min-height: 1000%;
  -webkit-transform:scale(0.1);
  transform: scale(0.1);
}


/*NOTE: is valid for links as well as for reviews container (overriden in custom.css)*/
.contents > *:before {
    content: "";
    width: 0;
    float: left;
    padding-top: 100%;
}


/*===================================== BUTTONS CSS ============================*/
button {
	/*outline: none;*/
    box-shadow: none;
    cursor:pointer;
    border-color: white;
	color:white;	
    border-style: solid;
    border-width:1px;	
	text-transform:uppercase;
}


.suggestion-links > * button,
.contents > * button{
	position:absolute;
	bottom:10px;
	right:10px;
	min-width:132px;
	height:25px;	
	text-align:left;
	font-size:12px;
}

/*Tune look*/
.suggestion-links > * button{    
    bottom: -22px;
    right: 0;    
    height: auto;    
    font-size: 17px;
    left: 0;    
    width: 100%;
}

.suggestion-links > * button:after,
.contents > * button:after
{
	content:"";
	background-image:url(../img/button-arrow.png);
	background-repeat:no-repeat;
	background-size:auto 70%;
	background-position:right center;
	position:absolute;
	right:3px;
	width:30px;
	height:100%;
	top:0;
}

.product-content button{
	padding: .5em 1em;
    font-size: 160%;
    border-radius: .4em;
    font-weight: bold;
    letter-spacing: 1px;
	white-space: nowrap;
	margin-bottom: 1.2rem;
}

.product-content button:hover
{
	transform:scale(1.02);
}


.contents .first-product {	
	width: 48.5%;    
}

.contents > .first-product:before {    
   padding-top: 48.5%; 
}


/*================================== BOTTOM ===========================================*/
.suggestion-links, .bottom
{
	height:15%;
	min-height:250px;
	padding: 30px 9%;	
    box-sizing: border-box;
	text-align:center;
    box-sizing: border-box;
    /*margin-bottom: 10px;*/    
}

.bottom {
	background-color: #f7f7f7;
	min-height:250px;
	padding: 30px 8%;

    /*border-color: #777;
    border-style:solid;
    border-width: 1px 0;*/
}


.keywords
{
	/*border-top: 3px solid #9D9E9E;*/
    margin: 0 12%;
    margin-bottom: 2rem;
    padding-top: 2rem;
}


.bottom span{
	position:absolute;	
	font-weight:bold;
	left:0;
	right:0;
	white-space:nowrap;
	line-height: 1.2;
	bottom:.5em;
}


.suggestion-links
{
	margin-top: 15px;
    /* margin-bottom: 15px; */
	margin-bottom: 60px;
    min-height:350px;
	padding: 0px 7%;
}

/* Bottom panel css*/
.suggestion-links > *,
.bottom > * 
{
	position:relative;
	display:inline-block;
	width:21%;
	margin:0 1%;	
	height:100%;
	text-align:center;		
	background-size: cover;
    background-position: center center;
}

/*NEW: Two rows of suggestions*/

.suggestion-links > * {
    margin: 0px 10px 40px;
    height: 48%;    
}

/* =======================  For instructions panel, no background ====================================================== */
.instructions.bottom{
	background-color:transparent;
    padding-bottom: 0;	
}

/* For instructions panel change default image bg size */
.instructions.bottom > div
{	
	border:2px solid #999999;
}

.instructions .step
{
	position:absolute;
	background-image:url('../img/instructions/cloud.png');
	background-repeat:no-repeat;
	background-size: 100% 100%;
	top:-20px;
	left:-20px;
	width:60px;
	height:50px;
	text-align:center;
	line-height:50px;
}

/* The full-length stripe */
.stripe.bottom
{
	position: relative;    
    width: 76%;    
    background-image: url(../img/stripe.jpg);    
    background-repeat: no-repeat;
    display: block;
    margin: auto;
    border-width: 0 !important;
	
	background-color: transparent; 
	background-position: center center; 
	background-size: cover;
}


/* =============== Images that are set on instructions panel on main page =================*/
.bottom .image
{
	background-position:center center;
	background-repeat:no-repeat;
	background-size: contain;
	/*background-size: 40% auto;*/
	position:absolute;
	left:0;
	top:1em;
	right:0;
	bottom:3.5em;    
}

.banner.bottom .panel1 .image{
	background-image:url('../img/footer/bulb.png');
}

.banner.bottom .panel2 .image{
	background-image:url('../img/footer/pc.png');	
}

.banner.bottom .panel3 .image{
    background-image:url('../img/footer/delivery.png');    
}

.banner.bottom .panel4 .image{
	background-image:url('../img/footer/phone.png');	
}

/* =============== Images that are set on instructions panel =================*/
.instructions.bottom .panel1 .image{
	background-image:url('../img/instructions/step1.png');
}

.instructions.bottom .panel2 .image{
	background-image:url('../img/instructions/step2.png');	
}

.instructions.bottom .panel3 .image{
    background-image:url('../img/instructions/step3.png');    
}

.instructions.bottom .panel4 .image{
	background-image:url('../img/instructions/step4.png');	
}




/*========================== Style the delivery page ==========================*/
.page-delivery
{
	/*min-height:550px;*/
	padding: 0px 20% 30px 20%;
	box-sizing:border-box;	
}

.page-delivery h4
{
	font-weight:bold;	
	font-size:110%;
	margin:2em 0 .5em 0;
}

/*============================ Prices definition ===============================*/
.price
{
	position:absolute;
	top: -7px; 
	left: -10px;
	background-size:100% 100%;	
	background-repeat:no-repeat;
	width:100px;
	height:70px;
}

/*======================== Product content ============================*/
/* set text-align center, so that the two panels inside get centered and align along the rest of the panel contents below*/
.product-content
{
	/*border:1px solid red;*/
	padding: 0 12%;
	min-height:500px;
	position:relative;	
	margin-top: 44px;
	text-align:center;
	font-size: 120%;
	margin-bottom: 20px;
}

.product-content .main-image {
	width:100%;	
	margin-bottom:10px;
	cursor:pointer;
}


.product-content .price{
	position: relative;
    display: inline-block;
    left: 3px;
    vertical-align: middle;
    top: 0px;
    width: 120px;
    height: 80px;
}

.product-content ul{
	margin-left: 1em;
    /*margin-top: 1em;*/
    list-style-type: disc;    
}


/*================================== template.html ================================================*/
.product-content .left-content
{
	display:inline-block;
	width:50%;
	text-align:left;
}
	  
.product-content .right-content {
	display:inline-block;
	width: 49%;
	padding-left:3%;
	text-align:left;	
}

.product-content .image-list
{
	width:100%;
    font-size:0;/*NOTE: Make sure spacing between the images is not a factor - or else they last image blees on a new line*/
	/*height: 150px;*/
}

.product-content .image-list > *
{
	width: 24.25%;
	margin-right:1%;
	display:inline-block;	
	background-position: center center;	
	cursor:pointer;
}


.right-content .diagram{
	/*margin-top:2em;	*/
	min-height:200px;
	max-height:400px;
	cursor:pointer;
}


.product-content .image-list > *:last-child { margin-right: 0;}

.product-content .image-list > *:hover
{
	transform:scale(1.05);
}


/*===================== User convenience: animate 'choose design' button===============================*/
.product-content .right-content button { 
    animation-name: pulse_animation;
	animation-duration: 5000ms;
	transform-origin:70% 70%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.product-content .right-content button:hover {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); 
} 

@keyframes pulse_animation {
	0% { transform: scale(1); }
	33% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
	}
	40% { transform: scale(1.03);
 box-shadow: 0 0 0 3px rgba(0, 0, 0, 0); 
	}
	50% { transform: scale(1); 
      /*box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);*/
	}	
	100% { transform: scale(1); }
}


/*================================== Designer iframe =============================================*/
.designer-iframe {
	border-top: 1px solid #e7e7e7;
	position:absolute;	
	width:100%;
	height:95%;
	height: calc(100% - 40px);	
	top:40px;	
	background-color:white;	
	display:none;
}

body.designer-visible
{
	padding-top:0;
	overflow:hidden;/*Disable scrolling if designer visible*/	
}


body.designer-visible .logo-image
{
    top:0;
    background-size: 97% auto;   
	background-color:#555;
	width:142px;
	min-width:142px;
	height:40px; margin-left:0; left:3px;
    z-index:1000;
}

/* Because of a problem on mobile phones, with stuff showing under iframe, let's hide everything but menu and logo*/
body.designer-visible > * {
	display:none;
}

body.designer-visible .designer-iframe, body.designer-visible .logo-image, .body.designer-visible #cssmenu {
    	display:block;
}

/*================================= Mobile support ================================================*/
@media only screen 
  and (min-width: 250px) 
  and (max-width: 800px) {
	  	  		  
    body { 	
		/* border:2px solid red; */
		height:100%;
		padding-top: 100px;
	}
	
	body .logo-image
	{
		top:0;
		width:90%;
		/*pointer-events:none;*//*NEW: is OK - OLD- in mobile version often user may click on the logo by mistake - it will load the front page - no good*/
	}    
		
	body.designer-visible .logo-image { 
        top:0;        
        height:30px;
	}
	

    /* Make it fit on less lines*/
    .gdpr { font-size:9px; }
    .gdpr > div { display:inline; }

     /*Tune fuooter text look in UI*/
    footer {
        text-align:center;
    }
    footer .col {
        flex-basis:auto;
    }

    /*Tune size of contact information in contacts tab*/
    .contact-list {
        font-size:110%;
    }
	
	/*Size products on main page*/
    .contents {
        padding-left:2%;
        padding-right:2%;
        min-height:200px;
    }

	.contents > * , .contents .first-product
	{
		/*width:100%;*/
        width:48%;/*2 per row*/
		margin-bottom: 1.5em;
	}

	.contents .first-product:before
	{
		padding-top: 100%;
	}
		  	
	
	/*text*/
	h2 {
		border-top: 0;
        font-size: 110%;
        line-height: 1.3;
        text-align: center;
        white-space: nowrap;
        margin: 0;
	}
	
	
	/* Force size of suggestions and instruction  panels */
	.suggestion-links, .bottom
	{
		height:auto;
		padding:20px 2%;
	}
	
	.suggestion-links > *, .bottom > * {
		width: 47%;
		/* min-height: 8em;		 */
		min-height: 12em;		
		margin-bottom: 1.5em;	
		font-size: 70%;
	}
	
	/*NEW: Fit 2 on row*/
	.suggestion-links > *
	{
		width: 43%;
		margin-bottom:4em;	
	}
	
	
	/*Tune look*/
    .suggestion-links > * button{        
        font-size: 12px;
    }

	
	/* PRODUCT PAGE - make corrections - hide some elements*/
	
	.stripe/*, .product-content .diagram*/ { display:none !important;}
	
	/*in mobile version li items inherit the align of parent!*/
	.product-content ul
	{
		text-align:left;
	}
	
	/*Title text*/
    .product-content h3
	{
		font-size: 85%;
	}
	
	
	/*product image*/
	.product-content .left-content, .product-content .right-content
	{
		width:100% !important;
	}
			
	.product-content
	{		
		width:100%;
		margin-bottom:3em;
        padding: 0 5%;
	}
	
	.product-content .main-image
	{
		/*height:300px;*/
	}
	
	.product-content .right-content	
	{
		padding-left:0 !important;
		text-align:center !important;
	}
	
	.product-content .right-content	button{ font-size:105%;}
	.product-content .price {  left: .1em; width:3.5em; height:2.5em;}

    .product-content .right-content .diagram {
        min-height:initial;
    }
		
	/* DELIVERY PAGE - reduce left and right padding */
	.page-delivery
	{
		padding-left:10%;
		padding-right:10%;
	}
}


/* Save some screen space */
@media only screen and (min-width: 220px)  and (max-width: 800px) { 
	.designer-iframe{
        /*Setting bottom:0 can cause the toolbar to be hidden in portrait mode!*/
	    /*top: auto !important;	 
		bottom:0 !important;*/
		top: 30px !important;
		/*height: calc(100vh - 30px);*/	
		/*height: 100vh;*/ /*OK, hopefully this fixes the scenario when user swipes  up to hide the browser address bar...*/	
        /*Now that we have logic that sets height to the body - it is more corect to set height to 100%, as frame is child of body!*/
        height: calc(100% - 30px);	        
    }

    body.no-address-bar {
        position:relative;/*OK - the key to the iframe resize is that we need to set parent to have positioning!*/
        height:100vh;        
    }

    .no-address-bar .designer-iframe {
        height: calc(100dv - 30px);	
        /*border:1px solid pink !important;*/
    }
	  
	/*MENU*/
	 body.designer-visible #cssmenu #menu-button { padding: 15px 17px; font-size:0; } 
	 body.designer-visible #cssmenu #menu-button:after { top:7px;}
	 body.designer-visible #cssmenu #menu-button:before{ top:22px;}
	 body.designer-visible #cssmenu #menu-button.menu-opened:before,
	 body.designer-visible #cssmenu #menu-button.menu-opened:after { top:16px;} 
 }

 

/*============================ Loading ================================*/

@keyframes rotateplane {
    0% {
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }

    50% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }

    100% {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)
    }
}

body.iframe-loading .logo-image:after {
    z-index: 1000000;    
    content: " ";
    position: absolute;        
    right: -30px;
    top: 15%;
    bottom: 15%;
    display: block;
    width: 30px;    
    border: 4px solid;
    opacity: .6;
    border-radius: 10%;
    margin: auto;
    -webkit-animation: rotateplane 2s infinite ease-in-out;
    animation: rotateplane 2s infinite ease-in-out;
}

/*Add a first-load animation, just for the initial (slower) app-scripts/css load */
body.iframe-loading.first-load:after {
    -webkit-animation: rotateplane 2s infinite ease-in-out;
    animation: rotateplane 2s infinite ease-in-out;    
    z-index: 1000000;  
    content:" ";
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    display: block;
    width: 60px;
    height: 60px;    
    border:8px solid;    
    opacity:.6;
    border-radius:10%;
    margin: auto;
}




/*==================== Moved from assets/styles/styles.css css for the contact form ======================*/
frm-comment .inp--label {
  font-size: 12px;
  line-height: 22px;
}
.frm-comment .inp--label .required {
  color: #ff6029;
}
.frm-comment .inp--text {
  width: 100%;
  height: 40px;
  padding: 0px 20px 0px 20px;
  border: 1px solid #e3e3e3;
  margin-bottom: 25px;
  outline: none;
  transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  font-size: 12px;
  color: #000;
  font-family: 'Bitter', serif;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
.frm-comment .inp--text::-webkit-input-placeholder {
  color: #000;
}
.frm-comment .inp--text:-moz-placeholder {
  color: #000;
}
.frm-comment .inp--text::-moz-placeholder {
  color: #000;
}
.frm-comment .inp--text:-ms-input-placeholder {
  color: #000;
}
.frm-comment .inp--text:focus {
  border-color: #94c618;
}
.frm-comment .inp--textarea {
  height: 130px;
  padding-top: 5px;
  margin-bottom: 30px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
.frm-comment .inp-submit {
  width: 100%;
  max-width: 150px;
  border: 2px solid #94c618;
  font-size: 13px;
  line-height: 21px;
  padding: 6px 10px 6px 10px;
  text-align: center;
  background: #fff;
  color: #94c618;
  text-transform: uppercase;
  display: block;
  font-weight: 500;
  margin-bottom: 15px;
  outline: none;
  float: right;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
.frm-comment .inp-submit:hover {
  background: #94c618;
  border-color: #94c618;
}
.frm-comment .button--common {
  min-width: 120px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
.frm-comment .radio--group {
  margin: 0px -17px 15px -17px;
  font-size: 0px;
}
.frm-comment .radio--group .radio--label {
  display: inline-block;
  padding: 0px 17px 0px 17px;
  font-size: 14px;
  line-height: 22px;
  border-left: 1px solid #e3e3e3;
}
.frm-comment .radio--group .radio--label:first-child {
  border-left: none;
}
.frm-comment .radio--group .radio--label .fa {
  color: #e3e3e3;
  font-size: 14px;
  line-height: 22px;
  transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
}
@media (min-width: 1025px) {
  .frm-comment .radio--group .radio--label {
    cursor: pointer;
  }
  .frm-comment .radio--group .radio--label:hover .fa {
    color: #94c618;
  }
}
.frm-comment .radio--group .radio--label .radio--inp {
  display: none;
}
.frm-comment .radio--group .radio--label .radio--inp:checked + span .fa {
  color: #94c618;
}


.margin--top-15 {
  margin-top: 15px;
}
.margin--top-50 {
  margin-top: 50px;
}
.margin--top-60 {
  margin-top: 60px;
}
.margin--bottom-50 {
  margin-bottom: 50px;
}
.margin--top-100 {
  margin-top: 100px;
}
.margin--top-100-minus {
  margin-top: -100px;
}


/***********************************************
	-  STANDARD NAVIGATION SETTINGS 
***********************************************/


.tp-thumbs.navbar,
.tp-bullets.navbar,
.tp-tabs.navbar					{	border:none; min-height: 0; margin:0; border-radius: 0; -moz-border-radius:0; -webkit-border-radius:0;}

.tp-tabs,
.tp-thumbs,
.tp-bullets						{	position:absolute; display:block; z-index:1000; top:0px; left:0px;}

.tp-tab,
.tp-thumb 						{	cursor: pointer; position:absolute;opacity:0.5;  box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}

.tp-arr-imgholder,
.tp-videoposter,
.tp-thumb-image,
.tp-tab-image					{	background-position: center center; background-size:cover;width:100%;height:100%; display:block; position:absolute;top:0px;left:0px;}

.tp-tab:hover,
.tp-tab.selected,
.tp-thumb:hover,
.tp-thumb.selected				{	opacity:1;}

.tp-tab-mask,
.tp-thumb-mask 					{	box-sizing:border-box !important; -webkit-box-sizing:border-box !important; -moz-box-sizing:border-box !important}

.tp-tabs,
.tp-thumbs						{	box-sizing:content-box !important; -webkit-box-sizing:content-box !important; -moz-box-sizing: content-box !important}

.tp-bullet 						{	width:15px;height:15px; position:absolute; background:#fff; background:rgba(255,255,255,0.3); cursor: pointer;}
.tp-bullet.selected,
.tp-bullet:hover				{	background:#fff;}

.tp-bannertimer					{	background:#000; background:rgba(0,0,0,0.15); height:5px;}


.tparrows						{	cursor:pointer; background:#000; background:rgba(0,0,0,0.5); width:40px;height:40px;position:absolute; display:block; z-index:1000; }
.tparrows:hover 				{	background:#000;}
.tparrows:before				{	font-family: "revicons"; font-size:15px; color:#fff; display:block; line-height: 40px; text-align: center;}
.tparrows.tp-leftarrow:before	{	content: '\e824'; }
.tparrows.tp-rightarrow:before	{	content: '\e825'; }

					

/******************************
	-	BASIC STYLES		-
******************************/

.rev_slider_wrapper{
	position:relative;
	z-index: 0;
}


.rev_slider{
	position:relative;
	overflow:visible;
}

.tp-overflow-hidden { overflow:hidden;}

.tp-simpleresponsive img,
.rev_slider img{
	max-width:none !important;
	-moz-transition: none;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
	margin:0px;
	padding:0px;
	border-width:0px;
	border:none;
}

.rev_slider .no-slides-text{
	font-weight:bold;
	text-align:center;
	padding-top:80px;
}

.rev_slider >ul,
.rev_slider_wrapper >ul,
.tp-revslider-mainul >li,
.rev_slider >ul >li,
.rev_slider >ul >li:before,
.tp-revslider-mainul >li:before,
.tp-simpleresponsive >ul,
.tp-simpleresponsive >ul >li,
.tp-simpleresponsive >ul >li:before,
.tp-revslider-mainul >li,
.tp-simpleresponsive >ul >li{
	list-style:none !important;
	position:absolute;	
	margin:0px !important;
	padding:0px !important;
	overflow-x: visible;
	overflow-y: visible;
	list-style-type: none !important;
	background-image:none;
	background-position:0px 0px;
	text-indent: 0em;
	top:0px;left:0px;
}


.tp-revslider-mainul >li,
.rev_slider >ul >li,
.rev_slider >ul >li:before,
.tp-revslider-mainul >li:before,
.tp-simpleresponsive >ul >li,
.tp-simpleresponsive >ul >li:before,
.tp-revslider-mainul >li,
.tp-simpleresponsive >ul >li { 
	visibility:hidden; 
}

.tp-revslider-slidesli,
.tp-revslider-mainul	{	
	padding:0 !important; 
	margin:0 !important; 
	list-style:none !important;
}

.rev_slider li.tp-revslider-slidesli {
    position: absolute !important;
}


.tp-caption .rs-untoggled-content { display:block;}
.tp-caption .rs-toggled-content { display:none;}

.rs-toggle-content-active.tp-caption .rs-toggled-content { display:block;}
.rs-toggle-content-active.tp-caption .rs-untoggled-content { display:none;}

.rev_slider .tp-caption,
.rev_slider .caption 	{ 
	position:relative;  
	visibility:hidden; 
	white-space: nowrap;
	display: block;
}


.rev_slider .tp-mask-wrap .tp-caption,
.rev_slider .tp-mask-wrap *:last-child,
.wpb_text_column .rev_slider .tp-mask-wrap .tp-caption,
.wpb_text_column .rev_slider .tp-mask-wrap *:last-child{
	margin-bottom:0;

}

	
/* CAROUSEL FUNCTIONS */
.tp-carousel-wrapper {
	cursor:url(openhand.cur), move;
}
.tp-carousel-wrapper.dragged {
	cursor:url(closedhand.cur), move;
}

/* ADDED FOR SLIDELINK MANAGEMENT */
.tp-caption {
	z-index:1
}

.tp_inner_padding {	
	box-sizing:border-box;	
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	max-height:none !important;	
}


.tp-caption {	
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;	
	position:absolute;
	-webkit-font-smoothing: antialiased !important;
}

.tp-caption.tp-layer-selectable {
	-moz-user-select: all;
	-khtml-user-select: all;
	-webkit-user-select: all;
	-o-user-select: all;	
}

.tp-forcenotvisible,
.tp-hide-revslider,
.tp-caption.tp-hidden-caption {	
	visibility:hidden !important; 
	display:none !important
}

.rev_slider embed,
.rev_slider iframe,
.rev_slider object,
.rev_slider video {
	max-width: none !important
}


/*------------------------------------------------------------------__11.5/ Revolution Slider */
.tparrows {
    display: inline-block;
    width: 35px;
    height: 35px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
}

.tp-leftarrow {
    transform: rotate(-135deg) !important;
	left: 40px !important;
}


.tp-rightarrow 
{
	transform: rotate(45deg) !important;
	left:auto !important;
	right:40px;
}

/*override stuff defined in settings.css*/
.tparrows, .tparrows:hover{ 
background-color:transparent; 
}

.tparrows:hover{ 
border-top: 5px solid #000;
    border-right: 5px solid #000;
}

.tparrows:before{display:none;}





.rev--white-h1-large {
  color: #fff;
  font-size: 55px;
  line-height: 70px;
  /* font-family: 'Arial', 'Bitter', serif; */
  font-weight: 400;
}
.rev--white-h1 {
  color: #fff;
  font-size: 45px;
  line-height: 70px;
  /* font-family: 'Arial', 'Bitter', serif; */
  font-weight: 400;
}
.rev--white-h4 {
  color: #fff;
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}
.rev--white-h5 {
  color: #fff;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}
.rev--white-p {
  color: #fff;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.rev--white-p-huge {
  color: #fff;
  font-size: 20px;
  line-height: 24px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.rev--white-p-large {
  color: #fff;
  font-size: 18px;
  line-height: 30px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.rev--text-content {
  color: #fff;
}
.rev--text-content h4 {
  font-size: 20px;
  line-height: 20px;
  margin-bottom: 1em !important;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
}
.rev--text-content h1 {
  font-family: 'Bitter', serif;
  font-size: 40px;
  line-height: 60px;
  margin-bottom: 0.5em !important;
}
.rev--text-content p {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  line-height: 30px;
}




/*Hack and force some settings of carousel text*/
.rev--white-h1, .rev--white-h1-large
{
	color:#444;
	font-weight:bold;
}

.tp-parallax-wrap .tp-caption
{	
	/* letter-spacing:-1px !important; */
}




/*=================================== Menu =====================================================*/
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  font-family: Montserrat, sans-serif;
  background: #555;
  position: relative;
  z-index: 100;
}

#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  /* padding: 17px; */
  padding: 14px 17px;
   
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 700;
  text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
  color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
  position: absolute;
  /* top: 22px; */
  /* right: 11px; */
  top: 18px; right: 16px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu > ul > li.has-sub > a:before {
  position: absolute;
  /* top: 19px; */
  /* right: 14px; */
  top: 15px; right: 19px;
	
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
  top: 23px;
  height: 0;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu li:hover > ul {
  left: auto;
}
#cssmenu.align-right li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu li:hover > ul > li {
  height: 35px;
}
#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}
#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}
#cssmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 11px 15px;
  width: 170px;
  font-size: 12px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 400;
  background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
  border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
  right: auto;
  left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
  position: absolute;
  top: 13px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
  right: auto;
  left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  top: 17px;
  height: 0;
}


@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px),
     only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), 
    only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), 
    only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), 
    only screen and (min-resolution: 192dpi) and (max-width: 1024px), 
    only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

  #cssmenu {
    width: 100%;
  }
  #cssmenu ul {
    width: 100%;
    display: none;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
  }
  #cssmenu ul ul li,
  #cssmenu li:hover > ul > li {
    height: auto;
  }
  #cssmenu ul li a,
  #cssmenu ul ul li a {
    width: 100%;
    border-bottom: 0;
  }
  #cssmenu > ul > li {
    float: none;
  }
  #cssmenu ul ul li a {
    padding-left: 25px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 35px;
  }
  #cssmenu ul ul li a {
    color: #dddddd;
    background: none;
  }
  #cssmenu ul ul li:hover > a,
  #cssmenu ul ul li.active > a {
    color: #ffffff;
  }
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu.align-right ul ul {
    position: relative;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: left;
  }
  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before,
  #cssmenu ul ul > li.has-sub > a:after,
  #cssmenu ul ul > li.has-sub > a:before {
    display: none;
  }
  #cssmenu #menu-button {
    display: block;
    /* padding: 17px; */
	padding: 14px 17px;
	
    color: #dddddd;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
  }
  #cssmenu #menu-button:after {
    position: absolute;
    /* top: 22px; */
    /* right: 17px; */
	top: 18px; right: 16px;
	
    display: block;
    height: 9px;
    width: 20px;
    border-top: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
    content: '';
  }
  #cssmenu #menu-button:before {
    position: absolute;
    /* top: 16px; */
    /* right: 17px; */
	top: 11px; right: 16px;
	
    display: block;
    height: 2px;
    width: 20px;
    background: #dddddd;
    content: '';
  }
  #cssmenu #menu-button.menu-opened:after {
    top: 23px;
    border: 0;
    height: 2px;
    width: 15px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #cssmenu #menu-button.menu-opened:before {
    top: 23px;
    background: #ffffff;
    width: 15px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #cssmenu .submenu-button {
    position: absolute;
    z-index: 99;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    height: 46px;
    width: 46px;
    cursor: pointer;
  }
  #cssmenu .submenu-button.submenu-opened {
    background: #262626;
  }
  #cssmenu ul ul .submenu-button {
    height: 34px;
    width: 34px;
  }
  #cssmenu .submenu-button:after {
    position: absolute;
    top: 22px;
    right: 19px;
    width: 8px;
    height: 2px;
    display: block;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:after {
    top: 15px;
    right: 13px;
  }
  #cssmenu .submenu-button.submenu-opened:after {
    background: #ffffff;
  }
  #cssmenu .submenu-button:before {
    position: absolute;
    top: 19px;
    right: 22px;
    display: block;
    width: 2px;
    height: 8px;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:before {
    top: 12px;
    right: 16px;
  }
  #cssmenu .submenu-button.submenu-opened:before {
    display: none;
  }
}