@import url('https://fonts.googleapis.com/css?family=Crimson+Text:400,400i');

html {
	height: 100%;
	font-size: 40px;
	font-family: 'Crimson Text', serif;
	color: beige;
}


body {
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	box-sizing:border-box;
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}


.container, .container2, .container3 {
	position: relative;
	height: 100%;
	border-style: solid;
	border-width: 1rem;
	border-color: beige;
	box-sizing: border-box;
}

.container {
	background-image: url(george.jpg);
	background-size: cover;
	background-position: 0px -1.5rem;
}

.container2 {
	background-image: url(john.jpg);
	background-size: cover;
	background-position: 0px -1.5rem;
}

.container3 {
	background-image: url(thomas.jpg);
	background-size: cover;
	background-position: 0px -1.5rem;
}

.click {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	cursor: pointer;
}

p {
	margin-left: 55%;
	margin-top: 100px;
	font-size: 38px;
}

p span {
	font-size: 30px;
}

@media screen and (max-width: 1080px) {
    .container {
        background-position: 0px 0rem;
    }

    .container2 {
        background-position: 0px 0.2rem;
    }
}

@media screen and (max-width: 580px) {
    .container {
        background-position: -2.5rem 0rem;
    }

    .container2 {
    	background-position: -2rem 0rem;
    }

    .container3 {
    	background-position: -3.8rem 0rem;
    }

    p {
    	font-size: 22px;
    	margin-left: 0.5rem;
    	margin-top: 1rem;
    }

    p span {
    	font-size: 15px;
    }

    #tj-text {
    	margin-left: 1rem;
    	margin-top: 12rem;
    }
}