body {
  background: white;
  /* background: #4bc0df */
}

@font-face {
  font-family: GothamNarrow-Book;
  src: url('../fonts/GothamNarrow-Book.ttf');
}

header {
  background: #4bc0df
}

.navbar-center {
  font-size: 26px
}

.legend-icon img {
  max-height: 50px;
  width: auto;
}

.legend-icon p {
  color: #4bc0df
}

.contTit {
  background: #4bc0df;
  color: white;
  padding: 10px 0px;
  margin: 50px 0;
  text-align: center
}

.contTit h2 {
  margin: 0;
  font-size: 22px !important
}

#logos-header {
    margin-top: 35px
}

 #logos-header::before, #logos-header::after {
    display: none;
 }

#mainWrapper {
  height: auto;
}

#embarcacion {
  max-width: 1500px;
  margin: auto;
  padding: 0 15px;
}

#tooltip, #vel_cont {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
  font-size: 25px;
  line-height: 26px
}

.number_sel {
  padding: 12px;
  margin-right: 10px;
  width: 20px;
  height: 20px;
  font-size: 18px;
  border: 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
}

.faro:hover, .number:hover, .embNum:hover, .velNum:hover, #Gris_Media:hover, #Gris_Moder:hover, #Gris_Contem:hover {
    cursor: pointer;
}

.active-button {
  margin: 20px auto 30px;
    width: 45px;
    font-size: 48px;
    color: #014369;
    cursor: pointer;
    height: 45px;
    text-align: center;
}

#target {
  display: none
}

.barRow {
  display: flex;
}

.barRow img {
  width: 100%;
  max-height: 180px
}

.flexCont {
  width: 90%; 
  text-align: center;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-end
}

.flexCont p {
  text-align: left
}

.flexCont div {
  width: 30%; 
  text-align: center;
  margin-bottom: 25px
}

.flexCont img {
  margin-top: 15px;
  max-width: 100%;
  max-height: 300px
}

#roles:after, #roles:before {
  display: none
}

#roles {
  align-items: flex-start
}

#roles div {
  width: 22%; 
  text-align: center
}

#roles img {
  max-width: 100%;
  max-height: 160px
}

#velas > div {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.track path {
  color: transparent;
  stroke-dasharray: 470;
  stroke-dashoffset: 470;
  animation: drawLine 3s linear forwards
}

.track text {
  animation: colorText 3s linear forwards
}

.track path, .track text{
  display: none
}

#track1 path, #track1 text {
  animation-delay: 4s
} 

#track2 path, #track2 text {
  animation-delay: 8s
} 

#track3 path, #track3 text {
  animation-delay: 12s
}

#track4 path, #track4 text {
  animation-delay: 16s
}

#track5 path, #track5 text {
  animation-delay: 20s
}

#track6 path, #track6 text {
  animation-delay: 24s
}

#track7 path, #track7 text {
  animation-delay: 28s
}

#track8 path, #track8 text {
  animation-delay: 32s
}

#track9 path, #track9 text {
  animation-delay: 36s
}

#track10 path, #track10 text {
  animation-delay: 40s
}

#track11 path, #track11 text {
  animation-delay: 44s
}

#track12 path, #track12 text {
  animation-delay: 48s
}

#track13 path, #track13 text {
  animation-delay: 52s
}

#track14 path, #track14 text {
  animation-delay: 56s
}

#track15 path, #track15 text {
  animation-delay: 60s
}

#track16 path, #track16 text {
  animation-delay: 64s
}

#track17 path, #track17 text {
  animation-delay: 68s
}

#track18 path, #track18 text {
  animation-delay: 71s
}

#track19 path, #track19 text {
  animation-delay: 76s
}

#track20 path, #track20 text {
  animation-delay: 80s
}


@keyframes colorText {
  from {
    fill: transparent
  }
  to {
    fill: #6d6e6c;
  }
}

@keyframes drawLine {
  from {
    stroke-dashoffset: 450;
  }
  to {
    stroke-dashoffset: 0;
  }
}

#tesoro {
  width: 90%;
  padding-bottom: 25px;
  text-align: center;
  margin: auto
}

