/*
 Theme Name:  YMCA of Greater Vancouver Donor Impact Report 2018
 Theme URI: http://www.armadillostudios.ca
 Description: YMCA of Greater Vancouver Donor Impact Report 2018
 Author: Armadillo Studios Inc.,
 Author URI: http://www.armadillostudios.ca
 Version: 1.0    
*/


/* Structure
--------------------------------------------------------------------------------------- */

/* Colors

black: #000   Red:  #8A1005; Orange: #FAA634

Highlight Colours: 

Light Blue: 00b8ba
Orange: faa634

--------------------------------------------------------------------------------------- */


@font-face {
    font-family: 'YMCA_Script';
    src: url('../fonts/YMCAScript-Regular.woff2') format('woff2'),
        url('../fonts/YMCAScript-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* -------------------------------------------------------------------------------------- */



* {
    -webkit-transition: all 0.15s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
-ms-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}


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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
field set, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }

html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
}

body { 
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fff; 
  background-position: center bottom;
  background-repeat: no-repeat;
  color: #444;
  overflow:auto; 
  height: 100%;
  font-weight: 400;}  
}

img {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    zoom: 1;
}

body.error {
  background: #317fb2;
  height: auto;
}


a {
	text-decoration: none;
	color: #8A1005;
}

a:hover {
    cursor: pointer !important;
}

strong {font-weight:600;}


h1, h2, h3, h4, h5, h6 {
  font-size: 2.5em;
  font-weight: 500;
  line-height: 1.1em;
  margin: 0 0 40px 0;
}

body h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0px 0px 2rem;
}

p, address {
line-height: 130%;
margin: 0 0 20px 0;
font-size: 16px;
}

ul {
  margin: 0 0 40px 20px;
  padding: 0;
  list-style: square;
}

ol {
  margin: 0 0 40px 20px;
  padding: 0;
}

ul li, ol li {
  line-height: 1.7em;
  padding: 3px 0;
}

p a, ul li a, ol li a {
  color: #ed1c29;
  text-decoration: none;
}

p a:hover, ul li a:hover, ol li a:hover {
  color: #191919;
  text-decoration: underline;
}

blockquote {
    background-color: #d8d8d8;
    -moz-border-radius: 20px 20px 20px 0px;
    -webkit-border-radius: 20px 20px 20px 0px;
    border-radius: 20px 20px 20px 0;
    height: 100%;
    margin: 18px 0;
    padding: 20px;
    width: 97%;
}


/* Wrapper */

.wrapper {
	display: block;
	margin: 0px auto;
	max-width: 1024px;
	width:100%;
	clear: both;
}

/* Universal Colour Spans */

.lightblue {
	color: #00b8ba;
	}
.orange, .special {
	color: #faa634;
	}
.handwritten {
    font-family: 'YMCA_Script', 'Just Another Hand', cursive;
    font-size: 150%;
    letter-spacing: 3px;
}
.brightred {
	color: #ef3e42;
	}
.pink {
	color: #e40375;
	}
.pastelblue {
	color: #4891ce;
	}
.purple {
	color: #6a003b;
	}
	
/* Site Navigation
------------------------------------------------------------------- */

nav {
	position:fixed;
	z-index: 3000;
	left: 93%;
	top: 25%;
	float: left;
}



/* Header
--------------------------------------------------------------------------------------- */

img.ymca-logo {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 50px;
}

header {
    max-width: 1024px;
    text-align: center;
    font-weight: 500;
    margin: 20px auto 0px;
    width: 100%;
}

header h1 {
    font-size: 58px;
    color: #FAA634;
    margin-top: 3rem;
    letter-spacing: -1.5px;
    font-weight: 700;
    line-height: 115%;
    margin-bottom: 1rem;
}

header h1 .handwritten {
    font-weight: 400 !important;
}

header h2 {
    color: #8a1005;
    margin-bottom: 0.5rem;
    font-size: 19px;
    line-height: 130%;
    margin-bottom: 1.52rem;
    width: 85%;
    margin: 0px auto 1rem;
    display: block;
}

