/*
Theme Name: PRG15
Description: Theme for Paul Roos Gymnasium
Author: Arie Olivier
*/


/* Colours:

gold: #B18607

*/

@media only screen {
/* Headings */


.page-title {
	text-shadow: 0 0 5px #000;
	padding-bottom: 0.5em;
	font-size: 2.75rem;
	color: #FFF !important;
}
.entry-title {	
	clear: both;
	font-weight: normal;
	padding: 0 0 4px;	
	border-bottom: 1px dotted #8B0923;
	color: #8B0923;
	font-size: 1.8rem;
	margin: 0 0 1.250rem 0;
}
.postmetadata {
	clear: both;
	padding: 0 2px 10px 2px;
	border-bottom: 1px dotted #8B0923;
	margin: 1rem 0;
}

.hd-bar {
	width: 100%;
	padding: 0.8rem;
	background-color: #8B0923;
	margin-bottom: 2rem;
}
.hd-bar h1, .hd-bar h2, .hd-bar h3, .hd-bar h4 {
	color: #fff;
	text-align: center;
	font-weight: bold;
	margin: 0;
	font-size: 1.8rem;
	text-transform: uppercase;
	letter-spacing: 0.4rem;
}
.uppercase {
	text-transform: uppercase;
}

/* Equal height columns */

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='columns-'] {
  flex-grow: 1;
}
.valign-center {
  position: relative;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
}

/* Backgrounds */

.bg-white {
	background-color: #fff;
}

/* Spacing */

.mb-1 {
	margin-bottom: 10px;
}

/* Map/video responsive */

.map-responsive {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
	margin-bottom: 1.2rem;
}
.map-responsive iframe, .map-responsive video {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

/* Navigation
-------------------------------------------------------------- */

.navigation {
	color: #666;
	font-size: 11px;
	line-height: 18px;
	overflow: hidden;
	padding-bottom: 10px;
	border-bottom: 1px dotted #999;
	margin: 1rem 0;
}
.navigation a:link,
.navigation a:visited {
	color: #6E0516;
	text-decoration: none;
}
.navigation a:active,
.navigation a:hover {
	color: #B18607;
}
.nav-previous {
	float: left;
	width: 50%;
}
.nav-next {
	float: right;
	text-align: right;
	width: 50%;
}
#nav-above {
	margin: 0 0 18px 0;
}
#nav-above {
	display: none;
}
.paged #nav-above,
.single #nav-above {
	display: block;
}
#nav-below {
	margin: -18px 0 0 0;
}

/* Events Plugin */

.side-nav .ai1ec-agenda-widget-view .ai1ec-event {
	font-size: 0.87rem;
}

/* =Images
-------------------------------------------------------------- */

/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/

.img100 {
	width: 100%;
	height: auto;
}

img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}
.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 24px;
	margin-top: 4px;
}
.alignright,
img.alignright {
	display: inline;
	float: right;
	margin-left: 24px;
	margin-top: 4px;
}
.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom: 12px;
}
.wp-caption {
	background: #fff;
	/*border: 1px solid #d8d8d8;*/
	margin-bottom: 12px;
	max-width: 100% !important; /* prevent too-wide images from breaking layout */
	-moz-border-radius-bottomleft: 6px;
	border-bottom-left-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	border-bottom-right-radius: 6px;
	padding-bottom: 5px;
}
.wp-caption img {
	margin-bottom: 5px;
}
.wp-caption p.wp-caption-text {
	color: #666;
	font: 11px Arial, Helvetica, sans-serif;
	line-height: 130%;
	margin: 3px 5px;
	text-align: center;
}
.wp-smiley {
	margin: 0;
}
.cat-entry img {
	float: right;
	margin: 0.2rem 0 0.1rem 1rem;
}
.cat-entry a {
	color: #444444;
}
.cat-entry a:hover, .cat-entry a:focus {
	color: #777;
}
.cat-entry h3 a {
	color: #6E0516;
}


/* =error404
----------------------------------------------- */

.error404 #main #searchform {
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-width: 1px 0;
	margin: 0 -8.9% 12px;
	overflow: hidden;
	padding: 12px 8.9%;
}
.error404 #main /* {
	width: 95%;
}*/
.error404 #main .widget {
	clear: none;
	float: left;
	margin-right: 3.7%;
	width: 30.85%;
}
.error404 #main .widget_archive {
	margin-right: 0;
}
.error404 #main .widget_tag_cloud {
	float: none;
	margin-right: 0;
	width: 100%;
}
.error404 .widgettitle {
	font-size: 10px;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
}

