@charset "utf-8";
/* CSS Document version$ 2.1 Ever Ascencio - Designer (info@everascencio.com)*/
@font-face {
    font-family: 'comfortaalight';
    src: url('comfortaa-light-webfont.woff2') format('woff2'),
         url('comfortaa-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'countrysideregular';
    src: url('countryside_personal_use-webfont.woff2') format('woff2'),
         url('countryside_personal_use-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'get_showregular';
    src: url('get_show-webfont.woff2') format('woff2'),
         url('get_show-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'social_shapesregular';
    src: url('social_shapes-webfont.woff2') format('woff2'),
         url('social_shapes-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {font-size:16px; font-family: Arial, Helvetica, Verdana, sans-serif; color: #444; margin:0px; background-color:#fff; background-repeat: no-repeat; background-size: cover;}
.bodybg {background-image: url(images/pexels-evie-shaffer-2512280.jpg); }
.bodybg0 {background-image: url(images/pexels-evie-shaffer-2395251.jpg);}
.bodybg1 {background-image: url(images/pexels-evie-shaffer-2395255.jpg);}
.bodybg2 {background-image: url(images/5185093.jpg);}
.bodybg3 {background-image: url(images/pexels-evie-shaffer-2512282.jpg);}

body, tr, td, p, input, select, textarea, button{font-family: 'comfortaalight', Helvetica, Arial, Verdana, sans-serif;font-size: 18px}
h1, h2, h3,h4, h5 {font-family:  'comfortaalight', Arial, Helvetica, Verdana, sans-serif;}
h1 {font-size: 200%; font-weight: normal; letter-spacing: -1px}
h2 {font-size:150%; color:#444;}
h3 {color: #111}
p {line-height: normal}
.title {font-size: 50px;}
.header {letter-spacing: -1px; font-size:210%; margin-bottom:0px}
.head {color:#444; letter-spacing: -1px; font-size:500%; margin:10px 0px; font-weight: normal}
a {color: #444; text-decoration:none; transition: 300ms ease-in-out;}
a:hover, a:focus { color:#00aeee;text-decoration: none;outline: none; }
.lnk1 { padding:5px 10px; display:inline-block; margin: 0px 0px 2px 0px; }
.big, big {font-size:150%; }
.small, small { font-size: 0.786em; margin:2px;color: #999 }

* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; outline-color: #ccc}
::-moz-selection { color: #666; background: #ddd;}
::selection { color: #666; background: #ddd; }

#preload {position: fixed; left: 0; top: 0; bottom: 0; right: 0; float: left; display: flex; justify-content: center; align-items: center; padding: 20px; z-index: 9999999; transition: .3s all ease; background: #fff}
#floatMenu {margin:auto;width:100%; position:fixed;top:0px;z-index:100; } /*NAV*/
#send {min-height:400px}

footer {overflow: hidden; text-align: center;padding-bottom:125px}

    #smenu {width:50px; padding:12px;display:block;float:left}
    #smenu a {font-size:200%;color:#AA076B}
    .logo {position: fixed; top:25px; right: 0; z-index:102;}
    #menu {clear:both; display: none; overflow:hidden;transition: 300ms ease-in-out; position: fixed; top:0; left: 0; z-index:101; width:100%}
    #menu a { padding:20px; display:block; margin: 0px 0px 2px 0px; color: #fff; backdrop-filter:saturate(150%) blur(20px)}
    #menu a:hover, #menu a.selected {background: #d90a8996 !important;}

hr {border:solid 3px #ccc; width: 25%;}
article {background: #fff; margin:20px; overflow: hidden; }
label, th, .mini {font-size: 9px !important; text-transform: uppercase; color: #333}
.spaced {padding:10px}
.floatright {float:right; width: auto}
.pad20, #send, .alert {padding:20px; overflow: hidden;}
.twhite, .twhite p, .twhite h3 a {color: #fff !important;}
.twhite p b {color: #efa6a6}
.shade, article {box-shadow: 0 10px 20px 1px rgba(0,0,0,.5);  }
.scroll, .left, .right { border-style: solid;
          border-color:  #000;
    border-width: 0.25em 0.25em 0 0;
    content: '';
    display: block;
    height: 20px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    width: 20px;
    margin: auto;
}
.left {-webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);display: inline-block;opacity: 0.3}
.right {-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);display: inline-block;opacity: 0.3}
.blinks {animation: blink 1s infinite;}
a.blinks {display: inline-block;}
a.blinks .left, a.blinks .right { opacity: 1;}
.alert {background:#fdcc0c; color:#666; animation: blinked 0.3s infinite;}
.imgfn, .circle, .imgfl {background-size: cover !important; background-repeat:no-repeat; background-position: 50% 50% !important;}
.imgfx {background-size: cover; background-repeat:no-repeat; background-attachment: scroll; background-position: 50% 50%; background-color:#232323;}
.imgfx h3 {padding:130px 0 0 0}
.imgfn { background-color:#f2f2f2; width:100%; display: block; height:200px}
.imgfl { background-color:#f2f2f2; width:100%; display: block; height:100%}
.border_green {border: 1px dashed #45a049}
.green {color: #45a049}
.boxes {width:100%; overflow: hidden; margin: 10px 0 10px 0; text-align: center;}
.borders {-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}
.gallery{list-style: outside none; width:100%; float:none;margin:0;padding: 0px; overflow: hidden}
.gallery div {width:100px; height:100px; display: inline-block; overflow:hidden}
.gallery div a{width:100px; height:100px; display:inline-block}
.blue {background-color: #AA076B; background-image: linear-gradient(to right, #AA076B 0%, #61045F  51%, #AA076B  100%);}
.circle {border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; width:100px; height: 100px; display:block; margin: 10px auto 30px auto}
    .circle:hover {animation: blink 0.5s infinite;}
section {margin:20px auto;}
.section, .section_small, .hddn, footer {margin:auto;max-width: 1000px;}
    .section {clear:both; min-height:600px;} /*overflow:hidden*/
    .section_small {clear:both; min-height:300px;} /*overflow:hidden*/
.col-15, .col-20, .col-25, .col-35, .col-50, .col-65, .col-75, .col-80, .col-85, .col-40, .col-60, .col-100 { float: none; width: 100%; }
.colum-25 { display: inline-block; text-align: center; width: 50%}

.badge{position:relative;}
.badge[data-badge]:after {content:attr(data-badge);position:absolute;top:-10px;right:-10px;font-size:12px !important;background:#c81f43;color:#fff;width:20px;height:20px;text-align:center;line-height:20px;border-radius:50%; 
    animation: blink 1s; animation-iteration-count: 2;
    -webkit-animation: blink 1s; -webkit-animation-iteration-count: 2;
    -moz-animation: blink 1s; -moz-animation-iteration-count: 2;
    -o-animation: blink 1s; -o-animation-iteration-count: 2;
}
.fieldForm50, .fieldForm100 {width:100%;display:block; min-height:90px;height:auto; float:none}

[disabled] { border:solid 1px #a5acb2; color:#9d9da1 !important; background:#f7f7f7 !important; }
input, select, textarea { width: 100%; padding: 12px; border: 2px solid #ccc; resize: vertical; float:none;outline-color:#fff; border-radius: 6px;}
input[type=number] { width: 100% !important; padding: 12px; border:1px solid #ccc; resize: vertical; float:none; border-radius: 6px; background: auto; width: 70px}
label {float:none; width: 100%; padding: 12px 0 12px 0;}
select, input[type=date] {-webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(images/arrow_down_512.png) 100% 0px no-repeat; background-size: contain  }
select[multiple=multiple] {background-image:none}

input[type=button], input[type=reset], button[type=button], button[type=reset], button[type=submit], button{background-color: #60dfcd; background-image: linear-gradient(315deg, #60dfcd 0%, #1e9afe 74%); color: #fff; padding: 12px 20px; border: none; border-radius: 6px; cursor: pointer; text-transform:uppercase; transition: 300ms ease-in-out;}
button:hover {background-color: #f89b9e; background-image: linear-gradient(315deg, #f89b9e 0%, #c9d9ff 74%);}

.fb:before, .tw:before, .ins:before, .web:before, .mai:before, .utb:before, .in:before {display: inline-block; font-family: "social_shapesregular"; font-weight: normal; font-style: normal; text-align: center; -webkit-font-smoothing: antialiased;}
.fb:before {content: '!'; font-size: 200%}
.tw:before {content: '"'; font-size: 200%}
.ins:before {content: '$'; font-size: 200%}
.web:before {content: 'É'; font-size: 200%}
.mai:before {content: 'È'; font-size: 200%}
.utb:before {content: '*'; font-size: 200%} 
.in:before {content: "'"; font-size: 200%} 
.fb:hover::before, .tw:hover::before, .ins:hover::before, .web:hover::before, .mai:hover::before, .utb:hover::before, .in:hover::before {color:#00aeee}

table {width:100%}
table tr th {font-size:85%; text-transform: uppercase;border-bottom:solid 1px #444}
table tr,  table tr td {font-size:85%; padding:2px;border-bottom:dotted 1px #ccc}

.usl-loading { opacity: 0.75; }

#slider {clear:both; display: block}
#slider > div {background-size:cover !important; transition: transform 6s ease-in !important; height: 300px; background-attachment: fixed}
#slider > div > div { margin:auto; width:100%; padding-top:150px; font-size: 50px; color:#fff !important; font-weight:lighter; line-height:40px}

@keyframes blink {
    0%   {opacity: 1; transform: scale(1); }
    70%  {opacity: 0.9; transform: scale(0.9); }
    100% {opacity: 1; transform: scale(1); }
}

@keyframes blinking {
    0%   {opacity: 0; }
    25%  {opacity: 1; }
    50%  {opacity: 0; }
    100% {opacity: 1; }
}

@keyframes blinked { 
   50% { border-right: 2px solid #000; } 
}

.lds-circle { display: inline-block; transform: translateZ(1px); }
.lds-circle > div { display: inline-block; width: 51px; height: 150px;
  background-image:url(images/cocacola.png); background-size: cover; animation: lds-circle 7s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@keyframes lds-circle {
  0%, 100% { animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); }
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(1800deg); animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); }
  100% { transform: rotateY(3600deg); }
}


@media (min-width: 750px) and (max-width: 1100px) { /*tablet*/
    article h1, .col-35 h1 {font-size:200%; }
    .col-65 h4 {font-size:210%; }
            .circle {width:150px; height:150px}
    .img {width:100% !important; height:auto; transform: translateY(10px) !important}
    .imgfx {background-attachment:scroll !important;}
    
    #slider > div > div, #slider > div {width:100%;}
    #slider > div {height: 550px}
    #slider > div > div { padding-top:200px; font-size:100px; ; line-height: 90px}

    .section {min-height:550px;}
}

/* Diseño receptivo: cuando la pantalla tiene menos de 600 píxeles de ancho, haga que las dos columnas se apilen una encima de la otra en lugar de una al lado de la otra */
@media all and (min-width: 740px) {
    .col-15 { float: left; width: 15%; }
    .col-20 { float: left; width: 20%; }
    .col-25 { float: left; width: 25%; }
    .col-35 { float: left; width: 35%; }
    .col-65 { float: left; width: 65%; }
    .col-75 { float: left; width: 75%; }
    .col-80 { float: left; width: 80%; }
    .col-85 { float: left; width: 85%; }
    .col-50 { float: left; width: 50%; }
    .col-40 { float: left; width: 40%; }
    .col-60 { float: left; width: 60%;}
    .col-100 { float: none; width: 100%; clear:both}
    .colum-25 { display: inline-block; width: 25%; }
    .imgfx {background-attachment:fixed;}

    button {width:auto;}
    article {margin:30px}
    .fieldForm50 {width:50%; min-height:90px; min-width: 300px; height:auto; float: left;padding:5px}
    .fieldForm100 {width:100%;display:block; min-height:90px; height:auto;float:none;padding:5px; overflow: hidden}
    .fieldForm100 input, .fieldForm100 select, .fieldForm100 textarea, .fieldForm100 label { width: 100%; }

    #menu {width:30%;}

    h1 {font-size:250%; }
    h2 {font-size:150%; }
    .title { font-size:130px;}
    .header {font-size:200%; }

    #slider > div > div, #slider > div {width:100%;}
    #slider > div {height: 800px; background-attachment: fixed !important}
    #slider > div > div {padding-top:400px; font-size:130px; line-height: 100px}

    .section {min-height:800px;}
    .circle {width:200px; height: 200px;}

}