* {
    box-sizing: border-box;
    
} 

body {
    font-family: 'Roboto', sans-serif;  
    text-align: center;
    background-color: rgba(245, 245, 245, 1);
    font-size: 16px;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    }

.read-more-state {
    display: none;
}

.read-more-target {
  /* opacity: 0;
  max-height: 0;
  font-size: 0; */
    display: none;
   /* transition: .25s ease-in-out;  */
}

.read-more-wrap {
    margin: 0px;
    padding: 0px;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  /* opacity: 1;
  font-size: inherit;
  max-height: 999em;
  margin: 0px; */
    display: block;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  color: #633;
  font-size: .9em;
  text-decoration: underline;
}


#header {
    position: relative;
    height: 100vh;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}

/* .section-anchor {
    position: relative;
    top: -10vh;
} */

@keyframes slidy {

    /* 0% { left: 0%; } */

    0% { left: -0vw; }
12.723214285714% { left: -0vw; }
14.285714285714% { left: -100vw; }
27.008928571429% { left: -100vw; }
28.571428571429% { left: -200vw; }
41.294642857143% { left: -200vw; }
42.857142857143% { left: -300vw; }
55.580357142857% { left: -300vw; }
57.142857142857% { left: -400vw; }
69.866071428571% { left: -400vw; }
71.428571428571% { left: -500vw; }
84.151785714286% { left: -500vw; }
85.714285714286% { left: -600vw; }
98.4375% { left: -600vw; }
100% { left: -700vw; }


    
}

body { margin: 0; } 

#googlemap {
    height: 100%;
}

div#slider {
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100vh;

}

.sliderimgdiv {
    width: 100vw;
    height: 100vh;
    display: inline-block;
    background-position: center;
    box-shadow: inset 0 50px 50px -30px rgba(0,0,0,0.8), inset 0 -50px 50px -30px rgba(0,0,0,0.8);

}

div#slider figure { 
  position: relative;
  height: 100vh;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
    
}

#welcome {
    padding: 100px;
    padding-top: 150px;
    text-align: left;
    line-height: 1.5;
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
    width: 100vw;
}

#location {
    /*height: 60vh;*/
    height: 100vh;
    padding-top: 50px;
    background-color: rgba(225, 225, 225, 1);

}

#curriculum {
    padding: 100px;
    text-align: left;
    line-height: 1.5;
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
    width: 100vw;
    /* background-color: rgba(225, 225, 225, 1); */
    /* background-color: rgba(255, 255, 255, 1); */

}

#page {
    /* padding: 50px; */
    padding-top: 100px;
    /* padding-bottom: 170px; */
    background-color: rgba(255, 255, 255, 1);
    text-align: center;
    line-height: 1.5;
    /* min-height: 100vh; */
    display: block;
    align-items: center;
    width: 100vw;
}

#contact {
    padding: 50px;
    height: 600px;
    background-color: rgba(255, 255, 255, 1);
    text-align: center;
    line-height: 1.5;
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
    width: 100vw;
}

#contact table {
    margin-left: auto;
    margin-right: auto;
}

#contact td {
    text-align: center;
    line-height: 2;
    width: 500px;
}

#footer {
    /* height: 600px; */
    background: rgba(25,25,25,1); /* Old browsers */
    color: rgba(150, 150, 150, 1);
    padding: 50px;
    text-align: center;
    /* min-height: 100vh; */
    display: block;
    align-items: center;
    width: 100vw; 
}

#footer th {
    color: rgba(255, 255, 255, 1);
    text-align: center;
    /* font-size: 0.8em; */
    line-height: 2;
    vertical-align:top
    /* font-size: 0.8em; */
    border-bottom: 1px solid rgba(130, 130, 130, 1);
}


#footer td {
    color: rgba(50, 50, 50, 1);
    text-align: center;
    /* width: (100/6)%; */
    width: 500px;
    /* font-size: 0.8em; */
    line-height: 2;
    vertical-align:top
    /* font-size: 0.8em; */

}

#footer td strong {
    color: rgba(255, 255, 255, 1);
    /* font-size: 1.2em; */
}

