/* COLOUR REFERENCES


#001c4c blu scuro
#007caf celeste chiaro
#464b56 grigio


*/

/* ==== GENERAL ==== */

body {
	font-family: 'proxima-nova', 'Raleway', Helvetica, sans-serif;
	font-size: 18px;
    color: #8c8c8c;
}

/* ==== GLOBAL ==== */

h1,h2,h3,h4,h5,h6 {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
	font-weight: bold;
	color: #007caf;
}

h1 {
	font-size: 3em;
}

h2 {
	font-size: 1.3em;
}

h4 {
	font-size: 18px;
}

p {
	font-size: 0.9em;
}

a:link, a:visited {
	color: #007caf;
	transition-duration: 0.5s;
}

a:hover {
	text-decoration: none;
	color: #fff;
	transition-duration: 0.5s;
}

button, input, .btn, a.btn {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
	color: white;
}

a.btn.btn-secondary.btn-lg.btn-block {
    background: #f5f5f5;
    margin-bottom: 95px;
    color: #007caf;
    font-weight:  bold;
    box-shadow: 0 0 5px 4px rgba(12, 12, 12,    0.2196078431372549);
}

a.btn.btn-secondary.btn-lg.btn-block:hover {
    background: white;
    color: #2196F3;
    box-shadow:  none;
}
/* === HEADER=== */

#header {
    margin: 20px 0;
}

#header img {
    width: 180px;
}

/* === LOGIN AREA === */

#login {
    background: #007caf;
}

#login-area {
    padding: 20px;
    position: absolute;
    right: 0;
    bottom: -45px;
}

#login-text p {
    color: white;
    text-align: justify;
}

#login-text h3 {
    color: white;
}

#login-row {
    position: relative;
}

#login-text-mobile {
    display: none;
}

.form-group {
    color: #007caf;
}

.form-control.input-lg {
    color: #007caf;
}

/* === MAIN CONTENT === */

#main-content {
    margin: 40px 0 20px;
}

#main-content p {
    text-align: justify;
}

#login-text {
    padding-bottom: 10px;
}

.col-sm-12.col-md-8.vertical {
}

#center h2 {
    text-align: center;
}

#center p {
    text-align: center;
}

p.awesome {
    width: 100%;
    text-align: center;
}

/* === Video Section === */

section#video {
    margin-bottom: 44px;
    background: url(../img/connection.jpg) repeat fixed;
    background-size: cover;

}

video {
    max-width: 800px;
    height: auto;
    display: block;
    margin: 70px auto;
    box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.19);
}

/* === Info section === */

#info {
    margin-bottom: 20px;
}

.caption p {
    font-size: 1em;
}

.caption i {
    color: #007caf;
    font-size: 4em;
    text-align: center;
}

.thumbnail {
    background: rgba(0, 0, 0, 0.07);
    border: none;
    height: 260px;
}

.thumbnail h4 {
    text-align: center;
}

.thumbnail h4:after {
    background: #007caf;
    height: 2px;
    width: 100%;
    content: '';
    display: inline-block;
}

.thumbnail p {
    color: #007caf;
}

/* === FOOTER === */

footer {
	background: #007caf;
	padding: 28px;
}

footer p {
    color: white;
    font-size: 0.7em;
    line-height: 10px;
}

div#copyright {
    text-align: center;
    margin-top: 20px;
}

footer h5 {
    color: white;
}

footer h5:after {
    background: #fff;
    height: 2px;
    width: 100%;
    content: '';
    display: inline-block;
}

footer a:link, a:visited {
    color: #fff;
    transition-duration: 0.5s;
    letter-spacing: 0.9px;
}

footer a:hover {
    transition-duration: 0.5s;
    color: #001c4c;
}

/* === MEDIA QUERIES === */

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

#login-area {
    bottom: -32px;
}

.col-sm-3.center {
    display: contents;
}

video {
    max-width: 500px;
}

}

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

#login {
    background: #007caf;
    padding: 20px;
    color: #fff;
}

#login-area {
    padding: 20px;
    position: relative;
    right: 0;
    bottom: 0;
    margin: 0 10px;
}

#login-text {
    display: none;
}

#login-text-mobile {
    display: table;
    text-align: justify;
}

#login-text-mobile h3 {
    text-align: center;
    color: #fff;
}


#description h2 {
    text-align: center;
}

#main-content {
    margin: 0;
}

video {
    max-width: 300px;
}

footer p {
    line-height: 20px;}
}

}