/* Custom properties/variables  */
:root {
  --main-white: #ffffff;
  --main-gray: #727272;
  --main-light-gray: #f9fafc;
  --main-yellow: #ffbe00;
  --main-black: #000000;
  --primary-color: #00a47b;
  --primary-color-transparent: rgba(0,164,123,0.83);
  --secondary-color: #ffbe00;
  --text-color: #000000;
  --border-gray: #ccc;
  --body-bg: #f1f1f1;
}

/*
	GENERAL
------------------------
*/
body{
	font-size: 10px;
    font-family: 'Roboto', sans-serif;
    color: var(--text-color);
    background: var(--main-white);
}

a:link, a:visited {
    color: var(--primary-color);
    text-decoration: underline;
}

::-webkit-input-placeholder {
   font-style: italic;
   color: #a0a0a0;
}
:-moz-placeholder {
   font-style: italic; 
   color: #a0a0a0; 
}
::-moz-placeholder {
   font-style: italic;  
   color: #a0a0a0;
}
:-ms-input-placeholder {  
   font-style: italic; 
   color: #a0a0a0;
}
textarea, input {
    border: none;
    overflow: auto;
    outline: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    resize: none; /*remove the resize handle on the bottom right*/
}

.site-header{
	background: #000;
	color: #FFF;
}
.relative{
	position: relative;
	width: 100%;
}


h1, .h1{
	font-weight: 900;
}

h2, h3, h4, h5{
    font-weight: 700;
}
h1, .h1{
	font-size: 2rem;
}
h2, .h2-size, .h2{ 
	font-size: 1.6rem;
}
h3, .h3-size, .h3{
	font-size: 1.4rem;
}
h3, h4, h5{
	font-weight: 500;
}
.w-900{
	font-weight: 900;
}
hr{
	border-bottom: 2px solid var(--primary-color);
	border-top: 0;
}
.w-500{
	font-weight: 500;
}
.img-round{
	border-radius: 8px;
	box-shadow: 2px 2px 20px rgba(0,0,0,0.2);
}
.wrapper-white{
	background: var(--main-white);
	padding: 0 2rem; 
}
.line-bottom{
	border-bottom: 1px solid var(--border-gray);
	padding-bottom: 20px;
	margin-bottom: 20px;
}

/*
	HEADER & FOOTER
=================*/
header{
	padding-top: 30px;
}
.logo{
	text-transform: uppercase;
}
.main-navigation{
	width: 100%;
	background: var(--primary-color-transparent);
}
.menu{
	margin: 0;
	padding: 0;
	margin-top: 30px;
}
.menu li{
	display: inline-block;
}
.menu li a{
	color: #FFFFFF;
	text-transform: uppercase;
	font-size: 14px;
	display: block;
	text-decoration: none;
	padding: 10px 20px;
}
.menu li a:hover{
	background: var(--primary-color);
}

footer{
	padding: 30px 0;
	background: var(--primary-color);
	margin-top: 30px;
}

/*
	COLORS, BUTTONS
------------------------*/
.text-white{
	color: var(--main-white);
}
.text-gray{
	color: var(--main-gray);
}
.text-black{
	color: var(--main-black) !important;
}

.link-primary,
.entry-content a.link-primary{
	color: var(--primary-color);
	text-decoration: underline;
	border: 0;
}
.link-primary:hover,
.entry-content a.link-primary:hover{
	text-decoration: underline;
	border: 0; 
	color: var(--primary-color-transparent);
}

.bg-light-gray{
	background: var(--main-light-gray); 
}

.font-14{
	font-size: 14px;
}

/*
	MARGINS, PADDINGS
=========================*/
.m-0{
	margin: 0;
}
.mb-10{
	margin-bottom: 10px;
}
.mt-20{
	margin-top: 20px;
}
.mt-30{
	margin-top: 30px;
}
.mt-40{
	margin-top: 40px;
}
.mb-40{
	margin-bottom: 40px;
}
.mt-50{
	margin-top: 50px;
}
.mb-50{
	margin-bottom: 50px;
}
.mt-80{
	margin-top: 80px;
}
.mb-80{
	margin-bottom: 80px;
}
.mr-0{
	margin-right: 0;
}
.ml-10{
	margin-left: 10px !important;
}
.pt-40{
	padding-top: 40px;
}
.pb-40{
	padding-bottom: 40px;
}
.pt-60{
	padding-top: 60px;
}
.pb-60{
	padding-bottom: 60px;
}
.pt-100{
	padding-top: 100px;
}
.pb-100{
	padding-bottom: 100px;
}


