@charset "UTF-8";
/* CSS Document */

/*GENERAL STYLES*/

* {margin:0; padding:0; color:grey; }
body {font-family:Raleway, sans-serif; }
ul {list-style: none;  }
a {text-decoration:none; color:grey; font-size:14px;  }
a:hover {color:red; background-color: cadetblue; }
.wrapper {width:100%; margin:0px auto; }
h2 {text-align: center; padding-bottom: 50px; }
h3 {padding: 30px 0 0 0; }
strong {color: cadetblue; }

/*MAIN STYLES*/



/*HEADER STYLES*/

.header {background-color: #000; height: 100px; position: fixed; width: 100%; z-index: 9;}
.logo {float: left; padding: 40px;}
.nav {float: right; }
li {float: left;  margin-top: 40px; }
li a {padding: 42px 20px; }

        @media(min-width: 801px) { 
            ul {display: block;} 
            #menu-icon {display: none;  }  
        }

        @media(max-width: 800px) { 
            #menu-icon {display: block; font-size: 2.5em; padding: 20px 30px; }
            #menu-icon:hover {background-color: #000; text-decoration: none;}
            
            ul {display: none;  position: absolute; right: 30%; background-color: black;  text-align: center; align-content: center; }
            li {float: none; margin-top: 30px; } 
            li a{padding: 20px 20px; } 
            .header {min-height: ;} 
            .col-sm-4 {border: #ddd 1px solid; margin-bottom: 20px;}
            .offer-wrap { margin: 0px auto 0px; }
        }

/*SLIDER STYLES*/

.slider img {width: 100%; margin-top: 100px; }



/*OFFER STYLES*/

.offer-wrap {width: 85%;  margin: 100px auto 50px;  z-index: 2;}
.offer-block {float: left; width: 46%; min-height: 600px; margin: 0 1%; border: 1px solid #eee; z-index: 3; position: relative; }

.col-sm-4 img { width: 100%; margin: 40px auto;}
.col-sm-4 h4 { padding: 20px 0; }

/*FOOTER STYLES*/
.footer {width: 100%; min-height: 100px; background-color: cadetblue;  }
.footer p {color: #fff; text-align: center; padding: 20px;}