@import url('https://fonts.googleapis.com/css?family=Montserrat');


html {
        background-color: #ffffff;
		}

body {
         background-color: #ffffff; 
         margin: 5px 40px 10px 70px;
         font-family:  'Montserrat';
         font-size: .9em;

        }
    h2 {
        font-size: 1.1em;
        font-style: bold;
    }
    
      h3 {
        font-size: 1.3em;
        font-style: bold;
    }
    .head .logo{
        margin-left: 4%;
        //float: left;
        
    }
    .head  {
        display: inline;
        text-decoration: none;
        list-style-type: none;
        color:#8b9190;
        text-align: center;
    }
    .nav  {
        margin-right:5%;
        float:right;
        text-decoration: none;
        list-style-type: none;
        color:#8b9190;
        text-align: center;

    }
    .nav li {
        font-size: 1.2em;
    }

    .head .nav a{
        text-decoration: none;
        color:#8b9190;
    }
    
      .nav li:hover >a{
          color: #666564;
          border-bottom: double;
         -webkit-transition: all ease 0.7s;
         -moz-transition: all ease 0.7s;
          transition: all ease 0.5s ;
    }
    
    #mainhero img{
        margin-left: 5%;
        padding-top: 2%;
        padding-bottom: 4%;
        width:90%;
        height: auto;
        -webkit-transition: color 400ms ease-in;
        -moz-transition: color 400ms ease-in;
        transition: color 400ms ease-in;
    }


    
        #mainhero2 img{
        margin-left: 5%;
        padding-top: 2%;
        padding-bottom: 2%;
        width:90%;
        height: auto;
        -webkit-transition: color 400ms ease-in;
        -moz-transition: color 400ms ease-in;
        transition: color 400ms ease-in;
    }
    
    
.back-to-top {
      background: none;
      margin: 0;
      position: fixed;
      bottom: 0;
      right: 3%;
      z-index: auto;
      display: none;
      text-decoration: none;                                                                                               
    }
            
.back-to-top img{
      width:30%;
      height:auto;
    }
            
.whitetxtintro{
      margin-left: 5%;
      margin-right: 5%;
      padding-top: .5%;
      padding-bottom: 5%;

		}
.whitetxt{
      margin-left: 5%;
      margin-right: 5%;
      padding-top: .5%;
		}
						
.crazyimages{
      margin-left: 5%;
      width:90%;
      height: auto;
		}
            
.logoimages{
      margin-left: 5%;
      margin-top: 2%;
      width:90%;
      height: auto;
		}
            
	/*gray boxes*/					
.pattern{
    padding-bottom: 5%;

}
.col-group > div {
      padding: 1em 1em 0;

}
  .col-group {
      margin-left: 5%;
      margin-right: 5%;
      background: #c4c2c1;
      overflow: hidden;
}
.col-group h2:hover {
      text-decoration: underline;
      color:#2e2e2d;
      font-size:1.3em;
      -webkit-transition: all ease 0.7s;
      -moz-transition: all ease 0.7s;
      transition: all ease 0.5s ;
}
@media screen and (min-width: 70em) {
  .col-group {
        margin-left: 5%;
        margin-right: 5%;
        background: #c4c2c1;
        overflow: hidden;
  } 
  .col-group > div {
        float: left;
        width: 30%;
  }
  }
  .box-groupr > div {
  		padding: 1em 1em 1em;
  		float: right;
  		width:50%;
  		margin-left: 5%;
        margin-right: 5%;
        background: #c4c2c1;     
  }
  .box-groupl > div {
  		padding: 1em 1em 1em;
  		float: left;
  		width:10%;
  		margin-left: 5%;
        margin-right: 5%;
        background: #ffffff;     
  }
  
}

#contacttxt h3{
      margin-left: 5%;
      text-align:left;
}

#contacttxt ul{
      margin-left: 2%;
      text-align:left;
}
.contactlist {
      text-decoration: none;
      list-style-type: none;
      padding-bottom: 5%;
}
.contactlist a{
      text-decoration: none;
      color: black;
}

.sweetfooter{
  padding:5%;
}

.sweetfooter p{
         font-size: .6em;

}
/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {


    .head .logo{
            float: left;
            #mainhero img{
              margin-left: 5%;
              padding-top: 2%;
              -webkit-transition: color 400ms ease-in;
              -moz-transition: color 400ms ease-in;
              transition: color 400ms ease-in;
              }       
    }
      .nav li {
            width: 150px;
            border-bottom: none;
            height: 0px;
            line-height: 30px;
            font-size: 1.2em;
            display:inline;
            padding-right:10px;     
            }
          .nav {													
              margin-top:50px;
              margin-left:100px;
              padding-left:12%;      
              }
          .head  {
      
          }
      }

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
        .nav li {
            width: 180px;
            border-bottom: none;
            height: 0px;
            line-height: 30px;
            font-size: 1.2em;
            display:inline;
            padding-right:10px;
            }
          .nav {
              margin-top:80px;
              margin-left:100px;
          }
          .head  {
      
          }
  }

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

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

					.head .logo{
							float: left;
							
					}  
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  

    .head .logo{
        float: left;
        
    }
          

}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  

					.head .logo{
							float: left;
							
					}  
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  

					.head .logo{
							float: left;
              background-color:red;							
					}
          .logo img{
            height:50%;
            width:50%;
          }
}