/*=================
    ETV COLORS
=================*/

/*
    Blue = #789fbb;
    Red = #e35760;
    Gray = #ccd4d4;
    yellow = #f8df9c;
}*/

/*********************
     floater
*********************/

#floater {
    position: absolute;
    top: 200px;
    right: 0px;
    width: 40px;
    height: 150px;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
    z-index: 1;
    background-color: #f8df9c;
    -webkit-border-radius: 25px 0 0 25px;
    -moz-border-radius: 25px 0 0 25px;
    -o-border-radius: 25px 0 0 25px;
    border-radius: 25px 0 0 25px;
}

/*********************
     INDEX.HTML
*********************/

/*====================
HTML ATTRIBUTE VALUES
====================*/

* {
    margin: 0;
}

html, body{
    width: 100%;
    font-family:"Open Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.79;
    -webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	-o-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    position: relative;
    padding-bottom: 40px;
}

h1 {
    padding: 0;
}

h2 {
    font-size: 65px;
    font-weight: 600;
    letter-spacing: -3px;
    padding-bottom: 30px;
    margin: 0;
}

h3 {
    padding-bottom: 15px;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -2px;
}

/*====================
SHARED CSS ATTRIBUTES
====================*/

.container,
.boxtrans,
.row {
    max-width: 970px;
}

.services-all,
.location,
.virtual-office-description,
.values,
.quote {
    padding: 80px 0;
}

/*====================
    NAVIGATION BAR
====================*/

.navbar.bgcolorscroll {
    background-color: rgba(231, 231, 231, 0.95);
}

.navbar {
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}

.navbar {
    padding: 25px 0 10px;
}

.logo {
    width: 217.6px;
    height: 73.6px; 
    background: url(img/logo.png) top left no-repeat;
    background-size: 100%;
    text-indent: -9999px;
    margin: 0 auto;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.logo-shrink {
    width: 149.6px;
    height: 50.6px;
}

.list {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    
}


.shrink-padding {
    margin-top: 0 !important;    
}

.navbar li.list {
    margin-top: 15px;
}

.navbar li a.menu-item {
    padding: 0;
    margin: 5px;
    padding: 5px 10px;
/*
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
*/
}

.navbar li a.menu-item:hover {
    background-color: #ccd4d4 !important;
    color: #f8f8f8 !important;
}

.navbar li:hover > a {
    background-color: #ccd4d4 !important;
    color: #f8f8f8 !important;
}

.navbar li a.menu-item.active {
    background-color: #789fbb !important;
    color: #f8f8f8 !important;
}


.navbar ul li:hover > ul.dropdown-menu {
    display: block;
}

.dropdown-menu {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.dropdown-item {
    padding: 10px !important;
}

#dom {
    border-left: 3px solid #789fbb;
}

a#dom:hover {
    background-color: #789fbb !important;
    color: white !important;
}

#serv {
    border-left: 3px solid #e35760;
}

a#serv:hover {
    background-color: #e35760 !important;
    color: white !important;
}

#ofi {
    border-left: 3px solid #ccd4d4;
}

a#ofi:hover {
    background-color: #ccd4d4 !important;
    color: #333 !important;
}

#ofiplus {
    border-left: 3px solid #f8df9c;
}

a#ofiplus:hover {
    background-color: #f8df9c !important;
    color: #333 !important;
}

/* */

/*
ul.nav:before, ul.nav:after {
    content: "";
    display: table;
}

ul.nav > li {
    position: relative;
}

ul.nav a {
    display: block;
}

ul.nav li.dropdown ul.dropdown-menu {
    position: absolute;
    left: 0;
    top: 36px !important;
    z-index: 1;
}

ul.nav li.dropdown ul.dropdown-menu li{
    height: 0 !important;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

ul.nav > li.dropdown:hover ul.dropdown-menu li {
    height: 36px !important;
}

*/

.dropdown .dropdown-menu {
    background-color: rgba(231, 231, 231, 0.9);
    display: block;
    visibility: hidden;
    opacity: 0;
    transition:         all 0.5s  ease;
    -moz-transition:    all 0.5s  ease;
    -webkit-transition: all 0.5s  ease;
    -o-transition:      all 0.5s  ease;
    -ms-transition:     all 0.5s  ease;
}
.dropdown:hover .dropdown-menu {
  visibility: visible;
  opacity: 1;
}
.dropdown {
  display: inline-block;
}

/*====================
        COVER
====================*/

.cover{
    background: url('img/cover1.jpg') top left no-repeat;
    background-size: cover;
    display: table;
    width: 100%;
    height: 1280px;
}

.cover .boxtrans{
    text-align: center;
    color: white;
    display: table-cell;
    vertical-align: middle;
    background: rgba(0,0,0,0.4);
}

/*====================
       SERVICES
====================*/

.services-all {
    margin: 0 auto;
    text-align: center;
}

.section-head {
    padding-bottom: 60px;
}

img.services {
    width: 150px;
    border: 1px solid #333;
    margin-bottom: 30px;
}

.service-customerservice {
    border-left: 4px solid #f1f1f1;
    border-right: 4px solid #f1f1f1;
}

