/* Created by Luckee Tissera 
Creat a Small Website Assignment
Style.css 
Date created: 05/05/2023*/
  .container {
    width: 100%; /* this make container fluid*/
    height: auto;
    background-color: rgb(230, 230, 200); /* this make content background-color*/
    margin-right: auto; /* this make content center*/
    margin-left: auto; /* this make content center*/
	display: flex;
    flex-direction: column;
    align-items: center;
	
    }  

header{ width:100%;height:200px;text-align:center;padding-top: 15px;}
nav{ 
width:15%;height:100%;float:initial;padding-top: 50px;}
section { 
width:100%;height:100%;float:left;font-size:20px;text-align:center;}
/* #area-logo{
    border-radius: 10px;
    background: #943f3f url(../images/backgr_main.jpeg) no-repeat top;
    padding-top: 25px;
} */

.main1 { width: 100%;
height: auto; 
display: flex;
background-color: 	white;
 } 
@media only screen and (max-width: 992px) {
   .main1 { flex-direction: column; padding-right: 10px; }
 }

.main1_sub { width: 100%;height: auto; display: flex; } 
 
@media only screen and (max-width: 992px) {
   .main1_sub { flex-direction: column; padding-right: 10px; }
 }
 
 .main2 { width: 100%;
 height: auto;
 display: flex;
/*  background-color: 	#B0C4DE; */
 background-color: 	#E8F3FF;
 } 
@media only screen and (max-width: 992px) {
   .main2 { flex-direction: column; padding-right: 10px; }
 }

.main2_sub { width: 100%;height: auto; display: flex; } 
 
@media only screen and (max-width: 992px) {
   .main2_sub { flex-direction: column; padding-right: 10px; }
 }
  .main3 { width: 100%;
 height: auto;
 display: flex;
/*  background-color: 	#B0C4DE; */
 background-color: 	#B0C4DE;
 } 
@media only screen and (max-width: 992px) {
   .main3 { flex-direction: column; padding-right: 10px; }
 }

.main3_sub { width: 100%;height: auto; display: flex; } 
 
@media only screen and (max-width: 992px) {
   .main3_sub { flex-direction: column; padding-right: 10px; }
 }
 .main4 { width: 100%;
	height: auto; 
	display: flex;
	background-color: 	white;
	margin-top: 100px;
	margin-bottom: 50px;
 }
 
  html, body { 
      height: auto; 
      margin: 0; 
      padding: 0; 
	  
    } 
/* #area-logo{
    border-radius: 10px;
    background: #261212 url(../images/backgr_main.jpeg) no-repeat top ;
}
#ar */
ea-menu{
    position: center;
    top: 0;
    right: 0;
    width: 450px;
    height: 250px;
    z-index: 2;
}
a{
    text-decoration: none;
}
p {
    color: navy;
	font-size: larger;
}

.p1 {
    font-family: "Times New Roman", Times, serif;
    font-size: large;
    text-align: justify;
    padding: 20px;
    margin:20px;
   /*   
     width: 300px;  
    height: 200px;  */
  }
  .p2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: larger;
    text-align: justify;
    border: 2px solid rgb(72, 68, 68);
    padding: 20px;
    margin:20px;
      }
  .p3 {
    font-family: "Russo One", sans-serif;
	font-weight: 400;
	font-size: 50px;
	color: black;
	font-style: normal; 
    text-align: justify;
    padding: 20px;
    margin:20px;
  }
  .p4 {
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 30px;
    color: black;
    text-align: justify;
    padding: 20px;
    margin:20px;
  }
a.reserva {
    text-transform: uppercase;
    background: #706b4c;
    color: #fff5b0;
    padding: 5px 10px;
    float: right;
}
  

.row {
  display: flex;
}
/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  flex-wrap: wrap;
  padding-left: 50px;
  padding-right: 50px;
  /* height: 500px; */ /* Should be removed. Only for demonstration */
}
#navbar {
  background: white;
