/* Site-specific styles
   Launched:
   Author:
   ----------------------------------------------------*/

.img-circle {
    max-width:320px;
    max-height:320px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:40px;
    border-radius: 50%;
}

iframe {
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
}

.gallery-videos {
    width:100%;
    height:100%;
    display:inline-block;
}

.gallery-video-half {
    width:100%;
    height:100%;
    display:inline-block;
}

.gallery-video-full {
    width:100%;
    height:100%;
    display:inline-block;
}

.gallery-thumb {
    width:100%;
    height:100%;
    padding:3px;
    box-sizing: border-box;
}

.student-credit {
    font-size:20px;
    font-weight:bold;
    color:#ccc;
}

.main-title {
    font-family: GPC, "Arial Narrow", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
    line-height:42px;
    color: #143865; 
    font-size: 32px; 
    font-weight:600;
    border-bottom: 3px #ae9142 solid;
}

.main-title:link {
    color: #143865; 
    border-bottom: 3px #ae9142 solid;
    text-decoration: none;
}
.main-title:visited  {
    color: #143865; 
    border-bottom: 3px #ae9142 solid;
    text-decoration: none;
}
.main-title:hover  {
    color: #143865; 
    border-bottom: 3px #ae9142 solid;
    text-decoration: none;
}
.main-title:active  {
    color: #143865; 
    border-bottom: 3px #ae9142 solid;
    text-decoration: none;
}

.sub-title {
    color:#777777;
    font-size:14px;
    line-height:18px;
    margin-left:4px;
    margin-top:-6px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  /* Create four equal columns that sits next to each other */
  .column {
    flex: 50%;
    max-width: 50%;
    padding: 0 4px;
  }
  
  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column {
      flex: 50%;
      max-width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      flex: 100%;
      max-width: 100%;
    }
  }

@media only screen {

}



/* 480px (small)
----------------------------------------------------*/
@media only screen and (min-width:30em) {

    .gallery-videos {
        width:100%;
        height:100%;
        display:inline-block;
    }

    .gallery-video-half {
        width:100%;
        height:100%;
        display:inline-block;
    }

    .gallery-video-full {
        width:100%;
        height:100%;
        display:inline-block;
    }

    .gallery-video-square {
        width:75%;
        height:75%;
        display:inline-block;
    }


}


/* 768px (medium)
----------------------------------------------------*/
@media only screen and (min-width:48em) {

    .gallery-videos {
        width:50%;
        height:50%;
        display:inline-block;
    }

    .gallery-video-half {
        width:100%;
        height:100%;
        display:inline-block;
    }

    .gallery-video-full {
        width:100%;
        height:100%;
        display:inline-block;
    }

    .gallery-video-square {
        width:75%;
        height:75%;
        display:inline-block;
    }

    .img-circle {
        float:right;
        width:320px;
        height:320px;
        margin-left:40px;
        margin-right:40px;
        margin-bottom:40px;
        border-radius: 50%;
    }

}



/* 960px (large)
----------------------------------------------------*/
@media only screen and (min-width:60em) {

    .gallery-videos {
        width:33%;
        height:33%;
        display:inline-block;
    }

    .gallery-video-half {
        width:50%;
        height:50%;
        display:inline-block;
    }

    .gallery-video-full {
        width:100%;
        height:100%;
        display:inline-block;
    }

    .gallery-video-square {
        width:75%;
        height:75%;
        display:inline-block;
    }

}
/* 1280px
----------------------------------------------------*/
@media only screen and (min-width:80em) {

    .gallery-videos {
        width:25%;
        height:25%;
        display:inline-block;
    }

    .gallery-video-square {
        width:75%;
        height:75%;
        display:inline-block;
    }

}

/* 1600px (x-large)
----------------------------------------------------*/
@media only screen and (min-width:100em) {}

/* 1920px
----------------------------------------------------*/
@media only screen and (min-width:120em) {}

/* Print
----------------------------------------------------*/
@media print {}