html, body, h1, h2, h3, h4, ul, li {
	font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
	
}

html, body, h1, h2, h3, h4 {
    margin:0;
	padding:0;
    font-weight:normal;
	font-style:normal;
    font-size:1em;
}

.heading1, .heading2, .heading3, .heading4 {
    font-weight:700;
    font-family:'Raleway', Arial, Helvetica, sans-serif;
}

.heading1 {
    font-size:2em;
}

.heading2 {
    font-size:1.5em;
}

.heading3 {
    font-size:1.17em;
}

.heading4 {
    font-size:1.12em;
    border-bottom:2px solid rgba(0,174,239, 1);
}

html, body{
	width:100%;	
	height:100%;
    background-color:#ffffff;
    position:relative;
}

a {
    text-decoration:none;
    color:inherit;
}

.red {
    background-color:#c1001f;
    color:#fff;
}

.black {
    background-color:#000;
    color:#fff;
}

.lgrey {
    background-color: #cccccc;
    color:#fff;
}
#cover {
    background: url("../../images/ajax-loader.gif") no-repeat scroll center center #FFF;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index:1000;
}
#mobile-indicator {
    display:none;
}

.container {
	width: 90%;
    max-width:1280px;
    height:100%;
    margin:0 auto;
    position:relative;
}
.clear{
	clear:both;
	margin:0;
	padding:0;
}

.white {
    background-color:#fff;
    color:#000;
}

.blue {
    background-color:rgba(0,174,239, 1);
    color:#fff;
}

.blue-g {
    background: rgba(0,174,239, 1); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(0,174,239, 1) , #000); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(0,174,239, 1), #000); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(0,174,239, 1), #000); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(0,174,239, 1) , #000); /* Standard syntax */
    color:#fff;
}



section.text {
    padding:85px 0;
    line-height:1.5em;
    position:relative;
    z-index:2;
}

section.slogan {
    padding:35px 0;
    line-height:1.5em;
}

.white.text .heading3 {
    color:rgba(0,174,239, 1);
}
.blue.text .heading3 {
    color:#000;
}

.blue.text a {
    color:#000;
}

.half {
    width:50%;
    float:left;
}

.centred {
    text-align:center;
}
.third {
    width:30%;
    max-width:500px;
    display:inline-block;
    text-align:left;
    vertical-align:top;
}


header {
    width:100%;
    position:fixed;
    background: #fff;
    z-index:100;
    top:0;
}

    header .top-bar {
        height:30px;
        line-height:30px;
        background-color:#000;
        color:#fff;
        text-align:right;
    }
    #head-left {
        float:left;
        width:30%;
       
    }
       
        .transition #head-left img {
            padding:20px 0;
            border:none;
            max-height:70px;
            vertical-align:middle;

        }

.animated #head-left img {
    max-height:70px
}

    #head-right {
        float:right;
        text-align:right;
        width:67.5%;
    }
      

#fs-menu > ul {
    padding:20px 0;
    margin:0;
    font-family:'Raleway', Arial, Helvetica, sans-serif;
}
    #fs-menu>ul>li {
            display: inline-block;
            list-style-type: none;
            text-transform:uppercase;
            margin-left: 7%;
            line-height:75px;
            font-weight:700;
            color:#000;
            cursor: pointer;
            position:relative;
            -webkit-transition: all 0.2s;
            -moz-transition: all 0.2s;
            -ms-transition: all 0.2s;
            -o-transition: all 0.2s;
            transition: all 0.2s;
        }
    #fs-menu>ul>li:first-of-type {
        margin-left:0;
    }
        #fs-menu > ul > li.opac {
            line-height:75px;
        }
            #fs-menu>ul>li>a {
                color:#000;
                text-decoration:none;
            }
            
            #fs-menu>ul>li:hover, #fs-menu>ul>li:hover>a {
               color:rgba(0,174,239, 1); 
            }
#fs-menu ul li ul {
  padding: 0;
  background: #000;
  text-align:left;
  position: absolute;
  z-index:100;
  top: 75px;
  left: 0;
  width:225px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}

#fs-menu ul li ul li { 
  background: #000; 
  display: block; 
  color: #fff;
  padding:5px 10px;
  line-height:2em;
}
    #fs-menu ul li ul li a {
        color:#fff;
        display:block;
    }
#fs-menu ul li ul li:hover { background: rgba(0,174,239, 1); }
#fs-menu ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
        #mobile-menu {
            display:none;
            float:right;
            text-align:right;
        }

        #mobile-menu a.opac {
            line-height:75px;
        }



