@charset "UTF-8";
  html, body {
      margin: 0;
      padding: 0;
      height: 100%;
	   font-family: "Roboto", sans-serif;
	   scroll-behavior: smooth;
    }
	


    .fullscreen-image {
      width: 100vw;
      height: 100vh;
     background-image: url('https://surflessonsinsantateresa.com/1m4g35/SurfLessonsInSantaTeresa.jpg'); 
       background-size: cover;
      background-position: right;
      background-repeat: no-repeat;
    }
	
	#logo-container {
		
		max-width:680px
		}
		
	 .container {
      display: flex;
      width: 100%;
	  padding:20px;
     
    }

    .left-div, .right-div {
     
     
      color: black;
	 
    }

    .left-div {
       width:90px
    }

    .right-div {
     width:450px;
	 height:90px;
	 margin-top:-15px;
	 margin-left:10px
    }
	
	.right-div h1{font-size:30px}
	
	.blackLine {width:360px; height:3px; background-color:black; margin-left:22px; margin-top:-15px}
	
	.hDosMenu {margin-left:50px; text-align:left; margin-top:-15px}
	
	#menuMain { font-size:14px; margin-left:13px; text-align:left}
	
	#menuMain a{ text-decoration:none; color:black; padding-left:13px}
	#menuMain a:hover {color:#39b3a5}
	#menuMain .special {background-color:#39b3a5; padding:5px; margin-left:8px}
	#menuMain a.special {color:white}
	#menuMain a.special:hover {color:black}
		
		.container2 {
  display: flex;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.left-div2, .right-div2 {
  width: 50%;
  box-sizing: border-box;
  padding: 10px;
  color: black;
}

.container3 {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

.left-div3, .right-div3 {
  width: 50%;
  box-sizing: border-box;
 
  color: black;
}

.left-div3 img {width:100%}
.right-div3 h1 {}
.right-div3 h3 {font-weight:300; margin:5%; text-align:center}		
.left-div3 h3 {font-weight:300; margin:5%; text-align:center}		
.left-div4 h3 {font-weight:300; margin:5%; text-align:center}	
.containerFooter {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

.left-divFooter, .right-divFooter {
  width: 50%; 
  box-sizing: border-box;
 
  color: black;
}

.left-divFooter img {width:100%;}
.right-divFooter img {width:100%;}
.logoRespImg {max-width:250px; margin:auto}
.openRespImg {max-width:400px; margin:auto}
.right-divFooter h1, .left-divFooter h1 {color:white; margin:5%; text-align:center}
.right-divFooter h3 {font-weight:300; margin:5%; color:#FFF}		
	
	#sticky-menu {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
  transform: translateY(-100%);
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 999;
}

.container4 {
  display: flex;
  width: 100%;
  
  box-sizing: border-box;
}

.left-div4, .right-div4 {
  width: 50%; 
  box-sizing: border-box;
 
  color: black;
}

.right-div4 img {width:100%}
.left-div4 h1 {}
.left-div4 h3 {font-weight:300; margin:5%}		

#sticky-menu.show-sticky {
  transform: translateY(0);
  opacity: 1;
}

/* Hide logo with fade */
.hidden-logo {
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

/* Navigation links style */
#sticky-menu nav {
  display: flex;
  gap: 20px;
  padding: 10px;
}

#sticky-menu nav a {
  text-decoration: none;
  color: black;
  font-weight: bold;
  padding:5px
}

#sticky-menu nav a:hover {
	color:#39b3a5
}

.specialResp {
  background-color:#39b3a5;
  color: white;
 padding:5px;
  border-radius: 4px;
}

#sticky-menu nav a.specialResp  {
  color: white;
}

#sticky-menu nav a.specialResp:hover {
  color: black;
}

#logoSticky {margin-top:5px}


.containerSurfLessons {
  display: flex;
  width: 100%;

  box-sizing: border-box;
  gap: 20px;
}

.left-divSurfLessons {
  width: 55%;
  box-sizing: border-box;
  margin-top:-10px;
  z-index:html;
  color: black;
}

.right-divSurfLessons {
  width: 45%;
  box-sizing: border-box;
  padding: 10px;
  color: black;
}

.right-divSurfLessons h1{margin:40px}
.right-divSurfLessons h4{margin:20px; font-weight:500}


@media (max-width: 1170px) {
  .containerSurfLessons {
    flex-direction: column-reverse;
  }

  .left-divSurfLessons,
  .right-divSurfLessons {
    width: 100%;
  }
  
  .container3{
    flex-direction: column-reverse;
  }

  .left-div3,
  .right-div3 {
    width: 100%;
  }
  
  .container4{
    flex-direction: column;
	
  }
  
   .left-div4,
  .right-div4 {
    width: 100%;

  }
  
  
   .containerFooter{
    flex-direction: column;
	
  }
  
   .left-divFooter,
  .right-divFooter {
    width: 100%;

  }
  
 .right-div4 img, .left-div3 img {width:100%; margin-top:15px}
  
 
  
}

@media (max-width: 900px) {

 #sticky-menu nav {
  display: flex;
  gap: 5px;
  padding: 2px;
  padding-top:10px
}

.specialResp {
  background-color:#39b3a5;
  color: white;
 padding5px !important;
  border-radius: 2px;
  font-weight:500;
  font-size:12px
}



#sticky-menu nav a {
  text-decoration: none;
  color: black;
  font-weight: bold;
  padding:2px;
   font-weight:500;
  font-size:12px;
  padding-top:10px
}

#sticky-menu nav a:hover {
	color:#39b3a5
}

.fullscreen-image {
      width: 100%;
      height: 100%;
      background-image: url('https://surflessonsinsantateresa.com/1m4g35/SurfLessonsInSantaTeresa.jpg'); 
       background-size: cover;
      background-position: right;
      background-repeat: no-repeat;
    }
}
.BookNowBtn {
	margin:auto; width:140px
	}

.book-now-button {
  display: inline-block;
  background-color: #318b8c;    
  color: #fff;                
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-left:auto;
  margin-right:auto
}

.book-now-button:hover {
  color: #333;
  transform: scale(1.05);  
}

#blueBg {
	margin-top:-10px;
	width:100%;
	background-color:#178cf0;
	color:white
	}
	
#blueBg h2 {
	text-align:center;
	
	}
	
#blueBg h4 {
	text-align:center;
	font-weight:200;
}

.hcuatroBox {margin-left:10%;
	margin-right:10%;}
	
.three-columns {
  display: flex;
  justify-content: space-between; 
  gap: 20px;                      
  padding: 20px;
  flex-wrap: wrap;                
}

.column {
  flex: 1;                       
  min-width: 250px;              
  padding: 20px;
  text-align: center;
}
	
	
#surfLessons {}	
#surfLessons h1{ text-align:center; margin-left:auto; margin-right:auto; }	
	
	
.spacer1 {height:20px; width:100%}
.spacer2 {height:5px; width:100%}
.spacer3 {height:40px; width:100%}


#footer {width:100%; margin:0px; padding:0px; background-color:#000; color:#FFF}
#iframeContainer {max-width:450px; width:100%; margin:auto}
iframe{width:100%; height:230px; max-width:2000px; margin:auto}
.infobtmFooter {margin:auto; max-width:200px; width:100%}

.infobtmFooter table a{text-decoration:none; color:white}
.infobtmFooter table a:hover{text-decoration:none; color: #3AB3A5}
#footer h1 a{text-decoration:none; color:white}
#footer h1 a:hover{text-decoration:none; color:#3AB3A5}

section {
  scroll-margin-top: 45px; 
}