/*   color: rgb(13, 26, 38); */
  position: fixed;
  top: 0;
  line-height: 50px;  /* nabbar line height */
  width: 100%; 
  height: 100px;
  z-index: 0;
  padding-bottom: 25px;
  padding-left: 0px;
  padding-right: 50px;
  margin-left: 0px;
  margin-right: 25px;
  margin: auto;
}
.nav-wrapper {
  margin: auto;
  text-align: left;
  width: 100%;
} @media(max-width: 768px) {
    .nav-wrapper {
      width: 100%;
    }
  } @media(max-width: 638px) {
      .nav-wrapper {
        width: 100%;
      }
    } 
.logo {
  float: left;
  margin-left: 28px;
  font-size: 1.5em;
  height: 60px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-right: 0px;
} 
@media(max-width:768px) {
    .logo {
        margin-left: 15px; 
    }
  }
#navbar ul {
  display: inline-block;
  float: right;
  list-style: none;
  margin-top: -2px;
  text-align: right;
  transition: transform 0.5s ease-out;
  -webkit-transition: transform 0.5s ease-out;
} @media(max-width: 640px) {
    #navbar ul {
      display: none;
    }
  } @media(orientation: landscape) {
      #navbar ul {
        display: inline-block;
      }
    }
#navbar li {
  display: inline-block;
 
}
#navbar li a {
  color: rgb(13, 26, 38);
  display: block;
  font-size: 1em;
  height: 50px;
  letter-spacing: 2px;
  margin: 0 20px;
  padding: 0px 4px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
#navbar li a:hover {
  /* border-bottom: 1px solid rgb(28, 121, 184); */
  /* color: rgb(28, 121, 184); */
  padding: 0px 4px;
   color:  navy;
   
 transition: all 1s ease;
  -webkit-transition: all 1s ease;  
}
/* Animated Bottom Line */
#navbar li a:before, #navbar li a:after {
   content: '';
  position: absolute;
  width: 0%;
  height: 5px;
  bottom: -3px;
  background: navy;
}
#navbar li a:before {
  left: 0;
  transition: 0.5s;
}
#navbar li a:after {
 background: navy;
  right: 0;
  /* transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); */
}
#navbar li a:hover:before {
 /*  background: rgb(13, 26, 38); */
   background: navy;
  
  width: 100%;
  transition: width 0.5s cubic-bezier((0.22, 0.61, 0.36, 1));
}
#navbar li a:hover:after {
  background: transparent;
  width: 100%;
  /* transition: 0s; */
}
.main { width: 100%;height: auto; display: flex; } 
@media only screen and (max-width: 716px) {
   .main { flex-direction: column; padding-right: 10px; }
 }
/*======================================================
                    Mobile Menu Menu Icon
  ======================================================*/
