/* ********* TC ********** 

1. Fonts 
2. Base
3. Sections
	a. Header
	b. Nav
	c. Content
	d. Aside
	e. Footer
4. Media Queries
5. Browsers

**************************/ 



/* ***** 1. Fonts ***** */

/* Already in header */



/* ***** 2. Base ***** */

* {
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}


html, body {
	padding:0;
	position:relative;
	width:100%;
	height:100%;
	background-color:#f3f3f3;
	margin: 0;
	font-family:'Roboto', sans-serif;
}

.mrg {
	max-width:1560px;
	margin:0 auto;
}

.verticalAlignParent {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;
	height:100%;
}

.verticalAlignChild {
	width:100%;
}

p, li {
	font-size:14px;
	color:#333;
}

a.red {color:#dc1c2e;}

.cols {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-wrap: nowrap;
	justify-content:flex-start;
}

.col_1-3 {
	width:33.33%;
	padding:0 15px;
}

.btn {
	width:175px!important;
	height:45px;
	line-height:45px;
	box-shadow:none;
	border:1px solid transparent;
	cursor:pointer;
	font-size:18px;
	text-decoration: none;
}

.btn:after {
	content:'';
	display:block;
	height:1px;
	max-width:130px;
	margin:0 auto;
	width:100%;
	margin-top:-9px;
}

.btn.red {
	background-color:#dc1c2e!important;
	color:white!important;
	border-color:#ca181f!important;
}

.btn.red:hover {
	background-color:#b3161b!important;
	border-color:#941216!important;
}

.btn.red:after {
	background:white;
}

.red.mandatory {
	color:red;
	vertical-align: middle;
}

/***** 3. Sections ***** */

/* a. Nav */
nav {
	height:105px;
	background:white;
	position:relative;
	width:100%;
}

nav .mrg {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content:space-between;
	align-items: center;
	height:100%;
	padding:0 15px;
}

nav .burger {display:none;}
body.hideMenu nav .burger {display:block;}
body.hideMenu nav ul {display:none;}

nav ul li {display:inline-block;}

nav ul li a {
	color:#454545;
	text-decoration:none;
	padding:10px;
	margin-left:25px;
	border-bottom:1px solid transparent;
}

nav ul li a:hover {border-bottom:1px solid #454545;}
nav ul li.active a {border-bottom:1px solid #454545;}

nav .burger {
	display:none;
	position:relative;
	overflow:hidden;
	margin:0;
	padding:0;
	width:30px;
	height:30px;
	font-size:0;
	text-indent:-9999px;
	appearance:none;
	box-shadow:none;
	border-radius:0;
	border:none;
	cursor:pointer;
	transition:background 0.3s;
	background-color:#dc1c2e;
}

body.hideMenu nav .burger {background-color:#dc1c2e;}

nav .burger:focus{outline:none;	}
nav .burger:hover {background-color:#b3161b;}
nav .burger.active {background-color:#dfdfdf!important;}

nav .burger span {
	display:block;
	position:absolute;
	top:14px;
	left:4px;
	right:4px;
	height:2px;
	background:white;
	transition:background 0s 0.3s;
}

nav .burger.active span {
	background:none;
	transition:background 0s 0.3s;
}

nav .burger span:before,
nav .burger span:after {
	position:absolute;
	display:block;
	left:0;
	width:100%;
	height:2px;
	background-color:#fff;
	content: '';
	transition:background 0.3s, 0.3s;
	transition-delay: 0.3s 0s;
}

nav .burger.active span:before,
nav .burger.active span:after {
	transition-delay: 0.3s 0s;
}

nav .burger span:before {
	top:-8px;
	transition-property: top, transform;
}

nav .burger.active span:before {
	top:0;
	transform:rotate(45deg);
}

nav .burger span:after {
	top:8px;
	transition-property: bottom, transform;
}

nav .burger.active span:after {
	top:0;
	transform:rotate(-45deg);
}

nav ul li.active:after {
	content:'';
	width:100%;
	height:3px;
	background-color:#f3f3f3;
	position:absolute;
	bottom:-2px;
	left:0;
	z-index:2;
}

nav ul.active li.active a {
	font-weight:bold;
	border-bottom:none;
}

nav ul.active {
	display:block!important;
	position:absolute;
	background-color:#dc1c2e;
	width:100%;
	right:0;
	margin-top:0px;
	top:105px;
	border:0;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
}

nav ul.active li {
	border:0;
	border-bottom-width:1px;
	border-bottom-style:solid;
	border-bottom-color:rgba(255,255,255,0.3);
	display:block;
	text-align:center;
}

nav ul.active li:hover {background-color:#b3161b;}

nav ul.active li:last-child {
	border:none;
}


nav ul.active li.active:after {
	background-color:transparent;
}

nav ul.active li a {
	color:white;
	display:block;
	margin-left:0;
}

nav ul.active li a:hover {
	border-bottom-color:transparent;
}


/* b. Header */

header {
	height:640px;
	width:100%;
	background-size:cover;
}

header .verticalAlignParent {text-align:center;}

header .verticalAlignChild {
	padding:35px 0;
	background-color:rgba(0,0,0,0.6);
}

header .verticalAlignChild h1 {
	margin-bottom:15px;
	color:white;
	font-size:50px;
	line-height:55px;
	font-weight: normal;
}

/* c. Content */

content .mrg.withAside {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-wrap: nowrap;
	justify-content:space-between;
	align-items: stretch;
	margin-top:70px;
	padding:0 15px;
}

content .withAside p, content .withAside li {font-size:16px;}

content .mrg.withAside .main {flex-grow:2;width: calc(100% / 3 * 2);}
content .mrg.withAside aside {flex-grow:1;width: calc(100% / 3 * 1);}

.withAside h3 {
	font-size:36px;
	line-height:38px;
	color:#333;
	margin-top:0;
}

.withAside h3.inTxt {
	margin-top:60px;
}

.withAside h4 {
	font-size:22px;
	line-height:28px;
	color:#dc1c2e;
	margin-bottom:18px;
}

.withAside #content {width:calc(100% - 30px);}

.withAside ol li {margin-bottom:20px;}

.videoContainer {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow: hidden;
}

.videoContainer iframe, 
.videoContainer object,
.videoContainer embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

div[data-name="tranquillit"] li {margin-bottom:15px;}
div[data-name="tranquillit"] .videoContainer {margin-top:60px;}

form#contactForm {padding-right:30px;}
form#contactForm label {
	display:block;
	font-weight:bold;
	margin:30px 0 10px;
}

form#contactForm label:first-child {margin-top:0;}

form#contactForm input, 
form#contactForm textarea {
	width:calc(100% - 20px);
	padding:10px;
	border:1px solid #9f9f9f;
	color:#535353;
	font-family:'Roboto';
}
form#contactForm input.error, 
form#contactForm textarea.error {border-color:#dc1c2e;}

form#contactForm textarea {height:155px;}

#contact .col_1-2 {flex:1;}

#contact .loader, #contact .successMsg, #contact .problemMsg {
    display: none;
}

#contactForm label.error {
	color:#dc1c2e;
	font-weight:normal;
	margin:0;
	font-size:14px;
}

#contactForm button {
	margin-top: 30px;
	width:125px!important;
	padding-bottom:45px;
}

#contact .actions .successMsg, 
#contact .actions .problemMsg {
	margin-top: 50px;
}

.loader {
  	color: #dc1c2e;
  	font-size: 90px;
  	text-indent: -9999em;
  	overflow: hidden;
  	width: 1em;
 	height: 1em;
  	border-radius: 50%;
 	margin: 72px auto;
  	position: relative;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  	animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}

@-webkit-keyframes load6 {
  0% {box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}
  5%,
  95% {box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}
  10%,
  59% {box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;}
  20% {box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;}
  38% {box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;}
  100% {box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}
}

@keyframes load6 {
  0% {box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}
  5%,
  95% {box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}
  10%,
  59% {box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;}
  20% {box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;}
  38% {box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;}
  100% {box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}
}

@-webkit-keyframes round {
  0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}

@keyframes round {
  0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}


#map {
	height:475px;
	border:1px solid #9f9f9f;
	margin-top:30px;
}