header h3 {
    font-size: 32px;
    color: #FAA634;
    margin-top: 0rem;
    letter-spacing: -1px;
    font-weight: 700;
    line-height: 115%;
    margin-bottom: 1.5rem;
}

header p {
	color: #E00004;
	margin-bottom: 0.5rem;
}



header i.fa-hand-o-up.fa {
    padding: 3px 4px;
    font-size: 12px;
    border-radius: 100%;
    background: red;
    border: 3px solid darkred;
    color: #fff;
    margin: 1px 3px;
}

header i.fa-hand-o-up.fa:hover {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* Loading 
-------------------------------------------------------------------------------------- */
.loading {
height: 100%;
position: fixed;
width: 100%;
z-index: 1999;
display: block;
background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #fff 50%, #e5e5e5 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #fff 50%, #e5e5e5 100%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%, #fff 50%, #e5e5e5 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%, #fff 50%, #e5e5e5 100%);
background: radial-gradient(ellipse at center, #ffffff 0%, #fff 50%, #e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 );
}

.loading-logo {
width: 500px;
height: 175px;
}

.loading-container {
    left: 0px;
    margin-left: auto;
    margin-top: 13rem;
    top: 0px;
    text-align: center;
    margin-right: auto;
}

.loading-container p i {
color: #6A1A41;
}

.loading-container h1 {
    font-size: 18px;
    letter-spacing: -0.5px;
    color: #444;
    text-shadow: 0px 0px 2px #fff;
    text-align: center;
    font-weight: 900;
}

.loading-container .loading-text {
float: right;
margin-top: 140px;
margin-left: 0px;
display: inline;
} 

.loading-container .loading-spinner {display: inline-block;
margin: 0px;
padding: 0px;
}


/* Skroll Information
----------------------------------------------------------------------------------------- */

.centered { top:0; bottom:0; left:0; right:0; margin:auto; }
.container {
    display: block;
}

/* Social Media/Links
----------------------------------------------------------------------------------------- */


header div.social-nav {
    float: none;
    display: inline-block;
    width: 100%;
}

header .social-nav h4 {
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: .5rem;
    margin-top: 0.75rem;
    color: #00b8ba;
    font-size: 20px;
    left: 0px;
}

header .social-nav ul {
    margin: 0.5rem auto 0px auto;
    padding: 0;
    display: inline-block;
    text-align: center !important;
    height: 100%;
}
	
header .social-nav ul li {
    display: inline;
    float: left;
    margin: 0 3px 0 0;
    list-style-type: none;
	}


header .social-nav i.fa {
    background: #8A1005;
    color: #fff;
    padding: 9px 11px;
    border-radius: 100%;
    font-size: 24px;
}

header .social-nav a:hover i.fa {
	background: #FAA634;
}

/* Article Structure 
----------------------------------------------------------------------------------------- */

.container {
height: 100%;
width: 100%;
}

#content-wrapper {
    margin: 0px auto 6rem;
    padding: 0px 0px 10px;
    width: 100%;
    height: 100%;
    min-height: 925px;
    display: block;
    top: 0px;
    background-image: url(../images/YMCA_lower_mainland_map.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    max-width: 1400px;
}

h1 {
font-size: 46px;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 155%;
margin: 0;
color: #E00004;
}



/* Modal Links
--------------------------------------------------------------------------------------- */

.modal-link {
display: inline-block;
}

.modal-link:hover {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}

.modal-link .fa-hand-o-up {
    background: red;
    padding: 3px 5px;
    border-radius: 100%;
    border: 4px solid #8A1005;
    color: #fff;
    margin-left: -35px;
    margin-top: -10px;
    font-size: 16px;
    text-align: center;
}

.modal-link:hover .fa-hand-o-up {
color: #fff;
background: #faa634;
}

.modal-link.jake img {
    width: 155px;
}

a.modal-link.people-1 img, a.modal-link.people-2 img, a.modal-link.people-3 img {
    width: 150px;
}

a.modal-link.health img {
	max-width: 150px;
}

a.modal-link.chiliwack img {
    max-width: 250px;
}


a.modal-link.people-1 {
    position: relative;
    left: 180px;
    top: 75px;
}

a.modal-link.health {
    position: relative;
    left: 501px;
    top: 123px;
}


a.modal-link.jake {
    left: 190px;
    position: relative;
    top: 200px;
}


#YMCA-chiliwack {
    top: 0px;
    background-image: url(../images/ymca_fraser_valley.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    position: relative;
    width: 450px;
    height: 450px;
    left: 72%;
    top: 195px;
}

a.modal-link.chiliwack {
    position: relative;
    top: 217px;
    left: 89px;
}

#YMCA-sunshine-coast {
    top: 0px;
    background-image: url(../images/Ymca_sunshine_coast.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    position: relative;
    width: 300px;
    height: 300px;
    left: -5%;
    top: -299px;
}

a.modal-link.camping {
    position: relative;
    left: 70px;
    top: 62px;
}

a.modal-link.people-2 {
    position: relative;
    left: 239px;
    top: -585px;
}

a.modal-link.family {
    position: relative;
    top: -641px;
    left: 229px;
}

a.modal-link.highlights {
    position: relative;
    top: -692px;
    left: 202px;
}

a.modal-link.camp {
    top: -679px;
    position: relative;
    left: 212px;
}

a.modal-link.people-3 {
    position: relative;
    top: -315px;
    left: -251px;
}

a.modal-link.youth-leaders {
    top: -400px;
    position: relative;
    left: -83px;
}
/* Modals
--------------------------------------------------------------------------------------- */
body .remodal {
padding: 10px 5px;
background: #fff;
font-size: 12px;
text-align: left !important;
}

body .remodal-close {
position: absolute;
background: #3e5368;
top: -15px;
left: -15px;
width: 28px;
height: 28px;
text-decoration: none;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 2px solid #FFf;
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;}

body .remodal-close:hover, body .remodal-close:active {
color: #3e5368;
background: #fff;
border: 2px solid #3e5368;
}

body .remodal-overlay {
background: rgba(33, 36, 46, 0.65);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EE21242E, endColorstr=#EE21242E);
}

body .remodal-close:after {
display: block;
font-size: 28px;
content: "×";
line-height: 28px;
cursor: pointer;
text-decoration: none;
color: #fff;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
text-align: center;
margin-top: 1px;}

.remodal-close:hover.remodal-close:after, .remodal-close:active.remodal-close:after {
color: #000;
}

img.modal-image-container {
width: 225px;
float: right;
margin: 0px 0px 20px 20px;
}

.remodal h2 {
    font-size: 23px;
    font-weight: bold;
    margin-bottom: 1rem;
}

.remodal h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 1rem;
}

.remodal p {
    font-size: 14px;
    line-height: 155%;
    margin-bottom: 1rem;
    color: #555;
}

.remodal img:hover {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
}

.modal-link img {
    max-width: 174px;
}

.remodal.block-1 {
    background: #fff;
    text-align: left;
    padding: 2rem;
    border-radius: 0px;
    max-width: 800px;
    width: 100%;
    border-bottom: 2rem solid #faa634;
}
	
	img.modal-1 {
	    max-width: 300px;
	    float: right;
	    margin-top: -3rem;
	    width: 50%;
	}

.remodal.block-2 {
    background: #fff;
    text-align: left;
    padding: 2rem;
    border-radius: 0px;
    max-width: 800px;
    width: 100%;
    border-bottom: 2rem solid #00b8ba;}
    
    
    img.modal-2 {
    max-width: 350px;
    float: right;
}

.remodal.block-3 {
    background: #fff;
    text-align: left;
    padding: 2rem;
    border-radius: 0px;
    max-width: 800px;
    width: 100%;
    border-bottom: 2rem solid #4891ce;
}

img.modal-3 {
    float: right;
    max-width: 375px;
    width: 100%;
}

.remodal.block-4 {
    background: #fff;
    text-align: left;
    padding: 2rem;
    border-radius: 0px;
    max-width: 800px;
    width: 100%;
    border-bottom: 2rem solid #bdcc2a; 
}

img.modal-4 {
    max-width: 350px;
    float: right;
}

.remodal.block-5 {
    background: #fff;
    text-align: left;
    padding: 2rem;
    border-radius: 0px;
    max-width: 800px;
    width: 100%;
    border-bottom: 2rem solid #ef3e42;}
    
    
    img.modal-5 {
    float: right;
    max-width: 305px;
}

.remodal.block-6 {
    background: #fff;
    text-align: left;
    padding: 2rem;
    border-radius: 0px;
    max-width: 800px;
    width: 100%;
    border-bottom: 2rem solid #faa634;
}

img.modal-6 {
    float: right;
    max-width: 425px;
}

.remodal.block-789, .remodal.block-7, .remodal.block-8, .remodal.block-9 {
    background: #fff;
    text-align: left;
    padding: 2rem;
    border-radius: 0px;
    max-width: 800px;
    width: 100%;
    border-bottom: 2rem solid #faa634;
}


img.modal-789, img.modal-7, img.modal-8, img.modal-9 {
    max-width: 350px;
    float: right;
}

.remodal.block-789 a, .remodal.block-7 a, .remodal.block-8 a, .remodal.block-9 a {
    font-weight: 600;
}

.remodal.block-10 {
    background: #fff;
    text-align: left;
    padding: 2rem;
    border-radius: 0px;
    max-width: 800px;
    width: 100%;
    border-bottom: 2rem solid #faa634;
}


img.modal-10 {
    float: right;
    max-width: 325px;
    margin: -1rem auto;
    display: block;
}


.remodal.block-11 {
    background: #fff;
    text-align: left;
    padding: 2rem;
    border-radius: 0px;
    max-width: 800px;
    width: 100%;
    border-bottom: 2rem solid #bdcc2a;
}

img.modal-11 {
    max-width: 500px;
    float: none;
    display: block;
    margin: -20px auto;
}


/* Foooter 
------------------------------------------------------------------------------------*/

footer {
    margin: -5rem auto 2rem;
    text-align: center;
}

footer p {
text-align: center;
}

footer a:hover {
color: #000;
}

footer h2 {
    font-size: 43px;
    color: #FAA634;
    margin-top: 5rem;
    letter-spacing: -0.5px;
    margin: 0px 0px 1.25rem;
}

footer h3 {
    letter-spacing: -1px;
    font-weight: 600s;
    font-size: 30px;
    margin: 1rem 0px;
    color: #444;
    margin-bottom: 0.5rem;
    font-size: 19px;
    line-height: 130%;
    margin-bottom: 1.52rem;
    width: 85%;
    margin: 0px auto 1rem;
    display: block;
    font-weight: 700;
}

footer h3 a {
    font-weight: 700;
}

footer h4 {
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 2rem;
    color: #00b8ba;
}

footer div.social-nav {
    float: none;
    display: inline-block;
    width: 100%;
    margin-left: 0px;
    margin-top: 0px;
    width: 100%;
}

footer .social-nav ul {
margin: 0 auto 0px auto;
padding: 0;
width: 145px;
}
	
footer .social-nav ul li {
    display: inline;
    float: left;
    margin: 0 3px 0 0;
    list-style-type: none;
	}

footer .social-nav i.fa {
    background: #8A1005;
    color: #fff;
    padding: 9px 11px;
    border-radius: 100%;
    font-size: 24px;
}

footer .social-nav a:hover i.fa {
	background: #FAA634;
}


footer h5 {
font-size: 12px;
text-align: center;
text-transform: uppercase;
display: block;
float: none;
margin-top: 3rem;
color: #555;
}	


/* =============================================================================
Media queries - devices smaller than Normal Screen
   ========================================================================== */
@media only screen and (max-width: 1400px) and (min-width: 1200px) {
	
	section#content-wrapper {
    max-width: 1200px;
    margin-bottom: 0rem;
    min-height: 633px;
	}	

	.modal-link img {
	    max-width: 155px;
	}

	a.modal-link.health img {
	    max-width: 130px;
	}

	#YMCA-chiliwack a.modal-link img {
    max-width: 250px;
	}

a.modal-link.people-1 {
    position: relative;
    left: 120px;
    top: 58px;
}
	
a.modal-link.health {
    position: relative;
    left: 380px;
    top: 114px;
}

a.modal-link.jake {
    left: 167px;
    position: relative;
    top: 166px;
}

a.modal-link.family {
    position: relative;
    top: -637px;
    left: 174px;
}


a.modal-link.people-2 {
    position: relative;
    left: 489px;
    top: -536px;
}

a.modal-link.camp {
    top: -669px;
    position: relative;
    left: 144px;
}

a.modal-link.people-3 {
    position: relative;
    top: -580px;
    left: -440px;
}

a.modal-link.youth-leaders {
    top: -428px;
    position: relative;
    left: -132px;
}

a.modal-link.highlights {
    position: relative;
    top: -668px;
    left: 143px;
}

#YMCA-sunshine-coast {
    top: 0px;
    background-image: url(../images/Ymca_sunshine_coast.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    position: relative;
    width: 300px;
    height: 300px;
    left: -8%;
    top: -287px;
}

#YMCA-chiliwack {
    top: 0px;
    background-image: url(../images/ymca_fraser_valley.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    position: relative;
    width: 425px;
    height: 425px;
    left: 69%;
    top: 154px;
}

footer {
    margin: -9rem auto 2rem;
    text-align: center;
}
		
	}
	
/* =============================================================================
Media queries - devices smaller than Normal Screen
   ========================================================================== */

@media only screen and (max-width: 1200px) and (min-width: 1024px) {
section#content-wrapper {
    max-width: 1024px;
    margin-bottom: 0rem;
    min-height: 508px;
}

img.ymca-logo {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 35px;
}


a.modal-link.chiliwack img {
    max-width: 220px;
}
	.modal-link img {
	    max-width: 130px;
	}	

	a.modal-link.health img {
	    max-width: 115px;
	}

a.modal-link.people-1 {
    position: relative;
    left: 95px;
    top: 63px;
}
		
a.modal-link.health {
    position: relative;
    left: 327px;
    top: 88px;
}

a.modal-link.jake {
    left: 122px;
    position: relative;
    top: 157px;
}

a.modal-link.family {
    position: relative;
    top: -592px;
    left: 137px;
}


a.modal-link.people-2 {
    position: relative;
    left: 415px;
    top: -519px;
}

a.modal-link.camp {
    top: -622px;
    position: relative;
    left: 134px;
}

a.modal-link.people-3 {
    position: relative;
    top: -538px;
    left: -385px;
}

a.modal-link.youth-leaders {
    top: -406px;
    position: relative;
    left: -116px;
}

a.modal-link.highlights {
    position: relative;
    top: -623px;
    left: 116px;
}

#YMCA-sunshine-coast {
    top: 0px;
    background-image: url(../images/Ymca_sunshine_coast.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    position: relative;
    width: 300px;
    height: 300px;
    left: -9%;
    top: -241px;
}

#YMCA-chiliwack {
    top: 0px;
    background-image: url(../images/ymca_fraser_valley.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    position: relative;
    width: 375px;
    height: 375px;
    left: 69%;
    top: 154px;
}

a.modal-link.chiliwack {
    position: relative;
    top: 139px;
    left: 61px;
}

footer {
    margin: -12rem auto 2rem;
    text-align: center;
}

}

