/* ================================================================================================ */
/* BACKGROUND COLORS */
/* ================================================================================================ */
.darkred-background{
background-color: #6e0306;
color: white;
}
.red-background{
background-color: #8a0408;
color: white;
}
.red-background-radial{
/* background: radial-gradient( rgb(255, 43, 15), #330002 ) ; */
background: radial-gradient(circle, rgba(255,42,15,1) 0%, rgba(143,4,8,1) 66%, rgba(84,1,5,1) 100%);
color: white
}
.darkblue-background{
background-color: #0d2b5c;
color: white;
}
.blue-background{
background-color: #397eed;
color: white;
}
.blue-background-radial{
background: radial-gradient( rgb(15,150,250), rgb(8, 4, 138) );
color: white;
}
.white-background{
background-color: white;
color: #292929;
}
.grey-background{
background-color: gainsboro;
color: #292929;
}
.lightblack-background{
background-color: #505050;
color: gainsboro;
}
.black-background{
background-color: #292929;
color: gainsboro;
}
/* ================================================================================================ */
/* ================================================================================================ */
/* SECTION */
/* ----------------------------------------------------- */
/* Header */
.section-header{
position: relative;
width: 100%;
margin-top: 80px;
margin-bottom: 20px;
text-align: center;
font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif !important;
font-size: 54px;
font-weight: 700;
}
.section-header--shadow{
filter:
drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3))
drop-shadow(0px -4px 6px rgba(0, 0, 0, 0.3));
}
/* ----------------------------------------------------- */
/* General Section */
.section{
position: relative;
margin-bottom: 0px;
height: auto;
}
.section-footer{
width: 100%;
height: 50px;
}
/* ================================================================================================ */
/* ================================================================================================ */
/* PAOLA SECTION */
.section--paola-layout{
position: relative;
display: grid;
grid-template-columns: 0.55fr 0.45fr;
}
.paola__box-1{
padding-left: 150px;
padding-top: 50px;
padding-bottom: 50px;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
z-index: 3;
}
.paola__box-1__card{
margin-bottom: 40px;
padding: 30px;
font-size: 18px;
line-height: 24px;
font-weight: 500;
color: white;
font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif !important;
background: linear-gradient(90deg, #1b4d9e ,#397eed);
filter :
drop-shadow(4px 4px 11px rgba(0, 0, 0, 0.3))
drop-shadow(4px -4px 11px rgba(0, 0, 0, 0.3))
drop-shadow(-4px 4px 11px rgba(0, 0, 0, 0.3))
drop-shadow(-4px -4px 11px rgba(0, 0, 0, 0.3));
}
.paola__box-1__card--sx{
margin-right: 25%;
}
.paola__box-1__card--dx{
margin-left: 25%;
}
.paola__box-2{
padding-right: 100px;
padding-left: 33px;
padding-top: 150px;
padding-bottom: 150px;
display:flex;
justify-content: center;
z-index: 3;
filter :
drop-shadow(4px 4px 11px rgba(0, 0, 0, 0.3))
drop-shadow(4px -4px 11px rgba(0, 0, 0, 0.3))
drop-shadow(-4px 4px 11px rgba(0, 0, 0, 0.3))
drop-shadow(-4px -4px 11px rgba(0, 0, 0, 0.3));
}
.paola__box-2__img{
object-fit: cover;
max-height: 750px;
width: 77%;
}
/* ================================================================================================ */
/* ================================================================================================ */
/* SERVIZI SECTION */
.section--servizi-layout{
display: flex;
justify-content: center;
}
.services__content{
width: 1200px;
display: grid;
/* SERVICE-REFACTOR */
grid-template-columns: 600px 600px;
grid-template-rows: 500px 500px 500px 500px;
/* PRE SERVICES-REFACTOR
grid-template-columns: 400px 400px 400px;
grid-template-rows: 400px 400px;
*/
z-index: 3;
}
.services__card{
margin: 50px;
font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif !important;
display: flex;
justify-content: center;
align-items: center;
}
.services__card--spanned{
grid-column-start: 1;
grid-column-end: 3;
}
.services__card__inner {
position: relative;
/* SERVICES-REFACTOR */
width: 400px;
height: 400px;
/* PRE SERVICES-REFACTOR
width: 100%;
height: 100%;
*/
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.services__card:hover .services__card__inner{
transform: rotateY(180deg);
}
.services__card--front{
position: absolute;
backface-visibility: hidden;
/* SERVICE-REFACTOR */
width: 380px;
height: 380px;
/* PRE SERVICES-REFACTOR
width: 280px;
height: 280px;
*/
background-color: #397eed;
padding: 10px;
}
.services__card--front__content{
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 0.35fr 0.65fr ;
}
.services__card--back{
position: absolute;
backface-visibility: hidden;
transform: rotateY(180deg);
/* SERVICE-REFACTOR */
width: 400px;
height: 400px;
/* PRE SERVICES-REFACTOR
width: 300px;
height: 300px;
*/
background: radial-gradient(#aed8eb, #95beff);
color: #081a38;;
font-size: 18;
border-width: 4px;
border-style: solid;
border-color:#0d2b5c;
display: flex;
justify-content: center;
align-items: center;
}
.services__card__description{
padding: 8px;
text-align: center;
}
.services__card__title{
box-sizing: border-box;
width: 100%;
margin: 0;
display:flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 24px;
font-weight: 700;
color: white;
background-color: #0d2b5c;
}
.services__card__icon{
display: flex;
justify-content: center;
align-items: center;
font-size: 120px;
color: #0d2b5c;
border-width: 4px;
border-style: solid;
border-color:#0d2b5c;
background: radial-gradient(#53b9e9, #397eed);
}
/* ================================================================================================ */
/* ================================================================================================ */
/* SECTION STUDIO */
.studio{
margin-bottom: 50px;
}
/* ----------------------------------------------------- */
/* studio card */
.studio__card{
position: relative;
display: flex;
justify-content: center;
padding-left: 100px;
padding-right: 100px;
z-index: 0;
}
.studio__card--foreground{
z-index: 3;
}
.studio__card--shadow{
/* TEST LOW FRAMERATE STUDIO SECTION */
/*
filter: drop-shadow(0px 5px 6px rgba(0, 0, 0, 0.3))
drop-shadow(4px -4px 6px rgba(0, 0, 0, 0.3))
drop-shadow(-4px 4px 6px rgba(0, 0, 0, 0.3))
drop-shadow(-4px -4px 6px rgba(0, 0, 0, 0.3));
*/
}
/* ----------------------------------------------------- */
/* studio card content */
.studio__card__content{
position: relative;
height: auto;
max-width: 1200px;
display: grid;
padding-top: 100px;
padding-bottom: 100px;
font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif !important;
}
.studio__card__content--layout-sx{
grid-template-columns: 0.45fr 0.55fr;
}
.studio__card__content--layout-dx{
grid-template-columns: 0.55fr 0.45fr ;
}
/* ----------------------------------------------------- */
/* studio card elements */
.studio__card__title{
position: relative;
z-index: -2;
text-align: center;
width: 100%;
/* background-color: #292929; */
/* color: lightgray; */
font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif !important;
font-size: 36px;
font-weight: 300;
margin:0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 5px;
padding-bottom: 5px;
filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3))
/* drop-shadow(0px -4px 6px rgba(0, 0, 0, 0.3)) */
drop-shadow(-4px 0px 6px rgba(0, 0, 0, 0.3))
drop-shadow(4px 0px 6px rgba(0, 0, 0, 0.3));
}
.studio__card__description{
padding: 12px;
padding-left: 25px;
font-size: 18px;
font-weight: 400;
}
.studio__card__image{
width: 100%;
height:auto;
filter: drop-shadow(0px 5px 6px rgba(0, 0, 0, 0.3))
drop-shadow(4px -4px 6px rgba(0, 0, 0, 0.3))
drop-shadow(-4px 4px 6px rgba(0, 0, 0, 0.3))
drop-shadow(-4px -4px 6px rgba(0, 0, 0, 0.3));
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
/* ----------------------------------------------------- */
/* GENERAL */
.section-header{
font-size: 42px;
box-sizing: border-box;
padding-left: 100px;
padding-right: 100px;
}
/* ----------------------------------------------------- */
/* SECTION PAOLA */
.section--paola-layout{
grid-template-columns: 1fr;
}
.paola__box-2{
order: -1;
padding:0px;
margin-top:150px;
margin-bottom:50px;
width: 100%;
}
.paola__box-2__img{
width:540px;
}
.paola__box-1{
padding:0;
padding-bottom: 150px;
}
.paola__box-1__card--sx{
margin-right: 0px;
padding-left: 150px;
padding-right: 320px;
}
.paola__box-1__card--dx{
margin-left: 0px;
padding-left: 320px;
padding-right: 150px;
}
/* ----------------------------------------------------- */
/* SECTION SERVICES */
.services__content{
width:760px;
/* SERVICES-REFACTOR */
grid-template-columns: auto;
grid-template-rows: 500px 500px 500px;
/* PRE SERVICES-REFACTOR
grid-template-columns: auto auto;
grid-template-rows: 400px 400px 400px;
*/
}
/* PRE SERVICES-REFACTOR
.services__card{
margin: 40px 40px 40px 40px ;
}
*/
/* ----------------------------------------------------- */
/* SECTION STUDIO */
.studio__card__content{
width: 600px;
display: flex;
padding-top: 50px;
padding-bottom: 50px;
align-items: center;
flex-direction: column;
}
.studio__card__info{
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
order: -1;
}
.studio__card__title{
width: 580px;
}
.studio__card__image{
width: 580px;
}
.services__card--spanned{
grid-column-start: 1;
grid-column-end: 2;
}
}
@media screen and (max-width: 768px) {
/* ----------------------------------------------------- */
/* GENERAL */
.section-header{
font-size: 42px;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 0px;
z-index: 4;
filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3))
drop-shadow(0px -4px 6px rgba(0, 0, 0, 0.3));
}
/* ----------------------------------------------------- */
/* SECTION PAOLA */
.section--paola-layout{
grid-template-columns: 1fr;
}
.paola__box-2{
order: -1;
padding:0px;
margin-top:150px;
margin-bottom:50px;
width: 100%;
}
.paola__box-2__img{
max-width:540px;
width: 100%;
}
.paola__box-1{
padding:0px;
padding-bottom: 150px;
}
.paola__box-1__card--sx{
margin-right: 0px;
padding-left: 8%;
padding-right: 8%;
}
.paola__box-1__card--dx{
margin-left: 0px;
padding-left: 8%;
padding-right: 8%;
}
/* ----------------------------------------------------- */
/* SECTION SERVICES */
.services__content{
/* SERVICES-REFACTOR */
width: 400px;
grid-template-columns: auto;
grid-template-rows: 460px 460px 460px 460px 460px 460px;
/* PRE SERVICES-REFACTOR
width:300px;
grid-template-columns: auto;
grid-template-rows: 400px 400px 400px 400px 400px 400px;
*/
}
.service__card{
justify-self: center;
}
.services__card{
margin: 50px 0px 50px 0px ;
}
.services__card--spanned{
grid-column-start: 1;
grid-column-end: 2;
}
/* ----------------------------------------------------- */
/* SECTION STUDIO */
.studio__card{
position: relative;
z-index: 3;
background-color: white;
padding: 5%;
}
.studio__card__content{
width: 600px;
display: flex;
padding-top: 50px;
padding-bottom: 50px;
align-items: center;
flex-direction: column;
}
.studio__card__info{
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
order: -1;
}
.studio__card__title{
max-width: 580px;
}
.studio__card__image{
max-width: 580px;
}
}
@media screen and (max-width: 400px) {
/* SERVICES-REFACTOR */
.services__content{
width: 100%;
grid-template-columns: auto;
grid-template-rows: auto auto auto auto auto auto;
}
/* SERVICES-REFACTOR */
.services__card--back{
box-sizing: border-box;
position: relative;
width: 100%;
height: auto;
z-index: 5;
transform: rotateY(0deg);
margin: 0px;
padding: 0px;
}
/* SERVICES-REFACTOR */
.services__card--front{
position: relative;
height: auto;
width: 100%;
margin: 0px;
padding: 0px;
}
.services__card--front__content{
position: relative;
height: auto;
}
/* SERVICES-REFACTOR */
.services__card__inner {
width: 100%;
margin: 0px;
padding: 0px;
height: auto;
}
.services__card:hover .services__card__inner{
transform: none;
}
.services__card--spanned{
grid-column-start: 1;
grid-column-end: 2;
}
}