/* TN Cisco Router Security Solutions - Responsive Layouts v 2016.1 */

/* MEDIAQUERY for tablets and small monitors
============================================================ */

@media screen and (min-width: 1085px){
	.crss-questions{
		padding: 0;
	}
}

@media screen and (min-width: 980px) and (max-width: 1083px) {
	.crss-questionnaire-body {
		padding: 0 31px;
	}
	.crss-questions {
		width: 917px;
		padding: 0;
	}
}


@media screen and (min-width: 768px) and (max-width: 979px) {
	.crss-questionnaire-body {
		padding: 0 26px;
	}

	.crss-questions {
		width: 717px;
		padding: 0;
	}
}


@media screen and (min-width: 721px) and (max-width: 767px) {
	.crss-questionnaire-body {
		padding: 0 22px;
	}

	.crss-questions {
		width: 677px;
		padding: 0;
	}
}

@media screen and (max-width: 720px) {
	.crss-questions {
		padding: 0;
	}
}

/* MEDIAQUERY for smaller monitors
============================================================ */

@media screen and (max-device-width: 1084px), screen and (max-width: 1084px) {

	.crss-banner {
		width: 90%;
	}
	
	/* Questionnaire
	------------------------------------------------------------ */
	
	.crss-content {
		width: 100%;
	}
	

	.crss-questions li, .crss-questions li a {
		width: 220px;
	}
	
	.crss-button-description {
		width: 100%;
	}
	
	/* Results
	------------------------------------------------------------ */
	.crss-results-cta {
		width: 100%;
		padding: 0 24px;
	}
}


/* MEDIA QUERY to adjust questionnaire layout at very small PC viewports
============================================================ */

@media screen and (max-device-width: 980px), screen and (max-width: 980px) {

	/* Questionnaire
	------------------------------------------------------------ */

	.crss-questionnaire-header {
		margin: 20px 24px;
	}

	.crss-questions li, .crss-questions li a {
			width: 170px;
	}
	
	.crss-button-text {
		font-size: 16px;
	}
	
	.crss-button-description {
		font-family: "CiscoSansTTRegular", Arial, sans-serif;
		font-size: 13px;
		line-height: 1.3em;
	}
	.crss-back-container {
		padding-right:0;
	}
}


/* MEDIA QUERY for 768 tablets
============================================================ */

@media screen and (max-device-width: 768px), screen and (max-width: 768px) {

	.crss-banner {
		width: 90%;
	}

	.crss-banner h1 {
		font-size: 32px;
	}
	
	.crss-banner h2 {
		font-size: 18px;
	}
	
	/* Questionnaire
	------------------------------------------------------------ */
	
	.crss-questionnaire-question {
		padding-top: 22px;
		font-size: 24px;
	}
	
	.crss-questions li, .crss-questions li a {
		width: 160px;
	}
	
	.crss-button-icon {
		margin-top: 16px;
	}
	
	.crss-button-description {
		font-size: 12px;
	}

}


/* MEDIA QUERY for layouts smaller than 720px and mobiles
============================================================ */

@media screen and (max-device-width: 720px), screen and (max-width: 720px) {

	.crss-body-photo {
		height: 310px;
		background-position: top center;
		background-size: 1080px 540px;
	}

	.crss-banner h1 {
		font-size: 28px;
	}
	
	.crss-banner h2 {
		font-size: 16px;
	}

	.crss-content-backdrop {
		display: none;
	}

	.crss-content {
		position: relative;
		top: 0;
		height: auto;
		background-color: #DEE8F5;
	}

	.crss-controls {
		display: none
	}

	/* Questionnaire
	------------------------------------------------------------ */
	
	.crss-questionnaire-header {
		margin-top: 0;
		padding-top: 20px;
	}
	
	.crss-questionnaire-body {
		padding-top: 20px;
	}

	.crss-questions {
		width: 100%;
	}

	.crss-questions li {
		display: block;
		width: 100%;
		height: auto;
		margin: 0 auto !important;
		padding: 0 24px 20px 24px;
	}
	
	.crss-questions li a {
		display: table;
		width: 100%;
		height: 70px;
		margin: 0 auto;
	}
	
	.crss-button-icon {
		float: left;
		margin: 10px;
	}
	
	.crss-button-text {
		width: 100%;
		height: 68px;
		padding: 0;
		font-size: 18px;
		text-align: left;
	}
	
	.crss-button-description {
		text-align: left;
		margin-top: 6px;
	}
	
	.crss-questions li a.crss-solution-button .crss-button-text {
		text-align: center;
	}
	
	.crss-results-cta {
		position: relative;
		width: auto;
		margin: 36px 24px 24px 24px;
	}
	body {
		background-color: #DEE8F5;
	}
	
}


/* MEDIA QUERY for very small screens and mobile
============================================================ */

@media screen and (max-device-width: 400px), screen and (max-width: 400px) {
	.crss-questionnaire-padding {
		padding: 0
	}
	.crss-questionnaire-question {
		font-size: 20px;
	}
}