@charset "utf-8";
@import "reset.css";
@import "fonts/stylesheet.css";

body { margin: 0 auto; font-family: 'Lato'; font-size: 13px; color: #1f140f; -webkit-font-smoothing: antialiased; }

/* links  */ 

a { color: white; -webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
a:hover { color: #2d73b5; -webkit-transition: all 0.2s ease; }


/* títulos y texto */ 

p { line-height: 24px; text-align: justify; }
h1 { font-family: 'Lato Bold'; font-size: 34px; }
h2 { font-size: 25px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; font-family: 'Source Sans Pro', sans-serif; font-style: italic; display: inline-block; margin-right: 5px; }

strong { font-weight: normal; font-family: 'Lato Bold'; }
.big_text { font-size: 16px; line-height: 24px; }

/* colores  */ 

.bg_blue { background-color: #2d73b5; }
.clr_white { color: white; }

/* arreglos  */ 

.pre-load-web { width:100%; height: 100%; width: 100vw; height: 100vh; position:absolute; position:fixed; left:0; top:0; -ms-display: flex; display: -webkit-flex; display: flex; align-items:center; justify-content: center; z-index:100000; }

.center_center { -ms-display: flex; display: -webkit-flex; display: flex; align-items:center; justify-content: center; } 

.listado { width: 100%; -ms-display: flex; display: -webkit-flex; display: flex; align-items: flex-start; justify-content:space-between; flex-wrap: wrap; } 

.center { text-align: center; }
.padding { padding: 60px 30px; }
.margin_bottom { margin-bottom: 60px; }
.ancho { width: 100%; display: block; }
.fullscreen { width: 100%; height: 100vh; }
.image:hover { opacity: 0.7;}

/* general  */ 

.main { position: absolute; width: 100vw; overflow: hidden; }
.section { position: relative; float: left; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; overflow: hidden; }
.cont { position: relative; margin: 0 auto; width: 100%; max-width: 1000px; }
.col1 { float: left; width: 615px; }
.col2 { float: right; width: 350px; }
.col50 { float: left; width: 48%; border-right: 1px solid white; margin-bottom: 15px; }

.right { text-align: right; }
.fila { float: left; width: 100%; }

/* header  */ 

.header, .header_small { position: fixed; top: 0; width: 100%; padding: 30px; z-index: 3000; }
.logo { float: left; }
.nav { float: right; margin-top: 63px; }
.nav li { display: inline-block; margin-left: 20px; font-size: 17px; font-family: 'Lato Medium'; }
.lan { position: absolute; top: 30px; right: 0; }

.header_small { background-color: white; color: #2d73b5; padding: 10px 30px; -webkit-box-shadow: 0px 3px 8px 0px #000000; 
box-shadow: 0px 3px 8px 0px #333; top: -300px; }
.header_small .nav { margin-top: 6px; }
.header_small .nav li a { color: #2d73b5; }
.header_small .nav li a:hover { color: gray; }

.menu, .close { position: absolute; display: none; right: 0; top: 12px; }
.menu a, .close a { color: #2d73b5; }
.menu a:hover, .close a:hover { color: gray; }

.slick div, .slick { position: relative; width: 100%; height: 100%; }
.slick div { background-repeat: no-repeat; background-position: center center; background-size: cover; }
.slick div p { position: absolute; right: 10vh; bottom: 10vh; text-align: right; z-index: 1000; color: white; font-size: 55px; line-height: 50px; font-family: 'Source Sans Pro', sans-serif; font-style: italic; }

.item50, .item100 { display: inline-block; width: 49%; height: 600px; background-repeat: no-repeat; background-size: cover; background-position: center center; margin-bottom: 22px; vertical-align: top; padding: 40px; color: white; font-size: 30px; font-family: 'Source Sans Pro', sans-serif; font-style: italic; line-height: 30px; }
.item1 { background-image: url('imgs/buques.jpg'); }
.item2 { background-image: url('imgs/tanques.jpg'); }
.item3 { background-image: url('imgs/soporte_2.jpg'); }
.item100 { width: 100%; height: 455px; }

.item_trading { display: inline-block; width: 168px; vertical-align: top; margin-top: 30px; }
.item_trading_img { float: left; width: 100%; height: 168px; border-radius: 50%; -ms-display: flex; display: -webkit-flex; display: flex; align-items:center; justify-content: center; margin-bottom: 20px; }

#contacto { background-image: url('imgs/img_contacto.jpg'); background-color: gray; }
#col_contacto { background-color: rgba(45,115,181,0.56); }

.icono { display: inline-block; width: 34px; height: 34px; color: white; border: 1px solid white; border-radius: 50%; margin-right: 10px; text-align: center; padding-top: 4px; margin-bottom: 10px; }

input, textarea { border: 1px solid #ccc; width: 100%; background-color: white; height: 56px; padding: 0 20px; color: #1f140f; margin-bottom: 4px; }
textarea { height: 143px; padding: 20px; }
button { border: 0; margin: 0; cursor: pointer; float: right; padding: 10px; padding-left: 30px; }
button:hover { background-color: gray; }

#footer { padding: 30px; }
.social { margin-bottom: 30px; }
.social li { display: inline-block; margin-left: 30px; }
.social li a { display: inline-block; width: 34px; height: 34px; background-color: white; color: #2d73b5; -ms-display: flex; display: -webkit-flex; display: flex; align-items:center; justify-content: center; border-radius: 50%; }
.social li a:hover { background-color: gray; color: white; }

@media (max-width: 950px) {

body { font-size: 11px; }
h1 { font-size: 18px; }
h2 { font-size: 14px; }
h3 { font-size: 14px; }
h4 { font-size: 13px; }
.big_text { font-size: 14px; line-height: 16px; }
p { line-height: 18px; }

.padding { padding: 40px 30px; }
.margin_bottom { margin-bottom: 30px; }

.header { display: none; }
.header_small { top: 0; padding: 20px 30px; } 
.nav { width: 100%; margin: 30px 0; display: none; }
.nav li { margin: 0; margin-right: 30px; width: 35%; font-size: 13px; margin-top: 30px; }

.menu { display: block; }

.col1, .col2 { width: 100%; }
.col50 { width: 100%; border: 0; margin-bottom: 15px; }

.item50, .item100 { width: 100%; height: 120vw; margin-bottom: 10px; padding: 20px; font-size: 22px; line-height: 22px; background-color: red; }
.icono { padding-top: 6px; }

.slick div p { font-size: 30px; line-height: 26px; right: 30px; }

.item_trading { width: 28vw; margin-top: 20px; margin-left: 15px; margin-right: 15px; }
.item_trading_img { width: 100%; height: 28vw; bottom: 10px; margin-bottom: 10px; }
.item_trading_img img { height: 10vw; }

#footer { text-align: center; }
#footer .cont { display: block; }
.social { margin: 20px 0; text-align: center; }
.social li { display: inline-block; margin: 0 10px; }
.social li a { display: inline-block; width: 34px; height: 34px; background-color: white; color: #2d73b5; -ms-display: flex; display: -webkit-flex; display: flex; align-items:center; justify-content: center; border-radius: 50%; }
.right { text-align: center; }
#logo_footer { width: 100px; }

#map { width: 50%; }

.slick-dots li, .slick-dots li button, .slick-dots li button:before { width: 10px; height: 10px;  margin-top: 10px; }

}