#tesoro p {
  margin-top: 45px;
  text-align: left
}

#tesoro img {
  max-height: 160px;
  width: auto;
}

#Gris {
  position: absolute;
  top: 0;
  left: 0
}

#Gris .cls-1, #Gris .cls-114 {
  fill: none;
}

#Gris .cls-2 {
  fill: #9b9b9b;
}

#Gris .cls-3 {
  fill: #f8f8f8;
}

#Gris .cls-4 {
  fill: #c3c3c3;
}

#Gris .cls-5 {
  fill: #dcdcdc;
}

#Gris .cls-6 {
  fill: #c2c2c2;
}

#Gris .cls-7 {
  fill: #e8e8e8;
}

#Gris .cls-8 {
  fill: #e0e0e0;
}

#Gris .cls-9 {
  fill: #d4d4d4;
}

#Gris .cls-10 {
  clip-path: url(#clip-path);
}

#Gris .cls-11 {
  clip-path: url(#clip-path-2);
}

#Gris .cls-12 {
  clip-path: url(#clip-path-3);
}

#Gris .cls-13 {
  clip-path: url(#clip-path-4);
}

#Gris .cls-14 {
  clip-path: url(#clip-path-5);
}

#Gris .cls-15 {
  fill: #f2f2f2;
}

#Gris .cls-16 {
  fill: #b8b8b8;
}

#Gris .cls-17 {
  fill: #434343;
}

#Gris .cls-18 {
  fill: #8a8a8a;
}

#Gris .cls-19 {
  fill: #464646;
}

#Gris .cls-20 {
  fill: #515151;
}

#Gris .cls-21 {
  fill: #595959;
}

#Gris .cls-22 {
  fill: #3f3f3f;
}

#Gris .cls-23 {
  fill: #fff;
}

#Gris .cls-24 {
  fill: #8f8f8f;
}

#Gris .cls-25 {
  fill: #4d4d4d;
}

#Gris .cls-26 {
  fill: #a3a3a3;
}

#Gris .cls-27 {
  fill: #060606;
}

#Gris .cls-28 {
  fill: #7c7c7c;
}

#Gris .cls-29 {
  fill: #535353;
}

#Gris .cls-30 {
  fill: gray;
}

#Gris .cls-31 {
  fill: #525252;
}

#Gris .cls-32 {
  fill: #262626;
}

#Gris .cls-33 {
  fill: #999;
}

#Gris .cls-34 {
  fill: #7e7e7e;
}

#Gris .cls-35 {
  fill: #656565;
}

#Gris .cls-36 {
  fill: #f9f9f9;
}

#Gris .cls-37 {
  fill: #c1c1c1;
}

#Gris .cls-38 {
  fill: #efefef;
}

#Gris .cls-39 {
  fill: #696969;
}

#Gris .cls-40 {
  fill: #222;
}

#Gris .cls-41 {
  fill: #ebebeb;
}

#Gris .cls-42 {
  fill: #636363;
}

#Gris .cls-43 {
  fill: #b1b1b1;
}

#Gris .cls-44 {
  fill: #161616;
}

#Gris .cls-45 {
  fill: #909090;
}

#Gris .cls-46 {
  fill: #454545;
}

#Gris .cls-47 {
  fill: #9c9c9c;
}

#Gris .cls-48 {
  fill: #bfbfbf;
}

#Gris .cls-49 {
  fill: #bdbdbd;
}

#Gris .cls-50 {
  fill: #aaa;
}

#Gris .cls-51 {
  fill: #2c2c2c;
}

#Gris .cls-52 {
  fill: #5a5a5a;
}

#Gris .cls-53 {
  fill: #575757;
}

#Gris .cls-54 {
  fill: #cecece;
}

#Gris .cls-55 {
  fill: #e7e7e7;
}

#Gris .cls-56 {
  fill: #aeaeae;
}

#Gris .cls-57 {
  fill: #282828;
}

#Gris .cls-58 {
  fill: #b5b5b5;
}

#Gris .cls-59 {
  fill: #404040;
}

#Gris .cls-60 {
  fill: #b0b0b0;
}

