* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

header {
    width: 100%;

    position: fixed;
    top: 20px;

}

body {
    background-image: linear-gradient(180deg, #23343F 16%, #101318 26%, #05080B 66%, #21313B 91%);
}


#fundo {
    width: 100%;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
}

#topo {
    width: 100%;
    max-width: 1192px;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    justify-content: space-between;
    align-items: center;

    background-color: #23343f98;
    z-index: 10000;

    border-radius: 28px;
}


nav {
    width: 100%;
    max-width: 418px;


    display: flex;
    justify-content: space-between;
    align-items: center;
}

#contentor {
    width: 100%;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    height: 954px;


    background-image: url(imagens/fundo_ithaca.jpg);

}

#logomain {
    margin-left: auto;
    margin-right: auto;

    width: 100%;
    max-width: 586px;
    height: 225px;

    padding-top: 222px;

}


#intro {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    max-width: 586px;

    height: 100%;
    max-height: 573px;

    margin-left: auto;
    margin-right: auto;
    margin-top: 222px;

    border-top-left-radius: 107px;
    border-top-right-radius: 107px;

    background: #0E222F;
    background: -webkit-linear-gradient(180deg, rgba(14, 34, 47, 1) 0%, rgba(16, 37, 52, 1) 50%, rgba(36, 55, 66, 1) 100%);
    background: -moz-linear-gradient(180deg, rgba(14, 34, 47, 1) 0%, rgba(16, 37, 52, 1) 50%, rgba(36, 55, 66, 1) 100%);
    background: linear-gradient(180deg, rgba(14, 34, 47, 1) 0%, rgba(16, 37, 52, 1) 50%, rgba(36, 55, 66, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0E222F", endColorstr="#243742", GradientType=0);


}

#introtext {
    width: 100%;
    max-width: 384px;
    font-size: medium;
    color: #f4f4f4;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 18px;
    font-weight: 500;


}

a {
    text-decoration: none;
    color: #f4f4f4;
}

h3 {
    text-align: left;
    color: #f4f4f4;

    font-weight: 900;
    margin-left: 17px;
    font-size: 50px;
    margin-top: 131px;
    font-family: Lora;


}

#cast {
    display: flex;
    justify-content: space-between;
    margin-top: 52px;

    width: 100%;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 341px;


}

.jorge {
    width: 384px;
    text-align: center;
    color: #F9EBA0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 25px;
}

#ody {

    width: 384px;
    text-align: center;
    color: #f4f4f4;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 25px;
    font-weight: bold;

}

#allmembers {
    width: 788px;

    display: flex;
    flex-wrap: wrap;
    gap: 20px;


}

#castmembers {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
}

.amarelo {
    color: #F9EBA0;
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
}

.branco {
    color: #f4f4f4;
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    font-weight: bold;
}

#troy {

    background-image: url(imagens/troy_fundo.jpg);

    width: 100%;
    max-width: 1220px;

    background-repeat: no-repeat;

}

#troysaga {

    padding-bottom: 167px;
    padding-top: 82px;
    padding-left: 15px;
}


#odysseus {

    margin-left: 224px;
    margin-bottom: 27px;

}

#cyclop {

    background-image: url(imagens/cyclops_fundo.jpg);
    background-repeat: no-repeat;
    height: 653px;
}

#cyclopsaga {
    margin-left: 122px;
    margin-top: 89px;
}

#ovelhas {
    margin-left: 115px;
    margin-bottom: 15px;
}

#ocean {
    background-image: url(imagens/ocean_fundo.jpg);
    height: 635px;
}

#oceansaga {
    margin-left: 15px;
    margin-top: 76px;
}

#saco {
    margin-left: 321px;

}

#troia {

    width: 100%;
    max-width: 259px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16px;
   
    font-weight: 800;
    text-decoration: none;

    margin-left: 15px;
    padding-top: 26px;



}

#ciclope {
    width: 100%;
    max-width: 259px;

    display: flex;
    justify-content: space-evenly;
    align-items: center;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16px;
    
    font-weight: 800;
    text-decoration: none;
    text-align: center;

    margin-left: 827px;
    padding-top: 26px;

}

#oceano {

    width: 100%;
    max-width: 259px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16px;
    
    font-weight: 800;
    text-decoration: none;

    margin-left: 15px;
    padding-top: 26px;

}

#vermais {

    width: 100%;
    max-width: 259px;

    display: flex;
    justify-content: space-evenly;
    align-items: center;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16px;
   
    font-weight: 800;
    text-decoration: none;
    text-align: center;

    margin-left: 1027px;
    padding-top: 26px;

}


#loja {
    text-align: center;
    color: #f4f4f4;

    font-weight: 900;
    font-size: 50px;
    margin-top: 306px;
    font-family: Lora;
}

#lojamain {

    padding-left: 115px;
    padding-right: 115px;
    padding-top: 63px;
    padding-bottom: 63px;
    display: flex;
    justify-content: space-between;
}

#vinil {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-right: 121px;


}

#viniltroia {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 160px;

}

