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

/* -------> Colors <<<--------------*/

:root {
  --white:#FFFFFF;
  --blue:#3a4651;
  --violet:#5429ef;	
  --grey:#3a4651;
  --violet-2:#4a50f8;
	
	
}

/* -------> Fonts <<<--------------*/


/* latin*/
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../images/lato-normal.woff2")  format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin*/
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../images/lato-bold.woff2")  format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* --------> Resets and overrides <<<------------*/
	
*{margin:0; padding:0;} 
body, p, div, h1, h2, h3, h4, h5, h6, ul, ol, li, pre, blockquote, address, cite{ margin:0; padding:0;}
*, *:after, *:before {margin:0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility;}
html body {width:100%; height:100%;  background:var(--blue);} 
html {overflow-x: hidden !important}
body {font-family: "Lato", sans-serif; font-size:1.000em; color:var(--blue); font-weight: 400; font-style: normal; }
.clearfix {clear:both; height:0px; font-size:1px;}
:focus {outline:0;}
img, iframe {border:none; text-decoration:none;}
ol, ul {list-style:none;}
a {text-decoration:none; font-display: swap;}
a:hover {opacity: 0.8;}
p {line-height: normal; font-display: swap;}
h1, h2, h3, h4, h5 {font-family:  "Lato", sans-serif; font-size:1em; font-weight: 400; font-style: normal; font-display: swap;}

/*accessibility*/
a:focus-visible, button:focus-visible {outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 15px;}

/* --------> General <<<-------------*/

.center {width: 1100px; margin: 0 auto;}

#myBtn {display: none; background: url(../images/up.svg) no-repeat; width:41px; height: 41px; position:fixed; bottom:20px; right:20px; z-index:220; text-indent: -9999px; border-radius: 20px;}

/*header*/
header {width: 100%; background:var(--white); z-index: 300; position:fixed;}

/*Nav*/
.navMenu ul {text-transform: uppercase;}

/* Styles for the hamburger menu icon */
#hamburger {display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; position: absolute; top: 20px; right: 20px; z-index: 400;}
#hamburger div {width: 26px; height: 2px; background-color:var(--blue); margin: 5px 0; transition: 0.5s;}
#hamburger {display: none;}
.logo {position: relative;  display: inline-block; width: 176px; height:auto; }
.logo a:hover {opacity: 1!important;}
/*.logo img {position: absolute;}*/
.logo .img-initial img {width: 262px; height: auto;}
.logo .img-initial {opacity:1;  transition: all 0.8s ease-out;} 
.logo .img-scroll {opacity:0; transition: all 0.15s ease-out;} 
.isotipo-mobile {display: none;}	
.btn-gradient {background: #6B2BF8;
background: linear-gradient(90deg,rgba(107, 43, 248, 1) 0%, rgba(74, 80, 248, 1) 50%, rgba(42, 123, 155, 1) 100%, rgba(21, 176, 248, 1) 100%); border-radius:20px; padding: 8px 25px; color:var(--white)!important; transition: all 0.5s ease-out; }
.btn-gradient:hover {transition: all 0.5s ease-out;  background: #15B0F8;
background: linear-gradient(90deg,rgba(21, 176, 248, 1) 0%, rgba(74, 80, 248, 1) 50%, rgba(107, 43, 248, 1) 100%);}

