*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

h1,h2,h3,h4,p{
	/* margin-bottom: 16px; */
	margin:0;
}
 
a{
	color: black;
	text-decoration:none;
}

a:hover{
	/* font-weight:bold; */
}

html,body{
    height: 100%;
}

body{
	color: black;
	padding:0;
	margin:0;
	font-family: 'Open Sans', Arial, sans-serif; 
    font-size:20px;
	/* overflow: hidden; */
	background-color: #f7f7f7;
	/* height: 100%; */
}

.scroll-container{
	position:relative;
    top: 0;
	overflow: hidden;
    height:100%;
}





	
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
					Header
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


div#header {
    height: 65px;
    width:100%;
    z-index: 100;
    position: fixed;

}
#header .title{
    position:relative;
    display: block;
    padding-left:40px;

}
#header h1 {
    margin: 0;
    font-size: 18px;
    font-family: "Montserrat";
    padding: 0;
    vertical-align: middle;
    line-height: 80px; 
}








/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                Landing
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* ---- landing ---- */


#landing{
    background-size: cover;
    height:100%;
}

#landing div.landing-text-container{
    height: 50%;
    padding-top:100px;
    display:block;
    z-index:1;
}

#landing div.landing-text{
    width: 50%;
    margin: 0 auto;
    padding-top:30px;
    display:block;
    position: relative;
}

#landing div.landing-image-container{
    height: 50%;
    margin: 0;
    padding:0;
    position:fixed;
    float: bottom;
    overflow:hidden;
}

#landing > img{
    z-index: -10;
    position:relative;
    bottom: 0px;
    margin: 0 auto;
}


#landing:after {
  content: "";
  display: block;
  clear: both;
}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        
                Media queries
        
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                xSmall
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

@media only screen and (max-width: 320px) and (orientation:portrait){

.desktop{
        display:none !important;
}

.mobilelandscape{
        display:none !important;
}

#header div.title {
    width:80%;
    padding:0px;
    margin: 0 auto;
}

#header h1 {
    font-size: 16px;
}


#landing div.landing-text-container{
    padding-top:40px;
}

    #landing div.landing-text{
    width: 80%;
    font-size: 18px;
}



}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                xSmall landscape
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

@media only screen and (max-width: 650px) and (orientation:landscape){

.desktop{
        display:none !important;
}

.item-mobile{
        display:none !important;
}

#header div.title {
    width:90%;
    padding:0px;
    margin: 0 auto;
}

#header h1 {
    font-size: 14px;
}


#landing div.landing-text-container{
    padding-top:40px;
}

    #landing div.landing-text{
    width: 90%;
    font-size: 16px;
}



}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                Small
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

@media only screen and (min-width:321px) and (max-width: 600px) and (orientation:portrait){

.desktop{
        display:none !important;
}

.mobilelandscape{
        display:none !important;
}

#header div.title {
    width:80%;
    padding:0px;
    margin: 0 auto;

}


#landing div.landing-text-container{
    padding-top:60px;
}

    #landing div.landing-text{
    width: 80%;
}




}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                Small landscape
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

@media only screen and (min-width: 651px) and (max-width: 800px) and (max-height:450px)and (orientation:landscape) {

.desktop{
        display:none !important;
}

.item-mobile{
        display:none !important;
}

#header div.title {
    width:80%;
    padding:0px;
    margin: 0 auto;

}

#header h1 {
    font-size: 16px;
}

#landing div.landing-text-container{
    padding-top:40px;
}

    #landing div.landing-text{
    width: 80%;
    font-size: 18px;
}






}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                > Small
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

@media only screen and (min-width: 601px) and (max-width: 900px) and (min-height:451px) {
    .item-mobile{
        display:none !important;
    }

    .mobilelandscape{
        display:none !important;
}


    #landing div.landing-text-container{
        padding-top:60px;
    }



}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                Medium
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media only screen and (min-width: 901px){
    .item-mobile{
        display:none !important;
    }

    .mobilelandscape{
        display:none !important;
}

    #landing div.landing-text{
    width: 500px;
}

}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                < Big
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/