/*====================
       LOCATION
====================*/

.location {
    background: url(img/lapaz_bolivia.jpg) top left no-repeat;
    width: 100%;
    height: 500px;
    position: relative;
    text-align: center;
    color: white;
}

/*====================
 SERVICE DESCRIPTION
====================*/

#virtual-office-description {
    display: flex;
    align-items: center;
    
}

#virtual-office-description .col-sm-6{
    text-align: justify;
}

/*====================
       VALUES
====================*/

.values {
    background-color: #789fbb;
    color: white;
    text-align: center;
}

/*====================
       QUOTE
====================*/

.quote {
    text-align: center;
}

/*====================
      GOOGLEMAPS
====================*/

#googlemap {
    width: 100%;
    height: 500px;
    background-color: #ccd4d4;
    padding: 60px 0 0;
}

#map {
    width: 970px;
    height: 380px;
}

/*====================
 GENERAL INFORMATION
====================*/

.general-info {
    background-color: #ccd4d4;
    text-align: center;
    padding: 0;
    margin: 0;
}

.general-info {
    padding-bottom: 15px;
}

.general-info li{
    list-style: none;
}

.general-info ul {
    padding: 0;
}

.general-info a:link,
.general-info a:visited,
.general-info a:hover,
.general-info a:active{
    text-decoration: none;
}

/*====================
       FOOTER
====================*/

.footer {
    width: 100%;
    height: 40px;
    background-color: #ccd4d4;
    position: absolute;
    bottom: 0;
    text-align: center;
    border-top: 0.1px solid #e7e7e7;
}

.footer p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-55%);
}

/*********************
   CONTACT_FORM.PHP
*********************/

/*====================
    CONTACT FORM
====================*/

.contact-form-page {
    background: #f8df9c;
}

.contact-form {
    padding-top: 120px;
    text-align: center;
}

.contact-form .container {
    padding-bottom: 25px;
}

/*********************
  FORM ERROR SUCCES
*********************/

.error {
    color: red;
}

.success {
    color: green;
}

/*********************
   PRECIOS.HTML
*********************/

/*====================
    PRECIOS CONTENT
====================*/

.nav-costos a {
    font-size: 12px;
}

.nav-costos li {
    padding: 35px 10px 0 10px;
}

#precios-content {
    padding-top: 130px;
}

#planA, #planB, #planC, #planD {
    width: 100%;
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
    margin-top: 50px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 4px 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#planA {
    background-color: #789fbb;
    color: white;
}

#planB {
    background-color: #e35760;
    color: white;
}

#planC {
    background: #ccd4d4;
    color: #333;
}

#planD {
    background: #f8df9c;
    color: #333;
    margin-bottom: 50px;
}

.costos-title {
    text-align: center;
    text-shadow: 10px;
    font-weight: 600;
    font-size: 50px;
}

#precios-content p, #precios-content small {
    margin: 0;
    padding: 0;
}

.price-tag {
    font-size: 80px;
    letter-spacing: -8;
    font-weight: 400;
}

.col-sm-6 h1, .price-info {
    text-align: center;
}

hr.style14 { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}

/*=====================
        PLAN FORM
=======================*/

.costos-title {
    color: #333;
    text-shadow: 2px 4px 3px rgba(51,51,51,0.3);
}

.plan-form-page {
    background: #f8df9c;
}

.plan-form {
    margin-top: 50px;
    text-align: center;
    background-color:floralwhite;
}

.plan-form .container {
    padding-bottom: 25px;
}

.form-error {
    color: #e35760;
}

.form-success {
    color: green;
}

.input-error {
    box-shadow: 0 0 5px #e35760;
}

#contacto-myModal, #costos-myModal {
    text-align: center;
}

#plan-submit {
    background-color: #e35760;
}

.modal-body {
    background-color: #ccd4d4; 
}
.modal-header {
    background-color: #789fbb;
    color: #e7e7e7;
}

.modal-header h3 {
    margin: 0;
    padding: 0;
}

#contactoSuccess_message, #costosSuccess_message {
    color: green;
}

/*********************
   POLITICA PRIVACIDAD
*********************/

.privacy-content {
    padding-top: 130px;
    padding-bottom: 60px;
}

.privacy-content h3 {
    margin-top: 30px;
    font-size: 24px;
}

.privacy-content p,
.privacy-content ul {
    text-align: justify;
}

.privacy-content ul {
    padding-left: 20px;
}

.privacy-content ul li {
    margin-bottom: 5px;
}

/*====================
    MEDIAQUERIES
====================*/

@media only  screen and (max-width: 767px) {
    #planA, #planB, #planC, #planD {
        flex-direction: column;
    }
}

@media only  screen and (max-width: 568px) {
    .cover {
        height: 800px;
    }
    .boxtrans {
        padding: 0 20px;
    }
    #textarea {
        resize: none;
    }
    .services-all .col-sm-4, .services-all p{
        margin: 0;
        padding: 0;
    }
    
    .service-address, .service-customerservice {
        margin-bottom: 40px !important;
    }
}