@font-face {
  font-family: Yantramanav;
  src: url(media/fonts/Yantramanav-Regular.ttf);
}
@font-face {
  font-family: Yantramanav-light;
  src: url(media/fonts/Yantramanav-Light.ttf);
}
@font-face {
  font-family: Yantramanav-medium;
  src: url(media/fonts/Yantramanav-Medium.ttf);
}

#all-page {
	font-family: Yantramanav;		
	background-color: black; 
	/* change to background image */
}

#breadcrumbs {
	color: #3079c0;	
}

#breadcrumbs a {
	color: #3079c0;	
}
 
#header-title {
	color:white;
	font-family: Yantramanav-light;
}

#header-text {
	color:white;
	font-family: Yantramanav-light;
}

#secure-section {
	display:block;
}

#access-section {
	display:none;
}

#byod-section {
	display:none;
}

#browsing-section {
	display:none;
}

#legacy-section {
	display:none;
}

#industry-section {
	display:none;
}

.content-image-container {
	display: flex;
    align-items: center;
}

.triangle {
	width: 0;
	height: 0;
}    
 
.purple-bar {
	background-color:#CF1874;
	width:100%;
	height:1px;
 }
 
 .orange-bar {
	background-color:#E98523;
	width:100%;
	height:4px;
 }

 
.nav-btn {
	 background-color:#E6E6E6;
	 color:black;
	 cursor: pointer;
 }
 
.nav-btn.selected {
	 background-color:#CF1874;
	 color:white;
 }

.nav-btn:not(.selected):hover {
	background-color: white;
}

 
.section-btn-text {
	 font-family: Yantramanav-light;
 }
 
.content-section {
	 background-color: white;
 }
 
.section-header {
	font-family: Yantramanav-light;
	color:#CF1874;
	font-style: underline;
 }
 
.section-header-text {
	display: inline;
	border-bottom: 1px solid;
}

.section-header-text a {
	color:#CF1874;
}

.section-header-text a:hover {
	color:#eF69dF
}

.content-title {
	font-family: Yantramanav-medium;
	color: #002A53;
}

.content-title a {
	color: #002A53;
}

.content-subtitle,.content-text {
	font-family: Yantramanav-light;
	color: #002A53;
}

.content-subtitle a {
	color: #002A53;
}

.content-title a:hover,.content-subtitle a:hover {
	color: #004ACC;
}
 
.content-image {
	background-size: contain;
    background-repeat: no-repeat;
}
 
.content {
	position:relative;
} 
 
.content1 .content-image {
	/* background-image: url(media/icons/cloud.png);	 */
}

.content2 .content-image {
	/* background-image: url(media/icons/plane.png);	 */
}

.content3 .content-image {
	/* background-image: url(media/icons/target.png);	 */
}

