@font-face { font-family: Antigoni; src: url(../fonts/antigonilight.ttf); }
@font-face { font-family: Antigoni2; src: url(../fonts/antigonilight.eot); }

html, body { height: 100%; overflow: hidden; }
body { padding: 0px; margin: 0px; }
a { text-decoration: none; }

h2 { font-family: Antigoni, Antigoni2, Arial, sans-serif; color: #FFF; font-weight: normal; font-size: 20px; padding: 15px 20px 10px 20px; margin: 0px; }
span { font-family: Antigoni, Antigoni2, Arial, sans-serif; color: #FFF; font-weight: normal; font-size: 15px; padding: 0px 20px 0px 20px;  margin: 0px; }
.content { width: 100%; height: 100%; }
.logo { width: 250px; height: 250px;position: absolute; top: 50%; left: 50%; z-index: 10; transform: translate(-50%, -50%); }
    .logo img { width: 100%; height: auto; }
.stained_glass { position: absolute; left: -50%; width: 100%; height: 100%; overflow: hidden; -ms-transform: skewX(25deg); -webkit-transform: skewX(25deg); transform: skewX(25deg); }
    .stained_glass .background { position: absolute; left: 25%; z-index: 1; width: 100%; height: 100%; background-image: url(../images/glass1.jpg); background-size: cover; background-position: left; -ms-transform: skewX(-25deg);  -webkit-transform: skewX(-25deg); transform: skewX(-25deg); }
    .stained_glass:hover .background { background-image: url(../images/glass1_75.jpg); }
    .stained_glass .text { position: absolute; bottom: 15%; right: 10%; z-index: 2; width: 700px; height: 80px; background: rgba(0,0,0,0.9); text-align: left; }
    .stained_glass:hover .text { background: rgba(183,9,0,1); }
.supervisor { position: absolute; right: -50%; width: 100%; height: 100%; overflow: hidden; -ms-transform: skewX(25deg); -webkit-transform: skewX(25deg); transform: skewX(25deg); }
    .supervisor .background { position: absolute; right: 15%; z-index: 1; width: 100%; height: 100%; background-image: url(../images/building2.jpg); background-size: cover; -ms-transform: skewX(-25deg);  -webkit-transform: skewX(-25deg); transform: skewX(-25deg); }
    .supervisor:hover .background { background-image: url(../images/building2_75.jpg); }
    .supervisor .text { position: absolute; top: 15%; left: 0%; z-index: 2; width: 750px; height: 80px; background: rgba(0,0,0,0.9); text-align: right; }
    .supervisor:hover .text { background: rgba(183,9,0,1); }

@media all and (min-width: 1200px) {
    h2 { font-size: 20px; padding: 15px 20px 10px 20px; }
    span { font-size: 15px; padding: 0px 20px 0px 20px; }
    .logo { width: 250px; height: 250px; }
    .stained_glass { left: -50%; }
        .stained_glass .background { left: 25%; background-position: left; }
        .stained_glass .text { top: 80%; right: 10%; width: 700px; height: 80px; }
    .supervisor { right: -50%; }
        .supervisor .background { right: 17%; }
        .supervisor .text { top: 15%; left: 0%; width: 750px; height: 80px; }
}

@media all and (max-width: 1200px) {
    h2 { font-size: 20px; padding: 15px 20px 10px 20px; }
    span { font-size: 15px; padding: 0px 20px 0px 20px; }
    .logo { width: 250px; height: 250px; }
    .stained_glass { left: -50%; }
        .stained_glass .background { left: 35%; background-position: left; }
        .stained_glass .text { top: 80%; right: 10%; width: 700px; height: 80px; }
    .supervisor { right: -50%; }
        .supervisor .background { right: 25%; }
        .supervisor .text { top: 15%; left: -8%; width: 750px; height: 80px; }
}

@media all and (max-width: 1000px) {
    h2 { font-size: 17px; padding: 10px 10px 5px 10px; }
    span { font-size: 13px; padding: 0px 10px 0px 10px; }
    .logo { width: 250px; height: 250px; }
    .stained_glass { left: -50%; }
        .stained_glass .background { left: 25%; background-position: left; }
        .stained_glass .text { top: 80%; right: -0%; width: 580px; height: 60px; }
    .supervisor { right: -50%; }
        .supervisor .background { right: 25%; }
        .supervisor .text { top: 15%; left: -0%; width: 590px; height: 60px; }
}

@media all and (max-width: 800px) {
    h2 { font-size: 17px; padding: 10px 10px 5px 10px; }
    span { font-size: 13px; padding: 0px 10px 0px 10px; }
    .logo { width: 150px; height: 150px; }
    .stained_glass { left: -50%; }
        .stained_glass .background { left: 30%; background-position: left; }
        .stained_glass .text { top: 80%; right: -10%; width: 600px; height: 60px; }
    .supervisor { right: -50%; }
        .supervisor .background { right: 30%; }
        .supervisor .text { top: 15%; left: -15%; width: 650px; height: 60px; }
}

@media all and (max-width: 700px) {
    h2 { font-size: 17px; padding: 10px 10px 5px 10px; }
    span { font-size: 13px; padding: 0px 10px 0px 10px; }
    .logo { width: 150px; height: 150px; }
    .stained_glass { left: -50%; }
        .stained_glass .background { left: 30%; background-position: left; }
        .stained_glass .text { top: 80%; right: -5%; width: 500px; height: 60px; }
    .supervisor { right: -50%; }
        .supervisor .background { right: 30%; }
        .supervisor .text { top: 15%; left: -20%; width: 600px; height: 60px; }
}

@media all and (max-width: 640px) {
    h2 { font-size: 15px; padding: 7px 10px 5px 10px; }
    span { font-size: 12px; padding: 0px 10px 0px 10px; }
    .logo { width: 100px; height: 100px; }
    .stained_glass { left: 0; top: 0%; height: 50%; transform: none; -moz-transform: none; -webkit-transform: none; -ms-transform: none; }
        .stained_glass .background { left: 0; background-position: left; transform: none; -moz-transform: none; -webkit-transform: none; -ms-transform: none; }
        .stained_glass .text { top: 5%; left: 0px; width: 100%; height: 60px; }
    .supervisor { right: 0; top: 50%; height: 50%; transform: none; -moz-transform: none; -webkit-transform: none; -ms-transform: none; }
        .supervisor .background { right: 0; transform: none; -moz-transform: none; -webkit-transform: none; -ms-transform: none; }
        .supervisor .text { top: auto; bottom: 5%; left: 0%; width: 100%; height: 75px; }
}

@media all and (max-width: 320px) {
    h2 { font-size: 15px; padding: 7px 10px 5px 10px; }
    span { font-size: 12px; padding: 0px 10px 0px 10px; }
    .logo { width: 100px; height: 100px; }
    .stained_glass { left: 0; top: 0%; height: 50%; transform: none; -moz-transform: none; -webkit-transform: none; -ms-transform: none; }
        .stained_glass .background { left: 0; background-position: left; transform: none; -moz-transform: none; -webkit-transform: none; -ms-transform: none; }
        .stained_glass .text { top: 5%; left: 0px; width: 100%; height: 60px; }
    .supervisor { right: 0; top: 50%; height: 50%; transform: none; -moz-transform: none; -webkit-transform: none; -ms-transform: none; }
        .supervisor .background { right: 0; transform: none; -moz-transform: none; -webkit-transform: none; -ms-transform: none; }
        .supervisor .text { top: auto; bottom: 5%; left: 0%; width: 100%; height: 75px; }
}