/* Site Specific CSS Styles */

/*

// Media Queries
Mobile First - everything below 768px (48em)
$small-screen: 768px; //Desktop/Tablet and up (48em) - *This is where the fluid grid and componenets change!
$sweetspot-screen: 980px; //Desktop (61.25em) - *This is where the magic happens ... err ... the UTMB nav changes! - @mgcooper
$medium-screen: 1280px; //Desktop Medium (80em) - Assigned but not used in templates
$large-screen: 1440px; //Desktop Large (90em) - Assigned but used in templates

1) Example Test: Add this html text to your page: 
   <i class="hello-world">Hello, World!</i>

2) Open your page in a decent browser

3) Resize your browser window and watch the font color change.

4) You just made something using "Mobile First" responsive design :)

*/
a, p, h2, h3, h4, h5 {
	font-family:Arial, Helvetica, sans-serif;
}
h1{
	color: #1c4d94;
	font-size:2em;

	
}

h1.white{
	color: #ffffff;
	font-size:1.5em;
	font-family: 'Montserrat', sans-serif;
}

.isubtitle {
	  display: block;
	  color: #888888;
		font-family: 'Crimson Text', serif;}	
	
	h2{
	color: #093;
	font-family: Arial, Helvetica, sans-serif;}
	
	
		h3{
	color: #096;
		font-family: Arial, Helvetica, sans-serif;}
	
img.shadow {
     box-shadow: 0px 0px 5px #cccccc;
 }
 
.highlight {
	color:#EA2839;
}

img.hover:hover {
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
} 

.hover:hover {
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
} 

a, ul, li {
	font-family:Arial, Helvetica, sans-serif;
	
}

.title  {
	font-family:Arial, Helvetica, sans-serif;
	}

li {
	margin: .3em 0;
	/*border-top:1px solid #eee;*/padding-top:4px;padding-bottom:4px;}
}

img.myphoto {
border: 1px solid #ccc;
background: #fff;
padding: 2px;
}


.subtitle {
	font-family:Arial, Helvetica, sans-serif;
}

 .red {color: #EA2839;}
    .btn-list li {padding-bottom: 4px !important;}
    @media only screen and (min-width: 48em) {
        .q-n-a-container {padding: 0 50px 0 30px;}
    }
    /*section.general {margin-left: 40px;}*/
    h3 {margin-bottom: 20px !important;color: #3D7EDB !important;}
    .q-n-a {margin-left: 10px;}
    .q-n-a li {/*border-top:1px solid #eee;*/padding-top:4px;padding-bottom:4px;}
    .q-n-a li a {color:#EC7A08;text-decoration:underline;}
    .q-n-a li b, .q-n-a li strong {color:#EA2839;}
    .question {color:#444 !important;display:block;}
    .question p {color:#444 !important;}
    .question b {font-size: .8em;display:inline-block;margin:0 2px;}
    .answer {color:#666 !important;padding:12px 6px 6px 40px;/*font-style:italic;*//*font-size: .9em;*/}
    .answer p {color: #666 !important;}
    .answer ul {margin-bottom:20px;}
    .answer ul li {padding-bottom:0;border-top:0;padding-top:0; color:#666;}

/* "Mobile First" (default) - Styles for screens that are smaller than 768px (48em) */
.hello-world { 
    color: green; 
}


/* Tablet and up (Sass: $small-screen: 768px;) 
	Styles for screens that are at least 768px (ie 48em) */
@media only screen and (min-width: 48em) {
    .hello-world { 
        color: blue; 
    }
}


/* Desktop and up (Sass: $sweetspot-screen: 980px;)
	Styles for screens that are at least 980px (61.25em) */
@media only screen and (min-width: 61.25em) {
    .hello-world { 
        color: red; 
    }
}