/*===================== 
    SITE DEVELOPER: KAROLINE DASSIE

	Main Colors
	- Blue: #244783
    - White: #fff
    - Black: #000
    - Yellow: #fdd92f


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

	SHOP

=======================*/
.hs-btn.hs-highlighted{color: #244783!important}


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

	RESET 

=======================*/
    article,aside,details,figcaption,figure,footer,header,hgroup,
    main,nav,section,summary {display: block;}
    pre {white-space: pre-wrap;}
    small { font-size: 80%;}

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

	BASE LAYOUT

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

    html, body {
        font-family: 'Open Sans', sans-serif;
        margin:0;
        padding:0;
        background:#fff;
        color:#000;
        -webkit-text-size-adjust: none;
    }
    svg:not(:root) {overflow: hidden;/*reset*/}
    .group:before,.group:after {content: ""; display: table;} .group:after {clear: both;}.group {zoom: 1;}	
    .hide-text {text-indent:  100%;white-space:  nowrap;overflow:  hidden;}	
    hr {-moz-box-sizing: content-box;box-sizing: content-box;border-style: solid;height: 0;color: #fff} 

    .column2 {width:48%; float:left; margin: 0 1%;  box-sizing: border-box;}
    .column3 {width:33.33333%; float:left; padding:0 ; box-sizing: border-box;}
    .column4 {width:23%; margin-right:2%; float:left;  box-sizing: border-box;}
    .column5 {width:20%; float:left; padding-right:1%; box-sizing: border-box;}
    .column6 {width:16%; float:left; padding-right:1%; box-sizing: border-box;}	

    .clear { clear: both;}

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

	TYPOGRAPHY

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

    h2, h4, h5, h6 {font-family: 'Open Sans Condensed', sans-serif;}
    h1, h2, h3, h4, h5, h6 {margin: 0;line-height:normal;}

    h1 {font-size: 29px; font-weight:900; text-transform: uppercase; color: #000; margin:0 0 20px 0}
    h2 {font-size: 26px; font-weight:900; text-transform: uppercase; color: #fdd92f}
    h3 {font-size: 18px; font-weight: 900;  color: #244783}
    h4 {font-size: 26px; font-weight: 900; text-transform: uppercase; color: #fff}
    h5 {font-size: 18px;}

    p {
        font-size:16px;
        line-height:1.5em;
        margin: 0;
        font-weight:400;
        color:#444444;
        }
    b{font-weight:600;}
    strong{font-weight:900;}
    .forceblue{color: #244783}

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

	LINKS

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

    a { text-decoration:none; color:inherit;}
    a:hover  {text-decoration: none;color: #244783;transition: all 300ms ease;} 

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

	HEADER

=======================*/
    .header{
        width:100%;
        margin:0 auto;
        background:rgba(255, 255, 255, 0.7);
        padding:2em 0;
        z-index: 1;
        position: relative;
        box-shadow:0px 1px 3px 0px #00000078;
    }

    .headerwrap{width:100%;margin:0 auto;}
    .logo{float:left;}
    .logo img{max-width: 350px; display: block; width:100%}
    .navbar{float: right; margin-top: 10px}

    #top{background: #000; padding: 5px 0; position: relative}

    .manulogostop{float:left; width: 270px;}
    .manulogostop img, .manulogostop a{display: inline-block;width: 100%; max-width: 110px; margin-right: 10px}

    .addressbar{color:#fff; width: calc(100% -  270px); float:right; position:relative; text-align: right; margin-top: 8px;}
    .addressbar p{display: inline-block; font-size:16px; font-weight: 600; color:#fff; font-family: 'Open Sans Condensed', sans-serif;}
    .addressbar p a{color:#fff!important;}
    .addressbar a:hover{color:#244783;}
    .addressbar .fa-phone {margin-left:20px;}

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

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

    .wrapper{width:96%;max-width:1100px;margin:0 auto;padding:0;}
    .container{width:100%;max-width:1760px;margin:0 auto;}
    
/*===================== 

	WELCOME

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

    .padit{padding:4em 0;}


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

	FOOTER

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

    .pagebottom{background:#000; padding: 2em 0; text-align: center}
    .pagebottom p, .pagebottom a{color:#fff; font-size:15px; font-weight: 600; text-transform: uppercase; font-family: 'Open Sans Condensed', sans-serif;}
    .pagebottom a:hover{color:#ccc;}

/*===================== 
	
    RESPONSIVE

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

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

}

 
/* iPads (portrait and landscape) ----------- */


@media screen and (max-width: 768px) {
 
    .addressbar {width:100% ;float:none;text-align: center; margin: 0 auto;}
    .manulogostop {width:100% ;float:none;text-align: center; margin: 0 auto;}
    
    .header {background: #fff; padding: 0; width:100% ;float:none;text-align: center; margin: 0 auto;}
    .logo {float: none; padding: 10px 0 }
    .logo img {max-width:280px; display: block; margin: 0 auto;}
    .navbar {width:100% ;float:none;text-align: center; border-top: 2px solid #000; margin: 0 auto; padding: 10px 0}
   
    .ultimo{margin: 1%!important;}
    .column2{float: none;width: 100%;margin: 0 auto}
}


/* iPhone 5, 6, 6+ ----------- */

@media screen and (max-width: 736px){
    .addressbar i {margin: 0;}
    .padit{padding:2em 0;}

}


/* Galaxy (portrait and landscape) ----------- */

@media screen and (max-width:640px){
    h1, h2, h3, h4, h5, h6, p{text-align: center}
    .padit{padding:1em 0;}
}


/* Smartphones (portrait and landscape) ----------- */

@media screen and (max-width: 480px){
     .addressbar p {display:block;}
    
    a.mainbuttons {
        width: 100%;
        float: none;
        margin: 1% auto;
    }
    .ultimo{margin: 1% auto!important;}
}
 
@media screen and (max-width: 320px){
    .manulogostop img, .manulogostop a {
        display: block;
        margin: 1px auto;
    }
}