/* 
	Breadcrumbs
=======================*/
.breadcrumbs			{ padding: 0; margin: 0 }
.breadcrumbs li 		{ display: inline-block; margin-right: 5px; color: var(--main-gray); font-size: 12px;}
.breadcrumbs li a 		{ color: var(--primary-color); text-decoration: none; border: 0; text-decoration: underline; }
.breadcrumbs li a:hover { text-decoration: underline; }


/*
	HOME
-----------------------
*/
.video {
max-height: 600px;
overflow-y: scroll;
}
.video li{
border-bottom: 1px solid #151515;
padding: 15px;
}
.video li:hover,
.video li.active{
cursor: pointer;
background: #151515;
}
.video .time{
	position: absolute;
	bottom: 5px;
	right: 5px;
	color: #FFF;
	font-size: 16px;
	background: rgba(0,0,0,.6);
	padding: 3px 6px;
	font-size: 12px;
}
.text-light-gray{
	font-size: 12px;
	color: #808080;
}
.video .link-white{
	color: var(--main-white) !important;
	text-decoration: none !important;
	line-height: normal;
	margin-bottom: 10px;
	display: block;
}
.list-related li{
	margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid #f4f4f4;
	line-height: normal;
	list-style: disc;
	list-style-position: inside;
}
.border-20{
	border-radius: 20px;
}


/*
	ARTICLE
------------------------
*/
article{
	font-size: 1.1rem;
	line-height: 1.7;
}
article img{
	max-width: 100%;
	height: auto;
}
article .h1{
	margin-bottom: 2rem;
	padding-bottom: 2rem !important;
	border-bottom: 3px solid var(--primary-color);
}
article h2,
article h3,
article h4{
	margin-bottom: 2rem;
	margin-top: 4rem;
}
article h2{
	border-bottom: 1px solid var(--border-gray);
	padding-bottom: 1rem;
}
article p{
	margin-bottom: 2rem;
}
article ul,
article ol{
	/*margin-bottom: 4rem;*/
}
article li{
	padding: 0 0 15px;
	/*margin-bottom: 15px;*/
}

.wp-user-avatar{
	border-radius: 50%;
	margin-right: 10px;
}
a.author{
	color: var(--primary-color);
	font-size: 14px;
	text-decoration: none;
	border: 0 !important;
}
.entry-content a{
	color: var(--primary-color);
	text-decoration: underline;
}
.entry-content a:hover{
	color:  var(--primary-color);
}

.toc{
	border: 1px dashed var(--main-gray);
	padding: 20px;
	margin-bottom: 30px;
	display: block;
}
.toc ul{
	margin-bottom: 0;
}
.toc ul li{
	padding: 0;
	margin-bottom: 0;
	list-style: decimal-leading-zero;
}
.official{
	border-bottom: 1px solid var(--body-bg);
}
.official td{
	background: var(--main-light-gray);
	padding: 10px;
	border: 1px solid var(--body-bg);
	border-bottom: 0;
}
.img-main{
	width: 100px;
	height: auto;
	border-radius: 8px !important;
	display: block;
	margin: 0 auto;
	box-shadow: 2px 2px 20px rgba(0,0,0,0.2);
}

.tips{
		background: var(--primary-color);
		color: var(--main-white);
		padding: 20px;
		box-shadow: 10px 10px 20px rgba(0,0,0,0.1);
}
.tips h2,
.tips h3,
.tips h4,
.tips h5{
	margin: 0;
	padding-bottom: 8px;
	margin-bottom: 8px;
	color: var(--main-white);
	font-size: 22px;
	border-bottom: 1px solid rgba(255,255,255,0.3);
}
.tips p{
	margin: 0;
	font-size: 16px;
	line-height: 24px;
}
.easy-image-gallery{
	margin: 0 auto;
  padding: 30px;
  background: #000;
}