#footer table {
    margin-left: auto;
    margin-right: auto;
    /* width: 100%; */
}

#footer a {
    text-decoration: none;
    color: rgba(150, 150, 150, 1);
}

.students-content {
    height: 600px;
    background-image: url(../sections/students/images/background.jpg);
    background-size: cover;
    background-position: center center;
}

.widthcontrainer960 {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.widthconstrainer1200 {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto; 
}

.relative {
    position: relative;
}

.fullheight {
    height: 100%;
}

.widthconstrainer1040 {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    box-shadow: 0px 0px 30px -4px Black;
}

.besidewidthconstrainer-bottomleft {
    position: absolute;
    right: 960px;
    bottom: 0px;
}

.besidewidthconstrainer-right {
    float: right;
    margin-bottom: 25px;
    margin-top: 50px;
    margin-right: -50px;
    margin-left: 40px;
}

.besidewidthconstrainer-left {
    float: left;
    margin-bottom: 35px;
    margin-top: 0px;
    margin-left: -50px;
    margin-right: 50px;
    display: inline-block;
}

.section-heading {
    text-align: left;
    margin-bottom: 0px;
    line-height: 30px;
    padding-bottom: 0px;
}

#header {
    margin: 0px;
}

.newsletter-heading {
    color: white;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
    margin: 20px;
}

#newsletter {
    background-image: linear-gradient(175deg, rgba(50, 50, 50, 1), #666666);
    height: 500px;
    width: 100vw;
    vertical-align: middle;
    box-shadow: inset 0 50px 50px -30px rgba(0,0,0,0.8), inset 0 -50px 50px -30px rgba(0,0,0,0.8);
    position: relative;
    display: flex;
}

.polaroid-container {
    display: inline-block;
    line-height: 1;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    background-color: white;
    color: black;
    border: 1px solid darkgrey;
    box-shadow: 5px 5px 20px -5px rgba(0,0,0,1);

}

#gallery {
    background-image: linear-gradient(175deg, rgba(50, 50, 50, 1), #666666);
    padding-top: 160px; 
    min-height: 400px;
    padding-bottom: 80px;
    width: 100vw;
    vertical-align: middle;
    box-shadow: inset 0 50px 50px -30px rgba(0,0,0,0.8), inset 0 -50px 50px -30px rgba(0,0,0,0.8);
    display: flex;
}

.gallery-image-container {
    -webkit-transition-duration: 0.20s;
    transition-duration: 0.20s;
    -webkit-transition-property: all;
    transition-property: all;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
    margin-top: -140px;
	margin-left: -190px;
}

.gallery-image-container:hover {
    transform: rotate(0deg) scale(1, 1);
    z-index: 15000 !important;
}

.gallery-image0 { transform: scale(0.6, 0.6) rotate(8deg); } .gallery-image1 { transform: scale(0.6, 0.6) rotate(0deg); } .gallery-image2 { transform: scale(0.6, 0.6) rotate(-7deg); } .gallery-image3 { transform: scale(0.6, 0.6) rotate(10deg); } .gallery-image4 { transform: scale(0.6, 0.6) rotate(-3deg); } .gallery-image5 { transform: scale(0.6, 0.6) rotate(-2deg); } .gallery-image6 { transform: scale(0.6, 0.6) rotate(7deg); } .gallery-image7 { transform: scale(0.6, 0.6) rotate(8deg); } .gallery-image8 { transform: scale(0.6, 0.6) rotate(-9deg); } .gallery-image9 { transform: scale(0.6, 0.6) rotate(5deg); } .gallery-image10 { transform: scale(0.6, 0.6) rotate(-9deg); } .gallery-image11 { transform: scale(0.6, 0.6) rotate(-8deg); } .gallery-image12 { transform: scale(0.6, 0.6) rotate(-3deg); } .gallery-image13 { transform: scale(0.6, 0.6) rotate(6deg); } .gallery-image14 { transform: scale(0.6, 0.6) rotate(-6deg); } .gallery-image15 { transform: scale(0.6, 0.6) rotate(9deg); } .gallery-image16 { transform: scale(0.6, 0.6) rotate(1deg); } .gallery-image17 { transform: scale(0.6, 0.6) rotate(10deg); } .gallery-image18 { transform: scale(0.6, 0.6) rotate(-1deg); } .gallery-image19 { transform: scale(0.6, 0.6) rotate(-7deg); } .gallery-image20 { transform: scale(0.6, 0.6) rotate(5deg); } .gallery-image21 { transform: scale(0.6, 0.6) rotate(-1deg); } .gallery-image22 { transform: scale(0.6, 0.6) rotate(0deg); } 
.newsletter-container {
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
    -webkit-transition-property: all;
    transition-property: all;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
    margin-bottom: 100px;
    margin-top: 65px;
	margin-left: -40px;
}

