/*!
 * Gridpak Beta CSS
 *
 * Generator - http://gridpak.com/
 * Created by @erskinedesign
 */
 
html,
div {
     margin: 0;
     padding:0;
 }
 
 body {
    background-color: #f7f7f7;
	color:#444;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    font-family: Helvetica, Arial, sans-serif;
	font-style:normal;
	font-weight:normal;
    font-size:14px;
    line-height: 24px;
    -webkit-font-smoothing: antialiased;
}

.georgia {
    font-family: Helvetica, Arial, sans-serif;
	font-weight:normal;
    font-style:normal;
	color:#666;
}

h1 {
	font-weight: bold;
	font-style:normal;
	display: block;
	text-shadow: 0px 1px 1px #fff;
}

input {
display: block;
border: 1px solid #a1a1a1;
background-color:transparent;
width:94%; padding-left:5%; padding-right:0;
outline:none;
}

input:focus {
	border:1px solid #3FDAF6;
	box-shadow:none;
}

textarea {
width:94%; border:0; padding-left:5%; padding-right:0;
display:block;
border: 1px solid #a1a1a1;
background-color:transparent;
outline:none;
}

textarea:focus {
	border:1px solid #3FDAF6;
}

::-moz-selection {
    background-color: #3fdaf6;
}

::selection {
    background-color: #3fdaf6;
}

a {
    color:#CCC;
    text-decoration:none;   
}

a.dark {
	color: #262626;	
}

a.blue {
	color:#3fdaf6 !important;	
}

a:hover {
    color:#FFF;   
}

a.dark:hover {
	color: #262626;	
}

.padding-reset {
	padding:0px !important;	
}

.padding-top-reset {
	padding-top:0px !important;
	margin-top:0px !important;
}
 
/*
Page is our center aligned 95% width container. We have set it's 'position' as relative
so that the Gridpak overlay will appear in the correct position. We have also updated
the gridpak.js file to use '.page' as it's container.
*/
.page {
     margin: 0 auto;
     max-width: 90%;
     overflow:hidden;
     position:relative;
}

/* Reusable column setup */
.col {
    border:0px solid rgba(0,0,0,0);
    float:left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -moz-background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;
    background-clip:padding-box !important;
	margin-bottom: 12px;
}

.szary {
	color:#CCC;	
}

.regular {
	text-shadow: 0px 0px 0px #fff !important;
	border-bottom:1px solid #CCC;
}



#content{
  width:100%;
  margin:0 auto;

}