/* d. Aside */

aside p a {
	text-decoration:none;
	color:#333;
}

aside p a:hover {color:#b3161b;}

aside .list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    color:#555;
	text-decoration:none;
}

aside .list-group a:hover {
    background-color: #f5f5f5;
}

/* e. Footer */

footer {
	background-color:#1A3668;
	width:100%;
	height:65px;
	margin-top:30px;
}

footer .mrg {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content:space-between;
	align-items: center;
	height:100%;
	padding:0 15px;
}

footer ul li {
	display:inline-block;
}

footer p {
	font-size:12px;
	color:white;
	margin:0;
}

footer a {
	font-size:12px;
	color:white;
	text-decoration:none;
}

footer ul a {
	margin-left:40px;
	text-transform: uppercase;
	color:#c1c1c1;
}

footer ul a:hover {
	color:white;
}

footer span.smaller {display:none;}


/* ***** 4. Media Queries ***** */

@media (max-width: 1250px) {
	.mrg {padding:0 30px!important;}
	footer span.smaller {display:block;}
	footer span.larger {display:none;}
	#contact .cols {flex-direction: column}
	#contact #contactForm {padding-right:0;}
}

@media (max-width: 1050px) {
	footer {height:auto;padding-top:15px;}
	footer .mrg {flex-direction:column;}
	footer p {text-align:center;}
	footer span.smaller {display:initial;}
	footer span.larger {display:initial;}
	footer ul {padding-left:0;}
	content .mrg.withAside {flex-direction:column;}
	content .mrg.withAside aside {margin-top:50px;}
	content .mrg.withAside #content {width:100%;}
	content .mrg.withAside h3 {font-size:30px;}
	content .mrg.withAside .main, 
	content .mrg.withAside aside {width:100%;}
}


@media (max-width: 875px) {
	header {height:450px;background-position:center;}
	header h1 {font-size:30px!important;line-height:35px!important;padding:0 30px;}
	#about h3 {font-size:30px;}
	#about p {font-size:14px;}
	.cols {flex-direction:column;align-items:center;}
	#contact .cols {align-items:initial;}
	.services div p {margin-bottom:65px;}
	.col_1-3.services {margin-bottom:50px;width:100%;max-width:300px;}
	footer ul {text-align:center;}
	footer ul li {padding:5px 15px;}
	footer ul li a {margin-left:0;}
	footer span.larger {display:none;}
	footer span.tiny {display:block;}
	footer span.medium {display:none;}
}


@media (max-width: 600px) {
	.col_1-3.services > a {display:none;}
	.withAside p {font-size:14px;}
	header #logo {width:60%;}
}

@media (max-width: 	500px)	 {
	nav img {width:50%;}
	
}


/* ***** 5. Browsers ***** */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE 10-11 */
    nav .burger {
     	position: absolute;
		right: 30px;
		margin-top: -15px;}
	}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) and (max-width: 1250px) {
     #contact .cols {display:block;}
}

@-moz-document url-prefix() { /* FF */
   nav .burger {
     	position: absolute;
		right: 30px;
		margin-top: -15px;}
	}
}