.image-and-title {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

.action-btn {
	font-family: Yantramanav-light;
	color:white;
	border-radius: 5px;
	text-align: center;
    vertical-align: middle;    
	cursor: pointer;
}
 
.read-btn {
	background-color: #0E3458;	
}

.read-btn:hover {
	background-color: darkslateblue;
}

.demo-btn {
	background-color: #009245;
	/* It was decided that this button is disabled */
	display:none; 
}

.demo-btn:hover {
	background-color: darkgreen;
}
 
.action-buttons {
	display: flex;
	flex-wrap: nowrap;	
}

 

/* 1190 spec */
@media only screen and (min-width: 320px) and (max-width: 1279px) {
	
	.buttons-under-text {
		display:none;
	}
	.buttons-under-title {
		display:block;
	}
	#header-section {
		background-image: url(media/backgrounds/pliers_1190.png);
		height:	272px;
		/* background-position-x: -126px; */
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	#all-page {
		padding-left: 72px;
		margin-top: -40px;
	}
	#breadcrumbs {		
		padding-top: 15px;
		font-size: 17px;
	}
	
	#header-title {
		font-size: 47px;
		padding-top: 67px;
	}
	#header-text {
		font-size: 20px;
		padding-top: 30px;		
		width: 670px;
	}
	.purple-bar {		
		margin-left:-72px;
		width:100%;
		position: absolute;
	}
	#purple-bar1 {		
	}
	#nav-section {
		display: flex;
		flex-wrap: wrap; 
		margin-top: 28px;
		width:1016px;
	}
	.nav-btn {
		width:310px;
		height:100px;
		margin-right: 10px;
		padding-left:18px;
		padding-right:18px;
		margin-bottom: 18px;
	}
	.section-btn-title {
		font-size: 22px;
		padding-top:12px;
	}
	.section-btn-text {
		font-size: 17px;
		margin-top: 10px;
	}
	.section-header {
		font-size: 41px;
		padding-top:30px;		
	}
	
	.content-section {
		margin-left: -126px;
		padding-left: 126px;
	}
	
	.content-panel {
		display: flex;
		flex-wrap: wrap;
	}
	
	.content-title {
		font-size: 29px;		
	}
	
	.content-image {
		width:44px;
		height:44px;
		margin-top: -51px;
		
	}
	
	.image-and-title {
		margin-top:60px;
		align-items: normal;
	}
	
	.title-and-subtitle {
		margin-left: 30px;
		margin-top: -8px;
		width:300px;
	}
	
	.content-subtitle,.content-text {
		font-size:20px;
	}
	
	.content-subtitle {
		margin-top: -5px;
	}
	
	.content-text {
		margin-top: 84px;
		width: 615px;
	}
	
	.action-btn {
		width: 135px;
		height: 27px;
		line-height: 27px;
		font-size: 16px;
	}
 
	.read-btn {}
	.demo-btn {
		margin-left: 10px;
	}

	.action-panel {
		margin-top: 15px;
		/* margin-left: 75px; */
	}

	/* #secure-section .action-panel, #access-section .action-panel { */
		/* margin-top: -9px; */
	/* } */
	
	#secure-section .content3 .content-text {
		margin-top: 95px;
	}
	
	
	/* #access-section .content3 .action-panel { */
		/* margin-top: 16px; */
	/* } */
	
	.content {
		height:200px;
		padding-right:80px;
		width: 100%;
	} 
	
	 .orange-bar {
		 margin-top: 30px;
	 }
	 
	 .triangle {
		border-left: 472px solid transparent;
		border-right: 472px solid transparent;
		border-top: 36px solid #CF1874;
	 }
	
	#browsing-section .content1 {
		width:850px;
	}
	
	#browsing-section .content-image {
		margin-top: -128px;
	}
	
	#legacy-section .content-text {
		margin-top: 95px;		
	}
	
	/* #legacy-section .action-panel { */
		/* margin-top: -9px;		 */
	/* } */
	
	#legacy-section .content3 .content-text {
		margin-top: 130px;		
	}
	
	/* #legacy-section .content3 .action-panel { */
		/* margin-top: -6px;		 */
	/* } */
	
	.content-all-texts {
		display: flex;
		flex-wrap: nowrap;
	}
}

/* 990 spec */
@media only screen and (min-width: 990px) and (max-width: 1189px) {
	.buttons-under-text {
		display:none;
	}
	.buttons-under-title {
		display:block;
	}
	#all-page {
		padding-left: 60px;
	}
	#header-section {
		height: 238px;
	}
	#header-title {
		padding-top: 25px;
	}
	.section-btn-title {
		font-size: 20px;
		padding-top:12px;
	}
	.section-btn-text {
		font-size: 15px;
		margin-top: 10px;
	}
	
	.nav-btn {
		width:282px;
		height:100px;
		margin-right: 10px;
		padding-left:18px;
		padding-right:18px;
		margin-bottom: 18px;
	}
	
	.content-text {
		width: 530px;
	}
	
	.triangle {
		border-left: 430px solid transparent;
		border-right: 430px solid transparent;
		border-top: 28px solid #CF1874;
	 }
	
	#nav-section {
		width:auto;
	}
	
	.purple-bar {
		margin-left: -60px;
	}
} 

