/* ==================================================================================================== */
/* CSS Reset */
/* ==================================================================================================== */
@import url("https://www.skidmore.edu/_resources/css/reset.css");

/*
font-family:'CopperplateGothicLTW01-_706010';
font-family:'CopperplateGothicLTW01-_706007';
font-family:'CopperplateGothicLTW01-_706016';
font-family:'CopperplateGothicLTW01-_706013';
font-family:'CopperplateGothicLTW01-_706022';
font-family:'CopperplateGothicLTW01-_706019';
font-family:'CopperplateGothicLTW01-_706028';
font-family:'CopperplateGothicLTW01-_706025';
font-family:'CopperplateGothicLTW01-_706031';
font-family:'New Aster LT W01';
font-family:'New Aster LT W01 Italic';
font-family:'NewAsterLTW01-Semibold';
font-family:'NewAsterLTW01-SemiboldI';
font-family:'New Aster LT W01 Bold';
font-family:'NewAsterLTW01-BoldItali';
font-family:'New Aster LT W01 Black';
font-family:'NewAsterLTW01-BlackItal';
*/


/* ==================================================================================================== */
/* Default HTML Tags */
/* ==================================================================================================== */
* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
html, body {  font-family: 'New Aster LT W01', "Times New Roman", serif; color: #fff; font-size: 14px; line-height: 20px; height: 100%;  }
a { color: rgba(0,95,76,1.0); text-decoration: none; }
a:hover { color: rgba(0,95,76,0.5); }
h1, h1 a { margin: 4.5% 0 0 0; font-size: 60px; line-height: 60px; letter-spacing: 15px; text-transform: uppercase;  }
h2, h2 a { margin: 2% 0 0 0; font-size: 40px; line-height: 40px; }
h3, h3 a { margin: 5.5% 0 0 0; font-size: 32px; line-height: 32px; }
h4, h4 a { text-align: center; font-size: 28px; line-height: 32px; color: #005F4C; text-transform: uppercase;  }
h5, h5 a { font-size: 32px; line-height: 32px; margin: 0 0 10px 0; }
h6, h6 a { }
i,em { font-style: italic; }
b,strong { font-weight: bold; }
img { display: block; }

/* ==================================================================================================== */
/* Common Used Tags */
/* ==================================================================================================== */


/* ==================================================================================================== */
/* Background Images */
/* ==================================================================================================== */
body { overflow-x: hidden; overflow-y: scroll; }
.overlay { position: fixed; z-index: 15; top: 0; left: 0; background-image: url("/whyitmatters/images/background-layer.png"); background-repeat: repeat; width: 100%; height: 100%;  }
#backgroundImages { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; } 
#backgroundImages li { }
#backgroundImages li img { position: fixed; z-index: 9; top: 0; left: 0; } 

/* ==================================================================================================== */
/* Navigation */
/* ==================================================================================================== */
nav#primary {
    position: fixed; z-index: 9985; bottom: 0; height: 70px; text-align: center; background-color: #EAE3C4; width: 100%; line-height: 70px; font-size: 24px; color: #005F4C;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
}
nav#primary > span { padding: 0 20px; }

/* ==================================================================================================== */
/* Brochure Pop Out */
/* ==================================================================================================== */
.brochure {
    position: fixed; z-index: 9985; bottom: -290px; left: 0; right: 0; margin: 0 auto 0 auto; height: 430px; width: 445px; text-align: center;
    background-color: rgb(209,196,129);  cursor:  pointer;
    border-radius: 15px  15px 0 0 / 15px 15px 0 0; -webkit-border-radius: 15px  15px 0 0 / 15px 15px 0 0; -moz-border-radius: 15px  15px 0 0 / 15px 15px 0 0;
}
.brochure #brochureArrow { position: absolute; z-index: 10300; margin: -28px auto 0 auto; left: 0; right: 0; width: 56px; height: 56px; }
.brochure #brochureArrow img { position:  absolute; left: 0; top: 0; }
.brochure #brochureRead { display: block; padding: 13px 0 0 0; line-height: 70px; font-family: CopperplateGothicLTW01-_706028, sans-serif; font-size: 24px; color: #005F4C;  }
.brochure #brochureRead a { display: block; margin: 40px auto 0 auto; width: 261px; position: relative; z-index: 10400; }
.brochure-mobile { display: none; background-color: rgb(209,196,129); padding: 15px; text-align: center; font-size: 24px; color: #005F4C; }
.brochure-mobile img { margin: 0 auto 10px auto; }

/* ==================================================================================================== */
/* Header */
/* ==================================================================================================== */
header { text-align: center; color: #fff; position: relative; z-index: 50; padding: 5% 0 0 0; height: 46%; }
header .logo { margin: 0 0 0 0; }
header .logo img { margin: 0 auto; }

/* ==================================================================================================== */
/* Videos */
/* ==================================================================================================== */
#videos { margin: 8% 0 0 0; text-align: center; position: relative; z-index: 50; }
#videos li { display: inline-block; margin: 20px 20px 0 20px; }
#videos li img { max-width: 232px; }
#videos span { font-family: CopperplateGothicLTW01-_706028, sans-serif; font-size: 28px;  }

#videos-content { display: none; position: relative; z-index: 50; }
.video-content  { padding: 15px; background-color: #EAE3C4; background-image: url("/whyitmatters/images/popup_background.png"); background-repeat: repeat-x; height: 100%; color: #000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 17px; }
.video-content .title { background-color: #01624D; padding: 5px 10px; font-size: 24px; line-height: 24px; color: #fff; font-family: CopperplateGothicLTW01-_706028, sans-serif; }
.video-content .video_src { margin: 40px auto 0 auto;  text-align: center; max-width: 650px; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; }
.video-content .video_src iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #F0F0E1; padding: 15px; }
.video-content a { color: #000; }
.video-content .share { float: right; width: 112px;}
.video-content .share ul { margin: 15px 0 0 0; width: 100%; }
.video-content .share ul li { display: inline-block; text-align: center; width: 30%; }
.video-content .share ul li img { margin: 0 auto; }

#cboxWrapper { max-width: 750px!important; max-height: 650px!important; }

/* ==================================================================================================== */
/* Pop Out - Large Text */
/* ==================================================================================================== */
.largeText { display: none; position: absolute; z-index: 10100; top: 0; left: 0; width: 100%; height: 100%; background-color: #EAE3C4; overflow-y: scroll;  }
.largeText .layout { max-width: 750px; padding: 40px 10px 190px 10px; width: 100%; margin: 0 auto; font-size: 18px; line-height: 28px; color: #000; }
.largeText .layout span { color: #005F4C; }
.largeText .exit { padding: 15px; border-bottom: 1px dashed #444444; text-align: center; }
.largeText .exit img { margin: 0 auto; }

/* ==================================================================================================== */
/* Comment Form */
/* ==================================================================================================== */
#submitCommentForm { padding: 15px; color: #000; background-color: #fff; height: 100%; }
#submitCommentForm h2 { margin: 0; font-size: 28px; line-height: 32px; text-align: center; color: #005F4C; }
#submitCommentForm label { display: block; width: 100%; }
#submitCommentForm label span { color: #F00; }
#submitCommentForm input[type='text'] { padding: 5px 10px; width: 100%; margin: 5px 0 15px 0; border: 1px solid rgba(0, 97, 77, 0.33); border-radius: 3px; line-height: 24px; }
#submitCommentForm textarea { width: 100%; padding: 8px 5px; margin: 5px 0 15px 0; height: 205px; border: 1px solid rgba(0, 97, 77, 0.33); border-radius: 3px; }
#submitCommentForm select { padding: 8px 5px; margin: 5px 0 15px 0; border: 1px solid rgba(0, 97, 77, 0.33); border-radius: 3px; width: 100%;  }
#submitCommentForm input[type='submit'] { text-align: center; }
#submitCommentForm .textCenter { font-size: 12px;  }

/* ==================================================================================================== */
/* Display Comments */
/* ==================================================================================================== */
#displayComments { height: 100%; }
#displayComments .comment { padding: 20px 0 20px 0; }
#displayComments .layout { padding-bottom: 190px; }

/* Grid */
.skidRow { width: 100%; clear: both; }
.skidGrid6 { width: 50%; float: left; }

/* ==================================================================================================== */
/* Media Queries */
/* ==================================================================================================== */
@media (max-width: 650px) {
    /* ===== Navigation ===== */
    nav#primary { position: relative; bottom: auto; height: auto;  }
    nav#primary > a { display: block; }
    nav#primary > a:hover { background-color: #fff; }
    nav#primary > span { display:  none; }

    /* ===== Brochure ===== */
    .brochure { display: none; }
    .brochure-mobile { display: block; font-size: 16px; position: relative; z-index: 20; }
    .brochure-mobile img { max-width: 100%; }

    /* ===== Header ===== */
    header {padding: 0 10px; height: auto; }
    header img { max-width: 100%; }
    header h1 { font-size: 40px; margin: 20px 0 0 0; letter-spacing: 5px; }
    header h2 { font-size: 30px; margin: 20px 0 0 0; }
    header h3 { font-size: 20px; margin: 20px 0 0 0; }
	header .logo { padding: 30px 0; }

    /* ===== Videos ===== */
    #videos { margin: 20px 0 0 0; padding: 0 0 20px 0; }
    #videos img { max-width: 100%; }
	
	/* ===== Comments ===== */
	#displayComments { position: relative; z-index: 15; height: auto;  }
}

@media (max-height: 850px) { 
	

    /* ===== Header ===== */
    header {padding: 0 10px; height: auto; }
    header img { max-width: 100%; }
    header h1 { font-size: 40px; margin: 20px 0 0 0; letter-spacing: 5px; }
    header h2 { font-size: 30px; margin: 20px 0 0 0; }
    header h3 { font-size: 20px; margin: 20px 0 0 0; }
	header .logo { padding: 30px 0 15px 0; }

    /* ===== Videos ===== */
    #videos { margin: 20px 0 130px 0; padding: 0 0 20px 0; }
    #videos img { max-width: 100%; }
	
	
}