/************************ RESET *********************************/
*		{ margin: 0; padding: 0; }
img, fieldset { border: none; }
:focus	{ outline: 0; }
a		{ text-decoration: none; }
.alt	{ display: none; }

/************************ TYPO *********************************/ 
body { font-family: 'Lato', Arial, Verdana, Helvetica, sans-serif; color: #fff; font-size: 16px; font-weight: 400; line-height: 22px; }

a       { color: #a5a5a5; outline: 0; }
a:hover, a:focus { color: #fff; text-decoration: none; outline: 0; }

b, strong { font-weight: 600; }

h1 { margin: 0 0 20px 0; color: #fff; font-family: 'Lato', Arial, Verdana, Helvetica, sans-serif; font-size: 30px; font-weight: 700; line-height: 34px; }
h2 { margin: 0 0 15px 0; color: #fff; font-family: 'Lato', Arial, Verdana, Helvetica, sans-serif; font-size: 26px; font-weight: 700; line-height: 30px; }
h3 { margin: 0 0 10px 0; color: #fff; font-family: 'Lato', Arial, Verdana, Helvetica, sans-serif; font-size: 20px; font-weight: 700; line-height: 24px; }

/************************ GENERAL *********************************/
html { background: #ffffff; height: 100%; }
body { background: #ffffff; height: 100%; }

/*transition link/button*/
a, button { transition: color .3s, background .3s; -webkit-transition: color .3s, background .3s; -o-transition: color .3s, background .3s; -moz-transition: color .3s, background .3s; }

/*photo hover*/
.hover { position: relative; overflow: hidden; }
.hover span { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; text-align: center; background: rgba(89,121,136,0.8); opacity: 0; z-index: 20; transition: opacity .3s; -webkit-transition: opacity .3s; -o-transition: opacity .3s; -moz-transition: opacity .3s; }
.hover span .fa { position: absolute; left: 0; top: 0; bottom: 0;  margin: auto; width: 100%; height: 50px; font-size: 50px; color: #fff; }
.hover span:hover { opacity: 1; }
.hover img { transition: transform .3s; -webkit-transition: -webkit-transform .3s; -o-transition: -o-transform .3s; -moz-transition: -moz-transform .3s; }
.hover:hover img { transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -moz-transform: scale(1.1); }

/*loader*/
.loader{ position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:999999; background:#fff; }
.loader img { position:absolute; width:64px; height:64px; top:0; bottom:0; left:0; right:0; margin:auto; animation: spin 2s infinite linear; -webkit-animation: spin 1s infinite linear; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); }  100% { -webkit-transform: rotate(360deg); } }

/************************ HOME BOX *********************************/
#home { float: left; width: 100%; height: 100%; background: url('../../img/website/BKG-home.jpg') no-repeat right top; position: relative; }
#home::after { position: absolute; z-index: 10; content: ""; background: #000; top: 0; bottom: 0; left: 0; width: 45%; }
#home .container { position: relative; z-index: 20; }

/*header*/
#header { float: left; width: 100%; margin: 95px 0 0 0; }
#logo-container { float: left; width: 295px; }
#logo { float: left; width: 100%; }
#logo-subtitle { float: left; width: 100%; margin: 30px 0 0 0; text-align: right; font-weight: 300; font-size: 18px; }
/*content*/
#content { float: left; width: 100%; margin: 100px 0 0 0; }
.box-inside { float: left; width: 100%; }
.box-inside a { display: block; padding: 55px 20px; background: #000; border: 2px solid #fff; font-size: 40px; line-height: 44px; font-family: 'Open Sans'; }
/*footer*/
#footer { float: left; width: 100%; margin: 40px 0 0 0; }
#footer-contact { float: left; width: 295px; text-align: right; color: #a5a5a5; }
#footer-message { float: right; width: 460px; font-size: 20px; font-weight: 300; text-shadow: 1px 1px #444; }
#footer-social { float: left; width: 100%; margin: 40px 0 0 0; text-align: right; }
#footer-social a { display: inline-block; width: 55px; height: 55px; margin: 0 0 10px 10px; line-height: 55px; font-size: 26px; border-radius: 50%; background: rgba(170,175,177,.8); color: #000; text-align: center; }
#footer-social a:hover { background: #fff; }

/************************ COOKIES *********************************/
.eucookie { padding: 7px 0; text-align: center; position: fixed; bottom: 0px; left: 0px; right: 0px; background: rgba(0,0,0,0.8); z-index:99; }
.eucookie p { font-size: 14px; margin: 0; color: #fff; }
.eucookie .close { color: #fff; opacity: 1; position: absolute; right: 10px; top: 25%; }

/************************ BOOTSTRAP EDIT *********************************/


/************************MEDIA QUERIES*************************/
@media (max-width: 480px) {  
  #home::after { width: 240px !important; }
  #logo-container { width: 200px !important; }
  #logo-subtitle { font-size: 14px; margin: 20px 0 0 0; }
  .box { padding: 0 5px !important; }
  .box-inside a { font-size: 18px !important; line-height: 22px !important; padding: 40px 10px !important; }
  #footer-contact { width: 200px !important; }
}

@media (max-width: 767px) {
  #home::after { width: 300px; }
  #logo-container { width: 250px; }
  .box-inside a { font-size: 30px; line-height: 34px; padding: 45px 15px; } 
  #footer-contact { width: 250px; } 
  #footer-message { width: 100%; margin-top: 30px; }
  #footer-social a { display: inline-block; width: 40px; height: 40px; line-height: 40px; font-size: 20px; }
}

@media (min-width: 768px) and (max-width: 991px) {  
  #logo-container { width: 190px; }  
  .box-inside a { font-size: 32px; line-height: 36px; padding: 45px 15px; }
  #footer-contact { width: 190px; }
  #footer-message { width: 300px; }
}

@media (min-width: 992px) and (max-width: 1200px) {    
  #logo-container { width: 245px; }
  #footer-contact { width: 245px; }
}

@media (min-width: 1200px) {
                            
}