/* 768 spec */
@media only screen and (min-width: 320px) and (max-width: 989px) {
	#header-section {
		background-image: url(media/backgrounds/pliers_768.png);
	}
	
	.buttons-under-text {
		display:none;
	}
	.buttons-under-title {
		display:block;
	}
	#all-page {
		padding-left: 34px;
	}
	#header-section {
		height: 220px;
	}
	#header-title {
		padding-top: 25px;
		font-size:39px;
	}
	.section-btn-title {
		font-size: 20px;
		padding-top:12px;
	}
	.section-btn-text {
		font-size: 15px;
		margin-top: 10px;
	}
	
	.nav-btn {
		width:282px;
		height:100px;
		margin-right: 10px;
		padding-left:18px;
		padding-right:18px;
		margin-bottom: 18px;
	}
	
	.content-text {
		width: 530px;
	}
	
	.triangle {
		border-left: 285px solid transparent;
		border-right: 285px solid transparent;
		border-top: 28px solid #CF1874;
		margin-left: 90px;
	 }
	
	#nav-section {
		width:768px;
		margin-left: 90px;
	}
	
	.purple-bar {
		margin-left: -34px;
	}
	
	.section-header {
		font-size: 34px;
		padding-top:60px;		
	}
	
	.content-text {
		font-size:18px;
		width:274px;
	}
	
	#browsing-section .content-image {
		margin-top: 0;
	}
	
	/* #browsing-section .action-panel { */
		/* margin-top:-80px; */
	/* } */
	
	/* #industry-section .content1 .action-panel { */
		/* margin-top: -56px; */
	/* } */
	
	/* #access-section .content1 .action-panel { */
		/* margin-top: -32px; */
	/* } */
} 

/* 576 spec */
@media only screen and (min-width: 320px) and (max-width: 768px) {
	#header-section {
		background-image: url(media/backgrounds/pliers_576.png);
	}

	.buttons-under-text {
		display:block;
	}
	.buttons-under-title {
		display:none;
	}

	#all-page {
		padding-left: 30px;
	}
	
	#header-title {
		font-size: 32px;
	}

	#header-text {
    font-size: 17px;
    padding-top: 20px;
    width: 540px;
	}
	
	.purple-bar {
		margin-left: -30px;
	}
	
	.nav-btn {
		width:248px;
		height:86px;
		margin-right: 10px;
		padding-left:11px;
		padding-right:11px;
		margin-bottom: 18px;
	}

	.section-btn-title {
		font-size: 18px;
		padding-top:12px;
	}
	.section-btn-text {
		font-size: 15px;
		margin-top: 10px;
	}

	#nav-section {
		width:100%; 
		margin-left: 0px;
	}

	.triangle {
		border-left: 255px solid transparent;
		border-right: 255px solid transparent;
		border-top: 28px solid #CF1874;
		margin-left: 0px;
	 }
	
	.section-header {
		font-size: 28px;
		padding-top:45px;		
	}
	
	.content-title {
		font-size: 24px;		
	}
	
	.content-subtitle {
		font-size: 17px;		
	}
	
	.content-text {
		font-size: 17px;		
		margin-top: 0 !important;
		margin-left:75px;
		width:400px;
	}
	
	.content-all-texts {
		flex-wrap: wrap;
	}
	
	.action-panel {
		margin-top: 15px;
		margin-left: 75px; 
	}

	.title-and-subtitle {
		width: 430px;
		border-bottom: black;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		margin-bottom: 10px;
		padding-bottom: 8px;
	}
	
	.content {
		height: auto;
	}	
	
	.content-image {
		width:38px;
		height:38px;
		margin-top: -23px;
	}	
		
}

/* 320 spec */
/* what about MOBILE - only screen?*/
@media only screen and (min-width: 320px) and (max-width:576px) {
	#header-section {
		background-image: url(media/backgrounds/pliers_320.png);
	}
	
	.buttons-under-text {
		display:block;
	}
	.buttons-under-title {
		display:none;
	}	
	
	#all-page {
		padding-left: 18px;
	}
	
	#header-title {
		font-size: 27px;
	}

	#header-text {
    font-size: 16px;
    padding-top: 20px;
    width: 270px;
	}
	
	.purple-bar {
		margin-left: -18px;
	}
	
	.nav-btn {
		width:248px;
		height:86px;
		margin-right: 10px;
		padding-left:11px;
		padding-right:11px;
		margin-bottom: 10px;
	}

	.section-btn-title {
		font-size: 18px;
		padding-top:10px;
	}
	.section-btn-text {
		font-size: 16px;
		margin-top: 4px;
	}

	#nav-section {		
		margin-left: 18px;
	}

	.triangle {
		border-left: 124px solid transparent;
		border-right: 124px solid transparent;
		border-top: 28px solid #CF1874;
		margin-left: 18px;
	 }
	
	
	.section-header {
		font-size: 23px;
		padding-top:32px;		
		width:286px;
	}
	
	.section-header-text {
		border-bottom: 0px;
	}
	
	.content-panel {
		margin-top: -30px;
	}
	
	.content-title {
		font-size: 21px;		
	}
	
	.content-subtitle {
		font-size: 17px;		
	}
	
	.content-text {
		font-size: 17px;		
		margin-top: 0 !important;
		margin-left:0px;
		width:270px;
	}
		
	.action-panel {
		margin-top: 22px;
		margin-left: 0px; 
	}

	.title-and-subtitle {
		width: 430px;
		border-bottom-width: 0;
		margin-bottom: 0;
		padding-bottom: 0;
		margin-top: 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-left:14px;

	}
	
	.image-and-title {
		width:288px;
		margin-top: 70px;
	    border-bottom: black;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		margin-bottom: 10px;
		padding-bottom: 8px;
		margin-left: 0px;
	}
	
	.content-image {
		width:38px;
		height:38px;
		margin-top: 0;
	}
} 