#Gris .cls-61 {
  fill: #7d7d7d;
}

#Gris .cls-62 {
  clip-path: url(#clip-path-6);
}

#Gris .cls-63 {
  clip-path: url(#clip-path-7);
}

#Gris .cls-64 {
  fill: #dfdfdf;
}

#Gris .cls-65 {
  fill: #dbdbdb;
}

#Gris .cls-66 {
  fill: #5c5c5c;
}

#Gris .cls-67 {
  fill: #484848;
}

#Gris .cls-68 {
  fill: #0b0b0b;
}

#Gris .cls-69 {
  fill: #878787;
}

#Gris .cls-70 {
  fill: #080808;
}

#Gris .cls-71 {
  fill: #a7a7a7;
}

#Gris .cls-72 {
  fill: #838383;
}

#Gris .cls-73 {
  fill: #1d1d1d;
}

#Gris .cls-74 {
  fill: #0f0f0f;
}

#Gris .cls-75 {
  clip-path: url(#clip-path-8);
}

#Gris .cls-76 {
  fill: #292929;
}

#Gris .cls-77 {
  fill: #313131;
}

#Gris .cls-78 {
  fill: #ddd;
}

#Gris .cls-79 {
  fill: #303030;
}

#Gris .cls-80 {
  fill: #757575;
}

#Gris .cls-81 {
  fill: #3e3e3e;
}

#Gris .cls-82 {
  fill: #717171;
}

#Gris .cls-83 {
  fill: #0c0c0c;
}

#Gris .cls-84 {
  fill: #505050;
}

#Gris .cls-85 {
  fill: #030303;
}

#Gris .cls-86 {
  fill: #b6b6b6;
}

#Gris .cls-87 {
  fill: #4f4f4f;
}

#Gris .cls-88 {
  fill: #818181;
}

#Gris .cls-89 {
  fill: #3d3d3d;
}

#Gris .cls-90 {
  fill: #d9d9d9;
}

#Gris .cls-91 {
  fill: #8b8b8b;
}

#Gris .cls-92 {
  fill: #565656;
}

#Gris .cls-93 {
  fill: #ababab;
}

#Gris .cls-94 {
  fill: #8c8c8c;
}

#Gris .cls-95 {
  fill: #363636;
}

#Gris .cls-96 {
  fill: #323232;
}

#Gris .cls-97 {
  fill: #727272;
}

#Gris .cls-98 {
  fill: #666;
}

#Gris .cls-99 {
  clip-path: url(#clip-path-9);
}

#Gris .cls-100 {
  fill: #e6e6e6;
}

#Gris .cls-101 {
  fill: #050505;
}

#Gris .cls-102 {
  fill: #2b2b2b;
}

#Gris .cls-103 {
  fill: #a9a9a9;
}

#Gris .cls-104 {
  fill: #3c3c3c;
}

#Gris .cls-105 {
  fill: #737373;
}

#Gris .cls-106 {
  fill: #2f2f2f;
}

#Gris .cls-107 {
  fill: #141414;
}

#Gris .cls-108 {
  fill: #8e8e8e;
}

#Gris .cls-109 {
  fill: #4c4c4c;
}

#Gris .cls-110 {
  fill: #131313;
}

#Gris .cls-111 {
  fill: #5e5e5e;
}

#Gris .cls-112 {
  fill: #d2d2d2;
}

#Gris .cls-113 {
  fill: #616161;
}

#Gris .cls-114 {
  stroke: #9b9b9b;
  stroke-width: 9px;
}

#Color .cls-1, #Color .cls-204 {
  fill: none;
}

#Color .cls-2 {
  fill: #309ab9;
}

#Color .cls-3 {
  fill: #464430;
}

#Color .cls-4 {
  fill: #6c674c;
}

#Color .cls-5 {
  fill: #bab294;
}

#Color .cls-6 {
  fill: #7c7048;
}

#Color .cls-7 {
  fill: #fff;
}

#Color .cls-8 {
  fill: #989590;
}

#Color .cls-9 {
  fill: #676764;
}

#Color .cls-10 {
  fill: #42423c;
}

