/* general styles */
/* border-box --> width = element+border+padding */
*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
}

html,body {
	height:100%;
	font-family: 'Titillium Web', sans-serif !important;
}

a {
	color: #777;
	font-size: 14px;
}

button:focus, a, a:focus { 
	-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
	outline: none; 
}

/*================================================*/

/*
light 300
regular 400
medium 500
bold 700
*/


body {
	background-color:#fff; 
	color:#222;
}

.top-menu {
	height: 100px;
	position: fixed;
	top: 0;
	left:0;
	background-color: #fff;
	z-index: 2;
}

#logo {
	display: block;
	padding-top: 5px;
}

.button-container {
	position: absolute;
	right: 10px;
}

#red-button {
	width: 90%;
	height: 70px;
	margin: 15px auto;
	background-color: #246686;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
	font-weight: 400;
	border:none;
}

.main-area {
	position: absolute;
	top: 100px;
	left: 0;
	height: calc(100vh - 100px);
	min-height: calc(100vh - 100px);
	z-index: 1;
}

.nav-container {
	position: fixed;
	top: 100px;
	left: 0;
	z-index: 2;
}

nav {
	height: calc(100vh - 100px);
	background-color: rgb(248, 248,248);
	position: fixed;
	top: 100px;
	left: 0;
	width: 16.66666667%;
}

.navmenu-left {
	list-style: none;
	padding: 0;
	margin: 0
}

.navmenu-left li {
	list-style: none;
	margin: 0;
}

.menulinks {
	margin-top: 2px;
}

.menulinks:first-of-type {
	margin-top: 0;
}

.menulinks:hover {
	background-color: rgb(236,235,231);
}

.navmenu-left li>a {
	font-weight: 400;
	font-size: 14px;
	padding: 30px 0;
	padding-left: 15px;
	text-transform: uppercase;
	text-decoration: none;
	color: #246686;
	display: block;
}

.hover {
	background-color: rgb(236,235,231) !important;
}

.navsubmenu-left {
	background-color: rgb(236,235,231);
	display: none;
	margin: 0;
	padding: 0;
	padding-bottom: 30px;
	margin-bottom: 2px;
}

.navsubmenu-left li {
	padding: 5px 0;
	background-color: rgb(236,235,231);
}

.navsubmenu-left li>a{
	padding: 5px 0;
	padding-left: 30px;
	background-color: rgb(236,235,231);
	text-transform: none;
}

.nav-img {
	float: right;
	vertical-align: middle;
	padding-right: 5px;
}

.imggrande {
	height: calc(100vh - 100px);
	position: relative;
	background-size: cover;
	background-position: center center;
}

.imggrande-testo {
	position: absolute;
  	top: 50%;
  	transform: translateY(-50%);
  	display: block;
  	color: #fff;
  	max-width: 500px;
  	margin-left: 50px;
}

.imggrande-testo h1 {
	font-size: 45px;
	font-weight: 300;
	text-align: left;
	line-height: 40px;
}

.imggrande-testo h2 {
	font-size: 19px;
	font-weight: 300;
	text-align: justify;
	padding: 0 20px;
}

.contenutocolorato {
	margin: 15px;
	padding: 50px;
	padding-right: 60px;
	text-align: justify;
}

.contenutocolorato h2 {
	font-size: 28px;
	font-weight: 300;
}

.contenutocolorato h3 {
	font-size: 20px;
	font-weight: 300;
}

.contenutocolorato p {
	font-size: 16px;
	font-weight: 300;
}

.grigio-nero {
	background-color: rgb(248,248,248);
}

.grigio-nero-piccolo {
	background-color: rgb(248,248,248);
	padding: 15px;
}

.grigio-nero h2, .grigio-nero-piccolo h2 {
	color: #222;
}

.grigio-nero p, .descrizionecorso p {
	color: #777;
	text-align: justify;
}

.rosso-bianco {
	background-color: rgb(218, 12,28);
}

.rosso-bianco h2, p {
	color: #fff;
}

