/*========== Columns =========== */

.row{
    width: 100%;
    //overflow-x: hidden;
}

div[class^="col"]{
    float: left;
    display: block;
    position: relative;
}

.col-12{
    width: 100%;
}

.col-11{
    width: 91.666666%;
}

.col-10{
    width: 83.3333333%;
}

.col-9{
    width: 75%;
}

.col-8{
    width: 66.66666%;
}

.col-7{
    width: 58.333333%;
}

.col-6{
    width: 50%;
}

.col-5{
    width: 39.666666%;
}

.col-4{
    width: 33.33333%;
}

.col-3{
    width: 25%;
}

.col-2{
    width: 16.666666%;
}

.col-1-7{
    width: 14.28571428571429%;
}

.col-1{
    width: 8.33333%;
}

@media screen and (max-width: 1105px){
    
    .container{
        width: 100%;        
    }
    
    #banner .container{
        height: 250px;
    }
    
    .cal-container{
        max-width: 100%;        
    }
    
    .hide-mobile{
        display: none !important;
    }
    
    .row .day{
        display: none;
    }
    
    .row .hasData{
        display: block;
    }
    
    .row .title{
        display: none;
    }
    
    .col-1-7{
        width: 100%;        
    }
    
    .month-title{
        top: 0;
    }
    
    .go-back{
        position: relative;
        float: left;
    }

    .go-next{
        position: relative;    
        float: right;
    }
    
    #add-event{
        width :100%;
    }
    
    .add-event{
        float: none;
        margin: 80px auto 0;
    }    
    
    .inner-day{
        padding: 0px;
        border-right: none;
        border-bottom: none;
        border-left: none;
        height: auto;
    }
    
    .event{
        padding: 20px 20px 0;
        border-bottom: 1px solid #ccc;
        height: auto;
		position: relative;
    }
	
	.sanctioned-image img{
		margin-right: 15px;
	}
    
   .event .startdate{
        text-transform: uppercase;
    }
	
	/* ===== start event test ===== */
	
	 
	/* ===== End event test ===== */
    
    #logo{
       width: 80px;
       display: block;
       float: none;
    }
    
    #logo img{
        margin-left: 15px;
		//height: 100px;
        display: block;
		width: 100%;
		margin-top:10px;
    }
    
    #banner #title{
        position: absolute;
        top: 15px;
    }
    
    #banner{ 
        //height: 250px;
        display: block;
        background:  #E8E7E8;
    }   
    
	
	.top-banner {
		width: 600px;
		height: 90px;
		background: #41545C;
		position: relative;
		top:10px;
		margin: 0 auto;
		color: #fff;
		text-align: center;
		font-size: 22px;
		line-height: 90px;
		overflow: hidden;
	}

    .month-title h2{
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .prev-next {
        display: none !important;
    }
    
    .hide-mobile{
        display: none;
    }
    
    .show-mobile{
        display: block;
    }
    
    .content{
        margin: 0 auto;
        float: none;
    }
    
    .ad-block-bottom{
        margin: 30px 0 0;
    }
    
    #internal-banner #logo {
        margin-left: 0;
    }
    
    .col-5{
        width: 39.66%;
        margin-left: 2%;
    }
	
	#subLocation select{
		width: 42%;
	}
    
    #subLocation #txt_address{
        width: 52% !important;
        padding: 15px 2%;
    }
	
	.filters {
		float: none;
		margin: 0;
		padding: 7px 1% 7px 3%;
		width: 94%;
	}
	
	.add-event, .reset-filters {
		padding: 10px 17px 10px 37px;
	}
	
	#banner #title {
        top: 35px;
        padding-bottom: 15px;
        //border-bottom: 1px solid #9dadb4;
    }
	
	#top-bar {
        padding: 10px 0;
    }
	
	.more-info{
        margin-top:0;
        margin-bottom: 20px;
        display: block;
    }
	
	.listitemlinkcontainer{
		display: block;
	}
}

@media screen and (max-width: 1105px) and (min-width: 810px){
	
	#banner{
		height: 115px;
	}
	#add-event {
		width: auto; 
		display: inline-block;		
		float: right;
		margin-right: 20px;
	}
	
	#add-event a{
		width: 140px;
		height: 36px;
		margin: 5px 0 20px 15px;
		padding: 0;
		line-height: 36px;
		text-align: center;
	}
	
	#add-event a img {
		display: none;
	}
	
	.go-next {
		right: 25%;
	}
	
	.go-back {
		left: 25%;
	}
	
	#banner #title h1{
		font-size: 35px;
	}
	
	#banner #title {
		top: 25px;
		width: 25%;
		margin-left: 0;
		left: 13%;
	}
	
	.top-banner {
		width: 58%;
		margin-right: 2%;
		float: right;
		top: -90px;
	}
	
	#subLocation select {
		margin: 0;
		width: 42% !important;
	}
	.reset-filters {
		padding: 10px 15px 10px 15px;
	}
	
	.sanctioned-image{
		float: right;
		margin-top: -10px;
	}
	
	.sanctioned-image img {
		margin-right: 15px;
	}
	
	.sanctioned-image img {
		height: 45px;
	}
	
	.sanctioned-image img:nth-of-type(1) {
		height: 40px;
	}
	
	.join-button{
		float :right;
		top: 10px;
		margin-right: 20px;
	}
}

