@import url("../enviroment/icons/ionicons/css/ionicons.min.css");

/**********************************
           HR BLOCK
***********************************/
.is-wrapper hr {border:none;border-top: #eaeaea 1px solid;margin: 1em 0 !important;}

/**********************************
           SPACE BLOCK
***********************************/
.spacer{height:20px;}

/**********************************
           CARD BLOCK
***********************************/
.is-card { display:table; background-color:aliceblue;border-radius:30px;width:100%;max-width:400px;margin: 0 auto;background-color: aliceblue; }
.is-card > * { display:table; }
.is-card-circle { width:200px; height: 200px; border-radius:500px; padding:70px; margin:0 auto; }
.is-card-content-centered { display:table-cell;vertical-align:middle;text-align:center; }
@media all and (max-width: 500px) {
.is-card-circle { zoom:0.7; -moz-transform: scale(0.7); }	
}

/**********************************
           YOUTUBE VIDEO
***********************************/
.embed-responsive {position: relative;display:block;height:0;padding:0;overflow:hidden;margin-top: 1.4em;margin-bottom: 1em;} 
.embed-responsive.embed-responsive-16by9 {padding-bottom: 56.25%;}
.embed-responsive.embed-responsive-4by3 {padding-bottom: 75%;}
.embed-responsive iframe {position: absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0;}

/**********************************
          SOCIAL CLASS
***********************************/
.is-social {line-height:1;margin-bottom:1.5em}
.is-social a > i {text-decoration:none;color:#333;font-size:1.2em;margin:0 15px 0 0;-webkit-transition: all 0.1s ease-in-out;transition: all 0.1s ease-in-out;}
.is-social a:hover > i {color:#08c9b9;}
.social {line-height:1;margin-bottom:1.5em}
.social a > i {text-decoration:none;color:#333;font-size:1.2em;margin:0 15px 0 0;-webkit-transition: all 0.1s ease-in-out;transition: all 0.1s ease-in-out;}
.social a:hover > i {color:#08c9b9;}
.is-light-text .social a > i {color:#fff}
.is-light-text .social a:hover > i {color:#fff}


/**********************************
     BUTTON BLOCKS - ANIMATED
***********************************/
.list {position:relative;margin:1.5em 0;}
.list > i {position:absolute;left:-3px;top:7px;font-size:1.7em;line-height:1;} 
.list > h2, .list > h3 {margin: 0 0 0 50px;}
.list > p {margin: 5px 0 0 50px}
/*data-num="800"*/
.button-animated { position: relative; background-color: #4CAF50; border: none; font-size: 20px; color: #FFFFFF; padding: 20px; width: auto; text-align: center; transition-duration: 0.4s; text-decoration: none; overflow: hidden; cursor: pointer;border-radius:10px; } .button-animated:after { content: ""; background: #f1f1f1; display: block; position: absolute; padding-top: 300%; padding-left: 350%; margin-left: -20px !important; margin-top: -120%; opacity: 0; transition: all 0.8s } .button-animated:active:after { padding: 0; margin: 0; opacity: 1; transition: 0s }

/**********************************
          data-num="801"
***********************************/
.list {position:relative;margin:1.5em 0;}
.list > i {position:absolute;left:-3px;top:7px;font-size:1.7em;line-height:1;} 
.list > h2, .list > h3 {margin: 0 0 0 50px;}
.list > p {margin: 5px 0 0 50px}
.button-animated2 { display: inline-block; padding: 15px 25px; font-size: 24px; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: #fff; background-color: #4CAF50; border: none; border-radius: 15px; box-shadow: 0 9px #999; } .button-animated2:hover {background-color: #3e8e41} .button-animated2:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px); }

/**********************************
          data-num="802"
***********************************/
.button-animate3 { display: inline-block; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 22px; padding-top:10px;padding-bottom:10px;padding-left:20px;padding-right:20px; width:auto; transition: all 0.5s; cursor: pointer; margin: 5px; } .button-animate3 span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .button-animate3 span:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } .button-animate3:hover span { padding-right: 25px; } .button-animate3:hover span:after { opacity: 1; right: 0; }

/**********************************
         SLIDEDESHOW1
***********************************/
.slideshow1 img { vertical-align: middle; height: 500px; width: 100%; object-fit: cover; } /* Position the image container (needed to position the left and right arrows) */ .slideshow1 { position: relative; } /* Hide the images by default */ .slideshow1 .mySlides { display: none; } /* Add a pointer when hovering over the thumbnail images */ .slideshow1 .cursor { cursor: pointer; } /* Next & previous buttons */ .slideshow1 .prev, .slideshow1 .next { cursor: pointer; position: absolute; top: 40%; width: auto; padding: 16px; margin-top: -50px; background-color:gray; color: white; font-weight: bold; font-size: 20px; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "next button" to the right */ .slideshow1 .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .slideshow1 .prev:hover, .slideshow1 .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Number text (1/3 etc) */ .slideshow1 .numbertext { color: white; background-color:darkorange; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* Container for image text */ .slideshow1 .caption-container { text-align: center; background-color: #222; padding: 2px 16px; color: white; margin-top:-15px; } .slideshow1 .row-slideshow1:after { content: ""; display: table; clear: both; } /* Six columns side by side */ .slideshow1 .column-slideshow1 { float: left; width: 16.66%; } /* Add a transparency effect for thumnbail images */ .slideshow1 .demo { opacity: 0.6; height: 100px; object-fit: cover; } .slideshow1 .active, .slideshow1 .demo:hover { opacity: 1; }


/**********************************
         SLIDEDESHOW2
***********************************/
.slideshow2 .mySlides {display: none} .slideshow2  img {vertical-align: middle;} /* Slideshow container */ .slideshow2 { position: relative; margin: auto; } /* Next & previous buttons */ .slideshow2 .prev,.slideshow2 .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; background-color: rgb(255, 0, 51); color: rgb(255, 255, 255); } /* Position the "next button" to the right */ .slideshow2 .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .slideshow2 .prev:hover, .slideshow2 .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .slideshow2 .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .slideshow2 .numbertext { color: white;background-color:gray; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* Fading animation */ .slideshow2 .fade { animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from {opacity: .4} to {opacity: 1} }
@media only screen and (max-width: 300px) { .slideshow2  .prev, .slideshow2 .next,.slideshow2 .text {font-size: 11px} }

/**********************************
            FORMS
***********************************/
.form1 input[type=text],.form1 select,.form1 textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; } .form1 label { padding: 12px 12px 12px 0; display: inline-block; } .form1 input[type=submit] { background-color: #04AA6D; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: right; } .form1 input[type=submit]:hover { background-color: #45a049; } .form1 .container { border-radius: 5px; padding: 20px; } .form1 .col-25 { float: left; width: 25%; margin-top: 6px; } .form1 .col-75 { float: left; width: 75%; margin-top: 6px; } /* Clear floats after the columns */ .form1 .row:after { content: ""; display: table; clear: both; }
@media screen and (max-width: 600px) {
.form1 .col-25,.form1  .col-75,.form1  input[type=submit] { width: 100%; margin-top: 0; } }


/**********************************
            TABLES
***********************************/
#pro_table { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; } #pro_table td, #pro_table th { border: 1px solid #ddd; padding: 8px; } #pro_table tr:nth-child(even){background-color: #f2f2f2;} #pro_table tr:hover {background-color: #ddd;} #pro_table th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #4CAF50; color: white; }

/**********************************
            ADVNACED BLOCKS
***********************************/
/*START TABS */ 
.tab_container h1 { color: #ccc; text-align: center; } .tab_container a { color: #ccc; text-decoration: none; outline: none; } /*Fun begins*/ .tab_container { width: 90%; margin: 0 auto; padding-top: 70px; position: relative; } .tab_container input,.tab_container section { clear: both; padding-top: 10px; display: none; } .tab_container label { font-weight: 700; font-size: 18px; display: block; float: left; width: 27%; padding: 1.5em; color: #757575; cursor: pointer; text-decoration: none; text-align: center; background: #f0f0f0; /* height: 90px; */ } #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4, #tab5:checked ~ #content5 { display: block; padding: 20px; background: #fff; color: #999; border-bottom: 2px solid #f0f0f0; max-width:930px; } .tab_container .tab-content p, .tab_container .tab-content h3 { -webkit-animation: fadeInScale 0.7s ease-in-out; -moz-animation: fadeInScale 0.7s ease-in-out; animation: fadeInScale 0.7s ease-in-out; } .tab_container .tab-content h3  { text-align: center; } .tab_container [id^="tab"]:checked + label { background: #fff; box-shadow: inset 0 3px #0CE; } .tab_container [id^="tab"]:checked + label .fa { color: #0CE; } .tab_container label .fa { font-size: 1.3em; margin: 0 0.4em 0 0; } 
/*Content Animation*/ @keyframes fadeInScale { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } 
@media only screen and (max-width: 900px) { .tab_container  label span { /*display: none;*/ } .tab_container { width: 98%; } } 
/*END TABS*/

/*START TIMELINE*/ 
.timeline_pro  #content { margin-top: 50px; text-align: center; }  .timeline { border-left: 4px solid #a2adb2; border-bottom-right-radius: 4px; border-top-right-radius: 4px; position: relative; padding: 50px; list-style: none; text-align:center; } .timeline_pro .timeline h1, .timeline_pro .timeline h2, .timeline_pro .timeline h3 { font-family: 'Oswald', sans-serif; letter-spacing: 1.5px; font-weight: 100; font-size: 1.4em; } .timeline_pro .timeline .event { border-bottom: 1px dashed rgba(255, 255, 255, 0.1); padding-bottom: 25px; margin-bottom: 50px; position: relative; } .timeline_pro .timeline .event:last-of-type { padding-bottom: 0; margin-bottom: 0; border: none; } .timeline_pro .timeline .event:before, .timeline_pro .timeline .event:after { position: absolute; display: block; top: 0; } .timeline_pro .timeline .event:after { box-shadow: 0 0 0 4px #a2adb2; left: -57.85px; background: #ffffff; border-radius: 50%; height: 11px; width: 11px; content: ""; top: 5px; }
/*END TIMELINE*/

/*START TYPEWRITER */ 
.typed-cursor{ color:rgba(255,255,255,0.8) !important; opacity: 1; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; animation: blink 0.7s infinite; } @keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } 
/*END TYPERWRITER*/

/**********************************
            TOP NAV
***********************************/
.topnav { overflow: hidden;  } .topnav a {  font-family:Teko;   color: #f2f2f2; padding-left:20px;padding-right: 20px;text-decoration: none;font-size: 20px; } .topnav a:hover { color: rgb(233, 198, 100); transition:all 0.3s;}  .topnav .icon { display: none; }
@media screen and (max-width: 957px) { .topnav a{display: none;} .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 957px) { .topnav.responsive .icon { outline:none;position: absolute; right: 0; top: -4px; padding-top: 4px; padding-bottom: 3px; height: 22px; background-color: inherit; width: 100%; text-align: right;} .topnav.responsive{    background-color: black; width: 100%; /* padding: 10px; */ display: table-cell;transition:all 0.5s;} .topnav.responsive a { float: none; display: block; text-align: left;transition:all 0.5s; } } .hamburger{position:absolute;right:10px;top:-100%;}

/*2-START FORM CONTACT-RESERVATIONS STYLE */
.contCat input[type=text], select, textarea { width: 100%;padding: 12px;border: 1px solid #ccc; border-radius: 4px;resize: vertical;color:black;background-color:white;} .contCat label {padding: 12px 12px 12px 0;display: inline-block;} input[type=submit] { background-color: #4CAF50;color: white; padding: 12px 20px;border: none; border-radius: 4px;cursor: pointer; } .contCat input[type=submit]:hover { background-color: #45a049;} .contCat ::placeholder { color: #bdbdbd;opacity: 1; /* Firefox */} 

.contCat input:focus::-webkit-input-placeholder { color:transparent; } 
.contCat textarea:focus::-webkit-input-placeholder { color:transparent; } 
.contCat input:focus::-webkit-input-placeholder { color:transparent; } 
.contCat input:focus:-moz-placeholder { color:transparent; }
.contCat input:focus::-moz-placeholder { color:transparent; }   .contCat input:focus:-ms-input-placeholder { color:transparent; } .contCat textarea:focus:-moz-placeholder { color:transparent; } .contCat textarea:focus::-moz-placeholder { color:transparent; } .contCat textarea:focus:-ms-input-placeholder { color:transparent; } 
/*2-END FORM CONTACT-RESERVATIONS STYLE */