/* Flex Box */

h2.subhead { font-size:25px; font-weight:300; }

.imageright { width:48%; display:inline-block; text-align:right; margin:0 0 2% 2%; float:right; }
.imageleft { width:48%; display:inline-block; text-align:right; margin:0 2% 2% 0; float:left; }
.imagefull { width:100%; margin:15px 0; clear:both; }


.two-img .imageright { width:48%; display:inline-block; text-align:right; margin:2% 0% 2% 2%; float:right; }
.two-img .imageleft { width:48%; display:inline-block; text-align:right; margin:2% 2% 2% 0%; float:left; }


.three-img .imageright { width:32%; display:inline-block; text-align:right; margin:2% 0% 2% 2%; float:right; }
.three-img .imageleft { width:32%; display:inline-block; text-align:right; margin:2% 2% 2% 0%; float:left; }
.three-img .imagemid { width:32%; display:inline-block; text-align:right; margin:2% 0% 2% 0%; float:left; }


@media only screen and (max-width:768px) {
	
.three-img .imageright { width:48%; display:inline-block; text-align:right; margin:2% 0% 2% 2%; float:right; }
.three-img .imageleft { width:48%; display:inline-block; text-align:right; margin:2% 2% 2% 0%; float:left; }

.three-img .imagemid { display:none; }


}



.twocol {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
	-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

@media only screen and (max-width:768px) { .twocol { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }	}

.twocol ul,
.twocol li { break-inside: avoid-column; -webkit-column-break-inside: avoid; }
.twocol p { margin:0 0 20px 0; }
.twocol h3 { margin:0 0 20px 0; }




.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-half {
	width:50%; float:left; margin:5px 20px 10px 0;
}



.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}



hr {
    border: 0; height: 1px; margin:21px 0 20px 0;
    background-image: linear-gradient(to right, rgba(100, 100, 100, 0), rgba(100, 100, 100, 0.75), rgba(100, 100, 100, 0));
}


.donwlod-file { margin-bottom:20px; }
.donwlod-file img { height:60px; }


.feature { padding: 30px 0 60px 0; margin: -30px 0; }
.feature h2 { margin:0; font-weight:300; text-align:center; }

/* Flex Box END */
















@media (min-width:1700px) { 


}




/* hi-res laptops and desktops */
@media (max-width:1281px) { 

header .menu .bottom ul li a { letter-spacing: 0px; }
    
}



@media (max-width:1150px) { 

header .menu .bottom ul li.login { display: none;  }
header .menu .top ul li.login { display: inline-block;  }

}



/* big landscape tablets, laptops, and desktops */ 
@media (max-width:1025px) {
	
header .menu .bottom ul li.join { display: none;  }
header .menu .top ul li.join { display: inline-block;  }

.homep .banner .join,
.homep .banner .demo { font-size: 18px; }
    
    
.homep .banner h1 { font-size: 28px; }
.homep .banner h2 { font-size: 15px; }
.homep .banner p { font-size: 12px; }
    
}