.rosso-bianco-piccolo {
	background-color: #246686;
	padding: 15px;
}

.rosso-bianco-piccolo h1, h2, p, a {
	color: #fff;
}

.rosso-bianco a, .rosso-bianco-piccolo a {
	color: #fff;
	font-size: 16px;
}

.rosso-bianco a:hover, .rosso-bianco-piccolo a:hover {
	font-weight: bold;
}

.grigio-nero p > a {
	color: #777;
}

.bianco-grigio, .bianco-grigio p {
	background-color: #fff;
	color: #777;
}

.contenutocolorato ul {
	padding: 0;
}

.contenutocolorato li {
	padding: 10px;
}

.contenutocolorato li>p>img {
	vertical-align: middle;
}

.contenutosfondo{
	background-size: cover;
	background-position: center;
}

.contenutosfondo p {
	background-color: transparent !important;
}

.mappa {
	padding-left: 15px;
}

.trefoto {
	padding-bottom: 50px;
}

.trefoto img {
	width: 100%;
	margin: 0 auto;
	padding: 0 3px;
	height: 100%;
}

.rettangolipiu ul {
	text-align: center;
}

.rettangolipiu {
	margin: 30px 0;
	width: 100%;
}

.rettangolipiu li {
	padding: 30px 0;
	margin: 1%;
	border: 1px rgb(218, 12,28) solid;
	width: 31%;
	display: inline-block;
}

.rettangolipiu li > p {
	color: rgb(218, 12,28);
	text-align: center;
	margin: 0;
	padding: 5px;
	position: relative;
	font-weight: 500;
	font-size: 17px;
}

.rettangolipiu li > p > .piu {
	position: absolute;
	bottom: -15px;
	right: 20px;
}

.rettangolipiu li {
	cursor: pointer;
}

#academy, #preventivo {
	background-color: rgb(218, 12,28);
}

#academy p, #preventivo p {
	color: #fff;
}



.recapiti p {
	background-color: #fff;
	color: #999bb6;
	font-size: 16px;
	padding-left: 50px;
	margin-top: 5px;
}

.recapiti p > strong {
	color: #246686;

}

.overlay {
	background:transparent;
	position:relative;
	width:100%; /* your iframe width */
	height:450px; /* your iframe height */
	top:450px; /* your iframe height */
	margin-top:-450px; /* your iframe height */
}

.formcontatto {
	margin: 30px 0;
}

.formcontatto input, .formcontatto textarea, .formcontatto button {
	width: 100%;
	margin: 10px 0;
}

.formcontatto button {
	box-shadow: none;
	border: none;
	background-color: rgba(0,0,0,0.2);
	color: rgba(0,0,0,0.5);
	padding:  10px 0;
}

.formcontatto textarea {
	min-height: 80px;
}

#mobilemenu {
	display: none;
	position: absolute;
	left: 0px;
	top: 20px;
}

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
	background-color: #246686;
}

#checkerror {
	color: rgb(218, 12,28);
	width: 100%;
	text-align: center;
	display: block;
	font-weight: 700;
}

#loginhome, #signedin {
	float: left;
	width: 50%;
	margin: 30px 0;
	display: block;
	min-height: 300px;
}

#calendariohome {
	margin: 25px 0; 
	width: 49%;
}

#calendariohome > h1 {
	color: rgb(218, 12,28);
}

.calendariocorsi {
	padding: 30px 0px;
	font-size: 16px;
	width: 50%;
	float: left;
}

.calendariocorsi a {
	padding: 10px 0;
}

.titolocorso {
	color: #222;
	text-transform: uppercase;
	font-size: 18px;
	padding-left: 20px;
}

.datacorso {
	color: rgb(218, 12,28);
	font-weight: 700;
}

.descrizionecorso {
	display: none;
	clear: both;
}

.descrizionecorso p {
	padding: 20px;
	padding-bottom: 50px;
}

#linkcalendario {
	text-decoration: none;
	font-weight: 700;
	margin-top: 100px;
	display: block;
	color: #777;
	font-size: 18px;
	padding-right: 20px;
}