@media(max-width: 640px) {
  .menuIcon {
    cursor: pointer;
    display: block;
    position: fixed;
    right: 15px;
    top: 20px;
    height: 23px;
    width: 27px;
    z-index: 12;
  }
  /* Icon Bars */
  .icon-bars {
    background: rgb(13, 26, 38);
    position: absolute;
    left: 1px;
    top: 45%;
    height: 2px;
    width: 20px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  } 
  .icon-bars::before {
    background: rgb(13, 26, 38);
    content: '';
    position: absolute;
    left: 0;
    top: -8px;
    height: 2px;
    width: 20px;
 
    -webkit-transition: 0.3s width 0.4s;
    transition: 0.3s width 0.4s;
  }
  .icon-bars::after {
    margin-top: 0px;
    background: rgb(13, 26, 38);
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    height: 2px;
    width: 20px;
     -webkit-transition: 0.3s width 0.4s;
    transition: 0.3s width 0.4s;
  }
  /* Bars Shadows */
  .icon-bars.overlay {
    background: rgb(97, 114, 129);
    background: rgb(183, 199, 211);
    width: 20px;
    animation: middleBar 3s infinite 0.5s;
    -webkit-animation: middleBar 3s infinite 0.5s;
  } @keyframes middleBar {
      0% {width: 0px}
      50% {width: 20px}
      100% {width: 0px}
    } @-webkit-keyframes middleBar {
        0% {width: 0px}
        50% {width: 20px}
        100% {width: 0px}
      }
  .icon-bars.overlay::before {
    background: rgb(97, 114, 129);
    background: rgb(183, 199, 211);
    width: 10px;
    animation: topBar 3s infinite 0.2s;
    -webkit-animation: topBar 3s infinite 0s;
  } @keyframes topBar {
      0% {width: 0px}
      50% {width: 10px}
      100% {width: 0px}
    } @-webkit-keyframes topBar {
        0% {width: 0px}
        50% {width: 10px}
        100% {width: 0px}
      }
  .icon-bars.overlay::after {
    background: rgb(97, 114, 129);
    background: rgb(183, 199, 211);
    width: 15px;
    animation: bottomBar 5s infinite 1s;
    -webkit-animation: bottomBar 3s infinite 1s;
  } @keyframes bottomBar {
      0% {width: 0px}
      50% {width: 15px}
      100% {width: 0px}
    } @-webkit-keyframes bottomBar {
        0% {width: 0px}
        50% {width: 15px}
        100% {width: 0px}
      }
  /* Toggle Menu Icon */
  .menuIcon.toggle .icon-bars {
    top: 5px;
    transform: translate3d(0, 5px, 0) rotate(135deg);
    transition-delay: 0.1s;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  .menuIcon.toggle .icon-bars::before {
    top: 0;
    transition-delay: 0.1s;
    opacity: 0;
  }
  .menuIcon.toggle .icon-bars::after {
    top: 10px;
    transform: translate3d(0, -10px, 0) rotate(-270deg);
    transition-delay: 0.1s;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  .menuIcon.toggle .icon-bars.overlay {
    width: 20px;
    opacity: 0;
    -webkit-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
  }
}
/*======================================================
                   Responsive Mobile Menu 
  ======================================================*/
.overlay-menu {
  background: white;
  color: rgb(13, 26, 38);
  display: flex;
  align-items: top;
  justify-content: top;
  position: absolute;
  top: 0;
  right: 0;
  padding-right: 15px;
  padding-top: 10px;
  padding-left: 10px;
  transform: translateX(-100%);
  width: 100vw;
  height: 100vh;
  -webkit-transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
.overlay-menu ul, .overlay-menu li {
  display: block;
  position: relative;
}
.overlay-menu li a {
  display: block;
  font-size: 1em;
  letter-spacing: 4px;
  padding: 10px 0;
  text-align: left;
  text-transform: uppercase;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.overlay-menu li a:hover,
.overlay-menu li a:active {
  color: rgb(28, 121, 184);
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
/* .btn_area{
    text-align: center;  
    padding-top: 25px; 
    font-family: consolas;
     }
	 .btn_area2{
    text-align: center;  
    padding-top: 25px; 
     } */
  .border1 {
    width: 100%;   
    margin: auto;
 	display: flex;
	padding: auto;
	border-radius: 25px;
	text-align: center;
    position: center;
   flex-direction: column;
   align-items: center;	
}
  .border2 {
	margin: flex;
	width: 75%;   
	display: auto;
	padding: auto;
	border-radius: 25px;
	text-align: center;	
}
  .border3 {
	margin: 80px;
	
}
.parent{
  position: relative;
}

.responsive{
   max-width:100%;
   max-height:100%;
 }

.center{
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%);
}





.depoimento {
    width: 226px;
    height: 164px;
    float: right;
}
#area-section{
    float: right;
    width: 85%;
    padding: 15px 0px;
}
#area-lateral{
    float: left;
    width: 15%;
    padding: 20px 0px;
}
#footer {
    clear: both;
    padding: 16px;
    background: #fff url(../images/guitar.jpeg) repeat-x top ;
    color: #7d7640;
}
h2{
    color: #7d7640;
    font-size: 2.1em;
    padding: 5px 0px;
}
h3{
    color: #7d7640;
    font-size: 1.1em;
}
#myDIV {
  height:50px;
  background-color:#FFFFFF;
  column-count:3;
  column-gap: 30px;
}
#myDIV1 {
  height:50px;
  background-color:#FFFFFF;
  column-count:3;
  column-gap: 30px;
}
#myDIV2 {
  height:50px;
  background-color:#FFFFFF;
  column-count:3;
  column-gap: 30px;
}
  #navitem li {
    height:5em;
    padding-top: 10px;  
    padding-bottom: 10px;
    text-align: center;
}   
#navitem li a p {
    color: #000;
    font-size: 0.8em;
}
#navitem li a h3 {
    font-size: 1em;
    color: #645f2f;
 }