@media screen and (min-width: 1024px) {

  header {margin: 0 auto; padding: 20px 40px 20px; left: 50%; transform: translateX(-50%); 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 {display: flex; position: relative;}
	
  .navMenu {width: 100%;}
  .navMenu ul {display: flex; margin-top: 2px; font-weight: 700; margin-left: 80px; font-size: 0.875em;}
  .navMenu ul a {color:var(--blue); display:inline-block; text-align:center; transition: all 0.5s ease-out; padding: 8px 20px;}
  .navMenu ul a:hover { transition: all 0.5s ease-out; color:var(--violet);}
  .navMenu ul li:last-child {position: absolute; right: 0; }
  .logo-menu, .linkedin-icon, .btn-contacto {display: none;} 
		
}


.line {width: 100%; height:8px; display: block;  background: #9200F7;
background: linear-gradient(90deg,rgba(146, 0, 247, 1) 0%, rgba(74, 80, 248, 1) 50%, rgba(21, 176, 248, 1) 100%);}
.content { z-index: 200; position: relative; }


/* --------> About <<<-------------*/

.about {background: var(--blue); color:var(--white);}
.about .center {padding: 60px 0;} 
.about h2 {text-align: center; font-size: 2.375em; margin-bottom: 20px; font-weight: 700; }
.about p { font-size: 1.25em; line-height:2em; font-weight: 400;}
.about p strong { font-weight: 700; font-size: 1.5em;}


/* --------> Advantages <<<-------------*/

.advantages {background:var(--white);}
.advantages .center { padding: 80px 0;}
.features img {width: 60px; height: 60px;}

.advantages  .list-features {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr;
grid-template-areas: "feature-1 feature-2 feature-3" "feature-4 feature-5 feature-6"; color:var(--white);}
.advantages .list-features li {padding: 60px 60px; text-align: center;}
.advantages .list-features li p { line-height: 1.125em; line-height: 1.375em; text-transform: uppercase; font-weight: 700; text-align: center; text-wrap: balance;}
.advantages .list-features li img {margin-bottom: 15px; }
.advantages h2 {font-size: 2em; font-weight: 700; text-transform: uppercase; color:var(--violet); text-align: center; margin-bottom: 35px;}

.list-features .feature-1 {background:#9200f7; grid-area: feature-1;} 
.list-features .feature-2 {background:#5e16bb; grid-area: feature-2;}
.list-features .feature-3 {background:#5429ef; grid-area: feature-3;}
.list-features .feature-4 {background:#4a50f8; grid-area: feature-4;}
.list-features .feature-5 {background:#3d67f8; grid-area: feature-5;}
.list-features .feature-6 {background:#15b0f8; grid-area: feature-6;}

@media all and (-ms-high-contrast:none) {
	.features .list-features {display: -ms-grid;display: grid; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; -ms-grid-rows: 1fr 1fr; grid-template-rows: 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: 1;-ms-grid-column: 2;grid-area: feature-2;}
	.list-features .feature-3 {-ms-grid-row: 1;-ms-grid-column: 3;grid-area: feature-3;}
	.list-features .feature-4 {-ms-grid-row: 2;-ms-grid-column: 1;grid-area: feature-4;}
	.list-features .feature-5 {-ms-grid-row: 2;-ms-grid-column: 2;grid-area: feature-5;}
	.list-features .feature-6 {-ms-grid-row: 2;-ms-grid-column: 3;grid-area: feature-6;}
}


/* --------> Solving problems <<<-------------*/

.solving {background: var(--blue); color:var(--white);}
.solving .center {padding: 60px 0; text-align: center;} 
.solving h3 {text-align: center; font-size: 2.000em; margin-bottom: 20px; font-weight: 700; text-transform: uppercase;}
.solving .graphic {background:var(--white); border-radius:20px; padding: 20px 20px 40px; width:100%; text-align: center;}
.solving .graphic img {width: 940px; height: auto; background:var(--white);}
.solving .graphic .mobile {display:none;}


/* --------> Numbers <<<-------------*/

.numbers {background-color: var(--violet-2); color:var(--white);}
.numbers .center {padding: 60px 0; text-align: center;}  
.numbers h4 {font-size: 1.3125em; margin-bottom: 40px; font-weight: 700; text-transform: uppercase;}
.numbers ul strong {font-size: 2.0em; display: block; text-align: center; padding-bottom: 10px;}
.numbers li {font-size: 0.9375em; font-weight: 700; text-transform: uppercase;}
.numbers ul {display: flex; justify-content:space-between;}


/* --------> Customers <<<-------------*/

.customers .title {background: var(--blue); color:var(--white); padding: 20px; text-align: center;}
.customers h4 {font-size: 1.3125em; font-weight: 700; text-transform: uppercase;}
.customers .content {background-image: url("../images/customers-background.jpg"); background-position: bottom; background-size: cover; padding:20px 0 220px;}
.customers .type-customers {display: flex; align-content:stretch; align-items: stretch; margin-bottom:60px;}
.customers .type-customers li {width: 33.3%; font-size: 1.3125em; text-transform: uppercase; font-weight: 700; color:var(--white); padding: 20px; text-align: center; display: flex; align-items: center; justify-content:center;}
.customers .type-customers li:nth-child(1) {background: var(--blue);}
.customers .type-customers li:nth-child(2) {background: var(--violet);}
.customers .type-customers li:nth-child(3) {background: var(--violet-2);}

.customers .customers-list {background: url("../images/background-logos.png") repeat; width: 100%; display: flex; justify-content:center; flex-wrap:wrap;}
.customers .customers-list li {padding: 20px 10px;}

.customers p {background: var(--blue); font-size: 1.3125em; font-weight: 700; text-transform: uppercase; color:var(--white);  padding: 20px; text-align: center;}


/* --------> Footer <<<-------------*/

footer {background: var(--violet-2); color:var(--white); padding:30px 0 20px; z-index: 200; position: relative;}
footer .logo {filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(275%) hue-rotate(330deg) brightness(107%) contrast(93%);}
footer .center {display: flex; justify-content:space-between;}
footer .contact {text-align: right; font-size: 700;}
footer .contact ul {display: flex;  align-items:center;}
footer .contact ul a {font-size: 1.25em; color:var(--white); padding-left: 20px;}
footer .contact h5 {text-transform: uppercase; font-size: 700;}
footer .copy {font-size:0.875em; text-align: center; padding-top: 20px;}


/* --------> Video <<<-------------*/

.content-video {
      position: absolute;
      top: 70px;
      width: 100vw;
      height: 80vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .content-video #myVideo {
      width: 100vw;
      height: auto;
      min-height: 100%;
      object-fit: cover; /* Para que se corte si es necesario */
    }

.content .main-text {height: 85vh; width: 100%; }
.content .main-text h1 {z-index: 60; height: 80vh; position:relative; padding-top:200px; }