/* =============================================================================
Media queries - devices smaller than Normal Screen
   ========================================================================== */

@media only screen and (max-width: 1024px) and (min-width: 760px) {
section#content-wrapper {
    max-width: 100%;
    margin-bottom: 0rem;
    min-height: 508px;
}

img.ymca-logo {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 35px;
}

a.modal-link.health img {
    max-width: 105px;
}	

a.modal-link img {
    max-width: 110px;
}

a.modal-link.jake {
    left: 139px;
    position: relative;
    top: 126px;
}

a.modal-link.people-1 {
    position: relative;
    left: 126px;
    top: 50px;
}

a.modal-link.health {
    position: relative;
    left: 301px;
    top: 79px;
}

a.modal-link.people-2 {
    position: relative;
    left: 156px;
    top: -406px;
}

a.modal-link.people-3 {
    position: relative;
    top: -392px;
    left: -88px;
}

a.modal-link.family {
    position: relative;
    top: -452px;
    left: 132px;
}

a.modal-link.highlights {
    position: relative;
    top: -482px;
    left: 127px;
}

a.modal-link.youth-leaders {
    top: -300px;
    position: relative;
    left: -83px;
}

a.modal-link.camp {
    top: -479px;
    position: relative;
    left: 140px;
}

#YMCA-chiliwack {
    top: 0px;
    background-image: url(../images/ymca_fraser_valley.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    position: relative;
    width: 300px;
    height: 300px;
    left: 70%;
    top: 133px;
}