/* 1920 spec */
@media only screen and (min-width: 1280px) {
	.buttons-under-text {
		display:block;
	}
	.buttons-under-title {
		display:none;
	}
	#header-section {
		background-image: url(media/backgrounds/pliers.png);
		height:	349px;
		background-position-x: -126px;
		background-repeat: no-repeat;
		background-size: 108% 100%;
	}

	#all-page {
		padding-left: 126px;
		margin-top: -40px;
	}
	#breadcrumbs {		
		padding-top: 15px;
		font-size: 17px;
	}
	#header-title {
		font-size: 47px;
		padding-top: 67px;
	}
	#header-text {
		font-size: 20px;
		padding-top: 30px;		
		width: 870px;
	}
	.purple-bar {		
		margin-left:-126px;
		width:100%;
		position: absolute;
	}
	#purple-bar1 {		
	}
	#nav-section {
		display: flex;
		flex-wrap: nowrap;
		margin-top: 28px;
	}
	.nav-btn {
		width:225px;
		height:125px;
		margin-right: 10px;
		padding-left:18px;
		padding-right:18px;		
	}
	.section-btn-title {
		font-size: 22px;
		padding-top:12px;
	}
	.section-btn-text {
		font-size: 17px;
		margin-top: 10px;
	}
	.section-header {
		font-size: 41px;
		padding-top:60px;		
	}
	
	.content-section {
		margin-left: -126px;
		padding-left: 126px;
	}
	
	.content-panel {
		display: flex;
		flex-wrap: nowrap;
	}
	
	.content-title {
		font-size: 29px;		
	}
	
	.content-image {
		width:44px;
		height:44px;
		margin-top: -7px;
	}
	
	.image-and-title {
		margin-top:60px;
	}
	
	.title-and-subtitle {
		margin-left: 30px;
		margin-top: -8px;
	}
	
	.content-subtitle,.content-text {
		font-size:20px;
	}
	
	.content-subtitle {
		margin-top: -5px;
	}
	
	.content-text {
		margin-top: 30px;
	}
	
	.action-btn {
		width:190px;
		height:37px;			
		line-height: 37px;
		font-size:20px;
	}
 
	.read-btn {}
	.demo-btn {
		margin-left: 10px;
	}

	.action-panel {
		position:absolute;
		bottom:30px;
	}

	.content {
		height:300px;
		padding-right:80px;
		width: 550px;
	} 
	
	 .orange-bar {
		 margin-top: 30px;
	 }
	 
	 .triangle {
		border-left: 112px solid transparent;
		border-right: 112px solid transparent;
		border-top: 22px solid #CF1874;
	 }
	
	#browsing-section .content1 {
		width:850px;
	}

	.content-panel2 {
		margin-top: 70px;
	}
	
	#access-triangle {
		margin-left:235px;
	}
	
	#industry-triangle {
		margin-left:470px;
	}
	
	#browsing-triangle {
		margin-left:705px;
	}
	
	#byod-triangle {
		margin-left:940px;
	}
	
	#legacy-triangle {
		margin-left:1175px;
	}
	
	#nav-browsing-btn .section-btn-text {
		margin-top: 38px;
	}
	
	#nav-byod-btn .section-btn-text {
		margin-top: 38px;
	}
	
	#secure-section .content3 .content-text {
		margin-top: 43px;
	}
}