.easy-image-gallery li {
  display: block;
  padding: 0;
  margin: 0 !important;
  width: 33%;
  margin: 0;
  float: left;
}
.easy-image-gallery a img{
	border-radius: 0px;
}
.easy-image-gallery a{
	border: 2px solid #FFF;
	border-radius: 4px;
	display: block;
	overflow: hidden;
}
.easy-image-gallery a:hover{
	border: 2px solid var(--primary-color);
}
.easy-image-gallery li{
	width: auto !important;
	float: none;
}
.entry-content ol.faq p{
	margin-right: 0;
}
.table-full{
	border: 0;
	width: 100%;
	margin-right: 210px;
}
.table-full tr{
	border-bottom: 1px solid #FFF;
}
.table-full td{
	background: var(--main-light-gray);
	padding: 15px;
	border: 0;
}
figure{
	max-width: 100%;
}
figcaption{
	font-style: italic;
	color: var(--main-gray);
	font-size: 14px;
}
.entry-content img{
	border-radius: 20px;
}


/* Feel free to change duration  */ 
.animated  {
  -webkit-animation-duration : 1000 ms  ;
  animation-duration : 1000 ms  ;
  -webkit-animation-fill-mode : both  ;
  animation-fill-mode : both  ;
}  
/* .owl-animated-out - only for current item */ 
/* This is very important class. Use z-index if you want move Out item above In item */ 
.owl-animated-out {
  z-index : 1 
   }
/* .owl-animated-in - only for upcoming item
/* This is very important class. Use z-index if you want move In item above Out item */ 
.owl-animated-in {
  z-index : 0 
   }
/* .fadeOut is style taken from Animation.css and this is how it looks in owl.carousel.css:  */ 
.fadeOut  {
  -webkit-animation-name : fadeOut  ;
  animation-name : fadeOut  ;
}  
@-webkit-keyframes  fadeOut  {
  0% {
    opacity : 1   ;
  }  
  100% {
    opacity : 0   ;
  }  
}
@keyframes  fadeOut  {
  0% {
    opacity : 1   ;
  }  
  100% {
    opacity : 0   ;
  }  
}




/*
	COMMENTS
==========================*/

.rating-form textarea{
	width: 100%;
}
.rating-form h4{
	padding: 0;
}
.rating-form input,
.rating-form textarea{
	padding: 5px 10px;
	border-radius: 5px;
	border: solid 1px #e1e5eb;
	font-size: 14px;
	width: 100%;
	max-height: 120px;
}
.submit{
	background: var(--primary-color);
	color: var(--main-white);
	display: block;
	text-decoration: center;
	border: 0 !important;
	border-radius: 0 !important;
	display: block;
	width: 100% !important;
	padding: 10px !important;
}
.comment-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
/*.comment-list li{
	box-shadow: 0px 12px 24px 0 rgba(0,32,74,.03);
	padding: 40px;
	background: #FFF;
	margin-bottom: 30px;
	border-radius: 5px;
	margin-top: 30px;
}*/

.review{
		border-top: 1px solid #cccccc;
		padding: 20px 0;
		font-size: 15px;
	}
	.review p{
		margin-bottom: 10px;
	}
	.table-stars{
		width: 100%;
	}
	.table-stars td{
		vertical-align: middle;
	}
	.stars-rating-bg{
		background:#ebebeb; width:100%; height:10px; border-radius: 5px;
	}
	.stars-rating-fill{
		height: 10px; border-radius: 5px; background: var(--main-yellow); display: block;
	}