#vinildois {

    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#caixa {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 152px;
}

#cd {

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-left: 121px;

}

#cdseries {

    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#vinilcyclops {

    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}


#epicfooter {

    margin-left: 519px;
    margin-bottom: 55px;
    margin-top: 242px;
}

#social {

    width: 100%;
    max-width: 259px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-left: 481px;
    margin-bottom: 31px;

}

#linha {

    width: 100%;
    max-width: 182px;

    margin-left: 519px;
    margin-bottom: 35px;

    align-items: center;

}

#copy {
    text-align: center;

    margin-bottom: 35px;
}

#design {
    text-align: center;

    margin-bottom: 35px;
}

.ctaum {

    width: 182px;
    height: 46px;


    color: #EE3823;
    background-color: #F9EBA0;

    border-radius: 17px;
    font-size: 18px;

    padding-left: 61px;
    padding-right: 61px;
    padding-bottom: 8px;
    padding-top: 9px;

}

.ctadois {
    width: 182px;
    height: 46px;


    color: #f4f4f4;
    background-color: #770101;

    border-radius: 17px;
    font-size: 18px;

    padding-left: 61px;
    padding-right: 61px;
    padding-bottom: 8px;
    padding-top: 9px;
}

.ctatres {

    width: 182px;
    height: 46px;


    color: #f4f4f4;
    background-color: #332C24;

    border-radius: 17px;
    font-size: 18px;

    padding-left: 61px;
    padding-right: 61px;
    padding-bottom: 8px;
    padding-top: 9px;

}

p {
    color: #f4f4f4;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

a {
    color: #f4f4f4;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-decoration: none;
    font-size: 20px;
}

.amareloloja {

    color: #F9EBA0;
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    margin-top: 17px;


}

.brancoloja {

    color: #f4f4f4;
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 38px;
}

#comprar {
    width: 182px;
    height: 46px;


    color: #f4f4f4;
    background-color: #770101;

    border-radius: 17px;
    font-size: 18px;

    padding-left: 61px;
    padding-right: 61px;
    padding-bottom: 8px;
    padding-top: 9px;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
    text-align: center;

    margin-bottom: 5px;

}



/* RESPONSIVE */


  @media only screen and (max-width: 360px) {

    #fundo {
        width: 100%;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;


        align-items: center;

   
    }

   #topo {
    width: 100%;
    max-width: 340px;
    height: 52px;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    justify-content: space-between;
    align-items: center;

    background-color: #23343f98;
    z-index: 10000;

    border-radius: 28px;
}

#homelogo{

    width: 100%;
    max-width: 64px;
    height: 64px;
}

#epiclogoheader{

    width: 100%;
    max-width: 90px;
    height: 34px;
}


#contentor {
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    height: 468px;


    background-image: url(imagens/fundo_ithaca_mobile.jpg);
    background-repeat: no-repeat;

}

nav {
    width: 100%;
    max-width: 64px;


    display: flex;
    justify-content: space-between;
    align-items: center;
}

#logomain {
    margin-left: auto;
    margin-right: auto;

    width: 100%;
    max-width: 360px;
    height: 225px;
    display: flex;

    padding-top: 116px;

}
#logogrande {

    width: 100%;
    max-width: 230px;
    height: 88px;
     margin-left: auto;
    margin-right: auto;
    align-items: center;
}
#intro {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    max-width: 360px;

    height: 100%;
    max-height: 508px;

    margin-left: auto;
    margin-right: auto;
    margin-top: 195px;

    border-top-left-radius: 30px;
    border-top-right-radius: 30px;

    background: #0E222F;
    background: -webkit-linear-gradient(180deg, rgba(14, 34, 47, 1) 0%, rgba(16, 37, 52, 1) 50%, rgba(36, 55, 66, 1) 100%);
    background: -moz-linear-gradient(180deg, rgba(14, 34, 47, 1) 0%, rgba(16, 37, 52, 1) 50%, rgba(36, 55, 66, 1) 100%);
    background: linear-gradient(180deg, rgba(14, 34, 47, 1) 0%, rgba(16, 37, 52, 1) 50%, rgba(36, 55, 66, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0E222F", endColorstr="#243742", GradientType=0);}

    #introtext {
    width: 100%;
    max-width: 316px;
    font-size: medium;
    color: #f4f4f4;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 18px;
    font-weight: 500;


}

h3 {
    text-align: left;
    color: #f4f4f4;

    font-weight: 900;
    margin-left: 17px;
    font-size: 48px;
    margin-top: 540px;
    font-family: Lora;
}


#cast {
    
    justify-content: space-between;

    flex-wrap: wrap;
   

    
    max-width: 316px;
    margin-left: auto;
    margin-right: auto;

}

.jorge {
    width: 100%;
    max-width: 316px;
 
}

.herrans{
    text-align: center;
    color: #F9EBA0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 22px;
}

.jorge img {
    width: 100%;
    max-width: 316px;
}

#ody {
    width: 100%;
    width: 300px;
    text-align: center;
    color: #f4f4f4;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 23px;
    font-weight: bold;

}

