/* CSS Document - use this a starting template for respsonsive */
/* updated to common sized Nov 2017 */
/************************************************************************************
	max width 1440 - desktop
*************************************************************************************/
@media screen and (max-width: 1440px) {

.header .nav .top_phone {
    width: 15%;
}	

.js-border-animate {
    font-size: 60px;
}	

h1 {
    font-size: 3.5em;
}	
	
h2 {
    font-size: 2.5em;
}	
	
p {
    font-size: 1em;
}	

.product_wrap .product_block .product_image {
    background-position: top center;
}	

.product_wrap .product_block .product_info {
    height: 195px;
}	
	
}

/************************************************************************************
	max width 1440 x max height 900 laptop / tablet
*************************************************************************************/
@media screen and (max-width: 1440px) and (max-height: 900px) {

.header .nav .nav_wrap .menu_item {
    font-size: 1.5em;
}	
	
	
}

/************************************************************************************
	max width 1366 - desktop / laptop
*************************************************************************************/
@media screen and (max-width: 1366px) {

.header .nav .top_phone .call {
    font-size: 1em;
}	

.contentblock {
    padding: 10px 15%;
}	
	
.footer {
    padding: 20px 10%;
}	
	
.product_wrap .product_block .product_info {
    height: 185px;
}	
	
.contact_wrap .content {
    height: 360px;
    background-position: top left;
}	
	
.form-block-nb {
    display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: center;
    width: 100%;
    height: auto;
    padding: 1% 0%;
}	
	
.form-block-nb input[type="submit"] {
    width: 100%;
	margin-top: 5px;
}	
	
	
}
	
	
/************************************************************************************
	max width 1366 x max height 1024 laptop / tablet
*************************************************************************************/
@media screen and (max-width: 1366px) and (max-height: 1024px) {

	
}

/************************************************************************************
	max width 1366 x max height 768 laptop / tablet
*************************************************************************************/
@media screen and (max-width: 1366px) and (max-height: 768px) {

	
}

/************************************************************************************
	max width 1280 - desktop / laptop
*************************************************************************************/
@media screen and (max-width: 1280px) {

.header .nav .nav_wrap .menu_item {
    font-size: 1.6em;
}	
	
.product_wrap .product_block .product_info {
    height: 172px;
}	
	
}

/************************************************************************************
	max width 1280 x 1024 - desktop / laptop
*************************************************************************************/
@media screen and (max-width: 1280px) and (max-height: 1024px) {

}

/************************************************************************************
	max width 1280 x 800 - desktop / laptop
*************************************************************************************/
@media screen and (max-width: 1280px) and (max-height: 800px) {

}

/************************************************************************************
	max width 1140 - desktop / laptop
*************************************************************************************/
@media screen and (max-width: 1140px) {

.header .nav .nav_wrap .menu_item {
    font-size: 1.4em;
}	

.header .nav .top_phone .call {
    font-size: 0.8em;
}	

.header .nav .top_phone .phone {
    font-size: 1.4em;
}	

.js-border-animate {
    font-size: 52px;
}	

.contentblock {
    padding: 10px 10%;
}	

.footer {
    padding: 20px 4%;
}	
	
h1 {
    font-size: 3.2em;
}	
	
h2 {
    font-size: 2.2em;
}	

.product_wrap .product_block .product_info {
    background-color: #FFF;
}	
	
h3 {
	line-height: 1em;
}	
	
}

/************************************************************************************
	max width 1024 x max height 900 laptop / tablet
*************************************************************************************/
@media screen and (max-width: 1140px) and (max-height: 900px) {

}

/************************************************************************************
	max width 1024 - laptop / tablet
*************************************************************************************/
@media screen and (max-width: 1024px) {

.header .nav .nav_wrap .menu_item {
    font-size: 1.2em;
}	
	
.js-border-animate {
    line-height: 1em;
}	
	
h1 {
    font-size: 3em;
}	
	
h2 {
    font-size: 2em;
}	
	
}