/* FS Contact Form */

#fscf_required1, #fscf_required2, #fscf_required3, #fscf_required4, #fscf_required5, #fscf_required6,
.nf-form-fields-required {
	float: right;
	font-size: 80%;
}
.fscf-div-redirecting {
	padding: 1.2rem 0;
	margin: 1rem 0;
	text-align: center;
	font-size: 1.6rem;
	color: #8fb65b;
	background: #fff;
	border-radius: 4px;
}


/* Calendar Widget */

.widget_calendar #wp-calendar {
	color: #555;
	width: 95%;
	text-align: center;
}
.widget_calendar #wp-calendar caption,
.widget_calendar #wp-calendar td,
.widget_calendar #wp-calendar th {
	text-align: center;
}
.widget_calendar #wp-calendar caption {
	font-size: 11px;
	font-weight: 500;
	padding: 5px 0 3px 0;
	text-transform: uppercase;
}
.widget_calendar #wp-calendar th {
	background: #f4f4f4;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-weight: bold;
}
.widget_calendar #wp-calendar tfoot td {
	background: #f4f4f4;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

/* Comments */

#comments {
	font-size:14px;
}

.commentlist {
	margin:20px 0;
	padding:0;
	border-width:0 0.1em 0.1em 0;
	border-color:#eee;
	border-style:solid;
	text-align: left;
}

.commentlist li {
	list-style:none;
	margin:0;
	padding:0;
	border-width:0.1em 0 0 0.1em;
	border-color:#eee;
	border-style:solid;
}
#content .commentlist li p {
	text-align: left;
}

li.comment div, li.pingback div {
	padding:20px;
	overflow:auto;
}

li.comment div div, li.pingback div div {
	padding:0;
	overflow:visible;
}

.commentlist li.even {
	background-color:#fafafa;
}

.commentlist li.odd {
	background-color:#f6f6f6;
}

ul.children li {
	list-style:none;
}

.avatar {
	float:right;
	border:1px solid #eee;
	padding:2px;
	margin:0;
	background:#fff;
}

.comment-meta, .reply {
	margin:0;
	padding:0;
	font-size:0.8em;
}

.comment-author cite {
	font-style:normal;
	font-weight:bold;
	font-size:1.2em;
}


textarea#comment {
}

#comments div.navigation {
	font-size:0.9em;
}

.comment-author.vcard /* to counter foundation vcard */{
	border: none;
	width: 100%;
}


/* =Footer
----------------------------------------------- */

#colophon {
	clear: both;
}
#supplementary {
	border-top: 1px solid #ddd;
	padding: 12px 7.6%;
	overflow: hidden;
}

/* Two Footer Widget Areas */
#supplementary.two .widget-area {
	float: left;
	margin-right: 3.7%;
	width: 48.1%;
}
#supplementary.two .widget-area + .widget-area {
	margin-right: 0;
}

/* Three Footer Widget Areas */
#supplementary.three .widget-area {
	float: left;
	margin-right: 3.7%;
	width: 30.85%;
}
#supplementary.three .widget-area + .widget-area + .widget-area {
	margin-right: 0;
}

.credits, .text-small {
	font-size: 0.725rem;
}

/* Masonry Custom CSS  */

.masonry { /* Masonry container */
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

.m-item { /* Masonry bricks or child elements */
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
	border-bottom: 1px dotted #006c94;
	padding-bottom: 0.8rem;
}
.m-item h2 {
	line-height: 0.8;
}
.m-item p {
	margin-bottom: 12px;
}
.m-item p a {
	color: #444;
}
.m-item p a:hover, .m-item p a:focus {
	color: #F63;
}
}


@media only screen and (max-width: 40em) {
	.alignleft,
	.alignright,
	.aligncenter,
	img.alignleft,
	img.alignright,
	img.aligncenter {
	float: none;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.wp-caption img {
	margin: 0 0 5px;
}
}

@media only screen and (min-width: 20em) {
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

/*@media only screen and (min-width: 900px)*/
@media only screen and (min-width: 40.063em) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  iframe, object {
	  max-width: 100%;
	  height: auto;
}