@import url('https://fonts.googleapis.com/css2?family=Lusitana:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

 * {
     box-sizing: border-box;
}
 html,body{
     width:100%;
     height:100%;
     margin:0px;
     padding:0px;
     font-family: "Roboto", sans-serif;
     //overflow: hidden;
}
 a {
    text-decoration:none;
    color:#555;
}
 a:hover {
    color:#557;
}
 header {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    z-index:44;
    height:85px;
    font-family: 'Open Sans';
     background-color: #000;
     border-bottom: 2px solid #555;
    text-align:left;
     color:#fff;
}
 header h1 {
     color: #aaa;
     font-size: 1.5vw;
     text-align: center;
     margin: 15px;
     text-transform: uppercase;
     font-weight: normal;
     letter-spacing: .7em;
}
 header h1 a {
    color:#eee;
}
 header img {
     height: 50px;
     margin: 0px;
     width: auto;
}
 section#hero {
     position: absolute;
     top: 80px;
     left: 0px;
     width: 100%;
     height: 475px;
     background-color: #000;
     background-image: url(../images/banner.jpg);
     background-repeat: repeat-x;
     padding: 50px 0px;
     margin: 0px;
}
 #hero div#title {
     font-size: 4vw;
     font-family: "Lusitana", serif;
     color: #fff;
     padding: 10px 50px 0px 50px;
     display: block;
     z-index: 4;
     width: 80%;
     text-shadow: 3px 3px 8px #000;
}
 div#stitle {
     color: #fff;
     padding: 0px 70px;
     width: 80%;
     font-size: 2vw;
     bottom: 100px;
     z-index: 4;
     text-shadow: 3px 3px 2px #000;
}
 section#main {
     position: absolute;
     top: 493px;
     background-color: #fff;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     margin-bottom: 70px;
}
 main {
    position:absolute;
    top:35px;
    left:0px;
    margin:2rem 3rem;
    padding:2rem;
}
 span.dropcaps {
    font-size:5.4rem;
    font-family: "Lusitana", serif;
    float:left;
    font-weight:bold;
    line-height:2rem;
    padding-top:-10px;
}
 #main section#nav {
     flex-basis:36%;
    padding:.5rem 1rem .5rem 2rem;
    font-size:1.17rem;
     color:#000;
    line-height:1.6rem;
}
 #main section#themes {
    text-align:center;
     flex-basis:60%;
}
 #main section#about {
    text-align:center;
     flex-basis:100%;
    font-size:.88rem;
    padding:1rem;
    margin-bottom:77px;
}
 div#theflex {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
     align-items: baseline;
}
 div#theflex div.thea {
     color: #555;
     width: 39%;
     margin: 1rem;
}
 div.thea img {
     width: 100%;
     padding: 0px;
     margin: 0px;
}
 p.ti {
    font-weight:bold;
    text-align:center;
}
 footer {
     position:fixed;
     margin-top: 5.4rem;
     z-index:4;
     bottom: 0px;
     left: 0px;
     background-color: #333;
     z-index: 2;
     height: 30px;
     width:100%;
     padding: 10px 0px;
     text-align: center;
     border: 0px solid red;
     color: #fff;
}
 footer img {
    height:15px;
}
 h2 {
     margin-bottom:0rem;
    padding-bottom:.1rem;
}
 span.dropcaps {
    font-size:4rem;
    font-family:verdana;
    float:left;
    font-weight:bold;
    line-height:2rem;
    padding-top:-10px;
}
 a.thb {
     width:56%;
    padding:1rem;
    border:0px solid #ccc;
    display:inline-block;
    vertical-align:middle;
}
 a.thb img {
    width:100%;
}
 div.tests div.thb {
    width:34%;
    padding:1rem;
    border:1px solid #ccc;
    display:inline-block;
    vertical-align:top;
    margin:1rem;
}
 div.thb a img {
    width:100%;
}
 div.blurb {
     margin: 0rem 3rem;
     padding: 30px 60px 40px;
     position: relative;
     color:#444;
     font-family:serif;
     font-size:1.1rem;
     border:0px solid red;
}
 .blurb:before {
     position: absolute;
     font-family: 'Sans-Serif';
     top: -20px;
     left:35px;
     content: "\201C";
     font-size: 220px;
     color: rgba(0, 0, 0, 0.1);
}
 p.byl {
    margin-left:2rem;
    font-size:.9rem;
    font-family: 'Open Sans';
}
 div.test {
    margin: 1rem 2rem;
    border:1px solid #555;
    border-radius:1rem;
    padding:1rem 2rem;
    position:relative;
    width:100%;
}
 p.bg {
    position:absolute;
    top:14%;
    left:20%;
    width:70%;
    z-index:5;
    border:0px solid #555;
    border-radius:1rem;
    padding:.4rem .7rem;
    background-color:rgba(255,255,255,.8)
}
/**** MOBILE *****/
 @media screen and (max-width: 1025px) {
	
	header {
		height: 70px;
	}
	header h1 {
		font-size: .72rem;
	}
	
	header img {
		display:none;
		height: 35px;
	}
	
	main {
		top: 75px;
		left: 0px;
		margin: 0rem;
		padding: .1rem 1rem;
	}
	
	a.thb {
		width: 56%;
		padding: 1rem;
	}
	
	div.test {
		margin: 1rem .5rem;
		border: 1px solid #555;
		border-radius: 1rem;
		padding: .7rem;
		position: relative;
		width: 100%;
	}
	
	div.tests div.thb {
		width: 84%;
	}
	
	#objs div.test div.thb {
		width: 84%;
		padding: 1rem;
	}
	
	div.test center img {max-width:100%;}
	
	div.blurb {
		margin: 0rem 1rem;
		padding: 3px 6px 4px;
		position: relative;
		color: #444;
		font-family: serif;
		font-size: 1.1rem;
		border: 0px solid red;
	}
	
	.blurb:before {
		top: -40px;
		left: -35px;
	}
	
	
     #main section#nav {
         flex-basis:100%;
    }
     #main section#themes {
         flex-basis:100%;
    }
     footer {
         display:none;
    }
     section#hero {
         position: absolute;
         top: 57px;
         height:350px;
		 background-size: cover;
    }
     #hero div#title {
         font-size: 2rem;
        width:90%;
        padding:0px 1rem;
        text-align: left;
    }
     #hero div#stitle {
         font-size: 1.32rem;
        width:90%;
        padding:0px 1rem;
    }
	
	p.bg {
		position: relative;
		width: 100%;
		top: 0%; 
		left: 0%;
	}
	
     #hero div#ban {
         display:none;
         top: 0px;
         right:auto;
         opacity: 40%;
    }
     div#intro {
         top: 433px;
         height: 140px;
    }
     div#intro {
         top: 433px;
         height: 140px;
    }
     div#theflex div.thea {
         width: 100%;
    }
     div.thea h3 {
         font-size: 1rem;
    }
     header nav ul li a {
         font-size: 1.22rem;
    }
     div#intro a.btn {
         width: 90%;
    }
     section#main {
         top: 350px;
    }
}