@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. */






    
    
    .topslide{
        height: auto;
        position: relative;
        z-index: 50;
        overflow: hidden;
    }
    
    
    .contact-container{
        position:relative;
        width: 90%;
        height: auto;
        display: block;
        float: left;
        clear: none;
        margin: auto;
        margin-top: 15vh;
        left: 5%;
        
    }

    
    .contact-container h3{
        color: #fff;
        margin-bottom: 1em;
    }
    
    
    .cc-inner{
        width: 100%;
        height: auto;
        display: block;
        float: left;
        clear: none;
        background-color: none;
    }
    
    
    
    .office-details{
        width: calc(100% - 1em);
        height: 40vh;
        display: block;
        float: left;
        clear: none;
        background-color: white;
        padding: 1em;
    }
    
    
    
    .map{
        width: calc(100% - 1em);
        height: 60vh;
        display: block;
        float: left;
        clear: none;
        padding: 1em;
        background-color: white;
    }
    
    .map iframe{
        width: 100%;
        height: 100%;
        display: block;
        float: left;
        clear: none;

    }
    
    
    .contactform{
        width: calc(100% - 1em);
        height: 80vh;
        display: block;
        float: left;
        clear: none;
        background-color: white;
        padding: 1em;
    }
    
    
    
    
    .contact-container .fi-contact{
        height: 2em;
        width: auto;
        display: block;
        float: left;
        clear: both;
        color: #fff;
        font-family: 'Montserrat', sans-serif;
        margin: 1em 0;
    }
    


    .contact-container .fi-contact i{
        font-size: 1.4em;
        margin-right: .5em;
        cursor: pointer;
        transition: all .4s;
        opacity: 1;
        color: #cd9670;
        transform-origin: center;
        text-align: left;
        margin: .5em 0;
        clear: both;
    }
    

    .contact-container .fi-contact i span{
          font-family: 'Montserrat', sans-serif;
          color: #000;
          font-size: .7em;
          margin-left: 1em;
          font-weight: 500;
          letter-spacing: .5px;
        clear: both;
    }
    
    
  
     
    
    
    
    
    
    

























}




/* 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) {

    
    
    
    
    .topslide{
        height: 100vh;
        position: relative;
        z-index: 50;
        overflow: hidden;
    }
    
    
    .contact-container{
        position: absolute;
        width: 90%;
        height: auto;
        display: block;
        float: left;
        clear: none;
        top: 25%;
        left: 5%;
        margin: auto;
    }
    
    .contact-container h3{
        color: #fff;
        margin-bottom: 1em;
    }
    
    
    .cc-inner{
        width: 100%;
        height: auto;
        display: block;
        float: left;
        clear: none;
          display: grid; 
          grid-template-columns: 1fr 1fr 1fr; 
          grid-template-rows: 0fr; 
          gap: 0em 0em; 
          grid-template-areas: 
            ". . ."; 
        background-color: white
    }
    
    
    
    .office-details{
        width: 100%;
        height: 100%;
        display: block;
        float: left;
        clear: none;
        background-color: white;
        padding: 3em;
    }
    
    
    
    .map{
           width: 100%;
        height: 100%;
        display: block;
        float: left;
        clear: none;
        padding: 3em;
        background-color: white'
    }
    
    
    
    
    .contactform{
        width: 100%;
        height: 100%;
        display: block;
        float: left;
        clear: none;
        background-color: white;
        padding: 3em;
    }
    
    
    
    
    .contact-container .fi-contact{
        height: 2em;
        width: auto;
        display: block;
        float: left;
        clear: both;
        color: #fff;
        font-family: 'Montserrat', sans-serif;
        margin: 1em 0;
    }
    
    .contact-container .fi-contact i{
        font-size: 2em;
        margin-right: .5em;
        cursor: pointer;
        transition: all .4s;
        opacity: 1;
        color: #cd9670;
        transform-origin: center;
        text-align: left;
        margin: .5em 0;
    }
    
    .contact-container .fi-contact i span{
          font-family: 'Montserrat', sans-serif;
          color: #000;
          font-size: .6em;
          margin-left: 1em;
          font-weight: 500;
          letter-spacing: .5px;
    }
    
    

    
    
    
    
    
    
    
    
	
	
}