/*!
*  general.css
* Insert general rules 
* created by ivica.ivanovski@gmail.com
*/
/* ====================================================================================================================
*   Content:
*   0.1 image subheader
*   0.2 call to action
*   0.3 how to win
*   0.4 weeks topics
*   0.5 star-video
*   0.6 header-inner
*   0.7 video-media
*   0.8 user quesion
*   0.9 social row
*   1.0 filter
*   1.1 question list
*
*  ====================================================================================================================
*/




/* ====================================================================================================================
*   0.1 image subheader
*  ====================================================================================================================
*/
.image-subheader{
	/*background: transparent url(/Content/Styles/images/image-subheader-bg.jpg) top center no-repeat;*/
    background-color: #fff;
	background-size: cover;
	padding: 20px 10px;
	position: relative;
	min-height: 172px;
}
.image-subheader.auto-h{
	min-height: auto;
	float: left;
	width: 100%;
}
@media screen and (max-width: 768px){
	.image-subheader.auto-h{
		text-align: center;
	}
}

/* ====================================================================================================================
*   0.2 call to action
*  ====================================================================================================================
*/
.vip-pass-img{
    position: absolute;
    top: -35px;
    width: 26%;
    left: 2px;
    max-width: 254px;
}


.call-to-action-wrapper{
	/*margin-left: 20%;

	width: 330px;*/
	/*padding:0 0 0 2%;*/

}
.call-to-action-title{
font-family: 'MetroBlack', sans-serif;
	color:#810f13;
	font-size: 24px;
	font-weight: normal;
	white-space: nowrap;
}
                
.call-to-action-content{
	font-size: 18px;
	font-family: 'MetroLite', sans-serif;
	font-weight: 300;
	margin-bottom: 0;
	padding-bottom: 0;
        /*width: 350px;*/
}

.abc-logo-img{
	position: absolute;
	top:-37px;
	right: 10px;
}
.abc-small-logo{
	position: absolute;
	top:-30px;
	right: -5px;
}
@media screen and (max-width: 805px){
	.call-to-action-wrapper{
		width: auto;
		margin-left: 0;
		/*margin-right: 220px;*/
	}
	.vip-pass-img{
        display: none;
    }
    .abc-logo-img,
    .abc-small-logo{
    	width: 60px;
    	top:-30px;
    }
	

}

@media screen and (max-width: 480px){
	.call-to-action-title{
		white-space: normal;
		text-align: center;
	}
.call-to-action-wrapper{
		width: 100%;
		margin-left: 0;
}	
	.abc-logo-img,
	.abc-small-logo{
		max-width: 40px;
		top:-20px;
	}
	.abc-small-logo{
		top:-40px;
	}

}
/* ====================================================================================================================
*   0.3 how to win
*  ====================================================================================================================
*/
.how-to-win-wrapper{}

.how-to-list-wrapper{
	margin: 0;
	padding: 0;
}
.how-to-list-wrapper-item{
    padding: 0 1.5%;
    float: left;
    width: 33.3%;
    text-align: center;
    font-size: 14px;
    list-style: none;

}
.how-to-list-wrapper-item img{
	display: block;
	margin:0 auto;
}
.item-1{
	
	
}
.item-2{}
.item-3{}
@media screen and (max-width: 480px) {
	.how-to-list-wrapper-item{
		width: 100%;
		font-size: 18px;
		padding-bottom: 50px;
	}
}

/* ====================================================================================================================
*   0.4 weeks topics
*  ====================================================================================================================
*/

.weeks-topics-list{
margin: 0;	
padding: 0;	
}
.weeks-topics-item{
		list-style: none;

}
.weeks-topics-item .inner-content{
	background-color: #fff;
	margin-bottom: 10px;	
}
.weeks-topics-item img{
display: block;	
width: 100%;
}
.image-link{
	overflow: hidden;
	display: block;
	height: 160px;
}		
@media screen and (max-height: 960px) {
	.image-link{
		height: 140px;
	}	
}
@media screen and (max-height: 800px) {
	.image-link{
		height: 110px;
	}	
}
@media screen and (max-height: 800px) {
	.image-link{
		height: auto;
	}	
}

/* ====================================================================================================================
*  0.5 star-video
*  ====================================================================================================================
*/

