/* Set scroll movement to navigation links */
html {
  scroll-behavior: smooth;
}


/* General styles */
h1 {
	font-size:1.75em;
	color: #808080;
	text-align: center;
	text-transform: uppercase;
	padding: 2em 0 0em 0;
}

h2 {
	font-size:1.5em;
	color: #A9A9A9;
	text-align: center;
	padding: 0em 0 0em 0;
}

h3 {
	font-size:1.15em;
	color: #808080;
	text-align: center;
	text-transform: uppercase;
	padding: 1.5em 0 .75em 0;
}

p{
	font-size: 1em;
	color: #808080;
	line-height: 1.75em;
}

label {
	color:#808080;
	font-weight:bold;
	margin:1.75em 0 0 0;
	padding:0 0 .25em 0;
}

sup {
	font-size:.5em;
}

.form-control {
	font-size:.75em;
}

.form-text {
	
}

.btn {
	margin:2em 0 3em 0;
	font-size:.75em;
	font-weight:bold;
	color:#ffffff;
}

.card-title {
	color: #808080;
}

.right {
	float: right;
}

.left {
	float: left;
}

.center {
	text-align: center;
}

.divcenter {
	margin: auto;
	width: 50%;
}

.fullwidth {
	width: 100%;
}

#top {
    height: 45em;
    background: url('../img/webdevguybanner.jpg') no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.logonav {
	padding-top: 1em;
}

a.logolink {
	text-decoration: none;
	color: #ff0000 !important;
	font-size: 1.25em;
	font-weight: bold;
	text-transform: initial;
}
a.sectionlink:link {
	color:#ffffff !important;	
}
a.sectionlink:hover {
	color:#ff0000 !important;
}


.tld {
    font-size: .65em;
	font-weight: bold;
    margin: 0;
}



#caption {
	margin: 8em -1em 0 75em;
	padding:1em 2em 0 .25em;
	background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
	box-shadow: .25em .25em #DCDCDC;
	height: auto;
	float: right;
	width:100%;
}

#caption h1 {
    font-size: 1.75em;
    color: #fff;
    text-transform: uppercase;
	padding:0 0 0 1em;
	border:0px solid black;
	text-align:left;
}	
	
#caption h2 {
    font-weight: normal;
    font-size: 1.25em;
    color: #fff;
	border:0px solid green;
	padding:.25em 0 1em 1em;
	text-align:left;
}


#services {
	min-height: 38em;
}

#slogan {
	min-height: 12em;
	margin: 1em 0 2em 0;
	padding:1.75em 1.5em 1em 1.5em;
	background-image: url('../img/code.png')
}

#slogan h1 {
	color: #505050;
	font-size:1em;
	line-height:1.5em;
	font-weight:bold;
	padding-top:1.25em;
}

#samples {
	background-color:#f2f2f2;
	min-height:65em;
}

#about {
	background-color: #fff;
	min-height: 38em;
}

#connect {
	background-color: #f2f2f2;
	min-height:28em;
	margin:2em 0 1em 0;
}



/* Media queries lg */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
.btn {
	margin:1em 0 3em 0;
}

	#slogan h1 {
	font-size:1.1em;
	padding:1.5em .25em 0 .25em;
	color:#505050;
}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
	#slogan h1 {
	font-size:1.25em;
	line-height:1.5em;
	font-weight:bold;
	padding:.5em .25em 0 .25em;
	color:#505050;
}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	#caption {
	margin: 8em -1em 0 75em;
	padding:1em 0 0 .25em;
	background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
	box-shadow: .25em .25em #DCDCDC;
	height: auto;
	float: right;
	width:85%;	
}
	#slogan h1 {
	font-size:1.5em;
	line-height:1.5em;
	font-weight:bold;
	padding:.75em .25em 0 .25em;
	color:#505050;
}
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	
	#slogan h1 {
	font-size:1.65em;
	line-height:1.5em;
	font-weight:bold;
	padding:1em .25em 0 .25em;
	color:#505050;
}
}