a.modal-link.chiliwack {
    position: relative;
    top: 117px;
    left: 62px;
}

a.modal-link.chiliwack img {
    max-width: 174px;
}

#YMCA-sunshine-coast {
    top: 0px;
    background-image: url(../images/Ymca_sunshine_coast.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    position: relative;
    width: 225px;
    height: 225px;
    left: -5%;
    top: -259px;
}

footer {
    margin: -4rem auto 2rem;
    text-align: center;
}


}

/* =============================================================================
Media queries - devices smaller than Normal Screen
   ========================================================================== */

@media only screen and (max-width: 760px) and (min-width: 200px) {

section#content-wrapper {
    max-width: 100%;
    margin-bottom: 0rem;
    min-height: 508px;
    background: none;
}

header h1 {
    font-size: 32px;
    color: #FAA634;
    margin-top: 3rem;
    letter-spacing: -1.5px;
    font-weight: 700;
    line-height: 115%;
    margin-bottom: 1rem;
}

body .remodal {
    padding: 2rem 1rem !important;
    background: #fff;
    font-size: 10px !important;
    text-align: left !important;
    max-width: 95% !important;
}

img.ymca-logo {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 35px;
}

.modal-link img {
    max-width: 125px;
}

a.modal-link.health img {
    max-width: 107px;
}