.star-video-wrapper{
	text-align: center;
	
}
.star-video-inner{
	position: relative;
	display: inline-block;
	margin: 0 auto;
}
.star-video-image{

}
.explanation{
	/*position: absolute;*/
	color:#fff;
	font-size: 14px;
	/*top: 70%;*/
	bottom: 0;
	left:20px;
	right: 20px;
	text-transform: capitalize;
}
	

.video-input-wrapper{
	position: relative;
	width: 728px;
	margin: 10px auto;
	max-width: 100%;
	padding: 0 5px;
}
.video-input-wrapper .large-input{
	padding: 20px 40px 20px 20px;
}
.large-input{
	background: #fff;
	width: 100%;
	padding: 2% 5%;

}
.input-addon{
	position: absolute;
    right: 10px;
    top:5px;
    font-size: 36px;
	color:#cccccc;
}
.video-input-wrapper .accept-terms{
	float: right;
	color:#9d9d9d;
	position: relative;
}
.video-input-wrapper .accept-terms input{
	width: 20px;
    height: 20px;
    display: block;    
    position: absolute;
    left:-30px;
    margin: 0;

}

@media screen and (max-width: 768px) {
.explanation{

		display: none;
	}
}
@media screen and (max-width: 480px) {
	.video-input-wrapper{
		width: 96%;
	}
	.explanation{
		top: 60%;
		font-size: 12px;
		display: none;
	}
	.input-addon.icon-pencil{
		display: none;
	}
	.video-input-wrapper .large-input{
		font-size: 12px;
	}
}

		
/* ====================================================================================================================
*   0.6 header-inner
*  ====================================================================================================================
*/
.vip-pass-img-header{
	position: absolute;
	width: 202px;
	top: -20px;
	left: 10px;
}
.header-inner{
	text-align: center;
	padding: 30px 0 20px;
}

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

	.vip-pass-img-header{
	display: none;
	}

	}
@media screen and (max-width: 480px) {

	

	.header-inner{
	padding: 10px 0 10px;
}
}

