@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/


/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */


    .closepopup{
        position: absolute;
        top: 5%;
        right: 5%;
        cursor: pointer;
        font-size: 1.3em;
        transition: all .3s;
    }
    
    
    .closepopup:hover{
        font-size: 1em;
      opacity: .8;
    }
    
    
	.top{
		width: 96vw;
		height: 17vh;
		position: fixed;
        top: 3vh;
        left: 2vw;
        z-index: 100000000000;
        transition: .4s all;
	}   
    
    .top-scroll{
        width: 96vw;
		height: 10vh;
		position: fixed;
        top: 3vh;
        left: 2vw;
        z-index: 100000000000;
        background-color: #172975;
        transition: .4s all;
    }
	
    
    
    
    
	
	#logo{
		width:40%;
		height: 90%;
        display: block;
		float: left;
		clear: none;
		background-position: center left;
		background-repeat: no-repeat;
		background-size: 90%;
		background-image: url("../images/f-assets/fa_logo-colored.svg");
        margin-left: 5%;
        padding: 0;
        padding-top: 1em;
        position: relative;
        transition: all .4s;
	}
    
    
    #logo span {
background: rgb(57,102,199);
background: linear-gradient(170deg, rgba(57,102,199,1) 0%, rgba(32,184,249,1) 100%);
        height: .3em;
        width: 80%;
    display: block;
        position: absolute;
        border-radius: 0 0 .5em .5em;
        top: 0;
}
    
    
    
    .top-scroll #logo{
        background-size: 60%;
    }
	
	
    .desktop-nav{
         transition: .4s all;
            background-color: white;
            top: 0;
        display: none;
        position: relative;
		width: 100%;
		height: 100vh;
        transition: all .4s;
    }

    
	.dn-list{
		
		margin-top: 0%;
		color: #fff;
		float: right;
		clear: none;
		font-size: .9em;
		letter-spacing: 1px;
        margin-right: 5%;
      
	}
	


	.dn-list li{
		list-style: none;
		display: inline-block;
		 font-family:"Kufam-Regular";
		margin-left: 2em;
		cursor: pointer;
        opacity: .6;
        font-weight: 100;
        transition: all .2s;
        color:  #172975;
        font-size: 2em;
        width: 80%;
        margin: 1em 10%;
        transition: all .4s;
	}


	
	.dn-list li:hover{
        opacity: 1;
        font-weight: 500;
        font-family:"Kufam-SemiBold";
	}


 
    
    
    
    
    .products-popup{
        position: absolute;
        z-index: 100;
        height: 80vh;
        width:90vw;
        background-color: white;
        right: 5%;
        top: 10vh;
        overflow-y: scroll;
        display: none;
    }
    
   
    .products-popup .title2{
        margin: 1em 5%;
    }
    
	
	
    .pp-item{
        width: 80%;
        height: 25vh;
        margin: .5em 5%;
        display: block;
        float: left;
        clear: none;
        padding: 5%;
        cursor: pointer;
        background-color: #e9efff;
        transition: all .4s;
        position: relative;
    }
    

    
    
    .pp-item:hover .pp-img{
        height: 100%;
        margin-top: 0%;
        transform: rotate(5deg); 
    }
	
       .pp-item:hover .pp-text{
        font-size: 1.9em;
    }
	
	
    .pp-img{
        width: 40%;
        height: 90%;
        float: left;
        clear: none;
        display: block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin-top: 5%;
        transition: all .2s;
        position: absolute;
        top: 0;
        left: 0;
        
    }
    
    
    .pp-text{
        width: 60%;
        height: auto;
        vertical-align: middle;
        font-family:"Kufam-SemiBold";
        letter-spacing: -.5px;
        color: #172975;
        font-size: 1.6em;
        float: right;
        display: block;
        clear: none;
        text-align: left;
        line-height: .7em;
        padding-top: 1em;
        transition: all .4s;
    }
    
    .pp-text span{
        font-size: .7em;
        opacity: .6;
        font-family:"Kufam-Regular";
        letter-spacing:0px;
    }
    
    
    
    
    


    .mobi-top{
        display: none;
    }


	
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .footer{
        width: 100%;
        height: auto;
        float: left;
        clear: none;
        display: block;
        background-color: #383838;
        font-family:"Kufam-Regular";
        line-height: 1.3em;
        color: #fff;
    }
    
    .f-inner b{
        font-family:"Kufam-Bold";
    }
    
    .f-inner{
        width: 90%;
        height: 90%;
        margin: 5%;
         height: auto;
        float: left;
        clear: none;
        display: block;
    }

    
    
    .f-inner li{
        cursor: pointer;
        opacity: .5;
        transition: all .4s;
        color: #fff;
    }
    
    
    .f-inner li:hover{
        opacity: 1;
    }



    .f-inner p{
        width: 100%;
        display: block;
    float: left;
    clear: none;
        margin-bottom: 2em;
        color: white;
    }

.f-inner a{
    color: white;
}

    
.f-inner ul{
    width: 40%;
    margin: 5% 5% 5% 0;
    height: auto;
    display: block;
    float: left;
    clear: none;
    color: white;
}

.f-inner img{
    width: 40%;
}



	



}




/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
    

    
    
    
    
    
    
    
    
    
    
    
    
}



