/* --------------------->> TV SIM <<<--------------------*/
/* ---------------->> Media Queries <<<-----------------*/

@media screen and (max-width: 1300px) {
	
	header h1 {margin:0 0 10px 20px;}
	header .navbar-toggler {margin-right: 10px; margin-bottom: 10px;}
		
	.hero-image {padding:0 0 0 40px; background: url(../images/back-heroimage-2.png) repeat-x #01090e bottom; width: 100%;}
	.hero-image .image {width: 55%; position: relative; }
	.hero-image .image img {width: 100%; height: auto; bottom:0; position: absolute; right: 0;}
    .hero-image .txt {margin-top:85px; width: 40%;}	
	.hero-image .txt h1 {font-size: 0.8em;}

}

@media screen and (max-width: 1140px) {
	
	.hero-image .image img {top:30px; }
	.hero-image .image {margin-left: 10px;}
	
}


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

	.content {width: 100%; padding:60px 40px; }
	.features .content {width: 100%; padding:0 40px; }

	}

@media screen and (max-width: 990px) {
	
	header {margin:0; padding: 20px 0 0px;}
	.navbar-collapse {background:#051b2a; }
	.navbar-expand-lg .navbar-nav .nav-link {padding:10px 22px;}
	header .navbar-nav  a {color:#fff; font-size: 1.1em; font-weight: 300; border-bottom:1px solid #01080d; }
	header .navbar-nav  a span { display: block;  padding: 10px 22px; }
	header .navbar-nav  a:hover {color:#fff; background: #fd2c95;}
	.navbar-expand-lg .navbar-nav .nav-link {padding:0; }
	header .link-1 {color:#fff; font-size: 1.1em; font-weight: 300; padding: 0; width: 100%; display: block;}
	header .link-1 span { padding: 10px 22px 10px 22px; width: 100%; display: block;}
	header .link-1:hover {color:#fff; background: #fd2c95; text-decoration: none;}
	
	.hero-image {display:block; background: none; padding:0;}
	.hero-image .txt {width: 100%; padding:30px 11% 0; text-align: left; z-index: 100; position: relative;}	
	.hero-image .txt h1 {font-size: 1em;}
	.hero-image .image {width: 100%; margin-top: -60px; z-index: 90; margin-left: 0;}
	.hero-image .image img { position: relative; width: 100%; height: auto;}
	
	.roles .list-roles { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr ;
	grid-template-areas: "role-network role-production" "role-critic role-viewer";}
	.roles p {min-height: auto; margin-bottom: 20px;}
	.roles .list-roles .role { margin-bottom: 4px; padding: 25px;}
	.roles .list-roles .role:nth-child(3), .roles .list-roles .role:nth-child(4) { margin-bottom: 0;}
	
	.database {padding-bottom: 10px; }
	.database ul {display: flex; flex-wrap: wrap; }
	.database ul li {width: 33.3%; margin-bottom: 50px;}
	
	.features .list-features {display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "feature-1 feature-2" "feature-3 feature-4" "feature-6 feature-5"; }

	.newsletter .input-group .btn-1 {padding: 8px 20px;}	
	.content {padding: 60px 30px;}
	
	#loginRegister .modal-dialog  {width: 100%!important; max-width: auto;}
	#loginRegister .login {width: 100%; padding: 30px; float: none!important; background:none;}
    #loginRegister .register {width: 100%; padding: 30px; float: none!important;}
	#loginRegister .modal-content { flex-direction: column!important;}
	#loginRegister .register .float-left, #loginRegister .register .float-right {width: 100%; float: none!important;}
	#loginRegister .close {color:#333;}
	
	
}

@media all and (-ms-high-contrast:none) and (max-width: 990px) {
	
	.roles .list-roles { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: 1fr 1fr ; grid-template-rows: 1fr 1fr ; grid-template-areas: "role-network role-production" "role-critic role-viewer";}
	.roles .role-network {-ms-grid-row:1;-ms-grid-column:1;grid-area:role-network;}
	.roles .role-production {-ms-grid-row:1;-ms-grid-column:2;grid-area:role-production;} 
	.roles .role-critic {-ms-grid-row:2;-ms-grid-column:1;grid-area:role-critic;}
	.roles .role-viewer {-ms-grid-row:2;-ms-grid-column:2;grid-area:role-viewer;}
	
	.features .list-features {display: -ms-grid;display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "feature-1 feature-2" "feature-3 feature-4" "feature-6 feature-5"; }
	.list-features .feature-1 {-ms-grid-row: 1;-ms-grid-column: 1;grid-area: feature-1;} 
	.list-features .feature-2 {-ms-grid-row: 1;-ms-grid-column: 2;grid-area: feature-2;}
	.list-features .feature-3 {-ms-grid-row: 2;-ms-grid-column: 1;grid-area: feature-3;}
	.list-features .feature-4 {-ms-grid-row: 2;-ms-grid-column: 2;grid-area: feature-4;}
	.list-features .feature-5 {-ms-grid-row: 3;-ms-grid-column: 2;grid-area: feature-5;}
	.list-features .feature-6 {-ms-grid-row: 3;-ms-grid-column: 1;grid-area: feature-6;}
	
}

@media screen and (max-width: 700px) {
	
	.hero-image .txt p {font-size: 1.3em;}
	.hero-image .txt p a {font-size: 1.050em;}
	.roles {font-size: 1.3em;}
	.roles .list-roles {grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; 
	grid-template-areas: "role-network" "role-production" "role-critic" "role-viewer";}
	.roles .list-roles .role { margin-bottom: 4px!important;}
	.roles .list-roles .role:nth-child(4) { margin-bottom: 0!important;}
	
	.features .list-features {font-size: 1.3em;}
	
	.database ul li {width: 50%; margin-bottom: 50px; font-size: 1.1em;}
	.database ul li strong {font-size:2.413em;}
	
	.newsletter .input-group {width: 100%;}
	
	.footer-info .about {width: 100%; float: none; margin-bottom: 30px;}
    .footer-info .links {width: 50%; float: left;} 
	footer {font-size: 1.3em;}
	
	.newsletter .input-group .btn-1 {font-size: .90em!important;}
	
	.features .list-features {display: grid; grid-template-columns:1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "feature-1" "feature-2" "feature-3" "feature-4" "feature-5" "feature-6"; }
	
}

@media all and (-ms-high-contrast:none) and (max-width: 700px) {
		
	.roles .list-roles {-ms-grid-columns: 1fr;grid-template-columns: 1fr; -ms-grid-rows: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr;
		grid-template-areas: "role-network" "role-production" "role-critic" "role-viewer";}
	.roles .role-network {-ms-grid-row:1;-ms-grid-column:1;grid-area:role-network;}
	.roles .role-production {-ms-grid-row:2;-ms-grid-column:1;grid-area:role-production;} 
	.roles .role-critic {-ms-grid-row:3;-ms-grid-column:1;grid-area:role-critic;}
	.roles .role-viewer {-ms-grid-row:4;-ms-grid-column:1;grid-area:role-viewer;}
	
	.features .list-features {display: -ms-grid;display: grid; -ms-grid-columns:1fr; grid-template-columns:1fr; -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-areas: "feature-1" "feature-2" "feature-3" "feature-4" "feature-5" "feature-6"; }
	.list-features .feature-1 {-ms-grid-row: 1;-ms-grid-column: 1;grid-area: feature-1;} 
	.list-features .feature-2 {-ms-grid-row: 2;-ms-grid-column: 1;grid-area: feature-2;}
	.list-features .feature-3 {-ms-grid-row: 3;-ms-grid-column: 1;grid-area: feature-3;}
	.list-features .feature-4 {-ms-grid-row: 4;-ms-grid-column: 1;grid-area: feature-4;}
	.list-features .feature-5 {-ms-grid-row: 5;-ms-grid-column: 1;grid-area: feature-5;}
	.list-features .feature-6 {-ms-grid-row: 6;-ms-grid-column: 1;grid-area: feature-6;}
	
}


@media screen and (max-width: 550px) {
	
	.hero-image .txt {padding:0 25px; margin-top:105px!important; }
	.hero-image .image {margin-top: -40px; }
	.hero-image .txt h1 {font-size: 0.8em;}
	
	.footer-info .links {width: 100%; float: none; margin-bottom: 30px;} 
	
}