#allmembers {
    width: 316px;

    flex-wrap: wrap;
    gap: 20px;

    

}
#allmembers img {
    width: 148px;
}

#castmembers {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    max-width: 148px;
    height: 228px;


    

}

    
#ocean {
    background-image: url(imagens/ocean_fundo_mobile.jpg);
    
    height: 432px;
}

#oceansaga {
    margin-left: 65px;
    margin-top: 53px;

    width: 100%;
    max-width: 232px;
}

#oceano {

    width: 100%;
    max-width: 259px;

    flex-wrap: wrap;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16px;
    
    font-weight: 800;
    text-decoration: none;
    

    margin-left: 65px;
    padding-top: 26px;

}

.ctatres {

   
    color: #f4f4f4;
    background-color: #332C24;

    border-radius: 17px;
    font-size: 18px;

    width: 232px;
    height: 46px;
    



    padding-left: 82px;
    padding-right: 82px;
    padding-bottom: 8px;
    padding-top: 9px;

    margin-bottom: 20px;
}





   
#troy {

   background-image: url(imagens/troy_fundomobile.jpg);
    
    height: 432px;
}

#troysaga {

    margin-left: 65px;
    margin-top: 53px;

    width: 100%;
    max-width: 232px;



    padding-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;

    
}

.ctaum {

    width: 232px;
    height: 46px;
   
    padding-left: 82px;
    padding-right: 82px;
    padding-bottom: 8px;
    padding-top: 9px;


    color: #EE3823;
    background-color: #F9EBA0;
    text-align: center;

    border-radius: 17px;
    font-size: 18px;

    margin-bottom: 20px;

   


}
    
#troia {
    width: 100%;
    max-width: 259px;

    flex-wrap: wrap;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16px;
    
    font-weight: 800;
    text-decoration: none;
    

    margin-left: 65px;
    padding-top: 26px;
}

#cyclop {

    background-image: url(imagens/cyclops_fundomobile.jpg);
    
    height: 432px;
}

#cyclopsaga {
    margin-left: 65px;
    margin-top: 53px;

    width: 100%;
    max-width: 232px;
   
}

#ciclope {
     width: 100%;
    max-width: 232px;

    flex-wrap: wrap;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16px;
    
    font-weight: 800;
    text-decoration: none;
    

    
    margin-left: 65px;
    padding-top: 26px;
    


}

.ctadois {
   
    color: #f4f4f4;
    background-color: #770101;
    
    border-radius: 17px;
    font-size: 18px;

    width: 232px;
    height: 46px;
    



    padding-left: 82px;
    padding-right: 82px;
    padding-bottom: 8px;
    padding-top: 9px;

     margin-bottom: 20px;

    
}




#epicfooter {

    margin-left: 89px;
    margin-bottom: 49px;
    margin-top: 242px;
}

#social {

    width: 100%;
    max-width: 259px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-left: 50px;
    margin-bottom: 41px;

}

#linha {

    width: 100%;
    max-width: 182px;

    margin-left: 89px;
    margin-bottom: 41px;

    align-items: center;

}

#copy {
    text-align: center;

    margin-bottom: 35px;
}

#design {
    text-align: center;

    margin-bottom: 35px;

}  

#vermais {

    width: 100%;
    max-width: 232px;

    display: flex;
    justify-content: space-evenly;
    align-items: center;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16px;
   
    font-weight: 800;
    text-decoration: none;
    text-align: center;

    margin-left: 65px;
    padding-top: 26px;

    margin-top: 74px;

    

}


#loja {
    text-align: center;
    color: #f4f4f4;

    font-weight: 900;
    font-size: 50px;
    margin-top: 306px;
    margin-left: 0;
    font-family: Lora;

    
}

#lojamain {

   justify-content: space-between;
   flex-wrap: wrap;
      
    max-width: 316px;
    margin-left: auto;
    margin-right: auto;

     padding-left: 0px;
    padding-right: 0px;
   

}

#vinil {
    
    width: 100%;
    max-width: 316px; 
    
    display: flex;

    
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    


    
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
   

    
    height: 203px;

}


#vinil img {
    width: 100%;
}



#viniltroia {
    
    width: 100%;
    max-width: 148px;

    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;


}

#vinildois {
    
    width: 100%;
    max-width: 148px; 

    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#caixa {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 65px;
    margin-bottom: 65px;
    padding-top: 0px;
}

   
#caixa img {
    width: 100%;
}




#cd {

    width: 100%;
    max-width: 316px; 
    
    display: flex;

    
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    


    
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
   

    
    height: 203px;
}

#cd img{

    width: 100%;
}

#cdseries {

    width: 100%;
    max-width: 148px;


    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#vinilcyclops {

    width: 100%;
    max-width: 148px;


    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;


}


.brancoloja {

    color: #f4f4f4;
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    font-weight: bold;
    margin-top: 23px;
    margin-bottom: 23px;
}

.amareloloja {

    color: #F9EBA0;
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    margin-top: 18px;


}

#waves {
    width: 100%;
}
    

}