/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {


    .closepopup{
        position: absolute;
        top: 5%;
        right: 5%;
        cursor: pointer;
        font-size: 1.3em;
        transition: all .3s;
    }
    
    
    .closepopup:hover{
        font-size: 1em;
      opacity: .8;
    }
    
    
	.top{
		width: 96vw;
		height: 15vh;
		position: fixed;
        top: 3vh;
        left: 2vw;
        z-index: 100000000000;
        transition: .4s all;
	}   
    
    .top-scroll{
        width: 96vw;
		height: 10vh;
		position: fixed;
        top: 3vh;
        left: 2vw;
        z-index: 100000000000;
        background-color: #172975;
        transition: .4s all;
    }
	
    
    
    
    
	
	#logo{
		width:15%;
		height: 90%;
        display: block;
		float: left;
		clear: none;
		background-position: center left;
		background-repeat: no-repeat;
		background-size: 70%;
		background-image: url("../images/f-assets/fa_logo-colored.svg");
        margin-left: 5%;
        padding: 0;
        padding-top: 1em;
        position: relative;
        transition: all .4s;
	}
    
    
    #logo span {
background: rgb(57,102,199);
background: linear-gradient(170deg, rgba(57,102,199,1) 0%, rgba(32,184,249,1) 100%);
        height: .3em;
        width: 80%;
    display: block;
        position: absolute;
        border-radius: 0 0 .5em .5em;
        top: 0;
}
    
    
    
    .top-scroll #logo{
        background-size: 60%;
    }
	
	
    
    .desktop-nav{
         transition: .4s all;
            background-color: transparent;
            top: auto;
        display: block;
        width: auto;
        height: 40%;
    }
    
    
    
	.dn-list{
		position: relative;
		margin-top: 2%;
		color: #fff;
		float: right;
		clear: none;
		font-size: .9em;
		letter-spacing: 1px;
        margin-right: 5%;
        display: block;
        top: auto;
        background-color: transparent;
	}
	
    
	.dn-list li{
		list-style: none;
		display: inline-block;
		 font-family:"Kufam-Regular";
		margin-left: 2em;
		cursor: pointer;
        opacity: .6;
        font-weight: 100;
        transition: all .2s;
        color: #fff;
        font-size: 1em;
         width: auto;
        margin:auto 1em;
        transition: all .4s;
	}
    
	
	.dn-list li:hover{
        opacity: 1;
         font-family:"Kufam-SemiBold";
	}
    
    
    .dn-list:first-child{
    padding-top: 0;
}
    
    
    
    
    .products-popup{
        position: absolute;
        z-index: 100;
        height: 80vh;
        width: 20vw;
        background-color: white;
        right: 5%;
        top: 10vh;
        overflow-y: scroll;
        display: none;
    }
    
   
    .products-popup .title2{
        margin: 1em 5%;
    }
    
	
	
    .pp-item{
        width: 80%;
        height: 25vh;
        margin: .5em 5%;
        display: block;
        float: left;
        clear: none;
        padding: 5%;
        cursor: pointer;
        background-color: #e9efff;
        transition: all .4s;
        position: relative;
    }
    

    
    
    .pp-item:hover .pp-img{
        height: 100%;
        margin-top: 0%;
        transform: rotate(5deg); 
    }
	
       .pp-item:hover .pp-text{
        font-size: 1.9em;
    }
	
	
    .pp-img{
        width: 40%;
        height: 90%;
        float: left;
        clear: none;
        display: block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin-top: 5%;
        transition: all .2s;
        position: absolute;
        top: 0;
        left: 0;
        
    }
    
    
    .pp-text{
        width: 60%;
        height: auto;
        vertical-align: middle;
        font-family:"Kufam-SemiBold";
        letter-spacing: -.5px;
        color: #172975;
        font-size: 1.6em;
        float: right;
        display: block;
        clear: none;
        text-align: left;
        line-height: .7em;
        padding-top: 1em;
        transition: all .4s;
    }
    
    .pp-text span{
        font-size: .7em;
        opacity: .6;
        font-family:"Kufam-Regular";
        letter-spacing:0px;
    }
    
    
    
    
    


    .mobi-top{
        display: none;
    }


	
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .footer{
        width: 100%;
        height: auto;
        float: left;
        clear: none;
        display: block;
        background-color: #383838;
        font-family:"Kufam-Regular";
        line-height: 1.3em;
        color: #fff;
    }
    
    .f-inner b{
        font-family:"Kufam-Bold";
    }
    
    .f-inner{
        width: 90%;
        height: 90%;
        margin: 5%;
         height: auto;
        float: left;
        clear: none;
        display: grid;
         grid-template-columns: 2fr 1fr 1fr 1fr 1fr; 
          gap: 2em 2em; 
    }
    
    
    .f-inner li{
        cursor: pointer;
        opacity: .5;
        transition: all .4s;
        color: #fff;
    }
    
    .f-inner p a{
        color: white;
    }
    
    
    .f-inner li:hover{
        opacity: 1;
    }
    
    
    .f-inner p{
        width: 100%;
        display: block;
        float: left;
        clear: none;
        margin-bottom: 2em;
        color: white;
    }

    
.f-inner ul{
    width: 100%;
    margin: 0;
    height: auto;
    display: block;
    float: left;
    clear: none;
    
}

.f-inner img{
    width: 80%;
}
    
    
    
	
	
}