/************************************************************************************
	max width 1024 x max height 1366 - iPad
*************************************************************************************/
@media screen and (max-width: 1024px) and (max-height: 1366px) {

}

/************************************************************************************
	max width 1024 x max height 768 laptop / tablet
*************************************************************************************/
@media screen and (max-width: 1024px) and (max-height: 768px) {

}

/************************************************************************************
	max width 812 x max height 375 - iPhone X 
*************************************************************************************/
@media screen and (max-width: 812px) and (max-height: 375px) {

	
.signup_tab {
    width: 7%;
}
	
.header .nav {
	display: none;		
}	 

.mobile_nav {
	display: flex;
}	
	
.hp-titlebox .hp-tagline {
    font-size: 2em;
}	

.hp-titlebox .hp-tagline2 {
    font-size: 2.8em;
}	

.js-border-animate {
    font-size: 36px;
}	
	
#scroll_down_btn {
    font-size: 1.4em;
}	
	
h1 {
    font-size: 2.7em;
}	

.footer {
    height: 440px;
    padding: 40px 5%;
    display: flex;
	flex-direction: column;
	background-size: contain;
	background-repeat: repeat-y;
}	
	
.footer .site_block {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}	
	
.footer .site_block a {
	text-align: center;
}	

.footer .bottom_logo {
    width: 20%;
}	

.footer .contact_block {
    width: 100%;
}	
	
.footer .contact_block .block {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
	align-items: center;
}	

.product_wrap .product_block {
    width: 100%;
}	

.contact_wrap {
	flex-direction: column;
}	

.form_wrap {
    width: 100%;
}	
	
.contact_wrap .content {
    margin-left: 0%;
    width: 100%;
	margin-top: 30px;
}	
	
}

/************************************************************************************
	max width 800 - laptop / tablet
*************************************************************************************/
@media screen and (max-width: 800px) {

.header .nav {
	display: none;		
}	 

.mobile_nav {
	display: flex;
}	
	
.hp-titlebox .hp-tagline {
    font-size: 2em;
}	

.hp-titlebox .hp-tagline2 {
    font-size: 2.8em;
}	

.js-border-animate {
    font-size: 36px;
}	
	
#scroll_down_btn {
    font-size: 1.4em;
}	
	
h1 {
    font-size: 2.7em;
}	

.footer {
    height: 440px;
    padding: 40px 5%;
    display: flex;
	flex-direction: column;
	background-size: contain;
	background-repeat: repeat-y;
}	
	
.footer .site_block {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}	
	
.footer .site_block a {
	text-align: center;
}	

.footer .bottom_logo {
    width: 20%;
}	

.footer .contact_block {
    width: 100%;
}	
	
.footer .contact_block .block {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
	align-items: center;
}	

.product_wrap .product_block {
    width: 100%;
}	

.contact_wrap {
	flex-direction: column;
}	

.form_wrap {
    width: 100%;
}	
	
.contact_wrap .content {
    margin-left: 0%;
    width: 100%;
	margin-top: 30px;
}	
	
	
}

/************************************************************************************
	max width 768 - laptop / tablet
*************************************************************************************/
@media screen and (max-width: 768px) {

.product_wrap .product_block .product_box {
    width: 100%;
}	
	
	
.header .nav {
	display: none;		
}	 

.mobile_nav {
	display: flex;
}	
	
.hp-titlebox .hp-tagline {
    font-size: 2em;
}	

.hp-titlebox .hp-tagline2 {
    font-size: 2.8em;
}	

.js-border-animate {
    font-size: 36px;
}	
	
#scroll_down_btn {
    font-size: 1.4em;
}	
	
h1 {
    font-size: 2.7em;
}	

.footer {
    height: 440px;
    padding: 40px 5%;
    display: flex;
	flex-direction: column;
	background-size: contain;
	background-repeat: repeat-y;
}	
	