.product img{
max-width:100%;

}

		.product{
			width:20%;
			display:block;
			float: left;
			margin:0 auto;
			text-align:center;
			padding-top:15px;
			padding-bottom:5px;
		}







    /* 1. 2 Column Grid 0px - 319px 
    ----------------------------------------------------------------------------- 
    
    Span 1: 50%
    Span 2: 100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 0px) and (max-width: 480px) {
		
		.logo {
             width:104px;
             height:101px;
             background: url(images/logo.png) no-repeat;
             margin-top:20px;
             z-index:999;
        }
		
		.headerbg {
    		width: auto;
    		height: 108px;
 			background: url(images/claim.png) no-repeat top left;
            margin-top:110px;  
			margin-bottom:30px;   
		}
		
		.button-wrapper-top {
            display:none;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        .col {
            border-left-width:0px;
        	padding:0 0px;
           
        }
		
		input {
            height: 40px;
            font-size:14px;
            color:#a1a1a1;
            margin-bottom: 10px;
        }
        
        textarea {
            height: 200px;
            font-size:14px;
            padding-top:15px;
            color:#a1a1a1;
            margin-bottom: 10px;
        }
        
       	h1 {
            font-size: 20px;
    		padding-bottom: 18px;
            margin-bottom:22px;
            margin-top:30px;  
   			border-bottom:1px solid #444;
            letter-spacing:-0.02em;
        }
		
		.quote {
            font-size:24px;
        }
		
		.footer {
			background-color:#333;
			width:100%;
			margin-top:30px;		
		}
		
		 .button-wrapper-bottom {
            display:block;
            width:100%;  
        }
        
        .round-button-bottom {
            display:block;
            width:100%;
            height:50px;
            margin-top: 10px;
            background-image: linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%);
            background-image: -o-linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%);
            background-image: -moz-linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%);
            background-image: -webkit-linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%);
            background-image: -ms-linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%); 
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            font-family:Georgia, "Times New Roman", Times, serif;
            font-size:20px;
            font-style:italic;
            font-weight: normal; 	
            opacity: 1;
            transition: opacity .15s ease-in-out;
            -moz-transition: opacity .15s ease-in-out;
            -webkit-transition: opacity .15s ease-in-out;
        }
        
        .round-button-bottom:hover {
         	opacity:0.75;  
        }
        
        
        .button-copy {
			display:block;
			text-align:center;
			width:100%;
			padding-top:12px;
        }
		
		.product img{
			max-width:85%;
			}


		.product{
			width:50%;
			display:block;
			float: left;
			margin:0 auto;
			text-align:center;
		}
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.
        
        .span_3,
        .my_semantic_class_name {
            ...
        }
        */
        
        .span_1 {
            width:50%;
        }
        /* Using .col to target ALL columns and make them 100% */
        .span_2,
        .col,
		.header,
		.navigation,
		.main_content,
		.clients {
            width:100%;
            margin-left:0;
        }
    }

    /* 2. 6 Column Grid 320px - 919px 
    ----------------------------------------------------------------------------- 
    
    Span 1: 15.0%
    Span 2: 32.0%
    Span 3: 49.0%
    Span 4: 66.0%
    Span 5: 83.0%
    Span 6: 1000%
    
    ----------------------------------------------------------------------------- */
    @media screen and (min-width: 481px) and (max-width: 700px) {
		
				body {
         	background-image: url(images/bg-top-5.png);
    		background-repeat: repeat-x;   
        }
		
		.logo {
             width:85px;
             height:83px;
             background: url(images/logo-mid.png) no-repeat;
             margin-top:20px;
             z-index:999;
        }
        
        .headerbg {
    		width: auto;
    		height: 391px;
 			background: url(images/blackpoint-main-graphic-5.png) no-repeat top center;
            margin-top:20px;     
		}
		
		.button-wrapper-top {
            display:block;
            position:absolute;
            top:240px;
            right:5%;
         	height:123px;
            width:170px;
            background: url(images/arrow.png) no-repeat right;  
        }
        
        .round-button-top {
            display:block;
         	background: url(images/roun-button.png) no-repeat;
            font-family:Georgia, "Times New Roman", Times, serif;
            font-size:22px;
            line-height:28px;
            padding: 33px 27px;
            font-style:italic;
            font-weight: normal;
            color:#454545;
            opacity: 1;
            transition: opacity .15s ease-in-out;
            -moz-transition: opacity .15s ease-in-out;
            -webkit-transition: opacity .15s ease-in-out;
        }
        
        
        .round-button-top:hover {
            opacity:0.85;
        }
        
        .button-wrapper-bottom {
            display:block;
            width:150px;
            background: url(images/arrow.png) no-repeat right;  
        }
        
        .round-button-bottom {
            display:block;
            width:100px;
            height:100px;
            margin-top: 20px;
            background-image: linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%);
            background-image: -o-linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%);
            background-image: -moz-linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%);
            background-image: -webkit-linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%);
            background-image: -ms-linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%); 
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50px;
            font-family:Georgia, "Times New Roman", Times, serif;
            font-size:22px;
            font-style:italic;
            font-weight: normal; 	
            opacity: 1;
            transition: opacity .15s ease-in-out;
            -moz-transition: opacity .15s ease-in-out;
            -webkit-transition: opacity .15s ease-in-out;
        }
        
        .round-button-bottom:hover {
         	opacity:0.75;  
        }
        
        
        .button-copy {
            padding:38px 0px 0px 18px;  
        }
		
		input {
            height: 40px;
            font-size:14px;
            color:#a1a1a1;
            margin-bottom: 10px;
        }
        
        textarea {
            height: 200px;
            font-size:14px;
            padding-top:15px;
            color:#a1a1a1;
            margin-bottom: 10px;
        }
        
        .col {
            margin-left:2%;
        	padding:0 2%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
		
		h1 {
            font-size: 20px;
    		padding-bottom: 18px;
            margin-bottom:22px;
            margin-top:30px;  
   			border-bottom:1px solid #444;
            letter-spacing:-0.02em;
        }
		
		.quote {
            font-size:30px;
            color:#3fdaf6 !important;
        }
		
		.footer {
			background-color:#333;
			width:100%;
			padding:30px 0px;
			margin-top:30px;		
		}
		.regular {
			margin-top:0px !important;
		}
		
		.product{
			width:33.3%;
			display:block;
			float: left;
			margin:0 auto;
			text-align:center;
		}
        
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.
        
        .span_3,
        .my_semantic_class_name {
            ...
        }
        */
        
        .span_1 {
            width:15.0%;
        }
        /*
        Here we have used our semantic names 'navigation' and 'media_block' and appended
        them next to their corresponding widths
        */
        .span_2,
        .navigation,
        .media_block,
		.adres,
		.email,
		.footer_head {
            width:32.0%;
        }
        .navigation {
        }
        .span_3 {
            width:49.0%;
        }
        .span_4,
        .main_content {
            width:66.0%;
        }
        .span_5 {
            width:83.0%;
        }
        .span_6,
        .header,
        .related_content,
		.clients {
            width:100%;
            margin-left:0;
        }
    }

    /* 3. 12 Column Grid 920px - Infinity 
    ----------------------------------------------------------------------------- 
    
    Span 1: 8.33333333333%
    Span 2: 16.6666666667%
    Span 3: 25.0%
    Span 4: 33.3333333333%
    Span 5: 41.6666666667%
    Span 6: 50.0%
    Span 7: 58.3333333333%
    Span 8: 66.6666666667%
    Span 9: 75.0%
    Span 10: 83.3333333333%
    Span 11: 91.6666666667%
    Span 12: 100%
    
    ----------------------------------------------------------------------------- */
		

	
    @media screen and (min-width: 701px) and (max-width: 919px) {
		
		body {
         	background-image: url(images/bg-top-9.png);
    		background-repeat: repeat-x;   
        }
		
		.logo {
             width:104px;
             height:101px;
             background: url(images/plain-logo.png) no-repeat;
             margin-top:20px;
             z-index:999;
        }
        
        .headerbg {
    		width: auto;
    		height: 503px;
 			background: url(images/blackpoint-main-graphic-9.png) no-repeat top center;
            margin-top:20px;     
		}
		
		.button-wrapper-top {
            display:block;
            position:absolute;
            top:300px;
            right:13%;
         	height:123px;
            width:170px;
            background: url(images/arrow.png) no-repeat right;  
        }
        
        .round-button-top {
            display:block;
         	background: url(images/roun-button.png) no-repeat;
            font-family:Georgia, "Times New Roman", Times, serif;
            font-size:22px;
            line-height:28px;
            padding: 33px 27px;
            font-style:italic;
            font-weight: normal;
            color:#454545;
            opacity: 1;
            transition: opacity .15s ease-in-out;
            -moz-transition: opacity .15s ease-in-out;
            -webkit-transition: opacity .15s ease-in-out;
        }
        
        
        .round-button-top:hover {
            opacity:0.85;
        }
        
        .button-wrapper-bottom {
            display:block;
            width:150px;
            background: url(images/arrow.png) no-repeat right;  
        }
        
        .round-button-bottom {
            display:block;
            width:100px;
            height:100px;
            margin-top: 20px;
            background-image: linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%);
            background-image: -o-linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%);
            background-image: -moz-linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%);
            background-image: -webkit-linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%);
            background-image: -ms-linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%); 
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50px;
            font-family:Georgia, "Times New Roman", Times, serif;
            font-size:22px;
            font-style:italic;
            font-weight: normal; 	
            opacity: 1;
            transition: opacity .15s ease-in-out;
            -moz-transition: opacity .15s ease-in-out;
            -webkit-transition: opacity .15s ease-in-out;
        }
        
        .round-button-bottom:hover {
         	opacity:0.75;  
        }
        
        
        .button-copy {
            padding:38px 0px 0px 18px;  
        }
		
		input {
            height: 40px;
            font-size:14px;
            color:#a1a1a1;
            margin-bottom: 10px;
        }
        
        textarea {
            height: 200px;
            font-size:14px;
            padding-top:15px;
            color:#a1a1a1;
            margin-bottom: 10px;
        }
        
        .col {
            margin-left:2%;
        	padding:0 2%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
		
		h1 {
            font-size: 20px;
    		padding-bottom: 18px;
            margin-bottom:22px;
            margin-top:30px;  
   			border-bottom:1px solid #444;
            letter-spacing:-0.02em;
        }
		
		.quote {
            font-size:30px;
            color:#3fdaf6 !important;
        }
		
		.footer {
			background-color:#444;
			width:100%;
			padding:30px 0px;
			margin-top:30px;		
		}
		.regular {
			margin-top:0px !important;
		}
		
		.product{
			width:25%;
			display:block;
			float: left;
			margin:0 auto;
			text-align:center;
		}
        
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.
        
        .span_3,
        .my_semantic_class_name {
            ...
        }
        */
        
        .span_1 {
            width:15.0%;
        }
        /*
        Here we have used our semantic names 'navigation' and 'media_block' and appended
        them next to their corresponding widths
        */
        .span_2,
        .navigation,
        .media_block,
		.adres,
		.email,
		.footer_head {
            width:32.0%;
        }
        .navigation {
        }
        .span_3 {
            width:49.0%;
        }
        .span_4,
        .main_content {
            width:66.0%;
        }
        .span_5 {
            width:83.0%;
        }
        .span_6,
        .header,
        .related_content,
		.clients {
            width:100%;
            margin-left:0;
        }
    }

    /* 3. 12 Column Grid 920px - Infinity 
    ----------------------------------------------------------------------------- 
    
    Span 1: 8.33333333333%
    Span 2: 16.6666666667%
    Span 3: 25.0%
    Span 4: 33.3333333333%
    Span 5: 41.6666666667%
    Span 6: 50.0%
    Span 7: 58.3333333333%
    Span 8: 66.6666666667%
    Span 9: 75.0%
    Span 10: 83.3333333333%
    Span 11: 91.6666666667%
    Span 12: 100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 920px) {
		
		body {
         	background-image: url(images/bg-top.png);
			background-repeat:repeat-x;
        }
		
		.logo {
             width:164px;
             height:101px;
             background: url(images/plain-logo.png) no-repeat;
             margin-top:20px;
             z-index:999;
        }
        
        .headerbg {
    		width: auto;
    		height: 568px;
 			background: url(images/blackpoint-main-graphic.png) no-repeat top center;
            margin-top:30px;   
		}
		
		.button-wrapper-top {
            display:block;
            position:absolute;
            top:370px;
            right:20%;
         	height:127px;
            width:170px;
            background: url(images/arrow.png) no-repeat right;  
        }
        
        .round-button-top {
            display:block;
         	background: url(images/roun-button.png) no-repeat;
            font-family:Georgia, "Times New Roman", Times, serif;
            font-size:22px;
            line-height:28px;
            padding: 33px 27px;
            font-style:italic;
            font-weight: normal;
            color:#454545;
            opacity: 1;
            transition: opacity .15s ease-in-out;
            -moz-transition: opacity .15s ease-in-out;
            -webkit-transition: opacity .15s ease-in-out;
        }
        
        
        .round-button-top:hover {
            opacity:0.85;
        }
        
        .button-wrapper-bottom {
            display:block;
            width:150px;
            background: url(images/arrow.png) no-repeat right;  
        }
        
        .round-button-bottom {
            display:block;
            width:100px;
            height:100px;
            margin-top: 20px;
            background-image: linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%);
            background-image: -o-linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%);
            background-image: -moz-linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%);
            background-image: -webkit-linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%);
            background-image: -ms-linear-gradient(bottom, rgb(63,219,246) 44%, rgb(169,237,251) 100%); 
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50px;
            font-family:Georgia, "Times New Roman", Times, serif;
            font-size:22px;
            font-style:italic;
            font-weight: normal; 	
            opacity: 1;
            transition: opacity .15s ease-in-out;
            -moz-transition: opacity .15s ease-in-out;
            -webkit-transition: opacity .15s ease-in-out;
        }
        
        .round-button-bottom:hover {
         	opacity:0.75;  
        }
        
        
        .button-copy {
            padding:38px 0px 0px 18px;  
        }
		
		input {
            height: 40px;
            font-size:14px;
            color:#a1a1a1;
            margin-bottom: 10px;
        }
        
        textarea {
            height: 200px;
            font-size:14px;
            padding-top:15px;
            color:#a1a1a1;
            margin-bottom: 10px;
        }
        
        .row {
            margin-left:-12px;
        }
        .col {
            border-left-width:12px;
        	padding:0 12px;
        }
		
		h1 {
            font-size: 22px;
     		padding-bottom: 18px;
            margin-bottom:22px;
            margin-top:30px;  
   			border-bottom:1px solid #444;
            letter-spacing:-0.02em;
        }
		
		.kontakt {
            font-size: 20px;
     		font-weight: bold;
        	font-variant:normal;
     		display: block;
     		color:#FFF;
    		padding-bottom: 18px;
            margin-bottom:22px; 
            text-shadow:none;	
            border-bottom:none;
            letter-spacing:-0.02em;
        }
		
		.quote {
            font-size:26px;
            color:#3fdaf6 !important;
        }
		
		.footer {
			background-color:#333;
			width:100%;
			padding:30px 0px;
			margin-top:30px;
			
		}
		.regular {
			margin-top:0px !important;
		}
        
		.product{
			width:20%;
			display:block;
			float: left;
			margin:0 auto;
			text-align:center;
		}
        
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.
        
        .span_3,
        .my_semantic_class_name {
            ...
        }
        */
        
        .span_1 {
            width:8.33333333333%;
        }
        .span_2, {
            width:16.6666666667%;
        }
        .span_3,
		.navigation,
		.footer_head {
            width:25.0%;
        }
        .span_4, 
		.related_content {
            width:33.3333333333%;
        }
        .span_5, .main_content {
            width:41.6666666667%;
        }
        .span_6 {
            width:50.0%;
        }
        .span_7 {
            width:58.3333333333%;
        }
        .span_8,  {
            width:66.6666666667%;
        }
        .span_9 {
            width:75.0%;
        }
        .span_10 {
            width:83.3333333333%;
        }
        .span_11 {
            width:91.6666666667%;
        }
        .span_12,
        .header,
		.clients {
            width:100%;
            margin-left:0;
        }
    }


    @media screen and (min-width: 1440px) {
		.page {
			 max-width: 1440px;
			 overflow:hidden;
			 position:relative;
		}
	}