* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}


/*-----------------------------------------------------*/


body { 
	font-family: helvetica, arial, sans-serif; 
	font-size: 14px; 
	background-color: #e2e2e2;
	} 	
body, html { 
	margin: 0px; 
	}
	
	
.clear { clear: both;
	}
	
/*-----------------------------------------------------*/
	

header {
	margin: 0 auto;
	width: 100%;
	background-color: #fff;
	padding: 25px 0px;
	}
	
.logo {
	margin: 0 auto;
	display:block;
	text-align: center;
	font-size: 40px;
	width: 40%;
	}
	
/*-----------------------------------------------------*/
	
	
#wrapper {
	width: 100%;
	margin: 0px auto;
	background-color: #fff;
	padding: 0px;
	}
	
/*-----------------------------------------------------*/
	
	
#menu {
	margin: 0 auto;
	width: 60%;
	height: 50px;
	background-color: none;
	text-align: center;
	border-bottom: 5px solid #000; 
	}
#menu ul { 
    display: inline-block;
 	padding-left: 0px;
	padding-top: 0px;
	font-size: 14px; 
	font-weight: bold;
	list-style-type: none;
	text-transform: uppercase;
	}
#menu ul a { 
	color: #000000;
	text-decoration: none;
	}
#menu ul a:visited { 
	color: #000000;
	text-decoration: none;
	}
#menu ul a:hover { 
	color: #64C9EA;
	}
#menu li { 
	display: inline; 
	text-align: center;
	}
	
	
/*-----------------------------------------------------*/	
	
	
a:link { 
	color: #000000;
	text-decoration: none;
	}
a:visited { 
	color: #000000;
	text-decoration: none;
	}
a:hover { 
	color: #64C9EA;
	}
a:active { 
	color: #64C9EA;
	}	
	

/*-----------------------------------------------------*/
	
	
h1 { 
	font-size: 60px; 
	padding-top: 25px; 
	} 

	
/*-----------------------------------------------------*/


	
.slide-container {
	width: 100%;
	height: 400px;
	position: relative;
	padding: 50px 0 50px 0;
	font-size: 18px; 
	}
	
.slide-container p {
	font-size: 12px; 
	}	
.slide-container h1 {
	font-size: 30px; 
	font-weight: bold;
	}
	
.slide-text {
	float: left;
	width: 50%;
	margin: 25px 0 0 25px;
}

.slide-image {
  width: 300px;
  height: 300px;
  margin: 0px 0 0 75px;
  float: left;
  }	
		
.slide-image-01 { background-image: url('images/slide-01.png'); background-repeat: no-repeat; }
.slide-01 {background-color: #c4e16c;}

.slide-image-02 { background-image: url('images/slide-02.png'); background-repeat: no-repeat;}
.slide-02 {background-color: #c4e16c; background-image: url('images/background-lime.png'); background-repeat: repeat;}

.slide-image-03 { background-image: url('images/slide-03.png'); background-repeat: no-repeat;}
.slide-03 {background-color: #AFEEEE;}

.slide-image-04 { background-image: url('images/slide-01.png'); background-repeat: no-repeat;}
.slide-04 {background-color: #ff9900; background-image: url('images/background-orange.png'); background-repeat: repeat;}

.slide-image-05 { background-image: url('images/slide-01.png'); background-repeat: no-repeat;}
.slide-05 {background-color: #FFA500;}

.slide-image-06 { background-image: url('images/slide-02.png'); background-repeat: no-repeat;}
.slide-06 {background-color: #fff; background-image: url('images/background-block-red.png'); background-repeat: no-repeat; margin: 0 auto;}

.slide-image-07 { background-image: url('images/slide-03.png'); background-repeat: no-repeat;}
.slide-07 {background-color: #fff; background-image: url('images/background-block-orange.png'); background-repeat: no-repeat; margin: 0 auto;}

.slide-image-08 { background-image: url('images/slide-01.png'); background-repeat: no-repeat;}
.slide-08 {background-color: #fff; background-image: url('images/background-block-lime.png'); background-repeat: no-repeat; margin: 0 auto;}


.slide-image-09 { background-image: url('images/slide-02.png'); background-repeat: no-repeat;}
.slide-09 {background-color: #fff; background-image: url('images/background-block-cyan.png'); background-repeat: no-repeat; margin: 0 auto;}



/*-----------------------------------------------------*/

#footer {
	width: 100%;
	height: 200px;
	display: block;
	margin: 0 auto;
	background-color: #333333;
	}

#footer p {
	font-size: 30px; 
	font-family: "Courier new";
	text-align: right;
	color: #FFA500;
	}
	
.footer-text {
	float: right;
	margin: 50px 50px 0 0;
	}







/* Responsive Design
------------------------------------------------------------ */

@media only screen and (max-width: 1200px) 
{
#wrap {	width: 960px;}
}

@media only screen and (max-width: 1023px) 
{
body { 	border-left: none;	margin-left:0px; padding-left: 0px; }
.menu {width: 60%;}
.slide-text-right {margin-left: 350px;}
	
	
}

@media only screen and (max-width: 767px) 
{
.menu {width: 80%;}
.slide-text-right {clear: both; margin-left: 50px;}

}

@media only screen and (max-width: 480px) 
{
#menu {width: 100%;}

.slide-container {
	padding: 50px 0 50px 0;
	}
	
.slide-text {
	clear: both;
	width: 95%;
	margin: 10px 10px 10px 10px;
	background-color: #fff;
}

.slide-image {
	width: 100%;
	margin: 0 auto;
  }

}