/* --> SafeStream Website <<<-----*/

/* -------> Media Queries <<<-----------*/

@media screen and (prefers-reduced-motion: no-preference) {
html {scroll-behavior: smooth;}
}

@media (max-width: 1530px) {
	
	.content-video { height: 60vh;}
	.content .main-text {height: 65vh;}
	.content .main-text h1 {padding-top: 100px;}
	
}

@media screen and (max-width: 812px) and (orientation: landscape) {
	.content .main-text h1 img { width: 220px; height: auto;}
	.content .main-text h1 {padding-top: 40px;}
}


@media (max-width: 1080px) {
	
header {padding: 15px 20px 15px; box-shadow: 1px 3px 7px 0px rgba(59,59,59,0.47);
-webkit-box-shadow: 1px 3px 7px 0px rgba(59,59,59,0.47);
-moz-box-shadow: 1px 3px 7px 0px rgba(59,59,59,0.47);}
header .center {padding:0!important;}
#hamburger {display: block;}
.navMenu {position: absolute; top: 0; right: 0; width: 100%; height: 100vh; background-color:var(--blue); display: none!important; transition: 0.5s; z-index: 300; }
.navMenu .logo-menu, .navMenu .linkedin-icon {display: flex; flex-direction: column; align-items: center;}
.navMenu ul {width: 100%; display: flex; flex-direction: column; align-items: center; margin: 60px 0;}
.navMenu li { padding: 10px 0; font-size: 1.4375em; }
.navMenu li a {color:var(--white);}
.navMenu li:last-child {margin: 20px 0;}
.navMenu a:hover {opacity: 0.7;}
.logo-menu img {filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(275%) hue-rotate(330deg) brightness(107%) contrast(93%);}
.logo-menu {padding-top: 20px;}
.btn-contacto {color:var(--blue); display:inline-block; transition: all 0.5s ease-out; padding: 16px 2px; position: absolute; top:5px; right:70px; font-size: 1.1em; }
.btn-contacto::after {content: ""; background: url("../images/point.svg") no-repeat; background-size:7px 7px; width: 7px; height: 7px; position: relative; display: inline-block; margin-left: 20px;}
.btn-contacto:hover {font-weight: 700;}

/* Extra utility classes to be added with JS */
.nav-active {transform: translateX(0);display:block!important;}
#hamburger.toggle div {background-color:var(--white);}
.toggle #bar1 {transform: rotate(-45deg) translate(-5px, 5px);}
.toggle #bar2 {opacity: 0;}
.toggle #bar3 {transform: rotate(45deg) translate(-5px, -5px);}

.center {width: 100%; padding:60px 40px!important; }
	
.advantages .list-features li {padding: 30px;}
.advantages .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;}

.solving .graphic img {width: 100%;}
.numbers ul {flex-wrap: wrap;}
.numbers li {width: 50%!important; margin-bottom: 20px;}

.customers .customers-list img {height:80px; }

.numbers li {font-size: 0.75em!important;}
	
}


@media (max-width:700px) {
	
.center {padding: 30px 20px !important;}

.about p {font-size: 1em;}
.about h2 {font-size: 1.8em;}
.advantages h2, .solving h3 {font-size: 1.5em;}

.solving .graphic {background:var(--blue); text-align: center; display: flex; justify-content:center;}
.solving .graphic img {max-width: 450px; min-width:245px; height: auto; background:var(--blue); }
.solving .graphic .mobile {display:block;}	
.solving .graphic .desktop {display:none;}
	
.advantages .list-features li {padding: 20px;}
.advantages .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;}

.customers .type-customers {display: block; margin-bottom:20px;}
.customers .type-customers li {width: 100%!important;}

footer {padding:20px 0 10px!important;}
footer .center {display:block; width: 100%;text-align:center; padding: 0!important; }
footer .contact h5 {text-align:center; margin-top: 20px; margin-bottom: 0;}
footer .contact ul a {padding-right: 10px; padding-left: 10px!important;}
footer .contact ul {justify-content:center;}

.content .main-text h1 {padding-top:100px; }
   
.content .main-text h1 img {max-width:220px; width: 100%;}
.content .main-text {height: 464px;}
	
	.about {position: relative;}
	#advantages {position: absolute; bottom:80px;}
	
	.about {position: relative;}
	#about {position: absolute; top:65vh;}
	
	.content-video { height: 45vh;}
	.content .main-text {height: 50vh;}

	
}