.newsletter-container:hover {
    -webkit-transition-duration: 0.15s;
    transition-duration: 0.15s;
	transition-timing-function: ease-in-out;
	
    transform: scale(1, 1);
    z-index: 100000 !important;
    box-shadow: 8px 8px 30px -5px rgba(0,0,0,1);
	
}

.newsletter1 {
    transform: rotate(-4deg) scale(0.85, 0.85);
    z-index: 16000 !important;
	margin-top: 75px;
}

.newsletter2 {
    transform: rotate(1deg) scale(0.8, 0.8);
    z-index: 15000 !important;
}

.newsletter3 {
    transform: rotate(-5deg) scale(0.8, 0.8);
    z-index: 14000 !important;
}

.newsletter4 {
    transform: rotate(5deg) scale(0.8, 0.8);
    z-index: 13000 !important;
}

.newsletter5 {
    transform: rotate(-1deg) scale(0.8, 0.8);
    z-index: 12000 !important;
}

.newsletter6 {
    transform: rotate(6deg) scale(0.8, 0.8);
    x-index: 11000 !important;
}

.newsletter7 {
    transform: rotate(1deg) scale(0.8, 0.8);
    x-index: 11000 !important;
}

.newsletter8 {
    transform: rotate(5deg) scale(0.8, 0.8);
    x-index: 11000 !important;
}

.newsletter-image {
    box-shadow: inset 3px 3px 40px 5px rgba(0,0,0,0.3); 
    background-size: cover;
}

.newsletter-sizer-image {
    visibility: hidden;
}

.polaroid-caption {
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.navigation {
    position: fixed;
    display: block;
    top: 0px;
    left: 0px;
    z-index: 110000;
    background: rgba(25,25,25,.8); /* Old browsers */
    color: rgba(220, 220, 220, 1);
    width: 100vw;
    padding: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: height .2s ease-in-out;
    /* font-size: 0.8em; */
    font-size: 14px;
}

#students {
    background-color: rgba(225, 225, 225, 1);
    padding: 50px;
    text-align: left;
    line-height: 1.5;
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
    width: 100vw;
}

