@charset "UTF-8";
/* CSS Document */

html, body { height: 100%; }

body { text-align: center; background-color:#869edf; background-image:url(img/back-pattern.png); background-repeat: repeat;  margin:0px; }

* { box-sizing: border-box;}

img { max-width: 100%; height: auto;}

#container { position: relative; width: 80%; margin: 0 auto; z-index:1; }
#chrisbio { clear: both; float: left; text-align: justify; width:50%; font-family: 'Roboto', sans-serif; color:#000066; font-size: 16px; margin-bottom: 40px; padding-right: 20px;}
#geribio { float: left; text-align: justify; width:50%; font-family: 'Roboto', sans-serif; color:#000066; font-size: 16px; margin-bottom: 40px; padding-right: 20px;}

.logo { margin-top: 40px;}
.logo img { max-width:80%; height: auto; }

.intro { clear: both; font-family: 'Barriecito', 'Roboto', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif"; color:#000066; font-size: 60px; margin: 40px 0px 40px 0px;}

.socialmedia { clear: both; margin-bottom: 80px;}
.socialmedia img { max-width:20%; height: auto; }

.heading2 {font-size: 24px; font-weight: bold; }
.spacebelow { padding-bottom: 20px;}
.spaceme { padding-left: 20px; padding-right: 20px; }

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
a { color:#fff; text-decoration:none; }
.intro { font-size: 40px;}
#chrisbio { clear: both; width:100%; }
#geribio { clear: both; width:100%; }
.socialmedia img { max-width:30%; height: auto; }
}


/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
a { color:#fff; text-decoration:none; }
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
a { color:#fff; text-decoration:none; }
a:hover { color:#000066; }
.logo img { max-width:50%; height: auto; }
.socialmedia img { max-width:10%; height: auto; }
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1920px) {
/* Styles */
a { color:#fff; text-decoration:none; }
a:hover { color:#000066; }
.logo img { max-width:40%; height: auto; }
.socialmedia img { max-width:7%; height: auto; }	
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
a { color:#fff; text-decoration:none; }
}