.display {
    position:relative;
    height:600px;
    
}

    .display.home {
        background-image:url('../../images/MFMain.jpg');
        background-size:cover;
        background-position:center top;
        padding-top:145px;
    }

    
    
.header {
    padding-top:145px;
    height:125px;
    position:relative;
    z-index:10;
}

    .header .header-content {
        position:absolute;
        bottom:10px;
        left:0;
    }

.display .content.c2 {
    position:absolute;
    background: rgba(0,0,0, 0.5);
    color:#fff;
    margin: 0;
    top:50%;
    padding:50px;
    transform:translateY(calc(-50% - 40px));
    width:40%;
    /*text-shadow:2px 2px 5px #333;*/
    text-align:left;
    
}
.display .content.c3 {
    position:absolute;
    z-index:10;
    right:0%;
    bottom:-85px;
    width:200px;
    height:150px;
    padding:50px 25px;
    vertical-align:middle;
    border-radius:125px;
    background:rgba(0,174,239, 0.9);
    color:#fff;
    text-align:center;
}

.display .content.c4 {
    position:absolute;
    bottom:0;
    background:rgba(0,0,0,0.75);
    color:#fff;
    text-align:center;
    padding:25px 0px;
    z-index:10;
    width:100%
}

.display .content .heading2 {
    font-size:40px;
}
    .display .content .heading3 {
        font-size:25px;
        display:block;
        margin-top:15px;
    }



/*HOME PAGE*/
.separator {
    width:100%;
    height:300px;
    background-position: center 50%;
    background-image:url('../../images/MFToilets2.jpg');
    background-size:cover;
    background-attachment:fixed;
    background-repeat:no-repeat;
    position:relative;
}

.separator .overlay {
    position:absolute;
    transform:translateY(-50%);
    color:#fff;
    margin: 0 10%;
    top:50%;
    width:80%;
    text-align:center;

}

.box-wrap {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex; 
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;   
    flex-wrap:wrap; 
    justify-content:center;
}

    .box-wrap.prange {
        margin:0 auto;
    }

    .box {
        /*-webkit-box-flex: 1;      
        -moz-box-flex: 1;       
        -webkit-flex: 1;       
        -ms-flex: 1;          
        flex: 1 0 16.6666%;*/     
        /*width:16.66666%;*/
        /*float:left;*/
        position:relative;
        background-color:#fff;           
        text-align: left;
    }
        .prange .box {
            display: -webkit-flexbox;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;       
            width:300px;
            height:300px;
            -webkit-flex-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;   
            align-items: center;
            color:#fff;  
        }


        .box.product {
            cursor:pointer;
        }
        .box.product:hover .prodtitle {
            background-color:#000;
        }

        .box.head {
        background-color:rgba(0,174,239, 1);
        }

        .box.head span {
           padding:25px;
           display:block;
           line-height:1.25em;
        }
    .box.product .prodtitle {
        background-color:rgba(0,174,239, 1);
        color:#fff;               
        
    }

    .prange .box.product .prodtitle {
        position:absolute; 
        left:5%;
        bottom:0;
        width:90%;
        text-align:center;
        line-height:40px;
    }


    .box img {
        width:100%;
        max-width:250px;
        margin: 0 auto;
    }



.link {
    margin:30px 0;
    }
    .link a {       
        padding:10px 65px;     
        color:#fff;
        cursor:pointer;
        font-size:18px;
        font-weight:700;
    }

        .link a:hover, .signup-btn:hover {
            background-color:#000;
        }










.hidden {
    display:none;
}





h4:before { 
  display: block; 
  content: " "; 
  margin-top: -150px; 
  height: 150px; 
  visibility: hidden; 
}



 


footer{
    display:block;    
    position:relative;    
	background-color:#000;
	color:#fff;
}

     footer .row {   
        text-transform: uppercase;
        margin:0 5%;
        padding:45px 0 10px;
        text-align:center;
    }
        footer .row ul {
            margin:0;
            padding:0;
            position:relative;
            list-style-type:none;
            
        }

        footer .row>ul>li {   
            display:inline-block;
            vertical-align:top;
            width:25%;
            margin:0 2%;
            text-align:left;
        }

    footer li {
        list-style:none;
    }

        footer li .top {
            font-weight:700;
            font-size:18px;
            color:rgba(0,174,239, 1);
        }

        footer li a:hover {
            color:rgba(0,174,239, 1);
        }  

        footer .sub {
            font-size:14px;
            padding-bottom:10px;
        }

    footer li.contact {
        text-transform:none;
    }

    footer .asial {
        max-height:100px;
        margin-top:30px;
    }

     footer .terms {
        padding:25px 10% 10px; 
        width:80%; 
        text-align:center; 
        font-size:12px; 
        color:#aaa;
    }

        footer .terms a {
            color:#aaa;
            text-decoration:none;
        }