#navitem li:hover {
    /* background: #f0efe7; */
    border-radius: 5px;
 

    }
.big {
    font-size: 3rem;
    color:#196F3D;
    font-family: "Sofia";
  }
  .big2 {
    font-size: 3rem;
    color:red;
    font-family: "Sofia"
  }
  /* animated btn */
  .button {
    background-color: #0D50A8;
    -webkit-border-radius:90px;
    border-radius: 75px; 
	width: 300px;
    border: none;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-family: sans-serif;
    font-size: 30px;
    padding: 30px;
    text-align: center;
    text-decoration: none;
    /* animation: glowing 30000ms infinite;  */
 
  }
   @keyframes glowing {
    0% { 
      background-color: #f2f5d0;  
      box-shadow: 0 0 5px #f2f5d0;
    }
    50% {
      background-color: #083C80;
      box-shadow: 0 0 20px #f2f5d0;
    }
    100% {
      background-color: #f2f5d0;
      box-shadow: 0 0 500px #f2f5d0;
    }
  } 
  /* animated btn */
  
  
  .btn_area{
    text-align: center;  
    padding-top: 25px; 
    font-family: consolas;

     }
  .btn_area2{
    text-align: center;  
    padding-top: 25px; 
     }
  .btn_area3{
    border: 7px solid rgb(42, 64, 5);
    border-style: groove, dashed, dashed;
    border: 0.5rem outset rgb(20, 100, 16);
    outline: 0.5rem solid rgb(199, 181, 15);
    box-shadow: 0 0 0 2rem rgb(92, 114, 73);
    border-radius: 12px;
    font: bold 1rem sans-serif;
    margin: 2rem;
    padding: 1rem;
    outline-offset: 0.5rem;
    box-shadow: inset;
    text-align: center;  
    padding:3px;
    background-color: #f2f5d0;
    border-radius: 3px;
    margin-left: 25%;
    margin-right: 25%;
     }
 
  .bg {
	background-image: url("../images/backgr_cent.jpeg");
 	  width: 100px;
	height: 100px;
}
 /*  img{
        max-width: 100%;
        max-height: 100%;
		margin: 0;
		padding: 0;
 
        /* display: block; */ /* remove extra space below image */
    } */
   