.twitter {
    background-image: linear-gradient(175deg, rgba(50, 50, 50, 1), #666666);
    height: 400px;
    width: 100vw;
    vertical-align: middle;
    box-shadow: inset 0 50px 50px -30px rgba(0,0,0,0.8), inset 0 -50px 50px -30px rgba(0,0,0,0.8);
    position: relative;
    display: flex;
    text-align: center;
}

.tweet-container {
    margin-left: auto; 
    margin-right: auto;
    color: white;
    height: 300px;
    z-index: 200000;
    overflow: hidden;
    margin-top: 50px;
    padding: 20px;
    line-height: 2000px;
    margin-bottom: -20px;
}

.tweet_just_photo {
    width: 100%;
    height: 110px;
    background-size: cover;
    background-position: 50% 50%;
}

.firsttweet {
    margin: 15px;
}

.firsttweet:before {
    content:url('../images/twitterbird.png');
    height: 30px;
    width: 30px;
    position: absolute;
    top: -18px;
    left: -20px;
    -webkit-filter: drop-shadow(1px 1px 7px #000);
    filter: drop-shadow(1px 1px 7px #000);
}

.notfirsttweet {
/*  transform: scale(0.8, 0.8); */
    margin: 15px; 
}

.tweetimage {
    height: 130px; 
    width: 130px;
    position: absolute;
    display: inline-block;
    top: 105px;
    left: 110px;
    background-size: cover;
    background-position: 50% 50%;
    box-shadow: 5px 5px 20px -5px rgba(0,0,0,1);
    border: 2px solid white;
    padding: 5px;
    border-bottom: 12px solid white;
    z-index: 10000 !important;

}

.tweet1 .tweetimage {
    transform: rotate(-3deg);
    z-index: 16000;
}

.tweet2 .tweetimage{
    transform: rotate(-7deg);
}

.tweet3 .tweetimage{
    transform: rotate(-3deg);
}

.tweet4 .tweetimage{
    transform: rotate(-7deg);
}

.tweet5 .tweetimage{
    transform: rotate(-3deg);
}

.tweetdate {
    position: absolute;
    left: 10px;
    bottom: 10px;
    font-size: 12px;
    color: grey;
}

.tweettext {
    text-align: center;
    margin-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, .5);
    color: black;
    text-decoration: none;
}

.tweet {
    display: inline-block;
    width: 230px;
    height: 180px;
    padding: 15px;
    position: relative;
    /* border-top: 20px solid maroon; */
    vertical-align: middle;
    background-color: white;
    box-shadow: 5px 5px 20px -5px rgba(0,0,0,1);
    border-radius: 15px;
    z-index: 200;
    line-height: 1.3em;
}

.tweet:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 40px;
  top: 180px;
  border: 10px solid;
  border-color: white transparent transparent white;
}



.twitter_user {
    height: 48px;
    width: 200px;
    position: absolute;
    top: 180px;
    z-index: -10;
    padding-left: 58px;
    padding-top: 5px;
    font-size: 14px;
    color: #ddd;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
}

.twitter_user a {
    color: #ddd;
    text-decoration: none;
}

#calendar {
    background-image: linear-gradient(175deg, rgba(50, 50, 50, 1), #666666);
    min-height: 400px;
    width: 100vw;
    vertical-align: middle;
    box-shadow: inset 0 50px 50px -30px rgba(0,0,0,0.8), inset 0 -50px 50px -30px rgba(0,0,0,0.8);
    position: relative;
    display: flex;
}

.calendar-events {
    margin: 0px;
    padding: 0px;
}

.calendar-events li {
    display: inline-block;
    width: 200px;
    height: 200px;
    padding: 20px;
    border-top: 20px solid maroon;
    vertical-align: middle;
    margin: -5px;
    margin-top: 85px;
    
    background-color: white;
    box-shadow: 5px 5px 20px -5px rgba(0,0,0,1);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
    transform: scale(0.9, 0.9);
}

.calendar-events li:hover {
    -webkit-transition-duration: 0.15s;
    transition-duration: 0.15s;
	transition-timing-function: ease-in-out;
    transform: scale(1, 1);
}

.calendar-event-day {
    font-size: 14px;
    vertical-align: middle;
}

.calendar-event-dom {
    font-size: 30px;
    vertical-align: middle;
    padding: 5px;
}

.calendar-event-month {
    font-size: 14px;
    vertical-align: middle;
}

.calendar-event-title {
    padding-top: 20px;
}

.calendar-linkformore {
    position: relative;
    top: 10px;    
    color: white;
    text-decoration: none;
    text-shadow: 2px 2px 5px rgba(0,0,0,1);

}

#drouinlife {
    padding: 100px;
    text-align: left;
    line-height: 1.5;
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
    width: 100vw;
    background-color: rgba(225, 225, 225, 1);
}


.navigation a {
    text-decoration: none;
    color: white;
    margin-left: 20px;
}

.shrunken {
    padding-top: 10px;
    padding-bottom: 10px;
}

#navigation-logo {
    height: 70px;
    padding-right: 100px;
    float: left;
    transition: all .2s ease-in-out;
}

#navigation-menu {
    float: right;
    line-height: 70px;
    transition: all .2s ease-in-out;
}

.shrunken #navigation-logo {
    height: 30px;
}

.shrunken #navigation-menu {
    line-height: 30px;
}


.section {
 /* min-height: 100vh; */

}