#Color .cls-11 {
  fill: #f9f9e4;
}

#Color .cls-12 {
  fill: #c5c5aa;
}

#Color .cls-13 {
  fill: #695b4b;
}

#Color .cls-14 {
  fill: #a9a7ac;
}

#Color .cls-15 {
  fill: #4a423b;
}

#Color .cls-16 {
  fill: #333328;
}

#Color .cls-17 {
  fill: #7e796b;
}

#Color .cls-18 {
  fill: #58503c;
}

#Color .cls-19 {
  fill: #5a595a;
}

#Color .cls-20 {
  fill: #333236;
}

#Color .cls-21 {
  fill: #7f7f7f;
}

#Color .cls-22 {
  fill: #454647;
}

#Color .cls-23 {
  fill: #c6d1d2;
}

#Color .cls-24 {
  fill: #978544;
}

#Color .cls-25 {
  fill: #7b3d32;
}

#Color .cls-26 {
  fill: #514b40;
}

#Color .cls-27 {
  fill: #3c362d;
}

#Color .cls-28 {
  fill: #c27272;
}

#Color .cls-29 {
  fill: #6e6e6d;
}

#Color .cls-30 {
  fill: #3c2516;
}

#Color .cls-31 {
  fill: #20140e;
}

#Color .cls-32 {
  fill: #c4c5aa;
}

#Color .cls-33 {
  fill: #a6451e;
}

#Color .cls-34 {
  fill: #632613;
}

#Color .cls-35 {
  fill: #9f533c;
}

#Color .cls-36 {
  fill: #ddddc5;
}

#Color .cls-37 {
  fill: #c4c4aa;
}

#Color .cls-38 {
  fill: #41434a;
}

#Color .cls-39 {
  fill: #2e3036;
}

#Color .cls-40 {
  fill: #ddddc3;
}

#Color .cls-41 {
  fill: #6c3b20;
}

#Color .cls-42 {
  fill: #8c7a6c;
}

#Color .cls-43 {
  fill: #4e2a17;
}

#Color .cls-44 {
  fill: #53331d;
}

#Color .cls-45 {
  fill: #442917;
}

#Color .cls-46 {
  fill: #3d140e;
}

#Color .cls-47 {
  fill: #bdb283;
}

#Color .cls-48 {
  fill: #a3986d;
}

#Color .cls-49 {
  fill: #843016;
}

#Color .cls-50 {
  fill: #626765;
}

#Color .cls-51 {
  fill: #c37f46;
}

#Color .cls-52 {
  fill: #a16334;
}

#Color .cls-53 {
  fill: #dab180;
}

#Color .cls-54 {
  fill: #ad8a64;
}

#Color .cls-55 {
  fill: #444549;
}

#Color .cls-56 {
  fill: #423633;
}

#Color .cls-57 {
  fill: #55565a;
}

#Color .cls-58 {
  fill: #e0c87e;
}

#Color .cls-59 {
  fill: #978246;
}

#Color .cls-60 {
  fill: #952b46;
}

#Color .cls-61 {
  fill: #bf3754;
}

#Color .cls-62 {
  fill: #010101;
}

#Color .cls-63 {
  fill: #514844;
}

#Color .cls-64 {
  fill: #735639;
}

#Color .cls-65 {
  fill: #452e1c;
}

#Color .cls-66 {
  fill: #977857;
}

#Color .cls-67 {
  fill: #764f30;
}

#Color .cls-68 {
  fill: #3e3b39;
}

#Color .cls-69 {
  fill: #161413;
}

#Color .cls-70 {
  fill: #fdf4cf;
}

#Color .cls-71 {
  fill: #c9bd8d;
}

#Color .cls-72 {
  fill: #615851;
}

#Color .cls-73 {
  fill: #3a2716;
}

#Color .cls-74 {
  fill: #3f352e;
}

#Color .cls-75 {
  fill: #281e16;
}

#Color .cls-76 {
  fill: #271e18;
}

#Color .cls-77 {
  fill: #70727d;
}

#Color .cls-78 {
  fill: #b99366;
}

#Color .cls-79 {
  fill: #926c47;
}