a.modal-link.chiliwack img {
    max-width: 155px;
}

a.modal-link {
    width: 100%;
    position: relative;
    left: 0px !important;
    top: 0px !important;
    background: #fff;
    border-bottom: 3px solid red;
    text-align: center;
    padding-top: 3px;
}

a.modal-link.jake, a.modal-link.family {
    border-bottom: 3px solid #bdcc2a;
    }
a.modal-link.people-1, a.modal-link.highlights {   
    border-bottom: 3px solid #e40375;
    }

a.modal-link.health, a.modal-link.camp {
	border-bottom: 3px solid #faa634;
	}  

a.modal-link.chiliwack, a.modal-link.people-3 {   
    border-bottom: 3px solid #6a003b;
    }
    
a.modal-link.camping, a.modal-link.youth-leaders {   
    border-bottom: 3px solid #ef3e42;
    }
    
a.modal-link.people-2 {   
    border-bottom: 3px solid #00b8ba;
}


a.modal-link:hover {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(0deg);
    background: #eee;
}

#YMCA-chiliwack {
    top: 0px;
    background-image: none;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    position: relative;
    width: 100%;
    height: inherit;
    left: 0px;
    top: 0px;
    display: block;
}

#YMCA-sunshine-coast {
    top: 0px;
    background-image: none;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    position: relative;
    width: 100%;
    height: inherit;
    left: 0px;
    top: 0px;
    display: block;
}

footer {
    margin: 2rem auto 2rem;
    text-align: center;
}

footer h2 {
    font-size: 32px;
    color: #FAA634;
    margin-top: 5rem;
    letter-spacing: -0.5px;
    margin: 0px 0px 1.25rem;
}

}