.review{
	width: 100%;
}
.review .stars{
	color: var(--main-yellow); 
}
.review .icon-user{
	width: 50px;
	height: 50px;
	background: #f00;
	background: var(--primary-color);
	color: var(--main-white);
	border-radius: 50%;
	text-align: center;
	line-height: 50px;
	float: left;
	margin-right: 15px;
}
.comment .name-date {
  float: left;
}
.user-rating{
	background: var(--main-yellow);
	color: #000000;
	font-size: 24px;
	padding: 10px;
	border-radius: 8px;
	font-weight: 700;
	display: inline-block;
	float: left;
	min-width: 56px;
	text-align: center;
}
.user-rating-xs{
	background: var(--main-yellow);
	padding: 4px;
	border-radius: 4px;
	display: inline-block;
	width: 40px;
	text-align: center;
	height: 40px;
	font-weight: bold;
	line-height: 32px;
}
.wrapper-mini-stars{
	margin-bottom: 20px;
}

.wrapper-stars{
	display: inline-block;
	margin-left: 20px;
	float: left;
	margin-top: 15px;
	color: var(--main-yellow);
	line-height: normal;
}
.wrapper-stars strong{
	color: #000000 !important;
	font-size: 14px;
	font-weight: normal;
}
.wrapper-stars-review{ 
	display: inline-block;
	margin-left: 20px;
	color: var(--main-yellow);
}
.rating-form label{
	font-size: 14px;
}
.column-small .clearfix{
	max-width: 200px;
	margin: 0px auto;
}
.comment p{
	margin-bottom: 10px;
}

/*
	MAP 
=========================*/

.map{
	background: var(--main-light-gray);
	height: 400px;
	width: 100%;
	margin-bottom: 20px;
}

.map_archive{
	background: var(--main-light-gray);
	height: 600px;
	width: 100%;
	margin-bottom: 20px;
}


/*
	ARCHIVES
==========================*/
.archive-list li{
	border-bottom: 1px solid var(--border-gray);
	padding-bottom: 10px;
	margin-bottom: 10px;
}


/* 
	SIDEBAR
==========================*/
.live-cam-text{
	position: absolute;
	text-align: right;
	right: 10px;
}
.live-cam-text{
	color: red;
	background: white;
	padding: 3px;
	font-size: 12px;
	font-weight: bold;
	border-radius: 3px;
	font-style: normal;
	display: inline-block;
	margin-top: 10px;
}
.live-cam-text .bull{
	animation: fadeIn .5s infinite alternate;

	display: inline-block;
	font-style: normal;
}


@keyframes fadeIn { 
  from { opacity: 0; } 
}


/*

	RESPONSIVE
===========================*/
@media (max-width: 768px){
	.menu{
		display: none;
	}
}

@media (min-width: 768px){
	.container {
	  min-width: 90%;
	}

	h1, .h1{
	font-size: 3rem;
	}
	h2, h2-size{ 
		font-size: 2.3rem;
	}
	h3, h3-size{
		font-size: 2rem;
	}

	.entry-content p,
	.entry-content h2,
	.entry-content h3,
	.entry-content h4,
	.entry-content h5,
	.entry-content ul,
	.entry-content ol{
		
		position: relative;
	}

	.tips{
		width: 210px;
		background: var(--primary-color);
		color: var(--main-white);
		padding: 20px;
		box-shadow: 10px 10px 20px rgba(0,0,0,0.1);
		position: relative;
		right: 0;
		float: right;
		margin: 0 0 80px 80px;
	}
	.tips:before {
	    content:"\A";
	    border-style: solid;
	    border-width: 10px 15px 10px 0;
	    border-color: transparent var(--primary-color) transparent transparent;
	    position: absolute;
	    left: -15px;
	}
	.tips h2,
	.tips h3,
	.tips h4,
	.tips h5{
		margin: 0;
		padding-bottom: 8px;
		margin-bottom: 8px;
	}
	.tips p{
		margin: 0;
	}
	.comment-form-comment{
		margin-top: 50px;
	}
	.fixed-map{
		position: fixed !important;
		top: 0;
	}
}

@media ((min-width: 800px) AND (max-width: 1200px)){
	.column-small .user-rating{
		font-size: 16px;
		min-width: 44px;
	}
	.column-small .wrapper-stars {
		margin-left: 10px;
	}
	.column-small .dashicons{
		font-size: 15px;
		width: 17px;
	}
}



@media (min-width: 1300px){
	
}