#screeninfo:before { content: "320px"; }

#slide_text{
	margin:170px 0 0 0;	
}

.container{
	width: 90%;
	display:inline-block;
}

.backhome{
	display: none;
}


#slide_text h1{
		font-size:50px;
	    font-family: 'Passion One', arial;
		text-transform:uppercase;
		margin-bottom:0;
		

}

#slide_text p{
    font-size: 18px;
}


.hblock{
	float:none;
	display:inline-block;
	width:90%;
	margin:0px 0px 15px 0;
}

.f_right{
	width:370px;
	float:right;
}

.sponsers{
	width:596px;
}

#menu{
	float:right;
	display:block;
	margin:20px 0 0 0;
	cursor:pointer;
}

nav ul{
	float:right;
	width:150px;
	z-index:999999999;
	position:relative;
	display:none;
	padding-bottom:10px;
	background:rgba(0,0,0,0.9);
}

nav ul li{
	width:100%;
}

nav ul li a{
	margin:10px 0 0 10px;
	width:100%;
}


.quote h1{
	font-size:53px;
	width:80%;
	letter-spacing:-2px;
	display:inline-block;
	float:none;
}

.f_bottom{
	display:none;
}


.f_right ul{
	display:none;
}

.hblock img{
}

#articletitle{
	display:none;
}

#articletitle h1{
	font-size:30px;
	letter-spacing:-3px;
	display:none;
	}
	
	#articletitle img{
		max-width:300px;
	}
	
	.addthis_toolbox {
		display:none;
	}
		
		
		
	#article img{
	}
	
		#article{
			max-width:100%;
	}
	
	
	
	
	
	
	.question{
		font-size:18px;
		text-align:left;
		line-height:1.7em;
		max-width:100%;
		margin-right:0;
		color:#888;
		float:left;
		margin-top:10px;
		
			animation: fadein 0.5s cubic-bezier(1,0,0,1) 1;
	-moz-animation: fadein 0.5s cubic-bezier(1,0,0,1) 1;
	-webkit-animation: fadein 0.5s cubic-bezier(1,0,0,1) 1;
	-o-animation: fadein 0.5s cubic-bezier(1,0,0,1) 1;
	}
	
	.answer{
		font-size:14px;
		text-align:left;
		line-height:1.7em;
		max-width:100%;
		color:#000;
		float:left;
		
			animation: fadein 1.5s cubic-bezier(1,0,0,1) 1;
	-moz-animation: fadein 1.5s cubic-bezier(1,0,0,1) 1;
	-webkit-animation: fadein 1.5s cubic-bezier(1,0,0,1) 1;
	-o-animation: fadein 1.5s cubic-bezier(1,0,0,1) 1;
	}
	
	#article-twtp a{
		text-decoration:underline;
		color:#FF073A;
	}
	#article-twtp h1{
		font-size:2em;
		clear:both;
		display:block;
		margin-bottom:10px;
	}
	#article-twtp h2{
	color: #000;
    width: 100%;
    margin-bottom: 0px;
    font-size: 4em;
	font-family: 'Passion One', cursive;
	text-transform:uppercase;
	line-height:0.75em;
	text-align:left;
	margin-top:0;
	animation: title-animate 2s cubic-bezier(1,0,0,1) 1;
	-moz-animation: title-animate 2s cubic-bezier(1,0,0,1) 1;
	-webkit-animation: title-animate 2s cubic-bezier(1,0,0,1) 1;
	-o-animation: title-animate 2s cubic-bezier(1,0,0,1) 1;
	}
	
	#article-twtp h3{
	color: #999;
    width: 100%;
    font-size: 1em;
    text-transform: uppercase;
    margin-bottom: 10px;
	text-align:left;
	letter-spacing:0.25em;
	animation: title-animate 3s cubic-bezier(1,0,0,1) 1;
	-moz-animation: title-animate 3s cubic-bezier(1,0,0,1) 1;
	-webkit-animation: title-animate 3s cubic-bezier(1,0,0,1) 1;
	-o-animation: title-animate 3s cubic-bezier(1,0,0,1) 1;

	}
	
	.interview-img{
		width:100%;
		margin:20px 0px;
		box-shadow: 0px 0px 50px #ccc;
		animation: fadein 1.5s cubic-bezier(1,0,0,1) 1;
	-moz-animation: fadein 1.5s cubic-bezier(1,0,0,1) 1;
	-webkit-animation: fadein 1.5s cubic-bezier(1,0,0,1) 1;
	-o-animation: fadein 1.5s cubic-bezier(1,0,0,1) 1;
	}
	
	.half{
		width:100%;
	}
	
	.third{
		width:100%;
	}
	
	.nomargin{
		margin-right:0;
	}
	
	
	@keyframes title-animate {
    0%   {position:relative; bottom:50px; opacity:0;}
    100% {position:relative; bottom:0px; opacity:1;}
}

@keyframes fadein {
    0%   {opacity:0;}
    100% {opacity:1;}
}

@keyframes header-slide {
    0%   {position:relative; bottom:30px; opacity:0;}
    100% {position:relative; bottom:0; opacity:1}
}

/* ─── Mobile polish (320px base) ──────────────────────────────────────── */

/* Fluid images everywhere */
img {
    max-width: 100%;
    height: auto;
}

/* Touch-friendly CTA button (interview pages only — hero overrides separately) */
.full_interview {
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 28px;
    float: none !important;
    clear: both !important;
    width: fit-content;
    margin: 16px 0 0 0;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ── Navigation: bigger tap targets ─────────────────────── */
nav ul li a {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* hamburger icon tap area */
#menu {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ── Interview pages: interior header ────────────────────── */
#header-interior {
    height: auto;
    padding: 16px 0;
}

/* Readable article Q&A on small screens */
.question, .answer {
    max-width: 100%;
    word-break: break-word;
}

/* ── Footer: stack links on mobile ──────────────────────── */
footer .f_right {
    width: 100% !important;
    float: none !important;
    text-align: center;
}

footer .f_right h3 {
    float: none !important;
    text-align: center;
    margin-bottom: 10px;
}

footer .f_right a {
    float: none !important;
    display: inline-block;
    margin: 6px 10px !important;
    text-decoration: none;
}

footer .f_hr {
    margin: 10px auto;
}

/* ── Interview images: always full-width in single column ── */
.interview-img,
.interview-img.half,
.interview-img.third {
    width: 100% !important;
    float: none !important;
    margin: 16px 0 !important;
}

/* ── Section padding so content doesn't hug edges ───────── */
#allarticles {
    padding-left: 0;
    padding-right: 0;
}

.container {
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
}