.privacy ul {
    margin: 1em 0 1em 35px;
    list-style:disc;
    
}

.privacy a {
    color:#c1001f;
   }
.crt-social-icon {
    display:none !important;
}
.crt-post-footer {
    display:none !important;
}
.crt-post-name a {
    display:none !important;
}

.crt-feed-more {
    display:none !important;
}

@media screen and (max-width:1350px) {
    #fs-menu>ul>li {          
            margin-left: 30px;
            
        }

    .slides-container .content .heading2 {
    margin-top:200px;
 }
    .prange .box {
        width:250px;
        height:250px;
    }

    .trange .box img {
        max-width:200px;
    }
    .trange .box .prodwrap {
        width: calc(100% - 210px);
        padding: 25px 0 0;
    }

}

@media screen and (max-width:1200px) {
    #head-left {
        width:80%
    }

    .transition #head-left img {
        max-height:75px;
    }

    #head-right {
        width:20%;
    }
    #mobile-menu {
        display:block;
        text-transform: uppercase;
        line-height:75px;
        font-weight:700;
        color:#000;
        padding:20px 0;
        cursor: pointer;
    }
        #mobile-menu a {
        
    }


    #fs-menu {
        display:none;
    }

    .dist {
    width: calc(50% - 20px);
}
        .dist img {
            display:inline;
        }

}

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


    .product .img-display {
        float:none;
        margin:0 auto;
        width:100%;
        max-width:500px;
    }

    .product .prodDetails {
        width:100%;
        margin:0;
    }

    #mobile-indicator {
        display:block;
    }

    .trange .box {
        width:100%;
        padding:0;
    }
}

@media screen and (max-width:1023px) {
    footer .row > ul > li {
        width: 100%;
        text-align:center;
        margin-bottom:25px;
    }

    .display .content.c2 {
            width:calc(80% - 100px);
            margin:0 10%;
        }

    .spareprod .pimg, .spareprod .ptext {
        display:block;
        width:100%;
        padding:0;
        margin:0 auto;
    }

    .spareprod .ptext {
        max-width:750px;
    }

}

@media screen and (max-width: 768px) {
    /*.box-wrap {
        display:block;
    }*/
    .half {
        width:100%;
    }

    .subpage .display {
        height: 300px;
    }

    .display .content .heading2 {
        font-size:32px;
    }

 

        .prange .box {
            max-width: 250px;
            max-height: 250px;
            width:50%;
            height:unset;
        }

    .team {
    width:100%;
    float:none;
}

    .dist {
    width: calc(100% - 20px);
}

    section.text {
        padding: 45px 0;
    }
   
}

@media screen and (max-width: 550px) {
    .transition #head-left img {
        max-height:40px;
    }

    #mobile-menu {      
        line-height:40px;       
    }

    #mobile-menu a.opac {
            line-height:40px;
        }
    .prodNav ul li {
       font-size:16px;
       
    }

    .header {
        padding-top: 80px;
    }

    header .top-bar span {
        display:none;
    }
    .display.home {
        padding-top:110px;
        height:400px;
    }
    .subpage .display {
        height:250px;
    }

        .display .content.c2 {
            width:calc(90% - 50px);
            padding:25px;
            margin: 0 5%;
        }
    .display .content .heading2 {
    margin-top:100px;
    font-size:24px;
}

        .display .content.c3 {
            width:150px;
            height:100px;
        }

       .display .content .heading3 {
        font-size:18px;
        margin-top: 5px;
    }

    .display .content a {
        font-size:16px;
    }

     .prange .box .heading1 {
         font-size:1.75em;
        }

    .split .half .image {
        height: 150px;
    }

    .split .half .sub-item .icon{
        width:50px;
        height:50px;
    }

    .third {
        margin-left:5%;
        width:90%;
    }
    
    .logos .logo {
        width:50%;
    }

        .logos .logo img {
            padding:5% 10%;
            width:80%;
        }

    .trange .box img {
        max-width:150px;
    }
    .trange .box .prodwrap {
        width: calc(100% - 160px);
        padding: 15px 0 0;
    }

    footer .row {
        font-size:14px;
    }

}

@media screen and (max-width: 400px) {
    .heading1 {
        font-size:1.5em;
     }
     .prange .box {
            width:100%;
            min-height:250px;
        }
    .trange .box img {
        max-width: 125px;
    }
    .trange .box .prodwrap {
        width: calc(100% - 135px);
    }
    .trange .box.product .prodtitle {
        padding: 5px 10px;
        margin-bottom: 10px;
    }
}