.trefototesto {
	position: absolute;
    top: 70%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 18px;
    text-align: center;
}

#medicina, #sicurezza, #corsi {
	cursor: pointer;
}

.recapiti > p > a {
	color: #246686;
}

.loginform {
	width: 50%;
	margin: 20px 0;
	text-align: center;
}

.loginform input {
	margin-bottom: 10px;
}


.loginform button {
	box-shadow: none;
	border: none;
	background-color: rgba(0,0,0,0.2);
	color: rgba(0,0,0,0.5);
	padding:  10px 30px;
}

#signedin {
	padding: 0 50px;
}

#filelist {
	width: 100%;
	text-align: left;
	padding: 30px;
}

#socialicons {
	position: absolute;
	bottom: 30px;
	left: 0;
	height: 20px;
	text-align: center;
	width: 100%;
	display: none;
}

#socialicons i {
	padding: 0 10%;
	color: #246686;
	cursor: pointer;
}

.fc-event-container {
	cursor: pointer;
}

.modalframe {
    border: 0;
    padding: 5px;
    padding-top: 40px;
    width: 100%;
    height: 100%;
}

#footerbar {
	position: fixed;
	bottom: 0;
	text-align: center;
	height: 30px;
	background-color: #808080;
	color: #fff;
	width: 100%;
    padding-top: 5px;
    right: 0;
}

.rettangoloauto {
	width: 350px;
    height: 315px;
    margin: 15px;
    display: inline-block;
    width: 33%;
	border: 2px #246686 solid;
	min-width: 290px;
    max-width: 350px;
}

.rettangoloauto img {
	padding: 10px;
	margin-bottom: 30px;
}

.rettangoloauto span {
	text-align: center;
	display: block;
	padding: 0 10px;
	font-weight: 400;
	font-size: 16px;
	height: 35px;
	width: 100%;
}

.rettangoloauto span > strong {
	color: #246686;
	text-transform: uppercase;
	font-size: 18px;
}

.rettangoloauto:hover {
	cursor: pointer;
}

.listaauto {
	margin-bottom: 30px;
	text-align: center;
}

.contenutocolorato table {
	margin: 0 auto;
}

.contenutocolorato td {
	padding: 5px 10px;
}


/* media query == grid and getDeviceWidth() */

@media only screen and (max-width: 1200px) {
	/* m */
}

@media only screen and (max-width: 991px) {
	/* s */

	nav {
		width: 250px;
		position: fixed;
		left: -250px;
		z-index: 3;
	}

	#logo {
		padding-top: 5px;
		width: 70%;
		min-width: 100px;
		position: absolute;
		left: 100px;
		top: 20px;
	}

	#mobilemenu {
		display: block;
	}

}

@media only screen and (max-width: 767px) {
	/* x */

	.recapiti p {
		margin: 30px 0;
	}

	.trefoto > .x-10 {
		margin-left: 8.33333333%;
	}

	#red-button {
		font-size: 12px;
		padding: 5px;
	}

	.rettangolipiu li {
		width: 90%;
	}

	.calendariocorsi {
		padding: 30px 20px;
		width: 100%;
	}

	#loginhome, #signedin {
		width: 100%;
		min-height: 10px;
	}

	.datacorso {
		text-align: right;
	}

	.imggrande-testo h2, .contenutocolorato p, .grigio-nero p, .descrizionecorso p {
		text-align: left;
	}

	#calendariohome {
		width: 100%;
	}

	.imggrande-testo h1 {
    	font-size: 30px;
    }

    .imggrande-testo h2 {
    	font-size: 18px;
    }
}



@media screen and ( max-height: 635px ){
    .navmenu-left li>a {
    	padding: 20px 0;
    	padding-left: 16px;
    }

}

@media screen and ( max-height: 510px ){
    #socialicons {
    	display: none;
    }


}

@media screen and ( max-width: 330px ){
   .imggrande-testo h2 {
   		font-size: 15px;
   }

}