/* VICBAR CSS */



/* -----------------------------------------
   Shared Styles
----------------------------------------- */
.menu-toggle{display:none}
.hide{display:none;}


.container2{position: relative;
width: 960px;
margin: 0 auto;
padding: 0; width:100%;}

.container2:before,
.container2:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.container2:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.wpcf7 {
    *zoom: 1;
}

.wpcf7:before,
.wpcf7:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.wpcf7:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.wpcf7 {
    *zoom: 1;
}

.container .eleven.columns .wpcf7 {
min-height: 850px;}

// .container .eleven.columns .wpcf7 input[type="submit"] {margin-top: 850px;}

.slider a:hover img {
 opacity: 1;
}

.slide{position:relative;}

.slider-area{position:absolute; bottom:28%; left:44%;}
.slider-text{color:#999; font-size:22px; width: 72%;}
		.slider-text span{display:inline; color:#B4272D;}
.slider-button{color:#fff; background:#B4272D; padding:15px 0px; font-size:20px; text-align:center; width:190px; border-radius:3px; margin-top:10px;}


.slide:nth-child(1) .slider-area{position:absolute; bottom:20%; left:44%;}
.slide:nth-child(1) .slider-text{color:#fff; font-size:30px; width: 50%; text-align:center; line-height:1.2;}
	.slide:nth-child(1) .slider-text span{color:#FFF; text-align:center; padding:10px 0; line-height: 2;
font-size: 40px;}
.slide:nth-child(1) .slider-button{color:#fff; background:#B4272D; padding:15px 0px; font-size:24px; text-align:center; width:240px; border-radius:3px; margin-top:10px; margin-left: 110px;}

.slide:nth-child(3) .slider-area{position:absolute; bottom:20%; left:44%;}
.slide:nth-child(3) .slider-text{color:#fff; font-size:30px; width: 50%; text-align:center; line-height:1.2;} 
	.slide:nth-child(3) .slider-text span{color:#fff; text-align:center; padding:10px 0; line-height: 2;
font-size: 40px;}
.slide:nth-child(3) .slider-button{color:#fff; background:#B4272D; padding:15px 0px; font-size:24px; text-align:center; width:240px; border-radius:3px; margin-top:10px; margin-left: 110px;}

/* Mobile */

@media only screen and (max-width: 1550px) {
	.slide:nth-child(2) .slider-area{position:relative; left:0; padding:20px 0;}
	.slide:nth-child(4) .slider-area{position:relative; left:0; padding:20px 0;}
	.slide:nth-child(2) .slider-button{margin-bottom:30px; width: 20%; margin-left: 40%;}
	.slide:nth-child(4) .slider-button{margin-bottom:30px; width: 20%; margin-left: 40%;}
	.slide:nth-child(2) .slider-text{color:#fff; font-size:25px; text-align:center; width: 100%;}
	.slide:nth-child(4) .slider-text{color:#fff; font-size:25px; text-align:center; width: 100%;}
	.slide:nth-child(2) .slider-text span{color:#fff;}
	.slide:nth-child(4) .slider-text span{color:#fff;}
	.slider-arrows{top:-140px;}
}

@media only screen and (max-width: 1500px) {
	.slide:nth-child(3) .slider-button{margin-left:0;}
	.slide:nth-child(1) .slider-button{margin-left:0;}
	.slide:nth-child(3) .slider-text{width:70%; text-align:left;}
	.slide:nth-child(1) .slider-text{width:70%; text-align:left;}
	.slide:nth-child(3) .slider-area{left:40%;}
	.slide:nth-child(1) .slider-area{left:40%;}
}

@media only screen and (max-width: 1370px) {
	.slide:nth-child(3) .slider-button{width: 190px; font-size:20px;}
	.slide:nth-child(1) .slider-button{width: 190px; font-size:20px;}
	.slide:nth-child(3) .slider-text{width:90%; font-size:20px;}
	.slide:nth-child(1) .slider-text{width:90%; font-size:20px;}
	.slide:nth-child(3) .slider-area{left:40%;}
	.slide:nth-child(1) .slider-area{left:40%;}
	.slide:nth-child(3) .slider-text span{font-size:30px;}
	.slide:nth-child(1) .slider-text span{font-size:30px;}
}

@media only screen and (max-width: 1200px) {
	.slide:nth-child(3) .slider-area{bottom: 10%;left: 45%;}
	.slide:nth-child(1) .slider-area{bottom: 10%;left: 45%;}

	.slide:nth-child(3) .slider-text{width:100%;}
	.slide:nth-child(1) .slider-text{width:100%;}

	.slide:nth-child(3) .slider-text span{font-size:25px;}
	.slide:nth-child(1) .slider-text span{font-size:25px;}
}

@media only screen and (max-width: 1050px) {
	.slide:nth-child(3) .slider-area{bottom: 7%;}
	.slide:nth-child(1) .slider-area{bottom: 7%;}
}


@media only screen and (max-width: 1020px) {

	.slide:nth-child(3) .slider-area{position:relative; left:0;}
	.slide:nth-child(3) .slider-text{text-align:center; font-size:25px;}
	.slide:nth-child(3) .slider-button{width: 20%; margin-left: 40%; margin-bottom: 30px;}

	.slide:nth-child(1) .slider-area{position:relative; left:0;}
	.slide:nth-child(1) .slider-text{text-align:center; font-size:25px;}
	.slide:nth-child(1) .slider-button{width: 20%; margin-left: 40%; margin-bottom: 30px;}

	.slider-arrows{display:none;}


	.container .column, .container .columns{margin-left:2%; margin-right:2%;}
	#headerbar .vcard{padding:5px 0;}

	.container .sixteen.columns{width:94%; margin-left:3%; margin-right:3%;}
	.container .one-third.column{width:46%;}

	.wpcf7-form p{height:50px!important}
	img {max-width:100%!important; height:auto!important;}
	.container{max-width:960px; width:100%}
	.container .ten.columns{width:55%; float:left;}
	.container .six.columns{width:37%; float:left;}
	#partnerslider .partners{height:auto;}
	#main{padding:50px 0 20px}
	.home .wpcf7-form p:last-child{height:30px}
	#lowerlogo{width:auto!important}
	.container .sixteen.columns{width:97%}
	#footerbarcontent{width:97%}
	#backtotop{right: 0px; bottom: 50px;}
	#pagetitle{width:97%; background-repeat: no-repeat;}
	.container .eleven.columns{width:65%;}
	.container .five.columns{width:30%}

	.container .four.columns{width:100%; margin-right:0; margin-left:0;}
}
@media only screen and (max-width: 960px) {
	.container .twelve.columns{float:left; width:72%}
	#menu-header-menu{margin-left:0}
	.container .four.columns {width: 20%;}
	.container .one-third.column{width:31%}
	#calendar{background-size: contain;}
	.programs{width:46%!important; margin:0 auto}
	.container .three.columns{width:17%}
	.container .five.columns{width:27%}
	#calendarsmall{background-size: contain; width:97%; height: 225px; background-repeat:no-repeat}

	.slider-arrows{display:none;}
}

@media only screen and (max-width: 900px) {
	.logo{position:relative; margin-top:-33px}
	.slider{top:-100px}
	#menu-header-menu li{padding:10px 9px}
	#calendar{height: 275px;}
	#pagetitle{margin-top: -102px; height: 225px;}
	#partnerslider .partners{width:97%}
	#quoteboxcontent{width:80%}
	#quotebox{width:97%; background-repeat:no-repeat; background-size:contain; background: #0e4e94;
border-radius: 10px;
color: #fff;
border: 1px dashed;}
	
	#specialoffer{width:94%; background-repeat:no-repeat; background-size:contain; background: #9e1a1f;
border-radius: 10px;
color: #fff;
		border: 1px dashed;
	padding-left:0; padding-right:0}
	
}
@media only screen and (max-width: 860px) {
  .container .one-third.column {width: 30%;}
	#calendar{height: 255px;}
	.home-one-third h3{margin:5px 0 10px}
	#pagetitle{margin-top: -94px;}
	#quotebox{width:94%}
}

@media only screen and (max-width: 840px) {
	.wp-socializer-buttons .wpsr-btn{width:30%; padding-bottom:10px} 
}

@media only screen and (max-width: 800px) {
	.menu-toggle{padding-top:140px}
	.container .twelve.columns{width:97%; padding-top:10px; text-align:center;}
/*	.container .four.columns{margin-top:-200px; margin-left: 40%;}*/
.container .four.columns{width:24%;/* margin-left: 38%;*/ top:40px; left:40%; position:absolute; margin-top:0; margin-left:0;}
	.slider{top:0; margin-bottom: 0px;}
	#menu-header-menu li{float:none; border:none;}
	#menu-header-menu{height:33px; padding-top: 12px; width: 100%; margin-top: 180px;}
	.menu{margin-top:0;}
	.sub-menu{top:204px; margin-left: 0px;}
	#menu-header-menu li .sub-menu li a{display:inline-block; width:100%}
	#headerbar .vcard p {text-align: center;}
	#footerbar .menu-header-menu-container{padding-top:0}
	.footer-menu{width:97%}
	.container .three.columns{width:45%}
	.container .five.columns{width:45%}
	#footermenus {height: auto;padding-bottom: 20px;}
	#pagetitle {margin-top: 0px; height:200px}
	#sidebar{width:29%!important}
}

@media only screen and (max-width: 767px) {
	.container .one-third.column {width: 45%;}
	.footer-menu li{padding-bottom:10px}
	#footerbar{height:50px}
	#backtotop{bottom:100px}
	#calendar {
    height: 300px;
    max-width: 304px;
    padding: 0px;
    margin: 20px 30px;
    margin: 10px 30px;}
	#pagetitle{height: 190px;}
	.container .eleven.columns{width:97%}
	#sidebar {width: 70% !important;margin-left: 15%;}
	#calendarsmall{width: 50%; margin-left:25%}

	.slide:nth-child(1) .slider-button, .slide:nth-child(2) .slider-button, .slide:nth-child(3) .slider-button, .slide:nth-child(4) .slider-button{width:40%; margin-left:30%;}

}

@media only screen and (max-width: 690px) {
	#homelrgvideo, #partnerslider, #calendar, .home-one-third, #footerbar, #specialoffer, #text-3, #calendarsmall{display:none!important;}
	.page-template-default .container .programs{display:none;}
	.page-template-default .container .sixteen.columns h2{display:none;}
	.resp{display:none!important;}

	iframe{max-width:97%}
	#pagetitle{height: 170px;}
	.container .ten.columns{width:94%; float:left; margin-left:3%; margin-right:3%;}
	.container .six.columns{width:94%; float:left; max-width:650px; margin-left:3%; margin-right:3%;}
	.wp-socializer-buttons .wpsr-btn{width:auto; padding-bottom:10px}
	
	.programs{width:45%!important}
/*	.menu-header-menu-container{padding-top:160px}*/
#headerbar{height:40px;}
	
	#menu-header-menu{display:none}
	.menu-toggle{display:block!important;}
	.menu-toggle {
		cursor: pointer;
		display: inline-block;
		font: bold 16px/1.3 "Source Sans Pro", Helvetica, sans-serif;
		margin: 0;
		display:inline-block;
	}

	.menu-toggle,
	.menu-toggle:hover,
	.menu-toggle:focus,
	.menu-toggle:active {
		
		background: none;
		border: none;
		color: #fff;
		padding: 8px 0 8px 20px;
		text-align: left;
		width:100%;
		background: url("/vicbarschoolwp/wp-content/themes/vicbarschooltheme/images/listbackground.jpg") repeat scroll 0% 0% transparent;
	}

	#menu-header-menu{margin-top:0; height:auto;}
	#menu-header-menu li{display:block; width:96%; text-align:left;}
	#menu-header-menu li a{text-align:left;}
	.sub-menu{position:relative; top:0; width:100%;}

	.menu-toggle,
	.menu-toggle:hover{
		margin-top: 180px;
	}

	.menu-toggle:focus,
	.menu-toggle:active{
		margin-top: 180px;
	}

	.menu-toggle:focus {
		outline: thin dotted;
	}

	.menu-toggle:after {/*
		content: "\f502";*/
		font-size: 12px;
		padding-left: 8px;
		vertical-align: -4px;
	}

	.toggled-on .menu-toggle:after {/*
		content: "\f500";*/
		vertical-align: 2px;
	}

	.toggled-on #menu-header-menu,
	.toggled-on #menu-header-menu > ul {
		display: block;
		margin-left: 0;
		padding: 0;
		width: 100%;
	}

	.toggled-on li,
	.toggled-on .children {
		display: block;
	}

	.toggled-on #menu-header-menu li > ul {
		background-color: transparent;
		display: block;
		float: none;
		margin-left: 20px;
		position: relative;
		left: auto;
		top: auto;
	}

	.toggled-on #menu-header-menu li > ul a {
		color: #141412;
		width: auto;
	}

	.toggled-on #menu-header-menu li:hover > a,
	.toggled-on #menu-header-menu .children a {
		background: #f7d118;
		color: #000;
	}

	.toggled-on #menu-header-menu > li a:hover,
	.toggled-on #menu-header-menu > ul a:hover {
		color: #fff;
	}

	.toggled-on #menu-header-menu > li a:focus,
	.toggled-on #menu-header-menu > ul a:focus {
		color: #fff;
	}
	
		.megaMenuToggle-icon {
	display: inline-block;
	background: #fff;
	background: #fff;
	height: 2px;
	width: 16px;
	position: relative;
	float: right;
	margin-top: 14px;
	right: 5%;}

.megaMenuToggle-icon:before {
	content: '';
	position: absolute;
	background: #fff;
	background: #fff;
	height: 2px;
	width: 16px;
	top: -4px;
	}

.megaMenuToggle-icon:after {
	content: '';
	position: absolute;
	background: #fff;
	background: #fff;
	height: 2px;
	width: 16px;
	top: -8px;
	}
}

@media only screen and (max-width: 640px) {
.programs{width:96%!important}
	.footer-menu li{width:96%; border-right:none;}
	#footerbar{height:220px; padding:20px 0;}
	#footerbarcontent{width:100%;}
	.footer-menu{width:100%;}
	#backtotop{right:20px;}

	.hide{display:block;}
	.show{display:none;}
	.slider{background-color: rgba(0,0,0,0.8);}
	#headerbar .container{background-color: rgba(0,0,0,0.8);}
	.container{background-color: rgba(0,0,0,0.8);}
	.container .four.columns{width:30%; left:35%;}
	/*.slides{max-height:360px!important;}*/

	.programcontainer{width:50%!important; margin-left: 25%!important; background-size: contain;}
	.hovercontainer{width:50%;}
	.onethirdbelowbox{width:100%; background-size: contain!important; background-repeat: no-repeat!important; height: 100%;}
}

@media only screen and (max-width: 600px) {
/*	.container .four.columns{margin-top:-177px}*/
	#calendar{height: 260px;}
	#pagetitle{height: 150px;}
	#calendarsmall{width:70%; margin-left:15%}

	.container .four.columns{left:35%; width:32%;}

	.programcontainer{width:52%!important; margin-left: 24%!important;}
	.hovercontainer{width:52%;}
	/*.slides{max-height:340px!important;}*/
}

@media only screen and (max-width: 550px) {
	.container .four.columns{left:33%; width:34%;}

	.programcontainer{width:56%!important; margin-left: 22%!important;}
	.hovercontainer{width:56%;}
}

@media only screen and (max-width: 520px) {
	#calendar{height:300px; width: 60%; max-width: 304px; margin-left:20%}
	.container .one-third.column{width:70%!important; margin-left:10%;}
	#pagetitle{height: 130px;}
	#quotebox{height:auto; width:97%; padding:0}
	#quoteboxcontent{width:100%; clear:both; margin-left:0}
	#quotebox .bio{margin-left:40%}
	.container .four.columns{left:31%; width:38%;}

	.programcontainer{width:86%!important; margin-left: 14%!important;}
	.hovercontainer{width:60%;}

	.slide:nth-child(1) .slider-button, .slide:nth-child(2) .slider-button, .slide:nth-child(3) .slider-button, .slide:nth-child(4) .slider-button{width:50%; margin-left:25%} 
}

@media only screen and (max-width: 500px) {
.container .four.columns {width: 38%; left: 32%;}
	.container .ten.columns{width:94%}
	.container .six.columns{width:94%}
	#partnerslider .partners{width:94%}
	.container .three.columns{width:97%}
	.container .five.columns{width:97%}
	footer .map img{width:auto!important}

	.programcontainer{width:90%!important; margin-left: 10%!important;}
	.hovercontainer{width:63%;}
}

@media only screen and (max-width: 460px) {
		.container .four.columns{width: 42%; left: 29%;}

		.programcontainer{width:98%!important; margin-left: 2%!important;}
		.hovercontainer{width:70%;}
		.programs{margin-left: 15%!important;}

		h2{font-size:32px;}
}


@media only screen and (max-width: 420px) {
.container .four.columns {width: 46%; left: 27%;}
	#calendar{height:300px; width: 76%; max-width: 304px; margin-left:12%}
	.postthumbnailimg{width:80%; margin-left:10%} 
	#pagetitle{height: 110px;}
	.course p{clear:both}
	#calendarsmall{width:90%; margin-left:5%}

	.programcontainer{width:100%!important; margin-left: 0%!important; height:185px;}
		.hovercontainer{width:70%; height:185px;}
	.onethirdbelowbox p{width:210px; top:115px;}
}

@media only screen and (max-width: 379px) {
.container .four.columns {width: 38%; left: 31%;}
	#calendar{height:260px; width: 76%; max-width: 304px; margin-left:12%}
	#pagetitle{height: 100px;}
	.onethirdbelowbox p{width:200px;}

	.programcontainer{height:168px; border:none!important;}
	.onethirdbelowbox p{top:10px;}
	#menu-header-menu li{width:94%;}
}

@media only screen and (max-width: 300px) {
.container .four.columns {width: 48%; left: 26%;}

}