/* General */

* {
border:0;
outline:0;
}

body, html {
height: 100%;
}

body {
margin:0;
padding:0;
font-family:"PT Serif";
font-size:20px;
background: #fff;
}

p {
line-height:1.6;
}

.centered {
text-align:center;
}

/* Typograhpy */

a {
color:#FFDF00;
text-decoration:none;
}

a:hover {
color:yellow;
}

.clear {
clear:both;
}

.wrap {
width:80%;
margin:0 auto;
padding:50px 0;
}

.wrap div {
min-height:150px;
}

.alignleft {
float:left;
}

.alignright {
float:right;
}

.w30 {
width:28%;
}

.w40 {
width:38%;
}

.w45 {
width:43%;
}


.w50 {
width:48%;
}

.w55 {
width:53%;
}

.w60 {
width:58%;
}

.w70 {
width:68%;
}

.section {
position:relative;
min-height:200px;
}

#home {
display:flex;
align-items: center;
justify-content: center;
background:#fff;
height:100%;
}

#home .background {
position:absolute;
width:100%;
height:100%;
z-index:1;
}

#home .background div {
height: 100%; 
width: 100%; 
}

#home .background div img{
width:100%;
height:100%;
object-fit: cover;
}

#home .content {
width:100%;
height:auto;
z-index:2;
}

#home .content .logo {
width:45%;
/* margin-top:280px; */
}

#home .content p {
line-height:1.7;
display:block;
width:45%;
margin:20px auto;
text-align:left;
background-color: rgba(255, 255, 255, .5);
padding:20px;
}

#highlights h2 {
margin-top:0;
}

#highlights img {
width:100%;
}

#south-wing {
background:#f6f6f6;
padding:30px 0;
}

#south-wing .flex {
display:flex;
justify-content: space-between;
}

#south-wing h1,
#events h1 {
display:block;
text-align:center;
margin:20px 0 10px 0;
}

#south-wing .wrap div {
flex: auto;
display:inline-block;
width:31%;
height:450px;
background:#fff;
margin: 10px 9px;
box-shadow: 0px 1px 19px -1px rgba(64,56,56,0.5);
-webkit-box-shadow: 0px 1px 19px -1px rgba(64,56,56,0.5);
-moz-box-shadow: 0px 1px 19px -1px rgba(64,56,56,0.5);
border-radius:10px;
position:relative;
}


#south-wing .wrap div p {
display: flex;
flex-direction: column;
width:92%;
height:100%;
margin:13px auto;
font-size:17px;
}

#south-wing .wrap div p img {
width:100%;
border-radius:10px;
margin:0 0 10px 0;
}

#south-wing .wrap div p span {
display:block;
margin:10px 0;
flex: 1;
font-size:15px;
}

#south-wing .wrap div p span em {
display:block;
margin:0 0 7px 0;
}

#south-wing .wrap div p a {
border:1px solid #000;
border-radius:15px;
float:right;
color:#000;
padding:5px 10px;
align-self: flex-end;
margin-bottom:40px;
}

#south-wing .wrap div p a:hover {
background:#000;
color:#fff;
}

#south-wing .more {
background:#000;
border-radius:15px;
color:#fff;
padding:5px 15px;
}

#south-wing .more:hover {
background:gray;
}

#events {
background:#e6e6e6;
padding:30px 0;
}

#events .wrap {
min-height:100px;
background:#fff;
border-radius:15px;
padding:0;
margin:50px auto;
}

#events .wrap .clear {
min-height:1px !important;
}

#events .wrap .alignleft div {
padding:30px;
}

#events .wrap .alignright {
background: url("../images/event-photo.jpg")no-repeat center center;
background-size:cover;
border-radius:0 15px 15px 0;
}

#footer {
background:#000;
color:#fff;
}

#footer a {
color:#fff;
}

#footer .footer-logos {
padding:30px 0 0 0;
text-align:right;
}

#footer .footer-logos img {
width:65%;
}

#footer .footer-logos span {
display:block;
margin:50px 0 0 0;
}

#footer .contacts p span {
display: inline-block;
}

#footer .contacts p span:nth-child(1){
margin:0 15px 0 0;
background: url("../images/footer-icons.png") no-repeat;
}

#footer .contacts p .address{
width:33px;
height:43px;
vertical-align:top;
background-position: 0 0 !important;
}

#footer .contacts p .tel{
width:33px;
height:36px;
vertical-align:top;
background-position: -39px -4px !important;
}

#footer .contacts p .hours{
width:33px;
height:33px;
vertical-align:top;
background-position: -78px -5px !important;
}

#footer .contacts p .email{
width:34px;
height:22px;
vertical-align:middle;
background-position: -117px -11px !important;
}

/* Responsive */

@media only screen and (min-width: 1920px) {

#highlights .texts1 {
padding-top:120px !important;
}

#highlights .texts3 {
padding-top:80px;
}

}

@media only screen and (min-width: 1680px) {

#south-wing .wrap div {
height:450px;
}

#highlights .texts1 {
padding-top:30px;
}

#highlights .texts2,
#highlights .texts4 {
padding-top:140px;
}

}

@media only screen and (min-width: 1440px) and (max-width: 1679px) {

#highlights .texts2 {
padding-top:70px;
}

#highlights .texts4 {
padding-top:100px;
}

}

@media only screen and (min-width: 1280px) and (max-width: 1439px) {

#highlights .texts2 {
padding-top:40px;
}

#highlights .texts4 {
padding-top:80px;
}

}

@media only screen and (min-width: 1280px) {

#events .wrap .alignleft,
#events .wrap .alignright {
min-height:500px !important;
}

}


@media only screen and (min-width: 1024px) {

#events .wrap .alignleft,
#events .wrap .alignright {
min-height:700px;
}

}


@media only screen and (max-width: 1024px) {

#highlights .texts4 {
padding-top:30px;
}

}

@media only screen and (max-width: 991px) {

#events .wrap .w50 {
width:100%;
}

#events .wrap .alignleft div {
padding:0 30px;
float:none;
}

#events .wrap .alignright {
border-radius:15px 15px 0 0;
min-height:350px;
float:none;
}

#events .wrap .alignleft div {
padding:0 30px;
}

}


@media only screen and (max-width: 780px) {

.w30, .w40, .w45, .w50, .w55, .w60, .w70 {
width:100%;
}

#highlights .texts1,
#highlights .texts2,
#highlights .texts3,
#highlights .texts4 {
padding-top:20px;
}

#highlights h2 {
text-align:center;
}

#home .content .logo {
width:65%;
margin-top:0;
}

#south-wing .wrap div {
width:100%;
margin: 20px 0;
}

#events .wrap .alignright {
min-height:250px;
}

#footer .footer-logos {
text-align:center;
}

#footer .footer-logos img {
width:80%;
}

}

@media only screen and (max-width: 480px), only screen and (max-height: 360px) {

body {
font-size:17px;
}

#home .content p {
width:60%;
font-size:13px;
}

} {

body {
font-size:17px;
}

#home .content p {
width:60%;
font-size:13px;
}

}