@media screen and (max-width: 810px){
	
	.sharelogos{
		display: none !important;
	}
	
    .sel-col-1{
        width: 48%;
        margin-bottom: 5px;
    }    
    
    .col-2, .col-10{
        width: 96%;
        display: block;
        margin: 0 2%;
    }   
    
    .content{
        margin: 0 auto;
        float: none;
        width: 100%;
    }
    
    .startdate, .enddate, .location, .information, .website{
        display : block;
    }    
	
    #banner #title h1{
        font-size: 25px;
    }
    
    .month-title{
        top: 0;
    }
    
    .month-title h2{
        font-size: 22px;
    }
    
    .add-event {
        margin: 50px auto 0;
    }
    
    #add-event{
            display: none;
    }
   
    #subLevel, #subType, #subState, #subFormat{
        margin-left: 50px;
    }
    
    input[type="text"]{
        padding: 15px 0;
    }
    
    .go-back{
        left: 20px;
    }
    
    .go-next{
        right: 20px;
    }
    
    .col-2{
        cursor: pointer;
    }
    
    .light, .dark{
        background: #202f37;
    }
    
    .full-width-row{
        padding: 0 0 5px;
    }
	
	#filters .full-width-row:nth-of-type(1){
		padding: 10px 0 0;
	}
	
	.locandfiltered .col-5{
		width: 98%;
	}
	
	#filters .divider{
		display: none;
	}
    
    .filters span {
        float: left;         
        top: 10px; 
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
	
	.full-width-row .col-2 h2{
		font-size: 14px;
	}
    
    .reset-filters {
        float: right; 
    }	
    
    form{
        padding: 5px 0 0;
        background: #202f37;
    }
    
    .number, .enddate, .information, .website{
        display: none;
    }    
    
    .eventtitle{
        font-size: 20px;
        font-weight: 700;
        color: #333;
    } 
    
    .startdate{
        font-weight: 700;
        color: #666;
    }
    
    .col-2 .formLocation{
        margin-top: 0;
    }
    
    .col-2{
        background: url(img/selectbac.png) no-repeat 99% 50% #41545c;
        padding: 15px 0;
        border-radius: 5px;
    }
    
    #formLocation{
        display: none;
    }
    
    #subLocation{
        display: block;
    }
    
    #subLocation input, #subLocation select{
        margin: 0;
        width: 41% !important;        
    }
    
    #subLocation input{
        margin-bottom: 5px;
    }
    
    body .col-10{
        display: none;
    }
    
    input[type=checkbox]{
        display: block;
    }
	
	select{
		height: 36px;
		padding: 4px 15px;
	}
	
	.col-2{
		padding: 9px 0;
	}
	
	#subLocation #txt_address{
		padding: 8px 2%;
	}
	
	.join-button{
		display :none;
	}
	
	.sel-col-1:last-of-type{
		margin: 0;
	}
	
	#sel_sanction{
		display: none;
	}
	
	.sanctioned-image{
		float: right;
		margin-top: -5px;
	}
	
	.sanctioned-image img {
		margin-right: 5px;
	}
	
	.sanctioned-image img {
		height: 39px;
	}
	
	.sanctioned-image img:nth-of-type(1) {
		height: 34px;
	}
}

@media screen and (max-width: 600px){
	.top-banner{
		width: 100%;
		display: none;
	}
	
	#banner{
		height: 78px;
	}
}

@media screen and (max-width: 520px){
    .inner-content{
       padding: 25px;
    }
    
    .ad-block-left, .ad-block-right{
        width: 45%;         
    }
	
	
}

@media screen and (max-width: 410px){	
	.reset-filters {
		padding: 10px 15px 10px 15px;
	}
	
	#banner #title{
		left:auto;
		width: 60%;		
	}
	
	.add-event{
		display :none;
	}
	
	.month-title{
		position: relative;
	}
}

@media screen and (max-width: 330px){
	.filters span{
		width: 100%;
	}
	
	.reset-filters {
		float: left;
		margin-top: 15px;
	}
}