/*above is for box alignment, it should be used for every element*/
*{
    box-sizing: border-box; 
}

/*take out all margins*/
body {
    margin: 0cm;
    font-family: 'Raleway', sans-serif; 
    
}



/*h1 and h2 for title and subtitle*/
h1 {
    font-weight: 300;
    font-size: 1.2rem;
}
h2 {
    font-size: 0.6rem;
    font-weight: 300;
}

h3 {
    margin: 0cm;
}

a {
    text-decoration: none;
    
}

li{
    padding: 1.25rem;
}

/*Define the main header*/
.main-header {
    padding: 2.5rem 0.6rem 0rem 1.9rem; 
    width: 100vw;
    color: white;
    background-color: #3f3f3f;
    font-family: 'Comfortaa', cursive;
    font-weight: 300;
    height: 5.6rem;
   
    position: fixed;
    top: 0px;
    z-index: +2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-footer{
    width: 100vw;
    padding: 1rem 3rem 1rem 3rem; 
    color: white;
    background-color: #4F4F4F;
    font-family: 'Comfortaa', cursive;
    font-weight: 300;
    height: 5rem;
    align-items: center;
    justify-content: space-between;
 }

 



 .social-network-links{
     display: flex;

 }
 .main-footer__links{
     list-style: none;
     margin: 1rem;
     padding: 0rem;
     display: flex;  
     
 }

 .main-footer__link{
     margin: 0px 8px;
     
 }
 
 .main-footer__link a{
    color: white;
    
 }


/*Pseudo elements grouped to change the state when you hover and click over the buttoms*/
.main-footer__link a:hover,
.main-footer__link a:active {
    color: rgb(158, 158, 158);
}







 

 .social-network-links-header{
     display: flex;
     flex-flow: row-reverse;
	     position: absolute;
    top: 5px;
    right:10px;
	margin: 0px;
 

 }
 .main-header-sn__links{
     list-style: none;
     margin: 0rem 1rem 0rem 1rem;
     padding: 0rem;
     display: flex;  
     
 }

 .main-header-sn__link{
     margin: 8px 8px;
     
 }
 
 .main-header-sn__link a{
    color: white;
    
 }

.english{
	color: white;
	font-family: 'Comfortaa', cursive;
    font-weight: bold;
	font-size: 0.6rem;
	padding:0.2rem 1.2rem 0.2rem 0.5rem;

}


.spanish{
	color: white;
	font-family: 'Comfortaa', cursive;
    font-weight: 300;
	font-size: 0.6rem;
	padding:0.2rem 1.2rem 0.2rem 0.5rem;

}


/*Pseudo elements grouped to change the state when you hover and click over the buttoms*/
.main-footer__link a:hover,
.main-footer__link a:active {
    color: rgb(158, 158, 158);
}



*/








/*footer mobile*/
@media(max-width: 40rem){
    .copyright{
        font-size: 0.5rem;
    }

}
    

/*navigation buttoms in line with subtitle in y axis*/


/*Navigation buttoms*/
.main-nav {
   display: flex;
}
/*Navigation buttoms without bullet points and spacing*/
.main-nav__items {   
    margin: 0mm;
    padding: 0mm;
    list-style: none; 
    display: flex;
  
}
/*spacing Navigation buttoms*/
.main-nav__item{
    padding: 1.2rem;
    margin: 0rem 0.3rem;
	transition: 0.3s;
}

.mobile-nav__item-lang{
	padding: 0.6rem;
    margin: 0rem 0.3rem;
	transition: 0.3s;
	display: flex;
}

.mobile-nav__item-sn{
	padding: 0.6rem;
    margin: 0rem 0.3rem;
	transition: 0.3s;
	display: flex;
}

/*combinator to overwrite the browser specifity style over the buttoms*/
.main-nav__item a {
    text-decoration: none;
    color: white;
}
/*Pseudo elements grouped to change the state when you hover and click over the buttoms*/
.main-nav__item a:hover,
.main-nav__item a:active{
    color: rgb(158, 158, 158);
}

.main-nav__item a:hover{
transition: 0.3s;
}



/*title page*/
.page-title {
    color: white;
    margin:0mm
}
/*subtitle*/
.page-subtitle {
    color: #ffffff;
    font-weight: 300;
    font-size: 1;
    padding: 0.3rem 0px;
    margin: 0px;
}

  /* burger menu*/
 
.toggle-button {
    width: 3rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
    display: none;
  }
  
  .toggle-button:focus {
    outline: none;
  }
  
  .toggle-button__bar {
    width: 100%;
    height: 0.2rem;
    background: rgb(255, 255, 255);
    display: block;
    margin: 0.6rem 0;
  }

  /*hiding burger*/
  @media(max-width: 40rem){
    .toggle-button{
        display: list-item;
       
          
  }
}


/*hide main nav items*/
@media(max-width: 40rem){
    .main-nav__items{
        display: none;
    }
	.social-network-links-header{
		display: none;
	}
}


.carrousel {
    width: 100%;
    background-image: url("0_images/Sunset.Carrousel.1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 95vh;
    padding: 0cm;
    margin: 0cm;
    z-index: -1;
}


.title-carrousel {
    color: rgb(255, 255, 255);
    font-family: 'Raleway', sans-serif;
    font-size: 4rem;
    position: absolute;
    Top: 23rem;
    left: 6rem;
    
}

.subtitle-carrousel {
    color: rgb(255, 255, 255);
    font-family: 'Raleway', sans-serif;
    font-weight: lighter;
    font-size: 1rem;
    position: absolute;
    Top: 32rem;
    left: 6rem;
}


.title-carrousel-harvard{
	color: #3f3f3f;
    font-family: 'Raleway', sans-serif;
    font-size: 4rem;
    position: absolute;
    Top: 23rem;
    left: 6rem;
	}

.subtitle-carrousel-harvard{
    color: #3f3f3f;
    font-family: 'Raleway', sans-serif;
    font-weight: lighter;
    font-size: 1rem;
    position: absolute;
    Top: 32rem;
    left: 6rem;
}





.button {
    color: rgb(255, 255, 255);
    border-radius: 10px;

    padding: 10px;
    border: 2px solid rgb(255, 255, 255)
  
}

.button-about {
    
    position: absolute;
    Top: 565px;
    left: 95px;
    padding: 10px; 
}


.button-about a {
    
    color: rgb(255, 255, 255);
    text-decoration: none;
}








.button-harvard {
    color: #3f3f3f;
    border-radius: 10px;

    padding: 10px;
    border: 2px solid #3f3f3f;
  
}

.button-about-harvard {
    
    position: absolute;
    Top: 565px;
    left: 100px;
    padding: 10px; 
}


.button-about-harvard a {
    
    color: #3f3f3f;
    text-decoration: none;
}







@media(max-width: 40rem) {
    .carrousel{
        background-position: 54% 0%; 
    }
    .title-carrousel {
        font-size: 2.5rem;
        position: absolute;
        top: 66vh;
		left: 5vw;
    }
	.title-carrousel-harvard {
        font-size: 2.5rem;
        position: absolute;
        top: 66vh;
		left: 5vw;
    }
	
	
    .subtitle-carrousel {
        position: absolute;
        top: 76vh;
		left: 5vw;
    }
	.subtitle-carrousel-harvard {
        position: absolute;
        top: 76vh;
		left: 5vw;
    }

	
	
	
    .button-about{
        position: absolute;
        top: 74.5vh;
		left: 72vw;
        font-size: 0.8rem;
        padding: 0.4rem; 
    }
	.button-about-harvard{
        position: absolute;
        top: 74.5vh;
		left: 72vw;
        font-size: 0.8rem;
        padding: 0.4rem; 
    }

    .button {
        border: 1px solid rgb(255, 255, 255)
    }
	.button-harvard {
        border: 1px solid #3f3f3f;
    }
	
	
	
	
	
	
}



/*teal color section*/
.second-section{
    height: 30rem;
    background-color: #9ACABA;
    padding: 16rem 0px 16rem 4rem;
    margin: 0cm;
    font-size: 2.5rem;
}

.statement {
    width: 75%;
    font-family: 'Raleway', sans-serif;
    margin: 0cm;
    
}

/*second section*/
@media(max-width: 40rem) {
    .second-section{
        height: 8rem;
        padding: 3rem 2px 7.5rem 10vw;
        margin: 0cm;
        font-size: 2.5rem;
    }
    
    .statement {
        width: 80%;
        font-family: 'Raleway', sans-serif;
        margin: 0cm;
        font-size: 1rem;
        
        
    }

}



.white-text {
    color: rgb(255, 255, 255);
}

.black-text {
    color: rgb(7, 7, 7);
}

.highlighted-statement {
    color: #4F4F4F;
    font-family: 'Raleway', sans-serif;
}

/*h4: section titles*/
.section-titles {
    font-family: 'Raleway', sans-serif;
    font-size: 2.5rem;
    margin: 0px;
    padding: 5.3rem 0rem 1.25rem 3rem;
    background-color: white;
    width: 100%;
}

@media(max-width: 40rem){
    .section-titles {
        font-family: 'Raleway', sans-serif;
        font-size: 1.5rem;
        margin: 0px;
        padding: 1rem 0rem 1.25rem 10vw;
        background-color: white;
        width: 100%;
    }

}


.about {
    width: 100%; 
    background-color: white; 
}


.rcphoto{
    background-image: url("https://raulcastillostudio.com/03_web/0_images/rc.jpg");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: 0% 30%;
    width: 40vw;
    height: 35vw;
    margin: 0rem 0rem 3rem 3rem;
    display: inline-block;
}


.about-text {
    font-family: 'Raleway', sans-serif;
    font-size: 1.9rem;
    width: 44rem; /*the tricky point to align the buttoms from the right*/
    padding: 5rem 0.3rem 0px 0px;
    color: rgb(0, 0, 0);
    vertical-align: top; 
    margin: 0rem 4rem 0rem 4rem ;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}
.hi-about{
    font-family: 'Raleway', sans-serif;
    font-size: 2.5rem;
}

@media(max-width: 40rem){
    .rcphoto{
        
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: 0% 30%;
        width: 80vw;
        height: 70vw;
        margin: 0vw 10vw 0vw 10vw;
        padding: 0rem;
    }
    .about-text {
        font-family: 'Raleway', sans-serif;
        font-size: 0.8rem;
        width: 80vw;
        padding: 2rem 0rem 1rem 0rem;
        margin: 0rem 10vw 0rem 10vw ;
        vertical-align: top;
    }
    .hi-about{
        font-family: 'Raleway', sans-serif;
        font-size: 1rem;
    }

}

.madness-background{
    font-family: 'Raleway', sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0px;
    padding: 3rem 6rem 3rem 3rem;
    background-color: white;
}





.path{
    background-image: url("https://raulcastillostudio.com/03_web/0_images/background3.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 95vw;
    height: 30vw;
	padding: 2rem 0rem;
    margin: 5rem 0rem 0rem 3rem;
    margin: auto;
    text-align: center; 
}

.beepath{
    padding: 3rem;
}


.horizontal-text {
    font-family: 'Raleway', sans-serif;
    font-size: 1.6rem;
    text-align: left;
    width: 100%;
    padding: 3rem 2.5rem 3rem 2.5rem;
    vertical-align: top; 
    margin: 0px;
}
/*background &path*/
@media(max-width: 40rem){

    
    .madness-background{
        font-size: 0.8rem;
        padding: 2rem 0rem 1rem 0rem;
        margin: 0rem 10vw 0rem 10vw ;
       
    }
    .path{
        
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left 0% top 10%;
        width: 78vw;
        height: 35vw;
        margin: 2rem 0rem 2rem 3rem;
        
        text-align: center; 
    }
    .horizontal-text {
        font-size: 0.8rem;
        width: 80%;
        padding: 0%;
        margin: auto;
        
    }
    


}



.subtitle-clients{
    
    padding: 0rem 0rem 3rem 3rem;
    margin: 0rem;
}
.brands-division{
    width: 80%;
    max-width: 1080px;
    margin: auto;
    padding-bottom: 6rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

}
.design-photo-container{
    padding: 0.3rem;
}




/*background &path*/
@media(max-width: 40rem){
    .subtitle-clients{
    font-size: 0.8rem;
    width: 80vw;
    padding: 0%;
    margin: auto;
   margin-left: 10vw;
    }
}



@media(max-width: 40rem){
    .logo-images{
        margin: 0.5rem 0.5rem;
        width: 20vw;
    }
    .brands-division{
        padding: 1rem 0rem 1rem 0rem;
    }
}

/*become a designer*/
.become-a-designer-section {
    
    background-color: #E7CC9E;
    padding: 14rem 0px 14rem 4.4rem;
    margin: 0cm;
    font-size: 2.2rem;
}
/*become a designer*/
@media(max-width: 40rem) {
    .become-a-designer-section{
        
        padding: 2rem 2px 2rem 10vw;
        margin: 0cm;
        font-size: 2.5rem;
    }
    
}



.work-section{
    background-color: #F2F2F2;
    padding: 6.25rem 0px 0rem 0rem;
 
}
.work-gallery2{
    width: 90%;
    margin: auto;
    padding-bottom: 6rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

}
.work-photo-container{
	display: flex;
	
    padding: 0.3rem;
    width: 40vw;
}

.work-images{
    width: 40vw;
	padding: 0.5rem 0.5rem;
}


.work-gallery{
    background-color: #F2F2F2;
}

.design-title{
	font-size: 1.2rem;
	font-weight: bold;
	padding: 0rem 0rem 1rem 5%;
	
	margin: 0%;
}

/*

.overlay {
  position: absolute;
 
  height: 25.21vw;
  width: 40vw;
  opacity: 0;
  transition: .5s ease;
  background-color: rgb(158, 158, 158, 0.3);
  z-index: +1;

}

.work-photo-container:hover .overlay {
  opacity: 1;
}

.work-text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 90%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
*/

/*


.work-images{
    margin: 0.5rem 0.5rem;
}
*/

/*work-section*/
@media(max-width: 40rem) {
	
	.work-gallery2{
		flex-direction: column;
	
	}
    .work-images{
        width: 100%;
		margin: auto;
    }
	.work-photo-container{
	   width: 80vw;
       padding: 0rem;
	   
}

	.design-title{
		font-size: 0.8rem;
		}
}




.third-section{
    background-color: #4F4F4F;
    padding: 3rem 0px 3rem 3rem;
    margin: 0cm;
    font-size: 40px;
}



/*only for book author and name, overwrite the horizontal text*/
.sun-tzu {
    font-size: 1.6rem;
    font-weight: lighter;
    padding: 0cm;
}
/*sun-tzu and padding for the .intro-steps*/
@media(max-width: 40rem) {
    .sun-tzu {
        font-size: 0.8rem;
    }
    .intro-steps{
        padding: 1rem 0rem;
    }
   
}


.process-steps{
  
    background-color: #BDBDBD;
    vertical-align: middle;
    
}

h4 {
    font-weight: lighter;
}

.step-container{
    padding: 3rem 0rem ;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    

}
.steps-center{
    vertical-align: middle;  
}

.test-left{
    text-align: left;
}

.step {
padding: 1rem;
margin: 0px;
list-style: none;
vertical-align: middle;
width: 10%;
min-width: 180px;
}





/*steps size L*/
@media(max-width: 1460px){
    .step-container{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
        margin: auto;
        
    }

}
/*steps size m*/
@media(max-width: 800px){
    .step-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: left;
        align-items: flex-start;
        margin-left: 1rem;
    }
    .step {
        padding: 1rem 10vw;
        margin: 0px;
        width: 80vw;
        }
}

/*steps size s*/
@media(max-width: 40rem){
    .step-container{
		width: 100%;
        padding: 1rem 0rem ;
        text-align: center;
		margin-left: 0px;
    }
    .step {
        padding: 1rem 10vw;
        margin: 0px;
        display: block;
        
        width: 80vw;
        }
}



.services{
    background-color: rgb(84, 144, 184);
    
}

.services-list-container{
    display: flex;
    align-items: top;
    padding-left: 1.5rem;
    
}

.list-services {
    font-size: 1.6rem;
    padding: 4rem 1rem 2rem 0rem;
   
    
    width: 50%;
    vertical-align: top;
    font-weight: lighter;
    list-style: none; 
    
    } 


/*services-section*/
@media(max-width: 40rem){
    .services{
        background-color: rgb(84, 144, 184);
       
    }
    .services-list-container{
        display: flex;
        align-items: top;
        
    }
    
    .list-services {
        font-size: 0.6rem;
        padding: 2rem 1rem 2rem 2rem;
        width: 35vw;
        font-weight: lighter;
        list-style: none; 

        } 
    
    li{
        padding: 1.25rem;
    }
    
}

.testimonials-section{
    
    background-color: #4b9baf;
    padding: 3rem 0px 3rem 3.5rem;
    margin: 0cm;
    font-size: 40px;
}

/*testimonials statment*/
@media(max-width: 40rem){
    .testimonials-section{
    padding: 3rem 0px 3rem 10vw;
}
}


.testimonials2{
    background-color: #F2F2F2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 1rem;
   
}
.testimonial-container{
    display: flex;
    flex-wrap: wrap;
	 align-items: center;
	
	
    
}

.test-photo-container{
    width: 20vw;
    min-width: 290px;
    padding: 0rem 1rem;
    margin: 0%;

}

.testimonial-images{
    width: 100%;
}
.testimonial-text-container{
    width: 25vw;
    min-width: 290px;
    max-height: 209px;
    padding: 1rem 3rem 0rem 1rem;
}

.Testimonial-text{
    width: 100%;
    margin:0% ;
       
}

.position-title{
    font-family: 'Raleway', sans-serif; 
    font-weight: bold;
}

.job{
    font-family: 'Raleway', sans-serif; 
    font-weight: lighter;
}
/*testimonial medium screen*/
@media(max-width: 90rem){
    .testimonials2{
        background-color: #F2F2F2;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 1rem;
    }

.testimonial-container{
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 3rem;
}
.testimonial-text-container{
    width: 50vw;
    min-width: 18rem;
    max-height: 13rem;
    padding: 1rem 3rem 0rem 1rem;
}
}

/*testimonials size s*/
@media(max-width: 44rem){

    .testimonials2{
        background-color: #F2F2F2;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        padding-bottom: 1rem;
    }
    .testimonial-container{
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 3rem;
        justify-content: center;
    }



    .testimonial-text-container{
        width: 80vw;
        max-height: 209px;
        padding: 1rem 0rem 0rem 1rem;
        
    }
    .test-photo-container{
        width: 80vw;
        min-width: 290px;
        padding: 0rem 1rem;
        margin: 0%;
    
    }
    .Testimonial-text{
        width: 95%;
    }


}




/*contact*/
.contact-section{
    background-color: #6e6e6e;
    padding: 3rem 0rem 3rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.test{
    
    padding: 0rem 1rem 0rem 0rem;
    
}
.contact-details{
    text-align: right;
    font-size: 1rem;
    font-weight: 300;
    list-style: none;
    padding: 0rem;
    margin: 0rem;
    display: flex;
    flex-direction: column;
   

}

.contact-detail-line{
    padding: 0.5rem;
    text-align: right;
    color: white;
    vertical-align: top;
}

.text-contact{
    vertical-align: top;
    font-size: 2rem;
    color: white;
    margin-top: 0%;
}


@media(max-width: 90rem){
    .text-contact{
     width: 50%;
    }
    
}







/*contact*/
@media(max-width: 57rem){
    .contact-section{
        flex-direction: column;
    }

    .text-contact{
    font-size: 1rem;
    color: white;
    width: 80vw;
   
    }
    .contact-details{
       text-align: center;
        font-size: 0.8rem;
        font-weight: 300;
        list-style: none;
        padding: 0rem;
        margin: 0rem;
        
    
    }
    
    .contact-detail-line{
        padding: rem;
        text-align: center;
        color: white;
        vertical-align: top;
    }

    .test{
        width: 80vw;
        text-align: center;
        padding: 3rem 1rem 0rem 0rem;
       
    }
    
/*carrousel*/
}

body{
    background-color: rgb(255, 255, 255);
    font-family: sans-serif;
  }
  
  .container{
    
    background-color: white;
    width: 100%;
  
  }
  
  ul, li {
      padding: 0;
      margin: 0;
      list-style: none;
  }
  
  ul.slider{
    position: relative;
    width: 100vw;
    height: 80vh;
  }
  
  ul.slider li {
      position: absolute;
      left: 0px;
      top: 0px;
      opacity: 0;
	  display: none;
      width: inherit;
      height: inherit;
      transition: opacity .5s;
      background:#fff;
  }
 
  ul.slider li img{
    width: 100%;
	height: 95vh;
    
    object-fit: cover;
  }

  
  ul.slider li:first-child {
      opacity: 1; /*Mostramos el primer <li>*/
	  display: list-item;
  }
  
  ul.slider li:target {
      opacity: 1; /*Mostramos el <li> del enlace que pulsemos*/
	  display: list-item;
  }









  



  .menu{
    text-align: center;
    margin: 20px;
    position: absolute;
    top: 60px;
    left: 36%;
    
  }
  
  .menu li{
    display: inline-block;
    text-align: center;
  }
  
  .menu li a{
    display: inline-block;
    color: white;
    text-decoration: none;
    background-color: grey;
    
    width: 80px;
    height: 8px;
    font-size: 5px;
    border-radius: 4px;
  }


  .rectangular{
      height: 10px;
  }











#slide1{
	padding: 0px;
}

#slide2{
	padding: 0px;
}

#slide3{
	padding: 0px;
}

#slide4{
	padding: 0px;
}


@media(max-width: 40rem){
	.container{
	display:flex;
    align-items: center;
	
		
	}

  ul.slider li img{
    width: 100%;
	height: 80vh;
    
    object-fit: cover;
  }
  .menu{
    
    margin-left: 2px;
    top: 64px;
	left: 23vw;
    
      
  }
	#padding-menu{
		padding: 5px;
	}
	
	  .menu li a{
    
    
    width: 40px;
    height: 8px;
    font-size: 5px;
    border-radius: 4px;
  }
	
}


.carrousel-image-container{
    width: 100vw;
    display: inline-block;
}

.carrousel-image{
    width: 50vw;
   
}

ul.slider{
	width: 100%;

}