#Color .cls-80 {
  fill: #4f3e31;
}

#Color .cls-81 {
  fill: #443223;
}

#Color .cls-82 {
  fill: #646260;
}

#Color .cls-83 {
  fill: #343332;
}

#Color .cls-84 {
  fill: #dadac3;
}

#Color .cls-85 {
  fill: #ada08b;
}

#Color .cls-86 {
  fill: #5a4936;
}

#Color .cls-87 {
  fill: #837869;
}

#Color .cls-88 {
  fill: #baaca1;
}

#Color .cls-89 {
  fill: #5f544c;
}

#Color .cls-90 {
  fill: #a09289;
}

#Color .cls-91 {
  fill: #817a74;
}

#Color .cls-92 {
  fill: #a6948a;
}

#Color .cls-93 {
  fill: #887971;
}

#Color .cls-94 {
  fill: #69635f;
}

#Color .cls-95 {
  fill: #394331;
}

#Color .cls-96 {
  fill: #242e27;
}

#Color .cls-97 {
  fill: #a3a3a2;
}

#Color .cls-98 {
  fill: #484748;
}

#Color .cls-99 {
  fill: #29332c;
}

#Color .cls-100 {
  fill: #141915;
}

#Color .cls-101 {
  fill: #313a33;
}

#Color .cls-102 {
  fill: #919386;
}

#Color .cls-103 {
  fill: #393a34;
}

#Color .cls-104 {
  fill: #828479;
}

#Color .cls-105 {
  fill: #fafaf0;
}

#Color .cls-106 {
  fill: #f0f0ea;
}

#Color .cls-107 {
  fill: #25272a;
}

#Color .cls-108 {
  fill: #928977;
}

#Color .cls-109 {
  fill: #72634e;
}

#Color .cls-110 {
  fill: #ececde;
}

#Color .cls-111 {
  fill: #918562;
}

#Color .cls-112 {
  fill: #5b4e2a;
}

#Color .cls-113 {
  fill: #777778;
}

#Color .cls-114 {
  fill: #bfb7aa;
}

#Color .cls-115 {
  fill: #6c5c48;
}

#Color .cls-116 {
  fill: #ab9f93;
}

#Color .cls-117 {
  fill: #3a443b;
}

#Color .cls-118 {
  fill: #50504f;
}

#Color .cls-119 {
  fill: #717366;
}

#Color .cls-120 {
  fill: #b3a892;
}

#Color .cls-121 {
  fill: #cac2b9;
}

#Color .cls-122 {
  fill: #c6c0b9;
}

#Color .cls-123 {
  fill: #c2b29c;
}

#Color .cls-124 {
  fill: #776752;
}

#Color .cls-125 {
  fill: #7c7c7c;
}

#Color .cls-126 {
  fill: #7b7d70;
}

#Color .cls-127 {
  fill: #cececd;
}

#Color .cls-128 {
  fill: #e4e6e5;
}

#Color .cls-129 {
  fill: #a9b3ac;
}

#Color .cls-130 {
  fill: #355037;
}

#Color .cls-131 {
  fill: #2d4230;
}

#Color .cls-132 {
  fill: #646362;
}

#Color .cls-133 {
  fill: #353434;
}

#Color .cls-134 {
  fill: #c0baab;
}

#Color .cls-135 {
  fill: #80735d;
}

#Color .cls-136 {
  fill: #bbbcbd;
}

#Color .cls-137 {
  fill: #8c9491;
}

#Color .cls-138 {
  fill: #2e4533;
}

#Color .cls-139 {
  fill: #28392c;
}

#Color .cls-140 {
  clip-path: url(#clip-path);
}

#Color .cls-141 {
  clip-path: url(#clip-path-2);
}

#Color .cls-142 {
  fill: #1f120e;
}

#Color .cls-143 {
  fill: #735e54;
}

#Color .cls-144 {
  fill: #71452c;
}

#Color .cls-145 {
  fill: #d38b61;
}

#Color .cls-146 {
  fill: #c15b1c;
}

#Color .cls-147 {
  fill: #c5c6ab;
}

#Color .cls-148 {
  fill: #f3a272;
}

