/* Style for PCs */
@media screen and (min-width: 1025px) {

/* Guide top
------------------------------------------------------------*/
.marina-list {
width:100%;
height: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 20px;
}
.marina-list li {
width:31.2033333333333333333%;
height: auto;
display: block;
margin: 1%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.marina-list li:nth-child(even) a {
background-color: #f9f9f9;
}
.marina-list li:nth-child(odd) a {
background-color: #f4f4f4;
}
.marina-list li a {
width:100%;
height: auto;
display: block;
text-decoration: none;
padding:25px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all  0.4s ease;
}
.marina-list li a:hover {
background-color: #CADEEF;
}
.marina-list li a img {
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.marina-list li a .gtm {
width:100%;
height: auto;
display: block;
padding:20px 5px;
}
.marina-list li a .gtm h3 {
font-size:24px;
font-weight: 700;
line-height: 1.25em;
color:#222;
margin-bottom: 8px;
}
.marina-list li a .gtm h4 {
font-size:0.7em;
font-weight: 400;
line-height: 1.4em;
color:#0A5BB0;
margin-bottom: 10px;
letter-spacing: 0px;
}
.marina-list li a .gtm p.gtmcom {
width:auto;
height: auto;
display: block;
margin-bottom: 20px!important;
color:#444;
text-overflow: ellipsis;
overflow : hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
/* -webkit-line-clamp: 3; */
}

.marina-list li a .gtm p.gtmbn {
width:120px;
height: 20px;
display: block;
line-height: 20px!important;
font-size:0.8em!important;
letter-spacing: 0px;
text-align: center;
margin:0 auto!important;
color:#fff;
background-color: #011822;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
}
	
}


/* Style for iPad Pro */
@media screen and (min-width: 769px) and (max-width: 1024px) {

/* Guide top
------------------------------------------------------------*/
.marina-list {
width:100%;
height: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 20px;	
}
.marina-list li {
width:47.80%;
height: auto;
display: block;
margin: 1%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.marina-list li:nth-child(even) a {
background-color: #f9f9f9;
}
.marina-list li:nth-child(odd) a {
background-color: #f4f4f4;
}
.marina-list li a {
width:100%;
height: auto;
display: block;
text-decoration: none;
padding:25px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all  0.4s ease;
}
.marina-list li a:hover {
background-color: #CADEEF;
}
.marina-list li a img {
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.marina-list li a .gtm {
width:100%;
height: auto;
display: block;
padding:20px 5px;
}
.marina-list li a .gtm h3 {
font-size:24px;
font-weight: 700;
line-height: 1.25em;
color:#222;
margin-bottom: 8px;
}
.marina-list li a .gtm h4 {
font-size:0.7em;
font-weight: 400;
line-height: 1.4em;
color:#0A5BB0;
margin-bottom: 10px;
letter-spacing: 0px;
}
.marina-list li a .gtm p.gtmcom {
width:auto;
height: auto;
display: block;
margin-bottom: 20px!important;
color:#444;
text-overflow: ellipsis;
overflow : hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
/* -webkit-line-clamp: 3; */
}

.marina-list li a .gtm p.gtmbn {
width:120px;
height: 20px;
display: block;
line-height: 20px!important;
font-size:0.8em!important;
letter-spacing: 0px;
text-align: center;
margin:0 auto!important;
color:#fff;
background-color: #011822;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
}

}

/* Style for iPad */
@media screen and (min-width: 481px) and (max-width: 768px) {

/* Guide top
------------------------------------------------------------*/
.marina-list {
width:100%;
height: auto;
display: block;
margin-bottom: 20px;	
}
.marina-list li {
width:100%;
height: auto;
display: block;
margin-bottom: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.marina-list li:nth-child(even) a {
background-color: #f9f9f9;
}
.marina-list li:nth-child(odd) a {
background-color: #f4f4f4;
}
.marina-list li a {
width:100%;
height: auto;
display: block;
text-decoration: none;
padding:25px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all  0.4s ease;
}
.marina-list li a:hover {
background-color: #CADEEF;
}
.marina-list li a img {
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.marina-list li a .gtm {
width:100%;
height: auto;
display: block;
padding:20px 5px;
}
.marina-list li a .gtm h3 {
font-size:24px;
font-weight: 700;
line-height: 1.25em;
color:#222;
margin-bottom: 8px;
}
/* .marina-list li a .gtm h3 br {
display: none;
} */
.marina-list li a .gtm h4 {
font-size:0.7em;
font-weight: 400;
line-height: 1.4em;
color:#0A5BB0;
margin-bottom: 10px;
letter-spacing: 0px;
}
.marina-list li a .gtm p.gtmcom {
width:auto;
height: auto;
display: block;
margin-bottom: 20px!important;
color:#444;
text-overflow: ellipsis;
overflow : hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
/* -webkit-line-clamp: 3; */
}

.marina-list li a .gtm p.gtmbn {
width:120px;
height: 20px;
display: block;
line-height: 20px!important;
font-size:0.8em!important;
letter-spacing: 0px;
text-align: center;
margin:0 auto!important;
color:#fff;
background-color: #011822;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
}

}

/* Style for Smartphone */
@media screen and (max-width: 480px) {

/* Guide top
------------------------------------------------------------*/
.marina-list {
width:100%;
height: auto;
display: block;
margin-bottom: 20px;	
}
.marina-list li {
width:100%;
height: auto;
display: block;
margin-bottom: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.marina-list li:nth-child(even) a {
background-color: #f9f9f9;
}
.marina-list li:nth-child(odd) a {
background-color: #f4f4f4;
}
.marina-list li a {
width:100%;
height: auto;
display: block;
text-decoration: none;
padding:25px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all  0.4s ease;
}
.marina-list li a:hover {
background-color: #CADEEF;
}
.marina-list li a img {
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.marina-list li a .gtm {
width:100%;
height: auto;
display: block;
padding:20px 5px;
}
.marina-list li a .gtm h3 {
font-size:24px;
font-weight: 700;
line-height: 1.25em;
color:#222;
margin-bottom: 8px;
}
/* .marina-list li a .gtm h3 br {
display: none;
} */
.marina-list li a .gtm h4 {
font-size:0.7em;
font-weight: 400;
line-height: 1.4em;
color:#0A5BB0;
margin-bottom: 10px;
letter-spacing: 0px;
}
.marina-list li a .gtm p.gtmcom {
width:auto;
height: auto;
display: block;
margin-bottom: 20px!important;
color:#444;
text-overflow: ellipsis;
overflow : hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
/* -webkit-line-clamp: 3; */
}

.marina-list li a .gtm p.gtmbn {
width:120px;
height: 20px;
display: block;
line-height: 20px!important;
font-size:0.8em!important;
letter-spacing: 0px;
text-align: center;
margin:0 auto!important;
color:#fff;
background-color: #011822;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
}

}