@media print {
	  body{
	  	background-color: #fff;
	  }
	}
	
	@media (orientation: portrait) {
	}
		
	body{
		font-family: "Helvetica Neue", Helvetica, arial, sans-serif;
		background-color: #333;
		color: white;
		text-shadow: 0px 0px 7px #000;
	}
	
	#intro{
		 background-image: url('img/IMG_0680.jpg');
		 background-size: cover;
		 background-repeat: no-repeat;
		 background-position: left top;
	}
	
	button{
		text-shadow: 0px 0px 7px #000;
		box-shadow: 0px 0px 1px #ccc;
	}
	
	.slide img{
		box-shadow: 0px 0px 7px #000;
		max-width: 100%;
	}
	
	.slide{
		vertical-align: top;
	}
	
	.h-bg{
		background: rgba(0, 0, 0, 0.5);
		border-radius: 5px;
		display: inline-block;
		padding: 5px;
	}
	
/* Style for our header texts
	* --------------------------------------- */
	h1{
		font-size: 3em;
		margin:0;
		padding:0;
		font-weight: 200;
	}
	h2{
		font-size: 2em;
		font-weight: 100;
	}
	hr{
		background-color: white;
		margin: 0 10px;
		height: 1px;
		border: none;
	}
	/* Centered texts in each section
	* --------------------------------------- */
	.section{
		text-align:center;
	}
	
	.two_cols{
		width: 40%;
		vertical-align: top;
		margin: 5%;
	}
	/* Backgrounds will cover all the section
	* --------------------------------------- */
	.section{
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		width: 100%;
	}
	.slide{
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		width: 100%;
	}
	
	/*move navigation arrows because of navigation dots*/
	
	.fp-controlArrow.fp-prev {
		width: 50px;
		height: 50px;
	    left: 60px;
	    border-width: 2px;
	    border-color: transparent transparent #fff #fff;
	    transform: rotate(45deg);	
	    }
	    
	.fp-controlArrow.fp-next {
		width: 50px;
		height: 50px;
	    right: 60px;
	    border-width: 2px;
	    border-color: #fff #fff transparent transparent;
	    transform: rotate(45deg);
	}
	
	.fp-controlArrow{
		opacity: 0.7;
		transition: all 1s;
	}
	.fp-controlArrow:hover{
		opacity: 1;
	}
	
	#fp-nav ul li a span{
		background: rgba(255, 255, 255, 1) ;
	}
	
	hr{
		background-color: #52afe8;
		margin: 0 calc(20%);
	}
	#intro a{
		border: none;
	}
	.section a{
		color: white;
		border-bottom: 1px solid #fff;
		text-decoration: none;
		transition: all 0.2s;
	}
	.section a:hover{
		border-bottom: none;
		text-decoration: none;
	}
	
	.section a:active{
		border-bottom: 1px solid #fff;
		text-decoration: none;
	}	
	
	.section a:visited{
		opacity: 0.7;
		border-bottom: 0px;
	}
	
	button{
		padding: 8px 12px ;
		background: none;
		border: 2px solid #52afe8;
		border-radius: 5px;
		color: white;
		font-size: 2em;
		font-weight: 200;
		font-family: inherit;
		cursor: pointer;
		transition: all 0.3s;
	}
	
	button:hover{
		background: #52afe8;
		border: 2px solid #fff;
	}
	
	button:after:hover{
		text-shadow: none;
	}
		
		
	@media (max-width: 640px) {
		body{
			background: #640;
		}
		h1{
			font-size: 1.5em;
		}
		h2{
			font-size: 1.1em;
		}
		button{
			font-size: 1.1em;
		}
		#fp-nav{
			visibility: hidden;
		}
		#intro{
			background-position: center;
		}
		.fp-controlArrow.fp-prev, .fp-controlArrow.fp-next {
			width: 30px;
			height: 30px;
		}
		.fp-controlArrow.fp-prev {
			left: 10px;
		}
		.fp-controlArrow.fp-next {
			right: 10px;
		}
		#07_ccfinder.slide{
			background-position: left;
		}
	}
	
	@media (max-width: 1024px) and (min-width: 641px) {
		body{
			background: #124;
		}
		h1{
			font-size: 2em;
		}
		h2{
			font-size: 1.4em;
		}
		button{
			font-size: 1.4em;
		}
		#intro{
			background-position: center;
		}
		.fp-controlArrow.fp-prev, .fp-controlArrow.fp-next {
			width: 30px;
			height: 30px;
		}
		#ccfinder .slide{
			background-position: right;
		}
	}
	
	/*make repsonsive animate*/
	
	*{
		transition: all 0.2s;
	}