#Color .cls-149 {
  fill: #9e9b9a;
}

#Color .cls-150 {
  fill: #6a696a;
}

#Color .cls-151 {
  fill: #7d685e;
}

#Color .cls-152 {
  fill: #c5794d;
}

#Color .cls-153 {
  fill: #301b10;
}

#Color .cls-154 {
  fill: #da8b5e;
}

#Color .cls-155 {
  fill: #544849;
}

#Color .cls-156 {
  fill: #3c3030;
}

#Color .cls-157 {
  fill: #cf5c3b;
}

#Color .cls-158 {
  fill: #ba402e;
}

#Color .cls-159 {
  clip-path: url(#clip-path-3);
}

#Color .cls-160 {
  fill: #e8e8d1;
}

#Color .cls-161 {
  fill: #933321;
}

#Color .cls-162 {
  fill: #554641;
}

#Color .cls-163 {
  fill: #6f4b29;
}

#Color .cls-164 {
  fill: #3c2312;
}

#Color .cls-165 {
  fill: #c6c6aa;
}

#Color .cls-166 {
  fill: #deddc5;
}

#Color .cls-167 {
  fill: #c5c6aa;
}

#Color .cls-168 {
  fill: #eae9d2;
}

#Color .cls-169 {
  fill: #e1e0d3;
}

#Color .cls-170 {
  fill: #d6d6bc;
}

#Color .cls-171 {
  fill: #040409;
}

#Color .cls-172 {
  clip-path: url(#clip-path-4);
}

#Color .cls-173 {
  fill: #3c3935;
}

#Color .cls-174 {
  fill: #0e0c0b;
}

#Color .cls-175 {
  fill: #fff4cd;
}

#Color .cls-176 {
  fill: #cfbe8b;
}

#Color .cls-177 {
  fill: #54351e;
}

#Color .cls-178 {
  fill: #261912;
}

#Color .cls-179 {
  fill: #8d7669;
}

#Color .cls-180 {
  fill: #472b18;
}

#Color .cls-181 {
  fill: #c69463;
}

#Color .cls-182 {
  fill: #9f6c42;
}

#Color .cls-183 {
  fill: #463930;
}

#Color .cls-184 {
  fill: #70747e;
}

#Color .cls-185 {
  fill: #817f66;
}

#Color .cls-186 {
  fill: #1f120d;
}

#Color .cls-187 {
  clip-path: url(#clip-path-5);
}

#Color .cls-188 {
  clip-path: url(#clip-path-6);
}

#Color .cls-189 {
  clip-path: url(#clip-path-7);
}

#Color .cls-190 {
  clip-path: url(#clip-path-8);
}

#Color .cls-191 {
  fill: #e0e0d3;
}

#Color .cls-192 {
  fill: #b59884;
}

#Color .cls-193 {
  fill: #67544a;
}

#Color .cls-194 {
  fill: #6e7071;
}

#Color .cls-195 {
  fill: #806557;
}

#Color .cls-196 {
  fill: #885640;
}

#Color .cls-197 {
  fill: #63392b;
}

#Color .cls-198 {
  fill: #5e3e2b;
}

#Color .cls-199 {
  fill: #4c291c;
}

#Color .cls-200 {
  fill: #594a3c;
}

#Color .cls-201 {
  fill: #3d3127;
}

#Color .cls-202 {
  clip-path: url(#clip-path-9);
}

#Color .cls-203 {
  fill: #4b3221;
}

#Color .cls-204 {
  stroke: #2b9ab9;
  stroke-width: 9px;
}

#Color .cls-205 {
  fill: #26819b;
}

#Color .cls-206 {
  fill: #1c6477;
}

@media screen and (max-width: 780px) {
  #velas > div {
    flex-direction: column
  }
}

@media screen and (max-width: 708px) {
  #roles div, .flexCont div {
    width: 45%;
  }

  .flexCont img, #tesoro img {
    max-height: 100px !important
  }
}

@media screen and (max-width: 612px) {

    #logos-header {
        flex-direction: column;
        align-items: center;
    }

    #logos-header div{
        width: 80% !important;
    }

}