/*
Theme Name: OPEN-SOFT.ro
Theme URI: *
Author: Philippe Focsaneanu
Author URI: https://usk.ro
Description: OPEN-SOFT.ro main theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/



/********************************/
/****     DESIGN & CODE      ****/
/********************************/
/**** Philippe C. Focsaneanu ****/
/**** cfp.philippe@gmail.com ****/
/********************************/

/*** OPENSOFT  ***/

/** GENERAL **/
body, html {width:100%; height:100%; margin:0; padding:0; font-family:Roboto, Arial, Helvetica, sans-serif;}
a {color:#32A5BA; transition:0.3s; cursor:pointer;} a:hover {color:#F9A356; transition:0.3s;}

/** POSITIONING **/
.left {float:left;} .right {float:right;} .clear {clear:both;}

/** WIDTH **/
.sixty {width:56%; padding:0 2%;} .fifty {width:45%; padding:10px 2.5%;} .forty {width:36%; padding:0 2%;}
.auto {width:auto!important; height:auto!important;}

/** JS DISABLED **/
noscript {display:block; position:fixed; z-index:9991; top:0; left:0; right:0; width:100%; padding:5px 0; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:10px; line-height:10px; color:000; background:rgba(255,0,0,0.6);}

/** NAV BAR **/
nav {display:block; position:fixed; z-index:9980; top:0; left:0; right:0; left:0; width:100%; height:40px; padding:20px 0; background:rgba(255,255,255,0.9); font-family:PT Sans Narrow, Arial, Helvetica, sans-serif; transition:0.3s;}
nav .logo {display:none; float:left; margin:0 0 0 20px; height:40px;}
nav .logo img {display:block; height:40px; width:auto;}
nav ul {list-style:none; float:right; margin:0; margin-right:10px;}
nav ul li {display:block; float:left;}
nav ul li a {display:block; padding:10px; margin:0 5px; font-size:18px; line-height:20px; text-decoration:none;}
nav .hamburger {display:none;}

/** HEADER **/
header {position:relative; z-index:-100; top:0; left:0; right:0; width:100%; height:auto; background:url('banner_a.gif'); background-size:cover;}
header video {display:block; width:100%;}
header .logo {display:block; position:fixed; top:50%; left:0; right:0; margin:-6% auto 0 auto; width:40%; height:auto;}
header .logo img {display:block; width:100%;}
header #overlay {display:block; position:absolute; width:100%; height:100%; background-color:#F5F5F5; opacity:0.75;}
#header-placeholder {display:none; width:100%; height:100%; opacity:0;}

/** BODY **/
#wrap {display:block; width:100%; background-color:white;}
.container {display:block; position:relative; background:url('images/bg.png'); border-top:2px solid #FFF;}
.content {display:block; width:94%; padding:20px 3%;}
.container h2 {padding:40px 30px; margin:0; color:#FFFFFF; -webkit-box-shadow:0px 4px 6px 0px rgba(51,51,51,0.25); -moz-box-shadow:0px 4px 6px 0px rgba(51,51,51,0.25); box-shadow:0px 4px 6px 0px rgba(51,51,51,0.25);}
.element {display:block; float:left; width:21%; padding:1px 2%; text-align:center;}
.element:nth-child(5) {clear:both;}
.element img {display:block; margin:0 auto; max-width:260px; height:auto;}
.element h3 {display:block; font-size:20px; margin:0; padding:15px 0; font-family:Roboto, Arial, Helvetica, sans-serif; font-weight:100; color:#333;}
.element p {display:block; text-align:left; font-size:14px; color:#666;}

/** CONTAINERS **/
#software h2 {background-color:#32A5BA;}
#iot h2 {background-color:#F9A356;}
#outsourcing h2 {background-color:#32A5BA;}
#security h2 {background-color:#F9A356;}
#clients h2 {background-color:#F9A356;}
/* CONTACT */
#contact {background-color:#32A5BA!important; background:#32A5BA!important; color:#FFF; padding:20px;}
#contact h3 {font-family:PT Sans Narrow, Arial, Helvetica, sans-serif; font-size:40px; color:#FFF; margin:0; padding:0 0 20px 0; letter-spacing:2px;}
#contact p {margin:0 0 10px 0; padding:0;}
#contact p a {color:#FFF; text-decoration:underline;}
/* CLIENTS */
#clients ul {list-style:none; padding:20px 0; margin:0;}
#clients ul li {display:block; position:relative; float:left; width:18%; height:160px; margin:20px 1%}
#clients ul li img {display:block; position:absolute; top:0; bottom:0; left:0; right:0; max-width:100%; max-height:100%; margin:auto;}
.expand-contract {display:block; position:absolute; width:40px; height:40px; background-color:rgba(255,255,255,1); margin:0 auto; left:0; right:0; bottom:20px; border-radius:40px; border:2px solid #F9A356; color:#32A5BA; font-size:24px; line-height:40px; text-align:center; font-weight:bold; cursor:pointer; opacity:0.8;}
#contract {display:none;}
/* TOOLKIT */
#toolkit {display:block; position:fixed; bottom:0; right:20px; z-index:990;}
#toolkit ul {list-style:none; margin:0; padding:0;}
#toolkit ul li {display:block; float:left;}
#toolkit ul li a {display:block; background:rgba(255,255,255,0.9); padding:5px 10px; margin:0 1px; font-size:12px; line-height:16px; text-decoration:none;}

/** FOOTER **/
footer {display:block; padding:25px 10px; background-color:#333; border-top:4px solid #FFFFFF;}
footer p {display:block; margin:0 0 10px 0; padding:0; text-align:center; font-family:Roboto, Arial, Helvetica, sans-serif; font-size:12px; color:white;}
footer img {display:block; width:200px; margin:0 auto;}

/** PAGE LOADING ANIMATION **/
body {overflow:hidden;}
#loading {display:block; position:fixed; width:100%; height:100%; z-index:9990; left:0; right:0; background-color:rgb(255,255,255);}
#loading-circles {display:block; position:absolute; z-index:9999; width:300px; height:300px; margin:-150px auto 0 auto;; left:0; right:0; top:50%;}
#loading-circles img {display:block; position:absolute; width:300px; height:300px;}
.clockwise {-webkit-animation:clockwise 2s linear infinite; -moz-animation:clockwise 2s linear infinite; -ms-animation:clockwise 2s linear infinite; -o-animation:clockwise 2s linear infinite; animation:clockwise 2s linear infinite;}
.counterclockwise {-webkit-animation:counterclockwise 2s linear infinite; -moz-animation:counterclockwise 2s linear infinite; -ms-animation:counterclockwise 2s linear infinite; -o-animation:counterclockwise 2s linear infinite; animation:counterclockwise 2s linear infinite;}
@-webkit-keyframes clockwise {
  from {-ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);}
  to {-ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);}
}
@keyframes clockwise {
  from {-ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);}
  to {-ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);}
}
@-webkit-keyframes counterclockwise {
  from {-ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);}
  to {-ms-transform:rotate(360deg); -moz-transform:rotate(-360deg); -webkit-transform:rotate(-360deg); -o-transform:rotate(-360deg); transform:rotate(-360deg);}
}
@keyframes counterclockwise {
  from {-ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);}
  to {-ms-transform:rotate(-360deg); -moz-transform:rotate(-360deg); -webkit-transform:rotate(-360deg); -o-transform:rotate(-360deg); transform:rotate(-360deg);}
}

/********************************/
/*** SCREEN SIZE OPTIMIZATION ***/
/********************************/
/*** DESKTOP ***/
@media screen and (max-width:1599px) {
 .element {width:23%; padding:1px 1%;}
 .element img {max-width:220px;}
 .element h3 {font-size:18px;}
 .element p {font-size:12px;}
}
@media screen and (max-width:1365px) {
 header video {display:block; width:140%; height:100%;}
 .element img {max-width:180px;}
 .element h3 {font-size:16px; padding:10px 0;}
 .element p {font-size:10px;}
}
@media screen and (max-width:1279px) {
 .element {width:46%; padding:1px 2%;}
 .element img {max-width:260px;}
 .element h3 {font-size:20px;}
 .element p {font-size:14px;}
 .element:nth-child(odd) {clear:both;}
}
/*** MOBILE ***/
@media screen and (max-width:1023px) {
 nav ul.mobile-nav {top:60px;}
 nav ul {display:none; position:absolute; right:-10px; top:80px; z-index:9990; list-style:none; float:right; margin:0; margin-right:10px; background:rgba(255,255,255,0.9);}
 nav ul li {display:block; float:none; text-align:right;}
 nav ul li a {display:block; padding:10px; margin:10px 5px; font-size:20px; line-height:20px; text-decoration:none;}
 nav .hamburger {display:block; width:50px; height:40px; position:relative; float:right; margin:0 10px; cursor:pointer;
  -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);
  -webkit-transition:.5s ease-in-out; -moz-transition:.5s ease-in-out; -o-transition:.5s ease-in-out; transition:.5s ease-in-out;
 }
 nav .hamburger.open {width:50px;}
 .hamburger span {
  display:block; position:absolute; height:6px; width:50%; background:#32A5BA; opacity:1;
  -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);
  -webkit-transition:.25s ease-in-out; -moz-transition:.25s ease-in-out; -o-transition:.25s ease-in-out; transition:.25s ease-in-out;
 }
 nav .hamburger.open span {background:#F9A356;}
.hamburger span:nth-child(even) {left:50%; border-radius:0 9px 9px 0;}
.hamburger span:nth-child(odd) {left:0px; border-radius:9px 0 0 9px;}
.hamburger span:nth-child(1), .hamburger span:nth-child(2) {top:0px;}
.hamburger span:nth-child(3), .hamburger span:nth-child(4) {top:17px;}
.hamburger span:nth-child(5), .hamburger span:nth-child(6) {top:34px;}
.hamburger.open span:nth-child(1),.hamburger.open span:nth-child(6) {
 -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);
}
.hamburger.open span:nth-child(2),.hamburger.open span:nth-child(5) {
 -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg);
}
.hamburger.open span:nth-child(1) {left:0px; top:7px;}
.hamburger.open span:nth-child(2) {left:calc(50% - 5px); top:7px;}
.hamburger.open span:nth-child(3) {left:-50%; opacity:0;}
.hamburger.open span:nth-child(4) {left:100%; opacity:0;}
.hamburger.open span:nth-child(5) {left:0px; top:29px;}
.hamburger.open span:nth-child(6) {left:calc(50% - 5px); top:29px;}
}
@media screen and (max-width:959px) {
 header video {display:none; width:0; height:0; overflow:hidden;}
}
@media screen and (max-width:880px) {
 #contact .left.sixty {display:block; width:100%; float:none; clear:both; padding:0;}
 #contact .right.forty {display:block; width:100%; float:none; clear:both; margin-bottom:30px; padding:0;}
}
@media screen and (max-width:780px) {
 .element img {max-width:180px;}
 .element h3 {font-size:16px; padding:10px 0;}
 .element p {font-size:10px;}
}
@media screen and (max-width:680px) {
 header .logo {width:80%;}
 .element {display:block; width:100%; padding:0; clear:both; float:none; margin:0 auto 20px auto;}
 .element img {max-width:260px;}
 .element h3 {font-size:20px; padding:15px 0;}
 .element p {font-size:14px;}
 #clients ul li {width:23%; height:60px;}
}
@media screen and (max-width:580px) {
 .container h2 {padding:20px 10px;}
 #clients ul li {width:48%; height:80px;}
 #contact iframe {height:200px!important;}
 div#toolkit {display:block; width:100%; background:rgba(255,255,255,0.9);right:0; left:0; padding:5px 0;} 
 div#toolkit ul {float:right;}
 div#toolkit ul li a {font-size:14px; background:transparent;}
}
@media screen and (max-width:460px) {
 .element img {max-width:180px;}
}
@media screen and (max-width:320px) {}