.footer .site_block {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}	
	
.footer .site_block a {
	text-align: center;
}	

.footer .bottom_logo {
    width: 20%;
}	

.footer .contact_block {
    width: 100%;
}	
	
.footer .contact_block .block {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
	align-items: center;
}	

.product_wrap .product_block {
    width: 100%;
}	

.contact_wrap {
	flex-direction: column;
}	

.form_wrap {
    width: 100%;
}	
	
.contact_wrap .content {
    margin-left: 0%;
    width: 100%;
	margin-top: 30px;
}	
	
.sign_up_wrap {
	justify-content: flex-start;
	flex-direction: column;
}

.sign_up_wrap .left_side {
	width: 100%;
}

.sign_up_wrap .right_side {
	width: 100%;
}
	
	
	
}

/************************************************************************************
	max width 768 x max height 1024 - iPad
*************************************************************************************/
@media screen and (max-width: 768px) and (max-height: 1024px) {

}

/************************************************************************************
	max width 740 x max height 360 - S8
*************************************************************************************/
@media screen and (max-width: 740px) and (max-height: 360px) {

.page-grid-half {
    display: flex;
	flex-direction: column;
}

.page-grid-thirds {
    display: flex;
	flex-direction: column;
}
	
.page-row-container {
    display: flex;
	flex-direction: column;
}
	
.page-grid-firstthird {
    display: flex;
	flex-direction: column;
}

.page-grid-lastthird {
    display: flex;
	flex-direction: column;
}
	
}

/************************************************************************************
	max width 720 - laptop / tablet
*************************************************************************************/
@media screen and (max-width: 720px) {

}

/************************************************************************************
	max width 667 x max height 375 - phone
*************************************************************************************/
@media screen and (max-width: 667px) and (max-height: 375px) {

.page-grid-half {
    display: flex;
	flex-direction: column;
}

.page-grid-thirds {
    display: flex;
	flex-direction: column;
}
	
.page-row-container {
    display: flex;
	flex-direction: column;
}
	
.page-grid-firstthird {
    display: flex;
	flex-direction: column;
}

.page-grid-lastthird {
    display: flex;
	flex-direction: column;
}
	
.signup_tab {
    font-size: 0.7em;
}
	
}

/************************************************************************************
	max width 640 x max height 360 - S5 / S7
*************************************************************************************/
@media screen and (max-width: 640px) and (max-height: 360px) {

h2 {
    font-size: 1.8em;
}	
	
}

/************************************************************************************
	max width 600 - laptop / tablet
*************************************************************************************/
@media screen and (max-width: 600px) {

}

/************************************************************************************
	max width 568 x max height 320 - phone
*************************************************************************************/
@media screen and (max-width: 568px) and (max-height: 320px) {

.hp-titlebox .hp-tagline {
    font-size: 1.5em;
}	

.hp-titlebox .hp-tagline2 {
    font-size: 2.1em;
}	
	
.social-media {
	display: none;
}	
	
.page_container {
    padding: 120px 2% 10% 2%;
}	
	
h1 {
	margin-bottom: 15px;
	font-size: 2.1em;	
}	

.product_wrap {
    margin-top: 0px;
}	

.product_wrap .product_block {
    display: flex;
	flex-direction: column;
	height: auto;
	overflow: auto;
	padding-bottom: 20px;
}	
	
.product_wrap .product_block .product_image {
    height: 305px;
}	

.product_wrap .product_block .product_info {
	padding: 10px 10%;
}	
	
.signup_tab {
    display: none;
}

}

