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

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,body,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

html{ padding:0; font-family: sans-serif; overflow-y: scroll; }

body{
    background-color: #dae4d5;
    /*--code needs cleaned up, just for testing right now--*/   
    background-image: url("../images/mountain_background.jpg");
    background-position: bottom;
    background-size: auto;
    background-repeat: no-repeat;
    /*-- --*/
}

a{ text-decoration:none; }

.header{
    overflow:hidden;
    padding:10px 0px 0 10px;
}

.logo{
    height:auto;
    float:left;
    margin:0 0 0 0;
}

.logo img{
    width:100px;
    max-width:100%;
    height:auto;
}
        
h1{
    font: bold 32pt 'Raleway', sans-serif; 
    float:left;
    margin: 0 0 0 10px;
    padding:0 0 15px 0;
}

header a{ 
	float:right;
	font: normal 16pt 'Raleway', sans-serif;
	color:#73D700;
}


/*--NAV--*/
.nav{
    opacity: 0.7;
}

span {
  padding : 10px;
  background : #709062; 
  cursor : pointer;
  display: block;
  font: bold 12pt 'Raleway', sans-serif;
}

span::after {
  float: right;
  right: 10%;
  content: "";
}

nav {
  background: #81a273;
}

.slide {
  clear:both;
  width:100%;
  height:0px;
  overflow: hidden;
  transition: height .4s ease;
}

/*--each li is a link in the nav, height is 40 total--*/
.slide li {
    height:20px; 
    padding:10px 0 10px 15px; 
    font: bold 18px 'Raleway', sans-serif; 
    color:#000000;
    border-bottom:2px solid #69895b;
    }

.slide li:hover{background-color: #709062;}

#touch {position: absolute; opacity: 0; height: 0px;}    

/*-- increase this by 40+add 2 px for every link for border for every link in nav--*/
#touch:checked + .slide {height: 125px;} 


/*--CONTENT--*/
.content{
    padding:50px 0 50px 50px;
    overflow:hidden;
}

.contenttextandimage{
    overflow:hidden;   
}

.contenttext{
    float:left;
    margin:30px 0 0 0;
    overflow:hidden;
    width:65%;
}

.contentimage{
    float:left;
    margin:30px 0 0 30px;
}

.contentbutton{
    float:left;
    width:400px;
    height:200px;
}

.contentbuttonbtn{
    background:#81a273;
    color:#000000;
    padding:30px;
    border-radius:10px;
    font: bold 14pt 'Raleway', sans-serif;
    border:2px solid #69895b;
    float:left;
}

.contentbuttonbtn:hover{
    background:#709062;
}

.mainicon{
    background: url("../images/webicon.png");    
    width:350px;
    height:247px;
}

.websitesicon{
    background: url("../images/webcodeicon.png");
    width:350px;
    height:256px;
}

.appsicon{
    background: url("../images/appsicon.png");
    height:314px;
}

h2{
   font: bold 55pt 'Raleway', sans-serif;
   text-shadow: 2px 2px 4px #81a273;
}

h2 a{
    color:#000000;
}

h3{ font: normal 16pt 'Raleway', sans-serif; }

.contenthome h3{ font: normal 14pt 'Raleway', sans-serif; }

h4{ font: normal 14pt 'Raleway', sans-serif; }



/*--LINKS--*/
.links{
	margin:0 0 0 30px;
}


.list-links{
	margin:20px 0 20px 0;
}

.list-links ul li{
	margin:0 0 10px 0;
}


/*--CONTACT--*/
.contactform{
	width:500px;
    margin:30px 0 0 0;
}

.formfield{
    display:block;
    margin:0 0 30px 0;
}

.contactform input, .contactform textarea{
	width:375px;
	border:solid 1px #999999;
	padding:5px 10px;
}

.forminfotype{
    float:left;
    width:100px;
}

.contactform textarea{ 
    height:150px; 
    resize:none; 
    float:left;
}

.contactform .submitbtn{
	background:#81a273;
	width:502px;
	font: normal 16pt 'Oswald', sans-serif;
	border:2px solid #69895b;
    border-radius: 25px;
    margin:30px 0 0 0;
    }

.contactform .submitbtn:hover{
	background:#709062;
    cursor: pointer;
}

.contactinfo{
	float:left;
	width:500px;
	margin:0 0 0 100px;
}

.ci,.ci a{
	font: normal 20pt 'Raleway', sans-serif;
	color:#000000;
	margin:0 0 20px 0;
}

.contactform #password{margin:0 0 5px 0;}

.checkbox{ font: normal 10pt 'Raleway', sans-serif; }

.checkbox input{
    float:left; 
    width:15px; 
    margin:0 5px 20px 0;
}

.captcha{
    margin:20px 0 0 0;
    float:left;
}

/*--FOOTER--*/
footer{
	padding:20px;
	overflow:hidden;
	text-align:center;
    color:#989898;
    margin:54px 0 0 0;
}

footer a{ color:#989898; }

footer a:hover{ color:#888888; }




/*--STRAVA--*/
.weekly{
    display:block;
    margin:10px 0 10px 0;
}


/*--LOGIN--*/
.error{
    margin:0 0 10px 0;
    font: normal 10pt 'Raleway', sans-serif; 
    color:#FF00A0;
}


/*--WEBSITES--*/
.website{
    float:left;
    width:300px;
    border:solid #000000;
    border-radius:10px;
    margin:30px 30px 0 0;
    padding:20px 0 25px 25px;
    }
    
.websitetitle{
    font: bold 24pt 'Raleway', sans-serif;
}

.websiteimage{
    background:#444444;
    margin:25px 0 25px 0;
}

.iunion{
    background: url("../images/iUnionLogo.png");
    width:275px;
    height:261px;  
}

.westpennbbq{
    background: url("../images/WestPennBBQlogo.png");
    width:275px;
    height:261px;  
}

.centurytours{
    background: url("../images/20thCenturyTourLogo.png");
    width:275px;
    height:261px;  
}

.blakelytile{
    background: url("../images/blakelytile&marblelogo.png");
    width:275px;
    height:225px;  
}

.websitedesc{
    width:275px;
    margin:0 0 25px 0;
}

.websitevisit{
	background:#81a273;
	font: bold 16pt 'Raleway', sans-serif;
	border:2px solid #69895b;
    border-radius: 25px;
    margin:30px 0 0 0;
    padding:5px 30px 5px 30px;
    color:#000000;
}

.websitevisit:hover{
	background:#709062;
    cursor: pointer;
}