/*
 * Theme Name: Net Technology & Security
 * Description: Diseño creado para Net Technology & Security Solutions Corp.
 * Author: Nivaxel
 * Author URI: https://www.nivaxel.com
 * Version: 1.0
 */

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css?family=Quicksand');

body {background: #202020; color: #fff; overflow-x: hidden; font-family: 'Quicksand', sans-serif}

h1 {font-size: 30px;}
p {line-height: 150%; font-size: 16px}
img {max-width: 100%; height: auto}
a {color: #fff}
hr {margin: 0 0 10px 0}

/* Header */
.head-bar {background: #000000}
.logo {text-align: center; padding: 20px 0}
.head-bar .phone {position: absolute; right: 20px; top: 50px}
.phone a:hover, .phone a:focus {text-decoration: none; color: #EB5F24}
.phone .fa-phone {font-size: 24px; width: 40px; height: 40px; line-height: 40px; background: #fff; color: #202020; text-align: center; border-radius: 20px}
.phone .fa-wifi {position: absolute; margin-left: -23px; margin-top: 5px; color: #202020; transform: rotate(25deg);}
.phone span {font-size: 24px}

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {background: transparent; border-color: transparent}
.navbar {border: 0; border-radius: 0; margin-bottom: 0; text-align: center; min-height: auto}
.navbar-nav, .navbar-nav li {display: inline-block; float: none;}
.navbar-nav li {margin: 20px 40px;}
.navbar-nav li a {text-transform: uppercase; font-size: 20px; padding: 0;}
.navbar-nav li a:hover, .navbar-nav li a:focus {background: transparent; color: #ed582e;}
.navbar-nav li.active:before {
  content: '\f111'; font-family: FontAwesome; color: #202020; font-size: 30px; position: absolute; z-index: 10;
  top: -70px; left: 50%; margin-left: -25px; width: 50px; height: 50px; line-height: 50px;
  background: linear-gradient(to right, #EF4534, #F49618); border-radius: 50%;
}
.dropdown-menu {background: #202020; top: 30px;}
.dropdown-menu > li > a {color: #fff}
.dropdown-menu li {margin: 10px 20px;}

.grayline {border: 0; background: linear-gradient(#B9BABC, #BFC0C2); height: 15px}
.gradline {border: 0; background: linear-gradient(to right, #EF4136, #F7941D); height: 25px; position: relative; z-index: 1}

/* Footer */
.fnav {text-align: center}
.fnav a {display: inline-block; margin: 10px 40px; text-transform: uppercase; font-size: 20px;}
.fnav a:hover, .fnav a:focus {text-decoration: none; color: #ed582e;}
.address {width: 300px; font-size: 18px; margin: 10px auto; list-style: none;}
.address i {position: absolute; margin-left: -20px; font-size: 24px}

.fsocial, footer .phone {text-align: right}
.fsocial a {display: inline-block; font-size: 40px; line-height: 1; margin: 2px;}
.fsocial a:hover, .fsocial:focus {color: #E36032}

.nivaxel {text-align: center; padding: 10px; color: #fff}
.nivaxel a:hover, .nivaxel a:focus {color: #fff;}

.scrollup {
  display:none; position:fixed; z-index: 100; bottom:20px; right:20px;
  background:#555; color:#fff; font-size:50px; width:50px; height:50px;
  border-radius:25px; text-align:center; line-height:50px; cursor:pointer; opacity:0.7
}
.scrollup:hover {opacity: 1}
.scrollup i {line-height: 45px; vertical-align: top}

/* Inicio */
.sm-slide {display: none}

.home-txt {padding: 30px 0}
.home-txt img {display: block; margin: auto}

.services {padding: 200px 0 100px 0; text-align: center; color: #d78225; background: url(img/paralax.jpg) top center no-repeat;}
.services .circle img {border-radius: 50%}
.services ul li a:hover, .services ul li a:focus {text-decoration: none; color: #ffc340}
.services ul {padding-left: 0; list-style: none; position: absolute;}
.services ul li {font-size: 26px; border-bottom: 2px solid; padding: 5px 10px; position: absolute; width: 300px}
.services ul li img {display: block; margin: auto}
.services ul li:nth-child(1) {left: 200px; margin-top: -200px}
.services ul li:nth-child(2) {left: 720px; top: -190px; width: 350px; line-height: 1}
.services ul li:nth-child(3) {left: 100px; margin-top: 250px}
.services ul li:nth-child(4) {left: 770px; margin-top: 40px}
.services ul li:nth-child(5) {left: 25px; margin-top: 30px}
.services ul li:nth-child(6) {left: 745px; margin-top: 250px; width: 400px}


.services ul li:nth-child(1):after {content: ''; display: block; width: 145px; height: 2px; background: #d78225; position: absolute; left: 263px; margin-top: 67px; transform: rotate(60deg)}
.services ul li:nth-child(2):before {content: ''; display: block; width: 145px; height: 2px; background: #d78225; position: absolute; left: -120px; margin-top: 230px; transform: rotate(-48deg)}
.services ul li:nth-child(3):after {content: ''; display: block; width: 125px; height: 2px; background: #d78225; position: absolute; left: 276px; margin-top: -42px; transform: rotate(-50deg)}
.services ul li:nth-child(4):before {content: ''; display: block; width: 80px; height: 2px; background: #d78225; position: absolute; left: -75px; margin-top: 146px; transform: rotate(25deg)}
.services ul li:nth-child(5):before {content: ''; display: block; width: 133px; height: 2px; background: #d78225; position: absolute; left: 291px; margin-top: 195px; transform: rotate(30deg)}
.services ul li:nth-child(6):before {content: ''; display: block; width: 155px; height: 2px; background: #d78225; position: absolute; left: -116px; margin-top: 132px; transform: rotate(60deg)}

.services ul li:nth-child(1):before {content: ''; display: block; width: 15px; height: 15px; border: 2px solid #d78225; border-radius: 7.5px; position: absolute; top: 161px; margin-left: -25px}
.services ul li:nth-child(2):after {content: ''; display: block; width: 15px; height: 15px; border: 2px solid #d78225; border-radius: 7.5px; position: absolute; top: 175px; left: 350px;}
.services ul li:nth-child(3):before {content: ''; display: block; width: 15px; height: 15px; border: 2px solid #d78225; border-radius: 7.5px; position: absolute; top: 161px; left: -13px}
.services ul li:nth-child(4):after {content: ''; display: block; width: 15px; height: 15px; border: 2px solid #d78225; border-radius: 7.5px; position: absolute; top: 161px; left: 300px}
.services ul li:nth-child(5):after {content: ''; display: block; width: 15px; height: 15px; border: 2px solid #d78225; border-radius: 7.5px; position: absolute; top: 161px; left: -13px}
.services ul li:nth-child(6):after {content: ''; display: block; width: 15px; height: 15px; border: 2px solid #d78225; border-radius: 7.5px; position: absolute; top: 198px; left: 400px}

.grad-bg {background: linear-gradient(#202020, #242021, #302C2D, #888888)}

.reviews {max-width: 600px; height: 400px; border: 7px solid #F8931F; border-radius: 10px; margin-top: 0px}

.carousel-inner {width: 70%; margin-left: 40px; margin-top: 20px; height: 320px}
.carousel-control {top: 10px}
.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {left: 20%; color: #FCB040}
.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {right: 20%; color: #FCB040}
.carousel-control.left, .carousel-control.right {background-image: none}
.carousel .item i {font-size: 16px; font-weight: 700}
.carousel .item strong {display: block; font-size: 18px}

.hand-mov {position: absolute; top: 220px; right: 0px}

.stars {list-style: none; padding-left: 0; margin: 0}
.stars li {display: inline-block; font-size: 50px; color: #FAB31B}

.quote {text-align: center}
.quote strong {display: block; text-align: right; margin-right: 40px; font-size: 20px; font-weight: 400; background: #212020; position: relative; top: 10px}
.quote strong:before {
  content: ''; display: inline-block; width: 240px; height: 50px; border: 7px solid #F8931F; padding-bottom: 10px;
  background: #212020; border-radius: 10px 50px 0 0; position: absolute; z-index: 10; left: 27px; top: -17px;
}
.quote strong:after {
  content: ''; display: inline-block; width: 225px; height: 20px; background: #212020; position: absolute; z-index: 10; left: 34px; top: 25px;
}
.qfrm {max-width: 500px; margin: auto; border: 7px solid #F8931F; border-bottom-color: transparent; border-radius: 0 10px 0 0; position: relative; top: 8px;}

/* Paginas */
.heading {background: url(img/Header.jpg) center no-repeat; background-size: cover; height: 250px; text-align: center}
.heading strong {font-size: 50px; line-height: 250px; text-transform: uppercase}
.head-txt {background: #bdbec2; padding: 20px 0; text-align: center}
.head-txt h1, .head-txt h2 {color: #202020; margin: 0}

.btn-yellow {display: inline-block; background: #f89321; padding: 10px 20px; font-size: 24px; transition: all 0.5s ease}
.btn-yellow:hover, .btn-yellow:focus {text-decoration: none; color: #fff; background: #f47127}
.btn-red {display: inline-block; background: linear-gradient(#ee4238, #f15431); padding: 10px 20px; border-radius: 20px; font-size: 20px; margin: 10px 0;}
.btn-red:hover, .btn-red:focus {text-decoration: none; color: #fff; background: linear-gradient(#f15431, #ee4238)}
.btn-black {display: inline-block; background: #202020; padding: 10px 20px; border-radius: 20px; font-size: 20px; margin: 10px 0;}
.btn-black:hover, .btn-black:focus {text-decoration: none; color: #202020; background: #fff}

/* Servicios */
.serv-sec {padding: 50px 0}
.serv-bar {border: 0; height: 25px; background: linear-gradient(to right, #ee4236, #f5941f)}
.serv-img {margin-top: 70px}
.serv-img img {border-radius: 50%}
.serv-ico {position: absolute; left: -70px; top: -10px}
.serv-ico-2 {position: absolute; right: -70px; top: -10px}
.serv-sec strong {font-size: 30px; font-weight: 100}
.serv-grad {background: linear-gradient(#f7941d, #f67426);}
.serv-grad-line {border-top: 10px solid #f7941d; margin: 10px 0}
.serv-grad-line-2 {border-top: 10px solid #f67426; margin: 10px 0}

#sistemas-de-informacion {margin-bottom: 10px}

/* Sobre Nosotros */
.nosotros {padding: 30px 0;}
.nosotros ul li {margin-bottom: 5px; font-size: 20px; color: #fff}

.grad-bg-2 {background: linear-gradient(#231f20, #504c4d)}

.folder {color: #fff}
.folder .title {border: 5px solid #d78225; border-bottom: 0; border-radius: 10px 50px 0 0; width: 200px; padding: 5px 10px}
.folder .title strong {font-size: 24px}
.folder .inside {border: 5px solid #d78225; border-radius: 0 10px 10px 10px; padding: 10px; height: 200px}

.nos-serv {text-align: center; margin-top: 50px}
.nos-serv p {font-size: 24px; color: #fff; text-transform: uppercase; margin-top: 20px}

.clientes {background: #fff; padding: 50px 0; text-align: center}
.clientes img {display: inline-block; margin: 10px}

/* Contacto */
.cinf {list-style: none; padding-left: 0; margin: 20px 0; font-size: 18px}
.cinf li {margin-bottom: 10px}
.cinf i {color: #d78225; font-size: 24px; vertical-align: middle}
.cinf .fa-map-marker {margin: 0 5px}

.horario {margin: 40px 0 0 20px}
.horario strong {display: inline-block; font-size: 18px; margin: 0 10px 3px}
.horario ul {list-style: none; padding-left: 0; border: 3px solid #d78225; border-radius: 5px; max-width: 400px; padding: 10px; font-size: 18px}
.horario ul li {margin-bottom: 5px}
.horario ul li:nth-of-type(odd) {font-weight: 700; color: #d78225}

.cquote {text-align: right; margin: 50px 0 30px}
.cquote strong {display: inline-block; margin-bottom: 5px; margin-right: 50px; font-size: 20px;}
.cquote strong:before {
  content: ''; display: inline-block; width: 220px; height: 50px; border: 7px solid #d78225; padding-bottom: 10px;
  border-radius: 10px 50px 0 0; position: absolute; z-index: 10; left: 42px; top: 38px;
}
.cquote strong:after {
  content: ''; display: inline-block; width: 205px; height: 20px; background: #292526; position: absolute; z-index: 10; left: 49px; top: 78px;
}
.cfrm {max-width: 500px; height: auto; margin: auto; border: 7px solid #d78225; border-radius: 0 10px 10px 10px}

/* Beneficios */
.top-line {display: block; border-top: 5px solid #bf7e1a; margin-left: 100px; margin-top: 30px; width: 900px}
.top-line:after {display: block; content: ''; width: 20px; height: 20px; border: 2px solid #bf7e1a; border-radius: 10px; position: absolute; margin-left: 900px; margin-top: -13px}
.left-line {display: block; border-left: 5px solid #bf7e1a; margin-left: 100px; margin-top: 0px; height: 350px; position: absolute}
.left-line:after {display: block; content: ''; width: 20px; height: 20px; border: 2px solid #bf7e1a; border-radius: 10px; position: absolute; margin-left: -12px; margin-top: 350px}
.bottom-line {display: block; border-bottom: 5px solid #bf7e1a; margin-left: 150px; margin-bottom: 30px; width: 900px}
.bottom-line:after {display: block; content: ''; width: 20px; height: 20px; border: 2px solid #bf7e1a; border-radius: 10px; position: absolute; margin-left: -19px; margin-top: -8px}
.right-line {display: block; border-right: 5px solid #bf7e1a; margin-left: 1050px; margin-top: -380px; height: 350px; position: absolute}
.right-line:before {display: block; content: ''; width: 20px; height: 20px; border: 2px solid #bf7e1a; border-radius: 10px; position: absolute; margin-left: -8px; margin-top: -20px}

.beneficios {list-style: none; padding-left: 0; width: 800px; margin: 50px auto;}
.beneficios li {margin-bottom: 20px}
.beneficios img {display: inline-block;}
.beneficios p {display: inline-block; width: 700px; vertical-align: middle; margin: 0 5px; font-size: 18px}

.btn-wrap {text-align: center; margin: 30px 0}
.btn-wrap .btn-yellow {margin-left: 20px;}

/* Error 404 */
.not-found {padding: 50px 0; text-align: center}
.not-found p {font-size: 20px}
.not-found a {color: #ed582e; font-weight: 700}

/* Responsive */
@media screen and (max-width: 1366px) {
  .quote strong::before {left: 28px}
  .quote strong::after {left: 35px}
}

@media screen and (max-width: 1199px) {
  /* Home */
  .reviews {height: 450px}
  .carousel-inner {height: 400px}
  .hand-mov {display: none}
  .quote strong::before, .quote strong::after {display: none}
  .qfrm {border-radius: 20px 20px 0 0}
  
  .services ul li:nth-child(1) {left: 70px;}
  .services ul li:nth-child(2) {left: 650px;}
  .services ul li:nth-child(3) {left: 0px;}
  .services ul li:nth-child(4) {left: 650px;}
  .services ul li:nth-child(5) {left: -40px}
  
  .left-line, .top-line, .bottom-line, .right-line {margin-left: 0}
  .right-line {right: 0}
  
  .clientes {padding: 20px 0}
  .clientes img {margin: 0}
}

@media screen and (max-width: 991px) {
  .navbar-nav li, .fnav a {margin: 15px;}
  
  .reviews {height: 620px}
  .carousel-inner {height: 550px}
  
  .services ul li:nth-child(1) {left: 0px;}
  .services ul li:nth-child(2) {left: 540px;}
  .services ul li:nth-child(3) {left: -110px;}
  .services ul li:nth-child(4) {left: 490px;}
  .services ul li:nth-child(5) {left: -100px;}
  
  .folder .inside {height: 225px}
  .clientes img {max-width: 150px}
}

@media screen and (max-width: 767px) {
  .head-bar .phone {position: relative; top: 0; right: 0; text-align: center; padding-bottom: 10px}
  
  .navbar-toggle {border: 1px solid; padding: 10px; margin-top: 0; font-size: 22px;}
  .navbar-toggle:before {content:'MENÚ'}
  .navbar-nav {display: table; text-align: left;}
  .navbar-nav li {display: table; margin-bottom: 10px;}
  .dropdown-menu > li > a:last-child {white-space: normal; line-height: 1.5 !important;}
  .dropdown-menu li {margin: 5px}
  
  .heading {height: 200px}
  .heading strong {display: block; line-height: 100%; margin-top: 70px}
  
  .services {padding: 50px 0}
  .services .circle img {display: none}
  .services ul {position: relative; text-align: center}
  .services ul li {position: relative; margin: 20px auto;}
  .services ul li:nth-child(1) {left: 0px; margin-top: 0px}
  .services ul li:nth-child(2) {left: 0px; top: 0px; width: 300px}
  .services ul li:nth-child(3) {left: 0px; margin-top: 0px}
  .services ul li:nth-child(4) {left: 0px; margin-top: 0px}
  .services ul li:nth-child(5) {left: 0px; margin-top: 0px}
  .services ul li:nth-child(6) {left: 0px; margin-top: 0px; width: 300px}
  .services ul li:nth-child(1):before, .services ul li:nth-child(2):before, .services ul li:nth-child(3):before, .services ul li:nth-child(4):before, .services ul li:nth-child(5):before, .services ul li:nth-child(6):before,
  .services ul li:nth-child(1):after, .services ul li:nth-child(2):after, .services ul li:nth-child(3):after, .services ul li:nth-child(4):after, .services ul li:nth-child(5):after, .services ul li:nth-child(6):after
  {display: none;}
  
  .reviews {margin: 10px auto; height: 320px}
  .carousel-inner {height: 300px; width: 85%}
  .stars {text-align: center}
  .quote strong {background: transparent; text-align: center; margin: 10px 0}
  
  .serv-sec {padding: 20px 0}
  .serv-sec img {display: block; margin: auto}
  .serv-img {display: none}
  .serv-ico, .serv-ico-2 {position: relative; left: auto; top: auto; right: auto}
  .serv-sec strong {display: block; text-align: center; margin: 5px 0}
  .serv-sec .text-left, .serv-sec .text-right {text-align: center}
  
  .folder {margin-bottom: 20px}
  .folder .inside {height: auto}
  
  .horario {margin: auto}
  .cquote {margin: 30px 0; text-align: center}
  .cquote strong {margin-right: 0}
  .cquote strong:before, .cquote strong:after {display: none}
  .cfrm {border-radius: 10px}
  
  .left-line, .top-line, .bottom-line, .right-line {display: none}
  .beneficios {width: 100%}
  .beneficios img {display: block; margin: auto}
  .beneficios p {width: auto; border-bottom: 1px solid #f59130; padding-bottom: 10px}
  
  footer {padding-bottom: 40px; text-align: center}
  .address {width: 100%; padding-left: 0; margin: 20px 0}
  .fsocial, footer .phone {text-align: center}
}

@media screen and (max-width: 572px) {
  .reviews {height: 350px}
  .carousel-inner {height: 300px;}
}
@media screen and (max-width: 554px) {
  .btn-wrap .btn-yellow {margin: 10px}
  .head-txt h1, .head-txt h2 {font-size: 24px}
  .head-txt h1 {margin-bottom: 10px}
}

@media screen and (max-width: 493px) {
  .reviews {height: 400px}
  .carousel-inner {height: 350px;}
}
@media screen and (max-width: 487px) {
  .about strong {margin-top: 50px}
}
@media screen and (max-width: 480px) {
  .sm-slide {display: block}
  .lg-slide {display: none}
}
@media screen and (max-width: 376px) {
  .reviews {height: 500px}
  .carousel-inner {height: 450px;}
}
@media screen and (max-width: 349px) {
  .reviews {height: auto; padding: 10px}
  .carousel-inner {height: auto; width: 80%}
}