/* i just have this here for testing purposes, please keep */
.border {border:1px solid #000;}

/* globally it seems that all white blocks with H2's have this blue text */
.block-white > h2 {color:#29abe1;}

a {
	text-decoration: none;
	color: white;
}

h2 {
	font-size: 1em;
	color: white;
	margin-top: 20px;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	line-height: 1.75em;
}

h3 {
	font-size: 3.5em;
	color: white;
	margin-top: 20px;
	text-align: center;
	font-family: 'Work Sans', sans-serif;
	letter-spacing: 1px;
	line-height: 1em;
}

.three-col > div > h3 {font-size: 1.75em;}

.four-col > div > ul > h3 {font-size: 1.5em;}

.bodycopy {font-size:1.75em;}

header {
    position: fixed;
    height: 110px;
    width: 100%;
	margin-right: auto;    
    margin-left: auto;
    min-width: 1200px; 
}

div.keeptogether {
    display: inline-block;
    width: 100%;
    text-align: center;
 }

.three-col {
       -moz-column-count: 3;
       -moz-column-gap: 20px;
       -webkit-column-count: 3;
       -webkit-column-gap: 20px;
		max-width: 100%;
		margin: 0 auto;
		padding: 5em 3em;
}

.four-col {
       -moz-column-count: 4;
       -moz-column-gap: 20px;
       -webkit-column-count: 4;
       -webkit-column-gap: 20px;
		margin: 0 auto;
		padding: 5em 3em;
}

.four-col-about {
       -moz-column-count: 4;
       -moz-column-gap: 20px;
       -webkit-column-count: 4;
       -webkit-column-gap: 20px;
		max-width: 100%;
		margin: 0 auto;
		padding: 5em 3em;
		text-align: center;
    	background: #3EBBCD;
		color: white;
}

.color-home {
	background: #29abe1;
	height: 165px;
	padding-right: 20px;
	max-width: 100%
}

.color-about {
	background: #3EBBCD;
	height: 165px;
	padding-right: 20px;
	max-width: 100%
}

.color-services {
	background: #53CBB9;
	height: 165px;
	padding-right: 20px;
	max-width: 100%
}

.color-contact {
	background: #64D8AA;
	height: 165px;
	padding-right: 20px;
	max-width: 100%
}

#logo {
    background: url(../imgs/GLMRI-Logo.png) no-repeat top left;
	height: 110px;
    width: 609px;
    float: left;
    margin: 5px;
} 

nav li {
    float: left;
    width: auto;
    font-family: 'Open Sans', sans-serif;
}

nav li a {
	position: relative;
	display: inline-block;
	margin: 55px 15px;
	outline: none;
	color: #fff;
	text-decoration: none;
	font-size: 1.25em;
}

nav ul {
    float: right;
    width: auto;
}   

/* NAV EFFECT */
.cl-effect-4 a {
	padding: 0 0 10px;
}

.cl-effect-4 a::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 1px;
	background: #fff;
	content: '';
	opacity: 0;
	-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
	transition: height 0.3s, opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.cl-effect-4 a:hover::after,
.cl-effect-4 a:focus::after {
	height: 5px;
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}
/* END NAV EFFECT */

#hero {
    background: #29abe1;
	text-align: center;
	overflow: visible;
    height: 275px;
    padding-top: 175px;
    background-size: cover;
}

#hero-about {
    background: #3EBBCD;
	text-align: center;
	overflow: visible;
    height: 275px;
    padding-top: 175px;
    background-size: cover;
}

#hero-services {
    background: #53CBB9;
	text-align: center;
	overflow: visible;
    height: 275px;
    padding-top: 175px;
    background-size: cover;
}

#hero-contact {
    background: #64D8AA;
	text-align: center;
	overflow: visible;
    height: 275px;
    padding-top: 175px;
    background-size: cover;
}

#hero img {
    width: 100%;
    border-radius: 50%;
    margin-top: 50px;
}

#hero h2 {
	font-size: 4em;
    font-family: 'Open Sans', sans-serif;
	padding-top: 75px;
}

.main-content {
	padding-top: 6em;
	padding-left: 5em;
	padding-right: 5em;
	margin-bottom: 3em;
}

section.main-content2 {
	height: 16em;
}

section.main-content2 > h2 > ul > a {
    background: #64D8AA;
    color: #fff;
    text-align: center;
    display: block;
    width: 85%;
    margin: 20px auto;
	padding: 1em 1em; 
    transition: all 0.3s ease 0s;
  	opacity: 1;
}
 
 section.main-content2 > h2 > ul:hover {
  opacity: 0.75;
}

body > section.block-img1 > img,
body > section.block-img2 > img,
body > section.block-img3 > img, 
body > section.block-img5 > img,
body > section.block-img6 > img,
body > section.block-img7 > img,
body > section.block-img8 > img
{width:100%; height:100%; margin-bottom: 0px}

.block-text {
	color: white;
	font-family: 'Open Sans', sans-serif;
	line-height: 1.75em;
}

.block {
	margin: 0 auto;
	padding: 10em 3em;
	text-align: center;
	background: #29abe1;
	color: white;
}

.block-white {
	margin: 0 auto;
	padding: 10em 3em;
	text-align: center;
}