@media only screen and (min-width: 1280px) and (max-width: 1679px)
{
	#all-page {
		padding-left: 30px;
	}
	
	.section-btn-title {
		font-size: 20px;
		padding-top: 4px;
	}
	
	.section-btn-text {
		margin-top: 6px;
	}
	
	.triangle {
		border-left: 98px solid transparent;
		border-right: 98px solid transparent;
		border-top: 22px solid #CF1874;
	 }
	 
	 .nav-btn {
		 width: 196px;
	 }
	 
	 #header-section {
		 background-position-x: 0;
		 background-size: 100% 100%;
	 }

	 .purple-bar {
		 margin-left: -30px;
	 }
	 
	#access-triangle {
		margin-left:204px;
	}
	
	#industry-triangle {
		margin-left:410px;
	}
	
	#browsing-triangle {
		margin-left:616px;
	}
	
	#byod-triangle {
		margin-left:822px;
	}
	
	#legacy-triangle {
		margin-left:1027px;
	}
	
	.content {
		padding-right: 25px;
	}
	
	.action-panel {
		bottom: 20px;
	}
	
	#nav-byod-btn .section-btn-text {
		margin-top: 33px;
	}
	
	#nav-browsing-btn .section-btn-text {
		margin-top: 6px;
	}
}

@media only screen and (min-width: 1280px) and (max-width: 1420px)
{
	#legacy-section .content3 .content-title {
		font-size: 25px;
	}
	
	#secure-section .content3 .content-title {
		font-size: 26px;
	}
}

@media only screen and (max-height: 900px)
{
	#header-section {
			height: 249px;
	}
	
	#header-title {
		padding-top: 22px;	
	}	
	
	.section-header {
		padding-top: 40px;
	}
}

/* Remove Icons */
.content-image {
	width:0;
}

.title-and-subtitle {
	margin-left:0;
}

@media only screen and (max-width: 768px) and (min-width: 320px)
{
	.content-text {
		margin-left:0;		
	}
	
	.action-panel {    
		margin-left: 0;
	}
}

@media only screen and (max-width: 576px) and (min-width: 320px) {	
	.title-and-subtitle {
		display:block;
	}
}

/* Remove content-title from Shield tab */
#browsing-section .content1 .content-title {
	display:none;	
}

@media only screen and (min-width: 1280px) {
	#browsing-section .content1 .image-and-title {
		display:none;
	}
	
	#browsing-section .content {
		height:195px;
	}
}

@media only screen and (max-width: 1279px) and (min-width: 320px) {
	#browsing-section .content-text {
		margin-top: 20px;
	}
	
	#browsing-section .image-and-title {
		margin-top:25px;
	}
}

@media only screen and (max-width: 768px) and (min-width: 576px)
{
	#browsing-section .title-and-subtitle {
		border-style:none;
	}
	#browsing-section .image-and-title {
		display: none;
	}
}

@media only screen and (max-width: 576px) and (min-width: 320px) {
	#browsing-section .image-and-title {
		height:10px;
	}
}

/* Mobile sections display under tab buttons */
@media only screen and (max-width: 576px) and (min-width: 320px) {
	.triangle {
		margin-left:0;
	}
	
	.content {
		margin-bottom: 25px;
	}
	
	.nav-btn {
		margin-top: 10px;
	}
	
	.content-all-texts {
		display: block;
	}
	
	/* #nav-section { */
		/* width:90%; */
	/* } */
	
	.content-section {
		width: calc(100% + 126px);
	}
}

/* Graphic-designer top-background implementation. If we decide to leave this, we could delete prior code that concerns the top-background. */
#header-section{
    background-size: 1322px 258px, 1920px 100%;
    background-position: right 40px center, right top;
    background-repeat: no-repeat;
    min-height: 334px;
    background-color: #000;
    background-image: url("media/header_bg_logo.png"), url("media/header_bg.png");
}

@media all and (max-width: 1190px){
    #header-section{
        background-size: 871px 170px, 1190px 100%;
        min-height: 290px;
    }
}
@media all and (max-width: 990px){
    #header-section{
        background-size: 718px 140px, 990px 100%;
        min-height: 240px;
    }
}
@media all and (max-width: 768px){
    #header-section{
        background-size: 615px 120px, 768px 100%;
        min-height: 220px;
    }
}
@media all and (max-width: 576px){
    #header-section{
        background-size: 0, 576px 100%;
        min-height: 220px;
    }
}
@media all and (max-width: 320px){
    #header-section{
        background-size: 0, 320px 100%;
        min-height: 250px;
    }
}