/* ====================================================================================================================
*   0.7 video-media
*  ====================================================================================================================
*/
.video-media-wrapper{
	position: relative;
	min-height: 150px;
	background-color: #ccc;
	text-align: center;

}
.video-media-wrapper .video-media-poster{}
.video-media-wrapper .video-button{
	position: absolute;
    font-size: 42px;
    z-index: 2;
    color:#fff;
    background:rgba(0,0,0,0.5);
    width: 66px;
    height: 66px;
    line-height: 66px;
    text-align: center;
    border-radius: 100px;
    left:50%;
    margin-left: -33px;
    top:50%;
    margin-top: -33px;

    -webkit-transition: all 0.2s ease-out;  /* Chrome 1-25, Safari 3.2+ */
    -moz-transition: all 0.2s ease-out;  /* Firefox 4-15 */
    -o-transition: all 0.2s ease-out;  /* Opera 10.50–12.00 */
    transition: all 0.2s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
.video-media-wrapper .video-button:hover{
	background:rgba(0,0,0,1);
	-webkit-transform: scale(1.07);
	-moz-transform:    scale(1.07);
	-ms-transform:     scale(1.07);
	-o-transform:      scale(1.07);
	transform:         scale(1.07);

}
.video-media-wrapper .video-button i{
	margin-right: -5px;
}
@media screen and (max-width: 480px){
 .video-media-wrapper{
	margin-bottom: 10px;
 }
}

/* ====================================================================================================================
*   0.8 user quesion
*  ====================================================================================================================
*/

.user-question-wrapper{
	min-height: 60px;
}
.user-question-wrapper .user-image{
	display: inline-block;
	position: absolute;
	background: #fff;
	width: 70px;
	height: 70px;
}
.user-question-wrapper .user-question-content{
	display: inline-block;
	margin-left: 90px;
	padding: 0;
	margin: 10px 0 15px 90px;
	line-height: 1;
}

/* ====================================================================================================================
*   0.9 social row
*  ====================================================================================================================
*/

.social-row{clear: both;float: right;padding-top: 20px;color:#828282;	}
.social-row span{
	text-transform: uppercase;
}
.social-icon-facebook,.social-icon-twitter,.social-icon-google,
.social-icon-instagram{
font-size: 26px;
width: 42px;
height: 42px;
line-height: 42px;
display: inline-block;
margin-left: 4px;
color:#fff;
background-color: #054792;
text-align: center;	
opacity: .8;
 -webkit-transition: all 0.2s ease-out;  /* Chrome 1-25, Safari 3.2+ */
    -moz-transition: all 0.2s ease-out;  /* Firefox 4-15 */
    -o-transition: all 0.2s ease-out;  /* Opera 10.50–12.00 */
    transition: all 0.2s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

.social-icon-facebook:hover,.social-icon-twitter:hover,.social-icon-google:hover,
.social-icon-instagram:hover{
	opacity: 1;
color:#fff;
	-webkit-transform: scale(1.07);
	-moz-transform:    scale(1.07);
	-ms-transform:     scale(1.07);
	-o-transform:      scale(1.07);
	transform:         scale(1.07);

}



.social-icon-facebook{}
.social-icon-twitter{
background-color: #00a3bb;

}
.social-icon-google{
	background-color: #920505;
}
.social-icon-instagram{
	background-color: #924005;
}


					

/* ====================================================================================================================
*   1.0 filter
*  ====================================================================================================================
*/

.filter-wrapper{
max-width: 1047px;
    margin: 0 auto;
    overflow: hidden;
    clear: both;
    padding: 15px 0;
}
.filter-inner{
float: right;
width: 100%;
text-align: right;
}
.filter-inner .filter-label{
font-size: 13px;
color:#515151;
font-family: 'MetroBlack', sans-serif;
display: inline-block;

}
.filter-inner .filter-select{
display: inline-block;
margin:0 10px;
width: auto;
min-width: 25%;
}
.filter-block{
float: right;
}
@media screen and (max-width: 480px) {
	.filter-block{
		display: block;
		width: 65%;
		
	}
.filter-block .filter-select{
width: 95%;
}
	.filter-block label.filter-label{
		display: block;
		text-align: left;
		margin: 10px;
	}
	.filter_form{
		width: 98%;
		margin: 0 auto;
		overflow: hidden;
	}

}

/* ====================================================================================================================
*   1.1 question list
*  ====================================================================================================================
*/

.question-list{
padding: 0;
margin: 0;
/*    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;


    flex-flow: wrap;*/
}
.question-list-item{
    list-style: none;
    padding: 0;
/*    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;*/
    margin: 1%;
  /*  width: 31.33333%;*/
  width: 23%;
  float: left;
  
  overflow: hidden;
}
.question-item-inner{
	background-color: #fff;
	position: relative;
	padding-bottom: 30px;
	max-width: 100%;
	height: 240px;
}
.question-images-wrap{
overflow: visible;
width: 100%;
float:left;
position: relative;

}
.question-images-wrap img{
/*width: 50%;*/
/*float: left;*/
}
.question-user-link{
    width: 50%;
    float: left;
    height: 90px;
    overflow: hidden;
}
.question-user-image{

}
.question-star-image	{

}
.question-content		{
    font-family: 'MetroBlack', sans-serif;
    font-size: 14px;
    margin: 0px 15px 10px;
    clear: both;
    position: relative;
    text-indent: 9px;
    padding-top: 15px;
    overflow: hidden;
    /*white-space: nowrap;*/
    max-width: 100%;
    display: block;
    text-overflow: ellipsis;
}
.question-content:before{
	content:"“";
	position:absolute;
top:15px;
left:-9px;
}
.question-content:after{
	content:"”";

}


.question-info{
color:#515151;
margin: 5px 15px 10px;
}
.question-share-counter{
position: absolute;
bottom: 10px;
left:15px;
font-size: 13px;
color: #000;
font-family: 'MetroBlack', sans-serif;
}

.right_button_actions{
position: absolute;
right: 10px;
bottom: 10px;
}
.right_button_actions .action-btn{
	background: none;
	color:#444;
	font-size: 18px;
	padding: 0;
}
.question-share-counter i{
color:#de9e00;
}

.question-status {
position: absolute;
bottom: -10px;
right: -5px;

}
.question-status span{
	line-height: 20px;
    text-align: center;
    padding: 5px 10px;
    float: left;
    font-size: 10px;
    font-family: 'MetroBlack', sans-serif;
}
.question-status .answered{
	background-color: #871014;
	color:#fff;
}
.question-status .winner{
	background-color: #de9e00;
	color:#000;
}

@media screen and (min-width: 781px){
	.question-list-item{
	width: 24%;
	margin:1% 0.5%;
	}
	.question-user-link{
		height: 45px;
	}
}
@media screen and (min-width: 901px){
.question-user-link{
		height: 55px;
	}
}
@media screen and (max-width: 780px) {
.question-list-item{
	width: 32.3%;
	margin:1% 0.5%;
	}
	.question-user-link{
		height: 55px;
	}
	
}
@media screen and (max-width: 670px) {
.question-list-item{
	width: 48%;
	margin:1% 1%;
	}
	.question-user-link{
		height: 60px;
	}
}
@media screen and (max-width: 480px) {
   .question-list-item{
   	width: 95%;
   	margin:0 auto 20px;
   }
   .question-item-inner{
   	margin:auto;
   	width: 100%;
   }
   .question-user-link{
   	height: 75px;
   }
}
@media screen and (max-width: 319px) {
   .question-user-link{
   	height: 45px;
   }

	}




 /* 1.1 Video repeater popup */

.record_modal{

}
.record_modal .modal-dialog{
    width:  65%;
}

.record_modal .modal-content{
  color:#fff;
background: #3a3a3a; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #3a3a3a 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#3a3a3a), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #3a3a3a 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #3a3a3a 0%,#000000 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #3a3a3a 0%,#000000 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #3a3a3a 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
.record_modal .modal-header{

}
.record_modal .modal-header h1{
font-weight: normal;
font-family: 'MetroLite', sans-serif;
font-size: 42px;

	}
.record_modal .close{
color:#fff;
position: absolute;
right: 10px;
border:0;
text-align: center;
}
.record_modal .close span{
font-weight: bold;
line-height: 10px;
}
button.close{
    position:relative;
    z-index:999;
}
.record_modal .modal-body{
  text-align: center;

}
.record_modal .modal-body video,
.record_modal .modal-body iframe
{
    max-width:100%;
}
.modal-video-wrapper{
  position: relative;
  overflow: hidden;
  width: 80%;
  height: 600px;
  margin: 0 auto;
  background:#d75c30 url(../images/web-cam.png) center no-repeat;

  border: 1px solid #fff;
  box-shadow: inset 0px 0px 20px 0px #fff;
  text-align: center;  
}
.modal-video-wrapper .bg-image-camera{  position: absolute;
  width: 60%;
  opacity: 0.2;
  left: 50%;
  margin-left: -282px;
  top: 20px;}

#recordingDescription{
    width: 80%;
    margin: 5px auto;
    text-align: left;
    display: block;
}
.record_modal .start_recording_btn{
  top: 50%;
  position: relative;
  display: block;
  width: 150px;
}
.start_recording_btn{

}
.record_modal #preview{

}
.record_modal #container{

}
.record_modal #lblCountDown{

}
.record_modal .video_record_wrap{

}
.record_modal .modal-footer{

}
.round_btn{
    color: #d3d3d3;
    background: #3e3939;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 12px;
    margin: 10px auto;
    float: none;
    clear: both;
    display: inline-block;
}
.stop-wrapper {
    position: relative;
    z-index: 1111;
    float: left;
    padding: 15px;
    overflow: hidden;
    }

.action-btn{
    font-size: 12px;
    display: inline-block;
    background-color: #075a81;
    color:#fff;
    padding:10px 12px;
  text-transform: uppercase;
}
.action-btn i{
    opacity: 0.8;
}
.action-btn:hover{
    color:#ebebeb;
    text-decoration: none;
}
.orange-btn{
background-color: #d75c30;
}
.red-btn{
   background-color: #ee0b26; 
}
.gray-btn{
background-color: #9c9696;
}
.btn.btn-gray{
    border-radius: 50px;
}
.btn.btn-gray,.gray-dropdown{

background-color: #3e3939;
color:#9c9696;
font-size: 12px;

}
.btn.btn-gray .caret{
    border-top-color:#9c9696;
}
.btn.btn-gray:hover,
.btn:focus{
color:#fff;
}


.text-center{
text-align: center;
}