/*  padding-left: 10px;
 padding-right: 10px;
 padding-top: 10px;
 padding-bottom: 10px; */
}
a:link {
  color: red;
}
/* visited link */
a:visited {
  color: green;
}
/* mouse over link */
a:hover {
  color: rgb(220, 128, 75);
}
/* selected link */
a:active {
  color: rgb(2, 2, 60);
}
 .img5 {
 border-radius: 5px;}
 .listcentre3{
      background-color:#9fa91f ;
      padding-bottom: 15px;
      padding-top: 15px;
      padding-left: 25%;
      padding-right: 25%;
      border-radius: 10px;
 
    }
    .center {
      list-style-position:inside;
      background-color:#9fa91f ;
      border-radius: 10px;
      display: table;
      margin-left: auto;
      margin-right: auto;
      list-style-position: inside;
      color: navy;
      font-weight: bolder;
      font-size: large;
      text-align: left ;
      /* padding: 50px;
      width: 650px;
      height: 370px;  */   
    }
    .imagecentre {text-align:center; color: #39340d;}
    .big4 {
        font-size: 2rem;
        color:#bdb76b;
        font-family: "Sofia"
      }
      .big5 {
        font-size: 2rem;
        color:brown;
        font-family: "Sofia"}
        .listcentre4{
            background-color:#dae6be ; 
            position: relative;
            top: 20%;
            text-decoration:none;
            color:#26281e;
            /* padding-bottom:25px;
            padding-top:25px; */
             border-radius: 10px;
             width: 50%;
             margin: 0 auto;
             padding-bottom:10px;
            padding-top:10px; 
            padding-left:10px;
            padding-right:10px;
            text-align: center;
            }
            table, th, td {
                border: 3px solid rgb(40, 61, 9);
                font-size: smaller;
                width:100%;
                table-layout: fixed;

             }
            div.thebox_disco
            {
            box-sizing: border-box;
            border: 2px solid #c9d7ab;
            padding-top: 5%;
            padding-bottom: 20%;
            background: url("../images/backgr_cent.jpeg") center; 
            background-size: contain;
            background-repeat: no-repeat;
             height: 100%; 
             width:100%;
             background-position: center;
             background-size: cover; 
            }
            .image1
            {
              -ms-transform: rotate(-25deg); /* IE 9 */
             -webkit-transform: rotate(-25deg); /* Chrome, Safari, Opera */
             transform: rotate(15deg);
            }
            .image2
            {
              -ms-transform: rotate(50deg); /* IE 9 */
             -webkit-transform: rotate(50deg); /* Chrome, Safari, Opera */
             transform: rotate(45deg);
            }
            .image3
            {
            /* width:300px;
            height:300px; */
             -ms-transform: rotate(50deg); /* IE 9 */
             -webkit-transform: rotate(50deg); /* Chrome, Safari, Opera */
             transform: rotate(60deg);
            }
            .image4
            {
            /* width:300px;
            height:300px; */
             -ms-transform: rotate(50deg); /* IE 9 */
             -webkit-transform: rotate(50deg); /* Chrome, Safari, Opera */
             transform: rotate(-90deg);
             border-radius:45px;
             margin:auto;
            }
            .image5
            {
                background-size: cover; 
            }
            .image6
            {
                -ms-transform: rotate(50deg); /* IE 9 */
             -webkit-transform: rotate(50deg); /* Chrome, Safari, Opera */
             transform: rotate(0deg);
             border-radius:45px;
           

            }
            div.thebox_vid
            {
            box-sizing: border-box;
            border: 15px solid #93520c;
            border-style: groove;
            background: url("../images/backgr_cent.jpeg") center;
            background-size: contain;
            background-repeat: no-repeat;
            background-size: cover; 
            padding-left: 10px; 
            padding-right: 10px;
            }
            div.btn_area4
            {
              border: 15px solid rgb(148, 13, 9);
              border-style: groove, dashed, dashed;
              border-radius: 25px;
              margin-left: 25%;
              margin-right: 25%;
            
            }
            div.theboxh3 {
                font-family: consolas;
                background-color:#196F3D;
                border: 5px solid #11160b;
                border-radius:15px;
                padding-left:25px;
                padding:5px;
                height: 50%; 
                width:50%;
              }
              .big7 {
                font-size:22px;
                color:red;
                font-family: "Sofia";
                background-color:#dae5d1;
                    }
              .big8 {
                font-size:16px;
                color:#4a5d23;
                font-family: "Sofia";
                background-color:#f4f4b8;
                    }
              .big9 {
                      font-size: 2rem;
                      color:#6a0513;
                      font-family: "Sofia";
                      background-color:#f1f1a1;
                    }
              .big10 {
                      font-size: 1rem;
                      color:#6a0513;
                      font-family: "Sofia";
                      border-style: groove;
                      border-radius: 10px;
                      background-color:#e4e108; 
                    
                      }      
              .img_h1 {
                border: 10px solid #555;
              border-radius: 75px;
              text-decoration:none;
              position:relative;
                margin-right:auto;
               }
          .img_h2{
              position:relative;
              background-position: center;
              background-size: cover;
              transform: rotate(-90deg); 
              border: 10px solid #555;
              border-radius: 75px;
              margin-right:auto;  
                  }
          .img_h3 {
              position:relative;
              background-position: center;
              background-size: cover;
              border-radius: 75px;
                  }
                  .video {
                    /*This is to do the overlap*/
                    position: relative;
                    top: 0%;
                    left: 0%;
                }
                 video {
                    min-width: 10%;
                    max-width: 100%;
                    min-height: 10%;
                    max-height: 100%;
                }