@charset "utf-8";
/* Custom Styles for Padel Generation website created by Monsters Edge */

/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

a { transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; outline: none; color: #231f20;}
a:hover { text-decoration:none; color: #d5d867;}
a:focus { outline: none;}

/* SPACING CLASSES */
.pad30 { padding: 30px;}
.pad60 { padding: 60px;}
.pad90 { padding: 90px;}
.pad120 { padding: 120px;}
.padX30 { padding: 0 30px;}
.padX60 { padding: 0 60px;}
.padX90 { padding: 0 90px;}
.padX120 { padding: 0 120px;}
.padY30 { padding: 30px 0;}
.padY60 { padding: 60px 0;}
.padY90 { padding: 90px 0;}
.padY120 { padding: 120px 0;}

/* HEADINGS & TEXT */
h1,h2,h3,h4,h5,h6 { margin: 0 0 1rem 0;}
p { font-size: 1.1rem; margin: 0 0 1rem 0;}

/* GENERAL */
body { font-family: "Open Sans", sans-serif;}
#intro { background: url("../images/padel-court.jpg") center left no-repeat; background-size: cover; height: 650px; color: #fff; position: relative;}
#intro h1 { font-weight: 300; font-size: 3rem; margin: 0 0 20px 0;}
#intro h1 strong { font-weight: 600;}
#intro .overlay { width: 100%; height: 100%;}
#box { background-color: #4a6ea2; color: #fff; padding: 40px 60px;}
#box .icon { max-height: 50px;}
#box a { color: #fff; text-decoration: none;}
#box a:hover { color: #d5d867;}

/* NAVIGATION */


/* RESPONSIVE AMENDED STYLES */
/* #Tablet (Landscape)
================================================== */
/* Note: Design for a width of 1080px */
@media only screen and (min-width: 960px) and (max-width: 1080px) {
	#intro .overlay { background-color: rgba(74,110,162,0.5);}
}

/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#intro .overlay { background-color: rgba(74,110,162,0.75);}
}

/* #Mobile (Both)
================================================== */
/* Note: Landscape and portrait */
@media only screen and (max-width: 767px) {
	#intro { height: 400px;}
	#intro .overlay { background-color: rgba(74,110,162,0.75);}
	#intro h1 { font-size: 2rem;}
	#box { padding: 30px 30px;}
	#box .icon { max-height: 40px;}
	#box .icon.alt { margin-left: 8px;}
}

/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}
	
/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (min-width: 320px) and (max-width: 479px) {
 
}

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}