.block-about {
	margin: 0 auto;
	padding: 10em 3em;
	text-align: center;
    background: #3EBBCD;
	color: white;
}

.block-services {
	margin: 0 auto;
	padding: 10em 3em;
	text-align: center;
    background: #53CBB9;
	color: white;
}

.block-contact {
	margin: 0 auto;
	padding: 10em 3em;
	text-align: center;
    background: #64D8AA;
	color: white;
}

.map {
	height: 450px;
}

.overlay {
   background:transparent; 
   position:relative; 
   height:450px; 
   top:450px;  
   margin-top:-450px;  
}

.fleft {
   float:left; 
   height: 12em;
   margin: 0 auto;
   padding: 8em 0;
   width: 50%;   
   background-color: #64D8AA;
	-webkit-transition: background .5s ease-in-out;
	-moz-transition: background .5s ease-in-out;
	-ms-transition: background .5s ease-in-out;
	-o-transition: background .5s ease-in-out;
	transition: background .5s ease-in-out;
}

.fleft:hover {
	background-color: #29abe1;	 
}

.fright {
   float:right; 
   height: 12em;
   margin: 0 auto;
   padding: 8em 0;
   width: 50%;   
   background-color: #3EBBCD;	
	-webkit-transition: background .5s ease-in-out;
	-moz-transition: background .5s ease-in-out;
	-ms-transition: background .5s ease-in-out;
	-o-transition: background .5s ease-in-out;
	transition: background .5s ease-in-out;
}

.fright:hover {
	background-color: #29abe1;	 
}

#footer {
    background: #fff;
    padding: 25px 0;
    overflow: hidden;
}

#footer li {
    padding: 20px;
	text-align: center;
}

#footer ul {
    max-width: 50%;
    margin: 0 auto;
}

#footer h2 {
    color: #29abe1;
}

/* Tablet */
@media only screen and (max-width:1000px) {
		
	body > header > section > nav > nav {
	position:absolute;
	margin-top: 65px;
	margin-left: 125px;
    }
    .main-content { padding:0px; height: 80%; margin-bottom: .25em;}
    .main-content > h3 {margin-top:0px; padding:2em 0em; line-height:1.25em;}
    .container { padding-bottom:0px; }

    #hero > object, 
    #hero-about > object,
    #hero-services > object,
	#hero-contact > object
    {
	height:80%; 
	margin-top: 35px;
	}
    
	li.fleft > h3 > a,
	li.fright > h3 > a {
	font-size: .75em;
	}

	.three-col > div > h3 {font-size: 1.5em;}

    /* closing up the gap above and below block elements when screen shrinks */
	/* .block {padding:3em 2em;}*/
    .block, .block-white {padding:2.5em 0em; width:100%; height: 100%;}
    
    body > section.block > h2,
    body > section.block-white > h2,    	

    #footer > h2 {
	font-size: 1em;		
	}

}


/* Mobile */
@media only screen and (max-width: 580px) {
	
	body > header > section > nav > nav {
    font-size: 70%;
    margin: 30px 35px;
	}
    
    /* 
    setting this to a fixed height can
    make long text run over and short 
    text look too airy    

	body > section {
	height: 100px;
	margin: 0 auto;
	}
	*/

	div > section > h3 {
    font-size: 1.75em;
	}
	
	body > section > h3, 
	.main-content > h3,
	section.block-white > a > h3 {
    font-size: 1.5em;
	}

	li.fleft > h3, 
	li.fleft > a > h3, 
	li.fright > h3, 
	li.fright > a > h3 {
    font-size: 1.5em;
	margin: 0 auto;
	}
	
	.fleft, .fright {
	height: 4em;
	padding: 5em 0;
	}
	
	.three-col > div > h3,
	.four-col > div > ul > h3 {
    font-size: 1em;
	}

	.three-col > div > h2 {
	font-size: .75em;
	line-height: 1.35em;
	}

	.main-content {
	padding-left: 5em;
	padding-right: 5em;
	height: 40%;
	margin-bottom: .5em;
	}

	.bodycopy {
	font-size: .8em;
	}

	#logo {
    background-size: 55%;  /* 586 x 110 */
	}

    #hero > object {
	height:45%; 
	}

	#hero-about > object {
	height:50%; 
	}

	#hero-services > object, #hero-contact > object {
	height:60%; 
	}

	.block-services, .block-contact, .block-about {
	margin: 0 auto;
	padding: 2em 3em;
	}

    /* All H2's font size global for 1000px */
    /* h2 {font-size:.8em;} */
    
    /* closing up the gap above and below block elements when screen shrinks */
    .block, .block-white {padding:2em 0em; width:100%;}
    
    body > section.block > h2,
    body > section.block-white > h2,
    section.block-services > h2,
    section.block-about > h2,
    .four-col > div > ul > h2
    { font-size:.8em }

    .four-col-about > div > h2 {
	font-size: .7em; 
	word-wrap: break-word; 
	word-break: break-word;
	overflow-wrap: -word;
  	}
    
    #footer > h2 {
	font-size: .75em;		
	}
}

/***********************************************************************************/
/*                                                                                 */
/*    ANYTHING FROM HERE ON DOWN OVERWRITES ANYTHING YOU PUT INTO A MEDIA QUERY    */
/*                                                                                 */
/***********************************************************************************/