/* tablet, landscape iPad, lo-res laptops ands desktops */
@media (max-width:961px) {

header .logo { width:130px; }
header .menu { width: calc(100% - 135px); float:right; position:relative;  }
header .menu .bottom ul li a { font-size:15px; margin:35px 0 0 8px; padding:10px; }

    
    
.homep,
.memberp,
.corporatep, 
.aboutp,
.contactp,
.otherp { margin-top: 140px; }
    
.homep .banner h2 { font-size: 14px; } 
    
.homep .banner .join,
.homep .banner .demo { font-size: 15px; padding: 8px 12px; }


.homep .about { font-size: 14px; }
 
.homep .about h4 { font-size: 3.8vw; }
.homep .about h4 span { font-size: 4.2vw; }



.homep .about .phone-logo { top: 30vw; }
.homep .about .phone-logo img { width: 35%; }


.homep .about .phone { margin-top: 20vw; }
.homep .about .phone img {width: 50%;}

    
    
.list h5 { font-size: 30px; }
.list h5 strong { font-size: 35px; }

.homep .corporate,
.homep .member,
.list { font-size: 12px; }
.list li { background: url("../img/tick.svg") no-repeat top left; background-size: 15px 15px; padding-left: 24px; margin-left: 2px; }

    
    
a.button-b,
a.button-r { padding: 6px 10px; margin: 8px 0 0 0; font-size: 11px; }
    
    
    
.contact-details .left { width: 100%;}
.contact-details .right { width: calc(100% - 40px); background: #F2F2F2; padding: 24px 20px 20px 20px; }




    
}


@media only screen and (max-width:880px) {

    .homep .about .right { padding: 0 ;}
   
    .memberp .banner  h1 { font-size: 24px; }
    .memberp .banner h2 { font-size: 14px; }

    .benefits-holder .benefits .txt { width: 55%; }
}



@media only screen and (max-width:768px) {

header .logo { width:110px; }
header .menu { width: calc(100% - 115px); }    

header .menu .bottom { top: 0; }

    
header .menu .top ul li.call { margin-right: 0px; } 
header .menu .top ul li.email { margin-right: 15px; }    
    
header .menu .top ul li.call span,
header .menu .top ul li.email span { display: none; }
    
header .menu .top ul li.call img,
header .menu .top ul li.email img { display: block; }
    
    
    

header .dropdown a { background: #FFF; padding: 8px; }
    
header .menu ul li { display:block; }
header .menu .bottom ul li a { margin:8px 0 0 0; padding:5px 8px; letter-spacing: 1px; }
header .menu .bottom ul li { text-align: right; }
    
header .menu .top { margin: 15px 30px 0 0; }
header .menu .top ul li a img { width:18px; opacity:.7 }
header .menu .top ul li { line-height: 1.2; vertical-align: middle; }
header .menu .top ul li a { font-size: 14px; letter-spacing: 0 !important; }

    
    
.homep,
.memberp,
.corporatep, 
.aboutp,
.contactp,
.otherp { margin-top: 110px; }    

    
    
    
.homep .about .phone {margin-top: 15vw;}
.homep .about .card img,
.homep .about .graph img,
.homep .about .calc img,
.homep .about .cal img,
.homep .about .clip img,
.homep .about .training img,
.homep .about .badge img { width: 30%; }
    
.demo .click { display: none; }
.demo .form { width: calc(100% - 250px); }
    
    
.benefits-holder .benefits h4 { font-size: 30px; margin: 0px 0 20px 0; }
.benefits-holder .benefits .txt { font-size: 12px; } 
    
    
.benefits-holder .benefits .img { margin-top: 30px; }
    
    
.homep .banner h2 {  display: none; }

}





 /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
@media (max-width:641px) {

.homep .banner .left { width: 63%; position: absolute; z-index: 90; left: 2%; }
.homep .banner .right { width: 50%; min-height: 350px; position: relative; z-index: 80; right: 2%; }
.homep .banner h1 { font-size: 20px; max-width: 300px; }   
.homep .banner p { max-width: 300px; } 
    
.homep .about { font-size: 12px; }
.homep .about h4 { font-size: 28px; }
.homep .about h4 span { font-size: 32px; }

.homep .about .right {width: 49%; }
    
    
    
    
.homep .member .left { width: 100%; }
.homep .member .right { width: 100%; border-bottom: 1px solid #DDD; }


.homep .corporate .left { width: 100%; }
.homep .corporate .right { width: 100%; }
   
.test-top img { width: 40px;}
    
.demo { text-align: center; }   
.demo .click { display: inline-block; }
.demo .form { width: 100%; clear: both; margin-top: 30px; }    

    
footer ul li { font-size: 11px; }
footer ul li img { width: 15px; }    
footer .foot { font-size: 10px; }
    
    
footer ul { width: 25%; }
footer .logo { width: 21%; }

    
}



@media only screen and (max-width:580px) {

footer ul { width: 32%; }
footer .logo { display: none; }
    
}



 /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
@media (max-width:481px) {

header .menu .bottom ul li.login { display: block;  }
header .menu .top ul li.login { display: none;  }
header .menu .bottom ul li.join { display: block;  }
header .menu .top ul li.join { display: none;  }
    
    
header .menu .bottom ul li.login a { margin-top: 10px; }
header .menu .bottom ul li.join a { margin-top: 20px; }
    
    
    
    
.homep .banner .left { width: 98%;  }
.homep .banner .right { width: 100%; padding-top: 300px; height: auto; }
.homep .banner h1 { font-size: 30px; width: 95%; }   
.homep .banner h2 { font-size: 12px; width: 95%; }   

    
    
footer ul { width: 50%; margin-bottom: 20px; }
footer .logo { width: 50%; display: inline-block; }    
    
.demo .form { text-align: center; float: none; }    
.demo .form input.name,
.demo .form input.number,
.demo .form input.email { width: calc(100% - 28px); padding: 12px 14px; }
.demo .form input.send { width: 80%; padding: 12px 0; margin: 0 10% }
    
footer { padding-top: 10px; }
    
    
footer .foot .left { float: none; text-align: center; }
footer .foot .right { float: none; text-align: center; }

}


@media only screen and (max-width:400px) {
    
.homep .about { position: static; }
.homep .about .left {width: 30%; position: static; }
.homep .about .right {width: 70%; }
    
    

.homep .about .phone-logo,
.homep .about .phone { display: none }
    
    
.homep .about .card,
.homep .about .graph,
.homep .about .calc,
.homep .about .cal,
.homep .about .clip,
.homep .about .training,
.homep .about .badge { position: static; text-align: left; }

.homep .about img { width: 70% !important;}
.homep .about h4 { margin-top: 0; }
    
    
    
.benefits-holder .benefits .img,
.benefits-holder .benefits .txt { width: 100%; float: none !important; }     

    
}



@media only screen and (max-width:350px) {

    .homep .banner .right { width: 100%; padding-top: 200px; height: auto; }	
}





 /* smartphones, iPhone, portrait 480x320 phones */ 
@media (max-width:320px) {


	
}