* {
    font-size:20px;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
    font-weight:900;
	line-height:1.5em;
	box-sizing: border-box;
}

html, body {
    height:100%;
    width:100%;
    padding:0;
    margin:0;
    min-width:400px;
	min-height:700px;
}

p {
	font-size:1em;
}

.wrap {
    height:100%;
    width:100%;
    position:relative;
    overflow:hidden;
    background:grey;
    color:white;
}


header {
	width:100%;
    height:7%;
    color:white;
	background: rgb(20, 20, 20);
	background: rgba(20, 20, 20, 0.8);
    position:absolute;
    top:0;
    left:0;
    z-index:900;
    width:100%;
    text-align:left;
    box-shadow: 0 1px 2px black;
}

header label {
    font-family: 'Raleway', Helvetica, Arial, sans-serif;
    height:100%;
	width:14%;
    color: lightgray;
    cursor:pointer;
	float:left;
    line-height: 2.0em;
    padding: 3px 5px;
    text-align:center;
	vertical-align:middle;
}

header label:hover {
    background:#fe1c10;
    opacity:0.8;
    color:black;
}

h1 {
    position:absolute;
    top:5%;
    right:5%;
    font-size: 2em;
    letter-spacing: -1px; 
	padding: 10px 0;
    text-shadow: 1px 1px 2px black;
}

h3 {
	font-size: 1.2em;
    letter-spacing: -1px;
	text-shadow: 1px 1px 2px black;
}

.slide h1, .slide .left {
    opacity:0;
    transform:translateY(100%);
    transition:transform .5s .5s, opacity .5s;
}


[id^="slide"]:checked + .slide h1 {
    opacity: 1;
    transform: translateY(0);
    transition: all 1s .5s;
}

[id^="slide"]:checked + .slide .left {
    opacity: 1;
    transform: translateY(0);
    transition: all .5s .5s;
}

.slide {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:100%;
    z-index: 10;
    background-color: white;
    background-position: 50% 50%;
    background-size:cover;
    transition: left 0s .75s;
	margin-bottom:20px;
}

.slide1 {
    background-image: url("images/pexels-photo-205421.jpeg");
}

.slide2 {
    background-image: url("images/pexels-photo-325229.jpeg");
}

.slide3 {
    background-image: url("images/pexels-photo-187107.jpeg");
}

.slide4 {
    background-image: url("images/pexels-photo-2.jpg");
}

.slide5 {
    background-image: url("images/mouse.jpg");
}

[id^="slide"]:checked + .slide {
    left:0;
    z-index:100;
    transition: left .6s ease-out;
}

.text {
    text-align:right;
    height:60%;
    color:white;
    position:absolute;
    top:20%;
    right:5%;
	left:5%;
    padding:30px 0;
	font-size: 1em;
}

.slide .text, .slide .right {
    opacity:1;
    transform:translateX(100%);
    transition:transform .5s .5s, opacity .5s;
}

[id^="slide"]:checked + .slide .text {
    opacity: 1;
    transform: translateX(0);
    transition:all .5s .5s;
}

[id^="slide"]:checked + .slide .right {
    transform: translateX(0);
    transition: all 1s .5s;
}

.check {
	right:0;
	margin-top:10px;
	padding:10px;
    box-shadow: 0 0 1px white;
    text-decoration:none;
    color:white;
    cursor:pointer;
    font-weight:bold;
    font-size:1.5em;
	letter-spacing: -1px;  
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.8);
	min-width:315px;
}

.check:hover {
    background-color:#fe1c10;
    opacity:0.8;
    color:black;
    box-shadow:0 0 2px black;
}

ul {
	padding:0;
    list-style-type:none;
}

ul li {
	color:white;
	font-weight:bold;
	font-size: 1em;
}

.full {
	left:5%;
	right:0;
    width:90%;
    text-align:right;
    height:60%;
    color:white;
    position:absolute;
	top:10%;
	
}

.left {
	margin-top:5%;
    float:left;
	padding-right:5%;
    width:50%;
}

.right {
	margin-top:5%;
    padding-left:2%;
	right:0;
    float:right;
    width:50%;
	text-align:right;
}

.slide4 .left {
	margin-top:15%;
}
.slide4 .right {
	margin-top:10%;
}

.thumbnail {
	width:80%;
	border:1px solid gray;
}

.right p {
	margin:0;
	padding:0;
	color:white;
	text-decoration:none;
	font-size:12px;
}

.website_slides {
	width:100%;
}

#button_left{
	left:4%;
}

#button_left,#button_right {
	box-shadow: 0 0 1px white;
	border:none;
	position:absolute;
	top:45%;
	width:50px;
	right:0;
    text-decoration:none;
    color:white;
    cursor:pointer;
	letter-spacing: -1px;  
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.8);
}

#button_left:hover, #button_right:hover {
    background-color:#fe1c10;
    opacity:0.8;
    color:black;
    box-shadow:0 0 2px black;
}
#slider {
	border:1px solid gray;
}

.caption_text {
	position:absolute;
	padding:5px;
	display:block;
	color:black;
	min-width:100px;
	text-align:center;
	background-color: white;
	text-decoration:none;
	font-size:0.8em;
	border: 1px solid gray;
}

@media only screen and (max-width: 1175px) {
	li {
		width=100%;
	}
	p {
		font-size:0.8em;
	}
}

@media only screen and (max-width: 940px) {
    header {
	}
	header label {
		line-height: 2.0em;
	}
}

@media only screen and (max-width: 740px) {
    header {
	}
	header label {
		width:20%;
	}
	.slide4 .full {
		left:0;
		width:100%;
	}
	.slide4 .left {
		top:20%;
		left:0;
	}
	.slide4 .right {
		right:0;
	}
	.slide4 .right, .slide4 .left {
		padding:0;
		margin:2% 0;
	}
}