/************************************************************************************
	max width 480 - tablet / phone
*************************************************************************************/
@media screen and (max-width: 480px) {

.page-grid-half {
    display: flex;
	flex-direction: column;
}

.page-grid-thirds {
    display: flex;
	flex-direction: column;
}
	
.page-row-container {
    display: flex;
	flex-direction: column;
}
	
.page-grid-firstthird {
    display: flex;
	flex-direction: column;
}

.page-grid-lastthird {
    display: flex;
	flex-direction: column;
}

.hp-titlebox .hp-tagline {
    font-size: 1.5em;
}	

.hp-titlebox .hp-tagline2 {
    font-size: 2.1em;
}	
	
.social-media {
	display: none;
}	
	
.page_container {
    padding: 120px 2% 10% 2%;
}	
	
h1 {
	margin-bottom: 15px;
	font-size: 2.1em;	
}	

.product_wrap {
    margin-top: 0px;
}	

.product_wrap .product_block {
    display: flex;
	flex-direction: column;
	height: auto;
	overflow: auto;
	padding-bottom: 20px;
}	
	
.product_wrap .product_block .product_image {
    height: 305px;
}	

.product_wrap .product_block .product_info {
	padding: 10px 10%;
}	
	
.top_logo {
    width: 16vw;
}	
	
.product_wrap .product_block .product_box .prod_wrap {
    width: 100%;
    display: flex;
    justify-content: flex-start;
	flex-direction: column;
    height: auto;
    overflow: auto;
}	
	
.product_wrap .product_block .product_box .prod_wrap .prod_image {
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
	height: 200px;
	
}	
	
.signup_tab {
    display: none;
}
	
	
	
}

/************************************************************************************
	max width 414 - phone
*************************************************************************************/
@media screen and (max-width: 414px) {

.form-block-nb .g-recaptcha {
    width: 75%;
}	
	
.form-block .form-row {
    flex-direction: column;
}	
	
.form-block .form-row .form-input {
    width: 100%;
}	
	
.form-block .form-row .form-label {
    width: 100%;
    text-align: left;
    padding-right: 0%;
	margin-bottom: 5px;
}	

.page_container .page_wrap {
    background-color: #fff;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}	

.page_container {
    padding: 85px 2% 10% 2%;
}	
	
h1 {
    font-size: 2em;
}	
	
}

/************************************************************************************
	max width 400 - phone
*************************************************************************************/
@media screen and (max-width: 400px) {

}

/************************************************************************************
	max width 390 - phone
*************************************************************************************/
@media screen and (max-width: 390px) {

}

/************************************************************************************
	max width 375 - phone
*************************************************************************************/
@media screen and (max-width: 375px) {

.form-block-nb .g-recaptcha {
    width: 87%;
}	
	
.footer {
    background-size: 170%;
	height: 484px;	
}	
	
.footer .site_block a {
    width: 50%;
}	
	
.footer .bottom_logo {
    width: 50%;
}	
	
.footer .contact_block {
    padding-left: 10px;
    width: 100%;
	flex-direction: column;
}	
	
.footer .contact_block .block {
    width: 100%;
}	
	
}

/************************************************************************************
	max width 375 x max height 812 - iPhone X 
*************************************************************************************/
@media screen and (max-width: 375px) and (max-height: 812px) {

}

/************************************************************************************
	max width 375 x max height 667 - phone
*************************************************************************************/
@media screen and (max-width: 375px) and (max-height: 667px) {

}

/************************************************************************************
	max width 360 - phone
*************************************************************************************/
@media screen and (max-width: 360px) {

h2 {
    font-size: 1.8em;
}	
	
	
}

/************************************************************************************
	max width 360 x max height 740 - S8
*************************************************************************************/
@media screen and (max-width: 360px) and (max-height: 740px) {

}

/************************************************************************************
	max width 360 x max height 640 - S5 / S7
*************************************************************************************/
@media screen and (max-width: 360px) and (max-height: 640px) {

}

/************************************************************************************
	max width 320 - phone
*************************************************************************************/
@media screen and (max-width: 320px) {

}

/************************************************************************************
	max width 320 x max height 568 - phone
*************************************************************************************/
@media screen and (max-width: 320px) and (max-height: 568px) {

}